{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agent-generative-surface",
  "type": "registry:block",
  "title": "Agent Generative Surface",
  "description": "agent generative surface",
  "dependencies": [
    "lucide-react@0.577.0",
    "motion@12.26.2",
    "react-aria-components@^1.21.1",
    "tailwind-merge@^3.0.1",
    "tailwindcss@^4.1.7"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/agents-ui/agent-generative-surface.tsx",
      "target": "@components/agents-ui/agent-generative-surface.tsx",
      "type": "registry:component",
      "content": "export { AgentGenerativeSurface } from \"./application/generative-surface/generative-surface\"\nexport type {\n  AgentGenerativeSurfaceProps,\n  GeneratedContent,\n} from \"./application/generative-surface/generative-surface\"\nexport { ResultActions } from \"./application/generative-surface/result-actions\"\nexport type {\n  ResultActionsProps,\n  ResultActionState,\n} from \"./application/generative-surface/result-actions\"\n"
    },
    {
      "path": "components/agents-ui/application/generative-surface/generative-surface.tsx",
      "target": "@components/agents-ui/application/generative-surface/generative-surface.tsx",
      "type": "registry:component",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/boardui/base/buttons/button\"\nimport { cx } from \"@/components/boardui/utils/cx\"\nimport {\n  ArrowUpRight,\n  Calendar,\n  Check,\n  MapPin,\n  Pause,\n  Play,\n  RotateCcw,\n  Search,\n  SkipBack,\n  SkipForward,\n  Sun,\n} from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport * as React from \"react\"\nimport { type ReactNode } from \"react\"\nimport {\n  GeneratedWorkCardContent,\n  type GeneratedWorkContent,\n} from \"./work-content\"\n\ntype MediaItem = { id: string; src: string; alt: string }\nexport type GeneratedContent =\n  | GeneratedWorkContent\n  | {\n      type: \"audio\"\n      title: string\n      creator: string\n      cover?: string\n      playing: boolean\n      position: number\n      duration: number\n    }\n  | {\n      type: \"focus\"\n      title: string\n      remaining: number\n      duration: number\n      running: boolean\n    }\n  | {\n      type: \"flight\"\n      origin: string\n      originName: string\n      destination: string\n      destinationName: string\n      departure: string\n      arrival: string\n      progress: number\n      status: string\n    }\n  | {\n      type: \"location\"\n      title: string\n      subtitle: string\n      image?: string\n      mapUrl?: string\n    }\n  | {\n      type: \"weather\"\n      location: string\n      temperature: number\n      unit: string\n      condition: string\n      forecast: { day: string; temperature: number }[]\n    }\n  | {\n      type: \"stories\"\n      title: string\n      items: {\n        id: string\n        title: string\n        source: string\n        image?: string\n        href?: string\n      }[]\n    }\n  | {\n      type: \"inbox\"\n      title: string\n      items: {\n        id: string\n        sender: string\n        text: string\n        time: string\n        unread: boolean\n        images?: MediaItem[]\n      }[]\n    }\n  | { type: \"note\"; title: string; body: string; status: string }\n  | {\n      type: \"collection\"\n      title: string\n      description: string\n      images: MediaItem[]\n    }\n  | {\n      type: \"event\"\n      title: string\n      time: string\n      timezone: string\n      date: string\n      location: string\n      attendees: string[]\n    }\n  | {\n      type: \"activity\"\n      title: string\n      value: string\n      unit: string\n      description: string\n      points: { label: string; value: number }[]\n    }\n\nexport interface AgentGenerativeSurfaceProps {\n  content: GeneratedContent\n  status?: \"ready\" | \"loading\" | \"error\"\n  error?: string\n  onAction?: (action: string, id?: string) => void\n  onSeek?: (seconds: number) => void\n  onRetry?: () => void\n  className?: string\n  animate?: boolean\n}\n\nconst clamp = (value: number, max = 100) =>\n  Math.max(0, Math.min(max, Number.isFinite(value) ? value : 0))\nconst clock = (seconds: number) =>\n  `${Math.floor(Math.max(0, seconds) / 60)}:${String(Math.floor(Math.max(0, seconds) % 60)).padStart(2, \"0\")}`\nconst caption = \"text-[13px] leading-[1.55] text-text-secondary\"\nconst heading = \"text-sm font-medium tracking-tight\"\nfunction Header({ title, children }: { title: string; children?: ReactNode }) {\n  return (\n    <header className=\"mb-4 flex items-center justify-between gap-3\">\n      <h3 className={heading}>{title}</h3>\n      {children}\n    </header>\n  )\n}\nfunction Picture({\n  src,\n  alt,\n  className,\n}: {\n  src: string\n  alt: string\n  className?: string\n}) {\n  // Caller-provided media stays an ordinary image, without a framework loader.\n  return (\n    // eslint-disable-next-line @next/next/no-img-element\n    <img\n      src={src}\n      alt={alt}\n      className={cx(\"object-cover\", className)}\n      loading=\"lazy\"\n    />\n  )\n}\n\nfunction Content({\n  content: c,\n  onAction,\n  onSeek,\n}: AgentGenerativeSurfaceProps) {\n  switch (c.type) {\n    case \"comparison\":\n    case \"recommendation\":\n    case \"document\":\n    case \"checklist\":\n    case \"source-brief\":\n      return <GeneratedWorkCardContent content={c} onAction={onAction} />\n    case \"audio\":\n      return (\n        <>\n          <div className=\"flex gap-4\">\n            {c.cover && (\n              <Picture\n                src={c.cover}\n                alt={`${c.title} cover`}\n                className=\"size-24 shrink-0 rounded-xl\"\n              />\n            )}\n            <div className=\"min-w-0 flex-1\">\n              <h3 className={heading}>{c.title}</h3>\n              <p className={caption}>{c.creator}</p>\n              <div className=\"mt-3 flex items-center gap-3\">\n                <Button\n                  variant=\"ghost\"\n                  iconOnly\n                  leadingIcon={SkipBack}\n                  aria-label=\"Previous track\"\n                  disabled={!onAction}\n                  onClick={() => onAction?.(\"previous\")}\n                />\n                <Button\n                  iconOnly\n                  leadingIcon={c.playing ? Pause : Play}\n                  aria-label={c.playing ? \"Pause audio\" : \"Play audio\"}\n                  disabled={!onAction}\n                  className=\"rounded-full\"\n                  onClick={() => onAction?.(c.playing ? \"pause\" : \"play\")}\n                />\n                <Button\n                  variant=\"ghost\"\n                  iconOnly\n                  leadingIcon={SkipForward}\n                  aria-label=\"Next track\"\n                  disabled={!onAction}\n                  onClick={() => onAction?.(\"next\")}\n                />\n              </div>\n            </div>\n          </div>\n          <input\n            aria-label=\"Audio position\"\n            type=\"range\"\n            min={0}\n            max={Math.max(1, c.duration)}\n            value={clamp(c.position, c.duration)}\n            onChange={(event) => onSeek?.(Number(event.target.value))}\n            disabled={!onSeek}\n            className=\"mt-5 h-1 w-full accent-current\"\n          />\n          <div className=\"text-text-secondary mt-2 flex justify-between text-xs tabular-nums\">\n            <span>{clock(c.position)}</span>\n            <span>{clock(Math.max(0, c.duration - c.position))} remaining</span>\n          </div>\n        </>\n      )\n    case \"focus\": {\n      const progress = clamp(c.remaining / Math.max(1, c.duration), 1)\n      return (\n        <>\n          <Header title={c.title}>\n            <span className=\"text-[13px] text-white/65\">\n              {c.running\n                ? \"In progress\"\n                : c.remaining === 0\n                  ? \"Complete\"\n                  : \"Paused\"}\n            </span>\n          </Header>\n          <div className=\"relative mx-auto my-5 size-44\">\n            <svg\n              viewBox=\"0 0 180 180\"\n              className=\"size-full -rotate-90\"\n              aria-hidden=\"true\"\n            >\n              {Array.from({ length: 60 }, (_, index) => (\n                <line\n                  key={index}\n                  x1=\"90\"\n                  y1=\"8\"\n                  x2=\"90\"\n                  y2={index % 5 === 0 ? \"20\" : \"16\"}\n                  transform={`rotate(${index * 6} 90 90)`}\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  opacity={index / 60 <= progress ? 0.88 : 0.16}\n                />\n              ))}\n            </svg>\n            <p\n              className=\"absolute inset-0 flex items-center justify-center text-4xl font-normal tracking-tight tabular-nums\"\n              aria-live=\"off\"\n            >\n              {clock(c.remaining)}\n            </p>\n          </div>\n          <div className=\"flex justify-center gap-3\">\n            <Button\n              variant=\"ghost\"\n              iconOnly\n              leadingIcon={RotateCcw}\n              aria-label=\"Reset timer\"\n              className=\"rounded-full bg-white/10 text-white\"\n              disabled={!onAction}\n              onClick={() => onAction?.(\"reset\")}\n            />\n            <Button\n              variant=\"ghost\"\n              leadingIcon={c.running ? Pause : Play}\n              className=\"rounded-full bg-white/10 px-5 text-white\"\n              disabled={!onAction}\n              onClick={() => onAction?.(c.running ? \"pause\" : \"start\")}\n            >\n              {c.running ? \"Pause\" : \"Start\"}\n            </Button>\n          </div>\n        </>\n      )\n    }\n    case \"flight\":\n      return (\n        <>\n          <Header title=\"Flight\">\n            <span className=\"text-text-secondary text-xs\">{c.status}</span>\n          </Header>\n          <div className=\"flex justify-between gap-4\">\n            <div>\n              <p className=\"text-3xl tracking-tight\">{c.origin}</p>\n              <p className={caption}>{c.originName}</p>\n            </div>\n            <div className=\"text-right\">\n              <p className=\"text-3xl tracking-tight\">{c.destination}</p>\n              <p className={caption}>{c.destinationName}</p>\n            </div>\n          </div>\n          <div\n            className=\"bg-background-secondary-default my-5 h-1 overflow-hidden rounded-full\"\n            role=\"progressbar\"\n            aria-label=\"Flight progress\"\n            aria-valuenow={clamp(c.progress)}\n            aria-valuemin={0}\n            aria-valuemax={100}\n          >\n            <div\n              className=\"h-full rounded-full bg-cyan-600\"\n              style={{ width: `${clamp(c.progress)}%` }}\n            />\n          </div>\n          <div className=\"flex justify-between text-[13px] tabular-nums\">\n            <div>\n              {c.departure}\n              <p className=\"text-text-secondary mt-1 text-xs\">Departure</p>\n            </div>\n            <div className=\"text-right\">\n              {c.arrival}\n              <p className=\"text-text-secondary mt-1 text-xs\">Arrival</p>\n            </div>\n          </div>\n        </>\n      )\n    case \"location\":\n      return (\n        <>\n          {c.image && (\n            <Picture\n              src={c.image}\n              alt={c.title}\n              className=\"mb-5 aspect-[4/3] w-full rounded-xl\"\n            />\n          )}\n          <div className=\"flex items-start justify-between gap-3\">\n            <div>\n              <h3 className={heading}>{c.title}</h3>\n              <p className={caption}>{c.subtitle}</p>\n            </div>\n            {c.mapUrl && (\n              <a\n                href={c.mapUrl}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                aria-label={`Open map for ${c.title}`}\n                className=\"rounded-lg p-2 focus-visible:outline-2\"\n              >\n                <MapPin className=\"size-4\" />\n              </a>\n            )}\n          </div>\n        </>\n      )\n    case \"weather\":\n      return (\n        <>\n          <Header title={c.location}>\n            <Sun className=\"text-text-secondary size-5\" aria-hidden=\"true\" />\n          </Header>\n          <div className=\"mb-4 flex items-center justify-between\">\n            <p className=\"text-5xl font-normal tracking-tight tabular-nums\">\n              {c.temperature}°\n              <span className=\"text-text-secondary ml-2 text-sm\">{c.unit}</span>\n            </p>\n            <span className={caption}>{c.condition}</span>\n          </div>\n          <div\n            className=\"grid gap-3\"\n            style={{\n              gridTemplateColumns: `repeat(${Math.max(1, c.forecast.length)}, minmax(0, 1fr))`,\n            }}\n          >\n            {c.forecast.map((day) => (\n              <div key={day.day} className=\"text-[13px]\">\n                <p className=\"text-text-secondary\">{day.day}</p>\n                <p className=\"mt-2 tabular-nums\">{day.temperature}°</p>\n              </div>\n            ))}\n          </div>\n        </>\n      )\n    case \"stories\":\n      return (\n        <>\n          <Header title={c.title} />\n          <div className=\"space-y-5\">\n            {c.items.map((item) => (\n              <article key={item.id} className=\"flex gap-4\">\n                {item.image && (\n                  <Picture\n                    src={item.image}\n                    alt=\"\"\n                    className=\"size-12 shrink-0 rounded-lg\"\n                  />\n                )}\n                <div className=\"min-w-0\">\n                  <h4 className=\"text-[13px] leading-5 font-medium\">\n                    {item.href ? (\n                      <a\n                        href={item.href}\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                        className=\"hover:underline focus-visible:outline-2\"\n                      >\n                        {item.title}\n                      </a>\n                    ) : (\n                      item.title\n                    )}\n                  </h4>\n                  <p className=\"text-text-secondary mt-1 text-xs leading-5\">\n                    {item.source}\n                  </p>\n                </div>\n              </article>\n            ))}\n          </div>\n        </>\n      )\n    case \"inbox\":\n      return (\n        <>\n          <Header title={c.title}>\n            <span className=\"text-text-secondary mr-auto text-[13px]\">\n              {c.items.filter((item) => item.unread).length} unread\n            </span>\n            <Button\n              variant=\"ghost\"\n              iconOnly\n              leadingIcon={Search}\n              aria-label=\"Search inbox\"\n              disabled={!onAction}\n              onClick={() => onAction?.(\"search\")}\n            />\n          </Header>\n          <div className=\"space-y-4\">\n            {c.items.map((item) => (\n              <article key={item.id} className=\"relative pl-4\">\n                <span\n                  aria-label={item.unread ? \"Unread\" : \"Read\"}\n                  className={cx(\n                    \"absolute top-1.5 left-0 size-1.5 rounded-full\",\n                    item.unread && \"bg-cyan-600\"\n                  )}\n                />\n                <div className=\"flex justify-between gap-3\">\n                  <button\n                    className=\"text-left text-[13px] font-medium focus-visible:outline-2\"\n                    disabled={!onAction}\n                    onClick={() => onAction?.(\"open\", item.id)}\n                  >\n                    {item.sender}\n                  </button>\n                  <time className=\"text-text-secondary shrink-0 text-xs tabular-nums\">\n                    {item.time}\n                  </time>\n                </div>\n                <p className=\"text-text-secondary mt-1 text-[13px] leading-[1.55]\">\n                  {item.text}\n                </p>\n                {item.images && (\n                  <div className=\"mt-3 flex -space-x-1\">\n                    {item.images.map((image) => (\n                      <Picture\n                        key={image.id}\n                        src={image.src}\n                        alt={image.alt}\n                        className=\"ring-background-primary-default size-10 rounded-lg ring-2\"\n                      />\n                    ))}\n                  </div>\n                )}\n              </article>\n            ))}\n          </div>\n        </>\n      )\n    case \"note\":\n      return (\n        <>\n          <Header title={c.title} />\n          <p className=\"mb-9 font-serif text-2xl leading-[1.3] tracking-tight\">\n            {c.body}\n          </p>\n          <span className=\"rounded bg-amber-100 px-2 py-1 text-xs text-amber-950 dark:bg-amber-950/40 dark:text-amber-200\">\n            {c.status}\n          </span>\n        </>\n      )\n    case \"collection\":\n      return (\n        <>\n          <div className=\"mb-5 grid grid-cols-2 gap-2\">\n            {c.images.map((image, i) => (\n              <Picture\n                key={image.id}\n                src={image.src}\n                alt={image.alt}\n                className={cx(\n                  \"w-full rounded-xl\",\n                  c.images.length === 3 && i === 0\n                    ? \"row-span-2 h-full\"\n                    : \"aspect-square\"\n                )}\n              />\n            ))}\n          </div>\n          <div className=\"items-center-start flex justify-between gap-3\">\n            <div>\n              <h3 className={heading}>{c.title}</h3>\n              <p className={caption}>{c.description}</p>\n            </div>\n            <span className=\"text-text-secondary mt-1 shrink-0 text-xs\">\n              {c.images.length} items\n            </span>\n          </div>\n        </>\n      )\n    case \"event\":\n      return (\n        <>\n          <Header title=\"Up next\">\n            <Calendar className=\"text-text-secondary size-4\" />\n          </Header>\n          <p className=\"text-4xl tracking-tight tabular-nums\">\n            {c.time}\n            <span className=\"text-text-secondary ml-2 text-[13px]\">\n              {c.timezone}\n            </span>\n          </p>\n          <h3 className=\"mt-4 text-sm font-medium\">{c.title}</h3>\n          <p className={caption}>\n            {c.date} · {c.location}\n          </p>\n          <div className=\"mt-5 flex flex-wrap items-center justify-between gap-3\">\n            <div className=\"flex -space-x-1\">\n              {c.attendees.map((name) => (\n                <span\n                  key={name}\n                  title={name}\n                  className=\"bg-background-secondary-default ring-background-primary-default flex size-7 items-center justify-center rounded-full text-[10px] ring-2\"\n                >\n                  {name\n                    .split(\" \")\n                    .map((word) => word[0])\n                    .slice(0, 2)\n                    .join(\"\")}\n                </span>\n              ))}\n            </div>\n            <Button\n              size=\"small\"\n              variant=\"secondary\"\n              leadingIcon={ArrowUpRight}\n              disabled={!onAction}\n              onClick={() => onAction?.(\"open\")}\n            >\n              View event\n            </Button>\n          </div>\n        </>\n      )\n    case \"activity\": {\n      const max = Math.max(1, ...c.points.map((point) => point.value))\n      return (\n        <>\n          <Header title={c.title}>\n            <Check className=\"text-text-secondary size-4\" />\n          </Header>\n          <p className=\"text-4xl tracking-tight tabular-nums\">\n            {c.value}\n            <span className=\"text-text-secondary ml-2 text-[13px]\">\n              {c.unit}\n            </span>\n          </p>\n          <p className=\"text-text-secondary mt-2 text-xs\">{c.description}</p>\n          <div className=\"mt-4 flex h-20 items-end gap-3\">\n            {c.points.map((point, index) => (\n              <div\n                key={`${point.label}-${index}`}\n                className=\"flex h-full min-w-0 flex-1 flex-col justify-end gap-2\"\n              >\n                <div className=\"min-h-0 flex-1 content-end\">\n                  <div\n                    className=\"w-full rounded-t-sm bg-cyan-600/35\"\n                    style={{ height: `${clamp(point.value / max, 1) * 100}%` }}\n                    title={`${point.label}: ${point.value}`}\n                  />\n                </div>\n                <span className=\"text-text-secondary text-center text-xs\">\n                  {point.label}\n                </span>\n              </div>\n            ))}\n          </div>\n          <details className=\"text-text-secondary mt-4 text-xs\">\n            <summary className=\"cursor-pointer\">View values</summary>\n            <ul className=\"mt-2 space-y-1\">\n              {c.points.map((point, index) => (\n                <li key={`${point.label}-${index}`}>\n                  {point.label}: {point.value}\n                </li>\n              ))}\n            </ul>\n          </details>\n        </>\n      )\n    }\n  }\n}\n\nexport function AgentGenerativeSurface({\n  content,\n  status = \"ready\",\n  error,\n  onRetry,\n  className,\n  animate = true,\n  ...props\n}: AgentGenerativeSurfaceProps) {\n  const reduced = useReducedMotion()\n  const key = status === \"ready\" ? content.type : status\n  return (\n    <motion.section\n      layout={animate && !reduced}\n      transition={{ layout: { type: \"spring\", stiffness: 350, damping: 38 } }}\n      aria-busy={status === \"loading\"}\n      className={cx(\n        \"generated-result border-separator-border bg-background-primary-default text-text-primary w-full min-w-0 overflow-hidden rounded-window border p-4 shadow-sm\",\n        status === \"ready\" &&\n          content.type === \"focus\" &&\n          \"border-transparent bg-[#202a3a] text-white\",\n        className\n      )}\n    >\n      <AnimatePresence initial={false} mode=\"popLayout\">\n        <motion.div\n          key={key}\n          initial={{ opacity: reduced || !animate ? 1 : 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: reduced || !animate ? 0 : 0.16 }}\n        >\n          {status === \"loading\" ? (\n            <div role=\"status\" className=\"min-h-40 space-y-4\">\n              <p className=\"text-text-secondary text-[13px]\">\n                Preparing your result\n              </p>\n              <div className=\"bg-background-secondary-default h-5 w-2/3 rounded\" />\n              <div className=\"bg-background-secondary-default h-16 rounded-xl\" />\n            </div>\n          ) : status === \"error\" ? (\n            <div role=\"alert\" className=\"min-h-36\">\n              <h3 className={heading}>This result could not be rendered</h3>\n              <p className=\"text-text-secondary mt-2 text-[13px]\">\n                {error || \"Try the request again.\"}\n              </p>\n              {onRetry && (\n                <Button\n                  variant=\"secondary\"\n                  size=\"small\"\n                  className=\"mt-5\"\n                  onClick={onRetry}\n                >\n                  Retry\n                </Button>\n              )}\n            </div>\n          ) : (\n            <Content content={content} {...props} />\n          )}\n        </motion.div>\n      </AnimatePresence>\n    </motion.section>\n  )\n}\n"
    },
    {
      "path": "components/boardui/base/buttons/button.tsx",
      "target": "@components/boardui/base/buttons/button.tsx",
      "type": "registry:component",
      "content": "import { cx, sortCx } from \"@/components/boardui/utils/cx\"\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  ComponentType,\n  ReactNode,\n  Ref,\n} from \"react\"\nimport { Focusable } from \"react-aria-components\"\n\n/**\n * Figma source: Board UI → Buttons (node 3656:13819).\n *\n * Variant matrix from Figma:\n *   Type     = Primary | Secondary | Ghost | Danger\n *   Size     = Medium  | Small | Xs\n *   State    = Default | Hover | Active | Disabled        (CSS pseudo)\n *   OnlyIcon = false   | true\n *\n * Sizing (1:1 with Figma):\n *\n *                       Medium                    Small                     Xs\n *   container          h=36, p=8,   r=10         h=32, px=8 py=6, r=8      h=24, px=8, r=4\n *   gap                 2px                       2px                      1.33px→1\n *   icon                20×20                     18×18                    14×14\n *   label wrapper       px=4                      px=2                     px=2\n *   text style          Body 1/Medium             Body 1/Medium            Caption 1/Semibold\n *   icon-only square    36×36 (content-derived)   32×32 (forced size)      24×24 (forced size)\n *\n * `xs` is the smallest tier - first needed for the calendar template's\n * event-details modal (\"Join\" / edit-icon buttons, node 3920:10954), which\n * scales every dimension down by the same ~0.667 factor from Figma; the\n * table above rounds those to clean pixel values rather than reproducing\n * the fractional source numbers.\n *\n * Icons are rendered by the component itself via the `leadingIcon` /\n * `trailingIcon` props so the consumer can't pass the wrong size. Pass\n * a Remix Icon component reference (`RiAddLine`, not `<RiAddLine />`).\n *\n * For icon-only buttons:\n *   <Button iconOnly leadingIcon={RiAddLine} aria-label=\"Add\" />\n *\n * The HTML `type` prop is preserved; Figma's \"Type\" enum is renamed to\n * `variant` to avoid the clash.\n */\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\"\ntype ButtonSize = \"medium\" | \"small\" | \"xs\"\n\ntype IconComponent = ComponentType<{\n  className?: string\n  \"aria-hidden\"?: boolean | \"true\" | \"false\"\n}>\n\nexport interface ButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  iconOnly?: boolean\n  leadingIcon?: IconComponent\n  trailingIcon?: IconComponent\n  children?: ReactNode\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport interface ButtonLinkProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, \"children\"> {\n  variant?: ButtonVariant\n  size?: ButtonSize\n  iconOnly?: boolean\n  leadingIcon?: IconComponent\n  trailingIcon?: IconComponent\n  children?: ReactNode\n  ref?: Ref<HTMLAnchorElement>\n}\n\nconst styles = sortCx({\n  base: [\n    \"inline-flex items-center justify-center gap-0.5 whitespace-nowrap overflow-hidden\",\n    \"font-sans select-none cursor-pointer\",\n    \"button-press-motion\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-focus-ring\",\n    \"disabled:cursor-not-allowed aria-disabled:cursor-not-allowed\",\n  ].join(\" \"),\n\n  // Base shape per size (used when label is present OR medium icon-only).\n  size: {\n    medium: \"h-9 rounded-2lg p-2 text-body-medium\",\n    small: \"h-8 rounded-lg px-2 py-1.5 text-body-medium\",\n    xs: \"h-6 rounded-sm px-2 text-caption-1-semibold\",\n  },\n\n  // Icon-only override:\n  //   Medium → keep p-2; w expands from content (8+20+8 = 36) → square.\n  //   Small  → Figma forces 32×32 even though 8+18+8=34, so we hard-set size-8\n  //            and zero the padding; the inner flex centers the 18px icon.\n  //   Xs     → forces 24×24, content-centered - used for the calendar\n  //            template's edit-icon buttons (timezone/participants/reminder).\n  iconOnlySize: {\n    medium: \"\", // base size already produces 36×36 with a 20px icon\n    small: \"size-8 p-0\", // hard 32×32, content-centered\n    xs: \"size-6 p-0\", // hard 24×24, content-centered\n  },\n\n  icon: {\n    medium: \"size-5 shrink-0\", // 20px\n    small: \"size-[18px] shrink-0\", // 18px\n    xs: \"size-3.5 shrink-0\", // 14px\n  },\n\n  label: {\n    medium: \"inline-flex items-center justify-center px-1 shrink-0\", // px=4\n    small: \"inline-flex items-center justify-center px-0.5 shrink-0\", // px=2\n    xs: \"inline-flex items-center justify-center px-0.5 shrink-0\", // px=2\n  },\n\n  variant: {\n    primary: [\n      \"bg-button-primary\",\n      \"disabled:text-button-primary-disabled-foreground disabled:shadow-none\",\n      \"aria-disabled:text-button-primary-disabled-foreground aria-disabled:shadow-none\",\n    ].join(\" \"),\n    danger: [\n      \"bg-button-danger text-text-white shadow-xs\",\n      \"disabled:text-foreground-disabled-danger disabled:shadow-none\",\n      \"aria-disabled:text-foreground-disabled-danger aria-disabled:shadow-none\",\n    ].join(\" \"),\n    secondary: [\n      \"bg-background-primary-default text-text-primary\",\n      \"border border-border-button-default shadow-xs\",\n      \"hover:bg-background-primary-hover  hover:border-border-button-hover\",\n      \"active:bg-background-primary-active active:border-border-button-active\",\n      \"disabled:bg-background-primary-disabled disabled:border-border-button-default disabled:text-text-tertiary disabled:shadow-none\",\n      \"aria-disabled:bg-background-primary-disabled aria-disabled:border-border-button-default aria-disabled:text-text-tertiary aria-disabled:shadow-none\",\n    ].join(\" \"),\n    ghost: [\n      \"bg-button-ghost-background text-button-ghost-foreground\",\n      \"hover:bg-button-ghost-hover active:bg-button-ghost-active\",\n      \"disabled:bg-button-ghost-disabled disabled:text-button-ghost-disabled-foreground disabled:shadow-none\",\n      \"aria-disabled:bg-button-ghost-disabled aria-disabled:text-button-ghost-disabled-foreground aria-disabled:shadow-none\",\n    ].join(\" \"),\n  },\n})\n\nexport function Button({\n  variant = \"primary\",\n  size = \"medium\",\n  iconOnly = false,\n  leadingIcon: Leading,\n  trailingIcon: Trailing,\n  children,\n  className,\n  type = \"button\",\n  ref,\n  ...props\n}: ButtonProps) {\n  return (\n    <Focusable isDisabled={props.disabled}>\n      <button\n        ref={ref}\n        type={type}\n        className={cx(\n          styles.base,\n          styles.size[size],\n          styles.variant[variant],\n          iconOnly && styles.iconOnlySize[size],\n          className\n        )}\n        {...props}\n      >\n        {Leading ? <Leading className={styles.icon[size]} aria-hidden /> : null}\n        {iconOnly && !Leading && children != null ? (\n          <span\n            aria-hidden\n            className={cx(\n              styles.icon[size],\n              \"inline-flex items-center justify-center [&>svg]:size-full\"\n            )}\n          >\n            {children}\n          </span>\n        ) : null}\n        {!iconOnly && children !== undefined && children !== null && (\n          <span className={styles.label[size]}>{children}</span>\n        )}\n        {!iconOnly && Trailing ? (\n          <Trailing className={styles.icon[size]} aria-hidden />\n        ) : null}\n      </button>\n    </Focusable>\n  )\n}\n\n/** Anchor counterpart to Button for navigational actions. */\nexport function ButtonLink({\n  variant = \"primary\",\n  size = \"medium\",\n  iconOnly = false,\n  leadingIcon: Leading,\n  trailingIcon: Trailing,\n  children,\n  className,\n  ref,\n  ...props\n}: ButtonLinkProps) {\n  return (\n    <Focusable>\n      <a\n        ref={ref}\n        className={cx(\n          styles.base,\n          styles.size[size],\n          styles.variant[variant],\n          iconOnly && styles.iconOnlySize[size],\n          className\n        )}\n        {...props}\n      >\n        {Leading ? <Leading className={styles.icon[size]} aria-hidden /> : null}\n        {iconOnly && !Leading && children != null ? (\n          <span\n            aria-hidden\n            className={cx(\n              styles.icon[size],\n              \"inline-flex items-center justify-center [&>svg]:size-full\"\n            )}\n          >\n            {children}\n          </span>\n        ) : null}\n        {!iconOnly && children !== undefined && children !== null && (\n          <span className={styles.label[size]}>{children}</span>\n        )}\n        {!iconOnly && Trailing ? (\n          <Trailing className={styles.icon[size]} aria-hidden />\n        ) : null}\n      </a>\n    </Focusable>\n  )\n}\n\n/** Style maps, exported for advanced composition and the dev Design Tuner. */\nexport const buttonStyles = styles\n"
    },
    {
      "path": "components/boardui/utils/cx.ts",
      "target": "@components/boardui/utils/cx.ts",
      "type": "registry:component",
      "content": "import { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * Text-style classes from styles/typography.css.\n *\n * IMPORTANT: every text-* utility we define via @theme (e.g. `text-body-medium`,\n * `text-title-1-semibold`) must be listed here. Otherwise tailwind-merge — which\n * has no view of our Tailwind theme — treats them as text-color utilities and\n * silently drops them when they appear in the same className as a real color\n * (`text-foreground-full`, `text-text-primary`, etc).\n *\n * If you add or rename a text style in typography.css, mirror the change here.\n */\nconst TEXT_FAMILIES = [\n  \"large-title\",\n  \"display-1\",\n  \"display-2\",\n  \"display-3\",\n  \"display-4\",\n  \"title-1\",\n  \"title-2\",\n  \"title-3\",\n  \"headline\",\n  \"body\",\n  \"body-2\",\n  \"caption-1\",\n  \"caption-2\",\n] as const;\n\nconst TEXT_WEIGHTS = [\"regular\", \"medium\", \"semibold\", \"bold\"] as const;\n\nconst TEXT_STYLE_SUFFIXES = TEXT_FAMILIES.flatMap((family) =>\n  TEXT_WEIGHTS.map((weight) => `${family}-${weight}`),\n);\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [{ text: TEXT_STYLE_SUFFIXES }],\n    },\n  },\n});\n\n/**\n * Merge Tailwind classes safely. Last-write-wins on conflicting utilities.\n */\nexport const cx = twMerge;\n\n/**\n * Identity helper that gives the Tailwind IntelliSense extension a hook for\n * sorting classes inside style objects (the extension doesn't sort inside\n * plain object literals otherwise).\n */\nexport function sortCx<\n  T extends Record<\n    string,\n    string | number | Record<string, string | number | Record<string, string | number>>\n  >,\n>(classes: T): T {\n  return classes;\n}\n"
    },
    {
      "path": "components/agents-ui/application/generative-surface/work-content.tsx",
      "target": "@components/agents-ui/application/generative-surface/work-content.tsx",
      "type": "registry:component",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/boardui/base/buttons/button\"\nimport { cx } from \"@/components/boardui/utils/cx\"\nimport { Check, Circle, Download, ExternalLink, FileText } from \"lucide-react\"\nimport * as React from \"react\"\n\nexport interface GeneratedComparisonAttribute {\n  label: string\n  value: string\n}\n\nexport interface GeneratedComparisonOption {\n  id: string\n  title: string\n  description?: string\n  attributes: GeneratedComparisonAttribute[]\n  recommended?: boolean\n}\n\nexport interface GeneratedRecommendationAlternative {\n  id: string\n  label: string\n}\n\nexport interface GeneratedChecklistItem {\n  id: string\n  label: string\n  detail?: string\n  completed: boolean\n}\n\nexport interface GeneratedBriefSource {\n  id: string\n  title: string\n  origin?: string\n  url?: string\n}\n\nexport type GeneratedWorkContent =\n  | {\n      type: \"comparison\"\n      title: string\n      description?: string\n      options: GeneratedComparisonOption[]\n      selectedId?: string\n    }\n  | {\n      type: \"recommendation\"\n      id: string\n      title: string\n      summary: string\n      reasoning?: string[]\n      confidence?: number\n      acceptLabel?: string\n      alternatives?: GeneratedRecommendationAlternative[]\n    }\n  | {\n      type: \"document\"\n      id: string\n      title: string\n      format: string\n      size: string\n      excerpt: string\n      updated?: string\n    }\n  | {\n      type: \"checklist\"\n      title: string\n      description?: string\n      items: GeneratedChecklistItem[]\n    }\n  | {\n      type: \"source-brief\"\n      title: string\n      summary: string\n      sources: GeneratedBriefSource[]\n    }\n\nexport interface GeneratedWorkCardContentProps {\n  content: GeneratedWorkContent\n  onAction?: (action: string, id?: string) => void\n}\n\nconst secondary = \"text-[13px] leading-[1.55] text-text-secondary\"\n\nfunction ComparisonContent({\n  content,\n  onAction,\n}: {\n  content: Extract<GeneratedWorkContent, { type: \"comparison\" }>\n  onAction?: GeneratedWorkCardContentProps[\"onAction\"]\n}) {\n  return (\n    <div>\n      <header className=\"mb-5\">\n        <h3 className=\"text-sm font-medium tracking-tight\">\n          {content.title}\n        </h3>\n        {content.description && (\n          <p className={cx(\"mt-1\", secondary)}>{content.description}</p>\n        )}\n      </header>\n      <div className=\"result-comparison-grid grid gap-3\">\n        {content.options.map((option) => {\n          const selected = option.id === content.selectedId\n          return (\n            <button\n              key={option.id}\n              type=\"button\"\n              aria-pressed={selected}\n              onClick={() => onAction?.(\"select\", option.id)}\n              className={cx(\n                \"min-w-0 rounded-card border p-3 text-left transition-colors\",\n                selected\n                  ? \"border-border-focus-ring bg-background-secondary-default\"\n                  : \"border-separator-border hover:bg-background-secondary-hover\"\n              )}\n            >\n              <div className=\"flex flex-col items-start gap-1\">\n                <div>\n                  <h4 className=\"text-[13px] font-medium\">{option.title}</h4>\n                  {option.description && (\n                    <p className=\"text-text-secondary mt-1 text-xs leading-5\">\n                      {option.description}\n                    </p>\n                  )}\n                </div>\n                {option.recommended && (\n                  <span className=\"text-text-secondary bg-background-secondary-default rounded-md px-1.5 py-0.5 text-[11px] font-medium\">\n                    Recommended\n                  </span>\n                )}\n              </div>\n              <dl className=\"divide-separator-border border-separator-border mt-4 divide-y border-y\">\n                {option.attributes.map((attribute) => (\n                  <div\n                    key={attribute.label}\n                    className=\"flex justify-between gap-4 py-2 text-xs\"\n                  >\n                    <dt className=\"text-text-secondary\">{attribute.label}</dt>\n                    <dd className=\"text-right font-medium\">\n                      {attribute.value}\n                    </dd>\n                  </div>\n                ))}\n              </dl>\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nfunction RecommendationContent({\n  content,\n  onAction,\n}: {\n  content: Extract<GeneratedWorkContent, { type: \"recommendation\" }>\n  onAction?: GeneratedWorkCardContentProps[\"onAction\"]\n}) {\n  const confidence =\n    content.confidence === undefined\n      ? undefined\n      : Math.max(0, Math.min(100, content.confidence))\n  return (\n    <div>\n      <header className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div>\n          <p className=\"text-text-secondary text-xs font-medium\">\n            Recommendation\n          </p>\n          <h3 className=\"mt-1 text-sm font-medium tracking-tight\">\n            {content.title}\n          </h3>\n        </div>\n        {confidence !== undefined && (\n          <span className=\"text-text-secondary text-xs tabular-nums\">\n            {confidence}% confidence\n          </span>\n        )}\n      </header>\n      <p className=\"mt-4 text-[13px] leading-[1.55]\">{content.summary}</p>\n      {content.reasoning?.length ? (\n        <div className=\"border-separator-border mt-5 border-y py-3\">\n          <p className=\"text-text-secondary text-xs font-medium\">\n            Reasoning summary\n          </p>\n          <ul className=\"mt-2 space-y-2\">\n            {content.reasoning.map((reason) => (\n              <li key={reason} className=\"flex gap-2 text-[13px] leading-5\">\n                <span\n                  aria-hidden=\"true\"\n                  className=\"bg-text-secondary mt-2 size-1 shrink-0 rounded-full\"\n                />\n                {reason}\n              </li>\n            ))}\n          </ul>\n        </div>\n      ) : null}\n      <footer className=\"mt-5 flex flex-wrap gap-2\">\n        <Button\n          size=\"small\"\n          onClick={() => onAction?.(\"accept\", content.id)}\n          disabled={!onAction}\n        >\n          {content.acceptLabel ?? \"Accept recommendation\"}\n        </Button>\n        {content.alternatives?.map((alternative) => (\n          <Button\n            key={alternative.id}\n            size=\"small\"\n            variant=\"secondary\"\n            onClick={() => onAction?.(\"alternative\", alternative.id)}\n            disabled={!onAction}\n          >\n            {alternative.label}\n          </Button>\n        ))}\n      </footer>\n    </div>\n  )\n}\n\nfunction DocumentContent({\n  content,\n  onAction,\n}: {\n  content: Extract<GeneratedWorkContent, { type: \"document\" }>\n  onAction?: GeneratedWorkCardContentProps[\"onAction\"]\n}) {\n  return (\n    <div>\n      <header className=\"flex flex-wrap items-start gap-3\">\n        <FileText\n          aria-hidden=\"true\"\n          className=\"text-text-secondary mt-0.5 size-5 shrink-0\"\n        />\n        <div className=\"min-w-0 flex-1\">\n          <h3 className=\"text-sm font-medium tracking-tight break-words\">\n            {content.title}\n          </h3>\n          <p className=\"text-text-secondary mt-1 text-xs leading-5\">\n            {content.format} | {content.size}\n            {content.updated ? `  |  ${content.updated}` : \"\"}\n          </p>\n        </div>\n        <div className=\"flex w-full flex-wrap gap-2 pl-7\">\n          <Button\n            size=\"small\"\n            variant=\"ghost\"\n            leadingIcon={ExternalLink}\n            onClick={() => onAction?.(\"open\", content.id)}\n            disabled={!onAction}\n          >\n            Open\n          </Button>\n          <Button\n            size=\"small\"\n            variant=\"secondary\"\n            leadingIcon={Download}\n            onClick={() => onAction?.(\"download\", content.id)}\n            disabled={!onAction}\n          >\n            Download\n          </Button>\n        </div>\n      </header>\n      <div className=\"border-separator-border mt-5 border-t pt-4\">\n        <p className=\"text-text-secondary line-clamp-5 text-[13px] leading-[1.55] whitespace-pre-wrap\">\n          {content.excerpt}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nfunction ChecklistContent({\n  content,\n  onAction,\n}: {\n  content: Extract<GeneratedWorkContent, { type: \"checklist\" }>\n  onAction?: GeneratedWorkCardContentProps[\"onAction\"]\n}) {\n  const complete = content.items.filter((item) => item.completed).length\n  return (\n    <div>\n      <header className=\"mb-4 flex items-start justify-between gap-3\">\n        <div>\n          <h3 className=\"text-sm font-medium tracking-tight\">\n            {content.title}\n          </h3>\n          {content.description && (\n            <p className={cx(\"mt-1\", secondary)}>{content.description}</p>\n          )}\n        </div>\n        <span className=\"text-text-secondary shrink-0 text-xs tabular-nums\">\n          {complete} of {content.items.length}\n        </span>\n      </header>\n      <div className=\"divide-separator-border border-separator-border divide-y border-y\">\n        {content.items.map((item) => (\n          <button\n            key={item.id}\n            type=\"button\"\n            aria-pressed={item.completed}\n            onClick={() => onAction?.(\"toggle\", item.id)}\n            disabled={!onAction}\n            className=\"flex min-h-10 w-full items-start gap-3 py-3 text-left disabled:cursor-default\"\n          >\n            <span\n              className={cx(\n                \"mt-0.5 grid size-5 shrink-0 place-items-center rounded-full border\",\n                item.completed\n                  ? \"border-button-primary bg-button-primary text-text-white\"\n                  : \"border-border-button-default text-text-tertiary\"\n              )}\n            >\n              {item.completed ? (\n                <Check className=\"size-3.5\" />\n              ) : (\n                <Circle className=\"size-3\" />\n              )}\n            </span>\n            <span className=\"min-w-0\">\n              <span\n                className={cx(\n                  \"block text-[13px] font-medium\",\n                  item.completed && \"text-text-secondary line-through\"\n                )}\n              >\n                {item.label}\n              </span>\n              {item.detail && (\n                <span className=\"text-text-secondary mt-1 block text-xs leading-5\">\n                  {item.detail}\n                </span>\n              )}\n            </span>\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nfunction SourceBriefContent({\n  content,\n  onAction,\n}: {\n  content: Extract<GeneratedWorkContent, { type: \"source-brief\" }>\n  onAction?: GeneratedWorkCardContentProps[\"onAction\"]\n}) {\n  return (\n    <div>\n      <header>\n        <p className=\"text-text-secondary text-xs font-medium\">Source brief</p>\n        <h3 className=\"mt-1 text-sm font-medium tracking-tight\">\n          {content.title}\n        </h3>\n      </header>\n      <p className=\"mt-4 text-[13px] leading-[1.55]\">{content.summary}</p>\n      <div className=\"divide-separator-border border-separator-border mt-5 divide-y border-y\">\n        {content.sources.map((source, index) => (\n          <button\n            key={source.id}\n            type=\"button\"\n            onClick={() => onAction?.(\"source\", source.id)}\n            disabled={!onAction}\n            className=\"flex min-h-10 w-full items-center gap-3 py-3 text-left disabled:cursor-default\"\n          >\n            <span className=\"text-text-tertiary text-xs tabular-nums\">\n              {index + 1}\n            </span>\n            <span className=\"min-w-0 flex-1\">\n              <span className=\"block truncate text-[13px] font-medium\">\n                {source.title}\n              </span>\n              {source.origin && (\n                <span className=\"text-text-secondary mt-0.5 block truncate text-xs\">\n                  {source.origin}\n                </span>\n              )}\n            </span>\n            {source.url && (\n              <ExternalLink\n                aria-hidden=\"true\"\n                className=\"text-text-tertiary size-4 shrink-0\"\n              />\n            )}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport function GeneratedWorkCardContent({\n  content,\n  onAction,\n}: GeneratedWorkCardContentProps) {\n  switch (content.type) {\n    case \"comparison\":\n      return <ComparisonContent content={content} onAction={onAction} />\n    case \"recommendation\":\n      return <RecommendationContent content={content} onAction={onAction} />\n    case \"document\":\n      return <DocumentContent content={content} onAction={onAction} />\n    case \"checklist\":\n      return <ChecklistContent content={content} onAction={onAction} />\n    case \"source-brief\":\n      return <SourceBriefContent content={content} onAction={onAction} />\n  }\n}\n"
    },
    {
      "path": "components/agents-ui/application/generative-surface/result-actions.tsx",
      "target": "@components/agents-ui/application/generative-surface/result-actions.tsx",
      "type": "registry:component",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/boardui/base/buttons/button\"\nimport { cx } from \"@/components/boardui/utils/cx\"\nimport {\n  Check,\n  Copy,\n  GitCompare,\n  Maximize2,\n  Pencil,\n  Save,\n  Share2,\n} from \"lucide-react\"\n\nexport type ResultActionState = \"view\" | \"expanded\" | \"editing\" | \"comparing\"\n\nexport interface ResultActionsProps {\n  state?: ResultActionState\n  saved?: boolean\n  onExpand?: () => void\n  onEdit?: () => void\n  onCompare?: () => void\n  onSave?: () => void\n  onShare?: () => void\n  onCopy?: () => void\n  className?: string\n}\n\nexport function ResultActions({\n  state = \"view\",\n  saved = false,\n  onExpand,\n  onEdit,\n  onCompare,\n  onSave,\n  onShare,\n  onCopy,\n  className,\n}: ResultActionsProps) {\n  return (\n    <div\n      className={cx(\"flex flex-wrap items-center gap-1\", className)}\n      role=\"group\"\n      aria-label=\"Result actions\"\n    >\n      <Button\n        size=\"xs\"\n        variant={state === \"expanded\" ? \"secondary\" : \"ghost\"}\n        leadingIcon={Maximize2}\n        onClick={onExpand}\n        disabled={!onExpand}\n      >\n        {state === \"expanded\" ? \"Collapse\" : \"Expand\"}\n      </Button>\n      <Button\n        size=\"xs\"\n        variant={state === \"editing\" ? \"secondary\" : \"ghost\"}\n        leadingIcon={Pencil}\n        onClick={onEdit}\n        disabled={!onEdit}\n      >\n        Edit\n      </Button>\n      <Button\n        size=\"xs\"\n        variant={state === \"comparing\" ? \"secondary\" : \"ghost\"}\n        leadingIcon={GitCompare}\n        onClick={onCompare}\n        disabled={!onCompare}\n      >\n        Compare\n      </Button>\n      <Button\n        size=\"xs\"\n        variant=\"ghost\"\n        leadingIcon={saved ? Check : Save}\n        onClick={onSave}\n        disabled={!onSave}\n      >\n        {saved ? \"Saved\" : \"Save\"}\n      </Button>\n      <Button\n        size=\"xs\"\n        variant=\"ghost\"\n        leadingIcon={Share2}\n        onClick={onShare}\n        disabled={!onShare}\n      >\n        Share\n      </Button>\n      <Button\n        size=\"xs\"\n        variant=\"ghost\"\n        leadingIcon={Copy}\n        onClick={onCopy}\n        disabled={!onCopy}\n      >\n        Copy\n      </Button>\n    </div>\n  )\n}\n"
    },
    {
      "path": "styles/agents.css",
      "target": "~/styles/agents.css",
      "type": "registry:file",
      "content": "@theme inline {\n  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;\n  --font-mono: var(--font-jetbrains-mono), ui-monospace, \"SF Mono\", monospace;\n  --radius-chip: 6px;\n  --radius-control: 8px;\n  --radius-card: 10px;\n  --radius-window: 14px;\n}\n\nhtml:root {\n  --color-background-full: oklch(0.985 0.001 286.376);\n  --color-background-primary-default: oklch(1 0 0);\n  --color-background-secondary-default: oklch(0.961 0.002 247.84);\n  --color-background-primary-hover: oklch(0.97 0.002 247.839);\n  --color-text-primary: oklch(0.247 0.006 258.361);\n  --color-text-secondary: oklch(0.506 0.01 264.477);\n  --color-text-tertiary: oklch(0.54 0.01 264.484);\n  --color-border-button-default: oklch(0.912 0.005 258.326);\n  --color-separator-border: oklch(0.946 0.003 264.542);\n  --font-mono-source: var(--font-jetbrains-mono);\n}\n\nhtml.dark {\n  --color-background-full: oklch(0.209 0.004 264.477);\n  --color-background-primary-default: oklch(0.26 0.006 271.191);\n  --color-background-secondary-default: oklch(0.231 0.004 264.487);\n  --color-background-primary-hover: oklch(0.289 0.006 271.22);\n  --color-text-primary: oklch(0.964 0.002 247.839);\n  --color-text-secondary: oklch(0.731 0.008 260.731);\n  --color-text-tertiary: oklch(0.7 0.008 260.731);\n  --color-border-button-default: oklch(0.356 0.007 264.474);\n  --color-separator-border: oklch(0.308 0.006 258.354);\n}\n\nhtml:root,\nhtml.dark {\n  --color-border-focus-ring: var(--color-text-primary);\n  --color-tab-count-selected-background: var(--color-background-secondary-default);\n  --background: var(--color-background-full);\n  --foreground: var(--color-text-primary);\n  --card: var(--color-background-primary-default);\n  --card-foreground: var(--color-text-primary);\n  --popover: var(--color-background-primary-default);\n  --popover-foreground: var(--color-text-primary);\n  --primary: var(--color-text-primary);\n  --primary-foreground: var(--color-background-primary-default);\n  --secondary: var(--color-background-secondary-default);\n  --secondary-foreground: var(--color-text-primary);\n  --muted: var(--color-background-secondary-default);\n  --muted-foreground: var(--color-text-secondary);\n  --accent: var(--color-background-primary-hover);\n  --accent-foreground: var(--color-text-primary);\n  --border: var(--color-separator-border);\n  --input: var(--color-border-button-default);\n  --sidebar: var(--color-background-full);\n  --sidebar-foreground: var(--color-text-primary);\n  --sidebar-accent: var(--color-background-secondary-default);\n  --sidebar-border: var(--color-separator-border);\n  --radius: 10px;\n}\n\nbody {\n  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;\n  font-size: 14px;\n  line-height: 1.5;\n  letter-spacing: -0.01em;\n  font-feature-settings: \"cv11\", \"ss01\";\n  text-rendering: optimizeLegibility;\n}\n\n@media (max-width: 639px) {\n  input,\n  select,\n  textarea {\n    font-size: 16px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n/* Result layouts respond to the card, including compact grid and expanded views. */\n.generated-result {\n  container-type: inline-size;\n  container-name: result;\n}\n@container result (min-width: 440px) {\n  .result-comparison-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n"
    },
    {
      "path": "components/beautiful-ui/LICENSE",
      "target": "@components/beautiful-ui/LICENSE",
      "type": "registry:file",
      "content": "MIT License\n\nCopyright (c) 2026 Shane Levine\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
    },
    {
      "path": "components/boardui/LICENSE",
      "target": "@components/boardui/LICENSE",
      "type": "registry:file",
      "content": "MIT License\n\nCopyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
    },
    {
      "path": "components/boardui/styles/globals.css",
      "target": "@components/boardui/styles/globals.css",
      "type": "registry:file",
      "content": "@import \"tailwindcss\";\n@import \"./theme.css\";\n@import \"./typography.css\";\n\n/* ---------------------------------------------------------------------------\n * Dark mode strategy\n *\n * We use a class-based dark variant. Toggle dark mode by adding the `.dark`\n * class to <html> (a theme provider like `next-themes` can do this later).\n *\n *   <html class=\"dark\">  →  every `dark:*` utility activates\n *\n * Components should NOT use `dark:` prefixes directly. Instead they reference\n * semantic color tokens (e.g. `bg-bg-primary`, `text-text-primary`) that flip\n * under `.dark` in styles/theme.css.\n * --------------------------------------------------------------------------- */\n@custom-variant dark (&:where(.dark, .dark *));\n\n/* The next theme is revealed by ThemeToggle from the exact interaction point.\n * Native view-transition crossfades are disabled so only the soft circular\n * clip-path animation runs; unsupported browsers simply ignore these rules. */\n::view-transition-old(root),\n::view-transition-new(root) {\n  animation: none;\n  mix-blend-mode: normal;\n}\n\n@keyframes ai-chat-text-shimmer {\n  from {\n    background-position: 200% center;\n  }\n\n  to {\n    background-position: -100% center;\n  }\n}\n\n.agent-progress-loading-text {\n  color: transparent;\n  background-image: linear-gradient(\n    100deg,\n    var(--color-text-secondary) 16%,\n    var(--color-text-secondary) 38%,\n    var(--color-text-primary) 50%,\n    var(--color-text-secondary) 62%,\n    var(--color-text-secondary) 84%\n  );\n  background-position: 200% center;\n  background-size: 300% 100%;\n  background-clip: text;\n  -webkit-background-clip: text;\n  animation: ai-chat-text-shimmer 3.4s linear infinite;\n  will-change: background-position;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .agent-progress-loading-text {\n    color: var(--color-text-secondary);\n    background-image: none;\n    animation: none;\n  }\n}\n\n::view-transition-old(root) {\n  z-index: 1;\n}\n\n::view-transition-new(root) {\n  z-index: 2;\n}\n\n/* Components often have their own hover/focus color transitions. Freeze them\n * while the browser captures the next theme so the expanding circle contains\n * the fully resolved new palette instead of a frame that is still fading from\n * the old one. This is what makes the click-origin reveal read clearly. */\n.theme-transitioning,\n.theme-transitioning * {\n  transition: none !important;\n}\n\n/* Reset + base */\nhtml,\nbody {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-variant-ligatures: contextual;\n  font-kerning: normal;\n}\n\nhtml {\n  color-scheme: light;\n  background-color: var(--color-background-full);\n}\nhtml.dark {\n  color-scheme: dark;\n}\nbody {\n  background-color: var(--color-background-full);\n  color: var(--color-text-primary);\n}\n\n/* Theme-aware monochrome BoardUI mark. Both images keep their intrinsic\n * dimensions while the root theme class decides which one participates in\n * layout, avoiding a light-logo flash during hydration. */\n.theme-logo-dark,\n.theme-asset-dark {\n  display: none;\n}\n.dark .theme-logo-light,\n.dark .theme-asset-light {\n  display: none;\n}\n.dark .theme-logo-dark,\n.dark .theme-asset-dark {\n  display: block;\n}\n\n/* Tailwind expands shadow utilities into `--tw-shadow` at build time. Point\n * those generated utilities back to the live dark elevation tokens so the\n * class-based theme can adjust opacity without component-level overrides. */\n.dark .shadow-2xs {\n  --tw-shadow: var(--shadow-2xs);\n}\n.dark .shadow-xs {\n  --tw-shadow: var(--shadow-xs);\n}\n.dark .shadow-sm {\n  --tw-shadow: var(--shadow-sm);\n}\n.dark .shadow-md {\n  --tw-shadow: var(--shadow-md);\n}\n.dark .shadow-lg {\n  --tw-shadow: var(--shadow-lg);\n}\n.dark .shadow-xl {\n  --tw-shadow: var(--shadow-xl);\n}\n.dark .shadow-card {\n  --tw-shadow: var(--shadow-card);\n}\n.dark .shadow-dropdown {\n  --tw-shadow: var(--shadow-dropdown);\n}\n.dark .shadow-sidebar {\n  --tw-shadow: var(--shadow-sidebar);\n}\n.dark .shadow-waitlist {\n  --tw-shadow: var(--shadow-waitlist);\n}\n\n/* Hide default expand arrow on Safari */\ndetails summary::-webkit-details-marker {\n  display: none;\n}\n\n/* Hide default number-input spinners */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Hide default search clear button */\ninput[type=\"search\"]::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}\n\n/* iOS Safari auto-zooms the page when a focused form field's font-size is\n * under 16px — our text-body-regular/medium tokens are 14px by design, so\n * bump just the font-size (not the whole token) on small screens instead of\n * changing the design system's type scale. */\n@media (max-width: 639px) {\n  input,\n  select,\n  textarea {\n    font-size: 16px;\n  }\n}\n\n/* Soft fade applied to an animated number each time its target changes */\n@keyframes number-fade {\n  from {\n    opacity: 0.35;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.animate-number-fade {\n  animation: number-fade 220ms ease-out;\n}\n\n/* Recharts' accessibility layer makes the chart surface and its shapes\n * (bars, sectors, dots) keyboard-focusable, and Chrome paints the UA focus\n * outline around whichever one you click - a blue box around a ring segment\n * or a bar. Every chart card drives its own focus feedback (hover darkening,\n * headline swap), so the outline is noise: hide it across every Recharts\n * chart. Keyboard users still get the cards' own active states. */\n.recharts-wrapper:focus,\n.recharts-wrapper:focus-visible,\n.recharts-wrapper :focus,\n.recharts-wrapper :focus-visible {\n  outline: none;\n}\n\n/* Liquid glass (landing nav + hero) — the rim light.\n *\n * A fixed conic gradient standing in for a bevel lit from a single direction:\n * bright along the top edge where the light source is, dark down both sides\n * where the glass turns away, and a weaker bounce along the bottom. It does\n * not rotate — a travelling highlight reads as an animation playing on the\n * control, where a real edge just sits there catching the room.\n *\n * Achromatic on purpose: highlights are white, shading is black, nothing in\n * between carries a hue.\n *\n * The two-layer mask (padding-box XOR full box) keeps only the 1.5px ring,\n * letting the gradient paint the stroke without covering the glass. */\n\n.landing-glass-stroke {\n  pointer-events: none;\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  /* Every value here is set inline by `LiquidGlassSurface` from the shared\n   * glass config; the fallbacks are only for a bare use of the class. */\n  padding: var(--lg-rim-width, 1.5px);\n  background: conic-gradient(\n    from var(--lg-rim-angle, 0deg),\n    var(--lg-rim-hi, rgb(255 255 255 / 0.9)) 0deg,\n    var(--lg-rim-sh, rgb(0 0 0 / 0.14)) 70deg,\n    var(--lg-rim-dim, rgb(255 255 255 / 0.1)) 140deg,\n    var(--lg-rim-bounce, rgb(255 255 255 / 0.55)) 180deg,\n    var(--lg-rim-dim, rgb(255 255 255 / 0.1)) 220deg,\n    var(--lg-rim-sh, rgb(0 0 0 / 0.14)) 290deg,\n    var(--lg-rim-hi, rgb(255 255 255 / 0.9)) 360deg\n  );\n  /* Shorthands first, composites last: `-webkit-mask` aliases `mask` in\n   * Chromium, so a shorthand placed after a composite silently resets it to\n   * `add` — and an un-composited mask paints the full conic wash over the\n   * button instead of a ring. */\n  -webkit-mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  mask:\n    linear-gradient(#000 0 0) content-box,\n    linear-gradient(#000 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  opacity: var(--lg-rim-o, 1);\n  transition: opacity var(--lg-ms, 200ms) ease;\n}\n\n/* Liquid glass hover.\n *\n * Resting and hover values arrive together as inline custom properties, and\n * the swap happens here in CSS rather than in React state — hover then costs\n * a style recalculation instead of a re-render of everything inside the glass.\n * `.lg-hover` is the opt-in: a surface without it keeps its resting value. */\n.lg-tint {\n  background-color: var(--lg-tint, transparent);\n  transition: background-color var(--lg-ms, 200ms) ease;\n}\n\n.lg-sheen {\n  opacity: var(--lg-sheen, 0.5);\n  transition: opacity var(--lg-ms, 200ms) ease;\n}\n\n.lg-host {\n  box-shadow: var(--lg-shadow, none);\n  transition:\n    box-shadow var(--lg-ms, 200ms) ease,\n    transform var(--lg-ms, 200ms) ease;\n}\n\n.lg-host:hover {\n  box-shadow: var(--lg-shadow-hover, var(--lg-shadow, none));\n  transform: translateY(var(--lg-lift, 0px)) scale(var(--lg-scale, 1));\n}\n\n.group:hover .lg-tint.lg-hover {\n  background-color: var(--lg-tint-hover, var(--lg-tint, transparent));\n}\n\n.group:hover .lg-sheen.lg-hover {\n  opacity: var(--lg-sheen-hover, var(--lg-sheen, 0.5));\n}\n\n.group:hover .landing-glass-stroke.lg-hover {\n  opacity: var(--lg-rim-o-hover, var(--lg-rim-o, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lg-tint,\n  .lg-sheen,\n  .lg-host,\n  .landing-glass-stroke {\n    transition: none;\n  }\n\n  .lg-host:hover {\n    transform: none;\n  }\n}\n\n/* Split-flap (\"Solari\" board) digit, used by the image-generation countdown.\n * Two leaves hinged on the card's centre seam:\n *   flap-fall  the outgoing digit's TOP half swings down over the incoming\n *              bottom half. Eased IN, because a real flap is falling under\n *              gravity — it accelerates — and it darkens as it tips away\n *              from the light.\n *   flap-rise  the incoming digit's BOTTOM half swings up from edge-on,\n *              starting exactly when the fall lands (delay = fall duration,\n *              `both` so it waits at 90deg instead of flashing flat). The\n *              small overshoot past 0deg is the slap against the stop —\n *              that bounce is what makes it read mechanical rather than\n *              like a plain rotation. */\n@keyframes flap-fall {\n  from {\n    transform: rotateX(0deg);\n    filter: brightness(1);\n  }\n  to {\n    transform: rotateX(-90deg);\n    filter: brightness(0.86);\n  }\n}\n@keyframes flap-rise {\n  0% {\n    transform: rotateX(90deg);\n    filter: brightness(0.86);\n  }\n  70% {\n    transform: rotateX(-9deg);\n  }\n  86% {\n    transform: rotateX(4deg);\n  }\n  100% {\n    transform: rotateX(0deg);\n    filter: brightness(1);\n  }\n}\n.animate-flap-fall {\n  transform-origin: bottom center;\n  backface-visibility: hidden;\n  animation: flap-fall 150ms cubic-bezier(0.55, 0, 0.9, 0.35) forwards;\n}\n.animate-flap-rise {\n  transform-origin: top center;\n  backface-visibility: hidden;\n  animation: flap-rise 230ms cubic-bezier(0.25, 0.7, 0.35, 1) 150ms both;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .animate-flap-fall,\n  .animate-flap-rise {\n    animation-duration: 1ms;\n    animation-delay: 0ms;\n  }\n}\n\n/* New-row entrance for the Storage settings table. Three coordinated\n * pieces (wrapper pairs with `grid grid-rows-[1fr]` + an overflow-hidden\n * middle layer, content carries the slide):\n *   row-grow-in   wrapper's grid track 0fr → 1fr — pushes the rows below\n *                 down smoothly.\n *   row-slide-in  content translates -100% → 0 with the SAME duration and\n *                 easing, so it stays glued to the growing wrapper's bottom\n *                 edge — visually the row slides out from underneath the\n *                 header row above it.\n *   row-fade-in   opacity/blur on a SHORTER clock than the movement — the\n *                 row is fully visible before it finishes settling (fades\n *                 must complete before movement ends). */\n@keyframes row-grow-in {\n  from {\n    grid-template-rows: 0fr;\n  }\n  to {\n    grid-template-rows: 1fr;\n  }\n}\n@keyframes row-slide-in {\n  from {\n    translate: 0 -100%;\n  }\n}\n@keyframes row-fade-in {\n  from {\n    opacity: 0;\n    filter: blur(2px);\n  }\n}\n.animate-row-grow-in {\n  animation: row-grow-in 400ms ease-out;\n}\n.animate-row-slide-in {\n  animation:\n    row-slide-in 400ms ease-out,\n    row-fade-in 240ms ease-out;\n}\n\n/* Reverse of the Storage row entrance. The content rises into the clipped\n * top edge while its grid track collapses, so the following rows move upward\n * continuously and the deleted row disappears beneath the header surface. */\n@keyframes row-collapse-out {\n  from {\n    grid-template-rows: 1fr;\n  }\n  to {\n    grid-template-rows: 0fr;\n  }\n}\n@keyframes row-slide-out {\n  to {\n    translate: 0 -100%;\n  }\n}\n@keyframes row-fade-out {\n  to {\n    opacity: 0;\n    filter: blur(2px);\n  }\n}\n.animate-row-collapse-out {\n  animation: row-collapse-out 225ms ease-in forwards;\n}\n.animate-row-slide-out {\n  animation:\n    row-slide-out 225ms ease-in forwards,\n    row-fade-out 160ms ease-in forwards;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .animate-row-grow-in,\n  .animate-row-slide-in,\n  .animate-row-collapse-out,\n  .animate-row-slide-out {\n    animation-duration: 1ms;\n  }\n}\n\n/* Transitions.dev — \"Texts reveal\", used by the Storage dropzone's content\n * swaps (idle copy ↔ file name + status line).\n *\n * Entrance (`.is-shown` on the parent): lines rise 12px from below while\n * un-blurring, 500ms on a soft-landing bezier, staggered 40ms per line so\n * the eye lands on the first line first.\n * Exit (`.is-hiding`): a single quiet 200ms opacity fade in place — no Y\n * return, no blur, no stagger — so the disappearance never reads as a\n * reverse reveal.\n *\n * Deviations from the original snippet: custom props are scoped to\n * `.t-stagger` instead of :root, and `.t-stagger-line` doesn't force\n * `display: block` so flex-based lines (the icon disc) keep their layout. */\n.t-stagger {\n  --stagger-dur: 500ms;\n  --stagger-distance: 12px;\n  --stagger-stagger: 40ms;\n  --stagger-blur: 3px;\n  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);\n}\n.t-stagger-line {\n  opacity: 0;\n  transform: translateY(var(--stagger-distance));\n  filter: blur(var(--stagger-blur));\n  transition:\n    opacity var(--stagger-dur) var(--stagger-ease),\n    transform var(--stagger-dur) var(--stagger-ease),\n    filter var(--stagger-dur) var(--stagger-ease);\n  will-change: transform, opacity, filter;\n}\n.t-stagger-line--2 {\n  transition-delay: var(--stagger-stagger);\n}\n.t-stagger-line--3 {\n  transition-delay: calc(var(--stagger-stagger) * 2);\n}\n.t-stagger.is-shown .t-stagger-line {\n  opacity: 1;\n  transform: translateY(0);\n  filter: blur(0);\n}\n.t-stagger.is-hiding .t-stagger-line {\n  opacity: 0;\n  transform: translateY(0);\n  filter: blur(0);\n  transition:\n    opacity 200ms ease,\n    transform 0s linear,\n    filter 0s linear;\n  transition-delay: 0s;\n}\n@media (prefers-reduced-motion: reduce) {\n  .t-stagger-line {\n    transition: none !important;\n  }\n}\n\n/* Rolling-counter label swap: the old value lifts 5px and fades out while the\n * new one rises in from 5px below and fades in. */\n@keyframes label-out {\n  from {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  to {\n    transform: translateY(-10px);\n    opacity: 0;\n  }\n}\n@keyframes label-in {\n  from {\n    transform: translateY(10px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n.animate-label-out {\n  animation: label-out 220ms ease-out forwards;\n}\n.animate-label-in {\n  animation: label-in 220ms ease-out;\n}\n\n/* Checkbox tick: draws the stroke on like it's being ticked by hand.\n * The path sets pathLength=1 so the dash math is resolution-independent. */\n@keyframes check-draw {\n  from {\n    stroke-dashoffset: 1;\n  }\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n.animate-check-draw {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n  animation: check-draw 200ms cubic-bezier(0.65, 0, 0.35, 1) forwards;\n}\n@media (prefers-reduced-motion: reduce) {\n  .animate-check-draw {\n    animation: none;\n    stroke-dashoffset: 0;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n * Chart entrance animations (AI profile template & contributions heatmap)\n * ------------------------------------------------------------------------- */\n\n/* Heatmap cells pop in softly — each cell gets a random-looking per-cell\n * animation-delay so the grid fills in a scattered order. */\n.contributions-grid {\n  --contribution-tier-0: var(--color-chart-neutral);\n}\n.contributions-grid[data-accent=\"emerald\"] {\n  --contribution-tier-1: var(--color-emerald-200); --contribution-tier-2: var(--color-emerald-400); --contribution-tier-3: var(--color-emerald-500); --contribution-tier-4: var(--color-emerald-600); --contribution-tier-5: var(--color-emerald-700);\n}\n.contributions-grid[data-accent=\"green\"] {\n  --contribution-tier-1: var(--color-green-200); --contribution-tier-2: var(--color-green-400); --contribution-tier-3: var(--color-green-500); --contribution-tier-4: var(--color-green-600); --contribution-tier-5: var(--color-green-700);\n}\n.contributions-grid[data-accent=\"teal\"] {\n  --contribution-tier-1: var(--color-teal-200); --contribution-tier-2: var(--color-teal-400); --contribution-tier-3: var(--color-teal-500); --contribution-tier-4: var(--color-teal-600); --contribution-tier-5: var(--color-teal-700);\n}\n.contributions-grid[data-accent=\"cyan\"] {\n  --contribution-tier-1: var(--color-cyan-200); --contribution-tier-2: var(--color-cyan-400); --contribution-tier-3: var(--color-cyan-500); --contribution-tier-4: var(--color-cyan-600); --contribution-tier-5: var(--color-cyan-700);\n}\n.contributions-grid[data-accent=\"blue\"] {\n  --contribution-tier-1: var(--color-blue-200); --contribution-tier-2: var(--color-blue-400); --contribution-tier-3: var(--color-blue-500); --contribution-tier-4: var(--color-blue-600); --contribution-tier-5: var(--color-blue-700);\n}\n.contributions-grid[data-accent=\"indigo\"] {\n  --contribution-tier-1: var(--color-indigo-200); --contribution-tier-2: var(--color-indigo-400); --contribution-tier-3: var(--color-indigo-500); --contribution-tier-4: var(--color-indigo-600); --contribution-tier-5: var(--color-indigo-700);\n}\n.contributions-grid[data-accent=\"violet\"] {\n  --contribution-tier-1: var(--color-violet-200); --contribution-tier-2: var(--color-violet-400); --contribution-tier-3: var(--color-violet-500); --contribution-tier-4: var(--color-violet-600); --contribution-tier-5: var(--color-violet-700);\n}\n.contributions-grid[data-accent=\"rose\"] {\n  --contribution-tier-1: var(--color-rose-200); --contribution-tier-2: var(--color-rose-400); --contribution-tier-3: var(--color-rose-500); --contribution-tier-4: var(--color-rose-600); --contribution-tier-5: var(--color-rose-700);\n}\n.contributions-grid[data-accent=\"amber\"] {\n  --contribution-tier-1: var(--color-amber-200); --contribution-tier-2: var(--color-amber-400); --contribution-tier-3: var(--color-amber-500); --contribution-tier-4: var(--color-amber-600); --contribution-tier-5: var(--color-amber-700);\n}\n\n.dark .contributions-grid[data-accent=\"emerald\"] {\n  --contribution-tier-1: var(--color-emerald-950); --contribution-tier-2: var(--color-emerald-800); --contribution-tier-3: var(--color-emerald-700); --contribution-tier-4: var(--color-emerald-600); --contribution-tier-5: var(--color-emerald-500);\n}\n.dark .contributions-grid[data-accent=\"green\"] {\n  --contribution-tier-1: var(--color-green-950); --contribution-tier-2: var(--color-green-800); --contribution-tier-3: var(--color-green-700); --contribution-tier-4: var(--color-green-600); --contribution-tier-5: var(--color-green-500);\n}\n.dark .contributions-grid[data-accent=\"teal\"] {\n  --contribution-tier-1: var(--color-teal-950); --contribution-tier-2: var(--color-teal-800); --contribution-tier-3: var(--color-teal-700); --contribution-tier-4: var(--color-teal-600); --contribution-tier-5: var(--color-teal-500);\n}\n.dark .contributions-grid[data-accent=\"cyan\"] {\n  --contribution-tier-1: var(--color-cyan-950); --contribution-tier-2: var(--color-cyan-800); --contribution-tier-3: var(--color-cyan-700); --contribution-tier-4: var(--color-cyan-600); --contribution-tier-5: var(--color-cyan-500);\n}\n.dark .contributions-grid[data-accent=\"blue\"] {\n  --contribution-tier-1: var(--color-blue-950); --contribution-tier-2: var(--color-blue-800); --contribution-tier-3: var(--color-blue-700); --contribution-tier-4: var(--color-blue-600); --contribution-tier-5: var(--color-blue-500);\n}\n.dark .contributions-grid[data-accent=\"indigo\"] {\n  --contribution-tier-1: var(--color-indigo-950); --contribution-tier-2: var(--color-indigo-800); --contribution-tier-3: var(--color-indigo-700); --contribution-tier-4: var(--color-indigo-600); --contribution-tier-5: var(--color-indigo-500);\n}\n.dark .contributions-grid[data-accent=\"violet\"] {\n  --contribution-tier-1: var(--color-violet-950); --contribution-tier-2: var(--color-violet-800); --contribution-tier-3: var(--color-violet-700); --contribution-tier-4: var(--color-violet-600); --contribution-tier-5: var(--color-violet-500);\n}\n.dark .contributions-grid[data-accent=\"rose\"] {\n  --contribution-tier-1: var(--color-rose-950); --contribution-tier-2: var(--color-rose-800); --contribution-tier-3: var(--color-rose-700); --contribution-tier-4: var(--color-rose-600); --contribution-tier-5: var(--color-rose-500);\n}\n.dark .contributions-grid[data-accent=\"amber\"] {\n  --contribution-tier-1: var(--color-amber-950); --contribution-tier-2: var(--color-amber-800); --contribution-tier-3: var(--color-amber-700); --contribution-tier-4: var(--color-amber-600); --contribution-tier-5: var(--color-amber-500);\n}\n\n.contribution-cell[data-tier=\"0\"] { background-color: var(--contribution-tier-0); }\n.contribution-cell[data-tier=\"1\"] { background-color: var(--contribution-tier-1); }\n.contribution-cell[data-tier=\"2\"] { background-color: var(--contribution-tier-2); }\n.contribution-cell[data-tier=\"3\"] { background-color: var(--contribution-tier-3); }\n.contribution-cell[data-tier=\"4\"] { background-color: var(--contribution-tier-4); }\n.contribution-cell[data-tier=\"5\"] { background-color: var(--contribution-tier-5); }\n\n@keyframes cell-pop {\n  from {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.animate-cell-pop {\n  animation: cell-pop 380ms ease-out both;\n}\n\n/* Bars grow up from the baseline; a per-bar delay staggers them left→right. */\n@keyframes bar-rise {\n  from {\n    transform: scaleY(0);\n  }\n  to {\n    transform: scaleY(1);\n  }\n}\n.animate-bar-rise {\n  transform-origin: bottom;\n  animation: bar-rise 360ms cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n\n/* Line chart draws in left→right via a clip-path sweep over the whole plot\n * (line + gradient area together). */\n@keyframes chart-reveal {\n  from {\n    clip-path: inset(0 100% 0 0);\n  }\n  to {\n    clip-path: inset(0 0 0 0);\n  }\n}\n.animate-chart-reveal {\n  animation: chart-reveal 1800ms cubic-bezier(0.33, 0, 0.15, 1) both;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .animate-cell-pop,\n  .animate-bar-rise,\n  .animate-chart-reveal {\n    animation: none;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n * Table primitive (components/base/table)\n *\n * React Aria's collection components (Column/Row/Cell/…) can't be wrapped in\n * custom components without losing collection behaviour, so the primitive\n * re-exports them untouched and styling lives here, scoped to `.bui-table`.\n * React Aria renders real <table>/<thead>/<th>/<tr>/<td> elements.\n * --------------------------------------------------------------------------- */\n.bui-table {\n  @apply w-full border-collapse text-left;\n}\n/* Header background + border-y live on the cells: with border-collapse the\n * browser doesn't paint backgrounds/borders set on the <thead> row group.\n * Backgrounds/borders are set with explicit CSS (theme vars) rather than\n * @apply, which drops border-width/bg on these row-group cells. */\n.bui-table th {\n  @apply px-3 py-2.5 text-left align-middle text-body-medium text-text-tertiary whitespace-nowrap outline-none;\n  background-color: var(--color-background-secondary-default);\n  border-top: 1px solid var(--color-separator-border);\n  border-bottom: 1px solid var(--color-separator-border);\n  transition: padding 200ms ease, font-size 200ms ease;\n}\n.bui-table td {\n  @apply px-3 py-2.5 align-middle text-body-medium text-text-primary outline-none;\n  transition: padding 200ms ease, font-size 200ms ease;\n}\n.bui-table tbody tr {\n  @apply transition-colors duration-150;\n  border-bottom: 1px solid var(--color-separator-border);\n}\n.bui-table tbody tr[data-focus-visible] {\n  @apply ring-2 ring-inset ring-border-focus-ring;\n}\n.bui-table.bui-table-sm th,\n.bui-table.bui-table-sm td {\n  @apply px-2.5 py-1.5 text-body-2-medium;\n}\n\n/* Agent Thinking (components/application/agent-thinking): the agent thinking state\n * above a chat composer. The label reuses the ai-chat-text-shimmer travel;\n * its base/highlight both derive from the tone the component sets via\n * --bui-agent-thinking-tone, so every tone shimmers consistently. */\n.bui-agent-thinking-label {\n  color: transparent;\n  background-image: linear-gradient(\n    100deg,\n    color-mix(in oklab, var(--bui-agent-thinking-tone) 55%, transparent) 30%,\n    var(--bui-agent-thinking-tone) 50%,\n    color-mix(in oklab, var(--bui-agent-thinking-tone) 55%, transparent) 70%\n  );\n  background-position: 200% center;\n  background-size: 300% 100%;\n  background-clip: text;\n  -webkit-background-clip: text;\n  animation: ai-chat-text-shimmer 2.6s linear infinite;\n  will-change: background-position;\n}\n\n/* Star sparkle: scale + fade in, settle, and vanish; per-star duration and\n * stagger come in via inline animation-duration/-delay. */\n@keyframes bui-agent-thinking-star {\n  0%,\n  100% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  40% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  60% {\n    transform: scale(0.8);\n    opacity: 0.9;\n  }\n}\n\n.bui-agent-thinking-star {\n  transform: scale(0);\n  animation-name: bui-agent-thinking-star;\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n}\n\n/* Infinity comet: the dash segment laps the normalized (pathLength=100)\n * figure-eight once per animation-duration. */\n@keyframes bui-agent-thinking-dash {\n  to {\n    stroke-dashoffset: -100;\n  }\n}\n\n.bui-agent-thinking-comet {\n  animation-name: bui-agent-thinking-dash;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bui-agent-thinking-label {\n    color: var(--bui-agent-thinking-tone);\n    background-image: none;\n    animation: none;\n  }\n\n  /* Stars rest visible instead of frozen at scale(0). */\n  .bui-agent-thinking-star {\n    animation: none;\n    transform: none;\n    opacity: 0.7;\n  }\n\n  .bui-agent-thinking-comet {\n    animation: none;\n  }\n}\n\n/* Star glyphs read a touch heavier than the dot grids on light backgrounds;\n * soften only them (not the label) there. Dark mode keeps the full tone. */\n.bui-agent-thinking-stars {\n  color: color-mix(in oklab, currentColor 75%, transparent);\n}\n\n.dark .bui-agent-thinking-stars {\n  color: inherit;\n}\n\n/* Composer Loader (components/application/composer-loader): the light band\n * orbiting the composer while the agent works. Dash segments on a\n * pathLength-normalized SVG stroke — the offset laps once per duration. */\n@keyframes bui-composer-loader-dash {\n  from {\n    stroke-dashoffset: 0;\n  }\n\n  to {\n    stroke-dashoffset: -100;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bui-composer-loader-rect {\n    animation: none !important;\n  }\n}\n\n/* Composer mic listening state (components/application/ai-chat): equalizer\n * bars dancing while voice input is active. Per-bar duration/delay come in\n * inline so the bars drift out of phase like real audio. */\n@keyframes bui-composer-mic-bars {\n  0%,\n  100% {\n    transform: scaleY(0.4);\n  }\n\n  50% {\n    transform: scaleY(1);\n  }\n}\n\n.bui-composer-mic-bar {\n  animation: bui-composer-mic-bars 0.9s ease-in-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bui-composer-mic-bar {\n    animation: none;\n    transform: scaleY(0.7);\n  }\n}\n\n/* Shimmer sweep on a primary call to action (the Pro prompt card). */\n@keyframes bui-badge-shimmer {\n  0% {\n    transform: translateX(0) skewX(-12deg);\n  }\n  40%,\n  100% {\n    transform: translateX(350%) skewX(-12deg);\n  }\n}\n\n.bui-badge-shimmer {\n  animation: bui-badge-shimmer 2.5s ease-in-out infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bui-badge-shimmer {\n      animation: none;\n      opacity: 0;\n    }\n}\n\n/* Showcase card (docs index, landing, the starter's catalogue). */\n.landing-showcase-card {\n  transition: box-shadow 280ms ease;\n}\n\n.landing-showcase-card::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  z-index: 60;\n  pointer-events: none;\n  border: 1px solid var(--color-border-button-default);\n  border-radius: inherit;\n  transition:\n    border-color 280ms ease,\n    box-shadow 280ms ease;\n}\n\n.dark .landing-showcase-card::after {\n  border-color: rgb(255 255 255 / 0.08);\n}\n\n@media (min-width: 640px) and (hover: hover) {\n  .landing-showcase-card:hover::after,\n  .landing-showcase-card:focus-within::after {\n    border-color: var(--color-border-button-hover);\n    box-shadow: inset 0 0 0 2px var(--color-border-button-hover);\n  }\n}\n"
    },
    {
      "path": "components/boardui/styles/theme.css",
      "target": "@components/boardui/styles/theme.css",
      "type": "registry:file",
      "content": "/* ---------------------------------------------------------------------------\n * BoardUI theme tokens\n *\n * Layered as Tailwind v4 expects:\n *   @theme { ... }     primitives + ramp overrides → Tailwind utilities\n *   :root { ... }      semantic tokens (light mode) — reference primitives\n *   .dark { ... }      semantic overrides (dark mode) — landed when designed\n *   @theme inline {..} re-export of semantic tokens so they become utilities\n *\n * See docs/FIGMA_WORKFLOW.md for how tokens get added (Figma is source of truth).\n * --------------------------------------------------------------------------- */\n\n@theme {\n  /* ----- Color primitives ----------------------------------------------------\n   * Almost the entire palette matches Tailwind v4's OKLCH defaults. The four\n   * overrides below are the only intentional deviations (see Figma → variables\n   * → color/...).\n   * --------------------------------------------------------------------------*/\n  --color-slate-200:   #ebeff5;\n  --color-neutral-100: #f7f7f7;\n  --color-neutral-200: #ebebeb;\n  --color-neutral-925: #121212;\n  --color-blue-400:    #3392ff;\n\n  /* ----- Accent ramp ---------------------------------------------------------\n   * The CTA hue. Interactive/selection surfaces (primary button gradient,\n   * ghost + link buttons, checkbox, radio, switch, slider, tabs, sidebar\n   * selected, focus ring, date-range selection) reference accent-* instead of\n   * a raw hue, so the whole system re-tints by overriding these eleven\n   * variables at runtime (see components/application/theme/accent.ts) or in\n   * a customer project after importing this file. Defaults to the blue\n   * primitives above. Content/data blues (charts, status chips, calendar\n   * events, info notifications) deliberately keep referencing blue-*.\n   * --------------------------------------------------------------------------*/\n  --color-accent-50:  var(--color-blue-50);\n  --color-accent-100: var(--color-blue-100);\n  --color-accent-200: var(--color-blue-200);\n  --color-accent-300: var(--color-blue-300);\n  --color-accent-400: var(--color-blue-400);\n  --color-accent-500: var(--color-blue-500);\n  --color-accent-600: var(--color-blue-600);\n  --color-accent-700: var(--color-blue-700);\n  --color-accent-800: var(--color-blue-800);\n  --color-accent-900: var(--color-blue-900);\n  --color-accent-950: var(--color-blue-950);\n\n  /* ----- Typography ----------------------------------------------------------\n   * Font sizes, weights, line-heights, and tracking all match Tailwind v4\n   * defaults. The only override is the family: Inter, loaded via next/font\n   * in app/layout.tsx, which exposes --font-inter to the document.\n   * --------------------------------------------------------------------------*/\n  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif,\n               \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n               \"Noto Color Emoji\";\n\n  /* Monospace ramp for code blocks. Loaded via next/font in app/layout.tsx\n   * (--font-mono-source → JetBrains Mono). Figma's spec uses IBM Plex Mono;\n   * JetBrains Mono is the closest already-bundled face. */\n  --font-mono: var(--font-mono-source), ui-monospace, \"SFMono-Regular\", Menlo,\n               Consolas, \"Liberation Mono\", monospace;\n\n  /* ----- Radii ---------------------------------------------------------------\n   * Extra step between lg (8) and xl (12). Used by medium-size buttons.\n   * Figma name: radius/2lg.\n   * --------------------------------------------------------------------------*/\n  --radius-2lg: 10px;\n  --radius-notification-card: 10px;\n\n  /* ----- Shadows -------------------------------------------------------------\n   * 2xs, xs, 2xl and the inner shadows already match Tailwind v4. Sizes sm, md,\n   * lg, xl follow the Figma 6%/10% recipe (slightly softer than Tailwind v4's\n   * 10%/10% default).\n   * --------------------------------------------------------------------------*/\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.10);\n  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.10);\n  --shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.05), 0 10px 15px -3px rgb(0 0 0 / 0.10);\n  --shadow-xl: 0 10px 10px -5px rgb(0 0 0 / 0.04), 0 20px 25px -5px rgb(0 0 0 / 0.10);\n\n  /* Figma effect style \"Background/Sidebar Elevation\" — copied 1:1:\n   *   DROP_SHADOW #00000005 offset(0,1) radius 0  spread 0  → 0 1px 0px  0 / 0.0196\n   *   DROP_SHADOW #0000000F offset(0,1) radius 12 spread 0  → 0 1px 12px 0 / 0.0588\n   *   DROP_SHADOW #00000052 offset(0,0) radius 1  spread 0  → 0 0   1px  0 / 0.3216\n   * (alpha = hex byte / 255: 05→0.0196, 0F→0.0588, 52→0.3216). */\n  --shadow-sidebar:\n    0 1px 0 0 rgb(0 0 0 / 0.0196),\n    0 1px 12px 0 rgb(0 0 0 / 0.0588),\n    0 0 1px 0 rgb(0 0 0 / 0.3216);\n\n  /* Figma effect style \"Sidebar selected\" — copied 1:1:\n   *   DROP_SHADOW  color/blue/500 offset(0,0) radius 0 spread 1 → 0 0 0 1px blue-500\n   *   INNER_SHADOW #FFFFFF40       offset(0,1) radius 0 spread 0 → inset 0 1px 0 0 / 0.251\n   * (#FFFFFF40 alpha = 0x40/255 = 0.251). */\n  --shadow-nav-selected:\n    0 0 0 1px var(--color-accent-500),\n    inset 0 1px 0 0 rgb(255 255 255 / 0.251);\n\n  /* Checkbox checked/indeterminate surface (from the Figma Checkbox component):\n   * inner top highlight + 1px inner blue edge over the primary gradient. */\n  --shadow-checkbox-selected:\n    inset 0 2px 0 0 rgb(255 255 255 / 0.25),\n    inset 0 0 0 1px var(--color-accent-500);\n\n  /* 1px contact shadow used on white cards/dropdown triggers sitting on the\n   * secondary background (Figma drop shadow 0 1 1 5%). */\n  --shadow-card: 0 1px 1px 0 rgb(0 0 0 / 0.05);\n\n  /* Floating menu/dropdown panel (Figma → sidebar profile menu node 3823:3699):\n   *   DROP_SHADOW #0000000A offset(0,1) radius 1 → 0 1px 1px 0 / 0.04\n   *   DROP_SHADOW #00000005 offset(0,4) radius 4 → 0 4px 4px 0 / 0.02 */\n  --shadow-dropdown:\n    0 1px 1px 0 rgb(0 0 0 / 0.04),\n    0 4px 4px 0 rgb(0 0 0 / 0.02);\n\n  /* Floating template waitlist (Figma node 4117:32737). This extends the\n   * sidebar elevation recipe with the two broad ambient layers used by the\n   * signup surface. */\n  --shadow-waitlist:\n    0 0 6px 0 rgb(0 0 0 / 0.06),\n    0 0 64px 0 rgb(0 0 0 / 0.16),\n    0 0 1px 0 rgb(0 0 0 / 0.32),\n    0 1px 12px 0 rgb(0 0 0 / 0.06),\n    0 1px 0 0 rgb(0 0 0 / 0.02);\n\n  /* Inner shadows (Figma names inner-shadow/*; Tailwind utility prefix is\n   * inset-shadow-*).\n   */\n  --inset-shadow-2xs: inset 0 1px 0 0 rgb(0 0 0 / 0.05);\n  --inset-shadow-xs:  inset 0 1px 1px 0 rgb(0 0 0 / 0.05);\n  --inset-shadow-sm:  inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n}\n\n/* ---------------------------------------------------------------------------\n * Semantic tokens — light mode.\n *\n * All values reference primitives via var(--color-{family}-{shade}). Edit the\n * primitives in @theme above and these update automatically.\n *\n * Figma name on the left, var name on the right:\n *   foreground/full                  → --color-foreground-full\n *   foreground/icon/primary          → --color-foreground-icon-primary\n *   foreground/disabled              → --color-foreground-disabled\n *   foreground/disabled-danger       → --color-foreground-disabled-danger\n *   text/primary                     → --color-text-primary\n *   text/tertiary                    → --color-text-tertiary\n *   text/disabled-danger             → --color-text-disabled-danger\n *   background/primary/default       → --color-background-primary-default\n *   background/primary/hover         → --color-background-primary-hover\n *   background/primary/active        → --color-background-primary-active\n *   background/primary/disabled      → --color-background-primary-disabled\n *   background/secondary/default     → --color-background-secondary-default\n *   border/button/default            → --color-border-button-default\n *   border/button/hover              → --color-border-button-hover\n *   border/button/active             → --color-border-button-active\n *\n * Button gradients (linear, 180°, light stop → dark stop) sourced from the\n * blue/red primitives that each Button/{type}/{state} style references in\n * Figma. Direction inferred — confirm visually against Figma.\n * --------------------------------------------------------------------------- */\n:root {\n  /* Foreground (icons + on-fill content) */\n  --color-foreground-full:               var(--color-white);\n  --color-foreground-icon-primary:       var(--color-neutral-950);\n  --color-foreground-icon-hover:         var(--color-black);\n  --color-foreground-icon-secondary:     var(--color-neutral-500);\n  --color-foreground-icon-tertiary:      var(--color-neutral-400);\n  --color-foreground-icon-quaternary:    var(--color-neutral-300);\n  --color-foreground-icon-error:         var(--color-red-600);\n  --color-foreground-icon-disabled:      var(--color-neutral-300);\n  --color-foreground-disabled:           var(--color-neutral-400);\n  --color-foreground-disabled-danger:    var(--color-red-300);\n  --color-input-disabled-foreground:     var(--color-neutral-300);\n  --color-icon-button-disabled-foreground: var(--color-neutral-300);\n  --color-button-primary-disabled-foreground: var(--color-neutral-400);\n\n  /* Text */\n  --color-text-primary:         var(--color-neutral-950);\n  --color-text-secondary:       var(--color-neutral-600);\n  --color-text-tertiary:        #737373;\n  --color-text-disabled:        var(--color-neutral-300);\n  --color-text-disabled-danger: var(--color-red-300);\n  --color-text-placeholder:     var(--color-neutral-400);\n  --color-text-error-primary:   var(--color-red-500);\n  --color-input-disabled-text:  var(--color-neutral-300);\n  --color-text-white:           var(--color-white);\n\n  /* Background */\n  --color-background-full:              var(--color-white);\n  --color-background-primary-default:   var(--color-white);\n  --color-background-inner-default:     var(--color-white);\n  --color-background-primary-hover:     var(--color-neutral-100);\n  --color-background-primary-active:    var(--color-neutral-200);\n  --color-background-primary-disabled:  var(--color-neutral-100);\n  --color-input-disabled-background:    var(--color-neutral-100);\n  --color-background-secondary-default: var(--color-neutral-100);\n  --color-background-secondary-hover:   var(--color-neutral-200);\n  --color-background-tertiary-default:  var(--color-neutral-200);\n  --color-background-tertiary-hover:    var(--color-neutral-300);\n  --color-background-tertiary-error:    var(--color-red-100);\n  --color-background-recent-hire-role:  var(--color-neutral-100);\n  --color-avatar-neutral-background:    var(--color-neutral-300);\n  /* Figma background/quaternary/default — first used by the Storage\n   * dropzone's upload-icon disc (node 4106:26587). */\n  --color-background-quaternary-default: var(--color-neutral-300);\n  --color-background-quaternary-hover:   var(--color-neutral-400);\n  --color-background-quaternary-error:   var(--color-red-200);\n  --color-file-upload-icon-background:   var(--color-neutral-300);\n  --color-file-upload-icon-foreground:   var(--color-neutral-400);\n  --color-file-upload-icon-foreground-hover: var(--color-neutral-500);\n\n  /* Border */\n  --color-border-button-default:   var(--color-neutral-200);\n  --color-border-button-hover:     var(--color-neutral-300);\n  --color-border-button-active:    var(--color-neutral-400);\n  --color-border-button-white:     var(--color-white);\n  /* The system had no red border. Matches text/error/primary so an invalid\n     field's edge and its message are the same red. */\n  --color-border-error-default:    var(--color-red-500);\n  --color-border-checkbox-default: var(--color-neutral-300);\n  --color-border-checkbox-hover:   var(--color-neutral-400);\n  --color-border-checkbox-active:  var(--color-neutral-400);\n  --color-border-checkbox-white:   var(--color-white);\n  --color-border-component-detail-container: var(--color-neutral-200);\n  --color-border-ai-profile-card:             var(--color-neutral-200);\n  --color-border-table:            var(--color-neutral-200);\n  --color-border-button-group:     var(--color-neutral-200);\n  --color-border-sidebar-profile-hover: var(--color-neutral-300);\n  --color-separator-border:        var(--color-neutral-200);\n  --color-separator-border-strong: var(--color-neutral-200);\n  --color-border-focus-ring:       var(--color-accent-500);\n\n  /* State */\n  --color-state-success-text: var(--color-lime-800);\n  --color-state-success-base: var(--color-lime-200);\n\n  /* Selected control interiors remain light on colored tracks in both themes. */\n  --color-control-indicator-background:        var(--color-white);\n  --color-control-indicator-background-subtle: var(--color-neutral-100);\n  --color-switch-off-chip-start:                var(--color-white);\n  --color-switch-off-chip-end:                  var(--color-neutral-100);\n  /* Selected switch chip: the Figma comps use hexes a touch deeper than the\n   * plain 500→600 ramp (#2473fe → #0450e2 for blue). Expressed as oklab mixes\n   * of neighbouring accent stops so the recipe survives a re-tint. */\n  --color-switch-on-chip-start:                 color-mix(in oklab, var(--color-accent-500) 63%, var(--color-accent-600));\n  --color-switch-on-chip-end:                   color-mix(in oklab, var(--color-accent-600) 16%, var(--color-accent-700));\n  --color-stat-card-icon-background:            var(--color-white);\n  --color-segmented-control-background:          var(--color-neutral-100);\n  --color-segmented-control-selected-background: var(--color-white);\n  --color-theme-toggle-sidebar-background:       var(--color-neutral-200);\n  --color-theme-toggle-sidebar-selected-background: var(--color-white);\n  /* Stepped against the composer: the pill is white and the add button is the\n   * subtle grey sitting on it, so the control separates from the surface it\n   * shares an edge with. Dark mode keeps its own pair, where the pill is the\n   * lighter of the two and the button steps the other way. */\n  --color-ai-chat-composer-add-background:       var(--color-neutral-100);\n  --color-ai-chat-composer-add-hover-background: var(--color-neutral-200);\n  --color-agent-progress-ring:                     var(--color-neutral-700);\n  --color-button-ghost-background: transparent;\n  --color-button-ghost-hover: var(--color-background-primary-hover);\n  --color-button-ghost-active: var(--color-background-primary-active);\n  --color-button-ghost-disabled: transparent;\n  --color-button-ghost-foreground: var(--color-text-primary);\n  --color-button-ghost-disabled-foreground: var(--color-text-tertiary);\n  --color-dropdown-item-hover-background:        var(--color-neutral-100);\n  --color-kbd-background:                        var(--color-neutral-300);\n  --color-kbd-foreground:                        var(--color-neutral-500);\n  --color-docs-file-chip-background:             var(--color-purple-50);\n  --color-docs-file-chip-border:                 var(--color-purple-100);\n  --color-docs-file-chip-foreground:             var(--color-purple-500);\n  --color-docs-command-accent:                    var(--color-purple-400);\n  --color-docs-code-background:                   var(--color-background-primary-default);\n  --color-docs-install-rail:                      var(--color-border-button-default);\n\n  /* Recently shipped component badge. Kept semantic so its compact blue\n   * surface can retain the same hierarchy in both themes. */\n  --color-badge-neutral-background: var(--color-neutral-200);\n  --color-team-menu-count-background: var(--color-neutral-200);\n  --color-team-menu-count-foreground: var(--color-neutral-500);\n  --color-badge-new-background: var(--color-accent-100);\n  --color-badge-new-text:       var(--color-accent-600);\n  --color-tab-count-selected-background: var(--color-accent-100);\n  --color-pill-tab-blue-selected-background: var(--color-accent-50);\n  --color-pill-tab-blue-hover-background: var(--color-neutral-100);\n\n  /* Notification status-icon surfaces. */\n  --color-notification-information-background: var(--color-blue-100);\n  --color-notification-information-foreground: var(--color-blue-600);\n  --color-notification-success-background:     var(--color-lime-100);\n  --color-notification-success-foreground:     var(--color-lime-600);\n  --color-notification-error-background:       var(--color-rose-100);\n  --color-notification-error-foreground:       var(--color-rose-600);\n  --color-notification-center-background:      var(--color-white);\n\n  /* Table status chips. Dark mappings come from the medical dashboard table\n   * in Figma (4139:7202, 4139:7240, 4139:7278, 4139:7315). */\n  --color-status-lime-background:   var(--color-lime-200);\n  --color-status-lime-text:         var(--color-lime-800);\n  --color-status-yellow-background: var(--color-yellow-200);\n  --color-status-yellow-text:       var(--color-yellow-800);\n  --color-status-rose-background:   var(--color-rose-200);\n  --color-status-rose-text:         var(--color-rose-800);\n  --color-status-cyan-background:   var(--color-cyan-200);\n  --color-status-cyan-text:         var(--color-cyan-800);\n  --color-status-blue-background:   var(--color-blue-200);\n  --color-status-blue-text:         var(--color-blue-800);\n  --color-status-purple-background: var(--color-purple-100);\n  --color-status-purple-text:       var(--color-purple-600);\n  --color-status-dot-green-halo:    var(--color-green-100);\n  --color-status-dot-yellow-halo:   var(--color-yellow-200);\n  --color-status-dot-indigo-halo:   var(--color-indigo-100);\n\n  /* Date range selection: the connecting band and its start/end caps. */\n  --color-date-range-background:      var(--color-accent-100);\n  --color-date-range-edge-background: var(--color-accent-300);\n\n  /* Calendar event chips. Title/time stay separate so the original light\n   * hierarchy remains intact while dark mode can normalize both to /300. */\n  --color-calendar-event-blue-background:    var(--color-blue-100);\n  --color-calendar-event-blue-title:         var(--color-blue-700);\n  --color-calendar-event-blue-time:          var(--color-blue-700);\n  --color-calendar-event-pink-background:    var(--color-pink-100);\n  --color-calendar-event-pink-title:         var(--color-pink-700);\n  --color-calendar-event-pink-time:          var(--color-pink-700);\n  --color-calendar-event-purple-background:  var(--color-purple-100);\n  --color-calendar-event-purple-title:       var(--color-purple-700);\n  --color-calendar-event-purple-time:        var(--color-purple-700);\n  --color-calendar-event-lime-background:    var(--color-lime-100);\n  --color-calendar-event-lime-title:         var(--color-lime-800);\n  --color-calendar-event-lime-time:          var(--color-lime-700);\n  --color-calendar-event-emerald-background: var(--color-emerald-100);\n  --color-calendar-event-emerald-title:      var(--color-emerald-800);\n  --color-calendar-event-emerald-time:       var(--color-emerald-700);\n\n  /* Placeholder colors that don't map cleanly to existing text tokens */\n  --color-text-error-placeholder: var(--color-red-400);\n\n  /* Charts (graphs) — shared neutrals + a categorical accent ramp.\n   * `track` is the background bar/ring behind a series; `cursor` the hover\n   * outline / dashed reference line; `neutral` a data color for \"other\"-style\n   * slices. Each numbered accent pairs a base fill with a one-tone-darker\n   * `-active` used for hover emphasis (the 400 → 500 recipe every chart\n   * follows). Numbered (not hue-named) so the palette can be retuned without\n   * renaming, mirroring the chart-1…n convention common to chart systems. */\n  --color-chart-track:    var(--color-neutral-200);\n  --color-chart-cursor:   var(--color-neutral-300);\n  --color-chart-neutral:  var(--color-neutral-300);\n  --color-chart-1:        var(--color-teal-400);\n  --color-chart-1-active: var(--color-teal-500);\n  --color-chart-2:        var(--color-lime-400);\n  --color-chart-2-active: var(--color-lime-500);\n  --color-chart-3:        var(--color-pink-400);\n  --color-chart-3-active: var(--color-pink-500);\n  --color-chart-4:        var(--color-sky-400);\n  --color-chart-4-active: var(--color-sky-500);\n  --color-chart-5:        var(--color-purple-400);\n  --color-chart-5-active: var(--color-purple-500);\n  --color-chart-6:        var(--color-blue-400);\n  --color-chart-6-active: var(--color-blue-500);\n  --color-chart-7:        var(--color-emerald-400);\n  --color-chart-7-active: var(--color-emerald-500);\n  --color-chart-8:        var(--color-yellow-400);\n  --color-chart-8-active: var(--color-yellow-500);\n  --color-chart-9:        var(--color-indigo-400);\n  --color-chart-9-active: var(--color-indigo-500);\n  --color-chart-agents-bar:        var(--color-purple-300);\n  --color-chart-agents-bar-active: var(--color-purple-400);\n\n  /* Button gradients */\n  --gradient-button-primary-default:  linear-gradient(180deg, var(--color-accent-500)    0%, var(--color-accent-600)    100%);\n  --gradient-button-primary-hover:    linear-gradient(180deg, var(--color-accent-400)    0%, var(--color-accent-500)    100%);\n  --gradient-button-primary-active:   linear-gradient(180deg, var(--color-accent-600)    0%, var(--color-accent-700)    100%);\n  --gradient-button-primary-disabled: linear-gradient(180deg, var(--color-neutral-200) 0%, var(--color-neutral-300) 100%);\n\n  --gradient-button-danger-default:   linear-gradient(180deg, var(--color-red-500) 0%, var(--color-red-600) 100%);\n  --gradient-button-danger-hover:     linear-gradient(180deg, var(--color-red-400) 0%, var(--color-red-500) 100%);\n  --gradient-button-danger-active:    linear-gradient(180deg, var(--color-red-600) 0%, var(--color-red-700) 100%);\n  --gradient-button-danger-disabled:  linear-gradient(180deg, var(--color-red-100) 0%, var(--color-red-200) 100%);\n}\n\n.dark {\n  /* Foreground */\n  --color-foreground-full:            var(--color-neutral-700);\n  --color-foreground-icon-primary:    var(--color-neutral-50);\n  --color-foreground-icon-hover:      var(--color-white);\n  --color-foreground-icon-error:      var(--color-red-400);\n  --color-foreground-icon-tertiary:   var(--color-neutral-600);\n  --color-foreground-icon-quaternary: var(--color-neutral-700);\n  --color-foreground-icon-disabled:   var(--color-neutral-800);\n  --color-foreground-disabled:        var(--color-neutral-700);\n  --color-foreground-disabled-danger: var(--color-red-400);\n  --color-input-disabled-foreground:  var(--color-neutral-600);\n  --color-icon-button-disabled-foreground: var(--color-neutral-500);\n  --color-button-primary-disabled-foreground: var(--color-neutral-500);\n\n  /* Text */\n  --color-text-primary:  var(--color-neutral-50);\n  --color-text-tertiary: var(--color-neutral-600);\n  --color-text-disabled: var(--color-neutral-800);\n  --color-text-error-primary: var(--color-red-400);\n  --color-input-disabled-text: color-mix(in srgb, var(--color-neutral-500) 40%, transparent);\n\n  /* Background */\n  --color-background-full:              var(--color-neutral-925);\n  --color-background-primary-default:   #1c1c1c;\n  --color-background-inner-default:     color-mix(in srgb, var(--color-neutral-800) 60%, transparent);\n  --color-background-primary-hover:     color-mix(in srgb, var(--color-neutral-700) 60%, transparent);\n  --color-background-primary-active:    var(--color-neutral-800);\n  --color-background-primary-disabled:  var(--color-neutral-800);\n  --color-input-disabled-background:    color-mix(in srgb, var(--color-neutral-800) 30%, transparent);\n  --color-switch-off-chip-start:        var(--color-background-tertiary-default);\n  --color-switch-off-chip-end:          var(--color-background-tertiary-default);\n  --color-background-secondary-default: #171717;\n  --color-background-secondary-hover:   var(--color-neutral-800);\n  --color-background-tertiary-default:  var(--color-neutral-800);\n  --color-background-tertiary-hover:    var(--color-neutral-700);\n  --color-background-tertiary-error:    color-mix(in srgb, var(--color-red-950) 60%, transparent);\n  --color-background-quaternary-default: var(--color-neutral-700);\n  --color-background-quaternary-hover:   var(--color-neutral-600);\n  --color-background-recent-hire-role:  color-mix(in srgb, var(--color-neutral-900) 60%, transparent);\n  --color-avatar-neutral-background:    var(--color-background-primary-default);\n  --color-file-upload-icon-background:  var(--color-neutral-600);\n  --color-file-upload-icon-foreground:  var(--color-neutral-400);\n  --color-file-upload-icon-foreground-hover: var(--color-neutral-300);\n  --color-stat-card-icon-background:    var(--color-neutral-800);\n  --color-segmented-control-background:          var(--color-neutral-925);\n  --color-segmented-control-selected-background: var(--color-neutral-800);\n  --color-theme-toggle-sidebar-background:       var(--color-neutral-800);\n  --color-theme-toggle-sidebar-selected-background: var(--color-neutral-700);\n  --color-ai-chat-composer-add-background:       var(--color-neutral-700);\n  --color-ai-chat-composer-add-hover-background: var(--color-neutral-600);\n  --color-agent-progress-ring:                     color-mix(in srgb, var(--color-white) 50%, transparent);\n  --color-button-ghost-background: transparent;\n  --color-button-ghost-hover: var(--color-background-primary-hover);\n  --color-button-ghost-active: var(--color-background-primary-active);\n  --color-button-ghost-disabled: transparent;\n  --color-button-ghost-foreground: var(--color-text-primary);\n  --color-button-ghost-disabled-foreground: var(--color-text-tertiary);\n  --color-dropdown-item-hover-background:        color-mix(in srgb, var(--color-neutral-700) 60%, transparent);\n  --color-kbd-background:                        var(--color-neutral-700);\n  --color-kbd-foreground:                        var(--color-neutral-400);\n  --color-docs-file-chip-background:             color-mix(in srgb, var(--color-purple-950) 50%, transparent);\n  --color-docs-file-chip-border:                 var(--color-purple-800);\n  --color-docs-file-chip-foreground:             var(--color-purple-400);\n  --color-docs-code-background:                  var(--color-background-full);\n  --color-docs-install-rail:                     color-mix(in srgb, var(--color-neutral-800) 60%, transparent);\n\n  /* Dark surfaces absorb low-alpha shadows more readily than white ones.\n   * Preserve the light-mode geometry and raise only the black alpha: tighter\n   * contact shadows stay crisp, while higher elevations receive a restrained\n   * ambient layer without introducing a grey glow. */\n  --shadow-2xs: 0 1px rgb(0 0 0 / 0.16);\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.18);\n  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.12), 0 1px 3px 0 rgb(0 0 0 / 0.16);\n  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.12), 0 4px 6px -1px rgb(0 0 0 / 0.18);\n  --shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.10), 0 10px 15px -3px rgb(0 0 0 / 0.18);\n  --shadow-xl: 0 10px 10px -5px rgb(0 0 0 / 0.08), 0 20px 25px -5px rgb(0 0 0 / 0.20);\n  --shadow-card: 0 1px 1px 0 rgb(0 0 0 / 0.14);\n  --shadow-dropdown:\n    0 1px 1px 0 rgb(0 0 0 / 0.14),\n    0 4px 4px 0 rgb(0 0 0 / 0.10);\n  --shadow-sidebar:\n    0 1px 0 0 rgb(0 0 0 / 0.10),\n    0 1px 12px 0 rgb(0 0 0 / 0.16),\n    0 0 1px 0 rgb(0 0 0 / 0.42);\n  --shadow-waitlist:\n    0 0 6px 0 rgb(0 0 0 / 0.12),\n    0 0 64px 0 rgb(0 0 0 / 0.22),\n    0 0 1px 0 rgb(0 0 0 / 0.42),\n    0 1px 12px 0 rgb(0 0 0 / 0.14),\n    0 1px 0 0 rgb(0 0 0 / 0.08);\n\n  /* Badges */\n  --color-badge-neutral-background: var(--color-neutral-800);\n  --color-team-menu-count-background: var(--color-neutral-700);\n  --color-team-menu-count-foreground: var(--color-neutral-400);\n  --color-badge-new-background: var(--color-accent-950);\n  --color-badge-new-text:       var(--color-accent-400);\n  --color-tab-count-selected-background: color-mix(in srgb, var(--color-accent-800) 60%, transparent);\n\n  /* Dark status discs use /800 surfaces with /300 foregrounds so the icon\n   * remains crisp without reverting to a bright pastel circle. */\n  --color-notification-information-background: color-mix(in srgb, var(--color-blue-800) 50%, transparent);\n  --color-notification-information-foreground: var(--color-blue-300);\n  --color-notification-success-background:     color-mix(in srgb, var(--color-lime-800) 50%, transparent);\n  --color-notification-success-foreground:     var(--color-lime-300);\n  --color-notification-error-background:       color-mix(in srgb, var(--color-rose-800) 50%, transparent);\n  --color-notification-error-foreground:       var(--color-rose-300);\n  --color-notification-center-background:      var(--color-neutral-900);\n\n  /* Borders and separators */\n  --color-border-button-default:   var(--color-neutral-700);\n  --color-border-button-hover:     var(--color-neutral-500);\n  --color-border-button-active:    var(--color-neutral-600);\n  --color-border-button-white:     var(--color-zinc-800);\n  --color-border-error-default:    var(--color-red-400);\n  --color-border-checkbox-default: var(--color-neutral-700);\n  --color-border-checkbox-hover:   var(--color-neutral-500);\n  --color-border-checkbox-active:  var(--color-neutral-500);\n  --color-border-component-detail-container: var(--color-neutral-800);\n  --color-border-ai-profile-card:             var(--color-neutral-800);\n  --color-border-table:            var(--color-neutral-800);\n  --color-border-button-group:     color-mix(in srgb, var(--color-neutral-600) 60%, transparent);\n  --color-border-sidebar-profile-hover: var(--color-neutral-600);\n  --color-separator-border:        var(--color-neutral-800);\n  --color-separator-border-strong: color-mix(in srgb, var(--color-neutral-700) 60%, transparent);\n\n  /* Figma's dark table status pairs. */\n  --color-status-lime-background:   color-mix(in srgb, var(--color-lime-950) 60%, transparent);\n  --color-status-lime-text:         var(--color-lime-500);\n  --color-status-yellow-background: color-mix(in srgb, var(--color-yellow-950) 60%, transparent);\n  --color-status-yellow-text:       var(--color-yellow-500);\n  --color-status-rose-background:   color-mix(in srgb, var(--color-rose-950) 60%, transparent);\n  --color-status-rose-text:         var(--color-rose-500);\n  --color-status-cyan-background:   color-mix(in srgb, var(--color-cyan-950) 60%, transparent);\n  --color-status-cyan-text:         var(--color-cyan-400);\n  --color-status-blue-background:   color-mix(in srgb, var(--color-blue-950) 60%, transparent);\n  --color-status-blue-text:         var(--color-blue-300);\n  --color-status-purple-background: color-mix(in srgb, var(--color-purple-900) 50%, transparent);\n  --color-status-purple-text:       var(--color-purple-300);\n  --color-status-dot-green-halo:    color-mix(in srgb, var(--color-green-800) 40%, transparent);\n  --color-status-dot-yellow-halo:   color-mix(in srgb, var(--color-yellow-800) 40%, transparent);\n  --color-status-dot-indigo-halo:   color-mix(in srgb, var(--color-indigo-800) 40%, transparent);\n\n  --color-date-range-background:      var(--color-accent-950);\n  --color-date-range-edge-background: var(--color-accent-800);\n\n  --color-pill-tab-blue-selected-background: color-mix(in srgb, var(--color-accent-950) 60%, transparent);\n  --color-pill-tab-blue-hover-background: var(--color-neutral-800);\n\n  /* Calendar event families share the same dark-mode depth/contrast recipe. */\n  --color-calendar-event-blue-background:    var(--color-blue-950);\n  --color-calendar-event-blue-title:         var(--color-blue-300);\n  --color-calendar-event-blue-time:          var(--color-blue-300);\n  --color-calendar-event-pink-background:    var(--color-pink-950);\n  --color-calendar-event-pink-title:         var(--color-pink-300);\n  --color-calendar-event-pink-time:          var(--color-pink-300);\n  --color-calendar-event-purple-background:  var(--color-purple-950);\n  --color-calendar-event-purple-title:       var(--color-purple-300);\n  --color-calendar-event-purple-time:        var(--color-purple-300);\n  --color-calendar-event-lime-background:    var(--color-lime-950);\n  --color-calendar-event-lime-title:         var(--color-lime-300);\n  --color-calendar-event-lime-time:          var(--color-lime-300);\n  --color-calendar-event-emerald-background: var(--color-emerald-950);\n  --color-calendar-event-emerald-title:      var(--color-emerald-300);\n  --color-calendar-event-emerald-time:       var(--color-emerald-300);\n\n  /* Disabled primary CTA: dark, low-emphasis fill with readable muted text. */\n  --gradient-button-primary-disabled: linear-gradient(\n    180deg,\n    var(--color-neutral-700) 0%,\n    var(--color-neutral-800) 100%\n  );\n  --gradient-button-danger-disabled: linear-gradient(\n    180deg,\n    var(--color-red-900) 0%,\n    var(--color-red-950) 100%\n  );\n\n  /* Neutral graph structure; categorical and status colors stay unchanged. */\n  --color-chart-track:   var(--color-neutral-800);\n  --color-chart-cursor:  var(--color-neutral-700);\n  --color-chart-neutral: var(--color-neutral-800);\n  --color-chart-agents-bar:        var(--color-purple-500);\n  --color-chart-agents-bar-active: var(--color-purple-600);\n}\n\n/* Non-default accents (data-accent set by the accent engine) can land on a\n * /950 that glows too loudly against the dark sidebar; halve the NEW badge\n * fill there. Light mode keeps the solid /100 surface. */\n.dark[data-accent] {\n  --color-badge-new-background: color-mix(in srgb, var(--color-accent-950) 50%, transparent);\n}\n\n/* Re-export semantic tokens as Tailwind utilities. The `inline` form means\n * Tailwind reads the *current* computed value of the variable, so light↔dark\n * flips work without rebuild. */\n@theme inline {\n  --color-foreground-full:            var(--color-foreground-full);\n  --color-foreground-icon-primary:    var(--color-foreground-icon-primary);\n  --color-foreground-icon-hover:      var(--color-foreground-icon-hover);\n  --color-foreground-icon-secondary:  var(--color-foreground-icon-secondary);\n  --color-foreground-icon-tertiary:   var(--color-foreground-icon-tertiary);\n  --color-foreground-icon-quaternary: var(--color-foreground-icon-quaternary);\n  --color-foreground-icon-error:      var(--color-foreground-icon-error);\n  --color-foreground-icon-disabled:   var(--color-foreground-icon-disabled);\n  --color-foreground-disabled:        var(--color-foreground-disabled);\n  --color-foreground-disabled-danger: var(--color-foreground-disabled-danger);\n  --color-input-disabled-foreground:  var(--color-input-disabled-foreground);\n  --color-icon-button-disabled-foreground: var(--color-icon-button-disabled-foreground);\n  --color-button-primary-disabled-foreground: var(--color-button-primary-disabled-foreground);\n\n  --color-text-primary:         var(--color-text-primary);\n  --color-text-secondary:       var(--color-text-secondary);\n  --color-text-tertiary:        var(--color-text-tertiary);\n  --color-text-disabled:        var(--color-text-disabled);\n  --color-text-disabled-danger: var(--color-text-disabled-danger);\n  --color-text-placeholder:     var(--color-text-placeholder);\n  --color-text-error-primary:   var(--color-text-error-primary);\n  --color-input-disabled-text:  var(--color-input-disabled-text);\n  --color-text-white:           var(--color-text-white);\n\n  --color-background-full:              var(--color-background-full);\n  --color-background-primary-default:   var(--color-background-primary-default);\n  --color-background-inner-default:     var(--color-background-inner-default);\n  --color-background-primary-hover:     var(--color-background-primary-hover);\n  --color-background-primary-active:    var(--color-background-primary-active);\n  --color-background-primary-disabled:  var(--color-background-primary-disabled);\n  --color-input-disabled-background:    var(--color-input-disabled-background);\n  --color-background-secondary-default: var(--color-background-secondary-default);\n  --color-background-secondary-hover:   var(--color-background-secondary-hover);\n  --color-background-tertiary-default:  var(--color-background-tertiary-default);\n  --color-background-tertiary-hover:    var(--color-background-tertiary-hover);\n  --color-background-tertiary-error:    var(--color-background-tertiary-error);\n  --color-background-recent-hire-role:  var(--color-background-recent-hire-role);\n  --color-avatar-neutral-background:    var(--color-avatar-neutral-background);\n  --color-background-quaternary-default: var(--color-background-quaternary-default);\n  --color-background-quaternary-hover:   var(--color-background-quaternary-hover);\n  --color-background-quaternary-error:   var(--color-background-quaternary-error);\n  --color-file-upload-icon-background:   var(--color-file-upload-icon-background);\n  --color-file-upload-icon-foreground:   var(--color-file-upload-icon-foreground);\n  --color-file-upload-icon-foreground-hover: var(--color-file-upload-icon-foreground-hover);\n\n  --color-border-button-default:   var(--color-border-button-default);\n  --color-border-button-hover:     var(--color-border-button-hover);\n  --color-border-button-active:    var(--color-border-button-active);\n  --color-border-button-white:     var(--color-border-button-white);\n  --color-border-error-default:    var(--color-border-error-default);\n  --color-border-checkbox-default: var(--color-border-checkbox-default);\n  --color-border-checkbox-hover:   var(--color-border-checkbox-hover);\n  --color-border-checkbox-active:  var(--color-border-checkbox-active);\n  --color-border-checkbox-white:   var(--color-border-checkbox-white);\n  --color-border-component-detail-container: var(--color-border-component-detail-container);\n  --color-border-ai-profile-card:             var(--color-border-ai-profile-card);\n  --color-border-table:            var(--color-border-table);\n  --color-border-button-group:     var(--color-border-button-group);\n  --color-border-sidebar-profile-hover: var(--color-border-sidebar-profile-hover);\n  --color-separator-border:        var(--color-separator-border);\n  --color-separator-border-strong: var(--color-separator-border-strong);\n  --color-border-focus-ring:       var(--color-border-focus-ring);\n\n  --color-state-success-text: var(--color-state-success-text);\n  --color-state-success-base: var(--color-state-success-base);\n  --color-control-indicator-background:        var(--color-control-indicator-background);\n  --color-control-indicator-background-subtle: var(--color-control-indicator-background-subtle);\n  --color-switch-off-chip-start:                var(--color-switch-off-chip-start);\n  --color-switch-off-chip-end:                  var(--color-switch-off-chip-end);\n  --color-switch-on-chip-start:                 var(--color-switch-on-chip-start);\n  --color-switch-on-chip-end:                   var(--color-switch-on-chip-end);\n  --color-stat-card-icon-background:            var(--color-stat-card-icon-background);\n  --color-segmented-control-background:          var(--color-segmented-control-background);\n  --color-segmented-control-selected-background: var(--color-segmented-control-selected-background);\n  --color-theme-toggle-sidebar-background:       var(--color-theme-toggle-sidebar-background);\n  --color-theme-toggle-sidebar-selected-background: var(--color-theme-toggle-sidebar-selected-background);\n  --color-ai-chat-composer-add-background:       var(--color-ai-chat-composer-add-background);\n  --color-ai-chat-composer-add-hover-background: var(--color-ai-chat-composer-add-hover-background);\n  --color-agent-progress-ring:                     var(--color-agent-progress-ring);\n  --color-button-ghost-background: transparent;\n  --color-button-ghost-hover: var(--color-background-primary-hover);\n  --color-button-ghost-active: var(--color-background-primary-active);\n  --color-button-ghost-disabled: transparent;\n  --color-button-ghost-foreground: var(--color-text-primary);\n  --color-button-ghost-disabled-foreground: var(--color-text-tertiary);\n  --color-dropdown-item-hover-background:        var(--color-dropdown-item-hover-background);\n  --color-kbd-background:                        var(--color-kbd-background);\n  --color-kbd-foreground:                        var(--color-kbd-foreground);\n  --color-docs-file-chip-background:             var(--color-docs-file-chip-background);\n  --color-docs-file-chip-border:                 var(--color-docs-file-chip-border);\n  --color-docs-file-chip-foreground:             var(--color-docs-file-chip-foreground);\n  --color-docs-command-accent:                    var(--color-docs-command-accent);\n  --color-docs-code-background:                   var(--color-docs-code-background);\n  --color-docs-install-rail:                      var(--color-docs-install-rail);\n  --color-badge-neutral-background: var(--color-badge-neutral-background);\n  --color-team-menu-count-background: var(--color-team-menu-count-background);\n  --color-team-menu-count-foreground: var(--color-team-menu-count-foreground);\n  --color-badge-new-background: var(--color-badge-new-background);\n  --color-badge-new-text:       var(--color-badge-new-text);\n  --color-tab-count-selected-background: var(--color-tab-count-selected-background);\n  --color-pill-tab-blue-selected-background: var(--color-pill-tab-blue-selected-background);\n  --color-pill-tab-blue-hover-background: var(--color-pill-tab-blue-hover-background);\n  --color-notification-information-background: var(--color-notification-information-background);\n  --color-notification-information-foreground: var(--color-notification-information-foreground);\n  --color-notification-success-background:     var(--color-notification-success-background);\n  --color-notification-success-foreground:     var(--color-notification-success-foreground);\n  --color-notification-error-background:       var(--color-notification-error-background);\n  --color-notification-error-foreground:       var(--color-notification-error-foreground);\n  --color-notification-center-background:      var(--color-notification-center-background);\n  --color-status-lime-background:   var(--color-status-lime-background);\n  --color-status-lime-text:         var(--color-status-lime-text);\n  --color-status-yellow-background: var(--color-status-yellow-background);\n  --color-status-yellow-text:       var(--color-status-yellow-text);\n  --color-status-rose-background:   var(--color-status-rose-background);\n  --color-status-rose-text:         var(--color-status-rose-text);\n  --color-status-cyan-background:   var(--color-status-cyan-background);\n  --color-status-cyan-text:         var(--color-status-cyan-text);\n  --color-status-blue-background:   var(--color-status-blue-background);\n  --color-status-blue-text:         var(--color-status-blue-text);\n  --color-status-purple-background: var(--color-status-purple-background);\n  --color-status-purple-text:       var(--color-status-purple-text);\n  --color-status-dot-green-halo:    var(--color-status-dot-green-halo);\n  --color-status-dot-yellow-halo:   var(--color-status-dot-yellow-halo);\n  --color-status-dot-indigo-halo:   var(--color-status-dot-indigo-halo);\n  --color-date-range-background:      var(--color-date-range-background);\n  --color-date-range-edge-background: var(--color-date-range-edge-background);\n  --color-calendar-event-blue-background:    var(--color-calendar-event-blue-background);\n  --color-calendar-event-blue-title:         var(--color-calendar-event-blue-title);\n  --color-calendar-event-blue-time:          var(--color-calendar-event-blue-time);\n  --color-calendar-event-pink-background:    var(--color-calendar-event-pink-background);\n  --color-calendar-event-pink-title:         var(--color-calendar-event-pink-title);\n  --color-calendar-event-pink-time:          var(--color-calendar-event-pink-time);\n  --color-calendar-event-purple-background:  var(--color-calendar-event-purple-background);\n  --color-calendar-event-purple-title:       var(--color-calendar-event-purple-title);\n  --color-calendar-event-purple-time:        var(--color-calendar-event-purple-time);\n  --color-calendar-event-lime-background:    var(--color-calendar-event-lime-background);\n  --color-calendar-event-lime-title:         var(--color-calendar-event-lime-title);\n  --color-calendar-event-lime-time:          var(--color-calendar-event-lime-time);\n  --color-calendar-event-emerald-background: var(--color-calendar-event-emerald-background);\n  --color-calendar-event-emerald-title:      var(--color-calendar-event-emerald-title);\n  --color-calendar-event-emerald-time:       var(--color-calendar-event-emerald-time);\n\n  --color-text-error-placeholder: var(--color-text-error-placeholder);\n\n  --color-chart-track:    var(--color-chart-track);\n  --color-chart-cursor:   var(--color-chart-cursor);\n  --color-chart-neutral:  var(--color-chart-neutral);\n  --color-chart-1:        var(--color-chart-1);\n  --color-chart-1-active: var(--color-chart-1-active);\n  --color-chart-2:        var(--color-chart-2);\n  --color-chart-2-active: var(--color-chart-2-active);\n  --color-chart-3:        var(--color-chart-3);\n  --color-chart-3-active: var(--color-chart-3-active);\n  --color-chart-4:        var(--color-chart-4);\n  --color-chart-4-active: var(--color-chart-4-active);\n  --color-chart-5:        var(--color-chart-5);\n  --color-chart-5-active: var(--color-chart-5-active);\n  --color-chart-6:        var(--color-chart-6);\n  --color-chart-6-active: var(--color-chart-6-active);\n  --color-chart-7:        var(--color-chart-7);\n  --color-chart-7-active: var(--color-chart-7-active);\n  --color-chart-8:        var(--color-chart-8);\n  --color-chart-8-active: var(--color-chart-8-active);\n  --color-chart-9:        var(--color-chart-9);\n  --color-chart-9-active: var(--color-chart-9-active);\n  --color-chart-agents-bar:        var(--color-chart-agents-bar);\n  --color-chart-agents-bar-active: var(--color-chart-agents-bar-active);\n}\n\n/* ---------------------------------------------------------------------------\n * Component utilities — Buttons\n *\n * Each variant collapses the four interactive states (default / hover / active\n * / disabled) into a single class. Use them on the component:\n *\n *   <button class=\"bg-button-primary\">…</button>\n *   <button class=\"bg-button-danger\">…</button>\n *\n * Smooth default→hover transition trick:\n *   CSS can't interpolate `background-image`, so swapping gradients on :hover\n *   would snap. Instead we keep the *default* gradient on the element and\n *   layer the *hover* gradient on a `::before` pseudo-element whose opacity\n *   fades 0→1 over `--button-transition-ms`. Active/disabled gradients still\n *   swap instantly (we hide the pseudo to reveal them).\n *\n * Stacking: `isolation: isolate` keeps the pseudo behind the button's text\n * and icons (z-index -1) while staying above the element's own background.\n * `border-radius: inherit` + `overflow: hidden` keeps it within the rounded\n * corners.\n * --------------------------------------------------------------------------- */\n@theme {\n  --button-transition-ms: 150ms;\n  --input-transition-ms:  150ms;\n}\n\n/* Keep color feedback quick while the physical press motion remains soft.\n * The transform uses a shorter duration on press and the slower duration only\n * when returning to rest, so hover styles never inherit the 700ms timing. */\n@utility button-press-motion {\n  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;\n  @media (prefers-reduced-motion: reduce) { transition: none; }\n}\n\n@utility bg-button-primary {\n  background: var(--color-text-primary);\n  color: var(--color-background-primary-default);\n  &:hover:not(:disabled):not([aria-disabled=\"true\"]) { opacity: .88; }\n  &:active:not(:disabled):not([aria-disabled=\"true\"]) { opacity: .78; }\n  &:disabled, &[aria-disabled=\"true\"] { background: var(--color-background-primary-disabled); color: var(--color-text-tertiary); }\n}\n\n@utility bg-button-danger {\n  position: relative;\n  isolation: isolate;\n  background-image: var(--gradient-button-danger-default);\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: -1;\n    pointer-events: none;\n    border-radius: inherit;\n    background-image: var(--gradient-button-danger-hover);\n    opacity: 0;\n    transition: opacity var(--button-transition-ms) ease;\n  }\n  &:hover:not(:disabled):not([aria-disabled=\"true\"])::before {\n    opacity: 1;\n  }\n  &:active:not(:disabled):not([aria-disabled=\"true\"]) {\n    background-image: var(--gradient-button-danger-active);\n  }\n  &:active:not(:disabled):not([aria-disabled=\"true\"])::before {\n    opacity: 0;\n  }\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    background-image: var(--gradient-button-danger-disabled);\n  }\n  &:disabled::before,\n  &[aria-disabled=\"true\"]::before {\n    display: none;\n  }\n}\n"
    },
    {
      "path": "components/boardui/styles/typography.css",
      "target": "@components/boardui/styles/typography.css",
      "type": "registry:file",
      "content": "/* ---------------------------------------------------------------------------\n * BoardUI typography\n *\n * Type ramp from Figma → text styles. Each style registers a Tailwind v4\n * text utility — `text-{name}` applies font-size + line-height + letter-spacing\n * + font-weight in one go.\n *\n * Family: Inter for the whole ramp. (The Figma export marks Large Title /\n * Regular as \"Inter Display\"; we map everything to Inter for consistency since\n * Inter ships a variable optical-size axis. Flag if a true Inter Display load\n * is needed.)\n *\n * Weight mapping (mirrors Figma variables — font/weight/*):\n *   Regular   = 400\n *   Medium    = 500\n *   Semibold  = 600  (Figma variable font/weight/semibold = 600)\n *   Bold      = 700\n *\n * Naming: `<family>-<weight>` in lowercase kebab — e.g. `text-body-medium`,\n * `text-title-1-semibold`, `text-caption-2-bold`.\n * --------------------------------------------------------------------------- */\n\n@theme {\n  /* ===== Large Title — 64 / 80 ============================================= */\n  --text-large-title-regular: 4rem;\n  --text-large-title-regular--line-height: 5rem;\n  --text-large-title-regular--letter-spacing: 0;\n  --text-large-title-regular--font-weight: 400;\n  --text-large-title-medium: 4rem;\n  --text-large-title-medium--line-height: 5rem;\n  --text-large-title-medium--letter-spacing: 0;\n  --text-large-title-medium--font-weight: 500;\n  --text-large-title-semibold: 4rem;\n  --text-large-title-semibold--line-height: 5rem;\n  --text-large-title-semibold--letter-spacing: 0;\n  --text-large-title-semibold--font-weight: 600;\n  --text-large-title-bold: 4rem;\n  --text-large-title-bold--line-height: 5rem;\n  --text-large-title-bold--letter-spacing: 0;\n  --text-large-title-bold--font-weight: 700;\n\n  /* ===== Display 1 — 56 / 72 =============================================== */\n  --text-display-1-regular: 3.5rem;\n  --text-display-1-regular--line-height: 4.5rem;\n  --text-display-1-regular--letter-spacing: 0;\n  --text-display-1-regular--font-weight: 400;\n  --text-display-1-medium: 3.5rem;\n  --text-display-1-medium--line-height: 4.5rem;\n  --text-display-1-medium--letter-spacing: 0;\n  --text-display-1-medium--font-weight: 500;\n  --text-display-1-semibold: 3.5rem;\n  --text-display-1-semibold--line-height: 4.5rem;\n  --text-display-1-semibold--letter-spacing: 0;\n  --text-display-1-semibold--font-weight: 600;\n  --text-display-1-bold: 3.5rem;\n  --text-display-1-bold--line-height: 4.5rem;\n  --text-display-1-bold--letter-spacing: 0;\n  --text-display-1-bold--font-weight: 700;\n\n  /* ===== Display 2 — 48 / 64 =============================================== */\n  --text-display-2-regular: 3rem;\n  --text-display-2-regular--line-height: 4rem;\n  --text-display-2-regular--letter-spacing: 0;\n  --text-display-2-regular--font-weight: 400;\n  --text-display-2-medium: 3rem;\n  --text-display-2-medium--line-height: 4rem;\n  --text-display-2-medium--letter-spacing: 0;\n  --text-display-2-medium--font-weight: 500;\n  --text-display-2-semibold: 3rem;\n  --text-display-2-semibold--line-height: 4rem;\n  --text-display-2-semibold--letter-spacing: 0;\n  --text-display-2-semibold--font-weight: 600;\n  --text-display-2-bold: 3rem;\n  --text-display-2-bold--line-height: 4rem;\n  --text-display-2-bold--letter-spacing: 0;\n  --text-display-2-bold--font-weight: 700;\n\n  /* ===== Display 3 — 40 / 54 =============================================== */\n  --text-display-3-regular: 2.5rem;\n  --text-display-3-regular--line-height: 3.375rem;\n  --text-display-3-regular--letter-spacing: 0;\n  --text-display-3-regular--font-weight: 400;\n  --text-display-3-medium: 2.5rem;\n  --text-display-3-medium--line-height: 3.375rem;\n  --text-display-3-medium--letter-spacing: 0;\n  --text-display-3-medium--font-weight: 500;\n  --text-display-3-semibold: 2.5rem;\n  --text-display-3-semibold--line-height: 3.375rem;\n  --text-display-3-semibold--letter-spacing: 0;\n  --text-display-3-semibold--font-weight: 600;\n  --text-display-3-bold: 2.5rem;\n  --text-display-3-bold--line-height: 3.375rem;\n  --text-display-3-bold--letter-spacing: 0;\n  --text-display-3-bold--font-weight: 700;\n\n  /* ===== Display 4 — 32 / 44 =============================================== */\n  --text-display-4-regular: 2rem;\n  --text-display-4-regular--line-height: 2.75rem;\n  --text-display-4-regular--letter-spacing: 0;\n  --text-display-4-regular--font-weight: 400;\n  --text-display-4-medium: 2rem;\n  --text-display-4-medium--line-height: 2.75rem;\n  --text-display-4-medium--letter-spacing: 0;\n  --text-display-4-medium--font-weight: 500;\n  --text-display-4-semibold: 2rem;\n  --text-display-4-semibold--line-height: 2.75rem;\n  --text-display-4-semibold--letter-spacing: 0;\n  --text-display-4-semibold--font-weight: 600;\n  --text-display-4-bold: 2rem;\n  --text-display-4-bold--line-height: 2.75rem;\n  --text-display-4-bold--letter-spacing: 0;\n  --text-display-4-bold--font-weight: 700;\n\n  /* ===== Title 1 — 24 / 34 ================================================= */\n  --text-title-1-regular: 1.5rem;\n  --text-title-1-regular--line-height: 2.125rem;\n  --text-title-1-regular--letter-spacing: 0;\n  --text-title-1-regular--font-weight: 400;\n  --text-title-1-medium: 1.5rem;\n  --text-title-1-medium--line-height: 2.125rem;\n  --text-title-1-medium--letter-spacing: 0;\n  --text-title-1-medium--font-weight: 500;\n  --text-title-1-semibold: 1.5rem;\n  --text-title-1-semibold--line-height: 2.125rem;\n  --text-title-1-semibold--letter-spacing: 0;\n  --text-title-1-semibold--font-weight: 600;\n  --text-title-1-bold: 1.5rem;\n  --text-title-1-bold--line-height: 2.125rem;\n  --text-title-1-bold--letter-spacing: 0;\n  --text-title-1-bold--font-weight: 700;\n\n  /* ===== Title 2 — 20 / 26 ================================================= */\n  --text-title-2-regular: 1.25rem;\n  --text-title-2-regular--line-height: 1.625rem;\n  --text-title-2-regular--letter-spacing: 0;\n  --text-title-2-regular--font-weight: 400;\n  --text-title-2-medium: 1.25rem;\n  --text-title-2-medium--line-height: 1.625rem;\n  --text-title-2-medium--letter-spacing: 0;\n  --text-title-2-medium--font-weight: 500;\n  --text-title-2-semibold: 1.25rem;\n  --text-title-2-semibold--line-height: 1.625rem;\n  --text-title-2-semibold--letter-spacing: 0;\n  --text-title-2-semibold--font-weight: 600;\n  --text-title-2-bold: 1.25rem;\n  --text-title-2-bold--line-height: 1.625rem;\n  --text-title-2-bold--letter-spacing: 0;\n  --text-title-2-bold--font-weight: 700;\n\n  /* ===== Title 3 — 18 / 24-26 ============================================== */\n  --text-title-3-regular: 1.125rem;\n  --text-title-3-regular--line-height: 1.5rem;     /* 24 per Figma */\n  --text-title-3-regular--letter-spacing: 0;\n  --text-title-3-regular--font-weight: 400;\n  --text-title-3-medium: 1.125rem;\n  --text-title-3-medium--line-height: 1.625rem;    /* 26 per Figma */\n  --text-title-3-medium--letter-spacing: 0;\n  --text-title-3-medium--font-weight: 500;\n  --text-title-3-semibold: 1.125rem;\n  --text-title-3-semibold--line-height: 1.625rem;\n  --text-title-3-semibold--letter-spacing: 0;\n  --text-title-3-semibold--font-weight: 600;\n  --text-title-3-bold: 1.125rem;\n  --text-title-3-bold--line-height: 1.625rem;\n  --text-title-3-bold--letter-spacing: 0;\n  --text-title-3-bold--font-weight: 700;\n\n  /* ===== Headline — 16 / 22 ================================================ */\n  --text-headline-regular: 1rem;\n  --text-headline-regular--line-height: 1.375rem;\n  --text-headline-regular--letter-spacing: 0;\n  --text-headline-regular--font-weight: 400;\n  --text-headline-medium: 1rem;\n  --text-headline-medium--line-height: 1.375rem;\n  --text-headline-medium--letter-spacing: 0;\n  --text-headline-medium--font-weight: 500;\n  --text-headline-semibold: 1rem;\n  --text-headline-semibold--line-height: 1.375rem;\n  --text-headline-semibold--letter-spacing: 0;\n  --text-headline-semibold--font-weight: 600;\n  --text-headline-bold: 1rem;\n  --text-headline-bold--line-height: 1.375rem;\n  --text-headline-bold--letter-spacing: 0;\n  --text-headline-bold--font-weight: 700;\n\n  /* ===== Body — 14 / 20 ==================================================== */\n  --text-body-regular: 0.875rem;\n  --text-body-regular--line-height: 1.25rem;\n  --text-body-regular--letter-spacing: 0;\n  --text-body-regular--font-weight: 400;\n  --text-body-medium: 0.875rem;\n  --text-body-medium--line-height: 1.25rem;\n  --text-body-medium--letter-spacing: 0;\n  --text-body-medium--font-weight: 500;\n  --text-body-semibold: 0.875rem;\n  --text-body-semibold--line-height: 1.25rem;\n  --text-body-semibold--letter-spacing: 0;\n  --text-body-semibold--font-weight: 600;\n  --text-body-bold: 0.875rem;\n  --text-body-bold--line-height: 1.25rem;\n  --text-body-bold--letter-spacing: 0;\n  --text-body-bold--font-weight: 700;\n\n  /* ===== Body 2 — 13 / 18 ================================================== */\n  --text-body-2-regular: 0.8125rem;\n  --text-body-2-regular--line-height: 1.125rem;\n  --text-body-2-regular--letter-spacing: 0;\n  --text-body-2-regular--font-weight: 400;\n  --text-body-2-medium: 0.8125rem;\n  --text-body-2-medium--line-height: 1.125rem;\n  --text-body-2-medium--letter-spacing: 0;\n  --text-body-2-medium--font-weight: 500;\n  --text-body-2-semibold: 0.8125rem;\n  --text-body-2-semibold--line-height: 1.125rem;\n  --text-body-2-semibold--letter-spacing: 0;\n  --text-body-2-semibold--font-weight: 600;\n  --text-body-2-bold: 0.8125rem;\n  --text-body-2-bold--line-height: 1.125rem;\n  --text-body-2-bold--letter-spacing: 0;\n  --text-body-2-bold--font-weight: 700;\n\n  /* ===== Caption 1 — 12 / 16 (tracking 0.15) =============================== */\n  --text-caption-1-regular: 0.75rem;\n  --text-caption-1-regular--line-height: 1rem;\n  --text-caption-1-regular--letter-spacing: 0.15px;\n  --text-caption-1-regular--font-weight: 400;\n  --text-caption-1-medium: 0.75rem;\n  --text-caption-1-medium--line-height: 1rem;\n  --text-caption-1-medium--letter-spacing: 0.15px;\n  --text-caption-1-medium--font-weight: 500;\n  --text-caption-1-semibold: 0.75rem;\n  --text-caption-1-semibold--line-height: 1rem;\n  --text-caption-1-semibold--letter-spacing: 0.15px;\n  --text-caption-1-semibold--font-weight: 600;\n  --text-caption-1-bold: 0.75rem;\n  --text-caption-1-bold--line-height: 1rem;\n  --text-caption-1-bold--letter-spacing: 0.15px;\n  --text-caption-1-bold--font-weight: 700;\n\n  /* ===== Caption 2 — 11 / 15 (tracking 0.2) ================================ */\n  --text-caption-2-regular: 0.6875rem;\n  --text-caption-2-regular--line-height: 0.9375rem;\n  --text-caption-2-regular--letter-spacing: 0.2px;\n  --text-caption-2-regular--font-weight: 400;\n  --text-caption-2-medium: 0.6875rem;\n  --text-caption-2-medium--line-height: 0.9375rem;\n  --text-caption-2-medium--letter-spacing: 0.2px;\n  --text-caption-2-medium--font-weight: 500;\n  --text-caption-2-semibold: 0.6875rem;\n  --text-caption-2-semibold--line-height: 0.9375rem;\n  --text-caption-2-semibold--letter-spacing: 0.2px;\n  --text-caption-2-semibold--font-weight: 600;\n  --text-caption-2-bold: 0.6875rem;\n  --text-caption-2-bold--line-height: 0.9375rem;\n  --text-caption-2-bold--letter-spacing: 0.2px;\n  --text-caption-2-bold--font-weight: 700;\n}\n"
    },
    {
      "path": "components/boardui/SOURCE.json",
      "target": "@components/boardui/SOURCE.json",
      "type": "registry:file",
      "content": "{\n  \"source\": \"https://github.com/BoardUI/boardui\",\n  \"revision\": \"3e76e282614b147a34b9b2a510e31b97d58a3909\",\n  \"license\": \"MIT\",\n  \"scope\": [\n    \"components/application/agent-chat\",\n    \"components/application/agent-thinking\",\n    \"components/application/composer-loader\",\n    \"components/base\",\n    \"components/foundations\",\n    \"styles\",\n    \"utils\"\n  ],\n  \"adaptations\": [\n    \"Repository import paths point to components/boardui\",\n    \"Neutral primary and ghost actions, restrained feedback, and readable agent surface tokens\",\n    \"Focusable native actions support React Aria tooltip composition\",\n    \"Icon-only child SVG fallback preserves explicit leadingIcon precedence\",\n    \"The Agent Chat starter always uses the bundled local demo transport; API probing, provider keys, dashboard navigation, and Pro promotion are omitted\",\n    \"Agent Chat imports resolve through components/boardui and its account logout action closes the local menu instead of navigating to a starter-only route\",\n    \"The gallery chat uses a responsive history drawer below xl; selecting a thread, clicking outside, or pressing Escape closes it\",\n    \"The prior pinned base components are unchanged at the current revision\"\n  ]\n}\n"
    },
    {
      "path": "components/agents-ui/LICENSE.md",
      "target": "@components/agents-ui/LICENSE.md",
      "type": "registry:file",
      "content": "Non-Commercial License\n======================\n\nCopyright (c) 2025 Abhishek Gahlot\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to use, copy, modify, merge, publish, and distribute the Software for **non-commercial purposes only**, subject to the following conditions:\n\n1. Commercial Use Prohibited\n   --------------------------\n   The Software may not be used, in whole or in part, for any commercial purpose without prior written permission. Commercial use includes (but is not limited to) selling access to the Software, incorporating the Software into products or services offered for a fee, or using the Software within a commercial SaaS product.\n\n2. Attribution\n   -----------\n   The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n3. Warranty Disclaimer\n   --------------------\n   THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\nCommercial Licensing\n--------------------\n\nFor commercial licensing, partnership discussions, or private support, please contact:\n\n**Email:** me@abhishek.it\n"
    },
    {
      "path": "components/beautiful-ui/SOURCE.json",
      "target": "@components/beautiful-ui/SOURCE.json",
      "type": "registry:file",
      "content": "{\n  \"name\": \"Beautiful UI\",\n  \"repository\": \"https://github.com/slev12397/beautiful-ui\",\n  \"revision\": \"ff0f74d62d8be9d89bcb735b3632e31a6ccf88dc\",\n  \"license\": \"MIT\",\n  \"copyright\": \"Copyright (c) 2026 Shane Levine\",\n  \"families\": 21,\n  \"adaptation\": \"Original primitives and internal building blocks retain their APIs and interactions. The gallery uses Agents Kit fixtures; Beautiful UI theme utilities compile through the main Tailwind stylesheet. Shared semantic colors, readable tertiary text, neutral focus, and Inter/JetBrains Mono typography follow the Agents Kit design contract. Proprietary Iconists icons use Lucide equivalents. Existing root adapters remain available. Selection Actions uses a contained two-row toolbar on narrow hosts, while retaining the desktop floating toolbar.\"\n}\n"
    }
  ],
  "categories": [
    "Agents Kit"
  ]
}