@chemx/starter-kit 26.9.21-8 → 26.9.24-393

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

@@ -7,6 +7,10 @@ import { INPUT_ARCHETYPES } from './input-archetypes.js';
 import { LAYOUT_ARCHETYPES } from './layout-archetypes.js';
 import { DOMAIN_ARCHETYPES } from './domain-archetypes.js';
 import { STATUS_ARCHETYPES } from './status-archetypes.js';
+import { MINIMAL_ARCHETYPES } from './minimal-archetypes.js';
+import { matchArchetypeByVector } from './vector-matcher.js';
+
+export { matchArchetypeByVector };
 
 export const ALL_ARCHETYPES = [
   ...COLLECTION_ARCHETYPES,
@@ -16,7 +20,24 @@ export const ALL_ARCHETYPES = [
   ...STATUS_ARCHETYPES
 ];
 
-export const resolveArchetype = (slug = '', description = '') => {
+export const EXTENDED_ARCHETYPES = [
+  ...MINIMAL_ARCHETYPES,
+  ...ALL_ARCHETYPES
+];
+
+const isPartialMatch = (token, kw) => {
+  const isMinLength = token.length >= 3;
+  const isAffixMatch = token.startsWith(kw) || kw.startsWith(token);
+  return isMinLength && isAffixMatch;
+};
+
+export const resolveArchetype = (slug = '', description = '', explicitTemplate = '') => {
+  if (explicitTemplate) {
+    const templateNorm = String(explicitTemplate).toLowerCase().trim();
+    const exactMatch = EXTENDED_ARCHETYPES.find((a) => a.id === templateNorm || a.keywords.includes(templateNorm));
+    if (exactMatch) return exactMatch;
+  }
+
   const normalized = String(slug).toLowerCase().replace(/^(m-|a-|o-|t-|v-|use-)/, '');
   const slugTokens = normalized.split(/[-_]/).filter(Boolean);
   const descTokens = String(description)
@@ -40,7 +61,7 @@ export const resolveArchetype = (slug = '', description = '') => {
       for (const kw of archetype.keywords) {
         if (token === kw) {
           score += 12;
-        } else if (token.length >= 3 && (token.startsWith(kw) || kw.startsWith(token))) {
+        } else if (isPartialMatch(token, kw)) {
           score += 8;
         }
       }
@@ -53,7 +74,7 @@ export const resolveArchetype = (slug = '', description = '') => {
       for (const kw of archetype.keywords) {
         if (token === kw) {
           score += 7;
-        } else if (token.length >= 3 && (token.startsWith(kw) || kw.startsWith(token))) {
+        } else if (isPartialMatch(token, kw)) {
           score += 4;
         }
       }
@@ -65,10 +86,19 @@ export const resolveArchetype = (slug = '', description = '') => {
     }
   }
 
-  if (bestArchetype && highestScore > 0) {
+  const hasKeywordWinner = Boolean(bestArchetype && highestScore > 0);
+  if (hasKeywordWinner) {
     return bestArchetype;
   }
 
+  const hasDescription = Boolean(description && String(description).trim());
+  if (hasDescription) {
+    const vectorMatch = matchArchetypeByVector(description, 0.3);
+    if (vectorMatch) {
+      return vectorMatch.archetype;
+    }
+  }
+
   // Fallback to State Boundary (Archetype #22 in LAYOUT_ARCHETYPES)
   return LAYOUT_ARCHETYPES.find((a) => a.id === 'state-boundary') || ALL_ARCHETYPES[0];
 };

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

@@ -86,7 +86,7 @@ export interface ${pascal}State {
 `,
     buildController: (name, pascal) => `import { useState } from 'react';
 
-export const use${pascal}Controller = (options: { onSelect?: (id: string) => void } = {}) => {
+export const use${pascal}Controller = (options: { options?: readonly { id: string; label: string }[]; onSelect?: (id: string) => void } = {}) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
@@ -97,7 +97,7 @@ export const use${pascal}Controller = (options: { onSelect?: (id: string) => voi
     options.onSelect?.(id);
   };
 
-  return { isOpen, selectedId, toggle, select };
+  return { options: options.options || [], isOpen, selectedId, toggle, select };
 };
 `,
     buildReactBody: (name, pascal) => `      <div className="${name}__select" onClick={toggle}>

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

@@ -81,7 +81,7 @@ export interface ${pascal}State {
 `,
     buildController: (name, pascal) => `import { useState } from 'react';
 
-export const use${pascal}Controller = (options: { defaultTabId?: string; onTabChange?: (id: string) => void } = {}) => {
+export const use${pascal}Controller = (options: { tabs?: readonly { id: string; label: string }[]; defaultTabId?: string; onTabChange?: (id: string) => void } = {}) => {
   const [activeTabId, setActiveTabId] = useState<string>(options.defaultTabId || 'overview');
 
   const selectTab = (id: string) => {
@@ -89,7 +89,7 @@ export const use${pascal}Controller = (options: { defaultTabId?: string; onTabCh
     options.onTabChange?.(id);
   };
 
-  return { activeTabId, selectTab };
+  return { tabs: options.tabs || [{ id: 'overview', label: 'Overview' }], activeTabId, selectTab };
 };
 `,
     buildReactBody: (name, pascal) => `      <div className="${name}__tabs" role="tablist">

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

@@ -0,0 +1,131 @@
+/**
+ * Minimal & Prototyping Archetypes: Minimal Blank Slate, Controls Dock, Canvas Context
+ */
+
+export const MINIMAL_ARCHETYPE = {
+  id: 'minimal',
+  name: 'Minimal Blank Slate',
+  keywords: ['minimal', 'bare', 'blank', 'clean', 'simple', 'empty'],
+  destructure: 'isActive, toggleActive',
+  buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly isActive: boolean;
+}
+`,
+  buildProps: (name, pascal) => `import type { ReactNode } from 'react';
+
+export interface ${pascal}Props {
+  readonly className?: string;
+  readonly children?: ReactNode;
+  readonly defaultActive?: boolean;
+}
+`,
+  buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { defaultActive?: boolean } = {}) => {
+  const [isActive, setIsActive] = useState<boolean>(Boolean(options.defaultActive));
+
+  const toggleActive = () => {
+    setIsActive((prev) => !prev);
+  };
+
+  return { isActive, toggleActive };
+};
+`,
+  buildReactBody: (name) => `      <div className="${name}__content">
+        {children}
+      </div>`
+};
+
+export const CONTROLS_ARCHETYPE = {
+  id: 'controls',
+  name: 'Interactive Controls Dock',
+  keywords: ['controls', 'dock', 'toolbar', 'actions', 'slider', 'toggle', 'buttons'],
+  destructure: 'isEnabled, value, setEnabled, setValue, reset',
+  buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly isEnabled: boolean;
+  readonly value: number;
+}
+`,
+  buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly initialValue?: number;
+  readonly defaultEnabled?: boolean;
+  readonly onValueChange?: (value: number) => void;
+  readonly className?: string;
+}
+`,
+  buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { initialValue?: number; defaultEnabled?: boolean; onValueChange?: (value: number) => void } = {}) => {
+  const [isEnabled, setEnabled] = useState<boolean>(options.defaultEnabled ?? true);
+  const [value, setValueState] = useState<number>(options.initialValue ?? 0);
+
+  const setValue = (next: number) => {
+    setValueState(next);
+    options.onValueChange?.(next);
+  };
+
+  const reset = () => {
+    setValue(options.initialValue ?? 0);
+    setEnabled(options.defaultEnabled ?? true);
+  };
+
+  return { isEnabled, value, setEnabled, setValue, reset };
+};
+`,
+  buildReactBody: (name) => `      <div className="${name}__controls">
+        <button type="button" onClick={() => setEnabled(!isEnabled)}>
+          {isEnabled ? 'Enabled' : 'Disabled'}
+        </button>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          value={value}
+          onChange={(e) => setValue(Number(e.target.value))}
+        />
+        <button type="button" onClick={reset}>Reset</button>
+      </div>`
+};
+
+export const CANVAS_ARCHETYPE = {
+  id: 'canvas',
+  name: 'Canvas & Viewport Context',
+  keywords: ['canvas', 'webgl', 'three', 'render', 'stage', 'viewport', 'scene', 'graphics'],
+  destructure: 'canvasRef, isReady',
+  buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly isReady: boolean;
+}
+`,
+  buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly width?: number;
+  readonly height?: number;
+  readonly className?: string;
+}
+`,
+  buildController: (name, pascal) => `import { useState, useRef, useEffect } from 'react';
+
+export const use${pascal}Controller = () => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [isReady, setIsReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (ctx) setIsReady(true);
+  }, []);
+
+  return { canvasRef, isReady };
+};
+`,
+  buildReactBody: (name) => `      <canvas
+        ref={canvasRef}
+        className="${name}__canvas"
+      />`
+};
+
+export const MINIMAL_ARCHETYPES = [
+  MINIMAL_ARCHETYPE,
+  CONTROLS_ARCHETYPE,
+  CANVAS_ARCHETYPE
+];

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

@@ -22,7 +22,7 @@ export const STATUS_ARCHETYPES = [
 `,
     buildController: (name, pascal) => `import { useState } from 'react';
 
-export const use${pascal}Controller = (options: { onSearch?: (q: string) => void; onFilterChange?: (f: readonly string[]) => void } = {}) => {
+export const use${pascal}Controller = (options: { placeholder?: string; 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[]>([]);
@@ -46,7 +46,7 @@ export const use${pascal}Controller = (options: { onSearch?: (q: string) => void
     options.onSearch?.('');
   };
 
-  return { query, isSearching, activeFilters, handleQueryChange, toggleFilter, clear, setIsSearching };
+  return { query, isSearching, activeFilters, handleQueryChange, toggleFilter, clear, setIsSearching, placeholder: options.placeholder };
 };
 `,
     buildReactBody: (name, pascal) => `      <div className="${name}__search-bar">
@@ -74,7 +74,7 @@ export const use${pascal}Controller = (options: { onSearch?: (q: string) => void
 `,
     buildController: (name, pascal) => `import { useState } from 'react';
 
-export const use${pascal}Controller = (options: { value?: number | string; delta?: number; onRefresh?: () => void } = {}) => {
+export const use${pascal}Controller = (options: { label?: string; 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);
 
@@ -84,7 +84,7 @@ export const use${pascal}Controller = (options: { value?: number | string; delta
     options.onRefresh?.();
   };
 
-  return { value, delta, trend, setValue, setDelta, refresh };
+  return { label: options.label ?? 'Total', value, delta, trend, setValue, setDelta, refresh };
 };
 `,
     buildReactBody: (name, pascal) => `      <div className="${name}__card">

package/cli/generator-templates/archetypes/vector-matcher.js

@@ -0,0 +1,50 @@
+import { generateEmbedding, cosineSimilarity } from '../../embeddings/vectorizer.js';
+import { ALL_ARCHETYPES } from './index.js';
+
+let cachedVectors = null;
+
+const buildArchetypeText = (a) => {
+  const idWords = a.id.replace(/[-_]/g, ' ');
+  const kwWords = a.keywords.map((k) => k.replace(/[-_]/g, ' ')).join(' ');
+  const nameWords = (a.name || '').toLowerCase();
+  return `${a.id} ${idWords} ${nameWords} ${kwWords}`;
+};
+
+const getArchetypeVectors = () => {
+  if (cachedVectors) return cachedVectors;
+  cachedVectors = ALL_ARCHETYPES.map((a) => ({
+    archetype: a,
+    vector: generateEmbedding(buildArchetypeText(a))
+  }));
+  return cachedVectors;
+};
+
+export const matchArchetypeByVector = (descriptionText, minSimilarity = 0.25) => {
+  if (!descriptionText || typeof descriptionText !== 'string') return null;
+  const cleanDesc = descriptionText.trim();
+  if (cleanDesc.length === 0) return null;
+
+  const descVector = generateEmbedding(cleanDesc);
+  const archetypeVectors = getArchetypeVectors();
+
+  let bestMatch = null;
+  let highestSim = 0;
+
+  for (const item of archetypeVectors) {
+    const sim = cosineSimilarity(descVector, item.vector);
+    if (sim > highestSim) {
+      highestSim = sim;
+      bestMatch = item.archetype;
+    }
+  }
+
+  const isSimilaritySufficient = highestSim >= minSimilarity;
+  if (isSimilaritySufficient && bestMatch) {
+    return {
+      archetype: bestMatch,
+      similarity: Number(highestSim.toFixed(4))
+    };
+  }
+
+  return null;
+};

package/cli/generator-templates/archetypes/vector-matcher.spec.js

@@ -0,0 +1,25 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { matchArchetypeByVector } from './vector-matcher.js';
+
+test('vector-matcher: matches semantic descriptions to correct archetype', () => {
+  const chatMatch = matchArchetypeByVector('chat messages inbox thread conversation');
+  assert.ok(chatMatch);
+  assert.equal(chatMatch.archetype.id, 'chat-messaging');
+  assert.ok(chatMatch.similarity > 0.4);
+
+  const cartMatch = matchArchetypeByVector('shopping cart checkout billing payment invoice items');
+  assert.ok(cartMatch);
+  assert.equal(cartMatch.archetype.id, 'cart-billing');
+
+  const filterMatch = matchArchetypeByVector('search filter lookup query find records');
+  assert.ok(filterMatch);
+  assert.equal(filterMatch.archetype.id, 'search-filter');
+});
+
+test('vector-matcher: returns null for empty or irrelevant strings', () => {
+  assert.equal(matchArchetypeByVector(''), null);
+  assert.equal(matchArchetypeByVector(null), null);
+  const lowMatch = matchArchetypeByVector('qwerty asdfgh zxcvbn', 0.8);
+  assert.equal(lowMatch, null);
+});

package/cli/generator-templates/compact.js

@@ -0,0 +1,130 @@
+/**
+ * Compact Single-File Capsule Builder ("Liquid Mode")
+ * Bundles types, controller hook, and component view in a single file (< 80 LOC).
+ */
+
+import { toPascalCase } from './naming.js';
+
+export const buildCompactReact = (name, pascalName, archetype, options = {}) => {
+  const atomsPackage = options.atomsPackage || null;
+  const atomImport = atomsPackage ? `import { AtomButton } from '${atomsPackage}';\n` : '';
+
+  const rawProps = archetype && typeof archetype.buildProps === 'function'
+    ? archetype.buildProps(name, pascalName)
+    : `export interface ${pascalName}Props {\n  readonly className?: string;\n  readonly children?: ReactNode;\n}\n`;
+
+  const rawState = archetype && typeof archetype.buildState === 'function'
+    ? archetype.buildState(name, pascalName)
+    : `export interface ${pascalName}State {\n  readonly isActive: boolean;\n}\n`;
+
+  const rawController = archetype && typeof archetype.buildController === 'function'
+    ? archetype.buildController(name, pascalName)
+    : `export const use${pascalName}Controller = () => {\n  const [isActive, setIsActive] = useState<boolean>(false);\n  return { isActive };\n};\n`;
+
+  const destructure = archetype?.destructure || 'isActive';
+  let body = archetype && typeof archetype.buildReactBody === 'function'
+    ? archetype.buildReactBody(name, pascalName)
+    : `      <div className="${name}__content">\n        {children}\n      </div>`;
+
+  if (atomsPackage) {
+    body = body.replace(/<button\b/g, '<AtomButton').replace(/<\/button>/g, '</AtomButton>');
+  }
+
+  // Clean redundant imports from inlined controller, props, and state
+  const cleanedProps = rawProps
+    .replace(/^import\s+.*?;?\n/gm, '')
+    .trim();
+
+  const cleanedState = rawState
+    .replace(/^import\s+.*?;?\n/gm, '')
+    .trim();
+
+  const cleanedController = rawController
+    .replace(/^import\s+.*?;?\n/gm, '')
+    .trim();
+
+  return `import type { ReactNode } from 'react';
+import { useState, useMemo } from 'react';
+${atomImport}
+// --- Domain Types ---
+${cleanedProps}
+
+${cleanedState}
+
+// --- Co-located Controller Hook ---
+${cleanedController}
+
+// --- Component View ---
+export const ${pascalName} = ({ className = '', children, ...props }: ${pascalName}Props) => {
+  const { ${destructure} } = use${pascalName}Controller(props as any);
+
+  return (
+    <div className={\`${name} \${className}\`.trim()}>
+${body}
+    </div>
+  );
+};
+
+export default ${pascalName};
+`;
+};
+
+export const buildCompactVue = (name, pascalName, archetype) => {
+  const rawProps = archetype && typeof archetype.buildProps === 'function'
+    ? archetype.buildProps(name, pascalName)
+    : `export interface ${pascalName}Props {\n  readonly className?: string;\n}\n`;
+
+  return `<script setup lang="ts">
+import { ref } from 'vue';
+
+${rawProps.trim()}
+
+const props = withDefaults(defineProps<${pascalName}Props>(), {
+  className: ''
+});
+
+const isActive = ref(false);
+const toggle = () => {
+  isActive.value = !isActive.value;
+};
+</script>
+
+<template>
+  <div :class="['${name}', props.className]">
+    <div class="${name}__content">
+      <slot />
+    </div>
+  </div>
+</template>
+`;
+};
+
+export const buildCompactSvelte = (name, pascalName, archetype) => {
+  return `<script lang="ts">
+  let { className = '', children } = $props<{ className?: string; children?: any }>();
+  let isActive = $state(false);
+  const toggle = () => { isActive = !isActive; };
+</script>
+
+<div class="${name} {className}">
+  {@render children?.()}
+</div>
+`;
+};
+
+export const buildCompactCapsule = ({
+  capsuleName,
+  pascalName,
+  framework = 'react',
+  archetype = null,
+  atomsPackage = null
+}) => {
+  const fw = (framework || 'react').toLowerCase();
+  if (fw === 'vue') {
+    return buildCompactVue(capsuleName, pascalName, archetype);
+  }
+  if (fw === 'svelte') {
+    return buildCompactSvelte(capsuleName, pascalName, archetype);
+  }
+  return buildCompactReact(capsuleName, pascalName, archetype, { atomsPackage });
+};

package/cli/generator-templates/controller-converters.js

@@ -0,0 +1,93 @@
+import { parse } from '@babel/parser';
+import traverseModule from '@babel/traverse';
+
+const traverse = traverseModule.default || traverseModule;
+
+export const convertReactControllerToVue = (code) => {
+  let out = code.replace(/import\s*\{[^}]*\}\s*from\s*['"]react['"];?\n?/, "import { ref, computed } from 'vue';\n");
+
+  const stateVars = new Set();
+
+  out = out.replace(
+    /const\s*\[([a-zA-Z0-9_]+),\s*([a-zA-Z0-9_]+)\]\s*=\s*useState(?:<([^>]+)>)?\(([\s\S]*?)\);/g,
+    (match, varName, setterName, typeAnnotation, initVal) => {
+      stateVars.add(varName);
+      const typeStr = typeAnnotation ? `<${typeAnnotation}>` : '';
+      return `const ${varName} = ref${typeStr}(${initVal});\n  const ${setterName} = (val: any) => { ${varName}.value = typeof val === 'function' ? val(${varName}.value) : val; };`;
+    }
+  );
+
+  out = out.replace(/useMemo\(\s*\(\)\s*=>\s*([\s\S]*?),\s*\[[^\]]*\]\s*\)/g, 'computed(() => $1)');
+
+  try {
+    const ast = parse(out, { sourceType: 'module', plugins: ['typescript'] });
+    const replaceOffsets = [];
+
+    traverse(ast, {
+      Identifier(path) {
+        if (!stateVars.has(path.node.name)) return;
+        if (!path.isReferencedIdentifier()) return;
+        if (path.findParent((p) => p.isTSType() || p.isTypeAnnotation())) return;
+        if (
+          path.parent.type === 'MemberExpression' &&
+          path.parent.object === path.node &&
+          path.parent.property.name === 'value'
+        ) {
+          return;
+        }
+        const fnParent = path.getFunctionParent();
+        const retParent = path.findParent((p) => p.isReturnStatement());
+        if (retParent && retParent.getFunctionParent() === fnParent && fnParent?.parent?.type === 'VariableDeclarator') {
+          const declaratorId = fnParent.parent.id;
+          if (declaratorId?.name?.startsWith('use') || declaratorId?.name?.startsWith('create')) {
+            return;
+          }
+        }
+
+        replaceOffsets.push({
+          name: path.node.name,
+          start: path.node.start,
+          end: path.node.end
+        });
+      }
+    });
+
+    replaceOffsets.sort((a, b) => b.start - a.start);
+    for (const o of replaceOffsets) {
+      out = out.slice(0, o.start) + `${o.name}.value` + out.slice(o.end);
+    }
+  } catch {
+    for (const v of stateVars) {
+      const varRegex = new RegExp(`(?<![.\\w$])\\b${v}\\b(?!\\.value)(?!:)`, 'g');
+      out = out.replace(varRegex, `${v}.value`);
+    }
+  }
+
+  return out;
+};
+
+export const convertReactControllerToSvelte = (code, name, pascalName) => {
+  let out = code.replace(/import\s*\{[^}]*\}\s*from\s*['"]react['"];?\n?/, '');
+
+  out = out.replace(
+    /const\s*\[([a-zA-Z0-9_]+),\s*([a-zA-Z0-9_]+)\]\s*=\s*useState(?:<([^>]+)>)?\(([\s\S]*?)\);/g,
+    (match, varName, setterName, typeAnnotation, initVal) => {
+      const typeStr = typeAnnotation ? `<${typeAnnotation}>` : '';
+      return `let ${varName} = $state${typeStr}(${initVal});\n  const ${setterName} = (val: any) => { ${varName} = typeof val === 'function' ? val(${varName}) : val; };`;
+    }
+  );
+
+  out = out.replace(/useMemo\(\s*\(\)\s*=>\s*([\s\S]*?),\s*\[[^\]]*\]\s*\)/g, (match, body) => {
+    const trimmed = body.trim();
+    if (trimmed.startsWith('{')) {
+      return `$derived.by(() => ${trimmed})`;
+    }
+    return `$derived(${trimmed})`;
+  });
+
+  if (!out.includes(`create${pascalName}Controller`)) {
+    out += `\nexport const create${pascalName}Controller = use${pascalName}Controller;\n`;
+  }
+
+  return out;
+};

package/cli/generator-templates/controller.js

@@ -1,71 +1,9 @@
 import { resolveArchetype } from './archetypes/index.js';
-
-const convertReactControllerToVue = (code) => {
-  let out = code.replace(/import\s*\{[^}]*\}\s*from\s*['"]react['"];?\n?/, "import { ref, computed } from 'vue';\n");
-
-  const stateVars = [];
-  const declMap = new Map();
-
-  out = out.replace(
-    /const\s*\[([a-zA-Z0-9_]+),\s*([a-zA-Z0-9_]+)\]\s*=\s*useState(?:<([^>]+)>)?\(([\s\S]*?)\);/g,
-    (match, varName, setterName, typeAnnotation, initVal) => {
-      stateVars.push(varName);
-      const placeholder = `__DECL_STATE_${varName}__`;
-      const typeStr = typeAnnotation ? `<${typeAnnotation}>` : '';
-      declMap.set(placeholder, `const ${varName} = ref${typeStr}(${initVal});\n  const ${setterName} = (val: any) => { ${varName}.value = val; };`);
-      return placeholder;
-    }
-  );
-
-  out = out.replace(/useMemo\(\s*\(\)\s*=>\s*([\s\S]*?),\s*\[[^\]]*\]\s*\)/g, 'computed(() => $1)');
-
-  const returnIdx = out.lastIndexOf('return {');
-  if (returnIdx !== -1) {
-    let beforeReturn = out.slice(0, returnIdx);
-    const returnPart = out.slice(returnIdx);
-
-    for (const v of stateVars) {
-      const varRegex = new RegExp(`\\b${v}\\b(?!\\.value)(?!:)`, 'g');
-      beforeReturn = beforeReturn.replace(varRegex, (m, offset, str) => {
-        const prefix = str.slice(Math.max(0, offset - 13), offset);
-        if (prefix.includes('__DECL_STATE_')) return m;
-        return `${v}.value`;
-      });
-    }
-
-    out = beforeReturn + returnPart;
-  }
-
-  for (const [placeholder, decl] of declMap.entries()) {
-    out = out.replace(placeholder, decl);
-  }
-
-  return out;
-};
-
-const convertReactControllerToSvelte = (code, name, pascalName) => {
-  let out = code.replace(/import\s*\{[^}]*\}\s*from\s*['"]react['"];?\n?/, '');
-
-  out = out.replace(
-    /const\s*\[([a-zA-Z0-9_]+),\s*([a-zA-Z0-9_]+)\]\s*=\s*useState(?:<([^>]+)>)?\(([\s\S]*?)\);/g,
-    (match, varName, setterName, typeAnnotation, initVal) => {
-      const typeStr = typeAnnotation ? `<${typeAnnotation}>` : '';
-      return `let ${varName} = $state${typeStr}(${initVal});\n  const ${setterName} = (val: any) => { ${varName} = val; };`;
-    }
-  );
-
-  out = out.replace(/useMemo\(\s*\(\)\s*=>\s*([\s\S]*?),\s*\[[^\]]*\]\s*\)/g, '$derived($1)');
-
-  if (!out.includes(`create${pascalName}Controller`)) {
-    out += `\nexport const create${pascalName}Controller = use${pascalName}Controller;\n`;
-  }
-
-  return out;
-};
+import { convertReactControllerToVue, convertReactControllerToSvelte } from './controller-converters.js';
 
 export const buildController = (name, pascalName, options = {}) => {
   const fw = options.framework ? options.framework.toLowerCase() : 'react';
-  const archetype = resolveArchetype(name, options.description || options.desc);
+  const archetype = resolveArchetype(name, options.description || options.desc, options.template || options.archetype);
 
   if (archetype && typeof archetype.buildController === 'function') {
     const rawReactController = archetype.buildController(name, pascalName);

package/cli/generator-templates/react.js

@@ -3,7 +3,7 @@ import { resolveArchetype } from './archetypes/index.js';
 export const buildReactComponent = (name, pascalName, options = {}) => {
   const atomsPackage = options.atomsPackage || null;
   const hasController = options.hasController !== false;
-  const archetype = resolveArchetype(name, options.description || options.desc);
+  const archetype = resolveArchetype(name, options.description || options.desc, options.template || options.archetype);
 
   const atomImport = atomsPackage ? `import { AtomButton } from '${atomsPackage}';\n` : '';
   const controllerImport = hasController

package/cli/generator-templates/svelte.js

@@ -3,7 +3,7 @@ import { resolveArchetype } from './archetypes/index.js';
 export const buildSvelteComponent = (name, pascalName, options = {}) => {
   const atomsPackage = options.atomsPackage || null;
   const hasController = options.hasController !== false;
-  const archetype = resolveArchetype(name, options.description || options.desc);
+  const archetype = resolveArchetype(name, options.description || options.desc, options.template || options.archetype);
   const atomImport = atomsPackage ? `import { AtomButton } from '${atomsPackage}';\n` : '';
 
   const controllerImport = hasController