@stll/workspace-ui 0.5.1 → 0.6.0

package/dist/index.d.ts

@@ -14,4 +14,5 @@ import { CreateWorkspaceKanbanSchemaParams, KANBAN_EMPTY_GROUP_VISIBILITIES, Kan
 import { WorkspaceKanbanGroupingPicker } from "./kanban-grouping-picker.js";
 import { WorkspaceViewDirection, WorkspaceViewDropPosition, reorderWorkspaceViewIds, toWorkspaceViewDropPosition } from "./view-switcher.logic.js";
 import { WorkspaceViewSwitcher, WorkspaceViewSwitcherEditing, WorkspaceViewSwitcherItem, WorkspaceViewSwitcherProps, WorkspaceViewSwitcherReorder } from "./view-switcher.js";
-export { type ApplyCalculationSelectionParams, CONDITION_OPERATORS, type CalculationFormatters, CalculationKindPicker, type CalculationKindPickerProps, type CalculationLabels, CalculationPicker, type CalculationPickerProps, type CalculationProperty, type CalculationResult, type CalculationSelection, CalculationSummary, type CalculationSummaryProps, type ColorVariants, ColumnCalculation, ConditionBuilder, type ConditionBuilderLabels, type ConditionCapabilities, type ConditionOperator, type CreateWorkspaceKanbanSchemaParams, FIELD_CONTENT_TYPES, type FieldContent, type FieldOption, type FieldOptionChoice, FieldValue, type FieldValueType, type FormatCalculationParams, type FormatMoneyCentsParams, type FormattedCalculation, type FormulaCellRenderCtx, type GenericProperty, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, type KanbanBoardPresentation, type KanbanEmptyGroupVisibility, type KanbanPresentedLane, type KanbanSavedAxisState, type KanbanSavedGroupReference, type KanbanSavedSubgroupState, type KanbanSavedViewState, MoneyFieldValue, type OptionColor, PersonFieldValue, PropertyIcon, type PropertyIconType, type ResolveWorkspaceKanbanViewParams, type ResolvedWorkspaceKanbanView, SortChips, type SortChipsLabels, type SortChipsProps, type SortDescriptor, type SortableProperty, TableSkeletonRows, type UseCalculationParams, type ValueEditorKind, type ValueEditorRenderCtx, type WorkspaceCalculationLabels, type WorkspaceFieldContent, type WorkspaceKanbanBuiltInGroupLabel, type WorkspaceKanbanGroupingChoice, WorkspaceKanbanGroupingPicker, type WorkspaceKanbanGroupingPickerLabels, type WorkspaceKanbanGroupingPickerProps, type WorkspaceKanbanProperty, type WorkspaceViewDirection, type WorkspaceViewDropPosition, WorkspaceViewSwitcher, type WorkspaceViewSwitcherEditing, type WorkspaceViewSwitcherItem, type WorkspaceViewSwitcherProps, type WorkspaceViewSwitcherReorder, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, currencyMinorUnitDigits, emptyColor, fieldForNode, formatCalculationResult, formatMoneyCents, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, reorderWorkspaceViewIds, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, toWorkspaceViewDropPosition, useCalculation, valueEditorFor };
+import { WorkspaceFrame, WorkspaceFrameEndRail, WorkspaceFrameInspector, WorkspaceFrameNavigation, WorkspaceFrameNavigationItem, WorkspaceFrameProps, WorkspaceFrameTopBar } from "./workspace-frame.js";
+export { type ApplyCalculationSelectionParams, CONDITION_OPERATORS, type CalculationFormatters, CalculationKindPicker, type CalculationKindPickerProps, type CalculationLabels, CalculationPicker, type CalculationPickerProps, type CalculationProperty, type CalculationResult, type CalculationSelection, CalculationSummary, type CalculationSummaryProps, type ColorVariants, ColumnCalculation, ConditionBuilder, type ConditionBuilderLabels, type ConditionCapabilities, type ConditionOperator, type CreateWorkspaceKanbanSchemaParams, FIELD_CONTENT_TYPES, type FieldContent, type FieldOption, type FieldOptionChoice, FieldValue, type FieldValueType, type FormatCalculationParams, type FormatMoneyCentsParams, type FormattedCalculation, type FormulaCellRenderCtx, type GenericProperty, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, type KanbanBoardPresentation, type KanbanEmptyGroupVisibility, type KanbanPresentedLane, type KanbanSavedAxisState, type KanbanSavedGroupReference, type KanbanSavedSubgroupState, type KanbanSavedViewState, MoneyFieldValue, type OptionColor, PersonFieldValue, PropertyIcon, type PropertyIconType, type ResolveWorkspaceKanbanViewParams, type ResolvedWorkspaceKanbanView, SortChips, type SortChipsLabels, type SortChipsProps, type SortDescriptor, type SortableProperty, TableSkeletonRows, type UseCalculationParams, type ValueEditorKind, type ValueEditorRenderCtx, type WorkspaceCalculationLabels, type WorkspaceFieldContent, WorkspaceFrame, type WorkspaceFrameEndRail, type WorkspaceFrameInspector, type WorkspaceFrameNavigation, type WorkspaceFrameNavigationItem, type WorkspaceFrameProps, type WorkspaceFrameTopBar, type WorkspaceKanbanBuiltInGroupLabel, type WorkspaceKanbanGroupingChoice, WorkspaceKanbanGroupingPicker, type WorkspaceKanbanGroupingPickerLabels, type WorkspaceKanbanGroupingPickerProps, type WorkspaceKanbanProperty, type WorkspaceViewDirection, type WorkspaceViewDropPosition, WorkspaceViewSwitcher, type WorkspaceViewSwitcherEditing, type WorkspaceViewSwitcherItem, type WorkspaceViewSwitcherProps, type WorkspaceViewSwitcherReorder, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, currencyMinorUnitDigits, emptyColor, fieldForNode, formatCalculationResult, formatMoneyCents, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, reorderWorkspaceViewIds, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, toWorkspaceViewDropPosition, useCalculation, valueEditorFor };

package/dist/index.js

@@ -14,4 +14,5 @@ import { KANBAN_EMPTY_GROUP_VISIBILITIES, createWorkspaceKanbanSchema, getWorksp
 import { WorkspaceKanbanGroupingPicker } from "./kanban-grouping-picker.js";
 import { reorderWorkspaceViewIds, toWorkspaceViewDropPosition } from "./view-switcher.logic.js";
 import { WorkspaceViewSwitcher } from "./view-switcher.js";
-export { CONDITION_OPERATORS, CalculationKindPicker, CalculationPicker, CalculationSummary, ColumnCalculation, ConditionBuilder, FIELD_CONTENT_TYPES, FieldValue, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, MoneyFieldValue, PersonFieldValue, PropertyIcon, SortChips, TableSkeletonRows, WorkspaceKanbanGroupingPicker, WorkspaceViewSwitcher, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, currencyMinorUnitDigits, emptyColor, fieldForNode, formatCalculationResult, formatMoneyCents, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, reorderWorkspaceViewIds, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, toWorkspaceViewDropPosition, useCalculation, valueEditorFor };
+import { WorkspaceFrame } from "./workspace-frame.js";
+export { CONDITION_OPERATORS, CalculationKindPicker, CalculationPicker, CalculationSummary, ColumnCalculation, ConditionBuilder, FIELD_CONTENT_TYPES, FieldValue, IntFieldValue, KANBAN_EMPTY_GROUP_VISIBILITIES, MoneyFieldValue, PersonFieldValue, PropertyIcon, SortChips, TableSkeletonRows, WorkspaceFrame, WorkspaceKanbanGroupingPicker, WorkspaceViewSwitcher, appendChild, applyCalculationSelection, asGroup, buildLeaf, createWorkspaceKanbanSchema, currencyMinorUnitDigits, emptyColor, fieldForNode, formatCalculationResult, formatMoneyCents, getClipFieldValueLabel, getWorkspaceKanbanGroupingChoices, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, optionColors, presentKanbanBoard, removeChild, reorderWorkspaceViewIds, replaceChild, resolveOptionColor, resolveWorkspaceKanbanView, sortDirectionHint, toWorkspaceViewDropPosition, useCalculation, valueEditorFor };

package/dist/kanban-view.d.ts

@@ -1,5 +1,5 @@
 import { GenericProperty } from "./types.js";
-import { KanbanBoardCell, KanbanBoardLane, KanbanBoardMatrix, KanbanBuiltInGroup, KanbanGroup, KanbanGrouping, KanbanSchema } from "@stll/ui/kanban";
+import { KanbanBoardCell, KanbanBoardColumn, KanbanBoardLane, KanbanBoardMatrix, KanbanBuiltInGroup, KanbanGrouping, KanbanSchema } from "@stll/ui/kanban";
 //#region src/kanban-view.d.ts
 declare const KANBAN_EMPTY_GROUP_VISIBILITIES: {
   readonly hide: "hide";
@@ -89,7 +89,7 @@ type KanbanPresentedLane<TRow> = {
   lane: KanbanBoardLane;
 };
 type KanbanBoardPresentation<TRow> = {
-  columns: KanbanGroup[];
+  columns: KanbanBoardColumn[];
   lanes: KanbanPresentedLane<TRow>[];
   matrix: KanbanBoardMatrix<TRow>;
 };

package/dist/kanban-view.js

@@ -71,7 +71,7 @@ const orderGroups = (groups, orderedGroups) => {
 	for (const group of groups) if (!refersToGroup(orderedGroups, group)) ordered.push(group);
 	return ordered;
 };
-const isGroupEmpty = (group, matrix) => matrix.cells.every((cell) => cell.coordinate.column.value !== group.value || cell.rows.length === 0);
+const isGroupEmpty = (group, matrix) => matrix.cells.every((cell) => cell.coordinate.column.type !== group.type || group.type === "group" && cell.coordinate.column.type === "group" && cell.coordinate.column.group.value !== group.group.value || group.type === "destination" && cell.coordinate.column.type === "destination" && cell.coordinate.column.destination.id !== group.destination.id || cell.rows.length === 0);
 const isLaneEmpty = (lane, matrix) => matrix.cells.every((cell) => cell.coordinate.lane.type !== lane.type || lane.type === "group" && cell.coordinate.lane.type === "group" && cell.coordinate.lane.group.value !== lane.group.value || cell.rows.length === 0);
 /**
 * Apply saved presentation state without rebuilding the matrix. This preserves
@@ -79,7 +79,10 @@ const isLaneEmpty = (lane, matrix) => matrix.cells.every((cell) => cell.coordina
 * individually hide groups, reorder them, and collapse swimlanes.
 */
 const presentKanbanBoard = ({ matrix, state }) => {
-	const columns = orderGroups(matrix.columns, state.group.orderedGroups).filter((group) => !refersToGroup(state.group.hiddenGroups, group) && (state.group.emptyGroups === "show" || !isGroupEmpty(group, matrix)));
+	const columns = [...orderGroups(matrix.columns.filter((column) => column.type === "group").map((column) => column.group), state.group.orderedGroups).map((group) => ({
+		group,
+		type: "group"
+	})).filter((column) => !refersToGroup(state.group.hiddenGroups, column.group) && (state.group.emptyGroups === "show" || !isGroupEmpty(column, matrix))), ...matrix.columns.filter((column) => column.type === "destination")];
 	const subgroupState = state.subgroup;
 	return {
 		columns,

package/dist/responsive-action-toolbar.js

@@ -7,7 +7,7 @@ const RESPONSIVE_ACTION_TOOLBAR_SLOT_CLASS = {
 	action: "shrink-0"
 };
 const ResponsiveActionToolbar = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex min-w-0 flex-nowrap items-center gap-2 overflow-x-auto", className),
+	className: cn("flex min-w-0 [scrollbar-width:none] flex-nowrap items-center gap-2 overflow-x-auto [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", className),
 	...props
 });
 const ResponsiveActionToolbarItem = ({ slot, className, children }) => /* @__PURE__ */ jsx("div", {

package/dist/view-switcher.js

@@ -134,7 +134,7 @@ const WorkspaceViewTab = ({ actions, canReorder, direction, getDragData, getDrop
 		view.id
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
+		className: "relative flex items-center",
 		ref: setTabContainer,
 		children: [
 			dropPosition !== null && /* @__PURE__ */ jsx("span", {
@@ -151,7 +151,10 @@ const WorkspaceViewTab = ({ actions, canReorder, direction, getDragData, getDrop
 					children: view.name
 				})]
 			}),
-			actions
+			actions === null || actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-e-0 top-1/2 -translate-y-1/2",
+				children: actions
+			})
 		]
 	});
 };

package/dist/workspace-frame.d.ts

@@ -0,0 +1,73 @@
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { InspectorDock } from "@stll/ui/inspector";
+import { WorkspaceEndRail, WorkspaceShell } from "@stll/ui/workspace-shell";
+//#region src/workspace-frame.d.ts
+type WorkspaceFrameNavigationItem = {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  onActivate: () => void;
+};
+type WorkspaceFrameNavigation = {
+  label: string;
+  items: readonly WorkspaceFrameNavigationItem[];
+  header?: ReactNode;
+  footer?: ReactNode;
+  compact: {
+    content: ReactElement;
+    label: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger: ReactElement | null;
+  };
+};
+type WorkspaceFrameInspector = {
+  pane: ReactNode;
+  showPaneContent: boolean;
+  width: number;
+  resizeHandleLabel: string;
+  resizeHandleProps: ComponentProps<typeof InspectorDock>["resizeHandleProps"];
+  onResetWidth?: (() => void) | undefined;
+  mobile?: {
+    content: ReactElement;
+    label: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+  };
+};
+type WorkspaceFrameEndRail = {
+  label: string;
+  topAction: ReactNode;
+  chatAction: ComponentProps<typeof WorkspaceEndRail>["chatAction"];
+  children?: ReactNode;
+  overlay?: ReactNode;
+};
+type WorkspaceFrameProps = {
+  children: ReactNode;
+} & ({
+  composition: "described";
+  navigation: WorkspaceFrameNavigation;
+  topBar: WorkspaceFrameTopBar;
+  endRail: WorkspaceFrameEndRail;
+  inspector?: WorkspaceFrameInspector;
+} | {
+  composition: "host-responsive";
+  navigation: ComponentProps<typeof WorkspaceShell>["navigation"];
+  topBar: ComponentProps<typeof WorkspaceShell>["topBar"];
+  endDock: ReactElement;
+});
+type WorkspaceFrameTopBar = {
+  leading?: ReactNode;
+  center?: ReactNode;
+  actions?: ReactNode;
+};
+/**
+ * Stella's complete workspace frame. Hosts provide route descriptors and
+ * actions; this component owns the shell, application rail, end rail, and
+ * desktop inspector footprint.
+ */
+declare const WorkspaceFrame: (props: WorkspaceFrameProps) => import("react").JSX.Element;
+//#endregion
+export { WorkspaceFrame, WorkspaceFrameEndRail, WorkspaceFrameInspector, WorkspaceFrameNavigation, WorkspaceFrameNavigationItem, WorkspaceFrameProps, WorkspaceFrameTopBar };

package/dist/workspace-frame.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@stll/ui/utils";
+import { ApplicationRail, ApplicationRailButton, ApplicationRailContent, ApplicationRailFooter, ApplicationRailHeader, ApplicationRailMenu } from "@stll/ui/application-rail";
+import { InspectorDock, TOOLBAR_ROW_HEIGHT } from "@stll/ui/inspector";
+import { Sheet, SheetPopup, SheetTitle } from "@stll/ui/sheet";
+import { WorkspaceEndRail, WorkspaceShell } from "@stll/ui/workspace-shell";
+//#region src/workspace-frame.tsx
+/**
+* Stella's complete workspace frame. Hosts provide route descriptors and
+* actions; this component owns the shell, application rail, end rail, and
+* desktop inspector footprint.
+*/
+const WorkspaceFrame = (props) => {
+	if (props.composition === "host-responsive") return /* @__PURE__ */ jsx(WorkspaceShell, {
+		endDock: props.endDock,
+		navigation: props.navigation,
+		topBar: props.topBar,
+		children: props.children
+	});
+	const { children, endRail, inspector, navigation, topBar } = props;
+	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 endDock = inspector ? /* @__PURE__ */ jsx(InspectorDock, {
+		rail: /* @__PURE__ */ jsx(WorkspaceEndRail, { ...endRail }),
+		resizeHandleLabel: inspector.resizeHandleLabel,
+		resizeHandleProps: inspector.resizeHandleProps,
+		showPaneContent: inspector.showPaneContent,
+		width: inspector.width,
+		onResetWidth: inspector.onResetWidth,
+		children: inspector.pane
+	}) : /* @__PURE__ */ jsx(WorkspaceEndRail, { ...endRail });
+	const frame = /* @__PURE__ */ jsx(WorkspaceShell, {
+		endDock,
+		navigation: {
+			compact: navigation.compact,
+			desktop: desktopNavigation,
+			mode: "shell-managed"
+		},
+		topBar: ({ compactNavigationTrigger }) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 items-center gap-2 overflow-hidden border-b px-4", TOOLBAR_ROW_HEIGHT),
+			children: [
+				compactNavigationTrigger,
+				/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: topBar.leading
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-w-0",
+					children: topBar.center
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "ms-auto flex shrink-0 items-center gap-0.5",
+					children: topBar.actions
+				})
+			]
+		}),
+		children
+	});
+	if (inspector?.mobile === void 0) return frame;
+	return /* @__PURE__ */ jsxs(Sheet, {
+		open: inspector.mobile.open,
+		onOpenChange: inspector.mobile.onOpenChange,
+		children: [frame, /* @__PURE__ */ jsxs(SheetPopup, {
+			className: "h-dvh w-full max-w-none border-0 p-0 md:hidden",
+			showCloseButton: false,
+			side: "inline-end",
+			children: [/* @__PURE__ */ jsx(SheetTitle, {
+				className: "sr-only",
+				children: inspector.mobile.label
+			}), inspector.mobile.content]
+		})]
+	});
+};
+//#endregion
+export { WorkspaceFrame };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/workspace-ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Reusable workspace presentation components and view helpers for Stella.",
   "keywords": [
     "calculations",
@@ -91,6 +91,10 @@
       "types": "./dist/view-switcher.d.ts",
       "import": "./dist/view-switcher.js"
     },
+    "./workspace-frame": {
+      "types": "./dist/workspace-frame.d.ts",
+      "import": "./dist/workspace-frame.js"
+    },
     "./view-switcher-logic": {
       "types": "./dist/view-switcher.logic.d.ts",
       "import": "./dist/view-switcher.logic.js"
@@ -115,7 +119,7 @@
     "@stll/calculations": "^0.1.0",
     "@stll/conditions": "^0.2.0",
     "@stll/money": "^0.1.0",
-    "@stll/ui": "^0.13.0",
+    "@stll/ui": "^0.14.0",
     "better-result": "3.0.0",
     "lucide-react": "1.30.0",
     "use-intl": "4.13.5"