@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

package/src/components/editor/manualEditsTypes.ts

@@ -0,0 +1,141 @@
+/* ── Public constants ──────────────────────────────────────────────── */
+export const STUDIO_MANUAL_EDITS_PATH = ".hyperframes/studio-manual-edits.json";
+export const STUDIO_OFFSET_X_PROP = "--hf-studio-offset-x";
+export const STUDIO_OFFSET_Y_PROP = "--hf-studio-offset-y";
+export const STUDIO_WIDTH_PROP = "--hf-studio-width";
+export const STUDIO_HEIGHT_PROP = "--hf-studio-height";
+export const STUDIO_ROTATION_PROP = "--hf-studio-rotation";
+
+/* ── Internal DOM attribute names ─────────────────────────────────── */
+export const STUDIO_PATH_OFFSET_ATTR = "data-hf-studio-path-offset";
+export const STUDIO_MANUAL_EDIT_GESTURE_ATTR = "data-hf-studio-manual-edit-gesture";
+export const STUDIO_BOX_SIZE_ATTR = "data-hf-studio-box-size";
+export const STUDIO_ROTATION_ATTR = "data-hf-studio-rotation";
+export const STUDIO_ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate";
+export const STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR = "data-hf-studio-original-inline-translate";
+export const STUDIO_ORIGINAL_WIDTH_ATTR = "data-hf-studio-original-width";
+export const STUDIO_ORIGINAL_HEIGHT_ATTR = "data-hf-studio-original-height";
+export const STUDIO_ORIGINAL_MIN_WIDTH_ATTR = "data-hf-studio-original-min-width";
+export const STUDIO_ORIGINAL_MIN_HEIGHT_ATTR = "data-hf-studio-original-min-height";
+export const STUDIO_ORIGINAL_MAX_WIDTH_ATTR = "data-hf-studio-original-max-width";
+export const STUDIO_ORIGINAL_MAX_HEIGHT_ATTR = "data-hf-studio-original-max-height";
+export const STUDIO_ORIGINAL_FLEX_BASIS_ATTR = "data-hf-studio-original-flex-basis";
+export const STUDIO_ORIGINAL_FLEX_GROW_ATTR = "data-hf-studio-original-flex-grow";
+export const STUDIO_ORIGINAL_FLEX_SHRINK_ATTR = "data-hf-studio-original-flex-shrink";
+export const STUDIO_ORIGINAL_BOX_SIZING_ATTR = "data-hf-studio-original-box-sizing";
+export const STUDIO_ORIGINAL_SCALE_ATTR = "data-hf-studio-original-scale";
+export const STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR = "data-hf-studio-original-transform-origin";
+export const STUDIO_ORIGINAL_DISPLAY_ATTR = "data-hf-studio-original-display";
+export const STUDIO_ORIGINAL_ROTATE_ATTR = "data-hf-studio-original-rotate";
+export const STUDIO_ORIGINAL_INLINE_ROTATE_ATTR = "data-hf-studio-original-inline-rotate";
+export const STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR =
+  "data-hf-studio-original-rotation-transform-origin";
+export const STUDIO_ROTATION_DRAFT_ATTR = "data-hf-studio-rotation-draft";
+export const STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR = "data-hf-studio-original-transform-display";
+
+/* ── Internal window property names ──────────────────────────────── */
+export const STUDIO_MANUAL_EDITS_APPLY_PROP = "__hfStudioManualEditsApply";
+export const STUDIO_MANUAL_EDITS_WRAPPED_PROP = "__hfStudioManualEditsWrapped";
+export const STUDIO_MANUAL_EDITS_PLAYBACK_FRAME_PROP = "__hfStudioManualEditsPlaybackFrame";
+
+export const STUDIO_ROTATION_TRANSFORM_ORIGIN = "center center";
+
+/* ── Edit types ───────────────────────────────────────────────────── */
+export interface StudioManualEditTarget {
+  sourceFile: string;
+  selector?: string;
+  selectorIndex?: number;
+  id?: string;
+}
+
+export interface StudioPathOffsetEdit {
+  kind: "path-offset";
+  target: StudioManualEditTarget;
+  x: number;
+  y: number;
+  updatedAt?: string;
+}
+
+export interface StudioBoxSizeEdit {
+  kind: "box-size";
+  target: StudioManualEditTarget;
+  width: number;
+  height: number;
+  updatedAt?: string;
+}
+
+export interface StudioRotationEdit {
+  kind: "rotation";
+  target: StudioManualEditTarget;
+  angle: number;
+  updatedAt?: string;
+}
+
+export type StudioManualEdit = StudioPathOffsetEdit | StudioBoxSizeEdit | StudioRotationEdit;
+
+export interface StudioManualEditManifest {
+  version: 1;
+  edits: StudioManualEdit[];
+}
+
+export type StudioManualEditSeekWindow = Window & {
+  __hf?: Record<string, unknown>;
+  __player?: Record<string, unknown>;
+  __timeline?: Record<string, unknown>;
+  __timelines?: Record<string, Record<string, unknown>>;
+  __hfStudioManualEditsApply?: () => void;
+  __hfStudioManualEditsPlaybackFrame?: number | null;
+};
+
+/* ── Snapshot types ───────────────────────────────────────────────── */
+export interface StudioBoxSizeSnapshot {
+  width: string;
+  height: string;
+  minWidth: string;
+  minHeight: string;
+  maxWidth: string;
+  maxHeight: string;
+  flexBasis: string;
+  flexGrow: string;
+  flexShrink: string;
+  boxSizing: string;
+  scale: string;
+  transformOrigin: string;
+  display: string;
+  studioWidth: string;
+  studioHeight: string;
+  marker: string | null;
+  originalWidth: string | null;
+  originalHeight: string | null;
+  originalMinWidth: string | null;
+  originalMinHeight: string | null;
+  originalMaxWidth: string | null;
+  originalMaxHeight: string | null;
+  originalFlexBasis: string | null;
+  originalFlexGrow: string | null;
+  originalFlexShrink: string | null;
+  originalBoxSizing: string | null;
+  originalScale: string | null;
+  originalTransformOrigin: string | null;
+  originalDisplay: string | null;
+}
+
+export interface StudioRotationSnapshot {
+  rotate: string;
+  transformOrigin: string;
+  studioRotation: string;
+  marker: string | null;
+  draftMarker: string | null;
+  originalRotate: string | null;
+  originalInlineRotate: string | null;
+  originalTransformOrigin: string | null;
+}
+
+export interface StudioPathOffsetSnapshot {
+  translate: string;
+  x: string;
+  y: string;
+  marker: string | null;
+  originalTranslate: string | null;
+  originalInlineTranslate: string | null;
+}

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>
+  );
+}