@astryxdesign/cli 0.6.3 → 0.6.4-canary.06c8fa3

package/assets/docs/tree/writing-docs.doc.mjs

@@ -0,0 +1,286 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file `astryx docs cli/writing-docs`: the guide to writing docs that readers,
+ * people and agents alike, find by search or by moving one level at a time.
+ * It lives in the docs tree under the `cli` namespace, so its only route is
+ * `cli/writing-docs`.
+ */
+
+/** @type {import('@astryxdesign/cli/authoring').ReferenceDoc} */
+export const docs = {
+  type: 'generic',
+  name: 'writing-docs',
+  placement: {parent: 'namespace:cli', slot: 'guides', order: 20},
+  title: 'Writing docs',
+  category: 'guide',
+  description:
+    'Write docs that people and agents find by search or by reading one level at a time.',
+
+  sections: [
+    {
+      title: 'How the docs work',
+      category: 'guide',
+      content: [
+        {
+          type: 'prose',
+          text: 'Every doc is one node in one docs graph, with a stable identity and one home in a tree.',
+        },
+        {
+          type: 'list',
+          style: 'unordered',
+          items: [
+            "Identity: the doc's provider, its kind, and its name. Moving a doc never changes it.",
+            'Route: the names of the doc and its parents, such as `cli/api/functions/search`; `astryx docs <route>` reads it.',
+            'Moves: every read ends with Up, Previous, Next, and Related, each as a command you can run.',
+            'Search: a hit is the smallest part that answers, one section or one tree page. It gives the command that reads it and the command that opens the level above.',
+          ],
+        },
+        {
+          type: 'prose',
+          text: "You never write moves or lists of children. The CLI derives them from each doc's home and its typed links.",
+        },
+      ],
+    },
+    {
+      title: 'Add a doc',
+      category: 'guide',
+      content: [
+        {
+          type: 'prose',
+          text: 'To add a doc, write one `.doc.mjs` file named after the doc, and stamp the type that matches what it describes.',
+        },
+        {
+          type: 'table',
+          headers: ['You document', 'Doc type', '`type`'],
+          rows: [
+            ['A topic or a guide', 'ReferenceDoc', "'generic'"],
+            ['A CLI command', 'CommandDoc', "'command'"],
+            ['A CLI API function', 'FunctionDoc', "'function'"],
+            ['An object shape', 'SchemaDoc', "'schema'"],
+            ['A fixed list of values', 'EnumDoc', "'enum'"],
+            ['A component', 'ComponentDoc', "'component'"],
+            ['A level of the tree', 'NamespaceDoc', "'namespace'"],
+          ],
+        },
+        {
+          type: 'prose',
+          text: 'A topic or guide holds `sections`. Each section has a `title` and `content` blocks, and covers one idea. The `description` is one sentence that says what the doc covers.',
+        },
+        {
+          type: 'code',
+          lang: 'javascript',
+          label: 'docs/deploying.doc.mjs',
+          code: "export default {\n  type: 'generic',\n  name: 'deploying',\n  title: 'Deploying',\n  description: 'Ship an app built with Acme widgets.',\n  sections: [\n    {\n      title: 'Build before you ship',\n      content: [\n        {type: 'prose', text: 'Build the app, then check it with {@link @astryxdesign/cli:command:doctor}.'},\n        {type: 'code', lang: 'bash', code: 'npm run build'},\n        {type: 'list', style: 'unordered', items: ['Check the output folder.']},\n        {type: 'table', headers: ['Env', 'Value'], rows: [['NODE_ENV', 'production']]},\n      ],\n    },\n  ],\n};",
+        },
+        {
+          type: 'list',
+          style: 'unordered',
+          items: [
+            'A name is a command argument, so use only letters, digits, `_`, and `-`. Use lowercase kebab-case, such as `writing-docs`, so the name and its route segment match.',
+            'Keep the name stable. Links name a doc by its identity, and the name is part of it.',
+            'A name that collides with an existing topic is an error unless the doc declares `replaces` or `extends`.',
+            'Name the cases a doc does not cover, and link to where they are covered. A reader cannot tell a case you left out from a case that does not exist.',
+          ],
+        },
+        {
+          type: 'prose',
+          text: 'Every field of every doc type is in {@link generic:authoring}.',
+        },
+      ],
+    },
+    {
+      title: 'Place a doc',
+      category: 'guide',
+      content: [
+        {
+          type: 'prose',
+          text: 'Each doc gets one home in one of three ways: a namespace adopts it, it places itself, or it stays a flat topic. Folders never decide a home.',
+        },
+        {
+          type: 'prose',
+          text: "Adopted: a CLI typed doc declares `namespace`, either `'cli/commands'` or `'cli/api'`. That namespace adopts it by kind, so its route is `cli/commands/<name>` or `cli/api/functions/<name>`.",
+        },
+        {
+          type: 'code',
+          lang: 'javascript',
+          code: "{type: 'function', name: 'search', namespace: 'cli/api' /* ... */} // cli/api/functions/search",
+        },
+        {
+          type: 'prose',
+          text: "Placed: a guide declares `placement`. The `parent` names a namespace of your own package, the `slot` is one that namespace declares for the doc's kind, and `order` sorts the siblings in the slot. A placement that fails withdraws the doc with an error.",
+        },
+        {
+          type: 'code',
+          lang: 'javascript',
+          code: "placement: {parent: 'namespace:cli', slot: 'guides', order: 20}, // cli/writing-docs",
+        },
+        {
+          type: 'prose',
+          text: 'Flat: a doc with neither is a flat topic, read with `astryx docs <name>`.',
+        },
+        {
+          type: 'code',
+          lang: 'javascript',
+          code: "{type: 'generic', name: 'tokens', title: 'All Tokens' /* ... */} // astryx docs tokens",
+        },
+      ],
+    },
+    {
+      title: 'Link docs',
+      category: 'guide',
+      content: [
+        {
+          type: 'prose',
+          text: 'Link a doc with `{@link <target>}` or a typed field, never by writing its `astryx docs` route in prose: a route you write goes stale when the doc moves. Other commands, such as `astryx doctor`, you write as they are.',
+        },
+        {
+          type: 'prose',
+          text: "Typed fields: a FunctionDoc's `command` names the CLI command that runs it, and its `related` names functions. A CommandDoc's `fn` names the function it runs, and its `related` names commands.",
+        },
+        {
+          type: 'code',
+          lang: 'javascript',
+          code: "{type: 'function', name: 'search', command: 'search', related: ['docs']}\n{type: 'command', name: 'search', fn: 'search', related: ['docs']}",
+        },
+        {
+          type: 'prose',
+          text: "Inside a section's text, write `{@link <target>}`, where the target is `[<provider>:]<kind>:<name>`; leave out the provider for a doc of your own provider. The CLI prints the command that opens the doc. It works in prose, list items, and table cells; link syntax inside code ticks is shown as written, and an older CLI prints the link as plain text. A namespace doc can also carry `reference` and `workflow` blocks in its `blocks`, though the CLI does not print them yet; a topic's sections cannot hold them.",
+        },
+        {
+          type: 'code',
+          lang: 'javascript',
+          code: "{type: 'prose', text: 'Check it with {@link command:doctor}.'}\n{type: 'list', style: 'unordered', items: ['Search with {@link @astryxdesign/cli:function:search}.']}\n\n// In a namespace doc's blocks only:\n{type: 'workflow', steps: [\n  {title: 'Write the doc', references: ['generic:authoring']},\n  {title: 'Check it', references: ['command:doctor']},\n]}",
+        },
+        {
+          type: 'prose',
+          text: "The route in the printed command is derived when the doc is read, so a link follows its doc when the doc moves. A target that names no doc prints as written, and so does a typed-field name that matches more than one doc; `astryx doctor` warns on both.",
+        },
+      ],
+    },
+    {
+      title: 'Keep reads short',
+      category: 'guide',
+      content: [
+        {
+          type: 'prose',
+          text: 'Keep every read short so a reader gets one answer per command: one idea per section, a summary first, and a hard size limit.',
+        },
+        {
+          type: 'list',
+          style: 'unordered',
+          items: [
+            'Give each section one idea. If it needs a second topic, split it into two sections.',
+            "A section's summary, shown in the section list and in search, is its first prose block or first list item, cut at 240 characters. Lead with what the section answers.",
+            'In text, a topic with more than one section reads as its section list. The reader opens one section, or prints everything with `--full`. With `--json`, a topic returns the whole doc and `--index` its section list.',
+            'Every read should fit in 32 KB; `astryx doctor` warns on one that does not. Aim for sections under about 30 lines.',
+          ],
+        },
+        {
+          type: 'code',
+          lang: 'bash',
+          code: 'astryx docs cli/writing-docs\nastryx docs cli/writing-docs keep-reads-short\nastryx docs cli/writing-docs --full',
+        },
+      ],
+    },
+    {
+      title: 'Make docs findable',
+      category: 'guide',
+      content: [
+        {
+          type: 'prose',
+          text: 'Search finds a doc only by the words it indexes, so put the words a reader types where search looks.',
+        },
+        {
+          type: 'prose',
+          text: "Search matches titles, section titles, headings, each section's summary, and identifiers written in code ticks, such as `ERR_UNKNOWN_SECTION` or `token-ref`. It also matches a doc's own name and the `keywords` of a namespace or typed doc.",
+        },
+        {
+          type: 'list',
+          style: 'do',
+          items: [
+            'Title a section with the task or question, such as "Place a doc".',
+            'Start each section with a sentence that names its subject and answers it.',
+            'Write exact identifiers in code ticks: field names, block types, and error codes.',
+            'Add `keywords` only for words that are not already in the title or summary.',
+          ],
+        },
+        {
+          type: 'list',
+          style: 'dont',
+          items: [
+            'Open a section with background. Its first block is its summary.',
+            'Use vague titles such as "Overview" or "Details" when a specific one fits.',
+          ],
+        },
+        {
+          type: 'prose',
+          text: 'Test it the way a new reader arrives: search for the question, not the title, and check that the first hit answers it.',
+        },
+        {
+          type: 'code',
+          lang: 'bash',
+          code: 'astryx search placement --type doc',
+        },
+      ],
+    },
+    {
+      title: 'Docs from an integration',
+      category: 'guide',
+      content: [
+        {
+          type: 'prose',
+          text: 'An integration joins the same graph with a namespace doc in its docs directory and guides placed in it. The namespace shows in `astryx docs` beside `cli`, with the same moves, search, and links. You can place a doc only in a namespace of your own package.',
+        },
+        {
+          type: 'prose',
+          text: 'Let the CLI write the files: inside the package, `astryx integration add doc deploying --parent acme` writes the guide with its placement, declares the docs root, and writes the `acme` namespace doc the first time. Run `astryx docs` in the package to see it.',
+        },
+        {
+          type: 'prose',
+          text: "A CLI release that does not read the docs tree can hide every doc topic your package ships when the package contains a namespace doc or a placed guide: none appear in `astryx docs`, in text or JSON, and `astryx doctor` may not say why. So `--parent` also declares the CLI release your docs need as an optional `@astryxdesign/cli` peer in package.json, which makes npm warn when an older CLI is installed, and `astryx integration pack --check` fails a package that ships either one without it.",
+        },
+        {
+          type: 'code',
+          lang: 'javascript',
+          code: "// docs/acme.doc.mjs\n/** @type {import('@astryxdesign/cli/authoring').NamespaceDoc} */\nexport default {\n  type: 'namespace', name: 'acme', title: 'Acme widgets',\n  summary: 'Guides for building apps with Acme widgets.',\n  slots: {guides: {title: 'Guides', accepts: {kinds: ['generic']}}},\n};\n\n// docs/deploying.doc.mjs (route: acme/deploying)\n/** @type {import('@astryxdesign/cli/authoring').ReferenceDoc} */\nexport default {\n  type: 'generic', name: 'deploying', title: 'Deploying',\n  description: 'Ship an app built with Acme widgets.',\n  placement: {parent: 'namespace:acme', slot: 'guides', order: 10},\n  sections: [{title: 'Check before you ship', content: [\n    {type: 'prose', text: 'Run {@link @astryxdesign/cli:command:doctor} before every deploy.'},\n  ]}],\n};",
+        },
+        {
+          type: 'prose',
+          text: "The link names the `@astryxdesign/cli` provider because its target lives in another package. A link without a provider resolves against yours: your manifest's `providerId`, or else your package name. That holds in a topic that `extends` another package's topic too: your sections link your docs, and a link to the other package's docs names its provider.",
+        },
+        {
+          type: 'prose',
+          text: 'Everything else an integration ships is in {@link generic:integrations}.',
+        },
+      ],
+    },
+    {
+      title: 'Check your docs',
+      category: 'guide',
+      content: [
+        {
+          type: 'prose',
+          text: 'Run the doctor commands to check every home, link, and read in your docs.',
+        },
+        {
+          type: 'list',
+          style: 'unordered',
+          items: [
+            '`astryx doctor`, in a project, checks the whole graph: the tree, the links, and the size of each read.',
+            '`astryx doctor integration docs`, inside an integration package, runs the same checks on that package\'s docs before it ships.',
+            '`astryx integration pack --check` fails a package that ships a namespace doc or a placed guide without a CLI peer that reads them.',
+          ],
+        },
+        {
+          type: 'prose',
+          text: 'No check can tell whether a doc is still true. Describe what the CLI does now, and change the doc in the same change that changes the behavior.',
+        },
+        {
+          type: 'prose',
+          text: 'A problem in the tree or a link is a warning: it names what to fix, but the exit code stays 0, so read the report (or its `--json`) before you ship.',
+        },
+      ],
+    },
+  ],
+};

package/assets/docs/working-with-ai.doc.mjs

@@ -66,14 +66,14 @@ npx @astryxdesign/cli init --features agents --agent muse      # AGENTS.md (Muse
           type: 'list',
           style: 'ordered',
           items: [
-            '`astryx template --list`: find a related page pattern to use as reference',
-            '`astryx template <name> --skeleton`: study the layout structure',
+            '`astryx build "<idea>"`: get the page template to start from (always one: the closest match, or the app shell), two other templates, and the blocks and components for the parts it lacks',
+            '`astryx template <name> <path>`: scaffold that template into the project, keep its frame and spacing, and replace its content',
             '`astryx component <Name>`: read props and examples for every component used',
           ],
         },
         {
           type: 'prose',
-          text: "It also includes rules that prevent common mistakes (no raw divs, no style={{}}, use tokens not magic values), a CLI quick reference, and package-labeled integration guidance when a configured manifest declares `agentDocs`. After setup, you shouldn't need to manually correct your AI on these conventions; the agent docs handle it at the system level.",
+          text: "It also includes rules that prevent common mistakes (start every page from a template, no raw divs, no style={{}}, use tokens not magic values), a CLI quick reference, and package-labeled integration guidance when a configured manifest declares `agentDocs`. After setup, you shouldn't need to manually correct your AI on these conventions; the agent docs handle it at the system level.",
         },
       ],
     },
@@ -182,7 +182,7 @@ astryx docs tokens --dense`,
           label: 'MCP config (same for all tools)',
           code: `{
   "mcpServers": {
-    "xds": {
+    "astryx": {
       "type": "url",
       "url": "https://astryx.atmeta.com/mcp"
     }

package/assets/templates/blocks/components/CheckboxList/CheckboxListSelectAllPattern.doc.mjs

@@ -10,5 +10,5 @@ export const doc = {
     'A "select all" toggle at the top of a checkbox list that switches to an indeterminate dash when only some items are checked, useful for bulk actions like exporting documents or assigning permissions where users often want everything at once.',
   isReady: true,
   aspectRatio: 16 / 9,
-  componentsUsed: ['CheckboxList', 'Divider'],
+  componentsUsed: ['CheckboxList'],
 };

package/assets/templates/blocks/components/CheckboxList/CheckboxListSelectAllPattern.tsx

@@ -4,7 +4,6 @@
 
 import {useState} from 'react';
 import {CheckboxList, CheckboxListItem} from '@astryxdesign/core/CheckboxList';
-import {Divider} from '@astryxdesign/core/Divider';
 
 const DOCUMENTS = [
   {id: 'transactions', label: 'Transaction history'},
@@ -27,7 +26,7 @@ export default function CheckboxListSelectAllPattern() {
       : ('indeterminate' as const);
 
   return (
-    <CheckboxList label="Include in export">
+    <CheckboxList label="Include in export" hasDividers>
       <CheckboxListItem
         label="Select all"
         isChecked={selectAllState}
@@ -35,7 +34,6 @@ export default function CheckboxListSelectAllPattern() {
           setSelected(checked ? [...ALL_IDS] : []);
         }}
       />
-      <Divider />
       {DOCUMENTS.map(doc => (
         <CheckboxListItem
           key={doc.id}

package/assets/templates/blocks/components/DateInput/DateInputDateRange.tsx

@@ -41,7 +41,7 @@ export default function DateInputDateRange() {
         max={max}
         description={description}
         placeholder="Select a booking date"
-        nativePicker="never"
+        presentation="adaptive-bottom-sheet"
         value={value}
         onChange={setValue}
       />

package/assets/templates/blocks/components/InternationalizationProvider/InternationalizationProvider01ShippedLocale.tsx

@@ -4,7 +4,7 @@
 
 import {useState} from 'react';
 import {InternationalizationProvider} from '@astryxdesign/core/i18n';
-import frFR from '@astryxdesign/core/locales/fr-FR.json';
+import frFR from '@astryxdesign/core/locales/fr-FR.generated.js';
 import {Stack} from '@astryxdesign/core/Layout';
 import {
   SegmentedControl,

package/assets/templates/blocks/components/Item/ItemDocumentTabs.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Item',
+  name: 'Item — Document Tabs',
+  displayName: 'Item — Document Tabs',
+  description:
+    'Single-row, horizontally scrollable document switcher with compact selected rows, leading file icons, instant reveal-on-hover close actions with reserved geometry, stable separators, and an add control outside the scroll area. Use for editor tabs, workspace tabs, open documents, files, canvases, or panels.',
+  isReady: true,
+  aspectRatio: 16 / 4,
+  componentsUsed: ['Item', 'Divider', 'Icon', 'IconButton', 'Layout'],
+};

package/assets/templates/blocks/components/Item/ItemDocumentTabs.tsx

@@ -0,0 +1,100 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Fragment} from 'react';
+import * as stylex from '@stylexjs/stylex';
+
+import {Divider} from '@astryxdesign/core/Divider';
+import {useContainerReveal} from '@astryxdesign/core/hooks';
+import {Icon} from '@astryxdesign/core/Icon';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Item} from '@astryxdesign/core/Item';
+import {HStack} from '@astryxdesign/core/Layout';
+import {mergeProps} from '@astryxdesign/core/utils';
+import {DocumentIcon, PlusIcon, XMarkIcon} from '@heroicons/react/24/outline';
+
+const TABS = [
+  {name: 'Project brief', isActive: true},
+  {name: 'Research notes', isActive: false},
+  {name: 'Interaction prototype', isActive: false},
+];
+
+const styles = stylex.create({
+  strip: {minWidth: 0, flexShrink: 1, scrollbarWidth: 'none'},
+  rule: {height: 16},
+  hidden: {visibility: 'hidden'},
+  tab: {flexShrink: 1, width: 164, minWidth: 96},
+  action: {margin: 'calc(-1 * var(--spacing-1))', transitionProperty: 'none'},
+});
+function DocumentTab({name, isActive}: (typeof TABS)[number]) {
+  const {getContainerProps, getContentRevealProps} = useContainerReveal();
+  const revealProps = getContentRevealProps({
+    forceVisibility: isActive ? 'shown' : undefined,
+    isLayoutPreserved: true,
+  });
+  return (
+    <Item
+      label={name}
+      density="compact"
+      isSelected={isActive}
+      onClick={() => {}}
+      aria-current={isActive ? 'true' : undefined}
+      {...getContainerProps()}
+      startContent={
+        <Icon
+          icon={DocumentIcon}
+          size="sm"
+          color={isActive ? 'primary' : 'secondary'}
+        />
+      }
+      endContent={
+        <IconButton
+          label={`Close ${name}`}
+          variant="ghost"
+          size="sm"
+          icon={<Icon icon={XMarkIcon} size="sm" />}
+          {...mergeProps(revealProps, stylex.props(styles.action))}
+        />
+      }
+      xstyle={styles.tab}
+    />
+  );
+}
+
+export default function ItemDocumentTabs() {
+  return (
+    <HStack width="100%" maxWidth={600} gap={0.5} vAlign="center">
+      <HStack
+        role="group"
+        aria-label="Open documents"
+        vAlign="center"
+        paddingInline={2}
+        paddingBlock={1}
+        isScrollable
+        xstyle={styles.strip}>
+        {TABS.map((tab, index) => (
+          <Fragment key={tab.name}>
+            {index > 0 ? (
+              <Divider
+                orientation="vertical"
+                xstyle={[
+                  styles.rule,
+                  (TABS[index - 1]?.isActive || tab.isActive) && styles.hidden,
+                ]}
+              />
+            ) : null}
+            <DocumentTab {...tab} />
+          </Fragment>
+        ))}
+      </HStack>
+      <IconButton
+        label="New document"
+        tooltip="New document"
+        variant="ghost"
+        size="sm"
+        icon={<Icon icon={PlusIcon} size="sm" color="secondary" />}
+      />
+    </HStack>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaInlineRail.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ScrollableArea',
+  name: 'ScrollableArea — Inline Rail',
+  displayName: 'Scrollable Area — Inline Rail',
+  description:
+    'axis="inline" scrolls the same cards sideways; isFullBleed lets the rail run to the panel edges while the content padding keeps the first card aligned with the heading.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['ScrollableArea', 'Card', 'Link'],
+};

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaInlineRail.tsx

@@ -0,0 +1,61 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
+import {Card} from '@astryxdesign/core/Card';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Heading, Text} from '@astryxdesign/core/Text';
+import {Link} from '@astryxdesign/core/Link';
+
+const FILES = [
+  {id: 'brief', title: 'Q3 launch brief', meta: 'Edited 2 days ago'},
+  {id: 'pricing', title: 'Pricing rework', meta: 'Edited 3 days ago'},
+  {id: 'onboarding', title: 'Onboarding flow v4', meta: 'Edited 4 days ago'},
+  {id: 'macros', title: 'Support macros', meta: 'Edited last week'},
+  {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
+  {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
+  {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
+];
+
+export default function ScrollableAreaInlineRail() {
+  return (
+    <Card width={460} padding={4}>
+      <VStack gap={3}>
+        <HStack hAlign="between" vAlign="center">
+          <VStack gap={0.5}>
+            <Heading level={3}>Workspace files</Heading>
+            <Text type="supporting">Recently opened</Text>
+          </VStack>
+          <Link href="#files">View all</Link>
+        </HStack>
+        {/* isFullBleed lets the rail reach the card's edges, while the content
+            padding keeps the first card aligned with the heading above it and
+            leaves room under the cards for the scrollbar. */}
+        <ScrollableArea
+          axis="inline"
+          role="region"
+          label="Recently opened files"
+          isFullBleed
+          paddingInline={4}
+          paddingBlockStart={0.5}
+          paddingBlockEnd={4}>
+          <HStack gap={2}>
+            {FILES.map(file => (
+              <Card key={file.id} variant="muted" padding={3} width={170}>
+                <VStack gap={1}>
+                  <Text weight="medium" maxLines={1}>
+                    {file.title}
+                  </Text>
+                  <Text type="supporting" maxLines={1}>
+                    {file.meta}
+                  </Text>
+                </VStack>
+              </Card>
+            ))}
+          </HStack>
+        </ScrollableArea>
+      </VStack>
+    </Card>
+  );
+}

package/assets/templates/blocks/components/ScrollableArea/ScrollableAreaOverscrollChaining.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'ScrollableArea',
+  name: 'ScrollableArea — Overscroll',
+  displayName: 'Scrollable Area — Overscroll',
+  description:
+    'The same section, two edge policies: the default overscroll="allow" hands a gesture that reaches the end to the panel behind it, while overscroll="contain" stops it at the section edge.',
+  isReady: true,
+  aspectRatio: 1,
+  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
+};