npm - @astryxdesign/cli - Versions diffs - 0.4.1 → 0.4.2-canary.01592f7 - Mend

@astryxdesign/cli 0.4.1 → 0.4.2-canary.01592f7

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 (60) hide show

package/CHANGELOG.md +34 -0
package/README.md +1 -0
package/api/init/init.doc.mjs +2 -2
package/api/init/init.test.mjs +19 -2
package/api/init/init.type.d.mts +9 -1
package/api/init/init.type.mjs +3 -1
package/api/init/run/run.mjs +36 -6
package/api/theme/add/add.mjs +2 -13
package/api/theme/build/build.font-warning.test.mjs +161 -0
package/api/theme/build/build.mjs +95 -26
package/api/theme/build/build.test.mjs +227 -0
package/api/theme/build/font-warning.d.mts +26 -0
package/api/theme/build/font-warning.mjs +214 -0
package/api/theme/build/font-warning.test.mjs +242 -0
package/api/theme/template/template.d.mts +21 -0
package/api/theme/template/template.mjs +69 -0
package/api/theme/template/template.test.mjs +82 -0
package/api/theme/theme.d.mts +1 -0
package/api/theme/theme.mjs +1 -0
package/api/theme/theme.type.d.mts +13 -0
package/api/theme/theme.type.mjs +11 -1
package/api/theme/themeTemplate.doc.d.mts +11 -0
package/api/theme/themeTemplate.doc.mjs +64 -0
package/assets/docs/getting-started.doc.mjs +11 -1
package/assets/docs/theme.doc.dense.mjs +2 -2
package/assets/docs/theme.doc.mjs +26 -10
package/assets/docs/theme.doc.zh.mjs +1 -1
package/assets/docs/typography.doc.mjs +38 -0
package/assets/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleCustomContent.doc.mjs +13 -0
package/assets/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleCustomContent.tsx +55 -0
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/pages/ai-chat/page.tsx +18 -13
package/assets/templates/themes/butter/butterTheme.ts +4 -1
package/assets/templates/themes/chocolate/chocolateTheme.ts +4 -1
package/assets/templates/themes/gothic/gothicTheme.ts +4 -1
package/assets/templates/themes/stone/stoneTheme.ts +4 -1
package/assets/theme.template.ts +322 -0
package/authoring/doctypes/base/type.ts +9 -1
package/authoring/doctypes/component/component.doc.mjs +1 -1
package/clients/cli/commands/build-theme.font-warning.test.mjs +138 -0
package/clients/cli/commands/build-theme.mjs +50 -0
package/clients/cli/commands/init.behavior.test.mjs +13 -2
package/clients/cli/commands/theme-template.behavior.test.mjs +85 -0
package/clients/cli/commands/theme-template.doc.mjs +42 -0
package/clients/cli/commands/theme.doc.mjs +2 -2
package/clients/cli/index.mjs +1 -0
package/clients/cli/lib/manifest.mjs +2 -0
package/foundation/agent-docs/agent-docs.mjs +1 -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 +5 -0
package/foundation/text/copyright-header.d.mts +11 -0
package/foundation/text/copyright-header.mjs +35 -0
package/foundation/text/copyright-header.test.mjs +58 -0
package/package.json +9 -9

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

@@ -8,7 +8,7 @@ export const docsZh = {
     { section: 'Quick Start', title: '快速开始', content: [null, null, null, null, { type: 'prose', text: '默认导入使用运行时样式注入。/built 导入使用预编译 CSS（需配合 theme.css）。' }] },
     { 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: '使用 CLI 向导（推荐）或手动 defineTheme。只覆盖与默认值不同的令牌。' }, 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: '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] },

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

@@ -44,6 +44,44 @@ export const docs = {
       ],
     },
+    // ── Loading Custom Fonts ────────────────────────────────────────────────
+    {
+      title: 'Loading Custom Fonts',
+  category: 'foundations',
+      content: [
+        {
+          type: 'prose',
+          text: 'Astryx never loads font files. defineTheme and the built CSS only set font-family — naming a webfont (Fraunces, JetBrains Mono, …) makes every browser look for it, and quietly fall back when the app has not loaded it. `astryx theme build` warns when a theme names families that are neither CSS generics nor common system fonts and prints the snippet to add; loading the font is always the app\'s job.',
+        },
+        {
+          type: 'code',
+          lang: 'html',
+          label: 'Google Fonts — add to your document <head>',
+          code: `<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=Fraunces:wght@400;600;700&family=JetBrains+Mono&display=swap"
+/>`,
+        },
+        {
+          type: 'code',
+          lang: 'css',
+          label: 'Self-hosted — one @font-face per family and weight',
+          code: `@font-face {
+  font-family: 'Fraunces';
+  src: url('/fonts/fraunces.woff2') format('woff2');
+  font-weight: 400 700; /* variable-font range, or one weight per file */
+  font-display: swap; /* fallback text stays visible while the font loads */
+}`,
+        },
+        {
+          type: 'prose',
+          text: "Always pair a webfont with a real fallback stack — metric-similar system fonts plus a generic — so text stays readable before the font loads and wherever it never does: defineTheme({typography: {heading: {family: 'Fraunces', fallbacks: 'Georgia, serif'}}}).",
+        },
+      ],
+    },
     // ── Font Sizes ──────────────────────────────────────────────────────────
     {
       title: 'Font Sizes',

package/assets/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleCustomContent.doc.mjs ADDED Viewed

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ChatMessageBubble',
+  name: 'ChatMessageBubble — Custom Content',
+  displayName: 'ChatMessageBubble — Custom Content',
+  description: 'Custom in-message content aligned to the bubble text column. An artifact card is wrapped in a ghost bubble with width="100%", so its left edge matches the bubble text and it spans the full message column instead of the default bubble width cap; the timestamp rides the bubble metadata slot.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Chat', 'ChatMessage', 'ChatMessageBubble', 'ChatMessageMetadata', 'ClickableCard', 'Text', 'Timestamp'],
+};

package/assets/templates/blocks/components/ChatMessageBubble/ChatMessageBubbleCustomContent.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+'use client';
+import {
+  ChatMessageList,
+  ChatMessage,
+  ChatMessageBubble,
+  ChatMessageMetadata,
+} from '@astryxdesign/core/Chat';
+import {ClickableCard} from '@astryxdesign/core/ClickableCard';
+import {Text} from '@astryxdesign/core/Text';
+import {Timestamp} from '@astryxdesign/core/Timestamp';
+export default function ChatMessageBubbleCustomContent() {
+  return (
+    <ChatMessageList style={{maxWidth: 520}}>
+      <ChatMessage sender="user">
+        <ChatMessageBubble>Can you pull up the Q3 report?</ChatMessageBubble>
+      </ChatMessage>
+      <ChatMessage sender="assistant">
+        <ChatMessageBubble name="Navi">
+          Sure, here is the artifact from last quarter.
+        </ChatMessageBubble>
+        {/* A ghost bubble aligns custom content with the bubble text column;
+            width="100%" spans the full message column instead of the default
+            bubble width cap. Metadata rides the bubble's metadata slot. */}
+        <ChatMessageBubble
+          variant="ghost"
+          width="100%"
+          metadata={
+            <ChatMessageMetadata
+              timestamp={
+                <Timestamp value="2026-04-28T09:45:00" format="time" />
+              }
+              footer={
+                <Text type="supporting" color="secondary">
+                  Claude Opus 4.6
+                </Text>
+              }
+            />
+          }>
+          <ClickableCard label="Open Q3 performance report" onClick={() => {}}>
+            <Text type="body" weight="semibold" display="block">
+              Q3 Performance Report
+            </Text>
+            <Text type="supporting" color="secondary" display="block">
+              12 pages · updated 2 days ago
+            </Text>
+          </ClickableCard>
+        </ChatMessageBubble>
+      </ChatMessage>
+    </ChatMessageList>
+  );
+}

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'],
+};

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

@@ -0,0 +1,188 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+'use client';
+import {useMemo, useState} from 'react';
+import {ComplexSelector} from '@astryxdesign/core/ComplexSelector';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {TreeList, type TreeListItemData} from '@astryxdesign/core/TreeList';
+import {Text} from '@astryxdesign/core/Text';
+import {VStack} from '@astryxdesign/core/Layout';
+interface DestinationNode {
+  id: string;
+  label: string;
+  path: string;
+  children?: DestinationNode[];
+}
+interface Destination {
+  id: string;
+  label: string;
+  path: string;
+}
+const destinationTree: DestinationNode[] = [
+  {
+    id: 'workspace',
+    label: 'Workspace',
+    path: '/Workspace',
+    children: [
+      {
+        id: 'research',
+        label: 'Research',
+        path: '/Workspace/Research',
+        children: [
+          {
+            id: 'field-notes',
+            label: 'Field notes',
+            path: '/Workspace/Research/Field notes',
+          },
+          {
+            id: 'interviews',
+            label: 'Interviews',
+            path: '/Workspace/Research/Interviews',
+          },
+        ],
+      },
+      {
+        id: 'roadmap',
+        label: 'Roadmap',
+        path: '/Workspace/Roadmap',
+      },
+    ],
+  },
+  {
+    id: 'teams',
+    label: 'Teams',
+    path: '/Teams',
+    children: [
+      {
+        id: 'design-systems',
+        label: 'Design systems',
+        path: '/Teams/Design systems',
+        children: [
+          {
+            id: 'accessibility',
+            label: 'Accessibility',
+            path: '/Teams/Design systems/Accessibility',
+          },
+        ],
+      },
+    ],
+  },
+];
+function matches(node: DestinationNode, query: string): boolean {
+  if (node.label.toLowerCase().includes(query)) {
+    return true;
+  }
+  return (node.children ?? []).some(child => matches(child, query));
+}
+function filterTree(
+  nodes: DestinationNode[],
+  query: string,
+): DestinationNode[] {
+  if (!query) {
+    return nodes;
+  }
+  return nodes
+    .filter(node => matches(node, query))
+    .map(node => ({
+      ...node,
+      children: node.children ? filterTree(node.children, query) : undefined,
+    }));
+}
+function toItems(
+  nodes: DestinationNode[],
+  selectedId: string,
+  onSelect: (value: Destination) => void,
+): TreeListItemData[] {
+  return nodes.map(node => {
+    const hasChildren = (node.children ?? []).length > 0;
+    return {
+      id: node.id,
+      label: node.label,
+      isSelected: node.id === selectedId,
+      isExpanded: true,
+      onClick: hasChildren
+        ? undefined
+        : () => onSelect({id: node.id, label: node.label, path: node.path}),
+      children: hasChildren
+        ? toItems(node.children ?? [], selectedId, onSelect)
+        : undefined,
+    };
+  });
+}
+function DestinationSearch({
+  value,
+  onChange,
+  close,
+}: {
+  value: Destination;
+  onChange: (value: Destination) => void;
+  close: () => void;
+}) {
+  const [query, setQuery] = useState('');
+  const items = useMemo(
+    () =>
+      toItems(
+        filterTree(destinationTree, query.toLowerCase()),
+        value.id,
+        next => {
+          onChange(next);
+          close();
+        },
+      ),
+    [query, value.id, onChange, close],
+  );
+  return (
+    <VStack gap={3} style={{width: 360}}>
+      <TextInput
+        label="Search destinations"
+        isLabelHidden
+        value={query}
+        onChange={setQuery}
+        hasClear
+        placeholder="Search folders or teams"
+      />
+      {items.length > 0 ? (
+        <TreeList items={items} density="compact" />
+      ) : (
+        <Text type="supporting" color="secondary">
+          No matching destinations.
+        </Text>
+      )}
+    </VStack>
+  );
+}
+export default function ComplexSelectorTreeSearch() {
+  const [value, setValue] = useState<Destination>({
+    id: 'accessibility',
+    label: 'Accessibility',
+    path: '/Teams/Design systems/Accessibility',
+  });
+  return (
+    <ComplexSelector<Destination>
+      label="Destination"
+      description="Search and browse nested folders."
+      value={value}
+      onChange={setValue}
+      triggerLabel={value.path}
+      style={{width: 360}}>
+      {(selectedValue, onChange, close) => (
+        <DestinationSearch
+          value={selectedValue}
+          onChange={onChange}
+          close={close}
+        />
+      )}
+    </ComplexSelector>
+  );
+}