tweakit 0.6.0 → 0.7.0

package/src/tweaks/controls/point.ts

@@ -1,6 +1,15 @@
 // ── Point — 2D/3D/4D vector. Lazy.
-import { el, clamp, stepPrecision, defaultRange, popover, registerControl } from "../shared.js";
-import { numField, svgEl, grabSurface, boxFrac, arrowStep, sayWhenKeysStop, triggerRow, decimalStep } from "../heavy.js";
+import { el, clamp, stepPrecision, defaultRange, popover, registerControl, words } from "../shared.js";
+import {
+  numField,
+  svgEl,
+  grabSurface,
+  boxFrac,
+  arrowStep,
+  sayWhenKeysStop,
+  triggerRow,
+  decimalStep,
+} from "../heavy.js";
 import type { OnChange, Built } from "../shared.js";
 import type { Meta, PointComponent } from "../schema.js";
 import type { Control } from "../types.js";
@@ -8,19 +17,21 @@ import type { Control } from "../types.js";
 // A trigger row opens the 2D pad over the component fields in a popover. The fields hold the values; readout, thumb
 // and emitted map read off them. `pad: false` opts out.
 function createPoint(meta: Meta, onChange: OnChange): Control {
+  const tr = words();
   const comps = meta.components; // [{ key, label, value, step, min, max }]
 
   // ── Trigger row — label + value + a mini pad preview. ──
-  const { root, trigger, right } = triggerRow("tw-point", meta.label ?? "Point"); // ??: an explicit "" label renders none
-  const valueEl = el("span", "tw-trigger-value");
-  const preview = el("div", "tw-trigger-chip tw-point-preview");
-  const previewDot = el("div", "tw-point-preview-dot");
+  // ??: an explicit "" label renders none
+  const { root, trigger, right } = triggerRow("twk-point", meta.label ?? tr("point", "Point"));
+  const valueEl = el("span", "twk-trigger-value");
+  const preview = el("div", "twk-trigger-chip twk-point-preview");
+  const previewDot = el("div", "twk-point-preview-dot");
   preview.append(previewDot);
   right.append(preview, valueEl); // chip first, as every chip row
 
   // ── Popover — the 2D pad over the component fields. ──
-  const pop = el("div", "tw-color-pop tw-point-pop");
-  const body = el("div", "tw-point-body");
+  const pop = el("div", "twk-color-pop twk-point-pop");
+  const body = el("div", "twk-point-body");
   pop.append(body);
 
   const hasPad = meta.pad !== false && comps.length >= 2;
@@ -29,78 +40,150 @@ function createPoint(meta: Meta, onChange: OnChange): Control {
   // its steps (337 over ±1011 stepped by 10 to 340), as the slider's step fits its default.
   const rangeOf = (c: PointComponent) => {
     const half = defaultRange(Math.abs(Number.isFinite(+c.value) ? +c.value : 0))[1];
-    let lo = c.min ?? -half, hi = c.max ?? half;
-    // A lone bound at or past the other end spans from itself instead, as the slider's does (min 5 over 0 spans 5–35, not 5–1, swapped).
-    if ((c.min == null) !== (c.max == null) && !(hi > lo)) { const w = 2 * defaultRange(Math.abs(+(c.min ?? c.max)!))[1]; if (c.min == null) lo = hi - w; else hi = lo + w; }
-    const fine = 10 ** Math.floor(Math.log10((hi - lo) / 200)), nudge = c.step ?? (fine > 0 && Number.isFinite(fine) ? fine : 1); // a degenerate range (hi ≤ lo, NaN) keeps a step of 1
-    return { lo, hi, nudge, step: c.step ?? Math.min(nudge, decimalStep(c.value), decimalStep(c.min)) }; // the pad's arrows keep the decade: 3.14159's 0.00001 would crawl
+    let lo = c.min ?? -half,
+      hi = c.max ?? half;
+    // A lone bound at or past the other end spans from itself instead, as the slider's does (min 5 over 0 spans 5–35,
+    // not 5–1, swapped).
+    if ((c.min == null) !== (c.max == null) && !(hi > lo)) {
+      const w = 2 * defaultRange(Math.abs(+(c.min ?? c.max)!))[1];
+      if (c.min == null) lo = hi - w;
+      else hi = lo + w;
+    }
+    // a degenerate range (hi ≤ lo, NaN) keeps a step of 1
+    const fine = 10 ** Math.floor(Math.log10((hi - lo) / 200)),
+      nudge = c.step ?? (fine > 0 && Number.isFinite(fine) ? fine : 1);
+    // the pad's arrows keep the decade: 3.14159's 0.00001 would crawl
+    return { lo, hi, nudge, step: c.step ?? Math.min(nudge, decimalStep(c.value), decimalStep(c.min)) };
   };
   const ranges = comps.map(rangeOf);
-  const rx = ranges[0], ry = ranges[1];
-  const minX = rx?.lo ?? -1, maxX = rx?.hi ?? 1, minY = ry?.lo ?? -1, maxY = ry?.hi ?? 1;
+  const rx = ranges[0],
+    ry = ranges[1];
+  const minX = rx?.lo ?? -1,
+    maxX = rx?.hi ?? 1,
+    minY = ry?.lo ?? -1,
+    maxY = ry?.hi ?? 1;
   const frac = (v: number, lo: number, hi: number) => (hi > lo ? clamp((v - lo) / (hi - lo), 0, 1) : 0.5);
 
-  let padHost: HTMLDivElement | null = null, padThumb: HTMLDivElement | null = null, padLine: Built<SVGLineElement> | null = null;
+  let padHost: HTMLDivElement | null = null,
+    padThumb: HTMLDivElement | null = null,
+    padLine: Built<SVGLineElement> | null = null;
   if (hasPad) {
-    padHost = el("div", "tw-pad");
-    padThumb = el("div", "tw-pad-thumb");
+    padHost = el("div", "twk-pad");
+    padThumb = el("div", "twk-pad-thumb");
     // A tether from the origin to the thumb, so the point reads as a vector; the pad is square so the angle is true.
-    const padSvg = svgEl("svg", "tw-pad-line"); padSvg.setAttribute("viewBox", "0 0 100 100"); padSvg.setAttribute("preserveAspectRatio", "none");
-    padLine = svgEl("line"); padSvg.append(padLine);
+    const padSvg = svgEl("svg", "twk-pad-line");
+    padSvg.setAttribute("viewBox", "0 0 100 100");
+    padSvg.setAttribute("preserveAspectRatio", "none");
+    padLine = svgEl("line");
+    padSvg.append(padLine);
     // The origin is fixed for the control's life: set x1/y1 once.
-    const oy0 = frac(0, minY, maxY); padLine.setAttribute("x1", frac(0, minX, maxX) * 100); padLine.setAttribute("y1", (meta.invertY ? oy0 : 1 - oy0) * 100);
-    padHost.append(el("div", "tw-pad-axis tw-pad-axis-x"), el("div", "tw-pad-axis tw-pad-axis-y"), padSvg, padThumb);
+    const oy0 = frac(0, minY, maxY);
+    padLine.setAttribute("x1", frac(0, minX, maxX) * 100);
+    padLine.setAttribute("y1", (meta.invertY ? oy0 : 1 - oy0) * 100);
+    padHost.append(
+      el("div", "twk-pad-axis twk-pad-axis-x"),
+      el("div", "twk-pad-axis twk-pad-axis-y"),
+      padSvg,
+      padThumb,
+    );
     body.append(padHost);
   }
 
-  const fields = el("div", "tw-fields");
+  const fields = el("div", "twk-fields");
   body.append(fields);
-  const sync = () => { positionPad(); paintValue(); };
+  const sync = () => {
+    positionPad();
+    paintValue();
+  };
   const emit = () => onChange(read());
   const flds = comps.map((c, k) => {
-    const fld = numField({ label: c.label, value: c.value ?? 0, step: ranges[k].step, min: c.min, max: c.max }, () => { sync(); emit(); });
-    fields.append(fld.el); return fld;
+    const fld = numField(
+      { label: c.label ?? c.key, value: c.value ?? 0, step: ranges[k].step, min: c.min, max: c.max },
+      () => {
+        sync();
+        emit();
+      },
+    );
+    fields.append(fld.el);
+    return fld;
   });
-  const read = () => Object.fromEntries(comps.map((c, k) => [c.key, flds[k].get()])); // the emitted map, straight off the fields
+  // the emitted map, straight off the fields
+  const read = () => Object.fromEntries(comps.map((c, k) => [c.key, flds[k].get()]));
 
-  // Readout: the components at each step's precision, so a value reads "−1.00, −0.46" (steady columns), not "−1, −0.46".
+  // Readout: the components at each step's precision, so a value reads "−1.00, −0.46" (steady columns), not
+  // "−1, −0.46".
   const fmt = (v: number, step: number) => (+v).toFixed(stepPrecision(step));
-  const paintValue = () => { valueEl.textContent = flds.map((f, k) => fmt(f.get(), ranges[k].step)).join(", "); };
-  let positionPad = () => { previewDot.style.left = "50%"; previewDot.style.top = "50%"; };
+  const paintValue = () => {
+    valueEl.textContent = flds.map((f, k) => fmt(f.get(), ranges[k].step)).join(", ");
+  };
+  let positionPad = () => {
+    previewDot.style.left = "50%";
+    previewDot.style.top = "50%";
+  };
 
   if (hasPad) {
     // The mini preview is clipped, so inset the 5px dot: its center travels from +2.5px at 0 to −2.5px at 1.
     const DOT = 5;
     const inset = (f: number) => `calc(${(f * 100).toFixed(2)}% + ${((0.5 - f) * DOT).toFixed(2)}px)`;
     positionPad = () => {
-      const fx = frac(flds[0].get(), minX, maxX), fyv = frac(flds[1].get(), minY, maxY);
+      const fx = frac(flds[0].get(), minX, maxX),
+        fyv = frac(flds[1].get(), minY, maxY);
       const tyFrac = meta.invertY ? fyv : 1 - fyv;
-      const tx = fx * 100, ty = tyFrac * 100;
-      padThumb.style.left = tx + "%"; padThumb.style.top = ty + "%";
-      previewDot.style.left = inset(fx); previewDot.style.top = inset(tyFrac); // mini pad: dot stays in bounds
-      padLine.setAttribute("x2", tx); padLine.setAttribute("y2", ty);
-      padHost.setAttribute("aria-description", `${comps[0].label ?? comps[0].key} ${fmt(flds[0].get(), rx.step)}, ${comps[1].label ?? comps[1].key} ${fmt(flds[1].get(), ry.step)}`); // the pad's live readout for assistive tech
+      const tx = fx * 100,
+        ty = tyFrac * 100;
+      padThumb.style.left = tx + "%";
+      padThumb.style.top = ty + "%";
+      previewDot.style.left = inset(fx);
+      previewDot.style.top = inset(tyFrac); // mini pad: dot stays in bounds
+      padLine.setAttribute("x2", tx);
+      padLine.setAttribute("y2", ty);
+      // the pad's live readout for assistive tech
+      padHost.setAttribute(
+        "aria-description",
+        `${comps[0].label ?? comps[0].key} ${fmt(flds[0].get(), rx.step)}, ${comps[1].label ?? comps[1].key} ${fmt(flds[1].get(), ry.step)}`,
+      );
     };
     const padSet = (e: PointerEvent) => {
-      const [fx, fy] = boxFrac(e, padHost); const yFrac = meta.invertY ? fy : 1 - fy;
-      flds[0].set(minX + fx * (maxX - minX)); flds[1].set(minY + yFrac * (maxY - minY));
-      sync(); emit();
+      const [fx, fy] = boxFrac(e, padHost);
+      const yFrac = meta.invertY ? fy : 1 - fy;
+      flds[0].set(minX + fx * (maxX - minX));
+      flds[1].set(minY + yFrac * (maxY - minY));
+      sync();
+      emit();
     };
     grabSurface(padHost, padSet);
     // Keyboard: a focusable group (no ARIA role fits a 2D point; the readout rides on aria-description). Arrows move a
-    // pad step (⇧ = ten), ↑ always up on screen; Home restores the default. Escape is the popover's — a blur here would close it first.
-    padHost.tabIndex = 0; padHost.setAttribute("role", "group");
-    padHost.setAttribute("aria-label", `${meta.label ?? "Point"} pad: ${comps[0].label ?? comps[0].key} and ${comps[1].label ?? comps[1].key}`);
+    // pad step (⇧ = ten), ↑ always up on screen; Home restores the default. Escape is the popover's — a blur here would
+    // close it first.
+    padHost.tabIndex = 0;
+    padHost.setAttribute("role", "group");
+    padHost.setAttribute(
+      "aria-label",
+      tr("pointPad", "{label} pad: {x} and {y}", {
+        label: meta.label ?? tr("point", "Point"),
+        x: comps[0].label ?? comps[0].key,
+        y: comps[1].label ?? comps[1].key,
+      }),
+    );
     const say = sayWhenKeysStop(padHost);
     padHost.addEventListener("keydown", (e) => {
-      if (e.key === "Home") { e.preventDefault(); comps.forEach((c, k) => flds[k].set(c.value ?? 0)); sync(); emit(); say(); return; }
+      if (e.key === "Home") {
+        e.preventDefault();
+        comps.forEach((c, k) => flds[k].set(c.value ?? 0));
+        sync();
+        emit();
+        say();
+        return;
+      }
       const [dx, dy] = arrowStep(e);
       if (!dx && !dy) return;
       e.preventDefault();
       const k = e.shiftKey ? 10 : 1;
       if (dx) flds[0].set(clamp(flds[0].get() + dx * rx.nudge * k, minX, maxX));
       if (dy) flds[1].set(clamp(flds[1].get() + (meta.invertY ? -dy : dy) * ry.nudge * k, minY, maxY));
-      sync(); emit(); say();
+      sync();
+      emit();
+      say();
     });
   }
 
@@ -110,7 +193,13 @@ function createPoint(meta: Meta, onChange: OnChange): Control {
 
   return {
     el: root,
-    set: (v: Record<string, number | string>) => { if (v) comps.forEach((c, k) => { if (v[c.key] != null) flds[k].set(v[c.key]); }); sync(); },
+    set: (v: Record<string, number | string>) => {
+      if (v)
+        comps.forEach((c, k) => {
+          if (v[c.key] != null) flds[k].set(v[c.key]);
+        });
+      sync();
+    },
     get: read,
     range: Object.fromEntries(comps.map((c, k) => [c.key, flds[k].range])),
   };

package/src/tweaks/controls/shadow.ts

@@ -1,7 +1,7 @@
 // ── Shadow — a box-shadow editor with the kit's own picker mounted inline (popover() is single-open). The value carries
 // the CSS as `css`, built only from the numbers and a color the picker accepted as one color token (isColor) — a host
 // string reaching a `style` sink could splice in a url(). Lazy. ──
-import { el, txt, popover, createSegmented, registerControl, btn, icon, isObj } from "../shared.js";
+import { el, txt, popover, createSegmented, registerControl, btn, icon, isObj, words } from "../shared.js";
 import { numField, triggerRow } from "../heavy.js";
 import { createPickerBody, isColor } from "./color.js";
 import type { OnChange, NumField } from "../shared.js";
@@ -16,64 +16,137 @@ const COLOR_RE = /#[0-9a-f]{3,8}\b|(?:oklch|oklab|rgba?|hsla?|hwb|lab|lch|color)
 const LEN_RE = /^(-?\d*\.?\d+)(px)?$/;
 // Strict: optional `inset`, two to four px lengths, one color, one layer; anything else is null.
 const parseShadow = (s: string): ShadowInput | null => {
-  const m = COLOR_RE.exec(s); if (!m || !isColor(m[0])) return null;
+  const m = COLOR_RE.exec(s);
+  if (!m || !isColor(m[0])) return null;
   const rest = (s.slice(0, m.index) + " " + s.slice(m.index + m[0].length)).trim().split(/\s+/).filter(Boolean);
-  const inset = rest.includes("inset"), lens = rest.filter((t) => t !== "inset");
+  const inset = rest.includes("inset"),
+    lens = rest.filter((t) => t !== "inset");
   if (lens.length < 2 || lens.length > 4 || !lens.every((t) => LEN_RE.test(t))) return null;
   const n = lens.map((t) => +t.replace(/px$/, ""));
   return { inset, x: n[0], y: n[1], blur: n[2] ?? 0, spread: n[3] ?? 0, color: m[0] };
 };
 
-const CHEVRON = icon('<path d="M18 9s-4.4 6-6 6-6-6-6-6"/>', "tw-shadow-chevron", 2.5); // the kit's chevron; importing icons.ts splits a 4th chunk
+// the kit's chevron; importing icons.ts splits a 4th chunk
+const CHEVRON = icon('<path d="M18 9s-4.4 6-6 6-6-6-6-6"/>', "twk-shadow-chevron", 2.5);
 function createShadow(meta: Meta, onChange: OnChange): Control {
+  const tr = words();
   const read = (v: unknown): ShadowInput | null => (typeof v === "string" ? parseShadow(v) : isObj(v) ? v : null);
   const init = read(meta.value ?? meta) || {}; // the fields may sit on the meta itself (verbose form)
   let inset = !!init.inset;
 
   // ── Row — label, chip, summary. ──
-  const { root, trigger, right } = triggerRow("tw-shadow", meta.label ?? "Shadow"); // ??: an explicit "" label renders none
-  const chip = el("span", "tw-trigger-chip tw-shadow-chip"), chipTile = el("span", "tw-shadow-chip-tile"); chip.append(chipTile);
-  const valueEl = el("span", "tw-trigger-value");
+  // ??: an explicit "" label renders none
+  const { root, trigger, right } = triggerRow("twk-shadow", meta.label ?? tr("shadow", "Shadow"));
+  const chip = el("span", "twk-trigger-chip twk-shadow-chip"),
+    chipTile = el("span", "twk-shadow-chip-tile");
+  chip.append(chipTile);
+  const valueEl = el("span", "twk-trigger-value");
   right.append(chip, valueEl);
 
   // ── Popover — a preview card, the position switch, the four lengths, the picker. ──
-  const pop = el("div", "tw-color-pop tw-shadow-pop");
-  const stage = el("div", "tw-shadow-stage"), card = el("div", "tw-shadow-card"); stage.append(card);
-  const insetSeg = createSegmented([{ value: "outer", label: "Outer" }, { value: "inner", label: "Inner" }], inset ? "inner" : "outer", (m: unknown) => { if ((m === "inner") !== inset) { inset = m === "inner"; update(); emit(); } }, "Shadow position");
-  const insetRow = el("div", "tw-row"); insetRow.append(txt("span", "tw-row-label", "Position"), insetSeg.el);
-  const fields = el("div", "tw-fields tw-shadow-fields");
-  // The four lengths live in their fields, read as the fields fit them: an authored 2.5 shows "3" and emits 3px, and the
-  // blur's min clamps a negative one to 0.
-  const field = (label: string, value: number, min?: number): NumField => { const f = numField({ label, value, step: 1, min, unit: "px" }, () => { update(); emit(); }); fields.append(f.el); return f; };
-  const fx = field("X", num(init.x, DEF.x)), fy = field("Y", num(init.y, DEF.y)), fb = field("Blur", num(init.blur, DEF.blur), 0), fs = field("Spread", num(init.spread, DEF.spread));
+  const pop = el("div", "twk-color-pop twk-shadow-pop");
+  const stage = el("div", "twk-shadow-stage"),
+    card = el("div", "twk-shadow-card");
+  stage.append(card);
+  const insetSeg = createSegmented(
+    [
+      { value: "outer", label: tr("outer", "Outer") },
+      { value: "inner", label: tr("inner", "Inner") },
+    ],
+    inset ? "inner" : "outer",
+    (m: unknown) => {
+      if ((m === "inner") !== inset) {
+        inset = m === "inner";
+        update();
+        emit();
+      }
+    },
+    tr("shadowPosition", "Shadow position"),
+  );
+  const insetRow = el("div", "twk-row");
+  insetRow.append(txt("span", "twk-row-label", tr("position", "Position")), insetSeg.el);
+  const fields = el("div", "twk-fields twk-shadow-fields");
+  // The four lengths live in their fields, read as the fields fit them: an authored 2.5 shows "3" and emits 3px, and
+  // the blur's min clamps a negative one to 0.
+  const field = (label: string, value: number, min?: number): NumField => {
+    const f = numField({ label, value, step: 1, min, unit: "px" }, () => {
+      update();
+      emit();
+    });
+    fields.append(f.el);
+    return f;
+  };
+  const fx = field("X", num(init.x, DEF.x)),
+    fy = field("Y", num(init.y, DEF.y)),
+    fb = field(tr("blur", "Blur"), num(init.blur, DEF.blur), 0),
+    fs = field(tr("spread", "Spread"), num(init.spread, DEF.spread));
   const lengths = () => [fx, fy, fb, fs].map((f) => f.get());
   // The color row discloses the picker, so the pop opens compact.
-  const colorRow = btn("tw-trigger tw-shadow-color"); colorRow.setAttribute("aria-expanded", "false");
-  const cSwatch = el("span", "tw-trigger-chip tw-color-swatch"), cText = el("span", "tw-trigger-value"), cRight = el("span", "tw-trigger-right");
-  cRight.append(cSwatch, cText); cRight.insertAdjacentHTML("beforeend", CHEVRON); colorRow.append(txt("span", "tw-trigger-label", "Color"), cRight);
-  const body = createPickerBody({ value: typeof init.color === "string" && isColor(init.color) ? init.color : DEF.color, onMode: () => update() }, () => { update(); emit(); });
+  const colorRow = btn("twk-trigger twk-shadow-color");
+  colorRow.setAttribute("aria-expanded", "false");
+  const cSwatch = el("span", "twk-trigger-chip twk-color-swatch"),
+    cText = el("span", "twk-trigger-value"),
+    cRight = el("span", "twk-trigger-right");
+  cRight.append(cSwatch, cText);
+  cRight.insertAdjacentHTML("beforeend", CHEVRON);
+  colorRow.append(txt("span", "twk-trigger-label", tr("color", "Color")), cRight);
+  const body = createPickerBody(
+    { value: typeof init.color === "string" && isColor(init.color) ? init.color : DEF.color, onMode: () => update() },
+    () => {
+      update();
+      emit();
+    },
+  );
   body.el.hidden = true;
-  colorRow.addEventListener("click", () => { const show = body.el.hidden; body.el.hidden = !show; colorRow.setAttribute("aria-expanded", String(show)); pop_.reflow(); }); // re-place for the new height; the picker lays out now
+  // re-place for the new height; the picker lays out now
+  colorRow.addEventListener("click", () => {
+    const show = body.el.hidden;
+    body.el.hidden = !show;
+    colorRow.setAttribute("aria-expanded", String(show));
+    pop_.reflow();
+  });
   pop.append(stage, insetRow, fields, colorRow, body.el);
   root.append(pop);
 
-  const cssAt = (k: number) => `${inset ? "inset " : ""}${lengths().map((n) => `${fmt(n * k)}px`).join(" ")} ${body.get()}`;
-  const value = (): ShadowValue => { const [x, y, blur, spread] = lengths().map((n) => +fmt(n)); return { inset, x, y, blur, spread, color: body.get(), css: cssAt(1) }; };
+  const cssAt = (k: number) =>
+    `${inset ? "inset " : ""}${lengths()
+      .map((n) => `${fmt(n * k)}px`)
+      .join(" ")} ${body.get()}`;
+  const value = (): ShadowValue => {
+    const [x, y, blur, spread] = lengths().map((n) => +fmt(n));
+    return { inset, x, y, blur, spread, color: body.get(), css: cssAt(1) };
+  };
   const emit = () => onChange(value());
   const update = () => {
-    card.style.boxShadow = cssAt(1); chipTile.style.boxShadow = cssAt(0.3);
+    card.style.boxShadow = cssAt(1);
+    chipTile.style.boxShadow = cssAt(0.3);
     const [x, y, blur, spread] = lengths();
-    valueEl.textContent = `${inset ? "in " : ""}${fmt(x)} ${fmt(y)} ${fmt(blur)}${spread ? " " + fmt(spread) : ""}`;
-    cSwatch.style.background = body.swatchCss(); cText.textContent = body.valueText();
+    valueEl.textContent = `${inset ? tr("inset", "in") + " " : ""}${fmt(x)} ${fmt(y)} ${fmt(blur)}${spread ? " " + fmt(spread) : ""}`;
+    cSwatch.style.background = body.swatchCss();
+    cText.textContent = body.valueText();
   };
   const pop_ = popover(root, trigger, pop, { fallbackH: 300, onOpen: body.reflow, onReflow: body.reflow });
   update();
 
-  // Set/restore: the object form or a strict box-shadow string; `css` is ignored, and the color goes through the picker.
+  // Set/restore: the object form or a strict box-shadow string; `css` is ignored, and the color goes through the
+  // picker.
   const set = (v: unknown) => {
-    const inp = read(v); if (!inp) return;
-    if (inp.inset != null) { inset = !!inp.inset; insetSeg.set(inset ? "inner" : "outer"); }
-    ([["x", fx], ["y", fy], ["blur", fb], ["spread", fs]] as const).forEach(([k, f]) => { if (inp[k] != null) f.set(num(inp[k], f.get())); });
+    const inp = read(v);
+    if (!inp) return;
+    if (inp.inset != null) {
+      inset = !!inp.inset;
+      insetSeg.set(inset ? "inner" : "outer");
+    }
+    (
+      [
+        ["x", fx],
+        ["y", fy],
+        ["blur", fb],
+        ["spread", fs],
+      ] as const
+    ).forEach(([k, f]) => {
+      if (inp[k] != null) f.set(num(inp[k], f.get()));
+    });
     if (typeof inp.color === "string" && isColor(inp.color)) body.set(inp.color);
     update();
   };