@protolabsai/ui 0.15.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -21,6 +21,7 @@
     "./data": "./src/data.tsx",
     "./menu": "./src/menu.tsx",
     "./app-shell": "./src/app-shell.tsx",
+    "./theming": "./src/theming.tsx",
     "./styles.css": "./src/styles.css"
   },
   "files": [
@@ -34,6 +35,7 @@
     "@radix-ui/react-popover": "^1.1.16",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "culori": "^4.0.2",
     "@protolabsai/design": "0.5.0"
   },
   "peerDependencies": {
@@ -43,6 +45,7 @@
   "devDependencies": {
     "@storybook/react": "^10.4.1",
     "@storybook/react-vite": "^10.4.1",
+    "@types/culori": "^4.0.1",
     "@vitejs/plugin-react": "^4.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/src/ThemePanel.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { ThemePanel } from "./theming";
+import { Badge, Button, Callout, Tag, TextLink } from "./primitives";
+import { Alert, Progress, StatusDot } from "./data";
+import { Tabs } from "./navigation";
+
+const meta: Meta = { title: "Components/Theming/ThemePanel", parameters: { layout: "fullscreen" } };
+export default meta;
+type Story = StoryObj;
+
+/** A spread of real components — watch them all repaint as you drag a picker. */
+function Sample() {
+  const [tab, setTab] = useState("overview");
+  return (
+    <div style={{ display: "grid", gap: 16, maxWidth: 520 }}>
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+        <Button>Primary</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="danger">Danger</Button>
+        <Badge status="info">v0.15.0</Badge>
+        <Tag>filter</Tag>
+        <StatusDot status="success" pulse label="connected" />
+      </div>
+      <Tabs
+        ariaLabel="Section"
+        items={[
+          { id: "overview", label: "Overview" },
+          { id: "activity", label: "Activity", badge: 12 },
+          { id: "settings", label: "Settings" },
+        ]}
+        active={tab}
+        onSelect={setTab}
+      />
+      <Progress value={64} label="Indexing corpus" showValue />
+      <Alert status="info" title="Live theming">
+        Drag any swatch — every token resolves through <TextLink href="#">--pl-*</TextLink>, so the whole surface
+        repaints in real time.
+      </Alert>
+      <Callout tone="success" title="on brand">
+        Keep the lavender + indigo, or dial in a white-label accent and save it as a preset.
+      </Callout>
+    </div>
+  );
+}
+
+export const LiveEditor: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 24, alignItems: "flex-start", padding: 24, flexWrap: "wrap" }}>
+      <ThemePanel />
+      <div style={{ flex: "1 1 360px" }}>
+        <Sample />
+      </div>
+    </div>
+  ),
+};

package/src/styles/theming.css

@@ -0,0 +1,150 @@
+/* @protolabsai/ui — ThemePanel (live token editor). All --pl-* driven, so the
+   panel itself re-skins live as you edit. */
+
+.pl-theme-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 440px;
+  color: var(--pl-color-fg);
+  font-size: 13px;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+}
+.pl-theme-panel__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-3);
+  padding: var(--pl-space-3);
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-theme-panel__title {
+  font-weight: var(--pl-font-weight-medium);
+}
+.pl-theme-panel__spacer {
+  flex: 1;
+}
+
+/* segmented light/dark control */
+.pl-segmented {
+  display: inline-flex;
+  padding: 2px;
+  background: var(--pl-color-bg-inset);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+}
+.pl-segmented__btn {
+  padding: 3px 12px;
+  font: inherit;
+  font-size: 12px;
+  text-transform: capitalize;
+  color: var(--pl-color-fg-muted);
+  background: none;
+  border: none;
+  border-radius: calc(var(--pl-radius) - 1px);
+  cursor: pointer;
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-segmented__btn--active {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-raised);
+}
+
+.pl-theme-panel__presets {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--pl-space-2);
+  padding: var(--pl-space-3);
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-theme-panel__preset-select {
+  flex: 1 1 140px;
+}
+.pl-theme-panel__preset-name {
+  flex: 1 1 120px;
+}
+
+.pl-theme-panel__groups {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pl-space-4);
+  max-height: 460px;
+  padding: var(--pl-space-3);
+  overflow-y: auto;
+}
+.pl-theme-group {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+.pl-theme-group__legend {
+  padding: 0 0 var(--pl-space-2);
+  font-size: 10px;
+  font-weight: var(--pl-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--pl-color-fg-subtle);
+}
+.pl-theme-row {
+  display: flex;
+  align-items: center;
+  gap: var(--pl-space-2);
+  padding: 3px 0;
+}
+.pl-theme-row__swatch {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background: none;
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+  cursor: pointer;
+}
+.pl-theme-row__swatch::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.pl-theme-row__swatch::-webkit-color-swatch {
+  border: none;
+  border-radius: calc(var(--pl-radius) - 1px);
+}
+.pl-theme-row__swatch::-moz-color-swatch {
+  border: none;
+  border-radius: calc(var(--pl-radius) - 1px);
+}
+.pl-theme-row__swatch--none {
+  border-color: transparent;
+  cursor: default;
+}
+.pl-theme-row__label {
+  flex: 1;
+  overflow: hidden;
+  color: var(--pl-color-fg-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pl-theme-row__value {
+  flex-shrink: 0;
+  width: 116px;
+  padding: 3px 6px;
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-inset);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+}
+.pl-theme-row__value:focus-visible {
+  outline: 2px solid var(--pl-color-focus);
+  outline-offset: -1px;
+}
+.pl-theme-row--changed .pl-theme-row__label {
+  color: var(--pl-color-fg);
+}
+.pl-theme-row--changed .pl-theme-row__value {
+  border-color: var(--pl-color-accent);
+}

package/src/styles.css

@@ -10,3 +10,4 @@
 @import "./styles/data.css";
 @import "./styles/menu.css";
 @import "./styles/app-shell.css";
+@import "./styles/theming.css";

package/src/theming.tsx

@@ -0,0 +1,383 @@
+import { useCallback, useEffect, useState } from "react";
+import { converter, formatHex, formatRgb, parse } from "culori";
+import tokens from "@protolabsai/design/tokens.json";
+import { Button } from "./primitives";
+import { cx } from "./internal";
+
+// ── Token registry, derived from @protolabsai/design so it stays in sync ────────
+// Mirrors the design package's build flatten (kebab + `--pl` prefix) exactly, so
+// the var names we write match the ones the tokens.css emits.
+const kebab = (s: string) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+function flatten(obj: Record<string, unknown>, prefix: string, acc: Record<string, string>) {
+  for (const [k, v] of Object.entries(obj)) {
+    const name = `${prefix}-${kebab(k)}`;
+    if (v && typeof v === "object" && !Array.isArray(v)) {
+      flatten(v as Record<string, unknown>, name, acc);
+    } else {
+      acc[name] = String(v);
+    }
+  }
+  return acc;
+}
+
+const T = tokens as {
+  color: Record<string, unknown>;
+  radius: unknown;
+  borderWidth: unknown;
+  light?: { color?: Record<string, unknown> };
+};
+
+/** Default (dark) values for every editable token, keyed by CSS var. */
+const DARK = flatten({ color: T.color, radius: T.radius, borderWidth: T.borderWidth }, "--pl", {});
+/** Light values = dark base with the design package's light overrides layered on. */
+const LIGHT = { ...DARK, ...flatten({ color: T.light?.color ?? {} }, "--pl", {}) };
+
+export type ThemeMode = "light" | "dark";
+
+type TokenGroup = { label: string; match: (v: string) => boolean };
+// Colors + shape — the meaningful white-label knobs. Order = panel order.
+const GROUPS: TokenGroup[] = [
+  { label: "Brand", match: (v) => v.startsWith("--pl-color-brand-") },
+  { label: "Accent", match: (v) => v.startsWith("--pl-color-accent") || v === "--pl-color-focus" },
+  { label: "Surfaces", match: (v) => v.startsWith("--pl-color-bg") || v === "--pl-color-overlay" },
+  { label: "Text", match: (v) => v.startsWith("--pl-color-fg") },
+  { label: "Status", match: (v) => v.startsWith("--pl-color-status-") },
+  { label: "Borders", match: (v) => v.startsWith("--pl-color-border") },
+  { label: "Shape", match: (v) => v === "--pl-radius" || v === "--pl-border-width" },
+];
+const ALL_VARS = Object.keys(DARK);
+
+const prettyLabel = (v: string) =>
+  v
+    .replace(/^--pl-(color-)?/, "")
+    .replace(/^(brand|status|accent|bg|fg|border)-?/, "")
+    .replace(/-/g, " ")
+    .trim()
+    .replace(/\b\w/g, (c) => c.toUpperCase()) || v.replace(/^--pl-/, "");
+
+// ── Color format handling — every color token is pickable; a pick is written
+// back in the token's OWN format (hex / rgb(a) / hsl / oklch / oklab), alpha kept.
+const toRgb = converter("rgb");
+const toHsl = converter("hsl");
+const toOklch = converter("oklch");
+const toOklab = converter("oklab");
+const round = (n: number, d: number) => Math.round(n * 10 ** d) / 10 ** d;
+
+/** A token value culori can read as a color (vs a length like radius/border-width). */
+const isColor = (val: string) => !!parse(val);
+
+/** Hex for the native `<input type="color">` (drops alpha, sRGB-clamped — display only). */
+function toSwatchHex(val: string): string {
+  const c = parse(val);
+  return c ? formatHex(c) : "#000000";
+}
+
+function formatOf(val: string): "hex" | "rgb" | "hsl" | "oklch" | "oklab" | "other" {
+  const v = val.trim().toLowerCase();
+  if (v.startsWith("#")) return "hex";
+  if (v.startsWith("rgb")) return "rgb";
+  if (v.startsWith("hsl")) return "hsl";
+  if (v.startsWith("oklch")) return "oklch";
+  if (v.startsWith("oklab")) return "oklab";
+  return "other";
+}
+
+/** Reproject a freshly-picked hex into `original`'s color format, preserving its alpha. */
+function reformat(pickedHex: string, original: string): string {
+  const picked = parse(pickedHex);
+  if (!picked) return pickedHex;
+  const alpha = parse(original)?.alpha;
+  const hasA = alpha != null && alpha < 1;
+  const aTail = hasA ? ` / ${alpha}` : "";
+  switch (formatOf(original)) {
+    case "rgb":
+      return formatRgb({ ...toRgb(picked), alpha: hasA ? alpha : undefined });
+    case "hsl": {
+      const h = toHsl(picked);
+      return `hsl(${round(h.h ?? 0, 1)} ${round((h.s ?? 0) * 100, 1)}% ${round((h.l ?? 0) * 100, 1)}%${aTail})`;
+    }
+    case "oklch": {
+      const o = toOklch(picked);
+      return `oklch(${round(o.l ?? 0, 4)} ${round(o.c ?? 0, 4)} ${round(o.h ?? 0, 2)}${aTail})`;
+    }
+    case "oklab": {
+      const o = toOklab(picked);
+      return `oklab(${round(o.l ?? 0, 4)} ${round(o.a ?? 0, 4)} ${round(o.b ?? 0, 4)}${aTail})`;
+    }
+    default:
+      return formatHex(picked);
+  }
+}
+
+// ── Presets ─────────────────────────────────────────────────────────────────────
+export type ThemePreset = {
+  id: string;
+  name: string;
+  mode: ThemeMode;
+  /** CSS-var → value overrides layered on the base theme. */
+  overrides: Record<string, string>;
+};
+
+const BUILTIN_PRESETS: ThemePreset[] = [
+  { id: "pl-dark", name: "protoLabs Dark", mode: "dark", overrides: {} },
+  { id: "pl-light", name: "protoLabs Light", mode: "light", overrides: {} },
+  {
+    id: "ex-amber",
+    name: "Amber (example)",
+    mode: "dark",
+    overrides: {
+      "--pl-color-accent": "#f59e0b",
+      "--pl-color-accent-hover": "#d97706",
+      "--pl-color-accent-fg": "#fbbf24",
+      "--pl-color-focus": "#f59e0b",
+    },
+  },
+  {
+    id: "ex-teal",
+    name: "Teal (example)",
+    mode: "dark",
+    overrides: {
+      "--pl-color-accent": "#14b8a6",
+      "--pl-color-accent-hover": "#0d9488",
+      "--pl-color-accent-fg": "#2dd4bf",
+      "--pl-color-focus": "#14b8a6",
+    },
+  },
+];
+
+const LS_THEME = "pl-theme";
+const LS_PRESETS = "pl-theme-presets";
+
+const root = () => document.documentElement;
+const applyMode = (mode: ThemeMode) => root().setAttribute("data-theme", mode);
+const applyOverrides = (overrides: Record<string, string>) => {
+  for (const [k, v] of Object.entries(overrides)) root().style.setProperty(k, v);
+};
+
+function readStored(): { mode: ThemeMode; overrides: Record<string, string> } | null {
+  try {
+    const raw = localStorage.getItem(LS_THEME);
+    return raw ? (JSON.parse(raw) as { mode: ThemeMode; overrides: Record<string, string> }) : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Apply the persisted theme (mode + overrides). Call once on app boot — ideally
+ *  before first paint — so a user's saved theme survives reloads without a flash. */
+export function applyStoredTheme() {
+  const t = readStored();
+  if (!t) return;
+  applyMode(t.mode);
+  applyOverrides(t.overrides);
+}
+
+/** Live theme editor — maps every color + shape token to a control, repaints the
+ *  document in real time as you drag a picker, toggles light/dark, and saves named
+ *  presets (localStorage) you can switch back to. White-label control surface. */
+export function ThemePanel({
+  className,
+  presets: extraPresets = [],
+}: {
+  className?: string;
+  /** Extra read-only presets to offer alongside the built-ins. */
+  presets?: ThemePreset[];
+}) {
+  const [mode, setMode] = useState<ThemeMode>("dark");
+  const [overrides, setOverrides] = useState<Record<string, string>>({});
+  const [userPresets, setUserPresets] = useState<ThemePreset[]>([]);
+  const [presetName, setPresetName] = useState("");
+  const [copied, setCopied] = useState("");
+
+  useEffect(() => {
+    const t = readStored();
+    if (t) {
+      setMode(t.mode);
+      setOverrides(t.overrides);
+      applyMode(t.mode);
+      applyOverrides(t.overrides);
+    } else {
+      const cur = root().getAttribute("data-theme");
+      setMode(cur === "light" ? "light" : "dark");
+    }
+    try {
+      const p = localStorage.getItem(LS_PRESETS);
+      if (p) setUserPresets(JSON.parse(p) as ThemePreset[]);
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const persist = useCallback((m: ThemeMode, o: Record<string, string>) => {
+    try {
+      localStorage.setItem(LS_THEME, JSON.stringify({ mode: m, overrides: o }));
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const baseFor = (cssVar: string) => (mode === "light" ? LIGHT : DARK)[cssVar];
+  const valueOf = (cssVar: string) => overrides[cssVar] ?? baseFor(cssVar);
+
+  const setVar = (cssVar: string, value: string) => {
+    root().style.setProperty(cssVar, value);
+    setOverrides((prev) => {
+      const next = { ...prev, [cssVar]: value };
+      persist(mode, next);
+      return next;
+    });
+  };
+
+  const changeMode = (m: ThemeMode) => {
+    setMode(m);
+    applyMode(m);
+    persist(m, overrides);
+  };
+
+  const reset = () => {
+    for (const k of Object.keys(overrides)) root().style.removeProperty(k);
+    setOverrides({});
+    persist(mode, {});
+  };
+
+  const applyPreset = (id: string) => {
+    if (!id) return;
+    const p = [...BUILTIN_PRESETS, ...extraPresets, ...userPresets].find((x) => x.id === id);
+    if (!p) return;
+    for (const k of Object.keys(overrides)) root().style.removeProperty(k);
+    setMode(p.mode);
+    applyMode(p.mode);
+    applyOverrides(p.overrides);
+    setOverrides(p.overrides);
+    persist(p.mode, p.overrides);
+  };
+
+  const savePreset = () => {
+    const name = presetName.trim();
+    if (!name) return;
+    const p: ThemePreset = { id: `user-${name.toLowerCase().replace(/\s+/g, "-")}`, name, mode, overrides };
+    const next = [...userPresets.filter((x) => x.id !== p.id), p];
+    setUserPresets(next);
+    setPresetName("");
+    try {
+      localStorage.setItem(LS_PRESETS, JSON.stringify(next));
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const copy = (text: string, what: string) => {
+    navigator.clipboard?.writeText(text);
+    setCopied(what);
+    setTimeout(() => setCopied(""), 1400);
+  };
+  const exportCss = () => {
+    const body = Object.entries(overrides)
+      .map(([k, v]) => `  ${k}: ${v};`)
+      .join("\n");
+    copy(`:root {\n${body}\n}`, "css");
+  };
+  const exportJson = () => copy(JSON.stringify({ mode, overrides }, null, 2), "json");
+
+  const dirty = Object.keys(overrides).length;
+  const allPresets = [...BUILTIN_PRESETS, ...extraPresets, ...userPresets];
+
+  return (
+    <div className={cx("pl-theme-panel", className)}>
+      <div className="pl-theme-panel__bar">
+        <span className="pl-theme-panel__title">Theme</span>
+        <div className="pl-segmented" role="group" aria-label="Color scheme">
+          {(["dark", "light"] as const).map((m) => (
+            <button
+              key={m}
+              type="button"
+              className={cx("pl-segmented__btn", mode === m && "pl-segmented__btn--active")}
+              aria-pressed={mode === m}
+              onClick={() => changeMode(m)}
+            >
+              {m}
+            </button>
+          ))}
+        </div>
+        <span className="pl-theme-panel__spacer" />
+        <Button size="sm" variant="ghost" onClick={reset} disabled={!dirty}>
+          Reset{dirty ? ` (${dirty})` : ""}
+        </Button>
+      </div>
+
+      <div className="pl-theme-panel__presets">
+        <select
+          className="pl-input pl-select pl-theme-panel__preset-select"
+          aria-label="Apply preset"
+          value=""
+          onChange={(e) => applyPreset(e.target.value)}
+        >
+          <option value="">Apply preset…</option>
+          {allPresets.map((p) => (
+            <option key={p.id} value={p.id}>
+              {p.name}
+            </option>
+          ))}
+        </select>
+        <input
+          className="pl-input pl-theme-panel__preset-name"
+          placeholder="Save current as…"
+          value={presetName}
+          onChange={(e) => setPresetName(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && savePreset()}
+        />
+        <Button size="sm" onClick={savePreset} disabled={!presetName.trim()}>
+          Save
+        </Button>
+        <span className="pl-theme-panel__spacer" />
+        <Button size="sm" variant="ghost" onClick={exportCss} disabled={!dirty}>
+          {copied === "css" ? "Copied" : "Copy CSS"}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={exportJson} disabled={!dirty}>
+          {copied === "json" ? "Copied" : "Copy JSON"}
+        </Button>
+      </div>
+
+      <div className="pl-theme-panel__groups">
+        {GROUPS.map((g) => {
+          const vars = ALL_VARS.filter(g.match);
+          if (!vars.length) return null;
+          return (
+            <fieldset key={g.label} className="pl-theme-group">
+              <legend className="pl-theme-group__legend">{g.label}</legend>
+              {vars.map((v) => {
+                const val = valueOf(v);
+                const color = isColor(val);
+                const changed = v in overrides;
+                return (
+                  <label key={v} className={cx("pl-theme-row", changed && "pl-theme-row--changed")}>
+                    {color ? (
+                      <input
+                        type="color"
+                        className="pl-theme-row__swatch"
+                        value={toSwatchHex(val)}
+                        onInput={(e) => setVar(v, reformat((e.target as HTMLInputElement).value, val))}
+                        aria-label={prettyLabel(v)}
+                      />
+                    ) : (
+                      <span className="pl-theme-row__swatch pl-theme-row__swatch--none" aria-hidden />
+                    )}
+                    <span className="pl-theme-row__label" title={v}>
+                      {prettyLabel(v)}
+                    </span>
+                    <input
+                      className="pl-theme-row__value"
+                      value={val}
+                      spellCheck={false}
+                      onChange={(e) => setVar(v, e.target.value)}
+                    />
+                  </label>
+                );
+              })}
+            </fieldset>
+          );
+        })}
+      </div>
+    </div>
+  );
+}