@astryxdesign/cli 0.1.4-canary.e9b31f8 → 0.1.4-canary.ec9f8b2

package/docs/working-with-ai.doc.mjs

@@ -125,7 +125,7 @@ If you don't know all three, run \`npx astryx init --features agents\` to genera
           lang: 'json',
           label: 'package.json',
           code: `"scripts": {
-  "xds": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
+  "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
 }`,
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.1.4-canary.e9b31f8",
+  "version": "0.1.4-canary.ec9f8b2",
   "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.e9b31f8",
-    "@astryxdesign/core": "0.1.4-canary.e9b31f8",
-    "@astryxdesign/lab": "0.1.4-canary.e9b31f8",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.e9b31f8",
+    "@astryxdesign/charts": "0.1.4-canary.ec9f8b2",
+    "@astryxdesign/core": "0.1.4-canary.ec9f8b2",
+    "@astryxdesign/lab": "0.1.4-canary.ec9f8b2",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.ec9f8b2",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -96,10 +96,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.1.4-canary.e9b31f8",
-    "@astryxdesign/core": "0.1.4-canary.e9b31f8",
-    "@astryxdesign/lab": "0.1.4-canary.e9b31f8",
-    "@astryxdesign/theme-neutral": "0.1.4-canary.e9b31f8",
+    "@astryxdesign/charts": "0.1.4-canary.ec9f8b2",
+    "@astryxdesign/core": "0.1.4-canary.ec9f8b2",
+    "@astryxdesign/lab": "0.1.4-canary.ec9f8b2",
+    "@astryxdesign/theme-neutral": "0.1.4-canary.ec9f8b2",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {

package/src/codemods/__tests__/registry.test.mjs

@@ -19,6 +19,7 @@ describe('registry', () => {
         '0.1.0',
         '0.1.2',
         '0.1.3',
+        '0.1.5',
       ]);
     });
   });

package/src/codemods/registry.mjs

@@ -20,6 +20,7 @@ const registry = new Map([
   ['0.1.0', () => import('./transforms/v0.1.0/index.mjs')],
   ['0.1.2', () => import('./transforms/v0.1.2/index.mjs')],
   ['0.1.3', () => import('./transforms/v0.1.3/index.mjs')],
+  ['0.1.5', () => import('./transforms/v0.1.5/index.mjs')],
 ]);
 
 // Re-export from the shared utility so registry callers and other consumers

package/src/codemods/transforms/v0.1.5/__tests__/rename-switch-label-spacing-default-to-hug.test.mjs

@@ -0,0 +1,93 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+
+async function applyTransform(source) {
+  const {default: transform} =
+    await import('../rename-switch-label-spacing-default-to-hug.mjs');
+  const jscodeshift = (await import('jscodeshift')).default;
+  const j = jscodeshift.withParser('tsx');
+  const api = {jscodeshift: j, stats: () => {}, report: () => {}};
+  const file = {source, path: 'test.tsx'};
+  const result = transform(file, api);
+  return result ?? source;
+}
+
+describe('rename-switch-label-spacing-default-to-hug', () => {
+  it('renames Switch labelSpacing="default" to labelSpacing="hug"', async () => {
+    const input = `<Switch label="Notify" value={on} labelSpacing="default" />`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'hug'");
+    expect(output).not.toContain('default');
+  });
+
+  it("renames expression-container labelSpacing={'default'}", async () => {
+    const input = `<Switch label="Notify" value={on} labelSpacing={'default'} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'hug'");
+    expect(output).not.toContain("'default'");
+  });
+
+  it('renames default inside a ternary labelSpacing expression', async () => {
+    const input = `<Switch label="Notify" value={on} labelSpacing={isRow ? 'spread' : 'default'} />`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'hug'");
+    expect(output).toContain("'spread'");
+    expect(output).not.toContain("'default'");
+  });
+
+  it('does not change labelSpacing="spread"', async () => {
+    const input = `<Switch label="Notify" value={on} labelSpacing="spread" />`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('does not touch labelSpacing="default" on non-Switch components', async () => {
+    const input = `<LegacyToggle labelSpacing="default" />`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('does not touch other props with a "default" value on Switch', async () => {
+    const input = `<Switch label="Notify" value={on} data-variant="default" />`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('does not touch unrelated "default" string literals', async () => {
+    const input = `const theme = {mode: 'default', label: 'Default Mode'};`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('renames object labelSpacing prop in files importing Switch', async () => {
+    const input = `import {Switch} from '@astryxdesign/core/Switch';
+const cfg = {labelSpacing: 'default'};`;
+    const output = await applyTransform(input);
+    expect(output).toContain("labelSpacing: 'hug'");
+    expect(output).not.toContain("'default'");
+  });
+
+  it("renames labelSpacing: 'default' as const in files importing Switch", async () => {
+    const input = `import {Switch} from '@astryxdesign/core/Switch';
+const ROWS = [{labelSpacing: 'default' as const, label: 'Adjacent'}];`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'hug' as const");
+    expect(output).not.toContain("'default'");
+  });
+
+  it('does not rename object labelSpacing prop when Switch is not imported', async () => {
+    const input = `const cfg = {labelSpacing: 'default'};`;
+    const output = await applyTransform(input);
+    expect(output).toBe(input);
+  });
+
+  it('renames Storybook argTypes options in files importing Switch', async () => {
+    const input = `import {Switch} from '@astryxdesign/core/Switch';
+const meta = {argTypes: {labelSpacing: {control: 'select', options: ['default', 'spread']}}};`;
+    const output = await applyTransform(input);
+    expect(output).toContain("'hug'");
+    expect(output).toContain("'spread'");
+    expect(output).not.toContain("'default'");
+  });
+});

package/src/codemods/transforms/v0.1.5/index.mjs

@@ -0,0 +1,19 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file v0.1.5 transform manifest
+ *
+ * Lists all codemods for the v0.1.5 release in the order they should run.
+ */
+
+import renameSwitchLabelSpacingDefaultToHug, {
+  meta as renameSwitchLabelSpacingDefaultToHugMeta,
+} from './rename-switch-label-spacing-default-to-hug.mjs';
+
+export default [
+  {
+    name: 'rename-switch-label-spacing-default-to-hug',
+    transform: renameSwitchLabelSpacingDefaultToHug,
+    meta: renameSwitchLabelSpacingDefaultToHugMeta,
+  },
+];

package/src/codemods/transforms/v0.1.5/rename-switch-label-spacing-default-to-hug.mjs

@@ -0,0 +1,140 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: Rename Switch labelSpacing "default" to "hug"
+ * @see https://github.com/facebook/astryx/issues/2889
+ *
+ * The `labelSpacing="default"` value is renamed to `labelSpacing="hug"` so
+ * the name describes the behavior (label and switch hug each other), matching
+ * the behavioral register of the sibling `spread` value and the existing
+ * `hug`/`fill` layout vocabulary on TabList and SegmentedControl. The old
+ * `default` value keeps working as a deprecated alias, so this codemod is a
+ * cleanup, not a build fix.
+ *
+ * Transforms (scoped to Switch):
+ * - <Switch labelSpacing="default" />            → <Switch labelSpacing="hug" />
+ * - <Switch labelSpacing={'default'} />          → <Switch labelSpacing={'hug'} />
+ * - <Switch labelSpacing={cond ? 'default' : x}> → <Switch labelSpacing={cond ? 'hug' : x}>
+ * - Storybook argTypes: labelSpacing: { options: [..., 'default', ...] }
+ *     → replaces 'default' with 'hug' (files importing Switch)
+ * - Object properties: { labelSpacing: 'default' } / { labelSpacing: 'default' as const }
+ *     → { labelSpacing: 'hug' } (files importing Switch)
+ *
+ * The transform deliberately does NOT touch bare `'default'` strings that are
+ * not a `labelSpacing` value (an extremely common string otherwise), so it is
+ * safe to run across an entire codebase.
+ */
+
+export const meta = {
+  title: 'Rename Switch labelSpacing "default" to "hug"',
+  description:
+    'Renames the `labelSpacing="default"` value to `labelSpacing="hug"` on ' +
+    'Switch. The old value keeps working as a deprecated alias. Also updates ' +
+    'Storybook labelSpacing argTypes options and object-literal `labelSpacing` ' +
+    'props in files that import Switch.',
+  pr: '#2889',
+};
+
+const OLD_VALUE = 'default';
+const NEW_VALUE = 'hug';
+
+/** Prop whose value is being renamed. */
+const TARGET_PROP = 'labelSpacing';
+
+/** Components whose `labelSpacing` prop accepts a SwitchLabelSpacing value. */
+const TARGET_COMPONENTS = new Set(['Switch']);
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  let hasChanges = false;
+
+  /** Rewrite a string-literal node when it equals the old value. */
+  function renameStringLiteral(node) {
+    if (!node) return false;
+    if (
+      (node.type === 'StringLiteral' || node.type === 'Literal') &&
+      node.value === OLD_VALUE
+    ) {
+      node.value = NEW_VALUE;
+      if (node.raw) node.raw = `'${NEW_VALUE}'`;
+      return true;
+    }
+    return false;
+  }
+
+  /** Recursively rewrite the old value inside ternary/logical expressions. */
+  function renameInExpression(node) {
+    if (!node) return false;
+    let changed = false;
+    if (node.type === 'StringLiteral' || node.type === 'Literal') {
+      changed = renameStringLiteral(node) || changed;
+    } else if (node.type === 'ConditionalExpression') {
+      changed = renameInExpression(node.consequent) || changed;
+      changed = renameInExpression(node.alternate) || changed;
+    } else if (node.type === 'LogicalExpression') {
+      changed = renameInExpression(node.left) || changed;
+      changed = renameInExpression(node.right) || changed;
+    } else if (node.type === 'TSAsExpression') {
+      // `'default' as const` → rewrite the inner expression
+      changed = renameInExpression(node.expression) || changed;
+    }
+    return changed;
+  }
+
+  // --- 1. JSX attribute: labelSpacing="default" / labelSpacing={'default'} on Switch ---
+  root.find(j.JSXOpeningElement).forEach(path => {
+    const name = path.node.name;
+    const componentName = name.type === 'JSXIdentifier' ? name.name : null;
+    if (!componentName || !TARGET_COMPONENTS.has(componentName)) return;
+
+    path.node.attributes.forEach(attr => {
+      if (attr.type !== 'JSXAttribute') return;
+      if (!attr.name || attr.name.name !== TARGET_PROP) return;
+
+      const value = attr.value;
+      if (!value) return;
+
+      if (value.type === 'StringLiteral' || value.type === 'Literal') {
+        if (renameStringLiteral(value)) hasChanges = true;
+      } else if (value.type === 'JSXExpressionContainer') {
+        if (renameInExpression(value.expression)) hasChanges = true;
+      }
+    });
+  });
+
+  // Object-property / argTypes transforms only run in files that use a target
+  // component — keeps unrelated `{ labelSpacing: 'default' }` strings safe.
+  const importsTarget =
+    root
+      .find(j.ImportSpecifier)
+      .filter(p => TARGET_COMPONENTS.has(p.node.imported?.name))
+      .size() > 0;
+
+  if (importsTarget) {
+    const PropertyType = j.ObjectProperty ?? j.Property;
+
+    // --- 2. Object property: { labelSpacing: 'default' } / 'default' as const ---
+    root.find(PropertyType, {key: {name: TARGET_PROP}}).forEach(path => {
+      if (renameInExpression(path.node.value)) hasChanges = true;
+    });
+
+    // --- 3. Storybook argTypes: labelSpacing: { options: [..., 'default', ...] } ---
+    root.find(PropertyType, {key: {name: TARGET_PROP}}).forEach(path => {
+      const value = path.node.value;
+      if (!value || value.type !== 'ObjectExpression') return;
+
+      const optionsProp = value.properties.find(
+        p => p.key && (p.key.name === 'options' || p.key.value === 'options'),
+      );
+      if (optionsProp && optionsProp.value.type === 'ArrayExpression') {
+        optionsProp.value.elements.forEach(el => {
+          if (renameStringLiteral(el)) hasChanges = true;
+        });
+      }
+    });
+  }
+
+  if (!hasChanges) return undefined;
+  return root.toSource({quote: 'single'});
+}

package/src/commands/build-theme.mjs

@@ -939,15 +939,9 @@ export function registerTheme(program) {
         if (component.length > 0) {
           const componentInner = component.join('\n\n');
           const componentScope = `@scope (${scopeSelector}) to (${scopeTo}) {\n${componentInner}\n}`;
-          // light-dark() needs a color-scheme declaration in this bundle, but a
-          // bare `:root { color-scheme: light dark }` outranks reset.css's
-          // `html[data-theme]` mapping (astryx-theme layer comes after reset),
-          // silently defeating `<Theme mode>` forcing on <html>. Mirror the
-          // attribute-keyed mapping so the declaration follows the active mode.
+          // #3658: also emit attribute-specific rules so <Theme mode> can override color-scheme
           const colorSchemeDecl = componentScope.includes('light-dark(')
-            ? '  :root { color-scheme: light dark; }\n' +
-              '  html[data-theme="light"] { color-scheme: light; }\n' +
-              '  html[data-theme="dark"] { color-scheme: dark; }\n\n'
+            ? '  :root { color-scheme: light dark; }\n  html[data-theme="light"] { color-scheme: light; }\n  html[data-theme="dark"] { color-scheme: dark; }\n\n'
             : '';
           cssParts.push(
             `@layer astryx-theme {\n${colorSchemeDecl}${componentScope}\n}`,

package/templates/blocks/components/AspectRatio/AspectRatioCircleImage.tsx

@@ -8,15 +8,10 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioCircleImage() {
   return (
     <Center width={300}>
-      <AspectRatio ratio={1} shape="ellipse">
+      <AspectRatio ratio={1} shape="ellipse" fit="cover">
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-home-square-1.png"
           alt="Circular image"
-          style={{
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-          }}
         />
       </AspectRatio>
     </Center>

package/templates/blocks/components/AspectRatio/AspectRatioImageGallery.tsx

@@ -25,16 +25,11 @@ export default function AspectRatioImageGallery() {
     <Center width={600}>
       <Grid columns={3} gap={4} width="100%">
         {images.map(({id, alt}) => (
-          <AspectRatio key={id} ratio={4 / 3}>
+          <AspectRatio key={id} ratio={4 / 3} fit="cover">
             <img
               src="https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png"
               alt={alt}
-              style={{
-                width: '100%',
-                height: '100%',
-                objectFit: 'cover',
-                borderRadius: 8,
-              }}
+              style={{borderRadius: 8}}
             />
           </AspectRatio>
         ))}

package/templates/blocks/components/AspectRatio/AspectRatioShowcase.tsx

@@ -34,16 +34,13 @@ export default function AspectRatioShowcase() {
         <VStack key={label} gap={2} hAlign="center">
           <AspectRatio
             ratio={ratio}
+            fit="cover"
             style={{
               height: 120,
               width: 'auto',
               borderRadius: 'var(--radius-container)',
             }}>
-            <img
-              src={src}
-              alt={alt}
-              style={{width: '100%', height: '100%', objectFit: 'cover'}}
-            />
+            <img src={src} alt={alt} />
           </AspectRatio>
           <Text type="supporting" color="secondary">
             {label}

package/templates/blocks/components/AspectRatio/AspectRatioSquareImage.tsx

@@ -8,15 +8,10 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioSquareImage() {
   return (
     <Center width={300}>
-      <AspectRatio ratio={1}>
+      <AspectRatio ratio={1} fit="cover">
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-home-square-1.png"
           alt="1:1 square"
-          style={{
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-          }}
         />
       </AspectRatio>
     </Center>

package/templates/blocks/components/AspectRatio/AspectRatioWidescreen.tsx

@@ -8,15 +8,10 @@ import {Center} from '@astryxdesign/core/Center';
 export default function AspectRatioWidescreen() {
   return (
     <Center width={600}>
-      <AspectRatio ratio={16 / 9}>
+      <AspectRatio ratio={16 / 9} fit="cover">
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
           alt="16:9 widescreen"
-          style={{
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-          }}
         />
       </AspectRatio>
     </Center>

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/pages/kanban-board/page.tsx

@@ -439,8 +439,11 @@ export default function KanbanBoardTemplate() {
     let cb = columnRefCbs.current.get(id);
     if (!cb) {
       cb = el => {
-        if (el) {columnEls.current.set(id, el);}
-        else {columnEls.current.delete(id);}
+        if (el) {
+          columnEls.current.set(id, el);
+        } else {
+          columnEls.current.delete(id);
+        }
       };
       columnRefCbs.current.set(id, cb);
     }
@@ -451,8 +454,11 @@ export default function KanbanBoardTemplate() {
     let cb = cardRefCbs.current.get(id);
     if (!cb) {
       cb = el => {
-        if (el) {cardEls.current.set(id, el);}
-        else {cardEls.current.delete(id);}
+        if (el) {
+          cardEls.current.set(id, el);
+        } else {
+          cardEls.current.delete(id);
+        }
       };
       cardRefCbs.current.set(id, cb);
     }
@@ -487,7 +493,9 @@ export default function KanbanBoardTemplate() {
   ): DropTarget | null => {
     for (const [colId, el] of Array.from(columnEls.current.entries())) {
       const r = el.getBoundingClientRect();
-      if (px < r.left || px > r.right || py < r.top || py > r.bottom) {continue;}
+      if (px < r.left || px > r.right || py < r.top || py > r.bottom) {
+        continue;
+      }
 
       const ids = itemsByColumn[colId]
         .filter(it => it.id !== draggedId)
@@ -496,7 +504,9 @@ export default function KanbanBoardTemplate() {
       let index = ids.length;
       for (let i = 0; i < ids.length; i++) {
         const cardEl = cardEls.current.get(ids[i]);
-        if (!cardEl) {continue;}
+        if (!cardEl) {
+          continue;
+        }
         const cr = cardEl.getBoundingClientRect();
         if (py < cr.top + cr.height / 2) {
           index = i;
@@ -513,21 +523,27 @@ export default function KanbanBoardTemplate() {
   const commitDrag = (id: string, target: DropTarget) => {
     setItems(prev => {
       const moved = prev.find(it => it.id === id);
-      if (!moved) {return prev;}
+      if (!moved) {
+        return prev;
+      }
 
       const rest = prev.filter(it => it.id !== id);
       const updated: WorkItem = {...moved, column: target.column};
       const colItems = rest.filter(it => it.column === target.column);
       const anchor = colItems[target.index];
 
-      if (!anchor) {return [...rest, updated];}
+      if (!anchor) {
+        return [...rest, updated];
+      }
       const at = rest.indexOf(anchor);
       return [...rest.slice(0, at), updated, ...rest.slice(at)];
     });
   };
 
   const onCardPointerDown = (e: ReactPointerEvent, id: string) => {
-    if (e.button !== 0) {return;}
+    if (e.button !== 0) {
+      return;
+    }
     // Let the card's own controls (the actions menu) handle the press.
     if (
       (e.target as HTMLElement).closest(
@@ -538,7 +554,9 @@ export default function KanbanBoardTemplate() {
     }
 
     const el = cardEls.current.get(id);
-    if (!el) {return;}
+    if (!el) {
+      return;
+    }
 
     const rect = el.getBoundingClientRect();
     const startX = e.clientX;
@@ -574,7 +592,9 @@ export default function KanbanBoardTemplate() {
 
     const onUp = () => {
       teardownRef.current?.();
-      if (started && target) {commitDrag(id, target);}
+      if (started && target) {
+        commitDrag(id, target);
+      }
       setDrag(null);
     };
 
@@ -594,7 +614,9 @@ export default function KanbanBoardTemplate() {
 
   // Suppress selection while dragging and detach listeners on unmount.
   useEffect(() => {
-    if (!isDragging) {return;}
+    if (!isDragging) {
+      return;
+    }
     const previous = document.body.style.userSelect;
     document.body.style.userSelect = 'none';
     return () => {
@@ -612,7 +634,9 @@ export default function KanbanBoardTemplate() {
     const ghostTarget =
       drag && drag.target && drag.target.column === colId ? drag : null;
 
-    if (visible.length === 0 && !ghostTarget) {return null;}
+    if (visible.length === 0 && !ghostTarget) {
+      return null;
+    }
 
     const nodes: ReactNode[] = visible.map(it => (
       <BoardCard