@protolabsai/ui 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.14.0",
+  "version": "0.16.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": [

package/src/AppShell.stories.tsx

@@ -60,3 +60,31 @@ export const TabsWithSlots: Story = {
     return <Demo />;
   },
 };
+
+export const TabsResponsive: Story = {
+  name: "Tabs (responsive → dropdown)",
+  render: () => {
+    function Demo() {
+      const [active, setActive] = useState("activity");
+      const items = [
+        { id: "overview", label: "Overview", icon: <Glyph /> },
+        { id: "activity", label: "Activity", icon: <Glyph />, badge: 12 },
+        { id: "knowledge", label: "Knowledge", icon: <Glyph /> },
+        { id: "settings", label: "Settings", icon: <Glyph /> },
+      ];
+      // A container query responds to the Tabs' own width — resize these boxes (not
+      // the window) to see the wide one stay a strip and the narrow one collapse.
+      return (
+        <div style={{ display: "grid", gap: 24 }}>
+          <div style={{ width: 520, border: "1px solid var(--pl-color-border)", borderRadius: 4, padding: 8 }}>
+            <Tabs responsive ariaLabel="Section" items={items} active={active} onSelect={setActive} />
+          </div>
+          <div style={{ width: 260, border: "1px solid var(--pl-color-border)", borderRadius: 4, padding: 8 }}>
+            <Tabs responsive ariaLabel="Section" items={items} active={active} onSelect={setActive} />
+          </div>
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

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/navigation.tsx

@@ -15,9 +15,25 @@ export type TabItem = {
 
 /** A horizontal tab strip with optional icon/badge slots + disabled/locked
  *  support (gated workflows). */
-export function Tabs({ items, active, onSelect }: { items: TabItem[]; active: string; onSelect: (id: string) => void }) {
-  return (
-    <div className="pl-tabs" role="tablist">
+export function Tabs({
+  items,
+  active,
+  onSelect,
+  responsive = false,
+  ariaLabel,
+}: {
+  items: TabItem[];
+  active: string;
+  onSelect: (id: string) => void;
+  /** Collapse the strip to a `<select>` dropdown when the Tabs' *container* is narrow
+   *  (a CSS container query — responds to its own width, not the viewport, so it works
+   *  inside a narrow panel/split). Opt-in; non-responsive output is unchanged. */
+  responsive?: boolean;
+  /** Accessible name for the tablist + the collapsed select. */
+  ariaLabel?: string;
+}) {
+  const strip = (
+    <div className="pl-tabs" role="tablist" aria-label={ariaLabel}>
       {items.map((t) => (
         <button
           key={t.id}
@@ -44,6 +60,24 @@ export function Tabs({ items, active, onSelect }: { items: TabItem[]; active: st
       ))}
     </div>
   );
+  if (!responsive) return strip;
+  return (
+    <div className="pl-tabs-wrap pl-tabs-wrap--responsive">
+      {strip}
+      <select
+        className="pl-tabs__select"
+        value={active}
+        aria-label={ariaLabel ?? "Select tab"}
+        onChange={(e) => onSelect(e.target.value)}
+      >
+        {items.map((t) => (
+          <option key={t.id} value={t.id} disabled={t.disabled || t.locked}>
+            {typeof t.label === "string" ? t.label : t.id}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
 }
 
 /** A horizontal kanban board. Wrap BoardColumn children. */

package/src/styles/navigation.css

@@ -71,6 +71,32 @@
   opacity: 0.6;
 }
 
+/* Responsive Tabs (opt-in via `responsive`): below ~30rem of CONTAINER width the
+   strip collapses to a <select>. A container query responds to the Tabs' own
+   container — not the viewport — so it collapses inside a narrow panel/split too. */
+.pl-tabs-wrap--responsive {
+  container-type: inline-size;
+  width: 100%;
+}
+.pl-tabs__select {
+  display: none;
+  width: 100%;
+  padding: 6px 10px;
+  font: inherit;
+  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);
+}
+@container (max-width: 30rem) {
+  .pl-tabs-wrap--responsive > .pl-tabs {
+    display: none;
+  }
+  .pl-tabs-wrap--responsive > .pl-tabs__select {
+    display: block;
+  }
+}
+
 /* ── Board (kanban) ────────────────────────────────────────────────────────── */
 .pl-board {
   display: flex;

package/src/styles/theming.css

@@ -0,0 +1,149 @@
+/* @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--static {
+  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,330 @@
+import { useCallback, useEffect, useState } from "react";
+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-/, "");
+
+const isHex6 = (val: string) => /^#[0-9a-f]{6}$/i.test(val.trim());
+
+// ── 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 hex = isHex6(val);
+                const changed = v in overrides;
+                return (
+                  <label key={v} className={cx("pl-theme-row", changed && "pl-theme-row--changed")}>
+                    {hex ? (
+                      <input
+                        type="color"
+                        className="pl-theme-row__swatch"
+                        value={val}
+                        onInput={(e) => setVar(v, (e.target as HTMLInputElement).value)}
+                        aria-label={prettyLabel(v)}
+                      />
+                    ) : (
+                      <span className="pl-theme-row__swatch pl-theme-row__swatch--static" style={{ background: val }} 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>
+  );
+}