tembro 1.0.0

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

@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { Badge, ClearableInput } 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 ClearableInputShowcase({ mode }: ComponentDemoProps) {
+  const [value, setValue] = React.useState("workspace token")
+
+  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">Utility input</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">ClearableInput should remove friction from repetitive short entry</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              This control exists for fields people revise often. Clear has to feel instant and keep focus where the user already is.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Escape clear</Badge>
+            <Badge variant="outline" className="rounded-full">Focus restore</Badge>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <ClearableInput
+          value={value}
+          onValueChange={setValue}
+          placeholder="Filter or paste value..."
+          clearOnEscape
+        />
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Current value</p>
+          <p className="mt-3 text-base font-medium aui-text-strong">{value || "Empty"}</p>
+        </section>
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Usage note</p>
+          <p className="mt-3 text-sm leading-6 aui-text-muted">
+            Good for toolbar filters, small token fields, and any place users repeatedly enter and clear short text.
+          </p>
+        </section>
+      </div>
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <p className="text-sm aui-text-muted">`Escape` bosib ham clear bo‘lishini sinab ko‘ring.</p>
+        </section>
+      ) : null}
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/code-block/index.ts

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

package/packages/cli/vendor/src/showcase/premium/code-block/mock.ts

@@ -0,0 +1,22 @@
+import type { ComponentDemoMock } from "../types"
+
+export const codeBlockMock: ComponentDemoMock = {
+  code: `import { CodeBlock } from "@/index"
+
+const snippet = \`npx tembro add button select\`
+
+export function Example() {
+  return <CodeBlock title="CLI" language="bash" code={snippet} />
+}`,
+  cliCommand: "npx tembro add code-block",
+  highlights: [
+    "Header with title, language and built-in copy action",
+    "Supports long wrapped snippets or horizontal scroll",
+    "Useful for CLI, config and docs snippets",
+  ],
+  scenarios: [
+    { title: "CLI docs", description: "Show install or add commands with fast copy action." },
+    { title: "Config snippet", description: "Render small code samples without building a syntax highlighter." },
+    { title: "Response sample", description: "Present payload examples in compact technical docs." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/code-block/showcase.tsx

@@ -0,0 +1,45 @@
+import { Badge, CodeBlock } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+const installSnippet = `npx tembro init
+npx tembro add button input data-table`
+
+const cssSnippet = `:root {
+  --aui-card-radius: 18px;
+  --aui-card-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
+}`
+
+export function CodeBlockShowcase() {
+  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">CodeBlock keeps docs snippets clean and copyable</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          Use it for short technical snippets where product docs need clean framing, title, language label and inline copy.
+        </p>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
+          <div className="space-y-4">
+            <CodeBlock title="Install" language="bash" code={installSnippet} />
+            <CodeBlock title="Token override" language="css" code={cssSnippet} wrap />
+          </div>
+
+          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-sm font-semibold aui-text-strong">Use when</p>
+              <Badge variant="secondary">Docs</Badge>
+            </div>
+            <div className="mt-3 space-y-3 text-sm leading-6 aui-text-muted">
+              <p>Prefer CodeBlock when the snippet itself is the content. Do not wrap every small inline token in a code panel.</p>
+              <p>For long articles or syntax-highlighting needs, you may still layer a richer renderer around the same route.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,40 @@
+import type { ComponentDemoMock } from "../types"
+
+export const collapseMock: ComponentDemoMock = {
+  code: `import { CollapseGroup } from "tembro"
+
+const sections = [
+  {
+    key: "permissions",
+    title: "Permissions",
+    description: "Who can publish and archive components.",
+    content: "Owners can publish. Editors can update docs. Viewers can inspect previews only.",
+  },
+  {
+    key: "release",
+    title: "Release notes",
+    description: "What changed in this version.",
+    content: "Added Tooltip, Combobox and Collapse public docs surfaces.",
+  },
+]
+
+export function Example() {
+  return <CollapseGroup items={sections} type="single" defaultValue="permissions" />
+}`,
+  htmlCode: `<details data-slot="collapse"><summary>Open details</summary></details>`,
+  cliCommand: "npx tembro add collapse",
+  highlights: ["Progressive disclosure", "Single or multiple open items", "Dense settings layout", "Controlled group state"],
+  relatedBlockSlugs: ["settings-form", "dashboard-starter", "crm-dashboard"],
+  scenarios: [
+    { title: "FAQ and settings", description: "Reveal more detail without turning the page into a long wall of text." },
+    { title: "Release notes", description: "Show secondary information only when the user asks for it." },
+    { title: "Admin sections", description: "Useful in compact pages where every line of space matters." },
+  ],
+  capabilityNotes: [
+    "Use Collapse when the default page should stay compact but details must remain nearby.",
+    "For one-open-at-a-time behavior, prefer `CollapseGroup` with `type=\"single\"`.",
+    "Do not hide critical validation or destructive warnings inside collapsed content.",
+    "Keep titles scannable so users know what each section reveals before opening it.",
+  ],
+}
+

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

@@ -0,0 +1,107 @@
+import * as React from "react"
+
+import { Badge, Button, Collapse, CollapseContent, CollapseGroup, CollapseTrigger } from "@/index"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+const collapseItems = [
+  {
+    key: "permissions",
+    title: "Permissions",
+    description: "Who can publish, archive, and rename library surfaces.",
+    content: "Owners can publish. Editors can update docs. Reviewers can inspect previews and comment on API shape.",
+  },
+  {
+    key: "release",
+    title: "Release notes",
+    description: "What changed in the current package cycle.",
+    content: "This release opened more public docs coverage for interactive form and overlay surfaces.",
+  },
+  {
+    key: "handoff",
+    title: "Handoff checklist",
+    description: "What must be checked before a public release.",
+    content: "Typecheck, lint, build, smoke routes, verify copy feedback, and confirm component docs route integrity.",
+  },
+] as const
+
+export function CollapseShowcase() {
+  const [open, setOpen] = React.useState(false)
+  const [groupValue, setGroupValue] = React.useState<string | string[]>("permissions")
+
+  const normalizedGroupValue = Array.isArray(groupValue) ? groupValue.join(", ") || "none" : groupValue || "none"
+
+  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">Progressive disclosure</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Collapse should reduce page noise first</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              Keep the default surface compact, then reveal secondary information only when the user chooses to inspect it.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Single item</Badge>
+            <Badge variant="outline" className="rounded-full">Grouped items</Badge>
+            <Badge variant="outline" className="rounded-full">Controlled state</Badge>
+          </div>
+        </div>
+
+        <div className="mt-6 grid gap-4 xl:grid-cols-[0.95fr_1.05fr]">
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Single disclosure</p>
+            <div className="mt-3">
+              <Collapse open={open} onOpenChange={setOpen}>
+                <CollapseTrigger>Publish access rules</CollapseTrigger>
+                <CollapseContent>
+                  Owners can publish releases. Editors can update docs content. Reviewers can inspect previews without changing package state.
+                </CollapseContent>
+              </Collapse>
+            </div>
+          </div>
+
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Grouped disclosure</p>
+            <div className="mt-3">
+              <CollapseGroup
+                items={collapseItems.map((item) => ({ ...item }))}
+                type="single"
+                value={groupValue}
+                onValueChange={setGroupValue}
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Live state</p>
+            <h4 className="mt-2 text-lg font-semibold aui-text-strong">
+              Single item: {open ? "open" : "closed"} | Group: {normalizedGroupValue}
+            </h4>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">
+              Use quick actions to verify controlled open state without relying only on the disclosure click target.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button type="button" size="sm" onClick={() => setOpen(true)}>
+              Open single
+            </Button>
+            <Button type="button" size="sm" variant="secondary" onClick={() => setOpen(false)}>
+              Close single
+            </Button>
+            <Button type="button" size="sm" variant="outline" onClick={() => setGroupValue("release")}>
+              Open release
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,47 @@
+import type { ComponentDemoMock } from "../types"
+
+export const comboboxMock: ComponentDemoMock = {
+  code: `import { useState } from "react"
+import { Button, Combobox } from "@/index"
+
+const teammateOptions = [
+  { value: "azamat", label: "Azamat", description: "Design system owner" },
+  { value: "nodira", label: "Nodira", description: "Operations lead" },
+  { value: "sardor", label: "Sardor", description: "Frontend engineer" },
+]
+
+export function Example() {
+  const [value, setValue] = useState("azamat")
+
+  return (
+    <div className="space-y-3">
+      <Combobox
+        value={value}
+        onValueChange={(nextValue) => setValue(nextValue ?? "azamat")}
+        options={teammateOptions}
+        placeholder="Assign owner"
+        searchPlaceholder="Search teammate..."
+      />
+      <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm aui-text-muted">
+        Current owner: <strong>{value}</strong>
+      </div>
+      <Button variant="outline" onClick={() => setValue("nodira")}>Pick Nodira</Button>
+    </div>
+  )
+}`,
+  htmlCode: `<button data-slot="combobox-trigger">Open combobox</button>`,
+  cliCommand: "npx tembro add combobox",
+  highlights: ["Search-led selection", "Controlled value", "Description rows", "Fast reassignment flow"],
+  relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
+  scenarios: [
+    { title: "Owner assignment", description: "Use combobox when the list is local but still benefits from search." },
+    { title: "Dense admin forms", description: "Keep reassignment fast without opening a full modal." },
+    { title: "Command-like search", description: "Useful when discoverability matters more than plain select semantics." },
+  ],
+  capabilityNotes: [
+    "Use Combobox when users need type-to-find behavior on a local option set.",
+    "Keep option labels and descriptions short to avoid noisy dropdown rows.",
+    "Prefer controlled value in admin workflows so state stays explicit.",
+    "If options come from the server, move to AsyncSelect instead of overloading Combobox.",
+  ],
+}

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

@@ -0,0 +1,84 @@
+import { Badge, Button, Combobox } 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"
+
+const teammateOptions = [
+  { value: "azamat", label: "Azamat", description: "Design system owner" },
+  { value: "nodira", label: "Nodira", description: "Operations lead" },
+  { value: "sardor", label: "Sardor", description: "Frontend engineer" },
+  { value: "kamola", label: "Kamola", description: "Product manager" },
+] as const
+
+export function ComboboxShowcase({ state, setState }: ComponentDemoProps) {
+  const currentValue = teammateOptions.some((option) => option.value === state.selectValue) ? state.selectValue : "azamat"
+  const currentOption = teammateOptions.find((option) => option.value === currentValue) ?? teammateOptions[0]
+
+  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">Search selection</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Combobox is the keyboard-first local member</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              Use it when users know part of the option name and need to jump directly through local filtering instead of scanning a longer static Select list.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Searchable</Badge>
+            <Badge variant="outline" className="rounded-full">Controlled</Badge>
+            <Badge variant="outline" className="rounded-full">Local options</Badge>
+          </div>
+        </div>
+
+        <div className="mt-6 grid gap-4 xl:grid-cols-[1.1fr_0.9fr]">
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Assign component owner</p>
+            <div className="mt-3">
+              <Combobox
+                value={currentValue}
+                options={teammateOptions.map((option) => ({ ...option }))}
+                onValueChange={(value) => setState({ selectValue: value ?? "azamat" })}
+                placeholder="Choose teammate"
+                searchPlaceholder="Search teammate..."
+              />
+            </div>
+          </div>
+
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Selection summary</p>
+            <p className="mt-3 text-lg font-semibold aui-text-strong">{currentOption.label}</p>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">{currentOption.description}</p>
+            <p className="mt-3 text-sm leading-6 aui-text-muted">
+              Keep Combobox for local search-heavy reassignment flows. If options are remote, move back to the Select family and choose AsyncSelect instead.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Live state</p>
+            <h4 className="mt-2 text-lg font-semibold aui-text-strong">Current owner: {currentOption.label}</h4>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">
+              Use quick actions below to verify that the value stays controlled outside the dropdown itself.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button type="button" size="sm" onClick={() => setState({ selectValue: "nodira" })}>
+              Pick Nodira
+            </Button>
+            <Button type="button" size="sm" variant="secondary" onClick={() => setState({ selectValue: "azamat" })}>
+              Reset
+            </Button>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/command-bar/index.ts

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

package/packages/cli/vendor/src/showcase/premium/command-bar/mock.ts

@@ -0,0 +1,26 @@
+import type { ComponentDemoMock } from "../types"
+
+export const commandBarMock: ComponentDemoMock = {
+  code: `import { CommandBar, Kbd, Button } from "@/index"
+
+export function Example() {
+  return (
+    <CommandBar>
+      <Kbd>G</Kbd>
+      <Button size="sm" variant="ghost">Go to dashboard</Button>
+      <Button size="sm">Publish</Button>
+    </CommandBar>
+  )
+}`,
+  cliCommand: "npx tembro add command-bar",
+  highlights: [
+    "Floating action rail for global shortcuts or workflow actions",
+    "Top or bottom positioning",
+    "Useful when a few persistent actions should stay reachable",
+  ],
+  scenarios: [
+    { title: "Global actions", description: "Keep a small set of route-level actions always reachable." },
+    { title: "Keyboard hints", description: "Pair actions with shortcuts inside the same persistent rail." },
+    { title: "Review flow", description: "Float approve, reject, and comment actions over long content." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/command-bar/showcase.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { CheckIcon, MessageSquareIcon, XIcon } from "lucide-react"
+
+import { Button, CommandBar, Kbd } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function CommandBarShowcase() {
+  const [position, setPosition] = React.useState<"bottom" | "top">("bottom")
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <div className="space-y-0">
+      <section className="pb-6">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed navigation helper</p>
+        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">CommandBar keeps a few high-value actions nearby</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          This is not a replacement for every footer or toolbar. Use it when persistent floating actions improve a long reading or review flow.
+        </p>
+      </section>
+
+      <section className={panelClass}>
+        <div className="rounded-[28px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-6">
+          <div className="flex flex-wrap items-center gap-2">
+            <Button size="sm" variant={open ? "secondary" : "outline"} onClick={() => setOpen((value) => !value)}>
+              {open ? "Hide bar" : "Show bar"}
+            </Button>
+            <Button size="sm" variant={position === "bottom" ? "secondary" : "outline"} onClick={() => setPosition("bottom")}>
+              Bottom
+            </Button>
+            <Button size="sm" variant={position === "top" ? "secondary" : "outline"} onClick={() => setPosition("top")}>
+              Top
+            </Button>
+          </div>
+
+          <div className="relative mt-5 min-h-[320px] overflow-hidden rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5">
+            <div className="max-w-2xl">
+              <p className="text-lg font-semibold aui-text-strong">Quarterly release review</p>
+              <p className="mt-3 text-sm leading-6 aui-text-muted">
+                Long content benefits from a small floating action rail when the user must repeatedly approve, reject, or comment without scrolling back to a fixed footer.
+              </p>
+              <div className="mt-6 space-y-3 text-sm leading-6 aui-text-muted">
+                <p>Keep the action set intentionally small. More than three or four actions usually means the bar should become a real toolbar instead.</p>
+                <p>Pair shortcut hints with actions only when the shortcuts are actually supported by the product.</p>
+                <p>The bar should help reading-heavy workflows, not distract from them.</p>
+              </div>
+            </div>
+
+            <CommandBar open={open} position={position} className="max-w-[calc(100%-2rem)]">
+              <Kbd>G</Kbd>
+              <Button size="sm" variant="ghost">
+                <MessageSquareIcon className="mr-2 size-4" />
+                Comment
+              </Button>
+              <Button size="sm" variant="outline">
+                <XIcon className="mr-2 size-4" />
+                Reject
+              </Button>
+              <Button size="sm">
+                <CheckIcon className="mr-2 size-4" />
+                Approve
+              </Button>
+            </CommandBar>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/command-palette/index.ts

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

package/packages/cli/vendor/src/showcase/premium/command-palette/mock.ts

@@ -0,0 +1,39 @@
+import type { ComponentDemoMock } from "../types"
+
+export const commandPaletteMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { CommandPalette, Kbd } from "tembro"
+
+export function Example() {
+  const [open, setOpen] = React.useState(true)
+
+  return (
+    <CommandPalette
+      open={open}
+      onOpenChange={setOpen}
+      placeholder="Search routes and actions..."
+      groups={[
+        {
+          id: "routes",
+          label: "Routes",
+          items: [
+            { id: "overview", label: "Open overview", shortcut: <Kbd>G O</Kbd> },
+            { id: "billing", label: "Open billing", shortcut: <Kbd>G B</Kbd> },
+          ],
+        },
+      ]}
+    />
+  )
+}`,
+  highlights: ["Grouped commands", "Recent items", "Async load support", "Keyboard-first global navigation surface"],
+  scenarios: [
+    { title: "Route jump", description: "Move between product areas without reaching for sidebar navigation." },
+    { title: "Quick action", description: "Trigger create, invite, export, or sync flows from one searchable surface." },
+    { title: "Large workspace", description: "Merge static routes and async results into one command layer." },
+  ],
+  capabilityNotes: [
+    "Keep labels verb-led and searchable.",
+    "Use async groups for remote entities such as customers or projects.",
+    "Recent commands help repeated admin workflows feel much faster.",
+  ],
+}