@protolabsai/ui 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -12,7 +12,15 @@
     "*.css"
   ],
   "exports": {
-    ".": "./src/index.tsx",
+    "./primitives": "./src/primitives.tsx",
+    "./layout": "./src/layout.tsx",
+    "./marketing": "./src/marketing.tsx",
+    "./navigation": "./src/navigation.tsx",
+    "./forms": "./src/forms.tsx",
+    "./overlays": "./src/overlays.tsx",
+    "./data": "./src/data.tsx",
+    "./menu": "./src/menu.tsx",
+    "./app-shell": "./src/app-shell.tsx",
     "./styles.css": "./src/styles.css"
   },
   "files": [

package/src/AppShell.full.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "./primitives";
+import { PanelHeader } from "./navigation";
+import { AppShell, MobileNav, SurfaceRail } from "./app-shell";
+import type { MobileItem, RailItem } from "./app-shell";
+
+const meta: Meta = { title: "Components/AppShell" };
+export default meta;
+type Story = StoryObj;
+
+const G = () => (
+  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <rect x="2.5" y="2.5" width="11" height="11" rx="2" />
+  </svg>
+);
+
+const LEFT: RailItem[] = [
+  { id: "chat", label: "Chat", icon: <G />, dot: true },
+  { id: "activity", label: "Activity", icon: <G />, badge: 12 },
+  { id: "flows", label: "Flows", icon: <G /> },
+  { id: "knowledge", label: "Know", icon: <G /> },
+];
+const RIGHT: RailItem[] = [
+  { id: "inbox", label: "Inbox", icon: <G />, badge: 3 },
+  { id: "telemetry", label: "Stats", icon: <G /> },
+];
+
+const surfaceBody = (label: string) => (
+  <div style={{ flex: 1, padding: 16, color: "var(--pl-color-fg-muted)", fontSize: 13, fontFamily: "var(--pl-font-mono)" }}>
+    {label} surface content…
+  </div>
+);
+
+export const Full: Story = {
+  render: () => {
+    function Demo() {
+      const [activeLeft, setActiveLeft] = useState("chat");
+      const [activeRight, setActiveRight] = useState("inbox");
+      const [rightWidth, setRightWidth] = useState(360);
+      const [collapsed, setCollapsed] = useState(false);
+      const mobile: MobileItem[] = [...LEFT, ...RIGHT].map((i) => ({ id: i.id, label: i.label, icon: i.icon }));
+      return (
+        <div style={{ height: 480, border: "1px solid var(--pl-color-border)", borderRadius: 4, overflow: "hidden" }}>
+          <AppShell
+            leftItems={LEFT}
+            rightItems={RIGHT}
+            activeLeft={activeLeft}
+            activeRight={activeRight}
+            onSelect={(side, id) => {
+              if (side === "left") setActiveLeft(id);
+              else {
+                setActiveRight(id);
+                setCollapsed(false);
+              }
+            }}
+            rightWidth={rightWidth}
+            onRightWidthChange={setRightWidth}
+            rightCollapsed={collapsed}
+            onCollapse={setCollapsed}
+            leftContent={
+              <>
+                <PanelHeader title={activeLeft} actions={<Button size="sm">Action</Button>} />
+                {surfaceBody(activeLeft)}
+              </>
+            }
+            rightContent={
+              <>
+                <PanelHeader
+                  compact
+                  title={activeRight}
+                  actions={
+                    <Button size="sm" variant="ghost" onClick={() => setCollapsed(true)}>
+                      Collapse
+                    </Button>
+                  }
+                />
+                {surfaceBody(activeRight)}
+              </>
+            }
+            mobileItems={mobile}
+            mobileActiveId={activeLeft}
+            onMobileSelect={setActiveLeft}
+            quickBarIds={["chat", "activity", "flows", "inbox", "telemetry"]}
+          />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Rail: Story = {
+  render: () => {
+    function Demo() {
+      const [active, setActive] = useState("activity");
+      return (
+        <div style={{ height: 320, width: 64, border: "1px solid var(--pl-color-border)", borderRadius: 4 }}>
+          <SurfaceRail
+            side="left"
+            ariaLabel="Surfaces"
+            items={LEFT}
+            activeId={active}
+            onSelect={setActive}
+            onContextMenu={(e) => e.preventDefault()}
+          />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};
+
+export const Mobile: Story = {
+  render: () => {
+    function Demo() {
+      const [active, setActive] = useState("chat");
+      const mobile: MobileItem[] = [...LEFT, ...RIGHT].map((i) => ({ id: i.id, label: i.label, icon: i.icon }));
+      return (
+        <div style={{ width: 360, border: "1px solid var(--pl-color-border)", borderRadius: 4 }}>
+          <div style={{ height: 220, padding: 16, color: "var(--pl-color-fg-muted)", fontFamily: "var(--pl-font-mono)", fontSize: 13 }}>
+            {active} surface — tap “More” for the full list
+          </div>
+          <MobileNav items={mobile} activeId={active} onSelect={setActive} quickBarIds={["chat", "activity", "flows", "inbox"]} />
+        </div>
+      );
+    }
+    return <Demo />;
+  },
+};

package/src/AppShell.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Badge, Button, PanelHeader, Tabs } from "./index";
+import { Badge, Button } from "./primitives";
+import { PanelHeader, Tabs } from "./navigation";
 
-const meta: Meta = { title: "Components/AppShell" };
+const meta: Meta = { title: "Components/Navigation" };
 export default meta;
 type Story = StoryObj;
 

package/src/Badge.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Badge, type Status } from "./index";
+import { Badge, type Status } from "./primitives";
 
 const meta: Meta<typeof Badge> = {
-  title: "Components/Badge",
+  title: "Components/Primitives/Badge",
   component: Badge,
   args: { children: "released" },
   argTypes: { status: { control: "inline-radio", options: ["neutral", "success", "warning", "error", "info"] } },

package/src/Blog.stories.tsx

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Container, Empty, PostItem, PostList, Prose } from "./index";
+import { Empty } from "./primitives";
+import { Container } from "./layout";
+import { PostItem, PostList, Prose } from "./marketing";
 
-const meta: Meta = { title: "Components/Blog" };
+const meta: Meta = { title: "Components/Marketing/Blog" };
 export default meta;
 type Story = StoryObj;
 

package/src/Button.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./index";
+import { Button } from "./primitives";
 
 const meta: Meta<typeof Button> = {
-  title: "Components/Button",
+  title: "Components/Primitives/Button",
   component: Button,
   args: { children: "Breakdowns" },
   argTypes: { variant: { control: "inline-radio", options: ["default", "primary", "ghost", "danger"] } },

package/src/Content.stories.tsx

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button, Container, Eyebrow, GradientText, Hero, HeroActions, Heading, Lead, Section, SectionIntro } from "./index";
+import { Button, Eyebrow } from "./primitives";
+import { Container, Section } from "./layout";
+import { GradientText, Hero, HeroActions, Heading, Lead, SectionIntro } from "./marketing";
 
-const meta: Meta = { title: "Components/Content" };
+const meta: Meta = { title: "Components/Marketing/Content" };
 export default meta;
 type Story = StoryObj;
 

package/src/Data.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Badge, ScrollArea, Spinner, StatusDot, TBody, THead, Table, Td, Th, Tr } from "./index";
+import { Badge } from "./primitives";
+import { ScrollArea, Spinner, StatusDot, TBody, THead, Table, Td, Th, Tr } from "./data";
 
 const meta: Meta = { title: "Components/Data" };
 export default meta;

package/src/Forms.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Checkbox, Field, Input, Select, Switch, Textarea } from "./index";
+import { Checkbox, Field, Input, Select, Switch, Textarea } from "./forms";
 
 const meta: Meta = { title: "Components/Forms" };
 export default meta;

package/src/Introduction.stories.tsx

@@ -1,17 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-  Callout,
-  Container,
-  Divider,
-  Eyebrow,
-  GradientText,
-  Heading,
-  Hero,
-  Lead,
-  Row,
-  Section,
-  SectionIntro,
-} from "./index";
+import { Callout, Divider, Eyebrow } from "./primitives";
+import { Container, Row, Section } from "./layout";
+import { GradientText, Heading, Hero, Lead, SectionIntro } from "./marketing";
 
 const meta: Meta = {
   title: "Introduction",

package/src/Menu.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useRef } from "react";
-import { Button, Menu, MenuHandle, MenuItem, MenuLabel, MenuSeparator, MenuSub } from "./index";
+import { Button } from "./primitives";
+import { Menu, MenuHandle, MenuItem, MenuLabel, MenuSeparator, MenuSub } from "./menu";
 
 const meta: Meta = { title: "Components/Menu" };
 export default meta;

package/src/Overlays.stories.tsx

@@ -1,15 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import {
-  Button,
-  ConfirmDialog,
-  Dialog,
-  Drawer,
-  Field,
-  Tooltip,
-  ToastProvider,
-  useToast,
-} from "./index";
+import { Button } from "./primitives";
+import { Field } from "./forms";
+import { ConfirmDialog, Dialog, Drawer, Tooltip, ToastProvider, useToast } from "./overlays";
 
 const meta: Meta = { title: "Components/Overlays" };
 export default meta;

package/src/Primitives.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Callout, Divider, Kbd, TextLink } from "./index";
+import { Callout, Divider, Kbd, TextLink } from "./primitives";
 
-const meta: Meta = { title: "Components/Primitives" };
+const meta: Meta = { title: "Components/Primitives/Atoms" };
 export default meta;
 type Story = StoryObj;
 

package/src/Process.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Check, Checks, Deliverable, Deliverables, Heading, Section, Step, Steps } from "./index";
+import { Section } from "./layout";
+import { Check, Checks, Deliverable, Deliverables, Heading, Step, Steps } from "./marketing";
 
-const meta: Meta = { title: "Components/Process" };
+const meta: Meta = { title: "Components/Marketing/Process" };
 export default meta;
 type Story = StoryObj;
 

package/src/Row.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Row, Stats, Stat } from "./index";
+import { Row, Stats, Stat } from "./layout";
 
-const meta: Meta<typeof Row> = { title: "Components/Row", component: Row };
+const meta: Meta<typeof Row> = { title: "Components/Layout/Row", component: Row };
 export default meta;
 type Story = StoryObj<typeof Row>;
 

package/src/Skeleton.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Skeleton, SkeletonGroup } from "./index";
+import { Skeleton, SkeletonGroup } from "./data";
 
-const meta: Meta = { title: "Components/Skeleton" };
+const meta: Meta = { title: "Components/Data/Skeleton" };
 export default meta;
 type Story = StoryObj;
 

package/src/Surface.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Card, Eyebrow, Stat } from "./index";
+import { Card, Eyebrow } from "./primitives";
+import { Stat } from "./layout";
 
-const meta: Meta = { title: "Components/Surface" };
+const meta: Meta = { title: "Components/Primitives/Surface" };
 export default meta;
 type Story = StoryObj;
 

package/src/app-shell.tsx

@@ -0,0 +1,309 @@
+// The operator-console shell, converged from protoAgent's production ADR 0035
+// dual-rail layout. All three are dumb + props-driven; persistence (rail order,
+// widths, active surfaces) stays app-side — AppShell is controlled.
+import type {
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+} from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cx } from "./internal";
+import { Drawer } from "./overlays";
+
+export type RailItem = {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  /** Count badge (caps at "9+"). Mutually exclusive with `dot`. */
+  badge?: number;
+  /** Pulsing indicator, no count (e.g. a background stream). */
+  dot?: boolean;
+};
+
+/** Vertical icon rail — both the left and right rails render through this.
+ *  `onContextMenu` is the integration point for the DS `Menu` (right-click →
+ *  host calls menuRef.open({x,y})); the menu's registry/keying stays app-side. */
+export function SurfaceRail({
+  side,
+  ariaLabel,
+  items,
+  activeId,
+  onSelect,
+  onContextMenu,
+}: {
+  side: "left" | "right";
+  ariaLabel: string;
+  items: RailItem[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  onContextMenu?: (e: ReactMouseEvent, id: string) => void;
+}) {
+  return (
+    <aside className={cx("pl-rail", side === "right" && "pl-rail--right")} aria-label={ariaLabel}>
+      {items.map((it) => (
+        <button
+          key={it.id}
+          type="button"
+          className={cx("pl-rail__btn", it.id === activeId && "pl-rail__btn--active")}
+          title={it.label}
+          aria-label={it.label}
+          aria-current={it.id === activeId ? "page" : undefined}
+          onClick={() => onSelect(it.id)}
+          onContextMenu={onContextMenu ? (e) => onContextMenu(e, it.id) : undefined}
+        >
+          <span className="pl-rail__icon" aria-hidden>
+            {it.icon}
+          </span>
+          <span className="pl-rail__label">{it.label}</span>
+          {it.badge ? (
+            <span className="pl-rail__badge">{it.badge > 9 ? "9+" : it.badge}</span>
+          ) : it.dot ? (
+            <span className="pl-rail__dot" aria-label="active" />
+          ) : null}
+        </button>
+      ))}
+    </aside>
+  );
+}
+
+export type MobileItem = { id: string; label: string; icon: ReactNode };
+
+/** Mobile shell (<768px): a bottom quick-bar (first 5 pinned surfaces) + a
+ *  "More" button that opens the full surface list in a DS `Drawer`. */
+export function MobileNav({
+  items,
+  activeId,
+  onSelect,
+  quickBarIds,
+}: {
+  items: MobileItem[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  /** Surfaces pinned to the bottom bar (first 5 used). */
+  quickBarIds: string[];
+}) {
+  const [open, setOpen] = useState(false);
+  const byId = new Map(items.map((i) => [i.id, i] as const));
+  const quick = quickBarIds
+    .map((id) => byId.get(id))
+    .filter((i): i is MobileItem => Boolean(i))
+    .slice(0, 5);
+  const pick = (id: string) => {
+    onSelect(id);
+    setOpen(false);
+  };
+  return (
+    <>
+      <nav className="pl-mobilenav" aria-label="Quick surfaces">
+        {quick.map((it) => (
+          <button
+            key={it.id}
+            type="button"
+            className={cx("pl-mobilenav__tab", it.id === activeId && "pl-mobilenav__tab--active")}
+            onClick={() => pick(it.id)}
+          >
+            <span className="pl-mobilenav__icon" aria-hidden>
+              {it.icon}
+            </span>
+            <span>{it.label}</span>
+          </button>
+        ))}
+        <button type="button" className="pl-mobilenav__tab" onClick={() => setOpen(true)} aria-label="All surfaces">
+          <span className="pl-mobilenav__icon" aria-hidden>
+            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M3 6h18M3 12h18M3 18h18" />
+            </svg>
+          </span>
+          <span>More</span>
+        </button>
+      </nav>
+      <Drawer open={open} onClose={() => setOpen(false)} side="right" title="Surfaces" width={280}>
+        <div className="pl-mobilenav__list">
+          {items.map((it) => (
+            <button
+              key={it.id}
+              type="button"
+              className={cx("pl-mobilenav__list-item", it.id === activeId && "pl-mobilenav__list-item--active")}
+              onClick={() => pick(it.id)}
+            >
+              <span className="pl-mobilenav__icon" aria-hidden>
+                {it.icon}
+              </span>
+              <span>{it.label}</span>
+            </button>
+          ))}
+        </div>
+      </Drawer>
+    </>
+  );
+}
+
+/** True below `breakpoint` px (client-only; false on first paint). */
+function useIsMobile(breakpoint: number) {
+  const [mobile, setMobile] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const update = () => setMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, [breakpoint]);
+  return mobile;
+}
+
+export type AppShellProps = {
+  leftItems: RailItem[];
+  rightItems: RailItem[];
+  activeLeft: string;
+  activeRight: string;
+  onSelect: (side: "left" | "right", id: string) => void;
+  /** Right-click on a rail icon — wire to a DS `Menu` for move/reorder etc. */
+  onRailContextMenu?: (side: "left" | "right", e: ReactMouseEvent, id: string) => void;
+  leftContent: ReactNode;
+  rightContent: ReactNode;
+  /** Controlled right-column width (px). */
+  rightWidth: number;
+  onRightWidthChange: (width: number) => void;
+  rightCollapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  minRightWidth?: number;
+  maxRightWidth?: number;
+  /** Mobile (<breakpoint) config. Omit to disable the mobile shell. */
+  mobileItems?: MobileItem[];
+  mobileActiveId?: string;
+  onMobileSelect?: (id: string) => void;
+  quickBarIds?: string[];
+  mobileBreakpoint?: number;
+  className?: string;
+};
+
+/** The full dual-rail operator shell:
+ *  `[left rail][left column][resize handle][right column][right rail]`,
+ *  collapsing to `MobileNav` below `mobileBreakpoint`. Controlled — the host
+ *  owns the surface registry and persists rail order / widths / active state. */
+export function AppShell({
+  leftItems,
+  rightItems,
+  activeLeft,
+  activeRight,
+  onSelect,
+  onRailContextMenu,
+  leftContent,
+  rightContent,
+  rightWidth,
+  onRightWidthChange,
+  rightCollapsed = false,
+  onCollapse,
+  minRightWidth = 280,
+  maxRightWidth = 720,
+  mobileItems,
+  mobileActiveId,
+  onMobileSelect,
+  quickBarIds,
+  mobileBreakpoint = 768,
+  className,
+}: AppShellProps) {
+  const isMobile = useIsMobile(mobileBreakpoint);
+  const drag = useRef<{ startX: number; startW: number } | null>(null);
+  const clamp = useCallback(
+    (w: number) => Math.min(maxRightWidth, Math.max(minRightWidth, w)),
+    [minRightWidth, maxRightWidth],
+  );
+
+  const onPointerDown = useCallback(
+    (e: ReactPointerEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      drag.current = { startX: e.clientX, startW: rightWidth };
+      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)));
+    },
+    [clamp, onRightWidthChange],
+  );
+  const onPointerUp = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
+    drag.current = null;
+    e.currentTarget.releasePointerCapture?.(e.pointerId);
+  }, []);
+  const onKeyDown = useCallback(
+    (e: ReactKeyboardEvent<HTMLDivElement>) => {
+      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));
+      }
+    },
+    [rightWidth, clamp, onRightWidthChange],
+  );
+
+  if (isMobile && mobileItems && onMobileSelect && quickBarIds) {
+    return (
+      <div className={cx("pl-appshell", "pl-appshell--mobile", className)}>
+        <div className="pl-appshell__mobile-stage">{leftContent}</div>
+        <MobileNav
+          items={mobileItems}
+          activeId={mobileActiveId ?? activeLeft}
+          onSelect={onMobileSelect}
+          quickBarIds={quickBarIds}
+        />
+      </div>
+    );
+  }
+
+  const showRight = !rightCollapsed && rightItems.length > 0;
+  return (
+    <div className={cx("pl-appshell", className)}>
+      <SurfaceRail
+        side="left"
+        ariaLabel="Left surfaces"
+        items={leftItems}
+        activeId={activeLeft}
+        onSelect={(id) => onSelect("left", id)}
+        onContextMenu={onRailContextMenu ? (e, id) => onRailContextMenu("left", e, id) : undefined}
+      />
+      <main className="pl-appshell__col pl-appshell__col--left">{leftContent}</main>
+      {showRight && (
+        <div
+          className="pl-appshell__handle"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize right panel"
+          aria-valuenow={rightWidth}
+          aria-valuemin={minRightWidth}
+          aria-valuemax={maxRightWidth}
+          tabIndex={0}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onKeyDown={onKeyDown}
+          onDoubleClick={() => onCollapse?.(true)}
+        />
+      )}
+      {showRight && (
+        <aside
+          className="pl-appshell__col pl-appshell__col--right"
+          style={{ flex: `0 0 ${rightWidth}px`, width: rightWidth }}
+        >
+          {rightContent}
+        </aside>
+      )}
+      <SurfaceRail
+        side="right"
+        ariaLabel="Right surfaces"
+        items={rightItems}
+        activeId={activeRight}
+        onSelect={(id) => onSelect("right", id)}
+        onContextMenu={onRailContextMenu ? (e, id) => onRailContextMenu("right", e, id) : undefined}
+      />
+    </div>
+  );
+}