npm - @astryxdesign/cli - Versions diffs - 0.4.2 → 0.4.3-canary.ac850d9 - Mend

@astryxdesign/cli 0.4.2 → 0.4.3-canary.ac850d9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/CHANGELOG.md +23 -0
package/README.md +44 -43
package/api/template/cdn/cdn.d.mts +23 -0
package/api/template/cdn/cdn.mjs +86 -0
package/api/template/cdn/cdn.test.mjs +108 -0
package/api/template/template.d.mts +2 -0
package/api/template/template.doc.mjs +21 -3
package/api/template/template.mjs +16 -2
package/api/template/template.type.d.mts +19 -0
package/api/template/template.type.mjs +12 -0
package/api/theme/build/build.font-warning.test.mjs +23 -14
package/api/theme/build/build.icons-specifier.test.mjs +149 -0
package/api/theme/build/build.mjs +88 -16
package/api/theme/build/build.test.mjs +185 -14
package/api/theme/theme.type.d.mts +6 -0
package/api/theme/theme.type.mjs +4 -1
package/assets/cdn.template.html +124 -0
package/assets/docs/theme.doc.dense.mjs +1 -1
package/assets/docs/theme.doc.mjs +11 -5
package/assets/docs/theme.doc.zh.mjs +1 -1
package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorDeadlinePicker.doc.mjs +20 -0
package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorDeadlinePicker.tsx +87 -0
package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs +15 -0
package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx +199 -0
package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorTreeSearch.doc.mjs +14 -0
package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorTreeSearch.tsx +188 -0
package/assets/templates/themes/neutral/neutralTheme.ts +6 -4
package/assets/theme.template.ts +4 -3
package/clients/cli/commands/build-theme.font-warning.test.mjs +9 -6
package/clients/cli/commands/build-theme.icons-specifier.test.mjs +132 -7
package/clients/cli/commands/template-cdn.behavior.test.mjs +113 -0
package/clients/cli/commands/template.doc.mjs +12 -2
package/clients/cli/commands/template.mjs +24 -3
package/clients/cli/lib/manifest.mjs +2 -1
package/foundation/fs/path-safety.mjs +2 -2
package/foundation/fs/path-safety.test.mjs +7 -0
package/foundation/response/response-types.doc.mjs +6 -0
package/foundation/text/copyright-header.mjs +11 -4
package/package.json +9 -9

package/assets/cdn.template.html ADDED Viewed

@@ -0,0 +1,124 @@
+<!-- Copyright (c) Meta Platforms, Inc. and affiliates. -->
+<!doctype html>
+<!--
+  Astryx from a CDN — no build step, no bundler, no install.
+  Open this file in a browser (double-click works) or serve it from anywhere.
+  Everything is pinned to the Astryx version you had installed when this was
+  written; nothing here resolves to "latest", because an unpinned CDN URL
+  silently changes under you.
+  React 19 removed its UMD builds, so there is no global-script path any more:
+  an import map plus `type="module"` is how you load Astryx without a bundler.
+  Two things worth doing next:
+    - `astryx theme template` writes an annotated theme you can point this page
+      at. Its `color` scale generates a whole ramp from one seed colour and
+      guarantees >= 4.5:1 for the text it generates against its surface.
+    - `astryx component <Name>` prints any component's real prop surface.
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!--
+      The theme names a font family; it never loads one. Without this link the
+      whole page silently falls back to the next family in the stack, which is
+      not the design you chose. `neutral` asks for Figtree — swap this for
+      whatever your theme names, or self-host with @font-face.
+    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap" />
+    <!-- reset.css and astryx.css are the component styles; theme.css is the
+         theme. Note /dist/theme.css — the package root has no theme.css. -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@astryxdesign/core@__ASTRYX_VERSION__/src/reset.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@astryxdesign/core@__ASTRYX_VERSION__/dist/astryx.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@astryxdesign/theme-neutral@__ASTRYX_VERSION__/dist/theme.css" />
+    <!--
+      react/jsx-runtime is not decoration: the published bundle imports it, and
+      leaving it out fails the page with "Failed to resolve module specifier".
+      ?external=react,react-dom makes esm.sh reuse the React above instead of
+      bundling its own. Two React copies means every hook throws
+      "Cannot read properties of null (reading 'useState')".
+      htm is optional — delete it and the `h` binding below if you would rather
+      call createElement directly. It costs ~1KB and buys JSX-shaped markup,
+      which is worth it as soon as the tree is more than a few levels deep.
+    -->
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@19.2.0",
+          "react/jsx-runtime": "https://esm.sh/react@19.2.0/jsx-runtime",
+          "react-dom": "https://esm.sh/react-dom@19.2.0",
+          "react-dom/client": "https://esm.sh/react-dom@19.2.0/client",
+          "htm": "https://esm.sh/htm@3.1.1",
+          "@astryxdesign/core": "https://esm.sh/@astryxdesign/core@__ASTRYX_VERSION__?external=react,react-dom",
+          "@astryxdesign/theme-neutral": "https://esm.sh/@astryxdesign/theme-neutral@__ASTRYX_VERSION__?external=react,react-dom"
+        }
+      }
+    </script>
+    <!-- Nothing in the stylesheets sets a document font: the theme styles
+         prose elements and each component styles itself, and Button is
+         `font: inherit` by design. Without this line its label falls back to
+         the browser default (Times). -->
+    <style>
+      body {
+        font-family: var(--font-family-body);
+      }
+      /* Modules load over the network, so the page is empty for a moment.
+         Say so, rather than showing a blank screen that reads as broken. */
+      #root:empty::after {
+        content: 'Loading…';
+        display: block;
+        padding: 2rem;
+        color: var(--color-text-secondary);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import * as React from 'react';
+      import {createRoot} from 'react-dom/client';
+      import htm from 'htm';
+      import {Theme, Card, Stack, Heading, Text, Button} from '@astryxdesign/core';
+      import {neutralTheme} from '@astryxdesign/theme-neutral';
+      // Nothing is compiling this file, so there is no JSX. htm gives the same
+      // shape from a tagged template; `React.createElement` directly is the
+      // dependency-free alternative.
+      const h = htm.bind(React.createElement);
+      // Passing the theme OBJECT is what makes `mode` work: 'system' follows
+      // the OS, and light/dark switch at runtime. The `data-astryx-theme`
+      // attribute alone only scopes the stylesheet — it cannot switch modes.
+      createRoot(document.getElementById('root')).render(h`
+        <${Theme} theme=${neutralTheme} mode="system">
+          <${Stack} padding=${6} align="start">
+            <${Card} maxWidth=${480} elevation="low">
+              <${Stack} gap=${3} align="start">
+                <${Heading} level=${1}>Hello from a CDN</${Heading}>
+                <${Text}>No bundler, no install, no build step.</${Text}>
+                <!-- Button's text comes from \`label\`, which is required — it is
+                     the accessible name. Children are optional and only change
+                     the visible text; the accessible name stays \`label\`. -->
+                <${Button} variant="primary" label="Try me" />
+              </${Stack}>
+            </${Card}>
+          </${Stack}>
+        </${Theme}>
+      `);
+    </script>
+  </body>
+</html>

package/assets/docs/theme.doc.dense.mjs CHANGED Viewed

@@ -9,7 +9,7 @@ export const docsDense = {
     { section: 'Available Themes', title: 'Themes', content: [null, null, { type: 'prose', text: 'published: neutral (start here), butter, chocolate, gothic (dark-only), matcha, stone, y2k. @astryxdesign/theme-{name} = source (runtime). @astryxdesign/theme-{name}/built = optimized (+ theme.css).' }] },
     { section: 'Theme Props', title: 'Props', content: [null] },
     { section: 'Creating a Custom Theme', title: 'Custom Theme', content: [{ type: 'prose', text: '`theme list` + `theme add <slug>` to start from a shipped theme, or defineTheme from scratch. only override tokens that differ.' }, null, { type: 'prose', text: '`astryx theme template` writes theme.template.ts: every defineTheme field + token families + override syntax, annotated, with the CLI command that prints each reference.' }] },
-    { section: 'defineTheme', title: 'defineTheme', content: [{ type: 'prose', text: 'scale configs (color, typography, radius, motion) + explicit token overrides + component overrides. color derives full palette from accent hex via HCT.' }, null, null] },
+    { section: 'defineTheme', title: 'defineTheme', content: [{ type: 'prose', text: 'scale configs (color, typography, radius, motion) + explicit token overrides + component overrides. color derives full palette from accent via HCT; accent = hex or [light, dark] tuple (per-scheme palettes). tokens overrides win token-by-token; --color-on-accent stays baked from color.accent, so prefer a tuple accent over overriding --color-accent.' }, null, null] },
     { section: 'Component Style Overrides', title: 'Component Overrides', content: [{ type: 'prose', text: 'components field uses semantic component keys + style keys (base, variant:value, stateName), not raw selectors. for external CSS, prefer data-* selectors from `astryx docs styling`. write standard CSS (borderRadius, padding) — pipeline expands to internal vars. public vars (--button-focus-offset etc) set directly. private vars (--_*) cannot be set — use CSS properties. run `astryx component <Name>` for details.' }, null, null, null, null] },
     { section: 'Custom Variants', title: 'Custom Variants', content: [{ type: 'prose', text: 'any unknown prop:value in components becomes a new variant. astryx theme build generates TS augmentations. works on any extensible prop axis (variant, status, etc).' }, null, null, null, null] },
     { section: 'Building Themes for Production', title: 'Build for Production', content: [{ type: 'prose', text: 'astryx theme build compiles defineTheme to static CSS. outputs .css + .js (__built:true) + .d.ts.' }, null, null, null, null] },

package/assets/docs/theme.doc.mjs CHANGED Viewed

@@ -162,7 +162,7 @@ function App() {
       content: [
         {
           type: 'prose',
-          text: 'defineTheme creates a theme from token overrides and optional scale configs. Scale configs generate tokens from parameters. Explicit token overrides always take precedence over scale-generated values.',
+          text: 'defineTheme creates a theme from token overrides and optional scale configs. Scale configs generate tokens from parameters. Explicit token overrides always take precedence over scale-generated values, token by token. One caveat for the accent: overriding --color-accent in tokens re-points the reference tokens (--color-accent-muted, --color-text-accent, --color-icon-accent) but NOT --color-on-accent, which stays baked from the color.accent seed. To give each scheme its own accent with a consistent derived palette, pass a [light, dark] tuple to color.accent instead of overriding the token.',
         },
         {
           type: 'code',
@@ -172,7 +172,8 @@ function App() {
 const myTheme = defineTheme({
   name: 'my-theme',
-  color: { accent: '#7B61FF', neutralStyle: 'cool' },
+  // accent: single hex, or [light, dark] tuple to seed each scheme separately
+  color: { accent: ['#7B61FF', '#9B85FF'], neutralStyle: 'cool' },
   typography: {
     scale: { base: 14, ratio: 1.2 },
     body: { family: 'Inter', fallbacks: '-apple-system, sans-serif' },
@@ -181,7 +182,7 @@ const myTheme = defineTheme({
   motion: { fast: 175, medium: 410, ratio: 0.75 },
   tokens: {
     // Explicit overrides take precedence over scale-generated values
-    '--color-accent': ['#7B61FF', '#9B85FF'],
+    '--color-background-body': ['#FFFFFF', '#0A0A0A'],
   },
   components: {
     button: { 'variant:primary': { color: 'white' } },
@@ -195,7 +196,7 @@ const myTheme = defineTheme({
             [
               'color',
               '--color-accent, --color-background-*, --color-text-*, --color-border, etc.',
-              'accent? (hex; omit for neutral-only), neutralStyle? (warm|cool|neutral), contrast? (standard|high)',
+              'accent? (hex or [light, dark] tuple; omit for neutral-only), neutralStyle? (warm|cool|neutral), contrast? (standard|high)',
             ],
             [
               'typography.scale',
@@ -253,10 +254,15 @@ const brandTheme = defineTheme({
             ['tokens', 'Base tokens are copied first, then child tokens override on top.'],
             ['components', 'Deep-merged: child component rules override matching keys from the base.'],
             ['icons', 'Shallow-merged: child icons override matching names from the base.'],
-            ['fonts', 'Base fonts included first, then child fonts appended.'],
+            ['indicators', 'Shallow-merged: child indicators override matching names from the base.'],
+            ['onDark, onLight', "Deep-merged per surface: the base's resolved surface first, then the child's overrides."],
             ['typography, motion, radius, color', 'Child config replaces base entirely (these are scale inputs, not additive).'],
           ],
         },
+        {
+          type: 'prose',
+          text: 'Inheritance is resolved when the theme is defined, so an extended theme is flat: `astryx theme build` emits one self-contained stylesheet holding everything the child inherited, and the base theme\'s CSS does not need to be loaded next to it. A base that is not a theme — most often an import that missed — is a build error rather than a theme that silently inherits nothing.',
+        },
       ],
     },
     {

package/assets/docs/theme.doc.zh.mjs CHANGED Viewed

@@ -9,7 +9,7 @@ export const docsZh = {
     { section: 'Available Themes', title: '可用主题', content: [null, null, { type: 'prose', text: '已发布主题：neutral（推荐起点）、butter、chocolate、gothic（仅暗色）、matcha、stone、y2k。@astryxdesign/theme-{name} = 源码版（运行时注入）。@astryxdesign/theme-{name}/built = 优化版（配合 theme.css）。' }] },
     { section: 'Theme Props', title: 'Theme 属性', content: [null] },
     { section: 'Creating a Custom Theme', title: '创建自定义主题', content: [{ type: 'prose', text: '用 `theme list` + `theme add <slug>` 从内置主题开始，或用 defineTheme 从零编写。只覆盖与默认值不同的令牌。' }, null, { type: 'prose', text: '`astryx theme template` 会写入 theme.template.ts：带注释的完整参考，涵盖每个 defineTheme 字段、令牌族和覆盖语法，并标明打印各自参考的 CLI 命令。' }] },
-    { section: 'defineTheme', title: 'defineTheme', content: [{ type: 'prose', text: '支持比例配置（typography、radius、motion）+ 显式令牌覆盖 + 组件覆盖。' }, null, null] },
+    { section: 'defineTheme', title: 'defineTheme', content: [{ type: 'prose', text: '支持比例配置（color、typography、radius、motion）+ 显式令牌覆盖 + 组件覆盖。color 通过 HCT 从 accent 派生完整调色板；accent 接受单个十六进制值或 [light, dark] 元组（每个模式使用各自的种子色）。tokens 覆盖按令牌逐个生效；--color-on-accent 始终由 color.accent 计算得出，因此优先使用元组 accent 而不是覆盖 --color-accent。' }, null, null] },
     { section: 'Building Themes for Production', title: '生产构建', content: [{ type: 'prose', text: 'astryx theme build 将 defineTheme 编译为静态 CSS。输出 .css + .js（__built:true）+ .d.ts。' }, null, null, null, null] },
     { section: 'Runtime vs Built Themes', title: '运行时 vs 构建', content: [{ type: 'prose', text: '运行时：useInsertionEffect 在客户端注入样式。构建：静态 CSS 在首次渲染时就存在。SSR 应用请使用 /built + theme.css。' }, null, null, null] },
     { section: 'Light/Dark Mode', title: '亮/暗模式', content: [{ type: 'prose', text: "令牌值使用 [light, dark] 元组实现自动模式切换。Theme 上 mode='system'（默认）跟随系统偏好。" }, null, null] },

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorDeadlinePicker.doc.mjs ADDED Viewed

@@ -0,0 +1,20 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ComplexSelector',
+  name: 'ComplexSelector — Deadline Picker',
+  displayName: 'Complex Selector — Deadline Picker',
+  description:
+    'A multi-step deadline field: pick a preset like Today or Next week, or switch to a custom date and time before applying. The popup stays open until the user commits, so the content owns the Apply action.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: [
+    'ComplexSelector',
+    'RadioList',
+    'DateInput',
+    'TimeInput',
+    'Button',
+  ],
+};

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorDeadlinePicker.tsx ADDED Viewed

@@ -0,0 +1,87 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+'use client';
+import {useState} from 'react';
+import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
+import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
+import {DateInput} from '@astryxdesign/core/DateInput';
+import {TimeInput} from '@astryxdesign/core/TimeInput';
+import {Button} from '@astryxdesign/core/Button';
+import {VStack} from '@astryxdesign/core/Layout';
+type ISODate =
+  `${number}${number}${number}${number}-${number}${number}-${number}${number}`;
+type ISOTime = string & {readonly __brand: 'ISOTimeString'};
+interface Deadline {
+  preset: 'today' | 'next-week' | 'custom';
+  date: ISODate;
+  time: ISOTime;
+}
+const presetLabels: Record<Deadline['preset'], string> = {
+  today: 'Today',
+  'next-week': 'Next week',
+  custom: 'Custom date',
+};
+function formatDeadline(value: Deadline) {
+  if (value.preset === 'custom') {
+    return `${value.date} at ${value.time}`;
+  }
+  return presetLabels[value.preset];
+}
+export default function ComplexSelectorDeadlinePicker() {
+  const [value, setValue] = useState<Deadline>({
+    preset: 'today',
+    date: '2026-04-06' as ISODate,
+    time: '17:00' as ISOTime,
+  });
+  return (
+    <ComplexSelector<Deadline>
+      label="Deadline"
+      description="Choose a preset or set a custom date and time."
+      value={value}
+      onChange={setValue}
+      triggerLabel={formatDeadline(value)}
+      style={{width: 320}}>
+      {(selectedValue, onChange, close) => {
+        const set = (patch: Partial<Deadline>) =>
+          onChange({...selectedValue, ...patch});
+        return (
+          <VStack gap={4} style={{width: 320}}>
+            <RadioList
+              label="When is it due?"
+              value={selectedValue.preset}
+              onChange={preset => set({preset: preset as Deadline['preset']})}>
+              <RadioListItem label="Today" value="today" />
+              <RadioListItem label="Next week" value="next-week" />
+              <RadioListItem label="Custom date" value="custom" />
+            </RadioList>
+            {selectedValue.preset === 'custom' && (
+              <VStack gap={3}>
+                <DateInput
+                  label="Date"
+                  value={selectedValue.date}
+                  onChange={date => date && set({date})}
+                />
+                <TimeInput
+                  label="Time"
+                  value={selectedValue.time}
+                  onChange={time => time && set({time})}
+                />
+              </VStack>
+            )}
+            <Button label="Apply" variant="primary" onClick={close} />
+          </VStack>
+        );
+      }}
+    </ComplexSelector>
+  );
+}

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.doc.mjs ADDED Viewed

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ComplexSelector',
+  name: 'ComplexSelector',
+  displayName: 'Complex Selector',
+  description:
+    'A two-axis picker: choose a fruit and a ripeness level from one control. ComplexSelector owns the trigger, popover, and focus restore while the custom grid owns its keyboard semantics.',
+  isReady: true,
+  aspectRatio: 1,
+  isShowcase: true,
+  componentsUsed: ['ComplexSelector', 'Text'],
+};

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorShowcase.tsx ADDED Viewed

@@ -0,0 +1,199 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+'use client';
+import {useEffect, useState} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
+import {Text} from '@astryxdesign/core/Text';
+import {useGridFocus} from '@astryxdesign/core/hooks';
+import {
+  borderVars,
+  colorVars,
+  radiusVars,
+  spacingVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+type Fruit = 'Apple' | 'Pear' | 'Peach' | 'Plum';
+type Ripeness = 'Crisp' | 'Tender' | 'Juicy' | 'Peak';
+interface FruitValue {
+  fruit: Fruit;
+  ripeness: Ripeness;
+}
+const fruits: Array<{id: Fruit; emoji: string; description: string}> = [
+  {id: 'Apple', emoji: '🍎', description: 'Bright and balanced'},
+  {id: 'Pear', emoji: '🍐', description: 'Soft floral sweetness'},
+  {id: 'Peach', emoji: '🍑', description: 'Round summer flavor'},
+  {id: 'Plum', emoji: '🟣', description: 'Jammy and tart'},
+];
+const ripenessLevels: Array<{
+  id: Ripeness;
+  shortLabel: string;
+  description: string;
+}> = [
+  {id: 'Crisp', shortLabel: 'C', description: 'Snappy bite'},
+  {id: 'Tender', shortLabel: 'T', description: 'Easy bite'},
+  {id: 'Juicy', shortLabel: 'J', description: 'Full juice'},
+  {id: 'Peak', shortLabel: 'P', description: 'Most intense'},
+];
+const GRID_CELL_SELECTOR = '[role="gridcell"]';
+const styles = stylex.create({
+  grid: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacingVars['--spacing-1'],
+    minWidth: 280,
+  },
+  row: {
+    display: 'grid',
+    gridTemplateColumns: 'minmax(150px, 1fr) repeat(4, 44px)',
+    alignItems: 'center',
+    columnGap: spacingVars['--spacing-1'],
+  },
+  rowHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacingVars['--spacing-2'],
+    textAlign: 'start',
+    minWidth: 0,
+  },
+  emoji: {
+    fontSize: 18,
+    flexShrink: 0,
+  },
+  fruitText: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+  },
+  cell: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 36,
+    borderWidth: borderVars['--border-width'],
+    borderStyle: 'solid',
+    borderColor: colorVars['--color-border'],
+    borderRadius: radiusVars['--radius-container'],
+    backgroundColor: colorVars['--color-background-card'],
+    color: colorVars['--color-text-secondary'],
+    fontFamily: 'inherit',
+    cursor: 'pointer',
+    ':hover': {
+      '@media (hover: hover)': {
+        borderColor: colorVars['--color-border-emphasized'],
+        color: colorVars['--color-text-primary'],
+      },
+    },
+  },
+  cellSelected: {
+    borderColor: colorVars['--color-accent'],
+    backgroundColor: colorVars['--color-accent'],
+    color: colorVars['--color-on-accent'],
+  },
+});
+function FruitRipenessGrid({
+  value,
+  onChange,
+}: {
+  value: FruitValue;
+  onChange: (value: FruitValue) => void;
+}) {
+  const {gridRef, handleKeyDown, handleFocus, focusCell} =
+    useGridFocus<HTMLDivElement>({
+      columns: ripenessLevels.length,
+      cellSelector: GRID_CELL_SELECTOR,
+      hasRovingTabIndex: true,
+    });
+  useEffect(() => {
+    const rowIndex = fruits.findIndex(f => f.id === value.fruit);
+    const columnIndex = ripenessLevels.findIndex(l => l.id === value.ripeness);
+    requestAnimationFrame(() => {
+      focusCell(
+        rowIndex >= 0 && columnIndex >= 0
+          ? rowIndex * ripenessLevels.length + columnIndex
+          : 0,
+      );
+    });
+  }, [focusCell, value]);
+  return (
+    <div
+      ref={gridRef}
+      role="grid"
+      aria-label="Fruit ripeness choices"
+      onKeyDown={handleKeyDown}
+      onFocus={handleFocus}
+      {...stylex.props(styles.grid)}>
+      {fruits.map(fruit => (
+        <div key={fruit.id} role="row" {...stylex.props(styles.row)}>
+          <div role="rowheader" {...stylex.props(styles.rowHeader)}>
+            <span aria-hidden="true" {...stylex.props(styles.emoji)}>
+              {fruit.emoji}
+            </span>
+            <span {...stylex.props(styles.fruitText)}>
+              <Text type="body">{fruit.id}</Text>
+              <Text type="supporting" color="secondary">
+                {fruit.description}
+              </Text>
+            </span>
+          </div>
+          {ripenessLevels.map(level => {
+            const isSelected =
+              value.fruit === fruit.id && value.ripeness === level.id;
+            return (
+              <button
+                key={`${fruit.id}-${level.id}`}
+                type="button"
+                role="gridcell"
+                aria-label={`${fruit.id}, ${level.id}: ${level.description}`}
+                aria-selected={isSelected || undefined}
+                tabIndex={isSelected ? 0 : -1}
+                onClick={() => onChange({fruit: fruit.id, ripeness: level.id})}
+                {...stylex.props(
+                  styles.cell,
+                  isSelected && styles.cellSelected,
+                )}>
+                {level.shortLabel}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+export default function ComplexSelectorShowcase() {
+  const [value, setValue] = useState<FruitValue>({
+    fruit: 'Apple',
+    ripeness: 'Juicy',
+  });
+  return (
+    <ComplexSelector<FruitValue>
+      label="Fruit blend"
+      description="Choose a fruit and ripeness in one control. Arrow keys move across the grid."
+      value={value}
+      onChange={setValue}
+      triggerLabel={`${value.fruit} · ${value.ripeness}`}
+      style={{width: 280}}>
+      {(selectedValue, onChange, close) => (
+        <FruitRipenessGrid
+          value={selectedValue}
+          onChange={nextValue => {
+            onChange(nextValue);
+            close();
+          }}
+        />
+      )}
+    </ComplexSelector>
+  );
+}

package/assets/templates/blocks/components/ComplexSelector/ComplexSelectorTreeSearch.doc.mjs ADDED Viewed

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ComplexSelector',
+  name: 'ComplexSelector — Tree Search',
+  displayName: 'Complex Selector — Tree Search',
+  description:
+    'A destination picker that combines a search field with a TreeList hierarchy. TreeList owns tree keyboard navigation; ComplexSelector owns the trigger, popover, and focus restore. Selecting a folder closes the popup.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['ComplexSelector', 'TextInput', 'TreeList'],
+};