@astryxdesign/cli 0.6.3-canary.db4e378 → 0.6.3-canary.dea6813

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.6.3-canary.db4e378",
+  "version": "0.6.3-canary.dea6813",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -100,10 +100,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.6.3-canary.db4e378",
-    "@astryxdesign/core": "0.6.3-canary.db4e378",
-    "@astryxdesign/lab": "0.6.3-canary.db4e378",
-    "@astryxdesign/theme-neutral": "0.6.3-canary.db4e378"
+    "@astryxdesign/charts": "0.6.3-canary.dea6813",
+    "@astryxdesign/core": "0.6.3-canary.dea6813",
+    "@astryxdesign/lab": "0.6.3-canary.dea6813",
+    "@astryxdesign/theme-neutral": "0.6.3-canary.dea6813"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/charts": {
@@ -120,10 +120,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.6.3-canary.db4e378",
-    "@astryxdesign/core": "0.6.3-canary.db4e378",
-    "@astryxdesign/lab": "0.6.3-canary.db4e378",
-    "@astryxdesign/theme-neutral": "0.6.3-canary.db4e378",
+    "@astryxdesign/charts": "0.6.3-canary.dea6813",
+    "@astryxdesign/core": "0.6.3-canary.dea6813",
+    "@astryxdesign/lab": "0.6.3-canary.dea6813",
+    "@astryxdesign/theme-neutral": "0.6.3-canary.dea6813",
     "@heroicons/react": "^2.2.0",
     "@stylexjs/stylex": "^0.19.0",
     "@types/babel__core": "^7.20.5",

package/assets/codemods/transform-prop.mjs

@@ -1,109 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * Find imported components, resolve their local JSX names (including aliases),
- * and yield matching JSX prop paths to a visitor.
- *
- * This helper intentionally stops at the JSX boundary. It does not follow
- * variables, helper calls, object spreads, wrapper components, or types.
- *
- * @param {any} root jscodeshift collection for one source file
- * @param {any} j configured jscodeshift instance
- * @param {{
- *   matchesImport: (source: string) => boolean,
- *   components: ReadonlyMap<string, ReadonlySet<string>>,
- *   normalizeComponentName?: (name: string) => string,
- * }} options
- * @param {(propPath: any, context: {component: string, localName: string}) => void} visit
- */
-export function transformProp(root, j, options, visit) {
-  const normalize = options.normalizeComponentName ?? (name => name);
-  /** @type {Map<string, {component: string, props: ReadonlySet<string>}>} */
-  const directBindings = new Map();
-  /** @type {Set<string>} */
-  const namespaceBindings = new Set();
-
-  root.find(j.ImportDeclaration).forEach((/** @type {any} */ importPath) => {
-    const source = importPath.node.source.value;
-    if (
-      importPath.node.importKind === 'type' ||
-      typeof source !== 'string' ||
-      !options.matchesImport(source)
-    ) {
-      return;
-    }
-
-    const subpathName = normalize(source.split('/').at(-1) ?? '');
-    const subpathProps = options.components.get(subpathName);
-
-    for (const specifier of importPath.node.specifiers ?? []) {
-      if (specifier.importKind === 'type') continue;
-
-      if (specifier.type === 'ImportSpecifier') {
-        const importedName =
-          specifier.imported?.name ?? specifier.imported?.value;
-        if (typeof importedName !== 'string') continue;
-        const component = normalize(importedName);
-        const props = options.components.get(component);
-        if (!props) continue;
-        directBindings.set(specifier.local?.name ?? importedName, {
-          component,
-          props,
-        });
-      } else if (specifier.type === 'ImportDefaultSpecifier' && subpathProps) {
-        directBindings.set(specifier.local.name, {
-          component: subpathName,
-          props: subpathProps,
-        });
-      } else if (specifier.type === 'ImportNamespaceSpecifier') {
-        namespaceBindings.add(specifier.local.name);
-      }
-    }
-  });
-
-  if (directBindings.size === 0 && namespaceBindings.size === 0) return;
-
-  root.find(j.JSXOpeningElement).forEach((/** @type {any} */ jsxPath) => {
-    const name = jsxPath.node.name;
-    let localName;
-    let component;
-    let props;
-
-    if (name.type === 'JSXIdentifier') {
-      localName = name.name;
-      const binding = directBindings.get(localName);
-      if (!binding) return;
-      ({component, props} = binding);
-    } else if (
-      name.type === 'JSXMemberExpression' &&
-      name.object?.type === 'JSXIdentifier' &&
-      name.property?.type === 'JSXIdentifier' &&
-      namespaceBindings.has(name.object.name)
-    ) {
-      localName = name.object.name;
-      component = normalize(name.property.name);
-      props = options.components.get(component);
-      if (!props) return;
-    } else {
-      return;
-    }
-
-    // A parameter or local declaration with the imported name shadows the
-    // module binding. Only JSX tags whose root binding resolves to Program are
-    // considered usages of the import discovered above.
-    const bindingScope = jsxPath.scope.lookup(localName);
-    if (!bindingScope || bindingScope.path.node.type !== 'Program') return;
-
-    for (let index = 0; index < jsxPath.node.attributes.length; index++) {
-      const attribute = jsxPath.node.attributes[index];
-      if (
-        attribute.type !== 'JSXAttribute' ||
-        attribute.name?.type !== 'JSXIdentifier' ||
-        !props.has(attribute.name.name)
-      ) {
-        continue;
-      }
-      visit(jsxPath.get('attributes', index), {component, localName});
-    }
-  });
-}

package/assets/codemods/transform-prop.test.mjs

@@ -1,95 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, expect, it} from 'vitest';
-import jscodeshift from 'jscodeshift';
-import {transformProp} from './transform-prop.mjs';
-
-const j = jscodeshift.withParser('tsx');
-const components = new Map([
-  ['Widget', new Set(['tone'])],
-  ['Group', new Set(['size'])],
-]);
-
-function apply(source) {
-  const root = j(source);
-  transformProp(
-    root,
-    j,
-    {
-      matchesImport: value => /^@example\/core(?:\/|$)/.test(value),
-      components,
-      normalizeComponentName: name =>
-        name.startsWith('XDS') ? name.slice(3) : name,
-    },
-    propPath => {
-      propPath.node.name.name = `migrated${propPath.node.name.name}`;
-    },
-  );
-  return root.toSource({quote: 'single'});
-}
-
-describe('transformProp', () => {
-  it('maps named import aliases to their JSX usages', () => {
-    const output = apply(`import {Widget as Card} from '@example/core';
-const view = <Card tone="old" other="old" />;`);
-
-    expect(output).toContain('<Card migratedtone="old" other="old"');
-  });
-
-  it('maps default subpath imports', () => {
-    const output = apply(`import Card from '@example/core/Widget';
-const view = <Card tone="old" />;`);
-
-    expect(output).toContain('<Card migratedtone="old"');
-  });
-
-  it('ignores declaration-level type imports', () => {
-    const output = apply(`import type {Widget} from '@example/core';
-const Widget = props => <div {...props} />;
-const view = <Widget tone="old" />;`);
-
-    expect(output).toContain('<Widget tone="old"');
-    expect(output).not.toContain('migratedtone');
-  });
-
-  it('ignores type specifiers in mixed imports', () => {
-    const output = apply(`import {type Widget, Group} from '@example/core';
-const Widget = props => <div {...props} />;
-const view = <><Widget tone="old" /><Group size="old" /></>;`);
-
-    expect(output).toContain('<Widget tone="old"');
-    expect(output).toContain('<Group migratedsize="old"');
-    expect(output).not.toContain('<Widget migratedtone');
-  });
-
-  it('maps namespace imports', () => {
-    const output = apply(`import * as Core from '@example/core';
-const view = <Core.Group size="old" />;`);
-
-    expect(output).toContain('<Core.Group migratedsize="old"');
-  });
-
-  it('ignores same-named imports from other packages', () => {
-    const source = `import {Widget} from '@other/core';
-const view = <Widget tone="old" />;`;
-    expect(apply(source)).toBe(source);
-  });
-
-  it('ignores a local binding that shadows an imported alias', () => {
-    const output = apply(`import {Widget as Card} from '@example/core';
-const migrated = <Card tone="old" />;
-function Local(Card) { return <Card tone="local" />; }`);
-
-    expect(output).toContain('<Card migratedtone="old"');
-    expect(output).toContain('<Card tone="local"');
-  });
-
-  it('yields only configured props on configured components', () => {
-    const output = apply(`import {Widget, Group} from '@example/core';
-const a = <Widget size="old" tone="old" />;
-const b = <Group tone="old" size="old" />;`);
-
-    expect(output).toContain('<Widget size="old" migratedtone="old"');
-    expect(output).toContain('<Group tone="old" migratedsize="old"');
-  });
-});

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

@@ -1,14 +0,0 @@
-// 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

@@ -1,61 +0,0 @@
-// 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

@@ -1,14 +0,0 @@
-// 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'],
-};

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

@@ -1,126 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import * as stylex from '@stylexjs/stylex';
-import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
-import {Card} from '@astryxdesign/core/Card';
-import {Grid} from '@astryxdesign/core/Grid';
-import {VStack} from '@astryxdesign/core/Layout';
-import {Heading, Text} from '@astryxdesign/core/Text';
-import {
-  borderVars,
-  colorVars,
-  radiusVars,
-} from '@astryxdesign/core/theme/tokens.stylex';
-
-const styles = stylex.create({
-  // A hairline frame so the nested viewport's edge — the edge the gesture
-  // meets — is visible.
-  sectionFrame: {
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderColor: colorVars['--color-border'],
-    borderRadius: radiusVars['--radius-element'],
-  },
-});
-
-const SHARED = [
-  {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
-  {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
-  {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
-  {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
-  {id: 'tax', title: 'Tax region notes', meta: 'Hugo Bernard'},
-  {id: 'sso', title: 'SSO rollout plan', meta: 'Sofia Marchetti'},
-];
-
-const ARCHIVED = [
-  {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
-  {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
-  {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
-  {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
-  {id: 'survey', title: 'Q4 survey results', meta: 'Archived in January'},
-  {id: 'offsite', title: 'Offsite agenda', meta: 'Archived last year'},
-];
-
-function FileGrid({
-  files,
-}: {
-  files: Array<{id: string; title: string; meta: string}>;
-}) {
-  return (
-    <Grid columns={2} gap={2}>
-      {files.map(file => (
-        <Card key={file.id} variant="muted" padding={3}>
-          <VStack gap={1}>
-            <Text weight="medium" maxLines={1}>
-              {file.title}
-            </Text>
-            <Text type="supporting" maxLines={1}>
-              {file.meta}
-            </Text>
-          </VStack>
-        </Card>
-      ))}
-    </Grid>
-  );
-}
-
-export default function ScrollableAreaOverscrollChaining() {
-  return (
-    <Card width={400} padding={0}>
-      <ScrollableArea
-        axis="block"
-        role="region"
-        label="Workspace files"
-        height={300}
-        padding={4}>
-        <VStack gap={4}>
-          <VStack gap={0.5}>
-            <Heading level={3}>Workspace files</Heading>
-            <Text type="supporting">Two sections, two edge policies</Text>
-          </VStack>
-
-          <VStack gap={2}>
-            <Text type="label" color="secondary">
-              Shared with you
-            </Text>
-            {/* Default overscroll="allow": a gesture that reaches this
-                section's end carries on scrolling the panel behind it. */}
-            <ScrollableArea
-              axis="block"
-              label="Shared with you"
-              height={150}
-              padding={2}
-              xstyle={styles.sectionFrame}>
-              <FileGrid files={SHARED} />
-            </ScrollableArea>
-            <Text type="supporting">
-              Scroll past the end and the panel keeps going.
-            </Text>
-          </VStack>
-
-          <VStack gap={2}>
-            <Text type="label" color="secondary">
-              Archived
-            </Text>
-            {/* overscroll="contain" stops the gesture at this section's
-                edge, so the panel behind it stays put. */}
-            <ScrollableArea
-              axis="block"
-              label="Archived"
-              overscroll="contain"
-              height={150}
-              padding={2}
-              xstyle={styles.sectionFrame}>
-              <FileGrid files={ARCHIVED} />
-            </ScrollableArea>
-            <Text type="supporting">
-              Scroll past the end and the panel stays where it is.
-            </Text>
-          </VStack>
-        </VStack>
-      </ScrollableArea>
-    </Card>
-  );
-}

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

@@ -1,15 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'ScrollableArea',
-  name: 'ScrollableArea',
-  displayName: 'Scrollable Area',
-  description:
-    'A fixed-height file panel that scrolls on the block axis; the heading sits inside the viewport, so it scrolls away with the content.',
-  isReady: true,
-  aspectRatio: 1,
-  isShowcase: true,
-  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
-};

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

@@ -1,86 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
-import {Card} from '@astryxdesign/core/Card';
-import {Grid} from '@astryxdesign/core/Grid';
-import {VStack} from '@astryxdesign/core/Layout';
-import {Heading, Text} from '@astryxdesign/core/Text';
-
-const SECTIONS = [
-  {
-    label: 'Recently opened',
-    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'},
-    ],
-  },
-  {
-    label: 'Shared with you',
-    files: [
-      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
-      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
-      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
-      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
-    ],
-  },
-  {
-    label: 'Archived',
-    files: [
-      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
-      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
-      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
-      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
-    ],
-  },
-];
-
-export default function ScrollableAreaShowcase() {
-  return (
-    <Card width={380} padding={0}>
-      {/* The heading sits inside the viewport, so it scrolls away with the
-          content instead of staying pinned above it. */}
-      <ScrollableArea
-        axis="block"
-        role="region"
-        label="Workspace files"
-        height={300}
-        padding={4}>
-        <VStack gap={4}>
-          <VStack gap={0.5}>
-            <Heading level={3}>Workspace files</Heading>
-            <Text type="supporting">12 files across 3 sections</Text>
-          </VStack>
-          {SECTIONS.map(section => (
-            <VStack key={section.label} gap={2}>
-              <Text type="label" color="secondary">
-                {section.label}
-              </Text>
-              <Grid columns={2} gap={2}>
-                {section.files.map(file => (
-                  <Card key={file.id} variant="muted" padding={3}>
-                    <VStack gap={1}>
-                      <Text weight="medium" maxLines={1}>
-                        {file.title}
-                      </Text>
-                      <Text type="supporting" maxLines={1}>
-                        {file.meta}
-                      </Text>
-                    </VStack>
-                  </Card>
-                ))}
-              </Grid>
-            </VStack>
-          ))}
-        </VStack>
-      </ScrollableArea>
-    </Card>
-  );
-}

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

@@ -1,14 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
-export const doc = {
-  type: 'block',
-  exampleFor: 'ScrollableArea',
-  name: 'ScrollableArea — Sticky Section Labels',
-  displayName: 'Scrollable Area — Sticky Section Labels',
-  description:
-    'A scrollable viewport is the containing block for position: sticky, so section labels pin to the top edge of the list instead of the page.',
-  isReady: true,
-  aspectRatio: 1,
-  componentsUsed: ['ScrollableArea', 'Card', 'Grid'],
-};

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

@@ -1,99 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-import * as stylex from '@stylexjs/stylex';
-import {ScrollableArea} from '@astryxdesign/core/ScrollableArea';
-import {Card} from '@astryxdesign/core/Card';
-import {Grid} from '@astryxdesign/core/Grid';
-import {VStack} from '@astryxdesign/core/Layout';
-import {Heading, Text} from '@astryxdesign/core/Text';
-import {colorVars, spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
-
-const styles = stylex.create({
-  sectionLabel: {
-    position: 'sticky',
-    insetBlockStart: 0,
-    zIndex: 1,
-    backgroundColor: colorVars['--color-background-card'],
-    paddingBlock: spacingVars['--spacing-2'],
-  },
-});
-
-const SECTIONS = [
-  {
-    label: 'Recently opened',
-    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'},
-    ],
-  },
-  {
-    label: 'Shared with you',
-    files: [
-      {id: 'brand', title: 'Brand refresh', meta: 'Priya Raman'},
-      {id: 'checkout', title: 'Checkout audit', meta: 'Tomas Lindqvist'},
-      {id: 'partner', title: 'Partner deck', meta: 'Ines Okafor'},
-      {id: 'research', title: 'Research synthesis', meta: 'Mei Watanabe'},
-    ],
-  },
-  {
-    label: 'Archived',
-    files: [
-      {id: 'roadmap', title: '2025 roadmap', meta: 'Archived in March'},
-      {id: 'legacy', title: 'Legacy pricing', meta: 'Archived in March'},
-      {id: 'kit', title: 'Old brand kit', meta: 'Archived in January'},
-      {id: 'beta', title: 'Beta feedback', meta: 'Archived in January'},
-    ],
-  },
-];
-
-export default function ScrollableAreaStickyGroupHeaders() {
-  return (
-    <Card width={380} padding={0}>
-      {/* The viewport is the containing block for position: sticky. The panel
-          heading is ordinary content and scrolls away; the section labels
-          below it pin to the top of the list, not the page. */}
-      <ScrollableArea
-        axis="block"
-        role="region"
-        label="Workspace files"
-        height={300}
-        padding={4}>
-        <VStack gap={0.5} paddingBlockEnd={2}>
-          <Heading level={3}>Workspace files</Heading>
-          <Text type="supporting">12 files across 3 sections</Text>
-        </VStack>
-        {SECTIONS.map(section => (
-          <section key={section.label}>
-            <div {...stylex.props(styles.sectionLabel)}>
-              <Text type="label" color="secondary">
-                {section.label}
-              </Text>
-            </div>
-            <Grid columns={2} gap={2}>
-              {section.files.map(file => (
-                <Card key={file.id} variant="muted" padding={3}>
-                  <VStack gap={1}>
-                    <Text weight="medium" maxLines={1}>
-                      {file.title}
-                    </Text>
-                    <Text type="supporting" maxLines={1}>
-                      {file.meta}
-                    </Text>
-                  </VStack>
-                </Card>
-              ))}
-            </Grid>
-          </section>
-        ))}
-      </ScrollableArea>
-    </Card>
-  );
-}