@hyperframes/studio 0.7.5 → 0.7.7

package/src/components/editor/AnimationCardParts.tsx

@@ -0,0 +1,220 @@
+import { MetricField } from "./propertyPanelPrimitives";
+import {
+  PERCENT_PROPS,
+  PROP_CONSTRAINTS,
+  PROP_LABELS,
+  PROP_TOOLTIPS,
+  PROP_UNITS,
+  clampPropertyValue,
+} from "./gsapAnimationConstants";
+import { P } from "./panelTokens";
+
+export const BOOLEAN_PROPS = new Set(["visibility"]);
+const STRING_PROPS = new Set(["filter", "clipPath"]);
+const FILTER_PRESETS = [
+  { label: "Blur", value: "blur(4px)" },
+  { label: "Bright", value: "brightness(1.5)" },
+  { label: "Gray", value: "grayscale(1)" },
+  { label: "None", value: "none" },
+];
+const CLIP_PATH_PRESETS = [
+  { label: "Circle", value: "circle(50% at 50% 50%)" },
+  { label: "Inset", value: "inset(10%)" },
+  { label: "None", value: "none" },
+];
+
+function isPercentProp(prop: string): boolean {
+  return PERCENT_PROPS.has(prop);
+}
+
+function displayValue(prop: string, val: number | string): string {
+  if (isPercentProp(prop)) return String(Math.round(Math.max(0, Math.min(1, Number(val))) * 100));
+  return String(val);
+}
+
+function adjustedValue(prop: string, raw: string): string {
+  if (isPercentProp(prop)) return String(clampPropertyValue(prop, Number(raw) / 100));
+  const num = Number(raw);
+  if (!Number.isNaN(num) && PROP_CONSTRAINTS[prop]) {
+    return String(clampPropertyValue(prop, num));
+  }
+  return raw;
+}
+
+function RemoveButton({ onClick, title }: { onClick: () => void; title: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex-shrink-0 rounded p-0.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-red-400"
+      title={title}
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      >
+        <path d="M3 3l6 6M9 3l-6 6" />
+      </svg>
+    </button>
+  );
+}
+
+// fallow-ignore-next-line complexity
+export function PropertyRow({
+  prop,
+  val,
+  onCommit,
+  onRemove,
+  removeTitle,
+}: {
+  prop: string;
+  val: number | string;
+  onCommit: (adjusted: string) => void;
+  onRemove: () => void;
+  removeTitle: string;
+}) {
+  if (BOOLEAN_PROPS.has(prop)) {
+    const isVisible = val === "visible" || val === 1;
+    return (
+      <div className="flex items-center gap-1">
+        <div className="min-w-0 flex-1 flex items-center gap-2 px-2 py-1 rounded-lg bg-neutral-900 border border-neutral-800">
+          <span className="flex-1 text-[11px] font-medium text-neutral-500">
+            {PROP_LABELS[prop] ?? prop}
+          </span>
+          <button
+            type="button"
+            onClick={() => onCommit(isVisible ? "hidden" : "visible")}
+            className="flex-shrink-0 rounded-full transition-all duration-150 relative"
+            style={{ width: 28, height: 16, background: isVisible ? P.accent : P.borderInput }}
+            title={isVisible ? "Visible — click to hide" : "Hidden — click to show"}
+          >
+            <span
+              className="absolute top-[2px] left-0 rounded-full transition-transform duration-150"
+              style={{
+                width: 12,
+                height: 12,
+                background: isVisible ? P.white : P.textMuted,
+                transform: isVisible ? "translateX(14px)" : "translateX(2px)",
+              }}
+            />
+          </button>
+        </div>
+        <RemoveButton onClick={onRemove} title={removeTitle} />
+      </div>
+    );
+  }
+  if (STRING_PROPS.has(prop)) {
+    const presets =
+      prop === "filter" ? FILTER_PRESETS : prop === "clipPath" ? CLIP_PATH_PRESETS : [];
+    return (
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-1">
+          <div className="min-w-0 flex-1 flex items-center gap-2 px-2 py-1 rounded-lg bg-neutral-900 border border-neutral-800">
+            <span className="flex-shrink-0 text-[11px] font-medium text-neutral-500">
+              {PROP_LABELS[prop] ?? prop}
+            </span>
+            <input
+              type="text"
+              defaultValue={String(val)}
+              className="flex-1 bg-transparent text-[11px] text-neutral-200 outline-none"
+              onBlur={(e) => onCommit(e.currentTarget.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") e.currentTarget.blur();
+              }}
+            />
+          </div>
+          <RemoveButton onClick={onRemove} title={removeTitle} />
+        </div>
+        {presets.length > 0 && (
+          <div className="flex gap-1 pl-1">
+            {presets.map((p) => (
+              <button
+                key={p.value}
+                type="button"
+                onClick={() => onCommit(p.value)}
+                className="px-1.5 py-0.5 rounded text-[9px] font-medium text-neutral-500 bg-neutral-800/50 hover:bg-neutral-800 hover:text-neutral-300 transition-colors"
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+  return (
+    <div className="flex items-center gap-1">
+      <div className="min-w-0 flex-1">
+        <MetricField
+          label={PROP_LABELS[prop] ?? prop}
+          value={displayValue(prop, val)}
+          suffix={PROP_UNITS[prop]}
+          tooltip={PROP_TOOLTIPS[prop]}
+          scrub
+          liveCommit
+          onCommit={(raw) => onCommit(adjustedValue(prop, raw))}
+        />
+      </div>
+      <RemoveButton onClick={onRemove} title={removeTitle} />
+    </div>
+  );
+}
+
+export function AddPropertyTrigger({
+  adding,
+  available,
+  addLabel,
+  addTitle,
+  onAdd,
+  onOpen,
+  onClose,
+  buttonClassName,
+}: {
+  adding: boolean;
+  available: string[];
+  addLabel: string;
+  addTitle: string;
+  onAdd: (prop: string) => void;
+  onOpen: () => void;
+  onClose: () => void;
+  buttonClassName: string;
+}) {
+  if (adding && available.length > 0) {
+    return (
+      <select
+        autoFocus
+        className="min-w-0 rounded-lg border border-neutral-700 bg-neutral-900 px-2 py-1 text-[11px] text-neutral-100 outline-none"
+        defaultValue=""
+        onChange={(e) => {
+          if (e.target.value) onAdd(e.target.value);
+          onClose();
+        }}
+        onBlur={onClose}
+      >
+        <option value="" disabled>
+          Choose property…
+        </option>
+        {available.map((p) => (
+          <option key={p} value={p}>
+            {PROP_LABELS[p] ?? p}
+          </option>
+        ))}
+      </select>
+    );
+  }
+  if (available.length === 0) return null;
+  return (
+    <button type="button" onClick={onOpen} className={buttonClassName} title={addTitle}>
+      {addLabel}
+    </button>
+  );
+}
+
+export function parseNumericOrString(raw: string): number | string {
+  const num = Number(raw);
+  return Number.isFinite(num) ? num : raw;
+}

package/src/components/editor/BlockParamsPanel.tsx

@@ -12,7 +12,7 @@ interface BlockParamsPanelProps {
 export const BlockParamsPanel = memo(function BlockParamsPanel({
   blockTitle,
   params,
-  compositionPath,
+  compositionPath: _compositionPath,
   onClose,
 }: BlockParamsPanelProps) {
   const [values, setValues] = useState<Record<string, string>>(() => {
@@ -23,13 +23,9 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
     return initial;
   });
 
-  const handleChange = useCallback(
-    (key: string, value: string) => {
-      setValues((prev) => ({ ...prev, [key]: value }));
-      console.log(`[BlockParams] ${compositionPath} ${key}: ${value}`);
-    },
-    [compositionPath],
-  );
+  const handleChange = useCallback((key: string, value: string) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
 
   return (
     <div className="flex flex-col h-full">

package/src/components/editor/DomEditOverlay.tsx

@@ -1,7 +1,10 @@
-import { memo, useMemo, useRef, useState, type RefObject } from "react";
+import { memo, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { type DomEditSelection } from "./domEditing";
-import { resolveDomEditGroupOverlayRect } from "./domEditOverlayGeometry";
+import { useMarqueeGestures } from "./marqueeCommit";
+import { resolveDomEditGroupOverlayRect, toOverlayRect } from "./domEditOverlayGeometry";
+import { collectDomEditLayerItems } from "./domEditingLayers";
+import { isElementComputedVisible } from "./domEditingElement";
 import {
   type BlockedMoveState,
   type DomEditGroupPathOffsetCommit,
@@ -11,6 +14,7 @@ import {
   focusDomEditOverlayElement,
 } from "./domEditOverlayGestures";
 import { useDomEditOverlayRects } from "./useDomEditOverlayRects";
+import { OffCanvasIndicators, type OffCanvasRect } from "./OffCanvasIndicators";
 import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
 import { SnapGuideOverlay, type SnapGuidesState } from "./SnapGuideOverlay";
 import { GridOverlay } from "./GridOverlay";
@@ -67,8 +71,10 @@ interface DomEditOverlayProps {
   gridSpacing?: number;
   recordingState?: GestureRecordingState;
   onToggleRecording?: () => void;
+  onMarqueeSelect?: (selections: DomEditSelection[], additive: boolean) => void;
 }
 
+// fallow-ignore-next-line complexity
 export const DomEditOverlay = memo(function DomEditOverlay({
   iframeRef,
   activeCompositionPath,
@@ -88,13 +94,16 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   onGroupPathOffsetCommit,
   onBoxSizeCommit,
   onRotationCommit,
+  onMarqueeSelect,
 }: DomEditOverlayProps) {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const boxRef = useRef<HTMLDivElement | null>(null);
+  const onMarqueeSelectRef = useRef(onMarqueeSelect);
+  onMarqueeSelectRef.current = onMarqueeSelect;
 
   const selectionShapeStyles = (() => {
     const fallback = {
-      borderRadius: 4 as string | number,
+      borderRadius: 8 as string | number,
       clipPath: undefined as string | undefined,
     };
     if (!selection?.element) return fallback;
@@ -213,6 +222,50 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     return () => cancelAnimationFrame(frame);
   });
 
+  // Off-canvas element indicators — dashed outlines for elements positioned
+  // outside the composition bounds so users can find them.
+  const offCanvasElementsRef = useRef<Map<string, HTMLElement>>(new Map());
+  const [offCanvasRects, setOffCanvasRects] = useState<OffCanvasRect[]>([]);
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    const overlay = overlayRef.current;
+    if (!iframe || !overlay || compRect.width <= 0) {
+      setOffCanvasRects([]);
+      return;
+    }
+    const doc = iframe.contentDocument;
+    if (!doc) return;
+    const root = doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.body;
+    const acp = activeCompositionPath ?? "index.html";
+    const items = collectDomEditLayerItems(root, {
+      activeCompositionPath: acp,
+      isMasterView: !acp || acp === "index.html",
+    });
+    const rects: typeof offCanvasRects = [];
+    const elMap = new Map<string, HTMLElement>();
+    for (const item of items) {
+      if (!isElementComputedVisible(item.element)) continue;
+      const r = toOverlayRect(overlay, iframe, item.element);
+      if (!r) continue;
+      // Any edge crossing the composition border → gray-zone indicator (the
+      // in-canvas portion is clipped away below, so only the sliver shows).
+      const extendsOutsideComp =
+        r.left < compRect.left ||
+        r.left + r.width > compRect.left + compRect.width ||
+        r.top < compRect.top ||
+        r.top + r.height > compRect.top + compRect.height;
+      if (extendsOutsideComp) {
+        rects.push({ key: item.key, left: r.left, top: r.top, width: r.width, height: r.height });
+        elMap.set(item.key, item.element);
+      }
+    }
+    offCanvasElementsRef.current = elMap;
+    setOffCanvasRects(rects);
+    // Positions depend on layout, not selection — the selected-element
+    // suppression is a render-time filter, so selection/groupSelections stay
+    // out of the deps to avoid re-walking geometry on each selection change.
+  }, [iframeRef, compRect, activeCompositionPath]);
+
   const gestures = createDomEditOverlayGestureHandlers({
     overlayRef,
     iframeRef,
@@ -238,6 +291,15 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     snapGuidesRef,
   });
 
+  const marquee = useMarqueeGestures({
+    iframeRef,
+    overlayRef,
+    activeCompositionPathRef,
+    onMarqueeSelectRef,
+    selectionRef,
+    gestures,
+  });
+
   const selectionKey = useMemo(() => {
     if (!selection) return "none";
     return `${selection.sourceFile}:${selection.id ?? selection.selector ?? selection.label}:${selection.selectorIndex ?? 0}`;
@@ -265,22 +327,9 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     }
     const target = event.target as HTMLElement | null;
     if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
-    // Don't re-resolve selection when clicking outside the composition bounds —
-    // the iframe can't resolve elements there, so it would clear the selection.
-    if (selection && compRect.width > 0) {
-      const overlayEl = overlayRef.current;
-      if (overlayEl) {
-        const overlayRect = overlayEl.getBoundingClientRect();
-        const clickX = event.clientX - overlayRect.left;
-        const clickY = event.clientY - overlayRect.top;
-        const outsideComp =
-          clickX < compRect.left ||
-          clickX > compRect.left + compRect.width ||
-          clickY < compRect.top ||
-          clickY > compRect.top + compRect.height;
-        if (outsideComp) return;
-      }
-    }
+    // Allow clicks anywhere on the overlay — GSAP-translated elements can
+    // extend beyond the composition rect into the gray zone, and users need
+    // to select/deselect them by clicking there.
     onCanvasMouseDown(event, { preferClipAncestor: false });
     if (event.shiftKey) {
       suppressNextBoxMouseDownRef.current = true;
@@ -306,6 +355,36 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 
     const target = event.target as HTMLElement | null;
     if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
+
+    // Start marquee if clicking on empty canvas (no element under pointer)
+    if (!hoverSelectionRef.current && onMarqueeSelectRef.current && compRect.width > 0) {
+      const overlayEl = overlayRef.current;
+      if (overlayEl) {
+        const oRect = overlayEl.getBoundingClientRect();
+        const cx = event.clientX - oRect.left;
+        const cy = event.clientY - oRect.top;
+        const inComp =
+          cx >= compRect.left &&
+          cx <= compRect.left + compRect.width &&
+          cy >= compRect.top &&
+          cy <= compRect.top + compRect.height;
+        if (inComp) {
+          event.preventDefault();
+          event.stopPropagation();
+          suppressNextOverlayMouseDownRef.current = true;
+          (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+          marquee.marqueeRef.current = {
+            startX: cx,
+            startY: cy,
+            currentX: cx,
+            currentY: cy,
+            pointerId: event.pointerId,
+            pastThreshold: false,
+          };
+          return;
+        }
+      }
+    }
   };
 
   const handleBoxClick = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -332,44 +411,29 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       className="absolute inset-0 z-10 pointer-events-auto outline-none"
       tabIndex={-1}
       aria-label="Composition canvas"
+      // Cursor follows marquee rect *state* (re-renders), not the mutable ref.
+      style={marquee.marqueeRect ? { cursor: "crosshair" } : undefined}
       onPointerDownCapture={(event) =>
         focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay)
       }
       onPointerDown={handleOverlayPointerDown}
       onMouseDown={handleOverlayMouseDown}
-      onPointerMove={gestures.onPointerMove}
+      onPointerMove={marquee.onPointerMove}
       onPointerLeave={() => onCanvasPointerLeaveRef.current()}
-      onPointerUp={gestures.onPointerUp}
-      onPointerCancel={() => gestures.clearPointerState(selectionRef)}
+      onPointerUp={marquee.onPointerUp}
+      onPointerCancel={marquee.onPointerCancel}
     >
       {hoverSelection && hoverRect && compRect.width > 0 && (
         <div
           aria-hidden="true"
           data-dom-edit-hover-box="true"
-          className="pointer-events-none absolute border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
-          style={(() => {
-            let br: string | number = 4;
-            let cp: string | undefined;
-            try {
-              const el = hoverSelection.element;
-              const tag = el.tagName.toLowerCase();
-              if (tag !== "svg" && tag !== "img" && tag !== "video" && tag !== "canvas") {
-                const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
-                if (cs?.borderRadius && cs.borderRadius !== "0px") br = cs.borderRadius;
-                if (cs?.clipPath && cs.clipPath !== "none") cp = cs.clipPath;
-              }
-            } catch {
-              /* cross-origin guard */
-            }
-            return {
-              left: hoverRect.left,
-              top: hoverRect.top,
-              width: hoverRect.width,
-              height: hoverRect.height,
-              borderRadius: br,
-              clipPath: cp,
-            };
-          })()}
+          className="pointer-events-none absolute rounded-md border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
+          style={{
+            left: hoverRect.left,
+            top: hoverRect.top,
+            width: hoverRect.width,
+            height: hoverRect.height,
+          }}
         />
       )}
       {hasGroupSelection && groupOverlayItems.length > 1 && groupBounds && compRect.width > 0 && (
@@ -437,13 +501,12 @@ export const DomEditOverlay = memo(function DomEditOverlay({
             key={selectionKey}
             ref={boxRef}
             data-dom-edit-selection-box="true"
-            className={`pointer-events-auto absolute ${selectionShapeStyles.clipPath ? "shadow-[inset_0_0_0_2px_rgba(60,230,172,0.6)]" : "border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"} bg-studio-accent/5`}
+            className={`pointer-events-auto absolute rounded-md ${selectionShapeStyles.clipPath ? "shadow-[inset_0_0_0_2px_rgba(60,230,172,0.6)]" : "border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"} bg-studio-accent/5`}
             style={{
               left: overlayRect.left,
               top: overlayRect.top,
               width: overlayRect.width,
               height: overlayRect.height,
-              borderRadius: selectionShapeStyles.borderRadius,
               clipPath: selectionShapeStyles.clipPath,
               cursor:
                 allowCanvasMovement && selection.capabilities.canApplyManualOffset
@@ -496,6 +559,27 @@ export const DomEditOverlay = memo(function DomEditOverlay({
             }}
           />
         ))}
+      <OffCanvasIndicators
+        rects={offCanvasRects}
+        elements={offCanvasElementsRef}
+        compRect={compRect}
+        selection={selection}
+        groupSelections={groupSelections}
+        activeCompositionPathRef={activeCompositionPathRef}
+        onSelectionChangeRef={onSelectionChangeRef}
+      />
+      {marquee.marqueeRect && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute border border-dashed border-studio-accent bg-studio-accent/10"
+          style={{
+            left: marquee.marqueeRect.left,
+            top: marquee.marqueeRect.top,
+            width: marquee.marqueeRect.width,
+            height: marquee.marqueeRect.height,
+          }}
+        />
+      )}
       <GridOverlay
         visible={gridVisible}
         spacing={gridSpacing}