@astryxdesign/cli 0.1.2-canary.3f9afb0 → 0.1.2-canary.41cdf33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.2-canary.3f9afb0",
+  "version": "0.1.2-canary.41cdf33",
   "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.3f9afb0",
-    "@astryxdesign/lab": "0.1.2-canary.3f9afb0",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.3f9afb0",
+    "@astryxdesign/core": "0.1.2-canary.41cdf33",
+    "@astryxdesign/lab": "0.1.2-canary.41cdf33",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.41cdf33",
     "gpt-tokenizer": "^2.0.0"
   },
   "peerDependenciesMeta": {
@@ -92,9 +92,9 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.2-canary.3f9afb0",
-    "@astryxdesign/lab": "0.1.2-canary.3f9afb0",
-    "@astryxdesign/theme-neutral": "0.1.2-canary.3f9afb0",
+    "@astryxdesign/core": "0.1.2-canary.41cdf33",
+    "@astryxdesign/lab": "0.1.2-canary.41cdf33",
+    "@astryxdesign/theme-neutral": "0.1.2-canary.41cdf33",
     "gpt-tokenizer": "^2.0.0"
   },
   "scripts": {

package/src/api/blog.mjs

@@ -0,0 +1,192 @@
+// 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}};
+}

package/src/api/blog.test.mjs

@@ -0,0 +1,144 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Tests for the blog API — reads the blog over the canonical RSS feed
+ * and fetches each post's plaintext (.txt) alternate. `fetch` is stubbed so
+ * the tests never hit the network. The feed origin is fixed (not
+ * user-configurable), so the tests assert the canonical URLs directly.
+ */
+
+import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
+import {blog} from './blog.mjs';
+import {AstryxError} from './error.mjs';
+import {SITE_URL} from '../lib/site.mjs';
+
+const FEED = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>Astryx Blog</title>
+    <link>${SITE_URL}/blog</link>
+    <item>
+      <title>How Astryx works</title>
+      <link>${SITE_URL}/blog/how-astryx-works</link>
+      <guid isPermaLink="true">${SITE_URL}/blog/how-astryx-works</guid>
+      <description>Under the hood &amp; more</description>
+      <category>engineering</category>
+      <author>cvkxx</author>
+      <author>cixzhang</author>
+      <pubDate>Mon, 29 Jun 2026 00:00:00 GMT</pubDate>
+      <atom:link rel="alternate" type="text/plain" href="${SITE_URL}/blog/how-astryx-works.txt" />
+    </item>
+    <item>
+      <title>Introducing Astryx</title>
+      <link>${SITE_URL}/blog/introducing-astryx</link>
+      <guid isPermaLink="true">${SITE_URL}/blog/introducing-astryx</guid>
+      <description>The launch</description>
+      <category>update</category>
+      <author>cvkxx</author>
+      <pubDate>Thu, 18 Jun 2026 00:00:00 GMT</pubDate>
+      <atom:link rel="alternate" type="text/plain" href="${SITE_URL}/blog/introducing-astryx.txt" />
+    </item>
+  </channel>
+</rss>`;
+
+const POST_TEXT = '# How Astryx works\n\nThe body of the post.';
+const FEED_URL = `${SITE_URL}/rss.xml`;
+const TXT_URL = `${SITE_URL}/blog/how-astryx-works.txt`;
+
+/** Build a fetch stub from a url→{status,body} map. */
+function stubFetch(routes) {
+  return vi.fn(async (url, opts) => {
+    const u = String(url);
+    const r = routes[u];
+    if (!r) return {ok: false, status: 404, text: async () => 'not found'};
+    if (r.throw) throw r.throw;
+    return {ok: r.status < 400, status: r.status, text: async () => r.body};
+  });
+}
+
+beforeEach(() => {
+  vi.stubGlobal('fetch', stubFetch({
+    [FEED_URL]: {status: 200, body: FEED},
+    [TXT_URL]: {status: 200, body: POST_TEXT},
+    [`${SITE_URL}/blog/introducing-astryx.txt`]: {status: 200, body: 'launch body'},
+  }));
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('blog API', () => {
+  it('lists posts parsed from the canonical feed', async () => {
+    const res = await blog();
+    expect(res.type).toBe('blog.list');
+    expect(res.data.feedUrl).toBe(FEED_URL);
+    expect(res.data.posts.map(p => p.slug)).toEqual([
+      'how-astryx-works',
+      'introducing-astryx',
+    ]);
+    expect(res.data.posts[0].authors).toEqual(['cvkxx', 'cixzhang']);
+    expect(res.data.posts[0].textUrl).toBe(TXT_URL);
+    // Entity decoding works (&amp; -> &).
+    expect(res.data.posts[0].description).toBe('Under the hood & more');
+    // The list never fetches post bodies.
+    expect(res.data.posts[0].text).toBeUndefined();
+  });
+
+  it('reads a post via its plaintext alternate', async () => {
+    const res = await blog('how-astryx-works');
+    expect(res.type).toBe('blog.detail');
+    expect(res.data.text).toBe(POST_TEXT);
+    expect(res.data.feedUrl).toBe(FEED_URL);
+    expect(fetch).toHaveBeenCalledWith(TXT_URL, expect.any(Object));
+  });
+
+  it('is case-insensitive on the slug', async () => {
+    const res = await blog('How-Astryx-Works');
+    expect(res.data.slug).toBe('how-astryx-works');
+  });
+
+  it('throws ERR_UNKNOWN_POST with suggestions for a bad slug', async () => {
+    await expect(blog('does-not-exist')).rejects.toMatchObject({
+      code: 'ERR_UNKNOWN_POST',
+    });
+    try {
+      await blog('does-not-exist');
+    } catch (e) {
+      expect(e).toBeInstanceOf(AstryxError);
+      expect(Array.isArray(e.suggestions)).toBe(true);
+      expect(e.suggestions.length).toBeGreaterThan(0);
+    }
+  });
+
+  it('throws ERR_FETCH_FAILED when the feed request fails', async () => {
+    vi.stubGlobal('fetch', stubFetch({
+      [FEED_URL]: {status: 500, body: 'boom'},
+    }));
+    await expect(blog()).rejects.toMatchObject({code: 'ERR_FETCH_FAILED'});
+  });
+
+  it('refuses a post whose plaintext URL is on a different origin (SSRF guard)', async () => {
+    const evilFeed = FEED.replace(
+      `${SITE_URL}/blog/how-astryx-works.txt`,
+      'http://169.254.169.254/latest/meta-data',
+    );
+    vi.stubGlobal('fetch', stubFetch({
+      [FEED_URL]: {status: 200, body: evilFeed},
+      'http://169.254.169.254/latest/meta-data': {status: 200, body: 'SECRETS'},
+    }));
+    await expect(blog('how-astryx-works')).rejects.toMatchObject({
+      code: 'ERR_FETCH_FAILED',
+    });
+    // The internal host must never be fetched.
+    expect(fetch).not.toHaveBeenCalledWith(
+      'http://169.254.169.254/latest/meta-data',
+      expect.anything(),
+    );
+  });
+
+  it('always reads from the canonical feed URL', async () => {
+    await blog();
+    expect(fetch).toHaveBeenCalledWith(FEED_URL, expect.any(Object));
+  });
+});

package/src/api/index.mjs

@@ -21,6 +21,7 @@
 
 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/blog.mjs

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file blog command (hidden) — read the Astryx blog from the published feed.
+ *
+ * Hidden on purpose: it's not part of the documented command surface and does
+ * not appear in --help or the manifest. It reads the blog the same way any
+ * feed reader would — over the public RSS feed — and prints a post's plaintext
+ * (.txt) variant. Nothing about the blog's structure has to change for this to
+ * work; the CLI is just a consumer of the feed.
+ *
+ *   astryx blog                    List posts from the feed
+ *   astryx blog <slug>             Print a post as plaintext
+ */
+
+import {getRunPrefix} from '../utils/package-manager.mjs';
+import {humanLog} from '../lib/json.mjs';
+import {cliError} from '../lib/cli-error.mjs';
+import {blog as blogApi} from '../api/blog.mjs';
+
+function formatList({feedUrl, posts}, run) {
+  const lines = [`\nAstryx blog · feed: ${feedUrl}\n`];
+  if (posts.length === 0) {
+    lines.push('No posts found in the feed.');
+    return lines.join('\n');
+  }
+  for (const p of posts) {
+    lines.push(`  ${p.slug}`);
+    lines.push(`    ${p.title}`);
+    if (p.type) lines.push(`    ${p.type}`);
+    if (p.textUrl) lines.push(`    ${p.textUrl}`);
+    lines.push('');
+  }
+  lines.push(`Read one: ${run} astryx blog <slug>`);
+  return lines.join('\n');
+}
+
+export function registerBlog(program) {
+  program
+    .command('blog [slug]', {hidden: true})
+    .description('Read the Astryx blog from the published feed')
+    .action(async slug => {
+      const run = getRunPrefix();
+      let result;
+      try {
+        result = await blogApi(slug);
+      } catch (e) {
+        cliError(e.message, {suggestions: e.suggestions || [], code: e.code});
+        return;
+      }
+
+      if (result.type === 'blog.list') {
+        humanLog(formatList(result.data, run));
+      } else {
+        // blog.detail — print the feed URL, then the plaintext body.
+        humanLog(`Feed: ${result.data.feedUrl}\n`);
+        humanLog(result.data.text);
+      }
+    });
+}

package/src/commands/build-theme.mjs

@@ -15,6 +15,7 @@
 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 {
@@ -597,6 +598,104 @@ 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')
@@ -621,6 +720,10 @@ 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;
@@ -630,6 +733,20 @@ 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