@astryxdesign/cli 0.1.5 → 0.1.6-canary.02f2602

package/src/schemas/template-schema.mjs

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Template load-boundary schemas.
+ *
+ * The Zod schemas that integration template discovery runs a module's default
+ * export through (see `loadModuleWithSchema`). Kept free of any
+ * `@astryxdesign/core` import so the hot path that loads them (template
+ * discovery, `astryx init`) does not require core's built `dist/`. The
+ * authoring factories live in `@astryxdesign/core/authoring` and are re-exported
+ * from `../template.mjs` for the public `@astryxdesign/cli/template` surface.
+ */
+
+import {z} from 'zod';
+
+const PreviewSchema = z
+  .object({
+    image: z.string().optional(),
+    aspectRatio: z.string().optional(),
+  })
+  .strict();
+
+/**
+ * Shared authored-template shape. `type` is injected by the create* helpers,
+ * so authors never write it. Inline source/sourceFile are intentionally NOT
+ * part of v1 — a template's source is the required same-stem sibling file.
+ * Exported so integration template discovery can validate the stamped result.
+ */
+export const BaseTemplateSchema = z
+  .object({
+    name: z.string().min(1, 'name is required'),
+    description: z.string().min(1, 'description is required'),
+    category: z.string().optional(),
+    componentsUsed: z.array(z.string()).optional(),
+    preview: PreviewSchema.optional(),
+  })
+  .strict();
+
+/**
+ * The metadata envelope integration template discovery validates: a stamped
+ * template doc. This is the LOAD-boundary contract — a hand-written plain
+ * object that matches this shape is accepted (discovery does not check "was it
+ * made by the factory", only the shape).
+ */
+export const TemplateEnvelopeSchema = BaseTemplateSchema.extend({
+  type: z.enum(['page', 'block']),
+});

package/src/template.mjs

@@ -1,73 +1,15 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * @file Static template authoring API.
+ * @file Static template authoring API (public `@astryxdesign/cli/template`).
  *
- * Helpers for authoring Astryx page/block template docs. Like
- * `createConfig`/`createIntegration`, these are tiny runtime identity helpers
- * whose real value is the exported TypeScript surface from
- * `@astryxdesign/cli/template`. They inject the discriminant `type` so a
- * discovered doc always knows whether it is a page or a block. They do NOT
- * validate — validation happens at the load boundary, where integration
- * template discovery runs the module's default export through
- * {@link TemplateEnvelopeSchema} (see `loadModuleWithSchema`).
+ * The `createPageTemplate`/`createBlockTemplate` authoring helpers now live in
+ * `@astryxdesign/core/authoring` and are re-exported here so existing
+ * `@astryxdesign/cli/template` imports keep working. The Zod load-boundary
+ * schemas live in `./schemas/template-schema.mjs` (core-free) and are
+ * re-exported here for back-compat; internal hot-path code imports them from
+ * the schema module directly so it never depends on core's built `dist/`.
  */
 
-import {z} from 'zod';
-
-const PreviewSchema = z
-  .object({
-    image: z.string().optional(),
-    aspectRatio: z.string().optional(),
-  })
-  .strict();
-
-/**
- * Shared authored-template shape. `type` is injected by the create* helpers,
- * so authors never write it. Inline source/sourceFile are intentionally NOT
- * part of v1 — a template's source is the required same-stem sibling file.
- * Exported so integration template discovery can validate the stamped result.
- */
-export const BaseTemplateSchema = z
-  .object({
-    name: z.string().min(1, 'name is required'),
-    description: z.string().min(1, 'description is required'),
-    category: z.string().optional(),
-    componentsUsed: z.array(z.string()).optional(),
-    preview: PreviewSchema.optional(),
-  })
-  .strict();
-
-/**
- * The metadata envelope integration template discovery validates: a stamped
- * template doc. This is the LOAD-boundary contract — a hand-written plain
- * object that matches this shape is accepted (discovery does not check "was it
- * made by the factory", only the shape).
- */
-export const TemplateEnvelopeSchema = BaseTemplateSchema.extend({
-  type: z.enum(['page', 'block']),
-});
-
-/**
- * Author an Astryx page template doc. Stamp-only: returns the def with
- * `type: 'page'` injected. Validation happens at the load boundary.
- *
- * @template {import('./types/template-api').AstryxPageTemplateInput} T
- * @param {T} def
- * @returns {T & {type: 'page'}}
- */
-export function createPageTemplate(def) {
-  return /** @type {T & {type: 'page'}} */ ({...def, type: 'page'});
-}
-
-/**
- * Author an Astryx block template doc. Stamp-only: returns the def with
- * `type: 'block'` injected. Validation happens at the load boundary.
- *
- * @template {import('./types/template-api').AstryxBlockTemplateInput} T
- * @param {T} def
- * @returns {T & {type: 'block'}}
- */
-export function createBlockTemplate(def) {
-  return /** @type {T & {type: 'block'}} */ ({...def, type: 'block'});
-}
+export {createPageTemplate, createBlockTemplate} from '@astryxdesign/core/authoring';
+export {BaseTemplateSchema, TemplateEnvelopeSchema} from './schemas/template-schema.mjs';

package/src/types/config.d.ts

@@ -1,70 +1,15 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * A command to run as part of a post-codemod hook. Returned by a hook's
- * `buildCommand` and executed via `execFile` after codemods write files.
+ * The config-authoring surface moved to `@astryxdesign/core/config` so an app's
+ * config file gets type feedback without depending on the CLI. Re-exported here
+ * so existing `@astryxdesign/cli/config` type imports keep resolving.
  */
-export interface PostCodemodCommand {
-  command: string;
-  args?: string[];
-  options?: {
-    cwd?: string;
-    env?: NodeJS.ProcessEnv;
-    timeout?: number;
-  };
-}
-
-/**
- * A post-codemod hook. `buildCommand` receives the package directory and the
- * list of files changed by codemods, and returns the command to run (or a
- * nullish value to skip).
- */
-export type PostCodemodHook = {
-  name?: string;
-  buildCommand: (ctx: {
-    packageDir: string;
-    files: string[];
-  }) =>
-    | PostCodemodCommand
-    | null
-    | undefined
-    | Promise<PostCodemodCommand | null | undefined>;
-};
-
-/** A component XLE layout expressions can reference by name via `{hint}`. */
-export interface XleComponent {
-  /** Import specifier the component is imported from, e.g. '@/components/KpiCard'. */
-  from: string;
-  /** Optional human description shown in tooling. */
-  description?: string;
-  /** Import as the module's default export instead of a named export. Defaults to false. */
-  default?: boolean;
-}
-
-/** User config exported from astryx.config.{ts,mjs,js}. */
-export interface AstryxConfig {
-  /** Integration package names to load. */
-  integrations?: string[];
-  /** Where to file issues/feedback for this project. */
-  issuesUrl?: string;
-  /** Lifecycle hooks. */
-  hooks?: {
-    postCodemod?: PostCodemodHook[];
-  };
-  /**
-   * EXPERIMENTAL — shape may change and is not part of the stable config
-   * contract. Provisional home for features still being proven out.
-   */
-  experimental?: {
-    /** Experimental XLE (layout expression) configuration. */
-    xle?: {
-      /**
-       * Register app-local components so XLE layout expressions can
-       * reference them by name via {hint}. Keyed by component name.
-       */
-      components?: Record<string, XleComponent>;
-    };
-  };
-}
-
-export declare function createConfig<T extends AstryxConfig>(config: T): T;
+export type {
+  PostCodemodCommand,
+  PostCodemodHook,
+  XleComponent,
+  AstryxConfig,
+} from '@astryxdesign/core/config';
+
+export {createConfig} from '@astryxdesign/core/config';

package/src/types/doc.d.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * The doc-authoring surface moved to `@astryxdesign/core/authoring`. Re-exported
+ * here so existing `@astryxdesign/cli/doc` type imports keep resolving. The Zod
+ * load-boundary schemas remain in the CLI (see `src/doc.mjs`).
+ */
+export type {
+  AstryxBaseDocInput,
+  AstryxPropInput,
+  AstryxParamInput,
+  AstryxReturnInput,
+  AstryxComponentDocInput,
+  AstryxFunctionDocInput,
+  AstryxGenericDocInput,
+  AstryxComponentDoc,
+} from '@astryxdesign/core/authoring';
+
+export {
+  createComponentDoc,
+  createFunctionDoc,
+  createDoc,
+} from '@astryxdesign/core/authoring';

package/src/types/integration.d.ts

@@ -1,21 +1,14 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * Integration manifest exported from a conventional root manifest file
- * (astryx.integration.{ts,mjs,js}) sibling to the integration package's
- * package.json. Identity (name/version) comes from the package's
- * package.json, not from the manifest.
+ * The integration-manifest authoring surface moved to
+ * `@astryxdesign/core/authoring`. `AstryxIntegration` and `createIntegration`
+ * are re-exported here so existing `@astryxdesign/cli/integration` type imports
+ * keep resolving. `AstryxIntegrationIssue` stays in the CLI — it is an internal
+ * validation type, not part of the authoring surface.
  */
-export interface AstryxIntegration {
-  /** Relative path to the components/docs root (resolved to absolute). */
-  components?: string;
-  /** Relative path to the templates root (resolved to absolute). */
-  templates?: string;
-  /** Relative path to the codemods root (resolved to absolute). */
-  codemods?: string;
-  /** Where to file issues/feedback for this integration. */
-  issuesUrl?: string;
-}
+export type {AstryxIntegration} from '@astryxdesign/core/authoring';
+export {createIntegration} from '@astryxdesign/core/authoring';
 
 /** An issue surfaced by an integration. */
 export interface AstryxIntegrationIssue {
@@ -23,7 +16,3 @@ export interface AstryxIntegrationIssue {
   severity: 'warning' | 'error';
   message: string;
 }
-
-export declare function createIntegration<T extends AstryxIntegration>(
-  integration: T,
-): T;

package/src/types/template-api.d.ts

@@ -1,54 +1,18 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 /**
- * Authoring surface for Astryx static templates, exported from
- * `@astryxdesign/cli/template`.
- *
- * A template doc lives in a `<id>.doc.{ts,mjs,js}` file with a required
- * same-stem sibling source file (`<id>.tsx`). The doc's `type` (page or
- * block) — injected by the create* helpers — decides how the template is
- * scaffolded; there is no `/pages` vs `/blocks` directory requirement.
+ * The template-authoring surface moved to `@astryxdesign/core/authoring`.
+ * Re-exported here so existing `@astryxdesign/cli/template` type imports keep
+ * resolving.
  */
-
-/** Optional preview metadata for a template (used by docs surfaces). */
-export interface AstryxTemplatePreview {
-  /** Path or URL to a preview image. */
-  image?: string;
-  /** CSS aspect-ratio hint for the preview, e.g. "16 / 9". */
-  aspectRatio?: string;
-}
-
-/** Fields common to page and block template docs (without the `type` tag). */
-export interface AstryxTemplateInput {
-  /** Human-readable template name. Required. */
-  name: string;
-  /** One-line description of what the template provides. Required. */
-  description: string;
-  /** Optional grouping/category label. */
-  category?: string;
-  /** Component display names the template composes. */
-  componentsUsed?: string[];
-  /** Optional preview metadata. */
-  preview?: AstryxTemplatePreview;
-}
-
-/** Input accepted by {@link createPageTemplate} (no `type` field). */
-export type AstryxPageTemplateInput = AstryxTemplateInput;
-/** Input accepted by {@link createBlockTemplate} (no `type` field). */
-export type AstryxBlockTemplateInput = AstryxTemplateInput;
-
-/** A validated page template doc. */
-export type AstryxPageTemplate = AstryxTemplateInput & {type: 'page'};
-/** A validated block template doc. */
-export type AstryxBlockTemplate = AstryxTemplateInput & {type: 'block'};
-
-/** A validated template doc (page or block). */
-export type AstryxTemplate = AstryxPageTemplate | AstryxBlockTemplate;
-
-export declare function createPageTemplate<T extends AstryxPageTemplateInput>(
-  def: T,
-): T & {type: 'page'};
-
-export declare function createBlockTemplate<T extends AstryxBlockTemplateInput>(
-  def: T,
-): T & {type: 'block'};
+export type {
+  AstryxTemplatePreview,
+  AstryxTemplateInput,
+  AstryxPageTemplateInput,
+  AstryxBlockTemplateInput,
+  AstryxPageTemplate,
+  AstryxBlockTemplate,
+  AstryxTemplate,
+} from '@astryxdesign/core/authoring';
+
+export {createPageTemplate, createBlockTemplate} from '@astryxdesign/core/authoring';

package/templates/blocks/components/Avatar/AvatarGroup.tsx

@@ -7,28 +7,26 @@ import {AvatarGroup, AvatarGroupOverflow} from '@astryxdesign/core/AvatarGroup';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 const USERS = [
   {
     name: 'Ami Pena',
-    src: `${CDN}/DATA-Ami-Pena.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png',
   },
   {
     name: 'Drew Young',
-    src: `${CDN}/DATA-Drew-Young.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png',
   },
   {
     name: 'Gabriela Fernandez',
-    src: `${CDN}/DATA-Gabriela-Fernandez.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png',
   },
   {
     name: 'Jihoo Song',
-    src: `${CDN}/DATA-Jihoo-Song.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png',
   },
   {
     name: 'Nam Tran',
-    src: `${CDN}/DATA-Nam-Tran.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Nam-Tran.png',
   },
 ];
 

package/templates/blocks/components/Avatar/AvatarShowcase.tsx

@@ -5,29 +5,27 @@
 import {Avatar, AvatarStatusDot} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 export default function AvatarShowcase() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
       <Avatar
-        src={`${CDN}/DATA-Ana-Thomas.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
         name="Ana Thomas"
         size="large"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
-        src={`${CDN}/DATA-Drew-Young.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Drew-Young.png"
         name="Drew Young"
         size="large"
       />
       <Avatar
-        src={`${CDN}/DATA-Jihoo-Song.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Jihoo-Song.png"
         name="Jihoo Song"
         size="large"
       />
       <Avatar
-        src={`${CDN}/DATA-Nam-Tran.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Nam-Tran.png"
         name="Nam Tran"
         size="large"
         status={<AvatarStatusDot variant="error" label="Online" />}

package/templates/blocks/components/Avatar/AvatarUserCard.tsx

@@ -6,24 +6,22 @@ import {Avatar, AvatarStatusDot} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 const USERS = [
   {
     name: 'Itai Jordaan',
-    src: `${CDN}/DATA-Itai-Jordaan.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png',
     role: 'Engineering Lead',
     variant: 'success' as const,
   },
   {
     name: 'Margot Schroder',
-    src: `${CDN}/DATA-Margot-Schroder.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png',
     role: 'Product Designer',
     variant: 'neutral' as const,
   },
   {
     name: 'Daniela Gimenez',
-    src: `${CDN}/DATA-Daniela-Gimenez.png`,
+    src: 'https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png',
     role: 'Engineering Manager',
     variant: 'error' as const,
   },

package/templates/blocks/components/Avatar/AvatarWithImage.tsx

@@ -5,24 +5,26 @@
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 export default function AvatarWithImage() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
-      <Avatar src={`${CDN}/DATA-Ami-Pena.png`} name="Ami Pena" size="tiny" />
       <Avatar
-        src={`${CDN}/DATA-Ana-Thomas.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png"
+        name="Ami Pena"
+        size="tiny"
+      />
+      <Avatar
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
         name="Ana Thomas"
         size="small"
       />
       <Avatar
-        src={`${CDN}/DATA-Daniela-Gimenez.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png"
         name="Daniela Gimenez"
         size="medium"
       />
       <Avatar
-        src={`${CDN}/DATA-Gabriela-Fernandez.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png"
         name="Gabriela Fernandez"
         size="large"
       />

package/templates/blocks/components/Avatar/AvatarWithStatus.tsx

@@ -5,25 +5,23 @@
 import {Avatar, AvatarStatusDot} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 export default function AvatarWithStatus() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
       <Avatar
-        src={`${CDN}/DATA-Itai-Jordaan.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png"
         name="Itai Jordaan"
         size="large"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
-        src={`${CDN}/DATA-Margot-Schroder.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png"
         name="Margot Schroder"
         size="large"
         status={<AvatarStatusDot variant="neutral" label="Offline" />}
       />
       <Avatar
-        src={`${CDN}/DATA-Pablo-Morales.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Pablo-Morales.png"
         name="Pablo Morales"
         size="large"
         status={<AvatarStatusDot variant="error" label="Busy" />}

package/templates/blocks/components/ChatComposerInput/ChatComposerInputControlledInput.tsx

@@ -10,7 +10,7 @@ import {Text} from '@astryxdesign/core/Text';
 export default function ChatComposerInputControlledInput() {
   const [value, setValue] = useState('');
   return (
-    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => setValue('')}
         value={value}

package/templates/blocks/components/ChatComposerInput/ChatComposerInputDisabled.tsx

@@ -7,7 +7,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 
 export default function ChatComposerInputDisabled() {
   return (
-    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => {}}
         isDisabled

package/templates/blocks/components/ChatComposerInput/ChatComposerInputMentionTrigger.tsx

@@ -43,7 +43,7 @@ export default function ChatComposerInputMentionTrigger() {
   };
 
   return (
-    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => setValue('')}
         input={

package/templates/blocks/components/ChatComposerInput/ChatComposerInputMultipleTriggers.tsx

@@ -54,7 +54,7 @@ export default function ChatComposerInputMultipleTriggers() {
   };
 
   return (
-    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
       <Text type="supporting" color="secondary">
         Type @ for mentions (blue) or / for commands (yellow)
       </Text>

package/templates/blocks/components/ChatComposerInput/ChatComposerInputShowcase.tsx

@@ -7,7 +7,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 
 export default function ChatComposerInputShowcase() {
   return (
-    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => {}}
         input={

package/templates/blocks/components/ChatComposerInput/ChatComposerInputSlashCommands.tsx

@@ -40,7 +40,7 @@ export default function ChatComposerInputSlashCommands() {
   };
 
   return (
-    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => {}}
         input={

package/templates/blocks/components/Table/TableGroupedRowsTable.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'useTableGroupedRows',
+  name: 'useTableGroupedRows — Collapsible Groups',
+  displayName: 'useTableGroupedRows — Collapsible Groups',
+  description:
+    'A table grouped into collapsible sections with useTableGroupedRows. Each group gets a full-width header with a chevron, label, and member count; click to collapse/expand.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table'],
+};

package/templates/blocks/components/Table/TableGroupedRowsTable.tsx

@@ -0,0 +1,66 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState, useCallback} from 'react';
+import {
+  Table,
+  useTableGroupedRows,
+  proportional,
+  pixel,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface Person extends Record<string, unknown> {
+  id: string;
+  name: string;
+  team: string;
+  role: string;
+}
+
+const people: Person[] = [
+  {id: '1', name: 'Ava Chen', team: 'Design Systems', role: 'Staff Eng'},
+  {id: '2', name: 'Liam Park', team: 'Design Systems', role: 'Engineer'},
+  {id: '3', name: 'Zoe Vega', team: 'Design Systems', role: 'Manager'},
+  {id: '4', name: 'Max Ross', team: 'Infra', role: 'Senior Eng'},
+  {id: '5', name: 'Mia Cole', team: 'Infra', role: 'Engineer'},
+  {id: '6', name: 'Leo Nash', team: 'Growth', role: 'PM'},
+];
+
+const columns: TableColumn<Person>[] = [
+  {key: 'name', header: 'Name', width: proportional(2)},
+  {key: 'role', header: 'Role', width: pixel(140)},
+];
+
+export default function TableGroupedRowsTable() {
+  const [collapsedGroups, setCollapsed] = useState<Set<string>>(new Set());
+  const onToggleGroup = useCallback((key: string) => {
+    setCollapsed(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+
+  const grouped = useTableGroupedRows<Person>({
+    data: people,
+    groupBy: p => p.team,
+    collapsedGroups,
+    onToggleGroup,
+    getRowKey: p => p.id,
+  });
+
+  return (
+    <Table
+      data={grouped.data}
+      columns={columns}
+      idKey={grouped.idKey}
+      hasHover
+      plugins={{grouped: grouped.plugin}}
+    />
+  );
+}