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

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

@@ -1,413 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/kernel/components/blocks/color-palette.tsx
-var color_palette_exports = {};
-__export(color_palette_exports, {
-  collectTokenNamesFromCssText: () => collectTokenNamesFromCssText,
-  default: () => ColorPalette,
-  deriveTokenGroup: () => deriveTokenGroup
-});
-module.exports = __toCommonJS(color_palette_exports);
-var import_button = require("../ui/button.js");
-var import_menu = require("../ui/menu.js");
-var import_select = require("../ui/select.js");
-var import_react = require("react");
-var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-32 shrink-0 flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_button.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-      "p",
-      {
-        className: "mt-2 truncate text-xs font-medium leading-tight text-foreground-1",
-        title: name,
-        children: name
-      }
-    ),
-    rgb && displayVal ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_menu.Menu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.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__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_menu.MenuPopup, { className: "min-w-56", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_menu.MenuItem, { onClick: () => onCopy(displayVal), children: [
-          "Copy ",
-          format.toUpperCase()
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_menu.MenuItem, { onClick: () => onCopy(`var(--${name})`), children: "Copy CSS variable" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "my-1 h-px bg-stroke-3" }),
-        FORMAT_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_menu.MenuItem,
-          {
-            onClick: () => {
-              onFormatChange(opt.value);
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-12 shrink-0 font-medium", children: opt.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-foreground-3", children: formatColor(...rgb, opt.value) })
-            ]
-          },
-          opt.value
-        ))
-      ] }) }) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-1 text-xs italic text-foreground-3", children: "unresolved" })
-  ] });
-}
-function ColorPalette() {
-  const [format, setFormat] = (0, import_react.useState)("hex");
-  const [notice, setNotice] = (0, import_react.useState)("");
-  const [tokenNames, setTokenNames] = (0, import_react.useState)(DEFAULT_TOKEN_NAMES);
-  const [resolved, setResolved] = (0, import_react.useState)({});
-  const probeRef = (0, import_react.useRef)(null);
-  const noticeTimer = (0, import_react.useRef)(null);
-  const readAll = (0, import_react.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);
-  }, []);
-  (0, import_react.useEffect)(() => {
-    readAll();
-    const obs = new MutationObserver(readAll);
-    obs.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class", "data-theme"]
-    });
-    return () => obs.disconnect();
-  }, [readAll]);
-  (0, import_react.useEffect)(() => {
-    return () => {
-      if (noticeTimer.current) clearTimeout(noticeTimer.current);
-    };
-  }, []);
-  const handleCopy = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref: probeRef,
-        "aria-hidden": true,
-        style: {
-          position: "absolute",
-          width: 0,
-          height: 0,
-          overflow: "hidden",
-          pointerEvents: "none"
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-6 flex flex-wrap items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_select.Select,
-          {
-            onValueChange: (value) => setFormat(value),
-            value: format,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.SelectTrigger, { className: "w-44", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectValue, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectIcon, {})
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectPositioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectPopup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectList, { children: FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.SelectItem, { value: option.value, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItemIndicator, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.SelectItemText, { children: option.label })
-              ] }, option.value)) }) }) }) })
-            ]
-          }
-        ),
-        notice && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-foreground-3", children: notice })
-      ] }),
-      groupOrder.map((g) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "mb-7", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "mb-4 border-b border-stroke-3 pb-2 text-xs font-medium uppercase text-foreground-3", children: g }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap gap-5", children: (groups[g] ?? []).map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          Swatch,
-          {
-            name,
-            rgb: resolved[name] ?? null,
-            format,
-            onFormatChange: setFormat,
-            onCopy: handleCopy
-          },
-          name
-        )) })
-      ] }, g))
-    ] })
-  ] });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  collectTokenNamesFromCssText,
-  deriveTokenGroup
-});

package/dist/kernel/components/blocks/color-palette.d.cts

@@ -1,7 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare function collectTokenNamesFromCssText(css: string): string[];
-declare function deriveTokenGroup(name: string): string;
-declare function ColorPalette(): react_jsx_runtime.JSX.Element;
-
-export { collectTokenNamesFromCssText, ColorPalette as default, deriveTokenGroup };