makersclaw 0.2.0 → 0.3.0

package/registry/blocks/sketch-canvas/palette.js

@@ -0,0 +1,226 @@
+// The sketch's colours are the workspace's tokens.
+//
+// Excalidraw draws with concrete colour strings, and a saved sketch holds
+// them. So a colour is picked as a TOKEN ("primary", "chart-2:soft"),
+// resolved to a concrete colour at run time from the CSS variable the
+// workspace theme sets (--color-primary…), and the token is kept beside
+// it on the element (customData.tokens.strokeColor = "primary"). When the
+// theme or the light/dark scheme changes, every tokened colour is resolved
+// again and the sketch repaints; a colour with no token (pasted from
+// elsewhere) is left as it is.
+//
+// A token is a slot name, "<slot>:soft" (the slot mixed into the page
+// background — a sticky-note tint), or "none" (no fill). No colour value
+// is written in this file: every one is read from the page.
+//
+// Everything but resolvePalette() is a plain function of plain objects,
+// so it runs in node and on the server.
+
+/** The props of an element that hold a colour. */
+export const COLOR_PROPS = ["strokeColor", "backgroundColor"];
+
+/** Ink: strokes, lines, text. */
+export const STROKES = [
+  { token: "foreground", label: "Ink" },
+  { token: "muted-foreground", label: "Grey" },
+  { token: "primary", label: "Primary" },
+  { token: "destructive", label: "Red" },
+  { token: "warning", label: "Amber" },
+  { token: "success", label: "Green" },
+  { token: "info", label: "Blue" },
+  { token: "chart-2", label: "Accent 2" },
+  { token: "chart-3", label: "Accent 3" },
+  { token: "chart-4", label: "Accent 4" },
+  { token: "chart-5", label: "Accent 5" },
+];
+
+/** Fills: none, a quiet grey, soft tints of the hues, and solid primary. */
+export const FILLS = [
+  { token: "none", label: "No fill" },
+  { token: "muted", label: "Grey" },
+  { token: "primary:soft", label: "Primary, soft" },
+  { token: "destructive:soft", label: "Red, soft" },
+  { token: "warning:soft", label: "Amber, soft" },
+  { token: "success:soft", label: "Green, soft" },
+  { token: "info:soft", label: "Blue, soft" },
+  { token: "chart-2:soft", label: "Accent 2, soft" },
+  { token: "chart-3:soft", label: "Accent 3, soft" },
+  { token: "chart-4:soft", label: "Accent 4, soft" },
+  { token: "chart-5:soft", label: "Accent 5, soft" },
+  { token: "primary", label: "Primary" },
+];
+
+/** How much of the hue a soft tint keeps (the rest is the page background). */
+export const SOFT_MIX = 0.26;
+
+/** The slots read from the page: every token's slot, plus the background. */
+export const SLOTS = [...new Set(["background", "foreground", ...STROKES.map((s) => s.token), ...FILLS.map((f) => f.token.split(":")[0]).filter((s) => s !== "none")])];
+
+const HEXISH = /^#?([0-9a-f]{6})([0-9a-f]{2})?$/i;
+
+/** "#rrggbb" or "#rrggbbaa" → [r, g, b, a(0-255)], or null. */
+export function parseHex(value) {
+  const m = HEXISH.exec(String(value ?? "").trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255, m[2] ? parseInt(m[2], 16) : 255];
+}
+
+const byte = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+
+/** [r, g, b, a] → "#rrggbb" (or "#rrggbbaa" when not opaque). */
+export function toHex([r, g, b, a = 255]) {
+  return "#" + byte(r) + byte(g) + byte(b) + (a >= 255 ? "" : byte(a));
+}
+
+/** `t` of colour a over (1 - t) of colour b, both hex; opaque result. */
+export function mixHex(a, b, t) {
+  const x = parseHex(a);
+  const y = parseHex(b);
+  if (!x || !y) return a ?? b ?? null;
+  const k = Math.max(0, Math.min(1, t));
+  return toHex([0, 1, 2].map((i) => x[i] * k + y[i] * (1 - k)));
+}
+
+/** slot → hex (as read from the page) → token → concrete colour. */
+export function buildPalette(slots) {
+  const out = { none: "transparent" };
+  for (const [slot, hex] of Object.entries(slots ?? {})) if (hex) out[slot] = hex;
+  for (const f of FILLS) {
+    const [slot, soft] = f.token.split(":");
+    if (soft && out[slot] && out.background) out[f.token] = mixHex(out[slot], out.background, SOFT_MIX);
+  }
+  return out;
+}
+
+/** Is this string a token the palette knows? */
+export const isToken = (palette, value) => typeof value === "string" && Object.hasOwn(palette ?? {}, value);
+
+/** The token a concrete colour came from, by value; null when none matches.
+ *  A plain slot wins over a soft tint that happens to match. */
+export function tokenFor(palette, colour) {
+  if (typeof colour !== "string") return null;
+  const c = colour.trim().toLowerCase();
+  if (c === "transparent") return "none";
+  let soft = null;
+  for (const [token, value] of Object.entries(palette ?? {})) {
+    if (String(value).toLowerCase() !== c) continue;
+    if (!token.includes(":")) return token;
+    soft ??= token;
+  }
+  return soft;
+}
+
+/** The tokens stored on an element: { strokeColor?: "primary", … }. */
+export const tokensOf = (el) => (el?.customData && typeof el.customData.tokens === "object" && el.customData.tokens) || {};
+
+/** The token each colour prop of `el` stands for: the stored one, else a
+ *  match against `palette`. Only props with a token are listed. */
+export function elementTokens(el, palette) {
+  const stored = tokensOf(el);
+  const out = {};
+  for (const prop of COLOR_PROPS) {
+    const t = isToken(palette, stored[prop]) ? stored[prop] : tokenFor(palette, el?.[prop]);
+    if (t) out[prop] = t;
+  }
+  return out;
+}
+
+const sameTokens = (a, b) => COLOR_PROPS.every((p) => (a?.[p] ?? null) === (b?.[p] ?? null));
+
+/** Elements with their tokens written into customData — what a saved
+ *  sketch holds. An element that already says the same is returned as is. */
+export function tagTokens(elements, palette) {
+  return (elements ?? []).map((el) => {
+    const tokens = elementTokens(el, palette);
+    if (sameTokens(tokens, tokensOf(el))) return el;
+    const { tokens: _old, ...rest } = el.customData ?? {};
+    const customData = Object.keys(tokens).length ? { ...rest, tokens } : Object.keys(rest).length ? rest : undefined;
+    return { ...el, customData };
+  });
+}
+
+/** What changes when the palette changes: for each element whose tokened
+ *  colours resolve to something new, { id, patch } with the new colours
+ *  and the tokens. Tokens come from customData, else from matching the
+ *  colour against `previous` (the palette it was drawn with). */
+export function repaint(elements, palette, previous) {
+  const out = [];
+  for (const el of elements ?? []) {
+    const stored = tokensOf(el);
+    const patch = {};
+    const tokens = {};
+    for (const prop of COLOR_PROPS) {
+      const token = isToken(palette, stored[prop]) ? stored[prop] : previous ? tokenFor(previous, el[prop]) : null;
+      if (!token || !isToken(palette, token)) continue;
+      tokens[prop] = token;
+      if (palette[token] !== el[prop]) patch[prop] = palette[token];
+    }
+    if (Object.keys(patch).length) out.push({ id: el.id, patch: { ...patch, customData: { ...(el.customData ?? {}), tokens: { ...stored, ...tokens } } } });
+  }
+  return out;
+}
+
+/** Resolve a skeleton's (or an element's) token-named colours to concrete
+ *  ones, keeping the tokens in customData. Other values pass through. */
+export function resolveColours(obj, palette) {
+  const tokens = { ...tokensOf(obj) };
+  const out = { ...obj };
+  for (const prop of COLOR_PROPS) {
+    if (isToken(palette, obj[prop])) {
+      tokens[prop] = obj[prop];
+      out[prop] = palette[obj[prop]];
+    }
+  }
+  if (obj.label && isToken(palette, obj.label.strokeColor)) out.label = { ...obj.label, strokeColor: palette[obj.label.strokeColor] };
+  if (Object.keys(tokens).length) out.customData = { ...(obj.customData ?? {}), tokens };
+  return out;
+}
+
+/** A stable fingerprint of a palette: equal strings, nothing to repaint. */
+export const paletteKey = (palette) =>
+  Object.keys(palette ?? {})
+    .sort()
+    .map((k) => `${k}=${palette[k]}`)
+    .join(";");
+
+// ---- the browser half -------------------------------------------------------
+
+/** Read every slot from the CSS variables in effect at `root` (so a
+ *  data-theme or a theme stylesheet scoped to an ancestor counts) and
+ *  build the palette. A probe element takes `color: var(--color-<slot>)`;
+ *  the browser resolves var(), light-dark(), color-mix() and relative
+ *  colours into its computed colour, and a 1×1 canvas turns that into
+ *  bytes whatever syntax it came back in. */
+export function resolvePalette(root) {
+  if (typeof document === "undefined" || !root) return buildPalette({});
+  const probe = document.createElement("span");
+  probe.setAttribute("aria-hidden", "true");
+  probe.style.position = "absolute";
+  probe.style.visibility = "hidden";
+  probe.style.pointerEvents = "none";
+  root.appendChild(probe);
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  const slots = {};
+  try {
+    for (const slot of SLOTS) {
+      probe.style.color = "";
+      probe.style.color = `var(--color-${slot})`;
+      const computed = getComputedStyle(probe).color;
+      if (!computed || !ctx) continue;
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = "transparent";
+      ctx.fillStyle = computed;
+      ctx.fillRect(0, 0, 1, 1);
+      const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+      if (a === 0) continue;
+      slots[slot] = toHex([r, g, b, a]);
+    }
+  } finally {
+    probe.remove();
+  }
+  return buildPalette(slots);
+}