@hyperframes/studio 0.6.0-alpha.12 → 0.6.0-alpha.14

package/src/components/editor/propertyPanelStyleSections.tsx

@@ -0,0 +1,411 @@
+import { useEffect, useState } from "react";
+import { Eye, Layers, Palette, Settings, Square, Zap } from "../../icons/SystemIcons";
+import { buildDefaultGradientModel, serializeGradient } from "./gradientValue";
+import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
+import {
+  buildBoxShadowPresetValue,
+  buildClipPathValue,
+  buildInsetClipPathValue,
+  buildStrokeStyleUpdates,
+  buildStrokeWidthStyleUpdates,
+  extractBackgroundImageUrl,
+  formatNumericValue,
+  formatPxMetricValue,
+  getCssFilterFunctionPx,
+  getClipPathInsetPx,
+  inferBoxShadowPreset,
+  inferClipPathPreset,
+  LABEL,
+  normalizePanelPxValue,
+  parseNumericValue,
+  parsePxMetricValue,
+  RESPONSIVE_GRID,
+  setCssFilterFunctionPx,
+  type BoxShadowPreset,
+} from "./propertyPanelHelpers";
+import {
+  DetailField,
+  MetricField,
+  Section,
+  SegmentedControl,
+  SelectField,
+  SliderControl,
+} from "./propertyPanelPrimitives";
+import { ColorField } from "./propertyPanelColor";
+import { GradientField, ImageFillField } from "./propertyPanelFill";
+
+export function StyleSections({
+  projectId,
+  element,
+  styles,
+  assets,
+  onSetStyle,
+  onImportAssets,
+}: {
+  projectId: string;
+  element: DomEditSelection;
+  styles: Record<string, string>;
+  assets: string[];
+  onSetStyle: (prop: string, value: string) => void | Promise<void>;
+  onImportAssets?: (files: FileList) => Promise<string[]>;
+}) {
+  const styleEditingDisabled = !element.capabilities.canEditStyles;
+  const isFlex = styles.display === "flex" || styles.display === "inline-flex";
+  const radiusValue = parseNumericValue(styles["border-radius"]) ?? 0;
+  const opacityValue = Math.round((parseNumericValue(styles.opacity) ?? 1) * 100);
+  const borderWidthValue =
+    parsePxMetricValue(styles["border-width"] ?? "") ??
+    parsePxMetricValue(styles["border-top-width"] ?? "") ??
+    0;
+  const hasVisualBackground =
+    (styles.background != null && styles.background !== "none" && styles.background !== "") ||
+    (styles["background-color"] != null &&
+      styles["background-color"] !== "transparent" &&
+      styles["background-color"] !== "rgba(0, 0, 0, 0)" &&
+      styles["background-color"] !== "") ||
+    (styles["background-image"] != null &&
+      styles["background-image"] !== "none" &&
+      styles["background-image"] !== "") ||
+    borderWidthValue > 0;
+  const borderStyleValue = styles["border-style"] || styles["border-top-style"] || "none";
+  const borderColorValue =
+    styles["border-color"] || styles["border-top-color"] || "rgba(255, 255, 255, 0.18)";
+  const boxShadowPreset = inferBoxShadowPreset(styles["box-shadow"]);
+  const filterBlurValue = getCssFilterFunctionPx(styles.filter, "blur");
+  const backdropBlurValue = getCssFilterFunctionPx(styles["backdrop-filter"], "blur");
+  const clipPathValue = styles["clip-path"] || "none";
+  const clipPathPreset = inferClipPathPreset(clipPathValue);
+  const clipInsetValue = getClipPathInsetPx(clipPathValue);
+  const backgroundImage = styles["background-image"] ?? "none";
+  const hasTextControls = isTextEditableSelection(element);
+
+  const fillMode =
+    backgroundImage && backgroundImage !== "none"
+      ? backgroundImage.includes("gradient")
+        ? "Gradient"
+        : "Image"
+      : "Solid";
+  const [preferredFillMode, setPreferredFillMode] = useState(fillMode);
+  const imageUrl = extractBackgroundImageUrl(backgroundImage);
+
+  useEffect(() => {
+    setPreferredFillMode(fillMode);
+  }, [fillMode, element.id, element.selector, backgroundImage]);
+
+  const handleFillModeChange = (nextMode: string) => {
+    setPreferredFillMode(nextMode);
+    if (nextMode === "Solid") {
+      onSetStyle("background-image", "none");
+      return;
+    }
+    if (nextMode === "Gradient" && !backgroundImage.includes("gradient")) {
+      onSetStyle(
+        "background-image",
+        serializeGradient(buildDefaultGradientModel(styles["background-color"])),
+      );
+    }
+  };
+
+  return (
+    <>
+      {isFlex && (
+        <Section title="Flex" icon={<Layers size={15} />}>
+          <div className="space-y-4">
+            <SegmentedControl
+              disabled={styleEditingDisabled}
+              value={styles["flex-direction"] || "row"}
+              onChange={(next) => onSetStyle("flex-direction", next)}
+              options={[
+                { label: "→ Row", value: "row" },
+                { label: "↓ Column", value: "column" },
+              ]}
+            />
+            <div className={RESPONSIVE_GRID}>
+              <SelectField
+                label="Justify"
+                value={styles["justify-content"] || "flex-start"}
+                disabled={styleEditingDisabled}
+                onChange={(next) => onSetStyle("justify-content", next)}
+                options={[
+                  "flex-start",
+                  "center",
+                  "space-between",
+                  "space-around",
+                  "space-evenly",
+                  "flex-end",
+                ]}
+              />
+              <SelectField
+                label="Align"
+                value={styles["align-items"] || "stretch"}
+                disabled={styleEditingDisabled}
+                onChange={(next) => onSetStyle("align-items", next)}
+                options={["stretch", "flex-start", "center", "flex-end", "baseline"]}
+              />
+            </div>
+            <DetailField
+              label="Gap"
+              value={styles.gap ?? "0px"}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("gap", next.endsWith("px") ? next : `${next}px`)}
+            />
+          </div>
+        </Section>
+      )}
+
+      {hasVisualBackground && (
+        <Section title="Radius" icon={<Settings size={15} />}>
+          <SliderControl
+            value={radiusValue}
+            min={0}
+            max={Math.max(240, Math.ceil(radiusValue))}
+            step={1}
+            disabled={styleEditingDisabled}
+            displayValue={`${formatNumericValue(radiusValue)}px`}
+            formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
+            onCommit={(next) => onSetStyle("border-radius", `${formatNumericValue(next)}px`)}
+          />
+        </Section>
+      )}
+
+      <Section title="Stroke" icon={<Square size={15} />}>
+        <div className="space-y-4">
+          <div className={RESPONSIVE_GRID}>
+            <MetricField
+              label="Width"
+              value={formatPxMetricValue(borderWidthValue)}
+              disabled={styleEditingDisabled}
+              liveCommit
+              onCommit={async (next) => {
+                const normalized = normalizePanelPxValue(next, {
+                  min: 0,
+                  max: 200,
+                  fallback: borderWidthValue,
+                });
+                if (!normalized) return;
+                for (const [property, value] of buildStrokeWidthStyleUpdates(
+                  normalized,
+                  borderStyleValue,
+                )) {
+                  await onSetStyle(property, value);
+                }
+              }}
+            />
+            <SelectField
+              label="Style"
+              value={borderStyleValue}
+              disabled={styleEditingDisabled}
+              onChange={async (next) => {
+                for (const [property, value] of buildStrokeStyleUpdates(
+                  next,
+                  formatPxMetricValue(borderWidthValue),
+                )) {
+                  await onSetStyle(property, value);
+                }
+              }}
+              options={[
+                "none",
+                "solid",
+                "dashed",
+                "dotted",
+                "double",
+                "hidden",
+                "groove",
+                "ridge",
+                "inset",
+                "outset",
+              ]}
+            />
+          </div>
+          <ColorField
+            label="Stroke color"
+            value={borderColorValue}
+            disabled={styleEditingDisabled}
+            onCommit={(next) => onSetStyle("border-color", next)}
+          />
+        </div>
+      </Section>
+
+      <Section title="Effects" icon={<Zap size={15} />}>
+        <div className="space-y-4">
+          <SelectField
+            label="Shadow"
+            value={boxShadowPreset}
+            disabled={styleEditingDisabled}
+            onChange={(next) => {
+              if (next === "custom") return;
+              onSetStyle(
+                "box-shadow",
+                buildBoxShadowPresetValue(next as BoxShadowPreset, styles["box-shadow"]),
+              );
+            }}
+            options={["custom", "none", "soft", "lift", "glow"]}
+          />
+          <div className={RESPONSIVE_GRID}>
+            <div className="grid min-w-0 gap-1.5">
+              <span className={LABEL}>Layer blur</span>
+              <SliderControl
+                value={filterBlurValue}
+                min={0}
+                max={Math.max(40, Math.ceil(filterBlurValue))}
+                step={1}
+                disabled={styleEditingDisabled}
+                displayValue={`${formatNumericValue(filterBlurValue)}px`}
+                formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
+                onCommit={(next) =>
+                  onSetStyle("filter", setCssFilterFunctionPx(styles.filter, "blur", next))
+                }
+              />
+            </div>
+            <div className="grid min-w-0 gap-1.5">
+              <span className={LABEL}>Backdrop</span>
+              <SliderControl
+                value={backdropBlurValue}
+                min={0}
+                max={Math.max(60, Math.ceil(backdropBlurValue))}
+                step={1}
+                disabled={styleEditingDisabled}
+                displayValue={`${formatNumericValue(backdropBlurValue)}px`}
+                formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
+                onCommit={(next) =>
+                  onSetStyle(
+                    "backdrop-filter",
+                    setCssFilterFunctionPx(styles["backdrop-filter"], "blur", next),
+                  )
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      <Section title="Clip" icon={<Layers size={15} />}>
+        <div className="space-y-4">
+          <div className={RESPONSIVE_GRID}>
+            <SelectField
+              label="Overflow"
+              value={styles.overflow || "visible"}
+              disabled={styleEditingDisabled}
+              onChange={(next) => onSetStyle("overflow", next)}
+              options={["visible", "hidden", "clip", "auto", "scroll"]}
+            />
+            <SelectField
+              label="Mask"
+              value={clipPathPreset}
+              disabled={styleEditingDisabled}
+              onChange={(next) => {
+                if (next === "custom") return;
+                onSetStyle(
+                  "clip-path",
+                  buildClipPathValue(
+                    next as "none" | "inset" | "circle",
+                    radiusValue,
+                    clipPathValue,
+                  ),
+                );
+              }}
+              options={["custom", "none", "inset", "circle"]}
+            />
+          </div>
+          <div className="grid min-w-0 gap-1.5">
+            <span className={LABEL}>Mask inset</span>
+            <SliderControl
+              value={clipInsetValue}
+              min={0}
+              max={Math.max(120, Math.ceil(clipInsetValue))}
+              step={1}
+              disabled={styleEditingDisabled}
+              displayValue={`${formatNumericValue(clipInsetValue)}px`}
+              formatDisplayValue={(next) => `${formatNumericValue(next)}px`}
+              onCommit={(next) =>
+                onSetStyle("clip-path", buildInsetClipPathValue(next, radiusValue))
+              }
+            />
+          </div>
+        </div>
+      </Section>
+
+      <Section title="Transparency" icon={<Eye size={15} />}>
+        <div className="space-y-4">
+          <SliderControl
+            value={opacityValue}
+            min={0}
+            max={100}
+            step={1}
+            disabled={styleEditingDisabled}
+            displayValue={`${opacityValue}%`}
+            formatDisplayValue={(next) => `${Math.round(next)}%`}
+            onCommit={(next) => onSetStyle("opacity", formatNumericValue(next / 100))}
+          />
+          <SelectField
+            label="Mode"
+            value={styles["mix-blend-mode"] || "normal"}
+            disabled={styleEditingDisabled}
+            onChange={(next) => onSetStyle("mix-blend-mode", next)}
+            options={["normal", "multiply", "screen", "overlay", "darken", "lighten"]}
+          />
+        </div>
+      </Section>
+
+      <Section
+        title="Fill"
+        icon={<Palette size={15} />}
+        accessory={
+          <div className="rounded-full border border-neutral-700 bg-neutral-900 px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-400">
+            {preferredFillMode}
+          </div>
+        }
+      >
+        <div className="space-y-4">
+          <SegmentedControl
+            disabled={styleEditingDisabled}
+            value={preferredFillMode}
+            onChange={handleFillModeChange}
+            options={[
+              { label: "Solid", value: "Solid" },
+              { label: "Gradient", value: "Gradient" },
+              { label: "Image", value: "Image" },
+            ]}
+          />
+          {preferredFillMode === "Solid" ? (
+            <ColorField
+              label="Fill color"
+              value={styles["background-color"] ?? "transparent"}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("background-color", next)}
+            />
+          ) : preferredFillMode === "Gradient" ? (
+            <GradientField
+              value={
+                backgroundImage !== "none"
+                  ? backgroundImage
+                  : serializeGradient(buildDefaultGradientModel(styles["background-color"]))
+              }
+              fallbackColor={styles["background-color"]}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("background-image", next)}
+            />
+          ) : (
+            <ImageFillField
+              projectId={projectId}
+              sourceFile={element.sourceFile}
+              value={imageUrl}
+              assets={assets}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("background-image", next)}
+              onImportAssets={onImportAssets}
+            />
+          )}
+          {!hasTextControls && (
+            <ColorField
+              label="Text color"
+              value={styles.color ?? "rgb(0, 0, 0)"}
+              disabled={styleEditingDisabled}
+              onCommit={(next) => onSetStyle("color", next)}
+            />
+          )}
+        </div>
+      </Section>
+    </>
+  );
+}

package/src/components/nle/NLELayout.tsx

@@ -52,9 +52,6 @@ interface NLELayoutProps {
   ) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
-  onInspectTimelineElement?: (element: TimelineElement) => void;
-  inspectedTimelineElementId?: string | null;
-  timelineLayerChildCounts?: ReadonlyMap<string, number>;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
   /** Whether the timeline panel is visible (default: true) */
@@ -91,9 +88,6 @@ export const NLELayout = memo(function NLELayout({
   onResizeElement,
   onBlockedEditAttempt,
   onSelectTimelineElement,
-  onInspectTimelineElement,
-  inspectedTimelineElementId,
-  timelineLayerChildCounts,
   onCompIdToSrcChange,
   timelineVisible,
   onToggleTimeline,
@@ -460,10 +454,6 @@ export const NLELayout = memo(function NLELayout({
                 onResizeElement={onResizeElement}
                 onBlockedEditAttempt={onBlockedEditAttempt}
                 onSelectElement={onSelectTimelineElement}
-                onInspectElement={onInspectTimelineElement}
-                inspectedElementId={inspectedTimelineElementId}
-                layerChildCounts={timelineLayerChildCounts}
-                disabled={timelineDisabled}
               />
             </div>
             {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}

package/src/contexts/DomEditContext.tsx

@@ -0,0 +1,137 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { useDomEditSession } from "../hooks/useDomEditSession";
+
+type DomEditValue = ReturnType<typeof useDomEditSession>;
+
+const DomEditContext = createContext<DomEditValue | null>(null);
+
+export function useDomEditContext(): DomEditValue {
+  const ctx = useContext(DomEditContext);
+  if (!ctx) throw new Error("useDomEditContext must be used within DomEditProvider");
+  return ctx;
+}
+
+export function DomEditProvider({
+  value: {
+    domEditSelection,
+    domEditGroupSelections,
+    domEditHoverSelection,
+    agentModalOpen,
+    agentModalAnchorPoint,
+    copiedAgentPrompt,
+    agentPromptSelectionContext,
+    domEditSelectionRef,
+    handleTimelineElementSelect,
+    handlePreviewCanvasMouseDown,
+    handlePreviewCanvasPointerMove,
+    handlePreviewCanvasPointerLeave,
+    applyDomSelection,
+    clearDomSelection,
+    handleDomStyleCommit,
+    handleDomPathOffsetCommit,
+    handleDomGroupPathOffsetCommit,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
+    handleDomManualEditsReset,
+    handleDomMotionCommit,
+    handleDomMotionClear,
+    handleDomTextCommit,
+    handleDomTextFieldStyleCommit,
+    handleDomAddTextField,
+    handleDomRemoveTextField,
+    handleAskAgent,
+    handleAgentModalSubmit,
+    handleBlockedDomMove,
+    handleDomManualDragStart,
+    handleDomEditElementDelete,
+    buildDomSelectionForTimelineElement,
+    resolveImportedFontAsset,
+    setAgentModalOpen,
+    setAgentPromptSelectionContext,
+    setAgentModalAnchorPoint,
+  },
+  children,
+}: {
+  value: DomEditValue;
+  children: ReactNode;
+}) {
+  const stable = useMemo<DomEditValue>(
+    () => ({
+      domEditSelection,
+      domEditGroupSelections,
+      domEditHoverSelection,
+      agentModalOpen,
+      agentModalAnchorPoint,
+      copiedAgentPrompt,
+      agentPromptSelectionContext,
+      domEditSelectionRef,
+      handleTimelineElementSelect,
+      handlePreviewCanvasMouseDown,
+      handlePreviewCanvasPointerMove,
+      handlePreviewCanvasPointerLeave,
+      applyDomSelection,
+      clearDomSelection,
+      handleDomStyleCommit,
+      handleDomPathOffsetCommit,
+      handleDomGroupPathOffsetCommit,
+      handleDomBoxSizeCommit,
+      handleDomRotationCommit,
+      handleDomManualEditsReset,
+      handleDomMotionCommit,
+      handleDomMotionClear,
+      handleDomTextCommit,
+      handleDomTextFieldStyleCommit,
+      handleDomAddTextField,
+      handleDomRemoveTextField,
+      handleAskAgent,
+      handleAgentModalSubmit,
+      handleBlockedDomMove,
+      handleDomManualDragStart,
+      handleDomEditElementDelete,
+      buildDomSelectionForTimelineElement,
+      resolveImportedFontAsset,
+      setAgentModalOpen,
+      setAgentPromptSelectionContext,
+      setAgentModalAnchorPoint,
+    }),
+    [
+      domEditSelection,
+      domEditGroupSelections,
+      domEditHoverSelection,
+      agentModalOpen,
+      agentModalAnchorPoint,
+      copiedAgentPrompt,
+      agentPromptSelectionContext,
+      domEditSelectionRef,
+      handleTimelineElementSelect,
+      handlePreviewCanvasMouseDown,
+      handlePreviewCanvasPointerMove,
+      handlePreviewCanvasPointerLeave,
+      applyDomSelection,
+      clearDomSelection,
+      handleDomStyleCommit,
+      handleDomPathOffsetCommit,
+      handleDomGroupPathOffsetCommit,
+      handleDomBoxSizeCommit,
+      handleDomRotationCommit,
+      handleDomManualEditsReset,
+      handleDomMotionCommit,
+      handleDomMotionClear,
+      handleDomTextCommit,
+      handleDomTextFieldStyleCommit,
+      handleDomAddTextField,
+      handleDomRemoveTextField,
+      handleAskAgent,
+      handleAgentModalSubmit,
+      handleBlockedDomMove,
+      handleDomManualDragStart,
+      handleDomEditElementDelete,
+      buildDomSelectionForTimelineElement,
+      resolveImportedFontAsset,
+      setAgentModalOpen,
+      setAgentPromptSelectionContext,
+      setAgentModalAnchorPoint,
+    ],
+  );
+  return <DomEditContext value={stable}>{children}</DomEditContext>;
+}

package/src/contexts/FileManagerContext.tsx

@@ -0,0 +1,110 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import type { useFileManager } from "../hooks/useFileManager";
+
+type FileManagerValue = ReturnType<typeof useFileManager>;
+
+const FileManagerContext = createContext<FileManagerValue | null>(null);
+
+export function useFileManagerContext(): FileManagerValue {
+  const ctx = useContext(FileManagerContext);
+  if (!ctx) throw new Error("useFileManagerContext must be used within FileManagerProvider");
+  return ctx;
+}
+
+export function FileManagerProvider({
+  value: {
+    editingFile,
+    setEditingFile,
+    projectDir,
+    fileTree,
+    setFileTree,
+    editingPathRef,
+    projectIdRef,
+    saveTimerRef,
+    importedFontAssetsRef,
+    readProjectFile,
+    writeProjectFile,
+    readOptionalProjectFile,
+    handleFileSelect,
+    handleContentChange,
+    refreshFileTree,
+    uploadProjectFiles,
+    handleCreateFile,
+    handleCreateFolder,
+    handleDeleteFile,
+    handleRenameFile,
+    handleDuplicateFile,
+    handleMoveFile,
+    handleImportFiles,
+    handleImportFonts,
+    compositions,
+    assets,
+    fontAssets,
+  },
+  children,
+}: {
+  value: FileManagerValue;
+  children: ReactNode;
+}) {
+  const stable = useMemo<FileManagerValue>(
+    () => ({
+      editingFile,
+      setEditingFile,
+      projectDir,
+      fileTree,
+      setFileTree,
+      editingPathRef,
+      projectIdRef,
+      saveTimerRef,
+      importedFontAssetsRef,
+      readProjectFile,
+      writeProjectFile,
+      readOptionalProjectFile,
+      handleFileSelect,
+      handleContentChange,
+      refreshFileTree,
+      uploadProjectFiles,
+      handleCreateFile,
+      handleCreateFolder,
+      handleDeleteFile,
+      handleRenameFile,
+      handleDuplicateFile,
+      handleMoveFile,
+      handleImportFiles,
+      handleImportFonts,
+      compositions,
+      assets,
+      fontAssets,
+    }),
+    [
+      editingFile,
+      setEditingFile,
+      projectDir,
+      fileTree,
+      setFileTree,
+      editingPathRef,
+      projectIdRef,
+      saveTimerRef,
+      importedFontAssetsRef,
+      readProjectFile,
+      writeProjectFile,
+      readOptionalProjectFile,
+      handleFileSelect,
+      handleContentChange,
+      refreshFileTree,
+      uploadProjectFiles,
+      handleCreateFile,
+      handleCreateFolder,
+      handleDeleteFile,
+      handleRenameFile,
+      handleDuplicateFile,
+      handleMoveFile,
+      handleImportFiles,
+      handleImportFonts,
+      compositions,
+      assets,
+      fontAssets,
+    ],
+  );
+  return <FileManagerContext value={stable}>{children}</FileManagerContext>;
+}