@astryxdesign/cli 0.1.2-canary.d9633cc → 0.1.2-canary.deb5aa0

package/docs/principles.doc.dense.mjs

@@ -6,9 +6,9 @@ export const docsDense = {
   description: 'core design principles + rules for the design system',
   sections: [
     { title: 'Philosophy', content: [{ type: 'list', items: ['components over primitives', 'semantic tokens over hardcoded values', 'theme-agnostic code', 'open internals'] }] },
-    { title: 'Rules', content: [{ type: 'list', items: ['use components', 'frame-first layout: shell + region budgets before content (astryx docs layout)', 'dense data = rows (Table, List/Item) not Cards; Card = widgets/galleries/settings groups', 'StyleX or Tailwind for styling', 'semantic tokens only', 'CSS vars for colors', 'controlled form inputs', 'useLinkComponent() for navigation'] }] },
+    { title: 'Rules', content: [{ type: 'list', items: ['use components', 'StyleX or Tailwind for styling', 'semantic tokens only', 'CSS vars for colors', 'controlled form inputs', 'useLinkComponent() for navigation'] }] },
     { title: 'Styling', content: [{ type: 'prose', text: 'xstyle prop for component overrides. StyleX or Tailwind for layout. See astryx docs styling.' }] },
-    { title: 'Anti-Patterns', content: [{ type: 'list', items: ['no inline styles on raw elements', 'no hardcoded colors — use tokens or Tailwind semantic classes', 'no hardcoded spacing', 'no hardcoded <a> — use useLinkComponent()', 'no Card-wrapped list items — frame first, rows for dense data (astryx docs layout)', 'no decorative Badge — StatusDot/Token for status', 'read docs before inventing props'] }] },
+    { title: 'Anti-Patterns', content: [{ type: 'list', items: ['no inline styles on raw elements', 'no hardcoded colors — use tokens or Tailwind semantic classes', 'no hardcoded spacing', 'no hardcoded <a> — use useLinkComponent()', 'read docs before inventing props'] }] },
     { title: 'Tokens', content: [{ type: 'prose', text: 'run npx astryx docs tokens for full reference' }] },
   ],
 };

package/docs/principles.doc.mjs

@@ -39,8 +39,6 @@ export const docs = {
           style: 'ordered',
           items: [
             'Use components for everything they cover',
-            'Layout is frame-first: pick the shell and budget regions before writing content (see \`npx astryx docs layout\`)',
-            'Dense data renders as rows (Table, List/Item), edge-to-edge with dividers; Card is for widgets, galleries, and settings groups',
             'StyleX or Tailwind for custom styling; both are first-class (see \`npx astryx docs styling\`)',
             'Semantic tokens, not hardcoded values (see \`npx astryx docs tokens\`)',
             'CSS custom properties for colors, not hex values',
@@ -76,8 +74,6 @@ export const docs = {
             'Hardcoded colors (#fff). Use var(--color-*) or Tailwind semantic classes (text-primary, bg-surface)',
             'Hardcoded spacing (16px). Use spacing tokens or Tailwind spacing utilities',
             'Hardcoded <a> elements. Use useLinkComponent() so consumers can swap in their framework router via LinkProvider',
-            'Wrapping every list item or page section in a Card. Decide the frame first; dense data renders as rows (see \`npx astryx docs layout\`)',
-            'Badge as decoration. Reserve Badge for counts and enumerated states; use StatusDot or Token for status',
             'Inventing props. Read component docs first',
           ],
         },

package/docs/principles.doc.zh.mjs

@@ -6,9 +6,9 @@ export const docsZh = {
   description: 'XDS 核心设计原则和规则。',
   sections: [
     { title: '设计哲学', content: [{ type: 'list', items: ['组件优于原始元素 — 优先使用 XDS 组件', '语义化令牌优于硬编码值', '主题无关的代码 — 深色模式自动生效', '开放的内部机制 — 所有基础组件均可导出和组合'] }] },
-    { title: '规则', content: [{ type: 'list', items: ['所有支持的场景都使用 XDS 组件', '布局采用框架优先：先选定外壳并规划区域尺寸，再编写内容（见 astryx docs layout）', '密集数据使用行（Table、List/Item）通栏渲染；Card 用于小部件、画廊和设置分组', '使用 StyleX 或 Tailwind 进行样式设置', '使用语义化令牌，不使用硬编码值', '使用 CSS 变量设置颜色，不使用十六进制值', '表单输入为受控组件（value + onChange）', '使用 useLinkComponent() 进行导航'] }] },
+    { title: '规则', content: [{ type: 'list', items: ['所有支持的场景都使用 XDS 组件', '使用 StyleX 或 Tailwind 进行样式设置', '使用语义化令牌，不使用硬编码值', '使用 CSS 变量设置颜色，不使用十六进制值', '表单输入为受控组件（value + onChange）', '使用 useLinkComponent() 进行导航'] }] },
     { title: '样式方法', content: [{ type: 'prose', text: '组件覆盖使用 xstyle 属性。布局使用 StyleX 或 Tailwind。详见 astryx docs styling。' }] },
-    { title: '反模式', content: [{ type: 'list', items: ['不要在原始元素上使用内联样式', '不要硬编码颜色 — 使用令牌或 Tailwind 语义类', '不要硬编码间距', '不要硬编码 <a> 元素 — 使用 useLinkComponent()', '不要把每个列表项都包在 Card 里 — 先定框架，密集数据用行渲染（见 astryx docs layout）', '不要把 Badge 当装饰 — 状态请使用 StatusDot 或 Token', '不要自创属性。先阅读组件文档'] }] },
+    { title: '反模式', content: [{ type: 'list', items: ['不要在原始元素上使用内联样式', '不要硬编码颜色 — 使用令牌或 Tailwind 语义类', '不要硬编码间距', '不要硬编码 <a> 元素 — 使用 useLinkComponent()', '不要自创属性。先阅读组件文档'] }] },
     { title: '设计令牌', content: [{ type: 'prose', text: '运行 npx astryx docs tokens 查看完整参考' }] },
   ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.d9633cc",
+  "version": "0.1.2-canary.deb5aa0",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -75,9 +75,9 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.d9633cc",
-    "@astryxdesign/lab": "0.1.2-canary.d9633cc",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.d9633cc",
+    "@astryxdesign/core": "0.1.2-canary.deb5aa0",
+    "@astryxdesign/lab": "0.1.2-canary.deb5aa0",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.deb5aa0",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -92,9 +92,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.d9633cc",
-    "@astryxdesign/lab": "0.1.2-canary.d9633cc",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.d9633cc",
+    "@astryxdesign/core": "0.1.2-canary.deb5aa0",
+    "@astryxdesign/lab": "0.1.2-canary.deb5aa0",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.deb5aa0",
     "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {

package/src/api/index.mjs

@@ -21,7 +21,6 @@
 
 export {component} from './component.mjs';
 export {docs} from './docs.mjs';
-export {blog} from './blog.mjs';
 export {discover} from './discover.mjs';
 export {template} from './template.mjs';
 export {themeAdd, listThemes} from './theme-add.mjs';

package/src/commands/agent-docs.mjs

@@ -180,9 +180,6 @@ export function generateCompressedIndex(version, {coreDir, runPrefix = getRunPre
   // Rules — the top error-preventers.
   lines.push('RULES:');
   lines.push('- No <div> — components do all layout/spacing. Full page → AppShell; sidebar nav → SideNav.');
-  lines.push('- Frame first: pick the shell (AppShell / Layout+LayoutPanel) and budget regions in px BEFORE writing content (`astryx docs layout`).');
-  lines.push('- Dense data = rows (Table, List/Item) edge-to-edge — never Card-wrapped list items. Card = dashboard widgets, galleries, settings groups only.');
-  lines.push('- Status → StatusDot/Token; Badge only for counts and enumerated states, never decoration.');
   // Styling guidance tailored to the project's configured system — never
   // recommend a path that isn't compiled here (xstyle needs the StyleX compiler;
   // utilities need Tailwind). Tokens are always the source of truth.

package/src/commands/build-theme.mjs

@@ -15,7 +15,6 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import {pathToFileURL, fileURLToPath} from 'node:url';
-import {spawn} from 'node:child_process';
 import {createJiti} from 'jiti';
 import {getRunPrefix} from '../utils/package-manager.mjs';
 import {
@@ -598,104 +597,6 @@ function validatePrivateVars(themeDef) {
   return errors;
 }
 
-/**
- * Path to this CLI's real entry (bin/astryx.mjs), resolved from this module's
- * location (src/commands/build-theme.mjs → ../../bin/astryx.mjs). Used to
- * re-invoke `theme build` as a child process in watch mode.
- */
-function resolveCliBin() {
-  const commandsDir = path.dirname(fileURLToPath(import.meta.url));
-  return path.resolve(commandsDir, '../../bin/astryx.mjs');
-}
-
-/**
- * Run a single `theme build` as a child process, reusing the exact
- * single-build code path (and its error handling) rather than duplicating it.
- * Resolves with the child's exit code; never rejects.
- *
- * @param {string} file - The theme file argument, as the user passed it.
- * @param {object} options - Parsed command options (only `out` is forwarded).
- * @returns {Promise<number>}
- */
-function runThemeBuildOnceChild(file, options) {
-  const cliBin = resolveCliBin();
-  const args = [cliBin, 'theme', 'build', file];
-  if (options.out) args.push('--out', options.out);
-  return new Promise(resolve => {
-    const child = spawn(process.execPath, args, {
-      stdio: 'inherit',
-      env: process.env,
-    });
-    child.on('close', code => resolve(code ?? 0));
-    child.on('error', () => resolve(1));
-  });
-}
-
-/**
- * Watch a theme file and rebuild on change. Runs an initial build, then
- * rebuilds (debounced) whenever the file changes, until interrupted with
- * Ctrl-C. Each rebuild runs in a child process so a build error (which the
- * single-build path reports via a hard exit) is contained and the watcher
- * keeps running.
- *
- * @param {string} file - The theme file argument, as the user passed it.
- * @param {string} filePath - Absolute path to the theme file.
- * @param {object} options - Parsed command options.
- * @returns {Promise<void>} Resolves when the watcher is stopped (Ctrl-C).
- */
-async function runThemeBuildWatch(file, filePath, options) {
-  const rel = path.relative(process.cwd(), filePath);
-
-  // Initial build.
-  await runThemeBuildOnceChild(file, options);
-
-  humanLog(`\n👀 Watching ${rel} for changes — press Ctrl-C to stop.`);
-
-  let building = false;
-  let queued = false;
-  let debounce = null;
-
-  const rebuild = async () => {
-    if (building) {
-      // Coalesce changes that land mid-build into a single follow-up run.
-      queued = true;
-      return;
-    }
-    building = true;
-    humanLog(`\n♻️  Change detected — rebuilding ${rel}...`);
-    await runThemeBuildOnceChild(file, options);
-    building = false;
-    humanLog(`\n👀 Watching ${rel} for changes — press Ctrl-C to stop.`);
-    if (queued) {
-      queued = false;
-      rebuild();
-    }
-  };
-
-  // Some editors replace the file (rename) rather than writing in place, which
-  // can drop the watch. Watch the containing directory and filter to our file
-  // so edits survive atomic-save/rename.
-  const watchDir = path.dirname(filePath);
-  const baseName = path.basename(filePath);
-  const watcher = fs.watch(watchDir, (_eventType, changed) => {
-    if (changed && changed !== baseName) return;
-    clearTimeout(debounce);
-    // Debounce: editors often emit several events per save.
-    debounce = setTimeout(rebuild, 100);
-  });
-
-  await new Promise(resolve => {
-    const stop = () => {
-      clearTimeout(debounce);
-      watcher.close();
-      humanLog('\nStopped watching.');
-      resolve();
-    };
-    process.once('SIGINT', stop);
-    process.once('SIGTERM', stop);
-  });
-}
-
 export function registerTheme(program) {
   const theme = program
     .command('theme')
@@ -720,10 +621,6 @@ export function registerTheme(program) {
     .command('build <file>')
     .description('Compile a defineTheme file to CSS + JS')
     .option('-o, --out <path>', 'Output CSS file path')
-    .option(
-      '-w, --watch',
-      'Rebuild automatically when the theme file changes (Ctrl-C to stop)',
-    )
     .action(async (file, options) => {
       const filePath = path.resolve(process.cwd(), file);
       const json = program.opts().json || false;
@@ -733,20 +630,6 @@ export function registerTheme(program) {
         return;
       }
 
-      // Watch mode: run an initial build, then rebuild on every change to the
-      // theme file. Watch is a human-interactive, long-running mode — it is not
-      // supported in --json (machine) mode, which expects a single envelope.
-      if (options.watch) {
-        if (json) {
-          cliError('--watch is not supported with --json', {
-            code: ERROR_CODES.ERR_THEME_INVALID,
-          });
-          return;
-        }
-        await runThemeBuildWatch(file, filePath, options);
-        return;
-      }
-
       if (!json) humanLog(`\nBuilding theme from ${path.relative(process.cwd(), filePath)}...`);
 
       // Extract theme definition

package/src/index.mjs

@@ -245,7 +245,6 @@ const commands = [
   {name: 'init', path: './commands/init.mjs', register: 'registerInit'},
   {name: 'component', path: './commands/component/index.mjs', register: 'registerComponent'},
   {name: 'docs', path: './commands/docs.mjs', register: 'registerDocs'},
-  {name: 'blog', path: './commands/blog.mjs', register: 'registerBlog'},
   {name: 'swizzle', path: './commands/swizzle.mjs', register: 'registerSwizzle'},
   // agent-docs folded into init — functions still importable from agent-docs.mjs
   {name: 'template', path: './commands/template.mjs', register: 'registerTemplate'},

package/src/lib/error-codes.mjs

@@ -75,8 +75,6 @@
  *   | 'ERR_INVALID_VERSION'
  *   | 'ERR_DEP_MISSING'
  *   | 'ERR_GH_CLI'
- *   | 'ERR_UNKNOWN_POST'
- *   | 'ERR_FETCH_FAILED'
  *   | 'ERR_LAYOUT_PARSE'
  *   | 'ERR_LAYOUT_INVALID'
  * )} ErrorCode
@@ -183,12 +181,6 @@ export const ERROR_CODES = Object.freeze({
   /** GitHub CLI (`gh`) is not installed or not authenticated. */
   ERR_GH_CLI: 'ERR_GH_CLI',
 
-  // ── Blog (read via the published RSS feed) ───────────────────────
-  /** No blog post matched the requested slug in the feed. */
-  ERR_UNKNOWN_POST: 'ERR_UNKNOWN_POST',
-  /** A network fetch (RSS feed or post text) failed. */
-  ERR_FETCH_FAILED: 'ERR_FETCH_FAILED',
-
   // ── Layout expressions (XLE/XLO) ─────────────────────────────────
   /** A layout expression failed to parse (syntax error, with line/col). */
   ERR_LAYOUT_PARSE: 'ERR_LAYOUT_PARSE',

package/templates/blocks/components/DropdownMenu/DropdownMenuShowcase.tsx

@@ -2,11 +2,16 @@
 
 'use client';
 
+import {useState} from 'react';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
 
 export default function DropdownMenuShowcase() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   return (
     <DropdownMenu
+      isMenuOpen={isMenuOpen}
+      onOpenChange={setIsMenuOpen}
       button={{label: 'Actions'}}
       items={[
         {label: 'Edit', onClick: () => {}},

package/templates/blocks/components/DropdownMenuItem/DropdownMenuItemShowcase.tsx

@@ -65,7 +65,10 @@ const TrashIcon = (props: React.SVGProps<SVGSVGElement>) => (
 
 export default function DropdownMenuItemShowcase() {
   return (
-    <DropdownMenu button={{label: 'Actions'}}>
+    <DropdownMenu
+      button={{label: 'Actions'}}
+      isMenuOpen
+      onOpenChange={() => {}}>
       <DropdownMenuItem
         icon={PencilIcon}
         label="Edit"

package/templates/blocks/components/Lightbox/LightboxShowcase.tsx

@@ -12,10 +12,9 @@ export default function LightboxShowcase() {
         isOpen={isOpen}
         onOpenChange={setIsOpen}
         media={{
-          src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
-          alt: 'Coastal shoreline with ocean waves',
-          caption:
-            'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
+          src: 'https://picsum.photos/id/10/1200/800',
+          alt: 'Forest path',
+          caption: 'A winding path through the forest',
         }}
       />
     </>

package/templates/blocks/components/MoreMenu/MoreMenuShowcase.tsx

@@ -2,11 +2,16 @@
 
 'use client';
 
+import {useState} from 'react';
 import {MoreMenu} from '@astryxdesign/core/MoreMenu';
 
 export default function MoreMenuShowcase() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
   return (
     <MoreMenu
+      isMenuOpen={isMenuOpen}
+      onOpenChange={setIsMenuOpen}
       items={[
         {label: 'Edit', onClick: () => {}},
         {label: 'Duplicate', onClick: () => {}},

package/templates/blocks/components/TreeListBranches/TreeListBranchesShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TreeListBranches',
+  name: 'TreeListBranches',
+  displayName: 'Tree List Branches',
+  description: 'Tree with expandable branches at multiple nesting levels.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList'],
+};

package/templates/blocks/components/TreeListBranches/TreeListBranchesShowcase.tsx

@@ -0,0 +1,64 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+
+const noop = () => {};
+
+export default function TreeListBranchesShowcase() {
+  return (
+    <TreeList
+      items={[
+        {
+          id: 'design-system',
+          label: 'Design System',
+          isExpanded: true,
+          children: [
+            {
+              id: 'components',
+              label: 'Components',
+              isExpanded: true,
+              children: [
+                {
+                  id: 'inputs',
+                  label: 'Inputs',
+                  children: [
+                    {id: 'text-input', label: 'TextInput', onClick: noop},
+                    {id: 'checkbox', label: 'Checkbox', onClick: noop},
+                    {id: 'selector', label: 'Selector', onClick: noop},
+                  ],
+                },
+                {
+                  id: 'layout',
+                  label: 'Layout',
+                  children: [
+                    {id: 'stack', label: 'Stack', onClick: noop},
+                    {id: 'grid', label: 'Grid', onClick: noop},
+                  ],
+                },
+              ],
+            },
+            {
+              id: 'tokens',
+              label: 'Tokens',
+              children: [
+                {id: 'colors', label: 'Colors', onClick: noop},
+                {id: 'spacing', label: 'Spacing', onClick: noop},
+                {id: 'typography', label: 'Typography', onClick: noop},
+              ],
+            },
+          ],
+        },
+        {
+          id: 'utilities',
+          label: 'Utilities',
+          children: [
+            {id: 'hooks', label: 'Hooks', onClick: noop},
+            {id: 'helpers', label: 'Helpers', onClick: noop},
+          ],
+        },
+      ]}
+    />
+  );
+}

package/templates/blocks/components/TreeListItem/TreeListItemShowcase.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'TreeListItem',
+  name: 'TreeListItem',
+  displayName: 'Tree List Item',
+  description: 'Tree items with descriptions, icons, badges, selection, disabled state, and nested expand/collapse. TreeList is data-driven: no composed children API.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['TreeList', 'Badge', 'Icon', 'Layout', 'Text'],
+};

package/templates/blocks/components/TreeListItem/TreeListItemShowcase.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {TreeList} from '@astryxdesign/core/TreeList';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Icon} from '@astryxdesign/core/Icon';
+
+const noop = () => {};
+
+export default function TreeListItemShowcase() {
+  return (
+    <TreeList
+      style={{width: 400}}
+      items={[
+        {
+          id: 'inbox',
+          label: 'Inbox',
+          description: '12 unread messages',
+          isExpanded: true,
+          startContent: <Icon icon="info" size="sm" />,
+          endContent: <Badge label="12" variant="info" />,
+          children: [
+            {
+              id: 'primary',
+              label: 'Primary',
+              isSelected: true,
+              startContent: <Icon icon="check" size="sm" />,
+              onClick: noop,
+            },
+            {
+              id: 'updates',
+              label: 'Updates',
+              endContent: <Badge label="4" variant="info" />,
+              onClick: noop,
+            },
+          ],
+        },
+        {
+          id: 'drafts',
+          label: 'Drafts',
+          description: '3 draft messages',
+          startContent: <Icon icon="clock" size="sm" />,
+          onClick: noop,
+        },
+        {
+          id: 'archive',
+          label: 'Archive',
+          onClick: noop,
+        },
+        {
+          id: 'spam',
+          label: 'Spam',
+          isDisabled: true,
+          startContent: <Icon icon="warning" size="sm" />,
+        },
+      ]}
+    />
+  );
+}

package/docs/layout.doc.dense.mjs

@@ -1,90 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('../../core/src/docs-types').ReferenceTranslationDoc} */
-
-export const docsDense = {
-  description:
-    'frame-first app layout: shell choice, region budgets, cards vs rows',
-  sections: [
-    {
-      title: 'Frame First',
-      content: [
-        {
-          type: 'prose',
-          text: 'decide frame before content. content-first (Card-wrapped sections in a scroll column) = prototype look.',
-        },
-        {
-          type: 'list',
-          items: [
-            'pick frame: AppShell (nav apps) | Layout+LayoutPanel+LayoutContent (multi-pane tools) | plain column (docs/forms)',
-            'budget regions in px first: side nav 240-280, rail 64-72, inspector 340-420, facet rail 220-260',
-            'container policy per region: dense data = rows; dashboards/galleries = card grids',
-            'write responsive contract up front',
-          ],
-        },
-        null,
-      ],
-    },
-    {
-      title: 'App Archetypes',
-      content: [
-        {
-          type: 'prose',
-          text: 'container choice tracks archetype, not preference.',
-        },
-        null,
-        {
-          type: 'prose',
-          text: 'start from matching template (astryx template --list), study with --skeleton.',
-        },
-      ],
-    },
-    {
-      title: 'Cards vs Rows',
-      content: [
-        {
-          type: 'prose',
-          text: 'Card = widget container, NOT list-item wrapper. dense/scannable/selectable data = rows: Table (columnar) or List/Item (single-line), edge-to-edge, 32-40px rows, dividers.',
-        },
-        {
-          type: 'list',
-          items: [
-            'Table+plugins: hosts, deployments, monitors, users',
-            'List/Item rows: issues, files, conversations',
-            'Card: KPI tiles, chart panels, gallery entries, settings groups',
-            'EmptyState for zero-match',
-          ],
-        },
-        {
-          type: 'list',
-          items: [
-            'no Card-wrapped list items (card soup)',
-            'no stacked full-width Cards as page structure',
-            'no Cards in Cards',
-            'no decorative Badge — counts/enums only; StatusDot/Token for status',
-          ],
-        },
-      ],
-    },
-    {
-      title: 'Panels and Inspectors',
-      content: [
-        {
-          type: 'prose',
-          text: 'master-detail: row select opens fixed-width inspector (LayoutPanel end slot + width budget + resizable/useResizable). overlay content <=1024px, do not compress.',
-        },
-        null,
-      ],
-    },
-    {
-      title: 'Responsive Contract',
-      content: [
-        {
-          type: 'prose',
-          text: 'declare breakpoint behavior as comment at frame root: which regions collapse/overlay/drop at which widths.',
-        },
-        null,
-      ],
-    },
-  ],
-};