@astryxdesign/cli 0.7.12-canary.ccb4a6d → 0.7.12-canary.f543ec7

package/api/component/__fixtures__/resolutions/modules.txt

@@ -247,9 +247,9 @@ useAutoMediaMode useAutoMediaMode hooks/useAnimatedLayout.doc.mjs hooks/useAutoM
 useBackdropPress useBackdropPress Layer/Layer.doc.mjs Layer/useBackdropPress.ts
 useBaseTablePlugins useBaseTablePlugins Table/Table.doc.mjs Table/useBaseTablePlugins.ts
 useBusyAnnouncement useBusyAnnouncement hooks/useAnimatedLayout.doc.mjs hooks/useBusyAnnouncement.ts
-useCalendarConstraints useCalendarConstraints Calendar/Calendar.doc.mjs Calendar/hooks/useCalendarConstraints.ts
+useCalendarConstraints useCalendarConstraints Calendar/useCalendarConstraints.doc.mjs Calendar/hooks/useCalendarConstraints.ts
 useCalendarDays useCalendarDays Calendar/useCalendarDays.doc.mjs Calendar/hooks/useCalendarDays.ts
-useCalendarNavigation useCalendarNavigation Calendar/Calendar.doc.mjs Calendar/hooks/useCalendarNavigation.ts
+useCalendarNavigation useCalendarNavigation Calendar/useCalendarNavigation.doc.mjs Calendar/hooks/useCalendarNavigation.ts
 useChatComposerTokens useChatComposerTokens Chat/Chat.doc.mjs Chat/useChatComposerTokens.ts
 useChatDictation useChatDictation Chat/Chat.doc.mjs Chat/useChatDictation.ts
 useChatNewMessages useChatNewMessages Chat/Chat.doc.mjs Chat/useChatNewMessages.ts

package/api/swizzle/copy/copy.mjs

@@ -473,16 +473,51 @@ export async function swizzleCopy(component, options = {}) {
     );
   }
 
+  // The marker tells @astryxdesign/build that the output folder holds Astryx
+  // source, so the copy compiles below the theme as the package does.
+  const markerDest = confineWrite(path.join(outputBase, SWIZZLE_MARKER), cwd, {
+    allowAbsolute: true,
+    label: 'output file',
+  });
+  const markerExisting = readExisting(markerDest);
+  const markerContent = swizzleMarkerContent(
+    markerExisting,
+    owner.ownerPackage,
+    ownerVersion,
+  );
+  // Every module under the marker compiles as Astryx source, so swizzle marks
+  // only a folder it owns: one the copy creates, an empty one, or one it
+  // marked before. Any other folder is reported with what it holds.
+  const foundInOutputBase =
+    markerExisting == null &&
+    fs.existsSync(outputBase) &&
+    fs.statSync(outputBase).isDirectory()
+      ? fs.readdirSync(outputBase).sort()
+      : [];
+  const marksOutputBase = foundInOutputBase.length === 0;
+  const writes = marksOutputBase
+    ? [
+        ...outputs,
+        {
+          dest: markerDest,
+          content: markerContent,
+          marker: true,
+          unchanged: markerExisting === markerContent,
+        },
+      ]
+    : outputs;
+
   const outputDirExisted = fs.existsSync(outputDir);
   /** @type {string[]} folders this run created, outermost first */
   const createdDirs = [];
   /** @type {Array<{dest: string, original: Buffer|null}>} */
   const written = [];
   let copied = 0;
-  for (const output of outputs) {
+  for (const output of writes) {
+    const counts = !('marker' in output);
     // An identical file is already in place: it is part of this copy, unwritten.
     if (output.unchanged) {
-      copied++;
+      if (counts) copied++;
       continue;
     }
     try {
@@ -491,7 +526,7 @@ export async function swizzleCopy(component, options = {}) {
       if (firstCreated != null) createdDirs.push(firstCreated);
       written.push({dest: output.dest, original});
       fs.writeFileSync(output.dest, output.content);
-      copied++;
+      if (counts) copied++;
     } catch (err) {
       const unrestored = undoCopy(written);
       for (const dir of [...createdDirs].reverse()) {
@@ -516,10 +551,44 @@ export async function swizzleCopy(component, options = {}) {
     usesStyleX: outputs.some(o => o.content.includes('@stylexjs/stylex')),
     dependencies: plan.dependencies,
   };
+  data.marker = marksOutputBase
+    ? {path: toPosix(path.relative(cwd, markerDest)), written: true}
+    : {
+        path: toPosix(path.relative(cwd, markerDest)),
+        written: false,
+        found: foundInOutputBase.slice(0, 5),
+      };
   if (feedback) data.feedback = feedback;
   return {type: 'swizzle.copy', package: data.package, data};
 }
 
+/** The file that marks a swizzle output folder as Astryx source. */
+const SWIZZLE_MARKER = 'astryx-swizzle.json';
+
+/**
+ * The marker's content after a copy from `ownerPackage`: the packages the
+ * folder's copies came from, each with its version. Unreadable content is
+ * replaced.
+ * @param {string|null} existing
+ * @param {string} ownerPackage
+ * @param {string} version
+ * @returns {string}
+ */
+function swizzleMarkerContent(existing, ownerPackage, version) {
+  /** @type {Record<string, string>} */
+  let packages = {};
+  try {
+    const parsed = existing == null ? null : JSON.parse(existing);
+    if (parsed?.packages && typeof parsed.packages === 'object') {
+      packages = {...parsed.packages};
+    }
+  } catch {
+    // Unreadable content is rewritten below.
+  }
+  packages[ownerPackage] = version;
+  return `${JSON.stringify({packages}, null, 2)}\n`;
+}
+
 /**
  * Undo the writes of a copy that failed part-way, newest first: delete the
  * files the copy created and put back the bytes of the files it replaced. A

package/api/swizzle/swizzle.doc.mjs

@@ -21,8 +21,12 @@ export const doc = {
     'the owner package exports: names the package exports are imported from its ' +
     'public paths, and every internal module the component needs is ' +
     "copied beside it in the package's folder layout. Tests, stories and docs are not " +
-    'copied. The receipt flags whether any copied file uses StyleX and lists each npm ' +
-    'package the copy imports with the range the owner package declares. With no name ' +
+    'copied. An output folder swizzle owns (one the copy creates, an empty one, or one it ' +
+    'marked before) gets an astryx-swizzle.json marker naming each package its copies came from, ' +
+    "with its version, so @astryxdesign/build's Babel, PostCSS and Vite integrations, and " +
+    'withAstryx() under webpack, compile the copy below the theme. The receipt flags whether ' +
+    'any copied file uses StyleX and lists each npm package the copy imports with the range ' +
+    'the owner package declares. With no name ' +
     '(or list) it returns the swizzlable component names instead. An integration ' +
     'component that replaces a Core component is what that Core name copies; ' +
     "options.package '@astryxdesign/core' copies the original. The list names Core " +
@@ -81,7 +85,7 @@ export const doc = {
     {
       type: 'swizzle.copy',
       description:
-        'A receipt after copying the component into the project: the component name, owning package, output directory, files-copied count, the copied file names (relative to the component folder; the internal modules copied beside it start with `../`, e.g. `../InputGroup/groupStyles.ts`), whether any file uses StyleX, and, when the owner has an issues URL, feedback ({issuesUrl, ghCommand?}): where to report the gap that led to swizzling.',
+        'A receipt after copying the component into the project: the component name, owning package, output directory, files-copied count, the copied file names (relative to the component folder; the internal modules copied beside it start with `../`, e.g. `../InputGroup/groupStyles.ts`), whether any file uses StyleX, the npm packages the copy imports with the ranges the owner declares (dependencies), the output folder\'s astryx-swizzle.json (marker: {path, written, found?}; written is false for a folder swizzle does not own, and found names up to five entries it already holds), and, when the owner has an issues URL, feedback ({issuesUrl, ghCommand?}): where to report the gap that led to swizzling.',
     },
   ],
   throws: [

package/api/swizzle/swizzle.type.d.mts

@@ -42,6 +42,11 @@ export type SwizzleCopyResponse = {
         files: string[];
         usesStyleX: boolean;
         dependencies: Record<string, string>;
+        marker?: {
+            path: string;
+            written: boolean;
+            found?: string[];
+        } | undefined;
         feedback?: SwizzleFeedback | undefined;
     };
 };

package/api/swizzle/swizzle.type.mjs

@@ -37,6 +37,7 @@
  * @property {string[]} data.files Copied file names, relative to the component folder; the internal modules copied beside it start with `../` (spec:AST-110 FR2).
  * @property {boolean} data.usesStyleX Whether any copied file uses StyleX (requires build-time setup).
  * @property {Record<string, string>} data.dependencies Each npm package the copied files import, other than the owner package, with the version range the owner package declares (`*` when it declares none). The copy builds once the product installs them (spec:AST-110 FR1).
+ * @property {{path: string, written: boolean, found?: string[]}} [data.marker] The output folder's astryx-swizzle.json, relative to the project (spec:AST-110 FR5). Swizzle writes it only into a folder it owns: one the copy creates, an empty one, or one it marked before. When it does not, `written` is false and `found` names up to five entries already in the folder.
  * @property {SwizzleFeedback} [data.feedback]
  */
 

package/assets/docs/browser-support.doc.mjs

@@ -148,11 +148,11 @@ export const docs = {
       content: [
         {
           type: 'prose',
-          text: "On a phone, a fully expanded `height='tall'` BottomSheet responds to the on-screen keyboard: it measures the keyboard as the layout viewport's height minus the visual viewport's height times its scale. Where the visual viewport shrinks for the keyboard, as in Safari on iOS in the browser and as a home-screen app, in Firefox for Android and in Chrome on Android, it keeps the focused field above the keyboard and leaves the page where it was. If Firefox for Android pans to the field, the sheet puts the page back within a couple of frames.",
+          text: "On a phone, the components that respond to the on-screen keyboard, a fully expanded `height='tall'` BottomSheet and ChatLayout's composer, measure it the same way: the layout viewport's height minus the visual viewport's height times its scale. Where the visual viewport shrinks for the keyboard, as in Safari on iOS in the browser and as a home-screen app, in Firefox for Android and in Chrome on Android, they keep the focused field and the surface around it above the keyboard and leave the page where it was. If Firefox for Android pans to the field, they put the page back within a couple of frames.",
         },
         {
           type: 'prose',
-          text: 'In Chrome on Android, a Tall BottomSheet\u2019s focused field rides the keyboard as Gboard slides it up, and as Gboard slides it down after the field loses focus. The scroll room stays until the keyboard is down. A hide Chrome reports late, such as Back, which keeps the focus, rides down from Chrome\u2019s report. When the keyboard is reported, the sheet places the field just above it in that same frame, so Chrome has no covered field to pan to; if Chrome pans anyway, the sheet puts the page back when that pan ends. Chrome follows your viewport setting, which Astryx documents and never sets: your app owns its viewport `<meta>` element. By default (`interactive-widget=resizes-visual`) Chrome lays the keyboard over the page and pans to a focused field elsewhere on the page. With `interactive-widget=resizes-content` it shrinks the layout viewport instead, so content anchored to the bottom sits above the keyboard, and the sheet measures no keyboard and changes nothing: the browser has already made the room.',
+          text: 'In Chrome on Android, ChatLayout\u2019s composer rides the keyboard as Gboard slides it up and down. A Tall BottomSheet\u2019s focused field rides the keyboard as Gboard slides it up, and as Gboard slides it down after the field loses focus. The scroll room stays until the keyboard is down. A hide Chrome reports late, such as Back, which keeps the focus, rides down from Chrome\u2019s report. When the keyboard is reported, the sheet places the field just above it in that same frame, so Chrome has no covered field to pan to; if Chrome pans anyway, the sheet puts the page back when that pan ends. Chrome follows your viewport setting, which Astryx documents and never sets: your app owns its viewport `<meta>` element. By default (`interactive-widget=resizes-visual`) Chrome lays the keyboard over the page and pans to a focused field elsewhere on the page. With `interactive-widget=resizes-content` it shrinks the layout viewport instead, so content anchored to the bottom sits above the keyboard, and those components measure no keyboard and change nothing: the browser has already made the room.',
         },
         {
           type: 'code',

package/assets/docs/styling-overview.doc.mjs

@@ -160,6 +160,10 @@ export const docs = {
           type: 'prose',
           text: 'If a swizzled component fails at runtime with a `stylex.create` error, the app is missing a StyleX compiler: see the StyleX Build Setup section of {@link generic:tokens-and-setup}.',
         },
+        {
+          type: 'prose',
+          text: '`{@command swizzle <Component>}` writes an `astryx-swizzle.json` marker into an output folder it owns (one the copy creates, an empty one, or one it marked before); every module under that folder then compiles as Astryx source, so keep copies in a folder of their own, such as the default `components/astryx`. For a folder that already holds other files it writes no marker and says how to add one by hand. With `@astryxdesign/build`\'s Babel, PostCSS and Vite integrations, or `withAstryx()` under webpack, a copy under that folder compiles into `astryx-base`, below `astryx-theme`, so theme component overrides reach it as they reach the package component. Under Turbopack, and with the stock StyleX plugins above, a copy\'s rules land in your own styles, above `astryx-theme`, and theme component overrides do not reach it.',
+        },
       ],
     },
     {

package/assets/templates/blocks/components/Calendar/useCalendarConstraintsHookUsage.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useCalendarConstraints',
+  name: 'useCalendarConstraints — Hotel Booking Range',
+  displayName: 'useCalendarConstraints — Hotel Booking Range',
+  description:
+    'A hotel booking range picker enforcing season min/max dates, a 7-night maximum stay once check-in is picked, and a custom rule disabling closed Mondays.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Button', 'Layout', 'Text'],
+};

package/assets/templates/blocks/components/Calendar/useCalendarConstraintsHookUsage.tsx

@@ -0,0 +1,146 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {
+  useCalendarConstraints,
+  useCalendarDays,
+  type CalendarDay,
+} from '@astryxdesign/core/Calendar';
+import {Button} from '@astryxdesign/core/Button';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+// Hotel closed on Mondays (day === 1)
+const isNotMonday = (date: Date) => date.getDay() !== 1;
+
+export default function UseCalendarConstraintsHookUsage() {
+  const [checkIn, setCheckIn] = useState<CalendarDay['date'] | null>(null);
+  const [checkOut, setCheckOut] = useState<CalendarDay['date'] | null>(null);
+
+  // June 2026 season: open Jun 5 – Jun 25, max 7 nights (8-day span), closed Mondays.
+  // When checkOut is already chosen, clear rangeAnchor so full season remains viewable without lingering span restrictions.
+  const {isDateDisabled} = useCalendarConstraints({
+    min: '2026-06-05',
+    max: '2026-06-25',
+    maxRangeSpan: 8,
+    rangeAnchor: checkOut ? null : checkIn,
+    dateConstraints: [isNotMonday],
+  });
+
+  const {weeks, dayNames} = useCalendarDays({
+    year: 2026,
+    month: 6,
+    weekStartsOn: 0,
+    hasVariableRowCount: true,
+  });
+
+  const handleSelect = (day: CalendarDay) => {
+    if (day.isOutside || isDateDisabled(day.date)) {
+      return;
+    }
+    // If no check-in yet, or already booked, or clicking on/before current check-in: start new check-in
+    if (!checkIn || checkOut || day.date.day <= checkIn.day) {
+      setCheckIn(day.date);
+      setCheckOut(null);
+    } else {
+      // Pick is after checkIn: set as check-out
+      setCheckOut(day.date);
+    }
+  };
+
+  const handleReset = () => {
+    setCheckIn(null);
+    setCheckOut(null);
+  };
+
+  return (
+    <VStack gap={3}>
+      <VStack gap={1}>
+        <Text type="body" weight="bold">
+          Hotel Booking — June 2026
+        </Text>
+        <Text type="supporting" color="secondary">
+          Season: Jun 5 – Jun 25 · Max stay: 7 nights · Closed Mondays
+        </Text>
+      </VStack>
+      <HStack gap={2} vAlign="center">
+        <Text type="supporting">
+          {checkIn
+            ? checkOut
+              ? `Booked: Jun ${checkIn.day} – Jun ${checkOut.day}`
+              : `Check-in: Jun ${checkIn.day} (pick check-out)`
+            : 'Pick a check-in date'}
+        </Text>
+        {checkIn && (
+          <Button
+            label="Reset"
+            size="sm"
+            variant="secondary"
+            onClick={handleReset}
+          />
+        )}
+      </HStack>
+      <table style={{tableLayout: 'fixed', width: 280}}>
+        <thead>
+          <tr>
+            {dayNames.map((name, i) => (
+              <th key={i} scope="col">
+                <Text type="supporting" color="secondary">
+                  {name}
+                </Text>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {weeks.map(week => (
+            <tr key={week[0].iso}>
+              {week.map(day => {
+                if (day.isOutside) {
+                  return <td key={day.iso} align="center" />;
+                }
+
+                const disabled = isDateDisabled(day.date);
+                const isSelected =
+                  (checkIn &&
+                    checkIn.day === day.date.day &&
+                    checkIn.month === day.date.month) ||
+                  (checkOut &&
+                    checkOut.day === day.date.day &&
+                    checkOut.month === day.date.month);
+
+                return (
+                  <td key={day.iso} align="center">
+                    <button
+                      type="button"
+                      disabled={disabled}
+                      onClick={() => handleSelect(day)}
+                      aria-pressed={isSelected ? 'true' : 'false'}
+                      aria-label={`June ${day.dayNumber}`}
+                      style={{
+                        width: 32,
+                        height: 32,
+                        borderRadius: 6,
+                        border: isSelected ? '1px solid currentColor' : 'none',
+                        background: 'transparent',
+                        opacity: disabled ? 0.35 : 1,
+                        cursor: disabled ? 'not-allowed' : 'pointer',
+                      }}>
+                      <Text
+                        type="body"
+                        color={disabled ? 'secondary' : 'primary'}>
+                        {day.dayNumber}
+                      </Text>
+                    </button>
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </VStack>
+  );
+}

package/assets/templates/blocks/components/Calendar/useCalendarNavigationHookUsage.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useCalendarNavigation',
+  name: 'useCalendarNavigation — Month Pager',
+  displayName: 'useCalendarNavigation — Month Pager',
+  description:
+    'A calendar month pager with previous/next navigation buttons, localized month-year label, and cross-month arrow key navigation using pendingFocus.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Button', 'Layout', 'Text'],
+};

package/assets/templates/blocks/components/Calendar/useCalendarNavigationHookUsage.tsx

@@ -0,0 +1,173 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useEffect, useRef, useState} from 'react';
+import {
+  useCalendarDays,
+  useCalendarNavigation,
+  type CalendarDay,
+  type ISODateString,
+} from '@astryxdesign/core/Calendar';
+import {Button} from '@astryxdesign/core/Button';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function UseCalendarNavigationHookUsage() {
+  const [focusDate, setFocusDate] = useState<ISODateString>(
+    '2026-06-01' as ISODateString,
+  );
+
+  const {
+    monthYearLabel,
+    visibleCalendarMonths,
+    navigateMonth,
+    pendingFocus,
+    clearPendingFocus,
+  } = useCalendarNavigation({
+    focusDate,
+    onFocusDateChange: setFocusDate,
+    numberOfMonths: 1,
+  });
+
+  const {weeks, dayNames} = useCalendarDays({
+    ...visibleCalendarMonths[0],
+    weekStartsOn: 0,
+    hasVariableRowCount: true,
+  });
+
+  const dayButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+
+  // Move focus to target date when navigating across month boundaries
+  useEffect(() => {
+    if (pendingFocus) {
+      const el = dayButtonRefs.current.get(pendingFocus);
+      if (el) {
+        el.focus();
+        clearPendingFocus();
+      }
+    }
+  }, [pendingFocus, clearPendingFocus, weeks]);
+
+  // Arrow key navigation moving across days and month boundaries with RTL awareness (DR6, DR11)
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLButtonElement>,
+    day: CalendarDay,
+  ) => {
+    if (day.isOutside) {
+      return;
+    }
+
+    const isRtl =
+      typeof window !== 'undefined' &&
+      getComputedStyle(e.currentTarget).direction === 'rtl';
+
+    const isNext = isRtl ? e.key === 'ArrowLeft' : e.key === 'ArrowRight';
+    const isPrev = isRtl ? e.key === 'ArrowRight' : e.key === 'ArrowLeft';
+
+    if (isNext) {
+      e.preventDefault();
+      const inMonthDays = weeks.flatMap(w => w.filter(d => !d.isOutside));
+      const currentIndex = inMonthDays.findIndex(d => d.iso === day.iso);
+      if (currentIndex === inMonthDays.length - 1) {
+        // Last day of month: advance month and focus next day across boundary
+        navigateMonth(1, day.iso, 1);
+      } else {
+        const nextDay = inMonthDays[currentIndex + 1];
+        dayButtonRefs.current.get(nextDay.iso)?.focus();
+      }
+    } else if (isPrev) {
+      e.preventDefault();
+      const inMonthDays = weeks.flatMap(w => w.filter(d => !d.isOutside));
+      const currentIndex = inMonthDays.findIndex(d => d.iso === day.iso);
+      if (currentIndex === 0) {
+        // First day of month: step back month and focus previous day across boundary
+        navigateMonth(-1, day.iso, 1);
+      } else {
+        const prevDay = inMonthDays[currentIndex - 1];
+        dayButtonRefs.current.get(prevDay.iso)?.focus();
+      }
+    }
+  };
+
+  return (
+    <VStack gap={3} style={{width: 280}}>
+      <HStack gap={2} vAlign="center" hAlign="between">
+        <Button
+          label="Previous"
+          size="sm"
+          variant="secondary"
+          onClick={() => navigateMonth(-1)}
+          aria-label="Previous month"
+        />
+        <Text type="body" weight="bold">
+          {monthYearLabel}
+        </Text>
+        <Button
+          label="Next"
+          size="sm"
+          variant="secondary"
+          onClick={() => navigateMonth(1)}
+          aria-label="Next month"
+        />
+      </HStack>
+
+      <table style={{tableLayout: 'fixed', width: 280}}>
+        <thead>
+          <tr>
+            {dayNames.map((name, i) => (
+              <th key={i} scope="col">
+                <Text type="supporting" color="secondary">
+                  {name}
+                </Text>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {weeks.map(week => (
+            <tr key={week[0].iso}>
+              {week.map(day => (
+                <td key={day.iso} align="center">
+                  <button
+                    type="button"
+                    ref={el => {
+                      if (el) {
+                        dayButtonRefs.current.set(day.iso, el);
+                      } else {
+                        dayButtonRefs.current.delete(day.iso);
+                      }
+                    }}
+                    disabled={day.isOutside}
+                    aria-hidden={day.isOutside || undefined}
+                    onKeyDown={e => handleKeyDown(e, day)}
+                    aria-label={
+                      day.isOutside
+                        ? undefined
+                        : `${monthYearLabel} ${day.dayNumber}`
+                    }
+                    tabIndex={day.isOutside ? -1 : 0}
+                    style={{
+                      width: 32,
+                      height: 32,
+                      borderRadius: 6,
+                      border: 'none',
+                      background: 'transparent',
+                      opacity: day.isOutside ? 0.35 : 1,
+                      cursor: day.isOutside ? 'not-allowed' : 'pointer',
+                    }}>
+                    <Text
+                      type="body"
+                      color={day.isOutside ? 'secondary' : 'primary'}>
+                      {day.dayNumber}
+                    </Text>
+                  </button>
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </VStack>
+  );
+}

package/assets/templates/themes/butter/butterTheme.ts

@@ -260,7 +260,7 @@ export const butterTheme = defineTheme({
     '--color-tint-hover': [neutral.light[0], neutral.dark[100]],
 
     // Typography override
-    '--text-supporting-size': '12px',
+    '--text-supporting-size': '0.75rem', // 12px at the default root size
 
     // Element sizes — slightly taller defaults so the new input padding
     // (--spacing-2 block) has room to breathe.

package/assets/templates/themes/stone/stoneTheme.ts

@@ -240,7 +240,7 @@ export const stoneTheme = defineTheme({
     '--color-tint-hover': [neutral.light[0], neutral.dark[100]],
 
     // Typography override
-    '--text-supporting-size': '12px',
+    '--text-supporting-size': '0.75rem', // 12px at the default root size
 
     // Categorical
     // Light mode pairs pastel stop 90 surfaces with stop 30 foregrounds.

package/assets/templates/themes/y2k/y2kTheme.ts

@@ -236,7 +236,7 @@ export const y2kTheme = defineTheme({
     '--color-tint-hover': [neutral.light[15], neutral.dark[95]],
 
     // Typography override
-    '--text-supporting-size': '12px',
+    '--text-supporting-size': '0.75rem', // 12px at the default root size
 
     // Categorical colors
     '--color-background-green': [green.light[80], green.dark[80]],

package/clients/cli/commands/swizzle.doc.mjs

@@ -22,6 +22,10 @@ export const doc = {
     "is copied beside it in the package's folder layout. " +
     'Tests, stories and docs are not copied. It lists the npm packages the copy imports, ' +
     'with the ranges the owner package declares, to install if your project lacks them. ' +
+    'An output folder swizzle owns (one the copy ' +
+    'creates, an empty one, or one it marked before) gets an astryx-swizzle.json marker naming ' +
+    "each package its copies came from, so @astryxdesign/build's Babel, PostCSS and Vite " +
+    'integrations, and withAstryx() under webpack, compile the copy below your theme. ' +
     'With no name it lists the swizzlable components. ' +
     'An integration component that replaces a Core component is what that Core name ' +
     'copies; --package @astryxdesign/core copies the original. --list lists Core ' +

package/clients/cli/commands/swizzle.mjs

@@ -113,6 +113,18 @@ export function registerSwizzle(program) {
         );
       }
 
+      const {marker} = result.data;
+      if (marker) {
+        const folder = marker.path.replace(/\/?astryx-swizzle\.json$/, '') || '.';
+        out.push(
+          text(
+            marker.written
+              ? `Marked ${folder}/ with astryx-swizzle.json: with @astryxdesign/build's Babel, PostCSS and Vite integrations, or withAstryx() under webpack, every module under it compiles below your theme, so theme overrides reach the copy. Keep only swizzled copies there. Turbopack does not read the marker yet.`
+              : `Did not mark ${folder}/ with astryx-swizzle.json: it already holds ${(marker.found ?? []).join(', ')} and no astryx-swizzle.json. If it holds only swizzled copies, add ${marker.path} to mark it, so theme overrides reach them; keep the product's own components out of a marked folder.`,
+          ),
+        );
+      }
+
       // StyleX build requirement — swizzled StyleX source throws on import
       // ("Unexpected 'stylex.create' call at runtime") unless the consumer's
       // build runs a StyleX compiler, so the page does not render at all.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.7.12-canary.ccb4a6d",
+  "version": "0.7.12-canary.f543ec7",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -124,7 +124,7 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.12-canary.ccb4a6d"
+    "@astryxdesign/core": "0.7.12-canary.f543ec7"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {
@@ -132,10 +132,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.7.12-canary.ccb4a6d",
-    "@astryxdesign/core": "0.7.12-canary.ccb4a6d",
-    "@astryxdesign/lab": "0.7.12-canary.ccb4a6d",
-    "@astryxdesign/theme-neutral": "0.7.12-canary.ccb4a6d",
+    "@astryxdesign/charts": "0.7.12-canary.f543ec7",
+    "@astryxdesign/core": "0.7.12-canary.f543ec7",
+    "@astryxdesign/lab": "0.7.12-canary.f543ec7",
+    "@astryxdesign/theme-neutral": "0.7.12-canary.f543ec7",
     "@heroicons/react": "^2.2.0",
     "@stylexjs/stylex": "^0.19.0",
     "@types/babel__core": "^7.20.5",