@agent-native/core 0.82.0 → 0.84.0

package/corpus/templates/design/app/components/design/inspector/ConstraintsWidget.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import {
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -49,6 +50,15 @@ export interface ConstraintsWidgetProps {
   className?: string;
 }
 
+export interface ConstraintsPreviewProps {
+  value: ConstraintsValue;
+  labels?: Partial<ConstraintsWidgetLabels>;
+  disabled?: boolean;
+  size?: number;
+  surface?: boolean;
+  className?: string;
+}
+
 const DEFAULT_LABELS: ConstraintsWidgetLabels = {
   title: "Constraints", // i18n-ignore fallback component label
   horizontal: "Horizontal", // i18n-ignore fallback component label
@@ -163,6 +173,10 @@ interface PinBoxProps {
   labels: Pick<ConstraintsWidgetLabels, "left" | "right" | "top" | "bottom">;
   onToggleH: (side: "left" | "right") => void;
   onToggleV: (side: "top" | "bottom") => void;
+  interactive?: boolean;
+  size?: number;
+  surface?: boolean;
+  className?: string;
 }
 
 function PinBox({
@@ -171,6 +185,10 @@ function PinBox({
   labels,
   onToggleH,
   onToggleV,
+  interactive = true,
+  size = BOX,
+  surface = true,
+  className,
 }: PinBoxProps) {
   const [hoveredPin, setHoveredPin] = useState<
     "left" | "right" | "top" | "bottom" | null
@@ -189,7 +207,7 @@ function PinBox({
   //   active / scale → accent (primary)
   //   hovered inactive → slightly brighter muted
   //   inactive → muted (30% foreground opacity)
-  const ACCENT = "hsl(var(--primary))";
+  const ACCENT = "var(--design-editor-accent-color, hsl(var(--primary)))";
   // Hover: lighten inactive pins on hover — use 55% opacity instead of 30%
   const MUTED = "hsl(var(--foreground) / 0.30)";
   const MUTED_HOVER = "hsl(var(--foreground) / 0.60)";
@@ -229,15 +247,20 @@ function PinBox({
 
   return (
     <svg
-      width={BOX}
-      height={BOX}
+      width={size}
+      height={size}
       viewBox={`0 0 ${BOX} ${BOX}`}
       aria-hidden="true"
       className={cn(
-        "shrink-0 rounded-sm",
+        "shrink-0 rounded-[5px]",
         disabled && "pointer-events-none opacity-40",
+        className,
       )}
-      style={{ background: "hsl(var(--muted) / 0.4)" }}
+      style={{
+        background: surface
+          ? "var(--design-editor-control-bg, hsl(var(--muted) / 0.4))"
+          : "transparent",
+      }}
     >
       {/* outer border */}
       <rect
@@ -336,7 +359,7 @@ function PinBox({
       />
 
       {/* invisible click + hover targets — rendered on top of strokes */}
-      {!disabled && (
+      {interactive && !disabled && (
         <>
           {/* left pin hit area */}
           <rect
@@ -402,6 +425,92 @@ function PinBox({
 
 // ── Main widget ──────────────────────────────────────────────────────────────
 
+export function ConstraintsPreview({
+  value,
+  labels,
+  disabled = false,
+  size = 22,
+  surface = false,
+  className,
+}: ConstraintsPreviewProps) {
+  const copy = { ...DEFAULT_LABELS, ...labels };
+
+  return (
+    <PinBox
+      value={value}
+      disabled={disabled}
+      labels={copy}
+      onToggleH={() => undefined}
+      onToggleV={() => undefined}
+      interactive={false}
+      size={size}
+      surface={surface}
+      className={className}
+    />
+  );
+}
+
+function ConstraintSelect({
+  axis,
+  value,
+  onChange,
+  disabled,
+  labels,
+}: {
+  axis: "horizontal" | "vertical";
+  value: HorizontalConstraint | VerticalConstraint;
+  onChange: (value: HorizontalConstraint | VerticalConstraint) => void;
+  disabled: boolean;
+  labels: ConstraintsWidgetLabels;
+}) {
+  const options =
+    axis === "horizontal"
+      ? [
+          { value: "left", label: labels.left },
+          { value: "right", label: labels.right },
+          { value: "left-right", label: labels.leftRight },
+          { value: "center", label: labels.center },
+          { value: "scale", label: labels.scale },
+        ]
+      : [
+          { value: "top", label: labels.top },
+          { value: "bottom", label: labels.bottom },
+          { value: "top-bottom", label: labels.topBottom },
+          { value: "center", label: labels.center },
+          { value: "scale", label: labels.scale },
+        ];
+
+  return (
+    <Select
+      value={value}
+      onValueChange={(next) =>
+        onChange(next as HorizontalConstraint | VerticalConstraint)
+      }
+      disabled={disabled}
+    >
+      <SelectTrigger
+        className="h-8 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[12px] shadow-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)] focus:ring-offset-0 [&>svg]:size-3"
+        aria-label={axis === "horizontal" ? labels.horizontal : labels.vertical}
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent className="z-[270]">
+        <SelectGroup>
+          {options.map((option) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              className="text-[12px]"
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}
+
 export function ConstraintsWidget({
   value,
   onChange,
@@ -420,91 +529,40 @@ export function ConstraintsWidget({
   }
 
   return (
-    <div className={cn("space-y-1.5", className)}>
-      {/* section label */}
-      <span className="text-[11px] font-medium text-muted-foreground">
+    <div className={cn("space-y-2", className)}>
+      <span className="!text-[11px] font-medium text-muted-foreground">
         {copy.title}
       </span>
 
-      {/* main row: pin-box LEFT + dropdowns RIGHT */}
-      <div className="flex items-center gap-1.5">
-        {/* pin box */}
-        <PinBox
-          value={value}
-          disabled={disabled}
-          labels={copy}
-          onToggleH={handleToggleH}
-          onToggleV={handleToggleV}
-        />
-
-        {/* dropdowns column */}
-        <div className="flex min-w-0 flex-1 flex-col gap-1">
-          {/* horizontal constraint */}
-          <Select
+      <div className="grid grid-cols-[minmax(0,1fr)_4rem] items-stretch gap-2">
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <ConstraintSelect
+            axis="horizontal"
             value={value.horizontal}
-            onValueChange={(next) =>
+            onChange={(next) =>
               onChange({ ...value, horizontal: next as HorizontalConstraint })
             }
             disabled={disabled}
-          >
-            <SelectTrigger
-              className="h-6 w-full px-1.5 text-[11px]"
-              aria-label={copy.horizontal}
-            >
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="left" className="text-[11px]">
-                {copy.left}
-              </SelectItem>
-              <SelectItem value="right" className="text-[11px]">
-                {copy.right}
-              </SelectItem>
-              <SelectItem value="left-right" className="text-[11px]">
-                {copy.leftRight}
-              </SelectItem>
-              <SelectItem value="center" className="text-[11px]">
-                {copy.center}
-              </SelectItem>
-              <SelectItem value="scale" className="text-[11px]">
-                {copy.scale}
-              </SelectItem>
-            </SelectContent>
-          </Select>
-
-          {/* vertical constraint */}
-          <Select
+            labels={copy}
+          />
+          <ConstraintSelect
+            axis="vertical"
             value={value.vertical}
-            onValueChange={(next) =>
+            onChange={(next) =>
               onChange({ ...value, vertical: next as VerticalConstraint })
             }
             disabled={disabled}
-          >
-            <SelectTrigger
-              className="h-6 w-full px-1.5 text-[11px]"
-              aria-label={copy.vertical}
-            >
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="top" className="text-[11px]">
-                {copy.top}
-              </SelectItem>
-              <SelectItem value="bottom" className="text-[11px]">
-                {copy.bottom}
-              </SelectItem>
-              <SelectItem value="top-bottom" className="text-[11px]">
-                {copy.topBottom}
-              </SelectItem>
-              <SelectItem value="center" className="text-[11px]">
-                {copy.center}
-              </SelectItem>
-              <SelectItem value="scale" className="text-[11px]">
-                {copy.scale}
-              </SelectItem>
-            </SelectContent>
-          </Select>
+            labels={copy}
+          />
         </div>
+        <PinBox
+          value={value}
+          disabled={disabled}
+          labels={copy}
+          onToggleH={handleToggleH}
+          onToggleV={handleToggleV}
+          size={64}
+        />
       </div>
     </div>
   );

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -1085,7 +1085,7 @@ export function DesignColorPicker({
           disabled={disabled}
           aria-label={copy.hex}
           spellCheck={false}
-          className="h-6 min-w-0 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] tabular-nums uppercase"
+          className="h-6 min-w-0 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 !text-[11px] tabular-nums uppercase md:!text-[11px]"
           onChange={(e) => {
             hexDraftRef.current = e.target.value;
             setHexDraft(e.target.value);
@@ -1206,7 +1206,7 @@ export function DesignColorPicker({
             disabled={disabled}
             aria-label={copy.trigger}
             className={cn(
-              "flex h-6 w-full items-center gap-1.5 rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] shadow-none",
+              "flex h-6 w-full items-center gap-1.5 rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 !text-[11px] shadow-none",
               "hover:bg-[var(--design-editor-panel-raised-bg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
               disabled && "pointer-events-none opacity-50",
             )}
@@ -1216,10 +1216,10 @@ export function DesignColorPicker({
               className="size-4 shrink-0 rounded-[3px] border border-border/60"
               style={triggerSwatchStyle(value, color)}
             />
-            <span className="min-w-0 flex-1 truncate text-left tabular-nums uppercase text-[11px]">
+            <span className="min-w-0 flex-1 truncate text-left tabular-nums uppercase !text-[11px]">
               {triggerLabel(effectivePaintType, color)}
             </span>
-            <span className="tabular-nums text-muted-foreground text-[11px]">
+            <span className="tabular-nums text-muted-foreground !text-[11px]">
               {effectiveOpacity}%
             </span>
           </button>
@@ -1362,7 +1362,7 @@ export function DesignColorPicker({
                       placeholder={"Video URL (mp4, webm)" /* i18n-ignore */}
                       aria-label={"Video URL" /* i18n-ignore */}
                       spellCheck={false}
-                      className="h-6 w-full rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px]"
+                      className="h-6 w-full rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 !text-[11px] md:!text-[11px]"
                       onKeyDown={(e) => {
                         if (e.key === "Enter") {
                           e.preventDefault();
@@ -1565,7 +1565,7 @@ export function DesignColorPicker({
                               setOpacity(next);
                             }
                           }}
-                          className="h-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-1 text-[11px] tabular-nums shadow-none focus-visible:ring-0"
+                          className="h-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-1 !text-[11px] tabular-nums shadow-none focus-visible:ring-0"
                           compact
                         />
                         <span className="flex w-4 shrink-0 items-center justify-center border-l border-border/60 text-[10px] text-muted-foreground">
@@ -1579,7 +1579,7 @@ export function DesignColorPicker({
                 {showBlendMode && onBlendModeChange && (
                   <div className="border-t border-border/70 px-3 py-2.5">
                     <div className="flex items-center gap-1.5">
-                      <span className="min-w-0 flex-1 text-[11px] text-muted-foreground">
+                      <span className="min-w-0 flex-1 !text-[11px] text-muted-foreground">
                         {copy.blendMode}
                       </span>
                       <Select
@@ -1589,7 +1589,7 @@ export function DesignColorPicker({
                       >
                         <SelectTrigger
                           aria-label={copy.blendMode}
-                          className="h-6 min-w-0 flex-1 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 text-[11px] shadow-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)]"
+                          className="h-6 min-w-0 flex-1 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 !text-[11px] shadow-none focus:ring-1 focus:ring-[var(--design-editor-accent-color)]"
                         >
                           <SelectValue />
                         </SelectTrigger>
@@ -1598,7 +1598,7 @@ export function DesignColorPicker({
                             <SelectItem
                               key={option.value}
                               value={option.value}
-                              className="text-[11px]"
+                              className="!text-[11px]"
                             >
                               {option.label}
                             </SelectItem>
@@ -1616,7 +1616,7 @@ export function DesignColorPicker({
                     section is never empty. */}
                 <div className="border-t border-border/70 px-3 py-2.5">
                   {/* Source label — matches the design editor layout */}
-                  <div className="mb-2 flex h-6 w-full items-center justify-between px-0.5 text-[11px] text-muted-foreground">
+                  <div className="mb-2 flex h-6 w-full items-center justify-between px-0.5 !text-[11px] text-muted-foreground">
                     {"Document colors" /* i18n-ignore design picker source */}
                   </div>
 
@@ -1718,7 +1718,7 @@ function ColorModelPill({
         onClick={() => setMenuOpen((o) => !o)}
         className={cn(
           "flex h-6 w-[4.5rem] items-center gap-0.5 rounded px-1.5",
-          "text-[11px] font-semibold text-foreground",
+          "!text-[11px] font-semibold text-foreground",
           "bg-transparent border-0 shadow-none",
           "hover:bg-[var(--design-editor-control-bg)]",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
@@ -1751,7 +1751,7 @@ function ColorModelPill({
                 setMenuOpen(false);
               }}
               className={cn(
-                "flex w-full items-center px-2 py-1 text-[11px]",
+                "flex w-full items-center px-2 py-1 !text-[11px]",
                 "hover:bg-accent hover:text-accent-foreground",
                 "focus-visible:outline-none focus-visible:bg-accent",
                 m.value === value
@@ -2018,7 +2018,7 @@ function ScrubbyNumberInput({
       max={max}
       disabled={disabled}
       className={cn(
-        "h-6 w-full rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-center text-[11px] tabular-nums",
+        "h-6 w-full rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-center !text-[11px] tabular-nums",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         compact && "border-0 shadow-none focus-visible:ring-0",
         className,

package/corpus/templates/design/app/components/design/inspector/ExportSettingsPanel.tsx

@@ -140,7 +140,7 @@ function ScaleSelect({
     >
       <SelectTrigger
         className={cn(
-          "h-6 w-14 shrink-0 px-1.5 text-[11px]",
+          "h-6 w-14 shrink-0 px-1.5 !text-[11px]",
           controlChromeClass,
         )}
       >
@@ -149,7 +149,7 @@ function ScaleSelect({
       <SelectContent>
         <SelectGroup>
           {SCALE_PRESETS.map((p) => (
-            <SelectItem key={p.value} value={p.value} className="text-[11px]">
+            <SelectItem key={p.value} value={p.value} className="!text-[11px]">
               {p.label}
             </SelectItem>
           ))}
@@ -241,7 +241,7 @@ export function ExportSettingsPanel({
     <div className={cn("space-y-1.5", className)}>
       {/* Section header: title left, "+" right — matches the design editor export header */}
       <div className="flex h-6 items-center justify-between">
-        <span className="text-[11px] font-medium text-muted-foreground">
+        <span className="!text-[11px] font-medium text-muted-foreground">
           {copy.title}
         </span>
         <button
@@ -275,7 +275,7 @@ export function ExportSettingsPanel({
         variant="outline"
         disabled={isDisabled}
         onClick={handleExport}
-        className={cn("h-6 w-full px-2 text-[11px]", controlChromeClass)}
+        className={cn("h-6 w-full px-2 !text-[11px]", controlChromeClass)}
       >
         <IconDownload className="size-3.5" />
         {copy.export}
@@ -333,7 +333,7 @@ function ExportRow({
             }
           }}
           className={cn(
-            "h-6 w-14 shrink-0 px-1.5 text-[11px] tabular-nums",
+            "h-6 w-14 shrink-0 px-1.5 !text-[11px] tabular-nums md:!text-[11px]",
             controlChromeClass,
           )}
           aria-label="Scale"
@@ -365,7 +365,7 @@ function ExportRow({
       >
         <SelectTrigger
           className={cn(
-            "h-6 min-w-0 flex-1 px-1.5 text-[11px]",
+            "h-6 min-w-0 flex-1 px-1.5 !text-[11px]",
             controlChromeClass,
           )}
         >
@@ -377,7 +377,7 @@ function ExportRow({
               <SelectItem
                 key={format}
                 value={format}
-                className="text-[11px] uppercase"
+                className="!text-[11px] uppercase"
               >
                 {format.toUpperCase()}
               </SelectItem>
@@ -393,7 +393,7 @@ function ExportRow({
         onChange={(e) => onPatchRow(row.id, { suffix: e.target.value })}
         placeholder={labels.suffix}
         className={cn(
-          "h-6 min-w-0 flex-1 px-1.5 text-[11px]",
+          "h-6 min-w-0 flex-1 px-1.5 !text-[11px] md:!text-[11px]",
           controlChromeClass,
         )}
         aria-label={labels.suffix}

package/corpus/templates/design/app/components/design/inspector/GradientEditor.tsx

@@ -564,7 +564,7 @@ export function GradientEditor({
               if (Number.isFinite(next))
                 updateStopPosition(selectedStopId, clamp(next, 0, 100));
             }}
-            className="h-full min-w-0 flex-1 bg-transparent px-1.5 text-[11px] tabular-nums focus-visible:outline-none"
+            className="h-full min-w-0 flex-1 bg-transparent px-1.5 !text-[11px] tabular-nums focus-visible:outline-none"
           />
         </div>
 
@@ -595,7 +595,7 @@ export function GradientEditor({
                   }
                 }}
                 onBlur={() => setAngleInput(null)}
-                className="h-full min-w-0 flex-1 bg-transparent px-1.5 text-[11px] tabular-nums focus-visible:outline-none"
+                className="h-full min-w-0 flex-1 bg-transparent px-1.5 !text-[11px] tabular-nums focus-visible:outline-none"
               />
               <span className="flex w-4 shrink-0 items-center justify-center text-[10px] text-muted-foreground">
                 °

package/corpus/templates/design/app/components/design/inspector/ImageFillControls.tsx

@@ -347,7 +347,7 @@ export function ImageFillControls({
           placeholder={"Image URL" /* i18n-ignore */}
           aria-label={"Image URL" /* i18n-ignore */}
           spellCheck={false}
-          className="h-6 min-w-0 flex-1 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px]"
+          className="h-6 min-w-0 flex-1 rounded-md border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 !text-[11px] md:!text-[11px]"
           onChange={(event) => {
             urlDraftRef.current = event.target.value;
             setUrlDraft(event.target.value);
@@ -400,13 +400,13 @@ export function ImageFillControls({
       >
         <SelectTrigger
           aria-label={"Fill" /* i18n-ignore image fit selector */}
-          className="h-6 w-full rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 text-[11px] shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-3 [&>svg]:shrink-0"
+          className="h-6 w-full rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-2 !text-[11px] shadow-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-3 [&>svg]:shrink-0"
         >
           <SelectValue />
         </SelectTrigger>
-        <SelectContent className="text-[11px]">
+        <SelectContent className="!text-[11px]">
           {FIT_MODES.map(({ mode, label }) => (
-            <SelectItem key={mode} value={mode} className="text-[11px]">
+            <SelectItem key={mode} value={mode} className="!text-[11px]">
               {label}
             </SelectItem>
           ))}

package/corpus/templates/design/app/components/design/inspector/InspectorAiActions.tsx

@@ -2,7 +2,7 @@ import { useT } from "@agent-native/core/client";
 import {
   IconClipboard,
   IconChevronDown,
-  IconSparkles,
+  IconMessageCircle,
 } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -71,7 +71,7 @@ export function InspectorAiActions({
           )}
         >
           <span className="flex items-center gap-1.5">
-            <IconSparkles className="size-3.5 shrink-0" />
+            <IconMessageCircle className="size-3.5 shrink-0" />
             {t("designEditor.localSourceEdit.askAi")}
           </span>
           <IconChevronDown
@@ -115,7 +115,7 @@ export function InspectorAiActions({
                 setOpen(false);
               }}
             >
-              <IconSparkles className="size-3.5 shrink-0" />
+              <IconMessageCircle className="size-3.5 shrink-0" />
               {t("designEditor.localSourceEdit.applyWithAi")}
             </Button>
             <Button

package/corpus/templates/design/app/components/design/inspector/ScrubInput.tsx

@@ -42,6 +42,7 @@ export interface ScrubInputProps extends ScrubExpressionOptions {
   icon?: ScrubInputIcon | null;
   disabled?: boolean;
   placeholder?: string;
+  mixed?: boolean;
   className?: string;
   inputClassName?: string;
   labelClassName?: string;
@@ -62,6 +63,7 @@ export function ScrubInput({
   icon: Icon = IconArrowsHorizontal,
   disabled = false,
   placeholder,
+  mixed = false,
   className,
   inputClassName,
   labelClassName,
@@ -71,7 +73,7 @@ export function ScrubInput({
   const generatedId = useId();
   const inputId = id ?? generatedId;
   const [draft, setDraft] = useState(() =>
-    formatScrubValue(value, { unit, precision }),
+    mixed ? "Mixed" : 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
@@ -90,11 +92,13 @@ export function ScrubInput({
 
   useEffect(() => {
     if (!focused) {
-      const formatted = formatScrubValue(value, { unit, precision });
+      const formatted = mixed
+        ? "Mixed"
+        : formatScrubValue(value, { unit, precision });
       draftRef.current = formatted;
       setDraft(formatted);
     }
-  }, [focused, precision, unit, value]);
+  }, [focused, mixed, precision, unit, value]);
 
   const options = { unit, min, max, precision };
   const resolvedTooltipLabel = tooltipLabel ?? ariaLabel ?? label;
@@ -112,9 +116,10 @@ export function ScrubInput({
     // 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 === "Mixed") return;
     const parsed = parseScrubExpression(currentDraft, value, options);
     if (!parsed) {
-      const reverted = formatScrubValue(value, options);
+      const reverted = mixed ? "Mixed" : formatScrubValue(value, options);
       draftRef.current = reverted;
       setDraft(reverted);
       return;
@@ -151,7 +156,7 @@ export function ScrubInput({
 
     if (event.key === "Escape") {
       event.preventDefault();
-      const reverted = formatScrubValue(value, options);
+      const reverted = mixed ? "Mixed" : formatScrubValue(value, options);
       draftRef.current = reverted;
       setDraft(reverted);
       skipNextBlurCommitRef.current = true;
@@ -216,7 +221,7 @@ export function ScrubInput({
             onPointerUp={endDrag}
             onPointerCancel={endDrag}
             className={cn(
-              "flex h-6 w-20 shrink-0 cursor-ew-resize select-none items-center gap-1 rounded-sm text-[11px] text-muted-foreground transition-colors",
+              "flex h-6 w-20 shrink-0 cursor-ew-resize select-none items-center gap-1 rounded-sm !text-[11px] text-muted-foreground transition-colors",
               "hover:bg-[var(--design-editor-control-bg)] hover:text-foreground",
               dragging &&
                 "bg-[var(--design-editor-control-bg)] text-foreground",
@@ -257,9 +262,10 @@ export function ScrubInput({
         onKeyDown={handleKeyDown}
         className={cn(
           // Compact design-editor: h-6, 11px tabular text, ring-1 with no offset.
-          "h-6 text-[11px] tabular-nums",
+          "h-6 !text-[11px] tabular-nums",
           "focus-visible:ring-1 focus-visible:ring-offset-0",
           inputClassName,
+          mixed && "text-muted-foreground",
         )}
       />
     </div>