@protolabsai/ui 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -27,10 +27,13 @@
     "src"
   ],
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-dropdown-menu": "^2.1.17",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@protolabsai/design": "0.4.0"
+    "@protolabsai/design": "0.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/AppShell.full.stories.tsx

@@ -25,6 +25,7 @@ const RIGHT: RailItem[] = [
   { id: "inbox", label: "Inbox", icon: <G />, badge: 3 },
   { id: "telemetry", label: "Stats", icon: <G /> },
 ];
+const BY_ID = new Map([...LEFT, ...RIGHT].map((i) => [i.id, i] as const));
 
 const surfaceBody = (label: string) => (
   <div style={{ flex: 1, padding: 16, color: "var(--pl-color-fg-muted)", fontSize: 13, fontFamily: "var(--pl-font-mono)" }}>
@@ -35,16 +36,20 @@ const surfaceBody = (label: string) => (
 export const Full: Story = {
   render: () => {
     function Demo() {
+      const [order, setOrder] = useState({ left: LEFT.map((i) => i.id), right: RIGHT.map((i) => i.id) });
       const [activeLeft, setActiveLeft] = useState("chat");
       const [activeRight, setActiveRight] = useState("inbox");
       const [rightWidth, setRightWidth] = useState(360);
       const [collapsed, setCollapsed] = 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 }));
       return (
         <div style={{ height: 480, border: "1px solid var(--pl-color-border)", borderRadius: 4, overflow: "hidden" }}>
           <AppShell
-            leftItems={LEFT}
-            rightItems={RIGHT}
+            leftItems={leftItems}
+            rightItems={rightItems}
+            onRailReorder={setOrder}
             activeLeft={activeLeft}
             activeRight={activeRight}
             onSelect={(side, id) => {

package/src/Foundations.stories.tsx

@@ -5,14 +5,27 @@ export default meta;
 type Story = StoryObj;
 
 const COLORS: Array<[string, string]> = [
-  ["Brand lavender", "--pl-color-brand-lavender"],
   ["Lavender light", "--pl-color-brand-lavender-light"],
-  ["Indigo", "--pl-color-brand-indigo"],
+  ["Brand lavender", "--pl-color-brand-lavender"],
+  ["Lavender deep", "--pl-color-brand-lavender-deep"],
   ["Indigo bright", "--pl-color-brand-indigo-bright"],
+  ["Indigo", "--pl-color-brand-indigo"],
+  ["Indigo deep", "--pl-color-brand-indigo-deep"],
+  ["Accent", "--pl-color-accent"],
+  ["Accent hover", "--pl-color-accent-hover"],
+  ["Accent fg", "--pl-color-accent-fg"],
+  ["Focus ring", "--pl-color-focus"],
   ["Ground", "--pl-color-bg"],
   ["Raised", "--pl-color-bg-raised"],
+  ["Subtle", "--pl-color-bg-subtle"],
+  ["Hover", "--pl-color-bg-hover"],
+  ["Inset", "--pl-color-bg-inset"],
   ["Foreground", "--pl-color-fg"],
   ["Muted", "--pl-color-fg-muted"],
+  ["Subtle text", "--pl-color-fg-subtle"],
+  ["On accent", "--pl-color-fg-on-accent"],
+  ["Border", "--pl-color-border"],
+  ["Border strong", "--pl-color-border-strong"],
   ["Success", "--pl-color-status-success"],
   ["Warning", "--pl-color-status-warning"],
   ["Error", "--pl-color-status-error"],

package/src/app-shell.tsx

@@ -7,7 +7,26 @@ import type {
   PointerEvent as ReactPointerEvent,
   ReactNode,
 } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { DragEndEvent, DragOverEvent, DragStartEvent } from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { cx } from "./internal";
 import { Drawer } from "./overlays";
 
@@ -21,6 +40,31 @@ export type RailItem = {
   dot?: boolean;
 };
 
+/** Icon + label + badge/dot — shared by the rail buttons and the drag overlay
+ *  (so a dragged item keeps its count/dot). */
+function RailItemInner({ item }: { item: RailItem }) {
+  return (
+    <>
+      <span className="pl-rail__icon" aria-hidden>
+        {item.icon}
+      </span>
+      <span className="pl-rail__label">{item.label}</span>
+      {item.badge ? (
+        <span className="pl-rail__badge">{item.badge > 9 ? "9+" : item.badge}</span>
+      ) : item.dot ? (
+        <span className="pl-rail__dot" aria-label="active" />
+      ) : null}
+    </>
+  );
+}
+
+type RailButtonProps = {
+  item: RailItem;
+  active: boolean;
+  onSelect: (id: string) => void;
+  onContextMenu?: (e: ReactMouseEvent, id: string) => void;
+};
+
 /** 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. */
@@ -52,21 +96,75 @@ export function SurfaceRail({
           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}
+          <RailItemInner item={it} />
         </button>
       ))}
     </aside>
   );
 }
 
+// ── Drag-and-drop rails (dnd-kit) — used by AppShell when onRailReorder is set ──
+
+const railDropId = (side: "left" | "right") => `__rail__:${side}`;
+
+function SortableRailButton({ item, active, onSelect, onContextMenu }: RailButtonProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.id });
+  return (
+    <button
+      ref={setNodeRef}
+      type="button"
+      style={{ transform: CSS.Translate.toString(transform), transition }}
+      className={cx("pl-rail__btn", active && "pl-rail__btn--active", isDragging && "pl-rail__btn--dragging")}
+      title={item.label}
+      aria-label={item.label}
+      aria-current={active ? "page" : undefined}
+      onClick={() => onSelect(item.id)}
+      onContextMenu={onContextMenu ? (e) => onContextMenu(e, item.id) : undefined}
+      {...attributes}
+      {...listeners}
+    >
+      <RailItemInner item={item} />
+    </button>
+  );
+}
+
+function SortableRail({
+  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;
+}) {
+  const { setNodeRef } = useDroppable({ id: railDropId(side) });
+  return (
+    <aside
+      ref={setNodeRef}
+      className={cx("pl-rail", "pl-rail--sortable", side === "right" && "pl-rail--right")}
+      aria-label={ariaLabel}
+    >
+      <SortableContext items={items.map((i) => i.id)} strategy={verticalListSortingStrategy}>
+        {items.map((it) => (
+          <SortableRailButton
+            key={it.id}
+            item={it}
+            active={it.id === activeId}
+            onSelect={onSelect}
+            onContextMenu={onContextMenu}
+          />
+        ))}
+      </SortableContext>
+    </aside>
+  );
+}
+
 export type MobileItem = { id: string; label: string; icon: ReactNode };
 
 /** Mobile shell (<768px): a bottom quick-bar (first 5 pinned surfaces) + a
@@ -153,6 +251,8 @@ function useIsMobile(breakpoint: number) {
   return mobile;
 }
 
+type RailOrder = { left: string[]; right: string[] };
+
 export type AppShellProps = {
   leftItems: RailItem[];
   rightItems: RailItem[];
@@ -161,6 +261,10 @@ export type AppShellProps = {
   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;
+  /** Provide to make the rails drag-to-reorder + cross-rail draggable (dnd-kit).
+   *  Controlled: the host receives the new id order per side and persists it.
+   *  A dragged item keeps its badge/dot in the drag overlay. */
+  onRailReorder?: (next: RailOrder) => void;
   leftContent: ReactNode;
   rightContent: ReactNode;
   /** Controlled right-column width (px). */
@@ -190,6 +294,7 @@ export function AppShell({
   activeRight,
   onSelect,
   onRailContextMenu,
+  onRailReorder,
   leftContent,
   rightContent,
   rightWidth,
@@ -206,12 +311,13 @@ export function AppShell({
   className,
 }: AppShellProps) {
   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],
   );
-
   const onPointerDown = useCallback(
     (e: ReactPointerEvent<HTMLDivElement>) => {
       e.preventDefault();
@@ -245,6 +351,81 @@ export function AppShell({
     [rightWidth, clamp, onRightWidthChange],
   );
 
+  // ── rail drag-and-drop (only when onRailReorder is provided) ──
+  const dndEnabled = !!onRailReorder;
+  const propOrder = useMemo<RailOrder>(
+    () => ({ left: leftItems.map((i) => i.id), right: rightItems.map((i) => i.id) }),
+    [leftItems, rightItems],
+  );
+  const byId = useMemo(() => {
+    const m = new Map<string, RailItem>();
+    [...leftItems, ...rightItems].forEach((i) => m.set(i.id, i));
+    return m;
+  }, [leftItems, rightItems]);
+  const [order, setOrder] = useState<RailOrder>(propOrder);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  // Re-sync from props while not mid-drag (host is the source of truth at rest).
+  useEffect(() => {
+    if (!activeId) setOrder(propOrder);
+  }, [propOrder, activeId]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+  const sideOf = (id: string, o: RailOrder): "left" | "right" | null => {
+    if (id === railDropId("left")) return "left";
+    if (id === railDropId("right")) return "right";
+    if (o.left.includes(id)) return "left";
+    if (o.right.includes(id)) return "right";
+    return null;
+  };
+  const handleDragStart = (e: DragStartEvent) => setActiveId(String(e.active.id));
+  const handleDragOver = (e: DragOverEvent) => {
+    const { active, over } = e;
+    if (!over) return;
+    const activeIdStr = String(active.id);
+    const overId = String(over.id);
+    setOrder((o) => {
+      const from = sideOf(activeIdStr, o);
+      const to = sideOf(overId, o);
+      if (!from || !to || from === to) return o;
+      const fromArr = o[from].filter((id) => id !== activeIdStr);
+      const toArr = [...o[to]];
+      const overIdx = overId.startsWith("__rail__:") ? toArr.length : toArr.indexOf(overId);
+      toArr.splice(overIdx < 0 ? toArr.length : overIdx, 0, activeIdStr);
+      return { ...o, [from]: fromArr, [to]: toArr };
+    });
+  };
+  const handleDragEnd = (e: DragEndEvent) => {
+    const { active, over } = e;
+    setActiveId(null);
+    if (!over) {
+      setOrder(propOrder);
+      return;
+    }
+    const activeIdStr = String(active.id);
+    const overId = String(over.id);
+    const from = sideOf(activeIdStr, order);
+    let next = order;
+    if (from && from === sideOf(overId, order) && !overId.startsWith("__rail__:")) {
+      const arr = order[from];
+      const oldIdx = arr.indexOf(activeIdStr);
+      const newIdx = arr.indexOf(overId);
+      if (oldIdx >= 0 && newIdx >= 0 && oldIdx !== newIdx) {
+        next = { ...order, [from]: arrayMove(arr, oldIdx, newIdx) };
+        setOrder(next);
+      }
+    }
+    if (next.left.join() !== propOrder.left.join() || next.right.join() !== propOrder.right.join()) {
+      onRailReorder?.(next);
+    }
+  };
+  const handleDragCancel = () => {
+    setActiveId(null);
+    setOrder(propOrder);
+  };
+
   if (isMobile && mobileItems && onMobileSelect && quickBarIds) {
     return (
       <div className={cx("pl-appshell", "pl-appshell--mobile", className)}>
@@ -260,16 +441,12 @@ export function AppShell({
   }
 
   const showRight = !rightCollapsed && rightItems.length > 0;
-  return (
+  const ctxLeft = onRailContextMenu ? (e: ReactMouseEvent, id: string) => onRailContextMenu("left", e, id) : undefined;
+  const ctxRight = onRailContextMenu ? (e: ReactMouseEvent, id: string) => onRailContextMenu("right", e, id) : undefined;
+
+  const renderShell = (leftRail: ReactNode, rightRail: ReactNode) => (
     <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}
-      />
+      {leftRail}
       <main className="pl-appshell__col pl-appshell__col--left">{leftContent}</main>
       {showRight && (
         <div
@@ -296,14 +473,41 @@ export function AppShell({
           {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}
-      />
+      {rightRail}
     </div>
   );
+
+  if (!dndEnabled) {
+    return renderShell(
+      <SurfaceRail side="left" ariaLabel="Left surfaces" items={leftItems} activeId={activeLeft} onSelect={(id) => onSelect("left", id)} onContextMenu={ctxLeft} />,
+      <SurfaceRail side="right" ariaLabel="Right surfaces" items={rightItems} activeId={activeRight} onSelect={(id) => onSelect("right", id)} onContextMenu={ctxRight} />,
+    );
+  }
+
+  const leftRailItems = order.left.map((id) => byId.get(id)).filter((i): i is RailItem => Boolean(i));
+  const rightRailItems = order.right.map((id) => byId.get(id)).filter((i): i is RailItem => Boolean(i));
+  const activeItem = activeId ? byId.get(activeId) : null;
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+    >
+      {renderShell(
+        <SortableRail side="left" ariaLabel="Left surfaces" items={leftRailItems} activeId={activeLeft} onSelect={(id) => onSelect("left", id)} onContextMenu={ctxLeft} />,
+        <SortableRail side="right" ariaLabel="Right surfaces" items={rightRailItems} activeId={activeRight} onSelect={(id) => onSelect("right", id)} onContextMenu={ctxRight} />,
+      )}
+      <DragOverlay>
+        {activeItem ? (
+          <div className="pl-rail__btn pl-rail__btn--overlay">
+            <RailItemInner item={activeItem} />
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
 }

package/src/styles/app-shell.css

@@ -210,3 +210,31 @@
   min-height: 0;
   overflow: auto;
 }
+
+/* ── Rail drag-and-drop (dnd-kit) ─────────────────────────────────────────────── */
+.pl-rail--sortable .pl-rail__btn {
+  cursor: grab;
+  touch-action: none;
+}
+.pl-rail--sortable .pl-rail__btn:active {
+  cursor: grabbing;
+}
+.pl-rail__btn--dragging {
+  opacity: 0.4;
+}
+/* The floating drag preview — same shape as a rail button, keeps icon + badge/dot. */
+.pl-rail__btn--overlay {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  width: 56px;
+  padding: 8px 2px;
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+  box-shadow: var(--pl-shadow-popover);
+  cursor: grabbing;
+}