@chemx/starter-kit 26.9.20-228 → 26.9.20-390

package/cli/generator-templates/archetypes/input-archetypes.js

@@ -0,0 +1,193 @@
+/**
+ * Input & Capture Archetypes: Form Wizard, Dropdown Select, Toggle Switch, File Upload
+ */
+
+export const INPUT_ARCHETYPES = [
+  {
+    id: 'form-wizard',
+    name: 'Form & Wizard',
+    keywords: ['form', 'editor', 'wizard', 'stepper', 'signup', 'checkout', 'compose'],
+    destructure: 'values, errors, isSubmitting, step, setFieldValue, setStep, submit',
+    buildState: (name, pascal) => `export interface ${pascal}Values {
+  readonly [key: string]: unknown;
+}
+
+export interface ${pascal}State {
+  readonly values: ${pascal}Values;
+  readonly errors: Record<string, string>;
+  readonly isSubmitting: boolean;
+  readonly step: number;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly initialValues?: Record<string, unknown>;
+  readonly onSubmit?: (values: Record<string, unknown>) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { initialValues?: Record<string, unknown>; onSubmit?: (values: Record<string, unknown>) => void } = {}) => {
+  const [values, setValues] = useState<Record<string, unknown>>(options.initialValues || {});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [step, setStep] = useState<number>(1);
+
+  const setFieldValue = (field: string, val: unknown) => {
+    setValues((prev) => ({ ...prev, [field]: val }));
+    if (errors[field]) {
+      setErrors((prev) => {
+        const next = { ...prev };
+        delete next[field];
+        return next;
+      });
+    }
+  };
+
+  const submit = async () => {
+    setIsSubmitting(true);
+    try {
+      options.onSubmit?.(values);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return { values, errors, isSubmitting, step, setFieldValue, setStep, submit };
+};
+`,
+    buildReactBody: (name, pascal) => `      <form className="${name}__form" onSubmit={(e) => { e.preventDefault(); submit(); }}>
+        <div className="${name}__field">
+          <label>Input</label>
+          <input type="text" onChange={(e) => setFieldValue('input', e.target.value)} />
+        </div>
+        <button type="submit" disabled={isSubmitting}>{isSubmitting ? 'Submitting...' : 'Submit'}</button>
+      </form>`
+  },
+  {
+    id: 'dropdown-select',
+    name: 'Dropdown & Select',
+    keywords: ['dropdown', 'select', 'combobox', 'picker', 'popover'],
+    destructure: 'options = [], isOpen, selectedId, toggle, select',
+    buildState: (name, pascal) => `export interface ${pascal}Option {
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface ${pascal}State {
+  readonly isOpen: boolean;
+  readonly selectedId: string | null;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly options?: readonly { id: string; label: string }[];
+  readonly value?: string;
+  readonly onSelect?: (id: string) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { onSelect?: (id: string) => void } = {}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const toggle = () => setIsOpen((prev) => !prev);
+  const select = (id: string) => {
+    setSelectedId(id);
+    setIsOpen(false);
+    options.onSelect?.(id);
+  };
+
+  return { isOpen, selectedId, toggle, select };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__select" onClick={toggle}>
+        <span>{selectedId || 'Select option...'}</span>
+      </div>
+      {isOpen && (
+        <ul className="${name}__menu">
+          {(options || []).map((opt) => (
+            <li key={opt.id} onClick={() => select(opt.id)}>{opt.label}</li>
+          ))}
+        </ul>
+      )}`
+  },
+  {
+    id: 'toggle-switch',
+    name: 'Toggle & Controls',
+    keywords: ['toggle', 'switch', 'segmented', 'checkbox', 'radio'],
+    destructure: 'checked, toggle',
+    buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly checked: boolean;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly defaultChecked?: boolean;
+  readonly onChange?: (checked: boolean) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { defaultChecked?: boolean; onChange?: (val: boolean) => void } = {}) => {
+  const [checked, setChecked] = useState<boolean>(Boolean(options.defaultChecked));
+
+  const toggle = () => {
+    setChecked((prev) => {
+      const next = !prev;
+      options.onChange?.(next);
+      return next;
+    });
+  };
+
+  return { checked, toggle };
+};
+`,
+    buildReactBody: (name, pascal) => `      <button type="button" role="switch" aria-checked={checked} className={checked ? '${name}__switch ${name}__switch--on' : '${name}__switch'} onClick={toggle}>
+        <span className="${name}__thumb" />
+      </button>`
+  },
+  {
+    id: 'file-upload',
+    name: 'Upload & Dropzone',
+    keywords: ['upload', 'dropzone', 'file', 'attachment', 'asset', 'uploader'],
+    destructure: 'files, isUploading, progress, removeFile',
+    buildState: (name, pascal) => `export interface ${pascal}File {
+  readonly name: string;
+  readonly size: number;
+}
+
+export interface ${pascal}State {
+  readonly files: readonly ${pascal}File[];
+  readonly isUploading: boolean;
+  readonly progress: number;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly maxFiles?: number;
+  readonly onUpload?: (files: File[]) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+import type { ${pascal}File } from './types';
+
+export const use${pascal}Controller = () => {
+  const [files, setFiles] = useState<readonly ${pascal}File[]>([]);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
+
+  const removeFile = (name: string) => {
+    setFiles((prev) => prev.filter((f) => f.name !== name));
+  };
+
+  return { files, isUploading, progress, removeFile, setFiles, setIsUploading };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__dropzone">
+        <span>Drag & drop files here</span>
+      </div>
+      <ul className="${name}__file-list">
+        {files.map((f) => (
+          <li key={f.name}>{f.name} ({f.size}B) <button type="button" onClick={() => removeFile(f.name)}>×</button></li>
+        ))}
+      </ul>`
+  }
+];

package/cli/generator-templates/archetypes/layout-archetypes.js

@@ -0,0 +1,219 @@
+/**
+ * Layout & Structural Archetypes: Modal, Tabs, Inspector, State Boundary
+ */
+
+export const LAYOUT_ARCHETYPES = [
+  {
+    id: 'modal-dialog',
+    name: 'Modal & Dialog',
+    keywords: ['modal', 'dialog', 'sheet', 'drawer', 'popup', 'lightbox'],
+    destructure: 'isOpen, payload, open, close, confirm',
+    buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly isOpen: boolean;
+  readonly payload?: unknown;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly defaultOpen?: boolean;
+  readonly onClose?: () => void;
+  readonly onConfirm?: () => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { defaultOpen?: boolean; onClose?: () => void; onConfirm?: () => void } = {}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(Boolean(options.defaultOpen));
+  const [payload, setPayload] = useState<unknown>(null);
+
+  const open = (data?: unknown) => {
+    setPayload(data || null);
+    setIsOpen(true);
+  };
+
+  const close = () => {
+    setIsOpen(false);
+    setPayload(null);
+    options.onClose?.();
+  };
+
+  const confirm = () => {
+    options.onConfirm?.();
+    close();
+  };
+
+  return { isOpen, payload, open, close, confirm };
+};
+`,
+    buildReactBody: (name, pascal) => `      {isOpen && (
+        <div className="${name}__overlay" onClick={close}>
+          <div className="${name}__content" onClick={(e) => e.stopPropagation()}>
+            <div className="${name}__header">
+              <h3>Modal</h3>
+              <button type="button" onClick={close}>×</button>
+            </div>
+            <div className="${name}__actions">
+              <button type="button" onClick={close}>Cancel</button>
+              <button type="button" onClick={confirm}>Confirm</button>
+            </div>
+          </div>
+        </div>
+      )}`
+  },
+  {
+    id: 'navigation-tabs',
+    name: 'Navigation & Tabs',
+    keywords: ['nav', 'tabs', 'menu', 'breadcrumbs', 'pagination'],
+    destructure: 'tabs = [], activeTabId, selectTab',
+    buildState: (name, pascal) => `export interface ${pascal}Tab {
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface ${pascal}State {
+  readonly activeTabId: string;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly tabs?: readonly { id: string; label: string }[];
+  readonly activeTabId?: string;
+  readonly onTabChange?: (tabId: string) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { defaultTabId?: string; onTabChange?: (id: string) => void } = {}) => {
+  const [activeTabId, setActiveTabId] = useState<string>(options.defaultTabId || 'overview');
+
+  const selectTab = (id: string) => {
+    setActiveTabId(id);
+    options.onTabChange?.(id);
+  };
+
+  return { activeTabId, selectTab };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__tabs" role="tablist">
+        {(tabs || [{ id: 'overview', label: 'Overview' }]).map((t) => (
+          <button
+            key={t.id}
+            type="button"
+            role="tab"
+            aria-selected={activeTabId === t.id}
+            className={activeTabId === t.id ? '${name}__tab ${name}__tab--active' : '${name}__tab'}
+            onClick={() => selectTab(t.id)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>`
+  },
+  {
+    id: 'detail-inspector',
+    name: 'Detail & Inspector',
+    keywords: ['detail', 'inspector', 'sidebar', 'properties', 'pane'],
+    destructure: 'selectedEntityId, activeSection, isDirty, save, close',
+    buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly selectedEntityId: string | null;
+  readonly activeSection: string;
+  readonly isDirty: boolean;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly entityId?: string | null;
+  readonly onClose?: () => void;
+  readonly onSave?: () => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { entityId?: string | null; onClose?: () => void; onSave?: () => void } = {}) => {
+  const [selectedEntityId, setSelectedEntityId] = useState<string | null>(options.entityId || null);
+  const [activeSection, setActiveSection] = useState<string>('general');
+  const [isDirty, setIsDirty] = useState<boolean>(false);
+
+  const save = () => {
+    options.onSave?.();
+    setIsDirty(false);
+  };
+
+  const close = () => {
+    options.onClose?.();
+  };
+
+  return { selectedEntityId, activeSection, isDirty, setActiveSection, setIsDirty, save, close };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__inspector">
+        <div className="${name}__header">
+          <span>Entity: {selectedEntityId || 'None'}</span>
+          <button type="button" onClick={close}>×</button>
+        </div>
+        <div className="${name}__body">
+          <button type="button" disabled={!isDirty} onClick={save}>Save Changes</button>
+        </div>
+      </div>`
+  },
+  {
+    id: 'state-boundary',
+    name: 'State Boundary & Fallback',
+    keywords: ['empty', 'fallback', 'error-boundary', 'placeholder', 'offline'],
+    destructure: 'state, canProceed, descriptor, handleAction',
+    buildState: (name, pascal) => `export type ${pascal}State =
+  | { readonly status: 'idle' }
+  | { readonly status: 'loading'; readonly progress: number }
+  | { readonly status: 'active'; readonly activeId: string }
+  | { readonly status: 'fault'; readonly faultMessage: string };
+
+export interface ${pascal}Descriptor {
+  readonly text: string;
+  readonly className: string;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly title?: string;
+  readonly subtitle?: string;
+  readonly onAction?: () => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState, useMemo } from 'react';
+import type { ${pascal}State, ${pascal}Descriptor } from './types';
+
+interface ControllerOptions {
+  readonly initialState?: ${pascal}State;
+  readonly onAction?: () => void;
+}
+
+export const use${pascal}Controller = (options: ControllerOptions = {}) => {
+  const [state, setState] = useState<${pascal}State>(
+    options.initialState || { status: 'idle' }
+  );
+
+  const isIdle = state.status === 'idle';
+  const isPending = state.status === 'loading';
+  const canProceed = isIdle && !isPending;
+
+  const descriptor: ${pascal}Descriptor = useMemo(() => {
+    if (state.status === 'loading') {
+      return { text: 'Loading...', className: '${name}__badge ${name}__badge--pending' };
+    }
+    if (state.status === 'active') {
+      return { text: 'Active', className: '${name}__badge ${name}__badge--active' };
+    }
+    return { text: 'Ready', className: '${name}__badge ${name}__badge--ready' };
+  }, [state.status]);
+
+  const handleAction = () => {
+    if (!canProceed) return;
+    setState({ status: 'active', activeId: 'item-1' });
+    options.onAction?.();
+  };
+
+  return { state, canProceed, descriptor, handleAction };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__status">
+        <span className={descriptor.className}>{descriptor.text}</span>
+        <button type="button" disabled={!canProceed} onClick={handleAction}>Action</button>
+      </div>`
+  }
+];

package/cli/generator-templates/archetypes/status-archetypes.js

@@ -0,0 +1,241 @@
+/**
+ * Status, Feedback & Search Archetypes: Search Filter, KPI Metric, Toast, Media Player, Timer
+ */
+
+export const STATUS_ARCHETYPES = [
+  {
+    id: 'search-filter',
+    name: 'Input & Search Filter',
+    keywords: ['search', 'filter', 'query', 'find', 'lookup', 'keyword'],
+    destructure: 'query, isSearching, activeFilters, handleQueryChange, toggleFilter, clear, placeholder',
+    buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly query: string;
+  readonly isSearching: boolean;
+  readonly activeFilters: readonly string[];
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly placeholder?: string;
+  readonly onSearch?: (query: string) => void;
+  readonly onFilterChange?: (filters: readonly string[]) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { onSearch?: (q: string) => void; onFilterChange?: (f: readonly string[]) => void } = {}) => {
+  const [query, setQuery] = useState<string>('');
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const [activeFilters, setActiveFilters] = useState<readonly string[]>([]);
+
+  const handleQueryChange = (val: string) => {
+    setQuery(val);
+    options.onSearch?.(val);
+  };
+
+  const toggleFilter = (tag: string) => {
+    const next = activeFilters.includes(tag)
+      ? activeFilters.filter((t) => t !== tag)
+      : [...activeFilters, tag];
+    setActiveFilters(next);
+    options.onFilterChange?.(next);
+  };
+
+  const clear = () => {
+    setQuery('');
+    setActiveFilters([]);
+    options.onSearch?.('');
+  };
+
+  return { query, isSearching, activeFilters, handleQueryChange, toggleFilter, clear, setIsSearching };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__search-bar">
+        <input type="text" value={query} placeholder={placeholder || 'Search...'} onChange={(e) => handleQueryChange(e.target.value)} />
+        {query && <button type="button" onClick={clear}>Clear</button>}
+      </div>`
+  },
+  {
+    id: 'kpi-metric',
+    name: 'Card & KPI Metric',
+    keywords: ['kpi', 'metric', 'stat', 'counter', 'tile'],
+    destructure: 'label, value, delta, trend, refresh',
+    buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly value: number | string;
+  readonly delta: number;
+  readonly trend: 'up' | 'down' | 'neutral';
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly label?: string;
+  readonly value?: number | string;
+  readonly delta?: number;
+  readonly onRefresh?: () => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { value?: number | string; delta?: number; onRefresh?: () => void } = {}) => {
+  const [value, setValue] = useState<number | string>(options.value ?? 1284);
+  const [delta, setDelta] = useState<number>(options.delta ?? 12.5);
+
+  const trend: 'up' | 'down' | 'neutral' = delta > 0 ? 'up' : delta < 0 ? 'down' : 'neutral';
+
+  const refresh = () => {
+    options.onRefresh?.();
+  };
+
+  return { value, delta, trend, setValue, setDelta, refresh };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__card">
+        <span className="${name}__label">{label || 'Total Metric'}</span>
+        <h2 className="${name}__value">{value}</h2>
+        <span className={\`${name}__trend ${name}__trend--\${trend}\`}>{delta > 0 ? '+' : ''}{delta}%</span>
+      </div>`
+  },
+  {
+    id: 'notification-toast',
+    name: 'Notification & Toast',
+    keywords: ['toast', 'alert', 'banner', 'notice', 'snackbar'],
+    destructure: 'notifications, notify, dismiss',
+    buildState: (name, pascal) => `export interface ${pascal}Notification {
+  readonly id: string;
+  readonly type: 'info' | 'success' | 'warning' | 'error';
+  readonly message: string;
+}
+
+export interface ${pascal}State {
+  readonly notifications: readonly ${pascal}Notification[];
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly autoDismissMs?: number;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+import type { ${pascal}Notification } from './types';
+
+export const use${pascal}Controller = (options: { autoDismissMs?: number } = {}) => {
+  const [notifications, setNotifications] = useState<readonly ${pascal}Notification[]>([]);
+
+  const notify = (message: string, type: 'info' | 'success' | 'warning' | 'error' = 'info') => {
+    const id = String(Date.now());
+    setNotifications((prev) => [...prev, { id, type, message }]);
+    if (options.autoDismissMs) {
+      setTimeout(() => dismiss(id), options.autoDismissMs);
+    }
+  };
+
+  const dismiss = (id: string) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id));
+  };
+
+  return { notifications, notify, dismiss };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__tray">
+        {notifications.map((n) => (
+          <div key={n.id} className={\`${name}__toast ${name}__toast--\${n.type}\`}>
+            <span>{n.message}</span>
+            <button type="button" onClick={() => dismiss(n.id)}>×</button>
+          </div>
+        ))}
+      </div>`
+  },
+  {
+    id: 'media-player',
+    name: 'Media Player & Carousel',
+    keywords: ['player', 'carousel', 'gallery', 'slider', 'audio', 'video'],
+    destructure: 'currentIndex, isPlaying, total, next, prev, togglePlay',
+    buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly currentIndex: number;
+  readonly isPlaying: boolean;
+  readonly totalItems: number;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly itemCount?: number;
+  readonly onIndexChange?: (idx: number) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { itemCount?: number; onIndexChange?: (idx: number) => void } = {}) => {
+  const total = options.itemCount || 3;
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+
+  const next = () => {
+    setCurrentIndex((prev) => {
+      const nextIdx = (prev + 1) % total;
+      options.onIndexChange?.(nextIdx);
+      return nextIdx;
+    });
+  };
+
+  const prev = () => {
+    setCurrentIndex((prev) => {
+      const prevIdx = (prev - 1 + total) % total;
+      options.onIndexChange?.(prevIdx);
+      return prevIdx;
+    });
+  };
+
+  const togglePlay = () => setIsPlaying((p) => !p);
+
+  return { currentIndex, isPlaying, total, next, prev, togglePlay };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__viewer">
+        <span>Slide {currentIndex + 1} of {total}</span>
+        <div className="${name}__controls">
+          <button type="button" onClick={prev}>Prev</button>
+          <button type="button" onClick={togglePlay}>{isPlaying ? 'Pause' : 'Play'}</button>
+          <button type="button" onClick={next}>Next</button>
+        </div>
+      </div>`
+  },
+  {
+    id: 'timer-countdown',
+    name: 'Timer & Countdown',
+    keywords: ['timer', 'stopwatch', 'countdown', 'clock', 'schedule'],
+    destructure: 'remainingSeconds, isRunning, isComplete, start, pause, reset',
+    buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly remainingSeconds: number;
+  readonly isRunning: boolean;
+  readonly isComplete: boolean;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly durationSeconds?: number;
+  readonly onComplete?: () => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { durationSeconds?: number; onComplete?: () => void } = {}) => {
+  const initial = options.durationSeconds ?? 60;
+  const [remainingSeconds, setRemainingSeconds] = useState<number>(initial);
+  const [isRunning, setIsRunning] = useState<boolean>(false);
+
+  const start = () => setIsRunning(true);
+  const pause = () => setIsRunning(false);
+  const reset = () => {
+    setIsRunning(false);
+    setRemainingSeconds(initial);
+  };
+
+  const isComplete = remainingSeconds <= 0;
+
+  return { remainingSeconds, isRunning, isComplete, start, pause, reset };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__timer">
+        <h2>{remainingSeconds}s</h2>
+        <div className="${name}__actions">
+          <button type="button" onClick={isRunning ? pause : start}>{isRunning ? 'Pause' : 'Start'}</button>
+          <button type="button" onClick={reset}>Reset</button>
+        </div>
+      </div>`
+  }
+];

package/cli/generator-templates/controller.js

@@ -1,4 +1,12 @@
-export const buildController = (name, pascalName) => `import { useState, useMemo } from 'react';
+import { resolveArchetype } from './archetypes/index.js';
+
+export const buildController = (name, pascalName) => {
+  const archetype = resolveArchetype(name);
+  if (archetype && typeof archetype.buildController === 'function') {
+    return archetype.buildController(name, pascalName);
+  }
+
+  return `import { useState, useMemo } from 'react';
 import type { ${pascalName}State, ${pascalName}Descriptor } from './types';
 
 interface ControllerOptions {
@@ -34,3 +42,4 @@ export const use${pascalName}Controller = (options: ControllerOptions = {}) => {
   return { state, canProceed, descriptor, handleAction };
 };
 `;
+};