@takazudo/zdtp 0.4.5 → 0.4.7

package/dist/server/index.js

@@ -1,4 +1,4 @@
-import { C as s, c as i, i as l, a as r, l as t, s as o, v as d } from "../load-routing-LJ72261l.js";
+import { C as s, c as i, i as l, a as r, l as t, s as o, v as d } from "../load-routing-D4H2VOl5.js";
 export {
   s as CSS_VAR_NAME_RE,
   i as createApplyHandler,

package/dist/tabs/notes-tab.d.ts

@@ -0,0 +1,25 @@
+import type { TabConfig } from '../tokens/tier-model';
+interface NotesTabProps {
+    tab: TabConfig;
+}
+/**
+ * Notes tab — host-configurable "token notes" landing view (#515).
+ *
+ * Renders `tab.notesExtras.title` as a section heading
+ * (`div[role="heading"][aria-level=3]`, NEVER an hN tag — see
+ * packages/zdtp/CLAUDE.md "Panel DOM hygiene") and `tab.notesExtras.html` as
+ * sanitized HTML via `dangerouslySetInnerHTML` — the package's first and only
+ * use of it. `sanitizeHtml` (utils/sanitize-html.ts) is the security
+ * boundary, an allowlist parser, not this component and not the CSS below.
+ *
+ * The rendered `.tokenpanel-notes-body` subtree is HOST-AUTHORED PROSE
+ * CONTENT, not panel chrome: the DOM-hygiene ban on h1-h6/p/ul/a/table/etc.
+ * applies to the panel's OWN JSX, and does not apply inside sanitized note
+ * content — that's exactly the markup a "notes" feature needs to render.
+ *
+ * `assertValidPanelConfig` requires `notesExtras` (non-empty title + html)
+ * on every tab with `id: 'notes'`, so this component can assume it's
+ * present without a runtime fallback UI.
+ */
+export default function NotesTab({ tab }: NotesTabProps): import("preact").JSX.Element | null;
+export {};

package/dist/testing.js

@@ -1,5 +1,5 @@
-import { _ as r, c as i, h as _, i as n, j as g, b as R, a as p } from "./panel-config-CipeKMTz.js";
-import { a as y, b as O, l as P } from "./tweak-state-xt-tSQ_t.js";
+import { _ as r, c as _, h as i, j as n, k as g, b as R, a as p } from "./panel-config-Bw7D-25C.js";
+import { a as y, b as O, l as P } from "./tweak-state-CD1y56zR.js";
 import { F as K, G as E, a as S, S as u } from "./manifest-DCReQE0k.js";
 async function s(a, e) {
   await a.fill(e), await a.dispatchEvent("input");
@@ -10,12 +10,12 @@ export {
   S as GROUP_TITLES,
   u as SIZE_GROUP_ORDER,
   r as __resetPanelConfigForTests,
-  i as configurePanel,
+  _ as configurePanel,
   y as getStorageKeyV1,
   O as getStorageKeyV2,
   P as loadPersistedState,
   s as setPanelInputValue,
-  _ as storageKey_open,
+  i as storageKey_open,
   n as storageKey_position,
   g as storageKey_stateV1,
   R as storageKey_stateV2,

package/dist/tokens/manifest.d.ts

@@ -60,6 +60,14 @@ export interface TokenDef {
     step: number;
     /** Unit suffix (e.g. `rem`, `px`). Read-only rows may use an empty string. */
     unit: string;
+    /**
+     * Optional list of unit suffixes this row may cycle through by clicking
+     * the unit label (#519). 2+ entries opts in; omitted/single-entry keeps
+     * today's static, non-interactive unit suffix. Mirrors `TierValueKind`'s
+     * `length.units` — the default-slider mapping in a host's
+     * `toTierItem()`-style helper should pass it straight through.
+     */
+    units?: readonly string[];
     /** Read-only tokens are displayed but not editable (e.g. `clamp()` expressions). */
     readonly?: true;
     /** Which control renders this token. Defaults to `"slider"` when absent. */

package/dist/tokens/tier-model.d.ts

@@ -4,6 +4,16 @@ export type TierValueKind = {
     kind: 'length';
     step: number;
     unit: string;
+    /**
+     * Optional list of unit suffixes this row may cycle through by
+     * clicking the unit label (#519). 2+ entries opts the row into an
+     * interactive, click/Enter/Space-cycling unit suffix (wrapping through
+     * the list); omitted or a single entry keeps today's static,
+     * non-interactive unit span, pixel-identical. This kind is reused for
+     * ms durations and unitless values too — only declare `units` when
+     * cycling between those suffixes is valid CSS for the token.
+     */
+    units?: readonly string[];
 } | {
     kind: 'number';
     step: number;
@@ -145,9 +155,23 @@ export interface ColorClusterExtras {
      */
     semanticDefaults?: Record<string, SemanticValue>;
 }
+/**
+ * Host-configurable "token notes" content — ONLY valid on the reserved
+ * `id: 'notes'` pseudo-tab (#515). That tab renders `title` as a section
+ * heading and `html` (sanitized by `utils/sanitize-html.ts`) as its body,
+ * instead of a tier-driven token editor. `assertValidPanelConfig` enforces
+ * the full contract: required + non-empty on `id: 'notes'`, forbidden on
+ * every other tab id, and `id: 'notes'` tabs must ship `tiers: []` and no
+ * `colorExtras`.
+ */
+export interface NotesExtras {
+    title: string;
+    html: string;
+}
 export interface TabConfig {
     id: string;
     label: string;
     tiers: readonly TierConfig[];
     colorExtras?: ColorClusterExtras;
+    notesExtras?: NotesExtras;
 }

package/dist/{tweak-state-xt-tSQ_t.js → tweak-state-CD1y56zR.js}

@@ -1,4 +1,4 @@
-import { E as gt, g, e as mt, d as yt, b as bt, h as xt, F as U, t as Z, p as Ne, q as Oe, G as Mt, i as kt, H as vt, r as B, j as St, I as Ie, J as wt, m as $t } from "./panel-config-CipeKMTz.js";
+import { r as gt, g, e as mt, d as yt, b as bt, h as xt, m as U, n as Z, o as Ne, p as Oe, q as Mt, j as kt, t as vt, u as B, k as St, v as Te, w as wt, x as $t } from "./panel-config-Bw7D-25C.js";
 const Re = (e, t) => {
   if (typeof e == "number") {
     if (t === 3)
@@ -183,13 +183,13 @@ const Re = (e, t) => {
   whitesmoke: 16119285,
   yellow: 16776960,
   yellowgreen: 10145074
-}, Ot = (e) => Re(Nt[e.toLowerCase()], 6), It = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i, Tt = (e) => {
+}, Ot = (e) => Re(Nt[e.toLowerCase()], 6), Tt = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i, Ct = (e) => {
   let t;
-  return (t = e.match(It)) ? Re(parseInt(t[1], 16), t[1].length) : void 0;
-}, w = "([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)", H = `${w}%`, be = `(?:${w}%|${w})`, Ct = `(?:${w}(deg|grad|rad|turn)|${w})`, T = "\\s*,\\s*", At = new RegExp(
-  `^rgba?\\(\\s*${w}${T}${w}${T}${w}\\s*(?:,\\s*${be}\\s*)?\\)$`
+  return (t = e.match(Tt)) ? Re(parseInt(t[1], 16), t[1].length) : void 0;
+}, w = "([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)", H = `${w}%`, be = `(?:${w}%|${w})`, It = `(?:${w}(deg|grad|rad|turn)|${w})`, C = "\\s*,\\s*", At = new RegExp(
+  `^rgba?\\(\\s*${w}${C}${w}${C}${w}\\s*(?:,\\s*${be}\\s*)?\\)$`
 ), Pt = new RegExp(
-  `^rgba?\\(\\s*${H}${T}${H}${T}${H}\\s*(?:,\\s*${be}\\s*)?\\)$`
+  `^rgba?\\(\\s*${H}${C}${H}${C}${H}\\s*(?:,\\s*${be}\\s*)?\\)$`
 ), _t = (e) => {
   let t = { mode: "rgb" }, n;
   if (n = e.match(At))
@@ -279,7 +279,7 @@ const Rt = {
 function P(e) {
   let t = "";
   if ((e[c] === "-" || e[c] === "+") && (t += e[c++]), t += F(e), e[c] === "." && /\d/.test(e[c + 1]) && (t += e[c++] + F(e)), (e[c] === "e" || e[c] === "E") && ((e[c + 1] === "-" || e[c + 1] === "+") && /\d/.test(e[c + 2]) ? t += e[c++] + e[c++] + F(e) : /\d/.test(e[c + 1]) && (t += e[c++] + F(e))), le(e)) {
-    let n = J(e);
+    let n = W(e);
     return n === "deg" || n === "rad" || n === "turn" || n === "grad" ? { type: l.Hue, value: t * Rt[n] } : void 0;
   }
   return e[c] === "%" ? (c++, { type: l.Percentage, value: +t }) : { type: l.Number, value: +t };
@@ -290,14 +290,14 @@ function F(e) {
     t += e[c++];
   return t;
 }
-function J(e) {
+function W(e) {
   let t = "";
   for (; c < e.length && Et.test(e[c]); )
     t += e[c++];
   return t;
 }
 function jt(e) {
-  let t = J(e);
+  let t = W(e);
   return e[c] === "(" ? (c++, { type: l.Function, value: t }) : t === "none" ? { type: l.None, value: void 0 } : { type: l.Ident, value: t };
 }
 function zt(e = "") {
@@ -329,7 +329,7 @@ function zt(e = "") {
         continue;
       }
       if (le(t)) {
-        n.push({ type: l.Ident, value: J(t) });
+        n.push({ type: l.Ident, value: W(t) });
         continue;
       }
       return;
@@ -350,7 +350,7 @@ function zt(e = "") {
         n.push({ type: l.Alpha, value: o });
         continue;
       }
-      if (le(t) && J(t) === "none") {
+      if (le(t) && W(t) === "none") {
         n.push({
           type: l.Alpha,
           value: { type: l.None, value: void 0 }
@@ -459,12 +459,12 @@ const Kt = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
 }, y = qt(Bt), Me = (e) => {
   let t = !1, n = e.map((r) => r !== void 0 ? (t = !0, r) : 1);
   return t ? n : e;
-}, Jt = {
+}, Wt = {
   mode: "rgb",
   channels: ["r", "g", "b", "alpha"],
   parse: [
     Dt,
-    Tt,
+    Ct,
     _t,
     Ot,
     Kt,
@@ -502,12 +502,12 @@ const Kt = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
     b: re(n)
   };
   return r !== void 0 && (i.alpha = r), i;
-}, $ = (e) => (e = e % 360) < 0 ? e + 360 : e, Wt = (e, t) => e.map((n, r, o) => {
+}, $ = (e) => (e = e % 360) < 0 ? e + 360 : e, Jt = (e, t) => e.map((n, r, o) => {
   if (n === void 0)
     return n;
   let i = $(n);
   return r === 0 || e[r - 1] === void 0 ? i : t(i - $(o[r - 1]));
-}).reduce((n, r) => !n.length || r === void 0 || n[n.length - 1] === void 0 ? (n.push(r), n) : (n.push(r + n[n.length - 1]), n), []), Be = (e) => Wt(e, (t) => Math.abs(t) <= 180 ? t : t - 360 * Math.sign(t)), Xt = (e, t) => {
+}).reduce((n, r) => !n.length || r === void 0 || n[n.length - 1] === void 0 ? (n.push(r), n) : (n.push(r + n[n.length - 1]), n), []), Be = (e) => Jt(e, (t) => Math.abs(t) <= 180 ? t : t - 360 * Math.sign(t)), Xt = (e, t) => {
   if (e.h === void 0 || t.h === void 0 || !e.s || !t.s)
     return 0;
   let n = $(e.h), r = $(t.h), o = Math.sin((r - n + 360) / 2 * Math.PI / 180);
@@ -529,7 +529,7 @@ const Kt = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
     { sin: 0, cos: 0 }
   ), n = Math.atan2(t.sin, t.cos) * 180 / Math.PI;
   return n < 0 ? 360 + n : n;
-}, W = ({ l: e, a: t, b: n, alpha: r }, o = "lch") => {
+}, J = ({ l: e, a: t, b: n, alpha: r }, o = "lch") => {
   t === void 0 && (t = 0), n === void 0 && (n = 0);
   let i = Math.sqrt(t * t + n * n), a = { mode: o, l: e, c: i };
   return i && (a.h = $(Math.atan2(n, t) * 180 / Math.PI)), r !== void 0 && (a.alpha = r), a;
@@ -542,7 +542,7 @@ const Kt = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
     b: t ? t * Math.sin(n / 180 * Math.PI) : 0
   };
   return r !== void 0 && (i.alpha = r), i;
-}, I = {
+}, T = {
   X: 0.3457 / 0.3585,
   Y: 1,
   Z: (1 - 0.3457 - 0.3585) / 0.3585
@@ -595,7 +595,7 @@ const Qt = (e, t) => {
       return e * 360;
   }
 }, en = new RegExp(
-  `^hsla?\\(\\s*${Ct}${T}${H}${T}${H}\\s*(?:,\\s*${be}\\s*)?\\)$`
+  `^hsla?\\(\\s*${It}${C}${H}${C}${H}\\s*(?:,\\s*${be}\\s*)?\\)$`
 ), tn = (e) => {
   let t = e.match(en);
   if (!t) return;
@@ -656,15 +656,15 @@ const rn = {
   average: {
     h: Ge
   }
-}, qe = Math.pow(29, 3) / Math.pow(3, 3), Je = Math.pow(6, 3) / Math.pow(29, 3);
-let oe = (e) => Math.pow(e, 3) > Je ? Math.pow(e, 3) : (116 * e - 16) / qe;
+}, qe = Math.pow(29, 3) / Math.pow(3, 3), We = Math.pow(6, 3) / Math.pow(29, 3);
+let oe = (e) => Math.pow(e, 3) > We ? Math.pow(e, 3) : (116 * e - 16) / qe;
 const on = ({ l: e, a: t, b: n, alpha: r }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let o = (e + 16) / 116, i = t / 500 + o, a = o - n / 200, s = {
     mode: "xyz50",
-    x: oe(i) * I.X,
-    y: oe(o) * I.Y,
-    z: oe(a) * I.Z
+    x: oe(i) * T.X,
+    y: oe(o) * T.Y,
+    z: oe(a) * T.Z
   };
   return r !== void 0 && (s.alpha = r), s;
 }, an = ({ x: e, y: t, z: n, alpha: r }) => {
@@ -683,9 +683,9 @@ const on = ({ l: e, a: t, b: n, alpha: r }) => {
     z: 0.013923904500943465 * t + 0.09708128566574634 * n + 0.7140993584005155 * r
   };
   return o !== void 0 && (i.alpha = o), i;
-}, ie = (e) => e > Je ? Math.cbrt(e) : (qe * e + 16) / 116, ln = ({ x: e, y: t, z: n, alpha: r }) => {
+}, ie = (e) => e > We ? Math.cbrt(e) : (qe * e + 16) / 116, ln = ({ x: e, y: t, z: n, alpha: r }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
-  let o = ie(e / I.X), i = ie(t / I.Y), a = ie(n / I.Z), s = {
+  let o = ie(e / T.X), i = ie(t / T.Y), a = ie(n / T.Z), s = {
     mode: "lab",
     l: 116 * i - 16,
     a: 500 * (o - i),
@@ -728,8 +728,8 @@ const dn = {
     rgb: (e) => sn(X(e))
   },
   fromMode: {
-    rgb: (e) => W(un(e)),
-    lab: W
+    rgb: (e) => J(un(e)),
+    lab: J
   },
   channels: ["l", "c", "h", "alpha"],
   ranges: {
@@ -815,8 +815,8 @@ const bn = {
     rgb: (e) => mn(X(e, "oklab"))
   },
   fromMode: {
-    rgb: (e) => W(pn(e), "oklch"),
-    oklab: (e) => W(e, "oklch")
+    rgb: (e) => J(pn(e), "oklch"),
+    oklab: (e) => J(e, "oklch")
   },
   parse: [yn],
   serialize: (e) => `oklch(${e.l !== void 0 ? e.l : "none"} ${e.c !== void 0 ? e.c : "none"} ${e.h !== void 0 ? e.h : "none"}${e.alpha < 1 ? ` / ${e.alpha}` : ""})`,
@@ -825,7 +825,7 @@ const bn = {
     c: [0, 0.4],
     h: [0, 360]
   }
-}, xn = (e) => Math.max(0, Math.min(1, e || 0)), D = (e) => Math.round(xn(e) * 255), We = x("rgb"), Xe = (e) => {
+}, xn = (e) => Math.max(0, Math.min(1, e || 0)), D = (e) => Math.round(xn(e) * 255), Je = x("rgb"), Xe = (e) => {
   if (e === void 0)
     return;
   let t = D(e.r), n = D(e.g), r = D(e.b);
@@ -835,7 +835,7 @@ const bn = {
     return;
   let t = D(e.alpha !== void 0 ? e.alpha : 1);
   return Xe(e) + (256 | t).toString(16).slice(1);
-}, kn = (e) => Xe(We(e)), vn = (e) => Mn(We(e)), Ye = x("rgb"), Ue = (e) => {
+}, kn = (e) => Xe(Je(e)), vn = (e) => Mn(Je(e)), Ye = x("rgb"), Ue = (e) => {
   const t = {
     mode: e.mode,
     r: Math.max(0, Math.min(e.r !== void 0 ? e.r : 0, 1)),
@@ -887,9 +887,9 @@ function Nn(e, t = "lch", n = "rgb") {
   );
 }
 xe(bn);
-xe(Jt);
+xe(Wt);
 xe(rn);
-const sr = 0.37, Qe = x("oklch"), et = x("rgb"), On = x("hsl"), In = ke("rgb");
+const sr = 0.37, Qe = x("oklch"), et = x("rgb"), On = x("hsl"), Tn = ke("rgb");
 function ee(e) {
   return {
     mode: "oklch",
@@ -899,7 +899,7 @@ function ee(e) {
     alpha: e.a / 100
   };
 }
-function Tn(e) {
+function Cn(e) {
   return {
     l: (e.l ?? 0) * 100,
     c: e.c ?? 0,
@@ -953,7 +953,7 @@ function dr(e) {
     l: e.l / 100,
     alpha: e.a / 100
   }, n = Qe(t);
-  return n ? Tn(n) : { l: 0, c: 0, h: 0, a: e.a };
+  return n ? Cn(n) : { l: 0, c: 0, h: 0, a: e.a };
 }
 function hr(e) {
   const t = ee(e), n = Nn(t, "oklch", "rgb");
@@ -966,9 +966,9 @@ function hr(e) {
 }
 function pr(e) {
   const t = et(ee(e));
-  return t ? In(t) : !1;
+  return t ? Tn(t) : !1;
 }
-function Cn(e, t) {
+function In(e, t) {
   const n = parseFloat(e);
   let r;
   switch (t.toLowerCase()) {
@@ -1011,19 +1011,19 @@ function ue(e) {
     const m = k.match(/^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(deg|rad|grad|turn)?$/i);
     if (!m) return null;
     const A = m[1], j = m[2] ?? "deg";
-    v = Cn(A, j);
+    v = In(A, j);
   }
-  let C = 100;
+  let I = 100;
   if (a !== null) {
     const m = f(a.trim());
     if (!m) return null;
-    C = m.isPercent ? m.value : m.value * 100;
+    I = m.isPercent ? m.value : m.value * 100;
   }
   return {
     l: d,
     c: p,
     h: v,
-    a: C
+    a: I
   };
 }
 function tt(e = g()) {
@@ -1074,7 +1074,7 @@ function yr(e, t) {
   } catch {
   }
 }
-const ae = 60, Te = 320, Ce = 240, Ae = 1600, Pe = 1200, _n = { width: 1024 * 0.8, height: 768 * 0.8 };
+const ae = 60, Ce = 320, Ie = 240, Ae = 1600, Pe = 1200, _n = { width: 1024 * 0.8, height: 768 * 0.8 };
 function Hn() {
   return typeof window > "u" ? _n : st(
     Math.min(1200, 0.8 * window.innerWidth),
@@ -1083,10 +1083,10 @@ function Hn() {
 }
 const _e = 32;
 function st(e, t) {
-  const n = typeof window < "u" ? window.innerWidth : Ae, r = typeof window < "u" ? window.innerHeight : Pe, o = Math.max(Te, Math.min(Ae, n - _e)), i = Math.max(Ce, Math.min(Pe, r - _e));
+  const n = typeof window < "u" ? window.innerWidth : Ae, r = typeof window < "u" ? window.innerHeight : Pe, o = Math.max(Ce, Math.min(Ae, n - _e)), i = Math.max(Ie, Math.min(Pe, r - _e));
   return {
-    width: Math.max(Te, Math.min(e, o)),
-    height: Math.max(Ce, Math.min(t, i))
+    width: Math.max(Ce, Math.min(e, o)),
+    height: Math.max(Ie, Math.min(t, i))
   };
 }
 function br(e) {
@@ -1337,7 +1337,7 @@ function qn(e, t = b()) {
     shikiTheme: String(e.shikiTheme ?? t.defaultShikiTheme)
   };
 }
-function Jn(e, t, n, r) {
+function Wn(e, t, n, r) {
   const o = t.length;
   return e === "bg" ? t[V(n, o)] ?? "#000000" : e === "fg" ? t[V(r, o)] ?? "#ffffff" : t[V(e, o)] ?? "#000000";
 }
@@ -1345,7 +1345,7 @@ function V(e, t) {
   return e >= 0 && e < t ? e : 0;
 }
 function pe(e, t, n, r, o, i, a) {
-  if (En(e)) return Jn(e, t, n, r);
+  if (En(e)) return Wn(e, t, n, r);
   if (ce(e) && de(e))
     return a ? e.literal[a] : `light-dark(${e.literal.light}, ${e.literal.dark})`;
   if (ce(e) && !de(e)) return e.literal;
@@ -1357,7 +1357,7 @@ function pe(e, t, n, r, o, i, a) {
     }
   return null;
 }
-function Wn(e) {
+function Jn(e) {
   const t = e.panelSettings.colorMode;
   return t ? t.defaultMode : "light";
 }
@@ -1372,7 +1372,7 @@ function Or(e, t, n = b(), r, o) {
     t.foreground,
     r,
     o,
-    Wn(n)
+    Jn(n)
   ) ?? "#000000";
 }
 const N = "color-scheme", ge = "light dark";
@@ -1405,7 +1405,7 @@ function Ve(e, t = b(), n, r, o, i) {
       );
       h !== null && s.push([u, h]);
     }
-    Y(e, t) && (s.push([N, ge]), i && Ie(i));
+    Y(e, t) && (s.push([N, ge]), i && Te(i));
     try {
       n.apply(s);
     } catch (f) {
@@ -1431,7 +1431,7 @@ function Ve(e, t = b(), n, r, o, i) {
     );
     d !== null && _(f, d);
   }
-  Y(e, t) && (_(N, ge), i && Ie(i));
+  Y(e, t) && (_(N, ge), i && Te(i));
 }
 function Xn(e, t, n) {
   const r = n ?? g(), o = r.applySink, i = r.tabs.find((u) => u.id === "color"), a = b(r);
@@ -1460,7 +1460,7 @@ function Xn(e, t, n) {
     } else
       ct(r.storagePrefix);
 }
-function Ir(e, t) {
+function Tr(e, t) {
   const n = t ?? g();
   Xn(e.color, e.secondary, n), Yn(e, n);
 }
@@ -1580,7 +1580,7 @@ function Qn(e, t, n) {
   }
   e.length > 0 && n && ct(n);
 }
-function Tr(e, t) {
+function Cr(e, t) {
   const n = t ?? g(), r = n.applySink, o = lt(n);
   if (r) {
     const a = [];
@@ -1669,7 +1669,7 @@ function me(e, t, n) {
     shikiTheme: typeof e.shikiTheme == "string" && e.shikiTheme.length > 0 ? e.shikiTheme : t.shikiTheme
   };
 }
-const Cr = {
+const Ir = {
   "text-caption": "text-xs",
   "text-small": "text-sm",
   "text-body": "text-base",
@@ -1744,7 +1744,7 @@ function or(e = localStorage, t, n = b(), r = g()) {
     if (d && typeof d == "object") {
       const h = d, p = ye(h, n, t, r);
       if (p !== null) {
-        const k = h.typography !== void 0 ? h.typography : h.font, v = JSON.stringify(k ?? {}) !== JSON.stringify(p.typography), C = h.color, m = Array.isArray(C?.palette) && C.palette.length !== n.paletteSize;
+        const k = h.typography !== void 0 ? h.typography : h.font, v = JSON.stringify(k ?? {}) !== JSON.stringify(p.typography), I = h.color, m = Array.isArray(I?.palette) && I.palette.length !== n.paletteSize;
         if (v || h.typography === void 0 || m)
           try {
             e.setItem(a, JSON.stringify(p));
@@ -1915,7 +1915,7 @@ export {
   Yn as I,
   Zn as J,
   Hr as K,
-  Tr as L,
+  Cr as L,
   sr as M,
   $r as N,
   Mr as O,
@@ -1928,7 +1928,7 @@ export {
   R as V,
   rt as W,
   Or as X,
-  Cr as Z,
+  Ir as Z,
   tt as a,
   nt as b,
   b as c,
@@ -1950,9 +1950,9 @@ export {
   V as s,
   ue as t,
   Nr as u,
-  Wn as v,
+  Jn as v,
   wr as w,
-  Ir as x,
+  Tr as x,
   _r as y,
   Hn as z
 };

package/dist/utils/sanitize-html.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Allowlist HTML sanitizer for host-supplied "token notes" content (#515).
+ *
+ * Security boundary: a strict ALLOWLIST of tags and attributes, not a
+ * blacklist — anything not explicitly permitted is stripped, including
+ * tags/attributes a blacklist would never have anticipated (custom elements,
+ * future HTML, namespaced foreign-content attributes). This is the package's
+ * only HTML sanitizer (see `controls/sanitize-css-value.ts` for the separate
+ * CSS-value sanitizer used elsewhere) and it is the thing standing between a
+ * host's `notesExtras.html` string and `dangerouslySetInnerHTML` in
+ * `tabs/notes-tab.tsx`.
+ *
+ * Implementation: parse with the browser's own `DOMParser` (dependency-free —
+ * no external sanitizer library), then rebuild a FRESH tree by walking the
+ * parsed result and copying across only allowlisted tags/attributes. Using
+ * the real HTML parser means malformed markup (mismatched tags, unclosed
+ * elements, HTML entities) is resolved into a well-formed DOM tree by the
+ * browser itself before the allowlist walk ever runs — the walk only ever
+ * sees valid nodes, never raw markup text it would have to re-parse or guess
+ * at (the classic weakness of a regex/string-replace "sanitizer").
+ */
+/**
+ * Sanitize host-supplied HTML (`TabConfig.notesExtras.html`) against the
+ * strict allowlist above. Returns an HTML string safe to pass to
+ * `dangerouslySetInnerHTML`.
+ */
+export declare function sanitizeHtml(html: string): string;

package/dist/utils/unit-cycle.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Helpers for the opt-in click-to-cycle unit suffix on `length`-kind value
+ * rows (#519). Pure, DOM-free — safe to import from any editor component.
+ *
+ * `deriveCyclableUnit` is the single source of the opt-in/divergence policy;
+ * both editor call sites (`tabs/_generic-item-editor.tsx` and
+ * `tabs/generic-tab.tsx`) call it instead of re-deriving the same state.
+ */
+/**
+ * Split a stored length value (e.g. `"1.5rem"`, `".5rem"`) into its numeric
+ * magnitude and unit suffix. Accepts the same leading-number shapes as the
+ * platform's own `parseFloat` (leading-dot decimals included, e.g. `.5`) so
+ * this parser and `parseFloat(value)` never disagree on the same input.
+ * Mirrors (and slightly widens) the leading-number regex in
+ * `tokens/manifest.ts#parseNumericValue`; also returns the trailing suffix
+ * text so the interactive unit control can display the value's ACTUAL
+ * stored suffix rather than assuming the item's declared `type.unit` (a
+ * stored value can diverge from the declared unit — imported data, a
+ * manifest change, etc.).
+ *
+ * Returns `null` when the value has no leading number (e.g. a `clamp()`
+ * expression on a readonly row).
+ */
+export declare function splitLengthValue(value: string): {
+    magnitude: number;
+    suffix: string;
+} | null;
+/**
+ * Resolve the next unit when cycling through a declared `units` list
+ * (wrapping). When `currentUnit` is not present in `units` — a stored value
+ * whose suffix diverged from the declared list — the first activation lands
+ * on `units[0]` rather than guessing or throwing.
+ */
+export declare function nextCyclableUnit(units: readonly string[], currentUnit: string): string;
+export interface CyclableUnitState {
+    /** Declared cyclable unit list — defined only when 2+ entries were declared. */
+    cyclableUnits: readonly string[] | undefined;
+    /** True iff `cyclableUnits` is defined (2+ entries) — the row is interactive.
+     *  A present-but-single-entry (or omitted) `units` list is a DELIBERATE
+     *  "not opted in yet" signal, not a config error — it keeps today's static,
+     *  non-interactive unit span pixel-identical. */
+    isCyclableUnit: boolean;
+    /** Unit suffix to display, and to cycle FROM on the next activation. */
+    effectiveUnit: string;
+    /**
+     * Magnitude parsed by the SAME pass that produced `effectiveUnit` — reuse
+     * this (not a separately-computed `parseFloat(value)`) when emitting a
+     * post-cycle value, so the suffix-detection parse and the magnitude the
+     * cycle emits can never disagree. `null` when the stored value did not
+     * parse as a length at all; callers should fall back to their own
+     * last-known-good numeric state (e.g. the number input's draft) in that
+     * case.
+     */
+    parsedMagnitude: number | null;
+}
+/**
+ * Derive the full opt-in/display/divergence state for a `length`-kind row's
+ * unit suffix from its declared `unit`/`units` and its current stored
+ * `value`. Single source of truth for both editor call sites.
+ */
+export declare function deriveCyclableUnit(unit: string, units: readonly string[] | undefined, value: string): CyclableUnitState;