@hyperframes/studio 0.7.58 → 0.7.60

package/src/components/editor/propertyPanelSections.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ChangeEvent } from "react";
 import { Plus, Type } from "../../icons/SystemIcons";
 import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
 import type { ImportedFontAsset } from "./fontAssets";
@@ -7,25 +7,26 @@ import { MetricField, Section, SelectField } from "./propertyPanelPrimitives";
 import { ColorField } from "./propertyPanelColor";
 import { FontFamilyField } from "./propertyPanelFont";
 import { PromotableControl } from "./PromotableControl";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 /* ------------------------------------------------------------------ */
 /*  Text helpers (used only by text section components)                */
 /* ------------------------------------------------------------------ */
 
-function formatTextFieldPreview(value: string): string {
+export function formatTextFieldPreview(value: string): string {
   const collapsed = value.trim().replace(/\s+/g, " ");
   if (collapsed.length <= 56) return collapsed;
   return `${collapsed.slice(0, 55)}…`;
 }
 
-function getTextFieldColor(
+export function getTextFieldColor(
   field: { computedStyles: Record<string, string> },
   inheritedStyles: Record<string, string>,
 ): string {
   return field.computedStyles.color || inheritedStyles.color || "rgb(0, 0, 0)";
 }
 
-function getTextStyleValue(
+export function getTextStyleValue(
   field: { computedStyles: Record<string, string> },
   inheritedStyles: Record<string, string>,
   property: string,
@@ -35,7 +36,7 @@ function getTextStyleValue(
 }
 
 const ALL_WEIGHTS = ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
-const WEIGHT_LABELS: Record<string, string> = {
+export const WEIGHT_LABELS: Record<string, string> = {
   "100": "100 · Thin",
   "200": "200 · Extra Light",
   "300": "300 · Light",
@@ -47,7 +48,7 @@ const WEIGHT_LABELS: Record<string, string> = {
   "900": "900 · Black",
 };
 
-function detectAvailableWeights(fontFamily: string): string[] {
+export function detectAvailableWeights(fontFamily: string): string[] {
   const fonts = document.fonts;
   if (!fonts) return ALL_WEIGHTS;
   const family = fontFamily.split(",")[0]?.trim().replace(/['"]/g, "");
@@ -59,22 +60,26 @@ function detectAvailableWeights(fontFamily: string): string[] {
   return available.length > 0 ? available : ALL_WEIGHTS;
 }
 
-function TextAreaField({
+export function TextAreaField({
   label,
   value,
   disabled,
   autoFocus,
+  flat,
   onCommit,
 }: {
   label: string;
   value: string;
   disabled?: boolean;
   autoFocus?: boolean;
+  flat?: boolean;
   onCommit: (nextValue: string) => void;
 }) {
+  const track = useTrackDesignInput();
   const [draft, setDraft] = useState(value);
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const commitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const interactionChangedRef = useRef(false);
   const focusedRef = useRef(false);
   const valueRef = useRef(value);
   valueRef.current = value;
@@ -96,15 +101,58 @@ function TextAreaField({
 
   const commitDraft = (d: string) => {
     if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+    if (interactionChangedRef.current) {
+      interactionChangedRef.current = false;
+      track("text", label);
+    }
     if (d !== valueRef.current) onCommit(d);
   };
   const scheduleCommit = (d: string) => {
     if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
     commitTimerRef.current = setTimeout(() => {
-      if (d !== valueRef.current) onCommit(d);
+      if (d !== valueRef.current) {
+        if (interactionChangedRef.current) {
+          interactionChangedRef.current = false;
+          track("text", label);
+        }
+        onCommit(d);
+      }
     }, 120);
   };
 
+  const handleFocus = () => {
+    focusedRef.current = true;
+  };
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setDraft(e.target.value);
+    interactionChangedRef.current = true;
+    scheduleCommit(e.target.value);
+  };
+  const handleBlur = () => {
+    focusedRef.current = false;
+    commitDraft(draft);
+  };
+
+  if (flat) {
+    return (
+      <div className="border-l-2 border-panel-border-input py-0.5 pl-[10px]">
+        <div className="mb-[3px] text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          {label}
+        </div>
+        <textarea
+          ref={textareaRef}
+          value={draft}
+          disabled={disabled}
+          rows={2}
+          onFocus={handleFocus}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          className="w-full resize-none bg-transparent font-mono text-[11px] leading-normal text-panel-text-0 outline-none disabled:cursor-not-allowed disabled:text-panel-text-4"
+        />
+      </div>
+    );
+  }
+
   return (
     <label className="grid min-w-0 gap-1.5">
       <span className={LABEL}>{label}</span>
@@ -114,17 +162,9 @@ function TextAreaField({
           value={draft}
           disabled={disabled}
           rows={4}
-          onFocus={() => {
-            focusedRef.current = true;
-          }}
-          onChange={(e) => {
-            setDraft(e.target.value);
-            scheduleCommit(e.target.value);
-          }}
-          onBlur={() => {
-            focusedRef.current = false;
-            commitDraft(draft);
-          }}
+          onFocus={handleFocus}
+          onChange={handleChange}
+          onBlur={handleBlur}
           className="w-full resize-none bg-transparent text-[11px] font-medium text-neutral-100 outline-none disabled:cursor-not-allowed disabled:text-neutral-600"
         />
       </div>
@@ -143,6 +183,7 @@ function FontWeightField({
   fontFamily?: string;
   onCommit: (nextValue: string) => void;
 }) {
+  const track = useTrackDesignInput();
   const options = fontFamily ? detectAvailableWeights(fontFamily) : ALL_WEIGHTS;
   const displayOptions = value && !options.includes(value) ? [value, ...options] : options;
   return (
@@ -152,7 +193,10 @@ function FontWeightField({
         <select
           value={value}
           disabled={disabled}
-          onChange={(e) => onCommit(e.target.value)}
+          onChange={(e) => {
+            track("select", "Weight");
+            onCommit(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"
         >
           {displayOptions.map((o) => (
@@ -262,6 +306,7 @@ function TextFieldEditor({
   onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
   onRemoveTextField: (fieldKey: string) => void;
 }) {
+  const track = useTrackDesignInput();
   return (
     <div className="space-y-3">
       <div className={showRemove ? "flex min-w-0 items-center justify-between gap-2" : "min-w-0"}>
@@ -274,7 +319,10 @@ function TextFieldEditor({
         {showRemove && (
           <button
             type="button"
-            onClick={() => onRemoveTextField(field.key)}
+            onClick={() => {
+              track("button", "Remove text field");
+              onRemoveTextField(field.key);
+            }}
             className="inline-flex h-7 flex-shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
           >
             Remove
@@ -356,6 +404,7 @@ export function TextSection({
   onSetTextFieldStyle,
   onAddTextField,
   onRemoveTextField,
+  hideOwnHeading = false,
 }: {
   element: DomEditSelection;
   styles: Record<string, string>;
@@ -365,7 +414,13 @@ export function TextSection({
   onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
   onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
   onRemoveTextField: (fieldKey: string) => void;
+  /** Skip TextSection's own "Text" Section heading/wrapper — for callers (the
+   *  flat inspector's multi-field fallback) that already render their own
+   *  "Text" heading one level up, to avoid a doubled heading. Defaults to
+   *  false so the legacy (non-flat) call site is unaffected. */
+  hideOwnHeading?: boolean;
 }) {
+  const track = useTrackDesignInput();
   const hasTextControls = isTextEditableSelection(element);
   const [activeTextFieldKey, setActiveTextFieldKey] = useState<string | null>(
     element.textFields[0]?.key ?? null,
@@ -386,85 +441,94 @@ export function TextSection({
   if (!activeField) return null;
 
   if (textFields.length === 1) {
+    const content = (
+      <TextFieldEditor
+        field={activeField}
+        styles={styles}
+        fontAssets={fontAssets}
+        onImportFonts={onImportFonts}
+        showRemove={false}
+        onSetText={onSetText}
+        onSetTextFieldStyle={onSetTextFieldStyle}
+        onRemoveTextField={onRemoveTextField}
+      />
+    );
+    if (hideOwnHeading) return content;
     return (
       <Section title="Text" icon={<Type size={15} />} defaultCollapsed>
-        <TextFieldEditor
-          field={activeField}
-          styles={styles}
-          fontAssets={fontAssets}
-          onImportFonts={onImportFonts}
-          showRemove={false}
-          onSetText={onSetText}
-          onSetTextFieldStyle={onSetTextFieldStyle}
-          onRemoveTextField={onRemoveTextField}
-        />
+        {content}
       </Section>
     );
   }
 
-  return (
-    <Section title="Text" icon={<Type size={15} />}>
-      <div className="space-y-4">
-        <div className="grid gap-1.5">
-          <div className="flex min-w-0 flex-wrap items-center justify-between gap-2">
-            <span className={LABEL}>Text layers</span>
-            <button
-              type="button"
-              onClick={() => {
-                void Promise.resolve(onAddTextField(activeField.key)).then((nextKey) => {
-                  if (nextKey) setActiveTextFieldKey(nextKey);
-                });
-              }}
-              className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
-            >
-              <Plus size={12} className="flex-shrink-0" />
-              <span className="truncate">Add text</span>
-            </button>
-          </div>
-          <div className="grid gap-2">
-            {textFields.map((field, index) => {
-              const active = field.key === activeField.key;
-              return (
-                <button
-                  key={field.key}
-                  type="button"
-                  onClick={() => setActiveTextFieldKey(field.key)}
-                  className={`min-w-0 w-full rounded-xl border px-3 py-2 text-left transition-colors ${
-                    active
-                      ? "border-studio-accent/50 bg-studio-accent/10"
-                      : "border-neutral-800 bg-neutral-900/80 hover:border-neutral-700 hover:bg-neutral-900"
-                  }`}
-                >
-                  <div className="flex min-w-0 items-center justify-between gap-2">
-                    <div className="flex min-w-0 items-center gap-2">
-                      <span
-                        className="h-4 w-4 flex-shrink-0 rounded border border-neutral-700 bg-neutral-950"
-                        style={{ backgroundColor: getTextFieldColor(field, styles) }}
-                      />
-                      <span className="min-w-0 truncate text-[11px] font-medium text-neutral-100">
-                        {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
-                      </span>
-                    </div>
-                    <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
-                      {field.tagName}
+  const content = (
+    <div className="space-y-4">
+      <div className="grid gap-1.5">
+        <div className="flex min-w-0 flex-wrap items-center justify-between gap-2">
+          <span className={LABEL}>Text layers</span>
+          <button
+            type="button"
+            onClick={() => {
+              track("button", "Add text field");
+              void Promise.resolve(onAddTextField(activeField.key)).then((nextKey) => {
+                if (nextKey) setActiveTextFieldKey(nextKey);
+              });
+            }}
+            className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+          >
+            <Plus size={12} className="flex-shrink-0" />
+            <span className="truncate">Add text</span>
+          </button>
+        </div>
+        <div className="grid gap-2">
+          {textFields.map((field, index) => {
+            const active = field.key === activeField.key;
+            return (
+              <button
+                key={field.key}
+                type="button"
+                onClick={() => setActiveTextFieldKey(field.key)}
+                className={`min-w-0 w-full rounded-xl border px-3 py-2 text-left transition-colors ${
+                  active
+                    ? "border-studio-accent/50 bg-studio-accent/10"
+                    : "border-neutral-800 bg-neutral-900/80 hover:border-neutral-700 hover:bg-neutral-900"
+                }`}
+              >
+                <div className="flex min-w-0 items-center justify-between gap-2">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <span
+                      className="h-4 w-4 flex-shrink-0 rounded border border-neutral-700 bg-neutral-950"
+                      style={{ backgroundColor: getTextFieldColor(field, styles) }}
+                    />
+                    <span className="min-w-0 truncate text-[11px] font-medium text-neutral-100">
+                      {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
                     </span>
                   </div>
-                </button>
-              );
-            })}
-          </div>
+                  <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
+                    {field.tagName}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
         </div>
-        <TextFieldEditor
-          field={activeField}
-          styles={styles}
-          fontAssets={fontAssets}
-          onImportFonts={onImportFonts}
-          showRemove={true}
-          onSetText={onSetText}
-          onSetTextFieldStyle={onSetTextFieldStyle}
-          onRemoveTextField={onRemoveTextField}
-        />
       </div>
+      <TextFieldEditor
+        field={activeField}
+        styles={styles}
+        fontAssets={fontAssets}
+        onImportFonts={onImportFonts}
+        showRemove={true}
+        onSetText={onSetText}
+        onSetTextFieldStyle={onSetTextFieldStyle}
+        onRemoveTextField={onRemoveTextField}
+      />
+    </div>
+  );
+  if (hideOwnHeading) return content;
+  return (
+    <Section title="Text" icon={<Type size={15} />}>
+      {content}
     </Section>
   );
 }

package/src/components/editor/propertyPanelStyleSections.tsx

@@ -47,6 +47,7 @@ export function StyleSections({
   onSetStyle,
   onImportAssets,
   gsapBorderRadius,
+  hideFlex = false,
 }: {
   projectId: string;
   element: DomEditSelection;
@@ -55,6 +56,10 @@ export function StyleSections({
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
   onImportAssets?: (files: FileList) => Promise<string[]>;
   gsapBorderRadius?: { tl: number; tr: number; br: number; bl: number } | null;
+  // When true, the Flex `Section` is suppressed. The flat inspector renders
+  // its own Flex controls inside the Layout group (LayoutFlexBlock), so the
+  // flat path passes this to avoid a double-render. Non-flat callers omit it.
+  hideFlex?: boolean;
 }) {
   const styleEditingDisabled = !element.capabilities.canEditStyles;
   const isFlex = styles.display === "flex" || styles.display === "inline-flex";
@@ -145,10 +150,11 @@ export function StyleSections({
 
   return (
     <>
-      {isFlex && (
+      {isFlex && !hideFlex && (
         <Section title="Flex" icon={<Layers size={15} />} defaultCollapsed>
           <div className="space-y-4">
             <SegmentedControl
+              trackName="Flex direction"
               disabled={styleEditingDisabled}
               value={styles["flex-direction"] || "row"}
               onChange={(next) => onSetStyle("flex-direction", next)}
@@ -293,6 +299,7 @@ export function StyleSections({
             <div className="grid min-w-0 gap-1.5">
               <span className={LABEL}>Layer blur</span>
               <SliderControl
+                trackName="Layer blur"
                 value={filterBlurValue}
                 min={0}
                 max={Math.max(40, Math.ceil(filterBlurValue))}
@@ -308,6 +315,7 @@ export function StyleSections({
             <div className="grid min-w-0 gap-1.5">
               <span className={LABEL}>Backdrop</span>
               <SliderControl
+                trackName="Backdrop blur"
                 value={backdropBlurValue}
                 min={0}
                 max={Math.max(60, Math.ceil(backdropBlurValue))}
@@ -358,6 +366,7 @@ export function StyleSections({
           <div className="grid min-w-0 gap-1.5">
             <span className={LABEL}>Mask inset</span>
             <SliderControl
+              trackName="Mask inset"
               value={clipInsetValue}
               min={0}
               max={Math.max(120, Math.ceil(clipInsetValue))}
@@ -406,6 +415,7 @@ export function StyleSections({
       <Section title="Transparency" icon={<Eye size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <SliderControl
+            trackName="Opacity"
             value={opacityValue}
             min={0}
             max={100}
@@ -428,6 +438,7 @@ export function StyleSections({
       <Section title="Fill" icon={<Palette size={15} />}>
         <div className="space-y-4">
           <SegmentedControl
+            trackName="Fill type"
             disabled={styleEditingDisabled}
             value={preferredFillMode}
             onChange={handleFillModeChange}

package/src/components/editor/propertyPanelTimingSection.tsx

@@ -4,7 +4,7 @@ import type { DomEditSelection } from "./domEditing";
 import { formatTimingValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import { MetricField, Section } from "./propertyPanelPrimitives";
 
-function parseTimingValue(input: string): number | null {
+export function parseTimingValue(input: string): number | null {
   const cleaned = input.replace(/s$/i, "").trim();
   const parsed = Number.parseFloat(cleaned);
   return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;

package/src/components/editor/propertyPanelTypes.ts

@@ -25,12 +25,25 @@ export interface PropertyPanelProps {
   assets: string[];
   element: DomEditSelection | null;
   multiSelectCount?: number;
+  multiSelectedElements?: DomEditSelection[];
+  onGroupSelection?: () => void;
+  onHideAllSelected?: () => void;
   copiedAgentPrompt: boolean;
   onClearSelection: () => void;
   onUngroup?: () => void;
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
-  onSetAttributeLive: (attr: string, value: string | null) => void | Promise<void>;
+  /** Commits several data-* attributes on the SAME element in ONE atomic
+   *  persist call — e.g. a pinned timing range's start+duration together, so
+   *  a selection change or a partial failure mid-commit can't misdirect one
+   *  of the two writes or leave them half-applied. Falls back to sequential
+   *  `onSetAttribute` calls where omitted. */
+  onSetAttributes?: (selection: DomEditSelection, attrs: Record<string, string>) => Promise<void>;
+  onSetAttributeLive: (
+    attr: string,
+    value: string | null,
+    onSettled?: (ok: boolean) => void,
+  ) => void | Promise<void>;
   onApplyColorGradingScope?: (
     scope: "source-file" | "project",
     value: string | null,

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

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import {
+  resolveValueTier,
+  VALUE_TIER_LABEL_CLASS,
+  VALUE_TIER_VALUE_CLASS,
+} from "./propertyPanelValueTier";
+
+describe("resolveValueTier", () => {
+  it("is 'default' when there is no explicit declaration", () => {
+    expect(resolveValueTier(undefined, "400")).toBe("default");
+    expect(resolveValueTier("", "400")).toBe("default");
+  });
+
+  it("is 'explicitDefault' when the explicit value equals the default", () => {
+    expect(resolveValueTier("400", "400")).toBe("explicitDefault");
+    expect(resolveValueTier(" normal ", "normal")).toBe("explicitDefault");
+  });
+
+  it("is 'explicitCustom' when the explicit value differs from the default", () => {
+    expect(resolveValueTier("3.96px", "0px")).toBe("explicitCustom");
+  });
+});
+
+describe("value tier class maps", () => {
+  it("covers all three tiers for both label and value", () => {
+    for (const tier of ["default", "explicitDefault", "explicitCustom"] as const) {
+      expect(VALUE_TIER_LABEL_CLASS[tier]).toBeTruthy();
+      expect(VALUE_TIER_VALUE_CLASS[tier]).toBeTruthy();
+    }
+    expect(VALUE_TIER_VALUE_CLASS.explicitCustom).toBe("text-panel-accent");
+  });
+});

package/src/components/editor/propertyPanelValueTier.ts

@@ -0,0 +1,28 @@
+/**
+ * The flat inspector's 3-state value coloring (design_handoff_studio_inspector,
+ * verified against Studio Panel Redesign.dc.html #10a): a property row is either
+ * unset (no explicit declaration), explicitly declared but equal to its default
+ * (no visual "set" signal), or explicitly declared and different from its default
+ * (mint value + emphasized label + reset affordance).
+ */
+export type PropertyValueTier = "default" | "explicitDefault" | "explicitCustom";
+
+export function resolveValueTier(
+  explicitValue: string | undefined,
+  defaultValue: string,
+): PropertyValueTier {
+  if (explicitValue == null || explicitValue.trim() === "") return "default";
+  return explicitValue.trim() === defaultValue.trim() ? "explicitDefault" : "explicitCustom";
+}
+
+export const VALUE_TIER_LABEL_CLASS: Record<PropertyValueTier, string> = {
+  default: "text-panel-text-3",
+  explicitDefault: "text-panel-text-2",
+  explicitCustom: "text-panel-text-0",
+};
+
+export const VALUE_TIER_VALUE_CLASS: Record<PropertyValueTier, string> = {
+  default: "text-panel-text-3",
+  explicitDefault: "text-panel-text-0",
+  explicitCustom: "text-panel-accent",
+};