tembro 3.1.17 → 4.0.0

package/packages/cli/vendor/src/showcase/premium/dropdown-menu/mock.ts

@@ -1,70 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const dropdownMenuMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuShortcut,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "tembro"
-
-export function Example() {
-  const [status, setStatus] = useState("private")
-  const [notifications, setNotifications] = useState(true)
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger>Open actions</DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel>Workspace actions</DropdownMenuLabel>
-        <DropdownMenuItem>Open workspace</DropdownMenuItem>
-        <DropdownMenuItem disabled>Delete from archive</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuCheckboxItem checked={notifications} onCheckedChange={(value) => setNotifications(Boolean(value))}>
-          Notification access
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem checked>
-          Show hidden sections
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuLabel>Visibility</DropdownMenuLabel>
-        <DropdownMenuRadioGroup value={status} onValueChange={setStatus}>
-          <DropdownMenuRadioItem value="public">Public</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="private">Private</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="internal">Internal</DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-        <DropdownMenuItem variant="destructive">
-          Remove workspace
-          <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}`,
-  htmlCode: `<button data-slot="dropdown-trigger">Open menu</button>`,
-  cliCommand: "npx tembro add dropdown-menu",
-  highlights: ["Action items", "Checkbox and radio items", "Shortcut labels", "Disabled/danger variants"],
-  relatedBlockSlugs: ["settings-form", "users-table", "dashboard-starter"],
-  scenarios: [
-    { title: "Action menu", description: "Use stable command-like menus for compact row actions." },
-    { title: "Bulk controls", description: "Checkbox and radio items make complex menu states explicit." },
-    { title: "Keyboard hints", description: "Render shortcuts to teach power users." },
-    { title: "Destructive entry", description: "Keep dangerous actions visually and semantically distinct." },
-  ],
-  capabilityNotes: [
-    "Use DropdownMenu for compact choice surfaces that must stay within local context.",
-    "Keep disabled actions visible to preserve discoverability of temporarily unavailable commands.",
-    "Reserve destructive variants for actions that remove data or change ownership.",
-    "Map menu items to real route or action handlers and avoid deep workflows inside a single menu item.",
-  ],
-}
-
-

package/packages/cli/vendor/src/showcase/premium/dropdown-menu/showcase.tsx

@@ -1,146 +0,0 @@
-import * as React from "react"
-
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuItemDescription,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function DropdownMenuShowcase({ mode }: ComponentDemoProps) {
-  const [status, setStatus] = React.useState("private")
-  const [notifications, setNotifications] = React.useState(true)
-  const [compact, setCompact] = React.useState(false)
-  const [keepOpen, setKeepOpen] = React.useState(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">Dropdown menu</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Secondary actions belong here</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Use one trigger for quick actions, tiny settings, and destructive follow-ups.</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">Status</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{status === "public" ? "Public" : "Private"}</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">Notifications</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{notifications ? "On" : "Off"}</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 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">Menu close</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{keepOpen ? "Pinned open" : "Auto close"}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Live menu</p>
-            <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">Open and verify small state changes</h4>
-          </div>
-
-          <DropdownMenu>
-            <DropdownMenuTrigger>
-              <Button>Open menu</Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuLabel>Workspace actions</DropdownMenuLabel>
-              <DropdownMenuItem>
-                <span className="grid gap-0.5">
-                  <span>Open workspace</span>
-                  <DropdownMenuItemDescription>Go to the main dashboard route</DropdownMenuItemDescription>
-                </span>
-                <DropdownMenuShortcut>↵</DropdownMenuShortcut>
-              </DropdownMenuItem>
-              <DropdownMenuItem disabled>
-                <span className="grid gap-0.5">
-                  <span>Delete from archive</span>
-                  <DropdownMenuItemDescription>Locked until retention expires</DropdownMenuItemDescription>
-                </span>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuCheckboxItem
-                checked={notifications}
-                closeOnSelect={!keepOpen}
-                onCheckedChange={(value) => setNotifications(Boolean(value))}
-              >
-                Notification access
-              </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem
-                checked={compact}
-                closeOnSelect={!keepOpen}
-                onCheckedChange={(value) => setCompact(Boolean(value))}
-              >
-                Compact density
-              </DropdownMenuCheckboxItem>
-              <DropdownMenuCheckboxItem checked={keepOpen} closeOnSelect={false} onCheckedChange={(value) => setKeepOpen(Boolean(value))}>
-                Keep menu open
-              </DropdownMenuCheckboxItem>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
-                <DropdownMenuSubContent>
-                  <DropdownMenuItem>CSV</DropdownMenuItem>
-                  <DropdownMenuItem>PDF summary</DropdownMenuItem>
-                  <DropdownMenuItem>JSON payload</DropdownMenuItem>
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
-              <DropdownMenuGroup>
-                <DropdownMenuRadioGroup value={status} onValueChange={(value) => setStatus(value)}>
-                  <DropdownMenuRadioItem value="public">Public</DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="private">Private</DropdownMenuRadioItem>
-                </DropdownMenuRadioGroup>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem variant="destructive">
-                Remove workspace
-                <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="border-y border-[color:var(--aui-divider)]">
-          {[
-            "Keep the main CTA outside the menu.",
-            "Use radio and checkbox items only for very small settings.",
-            "Destructive items should still be explicit and easy to notice.",
-          ].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>
-    </div>
-  )
-}

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

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

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

@@ -1,35 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const dualListPickerMock: ComponentDemoMock = {
-  code: `import { DualListPicker } from "tembro"
-
-const items = [
-  { label: "Analytics", value: "analytics" },
-  { label: "Reports", value: "reports" },
-]
-
-export function Example() {
-  const [picked, setPicked] = useState(["analytics"])
-
-  return (
-    <DualListPicker
-      items={items}
-      picked={picked}
-      onPickedChange={setPicked}
-      availableTitle="Available"
-      pickedTitle="Selected"
-    />
-  )
-}`,
-  cliCommand: "npx tembro add dual-list-picker",
-  highlights: [
-    "Move items between available/selected lists",
-    "Supports disabled choices",
-    "Simple controlled value pattern",
-  ],
-  scenarios: [
-    { title: "Role permissions", description: "Select which modules are available for a user role." },
-    { title: "Feature toggles", description: "Move capabilities between disabled and enabled buckets." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/dual-list-picker/showcase.tsx

@@ -1,26 +0,0 @@
-import * as React from "react"
-
-import { DualListPicker } from "@/index"
-
-const defaultItems = [
-  { label: "Analytics", value: "analytics" },
-  { label: "Reports", value: "reports" },
-  { label: "Integrations", value: "integrations" },
-  { label: "Billing", value: "billing" },
-  { label: "Notifications", value: "notifications", disabled: true },
-]
-
-export function DualListPickerShowcase() {
-  const [picked, setPicked] = React.useState(["analytics"])
-
-  return (
-    <div className="space-y-4">
-      <p className="text-sm text-muted-foreground">Selected: {picked.join(", ") || "None"}</p>
-      <DualListPicker items={defaultItems} picked={picked} onPickedChange={setPicked} availableTitle="All modules" pickedTitle="Enabled modules" />
-      <button type="button" className="rounded-md border px-3 py-1.5 text-sm" onClick={() => setPicked([])}>
-        Clear selection
-      </button>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/file-upload/index.ts

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

package/packages/cli/vendor/src/showcase/premium/file-upload/mock.ts

@@ -1,44 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const fileUploadMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { FileUpload } from "tembro"
-
-export function Example() {
-  const [files, setFiles] = useState<File[]>([])
-  const [progress, setProgress] = useState<Record<string, number>>({})
-
-  return (
-    <FileUpload
-      files={files}
-      onFilesChange={setFiles}
-      accept=".pdf,.docx,.png"
-      maxFiles={4}
-      maxSize={4 * 1024 * 1024}
-      progress={progress}
-      status={files.length ? "uploading" : "idle"}
-      helperText="Supports PDF, DOCX and PNG up to 4 MB."
-      validateFile={(file) => file.name.includes("private") ? "Private files are not allowed." : null}
-      onRetryFile={(file) => setProgress((value) => ({ ...value, [file.name]: 0 }))}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add file-upload",
-  highlights: [
-    "Reusable dropzone and file list",
-    "Rejected state support",
-    "Nested clear/remove interactions",
-    "Controlled files, progress and status API",
-    "Custom validation and rejection messages",
-  ],
-  scenarios: [
-    { title: "Admin attachments", description: "Upload contracts, invoices and internal release assets." },
-    { title: "Controlled state", description: "Keep file state in the parent route or form container." },
-    { title: "Validation", description: "Constrain type, size and count at the component boundary." },
-  ],
-  capabilityNotes: [
-    "Use FileUpload when the route needs a production dropzone rather than a decorative input.",
-    "The remove and clear actions are isolated from the parent click surface.",
-    "Keep validation rules close to the component so every route behaves consistently.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/file-upload/showcase.tsx

@@ -1,100 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, FileUpload } from "@/index"
-
-export function FileUploadShowcase() {
-  const [files, setFiles] = React.useState<File[]>([])
-  const [status, setStatus] = React.useState<Record<string, "idle" | "uploading" | "success" | "error">>({})
-  const [progress, setProgress] = React.useState<Record<string, number>>({})
-
-  const loadSamples = () => {
-    const now = Date.now()
-    const samples = [
-      new File(["release notes"], "release-notes.pdf", { type: "application/pdf", lastModified: now }),
-      new File(["contract draft"], "contract.docx", { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", lastModified: now + 1 }),
-      new File(["preview image"], "preview.png", { type: "image/png", lastModified: now + 2 }),
-    ]
-    const keys = samples.map((file) => `${file.name}-${file.size}-${file.lastModified}`)
-    setFiles(samples)
-    setStatus({ [keys[0]]: "uploading", [keys[1]]: "error", [keys[2]]: "success" })
-    setProgress({ [keys[0]]: 46, [keys[1]]: 72, [keys[2]]: 100 })
-  }
-
-  React.useEffect(() => {
-    setStatus((current) => {
-      const next = { ...current }
-      files.forEach((file, index) => {
-        const key = `${file.name}-${file.size}-${file.lastModified}`
-        next[key] ??= index === 0 ? "uploading" : index === 1 ? "error" : "success"
-      })
-      return next
-    })
-  }, [files])
-
-  return (
-    <div className="space-y-4">
-      <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-        <div className="flex flex-wrap gap-2">
-          <Badge variant="outline">Dropzone</Badge>
-          <Badge variant="outline">Rejected files</Badge>
-          <Badge variant="outline">Clearable</Badge>
-        </div>
-        <p className="mt-3 text-sm font-medium aui-text-strong">FileUpload is the production file surface</p>
-        <p className="mt-2 text-sm leading-6 aui-text-muted">
-          Use it when you need one reusable dropzone with helper copy, rejected states, file list and nested remove actions.
-        </p>
-      </div>
-
-      <div className="flex flex-wrap gap-2">
-        <Button size="sm" onClick={loadSamples}>Load sample files</Button>
-        <Button size="sm" variant="outline" disabled={files.length === 0} onClick={() => {
-          setFiles([])
-          setStatus({})
-          setProgress({})
-        }}>Clear demo</Button>
-      </div>
-
-      <FileUpload
-        files={files}
-        onFilesChange={setFiles}
-        status={status}
-        accept=".pdf,.docx,.png"
-        maxFiles={4}
-        maxSize={4 * 1024 * 1024}
-        progress={progress}
-        dropzoneLabel="Upload release assets"
-        dropzoneDescription="Drag files here or choose from your device."
-        helperText="Supports PDF, DOCX and PNG up to 4 MB. Filenames containing private are rejected."
-        validateFile={(file) => file.name.toLowerCase().includes("private") ? "Private files cannot be uploaded here." : null}
-        rejectionMessages={{
-          "max-files": ({ maxFiles }) => `Only ${maxFiles} release assets are allowed.`,
-          "max-size": "This asset exceeds the 4 MB release limit.",
-        }}
-        onRetryFile={(file) => {
-          const key = `${file.name}-${file.size}-${file.lastModified}`
-          setStatus((current) => ({ ...current, [key]: "uploading" }))
-          setProgress((current) => ({ ...current, [key]: 35 }))
-          window.setTimeout(() => {
-            setStatus((current) => ({ ...current, [key]: "success" }))
-            setProgress((current) => ({ ...current, [key]: 100 }))
-          }, 900)
-        }}
-      />
-
-      <div className="grid gap-3 md:grid-cols-3">
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Attached files</p>
-          <p className="mt-2 aui-text-muted">{files.length}</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Interaction model</p>
-          <p className="mt-2 aui-text-muted">Uploading, success and retry-ready error rows all stay isolated from the parent dropzone click.</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Use case</p>
-          <p className="mt-2 aui-text-muted">Contracts, invoices, release assets and admin attachments.</p>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,2 +0,0 @@
-export { FormWrapperShowcase } from "./showcase"
-export { formRHFWrapperMock, formSelectMock } from "./mock"

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

@@ -1,165 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const formRHFWrapperMock: ComponentDemoMock = {
-  code: `import { useForm } from "react-hook-form"
-import { Button, FormInput, FormSwitch, FormTextarea } from "tembro"
-
-type DemoValues = {
-  name: string
-  ownerPhone: string
-  price: number | null
-  notes: string
-  active: boolean
-}
-
-export function Example() {
-  const form = useForm<DemoValues>({
-    defaultValues: {
-      name: "Tembro",
-      ownerPhone: "+998 90 123 45 67",
-      price: 120,
-      notes: "Use control, name, rules, error, and required labels.",
-      active: true,
-    },
-  })
-
-  const onSubmit = form.handleSubmit((values) => {
-    console.log(values)
-  })
-
-  return (
-    <form onSubmit={onSubmit} className="space-y-4">
-      <FormInput
-        control={form.control}
-        name="name"
-        label="Workspace name"
-        required
-        placeholder="Write a workspace title"
-        rules={{
-          required: "Workspace name is required",
-          minLength: { value: 3, message: "At least 3 characters" },
-        }}
-      />
-
-      <FormInput
-        control={form.control}
-        name="ownerPhone"
-        kind="phone"
-        label="Owner phone"
-        description="Use canonical phone value for API payloads."
-        rules={{ required: "Phone number is required" }}
-      />
-
-      <FormInput
-        control={form.control}
-        name="price"
-        kind="number"
-        label="Budget"
-        min={0}
-        max={100000}
-        required
-      />
-
-      <FormTextarea
-        control={form.control}
-        name="notes"
-        label="Notes"
-        required
-        rows={3}
-        description="RHF handles error and required states."
-      />
-
-      <FormSwitch control={form.control} name="active" label="Active" />
-
-      <Button type="submit">Save</Button>
-    </form>
-  )`
-,
-  htmlCode: '<form><label for="workspace">Workspace</label><input id="workspace" value="Tembro" /></form>',
-  cliCommand: "npx tembro add form-input form-textarea form-switch",
-  highlights: ["control + name contract", "Universal `kind` variants", "Error display and required markers", "Consistent wrapper shell behavior"],
-  relatedBlockSlugs: ["settings-form", "crm-dashboard", "users-table"],
-  scenarios: [
-    { title: "Required validation", description: "Use `rules` for required and length constraints and show errors in shell." },
-    { title: "Error display", description: "Inject custom error messages for required and domain checks." },
-    { title: "Read-only states", description: "Support locked and disabled states from parent screens." },
-    { title: "Unified layout", description: "Keep one shell language for input, select and toggle types without multiplying wrapper names." },
-  ],
-  capabilityNotes: [
-    "Use `control` and `name` from a shared `useForm` call for every field wrapper.",
-    "Prefer `FormInput kind=...` and `FormSelect kind=...` for new work; keep alias wrappers only for migration.",
-    "Pass RHF `rules` or `validate` to each wrapper, instead of inline ad-hoc checks.",
-    "`required` should be explicit both in copy (UI marker) and schema.",
-    "Render validation messages through wrapper-level `error` or formState errors for consistent spacing.",
-  ],
-}
-
-export const formSelectMock: ComponentDemoMock = {
-  code: `import { useForm } from "react-hook-form"
-import { Button, FormSelect } from "tembro"
-
-const statusOptions = [
-  { label: "Draft", value: "draft" },
-  { label: "Review", value: "review" },
-  { label: "Live", value: "live" },
-]
-
-const workspaceOptions = [
-  { value: "workspace-alpha", label: "Workspace Alpha", description: "Core design system route" },
-  { value: "workspace-beta", label: "Workspace Beta", description: "CRM rollout workspace" },
-]
-
-async function loadWorkspaces(search: string) {
-  const query = search.trim().toLowerCase()
-  return workspaceOptions.filter((option) => !query || option.label.toLowerCase().includes(query))
-}
-
-async function loadWorkspace(value: string) {
-  return workspaceOptions.find((option) => option.value === value) ?? null
-}
-
-export function Example() {
-  const form = useForm({
-    defaultValues: {
-      status: "review",
-      ownerId: "workspace-alpha",
-    },
-  })
-
-  return (
-    <form className="space-y-4">
-      <FormSelect
-        control={form.control}
-        name="status"
-        label="Release status"
-        options={statusOptions}
-        placeholder="Choose status"
-      />
-
-      <FormSelect
-        control={form.control}
-        name="ownerId"
-        kind="async"
-        label="Linked workspace"
-        loadOptions={loadWorkspaces}
-        loadSelectedOption={loadWorkspace}
-      />
-
-      <Button type="submit">Save</Button>
-    </form>
-  )
-}`,
-  cliCommand: "npx tembro add form-select",
-  highlights: ["One RHF select wrapper", "Simple + async under one API", "Shared shell labels and errors", "Preferred select-form entry"],
-  relatedBlockSlugs: ["settings-form", "crm-dashboard", "users-table"],
-  scenarios: [
-    { title: "Static form choices", description: "Use the default FormSelect mode for known statuses, roles, or visibility controls." },
-    { title: "Remote edit flows", description: "Switch to kind=\"async\" when the form hydrates saved entity values from remote search results." },
-    { title: "Shared validation shell", description: "Keep labels, descriptions, and errors aligned across simple and async field variants." },
-  ],
-  capabilityNotes: [
-    "Prefer FormSelect for new select fields instead of splitting wrappers too early.",
-    "Use kind=\"async\" only when loading and hydration are remote concerns.",
-    "Keep the RHF contract identical while the field interaction model changes underneath.",
-  ],
-}