@astryxdesign/cli 0.1.5 → 0.1.6-canary.0121ab3

package/templates/blocks/components/ChatComposerInput/ChatComposerInputMultipleTriggers.tsx

@@ -54,7 +54,7 @@ export default function ChatComposerInputMultipleTriggers() {
   };
 
   return (
-    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
       <Text type="supporting" color="secondary">
         Type @ for mentions (blue) or / for commands (yellow)
       </Text>

package/templates/blocks/components/ChatComposerInput/ChatComposerInputShowcase.tsx

@@ -7,7 +7,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 
 export default function ChatComposerInputShowcase() {
   return (
-    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => {}}
         input={

package/templates/blocks/components/ChatComposerInput/ChatComposerInputSlashCommands.tsx

@@ -40,7 +40,7 @@ export default function ChatComposerInputSlashCommands() {
   };
 
   return (
-    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => {}}
         input={

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}}
+    />
+  );
+}

package/templates/pages/theme-showcase/page.tsx

@@ -282,14 +282,14 @@ const DEFAULT_PRODUCTS: ProductSpec[] = [
 
 // Neutral product photos, served from the shared astryx asset CDN so the
 // scaffolded template renders real imagery without needing local public assets.
-const NEUTRAL_CDN = 'https://lookaside.facebook.com/assets/astryx';
 const DEFAULT_IMAGES: Record<string, string> = {
-  watch: `${NEUTRAL_CDN}/Neutral-Watch.png`,
-  headphones: `${NEUTRAL_CDN}/Neutral-Headphones.png`,
-  backpack: `${NEUTRAL_CDN}/Neutral-Backpack.png`,
-  wallet: `${NEUTRAL_CDN}/Neutral-Wallet.png`,
-  tumbler: `${NEUTRAL_CDN}/Neutral-Tumbler.png`,
-  throw_: `${NEUTRAL_CDN}/Neutral-Blanket.png`,
+  watch: 'https://lookaside.facebook.com/assets/astryx/Neutral-Watch.png',
+  headphones:
+    'https://lookaside.facebook.com/assets/astryx/Neutral-Headphones.png',
+  backpack: 'https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png',
+  wallet: 'https://lookaside.facebook.com/assets/astryx/Neutral-Wallet.png',
+  tumbler: 'https://lookaside.facebook.com/assets/astryx/Neutral-Tumbler.png',
+  throw_: 'https://lookaside.facebook.com/assets/astryx/Neutral-Blanket.png',
 };
 
 export interface ThemeShowcaseProps {

package/templates/themes/neutral/neutralTheme.ts

@@ -39,19 +39,19 @@ import {neutralIconRegistry} from './icons';
 const neutralSyntax = defineSyntaxTheme({
   name: 'xds-neutral',
   tokens: {
-    keyword: ['#700084', '#efa8ff'],    // purple T30/T80
-    string: ['#005600', '#a6d2a2'],     // green (sat T30 / pastel T80)
-    comment: ['#737373', '#a3a3a3'],    // neutral
-    number: ['#6e3500', '#ffb37f'],     // orange
-    function: ['#00458c', '#a0caff'],   // blue T30/T80 H=255
-    type: ['#700084', '#efa8ff'],       // purple
-    variable: ['#171717', '#e5e5e5'],   // near-black / near-white
-    operator: ['#737373', '#a3a3a3'],   // neutral
-    constant: ['#6e3500', '#ffb37f'],   // orange
-    tag: ['#89001a', '#ffaeaa'],        // red
-    attribute: ['#584400', '#eec12f'],  // yellow
-    property: ['#005348', '#83dac9'],   // teal
-    punctuation: ['#a3a3a3', '#525252'],// neutral
+    keyword: ['#700084', '#efa8ff'], // purple T30/T80
+    string: ['#005600', '#a6d2a2'], // green (sat T30 / pastel T80)
+    comment: ['#737373', '#a3a3a3'], // neutral
+    number: ['#6e3500', '#ffb37f'], // orange
+    function: ['#00458c', '#a0caff'], // blue T30/T80 H=255
+    type: ['#700084', '#efa8ff'], // purple
+    variable: ['#171717', '#e5e5e5'], // near-black / near-white
+    operator: ['#737373', '#a3a3a3'], // neutral
+    constant: ['#6e3500', '#ffb37f'], // orange
+    tag: ['#89001a', '#ffaeaa'], // red
+    attribute: ['#584400', '#eec12f'], // yellow
+    property: ['#005348', '#83dac9'], // teal
+    punctuation: ['#a3a3a3', '#525252'], // neutral
     background: ['#fafafa', '#0a0a0a'],
   },
 });
@@ -127,39 +127,39 @@ export const neutralTheme = defineTheme({
     // All values use the OKLCH Neutral tonal palette (chroma=0).
     // =========================================================================
     '--color-background-surface': ['#ffffff', '#262626'],
-    '--color-background-body':    ['#f1f1f1', '#1b1b1b'],
-    '--color-background-card':    ['#ffffff', '#1b1b1b'],
+    '--color-background-body': ['#f1f1f1', '#1b1b1b'],
+    '--color-background-card': ['#ffffff', '#1b1b1b'],
     '--color-background-popover': ['#ffffff', '#1b1b1b'],
-    '--color-background-muted':   ['#f1f1f1', '#1b1b1b'],
+    '--color-background-muted': ['#f1f1f1', '#1b1b1b'],
 
     // Accent + neutral surface tints (sit alongside backgrounds)
-    '--color-accent':       ['#262626', '#ebebeb'],
+    '--color-accent': ['#262626', '#ebebeb'],
     '--color-accent-muted': ['#f1f1f1', '#262626'],
-    '--color-neutral':      ['#0000000F', '#FFFFFF1A'],
+    '--color-neutral': ['#0000000F', '#FFFFFF1A'],
 
     // Overlays (modal scrims, hover/pressed tints)
-    '--color-overlay':         ['#00000080', '#000000CC'],
-    '--color-overlay-hover':   ['#0000000D', '#FFFFFF0D'],
+    '--color-overlay': ['#00000080', '#000000CC'],
+    '--color-overlay-hover': ['#0000000D', '#FFFFFF0D'],
     '--color-overlay-pressed': ['#0000001A', '#FFFFFF1A'],
 
     // Text
-    '--color-text-primary':   ['#171717', '#fafafa'],
+    '--color-text-primary': ['#171717', '#fafafa'],
     '--color-text-secondary': ['#737373', '#a3a3a3'],
-    '--color-text-disabled':  ['#a3a3a3', '#525252'],
-    '--color-text-accent':    ['#262626', '#ebebeb'],
-    '--color-on-dark':    '#ffffff',
-    '--color-on-light':   '#171717',
+    '--color-text-disabled': ['#a3a3a3', '#525252'],
+    '--color-text-accent': ['#262626', '#ebebeb'],
+    '--color-on-dark': '#ffffff',
+    '--color-on-light': '#171717',
     // Contrast: neutral accent is near-black (L) / near-white (D)
-    '--color-on-accent':  ['#ffffff', '#171717'],
+    '--color-on-accent': ['#ffffff', '#171717'],
     '--color-on-success': ['#ffffff', '#171717'],
-    '--color-on-error':   ['#ffffff', '#171717'],
+    '--color-on-error': ['#ffffff', '#171717'],
     '--color-on-warning': '#171717',
 
     // Icon
-    '--color-icon-accent':    ['#262626', '#ebebeb'],
-    '--color-icon-primary':   ['#171717', '#fafafa'],
+    '--color-icon-accent': ['#262626', '#ebebeb'],
+    '--color-icon-primary': ['#171717', '#fafafa'],
     '--color-icon-secondary': ['#737373', '#a3a3a3'],
-    '--color-icon-disabled':  ['#a3a3a3', '#525252'],
+    '--color-icon-disabled': ['#a3a3a3', '#525252'],
 
     // Status / Sentiment — dark mode follows the issue #2150 rubric:
     //
@@ -372,8 +372,8 @@ export const neutralTheme = defineTheme({
     // =========================================================================
     button: {
       'variant:destructive': {
-        backgroundColor: 'var(--color-error-muted)',  // locked pastel red bg
-        color: 'var(--color-error)',                  // locked T30 red — matches banner/input error text
+        backgroundColor: 'var(--color-error-muted)', // locked pastel red bg
+        color: 'var(--color-error)', // locked T30 red — matches banner/input error text
       },
     },
 
@@ -482,6 +482,37 @@ export const neutralTheme = defineTheme({
       },
     },
 
+    // =========================================================================
+    // StatusDot — fill uses the SAME vivid stops as the filled semantic Badge
+    // (and ProgressBar), so a dot and its badge read as one status language.
+    //
+    // The default component maps each variant to a raw semantic token
+    // (--color-success / --color-error / --color-warning / --color-icon-
+    // secondary), which in light mode are the dark T30/T40 stops meant to
+    // sit as TEXT on a pastel surface — as a solid dot they read muddy
+    // (dark green / maroon / brown). Redirect them to the badge fills.
+    //
+    //   success → badge success bg  (green T45 / dark-ramp T60)
+    //   warning → badge warning bg  (yellow T85, same hex both modes)
+    //   error   → badge error bg    (red T55 / dark-ramp T60)
+    //   accent  → badge info bg     (blue T50 / dark-ramp T60) — the
+    //             StatusDot "accent" is the info/attention color, so it
+    //             pairs with the info badge rather than --color-accent
+    //             (near-black #262626, the darkest offender).
+    //
+    // `neutral` is intentionally NOT overridden: the neutral badge bg is a
+    // near-invisible light gray (--color-background-gray #e5e5e5 / 10% white
+    // wash), fine as a large pill but unreadable as an 8px dot. It keeps the
+    // component default's visible mid-gray (--color-icon-secondary), which is
+    // not among the "too dark" cases.
+    // =========================================================================
+    statusdot: {
+      'variant:success': {backgroundColor: 'light-dark(#198100, #64af4c)'},
+      'variant:warning': {backgroundColor: '#ffce2f'},
+      'variant:error': {backgroundColor: 'light-dark(#e33f4a, #ff705d)'},
+      'variant:accent': {backgroundColor: 'light-dark(#0074e2, #6d9cfe)'},
+    },
+
     // =========================================================================
     // Banner — sits on a hue-tinted surface with colored text/icon:
     //   Light: pastel T90 bg (pulled from --color-{X}-muted / --color-background-blue)