@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.4

package/dist/kernel/components/blocks/color-palette.js

@@ -0,0 +1,407 @@
+"use client";
+
+// src/kernel/components/blocks/color-palette.tsx
+import { Button } from "../ui/button.js";
+import {
+  Menu,
+  MenuItem,
+  MenuPopup,
+  MenuPortal,
+  MenuPositioner,
+  MenuTrigger
+} from "../ui/menu.js";
+import {
+  Select,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectTrigger,
+  SelectValue
+} from "../ui/select.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TOKEN_NAMES = [
+  "foreground-1",
+  "foreground-2",
+  "foreground-3",
+  "foreground-4",
+  "surface-background",
+  "surface-1",
+  "surface-2",
+  "surface-3",
+  "surface-4",
+  "surface-hover",
+  "surface-active",
+  "surface-overlay",
+  "surface-menu",
+  "surface-menu-border",
+  "surface-menu-foreground",
+  "accent-1",
+  "accent-solid",
+  "accent-solid-hover",
+  "accent-solid-active",
+  "accent-soft",
+  "accent-soft-hover",
+  "accent-soft-active",
+  "accent-border",
+  "accent-focus",
+  "accent-code-background",
+  "accent-code-foreground",
+  "accent-2",
+  "accent-3",
+  "accent-4",
+  "accent-foreground",
+  "stroke-1",
+  "stroke-2",
+  "stroke-3",
+  "stroke-4",
+  "focus-ring",
+  "typography-links",
+  "typography-variable",
+  "typography-pre-bg",
+  "typography-pre-border",
+  "color-foreground-1",
+  "color-surface-1",
+  "color-accent-1",
+  "color-stroke-1"
+];
+function collectTokenNamesFromCssText(css) {
+  const stripped = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  const seen = /* @__PURE__ */ new Set();
+  const names = [];
+  for (const m of stripped.matchAll(/--([a-zA-Z0-9_-]+)\s*:/g)) {
+    const name = m[1];
+    if (name && !seen.has(name)) {
+      seen.add(name);
+      names.push(name);
+    }
+  }
+  return names;
+}
+function appendTokenName(names, name) {
+  if (!name || name.startsWith("_")) return;
+  names.add(name);
+}
+function collectTokenNamesFromStyle(style, names) {
+  for (let index = 0; index < style.length; index += 1) {
+    const property = style.item(index);
+    if (property.startsWith("--")) {
+      appendTokenName(names, property.slice(2));
+    }
+  }
+}
+function collectTokenNamesFromRule(rule, names) {
+  if ("style" in rule) {
+    collectTokenNamesFromStyle(rule.style, names);
+  }
+  if ("cssRules" in rule) {
+    const rules = rule.cssRules;
+    for (const childRule of Array.from(rules)) {
+      collectTokenNamesFromRule(childRule, names);
+    }
+  }
+}
+function readDeclaredTokenNames() {
+  const names = new Set(DEFAULT_TOKEN_NAMES);
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      for (const rule of Array.from(sheet.cssRules)) {
+        collectTokenNamesFromRule(rule, names);
+      }
+    } catch {
+    }
+  }
+  collectTokenNamesFromStyle(getComputedStyle(document.documentElement), names);
+  return Array.from(names);
+}
+function deriveTokenGroup(name) {
+  if (name.startsWith("color-")) return "color";
+  if (name.startsWith("palette-")) return "palette";
+  if (name.startsWith("typography-")) return "typography";
+  const p = name.split("-");
+  if (p.length === 1) return "base";
+  const last = p[p.length - 1];
+  if (last && /^\d+$/.test(last)) return p.slice(0, -1).join("-");
+  return p[0] ?? "base";
+}
+var COLOR_TOKEN_PREFIXES = [
+  "accent-",
+  "color-",
+  "focus-ring",
+  "foreground-",
+  "kitchen-sink-",
+  "palette-",
+  "stroke-",
+  "surface-",
+  "typography-"
+];
+function isColorTokenName(name) {
+  if (name.startsWith("tw-")) return false;
+  return COLOR_TOKEN_PREFIXES.some((prefix) => name.startsWith(prefix));
+}
+function parseRgbString(s) {
+  const m = s.match(/rgba?\(\s*([\d.]+)[,\s]\s*([\d.]+)[,\s]\s*([\d.]+)/);
+  if (!m) return null;
+  const [, r, g, b] = m;
+  if (!r || !g || !b) return null;
+  return [Math.round(+r), Math.round(+g), Math.round(+b)];
+}
+function toHex(r, g, b) {
+  return "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+function toHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const mx = Math.max(r, g, b), mn = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (mx + mn) / 2;
+  if (mx !== mn) {
+    const d = mx - mn;
+    s = l > 0.5 ? d / (2 - mx - mn) : d / (mx + mn);
+    if (mx === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (mx === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
+}
+function toOklch(r, g, b) {
+  const tl = (c) => {
+    c /= 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  const [lr, lg, lb] = [tl(r), tl(g), tl(b)];
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+  const [l_, m_, s_] = [Math.cbrt(l), Math.cbrt(m), Math.cbrt(s)];
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 4072047e-9 * s_;
+  const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const bv = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  const C = Math.sqrt(a * a + bv * bv);
+  let H = Math.atan2(bv, a) * (180 / Math.PI);
+  if (H < 0) H += 360;
+  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
+}
+function formatColor(r, g, b, fmt) {
+  switch (fmt) {
+    case "hex":
+      return toHex(r, g, b);
+    case "rgb":
+      return `rgb(${r}, ${g}, ${b})`;
+    case "hsl":
+      return toHsl(r, g, b);
+    case "oklch":
+      return toOklch(r, g, b);
+  }
+}
+function isLight(r, g, b) {
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.52;
+}
+function readToken(name, container) {
+  const probe = document.createElement("div");
+  probe.style.cssText = `position:absolute;width:1px;height:1px;pointer-events:none;background:var(--${name})`;
+  container.appendChild(probe);
+  const computed = getComputedStyle(probe).backgroundColor;
+  container.removeChild(probe);
+  return parseRgbString(computed);
+}
+var FORMAT_OPTIONS = [
+  { label: "HEX", value: "hex" },
+  { label: "RGB", value: "rgb" },
+  { label: "HSL", value: "hsl" },
+  { label: "OKLCH", value: "oklch" }
+];
+function Swatch({
+  name,
+  rgb,
+  format,
+  onFormatChange,
+  onCopy
+}) {
+  const displayVal = rgb ? formatColor(...rgb, format) : null;
+  const light = rgb ? isLight(...rgb) : true;
+  const bg = rgb ? toHex(...rgb) : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-32 shrink-0 flex-col", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "group relative h-24 w-32 shrink-0 overflow-hidden rounded-card border border-stroke-2 p-0 transition-transform hover:scale-[1.02] active:scale-[0.99] disabled:cursor-default disabled:hover:scale-100",
+        disabled: !rgb,
+        onClick: () => displayVal && onCopy(displayVal),
+        title: displayVal ?? "Unresolvable",
+        type: "button",
+        variant: "ghost",
+        style: {
+          background: bg ?? "color-mix(in srgb, currentColor 8%, transparent)"
+        },
+        children: rgb ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center text-xs font-medium uppercase opacity-0 transition-opacity group-hover:opacity-100",
+            style: {
+              color: light ? "rgba(0,0,0,0.45)" : "rgba(255,255,255,0.65)"
+            },
+            children: "copy"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "pointer-events-none absolute inset-0 rounded-card",
+            style: {
+              backgroundImage: "repeating-conic-gradient(#aaa 0% 25%, transparent 0% 50%)",
+              backgroundSize: "12px 12px",
+              opacity: 0.2
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mt-2 truncate text-xs font-medium leading-tight text-foreground-1",
+        title: name,
+        children: name
+      }
+    ),
+    rgb && displayVal ? /* @__PURE__ */ jsxs(Menu, { children: [
+      /* @__PURE__ */ jsx(MenuTrigger, { className: "mt-1 max-w-full truncate text-left text-xs text-foreground-3 underline-offset-4 hover:text-accent-1 hover:underline", children: displayVal }),
+      /* @__PURE__ */ jsx(MenuPortal, { children: /* @__PURE__ */ jsx(MenuPositioner, { children: /* @__PURE__ */ jsxs(MenuPopup, { className: "min-w-56", children: [
+        /* @__PURE__ */ jsxs(MenuItem, { onClick: () => onCopy(displayVal), children: [
+          "Copy ",
+          format.toUpperCase()
+        ] }),
+        /* @__PURE__ */ jsx(MenuItem, { onClick: () => onCopy(`var(--${name})`), children: "Copy CSS variable" }),
+        /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-stroke-3" }),
+        FORMAT_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
+          MenuItem,
+          {
+            onClick: () => {
+              onFormatChange(opt.value);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-12 shrink-0 font-medium", children: opt.label }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-foreground-3", children: formatColor(...rgb, opt.value) })
+            ]
+          },
+          opt.value
+        ))
+      ] }) }) })
+    ] }) : /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs italic text-foreground-3", children: "unresolved" })
+  ] });
+}
+function ColorPalette() {
+  const [format, setFormat] = useState("hex");
+  const [notice, setNotice] = useState("");
+  const [tokenNames, setTokenNames] = useState(DEFAULT_TOKEN_NAMES);
+  const [resolved, setResolved] = useState({});
+  const probeRef = useRef(null);
+  const noticeTimer = useRef(null);
+  const readAll = useCallback(() => {
+    const container = probeRef.current;
+    if (!container) return;
+    const names = readDeclaredTokenNames().filter(isColorTokenName);
+    const next = {};
+    const colorTokenNames = names.filter((name) => {
+      const rgb = readToken(name, container);
+      next[name] = rgb;
+      return rgb !== null;
+    });
+    setTokenNames(colorTokenNames);
+    setResolved(next);
+  }, []);
+  useEffect(() => {
+    readAll();
+    const obs = new MutationObserver(readAll);
+    obs.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => obs.disconnect();
+  }, [readAll]);
+  useEffect(() => {
+    return () => {
+      if (noticeTimer.current) clearTimeout(noticeTimer.current);
+    };
+  }, []);
+  const handleCopy = useCallback((txt) => {
+    navigator.clipboard.writeText(txt).catch(() => {
+    });
+    setNotice(`Copied ${txt}`);
+    if (noticeTimer.current) clearTimeout(noticeTimer.current);
+    noticeTimer.current = setTimeout(() => setNotice(""), 1800);
+  }, []);
+  const groups = {};
+  const groupOrder = [];
+  tokenNames.forEach((name) => {
+    const g = deriveTokenGroup(name);
+    if (!groups[g]) {
+      groups[g] = [];
+      groupOrder.push(g);
+    }
+    groups[g].push(name);
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: probeRef,
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          width: 0,
+          height: 0,
+          overflow: "hidden",
+          pointerEvents: "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            onValueChange: (value) => setFormat(value),
+            value: format,
+            children: [
+              /* @__PURE__ */ jsxs(SelectTrigger, { className: "w-44", children: [
+                /* @__PURE__ */ jsx(SelectValue, {}),
+                /* @__PURE__ */ jsx(SelectIcon, {})
+              ] }),
+              /* @__PURE__ */ jsx(SelectPortal, { children: /* @__PURE__ */ jsx(SelectPositioner, { children: /* @__PURE__ */ jsx(SelectPopup, { children: /* @__PURE__ */ jsx(SelectList, { children: FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsxs(SelectItem, { value: option.value, children: [
+                /* @__PURE__ */ jsx(SelectItemIndicator, {}),
+                /* @__PURE__ */ jsx(SelectItemText, { children: option.label })
+              ] }, option.value)) }) }) }) })
+            ]
+          }
+        ),
+        notice && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-3", children: notice })
+      ] }),
+      groupOrder.map((g) => /* @__PURE__ */ jsxs("section", { className: "mb-7", children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-4 border-b border-stroke-3 pb-2 text-xs font-medium uppercase text-foreground-3", children: g }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-5", children: (groups[g] ?? []).map((name) => /* @__PURE__ */ jsx(
+          Swatch,
+          {
+            name,
+            rgb: resolved[name] ?? null,
+            format,
+            onFormatChange: setFormat,
+            onCopy: handleCopy
+          },
+          name
+        )) })
+      ] }, g))
+    ] })
+  ] });
+}
+export {
+  collectTokenNamesFromCssText,
+  ColorPalette as default,
+  deriveTokenGroup
+};