@hyperframes/studio 0.7.77 → 0.7.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.77",
+  "version": "0.7.79",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.77",
-    "@hyperframes/parsers": "0.7.77",
-    "@hyperframes/player": "0.7.77",
-    "@hyperframes/sdk": "0.7.77",
-    "@hyperframes/studio-server": "0.7.77"
+    "@hyperframes/core": "0.7.79",
+    "@hyperframes/player": "0.7.79",
+    "@hyperframes/sdk": "0.7.79",
+    "@hyperframes/studio-server": "0.7.79",
+    "@hyperframes/parsers": "0.7.79"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.77"
+    "@hyperframes/producer": "0.7.79"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/StudioLeftSidebar.tsx

@@ -154,10 +154,10 @@ export function StudioLeftSidebar({
         onAddAssetToTimeline={onAddAssetToTimeline}
         onAddCompositionToTimeline={onAddCompositionToTimeline}
       />
-      {/* Vertical resize divider: 3px visible seam, 8px pointer-capture zone via
+      {/* Vertical resize divider: 3px visible seam, 13px pointer-capture zone via
           the absolutely-positioned inner hit area. The outer element is w-[3px] so
-          it contributes only 3px of gap in the flex row; the inner -left-[2.5px]
-          element widens the hit area to 8px without affecting layout. */}
+          it contributes only 3px of gap in the flex row; the inner -left-[2px]
+          element widens the hit area without affecting layout. */}
       <div
         role="separator"
         aria-label="Resize sidebar"
@@ -176,8 +176,13 @@ export function StudioLeftSidebar({
           adjustPanelWidth("left", delta);
         }}
       >
-        {/* Expanded hit zone: 8px wide, centered on the 3px seam */}
-        <div className="absolute inset-y-0 -left-[2.5px] w-2" />
+        {/* Expanded hit zone, deliberately asymmetric: 2px into the sidebar card,
+            the 3px seam, then 8px into the preview pane's p-2 stage gutter — the
+            only dead space adjacent to this seam. It stops at 13px rather than the
+            24px WCAG 2.2 (2.5.8) target because the next pixel on either side is
+            live: the sidebar's scrolling tab content on the left, the preview
+            stage on the right. Silently stealing their clicks is the worse bug. */}
+        <div className="absolute inset-y-0 -left-[2px] w-[13px]" />
         {/* Visible hairline */}
         <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>

package/src/components/StudioRightPanel.tsx

@@ -446,8 +446,7 @@ export function StudioRightPanel({
 
   return (
     <>
-      {/* Vertical resize divider: 3px visible seam, 8px pointer-capture zone via
-          the absolutely-positioned inner hit area. */}
+      {/* Vertical resize divider: 3px visible seam, 13px hit zone via the inner div. */}
       <div
         role="separator"
         aria-label="Resize inspector panel"
@@ -467,8 +466,10 @@ export function StudioRightPanel({
           adjustPanelWidth("right", delta);
         }}
       >
-        {/* Expanded hit zone: 8px wide, centered on the 3px seam */}
-        <div className="absolute inset-y-0 -left-[2.5px] w-2" />
+        {/* Asymmetric hit zone: 8px into the preview's p-2 gutter (the only dead
+            space), the 3px seam, 2px into the card. Stops short of the 24px WCAG
+            2.5.8 target because the next pixel each way is live. */}
+        <div className="absolute inset-y-0 -left-[8px] w-[13px]" />
         {/* Visible hairline */}
         <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>

package/src/components/TimelineToolbar.tsx

@@ -449,7 +449,9 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               setZoomMode("manual");
               setManualZoomPercent(timelineSliderToZoomPercent(Number(e.target.value)));
             }}
-            className="mx-1 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
+            // h-6 on the input is the 24x24 WCAG 2.2 (2.5.8) target: the visible
+            // track stays 2px and the thumb 10px, only the pointer box grows.
+            className="mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
           />
           <Tooltip label="Zoom in">
             <button

package/src/components/editor/KeyframeNavigation.tsx

@@ -167,6 +167,11 @@ export const KeyframeNavigation = memo(function KeyframeNavigation({
   };
 
   return (
+    // The two 12x20 steppers sit gap-0.5 apart with a 9px diamond between them,
+    // so they stay below the 24px WCAG 2.2 (2.5.8) minimum under that criterion's
+    // own spacing/inline exception: centred 24px targets here would overlap each
+    // other AND the diamond, and one control swallowing its neighbour's clicks is
+    // a worse 2.5.8 failure than a small target. Do not "fix" these to 24.
     <div className="flex h-5 items-center gap-0.5">
       <button
         type="button"

package/src/components/editor/MotionPathOverlay.tsx

@@ -132,7 +132,10 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
   const createMode = geometryResolved && !geometry && Boolean(selection?.element) && !isPlaying;
   const createSelector = createMode ? selectorFor(selection) : null;
   const compW = compositionSize?.width ?? null;
-  const canCreate = createMode && hasMotionPathPlugin(iframeRef.current);
+  // No one-element selector means the path could only be authored onto the
+  // element's class siblings, so the toolbar toggle stays hidden instead of
+  // arming a press that the effect below would silently drop.
+  const canCreate = createMode && !!createSelector && hasMotionPathPlugin(iframeRef.current);
 
   // Publish whether the selected element can take a path so the preview toolbar
   // shows its "set destination" toggle. Drops to false when this overlay unmounts

package/src/components/editor/PropertyPanel.tsx

@@ -16,7 +16,7 @@ import {
 } from "./propertyPanelHelpers";
 import { MetricField, Section } from "./propertyPanelPrimitives";
 import { createTransformCommitHandlers } from "./propertyPanelTransformCommit";
-import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
+import { resolveAnimIdForProperty } from "../../player/components/TimelinePropertyLanes";
 import { resolveEditingSections } from "@hyperframes/core/editing";
 import { MediaSection } from "./propertyPanelMediaSection";
 import { ColorGradingSection } from "./propertyPanelColorGradingSection";
@@ -241,12 +241,8 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
   const navKeyframes = cacheEntry?.keyframes ?? gsapKeyframes;
   const seekFromKfPct = (pct: number) => onSeekToTime?.(elStart + (pct / 100) * elDuration);
 
-  const animIdForProp = (prop: string): string => {
-    const group = classifyPropertyGroup(prop);
-    const groupAnim = gsapAnimations?.find((a) => a.propertyGroup === group);
-    if (groupAnim) return groupAnim.id;
-    return gsapAnimId ?? "";
-  };
+  const animIdForProp = (prop: string): string =>
+    resolveAnimIdForProperty(prop, gsapAnimations, gsapAnimId);
 
   const displayX = gsapRuntimeValues?.x ?? manualOffset.x;
   const displayY = gsapRuntimeValues?.y ?? manualOffset.y;

package/src/components/editor/keyframeRetime.test.ts

@@ -180,3 +180,45 @@ describe("resolveKeyframeRetime — guards", () => {
     expect(r.pctRemap).toEqual([]);
   });
 });
+
+describe("resolveKeyframeRetime — move percentages are rounded like the resize path", () => {
+  // The move branch used to return the raw quotient, so `74.81203007518799%`
+  // landed in the user's source and churned the diff on every drag.
+  const decimals = (n: number): number => String(n).split(".")[1]?.length ?? 0;
+
+  it("rounds a repeating quotient to 3dp", () => {
+    const r = resolveKeyframeRetime({
+      tweenStart: 2,
+      tweenDuration: 3,
+      keyframes: KEYFRAMES,
+      draggedTweenPct: 0,
+      dropAbsTime: 3, // (3-2)/3 = 33.333333333333336%
+    });
+    expect(r.kind).toBe("move");
+    expect(r.toTweenPct).toBe(33.333);
+  });
+
+  it("never emits more than 3 decimal places", () => {
+    for (const tweenDuration of [3, 7, 9, 11, 133]) {
+      const r = resolveKeyframeRetime({
+        tweenStart: 2,
+        tweenDuration,
+        keyframes: KEYFRAMES,
+        draggedTweenPct: 0,
+        dropAbsTime: 3,
+      });
+      expect(r.kind).toBe("move");
+      expect(decimals(r.toTweenPct ?? 0)).toBeLessThanOrEqual(3);
+    }
+  });
+
+  it("leaves an already-short percentage untouched", () => {
+    const r = resolveKeyframeRetime({
+      ...WINDOW,
+      keyframes: KEYFRAMES,
+      draggedTweenPct: 0,
+      dropAbsTime: 3, // (3-2)/4 = exactly 25%
+    });
+    expect(r.toTweenPct).toBe(25);
+  });
+});

package/src/components/editor/keyframeRetime.ts

@@ -121,7 +121,10 @@ export function resolveKeyframeRetime(opts: {
 
   // Within the tween window → plain move (re-key the tween-%).
   if (dropAbsTime >= tweenStart - EPSILON_TIME && dropAbsTime <= tweenEnd + EPSILON_TIME) {
-    const toTweenPct = clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100);
+    // Round here, not at the return: the no-op test below and the value written
+    // to source must be the same number. The resize branch already rounds, so
+    // this keeps both write paths at the authored 3dp precision.
+    const toTweenPct = round3(clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100));
     if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT) return { kind: "noop" };
     return { kind: "move", toTweenPct };
   }

package/src/components/editor/motionPathSelection.test.ts

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import type { DomEditSelection } from "./domEditingTypes";
+import { buildStableSelector, getSelectorIndex } from "./domEditingDom";
+import { selectorFor } from "./motionPathSelection";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function selectionFor(el: HTMLElement): DomEditSelection {
+  const selector = buildStableSelector(el);
+  return {
+    element: el,
+    id: el.id || undefined,
+    hfId: el.getAttribute("data-hf-id") || undefined,
+    selector,
+    selectorIndex: getSelectorIndex(document, el, selector, "index.html", null),
+    sourceFile: "index.html",
+    dataAttributes: { start: "0", duration: "2" },
+  } as unknown as DomEditSelection;
+}
+
+function mountGroupSiblings(): HTMLElement[] {
+  document.body.innerHTML = `
+    <div id="scene" class="clip" data-start="0" data-duration="2">
+      <div class="group"></div>
+      <div class="group"></div>
+      <div class="group"></div>
+    </div>
+  `;
+  return Array.from(document.querySelectorAll<HTMLElement>(".group"));
+}
+
+describe("selectorFor", () => {
+  it("addresses one element for a class-only sibling", () => {
+    const groups = mountGroupSiblings();
+    const selector = selectorFor(selectionFor(groups[2]!));
+
+    // The bare ".group" both measured home off the FIRST sibling and wrote the
+    // new motion path onto all three.
+    expect(selector).not.toBe(".group");
+    expect(document.querySelectorAll(selector!)).toHaveLength(1);
+    expect(document.querySelector(selector!)).toBe(groups[2]);
+  });
+
+  it("keeps a unique id target", () => {
+    document.body.innerHTML = `<div id="hero"></div>`;
+    const el = document.querySelector<HTMLElement>("#hero")!;
+
+    expect(selectorFor(selectionFor(el))).toBe("#hero");
+  });
+
+  it("returns null with no selection", () => {
+    expect(selectorFor(null)).toBeNull();
+  });
+
+  it("returns null when no rung addresses one element", () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[1]!);
+    groups[1]!.remove();
+
+    expect(selectorFor(selection)).toBeNull();
+  });
+});

package/src/components/editor/motionPathSelection.ts

@@ -5,11 +5,21 @@
  */
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import type { DomEditSelection } from "./domEditing";
+import { writeTargetSelector } from "../../hooks/gsapShared";
 
+/**
+ * The selector the overlay both MEASURES the element by and authors a new
+ * motion path against.
+ *
+ * Both halves need exactly one element. The selection's own selector is a bare
+ * class for an id-less element, so a `.group` sibling read its home position off
+ * the FIRST sibling (skewing the destination the click computes) and then wrote
+ * `add-motion-path` onto all five. `writeTargetSelector` is the same one-element
+ * narrowing every other new-tween writer goes through; null means no such form
+ * exists, and the overlay hides "set destination" rather than write a wrong one.
+ */
 export function selectorFor(sel: DomEditSelection | null): string | null {
-  if (!sel) return null;
-  if (sel.id) return `#${CSS.escape(sel.id)}`;
-  return sel.selector ?? null;
+  return sel ? writeTargetSelector(sel) : null;
 }
 
 /** The animation whose path is editable on-canvas: literal, statically resolved,

package/src/components/editor/propertyPanelColor.test.tsx

@@ -1,43 +1,85 @@
 // @vitest-environment happy-dom
 
 import React, { act } from "react";
-import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { __resetDesignInputThrottle } from "../../utils/designInputTracking";
 import { ColorField } from "./propertyPanelColor";
 
+const trackStudioEvent = vi.hoisted(() => vi.fn());
+
+vi.mock("../../utils/studioTelemetry", () => ({
+  trackStudioEvent: (...args: unknown[]) => trackStudioEvent(...args),
+}));
+
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+const roots: Root[] = [];
+
+beforeEach(() => {
+  trackStudioEvent.mockReset();
+  __resetDesignInputThrottle();
+});
+
 afterEach(() => {
+  for (const root of roots) act(() => root.unmount());
+  roots.length = 0;
   document.body.innerHTML = "";
 });
 
-function renderColorField(onCommit: (value: string) => void): void {
+function renderColorField({
+  value = "#333333",
+  onPreview,
+  onCommit = vi.fn(),
+}: {
+  value?: string;
+  onPreview?: (value: string) => void;
+  onCommit?: (value: string) => void;
+} = {}): HTMLElement {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
+  roots.push(root);
   act(() => {
-    root.render(<ColorField flat label="Color" value="rgb(255, 176, 32)" onCommit={onCommit} />);
+    root.render(
+      <ColorField flat label="Color" value={value} onPreview={onPreview} onCommit={onCommit} />,
+    );
   });
+  return host;
+}
+
+function changeInput(input: HTMLInputElement, value: string): void {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  if (!setter) throw new Error("expected native input value setter");
+  setter.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function openHexInput(host: HTMLElement): HTMLInputElement {
+  const trigger = host.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
+  if (!trigger) throw new Error("Color trigger was not rendered");
+  act(() => trigger.click());
+  const input = document.querySelector<HTMLInputElement>('input[spellcheck="false"]');
+  if (!input) throw new Error("Hex input was not rendered");
+  return input;
+}
+
+function clickOutside(): void {
+  document.body.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
 }
 
 describe("ColorField flat trigger", () => {
   it("renders label and value inline with a small swatch, no boxed border", () => {
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(<ColorField flat label="Color" value="rgb(255, 176, 32)" onCommit={vi.fn()} />);
-    });
+    const host = renderColorField({ value: "rgb(255, 176, 32)" });
     const trigger = host.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
     expect(trigger).not.toBeNull();
     expect(trigger?.className).not.toContain("border-neutral-800");
     expect(host.textContent).toContain("Color");
-    act(() => root.unmount());
   });
 
   it("persists one keyboard slider gesture on keyup", () => {
     const onCommit = vi.fn();
-    renderColorField(onCommit);
+    renderColorField({ value: "rgb(255, 176, 32)", onCommit });
     const trigger = document.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
     if (!trigger) throw new Error("Color trigger was not rendered");
     act(() => {
@@ -57,3 +99,130 @@ describe("ColorField flat trigger", () => {
     expect(onCommit).toHaveBeenCalledOnce();
   });
 });
+
+describe("ColorField hex editing", () => {
+  it("allows #333333 to be backspaced to #3 without snapping", () => {
+    const input = openHexInput(renderColorField());
+
+    for (const value of ["#33333", "#3333", "#333", "#33", "#3"]) {
+      act(() => changeInput(input, value));
+      expect(input.value).toBe(value);
+    }
+  });
+
+  it("does not silently change #22CC66 to #2222CC while backspacing", () => {
+    const input = openHexInput(renderColorField({ value: "#22CC66" }));
+
+    for (const value of ["#22CC6", "#22CC", "#22C"]) {
+      act(() => changeInput(input, value));
+      expect(input.value).toBe(value);
+      expect(input.value).not.toBe("#2222CC");
+    }
+  });
+
+  it("commits a full replacement after selecting the existing value", () => {
+    const onCommit = vi.fn();
+    const input = openHexInput(renderColorField({ onCommit }));
+    input.focus();
+    input.select();
+
+    act(() => changeInput(input, "#12AB34"));
+    act(() => input.blur());
+
+    expect(onCommit).toHaveBeenCalledOnce();
+    expect(onCommit).toHaveBeenCalledWith("rgb(18, 171, 52)");
+  });
+
+  it("commits a complete pending hex on outside-click", () => {
+    const onCommit = vi.fn();
+    const input = openHexInput(renderColorField({ onCommit }));
+
+    act(() => changeInput(input, "#12AB34"));
+    act(clickOutside);
+
+    expect(onCommit).toHaveBeenCalledOnce();
+    expect(onCommit).toHaveBeenCalledWith("rgb(18, 171, 52)");
+  });
+
+  it("commits a 3-digit hex shorthand on outside-click", () => {
+    // parseCssColor accepts shorthand, so the gesture resolver has to as well;
+    // #F00 is ordinary designer input and used to be dropped in silence.
+    const onCommit = vi.fn();
+    const input = openHexInput(renderColorField({ onCommit }));
+
+    act(() => changeInput(input, "#F00"));
+    act(clickOutside);
+
+    expect(onCommit).toHaveBeenCalledOnce();
+    expect(onCommit).toHaveBeenCalledWith("rgb(255, 0, 0)");
+  });
+
+  it("does not commit an incomplete pending hex on outside-click", () => {
+    const onCommit = vi.fn();
+    const host = renderColorField({ value: "#224466", onCommit });
+    const input = openHexInput(host);
+
+    act(() => changeInput(input, "#12AB3"));
+    act(clickOutside);
+
+    expect(onCommit).not.toHaveBeenCalled();
+    // The settle also has to put the field back, or the panel re-opens showing
+    // a value the composition never took.
+    expect(openHexInput(host).value).toBe("#224466");
+  });
+
+  it("cancels a pending hex edit on Escape and restores the previous value", () => {
+    const onPreview = vi.fn();
+    const onCommit = vi.fn();
+    const host = renderColorField({ value: "#224466", onPreview, onCommit });
+    const input = openHexInput(host);
+
+    act(() => changeInput(input, "#12AB34"));
+    act(() => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" })));
+
+    expect(onCommit).not.toHaveBeenCalled();
+    expect(onPreview).toHaveBeenLastCalledWith("rgb(34, 68, 102)");
+    expect(openHexInput(host).value).toBe("#224466");
+  });
+
+  it("still commits a complete hex on Tab-blur", () => {
+    const onCommit = vi.fn();
+    const input = openHexInput(renderColorField({ onCommit }));
+    input.focus();
+
+    act(() => changeInput(input, "#12AB34"));
+    act(() => input.blur());
+
+    expect(onCommit).toHaveBeenCalledOnce();
+    expect(onCommit).toHaveBeenCalledWith("rgb(18, 171, 52)");
+  });
+
+  it("live-previews only a hex length that parses, 3 or 6 digits", () => {
+    const onPreview = vi.fn();
+    const input = openHexInput(renderColorField({ value: "#112233", onPreview }));
+
+    // 4 and 5 digits are mid-typing, so they must stay silent.
+    act(() => changeInput(input, "#3333"));
+    act(() => changeInput(input, "#33333"));
+    expect(onPreview).not.toHaveBeenCalled();
+
+    act(() => changeInput(input, "#333333"));
+    expect(onPreview).toHaveBeenCalledOnce();
+    expect(onPreview).toHaveBeenCalledWith("rgb(51, 51, 51)");
+
+    act(() => changeInput(input, "#333"));
+    expect(onPreview).toHaveBeenCalledTimes(2);
+    expect(onPreview).toHaveBeenLastCalledWith("rgb(51, 51, 51)");
+  });
+
+  it("tracks exactly once per completed edit, not once per keystroke", () => {
+    const input = openHexInput(renderColorField());
+
+    for (const value of ["#", "#1", "#12", "#12A", "#12AB", "#12AB3", "#12AB34"]) {
+      act(() => changeInput(input, value));
+    }
+    act(clickOutside);
+
+    expect(trackStudioEvent).toHaveBeenCalledOnce();
+  });
+});

package/src/components/editor/propertyPanelColor.tsx

@@ -184,11 +184,27 @@ export function ColorField({
   const brightnessPercent = Math.round(hsv.value * 100);
   const alphaPercent = Math.round(draftColor.alpha * 100);
 
-  const updateColorDraft = useCallback((nextValue: string) => {
+  const updateColorDraft = useCallback((nextValue: string, source: "hex" | "picker") => {
     const nextColor = parseCssColor(nextValue);
     if (!nextColor) return;
     setDraftColor(nextColor);
-    setHexDraft(toHexColor(nextColor).toUpperCase());
+    if (source === "picker") setHexDraft(toHexColor(nextColor).toUpperCase());
+  }, []);
+  const resolveColorGestureValue = useCallback((nextValue: string) => {
+    const source = nextValue.startsWith("#") ? "hex" : "picker";
+    // Only a COMPLETE hex resolves, so a half-typed one neither previews nor
+    // commits. Both lengths parseCssColor accepts count as complete: gating on
+    // 6 alone silently dropped #F00 and friends, which the old onBlur committed.
+    if (source === "hex" && !/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(nextValue)) return null;
+    const nextColor = parseCssColor(nextValue);
+    if (!nextColor) return null;
+    return {
+      source,
+      value: formatCssColor({
+        ...nextColor,
+        alpha: source === "hex" ? draftColorRef.current.alpha : nextColor.alpha,
+      }),
+    } as const;
   }, []);
   const persistColorValue = useCallback(
     (nextValue: string) => {
@@ -203,12 +219,17 @@ export function ColorField({
     settle: settleColorGesture,
     cancel: cancelColorGesture,
   } = useInspectorGestureTransaction({
-    sourceValue: value,
+    sourceValue: formatCssColor(colorFromCss(value)),
     onPreview: (nextValue) => {
-      updateColorDraft(nextValue);
-      onPreview?.(nextValue);
+      const resolved = resolveColorGestureValue(nextValue);
+      if (!resolved) return;
+      updateColorDraft(resolved.value, resolved.source);
+      onPreview?.(resolved.value);
+    },
+    onCommit: (nextValue) => {
+      const resolved = resolveColorGestureValue(nextValue);
+      if (resolved) persistColorValue(resolved.value);
     },
-    onCommit: persistColorValue,
   });
 
   useEffect(() => {
@@ -288,13 +309,11 @@ export function ColorField({
     commitHsv({ saturation, value: nextValue });
   };
 
-  const handleHexCommit = (nextHex: string) => {
+  const handleHexChange = (nextHex: string) => {
     setHexDraft(nextHex);
     const normalized = nextHex.trim().startsWith("#") ? nextHex.trim() : `#${nextHex.trim()}`;
-    const parsed = parseCssColor(normalized);
-    if (!parsed) return;
-    const nextValue = formatCssColor({ ...parsed, alpha: draftColorRef.current.alpha });
-    updateColorDraft(nextValue);
+    beginColorGesture();
+    previewColorGesture(normalized);
   };
 
   const picker = open
@@ -413,21 +432,8 @@ export function ColorField({
               <span className={LABEL}>Hex</span>
               <input
                 value={hexDraft}
-                onChange={(event) => handleHexCommit(event.target.value)}
-                onBlur={() => {
-                  const normalized = hexDraft.trim().startsWith("#")
-                    ? hexDraft.trim()
-                    : `#${hexDraft.trim()}`;
-                  const parsed = parseCssColor(normalized);
-                  if (parsed) {
-                    const nextValue = formatCssColor({
-                      ...parsed,
-                      alpha: draftColorRef.current.alpha,
-                    });
-                    persistColorValue(nextValue);
-                  }
-                  setHexDraft(toHexColor(draftColorRef.current).toUpperCase());
-                }}
+                onChange={(event) => handleHexChange(event.target.value)}
+                onBlur={settleColorGesture}
                 className={`${FIELD} h-10 w-full text-[11px] font-medium outline-none`}
                 spellCheck={false}
               />

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -189,7 +189,9 @@ export function SliderControl({
         onMouseUp={() => commitDraft(draft)}
         onTouchEnd={() => commitDraft(draft)}
         onBlur={() => commitDraft(draft)}
-        className="h-4 min-w-0 w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-panel-border [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0C0C0E,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
+        // h-6 is the 24x24 WCAG 2.2 (2.5.8) target: the visible track stays 2px
+        // and the thumb 10px, only the pointer box grows.
+        className="h-6 min-w-0 w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-panel-border [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0C0C0E,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
       />
       <div className="min-w-[44px] rounded-md bg-panel-input px-2 py-1.5 text-right text-[11px] font-medium text-panel-text-1 tabular-nums">
         {formatDisplayValue?.(draft) ?? displayValue}