tembro 2.0.3 → 2.0.5

package/packages/cli/vendor/src/showcase/premium/empty-state/mock.ts

@@ -1,30 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const emptyStateMock: ComponentDemoMock = {
-  code: `import { EmptyState } from "tembro"
-
-export function Example() {
-  return (
-    <EmptyState
-      title="No results yet"
-      description="Create your first item to unlock actions and charts."
-      actionLabel="Create item"
-      onAction={() => {
-        console.log("Create action triggered")
-      }}
-    />
-  )
-}`,
-  highlights: ["No-content user messaging", "Built-in action callback", "Lightweight onboarding placeholder", "Reusable for any resource list"],
-  scenarios: [
-    { title: "First launch", description: "Guide users to create first entity in a clean state." },
-    { title: "Filtered empty", description: "Tell users what changed filters removed all items." },
-    { title: "Error fallback", description: "Use with loading and retry controls when data fetch fails." },
-  ],
-  capabilityNotes: [
-    "Always provide a clear next action to recover from empty state.",
-    "Keep titles short and outcome oriented.",
-    "Prefer one primary action + short explanation for fastest user decision.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/empty-state/showcase.tsx

@@ -1,65 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, EmptyState } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-export function EmptyStateShowcase({ mode }: ComponentDemoProps) {
-  const [actionCount, setActionCount] = React.useState(0)
-  const [showEmptyFeedback, setShowEmptyFeedback] = React.useState(true)
-
-  return (
-    <div className="space-y-5">
-      <section className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">No-content state</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Empty state should unblock the next step</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              The preview should show a clear title, short explanation, and one meaningful next action. Empty state is not decorative whitespace.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">No data</Badge>
-            <Badge variant="outline" className="rounded-full">One next action</Badge>
-          </div>
-        </div>
-      </section>
-
-      {showEmptyFeedback ? (
-        <EmptyState
-          title="No results found"
-          description="There is nothing to show yet. Create one item to continue."
-          actionLabel="Create first item"
-          onAction={() => setActionCount((value) => value + 1)}
-        />
-      ) : (
-        <EmptyState title="Empty state intentionally hidden" description="Use a custom fallback only when needed." />
-      )}
-
-      <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Interaction count</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{actionCount}</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">Use the primary CTA only for the most direct recovery path.</p>
-        </section>
-        {mode === "playground" ? (
-          <section className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Preview controls</p>
-            <div className="mt-4 flex flex-wrap gap-2">
-              <Button size="sm" variant={showEmptyFeedback ? "default" : "outline"} onClick={() => setShowEmptyFeedback((value) => !value)}>
-                Toggle feedback
-              </Button>
-              <Button size="sm" variant="outline" onClick={() => setActionCount(0)}>
-                Reset actions
-              </Button>
-            </div>
-          </section>
-        ) : null}
-      </div>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/float-button/index.ts

@@ -1,3 +0,0 @@
-export { floatButtonMock } from "./mock"
-export { FloatButtonShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/float-button/mock.ts

@@ -1,24 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const floatButtonMock: ComponentDemoMock = {
-  code: `import { FloatButton } from "@/index"
-import { Plus } from "lucide-react"
-
-export function Example() {
-  return (
-    <FloatButton placement="bottom-right">
-      <Plus className="size-4" />
-    </FloatButton>
-  )
-}`,
-  cliCommand: "npx tembro add float-button",
-  highlights: [
-    "Fixed-position shortcut button",
-    "Placement variants across corners",
-  ],
-  scenarios: [
-    { title: "Quick action", description: "Keep add/create action always reachable." },
-    { title: "Chat widgets", description: "Mount floating controls without complex absolute layout." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/float-button/showcase.tsx

@@ -1,21 +0,0 @@
-import * as React from "react"
-
-import { FloatButton } from "@/index"
-import { PlusIcon } from "lucide-react"
-
-const placements = ["bottom-right", "bottom-left", "top-right", "top-left"] as const
-
-export function FloatButtonShowcase() {
-  const [index, setIndex] = React.useState(0)
-  const placement = placements[index % placements.length]
-
-  return (
-    <div className="relative h-48 rounded-lg border bg-muted/20 p-6">
-      <p className="mb-3 text-sm text-muted-foreground">Current placement: {placement}</p>
-      <FloatButton onClick={() => setIndex((value) => value + 1)} aria-label="Open quick actions" placement={placement}>
-        <PlusIcon className="size-5" />
-      </FloatButton>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/form-builder/index.ts

@@ -1,2 +0,0 @@
-export { FormBuilderShowcase } from "./showcase"
-export { formBuilderMock } from "./mock"

package/packages/cli/vendor/src/showcase/premium/form-builder/mock.ts

@@ -1,79 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const formBuilderMock: ComponentDemoMock = {
-  code: `import { useForm } from "react-hook-form"
-import {
-  FormBuilder,
-  formSection,
-  inputField,
-  phoneField,
-  switchField,
-  textareaField,
-} from "tembro"
-
-type DemoValues = {
-  workspace: string
-  ownerPhone: string
-  notes: string
-  isLive: boolean
-}
-
-const sections = [
-  formSection<DemoValues>({
-    id: "main",
-    title: "Workspace settings",
-    description: "Field schema, sections and disabled/readOnly behavior all live in FormBuilder config.",
-    fields: [
-      inputField<DemoValues>({ id: "workspace", props: { name: "workspace", label: "Workspace name", required: true } }),
-      phoneField<DemoValues>({ id: "ownerPhone", props: { name: "ownerPhone", label: "Owner phone" } }),
-      textareaField<DemoValues>({ id: "notes", colSpan: "full", props: { name: "notes", label: "Notes", rows: 3 } }),
-      switchField<DemoValues>({
-        id: "isLive",
-        colSpan: "full",
-        props: { name: "isLive", label: "Publish workspace", description: "Toggle public availability" },
-      }),
-    ],
-  }),
-]
-
-export function Example() {
-  const form = useForm<DemoValues>({
-    defaultValues: {
-      workspace: "Azamat UI",
-      ownerPhone: "+998 90 123 45 67",
-      notes: "Connected form sections with submit and reset lifecycle.",
-      isLive: true,
-    },
-  })
-
-  return (
-    <FormBuilder
-      control={form.control}
-      sections={sections}
-      columns={1}
-      submitLabel="Save"
-      resetLabel="Reset"
-      disabled={false}
-      readOnly={false}
-    />
-  )
-}`
-,
-  htmlCode: `<form><label for="workspace">Workspace</label><input id="workspace" value="Azamat UI" /></form>`,
-  cliCommand: "npx tembro add form-builder",
-  highlights: ["Field schema", "Sections and presets", "submitLabel / resetLabel wiring", "Disabled/readOnly passthrough", "Reusable field helpers"],
-  relatedBlockSlugs: ["settings-form", "crm-dashboard"],
-  scenarios: [
-    { title: "Field schema validation", description: "Use typed `formSection` and helper fields for deterministic layout." },
-    { title: "Submit + reset", description: "Pass submitLabel/resetLabel and rely on RHF formState for disabled transitions." },
-    { title: "Custom render", description: "Inject custom field-level props through helper factories." },
-    { title: "Read-only mode", description: "Toggle readOnly for inspect-only workflows without changing schema." },
-  ],
-  capabilityNotes: [
-    "`sections` gives a single source of truth for layout and required validations.",
-    "Use `fields` for precise schema-driven field composition.",
-    "Expose submit and reset labels directly from component props so UX can match product language.",
-    "Combine `disabled` + `readOnly` for different page states like locked records and review modes.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/form-builder/showcase.tsx

@@ -1,55 +0,0 @@
-import * as React from "react"
-import { useForm } from "react-hook-form"
-
-import { Button } from "@/index"
-import { FormBuilder, formSection, inputField, phoneField, switchField, textareaField } from "@/components/patterns/form-builder"
-
-import type { ComponentDemoProps } from "../types"
-
-type DemoValues = {
-  workspace: string
-  ownerPhone: string
-  notes: string
-  isLive: boolean
-}
-
-export function FormBuilderShowcase({ mode }: ComponentDemoProps) {
-  const form = useForm<DemoValues>({
-    defaultValues: {
-      workspace: "Azamat UI",
-      ownerPhone: "+998 90 123 45 67",
-      notes: "Connected sections and submit/reset wiring.",
-      isLive: true,
-    },
-  })
-
-  const sections = React.useMemo(
-    () => [
-      formSection<DemoValues>({
-        id: "main",
-        title: "Workspace settings",
-        description: "Schema-driven form builder with explicit submit and reset controls.",
-        fields: [
-          inputField<DemoValues>({ id: "workspace", props: { name: "workspace", label: "Workspace", required: true } }),
-          phoneField<DemoValues>({ id: "ownerPhone", props: { name: "ownerPhone", label: "Owner phone" } }),
-          textareaField<DemoValues>({ id: "notes", colSpan: "full", props: { name: "notes", label: "Notes", rows: 3 } }),
-          switchField<DemoValues>({
-            id: "isLive",
-            colSpan: "full",
-            props: { name: "isLive", label: "Publish workspace", description: "Visible only when record is active." },
-          }),
-        ],
-      }),
-    ],
-    []
-  )
-
-  return (
-    <div className="space-y-4">
-      <FormBuilder control={form.control} sections={sections} columns={1} submitLabel={mode === "playground" ? "Save workspace" : undefined} />
-      <Button type="button" variant="outline" onClick={() => form.reset()}>
-        Reset form
-      </Button>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/keyboard-shortcut/index.ts

@@ -1,2 +0,0 @@
-export { keyboardShortcutMock } from "./mock"
-export { KeyboardShortcutShowcase } from "./showcase"

package/packages/cli/vendor/src/showcase/premium/keyboard-shortcut/mock.ts

@@ -1,20 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const keyboardShortcutMock: ComponentDemoMock = {
-  code: `import { KeyboardShortcut } from "@/index"
-
-export function Example() {
-  return <KeyboardShortcut keys={["Ctrl", "K"]} />
-}`,
-  cliCommand: "npx tembro add keyboard-shortcut",
-  highlights: [
-    "Compact visual hint for one or many keys",
-    "Accepts key arrays or raw children",
-    "Useful inside command palette, docs hints and action toolbars",
-  ],
-  scenarios: [
-    { title: "Search hint", description: "Show the command palette trigger beside a search action." },
-    { title: "Editor help", description: "Reveal save or publish shortcuts close to the action." },
-    { title: "Docs legend", description: "Document power-user flows without adding a heavy table." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/keyboard-shortcut/showcase.tsx

@@ -1,42 +0,0 @@
-import { Button, KeyboardShortcut } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function KeyboardShortcutShowcase() {
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed display primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">KeyboardShortcut shows power-user hints without noise</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Keep shortcut chips short and nearby to the action they describe. They should reinforce real behavior, not decorative text.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
-          <div className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-            <div className="flex flex-wrap items-center gap-3">
-              <Button variant="outline">Search routes</Button>
-              <KeyboardShortcut keys={["Ctrl", "K"]} />
-            </div>
-            <div className="mt-4 flex flex-wrap items-center gap-3">
-              <Button variant="secondary">Save draft</Button>
-              <KeyboardShortcut keys={["Ctrl", "S"]} />
-              <Button>Publish</Button>
-              <KeyboardShortcut keys={["Shift", "Enter"]} />
-            </div>
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <p className="text-sm font-semibold aui-text-strong">Guidance</p>
-            <div className="mt-3 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Show shortcuts only where the action is relevant. Repeating the same hint everywhere weakens it.</p>
-              <p>Use concise labels like `Ctrl`, `Cmd`, `Shift`, `Enter`, not long prose inside the chip.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/mention-input/index.ts

@@ -1,3 +0,0 @@
-export { mentionInputMock } from "./mock"
-export { MentionInputShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/mention-input/mock.ts

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const mentionInputMock: ComponentDemoMock = {
-  code: `import { MentionInput } from "@/index"
-
-export function Example() {
-  return (
-    <MentionInput
-      value="Assign @alice and @bob."
-      options={[{ label: "Alice", value: "alice" }, { label: "Bob", value: "bob" }]}
-      onValueChange={(value) => console.log(value)}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add mention-input",
-  highlights: [
-    "Trigger-based suggestion filtering",
-    "Keyboard navigation for suggestions",
-    "Auto insert with controlled value",
-  ],
-  scenarios: [
-    { title: "Comments", description: "Mention teammates in internal notes." },
-    { title: "Chat input", description: "Add quick user references while composing." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/mention-input/showcase.tsx

@@ -1,27 +0,0 @@
-import * as React from "react"
-
-import { MentionInput } from "@/index"
-
-const defaultOptions = [
-  { label: "Alice", value: "alice" },
-  { label: "Bob", value: "bob" },
-  { label: "Charlie", value: "charlie" },
-]
-
-export function MentionInputShowcase() {
-  const [value, setValue] = React.useState("Hi @alice, please review this task.")
-  const [mentions, setMentions] = React.useState<string[]>([])
-
-  return (
-    <div className="space-y-3">
-      <MentionInput
-        value={value}
-        options={defaultOptions}
-        onValueChange={setValue}
-        onMentionSelect={(selected) => setMentions((current) => [...new Set([...current, selected])])}
-      />
-      <p className="text-sm text-muted-foreground">Inserted mentions: {mentions.join(", ") || "None"}</p>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/skeleton-form/index.ts

@@ -1,3 +0,0 @@
-export { skeletonFormMock } from "./mock"
-export { SkeletonFormShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/skeleton-form/mock.ts

@@ -1,20 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const skeletonFormMock: ComponentDemoMock = {
-  code: `import { SkeletonForm } from "@/index"
-
-export function Example() {
-  return <SkeletonForm fields={3} showTitle columns={2} />
-}`,
-  cliCommand: "npx tembro add skeleton-form",
-  highlights: [
-    "Form-first loading states that preserve field rhythm",
-    "Supports one- or two-column layouts",
-    "Optional title and action skeleton areas",
-  ],
-  scenarios: [
-    { title: "Settings", description: "Keep form layout stable while waiting for data." },
-    { title: "Create form", description: "Match final structure without exposing layout jitter." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/skeleton-form/showcase.tsx

@@ -1,34 +0,0 @@
-import * as React from "react"
-
-import { Button, SkeletonForm } from "@/index"
-
-export function SkeletonFormShowcase() {
-  const [fields, setFields] = React.useState(4)
-  const [columns, setColumns] = React.useState<1 | 2>(1)
-  const [showActions, setShowActions] = React.useState(true)
-
-  return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap gap-2">
-        <Button size="sm" variant={fields === 3 ? "default" : "outline"} onClick={() => setFields(3)}>
-          3 fields
-        </Button>
-        <Button size="sm" variant={fields === 4 ? "default" : "outline"} onClick={() => setFields(4)}>
-          4 fields
-        </Button>
-        <Button size="sm" variant={columns === 1 ? "default" : "outline"} onClick={() => setColumns(1)}>
-          1 column
-        </Button>
-        <Button size="sm" variant={columns === 2 ? "default" : "outline"} onClick={() => setColumns(2)}>
-          2 columns
-        </Button>
-        <Button size="sm" variant={showActions ? "default" : "outline"} onClick={() => setShowActions((value) => !value)}>
-          {showActions ? "Actions" : "No actions"}
-        </Button>
-      </div>
-
-      <SkeletonForm fields={fields} columns={columns} showActions={showActions} />
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/skeleton-table/index.ts

@@ -1,3 +0,0 @@
-export { skeletonTableMock } from "./mock"
-export { SkeletonTableShowcase } from "./showcase"
-

package/packages/cli/vendor/src/showcase/premium/skeleton-table/mock.ts

@@ -1,20 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const skeletonTableMock: ComponentDemoMock = {
-  code: `import { SkeletonTable } from "@/index"
-
-export function Example() {
-  return <SkeletonTable rows={4} columns={4} showHeader showToolbar />
-}`,
-  cliCommand: "npx tembro add skeleton-table",
-  highlights: [
-    "Compact placeholder for async table loading",
-    "Supports header and action bar variants",
-    "Good fit during first-load and refetch states",
-  ],
-  scenarios: [
-    { title: "Data pages", description: "Replace with table body after fetch completes." },
-    { title: "Search results", description: "Keep layout stable while filters run." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/skeleton-table/showcase.tsx

@@ -1,37 +0,0 @@
-import * as React from "react"
-
-import { Button, SkeletonTable } from "@/index"
-
-export function SkeletonTableShowcase() {
-  const [showToolbar, setShowToolbar] = React.useState(true)
-  const [columns, setColumns] = React.useState(4)
-  const [rows, setRows] = React.useState(4)
-
-  return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap gap-2">
-        <Button size="sm" variant={showToolbar ? "default" : "outline"} onClick={() => setShowToolbar((value) => !value)}>
-          Toolbar
-        </Button>
-        <Button size="sm" onClick={() => setColumns(3)} variant="outline">
-          3 cols
-        </Button>
-        <Button size="sm" onClick={() => setColumns(4)} variant="outline">
-          4 cols
-        </Button>
-        <Button size="sm" onClick={() => setColumns(5)} variant="outline">
-          5 cols
-        </Button>
-        <Button size="sm" onClick={() => setRows(3)} variant="outline">
-          3 rows
-        </Button>
-        <Button size="sm" onClick={() => setRows(6)} variant="outline">
-          6 rows
-        </Button>
-      </div>
-
-      <SkeletonTable rows={rows} columns={columns} showHeader showToolbar={showToolbar} />
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/stack/index.ts

@@ -1,2 +0,0 @@
-export { stackMock } from "./mock"
-export { StackShowcase } from "./showcase"

package/packages/cli/vendor/src/showcase/premium/stack/mock.ts

@@ -1,25 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const stackMock: ComponentDemoMock = {
-  code: `import { Button, Stack } from "@/index"
-
-export function Example() {
-  return (
-    <Stack gap="lg" splitAfter={<Button size="sm">Secondary</Button>}>
-      <div className="text-sm">Primary action</div>
-      <div className="text-sm">Status line</div>
-    </Stack>
-  )
-}`,
-  cliCommand: "npx tembro add stack",
-  highlights: [
-    "Flexible vertical layout helper",
-    "Split insert points without extra wrappers",
-    "Consistent spacing with simple gap presets",
-  ],
-  scenarios: [
-    { title: "Form stack", description: "Stable form section spacing." },
-    { title: "Card body", description: "Build readable content groups quickly." },
-    { title: "Settings page", description: "Keep labels and controls in order." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/stack/showcase.tsx

@@ -1,22 +0,0 @@
-import { Button, Divider, Stack } from "@/index"
-
-export function StackShowcase() {
-  return (
-    <div className="space-y-4">
-      <Stack gap="sm">
-        <p className="text-sm text-muted-foreground">Small gap stack keeps controls close.</p>
-        <Button size="sm">Primary</Button>
-        <Button size="sm" variant="outline">
-          Secondary
-        </Button>
-      </Stack>
-
-      <Divider />
-
-      <Stack gap="xl" splitAfter={<p className="text-sm text-muted-foreground">Action barrier</p>}>
-        <p className="text-sm">Large gap for grouped blocks.</p>
-        <p className="text-sm">SplitAfter inserts a stable divider point without nested wrappers.</p>
-      </Stack>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/tag-list/index.ts

@@ -1,2 +0,0 @@
-export { tagListMock } from "./mock"
-export { TagListShowcase } from "./showcase"

package/packages/cli/vendor/src/showcase/premium/tag-list/mock.ts

@@ -1,27 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const tagListMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { TagList } from "@/index"
-
-export function Example() {
-  const [items, setItems] = React.useState([
-    { key: "react", label: "React" },
-    { key: "typescript", label: "TypeScript" },
-    { key: "design-system", label: "Design system" },
-  ])
-
-  return <TagList items={items} removable onRemove={(item) => setItems((list) => list.filter((entry) => entry.key !== item.key))} />
-}`,
-  cliCommand: "npx tembro add tag-list",
-  highlights: [
-    "Compact badge-based collection of labels",
-    "Optional remove actions for editable taxonomies",
-    "Useful for skills, filters, product areas, and metadata chips",
-  ],
-  scenarios: [
-    { title: "Skill chips", description: "Show categorized labels without building a full tag input field." },
-    { title: "Selected filters", description: "Summarize active states at the top of a page." },
-    { title: "Editable metadata", description: "Allow small remove actions on existing labels." },
-  ],
-}