feat(studio): add flat trigger variants for ColorField, FontFamilyField, TextAreaField

.fallowrc.jsonc

@@ -331,6 +331,12 @@
       "file": "packages/studio/src/components/editor/manualEditingAvailability.ts",
       "exports": ["STUDIO_FLAT_INSPECTOR_ENABLED"],
     },
+    // TextAreaField: newly exported for FlatTextSection (flat inspector
+    // redesign, Task 8), which lands in a later commit on this branch.
+    {
+      "file": "packages/studio/src/components/editor/propertyPanelSections.tsx",
+      "exports": ["TextAreaField"],
+    },
   ],
   "ignoreDependencies": [
     // Runtime/dynamic deps not visible to static analysis: tsup `external`,

packages/studio/src/components/editor/propertyPanelColor.test.tsx

@@ -0,0 +1,28 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ColorField } from "./propertyPanelColor";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("ColorField flat trigger", () => {
+  it("renders label and value inline with a small swatch, no boxed border", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(<ColorField flat label="Color" value="rgb(255, 176, 32)" onCommit={vi.fn()} />);
+    });
+    const trigger = host.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
+    expect(trigger).not.toBeNull();
+    expect(trigger?.className).not.toContain("border-neutral-800");
+    expect(host.textContent).toContain("Color");
+    act(() => root.unmount());
+  });
+});

packages/studio/src/components/editor/propertyPanelColor.tsx

@@ -121,11 +121,13 @@ export function ColorField({
   label,
   value,
   disabled,
+  flat,
   onCommit,
 }: {
   label: string;
   value: string;
   disabled?: boolean;
+  flat?: boolean;
   onCommit: (nextValue: string) => void;
 }) {
   const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -349,6 +351,30 @@ export function ColorField({
     }
   };
 
+  if (flat) {
+    return (
+      <div className="flex min-h-[30px] items-center justify-between">
+        <span className="text-[11px] text-panel-text-2">{label}</span>
+        <button
+          type="button"
+          data-flat-color-trigger="true"
+          disabled={disabled}
+          aria-label={`Pick ${label.toLowerCase()} color`}
+          ref={buttonRef}
+          onClick={openPicker}
+          className="flex items-center gap-2 disabled:cursor-not-allowed"
+        >
+          <span
+            className="h-4 w-4 flex-shrink-0 rounded-[4px]"
+            style={{ backgroundColor: value || "transparent" }}
+          />
+          <span className="font-mono text-[11px] text-panel-text-0">{value}</span>
+        </button>
+        {picker}
+      </div>
+    );
+  }
+
   return (
     <div className="grid min-w-0 gap-1.5">
       <span className={LABEL}>{label}</span>

packages/studio/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());
+  });
+});

packages/studio/src/components/editor/propertyPanelFont.tsx

@@ -123,12 +123,14 @@ function loadImportedFontStylesheet(asset: ImportedFontAsset): void {
 export function FontFamilyField({
   value,
   disabled,
+  flat,
   importedFonts,
   onImportFonts,
   onCommit,
 }: {
   value: string;
   disabled?: boolean;
+  flat?: boolean;
   importedFonts: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;
   onCommit: (nextValue: string) => void;
@@ -366,27 +368,7 @@ export function FontFamilyField({
     setOpen(false);
   };
 
-  return (
+  const dropdown = open && (
-    <div ref={containerRef} className="relative grid min-w-0 gap-1.5">
-      <span className={LABEL}>Font family</span>
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => setOpen((next) => !next)}
-        className={`${FIELD} flex h-10 items-center justify-between gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed`}
-      >
-        <span
-          className="min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100"
-          style={{ fontFamily: value }}
-        >
-          {currentFamily}
-        </span>
-        <span className="flex-shrink-0 text-[10px] uppercase tracking-[0.14em] text-neutral-600">
-          Font
-        </span>
-      </button>
-
-      {open && (
     <div className="absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-xl border border-neutral-700 bg-neutral-950 shadow-2xl">
       <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-2 border-b border-neutral-800 p-2">
         <input
@@ -476,7 +458,60 @@ export function FontFamilyField({
         )}
       </div>
     </div>
-      )}
+  );
+
+  if (flat) {
+    return (
+      <div ref={containerRef} className="relative flex min-h-[30px] items-center justify-between">
+        <span className="text-[11px] text-panel-text-2">Font</span>
+        <button
+          type="button"
+          data-flat-font-trigger="true"
+          disabled={disabled}
+          onClick={() => setOpen((next) => !next)}
+          className="flex items-center gap-1.5 disabled:cursor-not-allowed"
+        >
+          <span
+            className="max-w-[200px] truncate font-mono text-[11px] text-panel-text-0"
+            style={{ fontFamily: value }}
+          >
+            {currentFamily}
+          </span>
+          <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>
+        </button>
+        {dropdown}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className="relative grid min-w-0 gap-1.5">
+      <span className={LABEL}>Font family</span>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setOpen((next) => !next)}
+        className={`${FIELD} flex h-10 items-center justify-between gap-3 text-left hover:border-neutral-700 disabled:cursor-not-allowed`}
+      >
+        <span
+          className="min-w-0 flex-1 truncate text-[11px] font-medium text-neutral-100"
+          style={{ fontFamily: value }}
+        >
+          {currentFamily}
+        </span>
+        <span className="flex-shrink-0 text-[10px] uppercase tracking-[0.14em] text-neutral-600">
+          Font
+        </span>
+      </button>
+      {dropdown}
     </div>
   );
 }

packages/studio/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";
@@ -59,17 +59,19 @@ 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 [draft, setDraft] = useState(value);
@@ -105,6 +107,38 @@ function TextAreaField({
     }, 120);
   };
 
+  const handleFocus = () => {
+    focusedRef.current = true;
+  };
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setDraft(e.target.value);
+    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 +148,9 @@ function TextAreaField({
           value={draft}
           disabled={disabled}
           rows={4}
-          onFocus={() => {
+          onFocus={handleFocus}
-            focusedRef.current = true;
+          onChange={handleChange}
-          }}
+          onBlur={handleBlur}
-          onChange={(e) => {
-            setDraft(e.target.value);
-            scheduleCommit(e.target.value);
-          }}
-          onBlur={() => {
-            focusedRef.current = false;
-            commitDraft(draft);
-          }}
           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>