@stll/workspace-ui 0.7.1 → 0.8.0

package/dist/view-switcher.js

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { TOOLBAR_ROW_HEIGHT } from "@stll/ui/inspector";
 import { Tabs, TabsList, TabsTab } from "@stll/ui/tabs";
 //#region src/view-switcher.tsx
 const VIEW_DRAG_TYPE = "@stll/workspace-ui/view-switcher/drag-type";
@@ -43,7 +44,7 @@ const WorkspaceViewSwitcher = ({ activeViewId, ariaLabel, direction, reorder, vi
 		if (reordered) reorder?.onReorder(reordered);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-1 items-center gap-1 px-2",
+		className: cn("flex min-w-0 flex-1 items-center gap-1 px-2", TOOLBAR_ROW_HEIGHT),
 		dir: direction,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "min-w-0 flex-1",

package/dist/workspace-frame.d.ts

@@ -10,9 +10,35 @@ type WorkspaceFrameNavigationItem = {
   disabled?: boolean;
   onActivate: () => void;
 };
+/**
+ * Renders the described navigation through the sidebar shell from
+ * `@stll/ui/sidebar` instead of the fixed application rail: the same
+ * collapsible sidebar Stella's own app mounts, so a host gets the header
+ * toggle, the labelled menu while expanded, and the tooltips while collapsed
+ * without composing the shell itself.
+ */
+type WorkspaceFrameSidebarNavigation = {
+  /** Shown at the start of the header row while the sidebar is expanded,
+   * typically a wordmark. The collapse toggle sits at its end. */
+  brand?: ReactNode;
+  /** Accessible names for the header toggle in each state. */
+  toggleLabel: {
+    collapse: string;
+    expand: string;
+  };
+  /** Controlled open state, for a host that persists it. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  /** Keeps the sidebar collapsed regardless of the requested state, e.g.
+   * while an inspector pane needs the width. */
+  forceCollapsed?: boolean;
+};
 type WorkspaceFrameNavigation = {
   label: string;
   items: readonly WorkspaceFrameNavigationItem[];
+  /** Rail-only: the application rail's header slot. The sidebar
+   * presentation owns its header (brand and toggle) and ignores this. */
   header?: ReactNode;
   footer?: ReactNode;
   compact: {
@@ -22,6 +48,7 @@ type WorkspaceFrameNavigation = {
     onOpenChange: (open: boolean) => void;
     trigger: ReactElement | null;
   };
+  sidebar?: WorkspaceFrameSidebarNavigation;
 };
 type WorkspaceFrameInspector = {
   pane: ReactNode;
@@ -67,7 +94,17 @@ type WorkspaceFrameTopBar = {
  * Stella's complete workspace frame. Hosts provide route descriptors and
  * actions; this component owns the shell, application rail, end rail, and
  * desktop inspector footprint.
+ *
+ * The two compositions mount different navigation primitives. `described`
+ * renders `navigation.items` through the narrower `ApplicationRail` from
+ * `@stll/ui/application-rail` — a fixed-width, always-collapsed rail with no
+ * expand/collapse state of its own — or, with `navigation.sidebar`, through
+ * the collapsible sidebar shell from `@stll/ui/sidebar`. `host-responsive`
+ * passes `navigation` straight through to `WorkspaceShell` and takes no
+ * position on what fills it; a host that composes its own sidebar content
+ * mounts the shell from `@stll/ui/sidebar` there, as this app's `AppSidebar`
+ * does.
  */
 declare const WorkspaceFrame: (props: WorkspaceFrameProps) => import("react").JSX.Element;
 //#endregion
-export { WorkspaceFrame, WorkspaceFrameEndRail, WorkspaceFrameInspector, WorkspaceFrameNavigation, WorkspaceFrameNavigationItem, WorkspaceFrameProps, WorkspaceFrameTopBar };
+export { WorkspaceFrame, WorkspaceFrameEndRail, WorkspaceFrameInspector, WorkspaceFrameNavigation, WorkspaceFrameNavigationItem, WorkspaceFrameProps, WorkspaceFrameSidebarNavigation, WorkspaceFrameTopBar };

package/dist/workspace-frame.js

@@ -1,10 +1,15 @@
 "use client";
 import { resolveWorkspaceInspectorPresentation } from "./workspace-frame.logic.js";
+import { PanelLeftIcon } from "lucide-react";
+import { Button } from "@stll/ui/button";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "@stll/ui/tooltip";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@stll/ui/utils";
+import { InspectorDock, SIDE_RAIL_ICON_BUTTON_SIZE, TOOLBAR_ROW_HEIGHT } from "@stll/ui/inspector";
 import { ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu } from "@stll/ui/application-rail";
-import { InspectorDock, TOOLBAR_ROW_HEIGHT } from "@stll/ui/inspector";
+import { DirectionalIcon } from "@stll/ui/directional-icon";
 import { Sheet, SheetPopup, SheetTitle } from "@stll/ui/sheet";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, useSidebar } from "@stll/ui/sidebar";
 import { useIsMobile } from "@stll/ui/use-mobile";
 import { WorkspaceEndRail, WorkspaceShell } from "@stll/ui/workspace-shell";
 //#region src/workspace-frame.tsx
@@ -12,6 +17,16 @@ import { WorkspaceEndRail, WorkspaceShell } from "@stll/ui/workspace-shell";
 * Stella's complete workspace frame. Hosts provide route descriptors and
 * actions; this component owns the shell, application rail, end rail, and
 * desktop inspector footprint.
+*
+* The two compositions mount different navigation primitives. `described`
+* renders `navigation.items` through the narrower `ApplicationRail` from
+* `@stll/ui/application-rail` — a fixed-width, always-collapsed rail with no
+* expand/collapse state of its own — or, with `navigation.sidebar`, through
+* the collapsible sidebar shell from `@stll/ui/sidebar`. `host-responsive`
+* passes `navigation` straight through to `WorkspaceShell` and takes no
+* position on what fills it; a host that composes its own sidebar content
+* mounts the shell from `@stll/ui/sidebar` there, as this app's `AppSidebar`
+* does.
 */
 const WorkspaceFrame = (props) => {
 	if (props.composition === "host-responsive") return /* @__PURE__ */ jsx(WorkspaceShell, {
@@ -28,22 +43,9 @@ const DescribedWorkspaceFrame = ({ children, endRail, inspector, navigation, top
 		hasMobilePresentation: inspector?.mobile !== void 0,
 		isCompact
 	});
-	const desktopNavigation = /* @__PURE__ */ jsxs(ApplicationRail, {
-		"aria-label": navigation.label,
-		children: [
-			/* @__PURE__ */ jsx(ApplicationRailHeader, { children: navigation.header }),
-			/* @__PURE__ */ jsx(ApplicationRailContent, { children: /* @__PURE__ */ jsx(ApplicationRailMenu, { children: navigation.items.map((item) => /* @__PURE__ */ jsx(ApplicationRailButton, {
-				"aria-current": item.active ? "page" : void 0,
-				"aria-label": item.label,
-				"data-active": item.active || void 0,
-				disabled: item.disabled,
-				title: item.label,
-				className: "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-				onClick: item.onActivate,
-				children: item.icon
-			}, item.id)) }) }),
-			/* @__PURE__ */ jsx(ApplicationRailFooter, { children: navigation.footer })
-		]
+	const desktopNavigation = navigation.sidebar === void 0 ? /* @__PURE__ */ jsx(DescribedApplicationRail, { navigation }) : /* @__PURE__ */ jsx(DescribedSidebar, {
+		navigation,
+		sidebar: navigation.sidebar
 	});
 	const endDock = inspector && inspectorPresentation === "desktop" ? /* @__PURE__ */ jsx(InspectorDock, {
 		rail: /* @__PURE__ */ jsx(WorkspaceEndRail, { ...endRail }),
@@ -54,7 +56,7 @@ const DescribedWorkspaceFrame = ({ children, endRail, inspector, navigation, top
 		onResetWidth: inspector.onResetWidth,
 		children: inspector.pane
 	}) : /* @__PURE__ */ jsx(WorkspaceEndRail, { ...endRail });
-	const frame = /* @__PURE__ */ jsx(WorkspaceShell, {
+	const shell = /* @__PURE__ */ jsx(WorkspaceShell, {
 		endDock,
 		navigation: {
 			compact: navigation.compact,
@@ -81,6 +83,10 @@ const DescribedWorkspaceFrame = ({ children, endRail, inspector, navigation, top
 		}),
 		children
 	});
+	const frame = navigation.sidebar === void 0 ? shell : /* @__PURE__ */ jsx(SidebarProvider, {
+		...resolveSidebarProviderProps(navigation.sidebar),
+		children: shell
+	});
 	if (inspector?.mobile === void 0) return frame;
 	return /* @__PURE__ */ jsxs(Sheet, {
 		open: inspectorPresentation === "mobile" && inspector.mobile.open,
@@ -98,5 +104,92 @@ const DescribedWorkspaceFrame = ({ children, endRail, inspector, navigation, top
 		}) : null]
 	});
 };
+/**
+* Only the sidebar options the host actually set reach the provider: an
+* explicit `undefined` would otherwise turn a controlled `open` into an
+* uncontrolled one, or clear the provider's own default.
+*/
+const resolveSidebarProviderProps = ({ defaultOpen, forceCollapsed, open, onOpenChange }) => ({
+	...defaultOpen === void 0 ? {} : { defaultOpen },
+	...forceCollapsed === void 0 ? {} : { forceCollapsed },
+	...open === void 0 ? {} : { open },
+	...onOpenChange === void 0 ? {} : { onOpenChange }
+});
+const DescribedApplicationRail = ({ navigation }) => /* @__PURE__ */ jsxs(ApplicationRail, {
+	"aria-label": navigation.label,
+	children: [
+		/* @__PURE__ */ jsx(ApplicationRailHeader, { children: navigation.header }),
+		/* @__PURE__ */ jsx(ApplicationRailContent, { children: /* @__PURE__ */ jsx(ApplicationRailMenu, { children: navigation.items.map((item) => /* @__PURE__ */ jsx(ApplicationRailButton, {
+			"aria-current": item.active ? "page" : void 0,
+			"aria-label": item.label,
+			"data-active": item.active || void 0,
+			disabled: item.disabled,
+			title: item.label,
+			className: "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+			onClick: item.onActivate,
+			children: item.icon
+		}, item.id)) }) }),
+		/* @__PURE__ */ jsx(ApplicationRailFooter, { children: navigation.footer })
+	]
+});
+/**
+* The described items as Stella's collapsible sidebar. The header is the
+* same row Stella's app shows: brand at the start while expanded, the
+* collapse toggle at the end, at toolbar-row height so it lines up with the
+* top bar beside it. Each item is a sidebar menu button, which shows its
+* label while expanded and a tooltip while collapsed.
+*/
+const DescribedSidebar = ({ navigation, sidebar }) => {
+	const { isMobile, state, toggleSidebar } = useSidebar();
+	const collapsed = state === "collapsed" && !isMobile;
+	const toggleLabel = collapsed ? sidebar.toggleLabel.expand : sidebar.toggleLabel.collapse;
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		"aria-label": navigation.label,
+		collapsible: "icon",
+		mobileTitle: navigation.label,
+		children: [
+			/* @__PURE__ */ jsx(SidebarHeader, {
+				className: cn("border-b p-0", TOOLBAR_ROW_HEIGHT),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("flex h-full items-center", collapsed ? "justify-center" : "justify-between ps-3 pe-2"),
+					children: [collapsed ? null : sidebar.brand, /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
+						"aria-label": toggleLabel,
+						className: cn("text-muted-foreground", SIDE_RAIL_ICON_BUTTON_SIZE),
+						"data-slot": "workspace-frame-sidebar-toggle",
+						size: "icon",
+						variant: "ghost",
+						onClick: toggleSidebar,
+						children: /* @__PURE__ */ jsx(DirectionalIcon, {
+							className: "size-4",
+							icon: PanelLeftIcon
+						})
+					}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+						side: "right",
+						children: toggleLabel
+					})] })]
+				})
+			}),
+			/* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx("nav", {
+				"aria-label": navigation.label,
+				children: /* @__PURE__ */ jsx(SidebarGroup, {
+					className: "group-data-[collapsible=icon]:px-0.5",
+					children: /* @__PURE__ */ jsx(SidebarMenu, { children: navigation.items.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+						"aria-current": item.active ? "page" : void 0,
+						disabled: item.disabled,
+						isActive: item.active ?? false,
+						size: "rail",
+						tooltip: item.label,
+						onClick: item.onActivate,
+						children: [item.icon, /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: item.label
+						})]
+					}) }, item.id)) })
+				})
+			}) }),
+			/* @__PURE__ */ jsx(SidebarFooter, { children: navigation.footer })
+		]
+	});
+};
 //#endregion
 export { WorkspaceFrame };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/workspace-ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Reusable workspace presentation components and view helpers for Stella.",
   "keywords": [
     "calculations",
@@ -119,7 +119,7 @@
     "@stll/calculations": "^0.1.0",
     "@stll/conditions": "^0.3.0",
     "@stll/money": "^0.1.0",
-    "@stll/ui": "^0.18.0",
+    "@stll/ui": "^0.20.0",
     "better-result": "3.0.0",
     "lucide-react": "1.30.0",
     "use-intl": "4.13.5"