@astryxdesign/cli 0.1.4-canary.9ed1797 → 0.1.4-canary.a30efd1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.4-canary.9ed1797",
+  "version": "0.1.4-canary.a30efd1",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -75,12 +75,16 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.1.4-canary.9ed1797",
-    "@astryxdesign/lab": "0.1.4-canary.9ed1797",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.9ed1797",
-    "gpt-tokenizer": "^2.0.0"
+    "@astryxdesign/charts": "0.1.4-canary.a30efd1",
+    "@astryxdesign/core": "0.1.4-canary.a30efd1",
+    "@astryxdesign/lab": "0.1.4-canary.a30efd1",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.a30efd1",
+    "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
+    "@astryxdesign/charts": {
+      "optional": true
+    },
     "@astryxdesign/core": {
       "optional": true
     },
@@ -92,10 +96,11 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/core": "0.1.4-canary.9ed1797",
-    "@astryxdesign/lab": "0.1.4-canary.9ed1797",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.9ed1797",
-    "gpt-tokenizer": "^2.0.0"
+    "@astryxdesign/charts": "0.1.4-canary.a30efd1",
+    "@astryxdesign/core": "0.1.4-canary.a30efd1",
+    "@astryxdesign/lab": "0.1.4-canary.a30efd1",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.a30efd1",
+    "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {
     "astryx": "node bin/astryx.mjs",

package/src/api/doctor.mjs

@@ -115,10 +115,21 @@ function findThemePackages(cwd) {
     return found;
   }
   for (const entry of entries) {
-    if (!entry.isDirectory()) continue;
     if (!entry.name.startsWith('theme-')) continue;
+    const dir = path.join(scopeDir, entry.name);
+    // pnpm installs packages as symlinks into node_modules/.pnpm, and a
+    // symlink dirent reports isDirectory() as false — stat the target instead.
+    let isDir = entry.isDirectory();
+    if (!isDir && entry.isSymbolicLink()) {
+      try {
+        isDir = fs.statSync(dir).isDirectory();
+      } catch {
+        isDir = false;
+      }
+    }
+    if (!isDir) continue;
     const name = `@astryxdesign/${entry.name}`;
-    found.push({name, version: pkgVersion(path.join(scopeDir, entry.name))});
+    found.push({name, version: pkgVersion(dir)});
   }
   return found;
 }

package/src/commands/doctor.test.mjs

@@ -63,6 +63,33 @@ function installPkg(name, version = '1.0.0') {
   return dir;
 }
 
+/**
+ * Mirror pnpm's layout: the real package lives under node_modules/.pnpm and
+ * the entry in the scope directory is a symlink to it.
+ */
+function installPkgPnpmStyle(name, version = '1.0.0') {
+  const realDir = path.join(
+    tmpDir,
+    'node_modules',
+    '.pnpm',
+    `${name.replace('/', '+')}@${version}`,
+    'node_modules',
+    ...name.split('/'),
+  );
+  fs.mkdirSync(realDir, {recursive: true});
+  fs.writeFileSync(
+    path.join(realDir, 'package.json'),
+    JSON.stringify({name, version, main: 'index.js'}),
+  );
+  fs.writeFileSync(path.join(realDir, 'index.js'), 'module.exports = {};');
+  const linkPath = path.join(tmpDir, 'node_modules', ...name.split('/'));
+  fs.mkdirSync(path.dirname(linkPath), {recursive: true});
+  // 'junction' keeps this working on Windows without elevated permissions;
+  // it is ignored on posix.
+  fs.symlinkSync(realDir, linkPath, 'junction');
+  return linkPath;
+}
+
 function find(checks, id) {
   return checks.find(c => c.id === id);
 }
@@ -119,6 +146,13 @@ describe('doctor — individual checks', () => {
     expect(res.status).toBe('pass');
   });
 
+  it('themes: detects pnpm-style symlinked theme packages (#3530)', () => {
+    installPkgPnpmStyle('@astryxdesign/theme-neutral', '0.1.2');
+    const res = checkThemes({cwd: tmpDir, configTheme: 'default'});
+    expect(res.status).toBe('pass');
+    expect(res.message).toContain('@astryxdesign/theme-neutral');
+  });
+
   it('config: INFO when no astryx.config.mjs', async () => {
     const res = await checkConfig({cwd: tmpDir, configPath: null});
     expect(res.status).toBe('info');

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Collapsible',
+  name: 'Collapsible — Divided Accordion',
+  displayName: 'Collapsible — Divided Accordion',
+  description: 'FAQ-style accordion using the dividers prop on CollapsibleGroup: built-in row hairlines and density padding with zero custom CSS. Use for FAQs, settings lists, and nav sections.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Collapsible', 'CollapsibleGroup', 'Text'],
+};

package/templates/blocks/components/Collapsible/CollapsibleDividedAccordion.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function CollapsibleDividedAccordion() {
+  return (
+    <div style={{width: '100%', maxWidth: 400}}>
+      <CollapsibleGroup type="single" dividers="between" defaultValue="reset">
+        <Collapsible trigger="How do I reset my password?" value="reset">
+          <Text type="body">
+            Go to Settings → Security → Change Password. You'll receive a
+            confirmation email within a few minutes.
+          </Text>
+        </Collapsible>
+        <Collapsible trigger="Can I change my username?" value="username">
+          <Text type="body">
+            Usernames can be changed once every 30 days from your profile
+            settings.
+          </Text>
+        </Collapsible>
+        <Collapsible trigger="How do I delete my account?" value="delete">
+          <Text type="body">
+            Account deletion is permanent. Your data will be removed within 30
+            days.
+          </Text>
+        </Collapsible>
+      </CollapsibleGroup>
+    </div>
+  );
+}

package/templates/blocks/components/NavHeadingMenu/NavHeadingMenuShowcase.tsx

@@ -25,21 +25,23 @@ function AppIcon() {
 
 export default function NavHeadingMenuShowcase() {
   return (
-    <SideNav
-      header={
-        <SideNavHeading
-          heading="Acme Platform"
-          icon={<AppIcon />}
-          menu={
-            <NavHeadingMenu size="lg">
-              <NavHeadingMenuItem label="Dashboard" href="/dashboard" />
-              <NavHeadingMenuItem label="Analytics" href="/analytics" />
-              <NavHeadingMenuItem label="Settings" href="/settings" />
-            </NavHeadingMenu>
-          }
-        />
-      }>
-      {null}
-    </SideNav>
+    <div style={{height: 100}}>
+      <SideNav
+        header={
+          <SideNavHeading
+            heading="Acme Platform"
+            icon={<AppIcon />}
+            menu={
+              <NavHeadingMenu size="lg">
+                <NavHeadingMenuItem label="Dashboard" href="/dashboard" />
+                <NavHeadingMenuItem label="Analytics" href="/analytics" />
+                <NavHeadingMenuItem label="Settings" href="/settings" />
+              </NavHeadingMenu>
+            }
+          />
+        }>
+        {null}
+      </SideNav>
+    </div>
   );
 }

package/templates/pages/table-page-chart/page.tsx

@@ -19,13 +19,7 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {
-  ChartV2 as Chart,
-  ChartGrid,
-  ChartAxis,
-  area,
-  line,
-} from '@astryxdesign/lab';
+import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -481,17 +475,13 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => (
-      <Text type="body">${item.amount}</Text>
-    ),
+    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => (
-      <Text type="body">{item.customer}</Text>
-    ),
+    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
   },
   {
     key: 'email',

package/templates/pages/table-page-shoe-store-heatmap/page.tsx

@@ -19,13 +19,7 @@ import {Link} from '@astryxdesign/core/Link';
 import {Thumbnail} from '@astryxdesign/core/Thumbnail';
 import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
-import {
-  ChartV2 as Chart,
-  ChartGrid,
-  ChartAxis,
-  area,
-  line,
-} from '@astryxdesign/lab';
+import {Chart, ChartGrid, ChartAxis, area, line} from '@astryxdesign/charts';
 import {
   FunnelIcon,
   ArrowDownTrayIcon,
@@ -35,11 +29,7 @@ import {
 // ============= DATA =============
 
 type ProductCategory =
-  | 'Running'
-  | 'Lifestyle'
-  | 'Basketball'
-  | 'Training'
-  | 'Skateboarding';
+  'Running' | 'Lifestyle' | 'Basketball' | 'Training' | 'Skateboarding';
 
 function shoeSvg(bg: string, accent: string) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="12" fill="${bg}"/><g transform="translate(22.5, 22.5) scale(2.29)" fill="none" stroke="${accent}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 10.42 4.8-5.07"/><path d="M19 18h3"/><path d="M9.5 22 21.414 9.415A2 2 0 0 0 21.2 6.4l-5.61-4.208A1 1 0 0 0 14 3v2a2 2 0 0 1-1.394 1.906L8.677 8.053A1 1 0 0 0 8 9c-.155 6.393-2.082 9-4 9a2 2 0 0 0 0 4h14"/></g></svg>`;
@@ -839,17 +829,13 @@ const columns: TableColumn<OrderRow>[] = [
     key: 'amount',
     header: 'Amount',
     width: pixel(90),
-    renderCell: (item: OrderRow) => (
-      <Text type="body">${item.amount}</Text>
-    ),
+    renderCell: (item: OrderRow) => <Text type="body">${item.amount}</Text>,
   },
   {
     key: 'customer',
     header: 'Customer',
     width: proportional(2),
-    renderCell: (item: OrderRow) => (
-      <Text type="body">{item.customer}</Text>
-    ),
+    renderCell: (item: OrderRow) => <Text type="body">{item.customer}</Text>,
   },
   {
     key: 'email',