@stll/workspace-ui 0.1.0 → 0.2.0

package/README.md

@@ -1,5 +1,14 @@
 # @stll/workspace-ui
 
+Reusable workspace presentation components and view helpers for Stella.
+
+## Saved views
+
+`@stll/workspace-ui/view-switcher` exports a controlled saved-view strip with
+keyboard selection, horizontal overflow, inline editing slots, and bidi-aware
+Pragmatic Drag and Drop reordering. Hosts retain ownership of persistence,
+permissions, translations, menus, and layout rendering.
+
 Reusable React presentation modules for Stella workspaces: field values,
 property icons, sorting chips, condition builders, table loading rows, and
 column calculations.
@@ -16,6 +25,7 @@ Use the explicit subpaths for focused modules:
 import { ConditionBuilder } from "@stll/workspace-ui/conditions";
 import { FieldValue } from "@stll/workspace-ui/field-value";
 import { SortChips } from "@stll/workspace-ui/sorts";
+import { WorkspaceViewSwitcher } from "@stll/workspace-ui/view-switcher";
 ```
 
 The package also exposes a root entry for code that uses several workspace
@@ -31,9 +41,10 @@ bun run typecheck
 bun run lint
 ```
 
-Peer dependencies: `react`, `react-dom`, `@base-ui/react`, TanStack React Table,
-and Tailwind CSS v4. The package's components use Tailwind utility classes; the
-host owns the Tailwind entry point and token configuration.
+Peer dependencies: `react`, `react-dom`, `@base-ui/react`, Pragmatic Drag and
+Drop v3 with its hitbox package, TanStack React Table, and Tailwind CSS v4. The
+package's components use Tailwind utility classes; the host owns the Tailwind
+entry point and token configuration.
 
 Include both published component packages in that entry point so Tailwind scans
 their shipped class names:

package/dist/index.d.ts

@@ -10,4 +10,6 @@ import { getClipFieldValueLabel } from "./field-value-logic.js";
 import { FieldValue, IntFieldValue, MoneyFieldValue, PersonFieldValue } from "./field-value.js";
 import { SortChips, SortChipsLabels, SortChipsProps, SortDescriptor, SortableProperty, sortDirectionHint } from "./sorts.js";
 import { TableSkeletonRows } from "./table-skeleton-rows.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, FIELD_CONTENT_TYPES, type FieldContent, type FieldOption, type FieldOptionChoice, FieldValue, type FieldValueType, type FormatCalculationParams, type FormatMoneyCentsParams, type FormattedCalculation, type FormulaCellRenderCtx, type GenericProperty, IntFieldValue, MoneyFieldValue, type OptionColor, PersonFieldValue, PropertyIcon, type PropertyIconType, SortChips, type SortChipsLabels, type SortChipsProps, type SortDescriptor, type SortableProperty, TableSkeletonRows, type UseCalculationParams, type ValueEditorKind, type ValueEditorRenderCtx, type WorkspaceCalculationLabels, type WorkspaceFieldContent, appendChild, applyCalculationSelection, asGroup, buildLeaf, currencyMinorUnitDigits, emptyColor, fieldForNode, formatCalculationResult, formatMoneyCents, getClipFieldValueLabel, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, optionColors, removeChild, replaceChild, resolveOptionColor, sortDirectionHint, useCalculation, valueEditorFor };
+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, FIELD_CONTENT_TYPES, type FieldContent, type FieldOption, type FieldOptionChoice, FieldValue, type FieldValueType, type FormatCalculationParams, type FormatMoneyCentsParams, type FormattedCalculation, type FormulaCellRenderCtx, type GenericProperty, IntFieldValue, MoneyFieldValue, type OptionColor, PersonFieldValue, PropertyIcon, type PropertyIconType, SortChips, type SortChipsLabels, type SortChipsProps, type SortDescriptor, type SortableProperty, TableSkeletonRows, type UseCalculationParams, type ValueEditorKind, type ValueEditorRenderCtx, type WorkspaceCalculationLabels, type WorkspaceFieldContent, type WorkspaceViewDirection, type WorkspaceViewDropPosition, WorkspaceViewSwitcher, type WorkspaceViewSwitcherEditing, type WorkspaceViewSwitcherItem, type WorkspaceViewSwitcherProps, type WorkspaceViewSwitcherReorder, appendChild, applyCalculationSelection, asGroup, buildLeaf, currencyMinorUnitDigits, emptyColor, fieldForNode, formatCalculationResult, formatMoneyCents, getClipFieldValueLabel, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, optionColors, removeChild, reorderWorkspaceViewIds, replaceChild, resolveOptionColor, sortDirectionHint, toWorkspaceViewDropPosition, useCalculation, valueEditorFor };

package/dist/index.js

@@ -10,4 +10,6 @@ import { PropertyIcon } from "./property-icon.js";
 import { SortChips, sortDirectionHint } from "./sorts.js";
 import { TableSkeletonRows } from "./table-skeleton-rows.js";
 import { FIELD_CONTENT_TYPES } from "./types.js";
-export { CONDITION_OPERATORS, CalculationKindPicker, CalculationPicker, CalculationSummary, ColumnCalculation, ConditionBuilder, FIELD_CONTENT_TYPES, FieldValue, IntFieldValue, MoneyFieldValue, PersonFieldValue, PropertyIcon, SortChips, TableSkeletonRows, appendChild, applyCalculationSelection, asGroup, buildLeaf, currencyMinorUnitDigits, emptyColor, fieldForNode, formatCalculationResult, formatMoneyCents, getClipFieldValueLabel, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, optionColors, removeChild, replaceChild, resolveOptionColor, sortDirectionHint, useCalculation, valueEditorFor };
+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, MoneyFieldValue, PersonFieldValue, PropertyIcon, SortChips, TableSkeletonRows, WorkspaceViewSwitcher, appendChild, applyCalculationSelection, asGroup, buildLeaf, currencyMinorUnitDigits, emptyColor, fieldForNode, formatCalculationResult, formatMoneyCents, getClipFieldValueLabel, isConditionOperator, isMultiValue, leafFromField, leafOperand, leafOperator, leafValueList, leafValueString, operandsEqual, operatorsFor, optionColors, removeChild, reorderWorkspaceViewIds, replaceChild, resolveOptionColor, sortDirectionHint, toWorkspaceViewDropPosition, useCalculation, valueEditorFor };

package/dist/view-switcher.d.ts

@@ -0,0 +1,33 @@
+import { WorkspaceViewDirection } from "./view-switcher.logic.js";
+//#region src/view-switcher.d.ts
+type WorkspaceViewSwitcherItem = {
+  id: string;
+  name: string;
+};
+type WorkspaceViewSwitcherEditing<View> = {
+  viewId: string;
+  renderLabel: (view: View) => React.ReactNode;
+};
+type WorkspaceViewSwitcherReorder<View> = {
+  getDragData?: (view: View) => Record<string | symbol, unknown>;
+  getDropData?: (view: View) => Record<string | symbol, unknown>;
+  isBlocked?: boolean;
+  onReorder: (viewIds: string[]) => void;
+};
+type WorkspaceViewSwitcherProps<View extends WorkspaceViewSwitcherItem> = {
+  activeViewId: string;
+  ariaLabel: string;
+  direction: WorkspaceViewDirection;
+  reorder: WorkspaceViewSwitcherReorder<View> | null;
+  views: readonly View[];
+  addControl?: React.ReactNode;
+  editing?: WorkspaceViewSwitcherEditing<View> | null;
+  onViewChange: (viewId: string) => void;
+  onViewContextMenu?: (view: View, event: React.MouseEvent<HTMLElement>) => void;
+  onViewDoubleClick?: (view: View, event: React.MouseEvent<HTMLElement>) => void;
+  renderActions?: (view: View) => React.ReactNode;
+  renderIcon: (view: View) => React.ReactNode;
+};
+declare const WorkspaceViewSwitcher: <View extends WorkspaceViewSwitcherItem>({ activeViewId, ariaLabel, direction, reorder, views, addControl, editing, onViewChange, onViewContextMenu, onViewDoubleClick, renderActions, renderIcon }: WorkspaceViewSwitcherProps<View>) => import("react").JSX.Element;
+//#endregion
+export { WorkspaceViewSwitcher, WorkspaceViewSwitcherEditing, WorkspaceViewSwitcherItem, WorkspaceViewSwitcherProps, WorkspaceViewSwitcherReorder };

package/dist/view-switcher.js

@@ -0,0 +1,159 @@
+"use client";
+import { reorderWorkspaceViewIds, toWorkspaceViewDropPosition } from "./view-switcher.logic.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@stll/ui/utils";
+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 { Tabs, TabsList, TabsTab } from "@stll/ui/tabs";
+//#region src/view-switcher.tsx
+const VIEW_DRAG_TYPE = "@stll/workspace-ui/view-switcher/drag-type";
+const VIEW_DRAG_ID = "@stll/workspace-ui/view-switcher/view-id";
+const VIEW_DRAG_INSTANCE = "@stll/workspace-ui/view-switcher/instance";
+const useLatestCallback = (callback) => {
+	const latest = useRef(callback);
+	useEffect(() => {
+		latest.current = callback;
+	}, [callback]);
+	return useCallback((...args) => latest.current(...args), []);
+};
+const WorkspaceViewSwitcher = ({ activeViewId, ariaLabel, direction, reorder, views, addControl, editing, onViewChange, onViewContextMenu, onViewDoubleClick, renderActions, renderIcon }) => {
+	const canReorder = reorder !== null;
+	const [instanceId] = useState(Symbol);
+	const [stripContainer, setStripContainer] = useState(null);
+	useEffect(() => {
+		if (!stripContainer || !canReorder) return;
+		return dropTargetForElements({
+			element: stripContainer,
+			canDrop: ({ source }) => source.data[VIEW_DRAG_TYPE] === true && source.data[VIEW_DRAG_INSTANCE] === instanceId
+		});
+	}, [
+		canReorder,
+		instanceId,
+		stripContainer
+	]);
+	const handleReorder = (draggedId, targetId, position) => {
+		const reordered = reorderWorkspaceViewIds({
+			ids: views.map((view) => view.id),
+			draggedId,
+			targetId,
+			position
+		});
+		if (reordered) reorder?.onReorder(reordered);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 items-center gap-1 px-2",
+		dir: direction,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			ref: setStripContainer,
+			children: /* @__PURE__ */ jsx(Tabs, {
+				onValueChange: (value) => {
+					if (typeof value === "string") onViewChange(value);
+				},
+				value: activeViewId,
+				children: /* @__PURE__ */ jsx(TabsList, {
+					"aria-label": ariaLabel,
+					variant: "underline",
+					children: views.map((view) => {
+						if (editing?.viewId === view.id) return /* @__PURE__ */ jsxs(TabsTab, {
+							nativeButton: false,
+							render: /* @__PURE__ */ jsx("div", {}),
+							value: view.id,
+							children: [renderIcon(view), editing.renderLabel(view)]
+						}, view.id);
+						return /* @__PURE__ */ jsx(WorkspaceViewTab, {
+							actions: renderActions?.(view),
+							canReorder,
+							direction,
+							getDragData: reorder?.getDragData,
+							getDropData: reorder?.getDropData,
+							isDragBlocked: reorder?.isBlocked ?? false,
+							instanceId,
+							onContextMenu: onViewContextMenu,
+							onDoubleClick: onViewDoubleClick,
+							onReorder: handleReorder,
+							renderIcon,
+							view
+						}, view.id);
+					})
+				})
+			})
+		}), addControl]
+	});
+};
+const WorkspaceViewTab = ({ actions, canReorder, direction, getDragData, getDropData, isDragBlocked, instanceId, onContextMenu, onDoubleClick, onReorder, renderIcon, view }) => {
+	const [tabContainer, setTabContainer] = useState(null);
+	const [dropPosition, setDropPosition] = useState(null);
+	const canDrag = useLatestCallback(() => !isDragBlocked);
+	const initialData = useLatestCallback(() => ({
+		...getDragData?.(view),
+		[VIEW_DRAG_TYPE]: true,
+		[VIEW_DRAG_ID]: view.id,
+		[VIEW_DRAG_INSTANCE]: instanceId
+	}));
+	const dropData = useLatestCallback(() => ({
+		...getDropData?.(view),
+		[VIEW_DRAG_ID]: view.id
+	}));
+	const reorder = useLatestCallback(onReorder);
+	useEffect(() => {
+		if (!tabContainer) return;
+		return combine(...canReorder ? [draggable({
+			element: tabContainer,
+			canDrag,
+			getInitialData: initialData
+		})] : [], dropTargetForElements({
+			element: tabContainer,
+			canDrop: ({ source }) => canReorder && source.data[VIEW_DRAG_TYPE] === true && source.data[VIEW_DRAG_INSTANCE] === instanceId && source.data[VIEW_DRAG_ID] !== view.id,
+			getData: ({ input, element }) => attachClosestEdge(dropData(), {
+				element,
+				input,
+				allowedEdges: ["left", "right"]
+			}),
+			getIsSticky: () => true,
+			onDrag: ({ self }) => setDropPosition(toWorkspaceViewDropPosition(extractClosestEdge(self.data), direction)),
+			onDragLeave: () => setDropPosition(null),
+			onDrop: ({ source, self }) => {
+				setDropPosition(null);
+				const draggedId = source.data[VIEW_DRAG_ID];
+				const position = toWorkspaceViewDropPosition(extractClosestEdge(self.data), direction);
+				if (typeof draggedId === "string" && position) reorder(draggedId, view.id, position);
+			}
+		}));
+	}, [
+		canReorder,
+		direction,
+		canDrag,
+		dropData,
+		initialData,
+		instanceId,
+		reorder,
+		tabContainer,
+		view.id
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		ref: setTabContainer,
+		children: [
+			dropPosition !== null && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("bg-primary pointer-events-none absolute inset-y-1 z-20 w-0.5 rounded-full", dropPosition === "before" ? "start-0" : "end-0")
+			}),
+			/* @__PURE__ */ jsxs(TabsTab, {
+				className: actions === null || actions === void 0 ? void 0 : "pe-6.5",
+				onContextMenu: (event) => onContextMenu?.(view, event),
+				onDoubleClick: (event) => onDoubleClick?.(view, event),
+				value: view.id,
+				children: [renderIcon(view), /* @__PURE__ */ jsx("span", {
+					className: "max-w-36 truncate",
+					children: view.name
+				})]
+			}),
+			actions
+		]
+	});
+};
+//#endregion
+export { WorkspaceViewSwitcher };

package/dist/view-switcher.logic.d.ts

@@ -0,0 +1,14 @@
+import { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+//#region src/view-switcher.logic.d.ts
+type WorkspaceViewDirection = "ltr" | "rtl";
+type WorkspaceViewDropPosition = "before" | "after";
+declare const toWorkspaceViewDropPosition: (edge: Edge | null, direction: WorkspaceViewDirection) => WorkspaceViewDropPosition | null;
+type ReorderWorkspaceViewIdsParams = {
+  ids: readonly string[];
+  draggedId: string;
+  targetId: string;
+  position: WorkspaceViewDropPosition;
+};
+declare const reorderWorkspaceViewIds: ({ ids, draggedId, targetId, position }: ReorderWorkspaceViewIdsParams) => string[] | null;
+//#endregion
+export { WorkspaceViewDirection, WorkspaceViewDropPosition, reorderWorkspaceViewIds, toWorkspaceViewDropPosition };

package/dist/view-switcher.logic.js

@@ -0,0 +1,14 @@
+//#region src/view-switcher.logic.ts
+const toWorkspaceViewDropPosition = (edge, direction) => {
+	if (edge !== "left" && edge !== "right") return null;
+	return (direction === "rtl" ? edge === "left" : edge === "right") ? "after" : "before";
+};
+const reorderWorkspaceViewIds = ({ ids, draggedId, targetId, position }) => {
+	if (draggedId === targetId || !ids.includes(draggedId) || !ids.includes(targetId)) return null;
+	const withoutDragged = ids.filter((id) => id !== draggedId);
+	const targetIndex = withoutDragged.indexOf(targetId);
+	const reordered = withoutDragged.toSpliced(position === "after" ? targetIndex + 1 : targetIndex, 0, draggedId);
+	return reordered.every((id, index) => id === ids[index]) ? null : reordered;
+};
+//#endregion
+export { reorderWorkspaceViewIds, toWorkspaceViewDropPosition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/workspace-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Reusable workspace presentation components and view helpers for Stella.",
   "keywords": [
     "calculations",
@@ -74,6 +74,14 @@
     "./types": {
       "types": "./dist/types.d.ts",
       "import": "./dist/types.js"
+    },
+    "./view-switcher": {
+      "types": "./dist/view-switcher.d.ts",
+      "import": "./dist/view-switcher.js"
+    },
+    "./view-switcher-logic": {
+      "types": "./dist/view-switcher.logic.d.ts",
+      "import": "./dist/view-switcher.logic.js"
     }
   },
   "publishConfig": {
@@ -101,13 +109,15 @@
     "use-intl": "4.13.5"
   },
   "devDependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.1",
     "@base-ui/react": "1.7.0",
     "@stll/property-testing": "0.0.0",
     "@stll/typescript-config": "0.0.0",
     "@tanstack/react-table": "9.1.2",
-    "@types/bun": "1.3.14",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "bun-types": "1.4.0",
     "fast-check": "^4.9.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -115,6 +125,8 @@
     "tsdown": "0.22.14"
   },
   "peerDependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.1",
     "@base-ui/react": "^1.7.0",
     "@tanstack/react-table": "^9.1.2",
     "react": ">=19",