@chemx/create-chemx 26.9.20-369 → 26.9.20-390

package/blueprints/workflows/chemx-audit.yml

@@ -58,14 +58,13 @@ jobs:
           if [ -z "$DISCUSSION_URL" ] && [ -f .chemx/discussion.json ]; then
             DISCUSSION_URL=$(node -e "try { const d = JSON.parse(require('fs').readFileSync('.chemx/discussion.json')); console.log(d.url || ''); } catch (e) {}")
           fi
-          if [ -z "$DISCUSSION_URL" ]; then
-            DISCUSSION_URL="https://github.com/orgs/Chemical-X-Protocol/discussions/categories/npx-chemx-audit"
-          fi
 
           {
             echo "<!-- chemical-x-audit-pr-comment -->"
-            echo "> 💬 **Architectural Discussion Topic:** [View Discussion & Community Showcase](\${DISCUSSION_URL})"
-            echo ""
+            if [ -n "$DISCUSSION_URL" ]; then
+              echo "> 💬 **Architectural Discussion Topic:** [View Discussion & Community Showcase](\${DISCUSSION_URL})"
+              echo ""
+            fi
             cat AUDIT_REPORT.md
           } > PR_COMMENT.md
 

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

@@ -0,0 +1,275 @@
+/**
+ * Collection & Data Archetypes: Task List, Data Table, Tree, Chart, Kanban
+ */
+
+export const COLLECTION_ARCHETYPES = [
+  {
+    id: 'task-list',
+    name: 'Collection & Task List',
+    keywords: ['task', 'todo', 'tasklist', 'checklist', 'item', 'queue'],
+    destructure: 'items, activeCount, setFilter, toggleItem, removeItem',
+    buildState: (name, pascal) => `export interface ${pascal}Item {
+  readonly id: string;
+  readonly title: string;
+  readonly completed: boolean;
+}
+
+export type ${pascal}Filter = 'all' | 'active' | 'completed';
+
+export interface ${pascal}State {
+  readonly items: readonly ${pascal}Item[];
+  readonly filter: ${pascal}Filter;
+  readonly activeCount: number;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly initialItems?: readonly ${pascal}Item[];
+  readonly onItemsChange?: (items: readonly ${pascal}Item[]) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState, useMemo } from 'react';
+import type { ${pascal}Item, ${pascal}Filter, ${pascal}State } from './types';
+
+export const use${pascal}Controller = (options: { initialItems?: readonly ${pascal}Item[]; onItemsChange?: (items: readonly ${pascal}Item[]) => void } = {}) => {
+  const [items, setItems] = useState<readonly ${pascal}Item[]>(options.initialItems || [
+    { id: '1', title: 'Initialize Chemical X molecular structure', completed: true },
+    { id: '2', title: 'Implement domain controller state', completed: false }
+  ]);
+  const [filter, setFilter] = useState<${pascal}Filter>('all');
+
+  const activeCount = useMemo(() => items.filter((i) => !i.completed).length, [items]);
+  const visibleItems = useMemo(() => {
+    if (filter === 'active') return items.filter((i) => !i.completed);
+    if (filter === 'completed') return items.filter((i) => i.completed);
+    return items;
+  }, [items, filter]);
+
+  const addItem = (title: string) => {
+    if (!title.trim()) return;
+    const next = [...items, { id: String(Date.now()), title: title.trim(), completed: false }];
+    setItems(next);
+    options.onItemsChange?.(next);
+  };
+
+  const toggleItem = (id: string) => {
+    const next = items.map((i) => (i.id === id ? { ...i, completed: !i.completed } : i));
+    setItems(next);
+    options.onItemsChange?.(next);
+  };
+
+  const removeItem = (id: string) => {
+    const next = items.filter((i) => i.id !== id);
+    setItems(next);
+    options.onItemsChange?.(next);
+  };
+
+  return { items: visibleItems, allItems: items, filter, activeCount, setFilter, addItem, toggleItem, removeItem };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__controls">
+        <span className="${name}__count">{activeCount} pending</span>
+        <div className="${name}__filters">
+          <button type="button" onClick={() => setFilter('all')}>All</button>
+          <button type="button" onClick={() => setFilter('active')}>Active</button>
+          <button type="button" onClick={() => setFilter('completed')}>Done</button>
+        </div>
+      </div>
+      <ul className="${name}__list">
+        {items.map((item) => (
+          <li key={item.id} className={item.completed ? '${name}__item ${name}__item--done' : '${name}__item'}>
+            <input type="checkbox" checked={item.completed} onChange={() => toggleItem(item.id)} />
+            <span>{item.title}</span>
+            <button type="button" onClick={() => removeItem(item.id)}>×</button>
+          </li>
+        ))}
+      </ul>`
+  },
+  {
+    id: 'data-table',
+    name: 'Data Table & Grid',
+    keywords: ['table', 'grid', 'datatable', 'matrix', 'sheet', 'data-view'],
+    destructure: 'rows = [], sortColumn, sortDirection, page, sortBy, setPage',
+    buildState: (name, pascal) => `export interface ${pascal}Row {
+  readonly id: string;
+  readonly [key: string]: unknown;
+}
+
+export interface ${pascal}State {
+  readonly sortColumn: string;
+  readonly sortDirection: 'asc' | 'desc';
+  readonly page: number;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly rows?: readonly ${pascal}Row[];
+  readonly columns?: readonly string[];
+  readonly pageSize?: number;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+import type { ${pascal}Row } from './types';
+
+export const use${pascal}Controller = (options: { rows?: readonly ${pascal}Row[]; pageSize?: number } = {}) => {
+  const [sortColumn, setSortColumn] = useState<string>('id');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [page, setPage] = useState<number>(1);
+
+  const sortBy = (column: string) => {
+    if (sortColumn === column) {
+      setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
+  return { sortColumn, sortDirection, page, sortBy, setPage };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__header">
+        <span className="${name}__sort">Sorted by {sortColumn} ({sortDirection})</span>
+      </div>
+      <div className="${name}__grid">
+        {(rows || []).map((row) => (
+          <div key={row.id} className="${name}__row">
+            <span>{String(row.id)}</span>
+          </div>
+        ))}
+      </div>`
+  },
+  {
+    id: 'tree-hierarchy',
+    name: 'Tree & Hierarchy',
+    keywords: ['tree', 'filetree', 'hierarchy', 'node', 'folder', 'explorer'],
+    destructure: 'nodes = [], expandedIds, selectedId, toggleNode, selectNode',
+    buildState: (name, pascal) => `export interface ${pascal}Node {
+  readonly id: string;
+  readonly label: string;
+  readonly children?: readonly ${pascal}Node[];
+}
+
+export interface ${pascal}State {
+  readonly expandedIds: readonly string[];
+  readonly selectedId: string | null;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly nodes?: readonly ${pascal}Node[];
+  readonly onSelect?: (id: string) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+import type { ${pascal}Node } from './types';
+
+export const use${pascal}Controller = (options: { onSelect?: (id: string) => void } = {}) => {
+  const [expandedIds, setExpandedIds] = useState<readonly string[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const toggleNode = (id: string) => {
+    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+  };
+
+  const selectNode = (id: string) => {
+    setSelectedId(id);
+    options.onSelect?.(id);
+  };
+
+  return { expandedIds, selectedId, toggleNode, selectNode };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__tree">
+        {(nodes || []).map((node) => (
+          <div key={node.id} className="${name}__node" onClick={() => selectNode(node.id)}>
+            <span>{node.label}</span>
+          </div>
+        ))}
+      </div>`
+  },
+  {
+    id: 'chart-analytics',
+    name: 'Chart & Sparkline',
+    keywords: ['chart', 'graph', 'plot', 'trend', 'sparkline', 'series', 'analytics'],
+    destructure: 'series = [], activeIndex, timeRange, setActiveIndex, setTimeRange',
+    buildState: (name, pascal) => `export interface ${pascal}DataPoint {
+  readonly label: string;
+  readonly value: number;
+}
+
+export interface ${pascal}State {
+  readonly activeIndex: number | null;
+  readonly timeRange: '1h' | '24h' | '7d' | '30d';
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly series?: readonly ${pascal}DataPoint[];
+  readonly timeRange?: '1h' | '24h' | '7d' | '30d';
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = () => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [timeRange, setTimeRange] = useState<'1h' | '24h' | '7d' | '30d'>('24h');
+
+  return { activeIndex, timeRange, setActiveIndex, setTimeRange };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__toolbar">
+        <span>Range: {timeRange}</span>
+      </div>
+      <div className="${name}__canvas">
+        {(series || []).map((pt, idx) => (
+          <div key={idx} className="${name}__bar" style={{ height: \`\${pt.value}%\` }} onMouseEnter={() => setActiveIndex(idx)} />
+        ))}
+      </div>`
+  },
+  {
+    id: 'kanban-board',
+    name: 'Kanban & Workspace Board',
+    keywords: ['kanban', 'board', 'column', 'lane', 'pipeline'],
+    destructure: 'columns = [], cards = [], activeCardId, setActiveCardId, moveCard',
+    buildState: (name, pascal) => `export interface ${pascal}Card {
+  readonly id: string;
+  readonly title: string;
+  readonly columnId: string;
+}
+
+export interface ${pascal}Column {
+  readonly id: string;
+  readonly title: string;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly columns?: readonly ${pascal}Column[];
+  readonly cards?: readonly ${pascal}Card[];
+  readonly onCardMove?: (cardId: string, toColumnId: string) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+import type { ${pascal}Card } from './types';
+
+export const use${pascal}Controller = (options: { cards?: readonly ${pascal}Card[]; onCardMove?: (id: string, colId: string) => void } = {}) => {
+  const [cards, setCards] = useState<readonly ${pascal}Card[]>(options.cards || []);
+  const [activeCardId, setActiveCardId] = useState<string | null>(null);
+
+  const moveCard = (cardId: string, toColumnId: string) => {
+    const next = cards.map((c) => (c.id === cardId ? { ...c, columnId: toColumnId } : c));
+    setCards(next);
+    options.onCardMove?.(cardId, toColumnId);
+  };
+
+  return { cards, activeCardId, setActiveCardId, moveCard };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__columns">
+        {(columns || []).map((col) => (
+          <div key={col.id} className="${name}__column">
+            <h4>{col.title}</h4>
+            {cards.filter((c) => c.columnId === col.id).map((c) => (
+              <div key={c.id} className="${name}__card">{c.title}</div>
+            ))}
+          </div>
+        ))}
+      </div>`
+  }
+];

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

@@ -0,0 +1,219 @@
+/**
+ * Domain & Entity Archetypes: User Profile, Auth Session, Cart & Billing, Chat & Messaging
+ */
+
+export const DOMAIN_ARCHETYPES = [
+  {
+    id: 'user-profile',
+    name: 'User Profile & Avatar',
+    keywords: ['profile', 'user', 'avatar', 'account', 'author'],
+    destructure: 'user, isEditing, status, toggleEdit, updateUser, setStatus',
+    buildState: (name, pascal) => `export interface ${pascal}User {
+  readonly id: string;
+  readonly name: string;
+  readonly email: string;
+  readonly avatarUrl?: string;
+}
+
+export interface ${pascal}State {
+  readonly user: ${pascal}User | null;
+  readonly isEditing: boolean;
+  readonly status: 'online' | 'away' | 'offline';
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly initialUser?: { id: string; name: string; email: string; avatarUrl?: string };
+  readonly onUpdate?: (user: { id: string; name: string; email: string }) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+import type { ${pascal}User } from './types';
+
+export const use${pascal}Controller = (options: { initialUser?: ${pascal}User; onUpdate?: (u: ${pascal}User) => void } = {}) => {
+  const [user, setUser] = useState<${pascal}User | null>(options.initialUser || {
+    id: 'u-1',
+    name: 'Alex Mercer',
+    email: 'alex.mercer@chemicalx.dev'
+  });
+  const [isEditing, setIsEditing] = useState<boolean>(false);
+  const [status, setStatus] = useState<'online' | 'away' | 'offline'>('online');
+
+  const toggleEdit = () => setIsEditing((prev) => !prev);
+  const updateUser = (updated: ${pascal}User) => {
+    setUser(updated);
+    setIsEditing(false);
+    options.onUpdate?.(updated);
+  };
+
+  return { user, isEditing, status, toggleEdit, updateUser, setStatus };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__profile">
+        <div className="${name}__avatar">
+          <span>{user?.name?.[0] || 'U'}</span>
+          <span className={\`${name}__status-indicator ${name}__status-indicator--\${status}\`} />
+        </div>
+        <div className="${name}__details">
+          <h4>{user?.name}</h4>
+          <p>{user?.email}</p>
+          <button type="button" onClick={toggleEdit}>{isEditing ? 'Cancel' : 'Edit Profile'}</button>
+        </div>
+      </div>`
+  },
+  {
+    id: 'auth-session',
+    name: 'Auth & Session Gate',
+    keywords: ['auth', 'login', 'session', 'gate', 'permission', 'role'],
+    destructure: 'isAuthenticated, userId, role, login, logout',
+    buildState: (name, pascal) => `export interface ${pascal}State {
+  readonly isAuthenticated: boolean;
+  readonly userId: string | null;
+  readonly role: 'guest' | 'member' | 'admin';
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly onLogin?: (userId: string) => void;
+  readonly onLogout?: () => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+
+export const use${pascal}Controller = (options: { onLogin?: (id: string) => void; onLogout?: () => void } = {}) => {
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const [userId, setUserId] = useState<string | null>(null);
+  const [role, setRole] = useState<'guest' | 'member' | 'admin'>('guest');
+
+  const login = (id: string, userRole: 'member' | 'admin' = 'member') => {
+    setIsAuthenticated(true);
+    setUserId(id);
+    setRole(userRole);
+    options.onLogin?.(id);
+  };
+
+  const logout = () => {
+    setIsAuthenticated(false);
+    setUserId(null);
+    setRole('guest');
+    options.onLogout?.();
+  };
+
+  return { isAuthenticated, userId, role, login, logout };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__session">
+        {isAuthenticated ? (
+          <div>
+            <span>Signed in as {userId} ({role})</span>
+            <button type="button" onClick={logout}>Sign Out</button>
+          </div>
+        ) : (
+          <button type="button" onClick={() => login('u-demo', 'member')}>Sign In</button>
+        )}
+      </div>`
+  },
+  {
+    id: 'cart-billing',
+    name: 'Cart & Billing',
+    keywords: ['cart', 'checkout', 'pricing', 'plan', 'invoice', 'subscription', 'billing'],
+    destructure: 'items, subtotal, discountCode, setDiscountCode, updateQuantity, checkout',
+    buildState: (name, pascal) => `export interface ${pascal}CartItem {
+  readonly id: string;
+  readonly name: string;
+  readonly price: number;
+  readonly quantity: number;
+}
+
+export interface ${pascal}State {
+  readonly items: readonly ${pascal}CartItem[];
+  readonly subtotal: number;
+  readonly discountCode: string | null;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly initialItems?: readonly { id: string; name: string; price: number; quantity: number }[];
+  readonly onCheckout?: (total: number) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState, useMemo } from 'react';
+import type { ${pascal}CartItem } from './types';
+
+export const use${pascal}Controller = (options: { onCheckout?: (total: number) => void } = {}) => {
+  const [items, setItems] = useState<readonly ${pascal}CartItem[]>([]);
+  const [discountCode, setDiscountCode] = useState<string | null>(null);
+
+  const subtotal = useMemo(() => items.reduce((sum, item) => sum + item.price * item.quantity, 0), [items]);
+
+  const updateQuantity = (id: string, delta: number) => {
+    setItems((prev) =>
+      prev
+        .map((i) => (i.id === id ? { ...i, quantity: Math.max(0, i.quantity + delta) } : i))
+        .filter((i) => i.quantity > 0)
+    );
+  };
+
+  const checkout = () => {
+    options.onCheckout?.(subtotal);
+  };
+
+  return { items, subtotal, discountCode, setDiscountCode, updateQuantity, checkout };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__cart">
+        <h4>Order Summary ({items.length} items)</h4>
+        <div className="${name}__total">Subtotal: \${(subtotal / 100).toFixed(2)}</div>
+        <button type="button" disabled={items.length === 0} onClick={checkout}>Checkout</button>
+      </div>`
+  },
+  {
+    id: 'chat-messaging',
+    name: 'Chat & Messaging',
+    keywords: ['chat', 'message', 'thread', 'inbox', 'comment', 'feed'],
+    destructure: 'messages, draftText, setDraftText, send',
+    buildState: (name, pascal) => `export interface ${pascal}Message {
+  readonly id: string;
+  readonly author: string;
+  readonly text: string;
+  readonly timestamp: number;
+}
+
+export interface ${pascal}State {
+  readonly messages: readonly ${pascal}Message[];
+  readonly draftText: string;
+}
+`,
+    buildProps: (name, pascal) => `export interface ${pascal}Props {
+  readonly initialMessages?: readonly { id: string; author: string; text: string; timestamp: number }[];
+  readonly onSend?: (text: string) => void;
+}
+`,
+    buildController: (name, pascal) => `import { useState } from 'react';
+import type { ${pascal}Message } from './types';
+
+export const use${pascal}Controller = (options: { onSend?: (text: string) => void } = {}) => {
+  const [messages, setMessages] = useState<readonly ${pascal}Message[]>([]);
+  const [draftText, setDraftText] = useState<string>('');
+
+  const send = () => {
+    if (!draftText.trim()) return;
+    const nextMsg: ${pascal}Message = { id: String(Date.now()), author: 'You', text: draftText.trim(), timestamp: Date.now() };
+    setMessages((prev) => [...prev, nextMsg]);
+    options.onSend?.(draftText.trim());
+    setDraftText('');
+  };
+
+  return { messages, draftText, setDraftText, send };
+};
+`,
+    buildReactBody: (name, pascal) => `      <div className="${name}__feed">
+        {messages.map((m) => (
+          <div key={m.id} className="${name}__message">
+            <strong>{m.author}</strong>: <span>{m.text}</span>
+          </div>
+        ))}
+      </div>
+      <div className="${name}__input-row">
+        <input type="text" value={draftText} onChange={(e) => setDraftText(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && send()} />
+        <button type="button" onClick={send}>Send</button>
+      </div>`
+  }
+];

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

@@ -0,0 +1,35 @@
+/**
+ * Chemical X Protocol: 22 Canonical Semantic Archetypes Registry
+ */
+
+import { COLLECTION_ARCHETYPES } from './collection-archetypes.js';
+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';
+
+export const ALL_ARCHETYPES = [
+  ...COLLECTION_ARCHETYPES,
+  ...INPUT_ARCHETYPES,
+  ...LAYOUT_ARCHETYPES,
+  ...DOMAIN_ARCHETYPES,
+  ...STATUS_ARCHETYPES
+];
+
+export const resolveArchetype = (slug = '') => {
+  const normalized = String(slug).toLowerCase().replace(/^(m-|a-|o-|t-|v-|use-)/, '');
+  const tokens = normalized.split(/[-_]/).filter(Boolean);
+
+  for (const archetype of ALL_ARCHETYPES) {
+    if (archetype.id === normalized || archetype.keywords.includes(normalized)) {
+      return archetype;
+    }
+    const hasKeyword = archetype.keywords.some((kw) => tokens.includes(kw) || normalized.includes(kw));
+    if (hasKeyword) {
+      return archetype;
+    }
+  }
+
+  // Fallback to State Boundary (Archetype #22 in LAYOUT_ARCHETYPES)
+  return LAYOUT_ARCHETYPES.find((a) => a.id === 'state-boundary') || ALL_ARCHETYPES[0];
+};