@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/design/DeviceSection.tsx

@@ -0,0 +1,210 @@
+// Only for DEVICE layers, and absent otherwise — the same rule MeshSection and
+// ClonerSection follow, for the same reason.
+//
+// ── WHY THIS EXISTS AT ALL ──────────────────────────────────────────────
+//
+// A device could be ADDED (the Add menu picks a preset) and then never touched:
+// its preset, its body colour, its thickness and which child sits on the glass
+// were all reachable from the agent lane and from nowhere in the chrome. That
+// is the exact defect MeshSection's material rows were written to close — "the
+// author could see it and could not touch it" — and schema v12 made it louder,
+// because `device.color` is a KEYFRAMABLE path with no row to hang its diamond
+// on. A trackable property the inspector cannot show is a property the author
+// can only animate by asking an agent to do it.
+//
+// ── THE READOUTS SHOW THE DERIVED VALUE, NOT THE STORED ONE ─────────────
+//
+// `color` and `depthPx` are both OVERRIDES: absent means "the preset's own",
+// which is a real number the stage is drawing and a blank field would hide. So
+// both rows read `deviceSlab`, the same pure function the runtime uses, and an
+// untouched device shows the colour and thickness it actually has. Nothing is
+// stored until a row is edited — baking the preset's value in on mount would
+// freeze it against a later preset change. Mixed is asked of the SAME derived
+// value, per device: two phones of different widths store no depth and still
+// disagree on the one they draw.
+//
+// ponytail: no notch/camera/home-button rows. Those are DECORATIONS and the
+// device header says so: they go in as child layers, and the moment one lives
+// in the preset table the table stops being data.
+import {
+  ColorField,
+  Combobox,
+  InspectorRow,
+  InspectorSection,
+  NumberField,
+} from "@dailies-studio/ui";
+import { DEVICE_PRESETS, DEVICE_PRESET_IDS, deviceSlab, homeOf } from "@dailies-studio/shot/doc";
+import type { DeviceLayer3D, Layer3D } from "@dailies-studio/shot/doc";
+import { KeyframeDot } from "../KeyframeDot.js";
+import { useShotEditor } from "../../../state/context.js";
+import {
+  useInspectorFrame,
+  useSelectedLayers,
+  useSelectionScrub,
+  useSelectionWrite,
+} from "../useDocWrite.js";
+
+type DeviceBlock = DeviceLayer3D["device"];
+
+/** The Screen combobox's "no child on the glass" entry. The empty string is the
+ *  one value a layer id can never be, so it needs no second channel. */
+const NO_SCREEN = "";
+
+export function DeviceSection() {
+  const write = useSelectionWrite();
+  const layers = useSelectedLayers();
+  const doc = useShotEditor((s) => s.doc);
+  const { sceneId } = useInspectorFrame();
+  // THE DRAG HALF of the depth, over the same builder its typed value takes.
+  const depthScrub = useSelectionScrub((layer, raw) => withDepth(layer, Number(raw)));
+  // THE DEVICE LAYERS THEMSELVES, for MeshSection's reason: `layer.device` is an
+  // object, so `useSelectionValue` would report every multi-selection as Mixed
+  // by identity over values the author can see agree. Mixed is asked per FIELD.
+  const devices = layers.filter((l): l is DeviceLayer3D => l.kind === "device");
+  const first = devices[0];
+  if (first === undefined) return null;
+
+  const d = first.device;
+  const preset = DEVICE_PRESETS[d.preset];
+  const slab = deviceSlab(d, first.transform.size);
+  /** One device's derived value for a row, read off `deviceSlab` as the row
+   *  shows it, so Mixed is asked of what the fields display. */
+  const shownOn = <T,>(read: (device: DeviceLayer3D) => T): boolean =>
+    devices.some((l) => !Object.is(read(l), read(first)));
+  const depthOf = (l: DeviceLayer3D): number => deviceSlab(l.device, l.transform.size)?.depthPx ?? l.device.depthPx ?? 0;
+  const colorOf = (l: DeviceLayer3D): string =>
+    (deviceSlab(l.device, l.transform.size)?.color ?? l.device.color ?? DEVICE_PRESETS[l.device.preset]?.color ?? BODY_FALLBACK).toLowerCase();
+
+  const patch = (next: (block: DeviceBlock) => DeviceBlock): void =>
+    write((layer) => (layer.kind === "device" ? ({ ...layer, device: next(layer.device) } as Layer3D) : layer));
+
+  const set = <K extends keyof DeviceBlock>(key: K, value: DeviceBlock[K]): void =>
+    patch((block) => ({ ...block, [key]: value }));
+
+  const mixedOn = <T,>(read: (block: DeviceBlock) => T): boolean =>
+    devices.some((l) => !Object.is(read(l.device), read(d)));
+
+  // The child layers this ONE device holds, by label. Resolved through the
+  // container so it is right inside a definition too.
+  const home = doc === null || sceneId === null ? null : homeOf(doc, sceneId);
+  const children = d.children
+    .map((id) => ({ value: id, label: home?.layersById[id]?.label ?? id }))
+    .filter((row) => home === null || home.layersById[row.value] !== undefined);
+
+  return (
+    <InspectorSection className="insp-object" title="Device" persistKey="shot:device">
+      <InspectorRow label="Preset">
+        <Combobox
+          options={DEVICE_PRESET_IDS.map((id) => ({
+            value: id,
+            label: id.charAt(0).toUpperCase() + id.slice(1),
+          }))}
+          // A selection of two presets shows neither: an empty value is how
+          // the combobox says Mixed, over its placeholder.
+          value={mixedOn((block) => block.preset) ? "" : d.preset}
+          ariaLabel="Device preset"
+          placeholder="Mixed"
+          onChange={(next) => set("preset", next)}
+        />
+      </InspectorRow>
+
+      <BodyColorRow value={slab?.color ?? d.color ?? preset?.color ?? BODY_FALLBACK} mixed={shownOn(colorOf)} />
+
+      <InspectorRow>
+        <NumberField
+          // The EFFECTIVE thickness: absent means the preset's ratio times the
+          // width, and showing that number is what makes the default legible.
+          value={slab?.depthPx ?? d.depthPx ?? 0}
+          mixed={shownOn(depthOf)}
+          label="Depth"
+          ariaLabel="Device depth"
+          unit="px"
+          min={1}
+          step={1}
+          onCommit={(next) => write((layer) => withDepth(layer, next))}
+          onScrubStart={depthScrub.start}
+          onScrub={depthScrub.move}
+          onScrubEnd={depthScrub.end}
+        />
+      </InspectorRow>
+
+      {/* ONE DEVICE AT A TIME, and this is a correctness gate rather than a
+          courtesy: `screen` must name one of THIS device's own children, so a
+          fan-out would write an id the other device has never held and
+          `validateShotDoc` refuses the save. */}
+      {devices.length > 1 ? (
+        <div className="insp-notice">Select one device on its own to choose its screen.</div>
+      ) : (
+        <InspectorRow label="Screen" labelTitle="Which child layer renders on the glass">
+          <Combobox
+            options={[{ value: NO_SCREEN, label: "None" }, ...children]}
+            value={d.screen ?? NO_SCREEN}
+            ariaLabel="Device screen child"
+            placeholder="Search children"
+            onChange={(next) =>
+              patch((block) => {
+                if (next !== NO_SCREEN) return { ...block, screen: next };
+                // Absent, not `null` and not `""`: codegen prints the block by
+                // key order, and a present-but-undefined key is a key. The
+                // schema accepts null, so this is a house-style choice and not
+                // a gate — MeshSection's `clip` row clears the same way.
+                const { screen: _drop, ...rest } = block;
+                return rest;
+              })
+            }
+          />
+        </InspectorRow>
+      )}
+    </InspectorSection>
+  );
+}
+
+/** A body colour no preset names, the slab's own last resort. */
+const BODY_FALLBACK = "#1d1d1f";
+
+/** One device's depth override, the one builder its typed value and its drag
+ *  both run. */
+function withDepth(layer: Layer3D, next: number): Layer3D {
+  return layer.kind === "device" ? ({ ...layer, device: { ...layer.device, depthPx: Math.round(next) } } as Layer3D) : layer;
+}
+
+/**
+ * The body colour. Its own component for `ShapeColorRow`'s reason: `ColorPicker`
+ * routes its whole drag through `scrub.move`, so a row without the document
+ * bracket is a thumb that moves over a document that never changes. OPAQUE,
+ * for `writeBodyColor`'s reason below: the picker offers no alpha the row
+ * would refuse.
+ */
+function BodyColorRow({ value, mixed }: { value: string; mixed: boolean }) {
+  const write = useSelectionWrite();
+  const scrub = useSelectionScrub((layer, raw) => writeBodyColor(layer, raw));
+  return (
+    <InspectorRow label="Colour" trailing={<KeyframeDot path="device.color" />}>
+      <ColorField
+        value={value}
+        mixed={mixed}
+        opaque
+        ariaLabel="Body colour"
+        scrub={scrub}
+        commit={(hex) => write((layer) => writeBodyColor(layer, hex))}
+      />
+    </InspectorRow>
+  );
+}
+
+/**
+ * PURE, over the layer it is handed — `writeShapeColor`'s rule and its exact
+ * regex.
+ *
+ * SIX DIGITS, though `validateShotDoc` would take any CSS colour here. The
+ * narrower set is the KEYFRAME's: `device.color` is declared `opaqueHex` in the
+ * path table, so an 8-digit value typed into an ANIMATED device would be refused
+ * by the track gate at the moment it stopped being a constant. A control that
+ * accepts a value the same control refuses once a diamond is pressed is worse
+ * than one that never offered it.
+ */
+function writeBodyColor(layer: Layer3D, raw: unknown): Layer3D {
+  if (layer.kind !== "device") return layer;
+  if (typeof raw !== "string" || !/^#[0-9a-fA-F]{6}$/.test(raw)) return layer;
+  return { ...layer, device: { ...layer.device, color: raw.toLowerCase() } };
+}

package/src/panels/inspector/design/FillSection.tsx

@@ -1,86 +1,118 @@
-// The fill. Solid only in the inspector for now: a gradient needs the stop
-// editor, which @dailies-studio/ui has (`GradientValueEditor`) and which wants
-// the gradient adapter the 2D lane wrote — that is a section of its own rather
-// than a control squeezed in here.
+// The fill, as the whole `Paint` union: solid, linear gradient or radial.
 //
-// PAINT HAS NO BLOCK DELTAS in v1, so a paint read and a paint write are both
-// BASE and cannot disagree. That is why nothing here goes through
-// `setEffectiveField`.
-import { ColorPicker, InspectorRow, InspectorSection } from "@dailies-studio/ui";
+// It was solid-only until the shots.so pass, and not merely incomplete —
+// DESTRUCTIVE. `withSolidFill` was the only writer, so a gradient fill authored
+// by MCP survived being displayed (the swatch showed its first stop) and died on
+// the first commit, and on the `+`/`−` action too. `paintStyle` (raster.ts) has
+// drawn both gradients on a layer since unify Phase 1; only the authoring
+// surface was missing. `PaintRows` is that surface, shared with the scene
+// background's row, which had the identical hole.
+//
+// Nothing here goes through `setEffectiveField`, which is transform only. An
+// edit is a `PaintEdit` run on EACH layer's own fill as painted (its
+// `paint.fill.color` track sampled), so a multi-selection changes one field
+// per layer and never copies the lead's whole paint onto the rest.
+import { IconMinus, IconPlus, InspectorSection, useLocked } from "@dailies-studio/ui";
+import { KeyframeDot } from "../KeyframeDot.js";
+import { PaintRows, type PaintEdit } from "./PaintRows.js";
 import type { Layer3D, Paint } from "@dailies-studio/shot/doc";
-import { NO_SCRUB, useSelectedLayers, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+import { useSelectedLayers, useSelectionScrub, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
+// The white the DRAW TOOLS open a fill on. Read rather than restated: "+ Fill"
+// here and a dragged rectangle are two doors into the same first paint, and two
+// whites would be a difference nobody chose.
+import { DEFAULT_PAINT_COLOR } from "../../../state/insert.js";
 
-const DEFAULT_FILL = "#ffffff";
+const DEFAULT_PAINT: Paint = { type: "solid", color: DEFAULT_PAINT_COLOR };
 
 export function FillSection() {
   const write = useSelectionWrite();
   const layers = useSelectedLayers();
-  const fill = useSelectionValue((layer) => solidOf(layer.paint.fill));
+  // The add/remove action is a plain button, so it reads a viewer's lock here.
+  const locked = useLocked();
   const present = useSelectionValue((layer) => layer.paint.fill !== undefined);
-
-  // A FILL IS INERT ON MEDIA, so the control is absent rather than dead.
-  // `drawLayer` paints `paint.fill` only in the arm that is neither "mask" nor
-  // "plate" (raster.ts), and `MediaPlane` asks for exactly those two — the
-  // content pixels come from the asset. A colour swatch that writes a document
-  // field and moves nothing is worse than no swatch: the author changes it,
-  // sees nothing, and concludes the renderer is broken.
-  //
-  // ONLY when the whole selection is media. A mixed one keeps the section,
-  // because the rects in it still fill and `useSelectionWrite` already skips
-  // the layers a write cannot reach.
+  const first = layers.find((layer) => layer.paint.fill !== undefined);
+  const fill = first?.paint.fill ?? DEFAULT_PAINT;
+  // THE DRAG HALF. The picker's SV square, hue bar and alpha bar never call
+  // `commit` while the pointer is down: every one of them reports through
+  // `scrub.move` (ui/ColorPicker.tsx). With the commit half alone the thumb
+  // moved and the document did not, so the only working colour controls were
+  // the hex and R/G/B fields.
   //
-  // Deliberately NOT extended to mesh/instance/cloner, whose fills are inert
-  // for a different reason (they mount their own content and are refused by
-  // `rasterizesLayer` upstream of this) — one gate per reason.
-  if (layers.length > 0 && layers.every(isMedia)) return null;
+  // It carries a whole PAINT now, so a stop drag and an angle drag ride the same
+  // capture the colour bar always did.
+  const painted = new Map(layers.map((layer) => [layer.id, layer.paint.fill]));
+  const edited = (layer: Layer3D, edit: PaintEdit): Layer3D => {
+    const own = painted.get(layer.id) ?? layer.paint.fill;
+    return own === undefined ? layer : withFill(layer, edit(own));
+  };
+  const scrub = useSelectionScrub((layer, raw) => edited(layer, raw as PaintEdit));
+  // Over text a fill is the plate behind the words; the glyph colour is
+  // `TextFillSection`'s "Fill" (F20).
+  const title = layers.every((layer) => layer.kind === "text") ? "Background" : "Fill";
 
+  // NO KIND GATE. Which selections get a Fill at all — the nine kinds Canvas2D
+  // draws, minus media, whose content pixels come from its asset — is declared
+  // once in `layout.ts` and answered before this section is mounted.
   return (
     <InspectorSection
-      title="Fill"
+      className="insp-object"
+      title={title}
       persistKey="shot:fill"
       action={
         <button
           type="button"
-          className="section-action"
-          title={present.value === true ? "Remove fill" : "Add fill"}
+          className="btn is-icon insp-section-action"
+          title={`${present.value === true ? "Remove" : "Add"} ${title.toLowerCase()}`}
+          aria-label={`${present.value === true ? "Remove" : "Add"} ${title.toLowerCase()}`}
+          disabled={locked}
           onClick={() =>
             write((layer) =>
               present.value === true
                 ? { ...layer, paint: withoutFill(layer.paint) }
-                : { ...layer, paint: { ...layer.paint, fill: { type: "solid", color: DEFAULT_FILL } } },
+                : layer.paint.fill === undefined ? withFill(layer, DEFAULT_PAINT) : layer,
             )
           }
         >
-          {present.value === true ? "−" : "+"}
+          {present.value === true ? <IconMinus /> : <IconPlus />}
         </button>
       }
     >
       {present.value === true ? (
-        <InspectorRow label="Color">
-          <ColorPicker
-            value={fill.value ?? DEFAULT_FILL}
-            ariaLabel="Fill colour"
-            scrub={NO_SCRUB}
-            commit={(hex) =>
-              write((layer) => ({ ...layer, paint: { ...layer.paint, fill: { type: "solid", color: hex } } }))
-            }
-          />
-        </InspectorRow>
+        <PaintRows
+          // NO `key`. Keying this on the paint would remount the whole control
+          // on every scrub tick, which unmounts the ColorPicker mid-drag and
+          // drops its pointer capture: the thumb moves and the document does
+          // not, which is the exact defect this section was written to fix.
+          // Nothing here needs a remount anyway, because the stop rows are
+          // derived from `value.stops` on every render.
+          value={fill}
+          all={layers.flatMap((layer) => (layer.paint.fill === undefined ? [] : [layer.paint.fill]))}
+          ariaPrefix="Fill"
+          // The heading says Fill; the design draws the type row as a bare
+          // chip track. A layer fill has a picture behind it, so its alpha
+          // gets the Opacity row a scene's ground does not.
+          label={null}
+          showOpacity
+          // `paint.fill.color` is a colour track and the table refuses it over a
+          // gradient, which has no single colour to interpolate. The Opacity
+          // box is the same track's alpha byte: its diamond, and no second pin.
+          solidTrailing={<KeyframeDot path="paint.fill.color" />}
+          opacityTrailing={<KeyframeDot path="paint.fill.color" pin={false} />}
+          onScrubStart={scrub.start}
+          onScrub={(edit) => scrub.move(edit)}
+          onScrubEnd={scrub.end}
+          onCommit={(edit) => write((layer) => edited(layer, edit))}
+        />
       ) : null}
     </InspectorSection>
   );
 }
 
-/** A gradient has no single colour, so the swatch shows its FIRST stop and the
- *  picker would overwrite it — which is why the row is only offered for a solid
- *  and a gradient keeps whatever the document holds. */
-function solidOf(paint: Paint | undefined): string {
-  if (paint === undefined) return DEFAULT_FILL;
-  return paint.type === "solid" ? paint.color : (paint.stops[0]?.color ?? DEFAULT_FILL);
-}
-
-function isMedia(layer: Layer3D): boolean {
-  return layer.kind === "image" || layer.kind === "video";
+/** The ONE fill edit, so a drag's move and its release land the same document.
+ *  Two spellings of this would mean the commit could disagree with the last
+ *  captured move, and the release would appear to undo the drag. */
+function withFill(layer: Layer3D, paint: Paint): Layer3D {
+  return { ...layer, paint: { ...layer.paint, fill: paint } };
 }
 
 function withoutFill(paint: { fill?: Paint }): typeof paint {

package/src/panels/inspector/design/FontField.tsx

@@ -0,0 +1,196 @@
+// THE FONT ROW'S TRIGGER (plans/FONT-PICKER-PLAN.md "The picker"): one field
+// box showing the family drawn in its own face ("Mixed" when the selected text
+// names different families), the one caret, and the font write in flight.
+//
+// A press, Enter, Space or ArrowDown opens the picker (panels/fonts, a lazy
+// chunk mounted only while open; its chunk and the Google catalog preload as
+// the pointer or focus reaches the field). A request from elsewhere (the
+// Typography note's "Upload font file", `requestFontPicker`) opens it on the
+// asked view. A locked panel reads the family and opens nothing: a pick writes
+// the Project.
+//
+// While a font write runs (`state.fontApply`, which outlives the picker) the
+// box shows its progress in the accessory lane, a level in `--meter-lit` with
+// its percent, or a turning arc while the size is unknown (a dashed ring
+// under reduced motion, never a still arc that reads as a level); a failure
+// shows Retry there instead. Neither changes the row's size.
+//
+// The face the name draws in is the In this Project row's (faceCache.ts):
+// the Project's own file, or the computer's for a machine font, so
+// selecting text fetches nothing from jsDelivr.
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import type { KeyboardEvent } from "react";
+import { drawsMachineFont } from "@dailies-studio/shot/doc";
+import { IconChevronDown, useLocked } from "@dailies-studio/ui";
+import { FontPicker } from "../../../app/lazySurfaces.js";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import type { FontApplyProgress } from "../../../state/fonts.js";
+import { faceStack, familyFace, usePreviewFace } from "../../fonts/faceCache.js";
+import { useFontPickerRequest } from "../../fonts/pickerRequest.js";
+import type { FontPickerClose, FontPickerView } from "../../fonts/pickerRequest.js";
+import { useSelectedLayers } from "../useDocWrite.js";
+
+export { MANAGE_FONTS_HREF } from "../../fonts/pickerRequest.js";
+
+export interface FontFieldProps {
+  /** The display family: `primaryFontFamily` of the layers' `fontFamily`. */
+  value: string;
+  /** The selected text layers name different families. */
+  mixed: boolean;
+}
+
+export function FontField({ value, mixed }: FontFieldProps) {
+  const store = useStore();
+  const locked = useLocked();
+  const anchor = useRef<HTMLDivElement>(null);
+  const button = useRef<HTMLButtonElement>(null);
+  const valueId = useId();
+  // The open view, or null while closed.
+  const [view, setView] = useState<FontPickerView | null>(null);
+  // Set by a close that hands focus back, spent once the picker is gone.
+  const refocus = useRef(false);
+  const doc = useShotEditor((s) => s.doc);
+  const catalog = useShotEditor((s) => s.fontCatalog);
+  const workspace = useShotEditor((s) => s.workspaceFonts);
+  // A write's progress shows on the field of the text it lands on, not on
+  // whatever text is selected while it runs.
+  const progress = useShotEditor((s) =>
+    s.fontApply !== null && s.fontApply.layerIds.some((id) => s.selection.includes(id)) ? s.fontApply : null,
+  );
+
+  const face = useMemo(
+    () => (mixed || value === "" || doc === null ? null : familyFace(doc, value, catalog, workspace?.fonts ?? null)),
+    [mixed, value, doc, catalog, workspace],
+  );
+  const status = usePreviewFace(face);
+  // A fileless layer beside the Project's own copy of its family: the picker
+  // lists the copy as current, and picking it still has to write.
+  const layers = useSelectedLayers();
+  const currentMachine = doc !== null && layers.some((layer) => drawsMachineFont(layer, doc.assets));
+
+  const warm = (): void => {
+    void FontPicker.preload();
+    void store.loadFontCatalog();
+  };
+  const openOn = (next: FontPickerView): void => {
+    if (locked) return;
+    warm();
+    setView(next);
+  };
+  const close = (how: FontPickerClose): void => {
+    // Tab moves on FROM the field: focus has to be here before the browser
+    // takes the key.
+    if (how === "tab") button.current?.focus();
+    refocus.current = how === "refocus";
+    setView(null);
+  };
+  useEffect(() => {
+    if (view !== null || !refocus.current) return;
+    refocus.current = false;
+    button.current?.focus();
+  }, [view]);
+
+  // A request made before this field mounted is not this field's to answer.
+  const request = useFontPickerRequest();
+  const answered = useRef(request?.seq ?? 0);
+  useEffect(() => {
+    if (request === null || request.seq <= answered.current) return;
+    answered.current = request.seq;
+    openOn(request.view);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [request]);
+
+  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>): void => {
+    // Enter and Space press the button; ArrowDown opens it as a list does.
+    // The window keymap reads the arrows as a frame step.
+    if (e.key !== "ArrowDown" || view !== null) return;
+    e.preventDefault();
+    e.stopPropagation();
+    openOn("list");
+  };
+
+  return (
+    <div
+      ref={anchor}
+      className={`color-field font-field${locked ? " is-readonly" : ""}`}
+      onPointerEnter={locked ? undefined : warm}
+      onFocus={locked ? undefined : warm}
+    >
+      <button
+        ref={button}
+        type="button"
+        className="font-field-open"
+        aria-label="Font"
+        aria-describedby={valueId}
+        aria-haspopup="listbox"
+        aria-expanded={view !== null}
+        disabled={locked}
+        onClick={() => (view === null ? openOn("list") : close("refocus"))}
+        onKeyDown={onKeyDown}
+      >
+        <span
+          id={valueId}
+          className={`font-field-name${mixed ? " is-mixed" : ""}`}
+          {...(status === "ready" && face !== null ? { style: { fontFamily: faceStack(face) } } : {})}
+        >
+          {mixed ? "Mixed" : value}
+        </span>
+        <IconChevronDown className="field-caret" />
+      </button>
+      {progress !== null && <FontApplyState progress={progress} locked={locked} onRetry={() => void store.retryFontApply()} />}
+      {view !== null && (
+        <FontPicker
+          anchor={anchor}
+          view={view}
+          onView={setView}
+          current={mixed ? null : value}
+          currentMachine={currentMachine}
+          onClose={close}
+        />
+      )}
+    </div>
+  );
+}
+
+/** The font write in flight, in the box's accessory lane. */
+function FontApplyState(props: { progress: FontApplyProgress; locked: boolean; onRetry: () => void }) {
+  const { family, phase, loaded, total, failed } = props.progress;
+  if (failed !== null) {
+    return (
+      <span className="field-accessory">
+        <button type="button" className="btn font-field-retry" title={failed} disabled={props.locked} onClick={props.onRetry}>
+          Retry
+        </button>
+      </span>
+    );
+  }
+  const percent = total !== null && total > 0 ? Math.min(100, Math.round((loaded / total) * 100)) : null;
+  const doing = `${phase === "upload" ? "Uploading" : "Downloading"} ${family}`;
+  return (
+    <span
+      className="field-accessory font-field-apply"
+      role="progressbar"
+      aria-label={doing}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      {...(percent !== null ? { "aria-valuenow": percent } : {})}
+      title={percent === null ? doing : `${doing}, ${percent}%`}
+    >
+      <svg className={`font-field-ring${percent === null ? " is-indeterminate" : ""}`} viewBox="0 0 12 12" aria-hidden="true">
+        <circle className="font-field-ring-track" cx="6" cy="6" r="4.5" />
+        {/* A size not known yet draws no level: the sheet dashes the ring, or
+            turns a short arc where motion is wanted. */}
+        <circle
+          className="font-field-ring-level"
+          cx="6"
+          cy="6"
+          r="4.5"
+          pathLength={100}
+          {...(percent === null ? {} : { strokeDasharray: `${percent} 100` })}
+          transform="rotate(-90 6 6)"
+        />
+      </svg>
+      {percent !== null && <span className="font-field-percent">{percent}%</span>}
+    </span>
+  );
+}

package/src/panels/inspector/design/HtmlSection.tsx

@@ -1,5 +1,5 @@
-// Only for HTML layers, and absent otherwise — the same rule every section in
-// this folder follows.
+// The html layer's snippet. WHICH selections get this section is `layout.ts`'s
+// answer, not this file's — the kind gate that used to open it is gone.
 //
 // TWO FIELDS AND NOT ONE, because the split is a correctness rule rather than a
 // layout preference: a snippet is parsed as XML, where an unescaped `a > b`
@@ -10,6 +10,9 @@
 // granularity here and not a compromise: every commit re-serializes the snippet,
 // re-decodes it through an SVG image and re-rasters the layer, so a per-keystroke
 // commit would put a decode on the critical path of every character typed.
+//
+// Both boxes GROW with their text, so both rows align to their start: the label
+// stays level with the first line instead of centring on a paragraph.
 import { InspectorRow, InspectorSection, TextField } from "@dailies-studio/ui";
 import type { HtmlLayer3D, Layer3D } from "@dailies-studio/shot/doc";
 import { useSelectedLayers, useSelectionValue, useSelectionWrite } from "../useDocWrite.js";
@@ -17,31 +20,39 @@ import { useSelectedLayers, useSelectionValue, useSelectionWrite } from "../useD
 export function HtmlSection() {
   const write = useSelectionWrite();
   const layers = useSelectedLayers();
-  const anyHtml = layers.some((l) => l.kind === "html");
   const markup = useSelectionValue((layer) => (layer.kind === "html" ? layer.html.markup : undefined));
   const css = useSelectionValue((layer) => (layer.kind === "html" ? (layer.html.css ?? "") : undefined));
-  if (!anyHtml || markup.value === undefined) return null;
+  // data gate, not a kind gate: see layout.ts. A mixed selection led by a rect
+  // has no markup to show, and two fields over nothing is worse than none.
+  if (markup.value === undefined) return null;
+  // MIXED among the html layers alone: a rect beside one has no markup to
+  // disagree with, and the write passes it by.
+  const htmls = layers.filter((l): l is HtmlLayer3D => l.kind === "html");
+  const markupMixed = htmls.some((l) => l.html.markup !== markup.value);
+  const cssMixed = htmls.some((l) => (l.html.css ?? "") !== css.value);
 
   const patch = (next: Partial<HtmlLayer3D["html"]>): void =>
-    write((layer) => (layer.kind === "html" ? ({ ...layer, html: { ...layer.html, ...next } } as Layer3D) : layer));
+    write((layer) =>
+      layer.kind === "html" ? ({ ...layer, html: { ...layer.html, ...next } } as Layer3D) : layer,
+    );
 
   return (
-    <InspectorSection title="Html" persistKey="shot:html">
-      <InspectorRow label="Markup">
+    <InspectorSection className="insp-object" title="Html" persistKey="shot:html">
+      <InspectorRow label="Markup" align="start">
         <TextField
-          value={markup.value}
+          value={markupMixed ? "" : markup.value}
           multiline
           ariaLabel="Html markup"
-          placeholder="<div>…</div>"
+          placeholder={markupMixed ? "Mixed" : "<div>…</div>"}
           onCommit={(next) => patch({ markup: next })}
         />
       </InspectorRow>
-      <InspectorRow label="CSS">
+      <InspectorRow label="CSS" align="start">
         <TextField
-          value={css.value ?? ""}
+          value={cssMixed ? "" : (css.value ?? "")}
           multiline
           ariaLabel="Html css"
-          placeholder=".root { … }"
+          placeholder={cssMixed ? "Mixed" : ".root { … }"}
           onCommit={(next) => patch({ css: next })}
         />
       </InspectorRow>