@takazudo/zdtp 0.6.0 → 0.7.0

package/dist/dashboard/index.js

@@ -0,0 +1,408 @@
+import { jsxs as _, jsx as v } from "preact/jsx-runtime";
+const q = new Set("aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen transparent currentcolor inherit initial unset revert revert-layer".split(" "));
+function C(l) {
+  return l.startsWith("#") || l.includes("(") || q.has(l.toLowerCase());
+}
+const O = [
+  "background",
+  "foreground",
+  "cursor",
+  "selectionBg",
+  "selectionFg"
+], j = /^--[\w\u0080-\uffff-]+$/u;
+function A(l) {
+  let f = "", o = 0;
+  for (let r = 0; r < l.length; r++) {
+    const h = l[r];
+    if (h === '"' || h === "'") {
+      const c = h;
+      let a = !1;
+      for (r++; r < l.length; r++)
+        if (l[r] === "\\") r++;
+        else if (l[r] === c) {
+          a = !0;
+          break;
+        } else if (/[\n\r\f]/.test(l[r])) return { syntax: f, safe: !1 };
+      if (!a) return { syntax: f, safe: !1 };
+      f += '""';
+    } else if (h === "/" && l[r + 1] === "*") {
+      const c = l.indexOf("*/", r + 2);
+      if (c === -1) return { syntax: f, safe: !1 };
+      f += " ", r = c + 1;
+    } else {
+      const c = h.charCodeAt(0);
+      if (/[;{}\\@]/.test(h) || c <= 8 || c === 11 || c >= 14 && c <= 31 || c === 127)
+        return { syntax: f, safe: !1 };
+      if (h === "(" && o++, h === ")" && --o < 0) return { syntax: f, safe: !1 };
+      f += h;
+    }
+  }
+  return {
+    syntax: f,
+    safe: o === 0 && !/\b(?:url|(?:-webkit-)?image-set|image|cross-fade|element|paint|src)\s*\(/i.test(f) && !/!\s*important\b/i.test(f)
+  };
+}
+function D(l, f) {
+  const o = /* @__PURE__ */ new Map();
+  for (const r of l) {
+    const h = f(r), c = o.get(h) ?? [];
+    c.push(r), o.set(h, c);
+  }
+  return o;
+}
+function B(l, f = "light") {
+  const o = {
+    mode: f,
+    tabs: [],
+    rows: [],
+    declarations: /* @__PURE__ */ Object.create(null),
+    diagnostics: []
+  }, r = [], h = l.filter((e) => e.id !== "notes"), c = D(h, (e) => e.id);
+  function a(e, s, t, n = "error") {
+    const d = { code: s, severity: n, message: t, ...e ? { rowKey: e.row.key } : {} };
+    e?.row.diagnostics.some((i) => i.code === s && i.message === t) || (e?.row.diagnostics.push(d), o.diagnostics.push(d));
+  }
+  function m(e, s, t, n, d, i) {
+    s.rows.push(t), o.rows.push(t), r.push({ row: t, tab: e, tier: d, item: n, baseRole: i, dependencies: [], contextDependent: !1 });
+  }
+  h.forEach((e, s) => {
+    const t = { key: `tab-${s}`, id: e.id, label: e.label, tiers: [] };
+    o.tabs.push(t), e.tiers.forEach((i, w) => {
+      const y = {
+        key: `${t.key}-tier-${w}`,
+        id: i.id,
+        label: i.label,
+        palette: !i.semantic && !i.referencesTier && !i.referencesRamps?.length && i.items.length > 0 && i.items.every((u) => u.type.kind === "color"),
+        preview: i.preview,
+        previewBase: i.previewBase,
+        rows: []
+      };
+      t.tiers.push(y), i.items.forEach((u, V) => m(e, y, {
+        key: `${y.key}-item-${V}`,
+        tabId: e.id,
+        tierId: i.id,
+        itemId: u.id,
+        label: u.label,
+        cssVar: u.cssVar,
+        kind: u.type.kind,
+        source: "item",
+        defaultValue: u.default,
+        declaredValue: u.default,
+        cssValue: null,
+        resolvedValue: null,
+        references: [],
+        diagnostics: []
+      }, u, i));
+    });
+    const n = e.colorExtras;
+    if (!n) return;
+    const d = {
+      key: `${t.key}-base-roles`,
+      id: "base-roles",
+      label: "Base roles",
+      rows: []
+    };
+    for (const i of O) {
+      const w = n.baseRoles[i];
+      if (w === void 0) continue;
+      const y = n.baseDefaults[i];
+      m(e, d, {
+        key: `${d.key}-${i}`,
+        tabId: e.id,
+        tierId: d.id,
+        itemId: i,
+        label: i,
+        cssVar: w,
+        kind: "color",
+        source: "base-role",
+        defaultValue: y === void 0 ? "" : String(y),
+        declaredValue: y === void 0 ? "(no declared default)" : `palette[${y}]`,
+        cssValue: null,
+        resolvedValue: null,
+        references: [],
+        diagnostics: []
+      }, void 0, void 0, i);
+    }
+    d.rows.length > 0 && t.tiers.push(d);
+  });
+  const k = D(r, (e) => e.row.cssVar);
+  for (const e of r)
+    j.test(e.row.cssVar) || a(e, "invalid-variable", `Unsupported CSS custom property name: ${e.row.cssVar}.`), k.get(e.row.cssVar).length > 1 && a(e, "duplicate-variable", `Multiple declarations use ${e.row.cssVar}; none is selected.`), c.get(e.tab.id).length > 1 && a(e, "duplicate-tab", `Multiple tabs use the id ${e.tab.id}.`), e.tier && (e.tab.tiers.filter((s) => s.id === e.tier.id).length > 1 && a(e, "duplicate-tier", `Multiple tiers use the id ${e.tier.id} in tab ${e.tab.id}.`), e.tier.items.filter((s) => s.id === e.item.id).length > 1 && a(e, "duplicate-item", `Multiple items use the id ${e.item.id} in tier ${e.tier.id}.`));
+  function g(e, s) {
+    e.directReference = s, e.row.cssValue = `var(${s.row.cssVar})`;
+  }
+  function p(e, s, t, n) {
+    const d = c.get(s) ?? [];
+    if (d.length !== 1) {
+      a(e, d.length ? "ambiguous-reference" : "missing-reference", `Reference tab ${s} ${d.length ? "is ambiguous" : "does not exist"}.`);
+      return;
+    }
+    const i = d[0].tiers.filter((y) => y.id === t);
+    if (i.length !== 1) {
+      a(e, i.length ? "ambiguous-reference" : "missing-reference", `Reference tier ${s}/${t} ${i.length ? "is ambiguous" : "does not exist"}.`);
+      return;
+    }
+    const w = r.filter((y) => y.tab === d[0] && y.tier === i[0] && y.item?.id === n);
+    if (w.length !== 1) {
+      a(e, w.length ? "ambiguous-reference" : "missing-reference", `Reference item ${s}/${t}/${n} ${w.length ? "is ambiguous" : "does not exist"}.`);
+      return;
+    }
+    return w[0];
+  }
+  function b(e) {
+    return e.tab.tiers.filter((s) => !s.semantic && !s.referencesTier && s.items.length > 0 && s.items.every((t) => t.type.kind === "color"));
+  }
+  function z(e, s) {
+    const t = b(e), n = e.tier?.referencesTier ? t.filter((w) => w.id === e.tier.referencesTier) : t;
+    if (n.length !== 1) {
+      a(e, "unsupported-palette", `A palette index requires one unambiguous declared palette tier; found ${n.length}.`);
+      return;
+    }
+    if (!Number.isInteger(s) || s < 0 || s >= n[0].items.length) {
+      a(e, "invalid-palette-index", `Palette index ${s} is outside the declared palette.`);
+      return;
+    }
+    const d = n[0].items[s], i = p(e, e.tab.id, n[0].id, d.id);
+    i && g(e, i);
+  }
+  function x(e, s) {
+    const t = e.tab.colorExtras?.baseDefaults[s];
+    if (t === void 0) {
+      a(e, "missing-base-default", `Base role ${s} has no explicit baseDefaults mapping.`);
+      return;
+    }
+    z(e, t);
+  }
+  function $(e, s) {
+    if (typeof s == "number")
+      e.row.declaredValue = `palette[${s}]`, z(e, s);
+    else if (s === "bg" || s === "fg")
+      e.row.declaredValue = s, x(e, s === "bg" ? "background" : "foreground");
+    else if (typeof s == "object" && s !== null && "literal" in s) {
+      const t = typeof s.literal == "string" ? s.literal : s.literal[f];
+      e.row.declaredValue = t, e.row.cssValue = t;
+    } else if (typeof s == "object" && s !== null && "ref" in s) {
+      const { tab: t = e.tab.id, tier: n, item: d } = s.ref;
+      e.row.declaredValue = `${t}/${n}/${d}`;
+      const i = p(e, t, n, d);
+      i && g(e, i);
+    } else
+      a(e, "invalid-semantic-default", "Unsupported semantic default mapping.");
+  }
+  for (const e of r) {
+    if (e.baseRole) {
+      x(e, e.baseRole);
+      continue;
+    }
+    const s = e.tier, t = e.item, n = b(e), d = s.semantic || e.tab.colorExtras && n.some((u) => u.id === s.referencesTier), w = (s.referencesTier === void 0 ? n : n.filter((u) => u.id === s.referencesTier)).flatMap((u) => u.items.filter((V) => V.id === t.default).map(() => u)), y = e.tab.colorExtras?.semanticDefaults;
+    if (d && y && Object.hasOwn(y, t.id))
+      $(e, y[t.id]);
+    else if (d && w.length > 0)
+      if (w.length > 1)
+        a(e, "ambiguous-reference", `Default ${t.default} names multiple palette items.`);
+      else {
+        const u = p(e, e.tab.id, w[0].id, t.default);
+        u && g(e, u);
+      }
+    else if (d && (t.default === "bg" || t.default === "fg"))
+      x(e, t.default === "bg" ? "background" : "foreground");
+    else if (s.referencesTier !== void 0 && !(d && s.referencesRamps?.length) && !(s.semantic && C(t.default))) {
+      const u = p(e, e.tab.id, s.referencesTier, t.default);
+      u && g(e, u);
+    } else if (d)
+      if (s.referencesRamps?.length && !C(t.default)) {
+        const u = t.default.indexOf(":"), V = u === -1 ? [s.referencesRamps[0]] : s.referencesRamps.filter((R) => R.tier === t.default.slice(0, u));
+        if (V.length !== 1)
+          a(e, V.length ? "ambiguous-reference" : "missing-reference", `Ramp source for ${t.default} ${V.length ? "is ambiguous" : "does not exist"}.`);
+        else {
+          const R = p(e, V[0].tab ?? e.tab.id, V[0].tier, u === -1 ? t.default : t.default.slice(u + 1));
+          R && g(e, R);
+        }
+      } else
+        e.row.cssValue = t.default;
+    else
+      e.row.cssValue = t.default;
+  }
+  for (const e of r) {
+    const s = e.row.cssValue;
+    if (s === null) continue;
+    const t = A(s);
+    if (!t.safe) {
+      a(e, "unsafe-css", "This declaration contains unsupported CSS syntax or a resource-loading function; preview omitted.");
+      continue;
+    }
+    e.directReference && e.dependencies.push(e.directReference);
+    for (const n of t.syntax.matchAll(/\bvar\(\s*(--[\w\u0080-\uffff-]+)\s*(?=[,)])/giu)) {
+      const d = k.get(n[1]) ?? [];
+      d.length > 1 ? a(e, "ambiguous-reference", `CSS reference ${n[1]} has multiple declarations.`) : d.length === 1 ? e.dependencies.push(d[0]) : (e.contextDependent = !0, a(e, "external-reference", `CSS reference ${n[1]} is not in this inventory; its value depends on the host context or fallback.`, "warning"));
+    }
+    e.dependencies = [...new Set(e.dependencies)], e.row.references = e.dependencies.map(({ row: n }) => ({ key: n.key, cssVar: n.cssVar, label: n.label })), /(?:^|[^\w-])(?:currentcolor|initial|inherit|unset|revert|revert-layer)(?=$|[^\w-])|\b(?:env|attr)\s*\(/i.test(t.syntax) && (e.contextDependent = !0, a(e, "context-dependent", "This CSS value depends on the surrounding document; no computed preview is claimed.", "warning"));
+  }
+  const N = /* @__PURE__ */ new Set(), S = [];
+  function T(e) {
+    if (N.has(e)) return;
+    const s = S.indexOf(e);
+    if (s !== -1) {
+      for (const t of S.slice(s)) a(t, "cyclic-reference", "Declared references form a cycle.");
+      return;
+    }
+    S.push(e);
+    for (const t of e.dependencies)
+      T(t), t.row.diagnostics.some((n) => n.severity === "error") ? a(e, "invalid-reference", `Referenced declaration ${t.row.cssVar} is invalid.`) : t.contextDependent && (e.contextDependent = !0, a(e, "context-dependent", `Referenced declaration ${t.row.cssVar} depends on the host context.`, "warning"));
+    S.pop(), N.add(e), e.row.diagnostics.some((t) => t.severity === "error") ? e.row.cssValue = null : e.contextDependent || (e.row.resolvedValue = e.directReference?.row.resolvedValue ?? e.row.cssValue);
+  }
+  for (const e of r) T(e);
+  return o.declarations = Object.fromEntries(r.filter((e) => e.row.cssValue !== null).map((e) => [e.row.cssVar, e.row.cssValue])), o;
+}
+function L(l, f, o) {
+  return o?.[l.cssVar] ?? f.preview ?? (l.kind === "color" ? "color" : "text");
+}
+const M = `Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
+
+読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789`;
+function E(l) {
+  return ["size", "family", "weight", "line-height"].includes(l);
+}
+function I(l, f) {
+  const o = /* @__PURE__ */ new Set();
+  let r = l;
+  for (; r.cssValue !== null && r.resolvedValue !== null && !o.has(r.key); ) {
+    o.add(r.key);
+    const h = r.resolvedValue.trim();
+    if (/^(?:0|\+?(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem))$/i.test(h)) return h;
+    const c = /^var\(\s*(--[a-zA-Z0-9_-]+)\s*\)$/.exec(h);
+    if (!c) return null;
+    const a = f.rows.filter((m) => m.cssVar === c[1]);
+    if (a.length !== 1) return null;
+    r = a[0];
+  }
+  return null;
+}
+function P({ row: l, tier: f, kind: o, model: r, previewText: h }) {
+  if (o === "bar") {
+    const g = I(l, r);
+    return g === null ? /* @__PURE__ */ v("div", { className: "zdtp-dashboard__preview-unavailable", children: "Ruler unavailable: requires a nonnegative px/rem length or a resolved direct alias." }) : /* @__PURE__ */ _("div", { className: "zdtp-dashboard__ruler-wrap", children: [
+      /* @__PURE__ */ v("div", { className: "zdtp-dashboard__ruler-caption", children: "Actual size · ticks every 8 CSS px · major ticks every 64 CSS px" }),
+      /* @__PURE__ */ v("div", { className: "zdtp-dashboard__scroll zdtp-dashboard__ruler-scroll", role: "region", tabIndex: 0, "aria-label": `${l.label} (${l.cssVar}) actual-size ruler`, children: /* @__PURE__ */ _("div", { className: "zdtp-dashboard__ruler", style: { inlineSize: `max(100%, ${g})` }, children: [
+        /* @__PURE__ */ v("div", { className: "zdtp-dashboard__ruler-origin", children: "0" }),
+        /* @__PURE__ */ v("div", { className: "zdtp-dashboard__specimen", style: { colorScheme: r.mode }, children: /* @__PURE__ */ v("span", { className: "zdtp-dashboard__sample zdtp-dashboard__sample--bar", style: { inlineSize: g }, "aria-hidden": "true" }) })
+      ] }) })
+    ] });
+  }
+  if (l.cssValue === null || l.resolvedValue === null || o === "text" || o === "duration") return null;
+  const c = l.resolvedValue.trim().toLowerCase();
+  if (!c || (o === "radius" || o === "size") && (/^(?:auto|none|normal|(?:min|max)-content|stretch|content)$|^fit-content(?:\(|$)/.test(c) || /^[+-]?(?:\d*\.)?\d+(?:ms|s)$/.test(c) || /^[+-]?(?:\d*\.)?\d+$/.test(c) && Number(c) !== 0))
+    return null;
+  const a = l.cssValue;
+  let m;
+  switch (o) {
+    case "color":
+      m = { backgroundColor: a };
+      break;
+    case "radius":
+      m = { borderRadius: a };
+      break;
+    case "shadow":
+      m = { boxShadow: a };
+      break;
+    case "size":
+      m = { fontSize: a };
+      break;
+    case "family":
+      m = { fontFamily: a };
+      break;
+    case "weight":
+      m = { fontWeight: a };
+      break;
+    case "line-height": {
+      const g = r.rows.find((p) => p.cssVar === f.previewBase);
+      m = { lineHeight: a, ...g?.cssValue !== null && g?.resolvedValue != null ? { fontSize: `var(${g.cssVar})` } : {} };
+      break;
+    }
+  }
+  const k = E(o);
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: `zdtp-dashboard__preview zdtp-dashboard__preview--${o}${k ? " zdtp-dashboard__preview--typography zdtp-dashboard__scroll" : ""}`,
+      "aria-hidden": k ? void 0 : "true",
+      role: k ? "region" : void 0,
+      tabIndex: k ? 0 : void 0,
+      "aria-label": k ? `${l.label} (${l.cssVar}) typography specimen` : void 0,
+      children: /* @__PURE__ */ v("div", { className: "zdtp-dashboard__specimen", style: { colorScheme: r.mode }, children: /* @__PURE__ */ v("span", { className: `zdtp-dashboard__sample zdtp-dashboard__sample--${o}`, style: m, children: k ? h : "" }) })
+    }
+  );
+}
+function W({
+  tabs: l,
+  mode: f = "light",
+  chrome: o = "light",
+  title: r = "Token dashboard",
+  id: h,
+  previewOverrides: c,
+  previewText: a = M
+}) {
+  const m = B(l, f), k = m.rows.filter((g) => g.diagnostics.length > 0).length;
+  return /* @__PURE__ */ _("div", { id: h, className: "zdtp-dashboard", role: "region", "aria-label": r, "data-mode": f, "data-chrome": o, children: [
+    /* @__PURE__ */ _("div", { className: "zdtp-dashboard__header", children: [
+      /* @__PURE__ */ v("div", { role: "heading", "aria-level": 2, className: "zdtp-dashboard__title", children: r }),
+      /* @__PURE__ */ _("div", { className: "zdtp-dashboard__summary", children: [
+        /* @__PURE__ */ _("span", { className: "zdtp-dashboard__count", children: [
+          m.rows.length,
+          " tokens"
+        ] }),
+        /* @__PURE__ */ _("span", { children: [
+          "Declared defaults · ",
+          f,
+          " mode"
+        ] }),
+        k > 0 && /* @__PURE__ */ _("span", { children: [
+          k,
+          " with diagnostics"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ _("div", { className: "zdtp-dashboard__inventory", style: m.declarations, children: [
+      m.rows.length === 0 && /* @__PURE__ */ v("div", { className: "zdtp-dashboard__empty", children: "No tokens declared." }),
+      m.tabs.map((g) => /* @__PURE__ */ _("div", { className: "zdtp-dashboard__tab", role: "group", "aria-label": g.label, children: [
+        /* @__PURE__ */ _("div", { className: "zdtp-dashboard__tab-header", children: [
+          /* @__PURE__ */ v("div", { role: "heading", "aria-level": 3, className: "zdtp-dashboard__tab-title", children: g.label }),
+          /* @__PURE__ */ _("span", { className: "zdtp-dashboard__tab-count", children: [
+            g.tiers.reduce((p, b) => p + b.rows.length, 0),
+            " tokens"
+          ] })
+        ] }),
+        g.tiers.map((p) => /* @__PURE__ */ _("div", { className: "zdtp-dashboard__tier", children: [
+          /* @__PURE__ */ v("div", { role: "heading", "aria-level": 4, className: "zdtp-dashboard__tier-title", children: p.label }),
+          /* @__PURE__ */ v("div", { className: p.palette ? "zdtp-dashboard__scroll zdtp-dashboard__palette-scroll" : void 0, role: p.palette ? "region" : void 0, tabIndex: p.palette ? 0 : void 0, "aria-label": p.palette ? `${p.label} palette stops` : void 0, children: /* @__PURE__ */ v("div", { className: `zdtp-dashboard__grid${p.palette ? " zdtp-dashboard__palette" : ""}`, role: "list", "aria-label": p.label, children: p.rows.map((b) => {
+            const z = L(b, p, c), x = !p.palette && (z === "bar" || E(z));
+            return /* @__PURE__ */ _("div", { className: `zdtp-dashboard__token${x ? " zdtp-dashboard__token--wide" : ""}`, role: "listitem", "data-css-var": b.cssVar, children: [
+              /* @__PURE__ */ v(P, { row: b, tier: p, kind: z, model: m, previewText: a }),
+              /* @__PURE__ */ _("div", { className: "zdtp-dashboard__token-content", children: [
+                /* @__PURE__ */ v("div", { className: "zdtp-dashboard__name", children: b.label }),
+                /* @__PURE__ */ v("div", { className: "zdtp-dashboard__variable", children: b.cssVar }),
+                /* @__PURE__ */ v("div", { className: "zdtp-dashboard__value", children: b.declaredValue || "(empty)" }),
+                b.cssValue !== null && b.cssValue !== b.declaredValue && /* @__PURE__ */ _("div", { className: "zdtp-dashboard__reference", children: [
+                  "CSS: ",
+                  b.cssValue
+                ] }),
+                b.references.length > 0 && /* @__PURE__ */ _("div", { className: "zdtp-dashboard__reference", children: [
+                  "References: ",
+                  b.references.map(($) => $.cssVar).join(", ")
+                ] }),
+                b.diagnostics.map(($, N) => /* @__PURE__ */ _("div", { className: "zdtp-dashboard__diagnostic", "data-diagnostic": $.code, children: [
+                  $.severity === "error" ? "Unavailable" : "Context needed",
+                  ": ",
+                  $.message
+                ] }, N))
+              ] })
+            ] }, b.key);
+          }) }) })
+        ] }, p.key))
+      ] }, g.key))
+    ] })
+  ] });
+}
+export {
+  W as TokenDashboard
+};

package/dist/dashboard/model.d.ts

@@ -0,0 +1,7 @@
+import type { TabConfig } from "../tokens/tier-model.js";
+import type { DashboardMode, DashboardModel } from "./types.js";
+/**
+ * Normalize the authored inventory for a static dashboard. Named color schemes,
+ * stored changes, editor fallback values and pill.customDefault are not inputs.
+ */
+export declare function buildDashboardModel(tabs: readonly TabConfig[], mode?: DashboardMode): DashboardModel;