@cueplusplus/ui 0.13.0

package/dist/flow/signal-edge.js

@@ -0,0 +1,108 @@
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BaseEdge, getBezierPath } from "@xyflow/react";
+//#region src/flow/signal-edge.tsx
+const TONE_COLORS = {
+	accent: "var(--cue-accent)",
+	ok: "var(--cue-ok)",
+	busy: "var(--cue-busy)",
+	warn: "var(--cue-warn)",
+	danger: "var(--cue-danger)",
+	info: "var(--cue-info)"
+};
+/** A wire nobody has switched on. */
+const MUTED_COLOR = "var(--cue-fg-subtle)";
+/** Selection is the loudest thing on the canvas, and it is never a hue. */
+const SELECTED_COLOR = "var(--cue-fg)";
+/**
+* The class the animated overlay carries.
+*
+* `flow.css` owns its `@keyframes` and its reduced-motion switch; the dash
+* pattern itself is inline, so an app that never imported the stylesheet still
+* gets a legible dashed highlight instead of a mystery second line.
+*/
+const SIGNAL_EDGE_FLOW_CLASS = "cue-signal-flow";
+/**
+* Width of the invisible path the pointer actually hits, in px.
+*
+* A 1.6px wire is a nearly impossible click target and an outright impossible
+* touch target. The library's own default is 20; 16 is the port's, and it is
+* wide enough without swallowing the gap between two parallel wires.
+*/
+const SIGNAL_EDGE_INTERACTION_WIDTH = 16;
+/** The dash and gap of the flowing overlay, in px. */
+const FLOW_DASH = "3 8";
+/** A pale mix of the wire's own colour: the same signal, not a second one. */
+function flowHighlight(stroke) {
+	return `color-mix(in oklch, ${stroke} 55%, var(--cue-fg))`;
+}
+/**
+* A wire between two nodes, drawn as three paths.
+*
+* 1. **The wire.** A bezier in the tone's colour, thin and half-lit at rest.
+* 2. **The hit path.** Sixteen invisible pixels of it, because nobody can click
+*    1.6px. `BaseEdge` draws this one, and the edge label, for free.
+* 3. **The pulse.** Only while `data.live` — a pale dashed overlay of the same
+*    colour, marching along the wire. This is the only animation in the group,
+*    it carries no information the opacity does not, and `flow.css` stops it
+*    dead under `prefers-reduced-motion`.
+*
+* State is read from props rather than from a store on purpose: an edge that
+* subscribed to "is this route live" would re-render on every frame of a 40Hz
+* telemetry feed, times the number of edges. The host decides when the answer
+* changed; this component only draws it. It also means the component is a pure
+* function of its props — no hooks, no context, no canvas needed to test it.
+*
+* Selection outranks everything, including the pulse: two loud treatments on one
+* wire read as neither.
+*
+* @example
+* const edges = [{ id: "r1", source: "s1", target: "m1", type: "signal", data: { live: true } }];
+* <ReactFlow edges={edges} edgeTypes={theme.edgeTypes} />
+*/
+function SignalEdge({ id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, selected, data, style, markerStart, markerEnd, interactionWidth = 16, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius }) {
+	const [path, labelX, labelY] = getBezierPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition
+	});
+	const muted = data?.muted === true;
+	const live = data?.live === true && !muted && selected !== true;
+	const stroke = selected === true ? SELECTED_COLOR : muted ? MUTED_COLOR : TONE_COLORS[data?.tone ?? "accent"];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BaseEdge, {
+		id,
+		path,
+		markerStart,
+		markerEnd,
+		interactionWidth,
+		label,
+		labelX,
+		labelY,
+		labelStyle,
+		labelShowBg,
+		labelBgStyle,
+		labelBgPadding,
+		labelBgBorderRadius,
+		style: {
+			stroke,
+			strokeWidth: selected === true ? 2.4 : muted ? 1 : 1.6,
+			opacity: selected === true || live ? 1 : muted ? .4 : .6,
+			...style
+		}
+	}), live ? /* @__PURE__ */ jsx("path", {
+		d: path,
+		fill: "none",
+		pointerEvents: "none",
+		className: SIGNAL_EDGE_FLOW_CLASS,
+		style: {
+			stroke: flowHighlight(stroke),
+			strokeWidth: 1.9,
+			strokeDasharray: FLOW_DASH
+		}
+	}) : null] });
+}
+//#endregion
+export { SIGNAL_EDGE_FLOW_CLASS, SIGNAL_EDGE_INTERACTION_WIDTH, SignalEdge };

package/dist/flow/use-flow-theme.d.ts

@@ -0,0 +1,69 @@
+import { ResolvedMode } from "../system/theme-provider.js";
+import { FlowNodeTone } from "./_frame.js";
+import { SignalEdge } from "./signal-edge.js";
+import * as React from "react";
+//#region src/flow/use-flow-theme.d.ts
+/**
+ * React Flow paints its own chrome — edges, handles, controls, the minimap, the
+ * selection box — from a documented set of `--xy-*` custom properties, each one
+ * consulted before the library's built-in default. Mapping that set onto this
+ * system's tokens is the whole theme: no wrapper components, no props threaded
+ * through a graph, and a theme, mode or density switch that costs nothing
+ * because every value is a *reference*, re-resolved by the browser.
+ *
+ * The map is published two ways, and they are checked against each other
+ * (`test/flow/flow-css.test.ts`):
+ *
+ * - as this object, to spread on the canvas: `<ReactFlow style={theme.style}>`;
+ * - as the `.react-flow` block of `flow.css`, for apps that would rather import
+ *   a stylesheet than thread a prop.
+ *
+ * Either is enough. Both is harmless.
+ */
+declare const FLOW_THEME_VARIABLES: Readonly<Record<string, string>>;
+interface FlowTheme {
+  /**
+   * The resolved mode, for `<ReactFlow colorMode>`.
+   *
+   * Only a fallback: with {@link FlowTheme.style} spread (or `flow.css`
+   * imported) every value the library would pick from its own light/dark
+   * defaults has already been overridden. It costs one prop to be right anyway
+   * for the one that has not.
+   */
+  colorMode: ResolvedMode;
+  /** The `--xy-*` token map. Spread on `<ReactFlow style>`. */
+  style: Readonly<Record<string, string>>;
+  /** `{ signal: SignalEdge }`, stable across renders. */
+  edgeTypes: Readonly<Record<"signal", typeof SignalEdge>>;
+  /** `{ type: "signal", interactionWidth }`, stable across renders. */
+  defaultEdgeOptions: Readonly<{
+    type: "signal";
+    interactionWidth: number;
+  }>;
+  /** Frame colour per node kind, for a node's own `style`. */
+  nodeStyles: Readonly<Record<FlowNodeTone, React.CSSProperties>>;
+}
+/**
+ * Everything a `<ReactFlow>` needs to look like it belongs to this system.
+ *
+ * @example
+ * const theme = useFlowTheme();
+ * <ReactFlow
+ *   nodes={nodes}
+ *   edges={edges}
+ *   nodeTypes={nodeTypes}
+ *   edgeTypes={theme.edgeTypes}
+ *   defaultEdgeOptions={theme.defaultEdgeOptions}
+ *   colorMode={theme.colorMode}
+ *   style={theme.style}
+ * >
+ *   <FlowBackground />
+ *   <FlowControls />
+ * </ReactFlow>
+ * @example
+ * // Colour a whole class of nodes at once — the cards inherit the frame.
+ * const nodes = inputs.map((input) => ({ ...input, style: theme.nodeStyles.input }));
+ */
+declare function useFlowTheme(): FlowTheme;
+//#endregion
+export { FLOW_THEME_VARIABLES, FlowTheme, useFlowTheme };

package/dist/flow/use-flow-theme.js

@@ -0,0 +1,109 @@
+"use client";
+import { ThemeContext } from "../system/theme-provider.js";
+import { FLOW_NODE_FRAME_PROPERTY, flowFrameColor } from "./_frame.js";
+import { SignalEdge } from "./signal-edge.js";
+import * as React from "react";
+//#region src/flow/use-flow-theme.ts
+/**
+* React Flow paints its own chrome — edges, handles, controls, the minimap, the
+* selection box — from a documented set of `--xy-*` custom properties, each one
+* consulted before the library's built-in default. Mapping that set onto this
+* system's tokens is the whole theme: no wrapper components, no props threaded
+* through a graph, and a theme, mode or density switch that costs nothing
+* because every value is a *reference*, re-resolved by the browser.
+*
+* The map is published two ways, and they are checked against each other
+* (`test/flow/flow-css.test.ts`):
+*
+* - as this object, to spread on the canvas: `<ReactFlow style={theme.style}>`;
+* - as the `.react-flow` block of `flow.css`, for apps that would rather import
+*   a stylesheet than thread a prop.
+*
+* Either is enough. Both is harmless.
+*/
+const FLOW_THEME_VARIABLES = Object.freeze({
+	"--xy-background-color": "var(--cue-bg)",
+	"--xy-background-pattern-color": "var(--cue-surface-2)",
+	"--xy-edge-stroke": "var(--cue-border-strong)",
+	"--xy-edge-stroke-width": "1.5",
+	"--xy-edge-stroke-selected": "var(--cue-fg)",
+	"--xy-connectionline-stroke": "var(--cue-accent)",
+	"--xy-connectionline-stroke-width": "1.5",
+	"--xy-edge-label-background-color": "var(--cue-surface-2)",
+	"--xy-edge-label-color": "var(--cue-fg)",
+	"--xy-handle-background-color": "var(--cue-accent)",
+	"--xy-handle-border-color": "var(--cue-bg)",
+	"--xy-node-background-color": "var(--cue-surface-1)",
+	"--xy-node-border": "1px solid var(--cue-border)",
+	"--xy-node-border-radius": "var(--cue-radius-surface)",
+	"--xy-node-color": "var(--cue-fg)",
+	"--xy-node-group-background-color": "var(--cue-surface-2)",
+	"--xy-node-boxshadow-hover": "0 0 0 1px var(--cue-border-strong)",
+	"--xy-node-boxshadow-selected": "0 0 0 1px var(--cue-fg)",
+	"--xy-controls-button-background-color": "var(--cue-surface-2)",
+	"--xy-controls-button-background-color-hover": "var(--cue-surface-3)",
+	"--xy-controls-button-color": "var(--cue-fg-muted)",
+	"--xy-controls-button-color-hover": "var(--cue-accent)",
+	"--xy-controls-button-border-color": "var(--cue-border)",
+	"--xy-controls-box-shadow": "0 8px 24px rgba(0, 0, 0, 0.4)",
+	"--xy-minimap-background-color": "var(--cue-surface-1)",
+	"--xy-minimap-mask-background-color": "color-mix(in oklch, var(--cue-bg) 70%, transparent)",
+	"--xy-minimap-mask-stroke-color": "var(--cue-border)",
+	"--xy-minimap-node-background-color": "var(--cue-surface-3)",
+	"--xy-minimap-node-stroke-color": "var(--cue-border)",
+	"--xy-selection-background-color": "var(--cue-accent-soft)",
+	"--xy-selection-border": "1px dashed var(--cue-accent)",
+	"--xy-resize-background-color": "var(--cue-accent)",
+	"--xy-attribution-background-color": "color-mix(in oklch, var(--cue-bg) 70%, transparent)"
+});
+/** Frame colour per node kind, ready to put on a React Flow node's `style`. */
+const NODE_STYLES = Object.freeze({
+	input: { [FLOW_NODE_FRAME_PROPERTY]: flowFrameColor("input") },
+	output: { [FLOW_NODE_FRAME_PROPERTY]: flowFrameColor("output") },
+	processing: { [FLOW_NODE_FRAME_PROPERTY]: flowFrameColor("processing") }
+});
+/**
+* `edgeTypes` for `<ReactFlow>`.
+*
+* A module constant, not a fresh object: React Flow re-registers every edge when
+* this changes identity, and warns in the console about exactly this mistake.
+*/
+const EDGE_TYPES = Object.freeze({ signal: SignalEdge });
+/** `defaultEdgeOptions`: every edge is a signal edge unless it says otherwise. */
+const DEFAULT_EDGE_OPTIONS = Object.freeze({
+	type: "signal",
+	interactionWidth: 16
+});
+/**
+* Everything a `<ReactFlow>` needs to look like it belongs to this system.
+*
+* @example
+* const theme = useFlowTheme();
+* <ReactFlow
+*   nodes={nodes}
+*   edges={edges}
+*   nodeTypes={nodeTypes}
+*   edgeTypes={theme.edgeTypes}
+*   defaultEdgeOptions={theme.defaultEdgeOptions}
+*   colorMode={theme.colorMode}
+*   style={theme.style}
+* >
+*   <FlowBackground />
+*   <FlowControls />
+* </ReactFlow>
+* @example
+* // Colour a whole class of nodes at once — the cards inherit the frame.
+* const nodes = inputs.map((input) => ({ ...input, style: theme.nodeStyles.input }));
+*/
+function useFlowTheme() {
+	const colorMode = React.useContext(ThemeContext)?.resolvedMode ?? "dark";
+	return React.useMemo(() => ({
+		colorMode,
+		style: FLOW_THEME_VARIABLES,
+		edgeTypes: EDGE_TYPES,
+		defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
+		nodeStyles: NODE_STYLES
+	}), [colorMode]);
+}
+//#endregion
+export { FLOW_THEME_VARIABLES, useFlowTheme };

package/dist/forms/_chassis.d.ts

@@ -0,0 +1,164 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+//#region src/forms/_chassis.d.ts
+/**
+ * The rung of the density control ladder a form control sits on.
+ *
+ * Named `FormControlSize` rather than `ControlSize` because
+ * `@cueplusplus/ui/system` already exports a `ControlSize` for
+ * `useControlHeight`, and the root barrel re-exports both.
+ */
+type FormControlSize = "sm" | "md" | "lg";
+/**
+ * Everything the recessed control chassis paints except the box itself.
+ *
+ * Split out from the size rung so controls that own their own geometry — a
+ * `<textarea>` that must grow, a `NumberField.Group` that packs two buttons and
+ * an input into one rim — can reuse the surface without fighting a height or a
+ * horizontal padding they do not want.
+ *
+ * Inputs are **recessed**: `bg-sunken` sets them *into* the panel rather than
+ * raising them off it, which is the portfolio-wide convention for anything the
+ * user types into.
+ *
+ * **Focus is one signal, not two.** The rim walks one rung up the border ladder
+ * on `:focus` — `border-border` to `border-border-strong` — and `:focus-visible`
+ * adds a single 2px outline, pulled back over that rim with
+ * `-outline-offset-1` so it sits flush against the control instead of floating
+ * a pixel clear of it. The recipe this replaced painted a saturated accent rim
+ * *and* an offset accent ring simultaneously, which in a dark, dense console
+ * reads as an error or a selection rather than as "the caret is here". No
+ * shipping system draws both: Carbon and Radix each draw one flush ring, and
+ * shadcn moved off the offset-ring default it used to ship.
+ *
+ * Flush is also the cheap way to stay correct. WCAG 2.4.13 accepts a 2px
+ * perimeter only when it touches the component's own outer edge; an indicator
+ * inset further, floating on a gap, has to be 3px thick to cover the same area.
+ * And because an outline is painted outside the layout box, none of this moves
+ * a control by a pixel or reflows the row it sits in.
+ *
+ * There is no quieter pointer path to fall back on, which is why the single
+ * treatment has to be quiet itself: every engine puts typing surfaces on the
+ * `:focus-visible` allowlist, so a text input matches it on a mouse click just
+ * as it does on Tab. Only the non-typing controls that ride this chassis — the
+ * `Select` trigger, the date triggers — actually distinguish the two.
+ *
+ * `--cue-focus`, not `--cue-accent`. Every theme ships both roles, and keeping
+ * them separable is what WCAG 1.4.11 needs: one role whose job is "read at 3:1
+ * against the surface behind the ring", independent of the role whose job is
+ * "look like the brand". Seventeen of the twenty theme blocks still set the two
+ * to the same value, so there the separation costs nothing on screen — but three
+ * light presets can no longer afford it. luma.light, venu.light and hivehub.light
+ * each read below 3:1 against surfaces a field actually sits on (luma.light as
+ * low as 2.45, and against four of its five grounds), so each now carries its
+ * own ring — the accent's hue stepped darker — while the accent itself stays
+ * put. Measured across all five grounds a field can land on — the sunken fill,
+ * the page background and the three surface rungs — every preset now clears
+ * 3:1, the thinnest being signal.light's 3.27. Pointing the ring at the focus
+ * role is what made that retune possible without repainting every accent
+ * surface in the theme.
+ *
+ * (Named in prose rather than as `--cue-*` on purpose: `tokensUsed` in the
+ * published manifest is scanned out of this file's text, so spelling the other
+ * four grounds as tokens would have every control on this chassis claim it
+ * paints a surface it never touches.)
+ *
+ * `--cue-danger` carries the same obligation on an invalid field, where it is
+ * the ring rather than only the rim — a 1.4.11 surface, not purely a semantic
+ * colour. It needed no retune: the red already clears 3:1 on all five grounds in
+ * every preset, thinnest at terminal.dark's 3.13. Both floors are held by
+ * `test/theming/contrast.test.ts`, which measures every block on every ground —
+ * the guard that was missing when these three shipped a ring nobody could see.
+ *
+ * The ring is an `outline` and never a `box-shadow`: `forced-colors: active`
+ * discards box shadows outright and repaints outlines in the user's own
+ * highlight colour, so an outline is the only indicator that survives
+ * high-contrast mode.
+ *
+ * **Invalid and focused: the ring turns red, it does not sit beside the rim.**
+ * `data-[invalid]:border-danger` does win the cascade over the focus rim, but
+ * winning it changes nothing on screen: an outline's band runs from
+ * `border-edge + offset` outward by its own width, so a 2px ring at
+ * `-outline-offset-1` spans from one pixel inside the border box to one pixel
+ * outside it — the whole 1px rim — and outlines paint after borders. Measured
+ * in both engines: an invalid control paints 456 danger pixels at rest and zero
+ * while focused. Pushing the ring off the rim would mean either floating it on
+ * a gap (WCAG 2.4.13 then wants 3px, and the halo is back) or insetting it
+ * further (which buries it deeper). So the ring takes the danger colour instead
+ * — `data-[invalid]:focus-visible:outline-danger` — which is the ruling shadcn
+ * and Radix both reached: the border stays danger, the ring communicates focus,
+ * and red communicates invalid whichever of the two is painting.
+ *
+ * The compound modifier outranks the plain one on specificity — an attribute
+ * selector and a pseudo-class against one pseudo-class — so its position in
+ * Tailwind's utility order cannot decide it. `focus-visible:outline-solid` and
+ * `focus-visible:outline-2` still supply the style and the width in both cases,
+ * which is why only the colour is restated.
+ *
+ * `focus-visible:outline-solid` re-declares the outline style the sibling
+ * `outline-none` switched off — see the note on `buttonChassis`.
+ */
+declare const controlSurface = "w-full rounded-(--radius-control) border border-border bg-sunken font-mono text-fg placeholder:text-fg-subtle outline-none focus:border-border-strong focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-(--cue-focus) disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
+/**
+ * The full recessed-control recipe, one variant per rung of the control ladder.
+ *
+ * Height, horizontal padding and text size move together — a control that is
+ * one rung shorter also needs to be one rung tighter and one rung smaller, or
+ * the glyphs collide with the rim.
+ *
+ * @example
+ * <input className={cn(controlVariants({ size: "sm" }), className)} />
+ */
+declare const controlVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+/** `size` prop shape shared by every control that rides the chassis. */
+type ControlVariantProps = VariantProps<typeof controlVariants>;
+/**
+ * The chassis at its default `md` rung — the exact class list the spec pins for
+ * a plain form control. Kept as a derived constant, never a second copy, so the
+ * recipe cannot drift from {@link controlVariants}.
+ */
+declare const controlClasses: string;
+/**
+ * Ink for a control nested inside something that already paints the rim (an
+ * `InputGroup`, a `NumberField.Group`).
+ *
+ * Strips the box entirely — no border, no fill, no padding, no height — and
+ * inherits the font size from the wrapper so the two never disagree about which
+ * density rung they are on.
+ */
+declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-mono text-[length:inherit] text-fg placeholder:text-fg-subtle outline-none disabled:opacity-40";
+/**
+ * Focus feedback for a wrapper that owns the rim on behalf of an inner control.
+ *
+ * A `<div>` never matches `:focus-visible` itself, so a group has to read the
+ * state off its descendants — and the two halves of {@link controlSurface}'s
+ * treatment want two different questions asked of them.
+ *
+ * The rim follows plain `:focus-within`: anything focused inside strengthens the
+ * border. That is the quiet half, and it is the right answer however the focus
+ * arrived. The ring follows `:has(:focus-visible)`, so it paints only when the
+ * descendant that has focus is itself showing a focus ring. Using
+ * `:focus-within` for *both* — the recipe this replaced — is what made a mouse
+ * click inside a `SearchInput` or a `NumberField` light the whole cluster up
+ * with a saturated block, the single loudest thing in a console form.
+ *
+ * `:has()` is Baseline — Chrome 105, Safari 15.4, Firefox 121 — so no
+ * `:focus-within` fallback layer is needed at the floor this library supports.
+ *
+ * Geometry matches {@link controlSurface} exactly, down to the negative offset:
+ * a grouped field and a plain one are the same control, and a rim that differed
+ * by a pixel between them would say otherwise. The inner control stays ringless
+ * — see {@link bareControlClasses} — because two concentric rings on one field
+ * is the halo this treatment exists to remove.
+ *
+ * The invalid ruling comes with the geometry, for the same reason: at
+ * `-outline-offset-1` the ring covers the rim it is drawn over, so an invalid
+ * group in focus recolours the ring rather than pretending the red under it is
+ * still visible. `data-invalid` is read off the wrapper, which is where Base
+ * UI's `Field` stamps it and where the group already takes
+ * `data-[invalid]:border-danger` from {@link controlVariants}.
+ */
+declare const controlGroupFocusClasses = "focus-within:border-border-strong has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:-outline-offset-1 has-focus-visible:outline-(--cue-focus) data-[invalid]:has-focus-visible:outline-danger";
+//#endregion
+export { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/forms/_chassis.js

@@ -0,0 +1,159 @@
+import { cva } from "../lib/cva.js";
+//#region src/forms/_chassis.ts
+/**
+* Everything the recessed control chassis paints except the box itself.
+*
+* Split out from the size rung so controls that own their own geometry — a
+* `<textarea>` that must grow, a `NumberField.Group` that packs two buttons and
+* an input into one rim — can reuse the surface without fighting a height or a
+* horizontal padding they do not want.
+*
+* Inputs are **recessed**: `bg-sunken` sets them *into* the panel rather than
+* raising them off it, which is the portfolio-wide convention for anything the
+* user types into.
+*
+* **Focus is one signal, not two.** The rim walks one rung up the border ladder
+* on `:focus` — `border-border` to `border-border-strong` — and `:focus-visible`
+* adds a single 2px outline, pulled back over that rim with
+* `-outline-offset-1` so it sits flush against the control instead of floating
+* a pixel clear of it. The recipe this replaced painted a saturated accent rim
+* *and* an offset accent ring simultaneously, which in a dark, dense console
+* reads as an error or a selection rather than as "the caret is here". No
+* shipping system draws both: Carbon and Radix each draw one flush ring, and
+* shadcn moved off the offset-ring default it used to ship.
+*
+* Flush is also the cheap way to stay correct. WCAG 2.4.13 accepts a 2px
+* perimeter only when it touches the component's own outer edge; an indicator
+* inset further, floating on a gap, has to be 3px thick to cover the same area.
+* And because an outline is painted outside the layout box, none of this moves
+* a control by a pixel or reflows the row it sits in.
+*
+* There is no quieter pointer path to fall back on, which is why the single
+* treatment has to be quiet itself: every engine puts typing surfaces on the
+* `:focus-visible` allowlist, so a text input matches it on a mouse click just
+* as it does on Tab. Only the non-typing controls that ride this chassis — the
+* `Select` trigger, the date triggers — actually distinguish the two.
+*
+* `--cue-focus`, not `--cue-accent`. Every theme ships both roles, and keeping
+* them separable is what WCAG 1.4.11 needs: one role whose job is "read at 3:1
+* against the surface behind the ring", independent of the role whose job is
+* "look like the brand". Seventeen of the twenty theme blocks still set the two
+* to the same value, so there the separation costs nothing on screen — but three
+* light presets can no longer afford it. luma.light, venu.light and hivehub.light
+* each read below 3:1 against surfaces a field actually sits on (luma.light as
+* low as 2.45, and against four of its five grounds), so each now carries its
+* own ring — the accent's hue stepped darker — while the accent itself stays
+* put. Measured across all five grounds a field can land on — the sunken fill,
+* the page background and the three surface rungs — every preset now clears
+* 3:1, the thinnest being signal.light's 3.27. Pointing the ring at the focus
+* role is what made that retune possible without repainting every accent
+* surface in the theme.
+*
+* (Named in prose rather than as `--cue-*` on purpose: `tokensUsed` in the
+* published manifest is scanned out of this file's text, so spelling the other
+* four grounds as tokens would have every control on this chassis claim it
+* paints a surface it never touches.)
+*
+* `--cue-danger` carries the same obligation on an invalid field, where it is
+* the ring rather than only the rim — a 1.4.11 surface, not purely a semantic
+* colour. It needed no retune: the red already clears 3:1 on all five grounds in
+* every preset, thinnest at terminal.dark's 3.13. Both floors are held by
+* `test/theming/contrast.test.ts`, which measures every block on every ground —
+* the guard that was missing when these three shipped a ring nobody could see.
+*
+* The ring is an `outline` and never a `box-shadow`: `forced-colors: active`
+* discards box shadows outright and repaints outlines in the user's own
+* highlight colour, so an outline is the only indicator that survives
+* high-contrast mode.
+*
+* **Invalid and focused: the ring turns red, it does not sit beside the rim.**
+* `data-[invalid]:border-danger` does win the cascade over the focus rim, but
+* winning it changes nothing on screen: an outline's band runs from
+* `border-edge + offset` outward by its own width, so a 2px ring at
+* `-outline-offset-1` spans from one pixel inside the border box to one pixel
+* outside it — the whole 1px rim — and outlines paint after borders. Measured
+* in both engines: an invalid control paints 456 danger pixels at rest and zero
+* while focused. Pushing the ring off the rim would mean either floating it on
+* a gap (WCAG 2.4.13 then wants 3px, and the halo is back) or insetting it
+* further (which buries it deeper). So the ring takes the danger colour instead
+* — `data-[invalid]:focus-visible:outline-danger` — which is the ruling shadcn
+* and Radix both reached: the border stays danger, the ring communicates focus,
+* and red communicates invalid whichever of the two is painting.
+*
+* The compound modifier outranks the plain one on specificity — an attribute
+* selector and a pseudo-class against one pseudo-class — so its position in
+* Tailwind's utility order cannot decide it. `focus-visible:outline-solid` and
+* `focus-visible:outline-2` still supply the style and the width in both cases,
+* which is why only the colour is restated.
+*
+* `focus-visible:outline-solid` re-declares the outline style the sibling
+* `outline-none` switched off — see the note on `buttonChassis`.
+*/
+const controlSurface = "w-full rounded-(--radius-control) border border-border bg-sunken font-mono text-fg placeholder:text-fg-subtle outline-none focus:border-border-strong focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-(--cue-focus) disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
+/**
+* The full recessed-control recipe, one variant per rung of the control ladder.
+*
+* Height, horizontal padding and text size move together — a control that is
+* one rung shorter also needs to be one rung tighter and one rung smaller, or
+* the glyphs collide with the rim.
+*
+* @example
+* <input className={cn(controlVariants({ size: "sm" }), className)} />
+*/
+const controlVariants = cva(controlSurface, {
+	variants: { size: {
+		sm: "h-control-sm px-(--cue-space-3) text-(length:--cue-text-label)",
+		md: "h-control-md px-(--cue-space-4) text-(length:--cue-text-ui)",
+		lg: "h-control-lg px-(--cue-space-5) text-(length:--cue-text-body)"
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* The chassis at its default `md` rung — the exact class list the spec pins for
+* a plain form control. Kept as a derived constant, never a second copy, so the
+* recipe cannot drift from {@link controlVariants}.
+*/
+const controlClasses = controlVariants();
+/**
+* Ink for a control nested inside something that already paints the rim (an
+* `InputGroup`, a `NumberField.Group`).
+*
+* Strips the box entirely — no border, no fill, no padding, no height — and
+* inherits the font size from the wrapper so the two never disagree about which
+* density rung they are on.
+*/
+const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-mono text-[length:inherit] text-fg placeholder:text-fg-subtle outline-none disabled:opacity-40";
+/**
+* Focus feedback for a wrapper that owns the rim on behalf of an inner control.
+*
+* A `<div>` never matches `:focus-visible` itself, so a group has to read the
+* state off its descendants — and the two halves of {@link controlSurface}'s
+* treatment want two different questions asked of them.
+*
+* The rim follows plain `:focus-within`: anything focused inside strengthens the
+* border. That is the quiet half, and it is the right answer however the focus
+* arrived. The ring follows `:has(:focus-visible)`, so it paints only when the
+* descendant that has focus is itself showing a focus ring. Using
+* `:focus-within` for *both* — the recipe this replaced — is what made a mouse
+* click inside a `SearchInput` or a `NumberField` light the whole cluster up
+* with a saturated block, the single loudest thing in a console form.
+*
+* `:has()` is Baseline — Chrome 105, Safari 15.4, Firefox 121 — so no
+* `:focus-within` fallback layer is needed at the floor this library supports.
+*
+* Geometry matches {@link controlSurface} exactly, down to the negative offset:
+* a grouped field and a plain one are the same control, and a rim that differed
+* by a pixel between them would say otherwise. The inner control stays ringless
+* — see {@link bareControlClasses} — because two concentric rings on one field
+* is the halo this treatment exists to remove.
+*
+* The invalid ruling comes with the geometry, for the same reason: at
+* `-outline-offset-1` the ring covers the rim it is drawn over, so an invalid
+* group in focus recolours the ring rather than pretending the red under it is
+* still visible. `data-invalid` is read off the wrapper, which is where Base
+* UI's `Field` stamps it and where the group already takes
+* `data-[invalid]:border-danger` from {@link controlVariants}.
+*/
+const controlGroupFocusClasses = "focus-within:border-border-strong has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:-outline-offset-1 has-focus-visible:outline-(--cue-focus) data-[invalid]:has-focus-visible:outline-danger";
+//#endregion
+export { bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };