@astryxdesign/cli 0.1.2-canary.d8e5285 → 0.1.2-canary.dd00d23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.d8e5285",
+  "version": "0.1.2-canary.dd00d23",
   "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.d8e5285",
-    "@astryxdesign/lab": "0.1.2-canary.d8e5285",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.d8e5285",
+    "@astryxdesign/core": "0.1.2-canary.dd00d23",
+    "@astryxdesign/lab": "0.1.2-canary.dd00d23",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.dd00d23",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -92,9 +92,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.d8e5285",
-    "@astryxdesign/lab": "0.1.2-canary.d8e5285",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.d8e5285",
+    "@astryxdesign/core": "0.1.2-canary.dd00d23",
+    "@astryxdesign/lab": "0.1.2-canary.dd00d23",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.dd00d23",
     "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/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/src/api/blog.mjs

@@ -1,192 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file Programmatic API for the blog command.
- *
- * The blog is read the same way any feed reader reads it: over the published
- * RSS feed. Listing parses the feed; reading a post fetches the plaintext
- * (.txt) alternate the feed advertises for each item. Nothing here touches the
- * blog's source files — the CLI is just a consumer of the public feed, so the
- * blog's structure can change freely without touching the CLI.
- */
-
-import {AstryxError} from './error.mjs';
-import {ERROR_CODES} from '../lib/error-codes.mjs';
-import {SITE_URL, SITE_ORIGIN} from '../lib/site.mjs';
-
-/** Abort a feed/post fetch that hangs, and cap how much we'll read. */
-const FETCH_TIMEOUT_MS = 15000;
-const MAX_BYTES = 5 * 1024 * 1024; // 5 MB — a blog feed is never larger.
-
-const FEED_URL = new URL('/rss.xml', SITE_URL).toString();
-
-async function fetchText(url) {
-  const controller = new AbortController();
-  const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-  let res;
-  try {
-    res = await fetch(url, {
-      signal: controller.signal,
-      redirect: 'follow',
-    });
-  } catch (e) {
-    clearTimeout(timer);
-    const reason = e.name === 'AbortError' ? 'timed out' : e.message;
-    throw new AstryxError(
-      `Could not reach ${url}: ${reason}`,
-      [],
-      ERROR_CODES.ERR_FETCH_FAILED,
-    );
-  }
-  clearTimeout(timer);
-  if (!res.ok) {
-    throw new AstryxError(
-      `Request to ${url} failed with ${res.status}`,
-      [],
-      ERROR_CODES.ERR_FETCH_FAILED,
-    );
-  }
-  const body = await res.text();
-  if (body.length > MAX_BYTES) {
-    throw new AstryxError(
-      `Response from ${url} exceeded ${MAX_BYTES} bytes`,
-      [],
-      ERROR_CODES.ERR_FETCH_FAILED,
-    );
-  }
-  return body;
-}
-
-/**
- * Defense in depth: a post's plaintext URL comes from feed content. Require it
- * to live on the canonical origin so even a tampered feed can't redirect the
- * CLI to another host.
- */
-function assertCanonicalOrigin(target) {
-  let targetOrigin;
-  try {
-    targetOrigin = new URL(target).origin;
-  } catch {
-    throw new AstryxError(
-      `Post has an invalid plaintext URL: "${target}"`,
-      [],
-      ERROR_CODES.ERR_FETCH_FAILED,
-    );
-  }
-  if (targetOrigin !== SITE_ORIGIN) {
-    throw new AstryxError(
-      `Refusing to fetch post text from a non-canonical origin (${targetOrigin})`,
-      [],
-      ERROR_CODES.ERR_FETCH_FAILED,
-    );
-  }
-}
-
-function unescapeXml(value) {
-  return value
-    .replace(/&lt;/g, '<')
-    .replace(/&gt;/g, '>')
-    .replace(/&quot;/g, '"')
-    .replace(/&apos;/g, "'")
-    .replace(/&amp;/g, '&');
-}
-
-function tag(item, name) {
-  const m = item.match(new RegExp(`<${name}[^>]*>([\\s\\S]*?)</${name}>`));
-  return m ? unescapeXml(m[1].trim()) : '';
-}
-
-function tagAll(item, name) {
-  const out = [];
-  const re = new RegExp(`<${name}[^>]*>([\\s\\S]*?)</${name}>`, 'g');
-  let m;
-  while ((m = re.exec(item))) out.push(unescapeXml(m[1].trim()));
-  return out;
-}
-
-/** Extract the plaintext alternate href from an <item>. */
-function textHref(item) {
-  // Match the atom:link alternate regardless of attribute order/quoting; then
-  // confirm it's the text/plain alternate before trusting the href.
-  const re = /<atom:link\b[^>]*?\/?>/g;
-  let m;
-  while ((m = re.exec(item))) {
-    const el = m[0];
-    if (/rel\s*=\s*["']alternate["']/.test(el) &&
-        /type\s*=\s*["']text\/plain["']/.test(el)) {
-      const href = el.match(/href\s*=\s*["']([^"']+)["']/);
-      if (href) return unescapeXml(href[1]);
-    }
-  }
-  return null;
-}
-
-/** Derive a slug from a post link (last path segment). */
-function slugFromLink(link) {
-  try {
-    const path = new URL(link).pathname.replace(/\/$/, '');
-    return path.slice(path.lastIndexOf('/') + 1);
-  } catch {
-    return link;
-  }
-}
-
-function parseFeed(xml) {
-  const items = [];
-  const re = /<item>([\s\S]*?)<\/item>/g;
-  let m;
-  while ((m = re.exec(xml))) {
-    const raw = m[1];
-    const link = tag(raw, 'link');
-    items.push({
-      slug: slugFromLink(link),
-      title: tag(raw, 'title'),
-      description: tag(raw, 'description'),
-      date: tag(raw, 'pubDate'),
-      type: tag(raw, 'category'),
-      authors: tagAll(raw, 'author'),
-      link,
-      textUrl: textHref(raw),
-    });
-  }
-  return items;
-}
-
-/**
- * List posts (from the feed), or read one post (via its .txt alternate).
- * Both envelopes carry `feedUrl` so a caller can hit the RSS feed directly.
- * The feed is always the canonical site — there is no user-supplied URL.
- *
- * @param {string} [slug]
- * @returns {Promise<{type: string, data: unknown}>}
- */
-export async function blog(slug) {
-  const xml = await fetchText(FEED_URL);
-  const posts = parseFeed(xml);
-
-  if (!slug) {
-    return {type: 'blog.list', data: {feedUrl: FEED_URL, posts}};
-  }
-
-  const normalized = slug.toLowerCase();
-  const post = posts.find(p => p.slug.toLowerCase() === normalized);
-  if (!post) {
-    throw new AstryxError(
-      `No blog post with slug "${slug}"`,
-      posts.map(p => ({name: p.slug, reason: 'available post'})),
-      ERROR_CODES.ERR_UNKNOWN_POST,
-    );
-  }
-
-  if (!post.textUrl) {
-    throw new AstryxError(
-      `Post "${slug}" has no plaintext alternate in the feed`,
-      [],
-      ERROR_CODES.ERR_FETCH_FAILED,
-    );
-  }
-
-  assertCanonicalOrigin(post.textUrl);
-  const text = await fetchText(post.textUrl);
-  return {type: 'blog.detail', data: {...post, feedUrl: FEED_URL, text}};
-}