@bettercms-ai/kit 0.1.0 → 1.0.0

package/controls/scale.js

@@ -0,0 +1,563 @@
+import { cn } from "../lib/cn.js";
+import { TooltipLayer, TooltipRoot } from "../ui/tooltip-root.js";
+import { Tooltip as Tooltip$1 } from "../ui/overlay.js";
+import { UNIT_NAMES, customPx, customRules, defaultUnit, fieldScale, formatNumber, isCustomValue, isTokenScale, nearestTokenIndex, parseScaleInput, rangeOf, resolveScale, roundTo, scaleHint, validateCustom } from "../schema/scale.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/kit/controls/scale.tsx
+/**
+* SCALE — one control, two modes (CPO D41), in the designer's CAPSULE: a muted 32px capsule, a soft fill to the value,
+* a 3px bar thumb at the fill's end (always right of the label), the label inside on the left (panels) and the value
+* inside on the right. Drag anywhere to slide (always snaps to the steps), ←→ / Home / End / PageUp / PageDown.
+*  · Fixed only (default): steps snap; the readout shows the token ("Large"), its tooltip the size (88px); scrub it sideways.
+*  · Fixed + custom (`allowCustom`): DIRECT edit, no mode switch — one click on the value puts the caret there with the
+*    value selected; double-click anywhere or just start typing on the focused capsule does the same. "24", "24px", "5%",
+*    "xl" apply live; Enter / Tab / blur commit, Esc reverts. The unit is plain suffix text (parsed from what you type;
+*    with several units, clicking it cycles them). While typing, token chips under the capsule pick a step in one click;
+*    ↑↓ step the tokens. A custom value shows a small accent dot and sits proportionally between its tokens.
+* Used by the Block Kit number control (`field.scale`, or the legacy `layout: "slider"`) and by the Visuals panels.
+*
+* Port of V2 HEAD 9829bf1 kit/controls/scale.tsx. V2 tokens map to the kit's (bg-muted → bg-kit-muted, --ring-focus →
+* the kit focus ring). V2's native `title=` hints become kit tooltips (the dashboard bans native title tooltips); the
+* custom value keeps ONE tooltip mounted and closes it while typing, so the input never remounts mid-edit.
+* Values are stored as they are (adapters/values.ts scaleToProd): a number, a token step's string, or { value, unit }.
+*/
+var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+/** Horizontal scrubbing (Figma-style) on any element: drag → whole steps; click without moving → onClick. */
+function useScrub(onSteps, pxPerStep, onClick) {
+	const st = React.useRef(null);
+	return {
+		onPointerDown(e) {
+			if (e.button !== 0) return;
+			e.preventDefault();
+			e.currentTarget.setPointerCapture(e.pointerId);
+			st.current = {
+				x: e.clientX,
+				moved: false,
+				last: 0
+			};
+		},
+		onPointerMove(e) {
+			const s = st.current;
+			if (!s) return;
+			const dx = e.clientX - s.x;
+			if (!s.moved && Math.abs(dx) < 3) return;
+			s.moved = true;
+			const steps = Math.trunc(dx / pxPerStep);
+			if (steps !== s.last) {
+				onSteps(steps - s.last, e);
+				s.last = steps;
+			}
+		},
+		onPointerUp() {
+			const s = st.current;
+			st.current = null;
+			if (s && !s.moved) onClick?.();
+		},
+		onPointerCancel() {
+			st.current = null;
+		}
+	};
+}
+function ScaleSlider({ scale, value, onChange, label, id, disabled, readOnly, invalid, error: externalError, inlineLabel, icon, labelClassName, suffix, format, onBlur, onEnter, autoEdit, onTab, className }) {
+	const errId = `scale-err-${React.useId()}`;
+	const tokens = isTokenScale(scale) ? scale.steps : null;
+	const range = rangeOf(scale);
+	const custom = customRules(scale);
+	const r = resolveScale(scale, value, suffix);
+	const isCustom = isCustomValue(value);
+	const inert = disabled || readOnly;
+	const count = tokens ? tokens.length : 0;
+	const nearest = isCustom ? tokens ? nearestTokenIndex(scale, value) : -1 : -1;
+	let pos;
+	if (tokens) {
+		const i = isCustom ? nearest : r.index ?? 0;
+		pos = i < 0 ? -1 : count > 1 ? i / (count - 1) : 0;
+	} else {
+		const lo = range.min;
+		const hi = range.max;
+		const n = isCustom ? value.unit === defaultUnit(scale) ? value.value : NaN : typeof value === "number" ? value : lo;
+		pos = Number.isNaN(n) ? -1 : (clamp(n, lo, hi) - lo) / (hi - lo || 1);
+	}
+	const step = range?.step ?? 1;
+	const tokenAt = (i) => tokens[clamp(i, 0, count - 1)].value;
+	const currentIndex = () => isCustom ? Math.max(0, nearest) : r.index ?? 0;
+	const numAt = (n) => roundTo(clamp(n, range.min, range.max), step);
+	const currentNum = () => typeof value === "number" ? value : isCustom && pos >= 0 ? value.value : range.min;
+	const fromFraction = (f) => tokens ? tokenAt(Math.round(f * (count - 1))) : numAt(range.min + f * (range.max - range.min));
+	const nudgeScale = (d) => tokens ? tokenAt(currentIndex() + d) : numAt(currentNum() + d * step);
+	const backToScale = () => tokens ? tokenAt(nearest >= 0 ? nearest : Math.floor((count - 1) / 2)) : numAt(currentNum());
+	const commit = (v) => {
+		if (inert) return;
+		if (JSON.stringify(v) !== JSON.stringify(value)) onChange(v);
+	};
+	let between = null;
+	if (tokens && isCustom) {
+		const px = customPx(value);
+		const pts = tokens.map((t, i) => ({
+			i,
+			px: t.px
+		})).filter((t) => t.px != null);
+		if (px != null && pts.length >= 2) {
+			let f = -1;
+			if (px <= pts[0].px) f = pts[0].i;
+			else if (px >= pts[pts.length - 1].px) f = pts[pts.length - 1].i;
+			else for (let k = 0; k < pts.length - 1; k++) {
+				const a = pts[k];
+				const b = pts[k + 1];
+				if (px >= a.px && px <= b.px) {
+					f = a.i + (px - a.px) / Math.max(1, b.px - a.px) * (b.i - a.i);
+					between = [a.i, b.i];
+					break;
+				}
+			}
+			pos = f < 0 ? -1 : count > 1 ? f / (count - 1) : 0;
+		}
+	}
+	const trackRef = React.useRef(null);
+	const thumbRef = React.useRef(null);
+	const labelRef = React.useRef(null);
+	const [labelW, setLabelW] = React.useState(28);
+	const valueRef = React.useRef(null);
+	const [valueW, setValueW] = React.useState(40);
+	React.useLayoutEffect(() => {
+		const el = valueRef.current;
+		if (!el) return;
+		const measure = () => setValueW(Math.ceil(el.getBoundingClientRect().width));
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [custom]);
+	React.useLayoutEffect(() => {
+		const el = labelRef.current;
+		if (!el) return setLabelW(28);
+		const measure = () => setLabelW(Math.max(28, Math.ceil(el.getBoundingClientRect().width) + 4));
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [inlineLabel, label]);
+	const [dragging, setDragging] = React.useState(false);
+	const [kbFocus, setKbFocus] = React.useState(false);
+	const fracFromX = (x) => {
+		const rect = trackRef.current.getBoundingClientRect();
+		return clamp((x - rect.left - labelW) / Math.max(1, rect.width - labelW), 0, 1);
+	};
+	const inputRef = React.useRef(null);
+	const [draft, setDraft] = React.useState(null);
+	const [typedError, setError] = React.useState(null);
+	const error = typedError ?? externalError ?? null;
+	const [unitHint, setUnitHint] = React.useState(void 0);
+	const [editing, setEditing] = React.useState(false);
+	const editStart = React.useRef(value);
+	const justBegan = React.useRef(false);
+	const shownUnit = unitHint ?? (isCustom ? value.unit : defaultUnit(scale) ?? custom?.units[0]);
+	const fixedText = r.kind === "number" && format && typeof value === "number" ? format(value) : r.label;
+	const valueText = isCustom ? formatNumber(value.value) : r.kind === "token" ? r.label : r.kind === "number" ? formatNumber(value) : "";
+	const inputText = draft ?? valueText;
+	const tokenOnly = !isCustom && r.kind === "token";
+	const beginEdit = (seed) => {
+		if (inert || !custom) return;
+		if (!editing) editStart.current = value;
+		setEditing(true);
+		setError(null);
+		const el = inputRef.current;
+		if (!el) return;
+		el.focus({ preventScroll: true });
+		if (seed != null) {
+			setDraft(seed);
+			applyText(seed);
+			requestAnimationFrame(() => inputRef.current?.setSelectionRange(seed.length, seed.length));
+		} else {
+			el.select();
+			justBegan.current = true;
+		}
+	};
+	const endEdit = (how, focusThumb) => {
+		if (how === "revert") commit(editStart.current);
+		setDraft(null);
+		setError(null);
+		setUnitHint(void 0);
+		setEditing(false);
+		if (focusThumb) thumbRef.current?.focus({ preventScroll: true });
+	};
+	/** Applies what's typed LIVE when it parses; otherwise shows the reason and keeps the last good value. */
+	function applyText(text, showError = false) {
+		if (!text.trim()) return setError(null);
+		const res = parseScaleInput(scale, text, unitHint);
+		if (res.ok) {
+			setError(null);
+			commit(res.value);
+			return true;
+		}
+		setError(showError ? res.error : null);
+		return false;
+	}
+	/** ↑↓ while editing: step the tokens (from a custom value, the next token in that direction). */
+	const stepTokens = (dir, e) => {
+		if (tokens && isCustom) {
+			const lo = between ? between[0] : nearest;
+			const hi = between ? between[1] : nearest;
+			commit(tokenAt(dir > 0 ? between ? hi : nearest + 1 : between ? lo : nearest - 1));
+		} else commit(nudgeScale(dir * (!tokens && e.shiftKey ? 10 : 1)));
+		setDraft(null);
+		setError(null);
+	};
+	const valueKey = JSON.stringify(value ?? null);
+	const [seenValue, setSeenValue] = React.useState(valueKey);
+	if (seenValue !== valueKey) {
+		setSeenValue(valueKey);
+		if (draft == null && !externalError && typedError !== null) setError(null);
+	}
+	const unitsList = custom?.units ?? [];
+	const cycleUnit = () => {
+		if (inert || unitsList.length < 2) return;
+		const cur = shownUnit && unitsList.includes(shownUnit) ? shownUnit : unitsList[0];
+		const next = unitsList[(unitsList.indexOf(cur) + 1) % unitsList.length];
+		setUnitHint(next);
+		if (isCustom) {
+			const cv = {
+				value: value.value,
+				unit: next
+			};
+			if (validateCustom(scale, cv)) beginEdit();
+			else {
+				setError(null);
+				commit(cv);
+			}
+		} else beginEdit();
+	};
+	const onTrackKey = (e) => {
+		if (inert) return;
+		if (custom && !e.metaKey && !e.ctrlKey && !e.altKey && e.key.length === 1 && /[0-9.a-z%]/i.test(e.key)) {
+			e.preventDefault();
+			beginEdit(e.key);
+			return;
+		}
+		if (e.key === "Enter" && onEnter) {
+			e.preventDefault();
+			onEnter();
+			return;
+		}
+		const big = tokens ? 2 : Math.max(1, Math.round((range.max - range.min) / step / 10));
+		const mult = e.shiftKey && !tokens ? 10 : 1;
+		let next = null;
+		if (e.key === "ArrowRight" || e.key === "ArrowUp") next = isCustom ? tokens ? tokenAt(between ? between[1] : nearest + 1) : backToScale() : nudgeScale(mult);
+		else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = isCustom ? tokens ? tokenAt(between ? between[0] : nearest - 1) : backToScale() : nudgeScale(-mult);
+		else if (e.key === "PageUp") next = nudgeScale(big);
+		else if (e.key === "PageDown") next = nudgeScale(-big);
+		else if (e.key === "Home") next = tokens ? tokenAt(0) : range.min;
+		else if (e.key === "End") next = tokens ? tokenAt(count - 1) : range.max;
+		if (next == null) return;
+		e.preventDefault();
+		commit(next);
+	};
+	React.useEffect(() => {
+		for (const el of [inputRef.current, thumbRef.current]) {
+			if (!el) continue;
+			const own = (el.getAttribute("aria-describedby") ?? "").split(" ").filter((t) => t && t !== errId);
+			const next = error ? [...own, errId] : own;
+			if (next.length) el.setAttribute("aria-describedby", next.join(" "));
+			else el.removeAttribute("aria-describedby");
+		}
+	}, [
+		error,
+		errId,
+		editing
+	]);
+	React.useEffect(() => {
+		if (autoEdit) beginEdit();
+	}, []);
+	const readoutScrub = useScrub((delta, e) => !inert && commit(nudgeScale(delta * (!tokens && e.shiftKey ? 10 : 1))), tokens ? 16 : Math.max(3, Math.min(12, 160 / ((range.max - range.min) / step))));
+	const betweenText = isCustom ? tokens && between ? `Custom value · between ${tokens[between[0]].label} and ${tokens[between[1]].label}` : tokens && nearest >= 0 ? `Custom value · near ${tokens[nearest].label}` : "Custom value" : void 0;
+	const fillW = `calc(${labelW}px + (100% - ${labelW}px) * ${Math.max(0, pos)})`;
+	const tooltip = r.kind === "token" && r.css ? scaleHint(r) : betweenText;
+	const presets = custom ? scale.presets ?? [] : [];
+	const showChips = editing && (!!tokens && count <= 9 || presets.length > 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("min-w-0", className),
+		"data-scale-mode": custom ? "custom" : "fixed",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: trackRef,
+				onPointerDown: (e) => {
+					if (inert || e.button !== 0) return;
+					if (e.target.closest("[data-scale-value]")) return;
+					e.preventDefault();
+					e.currentTarget.setPointerCapture(e.pointerId);
+					setDragging(true);
+					setKbFocus(false);
+					if (editing) endEdit("commit", false);
+					commit(fromFraction(fracFromX(e.clientX)));
+					thumbRef.current?.focus({ preventScroll: true });
+				},
+				onPointerMove: (e) => dragging && commit(fromFraction(fracFromX(e.clientX))),
+				onPointerUp: () => setDragging(false),
+				onPointerCancel: () => setDragging(false),
+				onDoubleClick: () => beginEdit(),
+				className: cn("group/cap relative flex h-8 w-full touch-none select-none items-center overflow-hidden rounded-kit-md bg-kit-muted transition-[background-color,box-shadow]", inert ? "cursor-not-allowed" : "cursor-ew-resize hover:bg-kit-hover", disabled && "opacity-50", kbFocus && !editing && !error && "shadow-[0_0_0_2px_var(--kit-surface),0_0_0_4px_var(--kit-focus-ring)]", editing && !error && "shadow-[inset_0_0_0_1px_var(--kit-line-strong)]", error && "shadow-[inset_0_0_0_1px_var(--kit-danger)]"),
+				children: [
+					pos >= 0 ? /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: cn("absolute inset-y-0 left-0 rounded-l-kit-md bg-[color-mix(in_oklab,var(--kit-fg)_9%,transparent)]", !dragging && "motion-safe:transition-[width] motion-safe:duration-75"),
+						style: { width: fillW }
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						ref: thumbRef,
+						id: custom ? void 0 : id,
+						role: "slider",
+						tabIndex: disabled ? -1 : 0,
+						"aria-label": label,
+						"aria-valuemin": tokens ? 0 : range.min,
+						"aria-valuemax": tokens ? count - 1 : range.max,
+						"aria-valuenow": tokens ? currentIndex() : clamp(currentNum(), range.min, range.max),
+						"aria-valuetext": r.spoken,
+						"aria-disabled": disabled || void 0,
+						"aria-readonly": readOnly || void 0,
+						"aria-invalid": !custom && invalid || void 0,
+						"aria-orientation": "horizontal",
+						onKeyDown: (e) => {
+							setKbFocus(true);
+							onTrackKey(e);
+						},
+						onFocus: () => setKbFocus(document.documentElement.dataset.inputModality === "keyboard"),
+						onBlur: () => {
+							setKbFocus(false);
+							onBlur?.();
+						},
+						className: cn("absolute top-1/2 z-[1] h-4 w-[3px] -translate-x-full -translate-y-1/2 rounded-full bg-kit-fg-3 opacity-0 outline-none focus-visible:!shadow-none focus-visible:!outline-none", !inert && "group-hover/cap:opacity-100", "focus-visible:opacity-100", dragging && "opacity-100", (pos < 0 || editing) && "!opacity-0", !dragging && "motion-safe:transition-[left,opacity] motion-safe:duration-75"),
+						style: { left: `min(calc(${fillW} - 4px), calc(100% - ${valueW}px - 2px))` }
+					}),
+					inlineLabel ? /* @__PURE__ */ jsxs("span", {
+						ref: labelRef,
+						className: cn("pointer-events-none relative z-[2] flex min-w-0 shrink items-center gap-1.5 pl-3 pr-1 text-kit-xs text-kit-fg-2 [&_svg]:size-3.5", labelClassName),
+						children: [icon, /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: label
+						})]
+					}) : null,
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					custom ? /* @__PURE__ */ jsx(StableTip, {
+						content: tooltip,
+						off: editing,
+						children: /* @__PURE__ */ jsxs("span", {
+							ref: valueRef,
+							"data-scale-value": true,
+							onPointerDown: (e) => {
+								if (inert || e.button !== 0) return;
+								e.stopPropagation();
+								if (!editing) {
+									e.preventDefault();
+									beginEdit();
+								}
+							},
+							onMouseUp: (e) => {
+								if (!justBegan.current) return;
+								justBegan.current = false;
+								e.preventDefault();
+								inputRef.current?.select();
+							},
+							onMouseDown: (e) => {
+								if (!editing || e.target !== inputRef.current) e.preventDefault();
+							},
+							className: cn("relative z-[2] flex h-full shrink-0 items-center gap-1 pl-2 pr-3", !inert && "cursor-text"),
+							children: [
+								isCustom && !editing ? /* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: "size-1.5 shrink-0 rounded-full bg-kit-accent"
+								}) : null,
+								/* @__PURE__ */ jsx("input", {
+									ref: inputRef,
+									id,
+									inputMode: "text",
+									autoComplete: "off",
+									spellCheck: false,
+									"aria-label": `${label} value`,
+									"aria-description": betweenText,
+									"aria-invalid": !!error || invalid || void 0,
+									readOnly,
+									disabled,
+									tabIndex: -1,
+									value: inputText,
+									size: 1,
+									style: { width: `${Math.max(1, inputText.length) + .5}ch` },
+									onFocus: () => {
+										if (!editing) beginEdit();
+									},
+									onBlur: () => {
+										if (!editing) return;
+										if (draft != null && draft.trim() && !parseScaleInput(scale, draft, unitHint).ok) endEdit("revert", false);
+										else endEdit("commit", false);
+										onBlur?.();
+									},
+									onChange: (e) => {
+										setDraft(e.target.value);
+										applyText(e.target.value);
+									},
+									onWheel: (e) => e.currentTarget.blur(),
+									onKeyDown: (e) => {
+										e.stopPropagation();
+										if (e.key === "Tab" && onTab) {
+											e.preventDefault();
+											if (draft != null && !applyText(draft, true)) return;
+											endEdit("commit", false);
+											onTab(e.shiftKey ? -1 : 1);
+										} else if (e.key === "Enter") {
+											e.preventDefault();
+											if (draft != null && !applyText(draft, true)) return;
+											endEdit("commit", true);
+											onEnter?.();
+										} else if (e.key === "Escape") {
+											e.preventDefault();
+											endEdit("revert", true);
+										} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+											e.preventDefault();
+											stepTokens(e.key === "ArrowUp" ? 1 : -1, e);
+										}
+									},
+									className: cn("h-6 min-w-0 bg-transparent p-0 text-right text-kit-xs tabular-nums text-kit-fg outline-none placeholder:text-kit-fg-4 focus:shadow-none focus-visible:shadow-none focus-visible:outline-none selection:bg-kit-selected", isCustom || editing ? "font-normal" : "font-medium", !editing && "pointer-events-none")
+								}),
+								!tokenOnly || editing ? unitsList.length > 1 ? /* @__PURE__ */ jsx(Tooltip$1, {
+									content: `Units: ${unitsList.join(", ")} — click to switch, or type one (24%)`,
+									children: /* @__PURE__ */ jsx("button", {
+										type: "button",
+										tabIndex: -1,
+										disabled: inert,
+										onPointerDown: (e) => {
+											e.stopPropagation();
+											e.preventDefault();
+										},
+										onClick: cycleUnit,
+										"aria-label": `Unit: ${shownUnit ? UNIT_NAMES[shownUnit] : "none"}. Switch unit`,
+										className: "rounded-kit-xs text-kit-xs text-kit-fg-3 transition-colors hover:text-kit-fg",
+										children: shownUnit
+									})
+								}) : /* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: "text-kit-xs text-kit-fg-3",
+									children: shownUnit
+								}) : null
+							]
+						})
+					}) : /* @__PURE__ */ jsx(Tooltip$1, {
+						content: tooltip,
+						children: /* @__PURE__ */ jsx("span", {
+							ref: valueRef,
+							"aria-hidden": true,
+							...inert ? {} : readoutScrub,
+							className: cn("relative z-[2] whitespace-nowrap pl-2 pr-3 text-kit-xs font-medium tabular-nums text-kit-fg", !inert && "cursor-ew-resize"),
+							children: fixedText
+						})
+					})
+				]
+			}),
+			showChips ? /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": `${label} steps`,
+				className: "mt-1 flex flex-wrap items-center gap-0.5",
+				children: [(tokens && count <= 9 ? tokens : []).map((t, i) => {
+					const on = !isCustom && r.index === i;
+					return /* @__PURE__ */ jsx(Tooltip$1, {
+						content: t.px != null ? `${t.title ?? t.label} · ${t.px}px` : t.css ? `${t.title ?? t.label} · ${t.css}` : t.title,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							tabIndex: -1,
+							"aria-pressed": on,
+							onPointerDown: (e) => e.preventDefault(),
+							onClick: () => {
+								commit(t.value);
+								endEdit("commit", true);
+							},
+							className: cn("h-5 rounded-kit-sm px-1.5 text-kit-2xs transition-colors", on ? "bg-kit-selected font-medium text-kit-fg" : "text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg"),
+							children: shortToken(t.label)
+						})
+					}, t.value);
+				}), presets.length ? /* @__PURE__ */ jsxs(Fragment, { children: [tokens && count <= 9 ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "mx-1 h-3 w-px bg-kit-line-strong"
+				}) : null, presets.map((p, i) => {
+					const pr = resolveScale(scale, p.value, suffix);
+					const on = JSON.stringify(p.value) === JSON.stringify(value);
+					return /* @__PURE__ */ jsx(Tooltip$1, {
+						content: p.label ? `${p.label} · ${pr.label}` : pr.label,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							tabIndex: -1,
+							"aria-pressed": on,
+							onPointerDown: (e) => e.preventDefault(),
+							onClick: () => {
+								commit(p.value);
+								endEdit("commit", true);
+							},
+							className: cn("h-5 rounded-kit-sm px-1.5 text-kit-2xs tabular-nums transition-colors", on ? "bg-kit-selected font-medium text-kit-fg" : "text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg"),
+							children: pr.label
+						})
+					}, `preset-${i}`);
+				})] }) : null]
+			}) : null,
+			error ? /* @__PURE__ */ jsx("p", {
+				id: errId,
+				role: "status",
+				"aria-live": "polite",
+				className: "mt-1 text-kit-xs text-kit-danger-fg",
+				children: error
+			}) : null
+		]
+	});
+}
+/**
+* A tooltip whose trigger never changes tree shape: `off` (typing) or no content keeps it closed instead of unwrapping
+* the child, which would remount the input inside it and drop the caret.
+*/
+function StableTip({ content, off, children }) {
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		open: off || !content ? false : void 0,
+		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			delay: 350,
+			render: children
+		}), /* @__PURE__ */ jsx(TooltipLayer, { children: /* @__PURE__ */ jsx("span", {
+			className: "line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]",
+			children: content
+		}) })]
+	});
+}
+/** "Medium" → "M", "Extra large"/"XL" → "XL", "Full bleed" stays readable. */
+function shortToken(label) {
+	return {
+		None: "0",
+		Small: "S",
+		Medium: "M",
+		Large: "L"
+	}[label] ?? label;
+}
+/** Block Kit adapter: `field.scale` (or legacy `layout: "slider"` + numeric). */
+function ScaleControl({ field, value, onChange, readOnly, id, invalid, onBlur }) {
+	const scale = fieldScale(field);
+	const unit = field.numeric?.unit;
+	const suffix = unit && ![
+		"px",
+		"%",
+		"rem",
+		"em",
+		"vw",
+		"vh"
+	].includes(unit) ? unit : void 0;
+	return /* @__PURE__ */ jsx(ScaleSlider, {
+		scale,
+		value: value ?? field.initialValue,
+		onChange: (v) => onChange(v),
+		label: field.title,
+		id,
+		readOnly,
+		invalid,
+		suffix,
+		onBlur,
+		density: "form"
+	});
+}
+//#endregion
+export { ScaleControl };
+
+//# sourceMappingURL=scale.js.map

package/controls/scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale.js","names":[],"sources":["../../src/kit/controls/scale.tsx"],"sourcesContent":["/**\n * SCALE — one control, two modes (CPO D41), in the designer's CAPSULE: a muted 32px capsule, a soft fill to the value,\n * a 3px bar thumb at the fill's end (always right of the label), the label inside on the left (panels) and the value\n * inside on the right. Drag anywhere to slide (always snaps to the steps), ←→ / Home / End / PageUp / PageDown.\n *  · Fixed only (default): steps snap; the readout shows the token (\"Large\"), its tooltip the size (88px); scrub it sideways.\n *  · Fixed + custom (`allowCustom`): DIRECT edit, no mode switch — one click on the value puts the caret there with the\n *    value selected; double-click anywhere or just start typing on the focused capsule does the same. \"24\", \"24px\", \"5%\",\n *    \"xl\" apply live; Enter / Tab / blur commit, Esc reverts. The unit is plain suffix text (parsed from what you type;\n *    with several units, clicking it cycles them). While typing, token chips under the capsule pick a step in one click;\n *    ↑↓ step the tokens. A custom value shows a small accent dot and sits proportionally between its tokens.\n * Used by the Block Kit number control (`field.scale`, or the legacy `layout: \"slider\"`) and by the Visuals panels.\n *\n * Port of V2 HEAD 9829bf1 kit/controls/scale.tsx. V2 tokens map to the kit's (bg-muted → bg-kit-muted, --ring-focus →\n * the kit focus ring). V2's native `title=` hints become kit tooltips (the dashboard bans native title tooltips); the\n * custom value keeps ONE tooltip mounted and closes it while typing, so the input never remounts mid-edit.\n * Values are stored as they are (adapters/values.ts scaleToProd): a number, a token step's string, or { value, unit }.\n */\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport { Tooltip } from \"../ui/overlay\";\nimport { TooltipLayer, TooltipRoot } from \"../ui/tooltip-root\";\nimport { cn } from \"../lib/cn\";\nimport {\n  customPx, customRules, defaultUnit, formatNumber, isCustomValue, isTokenScale, nearestTokenIndex, parseScaleInput, rangeOf, resolveScale, roundTo,\n  scaleHint, UNIT_NAMES, validateCustom, fieldScale,\n} from \"../schema/scale\";\nimport type { ScaleCustomValue, ScaleSchema, ScaleUnit, ScaleValue } from \"../schema/types\";\nimport type { ControlProps } from \"../types\";\n\nexport interface ScaleSliderProps {\n  scale: ScaleSchema;\n  value: unknown;\n  onChange: (v: ScaleValue) => void;\n  /** Accessible name (the field title). */\n  label: string;\n  /** id for the primary control: the input when custom is allowed, otherwise the slider thumb. */\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  /** an error from outside (schema validation, a design-system demo); a parse error from typing wins */\n  error?: string;\n  /** \"form\" (Block Kit: label above, tick labels under the track) · \"panel\" (inspector row: inline scrub label). */\n  density?: \"form\" | \"panel\";\n  /** panel: show the label inline on the left (it scrubs). */\n  inlineLabel?: boolean;\n  icon?: React.ReactNode;\n  /** panel: extra classes for the inline label. */\n  labelClassName?: string;\n  /** a unit word that isn't a CSS unit (\"items\", \"s\") — shown after numbers */\n  suffix?: string;\n  /** readout for range values (legacy `format`) */\n  format?: (n: number) => string;\n  onBlur?: () => void;\n  /** Enter committed a typed value (custom fields) or was pressed on a fixed capsule — hosts like the canvas popover close on it */\n  onEnter?: () => void;\n  /** start in edit mode with the value selected (the canvas badge → in-place edit) */\n  autoEdit?: boolean;\n  /** Tab / Shift+Tab while typing: commit, then the host moves to the next / previous size (canvas popover sides) */\n  onTab?: (dir: 1 | -1) => void;\n  className?: string;\n}\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));\n\n/** Horizontal scrubbing (Figma-style) on any element: drag → whole steps; click without moving → onClick. */\nfunction useScrub(onSteps: (delta: number, e: PointerEvent | React.PointerEvent) => void, pxPerStep: number, onClick?: () => void) {\n  const st = React.useRef<{ x: number; moved: boolean; last: number } | null>(null);\n  return {\n    onPointerDown(e: React.PointerEvent) {\n      if (e.button !== 0) return;\n      e.preventDefault();\n      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n      st.current = { x: e.clientX, moved: false, last: 0 };\n    },\n    onPointerMove(e: React.PointerEvent) {\n      const s = st.current;\n      if (!s) return;\n      const dx = e.clientX - s.x;\n      if (!s.moved && Math.abs(dx) < 3) return;\n      s.moved = true;\n      const steps = Math.trunc(dx / pxPerStep);\n      if (steps !== s.last) {\n        onSteps(steps - s.last, e);\n        s.last = steps;\n      }\n    },\n    onPointerUp() {\n      const s = st.current;\n      st.current = null;\n      if (s && !s.moved) onClick?.();\n    },\n    onPointerCancel() {\n      st.current = null;\n    },\n  };\n}\n\nexport function ScaleSlider({\n  scale,\n  value,\n  onChange,\n  label,\n  id,\n  disabled,\n  readOnly,\n  invalid,\n  error: externalError,\n  inlineLabel,\n  icon,\n  labelClassName,\n  suffix,\n  format,\n  onBlur,\n  onEnter,\n  autoEdit,\n  onTab,\n  className,\n}: ScaleSliderProps) {\n  const uid = React.useId();\n  const errId = `scale-err-${uid}`; // must NOT start with the field id: FieldShell strips its own `${id}-…` ids\n  const tokens = isTokenScale(scale) ? scale.steps : null;\n  const range = rangeOf(scale);\n  const custom = customRules(scale);\n  const r = resolveScale(scale, value, suffix);\n  const isCustom = isCustomValue(value);\n  const inert = disabled || readOnly;\n\n  /* ── position on the track (0..1); -1 = can't place (custom % on a px scale) ── */\n  const count = tokens ? tokens.length : 0;\n  const nearest = isCustom ? (tokens ? nearestTokenIndex(scale, value as ScaleCustomValue) : -1) : -1;\n  let pos: number;\n  if (tokens) {\n    const i = isCustom ? nearest : r.index ?? 0;\n    pos = i < 0 ? -1 : count > 1 ? i / (count - 1) : 0;\n  } else {\n    const lo = range!.min;\n    const hi = range!.max;\n    const n = isCustom\n      ? (value as ScaleCustomValue).unit === defaultUnit(scale)\n        ? (value as ScaleCustomValue).value\n        : NaN\n      : typeof value === \"number\"\n        ? value\n        : lo;\n    pos = Number.isNaN(n) ? -1 : (clamp(n, lo, hi) - lo) / (hi - lo || 1);\n  }\n  const step = range?.step ?? 1;\n\n  /* ── value moves ── */\n  const tokenAt = (i: number) => tokens![clamp(i, 0, count - 1)].value;\n  const currentIndex = () => (isCustom ? Math.max(0, nearest) : r.index ?? 0);\n  const numAt = (n: number) => roundTo(clamp(n, range!.min, range!.max), step);\n  const currentNum = () => (typeof value === \"number\" ? value : isCustom && pos >= 0 ? (value as ScaleCustomValue).value : range!.min);\n  const fromFraction = (f: number): ScaleValue => (tokens ? tokenAt(Math.round(f * (count - 1))) : numAt(range!.min + f * (range!.max - range!.min)));\n  const nudgeScale = (d: number): ScaleValue => (tokens ? tokenAt(currentIndex() + d) : numAt(currentNum() + d * step));\n  const backToScale = (): ScaleValue => (tokens ? tokenAt(nearest >= 0 ? nearest : Math.floor((count - 1) / 2)) : numAt(currentNum()));\n  const commit = (v: ScaleValue) => {\n    if (inert) return;\n    if (JSON.stringify(v) !== JSON.stringify(value)) onChange(v);\n  };\n\n  /* ── custom values sit proportionally between the tokens they fall between (px interpolation) ── */\n  let between: [number, number] | null = null;\n  if (tokens && isCustom) {\n    const px = customPx(value as ScaleCustomValue);\n    const pts = tokens.map((t, i) => ({ i, px: t.px })).filter((t): t is { i: number; px: number } => t.px != null);\n    if (px != null && pts.length >= 2) {\n      let f = -1;\n      if (px <= pts[0].px) f = pts[0].i;\n      else if (px >= pts[pts.length - 1].px) f = pts[pts.length - 1].i;\n      else\n        for (let k = 0; k < pts.length - 1; k++) {\n          const a = pts[k];\n          const b = pts[k + 1];\n          if (px >= a.px && px <= b.px) {\n            f = a.i + ((px - a.px) / Math.max(1, b.px - a.px)) * (b.i - a.i);\n            between = [a.i, b.i];\n            break;\n          }\n        }\n      pos = f < 0 ? -1 : count > 1 ? f / (count - 1) : 0;\n    }\n  }\n\n  /* ── geometry: the fill starts AFTER the inline label, so the thumb never sits on the label ── */\n  const trackRef = React.useRef<HTMLDivElement>(null);\n  const thumbRef = React.useRef<HTMLDivElement>(null);\n  const labelRef = React.useRef<HTMLSpanElement>(null);\n  const [labelW, setLabelW] = React.useState(28);\n  const valueRef = React.useRef<HTMLSpanElement>(null);\n  const [valueW, setValueW] = React.useState(40);\n  React.useLayoutEffect(() => {\n    const el = valueRef.current;\n    if (!el) return;\n    const measure = () => setValueW(Math.ceil(el.getBoundingClientRect().width));\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [custom]);\n  React.useLayoutEffect(() => {\n    const el = labelRef.current;\n    if (!el) return setLabelW(28);\n    const measure = () => setLabelW(Math.max(28, Math.ceil(el.getBoundingClientRect().width) + 4));\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [inlineLabel, label]);\n  const [dragging, setDragging] = React.useState(false);\n  /* keyboard-only ring: follows the app's data-input-modality (D29), never after a click */\n  const [kbFocus, setKbFocus] = React.useState(false);\n  const fracFromX = (x: number) => {\n    const rect = trackRef.current!.getBoundingClientRect();\n    return clamp((x - rect.left - labelW) / Math.max(1, rect.width - labelW), 0, 1);\n  };\n\n  /* ── direct edit (custom fields): click the value, double-click anywhere, or just type ── */\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [draft, setDraft] = React.useState<string | null>(null);\n  const [typedError, setError] = React.useState<string | null>(null);\n  const error = typedError ?? externalError ?? null;\n  const [unitHint, setUnitHint] = React.useState<ScaleUnit | undefined>(undefined);\n  const [editing, setEditing] = React.useState(false);\n  const editStart = React.useRef<unknown>(value);\n  const justBegan = React.useRef(false); // the click that opened editing must not drop a caret over the selection\n  const shownUnit: ScaleUnit | undefined = unitHint ?? (isCustom ? (value as ScaleCustomValue).unit : defaultUnit(scale) ?? custom?.units[0]);\n  const fixedText = r.kind === \"number\" && format && typeof value === \"number\" ? format(value) : r.label;\n  const valueText = isCustom ? formatNumber((value as ScaleCustomValue).value) : r.kind === \"token\" ? r.label : r.kind === \"number\" ? formatNumber(value as number) : \"\";\n  const inputText = draft ?? valueText;\n  const tokenOnly = !isCustom && r.kind === \"token\"; // unit suffix is meaningless next to \"Medium\"\n\n  const beginEdit = (seed?: string) => {\n    if (inert || !custom) return;\n    if (!editing) editStart.current = value;\n    setEditing(true);\n    setError(null);\n    const el = inputRef.current;\n    if (!el) return;\n    el.focus({ preventScroll: true }); // synchronous: the next keystrokes land in the input\n    if (seed != null) {\n      setDraft(seed);\n      applyText(seed);\n      requestAnimationFrame(() => inputRef.current?.setSelectionRange(seed.length, seed.length));\n    } else {\n      el.select();\n      justBegan.current = true;\n    }\n  };\n  const endEdit = (how: \"commit\" | \"revert\", focusThumb: boolean) => {\n    if (how === \"revert\") commit(editStart.current as ScaleValue);\n    setDraft(null);\n    setError(null);\n    setUnitHint(undefined);\n    setEditing(false);\n    if (focusThumb) thumbRef.current?.focus({ preventScroll: true });\n  };\n  /** Applies what's typed LIVE when it parses; otherwise shows the reason and keeps the last good value. */\n  function applyText(text: string, showError = false) {\n    if (!text.trim()) return setError(null);\n    const res = parseScaleInput(scale, text, unitHint);\n    if (res.ok) {\n      setError(null);\n      commit(res.value);\n      return true;\n    }\n    // half-typed (\"x\" on the way to \"xl\") stays quiet; the reason shows when you try to commit\n    setError(showError ? res.error : null);\n    return false;\n  }\n  /** ↑↓ while editing: step the tokens (from a custom value, the next token in that direction). */\n  const stepTokens = (dir: 1 | -1, e: { shiftKey: boolean }) => {\n    if (tokens && isCustom) {\n      const lo = between ? between[0] : nearest;\n      const hi = between ? between[1] : nearest;\n      commit(tokenAt(dir > 0 ? (between ? hi : nearest + 1) : between ? lo : nearest - 1));\n    } else commit(nudgeScale(dir * (!tokens && e.shiftKey ? 10 : 1)));\n    setDraft(null);\n    setError(null);\n  };\n  /* keep the field's text in sync with outside changes (drag, undo) while not typing: adjusted during render when the\n     value changes (V2 did this in an effect keyed on `value`) */\n  const valueKey = JSON.stringify(value ?? null);\n  const [seenValue, setSeenValue] = React.useState(valueKey);\n  if (seenValue !== valueKey) {\n    setSeenValue(valueKey);\n    if (draft == null && !externalError && typedError !== null) setError(null);\n  }\n\n  const unitsList = custom?.units ?? [];\n  const cycleUnit = () => {\n    if (inert || unitsList.length < 2) return;\n    const cur = shownUnit && unitsList.includes(shownUnit) ? shownUnit : unitsList[0];\n    const next = unitsList[(unitsList.indexOf(cur) + 1) % unitsList.length];\n    setUnitHint(next);\n    if (isCustom) {\n      const cv: ScaleCustomValue = { value: (value as ScaleCustomValue).value, unit: next };\n      // 720px → % would be out of range: keep the value, select the number and let the next keystrokes be in the new unit\n      if (validateCustom(scale, cv)) beginEdit();\n      else {\n        setError(null);\n        commit(cv);\n      }\n    } else beginEdit();\n  };\n\n  const onTrackKey = (e: React.KeyboardEvent) => {\n    if (inert) return;\n    /* just start typing: a digit, a dot or a letter opens the value with that character */\n    if (custom && !e.metaKey && !e.ctrlKey && !e.altKey && e.key.length === 1 && /[0-9.a-z%]/i.test(e.key)) {\n      e.preventDefault();\n      beginEdit(e.key);\n      return;\n    }\n    if (e.key === \"Enter\" && onEnter) {\n      e.preventDefault();\n      onEnter();\n      return;\n    }\n    const big = tokens ? 2 : Math.max(1, Math.round((range!.max - range!.min) / step / 10));\n    const mult = e.shiftKey && !tokens ? 10 : 1;\n    let next: ScaleValue | null = null;\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowUp\") next = isCustom ? (tokens ? tokenAt(between ? between[1] : nearest + 1) : backToScale()) : nudgeScale(mult);\n    else if (e.key === \"ArrowLeft\" || e.key === \"ArrowDown\") next = isCustom ? (tokens ? tokenAt(between ? between[0] : nearest - 1) : backToScale()) : nudgeScale(-mult);\n    else if (e.key === \"PageUp\") next = nudgeScale(big);\n    else if (e.key === \"PageDown\") next = nudgeScale(-big);\n    else if (e.key === \"Home\") next = tokens ? tokenAt(0) : range!.min;\n    else if (e.key === \"End\") next = tokens ? tokenAt(count - 1) : range!.max;\n    if (next == null) return;\n    e.preventDefault();\n    commit(next);\n  };\n\n  /* aria-describedby: add/remove our error id without clobbering the ids FieldShell wires (help, ⓘ, issue). */\n  React.useEffect(() => {\n    for (const el of [inputRef.current, thumbRef.current]) {\n      if (!el) continue;\n      const own = (el.getAttribute(\"aria-describedby\") ?? \"\").split(\" \").filter((t) => t && t !== errId);\n      const next = error ? [...own, errId] : own;\n      if (next.length) el.setAttribute(\"aria-describedby\", next.join(\" \"));\n      else el.removeAttribute(\"aria-describedby\");\n    }\n  }, [error, errId, editing]);\n\n  React.useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- autoEdit focuses the input on mount (a DOM sync), once\n    if (autoEdit) beginEdit();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  /* fixed fields: scrub the readout sideways (Figma-style) */\n  const scrubPx = tokens ? 16 : Math.max(3, Math.min(12, 160 / ((range!.max - range!.min) / step)));\n  const readoutScrub = useScrub((delta, e) => !inert && commit(nudgeScale(delta * (!tokens && e.shiftKey ? 10 : 1))), scrubPx);\n\n  const betweenText = isCustom\n    ? tokens && between\n      ? `Custom value · between ${tokens[between[0]].label} and ${tokens[between[1]].label}`\n      : tokens && nearest >= 0\n        ? `Custom value · near ${tokens[nearest].label}`\n        : \"Custom value\"\n    : undefined;\n  const pct = Math.max(0, pos);\n  const fillW = `calc(${labelW}px + (100% - ${labelW}px) * ${pct})`;\n  const tooltip = r.kind === \"token\" && r.css ? scaleHint(r) : betweenText;\n  const presets = custom ? scale.presets ?? [] : [];\n  const showChips = editing && ((!!tokens && count <= 9) || presets.length > 0);\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-scale-mode={custom ? \"custom\" : \"fixed\"}>\n      <div\n        ref={trackRef}\n        onPointerDown={(e) => {\n          if (inert || e.button !== 0) return;\n          if ((e.target as HTMLElement).closest(\"[data-scale-value]\")) return; // the value area edits, it doesn't scrub\n          e.preventDefault();\n          (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n          setDragging(true);\n          setKbFocus(false);\n          if (editing) endEdit(\"commit\", false);\n          commit(fromFraction(fracFromX(e.clientX)));\n          thumbRef.current?.focus({ preventScroll: true });\n        }}\n        onPointerMove={(e) => dragging && commit(fromFraction(fracFromX(e.clientX)))}\n        onPointerUp={() => setDragging(false)}\n        onPointerCancel={() => setDragging(false)}\n        onDoubleClick={() => beginEdit()}\n        className={cn(\n          \"group/cap relative flex h-8 w-full touch-none select-none items-center overflow-hidden rounded-kit-md bg-kit-muted transition-[background-color,box-shadow]\",\n          inert ? \"cursor-not-allowed\" : \"cursor-ew-resize hover:bg-kit-hover\",\n          disabled && \"opacity-50\",\n          /* neutral, keyboard-only ring (never after a click); a quiet 1px inner line while typing; red only for an error */\n          kbFocus && !editing && !error && \"shadow-[0_0_0_2px_var(--kit-surface),0_0_0_4px_var(--kit-focus-ring)]\",\n          editing && !error && \"shadow-[inset_0_0_0_1px_var(--kit-line-strong)]\",\n          error && \"shadow-[inset_0_0_0_1px_var(--kit-danger)]\",\n        )}\n      >\n        {pos >= 0 ? (\n          <div\n            aria-hidden\n            className={cn(\n              \"absolute inset-y-0 left-0 rounded-l-kit-md bg-[color-mix(in_oklab,var(--kit-fg)_9%,transparent)]\",\n              !dragging && \"motion-safe:transition-[width] motion-safe:duration-75\",\n            )}\n            style={{ width: fillW }}\n          />\n        ) : null}\n        {/* thumb = the designer's 3px bar at the fill's end — always right of the label; it is the focusable slider */}\n        <div\n          ref={thumbRef}\n          id={custom ? undefined : id}\n          role=\"slider\"\n          tabIndex={disabled ? -1 : 0}\n          aria-label={label}\n          aria-valuemin={tokens ? 0 : range!.min}\n          aria-valuemax={tokens ? count - 1 : range!.max}\n          aria-valuenow={tokens ? currentIndex() : clamp(currentNum(), range!.min, range!.max)}\n          aria-valuetext={r.spoken}\n          aria-disabled={disabled || undefined}\n          aria-readonly={readOnly || undefined}\n          aria-invalid={(!custom && invalid) || undefined}\n          aria-orientation=\"horizontal\"\n          onKeyDown={(e) => {\n            setKbFocus(true);\n            onTrackKey(e);\n          }}\n          onFocus={() => setKbFocus(document.documentElement.dataset.inputModality === \"keyboard\")}\n          onBlur={() => {\n            setKbFocus(false);\n            onBlur?.();\n          }}\n          className={cn(\n            \"absolute top-1/2 z-[1] h-4 w-[3px] -translate-x-full -translate-y-1/2 rounded-full bg-kit-fg-3 opacity-0 outline-none focus-visible:!shadow-none focus-visible:!outline-none\",\n            !inert && \"group-hover/cap:opacity-100\",\n            \"focus-visible:opacity-100\",\n            dragging && \"opacity-100\",\n            (pos < 0 || editing) && \"!opacity-0\",\n            !dragging && \"motion-safe:transition-[left,opacity] motion-safe:duration-75\",\n          )}\n          style={{ left: `min(calc(${fillW} - 4px), calc(100% - ${valueW}px - 2px))` /* never on the label, never on the value */ }}\n        />\n        {inlineLabel ? (\n          <span ref={labelRef} className={cn(\"pointer-events-none relative z-[2] flex min-w-0 shrink items-center gap-1.5 pl-3 pr-1 text-kit-xs text-kit-fg-2 [&_svg]:size-3.5\", labelClassName)}>\n            {icon}\n            <span className=\"truncate\">{label}</span>\n          </span>\n        ) : null}\n        <span className=\"flex-1\" />\n\n        {/* value — inside the capsule on the right */}\n        {custom ? (\n          /* one tooltip stays mounted and closes while typing, so the input never remounts mid-edit */\n          <StableTip content={tooltip} off={editing}>\n            <span\n              ref={valueRef}\n              data-scale-value\n              onPointerDown={(e) => {\n                if (inert || e.button !== 0) return;\n                e.stopPropagation();\n                if (!editing) {\n                  e.preventDefault();\n                  beginEdit(); // one click: caret in place, the value selected\n                }\n              }}\n              onMouseUp={(e) => {\n                if (!justBegan.current) return;\n                justBegan.current = false;\n                e.preventDefault();\n                inputRef.current?.select();\n              }}\n              onMouseDown={(e) => {\n                // the browser's own mousedown focus would pull focus back off the input we just focused\n                if (!editing || e.target !== inputRef.current) e.preventDefault();\n              }}\n              className={cn(\"relative z-[2] flex h-full shrink-0 items-center gap-1 pl-2 pr-3\", !inert && \"cursor-text\")}\n            >\n              {isCustom && !editing ? <span aria-hidden className=\"size-1.5 shrink-0 rounded-full bg-kit-accent\" /> : null}\n              <input\n                ref={inputRef}\n                id={id}\n                inputMode=\"text\"\n                autoComplete=\"off\"\n                spellCheck={false}\n                aria-label={`${label} value`}\n                aria-description={betweenText}\n                aria-invalid={!!error || invalid || undefined}\n                readOnly={readOnly}\n                disabled={disabled}\n                tabIndex={-1}\n                value={inputText}\n                size={1}\n                style={{ width: `${Math.max(1, inputText.length) + 0.5}ch` }}\n                onFocus={() => {\n                  if (!editing) beginEdit();\n                }}\n                onBlur={() => {\n                  if (!editing) return;\n                  if (draft != null && draft.trim() && !parseScaleInput(scale, draft, unitHint).ok) endEdit(\"revert\", false);\n                  else endEdit(\"commit\", false);\n                  onBlur?.();\n                }}\n                onChange={(e) => {\n                  setDraft(e.target.value);\n                  applyText(e.target.value);\n                }}\n                onWheel={(e) => e.currentTarget.blur()}\n                onKeyDown={(e) => {\n                  e.stopPropagation();\n                  if (e.key === \"Tab\" && onTab) {\n                    e.preventDefault();\n                    if (draft != null && !applyText(draft, true)) return; // stay and fix it\n                    endEdit(\"commit\", false);\n                    onTab(e.shiftKey ? -1 : 1);\n                  } else if (e.key === \"Enter\") {\n                    e.preventDefault();\n                    if (draft != null && !applyText(draft, true)) return; // stay and fix it\n                    endEdit(\"commit\", true);\n                    onEnter?.();\n                  } else if (e.key === \"Escape\") {\n                    e.preventDefault();\n                    endEdit(\"revert\", true);\n                  } else if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n                    e.preventDefault();\n                    stepTokens(e.key === \"ArrowUp\" ? 1 : -1, e);\n                  }\n                }}\n                className={cn(\n                  \"h-6 min-w-0 bg-transparent p-0 text-right text-kit-xs tabular-nums text-kit-fg outline-none placeholder:text-kit-fg-4 focus:shadow-none focus-visible:shadow-none focus-visible:outline-none selection:bg-kit-selected\",\n                  isCustom || editing ? \"font-normal\" : \"font-medium\",\n                  !editing && \"pointer-events-none\",\n                )}\n              />\n              {!tokenOnly || editing ? (\n                unitsList.length > 1 ? (\n                  <Tooltip content={`Units: ${unitsList.join(\", \")} — click to switch, or type one (24%)`}>\n                    <button\n                      type=\"button\"\n                      tabIndex={-1}\n                      disabled={inert}\n                      onPointerDown={(e) => {\n                        e.stopPropagation();\n                        e.preventDefault(); // keep the caret in the value\n                      }}\n                      onClick={cycleUnit}\n                      aria-label={`Unit: ${shownUnit ? UNIT_NAMES[shownUnit] : \"none\"}. Switch unit`}\n                      className=\"rounded-kit-xs text-kit-xs text-kit-fg-3 transition-colors hover:text-kit-fg\"\n                    >\n                      {shownUnit}\n                    </button>\n                  </Tooltip>\n                ) : (\n                  <span aria-hidden className=\"text-kit-xs text-kit-fg-3\">{shownUnit}</span>\n                )\n              ) : null}\n            </span>\n          </StableTip>\n        ) : (\n          <Tooltip content={tooltip}>\n            <span\n              ref={valueRef}\n              aria-hidden\n              {...(inert ? {} : readoutScrub)}\n              className={cn(\"relative z-[2] whitespace-nowrap pl-2 pr-3 text-kit-xs font-medium tabular-nums text-kit-fg\", !inert && \"cursor-ew-resize\")}\n            >\n              {fixedText}\n            </span>\n          </Tooltip>\n        )}\n      </div>\n\n      {/* quick tokens while typing — one click picks a step and leaves edit mode */}\n      {showChips ? (\n        <div role=\"group\" aria-label={`${label} steps`} className=\"mt-1 flex flex-wrap items-center gap-0.5\">\n          {(tokens && count <= 9 ? tokens : []).map((t, i) => {\n            const on = !isCustom && r.index === i;\n            return (\n              <Tooltip key={t.value} content={t.px != null ? `${t.title ?? t.label} · ${t.px}px` : t.css ? `${t.title ?? t.label} · ${t.css}` : t.title}>\n              <button\n                type=\"button\"\n                tabIndex={-1}\n                aria-pressed={on}\n                onPointerDown={(e) => e.preventDefault() /* keep the caret until the click lands */}\n                onClick={() => {\n                  commit(t.value);\n                  endEdit(\"commit\", true);\n                }}\n                className={cn(\n                  \"h-5 rounded-kit-sm px-1.5 text-kit-2xs transition-colors\",\n                  on ? \"bg-kit-selected font-medium text-kit-fg\" : \"text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\",\n                )}\n              >\n                {shortToken(t.label)}\n              </button>\n              </Tooltip>\n            );\n          })}\n          {/* developer presets: extra quick picks after the steps, behind a hairline */}\n          {presets.length ? (\n            <>\n              {tokens && count <= 9 ? <span aria-hidden className=\"mx-1 h-3 w-px bg-kit-line-strong\" /> : null}\n              {presets.map((p, i) => {\n                const pr = resolveScale(scale, p.value, suffix);\n                const on = JSON.stringify(p.value) === JSON.stringify(value);\n                return (\n                  <Tooltip key={`preset-${i}`} content={p.label ? `${p.label} · ${pr.label}` : pr.label}>\n                  <button\n                    type=\"button\"\n                    tabIndex={-1}\n                    aria-pressed={on}\n                    onPointerDown={(e) => e.preventDefault()}\n                    onClick={() => {\n                      commit(p.value);\n                      endEdit(\"commit\", true);\n                    }}\n                    className={cn(\"h-5 rounded-kit-sm px-1.5 text-kit-2xs tabular-nums transition-colors\", on ? \"bg-kit-selected font-medium text-kit-fg\" : \"text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg\")}\n                  >\n                    {pr.label}\n                  </button>\n                  </Tooltip>\n                );\n              })}\n            </>\n          ) : null}\n        </div>\n      ) : null}\n      {error ? (\n        <p id={errId} role=\"status\" aria-live=\"polite\" className=\"mt-1 text-kit-xs text-kit-danger-fg\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A tooltip whose trigger never changes tree shape: `off` (typing) or no content keeps it closed instead of unwrapping\n * the child, which would remount the input inside it and drop the caret.\n */\nfunction StableTip({ content, off, children }: { content?: string; off?: boolean; children: React.ReactElement }) {\n  const closed = off || !content;\n  return (\n    <TooltipRoot open={closed ? false : undefined}>\n      <TooltipPrimitive.Trigger delay={350} render={children} />\n      <TooltipLayer>\n        <span className=\"line-clamp-[8] min-w-0 whitespace-normal [overflow-wrap:anywhere]\">{content}</span>\n      </TooltipLayer>\n    </TooltipRoot>\n  );\n}\n\n/** \"Medium\" → \"M\", \"Extra large\"/\"XL\" → \"XL\", \"Full bleed\" stays readable. */\nfunction shortToken(label: string) {\n  const map: Record<string, string> = { None: \"0\", Small: \"S\", Medium: \"M\", Large: \"L\" };\n  return map[label] ?? label;\n}\n\n/** Block Kit adapter: `field.scale` (or legacy `layout: \"slider\"` + numeric). */\nexport function ScaleControl({ field, value, onChange, readOnly, id, invalid, onBlur }: ControlProps) {\n  const scale = fieldScale(field)!;\n  const unit = field.numeric?.unit;\n  const suffix = unit && ![\"px\", \"%\", \"rem\", \"em\", \"vw\", \"vh\"].includes(unit) ? unit : undefined;\n  return (\n    <ScaleSlider\n      scale={scale}\n      value={value ?? field.initialValue}\n      onChange={(v) => onChange(v)}\n      label={field.title}\n      id={id}\n      readOnly={readOnly}\n      invalid={invalid}\n      suffix={suffix}\n      onBlur={onBlur}\n      density=\"form\"\n    />\n  );\n}\n"],"mappings":"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"}