@astryxdesign/cli 0.7.12-canary.f543ec7 → 0.7.12

package/assets/docs/tree/tailwind.doc.mjs

@@ -19,6 +19,8 @@ export const docs = {
     'tailwind-theme.css',
     'utility classes',
     'preflight',
+    'existing Tailwind app',
+    'cascade layer order',
   ],
 
   sections: [
@@ -69,7 +71,45 @@ import {themes, defaultThemeSlug} from './astryx-themes';`,
         },
         {
           type: 'prose',
-          text: 'The Tailwind bridge is the concrete example of the general interop pattern: expose another library\'s semantic API, but point the values at system token variables.',
+          text: "The Tailwind bridge is the concrete example of the general interop pattern: expose another library's semantic API, but point the values at system token variables.",
+        },
+      ],
+    },
+    {
+      title: 'Add Astryx to an app that already uses Tailwind',
+      content: [
+        {
+          type: 'prose',
+          text: 'The recipe in the Tailwind section is a whole `globals.css` for a new app. An app that already uses Tailwind keeps its own file: its `@import "tailwindcss"`, its `@theme` mapping, and its `:root` variables stay as they are. Add one `@layer` line above the Tailwind import and the Astryx stylesheets below it.',
+        },
+        {
+          type: 'code',
+          lang: 'css',
+          label: 'globals.css (existing Tailwind app)',
+          code: `@layer reset, theme, base, astryx-base, astryx-theme, components, utilities;
+
+@import "tailwindcss"; /* the app's own entry, unchanged */
+@import "@astryxdesign/core/reset.css";
+@import "@astryxdesign/core/astryx.css";
+@import "@astryxdesign/theme-neutral/theme.css";
+
+/* The app's own @theme and :root rules stay below, unchanged. */`,
+        },
+        {
+          type: 'prose',
+          text: "This recipe leaves out `tailwind-theme.css`. The bridge maps Tailwind theme names to system tokens, including Tailwind's own defaults such as `rounded-lg` and `shadow-md`, so in an existing app it changes what the app's own classes paint. Add it only when the app does not use the names it maps.",
+        },
+        {
+          type: 'prose',
+          text: "Astryx's theme defines its own CSS custom properties (color, spacing, radius, shadow, font, motion and more), and {@link namespace:tokens} has the full list. An app token with one of those names collides in one of two ways. An app `@theme` key takes Astryx's value, because `astryx.css` sets the tokens on `:root` above Tailwind's `theme` layer: with `@theme { --spacing-4: 1.5rem }`, the app's `gap-4` stays 16px. Marking the block `@theme inline` keeps the app's value in its utilities. An app `:root` variable replaces Astryx's value, so Astryx's own components change: `:root { --spacing-4: 1.5rem }` widens Astryx's spacing step 4 from 16px to 24px. Where the root Theme component sets a token again, such as `--color-warning`, the app's own rules inside it read Astryx's value instead. Rename any app token that shares a name.",
+        },
+        {
+          type: 'prose',
+          text: "Put the `@layer` line above the app's `@import \"tailwindcss\"`, never below it. A `@layer` statement orders only the layer names the page has not seen yet, and the Tailwind import names `theme`, `base`, `components`, and `utilities` as it loads. Below that import, the statement can only add `reset`, `astryx-base`, and `astryx-theme` after Tailwind's `utilities`. That inverts the cascade: the Astryx reset then outranks every utility class in the app, and, for example, removes the borders and padding the app's utilities give its controls. Nothing reports it: the build and the browser console stay clean, and the `@layer` line still looks right in the source, so only the rendered page shows the problem.",
+        },
+        {
+          type: 'prose',
+          text: 'The load-order rule from the Tailwind section still applies: `globals.css` must be the first stylesheet the page loads, so its `@layer` line names the layers first.',
         },
       ],
     },

package/assets/docs/tree/type-scale.doc.mjs

@@ -2,7 +2,8 @@
 
 /**
  * @file `astryx docs typography/type-scale`: line height, semantic type scale,
- * display text, headings and text components, and custom type scales.
+ * display text, headings and text components, custom type scales, and the
+ * reader's text size on iOS.
  */
 
 /** @type {import('@astryxdesign/cli/authoring').ReferenceDoc} */
@@ -14,13 +15,15 @@ export const docs = {
   placement: {parent: 'namespace:typography', slot: 'guides', order: 20},
   category: 'foundations',
   description:
-    'Line height, semantic type scale tokens, display text, Heading and Text components, and custom type scales via defineTheme.',
+    "Line height, semantic type scale tokens, display text, Heading and Text components, custom type scales via defineTheme, and following the reader's text size on iOS.",
   keywords: [
     'line height',
     'leading',
     'defineTheme',
     'base',
     'ratio',
+    'dynamic type',
+    'text size',
   ],
 
   sections: [
@@ -143,5 +146,19 @@ const denseTheme = defineTheme({
         },
       ],
     },
+    {
+      id: 'dynamic-type',
+      title: "Following the reader's text size on iOS",
+      content: [
+        {
+          type: 'prose',
+          text: "On iPhone, readers pick a text size in Settings (Display & Text Size, then Larger Text), and native apps grow or shrink their text with it. Every theme does the same in Safari on iPhone, which exposes that choice through `font: -apple-system-body`: each font size follows the reader's choice on the curve of the iOS text style it plays, so body text scales like Body, `heading-1` like Title 1 and display text like Large Title, and every role keeps its order. A size the theme fixes at a length, such as a 12px supporting size, scales on the curve of the step it reads by default; a size in `em` or `%` follows its parent, and one that reads a variable follows that variable. At the default size every font size is the theme's own. The family, spacing, radius and the root font size never change, line heights keep their ratios, text inputs keep their 16px floor on iOS, and on Android the system font scale grows every font size through `env(preferred-text-scale)` where the browser reports it; browsers with neither see no change. There is nothing to turn on: no theme option, prop or document attribute.",
+        },
+        {
+          type: 'prose',
+          text: 'Fixed-height controls such as the text inputs keep their height, so their text can overflow at the accessibility sizes. A labelled `Button` grows with its label.',
+        },
+      ],
+    },
   ],
 };

package/assets/templates/blocks/components/Hooks/useInputStatusIconHookUsage.tsx

@@ -74,6 +74,7 @@ function CouponField({statusVariant}: {statusVariant: FieldStatusPlacement}) {
       <div
         {...stylex.props(
           inputWrapperStyles.base,
+          inputWrapperStyles.textField,
           styles.field,
           status && inputStatusBorderStyles[status.type],
         )}>

package/assets/templates/blocks/components/Hooks/useInteractiveRoleHookUsage.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: 'useInteractiveRole',
+  name: 'useInteractiveRole — One Tile, Four Roles',
+  displayName: 'useInteractiveRole — One Tile, Four Roles',
+  description:
+    'A polymorphic Tile used four ways: with an href it renders as a link, with an onClick as a button, with neither as plain content, and placed as a Popover trigger it becomes the trigger button through context — the resolution order in one place.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Popover', 'Card', 'Text', 'Layout', 'Link'],
+};

package/assets/templates/blocks/components/Hooks/useInteractiveRoleHookUsage.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useInteractiveRole} from '@astryxdesign/core/hooks';
+import {Link} from '@astryxdesign/core/Link';
+import {Popover} from '@astryxdesign/core/Popover';
+import {Card} from '@astryxdesign/core/Card';
+import {Text} from '@astryxdesign/core/Text';
+import {VStack} from '@astryxdesign/core/Layout';
+
+// A polymorphic Tile: the hook alone decides what it renders as — href wins,
+// then onClick, then a trigger context (Popover), then inert.
+function Tile({
+  href,
+  onClick,
+  children,
+}: {
+  href?: string;
+  onClick?: () => void;
+  children: React.ReactNode;
+}) {
+  const role = useInteractiveRole({href, onClick});
+  const body = (
+    <Card padding={3} width={200}>
+      <Text type="body">{children}</Text>
+    </Card>
+  );
+  switch (role) {
+    case 'link':
+      return <Link href={href}>{body}</Link>;
+    case 'button':
+      return <button onClick={onClick}>{body}</button>;
+    default:
+      return body;
+  }
+}
+
+export default function UseInteractiveRoleHookUsage() {
+  return (
+    <VStack gap={3} hAlign="center" style={{width: '100%'}}>
+      <Tile href="https://example.com/docs">Renders as a link</Tile>
+      <Tile onClick={() => {}}>Renders as a button</Tile>
+      <Popover
+        label="Tile details"
+        content={
+          <Card padding={3}>
+            <Text type="body">Opened through the tile's context role</Text>
+          </Card>
+        }>
+        <Tile>Trigger via context</Tile>
+      </Popover>
+      <Tile>Plain content</Tile>
+    </VStack>
+  );
+}

package/assets/templates/blocks/components/Hooks/useStreamingTextHookUsage.doc.mjs

@@ -7,8 +7,8 @@ export const doc = {
   name: 'useStreamingText — Streaming Response',
   displayName: 'useStreamingText — Streaming Response',
   description:
-    'Smooth bursty generated text into a steady reveal with useStreamingText.',
+    'A chat-style reply card: while the response streams in bursts, useStreamingText reveals it steadily character by character; when streaming ends the full text snaps into place. Regenerate replays the stream.',
   isReady: true,
   aspectRatio: 4 / 3,
-  componentsUsed: ['Card', 'Text', 'Layout'],
+  componentsUsed: ['Button', 'Card', 'Text', 'Layout'],
 };

package/assets/templates/blocks/components/Hooks/useStreamingTextHookUsage.tsx

@@ -2,29 +2,85 @@
 
 'use client';
 
+import {useCallback, useEffect, useRef, useState} from 'react';
 import {useStreamingText} from '@astryxdesign/core/hooks';
+import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
-import {VStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
+import {VStack} from '@astryxdesign/core/Layout';
+
+const CHUNKS = [
+  'Astryx hooks keep behavior reusable ',
+  'while components keep visuals consistent. ',
+  'Streaming text arrives in bursts; ',
+  'the hook smooths it into a steady reveal.',
+];
 
-const response =
-  'Astryx hooks keep behavior reusable while components keep visuals consistent.';
+// A fake stream: chunks land in bursts, the way a model streams tokens.
+// Starting again stops the stream in progress, and the last chunk ends it.
+function useFakeStream(onChunk: (chunk: string) => void, onEnd: () => void) {
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const start = useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    let index = 0;
+    const tick = () => {
+      onChunk(CHUNKS[index]);
+      index += 1;
+      if (index < CHUNKS.length) {
+        timer.current = setTimeout(tick, 350);
+      } else {
+        timer.current = null;
+        onEnd();
+      }
+    };
+    timer.current = setTimeout(tick, 350);
+  }, [onChunk, onEnd]);
+  useEffect(
+    () => () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+    },
+    [],
+  );
+  return start;
+}
 
 export default function UseStreamingTextHookUsage() {
-  const displayedText = useStreamingText(response, false, {
-    speed: 'fast',
-  });
+  const [target, setTarget] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+
+  const appendChunk = useCallback((chunk: string) => {
+    setTarget(previous => previous + chunk);
+  }, []);
+  // When the last chunk has landed, end the stream so the hook snaps to the
+  // full text.
+  const endStream = useCallback(() => setIsStreaming(false), []);
+  const startStream = useFakeStream(appendChunk, endStream);
+
+  const regenerate = useCallback(() => {
+    setTarget('');
+    setIsStreaming(true);
+    startStream();
+  }, [startStream]);
+
+  const displayedText = useStreamingText(target, isStreaming, {speed: 'fast'});
 
   return (
     <Card width={420} padding={4}>
-      <VStack gap={2}>
+      <VStack gap={3}>
         <Text type="body" weight="bold">
           Assistant response
         </Text>
         <Text type="body">{displayedText}</Text>
-        <Text type="supporting" color="secondary">
-          Complete
-        </Text>
+        <Button
+          label={isStreaming ? 'Streaming…' : 'Regenerate'}
+          variant="secondary"
+          size="sm"
+          onClick={regenerate}
+        />
       </VStack>
     </Card>
   );

package/assets/templates/blocks/components/Link/useLinkifyHookUsage.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: 'useLinkify',
+  name: 'useLinkify — Links in a Comment Thread',
+  displayName: 'useLinkify — Links in a Comment Thread',
+  description:
+    'Plain-text comments where useLinkify turns the URL and the email address into Links, and a custom pattern turns issue references like #123 into tracker links — the patterns option in action. The comment without matches stays plain text.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Link', 'Layout', 'Text'],
+};

package/assets/templates/blocks/components/Link/useLinkifyHookUsage.tsx

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useLinkify, type LinkifyPattern} from '@astryxdesign/core/Link';
+import {VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const COMMENTS = [
+  'See https://example.com/spec or email support@example.com.',
+  'Fixed by #123, tracking the regression in #456.',
+  'No links here, just a plain note.',
+];
+
+// Issue references like #123 link into the tracker; the capture group maps
+// onto its URL scheme, showing the patterns option.
+const ISSUE_PATTERN: LinkifyPattern = {
+  pattern: /#(\d+)/g,
+  href: match => `https://example.com/issues/${match[1]}`,
+};
+
+function Comment({children}: {children: string}) {
+  const nodes = useLinkify(children, {patterns: [ISSUE_PATTERN]});
+  return (
+    <Text type="body" color="secondary">
+      {nodes}
+    </Text>
+  );
+}
+
+export default function UseLinkifyHookUsage() {
+  return (
+    <VStack gap={3} style={{width: '100%', maxWidth: 360}}>
+      {COMMENTS.map(comment => (
+        <Comment key={comment}>{comment}</Comment>
+      ))}
+    </VStack>
+  );
+}

package/assets/templates/blocks/components/PowerSearch/usePowerSearchConfigHookUsage.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: 'usePowerSearchConfig',
+  name: 'usePowerSearchConfig — Filtered Directory Table',
+  displayName: 'usePowerSearchConfig — Filtered Directory Table',
+  description:
+    'A people directory with a PowerSearch bar over a Table: typed field definitions feed usePowerSearchConfig, returning the search config and an applyFilters helper that updates Table rows.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['PowerSearch', 'Table', 'Layout'],
+};

package/assets/templates/blocks/components/PowerSearch/usePowerSearchConfigHookUsage.tsx

@@ -0,0 +1,83 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {VStack} from '@astryxdesign/core/Layout';
+import {
+  PowerSearch,
+  usePowerSearchConfig,
+} from '@astryxdesign/core/PowerSearch';
+import type {PowerSearchFilter} from '@astryxdesign/core/PowerSearch';
+import {Table} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+const statusValues = [
+  {value: 'active', label: 'Active'},
+  {value: 'on-leave', label: 'On Leave'},
+  {value: 'contractor', label: 'Contractor'},
+];
+
+const fieldDefs = [
+  {key: 'name', type: 'string', label: 'Name'},
+  {key: 'status', type: 'enum', label: 'Status', enumValues: statusValues},
+  {key: 'startDate', type: 'date', label: 'Start date'},
+] as const;
+
+interface Person extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+  startDate: number;
+}
+
+const people: Person[] = [
+  {id: '1', name: 'Alice Chen', status: 'active', startDate: 1672531200},
+  {id: '2', name: 'Bob Dylan', status: 'on-leave', startDate: 1680307200},
+  {id: '3', name: 'Charlie Kim', status: 'active', startDate: 1688169600},
+  {id: '4', name: 'Dana Scully', status: 'contractor', startDate: 1696118400},
+  {id: '5', name: 'Evan Wright', status: 'active', startDate: 1704067200},
+];
+
+const columns: TableColumn<Person>[] = [
+  {key: 'name', header: 'Name'},
+  {
+    key: 'status',
+    header: 'Status',
+    renderCell: (person: Person) =>
+      statusValues.find(s => s.value === person.status)?.label ?? person.status,
+  },
+  {
+    key: 'startDate',
+    header: 'Start Date',
+    renderCell: (person: Person) =>
+      new Date(person.startDate * 1000).toLocaleDateString('en-US', {
+        timeZone: 'UTC',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      }),
+  },
+];
+
+export default function UsePowerSearchConfigHookUsage() {
+  const [filters, setFilters] = useState<PowerSearchFilter[]>([]);
+  const {config, applyFilters} = usePowerSearchConfig(
+    fieldDefs,
+    'PeopleDirectory',
+  );
+  const filteredPeople = applyFilters(filters, people);
+
+  return (
+    <VStack gap={4}>
+      <PowerSearch
+        config={config}
+        filters={filters}
+        onChange={newFilters => setFilters([...newFilters])}
+        placeholder="Filter directory by name, status, start date..."
+        resultCount={filteredPeople.length}
+      />
+      <Table data={filteredPeople} columns={columns} idKey="id" hasHover />
+    </VStack>
+  );
+}

package/assets/templates/blocks/components/Table/RowsVirtualizationHookUsage.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: 'useTableRowsVirtualization',
+  name: 'useTableRowsVirtualization - Fixed Height Rows',
+  displayName: 'useTableRowsVirtualization - Fixed Height Rows',
+  description:
+    "A Table with 1,000 product rows inside a 320px-tall parent, which bounds its scroll area. Give the Table's parent a height, fixed or relative, or a flex child, so windowing can bound the rows; with no height every row renders. Scroll vertically to mount the visible rows. The caller keeps all data and columns; this hook does not virtualize columns.",
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Table', 'VStack'],
+};

package/assets/templates/blocks/components/Table/RowsVirtualizationHookUsage.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {
+  Table,
+  useTableRowsVirtualization,
+  type TableColumn,
+} from '@astryxdesign/core/Table';
+import {VStack} from '@astryxdesign/core/Layout';
+
+interface Product extends Record<string, unknown> {
+  id: string;
+  name: string;
+}
+
+const products: Product[] = Array.from({length: 1000}, (_, index) => ({
+  id: `product-${index}`,
+  name: `Product ${index + 1}`,
+}));
+const columns: TableColumn<Product>[] = [{key: 'name', header: 'Product'}];
+
+export default function RowsVirtualizationHookUsage() {
+  const virtualization = useTableRowsVirtualization({
+    rowHeight: 56,
+    initialViewportHeight: 320,
+  });
+  // Give the Table's parent a height, fixed or relative, or a flex child, so
+  // windowing can bound the rows; with no height every row renders.
+  // initialViewportHeight only sizes the first window.
+  return (
+    <VStack height={320}>
+      <Table
+        data={products}
+        columns={columns}
+        idKey="id"
+        virtualization={virtualization}
+      />
+    </VStack>
+  );
+}

package/assets/templates/blocks/components/Table/useTableColumnSettingsStateHookUsage.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: 'useTableColumnSettingsState',
+  name: 'useTableColumnSettingsState — Column Visibility Picker',
+  displayName: 'useTableColumnSettingsState — Column Visibility Picker',
+  description:
+    'A Table toolbar with a Columns menu of checkboxes: toggling Email updates active columns, Reset restores defaults, and the config is passed directly to useTableColumnSettings.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Button', 'CheckboxInput', 'Popover', 'Table', 'Layout'],
+};

package/assets/templates/blocks/components/Table/useTableColumnSettingsStateHookUsage.tsx

@@ -0,0 +1,97 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Button} from '@astryxdesign/core/Button';
+import {CheckboxInput} from '@astryxdesign/core/CheckboxInput';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Popover} from '@astryxdesign/core/Popover';
+import {
+  Table,
+  useTableColumnSettings,
+  useTableColumnSettingsState,
+} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+
+interface Member extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const members: Member[] = [
+  {id: '1', name: 'Alice', email: 'alice@example.com', role: 'Engineer'},
+  {id: '2', name: 'Bob', email: 'bob@example.com', role: 'Designer'},
+  {id: '3', name: 'Charlie', email: 'charlie@example.com', role: 'Manager'},
+];
+
+const allColumns: TableColumn<Member>[] = [
+  {key: 'name', header: 'Name'},
+  {key: 'email', header: 'Email'},
+  {key: 'role', header: 'Role'},
+];
+
+const columnOptions = [
+  {key: 'name' as const, label: 'Name', isAlwaysVisible: true},
+  {key: 'email' as const, label: 'Email'},
+  {key: 'role' as const, label: 'Role'},
+];
+
+const defaultKeys = ['name', 'email', 'role'];
+
+export default function UseTableColumnSettingsStateHookUsage() {
+  const [activeKeys, setActiveKeys] =
+    useState<ReadonlyArray<string>>(defaultKeys);
+
+  const state = useTableColumnSettingsState({
+    columns: columnOptions,
+    activeColumnKeys: activeKeys,
+    onChangeActiveColumnKeys: setActiveKeys,
+    defaultColumnKeys: defaultKeys,
+  });
+
+  const plugin = useTableColumnSettings<Member>(state.columnSettingsConfig);
+
+  return (
+    <VStack gap={3}>
+      <HStack hAlign="start">
+        <Popover
+          placement="below"
+          label="Column settings"
+          width={200}
+          content={
+            <VStack gap={2}>
+              {columnOptions.map(col => (
+                <CheckboxInput
+                  key={col.key}
+                  label={col.label}
+                  value={state.isColumnActive(col.key)}
+                  isDisabled={!state.isColumnToggleable(col.key)}
+                  onChange={() => state.toggleColumn(col.key)}
+                />
+              ))}
+              <Button
+                label="Reset"
+                size="sm"
+                variant="secondary"
+                onClick={state.resetToDefault}>
+                Reset
+              </Button>
+            </VStack>
+          }>
+          <Button label="Columns" size="sm">
+            Columns
+          </Button>
+        </Popover>
+      </HStack>
+      <Table
+        data={members}
+        columns={allColumns}
+        idKey="id"
+        plugins={{columnSettings: plugin}}
+      />
+    </VStack>
+  );
+}