@stll/ui 0.19.0 → 0.21.0

package/dist/inspector/index.d.ts

@@ -1,7 +1,9 @@
 import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./chrome.js";
 import { InspectorDock } from "./dock.js";
+import { InspectorEntityTab, entityTabGlyph } from "./entity-tab.js";
+import { InspectorFacetBar } from "./facet-bar.js";
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs } from "./tabs.js";
 import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX } from "./layout-tokens.js";
 import { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, shouldForceSidebarCollapsed } from "./pane-width.js";
 import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth } from "./use-pane-width.js";
-export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };
+export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, entityTabGlyph, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };

package/dist/inspector/index.js

@@ -2,6 +2,8 @@ import { PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZ
 import { Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTitle } from "./chrome.js";
 import { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, shouldForceSidebarCollapsed } from "./pane-width.js";
 import { InspectorDock } from "./dock.js";
+import { InspectorEntityTab, entityTabGlyph } from "./entity-tab.js";
+import { InspectorFacetBar } from "./facet-bar.js";
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs } from "./tabs.js";
 import { INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, parsePersistedPaneWidth, resolveDragWidth, resolveKeyboardWidth, useInspectorPaneWidth } from "./use-pane-width.js";
-export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };
+export { INSPECTOR_CONTENT_MIN_WIDTH, INSPECTOR_EDITOR_MIN_WIDTH, INSPECTOR_PANE_DEFAULT_WIDTH, INSPECTOR_PANE_KEYBOARD_PAGE_STEP, INSPECTOR_PANE_KEYBOARD_STEP, INSPECTOR_PANE_MAX_WIDTH, INSPECTOR_PANE_MIN_WIDTH, INSPECTOR_RAIL_WIDTH, Inspector, InspectorActions, InspectorContent, InspectorDescription, InspectorDock, InspectorEmptyRow, InspectorEntityTab, InspectorFacetBar, InspectorHeader, InspectorHeaderText, InspectorProperty, InspectorPropertyLabel, InspectorPropertyList, InspectorPropertyValue, InspectorRail, InspectorRailCell, InspectorRailContent, InspectorRailFooter, InspectorRailIconButton, InspectorRailTab, InspectorSection, InspectorSectionTitle, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabs, InspectorTitle, PROPERTY_ROW_GRID, SIDE_RAIL_CONTAINER_CLASS, SIDE_RAIL_ICON_BUTTON_SIZE, SIDE_RAIL_TAB_ICON_SIZE, SIDE_RAIL_WIDTH, TOOLBAR_ROW_HEIGHT, TOOLBAR_ROW_HEIGHT_PX, entityTabGlyph, parsePersistedPaneWidth, resolveDragWidth, resolveInspectorDockWidth, resolveInspectorPaneMaxWidth, resolveInspectorPaneWidth, resolveKeyboardWidth, shouldForceSidebarCollapsed, useInspectorPaneWidth };

package/dist/kanban/subgroup-board.js

@@ -226,9 +226,9 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			className: "min-w-max",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "bg-background sticky top-0 z-20 pt-4 pb-3",
+					className: "bg-background sticky top-0 z-20 pt-2 pb-2",
 					children: [hasBands ? /* @__PURE__ */ jsx("div", {
-						className: "flex items-end gap-3 pb-1.5",
+						className: "flex items-end gap-3 pb-1",
 						"data-kanban-band-row": "",
 						children: spans.map((span) => {
 							const band = span.band;
@@ -285,7 +285,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 					const collapsed = isLaneCollapsed ? isLaneCollapsed(group, count) : defaultCollapsed;
 					const cellFor = (column) => cells.find((candidate) => columnKey(candidate.coordinate.column) === columnKey(column));
 					return /* @__PURE__ */ jsxs("section", {
-						className: "border-border/60 border-b py-2 first:pt-0 last:border-b-0",
+						className: "border-border/60 border-b py-1 first:pt-0 last:border-b-0",
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								className: "bg-background/95 sticky start-0 z-10 flex min-h-11 items-center backdrop-blur-sm",
@@ -311,7 +311,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 									]
 								})
 							}),
-							renderRow({
+							collapsed && renderRow({
 								label: "Lane column counts",
 								renderColumn: (column) => {
 									const columnRows = cellFor(column)?.rows.length ?? 0;

package/dist/kanban/virtual-cell.d.ts

@@ -1,3 +1,4 @@
+import { OptionColor } from "../lib/option-color.js";
 import { UseKanbanDropTargetOptions } from "./sortable-interactions.js";
 import { Key, ReactNode, RefObject } from "react";
 import { UniqueIdentifier } from "@dnd-kit/core";
@@ -38,6 +39,14 @@ type KanbanVirtualCellProps<TRow> = {
   containerRef?: RefObject<HTMLDivElement | null> | undefined;
   active?: boolean | undefined;
   backgroundColor?: string | undefined;
+  /**
+   * Optional colour identity for the cell surface: a faint resting tint at
+   * the same alpha as `option-color`'s own subtle background, with a
+   * stronger accent-coloured wash and ring while `active` is also set. Omit
+   * for the plain neutral surface; `backgroundColor` still wins outright
+   * when both are given, since that prop is the caller's explicit override.
+   */
+  accent?: OptionColor | undefined;
   footer?: ReactNode;
   estimateSize?: number | undefined;
   overscan?: number | undefined;
@@ -45,6 +54,6 @@ type KanbanVirtualCellProps<TRow> = {
   className?: string | undefined;
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active, backgroundColor, footer, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
+declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active, backgroundColor, accent, footer, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
 //#endregion
 export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext };

package/dist/kanban/virtual-cell.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { useKanbanDropTarget } from "./sortable-interactions.js";
+import { resolveOptionColor } from "../lib/option-color.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef } from "react";
 import { useDndContext } from "@dnd-kit/core";
@@ -9,6 +10,18 @@ import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 const DEFAULT_ESTIMATE_SIZE_PX = 128;
 const DEFAULT_OVERSCAN = 8;
 const DEFAULT_LOAD_MORE_THRESHOLD_PX = 200;
+/** The CSS custom property every accent tint and the active accent ring are
+*  derived from, so both stay in lockstep with the resolved colour token. */
+const KANBAN_CELL_ACCENT_VAR = "--kanban-cell-accent";
+/** Faint resting wash: matches the alpha `option-color` already uses for its
+*  own subtle background token, so a tinted cell reads at the same weight as
+*  the swatch and badges that carry the same colour. */
+const KANBAN_CELL_ACCENT_RESTING_ALPHA = 12;
+/** Stronger wash while a card is dragged over an accented cell. */
+const KANBAN_CELL_ACCENT_ACTIVE_ALPHA = 22;
+/** Ring alpha for the active accent frame, well above the wash so the frame
+*  still reads as the drag-over affordance rather than more background tint. */
+const KANBAN_CELL_ACCENT_ACTIVE_RING_ALPHA = 55;
 const retainActiveSortableIndex = (range, activeIndex) => {
 	const indexes = defaultRangeExtractor(range);
 	if (activeIndex < 0 || indexes.includes(activeIndex)) return indexes;
@@ -21,7 +34,7 @@ const KANBAN_VIRTUAL_CELL_PAGINATION = {
 	CURSOR: "cursor"
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active = false, backgroundColor, footer, estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
+const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active = false, backgroundColor, accent, footer, estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
 	const internalRef = useRef(null);
 	const fallbackDropTargetId = useId();
 	const scrollRef = internalRef;
@@ -69,12 +82,21 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
 		if (containerRef) containerRef.current = element;
 		dropTarget.setNodeRef(element);
 	};
+	const accentVariants = accent === void 0 ? void 0 : resolveOptionColor(accent);
+	const accentBackground = accentVariants === void 0 ? void 0 : `color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${active ? KANBAN_CELL_ACCENT_ACTIVE_ALPHA : KANBAN_CELL_ACCENT_RESTING_ALPHA}%, var(--background))`;
+	const activeAccentRing = active && accentVariants !== void 0 ? `0 0 0 2px color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${KANBAN_CELL_ACCENT_ACTIVE_RING_ALPHA}%, transparent)` : void 0;
+	const style = backgroundColor === void 0 && accentVariants === void 0 ? void 0 : {
+		backgroundColor: backgroundColor ?? accentBackground,
+		...activeAccentRing === void 0 ? void 0 : { boxShadow: activeAccentRing },
+		...accentVariants === void 0 ? void 0 : { [KANBAN_CELL_ACCENT_VAR]: accentVariants.color }
+	};
 	const content = /* @__PURE__ */ jsxs("div", {
-		className: cn("bg-muted/20 max-h-[min(60vh,40rem)] min-h-20 overflow-y-auto overscroll-y-contain rounded-xl p-2 transition-[background-color,outline-color]", active && "bg-primary/5 ring-primary/50 ring-2", className),
+		className: cn("bg-muted/20 max-h-[min(60vh,40rem)] min-h-20 overflow-y-auto overscroll-y-contain rounded-xl p-2 transition-[background-color,outline-color]", active && accentVariants === void 0 && "bg-primary/5 ring-primary/50 ring-2", className),
 		"data-kanban-cell": sortable?.dropTarget.id,
+		"data-kanban-cell-accent": accentVariants === void 0 ? void 0 : "true",
 		onScroll: handleScroll,
 		ref: setScrollElement,
-		style: backgroundColor ? { backgroundColor } : void 0,
+		style,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "relative",
 			style: { height: virtualizer.getTotalSize() },

package/dist/lib/slot.d.ts

@@ -0,0 +1,28 @@
+//#region src/lib/slot.d.ts
+/**
+ * Minimal replacement for `@radix-ui/react-slot`.
+ *
+ * Renders its single child element with the parent's props
+ * (className, style, event handlers, ref, data-* attributes)
+ * merged onto it. Used by the sidebar shell for the `asChild`
+ * pattern.
+ *
+ * Ref composition logic adapted from the MIT-licensed
+ * `@radix-ui/react-compose-refs` (v1.1.2).
+ *
+ * This module intentionally uses `Children.only` and
+ * `cloneElement`: it is a low-level composition primitive
+ * that merges props onto a single child, which is exactly
+ * the use case React documents for these APIs.
+ *
+ * Several lint suppressions are necessary because prop
+ * merging is inherently dynamic; the types of child props
+ * are not statically known.
+ */
+type SlotProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+  ref?: React.Ref<HTMLElement> | undefined;
+};
+declare const Slot: ({ ref: parentRef, children, className, style, ...rest }: SlotProps) => React.ReactNode;
+//#endregion
+export { Slot };

package/dist/lib/slot.js

@@ -0,0 +1,64 @@
+import { cn } from "./utils.js";
+import { Children, Fragment, cloneElement, isValidElement } from "react";
+//#region src/lib/slot.tsx
+/**
+* Minimal replacement for `@radix-ui/react-slot`.
+*
+* Renders its single child element with the parent's props
+* (className, style, event handlers, ref, data-* attributes)
+* merged onto it. Used by the sidebar shell for the `asChild`
+* pattern.
+*
+* Ref composition logic adapted from the MIT-licensed
+* `@radix-ui/react-compose-refs` (v1.1.2).
+*
+* This module intentionally uses `Children.only` and
+* `cloneElement`: it is a low-level composition primitive
+* that merges props onto a single child, which is exactly
+* the use case React documents for these APIs.
+*
+* Several lint suppressions are necessary because prop
+* merging is inherently dynamic; the types of child props
+* are not statically known.
+*/
+const Slot = ({ ref: parentRef, children, className, style, ...rest }) => {
+	const child = Children.only(children);
+	if (!isValidElement(child)) return child;
+	if (child.type === Fragment) return child;
+	const childProps = child.props;
+	const mergedProps = {
+		...rest,
+		...childProps
+	};
+	const childRef = childProps["ref"];
+	if (parentRef !== void 0 || childRef !== void 0) mergedProps["ref"] = composeSlotRefs(parentRef, childRef);
+	const childClassName = childProps["className"];
+	if (className || typeof childClassName === "string") mergedProps["className"] = cn(className, typeof childClassName === "string" ? childClassName : void 0);
+	const childStyle = childProps["style"];
+	if (style || typeof childStyle === "object" && childStyle !== null) mergedProps["style"] = {
+		...style,
+		...typeof childStyle === "object" && childStyle !== null ? childStyle : {}
+	};
+	const restEntries = Object.entries(rest);
+	for (const [key, parentValue] of restEntries) if (key.startsWith("on") && typeof parentValue === "function") {
+		const childValue = childProps[key];
+		if (typeof childValue === "function") mergedProps[key] = (...args) => {
+			Reflect.apply(childValue, void 0, args);
+			Reflect.apply(parentValue, void 0, args);
+		};
+	}
+	return cloneElement(child, mergedProps);
+};
+const composeSlotRefs = (parentRef, childRef) => (node) => {
+	setSlotRef(parentRef, node);
+	setSlotRef(childRef, node);
+};
+const setSlotRef = (ref, node) => {
+	if (typeof ref === "function") {
+		Reflect.apply(ref, void 0, [node]);
+		return;
+	}
+	if (typeof ref === "object" && ref !== null && "current" in ref) ref.current = node;
+};
+//#endregion
+export { Slot };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Stella's design system: bidi-aware React primitives built on Base UI, the dockable inspector pane, and the Tailwind v4 theme they are styled with.",
   "keywords": [
     "base-ui",
@@ -93,6 +93,10 @@
       "types": "./dist/components/composer.d.ts",
       "import": "./dist/components/composer.js"
     },
+    "./context-menu": {
+      "types": "./dist/components/context-menu.d.ts",
+      "import": "./dist/components/context-menu.js"
+    },
     "./control-size": {
       "types": "./dist/lib/control-size.d.ts",
       "import": "./dist/lib/control-size.js"
@@ -257,6 +261,10 @@
       "types": "./dist/components/sheet.d.ts",
       "import": "./dist/components/sheet.js"
     },
+    "./sidebar": {
+      "types": "./dist/components/sidebar.d.ts",
+      "import": "./dist/components/sidebar.js"
+    },
     "./loader": {
       "types": "./dist/components/loader.d.ts",
       "import": "./dist/components/loader.js"
@@ -494,6 +502,10 @@
       "types": "./dist/components/sheet.d.ts",
       "import": "./dist/components/sheet.js"
     },
+    "./components/sidebar": {
+      "types": "./dist/components/sidebar.d.ts",
+      "import": "./dist/components/sidebar.js"
+    },
     "./components/skeleton": {
       "types": "./dist/components/skeleton.d.ts",
       "import": "./dist/components/skeleton.js"