@protolabsai/ui 0.16.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -35,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": {
@@ -44,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/AppShell.full.stories.tsx

@@ -46,6 +46,7 @@ export const Full: Story = {
       const [activeRight, setActiveRight] = useState("inbox");
       const [rightWidth, setRightWidth] = useState(360);
       const [collapsed, setCollapsed] = useState(false);
+      const [leftCollapsed, setLeftCollapsed] = useState(false);
       const leftItems = order.left.map((id) => BY_ID.get(id)!);
       const rightItems = order.right.map((id) => BY_ID.get(id)!);
       const mobile: MobileItem[] = [...LEFT, ...RIGHT].map((i) => ({ id: i.id, label: i.label, icon: i.icon }));
@@ -58,8 +59,10 @@ export const Full: Story = {
             activeLeft={activeLeft}
             activeRight={activeRight}
             onSelect={(side, id) => {
-              if (side === "left") setActiveLeft(id);
-              else {
+              if (side === "left") {
+                setActiveLeft(id);
+                setLeftCollapsed(false);
+              } else {
                 setActiveRight(id);
                 setCollapsed(false);
               }
@@ -68,9 +71,21 @@ export const Full: Story = {
             onRightWidthChange={setRightWidth}
             rightCollapsed={collapsed}
             onCollapse={setCollapsed}
+            leftCollapsed={leftCollapsed}
+            onLeftCollapse={setLeftCollapsed}
             leftContent={
               <>
-                <PanelHeader title={activeLeft} actions={<Button size="sm">Action</Button>} />
+                <PanelHeader
+                  title={activeLeft}
+                  actions={
+                    <>
+                      <Button size="sm">Action</Button>
+                      <Button size="sm" variant="ghost" onClick={() => setLeftCollapsed(true)}>
+                        Close
+                      </Button>
+                    </>
+                  }
+                />
                 {surfaceBody(activeLeft)}
               </>
             }

package/src/app-shell.tsx

@@ -274,6 +274,14 @@ export type AppShellProps = {
   onCollapse?: (collapsed: boolean) => void;
   minRightWidth?: number;
   maxRightWidth?: number;
+  /** Controlled left-column collapse — drives the left close button and the
+   *  overdrag-left snap. Mirrors `rightCollapsed`/`onCollapse`. */
+  leftCollapsed?: boolean;
+  onLeftCollapse?: (collapsed: boolean) => void;
+  /** Min left-column width (px). The single divider holds the left column here
+   *  on the way in; dragging `OVERDRAG` px further snaps the left column closed
+   *  (it stays `leftCollapsed` until the host restores it). */
+  minLeftWidth?: number;
   /** Mobile (<breakpoint) config. Omit to disable the mobile shell. */
   mobileItems?: MobileItem[];
   mobileActiveId?: string;
@@ -309,6 +317,9 @@ export function AppShell({
   onCollapse,
   minRightWidth = 280,
   maxRightWidth = 720,
+  leftCollapsed = false,
+  onLeftCollapse,
+  minLeftWidth = 280,
   mobileItems,
   mobileActiveId,
   onMobileSelect,
@@ -321,25 +332,54 @@ export function AppShell({
   const isMobile = useIsMobile(mobileBreakpoint);
 
   // ── resize handle ──
-  const drag = useRef<{ startX: number; startW: number } | null>(null);
-  const clamp = useCallback(
-    (w: number) => Math.min(maxRightWidth, Math.max(minRightWidth, w)),
-    [minRightWidth, maxRightWidth],
+  // One divider, zero-sum: the right column is width-controlled and the left
+  // flexes to fill, so dragging grows one column as it shrinks the other. Each
+  // side is held at its min on the way in; OVERDRAG px past that min snaps that
+  // side closed (collapse is controlled — the host restores it).
+  const OVERDRAG = 64;
+  const leftColRef = useRef<HTMLElement | null>(null);
+  const drag = useRef<{ startX: number; startW: number; startLeftW: number } | null>(null);
+  /** Resize `rightWidth` to `raw` px, holding both columns at their minimums. */
+  const commit = useCallback(
+    (raw: number, startLeftW: number, startW: number) => {
+      const upper = Math.max(minRightWidth, Math.min(maxRightWidth, startLeftW + startW - minLeftWidth));
+      onRightWidthChange(Math.min(upper, Math.max(minRightWidth, raw)));
+    },
+    [minRightWidth, maxRightWidth, minLeftWidth, onRightWidthChange],
   );
   const onPointerDown = useCallback(
     (e: ReactPointerEvent<HTMLDivElement>) => {
       e.preventDefault();
-      drag.current = { startX: e.clientX, startW: rightWidth };
+      drag.current = { startX: e.clientX, startW: rightWidth, startLeftW: leftColRef.current?.clientWidth ?? 0 };
       e.currentTarget.setPointerCapture(e.pointerId);
     },
     [rightWidth],
   );
   const onPointerMove = useCallback(
     (e: ReactPointerEvent<HTMLDivElement>) => {
-      if (!drag.current) return;
-      onRightWidthChange(clamp(drag.current.startW + (drag.current.startX - e.clientX)));
+      const d = drag.current;
+      if (!d) return;
+      const raw = d.startW + (d.startX - e.clientX);
+      const predictedLeft = d.startLeftW - (raw - d.startW);
+      const endDrag = () => {
+        drag.current = null;
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+      };
+      // Overdrag toward the right rail → snap the right column closed.
+      if (onCollapse && raw < minRightWidth - OVERDRAG) {
+        endDrag();
+        onCollapse(true);
+        return;
+      }
+      // Overdrag toward the left rail → snap the left column closed.
+      if (onLeftCollapse && predictedLeft < minLeftWidth - OVERDRAG) {
+        endDrag();
+        onLeftCollapse(true);
+        return;
+      }
+      commit(raw, d.startLeftW, d.startW);
     },
-    [clamp, onRightWidthChange],
+    [minRightWidth, minLeftWidth, onCollapse, onLeftCollapse, commit],
   );
   const onPointerUp = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
     drag.current = null;
@@ -347,16 +387,14 @@ export function AppShell({
   }, []);
   const onKeyDown = useCallback(
     (e: ReactKeyboardEvent<HTMLDivElement>) => {
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      e.preventDefault();
       const step = e.shiftKey ? 48 : 16;
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        onRightWidthChange(clamp(rightWidth + step));
-      } else if (e.key === "ArrowRight") {
-        e.preventDefault();
-        onRightWidthChange(clamp(rightWidth - step));
-      }
+      const startLeftW = leftColRef.current?.clientWidth ?? 0;
+      // ArrowLeft grows the right column (shrinks the left); ArrowRight reverses.
+      commit(rightWidth + (e.key === "ArrowLeft" ? step : -step), startLeftW, rightWidth);
     },
-    [rightWidth, clamp, onRightWidthChange],
+    [rightWidth, commit],
   );
 
   // ── rail drag-and-drop (only when onRailReorder is provided) ──
@@ -450,6 +488,8 @@ export function AppShell({
   }
 
   const showRight = !rightCollapsed && rightItems.length > 0;
+  const showLeft = !leftCollapsed;
+  const showHandle = showLeft && showRight;
   const ctxLeft = onRailContextMenu ? (e: ReactMouseEvent, id: string) => onRailContextMenu("left", e, id) : undefined;
   const ctxRight = onRailContextMenu ? (e: ReactMouseEvent, id: string) => onRailContextMenu("right", e, id) : undefined;
 
@@ -458,16 +498,21 @@ export function AppShell({
       {header != null && <div className="pl-appshell__header">{header}</div>}
       <div className="pl-appshell">
         {leftRail}
-        <main className="pl-appshell__col pl-appshell__col--left">{leftContent}</main>
-        {showRight && (
+        {showLeft && (
+          <main ref={leftColRef} className="pl-appshell__col pl-appshell__col--left">
+            {leftContent}
+          </main>
+        )}
+        {showHandle && (
           <div
             className="pl-appshell__handle"
             role="separator"
             aria-orientation="vertical"
-            aria-label="Resize right panel"
+            aria-label="Resize panels"
             aria-valuenow={rightWidth}
             aria-valuemin={minRightWidth}
             aria-valuemax={maxRightWidth}
+            aria-valuetext={`Right panel ${rightWidth}px`}
             tabIndex={0}
             onPointerDown={onPointerDown}
             onPointerMove={onPointerMove}
@@ -478,8 +523,8 @@ export function AppShell({
         )}
         {showRight && (
           <aside
-            className="pl-appshell__col pl-appshell__col--right"
-            style={{ flex: `0 0 ${rightWidth}px`, width: rightWidth }}
+            className={cx("pl-appshell__col pl-appshell__col--right", !showLeft && "pl-appshell__col--fill")}
+            style={showLeft ? { flex: `0 0 ${rightWidth}px`, width: rightWidth } : undefined}
           >
             {rightContent}
           </aside>

package/src/styles/app-shell.css

@@ -222,6 +222,13 @@
   border-left: var(--pl-border-width) solid var(--pl-color-border);
 }
 
+/* When the left column is collapsed, the surviving column fills the stage
+   (no fixed width, no divider) instead of sitting at its controlled width. */
+.pl-appshell__col--fill {
+  flex: 1 1 auto;
+  border-left: none;
+}
+
 .pl-appshell__handle {
   flex: 0 0 auto;
   width: 5px;

package/src/styles/theming.css

@@ -116,7 +116,8 @@
   border: none;
   border-radius: calc(var(--pl-radius) - 1px);
 }
-.pl-theme-row__swatch--static {
+.pl-theme-row__swatch--none {
+  border-color: transparent;
   cursor: default;
 }
 .pl-theme-row__label {

package/src/theming.tsx

@@ -1,4 +1,5 @@
 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";
@@ -54,7 +55,59 @@ const prettyLabel = (v: string) =>
     .trim()
     .replace(/\b\w/g, (c) => c.toUpperCase()) || v.replace(/^--pl-/, "");
 
-const isHex6 = (val: string) => /^#[0-9a-f]{6}$/i.test(val.trim());
+// ── 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 = {
@@ -294,20 +347,20 @@ export function ThemePanel({
               <legend className="pl-theme-group__legend">{g.label}</legend>
               {vars.map((v) => {
                 const val = valueOf(v);
-                const hex = isHex6(val);
+                const color = isColor(val);
                 const changed = v in overrides;
                 return (
                   <label key={v} className={cx("pl-theme-row", changed && "pl-theme-row--changed")}>
-                    {hex ? (
+                    {color ? (
                       <input
                         type="color"
                         className="pl-theme-row__swatch"
-                        value={val}
-                        onInput={(e) => setVar(v, (e.target as HTMLInputElement).value)}
+                        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--static" style={{ background: val }} aria-hidden />
+                      <span className="pl-theme-row__swatch pl-theme-row__swatch--none" aria-hidden />
                     )}
                     <span className="pl-theme-row__label" title={v}>
                       {prettyLabel(v)}