@astryxdesign/cli 0.1.4-canary.ff77e1c → 0.1.5-canary.3f81427

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @xds/cli
 
+# 0.1.5
+
+#### New Features
+
+- Add a v0.1.5 upgrade codemod that renames `labelSpacing="default"` to `labelSpacing="hug"` on Switch. (#2889)
+- New `incident-console` page template: an on-call incident response console demonstrating the frame-first tracker archetype — grouped dense incident rows (StatusDot severity, Token state), PowerSearch filtering, status segmented control, and a resizable inspector panel with metadata and timeline. Adds the `Tools - Incident Console` template category.
+- New `messaging-shell` page template: Slack-style column frame (rail | sidebar | stream | thread panel) built on the Chat component family — dense rows, zero cards. Adds the `Shell - Messaging` template category.
+
+#### Fixes
+
+- Fill viewport height across CLI page templates so the background covers the full page (#3762)
+- `astryx init --features agents` now supports `--agent hermes`. The preset injects the component index into an existing `.hermes.md`/`HERMES.md` (Hermes Agent's top-priority project-context files) and otherwise creates root `AGENTS.md`, which Hermes loads from the project root — unlike the `.claude/CLAUDE.md` default. Additive only: existing `claude`/`cursor`/`codex`/`all`/auto-detect behavior is unchanged. (#2187)
+- cli: `astryx doctor` now detects `@astryxdesign/theme-*` packages in pnpm projects. pnpm installs packages as symlinks into `node_modules/.pnpm`, and the theme scan only accepted real directories, so every symlinked theme package was skipped and doctor warned that none were installed (#3530).
+- Make `astryx theme build`'s color-scheme declaration mode-aware, so built themes with `light-dark()` tokens no longer defeat `<Theme mode="light|dark">` forcing (#3660)
+- `runCodemods` now returns `writtenFiles`, so `astryx upgrade`'s post-codemod hooks (prettier/eslint formatting) actually run on core-codemod changes.
+  The runner built the `writtenFiles` list internally but omitted it from its return object, so `upgrade.mjs` read `codemodResult.writtenFiles ?? []` as always-empty and the configured `hooks.postCodemod` (e.g. `prettier --write`, `eslint --fix`) received no files and silently skipped. As a result, jscodeshift's default double-quote output (`"@astryxdesign/core/Button"`) was never reformatted to the project's style, failing `prettier-format` lint on migrated apps. The sibling `integration-runner` already returned `writtenFiles` correctly, so integration-codemod changes were formatted while core-codemod changes were not.
+- `astryx swizzle`: swizzled components ship raw StyleX source that needs a build-time StyleX compiler, and without one they render unstyled with no error. The command now prints a StyleX build-setup note after copying (including the Next.js caveat that the StyleX Babel plugin disables SWC and breaks `next/font`, so an SWC-based transform is required), and `astryx docs styling` gains a "StyleX Build Setup" section covering per-bundler setup. (#3373)
+- `astryx theme build`: custom component variants declared in a theme (e.g. `button['variant:accentOutline']`) now generate a type augmentation against the component's real interface (`ButtonVariantMap`) instead of a non-existent `XDS`-prefixed one, so `variant="accentOutline"` type-checks. Props with no augmentation point (closed unions like Button `size` or Heading `type`) are skipped instead of emitting dead augmentations, and the generated `.variants.d.ts` is now referenced from the theme's `.d.ts` so the augmentation actually loads. (#3371)
+
+#### Documentation
+
+- CodeBlock: terminal-style dark block template (syntaxTheme preset)
+- Add cascade-layer safety guidance to the migration guide (`astryx docs migration`): a Cascade Layer Safety audit checklist (unlayered styles and later layers both beat `astryx-base` regardless of specificity, classify every stylesheet into a layer deliberately, layer Tailwind preflight on both v3 and v4) and a Foundation Smoke Test section (one page with Button/TextInput/Card/Table plus a non-zero-padding assertion) so a broken layer order fails before feature work instead of after N migrated screens. The getting-started guide now points to it from the theme CSS step.
+- NavHeadingMenu: add a playground config and showcase block so the Overview tab has a working preview (#2698)
+- NavHeadingMenu: constrain the showcase SideNav to a shorter height so the heading no longer appears to float at the top of the Overview preview (#2698)
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @arman-luthra
+- @cixzhang
+- @ejhammond
+- @harjothkhara
+- @is-jain
+- @jiunshinn
+- @josephfarina
+- @let-sunny
+- @thedjpetersen
+- @zeroryu
+
+---
+
 # 0.1.4
 
 #### Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.4-canary.ff77e1c",
+  "version": "0.1.5-canary.3f81427",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -75,10 +75,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.1.4-canary.ff77e1c",
-    "@astryxdesign/core": "0.1.4-canary.ff77e1c",
-    "@astryxdesign/lab": "0.1.4-canary.ff77e1c",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.ff77e1c",
+    "@astryxdesign/charts": "0.1.5-canary.3f81427",
+    "@astryxdesign/core": "0.1.5-canary.3f81427",
+    "@astryxdesign/lab": "0.1.5-canary.3f81427",
+    "@astryxdesign/theme-neutral": "0.1.5-canary.3f81427",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -96,10 +96,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.4-canary.ff77e1c",
-    "@astryxdesign/core": "0.1.4-canary.ff77e1c",
-    "@astryxdesign/lab": "0.1.4-canary.ff77e1c",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.ff77e1c",
+    "@astryxdesign/charts": "0.1.5-canary.3f81427",
+    "@astryxdesign/core": "0.1.5-canary.3f81427",
+    "@astryxdesign/lab": "0.1.5-canary.3f81427",
+    "@astryxdesign/theme-neutral": "0.1.5-canary.3f81427",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {

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

@@ -6,7 +6,7 @@ export const doc = {
   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.',
+  description: 'FAQ-style accordion using the hasDividers 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

@@ -8,7 +8,7 @@ import {Text} from '@astryxdesign/core/Text';
 export default function CollapsibleDividedAccordion() {
   return (
     <div style={{width: '100%', maxWidth: 400}}>
-      <CollapsibleGroup type="single" dividers="between" defaultValue="reset">
+      <CollapsibleGroup type="single" hasDividers 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

package/templates/blocks/components/Table/TableGroupedRowsTable.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: 'useTableGroupedRows',
+  name: 'useTableGroupedRows — Collapsible Groups',
+  displayName: 'useTableGroupedRows — Collapsible Groups',
+  description:
+    'A table grouped into collapsible sections with useTableGroupedRows. Each group gets a full-width header with a chevron, label, and member count; click to collapse/expand.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/TableGroupedRowsTable.tsx

@@ -0,0 +1,66 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState, useCallback} from 'react';
+import {
+  Table,
+  useTableGroupedRows,
+  proportional,
+  pixel,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface Person extends Record<string, unknown> {
+  id: string;
+  name: string;
+  team: string;
+  role: string;
+}
+
+const people: Person[] = [
+  {id: '1', name: 'Ava Chen', team: 'Design Systems', role: 'Staff Eng'},
+  {id: '2', name: 'Liam Park', team: 'Design Systems', role: 'Engineer'},
+  {id: '3', name: 'Zoe Vega', team: 'Design Systems', role: 'Manager'},
+  {id: '4', name: 'Max Ross', team: 'Infra', role: 'Senior Eng'},
+  {id: '5', name: 'Mia Cole', team: 'Infra', role: 'Engineer'},
+  {id: '6', name: 'Leo Nash', team: 'Growth', role: 'PM'},
+];
+
+const columns: TableColumn<Person>[] = [
+  {key: 'name', header: 'Name', width: proportional(2)},
+  {key: 'role', header: 'Role', width: pixel(140)},
+];
+
+export default function TableGroupedRowsTable() {
+  const [collapsedGroups, setCollapsed] = useState<Set<string>>(new Set());
+  const onToggleGroup = useCallback((key: string) => {
+    setCollapsed(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+
+  const grouped = useTableGroupedRows<Person>({
+    data: people,
+    groupBy: p => p.team,
+    collapsedGroups,
+    onToggleGroup,
+    getRowKey: p => p.id,
+  });
+
+  return (
+    <Table
+      data={grouped.data}
+      columns={columns}
+      idKey={grouped.idKey}
+      hasHover
+      plugins={{grouped: grouped.plugin}}
+    />
+  );
+}

package/templates/blocks/components/Table/TableRowIndexTable.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: 'useTableRowIndex',
+  name: 'useTableRowIndex — Numbered Rows',
+  displayName: 'useTableRowIndex — Numbered Rows',
+  description:
+    'A table with a prepended row-number column via useTableRowIndex. Numbering is monospaced, right-aligned, and follows the rendered data order.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/TableRowIndexTable.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  Table,
+  useTableRowIndex,
+  proportional,
+  pixel,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface Track extends Record<string, unknown> {
+  id: string;
+  title: string;
+  artist: string;
+  plays: number;
+}
+
+const tracks: Track[] = [
+  {id: 't1', title: 'Nightfall', artist: 'Ava Chen', plays: 1820},
+  {id: 't2', title: 'Ember', artist: 'Liam Park', plays: 942},
+  {id: 't3', title: 'Tidal', artist: 'Zoe Vega', plays: 3310},
+  {id: 't4', title: 'Cinder', artist: 'Max Ross', plays: 604},
+  {id: 't5', title: 'Halcyon', artist: 'Mia Cole', plays: 2075},
+];
+
+const columns: TableColumn<Track>[] = [
+  {key: 'title', header: 'Title', width: proportional(2)},
+  {key: 'artist', header: 'Artist', width: proportional(2)},
+  {key: 'plays', header: 'Plays', width: pixel(90), align: 'end'},
+];
+
+export default function TableRowIndexTable() {
+  // Pass the rendered data array — numbering follows its order.
+  const rowIndex = useTableRowIndex<Track>({data: tracks});
+
+  return (
+    <Table
+      data={tracks}
+      columns={columns}
+      idKey="id"
+      hasHover
+      plugins={{rowIndex}}
+    />
+  );
+}