@protolabsai/ui 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

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;