Fix TypeScript strict null check errors

Add optional chaining and null checks in build scripts to handle
potentially undefined array elements. Add style prop to Card, Badge,
and Placeholder components, and onClick prop to Text component to
support inline styling in screen components.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/sketchy/Badge.tsx

@@ -3,11 +3,12 @@ import React from 'react';
 interface BadgeProps {
   children: React.ReactNode;
   className?: string;
+  style?: React.CSSProperties;
 }
 
-export function Badge({ children, className = '' }: BadgeProps) {
+export function Badge({ children, className = '', style }: BadgeProps) {
   return (
-    <span className={`sketchy-badge ${className}`}>
+    <span className={`sketchy-badge ${className}`} style={style}>
       {children}
     </span>
   );

src/components/sketchy/Card.tsx

@@ -4,14 +4,15 @@ interface CardProps {
   children: React.ReactNode;
   className?: string;
   onClick?: () => void;
+  style?: React.CSSProperties;
 }
 
-export function Card({ children, className = '', onClick }: CardProps) {
+export function Card({ children, className = '', onClick, style }: CardProps) {
   return (
     <div
       className={`sketchy-card ${className}`}
       onClick={onClick}
-      style={onClick ? { cursor: 'pointer' } : undefined}
+      style={{ ...(onClick ? { cursor: 'pointer' } : {}), ...style }}
     >
       {children}
     </div>

src/components/sketchy/Placeholder.tsx

@@ -5,18 +5,20 @@ interface PlaceholderProps {
   height?: string | number;
   label?: string;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export function Placeholder({
   width = '100%',
   height = 100,
   label = 'Image',
-  className = ''
+  className = '',
+  style
 }: PlaceholderProps) {
   return (
     <div
       className={`sketchy-placeholder ${className}`}
-      style={{ width, height }}
+      style={{ width, height, ...style }}
     >
       {label}
     </div>

src/components/sketchy/Text.tsx

@@ -4,6 +4,7 @@ interface TextProps {
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  onClick?: () => void;
 }
 
 export function Title({ children, className = '', style }: TextProps) {
@@ -14,6 +15,6 @@ export function Subtitle({ children, className = '', style }: TextProps) {
   return <h2 className={`sketchy-subtitle ${className}`} style={style}>{children}</h2>;
 }
 
-export function Text({ children, className = '', style }: TextProps) {
-  return <p className={`sketchy-text ${className}`} style={style}>{children}</p>;
+export function Text({ children, className = '', style, onClick }: TextProps) {
+  return <p className={`sketchy-text ${className}`} style={style} onClick={onClick}>{children}</p>;
 }