@cueplusplus/ui 0.12.0 → 0.14.0

package/dist/chrome/band.js

@@ -0,0 +1,97 @@
+import { cn } from "../lib/cn.js";
+import { Container } from "../layout/container.js";
+import { bandClasses } from "./_band.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/chrome/band.tsx
+/**
+* What each separation adds to the frame `bandClasses` draws, and the two
+* `--cue-*` names that live in this file rather than in the chassis beside it.
+*
+* `_band.ts` holds only what `Footer` can also render — the rhythm and the
+* rule — because docgen's token scanner reads a chassis file whole and cannot
+* see that `Footer` calls `bandClasses` with the literal `"rule"`. The ground
+* is reachable only from `<Band separation="ground">`, so it is written here,
+* next to the prop whose value selects it. `_band.ts`'s own docblock carries
+* the argument.
+*
+* `rule`'s entry is the colour and not the width: the width is
+* `--cue-band-rule` and belongs to the chassis, and both elements name
+* `border-border` in their own class list rather than inheriting it from the
+* other.
+*/
+const SEPARATION_PAINT = {
+	rule: "border-border",
+	ground: "bg-(--cue-band-ground)",
+	bleed: null,
+	none: null
+};
+/**
+* A full-bleed horizontal section: the page's rhythm, its separation, and a
+* column at the measure.
+*
+* This is `Footer`'s recipe with the footer taken out of it — a `w-full`
+* element, a rule running edge to edge, and a centred `Container` inside so the
+* line reaches the window while the words stop at the measure. `Footer` is
+* built on this rather than beside it; the recipe exists once.
+*
+* Every dimension it spends belongs to the style axis, so the same markup
+* composes differently under `[data-style]` without a prop changing: the
+* vertical rhythm is `--cue-band-y` (one `--cue-space-7` with no set, doubled
+* under `editorial`, trebled under `marketing`), the column is
+* `--cue-measure-prose` unless `width` names a fixed rung, and the rule and the
+* ground are `--cue-band-rule` and `--cue-band-ground`. Read `separation`'s own
+* documentation before choosing one, because two of the four can come out to
+* nothing and they do not vanish symmetrically: `--cue-band-ground` is
+* `transparent` on `:root` and on two of the three sets, so a `"ground"` paints
+* nothing in three of the four states a page can be in, while `--cue-band-rule`
+* is `0px` under `marketing` alone. Both are deliberate and nothing warns.
+*
+* **Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved
+* at the element that declares it.** A `<Density>` island nested inside a
+* styled page moves every `--cue-space-*` and the band rhythm does **not**
+* follow it — the island inherits the rhythm already resolved above. Restate
+* the set on the island (`<Density density="compact" styleSet="editorial">`) to
+* re-resolve it against that island's rung. Likewise a nested `[data-theme]`
+* under a marketing band paints the **outer** theme's `--cue-surface-1` through
+* an already-resolved `--cue-band-ground`.
+*
+* It renders a `<section>`, which is not a landmark until it has an accessible
+* name — so a band with a heading should carry `aria-labelledby` pointing at
+* it, and a band without one costs the document nothing.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Band aria-labelledby="pitch">
+*   <h2 id="pitch">One import</h2>
+*   <p>Everything on one token layer.</p>
+* </Band>
+* @example
+* <Band separation="ground" width="broad">
+*   <Bento.Root cols={3}>{tiles}</Bento.Root>
+* </Band>
+*/
+const Band = React.forwardRef(function Band({ className, columnClassName, separation = "rule", width = "prose", children, ...elementProps }, ref) {
+	const column = width === "prose" ? {
+		width: "full",
+		className: "max-w-(--cue-measure-prose)"
+	} : {
+		width,
+		className: null
+	};
+	return /* @__PURE__ */ jsx("section", {
+		ref,
+		"data-slot": "band",
+		"data-separation": separation,
+		className: cn(bandClasses(separation), SEPARATION_PAINT[separation], className),
+		...elementProps,
+		children: separation === "bleed" ? children : /* @__PURE__ */ jsx(Container, {
+			width: column.width,
+			className: cn(column.className, columnClassName),
+			children
+		})
+	});
+});
+//#endregion
+export { Band };

package/dist/chrome/empty-state.js

@@ -41,7 +41,7 @@ const EmptyState = React.forwardRef(function EmptyState({ className, title, hint
 			}),
 			hint === void 0 ? null : /* @__PURE__ */ jsx("p", {
 				"data-slot": "empty-state-hint",
-				className: "max-w-[36ch] text-(length:--cue-text-ui) leading-relaxed text-fg-muted",
+				className: "max-w-[36ch] text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted",
 				children: hint
 			}),
 			children,

package/dist/chrome/footer.d.ts

@@ -53,6 +53,19 @@ interface FooterProps extends React.ComponentPropsWithoutRef<"footer"> {
  * and reads as chrome it is not. It coexists with `StatusBar`, which is the
  * opposite object: a strip of the frame, always on screen, never scrolled.
  *
+ * Under the skin this **is** `Band`'s recipe — `separation="rule"`, spent
+ * through `bandClasses` rather than through `<Band>` itself, because `Band`
+ * renders a `<section>` and this has to render the `<footer>` that makes it the
+ * `contentinfo` landmark. The two dimensions that recipe carries are the
+ * rhythm and the rule, and both are the style axis's now, the same as any other
+ * band: see `separation`'s table on `Band` for what each `[data-style]` set
+ * makes them paint. With no set active nothing changes from what this component
+ * always rendered. It does **not** reach `Band`'s other two style-owned
+ * spends — the ground and the reading measure — because `separation` is the
+ * literal `"rule"` here and `width` is a `ContainerWidth`; `_band.ts`'s
+ * docblock says why that is a fact about the published manifest and not only
+ * about the markup.
+ *
  * Static markup — no `"use client"`.
  *
  * @example

package/dist/chrome/footer.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { Container } from "../layout/container.js";
+import { bandClasses } from "./_band.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/footer.tsx
@@ -30,6 +31,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * and reads as chrome it is not. It coexists with `StatusBar`, which is the
 * opposite object: a strip of the frame, always on screen, never scrolled.
 *
+* Under the skin this **is** `Band`'s recipe — `separation="rule"`, spent
+* through `bandClasses` rather than through `<Band>` itself, because `Band`
+* renders a `<section>` and this has to render the `<footer>` that makes it the
+* `contentinfo` landmark. The two dimensions that recipe carries are the
+* rhythm and the rule, and both are the style axis's now, the same as any other
+* band: see `separation`'s table on `Band` for what each `[data-style]` set
+* makes them paint. With no set active nothing changes from what this component
+* always rendered. It does **not** reach `Band`'s other two style-owned
+* spends — the ground and the reading measure — because `separation` is the
+* literal `"rule"` here and `width` is a `ContainerWidth`; `_band.ts`'s
+* docblock says why that is a fact about the published manifest and not only
+* about the markup.
+*
 * Static markup — no `"use client"`.
 *
 * @example
@@ -51,11 +65,12 @@ const Footer = React.forwardRef(function Footer({ className, columnClassName, wi
 	return /* @__PURE__ */ jsx("footer", {
 		ref,
 		"data-slot": "footer",
-		className: cn("w-full border-t border-border", className),
+		"data-separation": "rule",
+		className: cn(bandClasses("rule"), "border-border", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsxs(Container, {
 			width,
-			className: cn("flex flex-col gap-(--cue-space-6) py-(--cue-space-7) font-mono text-(length:--cue-text-ui)", columnClassName),
+			className: cn("flex flex-col gap-(--cue-space-6) font-mono text-(length:--cue-text-ui)", columnClassName),
 			children: [children, meta === void 0 ? null : /* @__PURE__ */ jsx("div", {
 				"data-slot": "footer-meta",
 				className: "flex flex-wrap items-center justify-between gap-(--cue-space-3) border-t border-border pt-(--cue-space-5) font-mono text-(length:--cue-text-label) text-fg-subtle",

package/dist/chrome/index.d.ts

@@ -3,6 +3,7 @@ import { BarOverflow } from "./_edge-scroller.js";
 import { TREE_GUIDE_GLYPHS, TreeGuide, TreeItem, TreeRow, flattenTree } from "./_tree.js";
 import { AppBar, AppBarActionsProps, AppBarBrandProps, AppBarLinkProps, AppBarNavProps, AppBarRegister, AppBarRootProps, AppBarSeparatorProps } from "./app-bar.js";
 import { AppShell, AppShellAsideProps, AppShellBarProps, AppShellBodyProps, AppShellContentProps, AppShellNavTriggerProps, AppShellRootProps, AppShellScrollerProps, AppShellSidebarProps } from "./app-shell.js";
+import { Band, BandProps, BandSeparation, BandWidth } from "./band.js";
 import { EmptyState, EmptyStateProps } from "./empty-state.js";
 import { Eyebrow, EyebrowProps } from "./eyebrow.js";
 import { Footer, FooterProps } from "./footer.js";
@@ -20,4 +21,4 @@ import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsP
 import { TitleBar, TitleBarProps } from "./title-bar.js";
 import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./tree.js";
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./toolbar.js";
-export { AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, PageShell, type PageShellProps, type PageWidth, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, SeamList, type SeamListProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TitleBar, type TitleBarProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };
+export { AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, PageShell, type PageShellProps, type PageWidth, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, SeamList, type SeamListProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TitleBar, type TitleBarProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };

package/dist/chrome/index.js

@@ -2,6 +2,7 @@ import { TAB_FADE_PX, computeScrollEdges, edgeFadeMask } from "./_tabs-scroll.js
 import { TREE_GUIDE_GLYPHS, flattenTree } from "./_tree.js";
 import { AppBar } from "./app-bar.js";
 import { AppShell } from "./app-shell.js";
+import { Band } from "./band.js";
 import { EmptyState } from "./empty-state.js";
 import { Eyebrow } from "./eyebrow.js";
 import { Footer } from "./footer.js";
@@ -18,4 +19,4 @@ import { ScrollableTabsList, Tabs } from "./tabs.js";
 import { TitleBar } from "./title-bar.js";
 import { Tree, TreeVisibilityToggle } from "./tree.js";
 import { Toolbar } from "./toolbar.js";
-export { AppBar, AppShell, EmptyState, Eyebrow, Footer, Inspector, NavigationMenu, PageShell, Panel, PanelHeader, Row, ScrollArea, ScrollableTabsList, SeamList, SectionHeader, SegmentedControl, StatusBar, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, TitleBar, Toolbar, Tree, TreeVisibilityToggle, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };
+export { AppBar, AppShell, Band, EmptyState, Eyebrow, Footer, Inspector, NavigationMenu, PageShell, Panel, PanelHeader, Row, ScrollArea, ScrollableTabsList, SeamList, SectionHeader, SegmentedControl, StatusBar, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, TitleBar, Toolbar, Tree, TreeVisibilityToggle, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };

package/dist/chrome/navigation-menu.js

@@ -89,7 +89,7 @@ const NavigationMenu$1 = {
 			className: cn("flex cursor-pointer flex-col gap-(--cue-space-1) rounded-(--radius-control) px-(--cue-space-3) py-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg-muted no-underline transition-colors duration-150 outline-none select-none hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[active]:text-accent", className),
 			...elementProps,
 			children: [/* @__PURE__ */ jsx("span", { children }), description === void 0 ? null : /* @__PURE__ */ jsx("span", {
-				className: "text-(length:--cue-text-label) leading-relaxed text-fg-subtle",
+				className: "text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg-subtle",
 				children: description
 			})]
 		});

package/dist/chrome/page-shell.js

@@ -17,9 +17,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * with its own scroller — is `AppShell`, not this.
 */
 const WIDTHS = {
-	narrow: "max-w-[42rem]",
-	wide: "max-w-[54rem]",
-	broad: "max-w-[84rem]",
+	narrow: "max-w-(--cue-measure-narrow)",
+	wide: "max-w-(--cue-measure-wide)",
+	broad: "max-w-(--cue-measure-broad)",
 	full: ""
 };
 /**
@@ -60,7 +60,7 @@ const PageShell = React.forwardRef(function PageShell({ className, width = "narr
 					}),
 					subtitle === void 0 ? null : /* @__PURE__ */ jsx("p", {
 						"data-slot": "page-shell-subtitle",
-						className: "font-mono text-(length:--cue-text-ui) leading-relaxed text-fg-muted",
+						className: "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted",
 						children: subtitle
 					})
 				]

package/dist/configurator/export-dialog.js

@@ -96,7 +96,7 @@ function ExportDialog({ open, onOpenChange, overrides, scope, defaultFormat = "c
 						}), /* @__PURE__ */ jsx("pre", {
 							"data-testid": "configurator-export-text",
 							"data-slot": "configurator-export-text",
-							className: "max-h-[38vh] overflow-auto rounded-(--radius-control) border border-border bg-sunken p-(--cue-space-3) font-mono text-(length:--cue-text-label) leading-relaxed whitespace-pre text-fg",
+							className: "max-h-[38vh] overflow-auto rounded-(--radius-control) border border-border bg-sunken p-(--cue-space-3) font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) whitespace-pre text-fg",
 							children: entry.text
 						})]
 					}, entry.id))]

package/dist/configurator/panel-sections.js

@@ -327,7 +327,7 @@ function ShapeSection({ edits, className }) {
 				bounds: DENSITY_NUDGE
 			}),
 			/* @__PURE__ */ jsxs("p", {
-				className: "font-mono text-(length:--cue-text-micro) leading-relaxed text-fg-subtle",
+				className: "font-mono text-(length:--cue-text-micro) leading-(--cue-leading-ui) text-fg-subtle",
 				children: [
 					"Density factor scales app geometry that reads ",
 					/* @__PURE__ */ jsx("code", { children: "var(--cue-density)" }),

package/dist/elements/agent-card.js

@@ -51,7 +51,7 @@ function AgentCard({ name, description, provider, version, model, endpoint, skil
 				})]
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-fg-muted text-(length:--cue-text-ui) leading-relaxed",
+				className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
 				children: description
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/elements/agent-handoff.js

@@ -33,7 +33,7 @@ function AgentHandoff({ from, to, reason, carried, settled, className, ...props
 				]
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-fg-muted text-(length:--cue-text-ui) leading-relaxed",
+				className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
 				children: reason
 			}),
 			carried.length > 0 && /* @__PURE__ */ jsxs("div", {
@@ -42,7 +42,7 @@ function AgentHandoff({ from, to, reason, carried, settled, className, ...props
 					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
 					children: "carried over"
 				}), carried.map((item) => /* @__PURE__ */ jsx("span", {
-					className: "text-fg-muted border-border border-s ps-2.5 text-(length:--cue-text-ui) leading-relaxed",
+					className: "text-fg-muted border-border border-s ps-2.5 text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
 					children: item
 				}, item))]
 			})

package/dist/elements/canvas-split.js

@@ -54,7 +54,7 @@ function CanvasSplitMessage({ speaker, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "canvas-split-message",
 		"data-speaker": speaker,
-		className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-relaxed duration-300", speaker === "user" ? cn(field, "text-fg-muted ms-auto rounded-(--radius-overlay) px-3 py-2") : "text-fg-muted", className),
+		className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300", speaker === "user" ? cn(field, "text-fg-muted ms-auto rounded-(--radius-overlay) px-3 py-2") : "text-fg-muted", className),
 		...props
 	});
 }
@@ -130,7 +130,7 @@ function CanvasSplitBody({ writing, className, children, ...props }) {
 function CanvasSplitLine({ heading, className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "canvas-split-line",
-		className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-relaxed duration-300", heading ? "text-fg font-medium" : "text-fg-muted", className),
+		className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300", heading ? "text-fg font-medium" : "text-fg-muted", className),
 		...props
 	});
 }

package/dist/elements/chat-panel.js

@@ -54,7 +54,7 @@ function ChatPanelUserMessage({ className, ...props }) {
 function ChatPanelAssistantMessage({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "chat-panel-assistant-message",
-		className: cn("text-fg-muted max-w-[85%] self-start text-(length:--cue-text-ui) leading-relaxed", className),
+		className: cn("text-fg-muted max-w-[85%] self-start text-(length:--cue-text-ui) leading-(--cue-leading-ui)", className),
 		...props
 	});
 }

package/dist/elements/code-diff.js

@@ -54,7 +54,7 @@ function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...
 			children: /* @__PURE__ */ jsx("div", {
 				className: codeSurface,
 				children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", {
-					className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both flex px-4 py-0.5 leading-relaxed whitespace-pre duration-300", line.kind === "context" && "text-fg-muted", line.kind === "added" && "bg-ok/10 text-ok", line.kind === "removed" && "bg-danger/10 text-danger"),
+					className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both flex px-4 py-0.5 leading-(--cue-leading-ui) whitespace-pre duration-300", line.kind === "context" && "text-fg-muted", line.kind === "added" && "bg-ok/10 text-ok", line.kind === "removed" && "bg-danger/10 text-danger"),
 					style: { animationDelay: `${i * 60}ms` },
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "w-4 shrink-0 select-none",

package/dist/elements/code-runner.js

@@ -47,7 +47,7 @@ function CodeRunner({ language, code, state, output, durationMs, onRun, classNam
 				]
 			}),
 			/* @__PURE__ */ jsx("pre", {
-				className: "border-border overflow-x-auto border-t px-3.5 py-2.5 font-mono text-(length:--cue-text-ui) leading-relaxed",
+				className: "border-border overflow-x-auto border-t px-3.5 py-2.5 font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
 				children: /* @__PURE__ */ jsx("code", {
 					className: "text-fg-muted",
 					children: code
@@ -65,7 +65,7 @@ function CodeRunner({ language, code, state, output, durationMs, onRun, classNam
 						children: /* @__PURE__ */ jsx("div", {
 							className: cn("w-max min-w-full", "flex flex-col"),
 							children: output.map((line, i) => /* @__PURE__ */ jsx("span", {
-								className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both font-mono text-(length:--cue-text-ui) leading-relaxed whitespace-pre", state === "error" ? "text-danger" : "text-fg-muted"),
+								className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) whitespace-pre", state === "error" ? "text-danger" : "text-fg-muted"),
 								style: { animationDelay: `${i * 80}ms` },
 								children: line
 							}, `${i}-${line}`))

package/dist/elements/comparison-card.js

@@ -60,7 +60,7 @@ function ComparisonCard({ traitLabels, options, recommendedId, reason, className
 				}, option.id);
 			})
 		}), /* @__PURE__ */ jsx("p", {
-			className: "text-fg-muted text-(length:--cue-text-ui) leading-relaxed",
+			className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
 			children: reason
 		})]
 	});

package/dist/elements/confidence-marker.js

@@ -30,7 +30,7 @@ function ConfidenceMarker({ claims, hoveredId, onHover, className, ...props }) {
 		className: cn("flex w-full max-w-sm flex-col gap-2.5", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("p", {
-			className: "text-(length:--cue-text-body) leading-relaxed",
+			className: "text-(length:--cue-text-body) leading-(--cue-leading-ui)",
 			children: claims.map((claim) => /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				"aria-describedby": hoveredId === claim.id ? basisId : void 0,

package/dist/elements/conversation-search.js

@@ -58,7 +58,7 @@ function ConversationSearch({ query, hits, activeIndex, onQueryChange, onStep, c
 					})
 				]
 			}), active && /* @__PURE__ */ jsxs("div", {
-				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-ui) leading-relaxed duration-200"),
+				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-200"),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "text-fg-muted",

package/dist/elements/day-separator.js

@@ -35,7 +35,7 @@ function DaySeparator({ messages, className, ...props }) {
 				}), /* @__PURE__ */ jsxs("div", {
 					className: cn("group flex items-baseline gap-2", message.role === "user" && "flex-row-reverse"),
 					children: [/* @__PURE__ */ jsx("span", {
-						className: cn("max-w-[80%] text-(length:--cue-text-body) leading-relaxed break-words", message.role === "user" ? "bg-surface-1 rounded-(--radius-overlay) px-3.5 py-2" : "text-fg-muted"),
+						className: cn("max-w-[80%] text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words", message.role === "user" ? "bg-surface-1 rounded-(--radius-overlay) px-3.5 py-2" : "text-fg-muted"),
 						children: message.text
 					}), /* @__PURE__ */ jsx("span", {
 						className: cn(mono, "text-transparent group-hover:text-fg-subtle shrink-0 tabular-nums transition-colors"),

package/dist/elements/document-reference.js

@@ -55,7 +55,7 @@ function DocumentReference({ title, pages, anchors, activePage, onJump, classNam
 					className: cn(mono, "text-fg-subtle"),
 					children: ["p. ", anchor.page]
 				}), /* @__PURE__ */ jsx("span", {
-					className: "text-fg-muted border-border-strong border-s-2 ps-2 text-(length:--cue-text-ui) leading-relaxed break-words",
+					className: "text-fg-muted border-border-strong border-s-2 ps-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) break-words",
 					children: anchor.quote
 				})]
 			}, `${anchor.page}-${i}`))

package/dist/elements/edit-message.js

@@ -42,7 +42,7 @@ function EditMessage({ value, discardedReplies, editing, onValueChange, onSave,
 				onChange: (event) => onValueChange?.(event.target.value),
 				rows: 2,
 				"aria-label": "Edit your message",
-				className: cn(field, "text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent resize-none rounded-(--radius-surface) px-3 py-2.5 text-(length:--cue-text-body) leading-relaxed outline-none")
+				className: cn(field, "text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent resize-none rounded-(--radius-surface) px-3 py-2.5 text-(length:--cue-text-body) leading-(--cue-leading-ui) outline-none")
 			}),
 			discardedReplies > 0 && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 text-warn",

package/dist/elements/elicitation-form.js

@@ -43,7 +43,7 @@ function ElicitationForm({ server, message, fields, state, onAccept, onDecline,
 				]
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-fg-muted text-(length:--cue-text-ui) leading-relaxed",
+				className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
 				children: message
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/elements/guardrail-notice.js

@@ -41,7 +41,7 @@ function GuardrailNotice({ title, explanation, policy, alternatives, onPick, cla
 				]
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-fg-muted text-(length:--cue-text-ui) leading-relaxed",
+				className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
 				children: explanation
 			}),
 			alternatives.length > 0 && /* @__PURE__ */ jsxs("div", {

package/dist/elements/image-generation.js

@@ -35,7 +35,7 @@ function ImageGeneration({ prompt, generating, className, ...props }) {
 				}),
 				/* @__PURE__ */ jsx("div", {
 					"aria-hidden": true,
-					className: cn("absolute inset-0 transition-[opacity,filter] duration-1000 ease-out motion-reduce:transition-none", generating ? "opacity-0 blur-xl" : "blur-0 opacity-100"),
+					className: cn("absolute inset-0 transition-[opacity,filter] duration-1000 ease-out motion-reduce:transition-none", generating ? "opacity-0 blur-xl" : "blur-none opacity-100"),
 					style: { background: "radial-gradient(120% 90% at 20% 100%, oklch(0.45 0.09 265) 0%, transparent 55%), radial-gradient(110% 80% at 85% 90%, oklch(0.62 0.1 300 / 0.8) 0%, transparent 60%), radial-gradient(130% 100% at 60% 0%, oklch(0.88 0.06 60) 0%, oklch(0.74 0.09 25 / 0.9) 45%, transparent 75%), linear-gradient(to top, oklch(0.35 0.06 275), oklch(0.82 0.07 50))" }
 				}),
 				/* @__PURE__ */ jsx("span", {

package/dist/elements/inline-citation.js

@@ -38,7 +38,7 @@ function Citation({ index, source, open, onOpenChange }) {
 							children: source.title
 						}),
 						/* @__PURE__ */ jsx("p", {
-							className: "text-fg-muted mt-1 text-(length:--cue-text-body) leading-relaxed",
+							className: "text-fg-muted mt-1 text-(length:--cue-text-body) leading-(--cue-leading-ui)",
 							children: source.snippet
 						})
 					]
@@ -68,7 +68,7 @@ function Citation({ index, source, open, onOpenChange }) {
 function InlineCitation({ sources, openIndex, onOpenIndexChange, className, ...props }) {
 	return /* @__PURE__ */ jsxs("p", {
 		"data-slot": "inline-citation",
-		className: cn("text-fg max-w-sm text-(length:--cue-text-body) leading-relaxed", className),
+		className: cn("text-fg max-w-sm text-(length:--cue-text-body) leading-(--cue-leading-ui)", className),
 		...props,
 		children: [
 			"Optimistic updates keep the thread responsive while the server confirms the write",

package/dist/elements/markdown.js

@@ -403,7 +403,7 @@ const MarkdownText = React.forwardRef(function MarkdownText({ className, childre
 		ref,
 		"data-slot": "markdown-text",
 		"data-streaming": streaming ? "" : void 0,
-		className: cn("flex min-w-0 flex-col gap-(--cue-space-3) text-(length:--cue-text-body) leading-relaxed break-words whitespace-normal", className),
+		className: cn("flex min-w-0 flex-col gap-(--cue-space-3) text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words whitespace-normal", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx(Markdown, {
 			components,

package/dist/elements/math-block.js

@@ -23,7 +23,7 @@ function MathBlock({ label, steps, visibleSteps, className, ...props }) {
 		}), take(steps, visibleSteps).map((step, i) => /* @__PURE__ */ jsxs("div", {
 			className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex flex-col gap-1 duration-300",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-fg overflow-x-auto py-1 text-center font-serif text-(length:--cue-text-emphasis) leading-relaxed italic",
+				className: "text-fg overflow-x-auto py-1 text-center font-serif text-(length:--cue-text-emphasis) leading-(--cue-leading-ui) italic",
 				children: step.expression
 			}), step.note && /* @__PURE__ */ jsx("span", {
 				className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle text-center"),

package/dist/elements/message-branches.js

@@ -32,7 +32,7 @@ function MessageBranches({ variants, index, onIndexChange, className, ...props }
 		className: cn("flex max-w-sm flex-col gap-2", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("p", {
-			className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in text-fg min-h-[4.25rem] text-(length:--cue-text-body) leading-relaxed duration-300 motion-reduce:animate-none",
+			className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in text-fg min-h-[4.25rem] text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300 motion-reduce:animate-none",
 			children: message
 		}, index), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",

package/dist/elements/message-pair.js

@@ -30,7 +30,7 @@ function MessagePair({ userMessage, words, visibleWords, streaming, variant = "b
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "group/message flex flex-col items-start",
 			children: [/* @__PURE__ */ jsxs("p", {
-				className: "min-h-[4.25rem] text-(length:--cue-text-body) leading-relaxed",
+				className: "min-h-[4.25rem] text-(length:--cue-text-body) leading-(--cue-leading-ui)",
 				children: [shown.map((word, index) => {
 					const fresh = streaming && shown.length - 1 - index < 2;
 					return /* @__PURE__ */ jsxs("span", {

package/dist/elements/onboarding.js

@@ -37,11 +37,11 @@ function Onboarding({ steps, index, onNext, onSkip, className, ...props }) {
 					children: step.title
 				}),
 				/* @__PURE__ */ jsx("p", {
-					className: "text-fg-muted text-(length:--cue-text-body) leading-relaxed break-words",
+					className: "text-fg-muted text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words",
 					children: step.body
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: cn(field, "text-fg-muted rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-body) leading-relaxed"),
+					className: cn(field, "text-fg-muted rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-body) leading-(--cue-leading-ui)"),
 					children: step.example
 				})
 			]

package/dist/elements/prompt-library.js

@@ -100,7 +100,7 @@ function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, on
 			selected && /* @__PURE__ */ jsxs("div", {
 				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 rounded-(--radius-surface) p-2.5 duration-200"),
 				children: [/* @__PURE__ */ jsx("p", {
-					className: "text-fg-muted text-(length:--cue-text-ui) leading-relaxed break-words",
+					className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui) break-words",
 					children: selected.body
 				}), selected.variables.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap gap-1",

package/dist/elements/quote-reply.js

@@ -31,7 +31,7 @@ function QuoteReply({ before, selection, after, actions, toolbarVisible, quoted,
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("p", {
-				className: "relative text-(length:--cue-text-body) leading-relaxed",
+				className: "relative text-(length:--cue-text-body) leading-(--cue-leading-ui)",
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "text-fg-muted",
@@ -68,7 +68,7 @@ function QuoteReply({ before, selection, after, actions, toolbarVisible, quoted,
 					className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),
 					children: "replying to"
 				}), /* @__PURE__ */ jsx("div", {
-					className: "border-border-strong text-fg-muted border-s-2 ps-2.5 text-(length:--cue-text-ui) leading-relaxed",
+					className: "border-border-strong text-fg-muted border-s-2 ps-2.5 text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
 					children: quoted
 				})]
 			})

package/dist/elements/read-aloud.js

@@ -29,7 +29,7 @@ function ReadAloud({ words, spokenIndex, playing, rate, elapsed, duration, onTog
 		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-3.5", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("p", {
-			className: "text-(length:--cue-text-body) leading-relaxed",
+			className: "text-(length:--cue-text-body) leading-(--cue-leading-ui)",
 			children: words.map((word, i) => /* @__PURE__ */ jsxs("span", {
 				className: cn("transition-colors duration-200 motion-reduce:transition-none", i < spokenIndex ? "text-fg-subtle" : i === spokenIndex ? "text-fg rounded-(--radius-control) bg-stream/15" : "text-fg-muted"),
 				children: [word, " "]

package/dist/elements/reasoning-panel.js

@@ -61,7 +61,7 @@ function ReasoningPanel({ steps, visibleSteps, streaming, open, onOpenChange, re
 								className: "text-fg text-(length:--cue-text-body) font-medium",
 								children: step.title
 							}), /* @__PURE__ */ jsx("p", {
-								className: "text-fg-muted mt-0.5 text-(length:--cue-text-body) leading-relaxed break-words",
+								className: "text-fg-muted mt-0.5 text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words",
 								children: step.body
 							})]
 						})]

package/dist/elements/recommendation-card.js

@@ -40,7 +40,7 @@ function RecommendationCard({ state, question, children, confidenceLabel, accept
 				children: question
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-fg-muted text-(length:--cue-text-body) leading-relaxed",
+				className: "text-fg-muted text-(length:--cue-text-body) leading-(--cue-leading-ui)",
 				children
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/elements/research-report.js

@@ -58,7 +58,7 @@ function ResearchReport({ title, sections, sourcesRead, className, ...props }) {
 						})
 					]
 				}), section.preview && /* @__PURE__ */ jsx("p", {
-					className: "text-fg-muted cue-elements-fade-in cue-elements-animate-in ps-5.5 text-(length:--cue-text-ui) leading-relaxed duration-300",
+					className: "text-fg-muted cue-elements-fade-in cue-elements-animate-in ps-5.5 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-300",
 					children: section.preview
 				})]
 			}, section.id))

package/dist/elements/retrieval-chunks.js

@@ -61,7 +61,7 @@ function RetrievalChunks({ query, chunks, visibleCount, searching, className, ..
 							]
 						}),
 						/* @__PURE__ */ jsx("p", {
-							className: "text-fg-muted line-clamp-2 text-(length:--cue-text-ui) leading-relaxed",
+							className: "text-fg-muted line-clamp-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui)",
 							children: chunk.text
 						}),
 						/* @__PURE__ */ jsx("span", {

package/dist/elements/reviewable-diff.js

@@ -80,7 +80,7 @@ function ReviewableDiff({ filename, hunks, onKeep, onDiscard, onApply, className
 						children: /* @__PURE__ */ jsx("div", {
 							className: codeSurface,
 							children: hunk.lines.map((line, i) => /* @__PURE__ */ jsxs("div", {
-								className: cn("flex px-4 py-0.5 leading-relaxed whitespace-pre", line.kind === "context" && "text-fg-subtle", line.kind === "added" && "bg-ok/10 text-ok", line.kind === "removed" && "bg-danger/10 text-danger"),
+								className: cn("flex px-4 py-0.5 leading-(--cue-leading-ui) whitespace-pre", line.kind === "context" && "text-fg-subtle", line.kind === "added" && "bg-ok/10 text-ok", line.kind === "removed" && "bg-danger/10 text-danger"),
 								children: [/* @__PURE__ */ jsx("span", {
 									className: "w-4 shrink-0 select-none",
 									children: GUTTER[line.kind]