@compilr-dev/factory 0.1.6 → 0.1.8

package/dist/toolkits/react-node/entity.js

@@ -26,7 +26,12 @@ function generateListPage(model, entity) {
     const hasFilters = enumFields.length > 0;
     const tableHeaders = entity.fields
         .slice(0, 5)
-        .map((f) => `              <th className="px-4 py-2 text-left text-sm font-medium text-gray-500 dark:text-gray-400">${f.label}</th>`)
+        .map((f) => `              <th
+                className="cursor-pointer select-none px-4 py-2 text-left text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                onClick={() => handleSort('${f.name}')}
+              >
+                ${f.label}{sortField === '${f.name}' ? (sortDirection === 'asc' ? ' ↑' : ' ↓') : ''}
+              </th>`)
         .join('\n');
     const tableCells = entity.fields
         .slice(0, 5)
@@ -45,16 +50,27 @@ ${hasFilters ? `const filterOptions = [\n${filterDefs}\n];\n` : ''}
 export default function ${entity.name}List() {
   const [items, setItems] = useState<${entity.name}[]>([]);
   const [view, setView] = useState<'card' | 'list'>('card');
-  const [search, setSearch] = useState('');${hasFilters ? '\n  const [filters, setFilters] = useState<Record<string, string>>({});' : ''}
+  const [search, setSearch] = useState('');
+  const [sortField, setSortField] = useState<string>('');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');${hasFilters ? '\n  const [filters, setFilters] = useState<Record<string, string>>({});' : ''}
 
   useEffect(() => {
     fetch('${api}')
       .then((r) => r.json())
-      .then((data: ${entity.name}[]) => setItems(data));
+      .then((res: { data: ${entity.name}[]; total: number }) => setItems(res.data));
   }, []);
 
   const onSearch = useCallback((q: string) => setSearch(q), []);
 
+  const handleSort = useCallback((field: string) => {
+    if (sortField === field) {
+      setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDirection('asc');
+    }
+  }, [sortField]);
+
   const filtered = items.filter((item) => {
     if (search) {
       const q = search.toLowerCase();
@@ -71,6 +87,14 @@ export default function ${entity.name}List() {
     return true;
   });
 
+  const sorted = [...filtered].sort((a, b) => {
+    if (!sortField) return 0;
+    const aVal = (a as Record<string, unknown>)[sortField];
+    const bVal = (b as Record<string, unknown>)[sortField];
+    const cmp = String(aVal ?? '').localeCompare(String(bVal ?? ''), undefined, { numeric: true });
+    return sortDirection === 'asc' ? cmp : -cmp;
+  });
+
   return (
     <div>
       <div className="mb-6 flex items-center justify-between">
@@ -93,7 +117,7 @@ export default function ${entity.name}List() {
 
       {view === 'card' ? (
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {filtered.map((item) => (
+          {sorted.map((item) => (
             <${entity.name}Card key={item.id} item={item} />
           ))}
         </div>
@@ -105,7 +129,7 @@ ${tableHeaders}
             </tr>
           </thead>
           <tbody>
-            {filtered.map((item) => (
+            {sorted.map((item) => (
               <tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-800/50">
 ${tableCells}
                 <td className="px-4 py-2">
@@ -160,22 +184,44 @@ function generateDetailPage(model, entity) {
   const [${stateVar}, set${targetEntity.pluralName}] = useState<${rel.target}[]>([]);`;
     })
         .join('');
-    const hasManyFetches = hmRels
+    // Build ?include= param for hasMany targets
+    const includeTargets = hmRels
+        .map((rel) => {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        return targetEntity ? toCamelCase(targetEntity.pluralName) : '';
+    })
+        .filter(Boolean);
+    const includeParam = includeTargets.length > 0 ? `?include=${includeTargets.join(',')}` : '';
+    const hasManySetters = hmRels
         .map((rel) => {
         const targetEntity = model.entities.find((e) => e.name === rel.target);
         if (!targetEntity)
             return '';
-        const fetchApi = apiPath(targetEntity);
-        const fk = fkFieldName(targetEntity.relationships.find((r) => r.type === 'belongsTo' && r.target === entity.name) ?? {
-            type: 'belongsTo',
-            target: entity.name,
-        });
-        return `
-      fetch('${fetchApi}')
-        .then((r) => r.json())
-        .then((data: ${rel.target}[]) => set${targetEntity.pluralName}(data.filter((d) => d.${fk} === Number(id))));`;
+        const varName = toCamelCase(targetEntity.pluralName);
+        return `      set${targetEntity.pluralName}(data.${varName} ?? []);`;
     })
-        .join('');
+        .join('\n');
+    // Build the useEffect block
+    let useEffectBlock;
+    if (hmRels.length > 0) {
+        useEffectBlock =
+            '  useEffect(() => {\n' +
+                `    fetch(\`${api}/\${id as string}${includeParam}\`)\n` +
+                '      .then((r) => r.json())\n' +
+                '      .then((data: Record<string, unknown>) => {\n' +
+                `        setItem(data as unknown as ${entity.name});\n` +
+                hasManySetters +
+                '\n      });\n' +
+                '  }, [id]);';
+    }
+    else {
+        useEffectBlock =
+            '  useEffect(() => {\n' +
+                `    fetch(\`${api}/\${id as string}\`)\n` +
+                '      .then((r) => r.json())\n' +
+                `      .then((data: ${entity.name}) => setItem(data));\n` +
+                '  }, [id]);';
+    }
     const hasManyImports = hmRels.map((rel) => rel.target).join(', ');
     const hasManyTypeImport = hmRels.length > 0 ? `, ${hasManyImports}` : '';
     const hasManyRender = hmRels
@@ -217,11 +263,7 @@ export default function ${entity.name}Detail() {
   const navigate = useNavigate();
   const [item, setItem] = useState<${entity.name} | null>(null);${hasManySection}
 
-  useEffect(() => {
-    fetch(\`${api}/\${id as string}\`)
-      .then((r) => r.json())
-      .then((data: ${entity.name}) => setItem(data));${hasManyFetches}
-  }, [id]);
+${useEffectBlock}
 
   if (!item) return <div className="p-6">Loading...</div>;
 
@@ -330,7 +372,7 @@ function generateForm(model, entity) {
         if (!targetEntity)
             return '';
         const targetApi = apiPath(targetEntity);
-        return `    fetch('${targetApi}').then((r) => r.json()).then((d: ${rel.target}[]) => set${rel.target}Options(d));`;
+        return `    fetch('${targetApi}').then((r) => r.json()).then((res: { data: ${rel.target}[]; total: number }) => set${rel.target}Options(res.data));`;
     })
         .join('\n');
     const relTypeImports = btoRels.map((r) => r.target);

package/dist/toolkits/react-node/helpers.d.ts

@@ -1,27 +1,6 @@
 /**
  * React+Node Toolkit — Shared Helpers
  *
- * Utility functions used across generators.
+ * Re-exports from the shared helpers module.
  */
-import type { Entity, Field, Relationship } from '../../model/types.js';
-/** Indent every line of a multi-line string. */
-export declare function indent(text: string, spaces: number): string;
-/** Map a model FieldType to a TypeScript type string. */
-export declare function tsType(field: Field): string;
-/** Get the FK field name for a belongsTo relationship. */
-export declare function fkFieldName(rel: Relationship): string;
-/** Get belongsTo relationships for an entity. */
-export declare function belongsToRels(entity: Entity): readonly Relationship[];
-/** Get hasMany relationships for an entity. */
-export declare function hasManyRels(entity: Entity): readonly Relationship[];
-/** Generate a route path from entity plural name. */
-export declare function routePath(entity: Entity): string;
-/** Generate an API path from entity plural name. */
-export declare function apiPath(entity: Entity): string;
-/** Map a model FieldType to an HTML input type. */
-export declare function inputType(field: Field): string;
-/** Generate import statement lines. */
-export declare function generateImports(imports: Array<{
-    from: string;
-    names: string[];
-}>): string;
+export { indent, tsType, fkFieldName, belongsToRels, hasManyRels, routePath, apiPath, inputType, generateImports, } from '../shared/helpers.js';

package/dist/toolkits/react-node/helpers.js

@@ -1,71 +1,6 @@
 /**
  * React+Node Toolkit — Shared Helpers
  *
- * Utility functions used across generators.
+ * Re-exports from the shared helpers module.
  */
-import { toCamelCase, toKebabCase } from '../../model/naming.js';
-/** Indent every line of a multi-line string. */
-export function indent(text, spaces) {
-    const pad = ' '.repeat(spaces);
-    return text
-        .split('\n')
-        .map((line) => (line.trim() === '' ? '' : pad + line))
-        .join('\n');
-}
-/** Map a model FieldType to a TypeScript type string. */
-export function tsType(field) {
-    switch (field.type) {
-        case 'string':
-        case 'enum':
-            return 'string';
-        case 'number':
-            return 'number';
-        case 'boolean':
-            return 'boolean';
-        case 'date':
-            return 'string'; // ISO date string
-        default:
-            return 'string';
-    }
-}
-/** Get the FK field name for a belongsTo relationship. */
-export function fkFieldName(rel) {
-    return rel.fieldName ?? toCamelCase(rel.target) + 'Id';
-}
-/** Get belongsTo relationships for an entity. */
-export function belongsToRels(entity) {
-    return entity.relationships.filter((r) => r.type === 'belongsTo');
-}
-/** Get hasMany relationships for an entity. */
-export function hasManyRels(entity) {
-    return entity.relationships.filter((r) => r.type === 'hasMany');
-}
-/** Generate a route path from entity plural name. */
-export function routePath(entity) {
-    return '/' + toKebabCase(entity.pluralName).toLowerCase();
-}
-/** Generate an API path from entity plural name. */
-export function apiPath(entity) {
-    return '/api/' + toKebabCase(entity.pluralName).toLowerCase();
-}
-/** Map a model FieldType to an HTML input type. */
-export function inputType(field) {
-    switch (field.type) {
-        case 'string':
-            return 'text';
-        case 'number':
-            return 'number';
-        case 'boolean':
-            return 'checkbox';
-        case 'date':
-            return 'date';
-        case 'enum':
-            return 'select';
-        default:
-            return 'text';
-    }
-}
-/** Generate import statement lines. */
-export function generateImports(imports) {
-    return imports.map((i) => `import { ${i.names.join(', ')} } from '${i.from}';`).join('\n');
-}
+export { indent, tsType, fkFieldName, belongsToRels, hasManyRels, routePath, apiPath, inputType, generateImports, } from '../shared/helpers.js';

package/dist/toolkits/react-node/seed.d.ts

@@ -2,10 +2,11 @@
  * React+Node Toolkit — Seed Data Generator
  *
  * Generates realistic mock data based on field semantics.
- * Deterministic: same input → same output (uses index-based logic, not Math.random).
+ * Uses shared generateFieldValue for deterministic values,
+ * wraps them in JavaScript array format for in-memory data stores.
  */
 import type { ApplicationModel, Entity } from '../../model/types.js';
-declare const SEED_COUNT = 8;
-/** Generate seed data items for a single entity. */
+import { SEED_COUNT } from '../shared/seed-data.js';
+/** Generate seed data items for a single entity (JS array format). */
 export declare function generateSeedData(model: ApplicationModel, entity: Entity): string;
 export { SEED_COUNT };

package/dist/toolkits/react-node/seed.js

@@ -2,120 +2,13 @@
  * React+Node Toolkit — Seed Data Generator
  *
  * Generates realistic mock data based on field semantics.
- * Deterministic: same input → same output (uses index-based logic, not Math.random).
+ * Uses shared generateFieldValue for deterministic values,
+ * wraps them in JavaScript array format for in-memory data stores.
  */
 import { toCamelCase } from '../../model/naming.js';
 import { belongsToRels, fkFieldName } from './helpers.js';
-const PERSON_NAMES = [
-    'Alice Johnson',
-    'Bob Smith',
-    'Carol Davis',
-    'David Lee',
-    'Eva Martinez',
-    'Frank Wilson',
-    'Grace Chen',
-    'Henry Brown',
-    'Iris Kim',
-    'Jack Taylor',
-];
-const COMPANY_NAMES = [
-    'Acme Corp',
-    'TechVista Inc',
-    'BlueSky Solutions',
-    'Greenfield LLC',
-    'Summit Dynamics',
-    'Cascade Systems',
-    'Meridian Labs',
-    'Atlas Ventures',
-];
-const PRODUCT_NAMES = [
-    'Premium Widget',
-    'Standard Package',
-    'Enterprise Suite',
-    'Starter Kit',
-    'Pro Bundle',
-    'Deluxe Edition',
-    'Basic Plan',
-    'Advanced Toolkit',
-];
-const DESCRIPTIONS = [
-    'A comprehensive solution for modern needs.',
-    'Designed for efficiency and reliability.',
-    'Built with quality and care.',
-    'Perfect for teams of any size.',
-    'Streamlined for maximum productivity.',
-    'Industry-leading performance.',
-    'Trusted by thousands of users.',
-    'Next-generation technology.',
-];
-const EMAILS = [
-    'alice@example.com',
-    'bob@example.com',
-    'carol@example.com',
-    'david@example.com',
-    'eva@example.com',
-    'frank@example.com',
-    'grace@example.com',
-    'henry@example.com',
-];
-const SEED_COUNT = 8;
-function generateFieldValue(field, index, entityName) {
-    const lowerName = field.name.toLowerCase();
-    const lowerEntity = entityName.toLowerCase();
-    switch (field.type) {
-        case 'string':
-            if (lowerName.includes('email'))
-                return `'${EMAILS[index % EMAILS.length]}'`;
-            if (lowerName.includes('name') || lowerName === 'title') {
-                if (lowerEntity.includes('customer') ||
-                    lowerEntity.includes('user') ||
-                    lowerEntity.includes('person') ||
-                    lowerEntity.includes('employee')) {
-                    return `'${PERSON_NAMES[index % PERSON_NAMES.length]}'`;
-                }
-                if (lowerEntity.includes('company') || lowerEntity.includes('organization')) {
-                    return `'${COMPANY_NAMES[index % COMPANY_NAMES.length]}'`;
-                }
-                return `'${PRODUCT_NAMES[index % PRODUCT_NAMES.length]}'`;
-            }
-            if (lowerName.includes('description') ||
-                lowerName.includes('note') ||
-                lowerName.includes('comment')) {
-                return `'${DESCRIPTIONS[index % DESCRIPTIONS.length]}'`;
-            }
-            if (lowerName.includes('phone'))
-                return `'555-010${String(index)}'`;
-            if (lowerName.includes('address'))
-                return `'${String(100 + index * 10)} Main St'`;
-            return `'${field.label} ${String(index + 1)}'`;
-        case 'number':
-            if (lowerName.includes('price') || lowerName.includes('cost') || lowerName.includes('amount'))
-                return String(10 + index * 15 + 0.99);
-            if (lowerName.includes('quantity') || lowerName.includes('count'))
-                return String(1 + (index % 10));
-            if (lowerName.includes('age'))
-                return String(22 + index * 5);
-            if (lowerName.includes('size') || lowerName.includes('capacity'))
-                return String(2 + (index % 8));
-            return String(index + 1);
-        case 'boolean':
-            return index % 2 === 0 ? 'true' : 'false';
-        case 'date': {
-            const base = new Date('2025-06-15');
-            base.setDate(base.getDate() + (index * 3 - 10));
-            return `'${base.toISOString().split('T')[0]}'`;
-        }
-        case 'enum': {
-            const values = field.enumValues ?? [];
-            if (values.length === 0)
-                return "''";
-            return `'${values[index % values.length]}'`;
-        }
-        default:
-            return `'${field.label} ${String(index + 1)}'`;
-    }
-}
-/** Generate seed data items for a single entity. */
+import { generateFieldValue, SEED_COUNT } from '../shared/seed-data.js';
+/** Generate seed data items for a single entity (JS array format). */
 export function generateSeedData(model, entity) {
     const varName = toCamelCase(entity.pluralName);
     const rels = belongsToRels(entity);

package/dist/toolkits/react-node/shared.d.ts

@@ -1,7 +1,6 @@
 /**
  * React+Node Toolkit — Shared Components Generator
  *
- * Generates: ViewToggle.tsx, SearchBar.tsx, FilterBar.tsx
+ * Re-exports from the shared components module.
  */
-import type { FactoryFile } from '../types.js';
-export declare function generateSharedComponents(): FactoryFile[];
+export { generateSharedComponents } from '../shared/components.js';

package/dist/toolkits/react-node/shared.js

@@ -1,119 +1,6 @@
 /**
  * React+Node Toolkit — Shared Components Generator
  *
- * Generates: ViewToggle.tsx, SearchBar.tsx, FilterBar.tsx
+ * Re-exports from the shared components module.
  */
-export function generateSharedComponents() {
-    return [generateViewToggle(), generateSearchBar(), generateFilterBar()];
-}
-function generateViewToggle() {
-    return {
-        path: 'src/components/shared/ViewToggle.tsx',
-        content: `interface ViewToggleProps {
-  view: 'card' | 'list';
-  onChange: (view: 'card' | 'list') => void;
-}
-
-export default function ViewToggle({ view, onChange }: ViewToggleProps) {
-  return (
-    <div className="flex rounded-lg border border-gray-300 dark:border-gray-600">
-      <button
-        onClick={() => onChange('card')}
-        className={\`px-3 py-1 text-sm \${view === 'card' ? 'bg-primary text-white' : 'text-gray-600 dark:text-gray-300'}\`}
-      >
-        Grid
-      </button>
-      <button
-        onClick={() => onChange('list')}
-        className={\`px-3 py-1 text-sm \${view === 'list' ? 'bg-primary text-white' : 'text-gray-600 dark:text-gray-300'}\`}
-      >
-        List
-      </button>
-    </div>
-  );
-}
-`,
-    };
-}
-function generateSearchBar() {
-    return {
-        path: 'src/components/shared/SearchBar.tsx',
-        content: `import { useState, useEffect } from 'react';
-
-interface SearchBarProps {
-  onSearch: (query: string) => void;
-  placeholder?: string;
-}
-
-export default function SearchBar({ onSearch, placeholder = 'Search...' }: SearchBarProps) {
-  const [value, setValue] = useState('');
-
-  useEffect(() => {
-    const timer = setTimeout(() => onSearch(value), 300);
-    return () => clearTimeout(timer);
-  }, [value, onSearch]);
-
-  return (
-    <div className="relative">
-      <input
-        type="text"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        placeholder={placeholder}
-        className="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-primary focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white"
-      />
-      {value && (
-        <button
-          onClick={() => setValue('')}
-          className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-        >
-          ×
-        </button>
-      )}
-    </div>
-  );
-}
-`,
-    };
-}
-function generateFilterBar() {
-    return {
-        path: 'src/components/shared/FilterBar.tsx',
-        content: `interface FilterOption {
-  label: string;
-  field: string;
-  values: string[];
-}
-
-interface FilterBarProps {
-  filters: FilterOption[];
-  active: Record<string, string>;
-  onChange: (field: string, value: string) => void;
-}
-
-export default function FilterBar({ filters, active, onChange }: FilterBarProps) {
-  if (filters.length === 0) return null;
-
-  return (
-    <div className="flex flex-wrap gap-2">
-      {filters.map((filter) => (
-        <select
-          key={filter.field}
-          value={active[filter.field] ?? ''}
-          onChange={(e) => onChange(filter.field, e.target.value)}
-          className="rounded-lg border border-gray-300 px-3 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white"
-        >
-          <option value="">{filter.label}: All</option>
-          {filter.values.map((v) => (
-            <option key={v} value={v}>
-              {v}
-            </option>
-          ))}
-        </select>
-      ))}
-    </div>
-  );
-}
-`,
-    };
-}
+export { generateSharedComponents } from '../shared/components.js';

package/dist/toolkits/react-node/types-gen.js

@@ -4,8 +4,34 @@
  * Generates src/types/index.ts with interfaces for each entity.
  */
 import { tsType, fkFieldName, belongsToRels } from './helpers.js';
+const SHARED_TYPES = `// --- Shared API Types ---
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  error?: string;
+}
+
+export interface ApiListResponse<T> {
+  data: T[];
+  total: number;
+}
+
+export interface SortParams {
+  field: string;
+  direction: 'asc' | 'desc';
+}`;
 export function generateTypesFile(model) {
     const lines = ['// Auto-generated TypeScript types from Application Model', ''];
+    lines.push(SHARED_TYPES);
+    lines.push('');
     for (const entity of model.entities) {
         lines.push(generateInterface(entity));
         lines.push('');

package/dist/toolkits/shared/color-utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared Color Utilities
+ *
+ * Hex-to-HSL conversion and Tailwind color shade generation.
+ * Used by any toolkit that needs to generate a color palette from a primary color.
+ */
+export declare const SHADE_LIGHTNESS: Record<string, number>;
+export declare function hexToHsl(hex: string): [number, number, number];
+export declare function hslToHex(h: number, s: number, l: number): string;
+export declare function generateColorShades(hex: string): string;

package/dist/toolkits/shared/color-utils.js

@@ -0,0 +1,85 @@
+/**
+ * Shared Color Utilities
+ *
+ * Hex-to-HSL conversion and Tailwind color shade generation.
+ * Used by any toolkit that needs to generate a color palette from a primary color.
+ */
+export const SHADE_LIGHTNESS = {
+    '50': 97,
+    '100': 94,
+    '200': 86,
+    '300': 77,
+    '400': 66,
+    '500': 55,
+    '600': 44,
+    '700': 36,
+    '800': 27,
+    '900': 20,
+    '950': 14,
+};
+export function hexToHsl(hex) {
+    const raw = hex.replace('#', '');
+    const r = parseInt(raw.substring(0, 2), 16) / 255;
+    const g = parseInt(raw.substring(2, 4), 16) / 255;
+    const b = parseInt(raw.substring(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min)
+        return [0, 0, Math.round(l * 100)];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === r)
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g)
+        h = ((b - r) / d + 2) / 6;
+    else
+        h = ((r - g) / d + 4) / 6;
+    return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+export function hslToHex(h, s, l) {
+    const sN = s / 100;
+    const lN = l / 100;
+    const c = (1 - Math.abs(2 * lN - 1)) * sN;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = lN - c / 2;
+    let r = 0, g = 0, b = 0;
+    if (h < 60)
+        [r, g, b] = [c, x, 0];
+    else if (h < 120)
+        [r, g, b] = [x, c, 0];
+    else if (h < 180)
+        [r, g, b] = [0, c, x];
+    else if (h < 240)
+        [r, g, b] = [0, x, c];
+    else if (h < 300)
+        [r, g, b] = [x, 0, c];
+    else
+        [r, g, b] = [c, 0, x];
+    const toHex = (v) => Math.round((v + m) * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+export function generateColorShades(hex) {
+    const [h, s] = hexToHsl(hex);
+    const entries = [];
+    for (const [shade, lightness] of Object.entries(SHADE_LIGHTNESS)) {
+        entries.push(`          ${shade}: '${hslToHex(h, s, lightness)}',`);
+    }
+    // Find the shade closest to the original for DEFAULT
+    const [, , originalL] = hexToHsl(hex);
+    let closestShade = '500';
+    let closestDiff = Infinity;
+    for (const [shade, lightness] of Object.entries(SHADE_LIGHTNESS)) {
+        const diff = Math.abs(lightness - originalL);
+        if (diff < closestDiff) {
+            closestDiff = diff;
+            closestShade = shade;
+        }
+    }
+    const defaultHex = hslToHex(h, s, SHADE_LIGHTNESS[closestShade]);
+    entries.push(`          DEFAULT: '${defaultHex}',`);
+    return `{\n${entries.join('\n')}\n        }`;
+}

package/dist/toolkits/shared/components.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared React Components Generator
+ *
+ * Generates: ViewToggle.tsx, SearchBar.tsx, FilterBar.tsx
+ * These are framework-agnostic React components reusable across toolkits.
+ */
+import type { FactoryFile } from '../types.js';
+export declare function generateViewToggle(): FactoryFile;
+export declare function generateSearchBar(): FactoryFile;
+export declare function generateFilterBar(): FactoryFile;
+/** Generate all shared components (ViewToggle, SearchBar, FilterBar). */
+export declare function generateSharedComponents(): FactoryFile[];