{
  "name": "domphy",
  "version": "0.21.0",
  "generated": "auto",
  "rules": "https://domphy.com/llms.txt",
  "tones": "https://domphy.com/tones.json",
  "packages": [
    {
      "name": "@domphy/app",
      "version": "0.18.3",
      "description": "Domphy App - a port of the Next.js App Router feature set for Domphy: routing, nested layouts, navigation, data loading, metadata, middleware, SSR and API routes",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core"]
    },
    {
      "name": "@domphy/blocks",
      "version": "0.2.0",
      "description": "Large composed UI blocks for Domphy — dashboards, auth pages, sidebars, chart recipes, and marketing/effect components, independently reimplemented (clean-room) from the public behavior of shadcn/ui and Magic UI.",
      "subpaths": [".", "./shadcn", "./magicui"],
      "peerDependencies": [
        "@domphy/chart",
        "@domphy/core",
        "@domphy/form",
        "@domphy/table",
        "@domphy/theme",
        "@domphy/ui"
      ]
    },
    {
      "name": "@domphy/chart",
      "version": "0.3.0",
      "description": "ECharts-grade chart library for Domphy — WebGL series + SVG overlays, tone/density cascade.",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core", "@domphy/theme"]
    },
    {
      "name": "@domphy/core",
      "version": "0.21.0",
      "description": "Domphy core runtime — patch-based, framework-agnostic UI with plain-object element trees, listener-based reactivity, and SSR + hydration (no JSX, no virtual DOM)",
      "subpaths": ["."],
      "peerDependencies": []
    },
    {
      "name": "create-domphy",
      "version": "0.18.7",
      "description": "Scaffold a runnable Domphy starter project (npm create domphy@latest)",
      "subpaths": ["."],
      "peerDependencies": []
    },
    {
      "name": "@domphy/dnd",
      "version": "0.18.5",
      "description": "Domphy Drag & Drop - reactive adapter for the framework-agnostic @formkit/drag-and-drop engine",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core"]
    },
    {
      "name": "@domphy/doctor",
      "version": "0.19.0",
      "description": "Domphy Doctor - static analyzer that flags non-idiomatic Domphy element trees (AI self-correction)",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core", "htmlhint", "stylelint", "tsx"]
    },
    {
      "name": "@domphy/editor",
      "version": "0.2.2",
      "description": "Domphy Editor - headless rich-text editor with a Tiptap-compatible API, self-contained engine (no ProseMirror), Domphy adapter with bubble menu",
      "subpaths": [".", "./domphy"],
      "peerDependencies": ["@domphy/core", "@domphy/theme"]
    },
    {
      "name": "@domphy/floating",
      "version": "0.18.2",
      "description": "Domphy Floating - anchor positioning (tooltips, popovers, dropdowns), a 1-1 vendor of floating-ui (dom + core + utils), zero dependencies",
      "subpaths": ["."],
      "peerDependencies": []
    },
    {
      "name": "@domphy/form",
      "version": "0.18.2",
      "description": "Domphy Form - headless form state, validation and submission, a 1-1 port of @tanstack/form-core",
      "subpaths": [".", "./domphy"],
      "peerDependencies": ["@domphy/core"]
    },
    {
      "name": "@domphy/i18n",
      "version": "0.19.3",
      "description": "Domphy i18n — generic i18next wrapper with reactive Domphy integration (globalThis dedup, typed keys, t(listener, key) overload)",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core"]
    },
    {
      "name": "@domphy/markdown",
      "version": "0.20.0",
      "description": "Domphy Markdown - parse Markdown (remark/MDAST) into Domphy element trees for SSR with @domphy/core",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core"]
    },
    {
      "name": "@domphy/mcp",
      "version": "0.19.3",
      "description": "Domphy MCP server - exposes patches, packages, rules, and the doctor to MCP-capable AI agents",
      "subpaths": [".", "./tools"],
      "peerDependencies": ["@domphy/core"]
    },
    {
      "name": "@domphy/mermaid",
      "version": "0.19.0",
      "description": "Domphy Mermaid - build-time (SSG) and client-side Mermaid diagram rendering, with markdown tree integration for @domphy/markdown",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core", "mermaid"]
    },
    {
      "name": "@domphy/palette",
      "version": "0.20.0",
      "description": "Domphy Palette - color-science toolkit: generate, measure, and validate palette quality with CIELAB metrics, a port of chromametry",
      "subpaths": ["."],
      "peerDependencies": []
    },
    {
      "name": "@domphy/press",
      "version": "0.22.0",
      "description": "Domphy Press — VitePress-baseline static doc site framework built on @domphy/app + @domphy/markdown",
      "subpaths": [".", "./browser"],
      "peerDependencies": [
        "@domphy/app",
        "@domphy/core",
        "@domphy/markdown",
        "@domphy/theme",
        "@domphy/ui"
      ]
    },
    {
      "name": "@domphy/query",
      "version": "0.18.2",
      "description": "Domphy Query - async state management, a 1-1 port of @tanstack/query-core",
      "subpaths": [".", "./domphy"],
      "peerDependencies": ["@domphy/core"]
    },
    {
      "name": "@domphy/router",
      "version": "0.18.2",
      "description": "Domphy Router - type-safe routing, a 1-1 port of @tanstack/router-core",
      "subpaths": [
        ".",
        "./ssr/server",
        "./ssr/client",
        "./isServer",
        "./scroll-restoration-script",
        "./package.json"
      ],
      "peerDependencies": []
    },
    {
      "name": "@domphy/table",
      "version": "0.19.1",
      "description": "Domphy Table - headless table logic, a 1-1 port of @tanstack/table-core",
      "subpaths": [".", "./domphy"],
      "peerDependencies": ["@domphy/core"]
    },
    {
      "name": "@domphy/theme",
      "version": "0.21.0",
      "description": "Domphy design system — reactive color/spacing/size tokens, tone ramps, and theme generation from a single base color per role",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core"]
    },
    {
      "name": "@domphy/three",
      "version": "0.3.0",
      "description": "Declarative three.js renderer for Domphy — a react-three-fiber-grade scene graph on Domphy reactivity.",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core", "three"]
    },
    {
      "name": "@domphy/ui",
      "version": "0.21.0",
      "description": "98 dependency-free UI patches for the Domphy runtime — buttons, dialogs, forms, overlays, motion",
      "subpaths": ["."],
      "peerDependencies": ["@domphy/core", "@domphy/theme"]
    },
    {
      "name": "@domphy/virtual",
      "version": "0.18.2",
      "description": "Domphy Virtual - headless list/grid virtualization, a 1-1 port of @tanstack/virtual-core",
      "subpaths": [".", "./domphy"],
      "peerDependencies": ["@domphy/core"]
    }
  ],
  "patches": [
    {
      "name": "abbreviation",
      "hostTag": "abbr",
      "signature": "abbreviation(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Base text/decoration color tone. Optional `ValueOrState<ThemeColor>`, default \"neutral\"."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Hover color tone. Optional `ValueOrState<ThemeColor>`, default \"primary\"."
        }
      ],
      "doc": "Styles an abbreviation/acronym with a dotted underline and a \"help\" cursor, shifting to the accent color on hover. Apply to an `<abbr>` element.",
      "example": "{ abbr: \"HTML\", title: \"HyperText Markup Language\", $: [abbreviation({ accentColor: \"primary\" })] }",
      "source": "packages/ui/src/patches/abbreviation.ts"
    },
    {
      "name": "accordion",
      "hostTag": null,
      "signature": "accordion(props: { type?: \"single\" | \"multiple\"; color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "type",
          "type": "\"single\" | \"multiple\"",
          "optional": true,
          "doc": "`\"single\"` (default) or `\"multiple\"`. Single mode auto-closes siblings."
        },
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for borders and backgrounds. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Accent color for focus rings on summary. Defaults to `\"primary\"`."
        }
      ],
      "doc": "Container patch that groups `<details>` elements into a bordered accordion. In `type: \"single\"` mode (default), opening one item closes all siblings.",
      "example": "{ div: [ { details: [{ summary: \"Section A\" }, { p: \"Content A\" }], $: [details()] }, { details: [{ summary: \"Section B\" }, { p: \"Content B\" }], $: [details()] }, ], $: [accordion()] }",
      "source": "packages/ui/src/patches/accordion.ts"
    },
    {
      "name": "alert",
      "hostTag": null,
      "signature": "alert(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Surface/accent color tone. Optional `ValueOrState<ThemeColor>`, default \"primary\"."
        }
      ],
      "doc": "A semantic alert surface block with a colored inset bar, padding, and `role=\"alert\"`. Typically applied to a `<div>` (any block container).",
      "example": "{ div: \"Saved successfully\", $: [alert({ color: \"success\" })] }",
      "source": "packages/ui/src/patches/alert.ts"
    },
    {
      "name": "avatar",
      "hostTag": null,
      "signature": "avatar(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Background/foreground color tone. Optional `ValueOrState<ThemeColor>`, default \"primary\"."
        }
      ],
      "doc": "A circular avatar container that centers initials/text and cover-fits any child `<img>`. Typically applied to an inline-flex container such as a `<span>`.",
      "example": "{ span: \"JD\", $: [avatar({ color: \"primary\" })] }",
      "source": "packages/ui/src/patches/avatar.ts"
    },
    {
      "name": "badge",
      "hostTag": null,
      "signature": "badge(props: { color?: ValueOrState<ThemeColor>; label?: ValueOrState<string | number>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Badge color tone. Optional `ValueOrState<ThemeColor>`, default \"danger\"."
        },
        {
          "name": "label",
          "type": "ValueOrState<string | number>",
          "optional": true,
          "doc": "Text/number shown in the badge. Optional `ValueOrState<string | number>`, default 999."
        }
      ],
      "doc": "Renders a small count/label bubble pinned to the top-right corner of its host (via a `::after` pseudo-element). Typically applied to an inline container such as a `<span>` wrapping an icon or element.",
      "example": "{ span: \"🔔\", $: [badge({ label: 3, color: \"danger\" })] }",
      "source": "packages/ui/src/patches/badge.ts"
    },
    {
      "name": "blockquote",
      "hostTag": "blockquote",
      "signature": "blockquote(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Surface/bar color tone. Optional `ValueOrState<ThemeColor>`, default \"neutral\"."
        }
      ],
      "doc": "Styles a quotation block with a colored inset side bar, padded surface, and shifted tone. Apply to a `<blockquote>` element.",
      "example": "{ blockquote: \"Design is how it works.\", $: [blockquote({ color: \"primary\" })] }",
      "source": "packages/ui/src/patches/blockquote.ts"
    },
    {
      "name": "breadcrumb",
      "hostTag": "nav",
      "signature": "breadcrumb(props: { color?: ValueOrState<ThemeColor>; separator?: string } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Color tone for links/separators. Optional `ValueOrState<ThemeColor>`, default \"neutral\"."
        },
        {
          "name": "separator",
          "type": "string",
          "optional": true,
          "doc": "String inserted between items via `::after`. Optional `string`, default \"/\"."
        }
      ],
      "doc": "A horizontal breadcrumb navigation that lays out its children with a separator between items and highlights the `[aria-current=page]` item. Apply to a `<nav>` element.",
      "example": "{ nav: null, $: [breadcrumb({ separator: \"›\" })] }",
      "source": "packages/ui/src/patches/breadcrumb.ts"
    },
    {
      "name": "breadcrumbEllipsis",
      "hostTag": "button",
      "signature": "breadcrumbEllipsis(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Color tone for the trigger. Optional `ValueOrState<ThemeColor>`, default \"neutral\"."
        }
      ],
      "doc": "An ellipsis trigger button for collapsed breadcrumb items, with hover and focus-visible states. Apply to a `<button>` element.",
      "example": "{ button: \"…\", $: [breadcrumbEllipsis({ color: \"neutral\" })] }",
      "source": "packages/ui/src/patches/breadcrumbEllipsis.ts"
    },
    {
      "name": "button",
      "hostTag": "button",
      "signature": "button(props: { color?: ValueOrState<ThemeColor>; variant?: ButtonVariant; size?: ButtonSize; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Button color tone. Optional `ValueOrState<ThemeColor>`, default \"primary\"."
        },
        {
          "name": "variant",
          "type": "ButtonVariant",
          "optional": true,
          "doc": "Visual style: `\"outline\"` (tinted background + outline, default, backward compatible), `\"solid\"` (filled background, readable contrast text), or `\"ghost\"` (no background/border — delegates to `buttonGhost()` so the two stay visually identical)."
        },
        {
          "name": "size",
          "type": "ButtonSize",
          "optional": true,
          "doc": "Button size preset. Optional `\"small\" | \"medium\" | \"large\"`, defaults to `\"medium\"`."
        }
      ],
      "doc": "A themed button control with density-aware padding/radius and hover, pressed (`:active` ±2), focus-visible, `[disabled]`, and `[aria-busy=true]` states. Apply to a `<button>` element.",
      "example": "{ button: \"Save\", $: [button({ color: \"primary\" })] }",
      "source": "packages/ui/src/patches/button.ts"
    },
    {
      "name": "buttonGhost",
      "hostTag": "button",
      "signature": "buttonGhost(props: { color?: ValueOrState<ThemeColor>; size?: ButtonSize } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Text color tone. Optional `ValueOrState<ThemeColor>`, defaults to `\"neutral\"`."
        },
        {
          "name": "size",
          "type": "ButtonSize",
          "optional": true,
          "doc": "Button size preset. Optional `\"small\" | \"medium\" | \"large\"`, defaults to `\"medium\"`."
        }
      ],
      "doc": "A transparent button with no border or background — suitable for icon actions, inline controls, and delete/close triggers. Apply to a `<button>` element.",
      "example": "{ button: \"×\", $: [buttonGhost()] }",
      "source": "packages/ui/src/patches/buttonGhost.ts"
    },
    {
      "name": "buttonSwitch",
      "hostTag": "button",
      "signature": "buttonSwitch(props: { checked?: ValueOrState<boolean>; accentColor?: ValueOrState<ThemeColor>; color?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "checked",
          "type": "ValueOrState<boolean>",
          "optional": true,
          "doc": "Toggle state. Optional `ValueOrState<boolean>`, default false."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Color tone when checked (on). Optional `ValueOrState<ThemeColor>`, default \"primary\"."
        },
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Color tone when unchecked (off track). Optional `ValueOrState<ThemeColor>`, default \"neutral\"."
        }
      ],
      "doc": "A pill-shaped toggle switch with `role=\"switch\"`; clicking flips the bound `checked` state and slides the thumb. Apply to a `<button>` element.",
      "example": "{ button: { span: null }, $: [buttonSwitch({ checked: true })] }",
      "source": "packages/ui/src/patches/buttonSwitch.ts"
    },
    {
      "name": "card",
      "hostTag": null,
      "signature": "card(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Surface/border color tone. Optional `ValueOrState<ThemeColor>`, default \"neutral\"."
        }
      ],
      "doc": "A grid-based card surface that auto-places known child elements into named regions: `<img>` (image), headings (title), `<p>` (description), `<aside>` (aside), `<div>` (content), and `<footer>` (footer). Typically applied to a `<div>` (any block container).",
      "example": "{ div: { h3: \"Title\", p: \"Body\" }, $: [card({ color: \"neutral\" })] }",
      "source": "packages/ui/src/patches/card.ts"
    },
    {
      "name": "code",
      "hostTag": "code",
      "signature": "code(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Surface/text color tone. Optional `ValueOrState<ThemeColor>`, default \"neutral\"."
        }
      ],
      "doc": "Styles an inline code snippet with a subtle surface background, rounded corners, and shifted tone. Apply to a `<code>` element.",
      "example": "{ code: \"npm install\", $: [code({ color: \"neutral\" })] }",
      "source": "packages/ui/src/patches/code.ts"
    },
    {
      "name": "combobox",
      "hostTag": "div",
      "signature": "combobox(props: { multiple?: boolean; value?: ValueOrState< | Array<number | string | null | undefined> | number | string | null | undefined >; options?: Array<{ label: string; value: string }>; placement?: ValueOrState<Placement>; content: DomphyElement; color?: ThemeColor; open?: ValueOrState<boolean>; input?: DomphyElement; })",
      "props": [
        {
          "name": "multiple",
          "type": "boolean",
          "optional": true,
          "doc": "Allow selecting multiple values (popover stays open on click). Optional `boolean`, default false."
        },
        {
          "name": "value",
          "type": "ValueOrState< | Array<number | string | null | undefined> | number | string | null | undefined >",
          "optional": true,
          "doc": "Selected value(s). Optional `ValueOrState<Array<number | string | null | undefined> | number | string | null | undefined>`, no default."
        },
        {
          "name": "options",
          "type": "Array<{ label: string; value: string }>",
          "optional": true,
          "doc": "Available `{ label, value }` options used to render selected tags. Optional `Array<{ label: string; value: string }>`, default `[]`."
        },
        {
          "name": "placement",
          "type": "ValueOrState<Placement>",
          "optional": true,
          "doc": "Floating popover placement. Optional `ValueOrState<Placement>`, default \"bottom\"."
        },
        {
          "name": "content",
          "type": "DomphyElement",
          "optional": false,
          "doc": "The floating popover content element. Required `DomphyElement`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Color tone for the control. Optional `ThemeColor`, default \"neutral\"."
        },
        {
          "name": "open",
          "type": "ValueOrState<boolean>",
          "optional": true,
          "doc": "Whether the popover is open. Optional `ValueOrState<boolean>`, default false."
        },
        {
          "name": "input",
          "type": "DomphyElement",
          "optional": true,
          "doc": "Custom input element; when omitted a default `<input>` is created. Optional `DomphyElement`."
        }
      ],
      "doc": "A combobox/multi-select control: renders selected options as removable tags plus an input, and shows a floating popover (`content`) anchored to the host. Apply to a `<div>` element.",
      "example": "{ div: null, $: [combobox({ options: [{ label: \"A\", value: \"a\" }], content: { div: null } })] }",
      "source": "packages/ui/src/patches/combobox.ts"
    },
    {
      "name": "command",
      "hostTag": "input",
      "signature": "command()",
      "props": [],
      "doc": "Command-palette container patch. Sets up a vertical flex column and provides a shared `command` context (a query State) consumed by `commandSearch` and `commandItem` descendants to filter the list. Typically applied to a `<div>`.",
      "example": "{ div: [...], $: [command()] }",
      "source": "packages/ui/src/patches/command.ts"
    },
    {
      "name": "commandItem",
      "hostTag": "input",
      "signature": "commandItem(props: { color?: ThemeColor; accentColor?: ThemeColor } = {})",
      "props": [
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Base theme color tone. Defaults to \"neutral\"."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Accent color used for the focus ring. Defaults to \"primary\"."
        }
      ],
      "doc": "Selectable item in a command palette. On mount, immediately hides itself if the current query doesn't match its text content, and subscribes to future query changes — so items added dynamically after a search is typed are correctly filtered. Typically applied to a `<button>` (or any clickable element) used inside a `command()`. Uses native button semantics (not `role=option`) so the search input may sit as a sibling without a listbox parent requirement.",
      "example": "{ button: \"Open file\", $: [commandItem({ color: \"neutral\" })] }",
      "source": "packages/ui/src/patches/command.ts"
    },
    {
      "name": "commandSearch",
      "hostTag": "input",
      "signature": "commandSearch(props: { color?: ThemeColor; accentColor?: ThemeColor } = {})",
      "props": [
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Base theme color tone. Defaults to \"neutral\"."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Accent color used for the focus border. Defaults to \"primary\"."
        }
      ],
      "doc": "Search input for a command palette. Wires the input's value into the parent `command` context's query State so descendant `commandItem`s filter live. Apply to an `<input>` element used inside a `command()`.",
      "example": "{ input: \"\", $: [commandSearch({ accentColor: \"primary\" })] }",
      "source": "packages/ui/src/patches/command.ts"
    },
    {
      "name": "datePicker",
      "hostTag": "input",
      "signature": "datePicker(props: DatePickerProps = {})",
      "props": [
        {
          "name": "value",
          "type": "ValueOrState<DatePickerValue>",
          "optional": true,
          "doc": "Controlled value (`ValueOrState<DatePickerValue>`): a `Date`/`null` in single mode, a `[start, end]` tuple in range mode."
        },
        {
          "name": "mode",
          "type": "\"single\" | \"range\"",
          "optional": true,
          "doc": "Selection mode, \"single\" | \"range\". Defaults to \"single\"."
        },
        {
          "name": "time",
          "type": "boolean",
          "optional": true,
          "doc": "When true, also pick hour + minute (applied to the selected date(s)). Defaults to false."
        },
        {
          "name": "min",
          "type": "Date",
          "optional": true,
          "doc": "Earliest selectable day (inclusive), a `Date`."
        },
        {
          "name": "max",
          "type": "Date",
          "optional": true,
          "doc": "Latest selectable day (inclusive), a `Date`."
        },
        {
          "name": "disabledDate",
          "type": "(date: Date) => boolean",
          "optional": true,
          "doc": "Predicate `(date: Date) => boolean` to disable arbitrary days."
        },
        {
          "name": "locale",
          "type": "string",
          "optional": true,
          "doc": "BCP-47 locale for names/first-day-of-week/formatting. Defaults to `navigator.language` (or \"en-US\" in non-browser)."
        },
        {
          "name": "weekStartsOn",
          "type": "number",
          "optional": true,
          "doc": "Override first day of week (0 = Sunday … 6 = Saturday). Defaults to the locale's first day."
        },
        {
          "name": "format",
          "type": "(value: DatePickerValue) => string",
          "optional": true,
          "doc": "Override the input display string, `(value: DatePickerValue) => string`."
        },
        {
          "name": "onChange",
          "type": "(value: DatePickerValue) => void",
          "optional": true,
          "doc": "Called with the new value whenever the selection changes, `(value: DatePickerValue) => void`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Accent color (`ValueOrState<ThemeColor>`) for selected/active days. Defaults to \"primary\"."
        },
        {
          "name": "placement",
          "type": "ValueOrState<Placement>",
          "optional": true,
          "doc": "Popover placement (`ValueOrState<Placement>`) relative to the input. Defaults to \"bottom-start\"."
        }
      ],
      "doc": "A native, themeable date picker patch for an `<input>`. Opens a calendar popover (rendered with Domphy elements, positioned via `@domphy/floating`) supporting single/range selection, optional time, min/max + disabled days, localized names, and keyboard navigation. The input is read-only and shows the formatted selection; compose with `inputText()` for the input's look.",
      "example": "{ input: \"\", $: [inputText(), datePicker({ mode: \"range\" })] }",
      "source": "packages/ui/src/patches/datePicker.ts"
    },
    {
      "name": "descriptionList",
      "hostTag": "dl",
      "signature": "descriptionList(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone (`ValueOrState<ThemeColor>`) for the term/description text. Defaults to \"neutral\"."
        }
      ],
      "doc": "Styles a description list as a two-column grid (terms in the first column, descriptions in the second), theming the nested `<dt>`/`<dd>` elements. Apply to a `<dl>` element.",
      "example": "{ dl: [{ dt: \"Name\" }, { dd: \"Domphy\" }], $: [descriptionList()] }",
      "source": "packages/ui/src/patches/descriptionList.ts"
    },
    {
      "name": "details",
      "hostTag": "details",
      "signature": "details(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; duration?: number; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone (`ValueOrState<ThemeColor>`) for the body/summary. Defaults to \"neutral\"."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Accent color (`ValueOrState<ThemeColor>`) for the summary's focus ring. Defaults to \"primary\"."
        },
        {
          "name": "duration",
          "type": "number",
          "optional": true,
          "doc": "Open/close transition duration in milliseconds. Defaults to 240."
        }
      ],
      "doc": "Styles a native disclosure widget: a themed `<summary>` header with an animated rotating chevron and an expand/collapse transition on the body content. Apply to a `<details>` element.",
      "example": "{ details: [{ summary: \"More\" }, { div: \"Body\" }], $: [details()] }",
      "source": "packages/ui/src/patches/details.ts"
    },
    {
      "name": "dialog",
      "hostTag": "dialog",
      "signature": "dialog(props: { color?: ThemeColor; open?: ValueOrState<boolean> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color tone for the dialog surface. Defaults to \"neutral\"."
        },
        {
          "name": "open",
          "type": "ValueOrState<boolean>",
          "optional": true,
          "doc": "Open state (`ValueOrState<boolean>`); set it to true/false to show/hide. Defaults to false."
        }
      ],
      "doc": "Modal dialog patch driven by an `open` State. Calls `showModal()`/`close()`, fades via opacity, locks page scroll while open, traps Tab focus within the dialog, restores focus to the previously focused element on close, sets `aria-modal`, and closes on outside (backdrop) click. Apply to a `<dialog>`.",
      "example": "{ dialog: [...], $: [dialog({ open })] }",
      "source": "packages/ui/src/patches/dialog.ts"
    },
    {
      "name": "divider",
      "hostTag": "div",
      "signature": "divider(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone (`ValueOrState<ThemeColor>`) for the label text and rules. Defaults to \"neutral\"."
        }
      ],
      "doc": "A horizontal separator (`role=\"separator\"`) with a line on each side of its content, suitable for labelled dividers (\"or\"). Apply to a `<div>` element.",
      "example": "{ div: \"or\", $: [divider()] }",
      "source": "packages/ui/src/patches/divider.ts"
    },
    {
      "name": "drawer",
      "hostTag": "dialog",
      "signature": "drawer(props: { color?: ThemeColor; open?: ValueOrState<boolean>; placement?: Placement; size?: string; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color tone for the drawer surface. Defaults to \"neutral\"."
        },
        {
          "name": "open",
          "type": "ValueOrState<boolean>",
          "optional": true,
          "doc": "Open state (`ValueOrState<boolean>`); set true/false to show/hide. Defaults to false."
        },
        {
          "name": "placement",
          "type": "Placement",
          "optional": true,
          "doc": "Edge to anchor to. \"left\" | \"right\" | \"top\" | \"bottom\" | \"start\" | \"end\". Defaults to \"end\"."
        },
        {
          "name": "size",
          "type": "string",
          "optional": true,
          "doc": "CSS length for the drawer's width (left/right/start/end) or height (top/bottom). Defaults to themeSpacing(80) for left/right, themeSpacing(64) for top/bottom."
        }
      ],
      "doc": "Edge-anchored modal drawer driven by an `open` State. Slides in/out from a chosen edge via a 250 ms transform transition, calls `showModal()`/`close()`, locks page scroll while open, and closes on backdrop click. A 350 ms fallback ensures `close()` is always called even when `transitionend` doesn't fire (reduced-motion, `display:none`, detached element). Apply to a `<dialog>`. Because the patch uses the native `<dialog>` `showModal()` API, the browser traps focus inside the drawer while it is open and restores focus to the previously focused element when `close()` is called. Sets `aria-modal=\"true\"`. Escape key closes the drawer via the animated state path (not immediate close). `\"start\"` and `\"end\"` placements resolve to left/right based on the document's `dir` attribute at mount time, enabling RTL-aware drawers: `\"start\"` → left (LTR) / right (RTL); `\"end\"` → right (LTR) / left (RTL).",
      "example": "{ dialog: [...], $: [drawer({ open, placement: \"start\" })] }",
      "source": "packages/ui/src/patches/drawer.ts"
    },
    {
      "name": "emphasis",
      "hostTag": "em",
      "signature": "emphasis(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone (`ValueOrState<ThemeColor>`) for the text. Defaults to \"neutral\"."
        }
      ],
      "doc": "Italic emphasized inline text. Apply to an `<em>` element.",
      "example": "{ em: \"important\", $: [emphasis()] }",
      "source": "packages/ui/src/patches/emphasis.ts"
    },
    {
      "name": "empty",
      "hostTag": null,
      "signature": "empty(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for the muted text/icon. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Styles a container as an empty-state placeholder: centered flex column with muted coloring and comfortable padding. Provide the icon, title, and description as child elements.",
      "example": "{ div: [ { span: \"📭\" }, { p: \"No items yet\", $: [paragraph()] }, { span: \"Add your first item to get started\", $: [small()] }, ], $: [empty()] }",
      "source": "packages/ui/src/patches/empty.ts"
    },
    {
      "name": "errorBoundary",
      "hostTag": "any",
      "signature": "errorBoundary(props: { fallback?: | DomphyElement | ((error: unknown, reset: () => void) => DomphyElement); onError?: (error: unknown) => void; } = {})",
      "props": [
        {
          "name": "fallback",
          "type": "| DomphyElement | ((error: unknown, reset: () => void) => DomphyElement)",
          "optional": true,
          "doc": "Fallback element or factory `(error, reset) => element`. Defaults to a plain error message div."
        },
        {
          "name": "onError",
          "type": "(error: unknown) => void",
          "optional": true,
          "doc": "Optional callback for logging/telemetry."
        }
      ],
      "doc": "Catches errors thrown inside reactive child expressions and renders a fallback element instead of crashing the whole tree. Apply to any container. Only errors in *reactive* children (functions returning element arrays) are caught. Errors during static construction propagate normally — those are programming errors, not runtime data errors.",
      "example": "{ div: (l) => renderUserContent(l), $: [errorBoundary({ fallback: { p: \"Something went wrong.\" } })] }",
      "source": "packages/ui/src/patches/errorBoundary.ts"
    },
    {
      "name": "fab",
      "hostTag": "button",
      "signature": "fab(props: { color?: ValueOrState<ThemeColor>; size?: \"small\" | \"medium\" | \"large\"; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Button color tone. Optional `ValueOrState<ThemeColor>`, defaults to `\"primary\"`."
        },
        {
          "name": "size",
          "type": "\"small\" | \"medium\" | \"large\"",
          "optional": true,
          "doc": "Button size preset. Optional `\"small\" | \"medium\" | \"large\"`, defaults to `\"medium\"`."
        }
      ],
      "doc": "Floating Action Button — a circular elevated button typically used for the primary action on a screen. Apply to a `<button>` element.",
      "example": "{ button: \"+\", $: [fab()] }",
      "source": "packages/ui/src/patches/fab.ts"
    },
    {
      "name": "figure",
      "hostTag": "figure",
      "signature": "figure(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone (`ValueOrState<ThemeColor>`) for the figure/caption text. Defaults to \"neutral\"."
        }
      ],
      "doc": "Lays out a figure as a column with block-level media (img/svg/video/canvas) and a themed `<figcaption>`. Apply to a `<figure>` element.",
      "example": "{ figure: [{ img: \"\", src }, { figcaption: \"A caption\" }], $: [figure()] }",
      "source": "packages/ui/src/patches/figure.ts"
    },
    {
      "name": "formGroup",
      "hostTag": "fieldset",
      "signature": "formGroup(props: { color?: ValueOrState<ThemeColor>; layout?: \"horizontal\" | \"vertical\"; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone (`ValueOrState<ThemeColor>`) for legend/text/surface. Defaults to \"neutral\"."
        },
        {
          "name": "layout",
          "type": "\"horizontal\" | \"vertical\"",
          "optional": true,
          "doc": "Field arrangement, \"horizontal\" (label beside control) | \"vertical\" (label above). Defaults to \"horizontal\"."
        }
      ],
      "doc": "Layout patch for a group of form fields. Arranges a `<legend>`, `<label>`s, controls, and helper `<p>`s in a grid — labels beside controls (horizontal) or stacked above them (vertical). Apply to a `<fieldset>` element.",
      "example": "{ fieldset: [{ legend: \"Profile\" }, { label: \"Name\" }, { input: \"\" }], $: [formGroup({ layout: \"vertical\" })] }",
      "source": "packages/ui/src/patches/formGroup.ts"
    },
    {
      "name": "grid",
      "hostTag": null,
      "signature": "grid(props: { columns?: number | string; gap?: number; align?: FlexAlign } = {})",
      "props": [
        {
          "name": "columns",
          "type": "number | string",
          "optional": true,
          "doc": "Column count (expanded to `repeat(N, minmax(0, 1fr))`) or a raw `grid-template-columns` value. Defaults to `1`."
        },
        {
          "name": "gap",
          "type": "number",
          "optional": true,
          "doc": "Spacing multiplier for gap between cells (default 4 = 1em at density 1)."
        },
        {
          "name": "align",
          "type": "FlexAlign",
          "optional": true,
          "doc": "Block-axis alignment of items (`alignItems`). Unset by default."
        }
      ],
      "doc": "A CSS grid with a column template and spacing between cells — the general-purpose primitive for card/property/stat grids instead of hand-rolling `display: \"grid\"; gridTemplateColumns: ...; gap: ...`. Mirrors `row()`'s contract. Styles the host only; apply to any block element.",
      "example": "{ div: [{ div: \"A\" }, { div: \"B\" }], $: [grid({ columns: 2 })] }",
      "source": "packages/ui/src/patches/grid.ts"
    },
    {
      "name": "heading",
      "hostTag": "h1",
      "signature": "heading(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone (`ValueOrState<ThemeColor>`) for the heading text. Defaults to \"neutral\"."
        }
      ],
      "doc": "Styles a heading, scaling its font size by level (h1 largest … h6 smallest) relative to the theme base size. Apply to a heading element `<h1>`–`<h6>`.",
      "example": "{ h2: \"Section title\", $: [heading()] }",
      "source": "packages/ui/src/patches/heading.ts"
    },
    {
      "name": "horizontalRule",
      "hostTag": "hr",
      "signature": "horizontalRule(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone (`ValueOrState<ThemeColor>`) for the rule. Defaults to \"neutral\"."
        }
      ],
      "doc": "A thematic break rendered as a thin 1px themed line with vertical margin. Apply to an `<hr>` element.",
      "example": "{ hr: \"\", $: [horizontalRule()] }",
      "source": "packages/ui/src/patches/horizontalRule.ts"
    },
    {
      "name": "icon",
      "hostTag": "span",
      "signature": "icon(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the icon (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Styles an inline icon container: square box that centers its content and applies the themed icon color. Apply to a `<span>` element.",
      "example": "{ span: null, $: [icon()] }",
      "source": "packages/ui/src/patches/icon.ts"
    },
    {
      "name": "image",
      "hostTag": "img",
      "signature": "image(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the placeholder background (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Styles a responsive image: full-width, cover-fit, rounded corners with a themed placeholder background. Apply to an `<img>` element.",
      "example": "{ img: null, src: \"photo.jpg\", alt: \"Photo\", $: [image()] }",
      "source": "packages/ui/src/patches/image.ts"
    },
    {
      "name": "inputCheckbox",
      "hostTag": "input",
      "signature": "inputCheckbox(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the box/border (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the checked/indeterminate fill and focus ring (`ValueOrState<ThemeColor>`). Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a custom checkbox with themed box, check mark, indeterminate state, hover, focus and disabled styling. Apply to an `<input>` element of type `checkbox` (the patch sets `type: \"checkbox\"`).",
      "example": "{ input: null, type: \"checkbox\", $: [inputCheckbox()] }",
      "source": "packages/ui/src/patches/inputCheckbox.ts"
    },
    {
      "name": "inputColor",
      "hostTag": "input",
      "signature": "inputColor(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone used for the disabled state (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone (`ValueOrState<ThemeColor>`). Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a native color picker swatch with themed padding, rounded swatch and disabled styling. Apply to an `<input>` element of type `color` (the patch sets `type: \"color\"`).",
      "example": "{ input: null, type: \"color\", $: [inputColor()] }",
      "source": "packages/ui/src/patches/inputColor.ts"
    },
    {
      "name": "inputDateTime",
      "hostTag": "input",
      "signature": "inputDateTime(props: { mode?: InputDateTimeMode; color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "mode",
          "type": "InputDateTimeMode",
          "optional": true,
          "doc": "Input mode selecting the host `type`: `\"date\" | \"time\" | \"week\" | \"month\" | \"datetime-local\"`. Defaults to `\"datetime-local\"`."
        },
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for text/border (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the hover/focus ring (`ValueOrState<ThemeColor>`). Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a native date/time input with themed border, padding, hover, focus, invalid and disabled states. The `mode` selects the input `type`. Apply to an `<input>` element (the patch sets `type` to the chosen `mode`).",
      "example": "{ input: null, type: \"datetime-local\", $: [inputDateTime()] }",
      "source": "packages/ui/src/patches/inputDateTime.ts"
    },
    {
      "name": "inputFile",
      "hostTag": "input",
      "signature": "inputFile(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for text/border and the upload button (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the hover/focus ring (`ValueOrState<ThemeColor>`). Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a native file input with a themed upload button, border, hover, focus and disabled states. Apply to an `<input>` element of type `file` (the patch sets `type: \"file\"`).",
      "example": "{ input: null, type: \"file\", $: [inputFile()] }",
      "source": "packages/ui/src/patches/inputFile.ts"
    },
    {
      "name": "inputNumber",
      "hostTag": "input",
      "signature": "inputNumber(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for text/border (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the hover/focus ring (`ValueOrState<ThemeColor>`). Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a native number input with themed border, padding, visible spin buttons, hover, focus and disabled states. Apply to an `<input>` element of type `number` (the patch sets `type: \"number\"`).",
      "example": "{ input: null, type: \"number\", $: [inputNumber()] }",
      "source": "packages/ui/src/patches/inputNumber.ts"
    },
    {
      "name": "inputOTP",
      "hostTag": null,
      "signature": "inputOTP()",
      "props": [],
      "doc": "Lays out a one-time-password container as a horizontal row of inputs and wires keyboard navigation: auto-advance on input, backspace/arrow movement, and paste distribution across the child inputs. Apply to a container element (e.g. `<div>`) whose direct children are the OTP `<input>` boxes. Takes no props.",
      "example": "{ div: null, $: [inputOTP()], children: [{ input: null }, { input: null }] }",
      "source": "packages/ui/src/patches/inputOTP.ts"
    },
    {
      "name": "inputPassword",
      "hostTag": "div",
      "signature": "inputPassword(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Base color tone for border/background/text. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Accent outline color on focus-within. Defaults to `\"primary\"`."
        }
      ],
      "doc": "Password input wrapper: a styled `<div>` that inserts an `<input type=\"password\">` and a show/hide toggle button. The outer div carries the focus-ring outline via `:focus-within`. Apply to an empty `<div>`.",
      "example": "{ div: null, $: [inputPassword()] }",
      "source": "packages/ui/src/patches/inputPassword.ts"
    },
    {
      "name": "inputRadio",
      "hostTag": "input",
      "signature": "inputRadio(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the box/border (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the checked dot and focus ring (`ValueOrState<ThemeColor>`). Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a custom radio button with a themed circular box, checked dot, hover, focus and disabled states. Apply to an `<input>` element of type `radio` (the patch sets `type: \"radio\"`).",
      "example": "{ input: null, type: \"radio\", $: [inputRadio()] }",
      "source": "packages/ui/src/patches/inputRadio.ts"
    },
    {
      "name": "inputRange",
      "hostTag": "input",
      "signature": "inputRange(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the slider track (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the thumb and focus ring (`ValueOrState<ThemeColor>`). Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a range slider with a themed track and thumb, hover, focus and disabled states. Apply to an `<input>` element of type `range` (the patch sets `type: \"range\"`).",
      "example": "{ input: null, type: \"range\", $: [inputRange()] }",
      "source": "packages/ui/src/patches/inputRange.ts"
    },
    {
      "name": "inputSearch",
      "hostTag": "input",
      "signature": "inputSearch(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for text/border/placeholder (`ValueOrState<ThemeColor>`). Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the hover/focus ring (`ValueOrState<ThemeColor>`). Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a search input with themed border, padding, placeholder color, native search decorations, hover, focus and disabled states. Apply to an `<input>` element of type `search` (the patch sets `type: \"search\"`).",
      "example": "{ input: null, type: \"search\", $: [inputSearch()] }",
      "source": "packages/ui/src/patches/inputSearch.ts"
    },
    {
      "name": "inputSwitch",
      "hostTag": "input",
      "signature": "inputSwitch(props: { accentColor?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Optional theme color tone for the checked track (`ValueOrState<ThemeColor>`). Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a checkbox as a toggle switch: themed track and sliding knob that animates and recolors on checked, plus a disabled state. Apply to an `<input>` element of type `checkbox` (the patch sets `type: \"checkbox\"`).",
      "example": "{ input: null, type: \"checkbox\", $: [inputSwitch()] }",
      "source": "packages/ui/src/patches/inputSwitch.ts"
    },
    {
      "name": "inputText",
      "hostTag": "input",
      "signature": "inputText(props: { type?: string; color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "type",
          "type": "string",
          "optional": true,
          "doc": "The input's `type` attribute (e.g. `\"email\"`, `\"url\"`, `\"tel\"`). Defaults to `\"text\"`."
        },
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Base color tone for text/border/background. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Accent color tone for the hover/focus outline. Defaults to `\"primary\"`."
        }
      ],
      "doc": "Themed single-line text input primitive. Sets `type` (default `\"text\"`) and styles the field with themed border, focus ring, placeholder, disabled and validation (`data-status`) states. Apply to an `<input>` element.",
      "example": "{ input: \"\", type: \"text\", placeholder: \"Name\", $: [inputText()] }",
      "source": "packages/ui/src/patches/inputText.ts"
    },
    {
      "name": "keyboard",
      "hostTag": "kbd",
      "signature": "keyboard(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Color tone for text/background/border. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Renders keyboard-key styling (themed background, border and padding) for a keystroke hint. Apply to a `<kbd>` element.",
      "example": "{ kbd: \"Ctrl\", $: [keyboard()] }",
      "source": "packages/ui/src/patches/keyboard.ts"
    },
    {
      "name": "label",
      "hostTag": "label",
      "signature": "label(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Base color tone for the label text. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Accent color tone applied on focus-within. Defaults to `\"primary\"`."
        }
      ],
      "doc": "Themed form-label primitive: inline-flex layout with gap, themed text color, focus-within highlighting and a disabled (`aria-disabled`) state. Apply to a `<label>` element.",
      "example": "{ label: \"Email\", htmlFor: \"email\", $: [label()] }",
      "source": "packages/ui/src/patches/label.ts"
    },
    {
      "name": "link",
      "hostTag": "a",
      "signature": "link(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Base color tone for the link text. Defaults to `\"primary\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Accent color tone for visited/focus states. Defaults to `\"secondary\"`."
        }
      ],
      "doc": "Themed hyperlink primitive: styles text color, hover underline, visited, focus ring and a disabled state. Apply to an `<a>` element.",
      "example": "{ a: \"Home\", href: \"/\", $: [link()] }",
      "source": "packages/ui/src/patches/link.ts"
    },
    {
      "name": "linkButton",
      "hostTag": "a",
      "signature": "linkButton(props: { color?: ValueOrState<ThemeColor>; variant?: ButtonVariant; size?: ButtonSize; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Button color tone. Optional `ValueOrState<ThemeColor>`, default \"primary\"."
        },
        {
          "name": "variant",
          "type": "ButtonVariant",
          "optional": true,
          "doc": "`\"outline\"` (default) | `\"solid\"` | `\"ghost\"` — matches `button()`."
        },
        {
          "name": "size",
          "type": "ButtonSize",
          "optional": true,
          "doc": "`\"small\" | \"medium\" | \"large\"`, defaults to `\"medium\"`."
        }
      ],
      "doc": "An `<a>` element styled to look like a button — same visual system as `button()` (`variant` / `size` / color) while preserving link semantics (href, middle-click, right-click). Apply to an `<a>` element.",
      "example": "{ a: \"Open app\", href: \"/app\", $: [linkButton({ color: \"primary\" })] }",
      "source": "packages/ui/src/patches/linkButton.ts"
    },
    {
      "name": "list",
      "hostTag": "ul",
      "signature": "list(_props: { color?: ThemeColor } = {})",
      "props": [
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Surface color tone. Optional `ThemeColor`, defaults to `\"neutral\"`."
        }
      ],
      "doc": "Styles a navigation/display list container. Sets `list-style: none` and zero padding; pairs with `listItem` and `listItemButton`. Apply to `<ul>`.",
      "example": "{ ul: [...], $: [list()] }",
      "source": "packages/ui/src/patches/list.ts"
    },
    {
      "name": "listItem",
      "hostTag": "li",
      "signature": "listItem(props: { dense?: boolean } = {})",
      "props": [
        {
          "name": "dense",
          "type": "boolean",
          "optional": true,
          "doc": "Reduce vertical padding. Optional `boolean`, defaults to `false`."
        }
      ],
      "doc": "A non-interactive list row. Typically wraps an icon + text. Apply to `<li>`.",
      "example": "{ li: \"Item\", $: [listItem()] }",
      "source": "packages/ui/src/patches/list.ts"
    },
    {
      "name": "listItemButton",
      "hostTag": null,
      "signature": "listItemButton(props: { color?: ValueOrState<ThemeColor>; accentColor?: ThemeColor; dense?: boolean; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Color tone. Optional `ValueOrState<ThemeColor>`, defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Focus/active accent. Optional `ThemeColor`, defaults to `\"primary\"`."
        },
        {
          "name": "dense",
          "type": "boolean",
          "optional": true,
          "doc": "Reduce vertical padding. Optional `boolean`, defaults to `false`."
        }
      ],
      "doc": "An interactive (clickable) list row with hover/focus-visible states. Apply to `<button>` or `<a>` inside an `<li>`.",
      "example": "{ button: \"Action\", $: [listItemButton()] }",
      "source": "packages/ui/src/patches/list.ts"
    },
    {
      "name": "mark",
      "hostTag": "mark",
      "signature": "mark(props: { accentColor?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Accent color tone for the highlight fill and text. Defaults to `\"highlight\"`."
        }
      ],
      "doc": "Themed highlight primitive: gives marked/highlighted inline text a tinted background, rounded corners and padding. Apply to a `<mark>` element.",
      "example": "{ mark: \"important\", $: [mark()] }",
      "source": "packages/ui/src/patches/mark.ts"
    },
    {
      "name": "menu",
      "hostTag": null,
      "signature": "menu(props: { items: MenuItem[]; activeKey?: ValueOrState<number | string | null>; selectable?: boolean; color?: ThemeColor; accentColor?: ThemeColor; } = { items: [] })",
      "props": [
        {
          "name": "items",
          "type": "MenuItem[]",
          "optional": false,
          "doc": "Item definitions `{ label, key?, onClick? }`. Pass `[]` to keep the wrapper's own children (escape hatch for fully custom rows — only the menu container styling and `role=\"menu\"` semantics apply then)."
        },
        {
          "name": "activeKey",
          "type": "ValueOrState<number | string | null>",
          "optional": true,
          "doc": "Currently selected key (value or State). Defaults to `null`."
        },
        {
          "name": "selectable",
          "type": "boolean",
          "optional": true,
          "doc": "Whether items track and update the active selection. Defaults to `true`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Background color tone for the menu. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Accent color for the active/focus item. Defaults to `\"primary\"`."
        }
      ],
      "doc": "All-in-one vertical menu. Generates `<button>` `[role=menuitem]` elements from the `items` array with keyboard navigation (Arrow/Home/End/Enter/Space). Apply to any wrapper element (`div`, `ul`, …).",
      "example": "{ div: null, $: [menu({ items: [ { label: \"Profile\", key: \"profile\", onClick: () => navigate(\"/profile\") }, { label: \"Settings\", key: \"settings\", onClick: () => navigate(\"/settings\") }, ] })] }",
      "source": "packages/ui/src/patches/menu.ts"
    },
    {
      "name": "motion",
      "hostTag": null,
      "signature": "motion(props: MotionProps = {})",
      "props": [
        {
          "name": "initial",
          "type": "MotionKeyframe",
          "optional": true,
          "doc": ""
        },
        {
          "name": "animate",
          "type": "MotionKeyframe | State<MotionKeyframe>",
          "optional": true,
          "doc": ""
        },
        {
          "name": "exit",
          "type": "MotionKeyframe",
          "optional": true,
          "doc": ""
        },
        {
          "name": "transition",
          "type": "{ /** ms, default 300. */ duration?: number; /** ms, default 0. */ delay?: number; /** CSS easing, default \"ease\". */ easing?: string; iterations?: number; }",
          "optional": true,
          "doc": ""
        }
      ],
      "doc": "",
      "example": "",
      "source": "packages/ui/src/patches/motion.ts"
    },
    {
      "name": "orderedList",
      "hostTag": "ol",
      "signature": "orderedList(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Color tone for the list text. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Themed ordered-list primitive: decimal markers positioned outside, reset margins and themed text color. Apply to an `<ol>` element.",
      "example": "{ ol: \"\", $: [orderedList()], children: [{ li: \"First\" }] }",
      "source": "packages/ui/src/patches/orderedList.ts"
    },
    {
      "name": "pagination",
      "hostTag": "div",
      "signature": "pagination(props: { value?: ValueOrState<number>; total: number; color?: ThemeColor; accentColor?: ThemeColor; })",
      "props": [
        {
          "name": "value",
          "type": "ValueOrState<number>",
          "optional": true,
          "doc": "Current page, accepts a value or `State`. Defaults to `1`."
        },
        {
          "name": "total",
          "type": "number",
          "optional": false,
          "doc": "Required. Total number of pages."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Base color tone for the page buttons. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Accent color tone for the active page. Defaults to `\"primary\"`."
        }
      ],
      "doc": "Themed pagination control. Renders previous/next buttons plus truncated page numbers (with ellipses), tracks the current page in a `State`, and updates it on click. Apply to a `<div>` element.",
      "example": "{ div: \"\", $: [pagination({ total: 10, value: 1 })] }",
      "source": "packages/ui/src/patches/pagination.ts"
    },
    {
      "name": "panelSection",
      "hostTag": null,
      "signature": "panelSection(props: { padding?: number; divider?: boolean; color?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "padding",
          "type": "number",
          "optional": true,
          "doc": "Spacing multiplier for padding on all sides (default 4 = 1em at density 1)."
        },
        {
          "name": "divider",
          "type": "boolean",
          "optional": true,
          "doc": "Adds a bottom border, for sections stacked one after another. Defaults to `false`."
        },
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for the divider border. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "A padded section for side-panel/inspector UIs — density-aware padding on all sides, with an optional bottom divider for sections stacked one after another. A thin wrapper: it does not impose flex layout on its children — pair it with `stack()` or `row()` for that. No host-tag check; apply to any block element.",
      "example": "{ div: [{ h3: \"Parameters\" }, { p: \"...\" }], $: [panelSection()] }",
      "source": "packages/ui/src/patches/panelSection.ts"
    },
    {
      "name": "paragraph",
      "hostTag": "p",
      "signature": "paragraph(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Color tone for the paragraph text. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Themed paragraph primitive: comfortable line-height, reset margins and themed text color. Apply to a `<p>` element.",
      "example": "{ p: \"Hello world\", $: [paragraph()] }",
      "source": "packages/ui/src/patches/paragraph.ts"
    },
    {
      "name": "popover",
      "hostTag": null,
      "signature": "popover(props: { openOn?: \"click\" | \"hover\"; open?: ValueOrState<boolean>; placement?: ValueOrState<Placement>; content: DomphyElement; })",
      "props": [
        {
          "name": "openOn",
          "type": "\"click\" | \"hover\"",
          "optional": true,
          "doc": "Interaction that opens the popover: `\"click\"` or `\"hover\"`. Defaults to `\"click\"`."
        },
        {
          "name": "open",
          "type": "ValueOrState<boolean>",
          "optional": true,
          "doc": "Open state, accepts a value or `State`. Defaults to `false`."
        },
        {
          "name": "placement",
          "type": "ValueOrState<Placement>",
          "optional": true,
          "doc": "Floating placement (e.g. `\"bottom\"`, `\"top-start\"`), value or `State`. Defaults to `\"bottom\"`."
        },
        {
          "name": "content",
          "type": "DomphyElement",
          "optional": false,
          "doc": "The floating content element to display."
        }
      ],
      "doc": "Floating popover primitive. Attaches to its host as the anchor/trigger and shows a floating `content` element (with `role=\"dialog\"`) on click or hover, positioned via `@domphy/floating`. Returns the anchor partial, which merges trigger wiring (haspopup/expanded, focus/blur dismissal). Apply to the trigger element you want the popover anchored to.",
      "example": "{ button: \"Open\", $: [popover({ openOn: \"click\", content: { div: \"Hi\" } })] }",
      "source": "packages/ui/src/patches/popover.ts"
    },
    {
      "name": "popoverArrow",
      "hostTag": null,
      "signature": "popoverArrow(props: { placement?: ValueOrState<Placement>; sideOffset?: string; color?: ThemeColor; bordered?: boolean; } = {})",
      "props": [
        {
          "name": "placement",
          "type": "ValueOrState<Placement>",
          "optional": true,
          "doc": "Floating placement the popover sits at; the arrow is drawn on the opposite (flipped) side. Accepts a value or reactive state. Defaults to `\"bottom-end\"`. One of: `top` | `bottom` | `left` | `right` | `top-start` | `top-end` | `bottom-start` | `bottom-end` | `left-start` | `left-end` | `right-start` | `right-end`."
        },
        {
          "name": "sideOffset",
          "type": "string",
          "optional": true,
          "doc": "CSS length used to offset the arrow toward the start/end edge. Defaults to `themeSpacing(6)`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color tone for the arrow fill and border. Defaults to `\"neutral\"`."
        },
        {
          "name": "bordered",
          "type": "boolean",
          "optional": true,
          "doc": "Whether the arrow draws a 1px border (set to `0px` when false). Defaults to `true`."
        }
      ],
      "doc": "Renders a small rotated arrow (via a `::after` pseudo-element) that points from a popover/tooltip toward its anchor, positioned and oriented based on the floating placement. The arrow direction is computed by flipping the given placement. No host-tag check is performed; apply it to the popover container element.",
      "example": "{ div: [...], $: [popoverArrow({ placement: \"top\" })] }",
      "source": "packages/ui/src/patches/popoverArrow.ts"
    },
    {
      "name": "preformated",
      "hostTag": "pre",
      "signature": "preformated(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for text and background. Accepts a value or reactive state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Styles a preformatted text block: inherited font size, themed foreground/background, no border, density-scaled padding and rounded corners.",
      "example": "{ pre: \"const x = 1\", $: [preformated()] }",
      "source": "packages/ui/src/patches/preformated.ts"
    },
    {
      "name": "progress",
      "hostTag": "progress",
      "signature": "progress(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for the track/background. Accepts a value or reactive state. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for the filled value. Accepts a value or reactive state. Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a native progress bar: full-width, pill-shaped track with a themed fill, including the WebKit progress-bar/value pseudo-elements and a width transition.",
      "example": "{ progress: null, value: 40, max: 100, $: [progress()] }",
      "source": "packages/ui/src/patches/progress.ts"
    },
    {
      "name": "rating",
      "hostTag": "div",
      "signature": "rating(props: { value?: ValueOrState<number>; max?: number; onChange?: (value: number) => void; readOnly?: boolean; color?: ThemeColor; } = {})",
      "props": [
        {
          "name": "value",
          "type": "ValueOrState<number>",
          "optional": true,
          "doc": "Current rating (0 – max). `ValueOrState<number>`, defaults to `0`."
        },
        {
          "name": "max",
          "type": "number",
          "optional": true,
          "doc": "Total number of stars. Optional `number`, defaults to `5`."
        },
        {
          "name": "onChange",
          "type": "(value: number) => void",
          "optional": true,
          "doc": "Called with the new value when the user picks a star."
        },
        {
          "name": "readOnly",
          "type": "boolean",
          "optional": true,
          "doc": "Disable interaction. Optional `boolean`, defaults to `false`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Star color tone. Optional `ThemeColor`, defaults to `\"warning\"`."
        }
      ],
      "doc": "Interactive star rating applied to a container `<div>`. Manages its own star children: click to set, Arrow keys to adjust, hover to preview. In `readOnly` mode stars are non-interactive. Apply to a `<div>` element.",
      "example": "{ div: null, $: [rating({ value: ratingState, onChange: (v) => ratingState.set(v) })] }",
      "source": "packages/ui/src/patches/rating.ts"
    },
    {
      "name": "ringProgress",
      "hostTag": "div",
      "signature": "ringProgress(props: { value?: ValueOrState<number>; color?: ValueOrState<ThemeColor>; trackColor?: ValueOrState<ThemeColor>; size?: number; thickness?: number; } = {})",
      "props": [
        {
          "name": "value",
          "type": "ValueOrState<number>",
          "optional": true,
          "doc": "Progress percentage 0–100. Accepts a value or reactive state. Defaults to `0`."
        },
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color for the filled arc. Accepts a value or reactive state. Defaults to `\"primary\"`."
        },
        {
          "name": "trackColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color for the background track. Accepts a value or reactive state. Defaults to `\"neutral\"`."
        },
        {
          "name": "size",
          "type": "number",
          "optional": true,
          "doc": "Diameter in `themeSpacing` units. Defaults to `16` (= `4em`)."
        },
        {
          "name": "thickness",
          "type": "number",
          "optional": true,
          "doc": "Ring stroke as a fraction of the radius (0–0.5). Defaults to `0.25`."
        }
      ],
      "doc": "Circular ring progress indicator rendered via CSS `conic-gradient` and a circular `mask`. Progress starts at 12 o'clock and advances clockwise. Exposes `role=\"progressbar\"` with `aria-valuenow/min/max`. Apply to a `<div>`.",
      "example": "{ div: null, $: [ringProgress({ value: 65 })] }",
      "source": "packages/ui/src/patches/ringProgress.ts"
    },
    {
      "name": "row",
      "hostTag": null,
      "signature": "row(props: { gap?: number; align?: FlexAlign; justify?: FlexJustify; wrap?: boolean; } = {})",
      "props": [
        {
          "name": "gap",
          "type": "number",
          "optional": true,
          "doc": "Spacing multiplier for gap between items (default 4 = 1em at density 1)."
        },
        {
          "name": "align",
          "type": "FlexAlign",
          "optional": true,
          "doc": "Cross-axis alignment (`alignItems`). Defaults to `\"center\"`."
        },
        {
          "name": "justify",
          "type": "FlexJustify",
          "optional": true,
          "doc": "Main-axis distribution (`justifyContent`). Unset by default (flex-start)."
        },
        {
          "name": "wrap",
          "type": "boolean",
          "optional": true,
          "doc": "Allow items to wrap onto multiple lines. Defaults to `false`."
        }
      ],
      "doc": "A horizontal flex row with spacing between children, vertically centered by default. The general-purpose primitive for icon+label rows, field rows, and button groups — instead of hand-rolling `display: flex; alignItems: center; gap: ...`. `toolbar()` is a semantic alias of this same shape for headers/nav bars. Styles the host only; apply to any block element.",
      "example": "{ div: [{ span: \"Icon\" }, { span: \"Label\" }], $: [row()] }",
      "source": "packages/ui/src/patches/row.ts"
    },
    {
      "name": "scrollArea",
      "hostTag": null,
      "signature": "scrollArea(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color for the scrollbar thumb. Accepts a value or reactive state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Applies thin, themed overlay scrollbars to any scrollable container. Covers WebKit (Chrome/Safari/Edge) via `::-webkit-scrollbar` pseudo-elements and Firefox via `scrollbar-width`/`scrollbar-color`. Sets `overflow: auto`. No host-tag check; apply to any block element.",
      "example": "{ div: [...], style: { maxHeight: \"300px\" }, $: [scrollArea()] }",
      "source": "packages/ui/src/patches/scrollArea.ts"
    },
    {
      "name": "segmented",
      "hostTag": null,
      "signature": "segmented(props: { items: SegmentedItem[]; value?: ValueOrState<string>; color?: ThemeColor; accentColor?: ThemeColor; } = { items: [] })",
      "props": [
        {
          "name": "items",
          "type": "SegmentedItem[]",
          "optional": false,
          "doc": "Item definitions `{ label, key? }`."
        },
        {
          "name": "value",
          "type": "ValueOrState<string>",
          "optional": true,
          "doc": "Initially selected key (value or State). Defaults to the first item's key."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color for the control background. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color for the selected item. Defaults to `\"primary\"`."
        }
      ],
      "doc": "All-in-one single-select segmented control. Generates `<button>` option elements from the `items` array. Apply to any wrapper element.",
      "example": "{ div: null, $: [segmented({ items: [ { label: \"Day\", key: \"day\" }, { label: \"Month\", key: \"month\" }, { label: \"Year\", key: \"year\" }, ] })] }",
      "source": "packages/ui/src/patches/segmented.ts"
    },
    {
      "name": "select",
      "hostTag": "select",
      "signature": "select(props: { color?: ThemeColor; accentColor?: ThemeColor } = {})",
      "props": [
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color tone for text, background and outline. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color tone for hover/focus outlines. Defaults to `\"primary\"`."
        }
      ],
      "doc": "Styles a native `<select>` control: removes the default appearance, applies themed colors, outline, density-scaled padding/radius, a custom chevron background icon, and hover/focus/disabled/optgroup/option states.",
      "example": "{ select: [{ option: \"A\" }], $: [select()] }",
      "source": "packages/ui/src/patches/select.ts"
    },
    {
      "name": "selectBox",
      "hostTag": "div",
      "signature": "selectBox(props: { multiple?: boolean; value?: ValueOrState< | Array<number | string | null | undefined> | number | string | null | undefined >; options?: Array<{ label: string; value: string }>; placement?: ValueOrState<Placement>; content: DomphyElement; color?: ThemeColor; open?: ValueOrState<boolean>; })",
      "props": [
        {
          "name": "multiple",
          "type": "boolean",
          "optional": true,
          "doc": "Whether multiple selection is allowed (renders removable tags and keeps the popover open on click). Defaults to `false`."
        },
        {
          "name": "value",
          "type": "ValueOrState< | Array<number | string | null | undefined> | number | string | null | undefined >",
          "optional": true,
          "doc": "Bound selection value(s). Accepts a value or reactive state of an array of `number | string | null | undefined`, or a single `number | string | null | undefined`."
        },
        {
          "name": "options",
          "type": "Array<{ label: string; value: string }>",
          "optional": true,
          "doc": "List of `{ label, value }` options used to resolve selected labels. Defaults to `[]`."
        },
        {
          "name": "placement",
          "type": "ValueOrState<Placement>",
          "optional": true,
          "doc": "Floating placement of the dropdown popover. Accepts a value or reactive state. Defaults to `\"bottom\"`."
        },
        {
          "name": "content",
          "type": "DomphyElement",
          "optional": false,
          "doc": "Required. The popover/dropdown content element shown when open."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color tone for the box text/background. Defaults to `\"neutral\"`."
        },
        {
          "name": "open",
          "type": "ValueOrState<boolean>",
          "optional": true,
          "doc": "Whether the popover is open. Accepts a value or reactive state. Defaults to `false`."
        }
      ],
      "doc": "A clickable select trigger box that renders the currently selected option(s) as removable tags and toggles a floating popover (the dropdown content) anchored to itself. Selected labels are derived from `options` matching the bound `value`; removing a tag updates the value.",
      "example": "{ div: null, $: [selectBox({ content: { div: [...] }, options: [{ label: \"A\", value: \"a\" }] })] }",
      "source": "packages/ui/src/patches/selectBox.ts"
    },
    {
      "name": "selectItem",
      "hostTag": "div",
      "signature": "selectItem(props: { accentColor?: ThemeColor; color?: ThemeColor; value?: number | string; } = {})",
      "props": [
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color tone for the selected/focus state. Defaults to `\"primary\"`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color tone for text/background. Defaults to `\"neutral\"`."
        },
        {
          "name": "value",
          "type": "number | string",
          "optional": true,
          "doc": "The option value compared against and written to the select state. Defaults to `null`."
        }
      ],
      "doc": "A single selectable option row (`role=\"option\"`) for use inside a `selectList`. Reads the `select` context to reflect/toggle selection: it sets `aria-selected` from the bound value and toggles the value (single or multiple) on click. Styles hover/selected/focus states.",
      "example": "{ div: \"Option A\", $: [selectItem({ value: \"a\" })] }",
      "source": "packages/ui/src/patches/selectItem.ts"
    },
    {
      "name": "selectList",
      "hostTag": "div",
      "signature": "selectList(props: { multiple?: boolean; value?: ValueOrState< Array<number | string | null> | number | string | null >; color?: ThemeColor; name?: string; } = {})",
      "props": [
        {
          "name": "multiple",
          "type": "boolean",
          "optional": true,
          "doc": "Whether multiple selection is allowed; also sets the default empty value (`[]` vs `null`). Defaults to `false`."
        },
        {
          "name": "value",
          "type": "ValueOrState< Array<number | string | null> | number | string | null >",
          "optional": true,
          "doc": "Bound selection value(s). Accepts a value or reactive state of an array of `number | string | null`, or a single `number | string | null`. Defaults to `[]` when `multiple`, otherwise `null`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color tone for the background. Defaults to `\"neutral\"`."
        },
        {
          "name": "name",
          "type": "string",
          "optional": true,
          "doc": "Name attribute for the hidden inputs (form field name)."
        }
      ],
      "doc": "Container for a list of `selectItem`s that owns the selection state. It exposes a `select` context (`{ value, multiple }`) consumed by child items, and injects hidden `<input>`(s) carrying the selected value(s) under `name` for form submission.",
      "example": "{ div: [{ div: \"A\", $: [selectItem({ value: \"a\" })] }], $: [selectList({ name: \"pick\" })] }",
      "source": "packages/ui/src/patches/selectList.ts"
    },
    {
      "name": "skeleton",
      "hostTag": null,
      "signature": "skeleton(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for the placeholder. Accepts a value or reactive state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "A loading placeholder block with a left-to-right shimmer gradient. Marked `aria-hidden`, themed background/foreground, fixed height, slight rounding. No host-tag check; typically applied to a block-level element such as a `div` or `span`.",
      "example": "{ div: null, $: [skeleton()] }",
      "source": "packages/ui/src/patches/skeleton.ts"
    },
    {
      "name": "small",
      "hostTag": "small",
      "signature": "small(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for the text. Accepts a value or reactive state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Styles small/secondary text: one step smaller font size (`data-size=\"decrease-1\"`) with a themed foreground color.",
      "example": "{ small: \"fine print\", $: [small()] }",
      "source": "packages/ui/src/patches/small.ts"
    },
    {
      "name": "spinner",
      "hostTag": "span",
      "signature": "spinner(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for the ring/highlight. Accepts a value or reactive state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "A circular loading spinner: a themed ring with a contrasting top border that rotates continuously. Marked `role=\"status\"` with `aria-label=\"loading\"`.",
      "example": "{ span: null, $: [spinner()] }",
      "source": "packages/ui/src/patches/spinner.ts"
    },
    {
      "name": "splitter",
      "hostTag": null,
      "signature": "splitter(props: { direction?: \"horizontal\" | \"vertical\"; defaultSize?: number; min?: number; max?: number; } = {})",
      "props": [
        {
          "name": "direction",
          "type": "\"horizontal\" | \"vertical\"",
          "optional": true,
          "doc": "Split orientation, `\"horizontal\"` | `\"vertical\"`. Defaults to `\"horizontal\"`."
        },
        {
          "name": "defaultSize",
          "type": "number",
          "optional": true,
          "doc": "Initial size (percentage) of the resizable panel. Defaults to `50`."
        },
        {
          "name": "min",
          "type": "number",
          "optional": true,
          "doc": "Minimum panel size (percentage). Defaults to `10`."
        },
        {
          "name": "max",
          "type": "number",
          "optional": true,
          "doc": "Maximum panel size (percentage). Defaults to `90`."
        }
      ],
      "doc": "Root of a resizable split layout. Lays out children as a flex row (horizontal) or column (vertical) and provides a `splitter` context (`{ direction, size, min, max }`) consumed by `splitterPanel` and `splitterHandle`. `size` is a reactive state holding the first panel's percentage. No host-tag check; typically applied to a `div`.",
      "example": "{ div: [...], $: [splitter({ direction: \"vertical\" })] }",
      "source": "packages/ui/src/patches/splitter.ts"
    },
    {
      "name": "splitterHandle",
      "hostTag": null,
      "signature": "splitterHandle()",
      "props": [],
      "doc": "The draggable divider inside a `splitter`. Reads the `splitter` context, shows the appropriate resize cursor, and updates the context `size` state (clamped to `min`/`max`) via mouse drag or keyboard: Arrow keys move by 1%, Home/End jump to min/max, hold Shift for 10× step. Sets `role=\"separator\"`, `tabindex=\"0\"`, and `aria-value*` attributes. Warns if used outside a `splitter`. Takes no props.",
      "example": "{ div: null, $: [splitterHandle()] }",
      "source": "packages/ui/src/patches/splitter.ts"
    },
    {
      "name": "splitterPanel",
      "hostTag": null,
      "signature": "splitterPanel()",
      "props": [],
      "doc": "The resizable panel inside a `splitter`. Reads the `splitter` context and binds its width (horizontal) or height (vertical) to the context `size` state, updating reactively as the handle is dragged. Intended for exactly two panels either side of one `splitterHandle`: the first `splitterPanel` mounted takes `size`%, and the second takes the complementary `100 - size`% — so the pair always sums to the full width/height instead of both tracking the same number (which would make them grow and shrink together instead of trading space). Warns if used outside a `splitter`. Takes no props.",
      "example": "{ div: [...], $: [splitterPanel()] }",
      "source": "packages/ui/src/patches/splitter.ts"
    },
    {
      "name": "stack",
      "hostTag": null,
      "signature": "stack(props: { gap?: number; align?: FlexAlign } = {})",
      "props": [
        {
          "name": "gap",
          "type": "number",
          "optional": true,
          "doc": "Spacing multiplier for gap between children (default 3 = 0.75em at density 1)."
        },
        {
          "name": "align",
          "type": "FlexAlign",
          "optional": true,
          "doc": "Cross-axis alignment (`alignItems`). Unset by default (flex default, stretch)."
        }
      ],
      "doc": "A vertical flex column with spacing between children. The general-purpose primitive for stacking blocks — form sections, panel content, card bodies — instead of hand-rolling `display: flex; flexDirection: column; gap: ...`. Styles the host only; apply to any block element.",
      "example": "{ div: [{ h3: \"Title\" }, { p: \"Body\" }], $: [stack()] }",
      "source": "packages/ui/src/patches/stack.ts"
    },
    {
      "name": "steps",
      "hostTag": null,
      "signature": "steps(props: { items: StepItem[]; current?: ValueOrState<number>; direction?: \"horizontal\" | \"vertical\"; color?: ThemeColor; accentColor?: ThemeColor; } = { items: [] })",
      "props": [
        {
          "name": "items",
          "type": "StepItem[]",
          "optional": false,
          "doc": "Step definitions `{ label, key? }`."
        },
        {
          "name": "current",
          "type": "ValueOrState<number>",
          "optional": true,
          "doc": "Zero-based index of the active step (value or State). Defaults to `0`."
        },
        {
          "name": "direction",
          "type": "\"horizontal\" | \"vertical\"",
          "optional": true,
          "doc": "`\"horizontal\"` (default) or `\"vertical\"` layout."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color for pending/track elements. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color for active/completed elements. Defaults to `\"primary\"`."
        }
      ],
      "doc": "All-in-one step-progress indicator. Generates `<li>` step elements from the `items` array. Apply to an `<ol>` or `<ul>` element.",
      "example": "{ ol: null, $: [steps({ current: 1, items: [ { label: \"Cart\" }, { label: \"Shipping\" }, { label: \"Payment\" }, ] })] }",
      "source": "packages/ui/src/patches/steps.ts"
    },
    {
      "name": "strong",
      "hostTag": "strong",
      "signature": "strong(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color tone for the text. Accepts a value or reactive state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Styles strongly emphasized (bold) text: inherited font size, `font-weight: 700`, and a themed foreground color.",
      "example": "{ strong: \"important\", $: [strong()] }",
      "source": "packages/ui/src/patches/strong.ts"
    },
    {
      "name": "subscript",
      "hostTag": "sub",
      "signature": "subscript(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color for the text. Optional, accepts a value or state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Renders subscript text (shrunk, baseline-lowered) for the host `<sub>` element.",
      "example": "{ sub: \"2\", $: [subscript()] }",
      "source": "packages/ui/src/patches/subscript.ts"
    },
    {
      "name": "superscript",
      "hostTag": "sup",
      "signature": "superscript(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color for the text. Optional, accepts a value or state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Renders superscript text (shrunk, baseline-raised) for the host `<sup>` element.",
      "example": "{ sup: \"2\", $: [superscript()] }",
      "source": "packages/ui/src/patches/superscript.ts"
    },
    {
      "name": "table",
      "hostTag": "table",
      "signature": "table(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color applied across cells and text. Optional, accepts a value or state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Styles a data table (header/body/footer cells, caption, row hover, borders) on the host `<table>` element.",
      "example": "{ table: null, $: [table()] }",
      "source": "packages/ui/src/patches/table.ts"
    },
    {
      "name": "tabs",
      "hostTag": null,
      "signature": "tabs(props: { items: TabItem[]; activeKey?: ValueOrState<string | number>; accentColor?: ThemeColor; color?: ThemeColor; } = { items: [] })",
      "props": [
        {
          "name": "items",
          "type": "TabItem[]",
          "optional": false,
          "doc": "Tab definitions `{ label, content, key? }`."
        },
        {
          "name": "activeKey",
          "type": "ValueOrState<string | number>",
          "optional": true,
          "doc": "Initially active key (value or State). Defaults to the first item's key."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color for the active underline indicator. Defaults to `\"primary\"`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color for the resting underline. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "All-in-one tabs patch. Generates a `[role=tablist]` button row and `[role=tabpanel]` panels from the `items` array. Apply to any wrapper element (`div`, `section`, …). No companion `tab()` / `tabPanel()` needed. To control the active tab programmatically, pass an external `State` as `activeKey` and call `.set()` on it from outside.",
      "example": "{ div: null, $: [tabs({ items: [ { label: \"Overview\", content: { p: \"Overview content\" } }, { label: \"API\", content: { p: \"API content\" } }, ] })] }",
      "source": "packages/ui/src/patches/tabs.ts"
    },
    {
      "name": "tag",
      "hostTag": "span",
      "signature": "tag(props: { color?: ValueOrState<ThemeColor>; removable?: boolean } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color for the chip background/border/text. Optional, accepts a value or state. Defaults to `\"neutral\"`."
        },
        {
          "name": "removable",
          "type": "boolean",
          "optional": true,
          "doc": "When true, renders a remove (x) button that removes the tag on click. Optional. Defaults to `false`."
        }
      ],
      "doc": "Styles an inline chip/tag (rounded, bordered, optional remove button). No host tag check; typically applied to a `<span>`. When `removable` is true, a close button is inserted that removes the host node on click.",
      "example": "{ span: \"Label\", $: [tag({ removable: true })] }",
      "source": "packages/ui/src/patches/tag.ts"
    },
    {
      "name": "textarea",
      "hostTag": "textarea",
      "signature": "textarea(props: { color?: ValueOrState<ThemeColor>; accentColor?: ValueOrState<ThemeColor>; autoResize?: boolean; } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color for the border and text. Optional, accepts a value or state. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color for hover/focus outline. Optional, accepts a value or state. Defaults to `\"primary\"`."
        },
        {
          "name": "autoResize",
          "type": "boolean",
          "optional": true,
          "doc": "When true, grows the textarea height to fit its content on input. Optional. Defaults to `false`."
        }
      ],
      "doc": "Styles a multi-line text input (border, focus/hover/invalid/disabled states) on the host `<textarea>` element, with optional auto-resize to content.",
      "example": "{ textarea: null, $: [textarea({ autoResize: true })] }",
      "source": "packages/ui/src/patches/textarea.ts"
    },
    {
      "name": "timeline",
      "hostTag": null,
      "signature": "timeline()",
      "props": [],
      "doc": "Container for a vertical timeline. Sets list reset styles. Apply to `<ol>` or `<ul>`.",
      "example": "{ ol: [...], $: [timeline()] }",
      "source": "packages/ui/src/patches/timeline.ts"
    },
    {
      "name": "timelineItem",
      "hostTag": null,
      "signature": "timelineItem(props: { active?: ValueOrState<boolean>; last?: boolean; color?: ThemeColor; accentColor?: ThemeColor; } = {})",
      "props": [
        {
          "name": "active",
          "type": "ValueOrState<boolean>",
          "optional": true,
          "doc": "Full-opacity dot (accent color). `ValueOrState<boolean>`, defaults to `false`."
        },
        {
          "name": "last",
          "type": "boolean",
          "optional": true,
          "doc": "Suppress the vertical connector below this item. `boolean`, defaults to `false`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Dot/connector color tone. `ThemeColor`, defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Active dot color tone. `ThemeColor`, defaults to `\"primary\"`."
        }
      ],
      "doc": "A single event row in a `timeline`. Uses a 2-column grid: the left column holds a dot (`::before`) and optional connector line (`::after`); the right column holds the user's content. Apply to `<li>`.",
      "example": "{ li: [{ b: \"2024\" }, { p: \"Event\" }], $: [timelineItem({ active: true })] }",
      "source": "packages/ui/src/patches/timeline.ts"
    },
    {
      "name": "toast",
      "hostTag": null,
      "signature": "toast(props: { position?: ToastPosition; color?: ThemeColor } = {})",
      "props": [
        {
          "name": "position",
          "type": "ToastPosition",
          "optional": true,
          "doc": "Corner of the screen for the toast stack. Optional, one of `\"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"`. Defaults to `\"top-center\"`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color for the toast surface. Optional. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Renders a transient notification surface as a fixed-position overlay (portaled into a corner stack), animating in on mount and out before removal. No host tag check; typically applied to a `<div>`.",
      "example": "{ div: \"Saved!\", $: [toast({ position: \"top-right\" })] }",
      "source": "packages/ui/src/patches/toast.ts"
    },
    {
      "name": "toggleGroup",
      "hostTag": null,
      "signature": "toggleGroup(props: { items: ToggleItem[]; value?: ValueOrState<string | string[]>; multiple?: boolean; color?: ThemeColor; accentColor?: ThemeColor; } = { items: [] })",
      "props": [
        {
          "name": "items",
          "type": "ToggleItem[]",
          "optional": false,
          "doc": "Item definitions `{ label, key? }`."
        },
        {
          "name": "value",
          "type": "ValueOrState<string | string[]>",
          "optional": true,
          "doc": "Selected key(s) (value or State). Defaults to `[]` (multiple) or `\"\"` (single)."
        },
        {
          "name": "multiple",
          "type": "boolean",
          "optional": true,
          "doc": "Allow multiple items selected at once. Defaults to `false`."
        },
        {
          "name": "color",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color for the group background/border. Defaults to `\"neutral\"`."
        },
        {
          "name": "accentColor",
          "type": "ThemeColor",
          "optional": true,
          "doc": "Theme color for the pressed state. Defaults to `\"primary\"`."
        }
      ],
      "doc": "All-in-one toggle group — single or multi-select button group. Generates `<button>` toggle elements from the `items` array. Apply to any wrapper element.",
      "example": "{ div: null, $: [toggleGroup({ multiple: true, items: [ { label: \"Bold\", key: \"bold\" }, { label: \"Italic\", key: \"italic\" }, ] })] }",
      "source": "packages/ui/src/patches/toggleGroup.ts"
    },
    {
      "name": "toolbar",
      "hostTag": null,
      "signature": "toolbar(props: { gap?: number } = {})",
      "props": [
        {
          "name": "gap",
          "type": "number",
          "optional": true,
          "doc": "Spacing multiplier for gap between items (default 4 = 1em)."
        }
      ],
      "doc": "A horizontal flex row with vertically centered items. Useful for headers, toolbars, navigation bars, and action strips. A semantic alias of `row()` at its default alignment — reach for `row()` directly for `justify`/`wrap`/ `align` beyond this shape.",
      "example": "{ header: [...], $: [toolbar()] }",
      "source": "packages/ui/src/patches/toolbar.ts"
    },
    {
      "name": "toolbarSpacer",
      "hostTag": null,
      "signature": "toolbarSpacer()",
      "props": [],
      "doc": "A flex spacer that expands to fill available space in a toolbar, pushing subsequent items to the far end.",
      "example": "{ header: [logo, toolbarSpacer(), nav, actions], $: [toolbar()] }",
      "source": "packages/ui/src/patches/toolbar.ts"
    },
    {
      "name": "tooltip",
      "hostTag": null,
      "signature": "tooltip(props: { open?: ValueOrState<boolean>; placement?: ValueOrState<Placement>; content?: ValueOrState<string>; } = {})",
      "props": [
        {
          "name": "open",
          "type": "ValueOrState<boolean>",
          "optional": true,
          "doc": "Controlled open state. Optional, accepts a value or state. Defaults to `false`."
        },
        {
          "name": "placement",
          "type": "ValueOrState<Placement>",
          "optional": true,
          "doc": "Floating placement relative to the trigger. Optional, accepts a value or state (`Placement`). Defaults to `\"top\"`."
        },
        {
          "name": "content",
          "type": "ValueOrState<string>",
          "optional": true,
          "doc": "Tooltip text content. Optional, accepts a value or state (string only). Defaults to `\"Tooltip Content\"`."
        }
      ],
      "doc": "Attaches a floating tooltip to the host element, shown on hover/focus and hidden on leave/blur/Escape. Returns the anchor (trigger) partial; the tooltip surface is positioned via the floating utility and linked with `aria-describedby`. No host tag check; applied to the trigger element.",
      "example": "{ button: \"Hover me\", $: [tooltip({ content: \"Help text\" })] }",
      "source": "packages/ui/src/patches/tooltip.ts"
    },
    {
      "name": "transitionGroup",
      "hostTag": null,
      "signature": "transitionGroup(props: { duration?: number; delay?: number } = {})",
      "props": [
        {
          "name": "duration",
          "type": "number",
          "optional": true,
          "doc": "Transition duration in milliseconds. Optional. Defaults to `300`."
        },
        {
          "name": "delay",
          "type": "number",
          "optional": true,
          "doc": "Transition delay in milliseconds. Optional. Defaults to `0`."
        }
      ],
      "doc": "Animates child reordering using the FLIP technique: records each child's position before an update and smoothly transitions it from its old to new position afterward. No host tag check; applied to the list container.",
      "example": "{ ul: null, $: [transitionGroup({ duration: 300 })] }",
      "source": "packages/ui/src/patches/transitionGroup.ts"
    },
    {
      "name": "unorderedList",
      "hostTag": "ul",
      "signature": "unorderedList(props: { color?: ValueOrState<ThemeColor> } = {})",
      "props": [
        {
          "name": "color",
          "type": "ValueOrState<ThemeColor>",
          "optional": true,
          "doc": "Theme color for the list text. Optional, accepts a value or state. Defaults to `\"neutral\"`."
        }
      ],
      "doc": "Styles a bulleted list (disc markers, reset margins, themed text) on the host `<ul>` element.",
      "example": "{ ul: null, $: [unorderedList()] }",
      "source": "packages/ui/src/patches/unorderedList.ts"
    },
    {
      "name": "visuallyHidden",
      "hostTag": null,
      "signature": "visuallyHidden()",
      "props": [],
      "doc": "Visually hides an element while keeping it in the accessibility tree — the classic \"sr-only\" recipe for screen-reader-only labels, live-region text, and skip links (before focus). Styles the host only; apply to any element.",
      "example": "{ span: \"Opens in a new tab\", $: [visuallyHidden()] }",
      "source": "packages/ui/src/patches/visuallyHidden.ts"
    }
  ]
}