@agent-native/toolkit 0.0.0-beta-20260819143124

package/src/design-tweaks/scrub-input.tsx

@@ -0,0 +1,525 @@
+import { IconArrowsHorizontal } from "@tabler/icons-react";
+import { IconMinus, IconPlus } from "@tabler/icons-react";
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+} from "react";
+
+import { Input } from "../ui/input.js";
+import { Label } from "../ui/label.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip.js";
+import { cn } from "../utils.js";
+import {
+  formatScrubValue,
+  getScrubStepFromEvent,
+  normalizeScrubNumber,
+  parseScrubExpression,
+  roundScrubDragValue,
+  startScrubDrag,
+  updateScrubDrag,
+  type ScrubExpressionOptions,
+} from "./scrub-input-utils.js";
+
+type ScrubInputIcon = (props: {
+  className?: string;
+  "aria-hidden"?: boolean;
+}) => ReactNode;
+
+export interface ScrubInputChangeMeta {
+  source: "commit" | "keyboard" | "scrub";
+  expression?: string;
+  /**
+   * Gesture-lifecycle signal for downstream consumers that want to throttle
+   * expensive work during a drag and only do the expensive commit once.
+   *
+   * - "preview": a live, in-progress tick — e.g. one pointermove sample while
+   *   scrubbing. There can be many of these per gesture; treat each as a
+   *   cheap, throttleable preview of the value, not a point to commit at full
+   *   cost.
+   * - "commit": the gesture's authoritative, final value. Fired exactly once
+   *   per gesture: on pointerup that ends a scrub drag, and for every
+   *   `source: "commit"` (blur/Enter) or `source: "keyboard"` (arrow step)
+   *   change, since those are already discrete, complete edits.
+   */
+  phase: "preview" | "commit";
+  /**
+   * Set when an arrow-key nudge fires on a `mixed` selection (see
+   * `handleKeyDown`): there is no single current value to step from across a
+   * mixed selection, so `onChange`'s `value` arg is the step delta itself
+   * (not a new absolute value) and consumers that support per-target relative
+   * application should add this delta to each selected target's own current
+   * value instead of overwriting every target with `value`. Omitted for
+   * every other change — existing consumers that don't check for it keep
+   * receiving absolute values exactly as before.
+   */
+  relativeDelta?: number;
+}
+
+export interface ScrubInputProps extends ScrubExpressionOptions {
+  label: string;
+  value: number;
+  onChange: (value: number, meta: ScrubInputChangeMeta) => void;
+  id?: string;
+  step?: number;
+  icon?: ScrubInputIcon | null;
+  /** Use the compact icon-only prefix treatment without relying on CSS selectors. */
+  prefix?: "label" | "icon";
+  disabled?: boolean;
+  placeholder?: string;
+  mixed?: boolean;
+  mixedLabel?: string;
+  className?: string;
+  inputClassName?: string;
+  labelClassName?: string;
+  ariaLabel?: string;
+  tooltipLabel?: string;
+  /** Replace the drag-scrub label with explicit minus/plus step buttons. */
+  steppers?: boolean;
+  decrementLabel?: string;
+  incrementLabel?: string;
+}
+
+export interface PendingScrubCommit {
+  value: number;
+  /** Incoming prop value at commit time. While this exact value remains, the
+   * host has not acknowledged the write yet and the optimistic draft should
+   * stay visible. A different incoming value is authoritative host
+   * normalization/rejection and must supersede the optimistic draft. */
+  baseline: number;
+}
+
+export function resolvePendingScrubCommit(
+  pending: PendingScrubCommit | null,
+  incomingValue: number,
+  options: ScrubExpressionOptions,
+): "none" | "hold" | "confirmed" | "superseded" {
+  if (pending === null) return "none";
+  const incoming = normalizeScrubNumber(incomingValue, options);
+  if (incoming === pending.value) return "confirmed";
+  return incoming === pending.baseline ? "hold" : "superseded";
+}
+
+export function VisualScrubInput({
+  label,
+  value,
+  onChange,
+  id,
+  step = 1,
+  unit,
+  min,
+  max,
+  precision,
+  icon: Icon = IconArrowsHorizontal,
+  prefix = "label",
+  disabled = false,
+  placeholder,
+  mixed = false,
+  mixedLabel,
+  className,
+  inputClassName,
+  labelClassName,
+  ariaLabel,
+  tooltipLabel,
+  steppers = false,
+  decrementLabel = "Decrease",
+  incrementLabel = "Increase",
+}: ScrubInputProps) {
+  const resolvedMixedLabel = mixedLabel ?? "Mixed";
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const [draft, setDraft] = useState(() =>
+    mixed ? resolvedMixedLabel : formatScrubValue(value, { unit, precision }),
+  );
+  // Track the latest draft in a ref so commitDraft always reads the most
+  // up-to-date value even if the blur event fires before the React state
+  // update has been committed to the render tree (concurrent mode / batching).
+  const draftRef = useRef(draft);
+  const [focused, setFocused] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const skipNextBlurCommitRef = useRef(false);
+  const dragRef = useRef({
+    pointerId: -1,
+    drag: startScrubDrag(0),
+  });
+  // The last normalized value emitted as a "preview" scrub tick, so endDrag
+  // can re-emit it once as the gesture's authoritative "commit" — without
+  // recomputing from stale pointer deltas after pointer capture is released.
+  const lastScrubValueRef = useRef(value);
+  // The most recent value THIS input committed (typed Enter/blur, keyboard
+  // nudge, or scrub release) that the host hasn't echoed back yet. While this
+  // is set, the resync effect below must hold the optimistic committed
+  // display instead of snapping back to the still-stale incoming `value`
+  // prop — otherwise a round-trip slower than one React render (host commit
+  // -> computedStyles update -> fresh `value` prop) clobbers the just-typed
+  // value back to the old one the instant focus leaves the input, which
+  // reads as "Enter resets to the old value". Cleared as soon as a fresh
+  // `value` prop confirms (or supersedes) the pending commit.
+  const pendingCommitRef = useRef<PendingScrubCommit | null>(null);
+  const options = { unit, min, max, precision };
+
+  useEffect(() => {
+    if (mixed) pendingCommitRef.current = null;
+    const resolution = resolvePendingScrubCommit(
+      pendingCommitRef.current,
+      value,
+      options,
+    );
+    if (resolution !== "none") {
+      if (resolution === "confirmed" || resolution === "superseded") {
+        // The host either echoed exactly what we committed or returned a new,
+        // authoritative normalized/rejected value. In both cases resume prop
+        // synchronization. The old equality-only logic held forever on the
+        // second path, leaving the field permanently stuck on a value the
+        // canvas never accepted.
+        pendingCommitRef.current = null;
+      } else {
+        // Still seeing the exact pre-commit prop — don't stomp the optimistic
+        // draft while the source-write round trip is pending.
+        return;
+      }
+    }
+    if (!focused) {
+      const formatted = mixed
+        ? resolvedMixedLabel
+        : formatScrubValue(value, { unit, precision });
+      draftRef.current = formatted;
+      setDraft(formatted);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `options` is a fresh object every render; the individual fields it's built from (unit/min/max/precision) are already listed below.
+  }, [focused, max, min, mixed, precision, resolvedMixedLabel, unit, value]);
+
+  const resolvedTooltipLabel = tooltipLabel ?? ariaLabel ?? label;
+
+  const setNextValue = (nextValue: number, meta: ScrubInputChangeMeta) => {
+    const normalized = normalizeScrubNumber(nextValue, options);
+    // Mark commit-phase writes as pending confirmation so the resync effect
+    // holds this optimistic display instead of reverting to a stale `value`
+    // prop before the host's round-trip lands (see pendingCommitRef above).
+    // Preview ticks don't need this: they're expected to be superseded by
+    // the next tick or the gesture's own final commit almost immediately.
+    if (meta.phase === "commit") {
+      pendingCommitRef.current = {
+        value: normalized,
+        baseline: normalizeScrubNumber(value, options),
+      };
+    }
+    onChange(normalized, meta);
+    const formatted = formatScrubValue(normalized, options);
+    draftRef.current = formatted;
+    setDraft(formatted);
+    return normalized;
+  };
+
+  const commitDraft = () => {
+    // Always read from the ref so we use the latest typed value even if the
+    // React render with the updated draft state hasn't committed yet (e.g.
+    // when blur fires in the same synchronous batch as the last onChange).
+    const currentDraft = draftRef.current;
+    if (mixed && currentDraft === resolvedMixedLabel) return;
+    const parsed = parseScrubExpression(currentDraft, value, options);
+    if (!parsed) {
+      const reverted = mixed
+        ? resolvedMixedLabel
+        : formatScrubValue(value, options);
+      draftRef.current = reverted;
+      setDraft(reverted);
+      return;
+    }
+
+    draftRef.current = parsed.normalized;
+    setDraft(parsed.normalized);
+    // From a mixed selection every explicitly typed value must commit, even
+    // when it equals the placeholder `value` prop (e.g. typing "0"): the
+    // selected objects hold differing values, so "no change" is meaningless.
+    if (parsed.value !== value || mixed) {
+      // See setNextValue's pendingCommitRef comment — this text-commit path
+      // (Enter/blur) bypasses setNextValue, so mark it pending here too.
+      pendingCommitRef.current = {
+        value: parsed.value,
+        baseline: normalizeScrubNumber(value, options),
+      };
+      onChange(parsed.value, {
+        source: "commit",
+        expression: currentDraft,
+        phase: "commit",
+      });
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+      event.preventDefault();
+      const direction = event.key === "ArrowUp" ? 1 : -1;
+      // getScrubStepFromEvent handles shiftKey (×10) and altKey (÷10).
+      // Cmd (metaKey) mirrors Shift for ×10 — editor convention on macOS.
+      const baseStep = getScrubStepFromEvent(event, step);
+      const cmdMultiplier = event.metaKey && !event.shiftKey ? 10 : 1;
+      nudge(direction * baseStep * cmdMultiplier);
+      return;
+    }
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitDraft();
+      skipNextBlurCommitRef.current = true;
+      event.currentTarget.blur();
+      return;
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      const reverted = mixed
+        ? resolvedMixedLabel
+        : formatScrubValue(value, options);
+      draftRef.current = reverted;
+      setDraft(reverted);
+      skipNextBlurCommitRef.current = true;
+      event.currentTarget.blur();
+    }
+  };
+
+  /** One step of `delta`, shared by arrow keys and the optional +/- buttons. */
+  const nudge = (delta: number) => {
+    // Mixed selection: the `value` prop is only a placeholder (typically 0)
+    // — there's no single current value to step from, and there's no
+    // typed draft either (mixed keeps the draft as the literal "Mixed"
+    // string, see commitDraft's guard). Figma's behavior here is a
+    // *relative* nudge: apply the same +/-delta to each selected object's
+    // own value rather than snapping every object to one absolute number.
+    // ScrubInput itself can't resolve each target's individual value, so
+    // emit the delta via `onChange` (as both `value` and
+    // `meta.relativeDelta`) and let the consumer apply it per-target. Do
+    // NOT route through setNextValue: that formats/displays one absolute
+    // number in the draft, which would incorrectly replace the "Mixed"
+    // placeholder text with a single value that was never actually common
+    // to the whole selection.
+    if (mixed) {
+      onChange(delta, {
+        source: "keyboard",
+        phase: "commit",
+        relativeDelta: delta,
+      });
+      return;
+    }
+    // Step from the currently typed draft, not the last-committed `value`
+    // prop — otherwise an in-progress, uncommitted edit (typed but not yet
+    // blurred/entered) is silently discarded the moment an arrow key is
+    // pressed. Parse the draft the same way commitDraft does, falling back
+    // to `value` only when the draft doesn't parse (e.g. empty/invalid).
+    const draftParsed = parseScrubExpression(draftRef.current, value, options);
+    const base = draftParsed ? draftParsed.value : value;
+    setNextValue(base + delta, {
+      source: "keyboard",
+      phase: "commit",
+    });
+  };
+
+  const handlePointerDown = (event: PointerEvent<HTMLLabelElement>) => {
+    if (disabled || event.button !== 0) return;
+    event.preventDefault();
+    dragRef.current = {
+      pointerId: event.pointerId,
+      drag: startScrubDrag(event.clientX),
+    };
+    // Re-seed the gesture's running base from the current prop right as the
+    // drag starts. Without this, a stale `lastScrubValueRef` left over from a
+    // previous gesture (or from an out-of-band prop update that arrived while
+    // not dragging) would silently become this gesture's starting point
+    // instead of the value actually displayed when the user grabbed the
+    // control.
+    lastScrubValueRef.current = value;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  };
+
+  const handlePointerMove = (event: PointerEvent<HTMLLabelElement>) => {
+    if (!dragging || dragRef.current.pointerId !== event.pointerId) return;
+    // Mixed selection: scrubbing has no meaningful base value (the `value`
+    // prop is a placeholder), so committing drag deltas would snap every
+    // selected object to a step-from-0 value. Keep the drag inert; releasing
+    // without a committed drag focuses the input so the user can type an
+    // explicit value that then applies to all.
+    if (mixed) return;
+    // updateScrubDrag mirrors the jitter-threshold + hasDragged bookkeeping
+    // (see scrub-input-utils.ts) so it can be unit tested in isolation from
+    // real DOM pointer events.
+    const tick = updateScrubDrag(dragRef.current.drag, event.clientX);
+    dragRef.current.drag = tick.state;
+    if (tick.deltaX === null) return;
+    // Use incremental deltas from the last move so that clamped/rounded values
+    // committed by onChange are respected. A total-delta approach would create
+    // a dead zone equal to the amount dragged past the clamp boundary.
+    //
+    // Accumulate from this gesture's OWN last emitted value
+    // (lastScrubValueRef), not the `value` prop. The prop only reflects
+    // whatever the host last echoed back through computedStyles — a "preview"
+    // phase commit is not guaranteed to round-trip before the next
+    // pointermove tick fires (the host may debounce/throttle/skip preview
+    // writes), so re-reading `value` here would recompute every tick from a
+    // stale, pre-drag base plus one tiny incremental delta: the displayed
+    // number barely creeps from the original value instead of following the
+    // cursor, which reads as jittery/near-random rather than a smooth
+    // continuum. The gesture's own running total is always current because
+    // this component sets it itself on every tick below.
+    const next =
+      lastScrubValueRef.current +
+      tick.deltaX *
+        getScrubStepFromEvent(
+          { altKey: event.altKey, shiftKey: event.shiftKey },
+          step,
+        );
+    // Px-type fields snap to whole numbers while scrubbing (see
+    // roundScrubDragValue) even though `precision` — which also governs typed
+    // input and keyboard nudges — allows a decimal. Rounding here, before
+    // setNextValue's own normalizeScrubNumber pass, keeps every subsequent
+    // incremental delta measured from an already-whole value instead of
+    // drifting on fractional leftovers.
+    lastScrubValueRef.current = setNextValue(roundScrubDragValue(next, unit), {
+      source: "scrub",
+      phase: "preview",
+    });
+  };
+
+  const endDrag = (event: PointerEvent<HTMLLabelElement>) => {
+    if (dragRef.current.pointerId !== event.pointerId) return;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    const wasDrag = dragRef.current.drag.hasDragged;
+    setDragging(false);
+    // A real scrub drag emitted only "preview" ticks via handlePointerMove.
+    // Emit exactly one authoritative "commit" here with the final value so a
+    // downstream consumer can distinguish "gesture finished" from "still
+    // dragging" — without this, the last preview tick would be the only
+    // signal, and a consumer that ignores preview ticks would never commit.
+    if (wasDrag && !mixed) {
+      // See setNextValue's pendingCommitRef comment — mark this gesture's
+      // authoritative value as pending confirmation so releasing the drag
+      // can't be clobbered back to the pre-drag value by a slow host
+      // round-trip (same class of bug as the Enter/blur text-commit case).
+      pendingCommitRef.current = {
+        value: lastScrubValueRef.current,
+        baseline: normalizeScrubNumber(value, options),
+      };
+      onChange(lastScrubValueRef.current, {
+        source: "scrub",
+        phase: "commit",
+      });
+    }
+    // If the pointer was released without dragging (a plain click), focus the
+    // input so the user can type immediately — mirrors the design editor's label click
+    // behaviour (the event.preventDefault() in handlePointerDown blocks the
+    // native label→input focus transfer).
+    if (!wasDrag && !disabled) {
+      inputRef.current?.focus();
+    }
+  };
+
+  const stepperButton = (direction: number, stepperLabel: string) => (
+    <button
+      type="button"
+      aria-label={stepperLabel}
+      title={stepperLabel}
+      disabled={disabled}
+      onClick={() => nudge(direction * step)}
+      className="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+    >
+      {direction > 0 ? (
+        <IconPlus className="size-3.5" />
+      ) : (
+        <IconMinus className="size-3.5" />
+      )}
+    </button>
+  );
+
+  return (
+    <div className={cn("flex min-w-0 items-center gap-1.5", className)}>
+      {steppers ? (
+        stepperButton(-1, decrementLabel)
+      ) : (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Label
+                htmlFor={inputId}
+                onPointerDown={handlePointerDown}
+                onPointerMove={handlePointerMove}
+                onPointerUp={endDrag}
+                onPointerCancel={endDrag}
+                className={cn(
+                  "flex h-6 shrink-0 cursor-ew-resize select-none items-center gap-1 truncate whitespace-nowrap rounded-sm !text-[11px] text-muted-foreground transition-colors",
+                  prefix === "icon" ? "w-8 justify-center gap-0" : "w-20",
+                  "hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
+                  dragging &&
+                    "bg-[var(--design-editor-control-bg)] text-foreground",
+                  disabled &&
+                    "pointer-events-none cursor-not-allowed opacity-50",
+                  labelClassName,
+                )}
+              >
+                {Icon ? (
+                  <Icon className="size-3 shrink-0" aria-hidden={true} />
+                ) : null}
+                <span
+                  className={cn("truncate", prefix === "icon" && "sr-only")}
+                >
+                  {label}
+                </span>
+              </Label>
+            </TooltipTrigger>
+            <TooltipContent>{resolvedTooltipLabel}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+      <Input
+        ref={inputRef}
+        id={inputId}
+        value={draft}
+        disabled={disabled}
+        placeholder={placeholder}
+        inputMode="decimal"
+        aria-label={ariaLabel ?? label}
+        onFocus={(event) => {
+          setFocused(true);
+          if (mixed && mixedLabel !== undefined) {
+            const formatted = formatScrubValue(value, options);
+            draftRef.current = formatted;
+            setDraft(formatted);
+          }
+          event.currentTarget.select();
+        }}
+        onBlur={() => {
+          setFocused(false);
+          if (skipNextBlurCommitRef.current) {
+            skipNextBlurCommitRef.current = false;
+            return;
+          }
+          commitDraft();
+        }}
+        onChange={(event) => {
+          draftRef.current = event.target.value;
+          setDraft(event.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          // Compact design-editor: h-6, 11px tabular text, ring-1 with no offset.
+          "h-6 w-0 min-w-0 flex-1 !text-[11px] tabular-nums",
+          "focus-visible:ring-1 focus-visible:ring-offset-0",
+          inputClassName,
+          mixed && "text-muted-foreground",
+          steppers && "text-center",
+        )}
+      />
+      {steppers && stepperButton(1, incrementLabel)}
+    </div>
+  );
+}

package/src/design-tweaks/visual-style-controls.spec.tsx

@@ -0,0 +1,172 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import {
+  VisualColorPicker,
+  VisualScrubInput,
+  VisualSegmentedControl,
+} from "./visual-style-controls.js";
+
+describe("visual style controls", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("shows an honest mixed color instead of the fallback color", () => {
+    act(() => {
+      root.render(
+        <VisualColorPicker
+          label="Color"
+          value="#000000"
+          mixed
+          mixedLabel="Mixed colors"
+          onChange={() => {}}
+        />,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Color"]',
+    );
+    expect(trigger?.textContent).toContain("Mixed colors");
+    expect(trigger?.querySelector("span")?.style.background).toContain(
+      "linear-gradient",
+    );
+  });
+
+  it("renders the filled color trigger without an outer border", () => {
+    act(() => {
+      root.render(
+        <VisualColorPicker
+          label="Fill"
+          value="#609ff8"
+          variant="filled"
+          onChange={() => {}}
+        />,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Fill"]',
+    );
+    expect(trigger?.classList.contains("border-0")).toBe(true);
+    expect(trigger?.classList.contains("border")).toBe(false);
+    expect(trigger?.className).toContain("bg-muted/80");
+  });
+
+  it("uses the numeric value after a mixed scrub field receives focus", () => {
+    act(() => {
+      root.render(
+        <VisualScrubInput
+          label="Width"
+          value={24}
+          unit="px"
+          mixed
+          mixedLabel="Mixed values"
+          onChange={() => {}}
+        />,
+      );
+    });
+
+    const input = container.querySelector<HTMLInputElement>("input");
+    expect(input?.value).toBe("Mixed values");
+
+    act(() => input?.focus());
+    expect(input?.value).toBe("24px");
+  });
+
+  it("supports a compact icon prefix without removing the accessible label", () => {
+    const TestIcon = ({
+      className,
+      "aria-hidden": ariaHidden,
+    }: {
+      className?: string;
+      "aria-hidden"?: boolean;
+    }) => (
+      <svg
+        data-testid="scrub-icon"
+        className={className}
+        aria-hidden={ariaHidden}
+      />
+    );
+
+    act(() => {
+      root.render(
+        <VisualScrubInput
+          label="Corner radius"
+          value={12}
+          unit="px"
+          icon={TestIcon}
+          prefix="icon"
+          onChange={() => {}}
+        />,
+      );
+    });
+
+    const input = container.querySelector<HTMLInputElement>("input");
+    const label = container.querySelector<HTMLLabelElement>("label");
+    expect(label?.querySelector("svg")?.getAttribute("aria-hidden")).toBe(
+      "true",
+    );
+    expect(label?.className).toContain("w-8");
+    expect(label?.querySelector("span")?.textContent).toBe("Corner radius");
+    expect(label?.querySelector("span")?.className).toContain("sr-only");
+    expect(label?.htmlFor).toBe(input?.id);
+  });
+
+  it("keeps labels single-line while the numeric input fills the remaining row", () => {
+    act(() => {
+      root.render(
+        <VisualScrubInput
+          label="A long numeric property label"
+          value={12}
+          onChange={() => {}}
+        />,
+      );
+    });
+
+    const row = container.querySelector("div");
+    const label = container.querySelector("label");
+    const input = container.querySelector("input");
+    expect(row?.className).toContain("min-w-0");
+    expect(label?.className).toContain("whitespace-nowrap");
+    expect(label?.querySelector("span")?.className).toContain("truncate");
+    expect(input?.className).toContain("w-0");
+    expect(input?.className).toContain("flex-1");
+  });
+
+  it("leaves every segment unselected for a mixed value", () => {
+    act(() => {
+      root.render(
+        <VisualSegmentedControl
+          options={[
+            { label: "Left", value: "left" },
+            { label: "Center", value: "center" },
+          ]}
+          value={null}
+          onChange={() => {}}
+        />,
+      );
+    });
+
+    expect(
+      container.querySelectorAll(".bg-accent.text-foreground"),
+    ).toHaveLength(0);
+  });
+});