tembro 1.0.0

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

@@ -0,0 +1,160 @@
+import * as React from "react"
+
+import { Badge, Button, CommandPalette, Kbd } from "@/index"
+
+import type { CommandPaletteGroup, CommandPaletteItem } from "@/components/command/command-palette"
+import type { ComponentDemoProps } from "../types"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+function wait(ms: number) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms))
+}
+
+export function CommandPaletteShowcase({ mode }: ComponentDemoProps) {
+  const [open, setOpen] = React.useState(false)
+  const [lastAction, setLastAction] = React.useState("Nothing selected yet")
+
+  const groups = React.useMemo<CommandPaletteGroup[]>(
+    () => [
+      {
+        id: "routes",
+        label: "Routes",
+        items: [
+          {
+            id: "overview",
+            label: "Open overview",
+            description: "Jump to the workspace summary route.",
+            shortcut: <Kbd>G O</Kbd>,
+            onSelect: async () => {
+              await wait(220)
+              setLastAction("Opened overview route")
+            },
+          },
+          {
+            id: "billing",
+            label: "Open billing",
+            description: "Inspect invoices, methods, and workspace usage.",
+            shortcut: <Kbd>G B</Kbd>,
+            onSelect: async () => {
+              await wait(220)
+              setLastAction("Opened billing route")
+            },
+          },
+        ],
+      },
+      {
+        id: "actions",
+        label: "Actions",
+        items: [
+          {
+            id: "invite",
+            label: "Invite teammate",
+            description: "Start workspace access flow.",
+            shortcut: <Kbd>⌘I</Kbd>,
+            onSelect: async () => {
+              await wait(220)
+              setLastAction("Invite flow started")
+            },
+          },
+          {
+            id: "export",
+            label: "Export report",
+            description: "Download usage summary as CSV.",
+            shortcut: <Kbd>⌘E</Kbd>,
+            onSelect: async () => {
+              await wait(220)
+              setLastAction("Export requested")
+            },
+          },
+        ],
+      },
+      {
+        id: "workspace",
+        label: "Workspace search",
+        loadingLabel: "Searching workspace...",
+        emptyLabel: "No matching workspace entities.",
+        loadItems: async (search) => {
+          await wait(260)
+          const base: CommandPaletteItem[] = [
+            { id: "acme", label: "Acme Growth", description: "Customer workspace", value: "acme growth customer workspace" },
+            { id: "north", label: "Northwind Ops", description: "Operations team", value: "northwind ops operations team" },
+            { id: "invoice", label: "Invoice 2048", description: "Billing entity", value: "invoice 2048 billing entity" },
+          ]
+          const normalized = search.trim().toLowerCase()
+          return normalized ? base.filter((item) => String(item.value ?? item.label).toLowerCase().includes(normalized)) : base
+        },
+      },
+    ],
+    []
+  )
+
+  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">Global actions</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Command palette should collapse navigation and actions into one fast surface</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              Good command UX combines routes, actions, and async workspace search without looking like a giant modal form.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Recent-aware</Badge>
+            <Badge variant="outline" className="rounded-full">Async search</Badge>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <p className="text-sm font-medium aui-text-muted">Try the live surface</p>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">Open the palette, trigger route jumps, or type to load workspace entities.</p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button onClick={() => setOpen(true)}>Open palette</Button>
+            <Badge variant="outline" className="rounded-full"><Kbd>Ctrl</Kbd> + <Kbd>K</Kbd></Badge>
+          </div>
+        </div>
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Last action</p>
+          <p className="mt-3 text-base font-medium aui-text-strong">{lastAction}</p>
+          <p className="mt-2 text-sm leading-6 aui-text-muted">Command results should feel immediate and operational.</p>
+        </section>
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Design rule</p>
+          <p className="mt-3 text-sm leading-6 aui-text-muted">
+            Keep command labels short, searchable, and verb-first. Async groups should behave like results, not like a second UI inside the modal.
+          </p>
+        </section>
+      </div>
+
+      <CommandPalette
+        open={open}
+        onOpenChange={setOpen}
+        placeholder="Search routes and actions..."
+        groups={groups}
+        recent
+      />
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <div className="flex flex-wrap gap-2">
+            <Button size="sm" variant="outline" onClick={() => setOpen(true)}>
+              Reopen palette
+            </Button>
+            <Button size="sm" variant="outline" onClick={() => setLastAction("Nothing selected yet")}>
+              Reset output
+            </Button>
+          </div>
+        </section>
+      ) : null}
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/confirm-dialog/index.ts

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

package/packages/cli/vendor/src/showcase/premium/confirm-dialog/mock.ts

@@ -0,0 +1,59 @@
+import type { ComponentDemoMock } from "../types"
+
+export const confirmDialogMock: ComponentDemoMock = {
+  code: `import { useState } from "react"
+import { Button, ConfirmDialog } from "@/index"
+
+export function Example() {
+  const [open, setOpen] = useState(false)
+  const [busy, setBusy] = useState(false)
+
+  async function handleConfirm() {
+    setBusy(true)
+    await new Promise((resolve) => setTimeout(resolve, 900))
+    setBusy(false)
+    setOpen(false)
+  }
+
+  return (
+    <div className="space-y-3">
+      <Button onClick={() => setOpen(true)} variant="destructive">
+        Delete project
+      </Button>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Delete project?"
+        description="This action cannot be undone. Team members will lose access immediately."
+        confirmText="Delete forever"
+        confirmVariant="destructive"
+        isLoading={busy}
+        onCancel={() => setOpen(false)}
+        onConfirm={handleConfirm}
+      />
+    </div>
+  )
+}`,
+  htmlCode: `<button data-slot="confirm-trigger">Delete project</button>`,
+  cliCommand: "npx tembro add confirm-dialog",
+  highlights: [
+    "Controlled confirm flow",
+    "Destructive tone and explicit labels",
+    "Async confirm loading state",
+    "Cancel-first safety behavior",
+  ],
+  relatedBlockSlugs: ["settings-form", "crm-dashboard", "dashboard-starter"],
+  scenarios: [
+    { title: "Destructive confirm", description: "Use explicit confirm wording for irreversible actions." },
+    { title: "Async confirmation", description: "Keep action button loading while server side mutation is running." },
+    { title: "Safe cancel", description: "Allow immediate escape via cancel or outside interactions if supported." },
+    { title: "Context-rich dialog", description: "Always include title and short description that explain impact." },
+  ],
+  capabilityNotes: [
+    "Use ConfirmDialog where user intent is high-risk and needs explicit language.",
+    "Keep confirm labels noun-first (`Delete workspace`) to reduce ambiguity.",
+    "Tie `isLoading` to async mutation state and close only on success.",
+    "Avoid reusing default labels for destructive flows.",
+  ],
+}
+

package/packages/cli/vendor/src/showcase/premium/confirm-dialog/showcase.tsx

@@ -0,0 +1,93 @@
+import * as React from "react"
+
+import { Badge, Button, ConfirmDialog } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function ConfirmDialogShowcase({ mode }: ComponentDemoProps) {
+  const [open, setOpen] = React.useState(false)
+  const [readonlyOpen, setReadonlyOpen] = React.useState(false)
+  const [busy, setBusy] = React.useState(false)
+
+  async function handleConfirm() {
+    setBusy(true)
+    await new Promise((resolve) => setTimeout(resolve, 700))
+    setBusy(false)
+    setOpen(false)
+  }
+
+  return (
+    <div className="space-y-0">
+      <section className="pb-6">
+        <div className="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
+          <div className="max-w-xl">
+            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Confirm dialog</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Use it only for explicit checkpoints</h3>
+            <p className="mt-3 text-sm leading-6 aui-text-muted">Deletion, archive, publish, or save confirmation should require one clear yes or no.</p>
+          </div>
+
+          <div className="grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]">
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">State</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{busy ? "Busy" : "Idle"}</p>
+            </div>
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Risk</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">High</p>
+            </div>
+            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Route</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{mode === "playground" ? "Interactive" : "Docs"}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="flex flex-wrap gap-3">
+          <Button onClick={() => setOpen(true)}>Open destructive confirm</Button>
+          <Button variant="outline" onClick={() => setReadonlyOpen(true)}>Open save confirm</Button>
+          <Badge variant="outline">{busy ? "Waiting for confirm" : "Ready"}</Badge>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="border-y border-[color:var(--aui-divider)]">
+          {[
+            "Keep the action label outcome-specific.",
+            "Do not use confirm dialog for long forms or multi-step review.",
+            "Mutation state should stay controlled from the page.",
+          ].map((item) => (
+            <div key={item} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
+              {item}
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Delete resource?"
+        description="You are about to remove a production resource. This action is irreversible."
+        confirmText="Delete"
+        confirmVariant="destructive"
+        isLoading={busy}
+        onCancel={() => setOpen(false)}
+        onConfirm={handleConfirm}
+      />
+
+      <ConfirmDialog
+        open={readonlyOpen}
+        onOpenChange={setReadonlyOpen}
+        title="Save profile changes"
+        description="Keep existing values if this is a draft state."
+        confirmText="Save changes"
+        onCancel={() => setReadonlyOpen(false)}
+        onConfirm={() => setReadonlyOpen(false)}
+      />
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,28 @@
+import type { ComponentDemoMock } from "../types"
+
+export const copyButtonMock: ComponentDemoMock = {
+  code: `import { CopyButton } from "@/index"
+
+export function Example() {
+  return (
+    <CopyButton
+      value="sk_live_demo_123"
+      copyLabel="Copy token"
+      copiedLabel="Copied"
+      variant="outline"
+      size="sm"
+    />
+  )
+}`,
+  cliCommand: "npx tembro add copy-button",
+  highlights: [
+    "Built-in copied feedback state",
+    "Works with the exported Button API surface",
+    "Useful for tokens, links, invite codes, and IDs",
+  ],
+  scenarios: [
+    { title: "Token copy", description: "Copy secret-like values without opening a secondary modal." },
+    { title: "Share link", description: "Inline copy action beside invite or embed links." },
+    { title: "Row action", description: "Small copy affordance inside a dense operational table." },
+  ],
+}

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

@@ -0,0 +1,62 @@
+import * as React from "react"
+
+import { Badge, CopyButton, Input } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function CopyButtonShowcase() {
+  const [token, setToken] = React.useState("sk_live_workspace_28A91X")
+  const [copiedValue, setCopiedValue] = React.useState("")
+
+  return (
+    <div className="space-y-0">
+      <section className="pb-6">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed action</p>
+        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">CopyButton handles inline copy feedback cleanly</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          It should replace one-off clipboard wrappers in tokens, invite links, integration keys, and compact table rows.
+        </p>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
+          <div>
+            <p className="text-lg font-semibold aui-text-strong">API token row</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              A copy action should sit directly beside the value it belongs to and confirm success immediately.
+            </p>
+            <div className="mt-5 flex flex-col gap-3 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4 sm:flex-row sm:items-center">
+              <Input value={token} onValueChange={setToken} className="flex-1" />
+              <CopyButton
+                value={token}
+                variant="outline"
+                copyLabel="Copy token"
+                copiedLabel="Copied"
+                onCopied={setCopiedValue}
+              />
+            </div>
+          </div>
+
+          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <p className="text-sm font-semibold aui-text-strong">Last copied value</p>
+                <p className="mt-1 text-xs aui-text-muted">The component exposes hooks so products can log or toast on success.</p>
+              </div>
+              <Badge variant={copiedValue ? "secondary" : "outline"}>{copiedValue ? "Copied" : "Idle"}</Badge>
+            </div>
+            <p className="mt-4 break-all text-sm leading-6 aui-text-muted">{copiedValue || "No value copied yet."}</p>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="flex flex-wrap items-center gap-3">
+          <CopyButton value="INV-2026-00482" size="sm" variant="outline" copyLabel="Copy invoice id" />
+          <CopyButton value="https://tembro.dev/invite/team-ops" variant="secondary" copyLabel="Copy invite link" />
+          <CopyButton value="workspace_admin" variant="ghost" copyLabel="Copy role" />
+        </div>
+      </section>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/copy-field/index.ts

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

package/packages/cli/vendor/src/showcase/premium/copy-field/mock.ts

@@ -0,0 +1,26 @@
+import type { ComponentDemoMock } from "../types"
+
+export const copyFieldMock: ComponentDemoMock = {
+  code: `import { CopyField } from "@/index"
+
+export function Example() {
+  return (
+    <CopyField
+      label="Webhook signing secret"
+      description="Use on the server only."
+      value="whsec_demo_value_123"
+    />
+  )
+}`,
+  cliCommand: "npx tembro add copy-field",
+  highlights: [
+    "Label, helper text, value surface, and copy action in one unit",
+    "Works well for tokens, endpoints, environment values, and invite links",
+    "Monospace value mode for technical strings",
+  ],
+  scenarios: [
+    { title: "Webhook secret", description: "Expose a technical value with safety copy and one clear action." },
+    { title: "Endpoint URL", description: "Share a connection string without making the user select text manually." },
+    { title: "Invite code", description: "Package title and value together inside a settings screen." },
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/copy-field/showcase.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+
+import { Badge, CopyField } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+const values = {
+  secret: "whsec_workspace_live_72AJK1P",
+  endpoint: "https://api.tembro.dev/webhooks/events",
+  invite: "ops-release-2026",
+}
+
+export function CopyFieldShowcase() {
+  const [selected, setSelected] = React.useState<keyof typeof values>("secret")
+
+  return (
+    <div className="space-y-0">
+      <section className="pb-6">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed action</p>
+        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">CopyField is the complete value + action row</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          Use it when a technical or shareable string needs label, explanation, and copy action together.
+        </p>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
+          <div className="space-y-4">
+            <CopyField
+              label="Webhook signing secret"
+              description="Store this on the server only."
+              value={values.secret}
+              copyButtonProps={{ onCopied: () => setSelected("secret") }}
+            />
+            <CopyField
+              label="Event endpoint"
+              description="Public endpoint that receives signed events."
+              value={values.endpoint}
+              copyButtonProps={{ onCopied: () => setSelected("endpoint"), copyLabel: "Copy url" }}
+            />
+            <CopyField
+              label="Invite code"
+              description="Share this with internal release reviewers."
+              value={values.invite}
+              monospace={false}
+              copyButtonProps={{ onCopied: () => setSelected("invite"), variant: "secondary" }}
+            />
+          </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">Recently used row</p>
+              <Badge variant="secondary">{selected}</Badge>
+            </div>
+            <div className="mt-4 space-y-3 text-sm leading-6 aui-text-muted">
+              <p>CopyField is stronger than a naked button because the user never loses context about what will be copied.</p>
+              <p>Prefer it on settings and integration pages. In dense tables, CopyButton alone is usually enough.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/data-state/index.ts

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

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

@@ -0,0 +1,27 @@
+import type { ComponentDemoMock } from "../types"
+
+export const dataStateMock: ComponentDemoMock = {
+  code: `import { DataState } from "@/index"
+
+export function Example() {
+  return (
+    <DataState
+      status="error"
+      title="Unable to load rows"
+      description="Try again after refreshing the request."
+      onRetry={() => {}}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add data-state",
+  highlights: [
+    "Idle, loading, empty, error and success state surface",
+    "Optional retry action and custom content area",
+    "Useful for panels or data-heavy cards that need clearer fallback than a spinner alone",
+  ],
+  scenarios: [
+    { title: "Error panel", description: "Show failed request recovery without replacing the whole page." },
+    { title: "Empty data", description: "Clarify that the query worked but returned nothing." },
+    { title: "Loading panel", description: "Reserve the panel shell while async work completes." },
+  ],
+}

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

@@ -0,0 +1,53 @@
+import * as React from "react"
+
+import { Button, DataState } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function DataStateShowcase() {
+  const [status, setStatus] = React.useState<"loading" | "empty" | "error" | "success">("loading")
+
+  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">DataState is the panel-level fallback surface</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          Use it when a card or module needs explicit state handling beyond a raw spinner or empty paragraph.
+        </p>
+      </section>
+
+      <section className={panelClass}>
+        <div className="flex flex-wrap gap-2">
+          {(["loading", "empty", "error", "success"] as const).map((item) => (
+            <Button key={item} size="sm" variant={status === item ? "secondary" : "outline"} onClick={() => setStatus(item)}>
+              {item}
+            </Button>
+          ))}
+        </div>
+
+        <div className="mt-5">
+          <DataState
+            status={status}
+            title={
+              status === "success"
+                ? "Data ready"
+                : status === "error"
+                  ? "Unable to load metrics"
+                  : undefined
+            }
+            description={
+              status === "success"
+                ? "The request completed and the panel can continue rendering detail content."
+                : status === "error"
+                  ? "The upstream request failed. Retry the panel request before leaving the route."
+                  : undefined
+            }
+            onRetry={status === "error" ? () => setStatus("loading") : undefined}
+            actions={status === "success" ? <Button size="sm" variant="outline">Open details</Button> : undefined}
+          />
+        </div>
+      </section>
+    </div>
+  )
+}

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

@@ -0,0 +1,66 @@
+import type { DataTableDemoPreset, DataTableDemoRow, DataTableDemoToolbarAction } from "./types"
+
+const customers = ["Acme Inc.", "Larana", "ShipFast", "Toolpad", "Pixels UI", "Northstar"] as const
+const owners = ["Azamat", "Malika", "Sardor", "Nodira", "Asadbek", "Kamola"] as const
+const channels = ["Direct", "Partner", "Direct", "Marketplace", "Marketplace", "Direct"] as const
+const statuses = ["Paid", "Review", "Draft", "Paid", "Overdue", "Paid"] as const
+const amounts = ["$2,400", "$1,280", "$980", "$4,120", "$860", "$3,620"] as const
+const amountValues = [2400, 1280, 980, 4120, 860, 3620] as const
+const updatedLabels = ["2h ago", "4h ago", "Today", "1d ago", "1d ago", "2d ago"] as const
+const stocks = [48, 16, 8, 63, 4, 28] as const
+const items = [12, 5, 3, 18, 2, 9] as const
+const trends = ["up", "steady", "down", "up", "down", "up"] as const
+
+export const dataTableDemoRows: DataTableDemoRow[] = customers.map((customer, index) => ({
+  invoice: `INV-00${index + 1}`,
+  order: `#448${index + 2}`,
+  customer,
+  owner: owners[index],
+  channel: channels[index],
+  status: statuses[index],
+  stock: stocks[index],
+  items: items[index],
+  amount: amounts[index],
+  amountValue: amountValues[index],
+  trend: trends[index],
+  updatedAt: updatedLabels[index],
+}))
+
+export function buildDataTableDemoRows(rowCount: number): DataTableDemoRow[] {
+  const safeRowCount = Math.max(1, Math.min(120, Math.floor(rowCount)))
+
+  return Array.from({ length: safeRowCount }, (_, index) => {
+    const base = dataTableDemoRows[index % dataTableDemoRows.length]
+    const cycle = Math.floor(index / dataTableDemoRows.length)
+    const invoiceNumber = String(index + 1).padStart(3, "0")
+    const orderNumber = 4482 + index
+    const amountValue = base.amountValue + cycle * 175
+    const amount = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }).format(amountValue)
+
+    return {
+      ...base,
+      invoice: `INV-${invoiceNumber}`,
+      order: `#${orderNumber}`,
+      amount,
+      amountValue,
+      stock: base.stock + cycle * 2,
+      items: base.items + (index % 3 === 0 ? cycle : 0),
+      updatedAt: cycle === 0 ? base.updatedAt : `${cycle + 1}d ago`,
+    }
+  })
+}
+
+export const dataTableToolbarActions: DataTableDemoToolbarAction[] = ["Export CSV", "Sync"].map((label) => ({
+  label,
+  variant: label === "Export CSV" ? "default" : "outline",
+}))
+
+export const dataTableDemoPresets: DataTableDemoPreset[] = [
+  { value: "all", label: "All invoices", description: "All rows." },
+  { value: "finance", label: "Finance review", description: "Paid + review." },
+  { value: "at-risk", label: "At risk", description: "Draft + overdue." },
+]