@astryxdesign/core 0.1.7 → 0.1.8-canary.0c4d8d7

package/src/TreeList/TreeListItem.tsx

@@ -29,7 +29,6 @@ import {mergeProps} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import {TreeListBranches} from './TreeListBranches';
 import type {TreeListDensity} from './TreeListTypes';
-import {treeItemScope} from './treeListItem.markers.stylex';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
@@ -47,6 +46,19 @@ const styles = stylex.create({
     // The treeitem row is the roving-tabindex focus owner; suppress the
     // native focus ring in favor of the row's :focus-visible outline below.
     outline: 'none',
+    // Publish this row's own focus state as an inheritable CSS variable
+    // instead of matching it via an ancestor selector. Every nested <li>
+    // redeclares these vars (default: 'none' / '0'), so a descendant row's
+    // default shadows an ancestor's active value — the ring can never leak
+    // past the nearest containing treeitem, however deep the tree nests.
+    '--_tree-focus-outline': {
+      default: 'none',
+      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
+    },
+    '--_tree-focus-outline-offset': {
+      default: '0',
+      ':focus-visible': '2px',
+    },
   },
   childGroup: {
     margin: 0,
@@ -86,17 +98,14 @@ const styles = stylex.create({
   },
   focusVisibleOutline: {
     outline: {
-      default: 'none',
-      // Focus lives on the treeitem row (the <li>) via roving tabindex.
-      // Scoped to the row's OWN treeitem so focusing a parent does not leak
-      // the ring onto descendant rows. Also support inner focusable actions.
-      [stylex.when.ancestor(':focus-visible', treeItemScope)]:
-        `2px solid ${colorVars['--color-accent']}`,
+      // Reads the row's own --_tree-focus-outline (published on the <li> in
+      // `wrapper`), which resolves to the nearest containing treeitem only.
+      default: 'var(--_tree-focus-outline, none)',
+      // Also support inner focusable actions.
       ':has(:focus-visible)': `2px solid ${colorVars['--color-accent']}`,
     },
     outlineOffset: {
-      default: '0',
-      [stylex.when.ancestor(':focus-visible', treeItemScope)]: '2px',
+      default: 'var(--_tree-focus-outline-offset, 0)',
       ':has(:focus-visible)': '2px',
     },
   },
@@ -451,7 +460,7 @@ export function TreeListItem({
       data-tree-id={id}
       data-tree-level={nestedLevel + 1}
       data-tree-disabled={isDisabled || undefined}
-      {...stylex.props(styles.wrapper, treeItemScope)}>
+      {...stylex.props(styles.wrapper)}>
       <div {...stylex.props(styles.treeBranches)}>
         <TreeListBranches
           ancestorsIsLast={ancestorsIsLast}

package/src/authoring/doc.ts

@@ -130,9 +130,7 @@ export type AstryxGenericDocInput = AstryxBaseDocInput;
  * any code referring to the old name.
  */
 export type AstryxComponentDoc =
-  | AstryxComponentDocInput
-  | AstryxFunctionDocInput
-  | AstryxGenericDocInput;
+  AstryxComponentDocInput | AstryxFunctionDocInput | AstryxGenericDocInput;
 
 /**
  * Author a component doc. Stamp-only: returns the def with `type: 'component'`

package/src/docs-script.test.mjs

@@ -3,12 +3,13 @@
 /**
  * @file Subprocess smoke tests for the zero-dependency docs script.
  *
- * `docs.mjs` resolves the package directory from `import.meta.url`. Using
- * `new URL(...).pathname` there breaks on Windows (drive-letter paths come
- * back as `/D:/...`), which made `--list` print nothing and component
- * lookups crash with ENOENT. These tests spawn the script as a real
- * subprocess from a neutral cwd, so resolution can only come from the
- * module URL, and assert it finds the component catalog on every platform.
+ * `docs.mjs` no longer prints component docs itself — it intentionally
+ * redirects to the Astryx CLI (`npx @astryxdesign/cli init`) so agents and
+ * humans converge on the CLI + `init` rather than a stale bundled snapshot.
+ * These tests spawn the script as a real subprocess from a neutral cwd and
+ * assert that, regardless of the arguments passed, it prints the redirect
+ * banner and exits 0 instead of rendering a component catalog or per-component
+ * docs.
  */
 
 import {describe, it, expect} from 'vitest';
@@ -29,22 +30,26 @@ function runDocs(args) {
   });
 }
 
-describe('docs.mjs component discovery', () => {
-  it('--list discovers the component catalog', () => {
+describe('docs.mjs redirects to the Astryx CLI', () => {
+  it('redirects to the CLI instead of printing a component catalog for --list', () => {
     const r = runDocs(['--list']);
     expect(r.error).toBeUndefined();
     expect(r.signal).toBeNull();
     expect(r.status).toBe(0);
-    expect(r.stdout).toMatch(/\bButton\b/);
-    expect(r.stdout).toMatch(/\bDialog\b/);
+    // Prints the redirect banner, not a component list.
+    expect(r.stdout).toMatch(/docs are served by the Astryx CLI/);
+    expect(r.stdout).toMatch(/npx @astryxdesign\/cli init/);
+    expect(r.stdout).toMatch(/npx @astryxdesign\/cli component --list/);
   });
 
-  it('renders docs for a single component', () => {
+  it('redirects to the CLI instead of rendering docs for a single component', () => {
     const r = runDocs(['Button']);
     expect(r.error).toBeUndefined();
     expect(r.signal).toBeNull();
     expect(r.status).toBe(0);
-    expect(r.stdout).toMatch(/^# Button$/m);
-    expect(r.stdout).toMatch(/## Props/);
+    // A pure redirect: it must not render the component's docs.
+    expect(r.stdout).not.toMatch(/^# Button$/m);
+    expect(r.stdout).not.toMatch(/## Props/);
+    expect(r.stdout).toMatch(/npx @astryxdesign\/cli component <Name>/);
   });
 });

package/src/hooks/computeOverflow.test.ts

@@ -0,0 +1,422 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import {computeOverflow, type ComputeOverflowInput} from './computeOverflow';
+
+// Convenience wrapper with sensible defaults so each test states only what it
+// exercises. All widths/gaps are plain numbers — no DOM involved.
+function compute(overrides: Partial<ComputeOverflowInput>) {
+  return computeOverflow({
+    widths: [],
+    gap: 0,
+    availableWidth: 0,
+    indicatorWidth: 0,
+    minVisibleItems: 0,
+    collapseFrom: 'end',
+    ...overrides,
+  });
+}
+
+describe('computeOverflow — single line, no limits (parity with legacy loop)', () => {
+  it('shows all items when they fit', () => {
+    // 3×50, gap 10 → 170 ≤ 200
+    expect(
+      compute({widths: [50, 50, 50], gap: 10, availableWidth: 200}),
+    ).toEqual({visibleCount: 3, rows: 1});
+  });
+
+  it('hides items that do not fit and reserves indicator space', () => {
+    // 4×50, gap 10, indicator 30, container 150 → 2 fit
+    expect(
+      compute({
+        widths: [50, 50, 50, 50],
+        gap: 10,
+        indicatorWidth: 30,
+        availableWidth: 150,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+
+  it('shows zero when nothing fits and floor is 0', () => {
+    expect(
+      compute({
+        widths: [100, 100, 100],
+        indicatorWidth: 30,
+        availableWidth: 50,
+      }),
+    ).toEqual({visibleCount: 0, rows: 0});
+  });
+
+  it('exact fit with indicator not needed shows all', () => {
+    // 3×50, gap 10 → 170 == 170
+    expect(
+      compute({
+        widths: [50, 50, 50],
+        gap: 10,
+        indicatorWidth: 30,
+        availableWidth: 170,
+      }),
+    ).toEqual({visibleCount: 3, rows: 1});
+  });
+
+  it('off-by-one: one pixel short drops the last item', () => {
+    expect(
+      compute({
+        widths: [50, 50, 50],
+        gap: 10,
+        indicatorWidth: 30,
+        availableWidth: 169,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+
+  it('works without an indicator', () => {
+    // 3×50, gap 10, container 130 → 2 fit
+    expect(
+      compute({widths: [50, 50, 50], gap: 10, availableWidth: 130}),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+
+  it('varied widths', () => {
+    expect(
+      compute({
+        widths: [30, 80, 40, 60],
+        gap: 10,
+        indicatorWidth: 25,
+        availableWidth: 200,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+});
+
+describe('computeOverflow — floor (minVisibleItems)', () => {
+  it('respects the floor even when items do not fit', () => {
+    expect(
+      compute({
+        widths: [100, 100, 100],
+        indicatorWidth: 30,
+        availableWidth: 50,
+        minVisibleItems: 2,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+
+  it('floor larger than itemCount is clamped to itemCount', () => {
+    expect(
+      compute({
+        widths: [100, 100],
+        availableWidth: 10,
+        minVisibleItems: 5,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+});
+
+describe('computeOverflow — cap (maxVisibleItems)', () => {
+  it('caps below fit even when everything fits', () => {
+    // all 5 fit in a wide container, cap at 2
+    expect(
+      compute({
+        widths: [40, 40, 40, 40, 40],
+        gap: 8,
+        availableWidth: 10000,
+        maxVisibleItems: 2,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+
+  it('cap of 0 shows nothing', () => {
+    expect(
+      compute({
+        widths: [40, 40, 40],
+        availableWidth: 10000,
+        maxVisibleItems: 0,
+      }),
+    ).toEqual({visibleCount: 0, rows: 0});
+  });
+
+  it('cap greater than itemCount is a no-op', () => {
+    expect(
+      compute({
+        widths: [40, 40, 40],
+        gap: 8,
+        availableWidth: 10000,
+        maxVisibleItems: 99,
+      }),
+    ).toEqual({visibleCount: 3, rows: 1});
+  });
+
+  it('cap does not raise a fit-limited count', () => {
+    // container only fits 2, cap is 4 → still 2
+    expect(
+      compute({
+        widths: [50, 50, 50, 50],
+        gap: 10,
+        indicatorWidth: 30,
+        availableWidth: 150,
+        maxVisibleItems: 4,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+});
+
+describe('computeOverflow — cap + floor composition', () => {
+  it('both honored when min <= max', () => {
+    // fit would be 2; floor 1, cap 3 → 2
+    expect(
+      compute({
+        widths: [50, 50, 50, 50],
+        gap: 10,
+        indicatorWidth: 30,
+        availableWidth: 150,
+        minVisibleItems: 1,
+        maxVisibleItems: 3,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+
+  it('D1: when max < min, min wins', () => {
+    // wide container fits all 5; floor 3, cap 1 → floor wins → 3
+    expect(
+      compute({
+        widths: [40, 40, 40, 40, 40],
+        gap: 8,
+        availableWidth: 10000,
+        minVisibleItems: 3,
+        maxVisibleItems: 1,
+      }),
+    ).toEqual({visibleCount: 3, rows: 1});
+  });
+});
+
+describe('computeOverflow — collapseFrom start vs end + cap', () => {
+  it('single-line collapseFrom start keeps the tail', () => {
+    // Items: 30, 80, 40. gap 10, indicator 25, container 100.
+    // reversed: [40, 80, 30] → only 40 fits → visibleCount 1
+    expect(
+      compute({
+        widths: [30, 80, 40],
+        gap: 10,
+        indicatorWidth: 25,
+        availableWidth: 100,
+        collapseFrom: 'start',
+      }),
+    ).toEqual({visibleCount: 1, rows: 1});
+  });
+
+  it('collapseFrom start + cap trims from the correct end', () => {
+    expect(
+      compute({
+        widths: [40, 40, 40, 40],
+        gap: 8,
+        availableWidth: 10000,
+        collapseFrom: 'start',
+        maxVisibleItems: 2,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+});
+
+describe('computeOverflow — multi-row (maxRows)', () => {
+  it('maxRows 1 is equivalent to single line', () => {
+    const single = compute({
+      widths: [50, 50, 50, 50],
+      gap: 10,
+      indicatorWidth: 30,
+      availableWidth: 150,
+    });
+    const withMaxRows1 = compute({
+      widths: [50, 50, 50, 50],
+      gap: 10,
+      indicatorWidth: 30,
+      availableWidth: 150,
+      maxRows: 1,
+    });
+    expect(withMaxRows1).toEqual(single);
+    expect(withMaxRows1).toEqual({visibleCount: 2, rows: 1});
+  });
+
+  it('packs items onto exactly maxRows rows when all fit', () => {
+    // 6×50, gap 10 → each row of width 170 holds 3 (50+10+50+10+50=170).
+    // availableWidth 170, maxRows 2 → all 6 fit on 2 rows.
+    expect(
+      compute({
+        widths: [50, 50, 50, 50, 50, 50],
+        gap: 10,
+        availableWidth: 170,
+        maxRows: 2,
+      }),
+    ).toEqual({visibleCount: 6, rows: 2});
+  });
+
+  it('collapses overflow past maxRows into the indicator (reserved on last row)', () => {
+    // 8×50, gap 10, width 170 → 3 per row. maxRows 2.
+    // Row 1: 3 items (170). Row 2 (last): reserve indicator 40 + gap 10 = 50.
+    //   available for items on row 2 = 170; place 50 (ok, rowWidth 50),
+    //   next 50 → 50+10+50=110 + reserve 50 = 160 ≤ 170 ok (2 items),
+    //   next 50 → 110+10+50=170 + 50 = 220 > 170 stop. Row 2 holds 2.
+    // → 3 + 2 = 5 visible, 2 rows.
+    expect(
+      compute({
+        widths: [50, 50, 50, 50, 50, 50, 50, 50],
+        gap: 10,
+        indicatorWidth: 40,
+        availableWidth: 170,
+        maxRows: 2,
+      }),
+    ).toEqual({visibleCount: 5, rows: 2});
+  });
+
+  it('all items on a single row still reports rows: 1 under maxRows 2', () => {
+    expect(
+      compute({
+        widths: [30, 30, 30],
+        gap: 5,
+        availableWidth: 500,
+        maxRows: 2,
+      }),
+    ).toEqual({visibleCount: 3, rows: 1});
+  });
+
+  it('cap wins when it is stricter than the rows allow', () => {
+    // 6 items fit on 2 rows, but cap at 4 → 4 visible.
+    expect(
+      compute({
+        widths: [50, 50, 50, 50, 50, 50],
+        gap: 10,
+        indicatorWidth: 40,
+        availableWidth: 170,
+        maxRows: 2,
+        maxVisibleItems: 4,
+      }),
+    ).toEqual({visibleCount: 4, rows: 2});
+  });
+
+  it('rows win when they are stricter than the cap', () => {
+    // maxRows 2 admits 5 (see above); cap 8 is looser → rows win → 5.
+    expect(
+      compute({
+        widths: [50, 50, 50, 50, 50, 50, 50, 50],
+        gap: 10,
+        indicatorWidth: 40,
+        availableWidth: 170,
+        maxRows: 2,
+        maxVisibleItems: 8,
+      }),
+    ).toEqual({visibleCount: 5, rows: 2});
+  });
+
+  it('multi-row collapseFrom start keeps the tail items', () => {
+    // 8 items, reversed packing; same geometry as the end case → 5 visible.
+    const res = compute({
+      widths: [50, 50, 50, 50, 50, 50, 50, 50],
+      gap: 10,
+      indicatorWidth: 40,
+      availableWidth: 170,
+      maxRows: 2,
+      collapseFrom: 'start',
+    });
+    expect(res).toEqual({visibleCount: 5, rows: 2});
+  });
+
+  it('maxRows taller than content does not add phantom rows', () => {
+    // 3 items fit on one row; maxRows 5 → rows 1, all visible.
+    expect(
+      compute({
+        widths: [40, 40, 40],
+        gap: 10,
+        availableWidth: 500,
+        maxRows: 5,
+      }),
+    ).toEqual({visibleCount: 3, rows: 1});
+  });
+
+  it('floor is honored in multi-row even when nothing fits', () => {
+    // Very narrow container, floor 2.
+    expect(
+      compute({
+        widths: [500, 500, 500],
+        gap: 10,
+        indicatorWidth: 40,
+        availableWidth: 100,
+        maxRows: 2,
+        minVisibleItems: 2,
+      }),
+    ).toEqual({visibleCount: 2, rows: 2});
+  });
+});
+
+describe('computeOverflow — resize behavior (shrink/grow re-clamps, never exceeds cap)', () => {
+  const base: Partial<ComputeOverflowInput> = {
+    widths: [50, 50, 50, 50, 50],
+    gap: 10,
+    indicatorWidth: 30,
+    maxVisibleItems: 3,
+  };
+
+  it('grows back only up to the cap', () => {
+    // Huge container would fit all 5, cap holds at 3.
+    expect(compute({...base, availableWidth: 10000})).toEqual({
+      visibleCount: 3,
+      rows: 1,
+    });
+  });
+
+  it('shrinks below the cap when space is tight', () => {
+    // Narrow container fits fewer than the cap.
+    expect(compute({...base, availableWidth: 150})).toEqual({
+      visibleCount: 2,
+      rows: 1,
+    });
+  });
+
+  it('never exceeds the cap across a shrink→grow cycle', () => {
+    const shrunk = compute({...base, availableWidth: 120});
+    const grown = compute({...base, availableWidth: 10000});
+    expect(grown.visibleCount).toBeLessThanOrEqual(3);
+    expect(shrunk.visibleCount).toBeLessThanOrEqual(grown.visibleCount);
+  });
+});
+
+describe('computeOverflow — degenerate inputs', () => {
+  it('empty list', () => {
+    expect(compute({widths: []})).toEqual({visibleCount: 0, rows: 0});
+  });
+
+  it('single item that fits', () => {
+    expect(compute({widths: [50], gap: 10, availableWidth: 100})).toEqual({
+      visibleCount: 1,
+      rows: 1,
+    });
+  });
+
+  it('single item that does not fit, no floor', () => {
+    expect(
+      compute({widths: [200], indicatorWidth: 30, availableWidth: 100}),
+    ).toEqual({visibleCount: 0, rows: 0});
+  });
+
+  it('maxRows 0 falls back to single-line semantics', () => {
+    // maxRows 0 is degenerate; treated as single line (not multi-row).
+    expect(
+      compute({
+        widths: [50, 50, 50],
+        gap: 10,
+        availableWidth: 130,
+        maxRows: 0,
+      }),
+    ).toEqual({visibleCount: 2, rows: 1});
+  });
+
+  it('cap 0 with floor 0 and multi-row shows nothing', () => {
+    expect(
+      compute({
+        widths: [50, 50],
+        gap: 10,
+        availableWidth: 500,
+        maxRows: 2,
+        maxVisibleItems: 0,
+      }),
+    ).toEqual({visibleCount: 0, rows: 0});
+  });
+});