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

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

@@ -1,7 +1,7 @@
 "use client";
 
-// src/kernel/components/blocks/color-palette.tsx
-import { Button } from "../ui/button.js";
+// src/modules/design-system/color-palette.tsx
+import { Button } from "@publish.os/nextjs/kernel/components/ui/button";
 import {
   Menu,
   MenuItem,
@@ -9,7 +9,7 @@ import {
   MenuPortal,
   MenuPositioner,
   MenuTrigger
-} from "../ui/menu.js";
+} from "@publish.os/nextjs/kernel/components/ui/menu";
 import {
   Select,
   SelectIcon,
@@ -22,202 +22,149 @@ import {
   SelectPositioner,
   SelectTrigger,
   SelectValue
-} from "../ui/select.js";
+} from "@publish.os/nextjs/kernel/components/ui/select";
 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-page",
   "surface-1",
   "surface-2",
   "surface-3",
   "surface-4",
   "surface-hover",
   "surface-active",
-  "surface-overlay",
+  "foreground-1",
+  "foreground-2",
+  "foreground-3",
+  "foreground-4",
+  "stroke-1",
+  "stroke-2",
+  "stroke-3",
+  "stroke-4",
+  "backdrop",
+  "media-backdrop",
   "menu-surface-1",
-  "menu-surface-2",
   "menu-surface-3",
   "menu-surface-4",
   "menu-foreground-1",
-  "menu-foreground-2",
-  "menu-foreground-3",
   "menu-foreground-4",
   "menu-highlight-surface",
   "menu-highlight-foreground",
-  "menu-option-highlight-surface",
-  "menu-option-highlight-foreground",
-  "menu-stroke-1",
-  "menu-stroke-2",
   "menu-stroke-3",
-  "menu-stroke-4",
   "tooltip-surface-1",
-  "tooltip-surface-2",
-  "tooltip-surface-3",
-  "tooltip-surface-4",
   "tooltip-foreground-1",
-  "tooltip-foreground-2",
-  "tooltip-foreground-3",
   "tooltip-foreground-4",
-  "tooltip-stroke-1",
-  "tooltip-stroke-2",
-  "tooltip-stroke-3",
   "tooltip-stroke-4",
   "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-1-foreground",
+  "accent-1-stroke",
+  "accent-1-hover",
+  "accent-1-active",
   "accent-2",
+  "accent-2-foreground",
+  "accent-2-stroke",
+  "accent-2-hover",
+  "accent-2-active",
   "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",
+  "focus-stroke",
+  "typography-link-foreground",
+  "typography-variable-foreground",
+  "typography-pre-surface",
+  "typography-pre-stroke",
   "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);
-    }
+  let stripped = css.replace(/\/\*[\s\S]*?\*\//g, ""), seen = /* @__PURE__ */ new Set(), names = [];
+  for (let m of stripped.matchAll(/--([a-zA-Z0-9_-]+)\s*:/g)) {
+    let name = m[1];
+    name && !seen.has(name) && (seen.add(name), names.push(name));
   }
   return names;
 }
 function appendTokenName(names, name) {
-  if (!name || name.startsWith("_")) return;
-  names.add(name);
+  !name || name.startsWith("_") || 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));
-    }
+    let property = style.item(index);
+    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)) {
+  if ("style" in rule && collectTokenNamesFromStyle(rule.style, names), "cssRules" in rule) {
+    let rules = rule.cssRules;
+    for (let 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)) {
+  let names = new Set(DEFAULT_TOKEN_NAMES);
+  for (let sheet of Array.from(document.styleSheets))
     try {
-      for (const rule of Array.from(sheet.cssRules)) {
+      for (let rule of Array.from(sheet.cssRules))
         collectTokenNamesFromRule(rule, names);
-      }
     } catch {
     }
-  }
-  collectTokenNamesFromStyle(getComputedStyle(document.documentElement), names);
-  return Array.from(names);
+  return collectTokenNamesFromStyle(getComputedStyle(document.documentElement), names), Array.from(names);
 }
 function deriveTokenGroup(name) {
   if (name.startsWith("color-")) return "color";
-  if (name.startsWith("palette-")) return "palette";
+  if (name.startsWith("neutral-")) return "palette";
   if (name.startsWith("typography-")) return "typography";
-  const p = name.split("-");
+  let 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";
+  let last = p[p.length - 1];
+  return last && /^\d+$/.test(last) ? p.slice(0, -1).join("-") : p[0] ?? "base";
 }
 var COLOR_TOKEN_PREFIXES = [
   "accent-",
   "color-",
   "danger-",
-  "focus-ring",
+  "focus-stroke",
   "foreground-",
   "info-",
   "kitchen-sink-",
   "menu-",
-  "palette-",
+  "navigation-menu-",
+  "neutral-",
+  "popover-",
+  "select-",
   "success-",
   "stroke-",
   "surface-",
   "tooltip-",
+  "toast-",
   "typography-",
   "warning-"
 ];
 function isColorTokenName(name) {
-  if (name.startsWith("tw-")) return false;
-  return COLOR_TOKEN_PREFIXES.some((prefix) => name.startsWith(prefix));
+  return name.startsWith("tw-") ? !1 : COLOR_TOKEN_PREFIXES.some((prefix) => name.startsWith(prefix));
 }
 function parseRgbString(s) {
-  const m = s.match(/rgba?\(\s*([\d.]+)[,\s]\s*([\d.]+)[,\s]\s*([\d.]+)/);
+  let 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)];
+  let [, r, g, b] = m;
+  return !r || !g || !b ? null : [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;
+  r /= 255, g /= 255, b /= 255;
+  let mx = Math.max(r, g, b), mn = Math.min(r, g, b), h = 0, s = 0, 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;
+    let d = mx - mn;
+    s = l > 0.5 ? d / (2 - mx - mn) : d / (mx + mn), mx === r ? h = ((g - b) / d + (g < b ? 6 : 0)) / 6 : mx === g ? h = ((b - r) / d + 2) / 6 : 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)})`;
+  let tl = (c) => (c /= 255, c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4), [lr, lg, lb] = [tl(r), tl(g), tl(b)], l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb, m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb, s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb, [l_, m_, s_] = [Math.cbrt(l), Math.cbrt(m), Math.cbrt(s)], L = 0.2104542553 * l_ + 0.793617785 * m_ - 4072047e-9 * s_, a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_, bv = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_, C = Math.sqrt(a * a + bv * bv), H = Math.atan2(bv, a) * (180 / Math.PI);
+  return H < 0 && (H += 360), `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
 }
 function formatColor(r, g, b, fmt) {
   switch (fmt) {
@@ -235,12 +182,10 @@ 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);
+  let probe = document.createElement("div");
+  probe.style.cssText = `position:absolute;width:1px;height:1px;pointer-events:none;background:var(--${name})`, container.appendChild(probe);
+  let computed = getComputedStyle(probe).backgroundColor;
+  return container.removeChild(probe), parseRgbString(computed);
 }
 var FORMAT_OPTIONS = [
   { label: "HEX", value: "hex" },
@@ -255,9 +200,7 @@ function Swatch({
   onFormatChange,
   onCopy
 }) {
-  const displayVal = rgb ? formatColor(...rgb, format) : null;
-  const light = rgb ? isLight(...rgb) : true;
-  const bg = rgb ? toHex(...rgb) : void 0;
+  let displayVal = rgb ? formatColor(...rgb, format) : null, light = rgb ? isLight(...rgb) : !0, bg = rgb ? toHex(...rgb) : void 0;
   return /* @__PURE__ */ jsxs("div", { className: "flex w-32 shrink-0 flex-col", children: [
     /* @__PURE__ */ jsx(
       Button,
@@ -285,7 +228,7 @@ function Swatch({
           {
             className: "pointer-events-none absolute inset-0 rounded-card",
             style: {
-              backgroundImage: "repeating-conic-gradient(#aaa 0% 25%, transparent 0% 50%)",
+              backgroundImage: "repeating-conic-gradient(var(--stroke-2) 0% 25%, transparent 0% 50%)",
               backgroundSize: "12px 12px",
               opacity: 0.2
             }
@@ -328,62 +271,38 @@ function Swatch({
   ] });
 }
 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;
+  let [format, setFormat] = useState("hex"), [notice, setNotice] = useState(""), [tokenNames, setTokenNames] = useState(DEFAULT_TOKEN_NAMES), [resolved, setResolved] = useState({}), probeRef = useRef(null), noticeTimer = useRef(null), readAll = useCallback(() => {
+    let 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;
+    let names = readDeclaredTokenNames().filter(isColorTokenName), next = {}, colorTokenNames = names.filter((name) => {
+      let rgb = readToken(name, container);
+      return next[name] = rgb, rgb !== null;
     });
-    setTokenNames(colorTokenNames);
-    setResolved(next);
+    setTokenNames(colorTokenNames), setResolved(next);
   }, []);
   useEffect(() => {
     readAll();
-    const obs = new MutationObserver(readAll);
-    obs.observe(document.documentElement, {
-      attributes: true,
+    let obs = new MutationObserver(readAll);
+    return obs.observe(document.documentElement, {
+      attributes: !0,
       attributeFilter: ["class", "data-theme"]
-    });
-    return () => obs.disconnect();
-  }, [readAll]);
-  useEffect(() => {
-    return () => {
-      if (noticeTimer.current) clearTimeout(noticeTimer.current);
-    };
+    }), () => obs.disconnect();
+  }, [readAll]), useEffect(() => () => {
+    noticeTimer.current && clearTimeout(noticeTimer.current);
   }, []);
-  const handleCopy = useCallback((txt) => {
+  let 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: [
+    }), setNotice(`Copied ${txt}`), noticeTimer.current && clearTimeout(noticeTimer.current), noticeTimer.current = setTimeout(() => setNotice(""), 1800);
+  }, []), groups = {}, groupOrder = [];
+  return tokenNames.forEach((name) => {
+    let g = deriveTokenGroup(name);
+    groups[g] || (groups[g] = [], groupOrder.push(g)), groups[g].push(name);
+  }), /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         ref: probeRef,
-        "aria-hidden": true,
+        "aria-hidden": !0,
         style: {
           position: "absolute",
           width: 0,

package/dist/kernel/components/blocks/design-system-preview.d.ts

@@ -1,10 +1,42 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Tabs, TabsList, TabsPanel, TabsTab } from '../ui/tabs.js';
-import { ReactNode } from 'react';
-import 'class-variance-authority/types';
-import '@base-ui/react/tabs';
-import 'class-variance-authority';
-import 'next/link';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+declare const tabsListVariants: (props?: ({
+    variant?: "base" | "button" | "underline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TabsVariantProps = VariantProps<typeof tabsListVariants>;
+type TabsIndicatorAnimation = "grow" | "slide";
+type TabsIndicatorColor = "accent" | "current" | "foreground" | (string & {});
+type TabsProps = ComponentPropsWithoutRef<typeof Tabs$1.Root> & TabsVariantProps & {
+    /**
+     * Sets the underline indicator animation.
+     *
+     * `slide` tracks the active tab with a clipped underline.
+     * `grow` redraws the underline from the active tab center.
+     *
+     * @default "slide"
+     */
+    indicatorAnimation?: TabsIndicatorAnimation;
+    /**
+     * Sets the underline indicator color for this tabs tree.
+     *
+     * Pass a CSS color, a CSS variable name like `--accent-1`, or one of the
+     * named design tokens.
+     *
+     * @default "accent"
+     */
+    indicatorColor?: TabsIndicatorColor;
+};
+type TabsListProps = ComponentPropsWithoutRef<typeof Tabs$1.List> & TabsVariantProps;
+type TabsTabProps = ComponentPropsWithoutRef<typeof Tabs$1.Tab> & TabsVariantProps;
+type TabsPanelProps = ComponentPropsWithoutRef<typeof Tabs$1.Panel>;
+declare function Tabs({ children, className, indicatorAnimation, indicatorColor, style, variant, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, variant, ...props }: TabsListProps): react_jsx_runtime.JSX.Element;
+declare function TabsTab({ className, variant, ...props }: TabsTabProps): react_jsx_runtime.JSX.Element;
+declare function TabsPanel({ className, ...props }: TabsPanelProps): react_jsx_runtime.JSX.Element;
 
 type PreviewTab = "tokens" | "typography" | "ui" | "mdx" | "blocks";
 type DesignSystemPreviewFixture = {