@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Item/Item.d.ts

@@ -1,7 +1,11 @@
 /**
  * @file Item.tsx
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
- * @output Exports Item component, ItemProps type; publishes the shared inline inset
+ * @output Exports Item component, ItemProps type; publishes the shared inline inset.
+ *   Only numbered composing rows keep their start/label/end slots in one flex
+ *   group, through Item's private exact-marker scope; other marked rows keep
+ *   their flat children. This lets List share a counter track without changing
+ *   those slots' own layout.
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
  *
  * The swipe actions live in ItemSwipeLayer, reached only through a dynamic

package/dist/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}

package/dist/Item/Item.js

@@ -5,7 +5,11 @@
 /**
  * @file Item.tsx
  * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
- * @output Exports Item component, ItemProps type; publishes the shared inline inset
+ * @output Exports Item component, ItemProps type; publishes the shared inline inset.
+ *   Only numbered composing rows keep their start/label/end slots in one flex
+ *   group, through Item's private exact-marker scope; other marked rows keep
+ *   their flat children. This lets List share a counter track without changing
+ *   those slots' own layout.
  * @position Core layout primitive; consumed by index.ts, tested by Item.test.tsx
  *
  * The swipe actions live in ItemSwipeLayer, reached only through a dynamic
@@ -24,12 +28,13 @@
  * - /apps/storybook/stories/Item.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Item/ (showcase blocks)
  */
-import { lazy, Suspense, useCallback, useId, useRef } from 'react';
+import { lazy, Suspense, use, useCallback, useId, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { isRenderable, mergeProps } from "../utils/index.js";
 import { ItemDescriptionContext } from "./ItemDescriptionContext.js";
+import { ItemMarkerColumnsContext } from "./ItemMarkerColumnsContext.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { computeTargetAndRel } from "../Link/computeTargetAndRel.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
@@ -184,7 +189,7 @@ const styles = {
   },
   swipeRoot: {
     kHBbk8: "xc8icb0",
-    kFalU9: "xx69xxh",
+    kFalU9: "xge0x1e",
     k3aq6I: "x1kncwj0",
     k1ekBW: "xuo13n2",
     kIyJzY: "x15p14ac",
@@ -266,6 +271,7 @@ export function Item({
   ...restProps
 }) {
   const pressable = usePressFeedback();
+  const columnMarker = use(ItemMarkerColumnsContext);
   const LinkComponent = useLinkComponent();
 
   // Delegation mode: the row is an enlarged click/tap target for a nested
@@ -360,8 +366,8 @@ export function Item({
     }
     onClick?.(e);
   };
-  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [marker, startContent != null && /*#__PURE__*/_jsx("span", {
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [startContent != null && /*#__PURE__*/_jsx("span", {
       ...{
         0: {
           className: "x3psx0u x78zum5"
@@ -512,9 +518,19 @@ export function Item({
     }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
     role: role,
     onClick: rootOnClick,
-    children: [/*#__PURE__*/_jsx(ItemDescriptionContext, {
+    children: [/*#__PURE__*/_jsxs(ItemDescriptionContext, {
       value: hasRenderableDescription ? descriptionID : null,
-      children: innerContent
+      children: [isRenderable(marker) && marker, isRenderable(marker) && columnMarker === marker ? /*#__PURE__*/_jsx("span", {
+        ...{
+          0: {
+            className: "x78zum5 x98rzlu xeuugli x1h91t0o xkh2ocl x14kbac9"
+          },
+          1: {
+            className: "x78zum5 x98rzlu xeuugli x1h91t0o x14kbac9 xoi2r2e"
+          }
+        }[!!(align === 'first-line') << 0],
+        children: content
+      }) : content]
     }), hasSwipe &&
     /*#__PURE__*/
     // The panels: out-of-flow children of this root, so the DOM is the one

package/dist/Item/ItemMarkerColumns.a11y.chromium.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ItemMarkerColumns.a11y.chromium.spec.d.ts.map

package/dist/Item/ItemMarkerColumns.a11y.chromium.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemMarkerColumns.a11y.chromium.spec.d.ts","sourceRoot":"","sources":["../../src/Item/ItemMarkerColumns.a11y.chromium.spec.ts"],"names":[],"mappings":""}

package/dist/Item/ItemMarkerColumns.a11y.chromium.spec.js

@@ -0,0 +1,132 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y scope core/Item core/List core/Markdown core/DropdownMenu ^apps/storybook/stories/Item
+
+/**
+ * @file ItemMarkerColumns.a11y.chromium.spec.ts
+ * @input Built Item marker anatomy, mixed task, and selectable menu stories
+ * @output Minimal DOM counts and unchanged row pixels at rest/open, fine/coarse
+ * @position Item/List browser regression; receipts and captures stay in test outputs
+ */
+
+import { createHash } from 'node:crypto';
+import { readFile, writeFile } from 'node:fs/promises';
+import { basename, join } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { holdMotionStill } from '@astryxdesign/a11y-spec/chromium';
+import { DEFAULT_STORYBOOK_DIR, serveStorybook } from '@astryxdesign/a11y-spec/storybook';
+let storybook;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR);
+});
+test.afterAll(async () => storybook?.close());
+async function open(page, story, dir) {
+  await page.goto(`${storybook.origin}/iframe.html?id=${story}&viewMode=story&globals=direction:${dir};colorMode:light;astryxTheme:neutral`);
+  await holdMotionStill(page);
+  await page.evaluate(async () => document.fonts.ready);
+}
+async function capture(page, selector, name, file) {
+  const target = page.locator(selector);
+  await expect(target).toBeVisible();
+  const geometry = await target.evaluate(root => {
+    const origin = root.getBoundingClientRect();
+    const rect = element => {
+      const box = element.getBoundingClientRect();
+      return {
+        x: box.x - origin.x,
+        y: box.y - origin.y,
+        width: box.width,
+        height: box.height
+      };
+    };
+    return {
+      bodyElements: document.body.querySelectorAll('*').length,
+      componentElements: root.querySelectorAll('*').length,
+      rows: Array.from(root.querySelectorAll('.astryx-item')).map(row => ({
+        case: row.closest('[data-marker-case]')?.getAttribute('data-marker-case') ?? row.getAttribute('role') ?? 'task',
+        children: row.children.length,
+        elements: row.querySelectorAll('*').length,
+        rect: rect(row),
+        slots: Array.from(row.querySelectorAll('[data-anatomy-slot], input, [role="checkbox"], [role="radio"]')).map(slot => ({
+          name: slot.getAttribute('data-anatomy-slot') ?? slot.getAttribute('role') ?? slot.tagName,
+          rect: rect(slot)
+        })),
+        startIsDirect: row.querySelector('[data-anatomy-slot="start"]')?.parentElement?.parentElement === row
+      }))
+    };
+  });
+  const image = await target.screenshot({
+    path: file
+  });
+  return {
+    name,
+    ...geometry,
+    pixelSha256: createHash('sha256').update(image).digest('hex')
+  };
+}
+for (const pointer of ['fine', 'coarse']) {
+  for (const dir of ['ltr', 'rtl']) {
+    test(`numbered marker scope preserves row pixels (${pointer}, ${dir})`, async ({
+      browser
+    }, testInfo) => {
+      const context = await browser.newContext({
+        viewport: {
+          width: 1280,
+          height: 900
+        },
+        hasTouch: pointer === 'coarse'
+      });
+      const page = await context.newPage();
+      try {
+        const states = [];
+        await open(page, 'core-item--marker-anatomy', dir);
+        expect(await page.evaluate(() => matchMedia('(pointer: coarse)').matches)).toBe(pointer === 'coarse');
+        const fixture = '[data-marker-anatomy]';
+        states.push(await capture(page, fixture, 'anatomy-rest', testInfo.outputPath('anatomy-rest.png')));
+        await page.getByRole('button', {
+          name: 'Toggle marker menu'
+        }).click();
+        await expect(page.getByRole('menuitem')).toBeVisible();
+        await page.mouse.move(1200, 850);
+        states.push(await capture(page, fixture, 'anatomy-open', testInfo.outputPath('anatomy-open.png')));
+        await open(page, 'a11y-menu--dropdown-selectable', dir);
+        states.push(await capture(page, '[data-a11y-activations]', 'menu-rest', testInfo.outputPath('menu-rest.png')));
+        await page.getByRole('button', {
+          name: 'View',
+          exact: true
+        }).click();
+        await expect(page.getByRole('menuitemcheckbox')).toBeVisible();
+        await expect(page.getByRole('menuitemradio')).toHaveCount(2);
+        await page.mouse.move(1200, 850);
+        states.push(await capture(page, '[role="menu"]', 'menu-open', testInfo.outputPath('menu-open.png')));
+        await open(page, 'richtext-richtexteditor--markdown-parity', dir);
+        const task = '[data-parity-surface="markdown"] [data-parity-block="list-task-mixed"]';
+        states.push(await capture(page, task, 'mixed-task', testInfo.outputPath('mixed-task.png')));
+        await writeFile(testInfo.outputPath('receipt.json'), JSON.stringify({
+          pointer,
+          dir,
+          states
+        }, null, 2));
+        for (const state of states.filter(state => state.name.startsWith('anatomy'))) {
+          for (const row of state.rows) {
+            expect(row.children, row.case).toBe(row.case === 'numbered' ? 2 : row.case === 'unmarked-item' ? 3 : 4);
+            expect(row.startIsDirect, row.case).toBe(row.case !== 'numbered');
+          }
+        }
+        // Before/after pixels are compared only when the retained local receipt
+        // is supplied. CI keeps the structural proof and emits its own receipt.
+        const before = process.env.ASTRYX_MARKER_ANATOMY_BEFORE;
+        if (before != null) {
+          const prior = JSON.parse(await readFile(join(before, basename(testInfo.outputDir), 'receipt.json'), 'utf8'));
+          for (const state of states) {
+            const previous = prior.states.find(value => value.name === state.name);
+            expect(previous, state.name).toBeDefined();
+            expect(state.pixelSha256, `${state.name}: unchanged pixels`).toBe(previous?.pixelSha256);
+            expect(state.rows.map(row => row.rect), `${state.name}: unchanged geometry`).toEqual(previous?.rows.map(row => row.rect));
+          }
+        }
+      } finally {
+        await context.close();
+      }
+    });
+  }
+}

package/dist/Item/ItemMarkerColumnsContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @file ItemMarkerColumnsContext.tsx
+ * @input The exact marker element supplied by a numbered composing row
+ * @output Private ItemMarkerColumnsContext; not part of the public Item exports
+ * @position Item-owned seam for the marker/content formatting group
+ *
+ * Numbered ListItem rows need two subgrid cells. Other marked Items keep their
+ * flat flex children. Marker identity, rather than an inherited boolean,
+ * confines the group to that one row: an Item nested in a slot has a different
+ * marker and does not inherit the formatting request.
+ */
+import { type ReactNode } from 'react';
+export declare const ItemMarkerColumnsContext: import("react").Context<ReactNode>;
+//# sourceMappingURL=ItemMarkerColumnsContext.d.ts.map

package/dist/Item/ItemMarkerColumnsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemMarkerColumnsContext.d.ts","sourceRoot":"","sources":["../../src/Item/ItemMarkerColumnsContext.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAgB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEpD,eAAO,MAAM,wBAAwB,oCAAiC,CAAC"}

package/dist/Item/ItemMarkerColumnsContext.js

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ItemMarkerColumnsContext.tsx
+ * @input The exact marker element supplied by a numbered composing row
+ * @output Private ItemMarkerColumnsContext; not part of the public Item exports
+ * @position Item-owned seam for the marker/content formatting group
+ *
+ * Numbered ListItem rows need two subgrid cells. Other marked Items keep their
+ * flat flex children. Marker identity, rather than an inherited boolean,
+ * confines the group to that one row: an Item nested in a slot has a different
+ * marker and does not inherit the formatting request.
+ */
+import { createContext } from 'react';
+export const ItemMarkerColumnsContext = /*#__PURE__*/createContext(null);
+ItemMarkerColumnsContext.displayName = 'ItemMarkerColumnsContext';

package/dist/Item/ItemSwipeLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemSwipeLayer.d.ts","sourceRoot":"","sources":["../../src/Item/ItemSwipeLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAaxD,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,eAAe,EAAE,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AAM/D;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,CAAC;IACxB,mBAAmB,EAAE,MAAM,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACvC;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAqHD;;;GAGG;AACH,iBAAwB,cAAc,CAAC,EACrC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,+BAwIrB;kBA9IuB,cAAc;;;eAAd,cAAc"}
+{"version":3,"file":"ItemSwipeLayer.d.ts","sourceRoot":"","sources":["../../src/Item/ItemSwipeLayer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAaxD,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAC,eAAe,EAAE,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AAM/D;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,aAAa,CAAC;IACxB,mBAAmB,EAAE,MAAM,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IAClC,0EAA0E;IAC1E,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACvC;;;OAGG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AA8HD;;;GAGG;AACH,iBAAwB,cAAc,CAAC,EACrC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,+BAwIrB;kBA9IuB,cAAc;;;eAAd,cAAc"}

package/dist/Item/ItemSwipeLayer.js

@@ -131,6 +131,9 @@ const swipeVariantStyles = {
   destructive: {
     kWkggS: "x1pjz0fi",
     kMwMTN: "x1m024r3",
+    kMzoRj: "xc342km x13rsnn2",
+    ksu8eU: "xng3xce xx61lck",
+    kVAM5u: "x1w1tqly",
     $$css: true
   }
 };

package/dist/Item/useSwipeAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSwipeAction.d.ts","sourceRoot":"","sources":["../../src/Item/useSwipeAction.ts"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EACV,YAAY,IAAI,iBAAiB,EACjC,aAAa,IAAI,kBAAkB,EACnC,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAGf,yEAAyE;AACzE,eAAO,MAAM,qBAAqB,yBAAyB,CAAC;AAC5D,kEAAkE;AAClE,eAAO,MAAM,wBAAwB,sBAAsB,CAAC;AAC5D,wEAAwE;AACxE,eAAO,MAAM,uBAAuB,2BAA2B,CAAC;AAgBhE,yEAAyE;AACzE,eAAO,MAAM,eAAe,MAAM,CAAC;AAInC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC/C,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAChD,MAAM,MAAM,UAAU;AACpB,uBAAuB;AACrB,MAAM;AACR,iCAAiC;GAC/B,UAAU;AACZ,0DAA0D;GACxD,UAAU;AACZ,mEAAmE;GACjE,SAAS;AACX,uDAAuD;GACrD,MAAM,CAAC;AAEX,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,qDAAqD;IACrD,IAAI,EAAE,SAAS,CAAC;IAChB,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,aAAa,CAAC;IACxB,iFAAiF;IACjF,KAAK,EAAE;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAC,CAAC;IAC7C,oEAAoE;IACpE,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAC;IAC1C;;;OAGG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC5C,4CAA4C;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;IAC7C,2BAA2B;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oFAAoF;IACpF,mBAAmB,EAAE,MAAM,OAAO,CAAC;CACpC;AAoDD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAa,EACb,eAAuB,EACvB,OAAO,GACR,EAAE,qBAAqB,GAAG,oBAAoB,CAmc9C"}
+{"version":3,"file":"useSwipeAction.d.ts","sourceRoot":"","sources":["../../src/Item/useSwipeAction.ts"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EACV,YAAY,IAAI,iBAAiB,EACjC,aAAa,IAAI,kBAAkB,EACnC,UAAU,IAAI,eAAe,EAC9B,MAAM,OAAO,CAAC;AAGf,yEAAyE;AACzE,eAAO,MAAM,qBAAqB,yBAAyB,CAAC;AAC5D,kEAAkE;AAClE,eAAO,MAAM,wBAAwB,sBAAsB,CAAC;AAC5D,wEAAwE;AACxE,eAAO,MAAM,uBAAuB,2BAA2B,CAAC;AAgBhE,yEAAyE;AACzE,eAAO,MAAM,eAAe,MAAM,CAAC;AAInC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC/C,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAChD,MAAM,MAAM,UAAU;AACpB,uBAAuB;AACrB,MAAM;AACR,iCAAiC;GAC/B,UAAU;AACZ,0DAA0D;GACxD,UAAU;AACZ,mEAAmE;GACjE,SAAS;AACX,uDAAuD;GACrD,MAAM,CAAC;AAEX,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,UAAU,CAAC;IAClB,qDAAqD;IACrD,IAAI,EAAE,SAAS,CAAC;IAChB,uEAAuE;IACvE,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,aAAa,CAAC;IACxB,iFAAiF;IACjF,KAAK,EAAE;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAC,CAAC;IAC7C,oEAAoE;IACpE,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAC;IAC1C;;;OAGG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC5C,4CAA4C;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0EAA0E;IAC1E,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,MAAM,WAAW,aAAa;IAC5B,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IACjD,SAAS,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;IAC7C,2BAA2B;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,oFAAoF;IACpF,mBAAmB,EAAE,MAAM,OAAO,CAAC;CACpC;AAoDD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAa,EACb,eAAuB,EACvB,OAAO,GACR,EAAE,qBAAqB,GAAG,oBAAoB,CA+f9C"}

package/dist/Item/useSwipeAction.js

@@ -32,6 +32,12 @@
  * signal WebKit honours. Before the axis is decided, and for a drag the
  * scroller got, nothing is cancelled.
  *
+ * A pinch is the browser's: the root's `touch-action` keeps `pinch-zoom`, and
+ * a second finger that lands anywhere before the axis is decided turns the
+ * touch into a pinch, so the row lets it go and cancels nothing. A finger
+ * that is not the first one down never starts a drag. Once the row owns a
+ * drag, a second finger does not break it.
+ *
  * The drag's travel is one custom property written on the root, coalesced to
  * one write per frame; the root's transform reads it and the panels'
  * transforms read its negation, so the row moves and the panel appears fixed
@@ -120,6 +126,8 @@ export function useSwipeAction({
   const settleTimerRef = useRef(null);
   const frameRef = useRef(null);
   const pendingRef = useRef(null);
+  /** Removes the document listener that watches for a pinch's second finger. */
+  const stopPinchWatchRef = useRef(null);
   const [state, setState] = useState(IDLE_STATE);
   const stateRef = useRef(state);
   stateRef.current = state;
@@ -144,8 +152,38 @@ export function useSwipeAction({
     if (frameRef.current != null) {
       cancelAnimationFrame(frameRef.current);
     }
+    stopPinchWatchRef.current?.();
+    stopPinchWatchRef.current = null;
+  }, []);
+  const stopWatchingForPinch = useCallback(() => {
+    stopPinchWatchRef.current?.();
+    stopPinchWatchRef.current = null;
   }, []);
 
+  /**
+   * Until the axis is decided, a second finger anywhere on the page makes
+   * the touch a pinch: the row gives it up and cancels nothing, so the
+   * browser zooms. The finger can land off the row, so the document listens.
+   */
+  const watchForPinch = useCallback(drag => {
+    stopWatchingForPinch();
+    const onAnyPointerDown = event => {
+      if (event.pointerType === 'touch' && event.pointerId !== drag.pointerId && drag.claimed === null) {
+        drag.claimed = false;
+        stopWatchingForPinch();
+      }
+    };
+    document.addEventListener('pointerdown', onAnyPointerDown, {
+      capture: true,
+      passive: true
+    });
+    stopPinchWatchRef.current = () => {
+      document.removeEventListener('pointerdown', onAnyPointerDown, {
+        capture: true
+      });
+    };
+  }, [stopWatchingForPinch]);
+
   /** Write the travel (physical px) the transforms read. */
   const writeTravel = useCallback(travel => {
     const root = rootRef.current;
@@ -324,14 +362,25 @@ export function useSwipeAction({
   }, [rootRef, settle]);
   const onPointerDown = useCallback(event => {
     const current = stateRef.current;
-    if (!isEnabled || event.pointerType !== 'touch' || dragRef.current != null || current.phase === 'settling' || current.phase === 'held') {
+    const inFlight = dragRef.current;
+    if (inFlight != null) {
+      // A second finger before the axis is decided: a pinch, not a swipe.
+      if (event.pointerType === 'touch' && event.pointerId !== inFlight.pointerId && inFlight.claimed === null) {
+        inFlight.claimed = false;
+        stopWatchingForPinch();
+      }
+      return;
+    }
+    if (!isEnabled || event.pointerType !== 'touch' ||
+    // Another finger is already down: this one is part of a pinch.
+    event.isPrimary === false || current.phase === 'settling' || current.phase === 'held') {
       return;
     }
     const root = rootRef.current;
     const inlineSign = isRtlElement(root) ? -1 : 1;
     inlineSignRef.current = inlineSign;
     const startTime = now();
-    dragRef.current = {
+    const drag = {
       // Logical: the physical travel through the inline sign.
       baseTravel: travelRef.current * inlineSign,
       claimed: null,
@@ -348,7 +397,9 @@ export function useSwipeAction({
       startY: event.clientY,
       travel: 0
     };
-  }, [isEnabled, rootRef]);
+    dragRef.current = drag;
+    watchForPinch(drag);
+  }, [isEnabled, rootRef, stopWatchingForPinch, watchForPinch]);
   const onPointerMove = useCallback(event => {
     const drag = dragRef.current;
     if (drag == null || drag.pointerId !== event.pointerId || drag.claimed === false) {
@@ -361,6 +412,9 @@ export function useSwipeAction({
       if (Math.max(Math.abs(deltaX), Math.abs(deltaY)) < AXIS_LOCK_PX) {
         return;
       }
+      // The axis is decided now, whichever way: a later finger is the
+      // swipe's to ignore or the scroller's to use.
+      stopWatchingForPinch();
       // More horizontal than vertical is the row's, the rest the scroller's.
       if (Math.abs(deltaX) <= Math.abs(deltaY)) {
         drag.claimed = false;
@@ -413,13 +467,14 @@ export function useSwipeAction({
     drag.lastX = event.clientX;
     drag.lastTime = now();
     paintOnNextFrame(sign * drag.inlineSign * offset);
-  }, [paintOnNextFrame, rootRef, writeDuration]);
+  }, [paintOnNextFrame, rootRef, stopWatchingForPinch, writeDuration]);
   const endGesture = useCallback((event, cancelled) => {
     const drag = dragRef.current;
     if (drag == null || drag.pointerId !== event.pointerId) {
       return;
     }
     dragRef.current = null;
+    stopWatchingForPinch();
     if (drag.claimed !== true) {
       return;
     }
@@ -450,7 +505,7 @@ export function useSwipeAction({
       return;
     }
     settle(side, 0, 'idle');
-  }, [rootRef, settle, slideOutAndFire]);
+  }, [rootRef, settle, slideOutAndFire, stopWatchingForPinch]);
   const onPointerUp = useCallback(event => endGesture(event, false), [endGesture]);
   const onPointerCancel = useCallback(event => endGesture(event, true), [endGesture]);
   const shouldSuppressClick = useCallback(() => now() < suppressClickUntilRef.current, []);

package/dist/Kbd/Kbd.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file Kbd.tsx
- * @input Uses React, StyleX, theme tokens, shortcut key names and aliases
- * @output Exports Kbd component and KbdProps with canonical shortcut labels
+ * @input Uses React, StyleX, theme tokens, shortcut key names, aliases, provider-bound translator
+ * @output Exports Kbd component and KbdProps with localized shortcut text
  * @position Core implementation; renders styled keyboard shortcut indicators
  *
  * SYNC: When modified, update:

package/dist/Kbd/Kbd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+G5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;;;OAcG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBA6C3E;yBA7Ce,GAAG"}
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/Kbd/Kbd.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiH5C,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;;;;;;OAcG;IACH,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAC,EAAE,QAAQ,qBAkD3E;yBAlDe,GAAG"}

package/dist/Kbd/Kbd.js

@@ -4,8 +4,8 @@
 
 /**
  * @file Kbd.tsx
- * @input Uses React, StyleX, theme tokens, shortcut key names and aliases
- * @output Exports Kbd component and KbdProps with canonical shortcut labels
+ * @input Uses React, StyleX, theme tokens, shortcut key names, aliases, provider-bound translator
+ * @output Exports Kbd component and KbdProps with localized shortcut text
  * @position Core implementation; renders styled keyboard shortcut indicators
  *
  * SYNC: When modified, update:
@@ -17,6 +17,7 @@ import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import { isApplePlatform } from "../utils/isApplePlatform.js";
 import { themeProps } from "../utils/themeProps.js";
+import { useTranslator } from "../i18n/index.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -45,7 +46,7 @@ const KEY_DISPLAY = new Map([['ctrl', '\u2303'],
 // ↵
 ['backspace', '\u232B'],
 // ⌫
-['escape', 'Esc'], ['tab', '\u21E5'],
+['tab', '\u21E5'],
 // ⇥
 ['up', '\u2191'], ['down', '\u2193'], ['left', '\u2190'], ['right', '\u2192'], ['plus', '+']]);
 const KBD_KEY_ALIASES = new Map([['esc', 'escape'], ['return', 'enter']]);
@@ -55,10 +56,11 @@ const KBD_KEY_ALIASES = new Map([['esc', 'escape'], ['return', 'enter']]);
  * `mod` key (⌘ on macOS, Ctrl on other platforms) and falls back to
  * KEY_DISPLAY or uppercased key name.
  */
-function getKeyDisplay(key, isMac) {
+function getKeyDisplay(key, isMac, t) {
   if (key === 'mod') {
-    return isMac ? '\u2318' : 'Ctrl';
+    return isMac ? '\u2318' : t('@astryx.kbd.key.controlShort');
   }
+  if (key === 'escape') return t('@astryx.kbd.key.escapeShort');
   return KEY_DISPLAY.get(key) ?? key.toUpperCase();
 }
 
@@ -67,12 +69,13 @@ function getKeyDisplay(key, isMac) {
  * (⌘, ⇧, ↵, …) that assistive tech cannot announce meaningfully, so the
  * accessible name for the shortcut is built from these words instead.
  */
-const KEY_LABEL = new Map([['ctrl', 'Control'], ['alt', 'Alt'], ['shift', 'Shift'], ['enter', 'Enter'], ['backspace', 'Backspace'], ['escape', 'Escape'], ['tab', 'Tab'], ['up', 'Up arrow'], ['down', 'Down arrow'], ['left', 'Left arrow'], ['right', 'Right arrow'], ['plus', 'Plus']]);
-function getKeyLabel(key, isMac) {
+const KEY_LABEL = new Map([['ctrl', '@astryx.kbd.key.control'], ['alt', '@astryx.kbd.key.alt'], ['shift', '@astryx.kbd.key.shift'], ['enter', '@astryx.kbd.key.enter'], ['backspace', '@astryx.kbd.key.backspace'], ['escape', '@astryx.kbd.key.escape'], ['tab', '@astryx.kbd.key.tab'], ['up', '@astryx.kbd.key.up'], ['down', '@astryx.kbd.key.down'], ['left', '@astryx.kbd.key.left'], ['right', '@astryx.kbd.key.right'], ['plus', '@astryx.kbd.key.plus']]);
+function getKeyLabel(key, isMac, t) {
   if (key === 'mod') {
-    return isMac ? 'Command' : 'Control';
+    return t(isMac ? '@astryx.kbd.key.command' : '@astryx.kbd.key.control');
   }
-  return KEY_LABEL.get(key) ?? key.toUpperCase();
+  const labelKey = KEY_LABEL.get(key);
+  return labelKey ? t(labelKey) : key.toUpperCase();
 }
 function subscribeToPlatformChanges() {
   return () => {};
@@ -103,6 +106,7 @@ export function Kbd({
   style,
   ...rest
 }) {
+  const t = useTranslator();
   const isMac = useSyncExternalStore(subscribeToPlatformChanges, isApplePlatform, getServerPlatformSnapshot);
   const keyOccurrences = new Map();
   const parts = keys.split('+').map(key => key.trim().toLowerCase()).map(sourceKey => {
@@ -118,7 +122,10 @@ export function Kbd({
   // the visual glyphs below are announced meaninglessly by assistive tech.
   const accessibleName = parts.map(({
     key
-  }) => getKeyLabel(key, isMac)).join(' + ');
+  }) => getKeyLabel(key, isMac, t)).reduce((shortcut, key, index) => index === 0 ? key : t('@astryx.kbd.shortcut', {
+    shortcut,
+    key
+  }), '');
   return /*#__PURE__*/_jsx("span", {
     ...rest,
     ref: ref,
@@ -133,7 +140,7 @@ export function Kbd({
       ...{
         className: "x3nfvp2 x6s0dn4 xl56j7k x16asifk x1grt7ep x7a5moj xx3sua9 x17x4s8c xlxy82 x1q0q8m5 xib2hle x1tgivj0 x9ynric x141an7d x1e4wzip x1ltkj2j x87ps6o"
       },
-      children: getKeyDisplay(key, isMac)
+      children: getKeyDisplay(key, isMac, t)
     }, reactKey))
   });
 }

package/dist/Layer/layerAnimations.stylex.d.ts

@@ -32,29 +32,33 @@ import * as stylex from '@stylexjs/stylex';
  *
  * Each entry disables its keyframe animation under
  * `prefers-reduced-motion: reduce` so the layer appears instantly instead of
- * translating/scaling in (infra-6).
+ * translating/scaling in (infra-6). Under a finger (the primary pointer is
+ * coarse) it fades in instead, opacity only and in 200 ms or less: on a touch
+ * screen Reduce Motion replaces motion with a cross-fade rather than a jump
+ * (design:reduced-motion DR2, DR3), as iOS does for its menus, popovers and
+ * tips.
  */
 export declare const layerAnimations: Readonly<{
     readonly below: Readonly<{
-        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", "230ms">;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string>;
         readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
         readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "backwards">;
         readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
     }>;
     readonly above: Readonly<{
-        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", "230ms">;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string>;
         readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
         readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "backwards">;
         readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
     }>;
     readonly end: Readonly<{
-        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", "230ms">;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string>;
         readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
         readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "backwards">;
         readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
     }>;
     readonly start: Readonly<{
-        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", "230ms">;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", string>;
         readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "cubic-bezier(0.24, 1, 0.4, 1)">;
         readonly animationFillMode: stylex.StyleXClassNameFor<"animationFillMode", "backwards">;
         readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;

package/dist/Layer/layerAnimations.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA8D3C;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EA+B1B,CAAC"}
+{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA0E3C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EAmC1B,CAAC"}