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>

build.ts

@@ -33,7 +33,7 @@ Example:
   process.exit(0);
 }
 
-const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, g => g[1].toUpperCase());
+const toCamelCase = (str: string): string => str.replace(/-([a-z])/g, g => g[1]!.toUpperCase());
 
 const parseValue = (value: string): any => {
   if (value === "true") return true;
@@ -48,7 +48,7 @@ const parseValue = (value: string): any => {
 };
 
 function parseArgs(): Partial<Bun.BuildConfig> {
-  const config: Partial<Bun.BuildConfig> = {};
+  const config: Record<string, unknown> = {};
   const args = process.argv.slice(2);
 
   for (let i = 0; i < args.length; i++) {
@@ -82,14 +82,16 @@ function parseArgs(): Partial<Bun.BuildConfig> {
 
     if (key.includes(".")) {
       const [parentKey, childKey] = key.split(".");
-      config[parentKey] = config[parentKey] || {};
-      config[parentKey][childKey] = parseValue(value);
+      if (parentKey && childKey) {
+        config[parentKey] = config[parentKey] || {};
+        (config[parentKey] as Record<string, unknown>)[childKey] = parseValue(value);
+      }
     } else {
       config[key] = parseValue(value);
     }
   }
 
-  return config;
+  return config as Partial<Bun.BuildConfig>;
 }
 
 const formatFileSize = (bytes: number): string => {

scripts/extract-step-definitions.ts

@@ -60,8 +60,8 @@ function extractStepDefinitions(): StepDefinition[] {
 function extractFunctionBody(lines: string[], startLine: number): string {
   // Look for the closing }); which marks the end of a step definition
   for (let i = startLine; i < lines.length; i++) {
-    const line = lines[i].trim();
-    if (line === '});' || line.endsWith('});')) {
+    const line = lines[i]?.trim();
+    if (line === '});' || line?.endsWith('});')) {
       const extracted = lines.slice(startLine, i + 1);
       return extracted.join('\n');
     }

scripts/parse-features.ts

@@ -58,7 +58,7 @@ function parseGherkinContent(content: string, filePath: string): ParsedFeature |
   let contentStartIndex = 0;
 
   for (let i = 0; i < lines.length; i++) {
-    const line = lines[i].trim();
+    const line = lines[i]?.trim() ?? '';
     if (line.startsWith('#')) {
       contentStartIndex = i + 1;
       continue;

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>;
 }