@hyperframes/studio 0.7.58 → 0.7.59

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -1,7 +1,11 @@
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  DesignPanelInputProvider,
+  useTrackDesignInput,
+} from "../../contexts/DesignPanelInputContext";
 import { adjustNumericToken, FIELD, LABEL, parseNumericToken } from "./propertyPanelHelpers";
 
-function CommitField({
+export function CommitField({
   value,
   disabled,
   liveCommit,
@@ -116,7 +120,15 @@ export function MetricField({
   tooltip?: string;
   onCommit: (nextValue: string) => void;
 }) {
+  const track = useTrackDesignInput();
   const scrubRef = useRef<{ startX: number; startValue: number; pointerId: number } | null>(null);
+  const commit = useCallback(
+    (nextValue: string) => {
+      if (nextValue !== value) track("metric", label);
+      onCommit(nextValue);
+    },
+    [label, onCommit, track, value],
+  );
 
   const handleScrubPointerDown = useCallback(
     (e: React.PointerEvent<HTMLSpanElement>) => {
@@ -134,9 +146,9 @@ export function MetricField({
       const state = scrubRef.current;
       if (!state) return;
       const delta = e.clientX - state.startX;
-      onCommit(String(Math.round(state.startValue + delta)));
+      commit(String(Math.round(state.startValue + delta)));
     },
-    [onCommit],
+    [commit],
   );
 
   const handleScrubPointerUp = useCallback(() => {
@@ -158,12 +170,7 @@ export function MetricField({
     <div className={FIELD} title={tooltip}>
       <div className="flex min-w-0 items-center gap-3">
         <span {...scrubProps}>{label}</span>
-        <CommitField
-          value={value}
-          disabled={disabled}
-          liveCommit={liveCommit}
-          onCommit={onCommit}
-        />
+        <CommitField value={value} disabled={disabled} liveCommit={liveCommit} onCommit={commit} />
         {suffix && <span className="flex-shrink-0 text-[10px] text-neutral-600">{suffix}</span>}
       </div>
     </div>
@@ -185,17 +192,23 @@ export function DetailField({
   disabled?: boolean;
   onCommit: (nextValue: string) => void;
 }) {
+  const track = useTrackDesignInput();
+  const commit = (nextValue: string) => {
+    if (nextValue !== value) track("text", label);
+    onCommit(nextValue);
+  };
   return (
     <label className="grid min-w-0 gap-1.5">
       <span className={LABEL}>{label}</span>
       <div className={FIELD}>
-        <CommitField value={value} disabled={disabled} onCommit={onCommit} />
+        <CommitField value={value} disabled={disabled} onCommit={commit} />
       </div>
     </label>
   );
 }
 
 export function SliderControl({
+  trackName,
   value,
   min,
   max,
@@ -205,6 +218,7 @@ export function SliderControl({
   disabled,
   onCommit,
 }: {
+  trackName: string;
   value: number;
   min: number;
   max: number;
@@ -214,8 +228,10 @@ export function SliderControl({
   disabled?: boolean;
   onCommit: (nextValue: number) => void;
 }) {
+  const track = useTrackDesignInput();
   const [draft, setDraft] = useState(value);
   const commitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const interactionChangedRef = useRef(false);
   const valueRef = useRef(value);
   valueRef.current = value;
 
@@ -231,6 +247,10 @@ export function SliderControl({
 
   const commitDraft = (nextDraft: number) => {
     if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+    if (interactionChangedRef.current) {
+      interactionChangedRef.current = false;
+      track("slider", trackName);
+    }
     if (nextDraft !== valueRef.current) onCommit(nextDraft);
   };
   const scheduleCommit = (nextDraft: number) => {
@@ -252,6 +272,7 @@ export function SliderControl({
         onChange={(e) => {
           const n = Number(e.target.value);
           setDraft(n);
+          interactionChangedRef.current = true;
           scheduleCommit(n);
         }}
         onMouseUp={() => commitDraft(draft)}
@@ -267,16 +288,19 @@ export function SliderControl({
 }
 
 export function SegmentedControl({
+  trackName,
   options,
   value,
   disabled,
   onChange,
 }: {
+  trackName: string;
   options: Array<{ label: string; value: string }>;
   value: string;
   disabled?: boolean;
   onChange: (nextValue: string) => void;
 }) {
+  const track = useTrackDesignInput();
   return (
     <div
       className="grid min-w-0 gap-[2px] rounded-md bg-panel-input p-[2px]"
@@ -287,7 +311,10 @@ export function SegmentedControl({
           key={option.value}
           type="button"
           disabled={disabled}
-          onClick={() => onChange(option.value)}
+          onClick={() => {
+            if (option.value !== value) track("segmented", trackName);
+            onChange(option.value);
+          }}
           className={`min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${
             option.value === value
               ? "bg-panel-hover text-white"
@@ -314,6 +341,7 @@ export function SelectField({
   options: string[];
   onChange: (nextValue: string) => void;
 }) {
+  const track = useTrackDesignInput();
   const renderedOptions = value && !options.includes(value) ? [value, ...options] : options;
   return (
     <label className={`${FIELD} flex items-center gap-3`}>
@@ -321,7 +349,10 @@ export function SelectField({
       <select
         value={value}
         disabled={disabled}
-        onChange={(e) => onChange(e.target.value)}
+        onChange={(e) => {
+          track("select", label);
+          onChange(e.target.value);
+        }}
         className="min-w-0 w-full appearance-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
       >
         {renderedOptions.map((option) => (
@@ -370,24 +401,24 @@ export function Section({
     </svg>
   );
 
+  const section = slugifyPanelSectionTitle(title);
   return (
-    <section
-      className="min-w-0 border-t border-panel-border"
-      data-panel-section={slugifyPanelSectionTitle(title)}
-    >
-      <div className="flex w-full items-center gap-2 px-4 py-2.5">
-        <button
-          type="button"
-          onClick={() => setCollapsed((v) => !v)}
-          className="flex min-w-0 flex-1 items-center justify-between gap-2 text-left"
-        >
-          <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>
-          {collapseIcon}
-        </button>
-        {accessory && <div className="flex flex-shrink-0 items-center">{accessory}</div>}
-      </div>
-      {!collapsed && <div className="px-4 pb-3">{children}</div>}
-    </section>
+    <DesignPanelInputProvider section={section}>
+      <section className="min-w-0 border-t border-panel-border" data-panel-section={section}>
+        <div className="flex w-full items-center gap-2 px-4 py-2.5">
+          <button
+            type="button"
+            onClick={() => setCollapsed((v) => !v)}
+            className="flex min-w-0 flex-1 items-center justify-between gap-2 text-left"
+          >
+            <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>
+            {collapseIcon}
+          </button>
+          {accessory && <div className="flex flex-shrink-0 items-center">{accessory}</div>}
+        </div>
+        {!collapsed && <div className="px-4 pb-3">{children}</div>}
+      </section>
+    </DesignPanelInputProvider>
   );
 }
 

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

@@ -0,0 +1,161 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FlatTextSection } from "./propertyPanelFlatTextSection";
+import type { DomEditSelection } from "./domEditingTypes";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function makeElement(overrides: Partial<DomEditSelection> = {}): DomEditSelection {
+  return {
+    element: document.createElement("div"),
+    id: "mono-label",
+    selector: ".mono-label",
+    label: "Mono Label",
+    tagName: "div",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: -24, width: 257, height: 29 },
+    textContent: "PACKETS / FRAME",
+    dataAttributes: {},
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [
+      {
+        key: "field-0",
+        label: "Text",
+        value: "PACKETS / FRAME",
+        tagName: "div",
+        attributes: [],
+        inlineStyles: { "letter-spacing": "3.96px" },
+        computedStyles: {
+          "font-family": "JetBrains Mono",
+          "font-size": "22px",
+          "font-weight": "400",
+          "letter-spacing": "3.96px",
+          "line-height": "normal",
+          "text-align": "right",
+          "text-transform": "none",
+          "font-style": "normal",
+          color: "rgb(255, 176, 32)",
+        },
+        source: "self",
+      },
+    ],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+    ...overrides,
+  } as DomEditSelection;
+}
+
+function renderSection(overrides: Partial<DomEditSelection> = {}) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const element = makeElement(overrides);
+  act(() => {
+    root.render(
+      <FlatTextSection
+        element={element}
+        styles={{}}
+        fontAssets={[]}
+        onSetText={vi.fn()}
+        onSetTextFieldStyle={vi.fn()}
+        onAddTextField={vi.fn()}
+        onRemoveTextField={vi.fn()}
+      />,
+    );
+  });
+  return { host, root };
+}
+
+describe("FlatTextSection", () => {
+  it("renders the content block and every row from #10a", () => {
+    const { host, root } = renderSection();
+    expect(host.textContent).toContain("PACKETS / FRAME");
+    expect(host.textContent).toContain("Font");
+    expect(host.textContent).toContain("Weight");
+    expect(host.textContent).toContain("Letter spacing");
+    expect(host.textContent).toContain("Line height");
+    expect(host.textContent).toContain("Align");
+    act(() => root.unmount());
+  });
+
+  it("colors letter-spacing mint (explicit, differs from 0px default) with a reset button", () => {
+    const { host, root } = renderSection();
+    const resetButtons = host.querySelectorAll('[data-flat-row-reset="true"]');
+    expect(resetButtons.length).toBeGreaterThan(0);
+    act(() => root.unmount());
+  });
+
+  it("commits a font-weight change through onSetTextFieldStyle", () => {
+    const onSetTextFieldStyle = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const element = makeElement();
+    act(() => {
+      root.render(
+        <FlatTextSection
+          element={element}
+          styles={{}}
+          fontAssets={[]}
+          onSetText={vi.fn()}
+          onSetTextFieldStyle={onSetTextFieldStyle}
+          onAddTextField={vi.fn()}
+          onRemoveTextField={vi.fn()}
+        />,
+      );
+    });
+    const select = host.querySelector<HTMLSelectElement>("select");
+    if (!select) throw new Error("expected a weight <select>");
+    act(() => {
+      select.value = "700";
+      select.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+    expect(onSetTextFieldStyle).toHaveBeenCalledWith("field-0", "font-weight", "700");
+    act(() => root.unmount());
+  });
+
+  it("renders the flat layer list (not the legacy TextSection) for a multi-field element", () => {
+    const { host, root } = renderSection({
+      textFields: [
+        makeElement().textFields[0],
+        {
+          key: "field-1",
+          label: "Text",
+          value: "SECOND FIELD",
+          tagName: "div",
+          attributes: [],
+          inlineStyles: {},
+          computedStyles: {},
+          source: "self",
+        },
+      ],
+    });
+    // Legacy TextSection's own Section wrapper (data-panel-section="text")
+    // must never render here — multi-field elements now go through the flat
+    // FlatTextLayerList + FlatTextFieldEditor path end to end, not a
+    // delegation to the legacy component.
+    expect(host.querySelector('[data-panel-section="text"]')).toBeNull();
+    // The flat layer list's own content must render.
+    expect(host.textContent).toContain("Text layers");
+    act(() => root.unmount());
+  });
+});