@chemx/starter-kit 26.9.16-41 → 26.9.17-309

package/cli/audit-preflight.d.ts

@@ -0,0 +1,16 @@
+export interface PreflightResult {
+  readonly targetDir: string;
+  readonly fast: boolean;
+  readonly fileList: readonly string[] | null;
+}
+
+export interface PreflightOptions {
+  readonly customDir?: string | null;
+  readonly defaultDir?: string;
+  readonly cwd?: string;
+}
+
+export declare function detectCandidateDirectories(cwd?: string): string[];
+export declare function resolveGitAuditScope(cwd?: string): { ok: boolean; files: string[] };
+export declare function getGitChangedFiles(cwd?: string): string[];
+export declare function runAuditPreflight(rawArgs: readonly string[], options?: PreflightOptions): Promise<PreflightResult>;

package/cli/audit-preflight.js

@@ -0,0 +1,85 @@
+import { hasGum, gumChoose, promptQuestion } from './terminal.js';
+import { promptAuditScope } from './audit-preflight-scope.js';
+import { isNonInteractiveSession } from './audit/rules-predicates.js';
+import { resolveGitAuditScope } from './audit-preflight-git.js';
+
+export { detectCandidateDirectories } from './audit-preflight-scope.js';
+export { resolveGitAuditScope, getGitChangedFiles } from './audit-preflight-git.js';
+
+const DEPTH_OPTIONS = [
+  '🔬 Full AST Audit (Deep molecular analysis, AST visitors, slop, patterns)',
+  '⚡ Fast Scan (Instant line-budget, token burn, and file metrics)'
+];
+
+const promptAuditDepth = async (rawArgs) => {
+  const hasFastFlag = rawArgs.includes('--fast') || rawArgs.includes('--quick');
+  const hasFullFlag = rawArgs.includes('--full') || rawArgs.includes('--deep');
+
+  if (hasFastFlag) return true;
+  if (hasFullFlag) return false;
+
+  let depthChoice = '';
+  if (hasGum()) {
+    depthChoice = gumChoose(DEPTH_OPTIONS, 'Select Audit Depth:');
+  } else {
+    process.stdout.write('\n' + DEPTH_OPTIONS.map((opt, i) => ` ${i + 1}. ${opt}`).join('\n') + '\n\n');
+    const ans = await promptQuestion(`Select audit depth [1-${DEPTH_OPTIONS.length}]: `);
+    const index = parseInt(ans, 10) - 1;
+    depthChoice = DEPTH_OPTIONS[index] || '';
+  }
+
+  const isCancelled = !depthChoice;
+  if (isCancelled) return null;
+
+  return depthChoice.includes('Fast');
+};
+
+export const runAuditPreflight = async (rawArgs, options = {}) => {
+  const { customDir = null, defaultDir = 'src', cwd = process.cwd() } = options;
+
+  const isNonInteractive = isNonInteractiveSession(rawArgs);
+  const hasTty = Boolean(process.stdin.isTTY && process.stdout.isTTY);
+  const hasYesFlag = rawArgs.includes('-y') || rawArgs.includes('--yes');
+  const isInteractive = !isNonInteractive && hasTty && !hasYesFlag;
+
+  const hasExplicitDir = Boolean(customDir) || rawArgs.some((arg) => arg.startsWith('--dir='));
+  const hasExplicitGit = rawArgs.includes('--git') || rawArgs.includes('--changed');
+  const hasExplicitFast = rawArgs.includes('--fast') || rawArgs.includes('--quick');
+  const hasExplicitFull = rawArgs.includes('--full') || rawArgs.includes('--deep');
+  const isFullySpecified = (hasExplicitDir || hasExplicitGit) && (hasExplicitFast || hasExplicitFull);
+
+  if (!isInteractive || isFullySpecified) {
+    const fast = hasExplicitFast;
+    const fileList = hasExplicitGit ? resolveGitAuditScope(cwd).files : null;
+    return { targetDir: customDir || defaultDir, fast, fileList };
+  }
+
+  process.stdout.write('\n\x1b[1m\x1b[38;5;45m⚡ Chemical X Protocol\x1b[0m \x1b[38;5;220mInteractive Pre-Flight\x1b[0m\n\n');
+
+  let targetDir = customDir || defaultDir;
+  let fileList = null;
+
+  const needsScopePrompt = !hasExplicitDir && !hasExplicitGit;
+  if (needsScopePrompt) {
+    const scopeResult = await promptAuditScope(defaultDir, rawArgs, cwd);
+    if (!scopeResult) {
+      process.exit(0);
+    }
+    targetDir = scopeResult.targetDir;
+    fileList = scopeResult.fileList;
+  } else if (hasExplicitGit) {
+    fileList = resolveGitAuditScope(cwd).files;
+  }
+
+  const depthResult = await promptAuditDepth(rawArgs);
+  if (depthResult === null) {
+    process.exit(0);
+  }
+  const fast = depthResult;
+
+  const modeLabel = fast ? 'Fast line-budget scan' : 'Full molecular AST audit';
+  const targetLabel = fileList ? `${fileList.length} git modified file(s)` : targetDir;
+  process.stdout.write(`\n\x1b[36m⚡ Starting ${modeLabel} for ${targetLabel}...\x1b[0m\n\n`);
+
+  return { targetDir, fast, fileList };
+};

package/cli/audit-preflight.spec.js

@@ -0,0 +1,115 @@
+import test from 'node:test';
+import assert from 'node:assert';
+import { isSourceFilePath, parseGitStatusOutput } from './audit-preflight-git.js';
+import { detectCandidateDirectories } from './audit-preflight-scope.js';
+import { runAuditPreflight } from './audit-preflight.js';
+import { scanTree, runAudit } from './audit.js';
+import { auditCode } from './audit/rules.js';
+
+test('isSourceFilePath: correctly validates source files and excludes tests', () => {
+  assert.strictEqual(isSourceFilePath('src/app.tsx'), true);
+  assert.strictEqual(isSourceFilePath('cli/index.js'), true);
+  assert.strictEqual(isSourceFilePath('components/card.vue'), true);
+  assert.strictEqual(isSourceFilePath('ui/button.svelte'), true);
+  assert.strictEqual(isSourceFilePath('src/app.test.tsx'), false);
+  assert.strictEqual(isSourceFilePath('src/app.spec.js'), false);
+  assert.strictEqual(isSourceFilePath('dist/bundle.min.js'), false);
+  assert.strictEqual(isSourceFilePath('types/index.d.ts'), false);
+  assert.strictEqual(isSourceFilePath('README.md'), false);
+});
+
+test('parseGitStatusOutput: extracts clean file paths from git porcelain output', () => {
+  const output = [
+    ' M src/components/card.tsx',
+    'A  cli/new-command.js',
+    '?? scripts/scratch.ts',
+    ' D old-file.js',
+    '"quoted/path/with space.ts"'
+  ].join('\n');
+
+  const parsed = parseGitStatusOutput(output);
+  assert.strictEqual(parsed.length, 5);
+  assert.strictEqual(parsed[0], 'src/components/card.tsx');
+  assert.strictEqual(parsed[1], 'cli/new-command.js');
+  assert.strictEqual(parsed[2], 'scripts/scratch.ts');
+  assert.strictEqual(parsed[3], 'old-file.js');
+  assert.strictEqual(parsed[4], 'quoted/path/with space.ts');
+});
+
+test('detectCandidateDirectories: identifies existing directory targets', () => {
+  const detected = detectCandidateDirectories(process.cwd());
+  assert.ok(Array.isArray(detected));
+  assert.ok(detected.includes('cli'));
+});
+
+test('runAuditPreflight: non-interactive mode resolves immediately without questions', async () => {
+  const result = await runAuditPreflight(['--ci'], {
+    defaultDir: 'cli',
+    cwd: process.cwd()
+  });
+
+  assert.strictEqual(result.targetDir, 'cli');
+  assert.strictEqual(result.fast, false);
+  assert.strictEqual(result.fileList, null);
+});
+
+test('runAuditPreflight: explicit fast and customDir flags bypass questions', async () => {
+  const result = await runAuditPreflight(['--fast', '--dir=cli'], {
+    customDir: 'cli',
+    defaultDir: 'src',
+    cwd: process.cwd()
+  });
+
+  assert.strictEqual(result.targetDir, 'cli');
+  assert.strictEqual(result.fast, true);
+  assert.strictEqual(result.fileList, null);
+});
+
+test('runAuditPreflight: yes flag accepts defaults immediately', async () => {
+  const result = await runAuditPreflight(['-y'], {
+    defaultDir: 'cli',
+    cwd: process.cwd()
+  });
+
+  assert.strictEqual(result.targetDir, 'cli');
+  assert.strictEqual(result.fast, false);
+  assert.strictEqual(result.fileList, null);
+});
+
+test('auditCode: fast mode executes line checks and bypasses AST parser', () => {
+  const longFile = 'const a = 1;\n'.repeat(600);
+  const violations = auditCode(longFile, 'src/monolith.ts', 'src/monolith.ts', { fast: true });
+
+  assert.ok(violations.length > 0);
+  const hasLineBudget = violations.some((v) => v.rule === 'LINE_BUDGET_FILE');
+  assert.strictEqual(hasLineBudget, true);
+});
+
+test('scanTree: fileList restricts scanning strictly to specified files', () => {
+  const result = scanTree('cli', process.cwd(), {
+    fileList: ['cli/installer-templates.js']
+  });
+
+  assert.strictEqual(result.fileStats.length, 1);
+  assert.strictEqual(result.fileStats[0].relativePath, 'cli/installer-templates.js');
+});
+
+test('runAudit: fast mode returns valid health metrics with zero AST traversal', () => {
+  const report = runAudit('cli', { fast: true });
+
+  assert.ok(report.scannedFiles > 0);
+  assert.ok(report.health);
+  assert.ok(typeof report.health.score === 'number');
+  assert.ok(typeof report.health.grade === 'string');
+});
+
+test('runAuditPreflight: headless flag resolves immediately without interactive prompts', async () => {
+  const result = await runAuditPreflight(['--headless'], {
+    defaultDir: 'cli',
+    cwd: process.cwd()
+  });
+
+  assert.strictEqual(result.targetDir, 'cli');
+  assert.strictEqual(result.fast, false);
+  assert.strictEqual(result.fileList, null);
+});

package/cli/audit.js

@@ -97,11 +97,48 @@ export const auditFile = (filePath, relativePath) => {
   return auditCode(content, filePath, relativePath);
 };
 
+const auditFileEntry = (fullPath, relPath, scanOptions) => {
+  const content = fs.readFileSync(fullPath, 'utf-8');
+  const lines = content.split('\n');
+  const baseName = path.basename(fullPath);
+  const isMolecule = relPath.includes('molecules') || relPath.includes('/m-') || baseName.startsWith('m-');
+
+  const fileStat = {
+    fullPath,
+    relativePath: relPath,
+    lineCount: lines.length,
+    charCount: content.length,
+    isMolecule
+  };
+
+  const hookMatches = content.match(/\buse[A-Z0-9]\w*\b/g);
+  const hookCount = hookMatches ? hookMatches.length : 0;
+  const fileViolations = auditCode(content, fullPath, relPath, {
+    patternRegistry: scanOptions.patternRegistry,
+    fast: scanOptions.fast
+  });
+
+  return { fileStat, hookCount, fileViolations };
+};
+
 export const scanTree = (targetDir, baseDir, scanOptions = {}) => {
   let violations = [];
   let fileStats = [];
   let totalHooks = 0;
-  const { patternRegistry } = scanOptions;
+
+  if (scanOptions.fileList && scanOptions.fileList.length > 0) {
+    for (const item of scanOptions.fileList) {
+      const fullPath = path.isAbsolute(item) ? item : path.resolve(baseDir, item);
+      const relPath = path.relative(baseDir, fullPath);
+      if (fs.existsSync(fullPath) && isSourceFile(path.basename(fullPath))) {
+        const result = auditFileEntry(fullPath, relPath, scanOptions);
+        violations = violations.concat(result.fileViolations);
+        fileStats.push(result.fileStat);
+        totalHooks += result.hookCount;
+      }
+    }
+    return { violations, fileStats, totalHooks };
+  }
 
   if (!fs.existsSync(targetDir)) {
     return { violations, fileStats, totalHooks };
@@ -120,26 +157,10 @@ export const scanTree = (targetDir, baseDir, scanOptions = {}) => {
         totalHooks += sub.totalHooks;
       }
     } else if (isSourceFile(entry.name)) {
-      const content = fs.readFileSync(fullPath, 'utf-8');
-      const lines = content.split('\n');
-      const isMolecule = relPath.includes('molecules') || relPath.includes('/m-') || entry.name.startsWith('m-');
-
-      fileStats.push({
-        fullPath,
-        relativePath: relPath,
-        lineCount: lines.length,
-        charCount: content.length,
-        isMolecule
-      });
-
-      // Count hook declarations / invocations for metric
-      const hookMatches = content.match(/\buse[A-Z0-9]\w*\b/g);
-      if (hookMatches) {
-        totalHooks += hookMatches.length;
-      }
-
-      const fileViolations = auditCode(content, fullPath, relPath, { patternRegistry });
-      violations = violations.concat(fileViolations);
+      const result = auditFileEntry(fullPath, relPath, scanOptions);
+      violations = violations.concat(result.fileViolations);
+      fileStats.push(result.fileStat);
+      totalHooks += result.hookCount;
     }
   }
 
@@ -155,7 +176,11 @@ export const runAudit = (targetDir = 'src', options = {}) => {
   const cwd = process.cwd();
   const absoluteTarget = path.resolve(cwd, targetDir);
   const patternRegistry = createPatternRegistry();
-  const { violations, fileStats, totalHooks } = scanTree(absoluteTarget, cwd, { patternRegistry });
+  const { violations, fileStats, totalHooks } = scanTree(absoluteTarget, cwd, {
+    patternRegistry,
+    fast: Boolean(options.fast),
+    fileList: options.fileList || null
+  });
 
   const scannedFiles = fileStats.length;
   const totalLoc = fileStats.reduce((acc, f) => acc + f.lineCount, 0);

package/cli/generator-templates/controller.js

@@ -0,0 +1,36 @@
+export const buildController = (name, pascalName) => `import { useState, useMemo } from 'react';
+import type { ${pascalName}State, ${pascalName}Descriptor } from './types';
+
+interface ControllerOptions {
+  readonly initialState?: ${pascalName}State;
+  readonly onAction?: () => void;
+}
+
+export const use${pascalName}Controller = (options: ControllerOptions = {}) => {
+  const [state, setState] = useState<${pascalName}State>(
+    options.initialState || { status: 'idle' }
+  );
+
+  const isIdle = state.status === 'idle';
+  const isPending = state.status === 'loading';
+  const canProceed = isIdle && !isPending;
+
+  const descriptor: ${pascalName}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 };
+};
+`;

package/cli/generator-templates/hooks.js

@@ -0,0 +1,60 @@
+export const buildHook = (name, camelName, pascalName) => `import { useState, useCallback, useEffect } from 'react';
+import type { ${pascalName}HookOptions, ${pascalName}HookReturn } from './types';
+
+export const ${camelName} = (options: ${pascalName}HookOptions = {}): ${pascalName}HookReturn => {
+  const [data, setData] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const execute = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      setData('ready');
+      options.onSuccess?.();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [options]);
+
+  useEffect(() => {
+    if (options.immediate) {
+      execute();
+    }
+  }, [options.immediate, execute]);
+
+  return { data, isLoading, error, execute };
+};
+`;
+
+export const buildHookOptionsType = (pascalName) => `export interface ${pascalName}HookOptions {
+  readonly immediate?: boolean;
+  readonly onSuccess?: () => void;
+}
+`;
+
+export const buildHookReturnType = (pascalName) => `export interface ${pascalName}HookReturn {
+  readonly data: string | null;
+  readonly isLoading: boolean;
+  readonly error: string | null;
+  readonly execute: () => Promise<void>;
+}
+`;
+
+export const buildHookIndex = (name, camelName) => `export { ${camelName} } from './${name}';
+export type * from './types';
+`;
+
+export const buildHookSpec = (name, camelName) => `import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { ${camelName} } from './${name}.ts';
+
+describe('${camelName} Hook Composable', () => {
+  it('exports pure hook function', () => {
+    assert.equal(typeof ${camelName}, 'function');
+  });
+});
+`;

package/cli/generator-templates/naming.js

@@ -0,0 +1,14 @@
+export const toPascalCase = (str) =>
+  str
+    .replace(/^(?:[a-z]|use|v)-/, '')
+    .split('-')
+    .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
+    .join('');
+
+export const toCamelCase = (str) => {
+  const p = toPascalCase(str);
+  if (str.startsWith('use-') || str.startsWith('use')) {
+    return `use${p}`;
+  }
+  return p.charAt(0).toLowerCase() + p.slice(1);
+};

package/cli/generator-templates/react.js

@@ -0,0 +1,63 @@
+export const buildReactComponent = (name, pascalName, options = {}) => {
+  const atomsPackage = options.atomsPackage || null;
+  const hasController = options.hasController !== false;
+  const atomImport = atomsPackage ? `import { AtomButton } from '${atomsPackage}';\n` : '';
+  const actionButton = atomsPackage
+    ? `        <AtomButton
+          disabled={!canProceed}
+          onClick={handleAction}
+        >
+          {variant}
+        </AtomButton>`
+    : `        <button
+          type="button"
+          className="${name}__action"
+          disabled={!canProceed}
+          onClick={handleAction}
+        >
+          {variant}
+        </button>`;
+
+  const controllerImport = hasController
+    ? `import { use${pascalName}Controller } from './${name}.controller';\n`
+    : '';
+
+  const controllerLogic = hasController
+    ? `  const { state, canProceed, descriptor, handleAction } = use${pascalName}Controller({
+    initialState: { status: 'idle' },
+    onAction
+  });`
+    : `  const canProceed = true;
+  const descriptor = { text: 'Ready', className: '${name}__badge ${name}__badge--ready' };
+  const handleAction = () => {
+    onAction?.();
+  };`;
+
+  return `import React from 'react';
+${atomImport}import type { ${pascalName}Props } from './types';
+${controllerImport}
+export const ${pascalName}: React.FC<${pascalName}Props> = ({
+  title,
+  subtitle,
+  variant = 'standard',
+  onAction
+}) => {
+${controllerLogic}
+
+  return (
+    <div className="${name}">
+      <div className="${name}__header">
+        <h3 className="${name}__title">{title}</h3>
+        {subtitle && <p className="${name}__subtitle">{subtitle}</p>}
+        <span className={descriptor.className}>{descriptor.text}</span>
+      </div>
+      <div className="${name}__body">
+${actionButton}
+      </div>
+    </div>
+  );
+};
+
+export default ${pascalName};
+`;
+};

package/cli/generator-templates/specs.js

@@ -0,0 +1,38 @@
+export const buildComponentSpec = (name, pascalName, hasController = true) => {
+  if (hasController) {
+    return `import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { use${pascalName}Controller } from './${name}.controller.ts';
+
+describe('${pascalName} Capsule Controller', () => {
+  it('exports pure controller hook', () => {
+    assert.equal(typeof use${pascalName}Controller, 'function');
+  });
+});
+`;
+  }
+
+  return `import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+
+describe('${pascalName} Atom Foundation', () => {
+  it('defines foundational UI atom contract', () => {
+    assert.ok(true);
+  });
+});
+`;
+};
+
+export const buildIndex = (name, pascalName, ext, hasController = true) => {
+  const compExport = ext === 'vue' || ext === 'svelte'
+    ? `export { default as ${pascalName} } from './${name}.${ext}';`
+    : `export { ${pascalName} } from './${name}';`;
+
+  const controllerExport = hasController
+    ? `export { use${pascalName}Controller } from './${name}.controller';\n`
+    : '';
+
+  return `${compExport}
+${controllerExport}export type * from './types';
+`;
+};

package/cli/generator-templates/styles.js

@@ -0,0 +1,64 @@
+export const buildScss = (name) => `.${name} {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  background: rgba(19, 30, 58, 0.7);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(98, 201, 255, 0.15);
+  border-radius: 8px;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 16px;
+    color: #ffffff;
+  }
+
+  &__subtitle {
+    margin: 4px 0 0;
+    font-size: 12px;
+    color: #94a3b8;
+  }
+
+  &__badge {
+    font-size: 11px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: #0b1329;
+
+    &--ready { color: #62c9ff; }
+    &--active { color: #4ade80; }
+    &--pending { color: #facc15; }
+  }
+
+  &__body {
+    margin-top: 14px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__action {
+    padding: 6px 14px;
+    border-radius: 4px;
+    background: #1e293b;
+    border: 1px solid #334155;
+    color: #ffffff;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background: #334155;
+      border-color: #62c9ff;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+`;

package/cli/generator-templates/svelte.js

@@ -0,0 +1,66 @@
+export const buildSvelteComponent = (name, pascalName, options = {}) => {
+  const atomsPackage = options.atomsPackage || null;
+  const hasController = options.hasController !== false;
+  const atomImport = atomsPackage ? `import { AtomButton } from '${atomsPackage}';\n` : '';
+  const actionButton = atomsPackage
+    ? `    <AtomButton
+      disabled={!controller.canProceed}
+      onclick={controller.handleAction}
+    >
+      {variant}
+    </AtomButton>`
+    : `    <button
+      type="button"
+      class="${name}__action"
+      disabled={!controller.canProceed}
+      onclick={controller.handleAction}
+    >
+      {variant}
+    </button>`;
+
+  const controllerImport = hasController
+    ? `import { create${pascalName}Controller } from './${name}.controller';\n`
+    : '';
+
+  const controllerLogic = hasController
+    ? `const controller = create${pascalName}Controller({
+  initialState: { status: 'idle' },
+  onAction
+});`
+    : `const controller = {
+  canProceed: true,
+  descriptor: { text: 'Ready', className: '${name}__badge ${name}__badge--ready' },
+  handleAction: () => onAction?.()
+};`;
+
+  return `<script lang="ts">
+import type { ${pascalName}Props } from './types';
+${atomImport}${controllerImport}
+const {
+  title,
+  subtitle = '',
+  variant = 'standard',
+  onAction
+}: ${pascalName}Props = $props();
+
+${controllerLogic}
+</script>
+
+<div class="${name}">
+  <div class="${name}__header">
+    <h3 class="${name}__title">{title}</h3>
+    {#if subtitle}
+      <p class="${name}__subtitle">{subtitle}</p>
+    {/if}
+    <span class={controller.descriptor.className}>{controller.descriptor.text}</span>
+  </div>
+  <div class="${name}__body">
+${actionButton}
+  </div>
+</div>
+
+<style lang="scss">
+@use './_${name}.scss';
+</style>
+`;
+};

package/cli/generator-templates/types.js

@@ -0,0 +1,29 @@
+export const buildPropsType = (name, pascalName) => `export interface ${pascalName}Props {
+  readonly title: string;
+  readonly subtitle?: string;
+  readonly variant?: 'standard' | 'highlight';
+  readonly onAction?: () => void;
+}
+
+export interface ${pascalName}Emits {
+  (e: 'action', title: string): void;
+}
+`;
+
+export const buildStateType = (name, pascalName) => `export type ${pascalName}State =
+  | { readonly status: 'idle' }
+  | { readonly status: 'loading'; readonly progress: number }
+  | { readonly status: 'active'; readonly activeId: string }
+  | { readonly status: 'fault'; readonly faultMessage: string };
+
+export interface ${pascalName}Descriptor {
+  readonly text: string;
+  readonly className: string;
+}
+`;
+
+export const buildTypesIndex = (fileNames = ['props', 'state']) =>
+  fileNames.map((f) => `export type * from './${f}.d.ts';`).join('\n') + '\n';
+
+export const buildTypes = (name, pascalName) => `${buildStateType(name, pascalName)}
+${buildPropsType(name, pascalName)}`;