@intelligo-dev/cli 1.0.0-beta.13 → 1.0.0-beta.14

package/templates/registry/checkbox.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "title": "Checkbox",
+  "description": "A checkbox whose check draws itself in, with an indeterminate state.",
+  "dependencies": [
+    "@base-ui/react",
+    "motion"
+  ],
+  "registryDependencies": [
+    "@intelligo/ai-motion"
+  ],
+  "files": [
+    {
+      "path": "base/ui/checkbox/checkbox.tsx",
+      "content": "\"use client\";\n\n/*\n * The checkbox: the box fills and the check draws itself in.\n */\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nimport { EASE_OUT } from \"@/components/ui/ai-motion\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  const reduced = useReducedMotion() ?? false;\n\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input bg-card transition-[background-color,border-color,box-shadow,scale] duration-fast ease-standard outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 hover:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/40 active:scale-92 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        keepMounted\n        className=\"group/checkbox-indicator grid place-content-center text-current\"\n        render={(indicatorProps, state) => (\n          <span {...indicatorProps}>\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={3}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              aria-hidden\n              className=\"size-3.5\"\n            >\n              {/* The tick draws itself in; the dash grows from the centre. */}\n              <motion.path\n                d=\"M5 13l4 4L19 7\"\n                initial={false}\n                animate={{\n                  pathLength: state.checked && !state.indeterminate ? 1 : 0,\n                  opacity: state.checked && !state.indeterminate ? 1 : 0,\n                }}\n                transition={\n                  reduced ? { duration: 0 } : { duration: 0.24, ease: EASE_OUT }\n                }\n              />\n              <motion.path\n                d=\"M6 12h12\"\n                initial={false}\n                animate={{\n                  scaleX: state.indeterminate ? 1 : 0,\n                  opacity: state.indeterminate ? 1 : 0,\n                }}\n                transition={\n                  reduced ? { duration: 0 } : { duration: 0.2, ease: EASE_OUT }\n                }\n              />\n            </svg>\n          </span>\n        )}\n      />\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n",
+      "type": "registry:ui",
+      "target": "components/ui/checkbox.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}

package/templates/registry/checkout.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkout",
+  "title": "Checkout",
+  "description": "Checkout-success page that verifies the Stripe session directly through the framework's checkout service, covering the webhook-race window between the browser redirect and Stripe's webhook delivery.",
+  "dependencies": [
+    "@intelligo-dev/auth",
+    "@intelligo-dev/billing",
+    "lucide-react",
+    "next-intl"
+  ],
+  "registryDependencies": [
+    "alert",
+    "@intelligo/button",
+    "card",
+    "@intelligo/spinner",
+    "@intelligo/status-badge"
+  ],
+  "files": [
+    {
+      "path": "base/checkout/success-page.tsx",
+      "content": "import { CheckCircle2 } from \"lucide-react\";\nimport { getLocale, getTranslations } from \"next-intl/server\";\n\nimport { requireWorkspace } from \"@intelligo-dev/auth\";\nimport { getCheckoutSession } from \"@intelligo-dev/billing\";\n\nimport { Link, redirect } from \"@/i18n/navigation\";\nimport { StatusBadge } from \"@/components/ui/status-badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Spinner } from \"@/components/ui/spinner\";\n\ninterface CheckoutSuccessPageProps {\n  searchParams: Promise<{ session_id?: string }>;\n}\n\n/**\n * Verifies the checkout through `getCheckoutSession`\n * (`@intelligo-dev/billing`) rather than the workspace's local\n * subscription row: Stripe's webhook can land after the browser's\n * redirect here, and reading the checkout session shows the right plan\n * regardless of webhook timing.\n */\nexport default async function CheckoutSuccessPage({\n  searchParams,\n}: CheckoutSuccessPageProps) {\n  const t = await getTranslations(\"checkout\");\n  const { session_id: sessionId } = await searchParams;\n\n  if (!sessionId) {\n    redirect({ href: \"/pricing\", locale: await getLocale() });\n    return null; // redirect throws; this narrows sessionId for TS\n  }\n\n  const { workspace } = await requireWorkspace();\n\n  try {\n    const session = await getCheckoutSession({\n      sessionId,\n      workspaceId: workspace.id,\n    });\n\n    if (session.status === \"complete\" && session.isSubscriptionActive) {\n      return (\n        <div className=\"container max-w-2xl py-16\">\n          <Card className=\"border-success/30\">\n            <CardHeader className=\"text-center\">\n              <div className=\"mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-success/10\">\n                <CheckCircle2 className=\"size-10 text-success\" />\n              </div>\n              <CardTitle className=\"text-3xl\">{t(\"success.title\")}</CardTitle>\n              <CardDescription className=\"text-base\">\n                {session.planName\n                  ? t(\"success.planActive\", { planName: session.planName })\n                  : t(\"success.subscriptionActive\")}\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"space-y-6\">\n              <div className=\"rounded-lg border bg-background p-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div>\n                    {session.planName && (\n                      <p className=\"font-medium\">\n                        {t(\"success.planLabel\", { planName: session.planName })}\n                      </p>\n                    )}\n                    {session.billingInterval && (\n                      <p className=\"text-sm text-muted-foreground\">\n                        {session.billingInterval === \"month\"\n                          ? t(\"success.billedMonthly\")\n                          : t(\"success.billedYearly\")}\n                      </p>\n                    )}\n                  </div>\n                  <StatusBadge status=\"success\" dot>\n                    {t(\"success.status\")}\n                  </StatusBadge>\n                </div>\n              </div>\n\n              {session.customerEmail && (\n                <p className=\"text-center text-sm text-muted-foreground\">\n                  {t(\"success.receiptSent\", { email: session.customerEmail })}\n                </p>\n              )}\n            </CardContent>\n\n            <CardFooter className=\"flex flex-col gap-3 sm:flex-row\">\n              <Button\n                className=\"w-full sm:flex-1\"\n                render={<Link href=\"/dashboard\" />}\n                nativeButton={false}\n              >\n                {t(\"actions.goToDashboard\")}\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"w-full sm:flex-1\"\n                render={<Link href=\"/settings/billing\" />}\n                nativeButton={false}\n              >\n                {t(\"actions.viewBillingSettings\")}\n              </Button>\n            </CardFooter>\n          </Card>\n        </div>\n      );\n    }\n\n    if (session.status !== \"complete\") {\n      return (\n        <div className=\"container max-w-2xl py-16\">\n          <Card>\n            <CardHeader className=\"text-center\">\n              <CardTitle>{t(\"pending.title\")}</CardTitle>\n              <CardDescription>{t(\"pending.description\")}</CardDescription>\n            </CardHeader>\n            <CardContent className=\"flex justify-center\">\n              <Spinner className=\"size-8 text-muted-foreground\" />\n            </CardContent>\n            <CardFooter className=\"justify-center\">\n              <Button\n                variant=\"outline\"\n                render={<Link href=\"/settings/billing\" />}\n                nativeButton={false}\n              >\n                {t(\"actions.checkBillingSettings\")}\n              </Button>\n            </CardFooter>\n          </Card>\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"container max-w-2xl py-16\">\n        <Card>\n          <CardHeader className=\"text-center\">\n            <CardTitle>{t(\"received.title\")}</CardTitle>\n            <CardDescription>{t(\"received.description\")}</CardDescription>\n          </CardHeader>\n          <CardFooter className=\"justify-center gap-3\">\n            <Button render={<Link href=\"/dashboard\" />} nativeButton={false}>\n              {t(\"actions.goToDashboard\")}\n            </Button>\n            <Button\n              variant=\"outline\"\n              render={<Link href=\"/settings/billing\" />}\n              nativeButton={false}\n            >\n              {t(\"actions.viewBillingSettings\")}\n            </Button>\n          </CardFooter>\n        </Card>\n      </div>\n    );\n  } catch {\n    // session_not_found (a stale/invalid session id) or a Stripe\n    // outage — either way, the customer likely did pay. Show a\n    // generic thank-you and point at billing settings rather than\n    // surfacing a Stripe error to someone who just completed checkout.\n    return (\n      <div className=\"container max-w-2xl py-16\">\n        <Card>\n          <CardHeader className=\"text-center\">\n            <div className=\"mx-auto mb-4 flex size-16 items-center justify-center rounded-full bg-success/10\">\n              <CheckCircle2 className=\"size-10 text-success\" />\n            </div>\n            <CardTitle>{t(\"fallback.title\")}</CardTitle>\n            <CardDescription>{t(\"fallback.description\")}</CardDescription>\n          </CardHeader>\n          <CardContent className=\"text-center\">\n            <p className=\"text-sm text-muted-foreground\">\n              {t(\"fallback.note\")}\n            </p>\n          </CardContent>\n          <CardFooter className=\"justify-center gap-3\">\n            <Button render={<Link href=\"/dashboard\" />} nativeButton={false}>\n              {t(\"actions.goToDashboard\")}\n            </Button>\n            <Button\n              variant=\"outline\"\n              render={<Link href=\"/settings/billing\" />}\n              nativeButton={false}\n            >\n              {t(\"actions.viewBillingSettings\")}\n            </Button>\n          </CardFooter>\n        </Card>\n      </div>\n    );\n  }\n}\n",
+      "type": "registry:page",
+      "target": "app/[locale]/(app)/checkout/success/page.tsx"
+    },
+    {
+      "path": "base/checkout/error.tsx",
+      "content": "\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useTranslations } from \"next-intl\";\n\nimport { Link } from \"@/i18n/navigation\";\nimport { Alert, AlertDescription } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function CheckoutSuccessError({\n  error,\n  reset,\n}: {\n  error: Error & { digest?: string };\n  reset: () => void;\n}) {\n  const t = useTranslations(\"checkout\");\n\n  useEffect(() => {\n    console.error(\"[checkout/success] error boundary caught:\", error);\n  }, [error]);\n\n  return (\n    <div className=\"flex min-h-96 items-center justify-center p-4\">\n      <div className=\"w-full max-w-md space-y-4\">\n        <Alert variant=\"destructive\">\n          <AlertDescription>{t(\"error.description\")}</AlertDescription>\n        </Alert>\n\n        <div className=\"flex justify-center gap-3\">\n          <Button onClick={reset}>{t(\"actions.tryAgain\")}</Button>\n          <Button\n            variant=\"outline\"\n            render={<Link href=\"/settings/billing\" />}\n            nativeButton={false}\n          >\n            {t(\"actions.viewBillingSettings\")}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "type": "registry:page",
+      "target": "app/[locale]/(app)/checkout/success/error.tsx"
+    },
+    {
+      "path": "base/checkout/messages/en.json",
+      "content": "{\n  \"actions\": {\n    \"tryAgain\": \"Try again\",\n    \"goToDashboard\": \"Go to dashboard\",\n    \"viewBillingSettings\": \"View billing settings\",\n    \"checkBillingSettings\": \"Check billing settings\"\n  },\n  \"error\": {\n    \"description\": \"Something went wrong while confirming your payment. If you were charged, it will still be applied — check your billing settings.\"\n  },\n  \"success\": {\n    \"title\": \"You're all set\",\n    \"subscriptionActive\": \"Your subscription is active.\",\n    \"planActive\": \"You're now on the {planName} plan.\",\n    \"planLabel\": \"{planName} plan\",\n    \"billedMonthly\": \"Billed monthly\",\n    \"billedYearly\": \"Billed yearly\",\n    \"status\": \"Active\",\n    \"receiptSent\": \"A receipt was sent to {email}.\"\n  },\n  \"pending\": {\n    \"title\": \"Finishing up\",\n    \"description\": \"We're confirming your payment. This usually takes a few seconds.\"\n  },\n  \"received\": {\n    \"title\": \"Payment received\",\n    \"description\": \"Your payment went through. It may take a moment to reflect in your billing settings.\"\n  },\n  \"fallback\": {\n    \"title\": \"Thank you\",\n    \"description\": \"Your payment is being processed.\",\n    \"note\": \"Check your billing settings for the latest status.\"\n  }\n}\n",
+      "type": "registry:file",
+      "target": "messages/en/checkout.json"
+    }
+  ],
+  "type": "registry:block"
+}

package/templates/registry/collapsible.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible",
+  "title": "Collapsible",
+  "description": "Content that eases open and closed from its measured height.",
+  "dependencies": [
+    "@base-ui/react"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "base/ui/collapsible/collapsible.tsx",
+      "content": "\"use client\";\n\n/*\n * The collapsible: the panel's height eases open and closed from Base UI's\n * measured height instead of snapping.\n */\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />;\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n  );\n}\n\nfunction CollapsibleContent({\n  className,\n  ...props\n}: CollapsiblePrimitive.Panel.Props) {\n  return (\n    <CollapsiblePrimitive.Panel\n      data-slot=\"collapsible-content\"\n      className={cn(\n        \"h-(--collapsible-panel-height) overflow-hidden transition-[height,opacity] duration-slow ease-emphasized data-ending-style:h-0 data-ending-style:opacity-0 data-ending-style:duration-normal data-ending-style:ease-exit data-starting-style:h-0 data-starting-style:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n",
+      "type": "registry:ui",
+      "target": "components/ui/collapsible.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}

package/templates/registry/command.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "command",
+  "title": "Command",
+  "description": "A searchable list of actions, inline or in a dialog.",
+  "dependencies": [
+    "cmdk",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@intelligo/dialog",
+    "@intelligo/input-group"
+  ],
+  "files": [
+    {
+      "path": "base/ui/command/command.tsx",
+      "content": "\"use client\";\n\n/*\n * The command palette: a searchable list of actions, in the dialog.\n */\n\nimport * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { InputGroup, InputGroupAddon } from \"@/components/ui/input-group\";\nimport { SearchIcon, CheckIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-lg! bg-popover p-1 text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <CheckIcon className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\" />\n    </CommandPrimitive.Item>\n  );\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n",
+      "type": "registry:ui",
+      "target": "components/ui/command.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}

package/templates/registry/copy-button.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "copy-button",
+  "title": "Copy Button",
+  "description": "Copy to the clipboard with confirmation and a live announcement; labels are passed in, so it carries no copy of its own.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@intelligo/button"
+  ],
+  "files": [
+    {
+      "path": "base/ui/copy-button/copy-button.tsx",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon, CopyIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\n\ntype CopyButtonProps = Omit<\n  React.ComponentProps<typeof Button>,\n  \"onClick\" | \"value\"\n> & {\n  /** The text written to the clipboard. */\n  value: string;\n  /** Accessible name before copying — pass translated copy. */\n  label: string;\n  /** Announced once the text is on the clipboard. */\n  copiedLabel: string;\n  onCopy?: () => void;\n  onCopyError?: (error: unknown) => void;\n  /** How long the confirmation shows, in milliseconds. */\n  timeout?: number;\n};\n\n/**\n * Copy with confirmation, the same everywhere. The\n * icon swaps and a polite live region announces the copy; failures go to\n * `onCopyError` so the caller decides whether to toast.\n */\nfunction CopyButton({\n  value,\n  label,\n  copiedLabel,\n  onCopy,\n  onCopyError,\n  timeout = 2000,\n  variant = \"ghost\",\n  size = \"icon-sm\",\n  children,\n  ...props\n}: CopyButtonProps) {\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!copied) return;\n    const timer = setTimeout(() => setCopied(false), timeout);\n    return () => clearTimeout(timer);\n  }, [copied, timeout]);\n\n  async function copy() {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      onCopy?.();\n    } catch (error) {\n      onCopyError?.(error);\n    }\n  }\n\n  return (\n    <Button\n      data-slot=\"copy-button\"\n      data-copied={copied || undefined}\n      variant={variant}\n      size={size}\n      aria-label={children ? undefined : copied ? copiedLabel : label}\n      onClick={copy}\n      {...props}\n    >\n      {copied ? (\n        <CheckIcon data-icon=\"inline-start\" />\n      ) : (\n        <CopyIcon data-icon=\"inline-start\" />\n      )}\n      {children}\n      <span aria-live=\"polite\" className=\"sr-only\">\n        {copied ? copiedLabel : \"\"}\n      </span>\n    </Button>\n  );\n}\n\nexport { CopyButton };\n",
+      "type": "registry:ui",
+      "target": "components/ui/copy-button.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}

package/templates/registry/dashboard.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dashboard",
+  "title": "Dashboard",
+  "description": "An AI-first workspace home: a hero and a real composer centred as one unit, starter chips that fill it, and a resume affordance for unfinished work — and nothing else, because history belongs to the sidebar and spend to /usage. Configurable through lib/dashboard-config.tsx (copy, starters, chat base path) and lib/dashboard-data.ts (what \"resume\" means). Pairs with the chat item for its /chat routes; install it first.",
+  "dependencies": [
+    "@intelligo-dev/auth",
+    "@intelligo-dev/core",
+    "lucide-react",
+    "server-only",
+    "next-intl"
+  ],
+  "registryDependencies": [
+    "skeleton",
+    "@intelligo/ai-prompt-input",
+    "@intelligo/ai-speech-input"
+  ],
+  "files": [
+    {
+      "path": "base/dashboard/page.tsx",
+      "content": "/**\n * Workspace dashboard: a hero, a composer and starter chips.\n *\n * Everything configurable lives in two consumer-owned seams:\n * `@/lib/dashboard-config` (hero copy, starters, chat base path) and\n * `@/lib/dashboard-data` (`getResume` — what \"unfinished work\" means\n * for this product). Neither requires editing a file this item ships.\n *\n * Pairs with the `chat` item: the composer and the starters open\n * `${chatBasePath}/<new-uuid>?query=…`, which the chat panel sends as\n * the first turn. Without a chat surface installed, set `chatBasePath`\n * or drop those affordances.\n *\n * `requireWorkspace()` is allowed to throw: the `app-shell` layout\n * already guarantees an active workspace, so a failure here (a revoked\n * session mid-request) belongs to `error.tsx`, not an empty state.\n */\n\nimport type { Metadata } from \"next\";\nimport { getTranslations } from \"next-intl/server\";\n\nimport { requireWorkspace } from \"@intelligo-dev/auth\";\n\nimport { DashboardHero } from \"@/components/dashboard/dashboard-hero\";\nimport { PromptBar } from \"@/components/dashboard/prompt-bar\";\nimport { dashboardConfig } from \"@/lib/dashboard-config\";\nimport { getResume } from \"@/lib/dashboard-data\";\n\nexport async function generateMetadata(): Promise<Metadata> {\n  const t = await getTranslations(\"dashboard\");\n  return { title: t(\"meta.title\") };\n}\n\nexport default async function DashboardPage() {\n  const { workspace, user } = await requireWorkspace();\n\n  const resume = await getResume(\n    { workspaceId: workspace.id, userId: user.id },\n    { chatBasePath: dashboardConfig.chatBasePath }\n  );\n\n  return (\n    <div className=\"flex min-h-full flex-col justify-center px-4 py-10\">\n      <div className=\"mx-auto w-full max-w-3xl\">\n        <DashboardHero resume={resume} />\n        <PromptBar />\n      </div>\n    </div>\n  );\n}\n",
+      "type": "registry:page",
+      "target": "app/[locale]/(app)/dashboard/page.tsx"
+    },
+    {
+      "path": "base/dashboard/loading.tsx",
+      "content": "/**\n * Mirrors the page's layout (hero, composer, starter chips) so first\n * paint doesn't jump when the real content arrives.\n */\n\nimport { Skeleton } from \"@/components/ui/skeleton\";\n\nexport default function DashboardLoading() {\n  return (\n    <div className=\"flex min-h-full flex-col justify-center px-4 py-10\">\n      <div className=\"mx-auto w-full max-w-3xl\">\n        <div className=\"flex flex-col items-center gap-4\">\n          <Skeleton className=\"size-12 rounded-full\" />\n          <Skeleton className=\"h-9 w-72 max-w-full\" />\n          <Skeleton className=\"h-4 w-96 max-w-full\" />\n        </div>\n\n        <Skeleton className=\"mt-8 h-28 w-full rounded-xl\" />\n\n        <div className=\"mt-3 flex flex-wrap justify-center gap-2\">\n          {Array.from({ length: 3 }).map((_, index) => (\n            <Skeleton\n              key={index}\n              className=\"h-7 w-48 max-w-full rounded-full\"\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "type": "registry:page",
+      "target": "app/[locale]/(app)/dashboard/loading.tsx"
+    },
+    {
+      "path": "base/dashboard/messages/en.json",
+      "content": "{\n  \"meta\": {\n    \"title\": \"Dashboard\"\n  },\n  \"hero\": {\n    \"title\": \"What can I help with?\",\n    \"subtitle\": \"Ask a question, draft something, or pick up where you left off. Every turn is metered against your plan.\",\n    \"resume\": \"Continue where you left off\"\n  },\n  \"starters\": {\n    \"first\": \"Explain what this workspace can do\",\n    \"second\": \"Draft a short update for my team\",\n    \"third\": \"Summarize the key points of an idea\"\n  },\n  \"promptBar\": {\n    \"placeholder\": \"Ask anything…\",\n    \"send\": \"Send\",\n    \"voiceStart\": \"Start voice input\",\n    \"voiceStop\": \"Stop voice input\"\n  },\n  \"promptBar\": {\n    \"placeholder\": \"Ask anything…\",\n    \"send\": \"Send\",\n    \"voiceStart\": \"Start voice input\",\n    \"voiceStop\": \"Stop voice input\"\n  }\n}\n",
+      "type": "registry:file",
+      "target": "messages/en/dashboard.json"
+    },
+    {
+      "path": "base/dashboard/error.tsx",
+      "content": "\"use client\";\n\n/**\n * Renders the shared `RouteError` from the `route-error` item — install\n * it alongside this one.\n */\n\nimport { RouteError } from \"@/components/shared/route-error\";\n\nexport default function SegmentError({\n  error,\n  reset,\n}: {\n  error: Error & { digest?: string };\n  reset: () => void;\n}) {\n  return <RouteError error={error} reset={reset} scope=\"dashboard\" />;\n}\n",
+      "type": "registry:page",
+      "target": "app/[locale]/(app)/dashboard/error.tsx"
+    },
+    {
+      "path": "base/dashboard/components/dashboard-hero.tsx",
+      "content": "\"use client\";\n\n/**\n * What this workspace is for, and a way back into unfinished work.\n * Starters belong to the composer (`prompt-bar.tsx`), not here.\n */\n\nimport { ArrowRight, Sparkles } from \"lucide-react\";\nimport { useTranslations } from \"next-intl\";\n\nimport { useRouter } from \"@/i18n/navigation\";\nimport { dashboardConfig } from \"@/lib/dashboard-config\";\nimport type { ResumeTarget } from \"@/lib/dashboard-data\";\n\ninterface DashboardHeroProps {\n  resume: ResumeTarget | null;\n}\n\nexport function DashboardHero({ resume }: DashboardHeroProps) {\n  const t = useTranslations(\"dashboard\");\n  // Namespace-less: hero keys are fully qualified so a product can\n  // point them at its own namespace (see `@/lib/dashboard-config`).\n  const tAny = useTranslations();\n  const router = useRouter();\n\n  const Icon = dashboardConfig.hero?.icon ?? Sparkles;\n\n  const title = dashboardConfig.hero?.titleKey\n    ? tAny(dashboardConfig.hero.titleKey)\n    : t(\"hero.title\");\n  const subtitle = dashboardConfig.hero?.subtitleKey\n    ? tAny(dashboardConfig.hero.subtitleKey)\n    : t(\"hero.subtitle\");\n\n  return (\n    <div className=\"text-center\">\n      <div className=\"flex justify-center\">\n        <div className=\"flex size-12 items-center justify-center rounded-full bg-primary/10\">\n          <Icon className=\"size-6 text-primary\" strokeWidth={1.75} />\n        </div>\n      </div>\n\n      <h1 className=\"mt-5 text-3xl font-semibold tracking-tight md:text-4xl\">\n        {title}\n      </h1>\n      <p className=\"mx-auto mt-3 max-w-xl text-base text-muted-foreground\">\n        {subtitle}\n      </p>\n\n      {resume ? (\n        <button\n          type=\"button\"\n          onClick={() => router.push(resume.href)}\n          // `max-w-full` and a truncating label: a resumed conversation\n          // is titled from its first message, which on a phone is wider\n          // than the screen.\n          className=\"mt-5 inline-flex max-w-full items-center gap-1.5 rounded-full bg-accent/60 px-3.5 py-1.5 text-xs font-medium transition-colors hover:bg-accent\"\n        >\n          <span\n            className=\"size-1.5 shrink-0 rounded-full bg-primary\"\n            aria-hidden\n          />\n          <span className=\"truncate\">{resume.label ?? t(\"hero.resume\")}</span>\n          <ArrowRight className=\"size-3.5 shrink-0\" />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/dashboard/dashboard-hero.tsx"
+    },
+    {
+      "path": "base/dashboard/components/prompt-bar.tsx",
+      "content": "\"use client\";\n\n/**\n * The composer, and the starter chips that fill it. Uses the same\n * primitives as the `chat` item's composer: Enter sends, Shift+Enter\n * breaks a line (IME-safe), dictation appends to the draft.\n *\n * Both affordances — the composer and the starter cards — mint a\n * client-side UUID and navigate to `${chatBasePath}/${id}?query=…`; the\n * chat panel sends that as the first turn. Nothing is written here, so\n * an abandoned prompt leaves no empty conversation behind.\n *\n * No attachments: the handoff to the chat surface is a URL, which\n * carries text only, so a file picked here would be dropped.\n */\n\nimport { useState } from \"react\";\nimport { useTranslations } from \"next-intl\";\n\nimport {\n  PromptInput,\n  PromptInputFooter,\n  PromptInputSubmit,\n  PromptInputTextarea,\n  PromptInputTools,\n} from \"@/components/ui/ai-prompt-input\";\nimport { SpeechInput } from \"@/components/ui/ai-speech-input\";\nimport { useRouter } from \"@/i18n/navigation\";\nimport { dashboardConfig } from \"@/lib/dashboard-config\";\n\nexport function PromptBar() {\n  const t = useTranslations(\"dashboard\");\n  // Namespace-less: starter keys are fully qualified so a product can\n  // point them at its own namespace (the `chatConfig.starters` contract).\n  const tAny = useTranslations();\n  const router = useRouter();\n  const [message, setMessage] = useState(\"\");\n\n  const chatBasePath = dashboardConfig.chatBasePath ?? \"/chat\";\n  const starters = (dashboardConfig.starters ?? []).map((key) => tAny(key));\n\n  function start(prompt: string) {\n    const id = crypto.randomUUID();\n    router.push(`${chatBasePath}/${id}?query=${encodeURIComponent(prompt)}`);\n  }\n\n  return (\n    <div className=\"mt-8\">\n      <PromptInput\n        onSubmit={({ text }) => {\n          const prompt = (text ?? \"\").trim();\n          if (!prompt) return;\n          start(prompt);\n        }}\n      >\n        <PromptInputTextarea\n          value={message}\n          onChange={(event) => setMessage(event.target.value)}\n          placeholder={t(\"promptBar.placeholder\")}\n          aria-label={t(\"promptBar.placeholder\")}\n        />\n        <PromptInputFooter>\n          <PromptInputTools>\n            <SpeechInput\n              startLabel={t(\"promptBar.voiceStart\")}\n              stopLabel={t(\"promptBar.voiceStop\")}\n              onTranscript={(spokenText, isFinal) => {\n                if (!isFinal) return;\n                const spoken = spokenText.trim();\n                if (!spoken) return;\n                setMessage((current) =>\n                  current ? `${current.replace(/\\s+$/, \"\")} ${spoken}` : spoken\n                );\n              }}\n            />\n          </PromptInputTools>\n          <PromptInputSubmit\n            status=\"ready\"\n            label={t(\"promptBar.send\")}\n            disabled={!message.trim()}\n          />\n        </PromptInputFooter>\n      </PromptInput>\n\n      {starters.length > 0 ? (\n        <div className=\"mt-3 flex flex-wrap justify-center gap-2\">\n          {starters.map((starter, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              onClick={() => start(starter)}\n              className=\"max-w-full rounded-full border border-border/60 px-3.5 py-1.5 text-xs text-muted-foreground transition-colors hover:border-border hover:bg-accent/40 hover:text-foreground\"\n            >\n              <span className=\"block truncate\">{starter}</span>\n            </button>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/dashboard/prompt-bar.tsx"
+    },
+    {
+      "path": "base/dashboard/lib/dashboard-config.tsx",
+      "content": "/**\n * Dashboard configuration — consumer-owned, imported by client\n * components (so, like `nav-config.ts`, it may hold React/Lucide\n * component values that must never cross the RSC boundary as props).\n *\n * The defaults render a hero from this item's own messages, a composer\n * that opens a new conversation, and starter chips that fill it. Every\n * part is replaceable here rather than in a component:\n *\n *  - `hero`: icon plus fully-qualified message keys for the title and\n *    subtitle. Point them at your product's namespace to say what this\n *    workspace is actually for.\n *  - `starters`: fully-qualified message keys (the `chatConfig.starters`\n *    contract). Each renders as a chip under the composer that opens a\n *    new conversation prefilled with that text. Empty hides the row.\n *  - `chatBasePath`: where the composer and the starters send the user.\n *    Defaults to the `chat` item's `/chat`; change it if your chat\n *    surface lives elsewhere, and note that the whole composer\n *    affordance only makes sense with a chat surface installed.\n */\n\nimport { Sparkles, type LucideIcon } from \"lucide-react\";\n\nexport interface DashboardConfig {\n  hero?: {\n    icon?: LucideIcon;\n    titleKey?: string;\n    subtitleKey?: string;\n  };\n  /** Fully-qualified message keys, resolved namespace-less. */\n  starters?: string[];\n  chatBasePath?: string;\n}\n\nexport const dashboardConfig: DashboardConfig = {\n  hero: {\n    icon: Sparkles,\n    titleKey: \"dashboard.hero.title\",\n    subtitleKey: \"dashboard.hero.subtitle\",\n  },\n  starters: [\n    \"dashboard.starters.first\",\n    \"dashboard.starters.second\",\n    \"dashboard.starters.third\",\n  ],\n  chatBasePath: \"/chat\",\n};\n",
+      "type": "registry:file",
+      "target": "lib/dashboard-config.tsx"
+    },
+    {
+      "path": "base/dashboard/lib/dashboard-data.ts",
+      "content": "import \"server-only\";\n\n/**\n * Dashboard data seam — consumer-owned, read on the server.\n *\n * `getResume` answers \"what was this person in the middle of?\" The\n * default is the most recently updated conversation, which is right for\n * a generic AI workspace. A product whose work has real structure —\n * a multi-phase assessment, a wizard, a review queue — binds its own\n * notion of progress here and the hero's resume pill picks it up with\n * no component edit:\n *\n *   export async function getResume(actor: ResumeActor) {\n *     const run = await getActiveAssessment(actor.workspaceId, actor.userId);\n *     if (!run) return null;\n *     return {\n *       label: `Phase ${run.phase} of ${run.totalPhases}`,\n *       href: `/chat/${run.conversationId}`,\n *     };\n *   }\n *\n * Return `null` when there is nothing to resume — the pill is hidden\n * rather than rendered empty.\n */\n\nimport { listConversations } from \"@intelligo-dev/core/conversations\";\n\nexport interface ResumeActor {\n  workspaceId: string;\n  userId: string;\n}\n\nexport interface ResumeTarget {\n  /**\n   * Plain text for the pill (already localized by whoever produced\n   * it). Omit to let the dashboard use its own \"continue\" copy.\n   */\n  label?: string;\n  /** Locale-less href; `@/i18n/navigation`'s Link localizes it. */\n  href: string;\n}\n\nexport async function getResume(\n  actor: ResumeActor,\n  options?: { chatBasePath?: string }\n): Promise<ResumeTarget | null> {\n  const [latest] = await listConversations(actor, { limit: 1 });\n  if (!latest) return null;\n\n  const base = options?.chatBasePath ?? \"/chat\";\n  return {\n    label: latest.title ?? undefined,\n    href: `${base}/${latest.id}`,\n  };\n}\n",
+      "type": "registry:file",
+      "target": "lib/dashboard-data.ts"
+    }
+  ],
+  "type": "registry:block"
+}

package/templates/registry/dialog.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "title": "Dialog",
+  "description": "A modal window over a blurred backdrop that springs up into place.",
+  "dependencies": [
+    "@base-ui/react",
+    "lucide-react",
+    "motion"
+  ],
+  "registryDependencies": [
+    "@intelligo/button",
+    "@intelligo/ai-motion"
+  ],
+  "files": [
+    {
+      "path": "base/ui/dialog/dialog.tsx",
+      "content": "\"use client\";\n\n/*\n * The dialog: a blurred backdrop and a panel that springs up from slightly\n * smaller. Backdrop and panel animate with motion; the root is kept\n * controlled so the exit plays.\n */\n\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { XIcon } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\n\nimport {\n  backdropMotion,\n  popupMotion,\n  useOpenState,\n} from \"@/components/ui/ai-motion\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst DialogOpenContext = React.createContext<boolean | null>(null);\n\nconst OVERLAY =\n  \"fixed inset-0 isolate z-overlay bg-background/60 supports-backdrop-filter:backdrop-blur-sm\";\n\nfunction Dialog({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: DialogPrimitive.Root.Props) {\n  const [open, setOpen] = useOpenState(openProp, defaultOpen, onOpenChange);\n  return (\n    <DialogOpenContext.Provider value={open}>\n      <DialogPrimitive.Root\n        data-slot=\"dialog\"\n        open={open}\n        onOpenChange={setOpen}\n        {...props}\n      />\n    </DialogOpenContext.Provider>\n  );\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        OVERLAY,\n        \"transition-[opacity,backdrop-filter] duration-normal ease-standard data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:duration-fast\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n}) {\n  const open = React.useContext(DialogOpenContext) ?? true;\n  const reduced = useReducedMotion() ?? false;\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <DialogPrimitive.Portal data-slot=\"dialog-portal\" keepMounted>\n          <DialogPrimitive.Backdrop\n            data-slot=\"dialog-overlay\"\n            render={<motion.div {...backdropMotion(reduced)} />}\n            className={OVERLAY}\n          />\n          <DialogPrimitive.Popup\n            data-slot=\"dialog-content\"\n            render={<motion.div {...popupMotion(reduced, 0.94)} />}\n            className={cn(\n              \"fixed top-1/2 left-1/2 z-modal grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-popover p-5 text-sm text-popover-foreground shadow-2xl outline-none sm:max-w-sm\",\n              className\n            )}\n            {...props}\n          >\n            {children}\n            {showCloseButton && (\n              <DialogPrimitive.Close\n                data-slot=\"dialog-close\"\n                render={\n                  <Button\n                    variant=\"ghost\"\n                    className=\"absolute top-3 right-3\"\n                    size=\"icon-sm\"\n                  />\n                }\n              >\n                <XIcon />\n                <span className=\"sr-only\">Close</span>\n              </DialogPrimitive.Close>\n            )}\n          </DialogPrimitive.Popup>\n        </DialogPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"-mx-5 -mb-5 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/60 px-5 py-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"font-heading text-base leading-none font-medium\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n",
+      "type": "registry:ui",
+      "target": "components/ui/dialog.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}

package/templates/registry/document-viewer.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "document-viewer",
+  "title": "Document Viewer",
+  "description": "How a saved document reads when nobody is editing it: markdown with maths and diagrams, highlighted code, a sheet's rows, an image, and a sandboxed HTML preview — plus the title-to-language and kind-glyph helpers the chat canvas and the artifacts library share.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "@intelligo/ai-code-block",
+    "@intelligo/ai-markdown"
+  ],
+  "files": [
+    {
+      "path": "base/ui/document-viewer/document-viewer.tsx",
+      "content": "\"use client\";\n\n/**\n * How a saved document reads when nobody is editing it. The chat's canvas\n * and the artifacts library both compose it, so a document reads the same\n * in both: how its title names a language, how it is drawn, which glyph\n * stands for its kind. Editing and the words for a kind stay with each item.\n */\n\nimport type { ComponentProps } from \"react\";\nimport {\n  FileCodeIcon,\n  FileTextIcon,\n  ImageIcon,\n  SheetIcon,\n  type LucideIcon,\n} from \"lucide-react\";\n\nimport { CodeBlock } from \"@/components/ui/ai-code-block\";\nimport { Markdown } from \"@/components/ui/ai-markdown\";\n\nconst LANGUAGE_BY_EXTENSION: Record<string, string> = {\n  ts: \"typescript\",\n  tsx: \"tsx\",\n  js: \"javascript\",\n  jsx: \"jsx\",\n  py: \"python\",\n  rb: \"ruby\",\n  go: \"go\",\n  rs: \"rust\",\n  java: \"java\",\n  kt: \"kotlin\",\n  swift: \"swift\",\n  cs: \"csharp\",\n  sh: \"bash\",\n  sql: \"sql\",\n  json: \"json\",\n  yaml: \"yaml\",\n  yml: \"yaml\",\n  md: \"markdown\",\n  html: \"html\",\n  htm: \"html\",\n  svg: \"xml\",\n  css: \"css\",\n};\n\ntype CodeLanguage = ComponentProps<typeof CodeBlock>[\"language\"];\n\n/** A title's file extension, lower-cased: `report.PY` → `py`. */\nexport function extensionOf(title: string): string | undefined {\n  const match = /\\.([a-z0-9]{1,8})$/i.exec(title.trim());\n  return match?.[1]?.toLowerCase();\n}\n\nexport function languageOf(title: string): CodeLanguage {\n  return (LANGUAGE_BY_EXTENSION[extensionOf(title) ?? \"\"] ??\n    \"text\") as CodeLanguage;\n}\n\n/**\n * The name a downloaded document gets: its title, with an extension.\n * Takes the fallback extension rather than a kind, so nothing here has\n * to know what a canvas kind is.\n */\nexport function fileNameOf(title: string, extension?: string): string {\n  if (extensionOf(title)) return title.trim();\n  const base = title.trim().replace(/[\\\\/:*?\"<>|]+/g, \"-\") || \"document\";\n  return `${base}.${extension ?? \"txt\"}`;\n}\n\nconst PREVIEWABLE_EXTENSIONS = new Set([\"html\", \"htm\", \"svg\"]);\n\n/** Whether this document has a rendered form worth offering. */\nexport function isPreviewableTitle(title: string): boolean {\n  return PREVIEWABLE_EXTENSIONS.has(extensionOf(title) ?? \"\");\n}\n\nconst KIND_ICONS: Record<string, LucideIcon> = {\n  text: FileTextIcon,\n  code: FileCodeIcon,\n  sheet: SheetIcon,\n  image: ImageIcon,\n};\n\n/** A kind's glyph; an unknown kind reads as a document. */\nexport function documentKindIcon(kind: string): LucideIcon {\n  return KIND_ICONS[kind] ?? FileTextIcon;\n}\n\n/**\n * What a download of this kind is called when the title carries no\n * extension of its own. One table, so both surfaces offer a download\n * under the same extension.\n */\nconst KIND_EXTENSIONS: Record<string, string> = {\n  text: \"md\",\n  code: \"txt\",\n  sheet: \"csv\",\n  image: \"png\",\n};\n\nexport function documentKindExtension(kind: string): string | undefined {\n  return KIND_EXTENSIONS[kind];\n}\n\nexport interface DocumentViewProps {\n  content: string;\n  title: string;\n  /** Still arriving, so markdown renders incrementally. */\n  streaming?: boolean;\n}\n\n/** Notes and drafts: markdown, with maths and diagrams. */\nexport function TextView({ content, streaming }: DocumentViewProps) {\n  return (\n    <div className=\"prose prose-sm max-w-none dark:prose-invert\">\n      <Markdown mode={streaming ? \"streaming\" : \"static\"}>{content}</Markdown>\n    </div>\n  );\n}\n\nexport function CodeView({ content, title }: DocumentViewProps) {\n  return <CodeBlock code={content} language={languageOf(title)} showLineNumbers />;\n}\n\n/** A sheet as its raw rows — a grid is an editor's job. */\nexport function SheetView({ content }: DocumentViewProps) {\n  return (\n    <pre className=\"overflow-auto font-mono text-xs leading-relaxed whitespace-pre\">\n      {content}\n    </pre>\n  );\n}\n\n/** A generated image: the content is a data URL or an https URL. */\nexport function ImageView({ content, title }: DocumentViewProps) {\n  if (!content) return null;\n  return (\n    <img\n      src={content}\n      alt={title}\n      className=\"mx-auto max-h-full max-w-full rounded-lg object-contain\"\n    />\n  );\n}\n\n/**\n * An HTML page or an SVG, rendered in a sandbox: scripts run, but in an\n * opaque origin with no access to the app, its cookies or its storage.\n * The document asks for a light canvas, so a page written without a\n * background reads as it would on its own.\n */\nexport function HtmlPreview({ content, title }: DocumentViewProps) {\n  return (\n    <iframe\n      title={title}\n      sandbox=\"allow-scripts\"\n      srcDoc={`<meta name=\"color-scheme\" content=\"light\">${content}`}\n      className=\"size-full min-h-96 rounded-lg border\"\n    />\n  );\n}\n\n/**\n * A document drawn by its kind. An unknown kind — a product's own —\n * falls back to plain text rather than to nothing, which is the same\n * promise the canvas makes when it cannot resolve a kind.\n */\nexport function DocumentView({\n  kind,\n  ...props\n}: DocumentViewProps & { kind: string }) {\n  switch (kind) {\n    case \"code\":\n      return <CodeView {...props} />;\n    case \"sheet\":\n      return <SheetView {...props} />;\n    case \"image\":\n      return <ImageView {...props} />;\n    case \"text\":\n      return <TextView {...props} />;\n    default:\n      return (\n        <div className=\"text-sm leading-relaxed whitespace-pre-wrap\">\n          {props.content}\n        </div>\n      );\n  }\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/document-viewer.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}

package/templates/registry/dropdown-menu.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dropdown-menu",
+  "title": "Dropdown Menu",
+  "description": "Actions, checkboxes and radio groups with submenus, in a panel that scales out of its trigger.",
+  "dependencies": [
+    "@base-ui/react",
+    "lucide-react",
+    "motion"
+  ],
+  "registryDependencies": [
+    "@intelligo/ai-motion"
+  ],
+  "files": [
+    {
+      "path": "base/ui/dropdown-menu/dropdown-menu.tsx",
+      "content": "\"use client\";\n\n/*\n * The dropdown menu: a rounded panel that scales out of its trigger, rows\n * that tint as the highlight moves. The panel springs open with motion;\n * the root is kept controlled so the exit plays.\n */\n\nimport * as React from \"react\";\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { ChevronRightIcon, CheckIcon } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\n\nimport { popupMotion, useOpenState } from \"@/components/ui/ai-motion\";\nimport { cn } from \"@/lib/utils\";\n\n// The open state of the nearest menu — a submenu provides its own.\nconst MenuOpenContext = React.createContext<boolean | null>(null);\n\nfunction DropdownMenu({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: MenuPrimitive.Root.Props) {\n  const [open, setOpen] = useOpenState(openProp, defaultOpen, onOpenChange);\n  return (\n    <MenuOpenContext.Provider value={open}>\n      <MenuPrimitive.Root\n        data-slot=\"dropdown-menu\"\n        open={open}\n        onOpenChange={setOpen}\n        {...props}\n      />\n    </MenuOpenContext.Provider>\n  );\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />;\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  const open = React.useContext(MenuOpenContext) ?? true;\n  const reduced = useReducedMotion() ?? false;\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <MenuPrimitive.Portal keepMounted>\n          <MenuPrimitive.Positioner\n            className=\"isolate z-popover outline-none\"\n            align={align}\n            alignOffset={alignOffset}\n            side={side}\n            sideOffset={sideOffset}\n          >\n            <MenuPrimitive.Popup\n              data-slot=\"dropdown-menu-content\"\n              render={<motion.div {...popupMotion(reduced)} />}\n              className={cn(\n                \"max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none data-closed:overflow-hidden\",\n                className\n              )}\n              {...props}\n            />\n          </MenuPrimitive.Positioner>\n        </MenuPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  );\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm outline-hidden transition-colors duration-fast select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuSub({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: MenuPrimitive.SubmenuRoot.Props) {\n  const [open, setOpen] = useOpenState(openProp, defaultOpen, onOpenChange);\n  return (\n    <MenuOpenContext.Provider value={open}>\n      <MenuPrimitive.SubmenuRoot\n        data-slot=\"dropdown-menu-sub\"\n        open={open}\n        onOpenChange={setOpen}\n        {...props}\n      />\n    </MenuOpenContext.Provider>\n  );\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm outline-hidden transition-colors duration-fast select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"w-auto min-w-24\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden transition-colors duration-fast select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden transition-colors duration-fast select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n};\n",
+      "type": "registry:ui",
+      "target": "components/ui/dropdown-menu.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}

package/templates/registry/expandable-tabs.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "expandable-tabs",
+  "title": "Expandable Tabs",
+  "description": "A bar of icon tabs on Base UI's Tabs where the active tab widens to unfurl its label, the pill glides to it and its panel rises in.",
+  "dependencies": [
+    "@base-ui/react",
+    "motion"
+  ],
+  "registryDependencies": [
+    "@intelligo/ai-motion"
+  ],
+  "files": [
+    {
+      "path": "base/ui/expandable-tabs/expandable-tabs.tsx",
+      "content": "\"use client\";\n\n/*\n * A bar of icon tabs where the active tab widens to show its label: the\n * label unfurls, the pill glides to it and its panel rises in. Tablist\n * semantics, roving focus and arrow keys come from Base UI's Tabs.\n */\n\nimport * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { motion, useReducedMotion } from \"motion/react\";\n\nimport { EASE_OUT, SPRING_LAYOUT } from \"@/components/ui/ai-motion\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ExpandableTabsItem {\n  id: string;\n  /** Shown inside the active tab; always the tab's accessible name. */\n  label: string;\n  icon: React.ReactNode;\n  /** Optional panel shown for this tab. */\n  content?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ExpandableTabsClassNames {\n  root?: string;\n  list?: string;\n  tab?: string;\n  pill?: string;\n  label?: string;\n  panel?: string;\n}\n\nexport interface ExpandableTabsProps {\n  items: ExpandableTabsItem[];\n  /** Active tab id; `null` means no tab is open (with `collapsible`). */\n  value?: string | null;\n  defaultValue?: string | null;\n  onValueChange?: (id: string | null) => void;\n  /** Pressing the active tab again closes it. */\n  collapsible?: boolean;\n  /** Accessible name of the tab list. */\n  \"aria-label\"?: string;\n  className?: string;\n  classNames?: ExpandableTabsClassNames;\n}\n\nconst LABEL_OPEN = { type: \"spring\", duration: 0.38, bounce: 0.03 } as const;\nconst LABEL_CLOSE = { duration: 0.16, ease: EASE_OUT } as const;\n\nexport function ExpandableTabs({\n  items,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  collapsible = false,\n  \"aria-label\": ariaLabel = \"Tabs\",\n  className,\n  classNames,\n}: ExpandableTabsProps) {\n  const reduced = useReducedMotion() ?? false;\n  const pillId = React.useId();\n  const [uncontrolled, setUncontrolled] = React.useState<string | null>(\n    defaultValue !== undefined\n      ? defaultValue\n      : collapsible\n        ? null\n        : (items[0]?.id ?? null)\n  );\n  const value = valueProp !== undefined ? valueProp : uncontrolled;\n\n  const setValue = (next: string | null) => {\n    if (valueProp === undefined) setUncontrolled(next);\n    onValueChange?.(next);\n  };\n\n  const active = items.find((item) => item.id === value);\n  const hasPanels = items.some((item) => item.content !== undefined);\n\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"expandable-tabs\"\n      value={value}\n      onValueChange={(next) => setValue(next as string | null)}\n      className={cn(\n        \"flex flex-col items-center gap-2\",\n        className,\n        classNames?.root\n      )}\n    >\n      {hasPanels\n        ? items.map((item) => (\n            <TabsPrimitive.Panel\n              key={item.id}\n              value={item.id}\n              className={cn(\"w-full outline-none\", classNames?.panel)}\n            >\n              <motion.div\n                initial={\n                  reduced\n                    ? { opacity: 0 }\n                    : { opacity: 0, y: 6, scale: 0.98, filter: \"blur(4px)\" }\n                }\n                animate={{ opacity: 1, y: 0, scale: 1, filter: \"blur(0px)\" }}\n                transition={\n                  reduced ? { duration: 0 } : { duration: 0.28, ease: EASE_OUT }\n                }\n              >\n                {item.content}\n              </motion.div>\n            </TabsPrimitive.Panel>\n          ))\n        : null}\n\n      <TabsPrimitive.List\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex items-center gap-1 rounded-lg border border-border bg-card p-1\",\n          classNames?.list\n        )}\n      >\n        {items.map((item) => {\n          const selected = item.id === active?.id;\n          return (\n            <TabsPrimitive.Tab\n              key={item.id}\n              value={item.id}\n              disabled={item.disabled}\n              aria-label={item.label}\n              onClick={() => {\n                // Base UI ignores a press on the active tab; collapsing is ours.\n                if (collapsible && selected) setValue(null);\n              }}\n              render={\n                <motion.button\n                  layout={reduced ? false : \"position\"}\n                  transition={reduced ? { duration: 0 } : SPRING_LAYOUT}\n                />\n              }\n              className={cn(\n                \"relative isolate inline-flex h-9 min-w-9 shrink-0 items-center justify-center rounded-md px-2.5 text-sm font-medium whitespace-nowrap outline-none\",\n                \"text-muted-foreground transition-colors duration-150 hover:text-foreground data-active:text-foreground\",\n                \"focus-visible:ring-3 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n                \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n                classNames?.tab\n              )}\n            >\n              {selected ? (\n                <motion.span\n                  aria-hidden\n                  layoutId={reduced ? undefined : pillId}\n                  transition={reduced ? { duration: 0 } : SPRING_LAYOUT}\n                  className={cn(\n                    \"absolute inset-0 -z-10 rounded-md bg-accent\",\n                    classNames?.pill\n                  )}\n                />\n              ) : null}\n              <span aria-hidden className=\"grid place-items-center\">\n                {item.icon}\n              </span>\n              <motion.span\n                aria-hidden\n                initial={false}\n                animate={\n                  reduced\n                    ? {\n                        width: selected ? \"auto\" : 0,\n                        opacity: selected ? 1 : 0,\n                        marginLeft: selected ? 6 : 0,\n                      }\n                    : {\n                        width: selected ? \"auto\" : 0,\n                        opacity: selected ? 1 : 0,\n                        marginLeft: selected ? 6 : 0,\n                        filter: selected ? \"blur(0px)\" : \"blur(3px)\",\n                      }\n                }\n                transition={\n                  reduced\n                    ? { duration: 0 }\n                    : selected\n                      ? LABEL_OPEN\n                      : LABEL_CLOSE\n                }\n                className={cn(\n                  \"inline-block overflow-hidden\",\n                  classNames?.label\n                )}\n              >\n                {item.label}\n              </motion.span>\n            </TabsPrimitive.Tab>\n          );\n        })}\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  );\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/expandable-tabs.tsx"
+    }
+  ],
+  "type": "registry:ui"
+}

package/templates/registry/feature-gating.json

@@ -0,0 +1,73 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "feature-gating",
+  "title": "Feature Gating",
+  "description": "The vocabulary for selling a plan: a server-side FeatureGate that renders gated content only to entitled workspaces, three densities of upgrade prompt (full, compact, inline), a quota warning that escalates as a limit approaches, and a preview paywall that blurs content instead of hiding it. Which features exist and which plan unlocks them is consumer config (lib/feature-catalog.ts). Install pricing or billing-settings for somewhere to send the user.",
+  "dependencies": [
+    "@intelligo-dev/billing",
+    "lucide-react",
+    "next-intl"
+  ],
+  "registryDependencies": [
+    "@intelligo/button",
+    "card",
+    "@intelligo/dialog"
+  ],
+  "files": [
+    {
+      "path": "base/feature-gating/components/feature-gate.tsx",
+      "content": "/**\n * Server-side entitlement gate: renders `children` when the active\n * workspace is entitled to `feature`, and an upgrade prompt when it\n * isn't.\n *\n * A server component so gated content never reaches a browser that is\n * not entitled to it. It is still not authorization: the action or\n * route behind the feature must check for itself.\n *\n * What a locked feature is called, and which plan unlocks it, comes\n * from `@/lib/feature-catalog` — consumer-owned, because features are\n * product data. An unlisted feature still gates; it just falls back to\n * generic copy.\n */\n\nimport { getTranslations } from \"next-intl/server\";\n\nimport { getWorkspacePlan, hasFeature } from \"@intelligo-dev/billing\";\nimport {\n  getDefaultProductSlug,\n  getPlanBySlug,\n} from \"@intelligo-dev/billing/plans\";\n\nimport { featureCatalog } from \"@/lib/feature-catalog\";\nimport { UpgradePrompt } from \"./upgrade-prompt\";\n\ninterface FeatureGateProps {\n  workspaceId: string;\n  /** Feature key, as registered with `registerProductFeatures`. */\n  feature: string;\n  children: React.ReactNode;\n  /** Rendered instead of the default prompt when the gate closes. */\n  fallback?: React.ReactNode;\n  variant?: \"full\" | \"compact\";\n}\n\nexport async function FeatureGate({\n  workspaceId,\n  feature,\n  children,\n  fallback,\n  variant = \"full\",\n}: FeatureGateProps) {\n  if (await hasFeature(workspaceId, feature)) {\n    return <>{children}</>;\n  }\n\n  if (fallback) {\n    return <>{fallback}</>;\n  }\n\n  const t = await getTranslations(\"feature-gating\");\n  // Namespace-less: catalogue keys are fully qualified so a product can\n  // point them at its own namespace.\n  const tAny = await getTranslations();\n\n  const descriptor = featureCatalog[feature];\n  const currentPlanSlug = await getWorkspacePlan(workspaceId);\n\n  // The plan catalogue is registered per product by the composition\n  // root; `getDefaultProductSlug()` is the slug it set there.\n  const product = getDefaultProductSlug();\n  const planName = (slug: string) => getPlanBySlug(slug, product)?.name ?? slug;\n\n  return (\n    <UpgradePrompt\n      feature={descriptor ? tAny(descriptor.labelKey) : t(\"genericFeature\")}\n      requiredPlan={\n        descriptor?.requiredPlan\n          ? planName(descriptor.requiredPlan)\n          : t(\"genericPlan\")\n      }\n      description={\n        descriptor?.descriptionKey ? tAny(descriptor.descriptionKey) : undefined\n      }\n      currentPlan={planName(currentPlanSlug)}\n      variant={variant}\n    />\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/billing/feature-gate.tsx"
+    },
+    {
+      "path": "base/feature-gating/components/upgrade-prompt.tsx",
+      "content": "\"use client\";\n\n/**\n * What a closed `FeatureGate` renders: the feature's name, the plan\n * that unlocks it, and one way forward.\n *\n * `full` fills a page section, for a gate that replaces the whole\n * surface; `compact` fits a card or panel.\n */\n\nimport { ArrowUpRight, Lock } from \"lucide-react\";\nimport { useTranslations } from \"next-intl\";\n\nimport { Link } from \"@/i18n/navigation\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { featureGatingConfig } from \"@/lib/feature-gating-config\";\n\ninterface UpgradePromptProps {\n  /** Display name of the gated feature, already localized. */\n  feature: string;\n  /** Display name of the plan that unlocks it, already localized. */\n  requiredPlan: string;\n  description?: string;\n  currentPlan?: string;\n  variant?: \"full\" | \"compact\";\n}\n\nexport function UpgradePrompt({\n  feature,\n  requiredPlan,\n  description,\n  currentPlan,\n  variant = \"full\",\n}: UpgradePromptProps) {\n  const t = useTranslations(\"feature-gating\");\n  const compact = variant === \"compact\";\n\n  return (\n    <div\n      className={\n        compact ? \"p-6\" : \"flex min-h-100 items-center justify-center p-6\"\n      }\n    >\n      <Card className=\"w-full max-w-md text-center\">\n        <CardHeader>\n          <div\n            className={`mx-auto mb-4 flex items-center justify-center rounded-full bg-muted ${\n              compact ? \"size-8\" : \"size-12\"\n            }`}\n          >\n            <Lock className={compact ? \"size-4\" : \"size-6\"} aria-hidden />\n          </div>\n          <CardTitle className={compact ? \"text-lg\" : \"text-xl\"}>\n            {t(\"prompt.title\", { feature, plan: requiredPlan })}\n          </CardTitle>\n          <CardDescription>\n            {description ??\n              t(\"prompt.description\", { feature, plan: requiredPlan })}\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          {!compact && currentPlan ? (\n            <p className=\"mb-4 text-sm text-muted-foreground\">\n              {t.rich(\"prompt.currentPlan\", {\n                plan: currentPlan,\n                strong: (chunks) => (\n                  <span className=\"font-medium text-foreground\">{chunks}</span>\n                ),\n              })}\n            </p>\n          ) : null}\n          <Button\n            size={compact ? \"sm\" : \"default\"}\n            className=\"w-full\"\n            render={<Link href={featureGatingConfig.upgradeHref} />}\n            nativeButton={false}\n          >\n            {t(\"prompt.cta\", { plan: requiredPlan })}\n            <ArrowUpRight className=\"ml-2 size-4\" />\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/billing/upgrade-prompt.tsx"
+    },
+    {
+      "path": "base/feature-gating/components/inline-upgrade-banner.tsx",
+      "content": "\"use client\";\n\n/**\n * The quietest of the three gating densities: one row, for a control\n * that is present but unavailable — a disabled toggle, a menu item a\n * plan doesn't include. Use `UpgradePrompt` when the gate replaces\n * real content, and this when it only annotates it.\n */\n\nimport { ArrowUpRight, Lock } from \"lucide-react\";\nimport { useTranslations } from \"next-intl\";\n\nimport { Link } from \"@/i18n/navigation\";\nimport { Button } from \"@/components/ui/button\";\nimport { featureGatingConfig } from \"@/lib/feature-gating-config\";\n\ninterface InlineUpgradeBannerProps {\n  /** Display name of the gated feature, already localized. */\n  feature: string;\n  /** Display name of the plan that unlocks it, already localized. */\n  requiredPlan: string;\n  /** Overrides the default sentence entirely. */\n  message?: string;\n}\n\nexport function InlineUpgradeBanner({\n  feature,\n  requiredPlan,\n  message,\n}: InlineUpgradeBannerProps) {\n  const t = useTranslations(\"feature-gating\");\n\n  return (\n    <div className=\"flex items-center gap-3 rounded-lg border bg-muted/50 p-3\">\n      <span className=\"flex size-8 shrink-0 items-center justify-center rounded-full bg-muted\">\n        <Lock className=\"size-4 text-muted-foreground\" aria-hidden />\n      </span>\n      <p className=\"flex-1 text-sm text-muted-foreground\">\n        {message ?? t(\"inline.message\", { feature, plan: requiredPlan })}\n      </p>\n      <Button\n        size=\"sm\"\n        variant=\"outline\"\n        render={<Link href={featureGatingConfig.upgradeHref} />}\n        nativeButton={false}\n      >\n        {t(\"inline.cta\")}\n        <ArrowUpRight className=\"ml-2 size-3\" />\n      </Button>\n    </div>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/billing/inline-upgrade-banner.tsx"
+    },
+    {
+      "path": "base/feature-gating/components/quota-warning.tsx",
+      "content": "\"use client\";\n\n/**\n * Approaching-the-limit banner for a metered action.\n *\n * Renders nothing below the warning threshold, muted between it and\n * the urgent one, destructive above. Thresholds live in\n * `@/lib/feature-gating-config`.\n *\n * The copy is this item's own, computed from `remaining`, rather than\n * the `warning` string `@intelligo-dev/billing` returns: that string is\n * produced by a package that cannot know the caller's locale. Pass\n * `message` to override.\n */\n\nimport { AlertTriangle } from \"lucide-react\";\nimport { useTranslations } from \"next-intl\";\n\nimport type { FeatureQuotaResult } from \"@intelligo-dev/billing\";\nimport { cn } from \"@/lib/utils\";\nimport { featureGatingConfig } from \"@/lib/feature-gating-config\";\n\ninterface QuotaWarningProps {\n  quota: FeatureQuotaResult;\n  /** Overrides the computed sentence. */\n  message?: string;\n  className?: string;\n}\n\nexport function QuotaWarning({ quota, message, className }: QuotaWarningProps) {\n  const t = useTranslations(\"feature-gating\");\n  const { warnAtPercent, urgentAtPercent } = featureGatingConfig;\n\n  if (quota.percentage < warnAtPercent) return null;\n\n  const isUrgent = quota.percentage >= urgentAtPercent;\n\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        \"flex items-center gap-2 rounded-lg border px-3 py-2 text-sm\",\n        isUrgent\n          ? \"border-destructive/20 bg-destructive/10 text-destructive\"\n          : \"border-border bg-muted text-foreground\",\n        className\n      )}\n    >\n      <AlertTriangle className=\"size-4 shrink-0\" aria-hidden />\n      <span>\n        {message ??\n          (quota.remaining > 0\n            ? t(\"quota.remaining\", { count: quota.remaining })\n            : t(\"quota.exhausted\"))}\n      </span>\n    </div>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/billing/quota-warning.tsx"
+    },
+    {
+      "path": "base/feature-gating/components/quota-limit-dialog.tsx",
+      "content": "\"use client\";\n\n/**\n * The modal shown when a metered action is refused mid-flow (unlike\n * `QuotaWarning`, which appears before the limit). It says what ran\n * out, offers the plans passed in, and can always be dismissed.\n */\n\nimport { ArrowRight, Sparkles } from \"lucide-react\";\nimport { useFormatter, useTranslations } from \"next-intl\";\n\nimport type { FeatureQuotaResult } from \"@intelligo-dev/billing\";\nimport type { PlanConfig } from \"@intelligo-dev/billing/plans\";\n\nimport { Link } from \"@/i18n/navigation\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { CURRENCY } from \"@/lib/billing-config\";\nimport { featureGatingConfig } from \"@/lib/feature-gating-config\";\n\ninterface QuotaLimitDialogProps {\n  open: boolean;\n  onClose: () => void;\n  quota: FeatureQuotaResult;\n  /**\n   * Plans to offer, already filtered to ones above the caller's\n   * current plan. Resolve them on the server (`getPlanConfigs`) and\n   * pass them down — this component does not decide who is eligible\n   * for what.\n   */\n  upgradeOptions: PlanConfig[];\n  /** Localized name of the action that ran out (e.g. \"Messages\"). */\n  actionLabel?: string;\n}\n\nexport function QuotaLimitDialog({\n  open,\n  onClose,\n  quota,\n  upgradeOptions,\n  actionLabel,\n}: QuotaLimitDialogProps) {\n  const t = useTranslations(\"feature-gating\");\n  const format = useFormatter();\n\n  const price = (plan: PlanConfig) => {\n    const amount = plan.priceMonthly ?? plan.priceOneTime;\n    if (!amount) return null;\n    return format.number(amount, {\n      style: \"currency\",\n      currency: CURRENCY,\n      maximumFractionDigits: 0,\n    });\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onClose}>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <div className=\"mx-auto mb-2 flex size-12 items-center justify-center rounded-full bg-primary/10\">\n            <Sparkles className=\"size-6 text-primary\" aria-hidden />\n          </div>\n          <DialogTitle className=\"text-center\">\n            {t(\"limitDialog.title\", {\n              action: actionLabel ?? t(\"limitDialog.genericAction\"),\n            })}\n          </DialogTitle>\n          <DialogDescription className=\"text-center\">\n            {t(\"limitDialog.description\", {\n              used: quota.used,\n              limit: quota.limit,\n            })}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"mt-4 space-y-3\">\n          {upgradeOptions.map((plan, index) => {\n            const amount = price(plan);\n            return (\n              <Button\n                key={plan.slug}\n                size=\"lg\"\n                variant={index === 0 ? \"default\" : \"outline\"}\n                className=\"w-full\"\n                render={<Link href={featureGatingConfig.upgradeHref} />}\n                nativeButton={false}\n              >\n                {amount\n                  ? t(\"limitDialog.planCta\", {\n                      plan: plan.name,\n                      price: amount,\n                    })\n                  : t(\"limitDialog.planCtaNoPrice\", { plan: plan.name })}\n                <ArrowRight className=\"ml-2 size-4\" />\n              </Button>\n            );\n          })}\n\n          <Button variant=\"ghost\" className=\"w-full\" onClick={onClose}>\n            {t(\"limitDialog.dismiss\")}\n          </Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/billing/quota-limit-dialog.tsx"
+    },
+    {
+      "path": "base/feature-gating/components/paywall-blur.tsx",
+      "content": "\"use client\";\n\n/**\n * Preview paywall: shows that the content exists and is worth having,\n * without giving it away. The children render blurred, inert and\n * unselectable behind an overlay with the upgrade CTA.\n *\n * The blur is presentation, not protection: the content is in the DOM.\n * Anything that must not reach an unentitled browser belongs behind\n * `FeatureGate` on the server instead.\n */\n\nimport { ArrowRight, Lock } from \"lucide-react\";\nimport { useTranslations } from \"next-intl\";\n\nimport { Link } from \"@/i18n/navigation\";\nimport { Button } from \"@/components/ui/button\";\nimport { featureGatingConfig } from \"@/lib/feature-gating-config\";\n\ninterface PaywallBlurProps {\n  children: React.ReactNode;\n  isLocked: boolean;\n  /** Heading over the blur; falls back to this item's copy. */\n  title?: string;\n  /** Sentence under the heading. */\n  description?: string;\n  /** CTA label; falls back to this item's copy. */\n  ctaLabel?: string;\n}\n\nexport function PaywallBlur({\n  children,\n  isLocked,\n  title,\n  description,\n  ctaLabel,\n}: PaywallBlurProps) {\n  const t = useTranslations(\"feature-gating\");\n\n  if (!isLocked) return <>{children}</>;\n\n  return (\n    <div className=\"relative\">\n      <div aria-hidden className=\"pointer-events-none select-none blur-sm\">\n        {children}\n      </div>\n\n      <div className=\"absolute inset-0 flex items-center justify-center rounded-xl bg-background/60 backdrop-blur-[2px]\">\n        <div className=\"max-w-sm p-6 text-center\">\n          <div className=\"mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-primary/10\">\n            <Lock className=\"size-5 text-primary\" aria-hidden />\n          </div>\n          <h3 className=\"text-lg font-semibold\">\n            {title ?? t(\"paywall.title\")}\n          </h3>\n          <p className=\"mt-2 text-sm text-muted-foreground\">\n            {description ?? t(\"paywall.description\")}\n          </p>\n          <Button\n            size=\"lg\"\n            className=\"mt-4\"\n            render={<Link href={featureGatingConfig.upgradeHref} />}\n            nativeButton={false}\n          >\n            {ctaLabel ?? t(\"paywall.cta\")}\n            <ArrowRight className=\"ml-2 size-4\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
+      "type": "registry:component",
+      "target": "components/billing/paywall-blur.tsx"
+    },
+    {
+      "path": "base/feature-gating/lib/feature-catalog.ts",
+      "content": "/**\n * Feature catalogue — consumer-owned.\n *\n * Which features exist, what to call them, and which plan unlocks them\n * is product data, not framework data: `@intelligo-dev/billing` answers\n * \"is this workspace entitled to feature X\" (`hasFeature`), and this\n * file answers \"what should we say when it isn't\".\n *\n * `labelKey` and `descriptionKey` are fully-qualified message keys\n * resolved namespace-less (the `chatConfig.starters` contract), so a\n * feature's copy lives in your own message files. `requiredPlan` is\n * the plan slug that unlocks it — rendered through the plan catalogue\n * registered by your composition root, so the name a user sees stays\n * in one place.\n *\n * A feature missing from this map still gates correctly; it just falls\n * back to generic copy.\n */\n\nexport interface FeatureDescriptor {\n  /** Fully-qualified message key for the feature's display name. */\n  labelKey: string;\n  /** Plan slug that unlocks it (must exist in your plan catalogue). */\n  requiredPlan: string;\n  /** Fully-qualified message key for a longer explanation. */\n  descriptionKey?: string;\n}\n\n/**\n * Example, once your product has features to gate:\n *\n *   export const featureCatalog: Record<string, FeatureDescriptor> = {\n *     file_uploads: {\n *       labelKey: \"features.fileUploads.label\",\n *       descriptionKey: \"features.fileUploads.description\",\n *       requiredPlan: \"pro\",\n *     },\n *   };\n */\nexport const featureCatalog: Record<string, FeatureDescriptor> = {};\n",
+      "type": "registry:file",
+      "target": "lib/feature-catalog.ts"
+    },
+    {
+      "path": "base/feature-gating/lib/feature-gating-config.ts",
+      "content": "/**\n * Feature-gating configuration — consumer-owned.\n *\n * `upgradeHref`: where every gating surface sends the user. Defaults\n * to the billing settings page (the `billing-settings` item's route),\n * which is where a plan change actually happens; point it at\n * `/pricing` if your product prefers the comparison first.\n *\n * `warnAtPercent` / `urgentAtPercent`: when `QuotaWarning` starts\n * showing, and when it escalates. Below the first, it renders nothing.\n */\n\nexport interface FeatureGatingConfig {\n  upgradeHref: string;\n  warnAtPercent: number;\n  urgentAtPercent: number;\n}\n\nexport const featureGatingConfig: FeatureGatingConfig = {\n  upgradeHref: \"/settings/billing\",\n  warnAtPercent: 80,\n  urgentAtPercent: 95,\n};\n",
+      "type": "registry:file",
+      "target": "lib/feature-gating-config.ts"
+    },
+    {
+      "path": "base/feature-gating/messages/en.json",
+      "content": "{\n  \"genericFeature\": \"This feature\",\n  \"genericPlan\": \"a paid plan\",\n  \"prompt\": {\n    \"title\": \"{feature} requires {plan}\",\n    \"description\": \"{feature} is included from the {plan} plan up. Upgrade to unlock it.\",\n    \"currentPlan\": \"You're currently on the <strong>{plan}</strong> plan.\",\n    \"cta\": \"Upgrade to {plan}\"\n  },\n  \"inline\": {\n    \"message\": \"Upgrade to {plan} to use {feature}\",\n    \"cta\": \"Upgrade\"\n  },\n  \"quota\": {\n    \"remaining\": \"{count, plural, one {# use left} other {# uses left}}\",\n    \"exhausted\": \"You've used everything included in your plan.\"\n  },\n  \"paywall\": {\n    \"title\": \"See the full version\",\n    \"description\": \"Upgrade to read this in full, and to keep everything you generate.\",\n    \"cta\": \"Upgrade\"\n  },\n  \"limitDialog\": {\n    \"title\": \"You've used all your {action}\",\n    \"genericAction\": \"included usage\",\n    \"description\": \"You've used {used} of {limit}. Upgrading raises the limit right away.\",\n    \"planCta\": \"Upgrade to {plan} — {price}\",\n    \"planCtaNoPrice\": \"Upgrade to {plan}\",\n    \"dismiss\": \"Not now\"\n  }\n}\n",
+      "type": "registry:file",
+      "target": "messages/en/feature-gating.json"
+    }
+  ],
+  "type": "registry:block"
+}