@hyperframes/studio 0.6.0-alpha.9 → 0.6.0

package/src/components/editor/domEditing.ts

@@ -453,16 +453,49 @@ function getElementDepth(el: HTMLElement): number {
   return depth;
 }
 
+const VISUAL_LEAF_TAGS = new Set(["img", "video", "canvas", "svg", "audio"]);
+
+function isElementComputedVisible(el: HTMLElement): boolean {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return true;
+  let current: HTMLElement | null = el;
+  while (current) {
+    const computed = win.getComputedStyle(current);
+    if (computed.display === "none" || computed.visibility === "hidden") return false;
+    const opacity = Number.parseFloat(computed.opacity);
+    if (Number.isFinite(opacity) && opacity <= 0.01) return false;
+    current = current.parentElement;
+  }
+  return true;
+}
+
+function isEmptyVisualContainer(el: HTMLElement): boolean {
+  const tag = el.tagName.toLowerCase();
+  if (VISUAL_LEAF_TAGS.has(tag)) return false;
+
+  const children = el.children;
+  if (children.length === 0) {
+    const text = (el.textContent ?? "").trim();
+    return text.length === 0;
+  }
+
+  for (let i = 0; i < children.length; i += 1) {
+    const child = children[i];
+    if (!isHtmlElement(child)) continue;
+    if (VISUAL_LEAF_TAGS.has(child.tagName.toLowerCase())) return false;
+    if (isElementComputedVisible(child)) return false;
+  }
+
+  return true;
+}
+
 function hasRenderedBox(el: HTMLElement): boolean {
   const rect = el.getBoundingClientRect();
   if (rect.width <= 1 || rect.height <= 1) return false;
 
-  const computed = el.ownerDocument.defaultView?.getComputedStyle(el);
-  if (!computed) return true;
-  if (computed.display === "none" || computed.visibility === "hidden") return false;
+  if (!isElementComputedVisible(el)) return false;
 
-  const opacity = Number.parseFloat(computed.opacity);
-  if (Number.isFinite(opacity) && opacity <= 0.01) return false;
+  if (isEmptyVisualContainer(el)) return false;
 
   return true;
 }

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

@@ -16,10 +16,10 @@ describe("manual editing availability", () => {
     vi.resetModules();
   });
 
-  it("enables inspector selection by default while motion and manual dragging stay opt-in", async () => {
+  it("enables inspector selection and manual dragging by default while motion stays opt-in", async () => {
     const availability = await loadAvailabilityWithEnv({});
 
-    expect(availability.STUDIO_PREVIEW_MANUAL_EDITING_ENABLED).toBe(false);
+    expect(availability.STUDIO_PREVIEW_MANUAL_EDITING_ENABLED).toBe(true);
     expect(availability.STUDIO_PREVIEW_SELECTION_ENABLED).toBe(true);
     expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
     expect(availability.STUDIO_MOTION_PANEL_ENABLED).toBe(false);

package/src/components/editor/manualEditingAvailability.ts

@@ -32,7 +32,7 @@ const env = import.meta.env as StudioFeatureFlagEnv;
 export const STUDIO_PREVIEW_MANUAL_EDITING_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   [STUDIO_PREVIEW_MANUAL_DRAGGING_ENV, "VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED"],
-  false,
+  true,
 );
 
 export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(

package/src/components/editor/manualEdits.ts

@@ -653,10 +653,33 @@ function styleMatchesStudioRotationDraft(element: HTMLElement, value: string): b
   );
 }
 
+const STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR = "data-hf-studio-original-transform-display";
+
+function promoteInlineForTransform(element: HTMLElement): void {
+  const computedDisplay = safeComputedStyleProperty(element, "display");
+  if (computedDisplay !== "inline") return;
+  if (!element.hasAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR)) {
+    element.setAttribute(
+      STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR,
+      element.style.getPropertyValue("display"),
+    );
+  }
+  element.style.setProperty("display", "inline-block");
+}
+
+function restoreInlineDisplay(element: HTMLElement): void {
+  const original = element.getAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR);
+  if (original == null) return;
+  if (original === "") element.style.removeProperty("display");
+  else element.style.setProperty("display", original);
+  element.removeAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR);
+}
+
 export function applyStudioPathOffset(
   element: HTMLElement,
   offset: { x: number; y: number },
 ): void {
+  promoteInlineForTransform(element);
   writeStudioPathOffsetVars(element, offset);
   element.style.setProperty(
     "translate",
@@ -672,6 +695,7 @@ export function applyStudioPathOffsetDraft(
   element: HTMLElement,
   offset: { x: number; y: number },
 ): void {
+  promoteInlineForTransform(element);
   writeStudioPathOffsetVars(element, offset, { updateBase: false });
   element.style.setProperty(
     "translate",
@@ -683,6 +707,7 @@ export function applyStudioBoxSize(
   element: HTMLElement,
   size: { width: number; height: number },
 ): void {
+  promoteInlineForTransform(element);
   applyStudioBoxSizeDimensions(element, size);
 }
 
@@ -690,10 +715,12 @@ export function applyStudioBoxSizeDraft(
   element: HTMLElement,
   size: { width: number; height: number },
 ): void {
+  promoteInlineForTransform(element);
   applyStudioBoxSizeDimensions(element, size);
 }
 
 export function applyStudioRotation(element: HTMLElement, rotation: { angle: number }): void {
+  promoteInlineForTransform(element);
   writeStudioRotationVars(element, rotation);
   element.removeAttribute(STUDIO_ROTATION_DRAFT_ATTR);
   element.style.setProperty(
@@ -703,6 +730,7 @@ export function applyStudioRotation(element: HTMLElement, rotation: { angle: num
 }
 
 export function applyStudioRotationDraft(element: HTMLElement, rotation: { angle: number }): void {
+  promoteInlineForTransform(element);
   writeStudioRotationVars(element, rotation, { updateBase: false });
   element.setAttribute(STUDIO_ROTATION_DRAFT_ATTR, "true");
   element.style.setProperty(
@@ -718,6 +746,7 @@ function clearStudioPathOffset(element: HTMLElement): void {
   ) {
     restoreOriginalTranslateProperty(element);
   }
+  restoreInlineDisplay(element);
   element.style.removeProperty(STUDIO_OFFSET_X_PROP);
   element.style.removeProperty(STUDIO_OFFSET_Y_PROP);
   element.removeAttribute(STUDIO_PATH_OFFSET_ATTR);
@@ -732,6 +761,7 @@ function clearStudioRotation(element: HTMLElement): void {
   ) {
     restoreOriginalRotationProperty(element);
   }
+  restoreInlineDisplay(element);
 
   element.style.removeProperty(STUDIO_ROTATION_PROP);
   element.removeAttribute(STUDIO_ROTATION_ATTR);
@@ -816,6 +846,7 @@ function clearStudioBoxSize(element: HTMLElement): void {
     restoreOriginalBoxSizeProperty(element, "display", STUDIO_ORIGINAL_DISPLAY_ATTR);
   }
 
+  restoreInlineDisplay(element);
   element.style.removeProperty(STUDIO_WIDTH_PROP);
   element.style.removeProperty(STUDIO_HEIGHT_PROP);
   element.removeAttribute(STUDIO_BOX_SIZE_ATTR);
@@ -1346,6 +1377,7 @@ function collectStudioManualEditElements(doc: Document): HTMLElement[] {
       element.hasAttribute(STUDIO_ROTATION_DRAFT_ATTR) ||
       element.hasAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR) ||
       element.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR) ||
+      element.hasAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR) ||
       element.hasAttribute(STUDIO_ORIGINAL_MIN_WIDTH_ATTR) ||
       element.hasAttribute(STUDIO_ORIGINAL_FLEX_BASIS_ATTR) ||
       element.hasAttribute(STUDIO_ORIGINAL_SCALE_ATTR) ||

package/src/components/editor/propertyPanelColor.tsx

@@ -0,0 +1,371 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { X } from "../../icons/SystemIcons";
+import {
+  formatCssColor,
+  hsvToRgb,
+  parseCssColor,
+  rgbToHsv,
+  toHexColor,
+  type ParsedColor,
+} from "./colorValue";
+import { resolveFloatingPanelPosition, type FloatingPosition } from "./floatingPanel";
+import { colorFromCss, FIELD, LABEL } from "./propertyPanelHelpers";
+
+const COLOR_PICKER_SIZE = { width: 292, height: 386 };
+
+/* ------------------------------------------------------------------ */
+/*  ColorSlider                                                        */
+/* ------------------------------------------------------------------ */
+
+export function ColorSlider({
+  label,
+  value,
+  min,
+  max,
+  step,
+  displayValue,
+  background,
+  thumbColor,
+  disabled,
+  onCommit,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  displayValue: string;
+  background: string;
+  thumbColor: string;
+  disabled?: boolean;
+  onCommit: (nextValue: number) => void;
+}) {
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const percent = ((value - min) / (max - min)) * 100;
+
+  const commitFromClientX = (clientX: number) => {
+    const rect = trackRef.current?.getBoundingClientRect();
+    if (!rect || rect.width <= 0) return;
+    const rawValue = min + ((clientX - rect.left) / rect.width) * (max - min);
+    const stepped = Math.round(rawValue / step) * step;
+    onCommit(Math.max(min, Math.min(max, stepped)));
+  };
+
+  const commitKeyboardValue = (nextValue: number) => {
+    onCommit(Math.max(min, Math.min(max, nextValue)));
+  };
+
+  return (
+    <div className="grid gap-1.5">
+      <div className="flex items-center justify-between">
+        <span className={LABEL}>{label}</span>
+        <span className="text-[10px] font-medium text-neutral-400">{displayValue}</span>
+      </div>
+      <div
+        ref={trackRef}
+        role="slider"
+        tabIndex={disabled ? -1 : 0}
+        aria-label={label}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        aria-disabled={disabled}
+        className={`relative h-4 rounded-full border border-neutral-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.55)] outline-none focus:border-[#f5a400] focus:ring-2 focus:ring-[#f5a400]/40 ${
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-ew-resize"
+        }`}
+        style={{ background }}
+        onPointerDown={(event) => {
+          if (disabled) return;
+          event.currentTarget.setPointerCapture(event.pointerId);
+          commitFromClientX(event.clientX);
+        }}
+        onPointerMove={(event) => {
+          if (disabled || event.buttons !== 1) return;
+          commitFromClientX(event.clientX);
+        }}
+        onKeyDown={(event) => {
+          if (disabled) return;
+          if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+            event.preventDefault();
+            commitKeyboardValue(value + step);
+          } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+            event.preventDefault();
+            commitKeyboardValue(value - step);
+          } else if (event.key === "Home") {
+            event.preventDefault();
+            commitKeyboardValue(min);
+          } else if (event.key === "End") {
+            event.preventDefault();
+            commitKeyboardValue(max);
+          }
+        }}
+      >
+        <div
+          className="pointer-events-none absolute top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.85),0_6px_14px_rgba(0,0,0,0.5)]"
+          style={{ left: `${Math.max(0, Math.min(100, percent))}%`, backgroundColor: thumbColor }}
+        />
+      </div>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  ColorField                                                         */
+/* ------------------------------------------------------------------ */
+
+export function ColorField({
+  label,
+  value,
+  disabled,
+  onCommit,
+}: {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  onCommit: (nextValue: string) => void;
+}) {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const [panelPosition, setPanelPosition] = useState<FloatingPosition | null>(null);
+  const [draftColor, setDraftColor] = useState<ParsedColor>(() => colorFromCss(value));
+  const [hexDraft, setHexDraft] = useState(() => toHexColor(colorFromCss(value)).toUpperCase());
+  const hsv = rgbToHsv(draftColor);
+  const hueColor = formatCssColor({
+    ...hsvToRgb({ hue: hsv.hue, saturation: 1, value: 1 }),
+    alpha: 1,
+  });
+  const opaqueColor = formatCssColor({ ...draftColor, alpha: 1 });
+  const currentColor = formatCssColor(draftColor);
+  const saturationPercent = Math.round(hsv.saturation * 100);
+  const brightnessPercent = Math.round(hsv.value * 100);
+  const alphaPercent = Math.round(draftColor.alpha * 100);
+
+  useEffect(() => {
+    const nextColor = colorFromCss(value);
+    setDraftColor(nextColor);
+    setHexDraft(toHexColor(nextColor).toUpperCase());
+  }, [value]);
+
+  const updatePanelPosition = useCallback(() => {
+    const anchor = buttonRef.current?.getBoundingClientRect();
+    if (!anchor) return;
+    const measured = panelRef.current?.getBoundingClientRect();
+    setPanelPosition(
+      resolveFloatingPanelPosition(
+        anchor,
+        { width: window.innerWidth, height: window.innerHeight },
+        {
+          width: measured?.width || COLOR_PICKER_SIZE.width,
+          height: measured?.height || COLOR_PICKER_SIZE.height,
+        },
+      ),
+    );
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    updatePanelPosition();
+    const handlePositionInvalidated = () => updatePanelPosition();
+    window.addEventListener("resize", handlePositionInvalidated);
+    window.addEventListener("scroll", handlePositionInvalidated, true);
+    return () => {
+      window.removeEventListener("resize", handlePositionInvalidated);
+      window.removeEventListener("scroll", handlePositionInvalidated, true);
+    };
+  }, [open, updatePanelPosition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node | null;
+      if (!target) return;
+      if (panelRef.current?.contains(target) || buttonRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
+  const commitColor = (nextColor: ParsedColor) => {
+    setDraftColor(nextColor);
+    setHexDraft(toHexColor(nextColor).toUpperCase());
+    onCommit(formatCssColor(nextColor));
+  };
+
+  const commitHsv = (nextHsv: { hue?: number; saturation?: number; value?: number }) => {
+    const rgb = hsvToRgb({
+      hue: nextHsv.hue ?? hsv.hue,
+      saturation: nextHsv.saturation ?? hsv.saturation,
+      value: nextHsv.value ?? hsv.value,
+    });
+    commitColor({ ...rgb, alpha: draftColor.alpha });
+  };
+
+  const updateSaturationValue = (clientX: number, clientY: number, target: HTMLDivElement) => {
+    const rect = target.getBoundingClientRect();
+    const saturation = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const nextValue = Math.max(0, Math.min(1, 1 - (clientY - rect.top) / rect.height));
+    commitHsv({ saturation, value: nextValue });
+  };
+
+  const handleHexCommit = (nextHex: string) => {
+    setHexDraft(nextHex);
+    const normalized = nextHex.trim().startsWith("#") ? nextHex.trim() : `#${nextHex.trim()}`;
+    const parsed = parseCssColor(normalized);
+    if (!parsed) return;
+    commitColor({ ...parsed, alpha: draftColor.alpha });
+  };
+
+  const picker = open
+    ? createPortal(
+        <div
+          ref={panelRef}
+          className="fixed z-[9999] w-[292px] overflow-hidden rounded-2xl border border-neutral-700 bg-neutral-950 shadow-2xl shadow-black/50"
+          style={{
+            left: panelPosition?.left ?? -9999,
+            top: panelPosition?.top ?? -9999,
+          }}
+        >
+          <div className="flex items-center justify-between border-b border-neutral-800 px-3 py-2">
+            <div className="min-w-0">
+              <div className="truncate text-[11px] font-medium text-neutral-100">{label}</div>
+              <div className="text-[9px] uppercase tracking-[0.16em] text-neutral-600">Color</div>
+            </div>
+            <button
+              type="button"
+              onClick={() => setOpen(false)}
+              className="flex h-7 w-7 items-center justify-center rounded-lg text-neutral-500 transition-colors hover:bg-neutral-900 hover:text-neutral-200"
+              aria-label="Close color picker"
+            >
+              <X size={13} />
+            </button>
+          </div>
+          <div className="space-y-3 p-3">
+            <div
+              className="relative h-36 cursor-crosshair overflow-hidden rounded-xl border border-neutral-700 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]"
+              style={{ backgroundColor: hueColor }}
+              onPointerDown={(event) => {
+                event.currentTarget.setPointerCapture(event.pointerId);
+                updateSaturationValue(event.clientX, event.clientY, event.currentTarget);
+              }}
+              onPointerMove={(event) => {
+                if (event.buttons !== 1) return;
+                updateSaturationValue(event.clientX, event.clientY, event.currentTarget);
+              }}
+            >
+              <div className="absolute inset-0 bg-gradient-to-r from-white to-transparent" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent" />
+              <div
+                className="pointer-events-none absolute top-0 h-full w-px -translate-x-1/2 bg-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.45)] mix-blend-difference"
+                style={{ left: `${hsv.saturation * 100}%` }}
+              />
+              <div
+                className="pointer-events-none absolute left-0 h-px w-full -translate-y-1/2 bg-white/70 shadow-[0_0_0_1px_rgba(0,0,0,0.45)] mix-blend-difference"
+                style={{ top: `${(1 - hsv.value) * 100}%` }}
+              />
+              <div
+                className="pointer-events-none absolute h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.85),0_8px_18px_rgba(0,0,0,0.45)]"
+                style={{
+                  left: `${hsv.saturation * 100}%`,
+                  top: `${(1 - hsv.value) * 100}%`,
+                  backgroundColor: opaqueColor,
+                }}
+              />
+            </div>
+
+            <div className="flex min-w-0 items-center gap-3">
+              <div
+                className="h-9 w-9 flex-shrink-0 rounded-xl border border-neutral-600 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]"
+                style={{ backgroundColor: currentColor }}
+              />
+              <div className="min-w-0 flex-1">
+                <div className="truncate text-[11px] font-medium text-neutral-100">
+                  {currentColor}
+                </div>
+                <div className="mt-0.5 text-[9px] uppercase tracking-[0.12em] text-neutral-600">
+                  S {saturationPercent}% · B {brightnessPercent}% · A {alphaPercent}%
+                </div>
+              </div>
+            </div>
+
+            <ColorSlider
+              label="Hue"
+              value={hsv.hue}
+              min={0}
+              max={360}
+              step={1}
+              displayValue={`${Math.round(hsv.hue)}°`}
+              background="linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
+              thumbColor={hueColor}
+              disabled={disabled}
+              onCommit={(nextHue) => commitHsv({ hue: nextHue })}
+            />
+
+            <ColorSlider
+              label="Alpha"
+              value={draftColor.alpha}
+              min={0}
+              max={1}
+              step={0.01}
+              displayValue={`${alphaPercent}%`}
+              background={`linear-gradient(90deg, transparent, ${opaqueColor})`}
+              thumbColor={currentColor}
+              disabled={disabled}
+              onCommit={(nextAlpha) => commitColor({ ...draftColor, alpha: nextAlpha })}
+            />
+
+            <label className="grid gap-1.5">
+              <span className={LABEL}>Hex</span>
+              <input
+                value={hexDraft}
+                onChange={(event) => handleHexCommit(event.target.value)}
+                className={`${FIELD} h-10 w-full text-[11px] font-medium outline-none`}
+                spellCheck={false}
+              />
+            </label>
+          </div>
+        </div>,
+        document.body,
+      )
+    : null;
+
+  const openPicker = () => {
+    if (disabled) return;
+    setOpen((current) => !current);
+    if (!open) {
+      requestAnimationFrame(updatePanelPosition);
+    }
+  };
+
+  return (
+    <div className="grid min-w-0 gap-1.5">
+      <span className={LABEL}>{label}</span>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-label={`Pick ${label.toLowerCase()} color`}
+        ref={buttonRef}
+        onClick={openPicker}
+        className={`${FIELD} flex items-center gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed ${open ? "border-neutral-600" : ""}`}
+      >
+        <div
+          className="relative h-7 w-7 flex-shrink-0 overflow-hidden rounded-lg border border-neutral-700 bg-neutral-950 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
+          style={{ backgroundColor: value || "transparent" }}
+        />
+        <span className="min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100">
+          {value}
+        </span>
+      </button>
+      {picker}
+    </div>
+  );
+}