@takazudo/zdtp 0.4.14 → 0.5.0

package/dist/{panel-config-SgA84Uqe.js → panel-config-BSu6TUht.js}

@@ -1,70 +1,71 @@
-class b extends Error {
+import { DEFAULT_STORAGE_PREFIX as K, resolveToggleEventName as N } from "./constants.js";
+class k extends Error {
   constructor(t) {
-    super(t), this.name = "TierResolverError", Object.setPrototypeOf(this, b.prototype);
+    super(t), this.name = "TierResolverError", Object.setPrototypeOf(this, k.prototype);
   }
 }
-function v(e, t) {
+function A(e, t) {
   return e.tiers.find((n) => n.id === t);
 }
 function $(e, t) {
   return e.items.find((n) => n.id === t);
 }
-function Q(e, t, n, i) {
-  const g = v(e, t);
-  if (!g)
-    throw new b(
-      `Tier "${t}" not found in tab "${e.id}". Available tiers: ${e.tiers.map((l) => l.id).join(", ")}.`
+function ee(e, t, n, i) {
+  const u = A(e, t);
+  if (!u)
+    throw new k(
+      `Tier "${t}" not found in tab "${e.id}". Available tiers: ${e.tiers.map((f) => f.id).join(", ")}.`
     );
-  const c = $(g, n);
-  if (!c)
-    throw new b(
+  const d = $(u, n);
+  if (!d)
+    throw new k(
       `Item "${n}" not found in tier "${t}" of tab "${e.id}".`
     );
-  const a = i[t]?.[n];
-  if (g.referencesTier !== void 0) {
-    const l = g.referencesTier, f = v(e, l);
-    if (!f)
-      throw new b(
-        `Tier "${t}" declares referencesTier "${l}" but that tier does not exist in tab "${e.id}".`
+  const r = i[t]?.[n];
+  if (u.referencesTier !== void 0) {
+    const f = u.referencesTier, l = A(e, f);
+    if (!l)
+      throw new k(
+        `Tier "${t}" declares referencesTier "${f}" but that tier does not exist in tab "${e.id}".`
       );
-    const o = $(f, a ?? n);
-    if (!o) {
-      const d = $(f, c.default) ?? $(f, n) ?? f.items[0];
-      if (!d)
-        throw new b(
-          `Referenced tier "${l}" has no items; cannot resolve fallback for item "${n}" in tier "${t}" of tab "${e.id}".`
+    const a = $(l, r ?? n);
+    if (!a) {
+      const g = $(l, d.default) ?? $(l, n) ?? l.items[0];
+      if (!g)
+        throw new k(
+          `Referenced tier "${f}" has no items; cannot resolve fallback for item "${n}" in tier "${t}" of tab "${e.id}".`
         );
-      return { kind: "ref", targetCssVar: d.cssVar };
+      return { kind: "ref", targetCssVar: g.cssVar };
     }
-    return { kind: "ref", targetCssVar: o.cssVar };
+    return { kind: "ref", targetCssVar: a.cssVar };
   }
-  return a !== void 0 ? c.pill && a === c.pill.value ? { kind: "literal", value: c.pill.value } : { kind: "literal", value: a } : c.pill ? { kind: "literal", value: c.pill.customDefault } : { kind: "literal", value: c.default };
+  return r !== void 0 ? d.pill && r === d.pill.value ? { kind: "literal", value: d.pill.value } : { kind: "literal", value: r } : d.pill ? { kind: "literal", value: d.pill.customDefault } : { kind: "literal", value: d.default };
 }
-function I(e) {
+function te(e) {
   return e.kind === "literal" ? e.value : `var(${e.targetCssVar})`;
 }
-function N(e, t, n = [t]) {
+function M(e, t, n = [t]) {
   const i = e.tab === void 0 || e.tab === t.id ? t : n.find((s) => s.id === e.tab);
   if (!i)
-    throw new b(
+    throw new k(
       `Cross-tab ref target tab "${e.tab}" not found. Available tabs: ${n.map((s) => s.id).join(", ")}.`
     );
-  const g = v(i, e.tier);
-  if (!g)
-    throw new b(
+  const u = A(i, e.tier);
+  if (!u)
+    throw new k(
       `Cross-tab ref target tier "${e.tier}" not found in tab "${i.id}". Available tiers: ${i.tiers.map((s) => s.id).join(", ")}.`
     );
-  const c = $(g, e.item);
-  if (!c)
-    throw new b(
-      `Cross-tab ref target item "${e.item}" not found in tier "${e.tier}" of tab "${i.id}". Available items: ${g.items.map((s) => s.id).join(", ")}.`
+  const d = $(u, e.item);
+  if (!d)
+    throw new k(
+      `Cross-tab ref target item "${e.item}" not found in tier "${e.tier}" of tab "${i.id}". Available items: ${u.items.map((s) => s.id).join(", ")}.`
     );
-  return c.cssVar;
+  return d.cssVar;
 }
-function ee(e, t) {
+function ne(e, t) {
   return e.paletteCssVarTemplate.replace("{n}", String(t));
 }
-const z = /* @__PURE__ */ new Set([
+const D = /* @__PURE__ */ new Set([
   "aliceblue",
   "antiquewhite",
   "aqua",
@@ -222,38 +223,38 @@ const z = /* @__PURE__ */ new Set([
   "revert-layer"
 ]);
 function H(e) {
-  return e.startsWith("#") || e.includes("(") || z.has(e.toLowerCase());
+  return e.startsWith("#") || e.includes("(") || D.has(e.toLowerCase());
 }
-function K(e, t, n, i) {
-  const g = [], c = e.indexOf(":");
-  if (c !== -1) {
-    const a = e.slice(0, c), l = e.slice(c + 1), f = t.find((r) => r.tier === a);
-    f && g.push({ tab: f.tab, tier: f.tier, item: l });
+function B(e, t, n, i) {
+  const u = [], d = e.indexOf(":");
+  if (d !== -1) {
+    const r = e.slice(0, d), f = e.slice(d + 1), l = t.find((o) => o.tier === r);
+    l && u.push({ tab: l.tab, tier: l.tier, item: f });
   }
   const [s] = t;
-  g.push({ tab: s.tab, tier: s.tier, item: e });
-  for (const a of g)
+  u.push({ tab: s.tab, tier: s.tier, item: e });
+  for (const r of u)
     try {
-      return N(a, n, i), { ref: a };
+      return M(r, n, i), { ref: r };
     } catch {
     }
-  return { ref: g[0] };
+  return { ref: u[0] };
 }
-function L(e, t, n, i, g, c) {
+function L(e, t, n, i, u, d) {
   const s = t.get(e.default);
-  return s !== void 0 ? s : e.default === "bg" || e.default === "fg" ? e.default : n && n.length > 0 && !H(e.default) ? K(e.default, n, i, g) : c ? (console.warn(
+  return s !== void 0 ? s : e.default === "bg" || e.default === "fg" ? e.default : n && n.length > 0 && !H(e.default) ? B(e.default, n, i, u) : d ? (console.warn(
     `[design-token-panel] semantic item "${e.id}" default "${e.default}" names no palette item; falling back to palette index 0`
   ), 0) : { literal: e.default };
 }
-function O(e, t = [e]) {
+function V(e, t = [e]) {
   const n = e.colorExtras;
   if (!n) return;
   const i = e.tiers.find(
-    (o) => !o.referencesTier && !o.semantic && o.items.length > 0 && o.items[0].type.kind === "color"
-  ), g = e.tiers.find(
-    (o) => i && o.referencesTier === i.id || o.semantic === !0
+    (a) => !a.referencesTier && !a.semantic && a.items.length > 0 && a.items[0].type.kind === "color"
+  ), u = e.tiers.find(
+    (a) => i && a.referencesTier === i.id || a.semantic === !0
   );
-  if (!i && !g)
+  if (!i && !u)
     return {
       id: n.id,
       label: n.label,
@@ -267,20 +268,20 @@ function O(e, t = [e]) {
       colorSchemes: n.colorSchemes,
       panelSettings: n.panelSettings
     };
-  const c = i?.items ?? [], s = c.length, a = c[0] ? c[0].cssVar.replace(/\d+$/, "{n}") : "--zudo-stub-p{n}", l = /* @__PURE__ */ new Map();
-  for (let o = 0; o < c.length; o++)
-    l.set(c[o].id, o);
-  const f = {}, r = {};
-  if (g) {
-    const o = !g.semantic, d = n.semanticDefaults;
-    for (const u of g.items)
-      r[u.id] = u.cssVar, f[u.id] = d && u.id in d ? d[u.id] : L(
-        u,
-        l,
-        g.referencesRamps,
+  const d = i?.items ?? [], s = d.length, r = d[0] ? d[0].cssVar.replace(/\d+$/, "{n}") : "--zudo-stub-p{n}", f = /* @__PURE__ */ new Map();
+  for (let a = 0; a < d.length; a++)
+    f.set(d[a].id, a);
+  const l = {}, o = {};
+  if (u) {
+    const a = !u.semantic, g = n.semanticDefaults;
+    for (const c of u.items)
+      o[c.id] = c.cssVar, l[c.id] = g && c.id in g ? g[c.id] : L(
+        c,
+        f,
+        u.referencesRamps,
         e,
         t,
-        o
+        a
       );
   }
   return {
@@ -288,44 +289,44 @@ function O(e, t = [e]) {
     label: n.label,
     paletteSize: s,
     baseRoles: n.baseRoles,
-    paletteCssVarTemplate: a,
-    semanticDefaults: f,
-    semanticCssNames: r,
+    paletteCssVarTemplate: r,
+    semanticDefaults: l,
+    semanticCssNames: o,
     baseDefaults: n.baseDefaults,
     defaultShikiTheme: n.defaultShikiTheme,
     colorSchemes: n.colorSchemes,
     panelSettings: n.panelSettings
   };
 }
-function te(e) {
+function re(e) {
   const t = e.find((n) => n.id === "color");
   if (t)
-    return O(t, e);
+    return V(t, e);
 }
-function F(e) {
+function J(e) {
   const t = e.find((n) => n.id === "color-secondary");
-  return t ? O(t, e) ?? null : null;
+  return t ? V(t, e) ?? null : null;
 }
 function S(e, t) {
   if (Object.is(e, t)) return !0;
   if (e === null || t === null || typeof e != typeof t || typeof e != "object") return !1;
   if (Array.isArray(e)) {
     if (!Array.isArray(t) || e.length !== t.length) return !1;
-    for (let c = 0; c < e.length; c++)
-      if (!S(e[c], t[c])) return !1;
+    for (let d = 0; d < e.length; d++)
+      if (!S(e[d], t[d])) return !1;
     return !0;
   }
   if (Array.isArray(t)) return !1;
   const n = Object.keys(e), i = Object.keys(t);
   if (n.length !== i.length) return !1;
-  const g = new Set(i);
-  for (const c of n)
-    if (!g.has(c) || !S(e[c], t[c]))
+  const u = new Set(i);
+  for (const d of n)
+    if (!u.has(d) || !S(e[d], t[d]))
       return !1;
   return !0;
 }
-const V = {
-  storagePrefix: "zudo-design-token-panel",
+const q = {
+  storagePrefix: K,
   consoleNamespace: "zudo",
   modalClassPrefix: "zudo-design-token-panel-modal",
   schemaId: "zudo-design-tokens/v1",
@@ -349,7 +350,7 @@ function m() {
     colorSchemeOwners: /* @__PURE__ */ new Set()
   }, e[R] = t), t;
 }
-function J(e) {
+function F(e) {
   return {
     instanceId: e,
     open() {
@@ -371,7 +372,7 @@ function J(e) {
     }
   };
 }
-function ne(e) {
+function oe(e) {
   m().lifecycleHooks = {
     configured: e.configured,
     open: e.open,
@@ -380,40 +381,40 @@ function ne(e) {
     destroy: e.destroy
   };
 }
-function re(e) {
+function ie(e) {
   const t = m(), n = e.storagePrefix, i = t.instances.get(n);
   if (i) {
-    const f = (r) => ({ ...r, applySink: void 0 });
-    if (S(f(i.suppliedConfig), f(e)))
+    const l = (o) => ({ ...o, applySink: void 0 });
+    if (S(l(i.suppliedConfig), l(e)))
       return t.defaultPrefix = n, i.handle;
     throw new Error(
       `[design-token-panel] configurePanel() was already called with different values for storagePrefix "${n}". Configuration is one-shot per prefix per page lifecycle. To re-configure this prefix, call handle.destroy() first, then configurePanel() again. (Use a distinct storagePrefix for a second panel instance.)`
     );
   }
-  const g = t.pendingColorPresets, c = g ? { ...e, colorPresets: g } : { ...e };
+  const u = t.pendingColorPresets, d = u ? { ...e, colorPresets: u } : { ...e };
   t.pendingColorPresets = null;
-  const s = t.instances.size === 0, a = s ? [...t.pendingPostConfigureHooks] : [];
+  const s = t.instances.size === 0, r = s ? [...t.pendingPostConfigureHooks] : [];
   s && (t.pendingPostConfigureHooks.length = 0);
-  const l = {
-    config: c,
+  const f = {
+    config: d,
     // Snapshot the as-supplied config before any runtime merges. Used by the
     // idempotency guard so view-transition re-calls with the original inline
     // config keep passing even after setPanelColorPresets mutates `config`.
     suppliedConfig: { ...e },
     pendingColorPresets: null,
-    postConfigureHooks: a,
-    handle: J(n)
+    postConfigureHooks: r,
+    handle: F(n)
   };
-  t.instances.set(n, l), t.defaultPrefix = n;
-  for (const f of l.postConfigureHooks)
-    f();
-  return t.lifecycleHooks.configured?.(n), l.handle;
+  t.instances.set(n, f), t.defaultPrefix = n;
+  for (const l of f.postConfigureHooks)
+    l();
+  return t.lifecycleHooks.configured?.(n), f.handle;
 }
 function x() {
   const e = m();
   return e.defaultPrefix === null ? null : e.instances.get(e.defaultPrefix) ?? null;
 }
-function oe(e) {
+function se(e) {
   const t = x();
   if (t === null) {
     const n = m();
@@ -423,96 +424,110 @@ function oe(e) {
   }
   t.postConfigureHooks.includes(e) || (t.postConfigureHooks.push(e), e());
 }
-function _() {
-  return x()?.config ?? V;
+function j() {
+  return x()?.config ?? q;
 }
-function ie() {
+function ae() {
   return [...m().instances.values()].map((e) => e.config);
 }
-function se(e) {
+function le(e) {
   return m().instances.get(e)?.config ?? null;
 }
-function ae() {
+function fe() {
   const e = m();
-  e.instances.clear(), e.defaultPrefix = null, e.pendingColorPresets = null, e.pendingPostConfigureHooks.length = 0, A().clear();
+  e.instances.clear(), e.defaultPrefix = null, e.pendingColorPresets = null, e.pendingPostConfigureHooks.length = 0, E().clear();
 }
-function A() {
+function E() {
   const e = m();
   return e.colorSchemeOwners || (e.colorSchemeOwners = /* @__PURE__ */ new Set()), e.colorSchemeOwners;
 }
-function le(e) {
-  A().add(e);
-}
-function fe(e) {
-  A().delete(e);
-}
 function ce(e) {
-  return A().has(e);
+  E().add(e);
 }
-function ge(e = _()) {
-  return F(e.tabs);
+function ge(e) {
+  E().delete(e);
 }
 function de(e) {
+  return E().has(e);
+}
+function ue(e = j()) {
+  return J(e.tabs);
+}
+function pe(e) {
   return `${e.storagePrefix}-state-v2`;
 }
-function ue(e) {
+function ye(e) {
   return `${e.storagePrefix}-state-v3`;
 }
-function pe(e) {
+function me(e) {
   return `${e.storagePrefix}-state-v4`;
 }
-function ye(e) {
+function he(e) {
   return `${e.storagePrefix}-state`;
 }
-function me(e) {
+function we(e) {
   return `${e.storagePrefix}-open`;
 }
-function he(e) {
+function be(e) {
   return `${e.storagePrefix}-position`;
 }
-function we(e) {
+function ke(e) {
   return `${e.storagePrefix}-size`;
 }
-function be(e) {
+function $e(e) {
+  return `${e.storagePrefix}-dock`;
+}
+function Ce(e) {
+  return `${e.storagePrefix}-dock-size`;
+}
+function Pe(e) {
   return `${e.storagePrefix}-density`;
 }
-function ke(e) {
+function ve(e) {
+  return `${e.storagePrefix}-specimen`;
+}
+function Ee(e, t) {
+  return `${e.storagePrefix}-snapshot-${t}`;
+}
+function Ae(e) {
+  return `${e.storagePrefix}-last-applied`;
+}
+function Se(e) {
   return `${e.storagePrefix}:visible`;
 }
-function $e(e) {
+function xe(e) {
   return `${e.storagePrefix}:autoload`;
 }
-function Ce(e) {
+function je(e) {
   return `${e.storagePrefix}-root`;
 }
-const q = V.storagePrefix, G = "toggle-design-token-panel";
-function Pe(e) {
-  return e.storagePrefix === q ? G : e.toggleEvent ?? `toggle-${e.storagePrefix}`;
+function Te(e) {
+  return N(e);
 }
-const B = "__zdtp:open-state-changed";
-function Ee(e) {
-  return `${B}:${e.storagePrefix}`;
+const G = "__zdtp:open-state-changed";
+function Oe(e) {
+  return `${G}:${e.storagePrefix}`;
 }
-function Ae(e, t) {
+function Re(e, t) {
   return `${e.modalClassPrefix}${t}`;
 }
-function ve(e) {
+function Ve(e) {
   return `${e.exportFilenameBase}.json`;
 }
-const D = /* @__PURE__ */ Symbol.for("@takazudo/zdtp:global-alias-marker");
-function M(e) {
+const _ = /* @__PURE__ */ Symbol.for("@takazudo/zdtp:global-alias-marker");
+function z(e) {
   return typeof e == "object" && e !== null || typeof e == "function";
 }
 function U(e) {
-  if (!M(e)) return !1;
+  if (!z(e)) return !1;
   try {
-    return e[D] === !0;
+    return e[_] === !0;
   } catch {
     return !1;
   }
 }
 function W(e) {
-  if (!M(e)) return !1;
+  if (!z(e)) return !1;
   try {
     const t = e;
     return typeof t.show == "function" && typeof t.hide == "function" && typeof t.toggle == "function";
@@ -520,7 +535,7 @@ function W(e) {
     return !1;
   }
 }
-function Se(e) {
+function _e(e) {
   if (typeof window > "u") return;
   const t = window, n = t.zdtp;
   if (n !== void 0) {
@@ -532,9 +547,9 @@ function Se(e) {
     return;
   }
   const i = { ...e };
-  i[D] = !0, t.zdtp = i;
+  i[_] = !0, t.zdtp = i;
 }
-function xe(e) {
+function ze(e) {
   if (e === null || typeof e != "object" || Array.isArray(e))
     throw new Error("[design-token-panel] PanelConfig must be a non-null object");
   const t = e;
@@ -586,6 +601,18 @@ function xe(e) {
         );
     }
   }
+  if (t.dock !== void 0) {
+    if (t.dock === null || typeof t.dock != "object" || Array.isArray(t.dock))
+      throw new Error("[design-token-panel] PanelConfig.dock must be a plain object");
+    const n = t.dock;
+    for (const i of Object.keys(n))
+      if (i !== "reflow")
+        throw new Error(`[design-token-panel] PanelConfig.dock.${i} is not a supported field`);
+    if (n.reflow !== void 0 && n.reflow !== "body-margin" && n.reflow !== "none")
+      throw new Error(
+        '[design-token-panel] PanelConfig.dock.reflow must be "body-margin" or "none" when set'
+      );
+  }
   if (t.autoRememberOnOpen !== void 0 && typeof t.autoRememberOnOpen != "boolean")
     throw new Error(
       `[design-token-panel] PanelConfig.autoRememberOnOpen must be a boolean when set (got ${typeof t.autoRememberOnOpen})`
@@ -641,186 +668,225 @@ function X(e, t, n) {
     throw new Error(
       `[design-token-panel] PanelConfig.tabs["${e}"].tiers must be an array`
     );
-  const i = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Map();
+  const i = /* @__PURE__ */ new Set(), u = /* @__PURE__ */ new Map();
   for (const s of t.tiers) {
     if (s === null || typeof s != "object" || Array.isArray(s))
       throw new Error(
         `[design-token-panel] PanelConfig.tabs["${e}"].tiers: each tier must be a non-null object`
       );
-    const a = s;
-    if (typeof a.id != "string" || a.id.length === 0)
+    const r = s;
+    if (typeof r.id != "string" || r.id.length === 0)
       throw new Error(
         `[design-token-panel] PanelConfig.tabs["${e}"].tiers: each tier must have a non-empty string id`
       );
-    if (i.has(a.id))
+    if (i.has(r.id))
+      throw new Error(
+        `[design-token-panel] PanelConfig.tabs["${e}"]: duplicate tier id "${r.id}"`
+      );
+    if (i.add(r.id), r.semantic !== void 0 && r.semantic !== !0)
+      throw new Error(
+        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${r.id}"].semantic must be exactly \`true\` when present (got ${JSON.stringify(r.semantic)})`
+      );
+    const f = /* @__PURE__ */ new Set([
+      "size",
+      "line-height",
+      "family",
+      "weight",
+      "bar",
+      "radius",
+      "duration"
+    ]);
+    if (r.preview !== void 0 && !f.has(r.preview))
       throw new Error(
-        `[design-token-panel] PanelConfig.tabs["${e}"]: duplicate tier id "${a.id}"`
+        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${r.id}"].preview has unsupported value ${JSON.stringify(r.preview)}`
       );
-    if (i.add(a.id), a.semantic !== void 0 && a.semantic !== !0)
+    if (r.previewBase !== void 0 && (typeof r.previewBase != "string" || !r.previewBase.startsWith("--") || r.previewBase.length <= 2))
       throw new Error(
-        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${a.id}"].semantic must be exactly \`true\` when present (got ${JSON.stringify(a.semantic)})`
+        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${r.id}"].previewBase must be a CSS custom property name`
       );
-    if (!Array.isArray(a.items))
+    if (r.previewBase !== void 0 && r.preview !== "line-height")
       throw new Error(
-        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${a.id}"].items must be an array`
+        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${r.id}"].previewBase is only valid with preview "line-height"`
+      );
+    if (!Array.isArray(r.items))
+      throw new Error(
+        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${r.id}"].items must be an array`
       );
     let l;
-    for (const f of a.items) {
-      if (f === null || typeof f != "object" || Array.isArray(f)) continue;
-      const o = f.type;
+    for (const o of r.items) {
       if (o === null || typeof o != "object" || Array.isArray(o)) continue;
-      const d = o.kind;
-      if (typeof d == "string") {
+      const g = o.type;
+      if (g === null || typeof g != "object" || Array.isArray(g)) continue;
+      const c = g.kind;
+      if (typeof c == "string") {
         if (l === void 0)
-          l = d;
-        else if (l !== d)
+          l = c;
+        else if (l !== c)
           throw new Error(
-            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${a.id}"]: mixed item kinds — found "${l}" and "${d}" in the same tier (all items must share the same kind)`
+            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${r.id}"]: mixed item kinds — found "${l}" and "${c}" in the same tier (all items must share the same kind)`
           );
       }
     }
-    l !== void 0 && g.set(a.id, l);
+    l !== void 0 && u.set(r.id, l);
   }
-  const c = /* @__PURE__ */ new Set();
+  const d = /* @__PURE__ */ new Set();
   for (const s of t.tiers) {
-    const a = s, l = a.id;
-    for (const f of a.items) {
-      if (f === null || typeof f != "object" || Array.isArray(f))
+    const r = s, f = r.id;
+    for (const l of r.items) {
+      if (l === null || typeof l != "object" || Array.isArray(l))
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].items: each item must be a non-null object`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].items: each item must be a non-null object`
         );
-      const r = f;
-      if (typeof r.id != "string" || r.id.length === 0)
+      const o = l;
+      if (typeof o.id != "string" || o.id.length === 0)
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].items: each item must have a non-empty string id`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].items: each item must have a non-empty string id`
         );
-      if (c.has(r.id))
+      if (d.has(o.id))
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"]: duplicate item id "${r.id}" (item ids must be unique across all tiers within a tab)`
+          `[design-token-panel] PanelConfig.tabs["${e}"]: duplicate item id "${o.id}" (item ids must be unique across all tiers within a tab)`
         );
-      if (c.add(r.id), typeof r.cssVar != "string" || !r.cssVar.startsWith("--"))
+      if (d.add(o.id), typeof o.cssVar != "string" || !o.cssVar.startsWith("--"))
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].items["${r.id}"].cssVar must start with "--" (got ${JSON.stringify(r.cssVar)})`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].items["${o.id}"].cssVar must start with "--" (got ${JSON.stringify(o.cssVar)})`
         );
-      if (r.cssVar.length <= 2)
+      if (o.cssVar.length <= 2)
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].items["${r.id}"].cssVar must be non-empty after "--"`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].items["${o.id}"].cssVar must be non-empty after "--"`
         );
-      const o = r.type;
-      if (o !== null && typeof o == "object" && !Array.isArray(o) && o.kind === "length" && o.units !== void 0) {
-        const d = o.units;
-        if (!Array.isArray(d))
+      const a = o.type;
+      if (a !== null && typeof a == "object" && !Array.isArray(a) && a.kind === "length" && a.units !== void 0) {
+        const g = a.units;
+        if (!Array.isArray(g))
           throw new Error(
-            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].items["${r.id}"].type.units must be an array`
+            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].items["${o.id}"].type.units must be an array`
           );
-        const u = /* @__PURE__ */ new Set();
-        for (const p of d) {
+        const c = /* @__PURE__ */ new Set();
+        for (const p of g) {
           if (typeof p != "string" || p.length === 0)
             throw new Error(
-              `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].items["${r.id}"].type.units entries must be non-empty strings (got ${JSON.stringify(p)})`
+              `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].items["${o.id}"].type.units entries must be non-empty strings (got ${JSON.stringify(p)})`
             );
-          if (u.has(p))
+          if (c.has(p))
             throw new Error(
-              `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].items["${r.id}"].type.units: duplicate unit ${JSON.stringify(p)}`
+              `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].items["${o.id}"].type.units: duplicate unit ${JSON.stringify(p)}`
             );
-          u.add(p);
+          c.add(p);
         }
       }
     }
   }
   for (const s of t.tiers) {
-    const a = s, l = a.id;
-    if (a.referencesTier !== void 0) {
-      if (typeof a.referencesTier != "string")
+    const r = s, f = r.id;
+    if (r.referencesTier !== void 0) {
+      if (typeof r.referencesTier != "string")
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesTier must be a string`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesTier must be a string`
         );
-      const f = a.referencesTier;
-      if (!i.has(f))
+      const l = r.referencesTier;
+      if (!i.has(l))
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesTier: tier "${f}" does not exist in this tab`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesTier: tier "${l}" does not exist in this tab`
         );
-      const r = g.get(l), o = g.get(f);
-      if (r !== void 0 && o !== void 0 && r !== "text" && r !== o)
+      const o = u.get(f), a = u.get(l);
+      if (o !== void 0 && a !== void 0 && o !== "text" && o !== a)
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesTier: referencing tier has kind "${r}" but referenced tier "${f}" has kind "${o}" (cross-kind reference is only allowed when the referencing tier has kind "text")`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesTier: referencing tier has kind "${o}" but referenced tier "${l}" has kind "${a}" (cross-kind reference is only allowed when the referencing tier has kind "text")`
         );
     }
   }
   for (const s of t.tiers) {
-    const a = s, l = a.id;
-    if (a.referencesRamps === void 0) continue;
-    if (a.semantic !== !0)
+    const r = s, f = r.id, l = r.preview;
+    if (l === void 0) continue;
+    const o = u.get(f), a = typeof r.referencesTier == "string" ? u.get(r.referencesTier) : void 0, g = (c) => {
+      throw new Error(
+        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].preview "${l}" requires ${c}`
+      );
+    };
+    if (l === "size" && (r.referencesTier === void 0 ? o !== "length" : a !== "length") && g("a length tier or a reference tier resolving to length"), l === "line-height" && o !== "number" && g("a number tier"), l === "family" && o !== "text" && g("a text tier"), l === "weight" && o !== "select" && o !== "number" && g("a select or number tier"), (l === "bar" || l === "radius") && o !== "length" && g("a length tier"), l === "duration") {
+      o !== "length" && o !== "number" && g('a length or number tier with unit "ms" or "s"');
+      for (const c of r.items) {
+        if (c === null || typeof c != "object" || Array.isArray(c))
+          continue;
+        const p = c.type, h = p !== null && typeof p == "object" && !Array.isArray(p) ? p.unit : void 0;
+        h !== "ms" && h !== "s" && g('a length or number tier with unit "ms" or "s"');
+      }
+    }
+  }
+  for (const s of t.tiers) {
+    const r = s, f = r.id;
+    if (r.referencesRamps === void 0) continue;
+    if (r.semantic !== !0)
       throw new Error(
-        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesRamps is only valid on a tier with semantic: true`
+        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesRamps is only valid on a tier with semantic: true`
       );
-    if (!Array.isArray(a.referencesRamps))
+    if (!Array.isArray(r.referencesRamps))
       throw new Error(
-        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesRamps must be an array`
+        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesRamps must be an array`
       );
     if (e !== "color" && e !== "color-secondary")
       throw new Error(
-        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesRamps is only supported on tabs with id "color" or "color-secondary" (got "${e}")`
+        `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesRamps is only supported on tabs with id "color" or "color-secondary" (got "${e}")`
       );
-    const f = g.get(l), r = a.referencesRamps;
-    for (let o = 0; o < r.length; o++) {
-      const d = r[o];
-      if (d === null || typeof d != "object" || Array.isArray(d))
+    const l = u.get(f), o = r.referencesRamps;
+    for (let a = 0; a < o.length; a++) {
+      const g = o[a];
+      if (g === null || typeof g != "object" || Array.isArray(g))
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesRamps[${o}] must be a non-null object`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesRamps[${a}] must be a non-null object`
         );
-      const u = d;
-      if (typeof u.tier != "string" || u.tier.length === 0)
+      const c = g;
+      if (typeof c.tier != "string" || c.tier.length === 0)
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesRamps[${o}].tier must be a non-empty string`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesRamps[${a}].tier must be a non-empty string`
         );
-      if (u.tab !== void 0 && (typeof u.tab != "string" || u.tab.length === 0))
+      if (c.tab !== void 0 && (typeof c.tab != "string" || c.tab.length === 0))
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesRamps[${o}].tab must be a non-empty string when set`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesRamps[${a}].tab must be a non-empty string when set`
         );
-      const p = u.tab === void 0 ? e : u.tab;
-      let k;
+      const p = c.tab === void 0 ? e : c.tab;
+      let h;
       if (p === e)
-        k = t;
+        h = t;
       else {
-        const w = n.find(
+        const b = n.find(
           (y) => y !== null && typeof y == "object" && !Array.isArray(y) && y.id === p
         );
-        if (!w) {
-          const y = n.filter((h) => h !== null && typeof h == "object" && !Array.isArray(h)).map((h) => h.id).join(", ");
+        if (!b) {
+          const y = n.filter((w) => w !== null && typeof w == "object" && !Array.isArray(w)).map((w) => w.id).join(", ");
           throw new Error(
-            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesRamps[${o}]: tab "${p}" does not exist. Available tabs: ${y}.`
+            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesRamps[${a}]: tab "${p}" does not exist. Available tabs: ${y}.`
           );
         }
-        k = w;
+        h = b;
       }
-      const C = Array.isArray(k.tiers) ? k.tiers : [], T = [];
+      const C = Array.isArray(h.tiers) ? h.tiers : [], T = [];
       let P;
-      for (const w of C) {
-        if (w === null || typeof w != "object" || Array.isArray(w)) continue;
-        const y = w;
-        typeof y.id == "string" && (T.push(y.id), y.id === u.tier && (P = y));
+      for (const b of C) {
+        if (b === null || typeof b != "object" || Array.isArray(b)) continue;
+        const y = b;
+        typeof y.id == "string" && (T.push(y.id), y.id === c.tier && (P = y));
       }
       if (!P)
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesRamps[${o}]: tier "${u.tier}" does not exist in tab "${p}". Available tiers: ${T.join(", ")}.`
+          `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesRamps[${a}]: tier "${c.tier}" does not exist in tab "${p}". Available tiers: ${T.join(", ")}.`
         );
-      if (f !== void 0) {
-        const w = Array.isArray(P.items) ? P.items : [];
+      if (l !== void 0) {
+        const b = Array.isArray(P.items) ? P.items : [];
         let y;
-        for (const h of w) {
-          if (h === null || typeof h != "object" || Array.isArray(h)) continue;
-          const E = h.type;
-          if (E === null || typeof E != "object" || Array.isArray(E)) continue;
-          const j = E.kind;
-          if (typeof j == "string") {
-            y = j;
+        for (const w of b) {
+          if (w === null || typeof w != "object" || Array.isArray(w)) continue;
+          const v = w.type;
+          if (v === null || typeof v != "object" || Array.isArray(v)) continue;
+          const O = v.kind;
+          if (typeof O == "string") {
+            y = O;
             break;
           }
         }
-        if (y !== void 0 && f !== y)
+        if (y !== void 0 && l !== y)
           throw new Error(
-            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${l}"].referencesRamps[${o}]: referencing semantic tier has kind "${f}" but target tier "${u.tier}" in tab "${p}" has kind "${y}" (cross-tab ramp sources must share the semantic tier's kind)`
+            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${f}"].referencesRamps[${a}]: referencing semantic tier has kind "${l}" but target tier "${c.tier}" in tab "${p}" has kind "${y}" (cross-tab ramp sources must share the semantic tier's kind)`
           );
       }
     }
@@ -831,39 +897,39 @@ function X(e, t, n) {
       throw new Error(
         `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras must be a plain object`
       );
-    for (const r of ["id", "defaultShikiTheme"])
-      if (typeof s[r] != "string" || s[r].length === 0)
+    for (const o of ["id", "defaultShikiTheme"])
+      if (typeof s[o] != "string" || s[o].length === 0)
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.${r} must be a non-empty string (got ${typeof s[r]})`
+          `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.${o} must be a non-empty string (got ${typeof s[o]})`
         );
-    for (const r of ["colorSchemes", "baseRoles", "baseDefaults"])
-      if (s[r] === void 0 || s[r] === null || typeof s[r] != "object" || Array.isArray(s[r]))
+    for (const o of ["colorSchemes", "baseRoles", "baseDefaults"])
+      if (s[o] === void 0 || s[o] === null || typeof s[o] != "object" || Array.isArray(s[o]))
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.${r} must be a plain object`
+          `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.${o} must be a plain object`
         );
     if (s.panelSettings === void 0 || s.panelSettings === null || typeof s.panelSettings != "object" || Array.isArray(s.panelSettings))
       throw new Error(
         `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.panelSettings must be a plain object`
       );
-    const a = s.panelSettings;
-    if (typeof a.colorScheme != "string" || a.colorScheme.length === 0)
+    const r = s.panelSettings;
+    if (typeof r.colorScheme != "string" || r.colorScheme.length === 0)
       throw new Error(
         `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.panelSettings.colorScheme must be a non-empty string`
       );
-    if (a.colorMode !== !1) {
-      if (a.colorMode === null || typeof a.colorMode != "object" || Array.isArray(a.colorMode))
+    if (r.colorMode !== !1) {
+      if (r.colorMode === null || typeof r.colorMode != "object" || Array.isArray(r.colorMode))
         throw new Error(
           `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.panelSettings.colorMode must be false or a plain object`
         );
-      const r = a.colorMode;
-      for (const o of ["lightScheme", "darkScheme"])
-        if (typeof r[o] != "string" || r[o].length === 0)
+      const o = r.colorMode;
+      for (const a of ["lightScheme", "darkScheme"])
+        if (typeof o[a] != "string" || o[a].length === 0)
           throw new Error(
-            `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.panelSettings.colorMode.${o} must be a non-empty string`
+            `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.panelSettings.colorMode.${a} must be a non-empty string`
           );
-      if (r.defaultMode !== "light" && r.defaultMode !== "dark")
+      if (o.defaultMode !== "light" && o.defaultMode !== "dark")
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.panelSettings.colorMode.defaultMode must be "light" or "dark" (got ${JSON.stringify(r.defaultMode)})`
+          `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.panelSettings.colorMode.defaultMode must be "light" or "dark" (got ${JSON.stringify(o.defaultMode)})`
         );
     }
     if (s.semanticDefaults !== void 0) {
@@ -871,37 +937,37 @@ function X(e, t, n) {
         throw new Error(
           `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.semanticDefaults must be a plain object`
         );
-      const r = s.semanticDefaults;
-      for (const [o, d] of Object.entries(r))
-        if (!Y(d))
+      const o = s.semanticDefaults;
+      for (const [a, g] of Object.entries(o))
+        if (!Y(g))
           throw new Error(
-            `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.semanticDefaults["${o}"] must be a valid SemanticValue (number | 'bg' | 'fg' | { literal: string } | { literal: { light, dark } } | { ref: { tier, item, tab? } }), got ${JSON.stringify(d)}`
+            `[design-token-panel] PanelConfig.tabs["${e}"].colorExtras.semanticDefaults["${a}"] must be a valid SemanticValue (number | 'bg' | 'fg' | { literal: string } | { literal: { light, dark } } | { ref: { tier, item, tab? } }), got ${JSON.stringify(g)}`
           );
     }
-    const f = t.tiers.find((r) => {
-      if (r.referencesTier !== void 0 || r.semantic === !0) return !1;
-      const o = r.items;
-      if (!Array.isArray(o) || o.length === 0) return !1;
-      const d = o[0];
-      if (d === null || typeof d != "object" || Array.isArray(d)) return !1;
-      const u = d.type;
-      return u === null || typeof u != "object" || Array.isArray(u) ? !1 : u.kind === "color";
+    const l = t.tiers.find((o) => {
+      if (o.referencesTier !== void 0 || o.semantic === !0) return !1;
+      const a = o.items;
+      if (!Array.isArray(a) || a.length === 0) return !1;
+      const g = a[0];
+      if (g === null || typeof g != "object" || Array.isArray(g)) return !1;
+      const c = g.type;
+      return c === null || typeof c != "object" || Array.isArray(c) ? !1 : c.kind === "color";
     });
-    if (f) {
-      const r = f.id, o = f.items, d = o[0]?.cssVar;
-      if (d !== void 0) {
-        const u = d.replace(/\d+$/, "{n}");
-        if (u.includes("{n}"))
-          for (let p = 0; p < o.length; p++) {
-            const k = o[p], C = u.replace("{n}", String(p));
-            if (k.cssVar !== C)
+    if (l) {
+      const o = l.id, a = l.items, g = a[0]?.cssVar;
+      if (g !== void 0) {
+        const c = g.replace(/\d+$/, "{n}");
+        if (c.includes("{n}"))
+          for (let p = 0; p < a.length; p++) {
+            const h = a[p], C = c.replace("{n}", String(p));
+            if (h.cssVar !== C)
               throw new Error(
-                `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${r}"].items[${p}].cssVar is ${JSON.stringify(k.cssVar)} but expected ${JSON.stringify(C)} — palette item cssVars must share one prefix and be numbered 0..n-1 in tier order (template derived from first item: ${JSON.stringify(u)})`
+                `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${o}"].items[${p}].cssVar is ${JSON.stringify(h.cssVar)} but expected ${JSON.stringify(C)} — palette item cssVars must share one prefix and be numbered 0..n-1 in tier order (template derived from first item: ${JSON.stringify(c)})`
               );
           }
-        else if (o.length > 1)
+        else if (a.length > 1)
           throw new Error(
-            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${r}"].items[0].cssVar ${JSON.stringify(d)} has no trailing digit — palette item cssVars must share one prefix and be numbered 0..n-1 in tier order (e.g. "--pal-0" … "--pal-15")`
+            `[design-token-panel] PanelConfig.tabs["${e}"].tiers["${o}"].items[0].cssVar ${JSON.stringify(g)} has no trailing digit — palette item cssVars must share one prefix and be numbered 0..n-1 in tier order (e.g. "--pal-0" … "--pal-15")`
           );
       }
     }
@@ -920,20 +986,23 @@ function X(e, t, n) {
         '[design-token-panel] PanelConfig.tabs["notes"].notesExtras must be a plain object with { title, html }'
       );
     const s = t.notesExtras;
-    for (const a of ["title", "html"])
-      if (typeof s[a] != "string" || s[a].length === 0)
+    for (const r of ["title", "html"])
+      if (typeof s[r] != "string" || s[r].length === 0)
         throw new Error(
-          `[design-token-panel] PanelConfig.tabs["notes"].notesExtras.${a} must be a non-empty string (got ${typeof s[a]})`
+          `[design-token-panel] PanelConfig.tabs["notes"].notesExtras.${r} must be a non-empty string (got ${typeof s[r]})`
         );
   } else if (t.notesExtras !== void 0)
     throw new Error(
       `[design-token-panel] PanelConfig.tabs["${e}"].notesExtras must only be set on a tab with id "notes"`
     );
 }
-function Te(e = _()) {
+function Q(e = j()) {
   return e.applyRouting ?? {};
 }
-function je(e) {
+function Ke(e = j()) {
+  return !!e.applyEndpoint && Object.keys(Q(e)).length > 0;
+}
+function Ne(e) {
   const t = x();
   if (t === null) {
     m().pendingColorPresets = e;
@@ -942,42 +1011,47 @@ function je(e) {
   t.config = { ...t.config, colorPresets: e };
 }
 export {
-  ve as A,
-  Te as B,
-  O as C,
-  Ee as D,
-  ne as E,
-  oe as F,
-  Pe as G,
-  G as H,
-  ie as I,
-  se as J,
-  Ce as K,
-  ae as _,
-  ke as a,
-  xe as b,
-  re as c,
-  me as d,
-  he as e,
-  ye as f,
-  _ as g,
-  de as h,
-  Se as i,
-  $e as j,
-  pe as k,
-  ue as l,
-  Ae as m,
-  fe as n,
-  ge as o,
-  Q as p,
-  I as q,
-  te as r,
-  je as s,
-  we as t,
-  be as u,
-  ee as v,
-  le as w,
-  ce as x,
-  N as y,
-  S as z
+  M as A,
+  V as B,
+  S as C,
+  Ve as D,
+  Q as E,
+  Ke as F,
+  Ae as G,
+  Ee as H,
+  ve as I,
+  Oe as J,
+  oe as K,
+  se as L,
+  Te as M,
+  ae as N,
+  le as O,
+  je as P,
+  fe as _,
+  Se as a,
+  ze as b,
+  ie as c,
+  we as d,
+  be as e,
+  he as f,
+  j as g,
+  pe as h,
+  _e as i,
+  xe as j,
+  me as k,
+  ye as l,
+  Re as m,
+  ge as n,
+  ue as o,
+  ee as p,
+  te as q,
+  re as r,
+  Ne as s,
+  ke as t,
+  Pe as u,
+  Ce as v,
+  $e as w,
+  ne as x,
+  ce as y,
+  de as z
 };