@protolabsai/ui 0.7.0 → 0.8.0

package/package.json

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

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { AppShell, Button, MobileNav, PanelHeader, SurfaceRail } from "./index";
-import type { MobileItem, RailItem } from "./index";
+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;

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>
+  );
+}

package/src/data.tsx

@@ -0,0 +1,126 @@
+import type {
+  HTMLAttributes,
+  ReactNode,
+  TableHTMLAttributes,
+  TdHTMLAttributes,
+  ThHTMLAttributes,
+} from "react";
+import { cx } from "./internal";
+import type { Status } from "./internal";
+
+/** Dense data table on the 4px grid. Compose with THead/TBody/Tr/Th/Td. */
+export function Table({ className, ...rest }: TableHTMLAttributes<HTMLTableElement>) {
+  return <table className={cx("pl-table", className)} {...rest} />;
+}
+export function THead(props: HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead {...props} />;
+}
+export function TBody(props: HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody {...props} />;
+}
+/** Table row. `selected` highlights; an `onClick` makes it hover-interactive. */
+export function Tr({
+  selected,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLTableRowElement> & { selected?: boolean }) {
+  return (
+    <tr
+      className={cx(selected && "pl-tr--selected", rest.onClick && "pl-tr--interactive", className)}
+      {...rest}
+    />
+  );
+}
+export function Th({ className, ...rest }: ThHTMLAttributes<HTMLTableCellElement>) {
+  return <th className={className} {...rest} />;
+}
+export function Td({ className, ...rest }: TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={className} {...rest} />;
+}
+
+/** Live/health indicator. `pulse` breathes on the 2s status cadence. */
+export function StatusDot({
+  status = "neutral",
+  pulse,
+  label,
+}: {
+  status?: Status;
+  pulse?: boolean;
+  label?: ReactNode;
+}) {
+  const dot = (
+    <span
+      className={cx("pl-dot", status !== "neutral" && `pl-dot--${status}`, pulse && "pl-dot--pulse")}
+      aria-hidden
+    />
+  );
+  if (label == null) return dot;
+  return (
+    <span className="pl-dot-row">
+      {dot}
+      <span className="pl-dot-row__label">{label}</span>
+    </span>
+  );
+}
+
+/** Indeterminate spinner (1s linear, brand-restrained). */
+export function Spinner({ size = 16, className }: { size?: number; className?: string }) {
+  return (
+    <span
+      className={cx("pl-spinner", className)}
+      style={{ width: size, height: size }}
+      role="status"
+      aria-label="Loading"
+    />
+  );
+}
+
+/** Scroll container with brand-styled thin scrollbars. Carries `min-height:0`
+ *  (so it scrolls inside flex/grid parents) + overscroll containment. Pass
+ *  `ariaLabel` to make it a keyboard-focusable, labelled scroll region. */
+export function ScrollArea({
+  ariaLabel,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & { ariaLabel?: string }) {
+  const a11y = ariaLabel != null ? { role: "region", "aria-label": ariaLabel, tabIndex: 0 } : {};
+  return <div className={cx("pl-scroll", className)} {...a11y} {...rest} />;
+}
+
+/** Shimmering content-shaped loading placeholder. `lines>1` stacks text bars
+ *  (last one short). Token-driven; static fill under reduced-motion. */
+export function Skeleton({
+  width,
+  height = 14,
+  lines,
+  className,
+  style,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & {
+  width?: number | string;
+  height?: number | string;
+  /** Stack N text-line bars instead of a single bar. */
+  lines?: number;
+}) {
+  if (lines != null && lines > 1) {
+    return (
+      <div className={cx("pl-skel-lines", className)} style={style} {...rest}>
+        {Array.from({ length: lines }, (_, i) => (
+          <div
+            key={i}
+            className="pl-skel"
+            style={{ height, width: i === lines - 1 ? "65%" : (width ?? "100%") }}
+          />
+        ))}
+      </div>
+    );
+  }
+  return (
+    <div className={cx("pl-skel", className)} style={{ width: width ?? "100%", height, ...style }} {...rest} />
+  );
+}
+
+/** Optional wrapper to group related skeletons (shared layout gap). */
+export function SkeletonGroup({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("pl-skel-group", className)} {...rest} />;
+}