@hyperframes/studio 0.7.58 → 0.7.60

package/src/components/editor/propertyPanelFlatTextSection.tsx

@@ -0,0 +1,407 @@
+import { useEffect, useState } from "react";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import { Plus, X } from "../../icons/SystemIcons";
+import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
+import type { ImportedFontAsset } from "./fontAssets";
+import { normalizeTextMetricValue } from "./propertyPanelHelpers";
+import { ColorField } from "./propertyPanelColor";
+import { FontFamilyField } from "./propertyPanelFont";
+import { PromotableControl } from "./PromotableControl";
+import { FlatRow, FlatSegmentedRow } from "./propertyPanelFlatPrimitives";
+import {
+  resolveValueTier,
+  VALUE_TIER_LABEL_CLASS,
+  VALUE_TIER_VALUE_CLASS,
+} from "./propertyPanelValueTier";
+import {
+  detectAvailableWeights,
+  formatTextFieldPreview,
+  getTextFieldColor,
+  getTextStyleValue,
+  TextAreaField,
+  WEIGHT_LABELS,
+} from "./propertyPanelSections";
+
+/* ------------------------------------------------------------------ */
+/*  Flat text section (design_handoff_studio_inspector, #10a)          */
+/* ------------------------------------------------------------------ */
+
+const ALIGN_OPTIONS = [
+  { key: "left", label: "left", node: "L" },
+  { key: "center", label: "center", node: "C" },
+  { key: "right", label: "right", node: "R" },
+  { key: "justify", label: "justify", node: "J" },
+];
+
+const CASE_OPTIONS = [
+  { key: "none", label: "none", node: "–" },
+  { key: "uppercase", label: "uppercase", node: "AG" },
+  { key: "lowercase", label: "lowercase", node: "ag" },
+  { key: "capitalize", label: "capitalize", node: "Ag" },
+];
+
+function FlatTextFieldEditor({
+  field,
+  styles,
+  fontAssets,
+  onImportFonts,
+  onSetText,
+  onSetTextFieldStyle,
+  autoFocus = false,
+}: {
+  field: DomEditSelection["textFields"][number];
+  styles: Record<string, string>;
+  fontAssets: ImportedFontAsset[];
+  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  onSetText: (value: string, fieldKey?: string) => void;
+  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  autoFocus?: boolean;
+}) {
+  const track = useTrackDesignInput();
+  const weight = getTextStyleValue(field, styles, "font-weight", "400");
+  const weightOptions = detectAvailableWeights(
+    field.computedStyles["font-family"] || styles["font-family"] || "",
+  );
+  const align = getTextStyleValue(field, styles, "text-align", "start");
+  const textTransform = getTextStyleValue(field, styles, "text-transform", "none");
+  const fontStyle = getTextStyleValue(field, styles, "font-style", "normal");
+
+  return (
+    <>
+      <PromotableControl channel={{ kind: "text" }} enabled={field.source === "self"}>
+        {({ value, onCommit }) => (
+          <TextAreaField
+            flat
+            label="Content"
+            value={value ?? field.value}
+            autoFocus={autoFocus}
+            onCommit={onCommit ?? ((next) => onSetText(next, field.key))}
+          />
+        )}
+      </PromotableControl>
+      <PromotableControl
+        channel={{ kind: "style", prop: "font-family" }}
+        enabled={field.source === "self"}
+      >
+        {({ value, onCommit }) => (
+          <FontFamilyField
+            flat
+            value={
+              value ?? (field.computedStyles["font-family"] || styles["font-family"] || "inherit")
+            }
+            importedFonts={fontAssets}
+            onImportFonts={onImportFonts}
+            onCommit={onCommit ?? ((next) => onSetTextFieldStyle(field.key, "font-family", next))}
+          />
+        )}
+      </PromotableControl>
+      <FlatRow
+        label="Size"
+        value={field.computedStyles["font-size"] || styles["font-size"] || "16px"}
+        tier={resolveValueTier(field.inlineStyles["font-size"], styles["font-size"] || "16px")}
+        liveCommit
+        onCommit={(next) => onSetTextFieldStyle(field.key, "font-size", next)}
+      />
+      <div className="flex min-h-[30px] items-center justify-between">
+        <span
+          className={
+            VALUE_TIER_LABEL_CLASS[resolveValueTier(field.inlineStyles["font-weight"], "400")]
+          }
+          style={{ fontSize: 11 }}
+        >
+          Weight
+        </span>
+        <label className="flex items-center gap-1.5 border-b border-panel-border-input/50 pb-px hover:border-panel-border-input">
+          <select
+            value={weight}
+            onChange={(e) => {
+              track("select", "Weight");
+              onSetTextFieldStyle(field.key, "font-weight", e.target.value);
+            }}
+            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none ${
+              VALUE_TIER_VALUE_CLASS[resolveValueTier(field.inlineStyles["font-weight"], "400")]
+            }`}
+          >
+            {(weightOptions.includes(weight) ? weightOptions : [weight, ...weightOptions]).map(
+              (option) => (
+                <option key={option} value={option}>
+                  {WEIGHT_LABELS[option] ?? option}
+                </option>
+              ),
+            )}
+          </select>
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+            className="flex-shrink-0 text-panel-text-5"
+          >
+            <path d="M2 3l3 4 3-4z" />
+          </svg>
+        </label>
+      </div>
+      <FlatRow
+        label="Letter spacing"
+        value={getTextStyleValue(field, styles, "letter-spacing", "0px")}
+        tier={resolveValueTier(field.inlineStyles["letter-spacing"], "0px")}
+        onCommit={(next) =>
+          onSetTextFieldStyle(
+            field.key,
+            "letter-spacing",
+            normalizeTextMetricValue("letter-spacing", next),
+          )
+        }
+        onReset={() => onSetTextFieldStyle(field.key, "letter-spacing", "")}
+      />
+      <FlatRow
+        label="Line height"
+        value={getTextStyleValue(field, styles, "line-height", "normal")}
+        tier={resolveValueTier(field.inlineStyles["line-height"], "normal")}
+        onCommit={(next) =>
+          onSetTextFieldStyle(
+            field.key,
+            "line-height",
+            normalizeTextMetricValue("line-height", next),
+          )
+        }
+        onReset={() => onSetTextFieldStyle(field.key, "line-height", "")}
+      />
+      <FlatSegmentedRow
+        label="Align"
+        options={ALIGN_OPTIONS.map((option) => ({
+          key: option.key,
+          node: option.node,
+          label: option.label,
+          active:
+            align === option.key ||
+            (option.key === "left" && align === "start") ||
+            (option.key === "right" && align === "end"),
+        }))}
+        onChange={(next) => {
+          // Re-clicking the option that's already visually active for a
+          // logical value (authored "start"/"end") must not rewrite it to
+          // the physical "left"/"right" — that destroys the logical
+          // semantics and is wrong for RTL content. Only write when the
+          // user actually picked a different alignment.
+          if ((next === "left" && align === "start") || (next === "right" && align === "end")) {
+            return;
+          }
+          onSetTextFieldStyle(field.key, "text-align", next);
+        }}
+      />
+      <FlatSegmentedRow
+        label="Case · Style"
+        options={[
+          ...CASE_OPTIONS.map((option) => ({
+            key: option.key,
+            node: option.node,
+            label: option.label,
+            active: textTransform === option.key,
+          })),
+          { key: "normal", node: "A", label: "upright", active: fontStyle === "normal" },
+          { key: "italic", node: "A", label: "italic", active: fontStyle === "italic" },
+        ]}
+        spacerAfterIndex={2}
+        onChange={(next) => {
+          if (next === "normal" || next === "italic") {
+            onSetTextFieldStyle(field.key, "font-style", next);
+          } else {
+            onSetTextFieldStyle(field.key, "text-transform", next);
+          }
+        }}
+      />
+      <PromotableControl
+        channel={{ kind: "style", prop: "color" }}
+        enabled={field.source === "self"}
+      >
+        {({ value, onCommit }) => (
+          <ColorField
+            flat
+            label="Color"
+            value={value ?? getTextFieldColor(field, styles)}
+            onCommit={onCommit ?? ((next) => onSetTextFieldStyle(field.key, "color", next))}
+          />
+        )}
+      </PromotableControl>
+    </>
+  );
+}
+
+export function FlatTextSection({
+  element,
+  styles,
+  fontAssets,
+  onImportFonts,
+  onSetText,
+  onSetTextFieldStyle,
+  onAddTextField,
+  onRemoveTextField,
+}: {
+  element: DomEditSelection;
+  styles: Record<string, string>;
+  fontAssets: ImportedFontAsset[];
+  onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
+  onSetText: (value: string, fieldKey?: string) => void;
+  onSetTextFieldStyle: (fieldKey: string, property: string, value: string) => void;
+  onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
+  onRemoveTextField: (fieldKey: string) => void;
+}) {
+  const track = useTrackDesignInput();
+  const [activeFieldKey, setActiveFieldKey] = useState<string | null>(
+    element.textFields[0]?.key ?? null,
+  );
+
+  useEffect(() => {
+    const nextFields = element.textFields;
+    setActiveFieldKey((current) => {
+      if (current && nextFields.some((field) => field.key === current)) return current;
+      return nextFields[0]?.key ?? null;
+    });
+  }, [element.id, element.selector, element.textFields]);
+
+  if (!isTextEditableSelection(element)) return null;
+  const textFields = element.textFields;
+  const activeField = textFields.find((field) => field.key === activeFieldKey) ?? textFields[0];
+  if (!activeField) return null;
+
+  if (textFields.length > 1) {
+    return (
+      <div className="space-y-1.5">
+        <FlatTextLayerList
+          fields={textFields}
+          activeFieldKey={activeField.key}
+          styles={styles}
+          onSelect={setActiveFieldKey}
+          onAdd={() =>
+            void Promise.resolve(onAddTextField(activeField.key)).then((nextKey) => {
+              if (nextKey) setActiveFieldKey(nextKey);
+            })
+          }
+          onRemove={onRemoveTextField}
+        />
+        <FlatTextFieldEditor
+          key={activeField.key}
+          field={activeField}
+          styles={styles}
+          fontAssets={fontAssets}
+          onImportFonts={onImportFonts}
+          onSetText={onSetText}
+          onSetTextFieldStyle={onSetTextFieldStyle}
+          autoFocus
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1.5">
+      <FlatTextFieldEditor
+        field={activeField}
+        styles={styles}
+        fontAssets={fontAssets}
+        onImportFonts={onImportFonts}
+        onSetText={onSetText}
+        onSetTextFieldStyle={onSetTextFieldStyle}
+      />
+      <button
+        type="button"
+        onClick={() => {
+          track("button", "Add text field");
+          void onAddTextField(activeField.key);
+        }}
+        className="mt-0.5 flex items-center gap-[5px] text-[10px] text-panel-text-4 hover:text-panel-text-2"
+      >
+        <Plus size={10} />
+        Add text field
+      </button>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Multi-field layer list (design_handoff_studio_inspector, #10a —     */
+/*  no mock exists for this row; layout originated by this plan,        */
+/*  following the "left-rule nested content" convention established     */
+/*  by Text's own content block, Motion's effect cards, and Media's     */
+/*  cutout block. Flag for design review.)                              */
+/* ------------------------------------------------------------------ */
+
+export function FlatTextLayerList({
+  fields,
+  activeFieldKey,
+  styles,
+  onSelect,
+  onAdd,
+  onRemove,
+}: {
+  fields: DomEditSelection["textFields"];
+  activeFieldKey: string;
+  styles: Record<string, string>;
+  onSelect: (fieldKey: string) => void;
+  onAdd: () => void;
+  onRemove: (fieldKey: string) => void;
+}) {
+  const track = useTrackDesignInput();
+  return (
+    <div className="mb-2 border-l-2 border-panel-border-input py-0.5 pl-[10px]">
+      <div className="mb-1.5 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+        Text layers
+      </div>
+      <div className="space-y-1">
+        {fields.map((field, index) => {
+          const active = field.key === activeFieldKey;
+          return (
+            <div
+              key={field.key}
+              data-flat-text-layer-row="true"
+              data-active={active}
+              onClick={() => onSelect(field.key)}
+              className={`flex min-h-[26px] cursor-pointer items-center gap-2 rounded px-1 ${
+                active ? "bg-panel-accent/10" : "hover:bg-panel-hover"
+              }`}
+            >
+              <span
+                className="h-3 w-3 flex-shrink-0 rounded-sm"
+                style={{ backgroundColor: getTextFieldColor(field, styles) }}
+              />
+              <span className="min-w-0 flex-1 truncate text-[11px] text-panel-text-1">
+                {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
+              </span>
+              <span className="flex-shrink-0 font-mono text-[9px] text-panel-text-4">
+                {field.tagName}
+              </span>
+              {fields.length > 1 && (
+                <button
+                  type="button"
+                  data-flat-text-layer-remove="true"
+                  aria-label="Remove text field"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    track("button", "Remove text field");
+                    onRemove(field.key);
+                  }}
+                  className="flex-shrink-0 text-panel-text-4 hover:text-panel-text-1"
+                >
+                  <X size={10} />
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <button
+        type="button"
+        data-flat-text-layer-add="true"
+        onClick={() => {
+          track("button", "Add text field");
+          onAdd();
+        }}
+        className="mt-1 flex items-center gap-[5px] text-[10px] text-panel-text-4 hover:text-panel-text-2"
+      >
+        <Plus size={10} />
+        Add text field
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest";
+import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation";
+import type { DomEditSelection } from "./domEditingTypes";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+
+function withDataAttributes(
+  dataAttributes: Record<string, string>,
+): Pick<DomEditSelection, "dataAttributes"> {
+  return { dataAttributes };
+}
+
+describe("deriveElementTiming", () => {
+  it("uses the explicit data-start/data-duration attributes when duration is authored", () => {
+    const result = deriveElementTiming(withDataAttributes({ start: "8", duration: "4" }));
+    expect(result).toEqual({ start: 8, duration: 4, inferred: false });
+  });
+
+  it("infers start/duration from animations when there is no explicit data-duration", () => {
+    const animations = [{ position: 2, duration: 3 } as unknown as GsapAnimation];
+    const result = deriveElementTiming(
+      withDataAttributes({ start: "0", duration: "0" }),
+      animations,
+    );
+    expect(result).toEqual({ start: 2, duration: 3, inferred: true });
+  });
+
+  it("spans the earliest tween start to the latest tween end across multiple animations", () => {
+    const animations = [
+      { position: 1, duration: 2 } as unknown as GsapAnimation, // 1 -> 3
+      { position: 2, duration: 4 } as unknown as GsapAnimation, // 2 -> 6
+    ];
+    const result = deriveElementTiming(withDataAttributes({}), animations);
+    expect(result).toEqual({ start: 1, duration: 5, inferred: true });
+  });
+
+  it("prefers an explicit data-duration over inference even when animations exist", () => {
+    const animations = [{ position: 2, duration: 3 } as unknown as GsapAnimation];
+    const result = deriveElementTiming(
+      withDataAttributes({ start: "0", duration: "10" }),
+      animations,
+    );
+    expect(result).toEqual({ start: 0, duration: 10, inferred: false });
+  });
+
+  it("falls back to hf-authored-duration when data-duration is absent", () => {
+    const result = deriveElementTiming(
+      withDataAttributes({ start: "1", "hf-authored-duration": "6" }),
+    );
+    expect(result).toEqual({ start: 1, duration: 6, inferred: false });
+  });
+
+  it("returns a zero-duration, non-inferred result with no attributes and no animations", () => {
+    const result = deriveElementTiming(withDataAttributes({}));
+    expect(result).toEqual({ start: 0, duration: 0, inferred: false });
+  });
+
+  // This is the exact bug from the whole-plan coherence review: Layout's
+  // keyframe-seek basis must land on the same absolute time that Motion's
+  // Timing row displays as the element's midpoint.
+  it("agrees with a keyframe-percentage seek: 50% lands on the same midpoint the Timing row would show", () => {
+    const animations = [{ position: 2, duration: 3 } as unknown as GsapAnimation];
+    const timing = deriveElementTiming(
+      withDataAttributes({ start: "0", duration: "0" }),
+      animations,
+    );
+    const seekTimeAt50Pct = timing.start + (50 / 100) * timing.duration;
+    const timingRowMidpoint = timing.start + timing.duration / 2;
+    expect(seekTimeAt50Pct).toBe(timingRowMidpoint);
+    expect(seekTimeAt50Pct).toBe(3.5);
+  });
+});

package/src/components/editor/propertyPanelFlatTimingDerivation.ts

@@ -0,0 +1,59 @@
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "./domEditingTypes";
+
+/**
+ * The single source of truth for an element's clip start/duration in the flat
+ * inspector. Both the Motion group's Timing row (`FlatTimingRow`) and the
+ * Layout group's keyframe gutter (fed via `elStart`/`elDuration` from
+ * `PropertyPanel.tsx` through `PropertyPanelFlat.tsx`) must derive this the
+ * same way — otherwise a keyframe-percentage seek in Layout lands on a
+ * different absolute time than the range Motion displays for the same
+ * element (found by the Plan 3a+3b whole-plan coherence review).
+ *
+ * Precedence: an explicit `data-duration` (or `data-hf-authored-duration`)
+ * wins outright. Only when neither is present do we infer the range from the
+ * element's own GSAP tweens (earliest tween start → latest tween end).
+ *
+ * Scoped to the FLAT inspector only — the legacy (non-flat) panel keeps its
+ * own, unrelated `elStart`/`elDuration ?? 1` computation in `PropertyPanel.tsx`
+ * untouched.
+ */
+export interface ElementTiming {
+  start: number;
+  duration: number;
+  /** True when duration/start came from `deriveTimingFromAnimations`, not an authored attribute. */
+  inferred: boolean;
+}
+
+function deriveTimingFromAnimations(
+  animations: GsapAnimation[],
+): { start: number; duration: number } | null {
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const a of animations) {
+    const s = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
+    const d = a.duration ?? 0;
+    lo = Math.min(lo, s);
+    hi = Math.max(hi, s + d);
+  }
+  if (!Number.isFinite(lo) || !Number.isFinite(hi) || hi <= lo) return null;
+  return { start: lo, duration: hi - lo };
+}
+
+export function deriveElementTiming(
+  element: Pick<DomEditSelection, "dataAttributes">,
+  animations: GsapAnimation[] = [],
+): ElementTiming {
+  const explicitStart = Number.parseFloat(element.dataAttributes.start ?? "0") || 0;
+  const explicitDuration =
+    Number.parseFloat(
+      element.dataAttributes.duration ?? element.dataAttributes["hf-authored-duration"] ?? "0",
+    ) || 0;
+
+  const derived = explicitDuration > 0 ? null : deriveTimingFromAnimations(animations);
+  return {
+    start: derived ? derived.start : explicitStart,
+    duration: derived ? derived.duration : explicitDuration,
+    inferred: derived !== null,
+  };
+}

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

@@ -0,0 +1,63 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FlatToggle } from "./propertyPanelFlatToggle";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderInto(node: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(node);
+  });
+  return { host, root };
+}
+
+describe("FlatToggle", () => {
+  it("renders the off state with a dim label and dim knob, and fires onChange(true) on click", () => {
+    const onChange = vi.fn();
+    const { host, root } = renderInto(
+      <FlatToggle label="Loop" checked={false} onChange={onChange} />,
+    );
+    const label = host.querySelector('[data-flat-toggle-label="true"]');
+    expect(label?.className).toContain("text-panel-text-3");
+    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
+    expect(pill).not.toBeNull();
+    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onChange).toHaveBeenCalledWith(true);
+    act(() => root.unmount());
+  });
+
+  it("renders the on state with an emphasized label and mint knob, and fires onChange(false) on click", () => {
+    const onChange = vi.fn();
+    const { host, root } = renderInto(<FlatToggle label="Loop" checked onChange={onChange} />);
+    const label = host.querySelector('[data-flat-toggle-label="true"]');
+    expect(label?.className).toContain("text-panel-text-2");
+    const knob = host.querySelector('[data-flat-toggle-knob="true"]');
+    expect(knob?.className).toContain("bg-panel-accent");
+    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
+    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onChange).toHaveBeenCalledWith(false);
+    act(() => root.unmount());
+  });
+
+  it("does not fire onChange when disabled", () => {
+    const onChange = vi.fn();
+    const { host, root } = renderInto(
+      <FlatToggle label="Loop" checked={false} disabled onChange={onChange} />,
+    );
+    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
+    expect(pill?.disabled).toBe(true);
+    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onChange).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+});

package/src/components/editor/propertyPanelFlatToggle.tsx

@@ -0,0 +1,53 @@
+/* ------------------------------------------------------------------ */
+/*  FlatToggle — 24×14 pill switch                                     */
+/*  (split out of propertyPanelFlatPrimitives.tsx to stay under the    */
+/*  600-line file-size gate)                                           */
+/* ------------------------------------------------------------------ */
+
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+
+export function FlatToggle({
+  label,
+  checked,
+  disabled,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (next: boolean) => void;
+}) {
+  const track = useTrackDesignInput();
+  return (
+    <div className="flex min-h-[30px] items-center justify-between">
+      <span
+        data-flat-toggle-label="true"
+        className={`text-[11px] ${checked ? "text-panel-text-2" : "text-panel-text-3"}`}
+      >
+        {label}
+      </span>
+      <button
+        type="button"
+        data-flat-toggle="true"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
+        disabled={disabled}
+        onClick={() => {
+          track("toggle", label);
+          onChange(!checked);
+        }}
+        className={`relative h-[14px] w-6 flex-shrink-0 rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+          checked ? "bg-panel-accent/35" : "bg-panel-hover"
+        }`}
+      >
+        <span
+          data-flat-toggle-knob="true"
+          className={`absolute top-0.5 h-2.5 w-2.5 rounded-full transition-all ${
+            checked ? "right-0.5 bg-panel-accent" : "left-0.5 bg-panel-text-4"
+          }`}
+        />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,30 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FontFamilyField } from "./propertyPanelFont";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("FontFamilyField flat trigger", () => {
+  it("renders as a label/value row with a trailing dropdown caret, no boxed border", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <FontFamilyField flat value="JetBrains Mono" importedFonts={[]} onCommit={vi.fn()} />,
+      );
+    });
+    const trigger = host.querySelector<HTMLButtonElement>('[data-flat-font-trigger="true"]');
+    expect(trigger).not.toBeNull();
+    expect(trigger?.className).not.toContain("border-neutral-800");
+    expect(host.textContent).toContain("JetBrains Mono");
+    act(() => root.unmount());
+  });
+});