@stll/ui 0.27.2 → 0.28.0

package/dist/components/button-variants.d.ts

@@ -11,6 +11,6 @@
 export declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 export declare const buttonVariants: (props?: ({
   size?: "default" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
+  variant?: "default" | "link" | "destructive" | "destructive-outline" | "ghost" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/view-toolbar.d.ts

@@ -0,0 +1,11 @@
+import { Button } from "./button.js";
+import { ComponentProps } from "react";
+//#region src/components/view-toolbar.d.ts
+/** Shared view controls stay compact and scroll horizontally on small screens. */
+export declare const ViewToolbarChrome: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+type ViewFilterButtonProps = Omit<ComponentProps<typeof Button>, "children" | "size" | "variant" | "aria-label" | "title"> & {
+  label: string;
+};
+export declare const ViewFilterButton: ({ label, ...props }: ViewFilterButtonProps) => import("react").JSX.Element;
+export declare const ViewFilterChip: ({ className, ...props }: Omit<ComponentProps<typeof Button>, "size" | "variant">) => import("react").JSX.Element;
+//#endregion

package/dist/components/view-toolbar.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { FilterIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/view-toolbar.tsx
+/** Shared view controls stay compact and scroll horizontally on small screens. */
+const ViewToolbarChrome = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex min-w-0 shrink-0 [scrollbar-width:none] flex-nowrap items-center gap-1 overflow-x-auto px-2 py-1 [-ms-overflow-style:none] md:flex-wrap md:overflow-visible [&::-webkit-scrollbar]:hidden", className),
+	...props
+});
+const ViewFilterButton = ({ label, ...props }) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	"aria-label": label,
+	size: "icon-xs",
+	title: label,
+	variant: "ghost",
+	children: /* @__PURE__ */ jsx(FilterIcon, { className: "size-3.5" })
+});
+const ViewFilterChip = ({ className, ...props }) => /* @__PURE__ */ jsx(Button, {
+	...props,
+	className: cn("gap-1.5 font-normal", className),
+	size: "xs",
+	variant: "secondary"
+});
+//#endregion
+export { ViewFilterButton, ViewFilterChip, ViewToolbarChrome };

package/dist/kanban/card-shell.d.ts

@@ -2,6 +2,8 @@ import { ReactNode, RefObject } from "react";
 //#region src/kanban/card-shell.d.ts
 export type KanbanCardShellProps = {
   children: ReactNode;
+  /** Proposed work stays visually distinct until a person accepts it. */
+  appearance?: "standard" | "proposal" | undefined;
   /** Overlay slot pinned to the top-end corner (row actions). */
   actions?: ReactNode;
   /**
@@ -66,5 +68,5 @@ export type KanbanCardShellProps = {
  * Nothing here clips its overflow: a pinned identity row stops sticking the
  * moment anything between it and the scroll container clips.
  */
-export declare const KanbanCardShell: ({ children, actions, actionsVisibility, stickyHeader, active, onOpen, bodyRef, dragRef, className }: KanbanCardShellProps) => import("react").JSX.Element;
+export declare const KanbanCardShell: ({ children, appearance, actions, actionsVisibility, stickyHeader, active, onOpen, bodyRef, dragRef, className }: KanbanCardShellProps) => import("react").JSX.Element;
 //#endregion

package/dist/kanban/card-shell.js

@@ -15,7 +15,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * Nothing here clips its overflow: a pinned identity row stops sticking the
 * moment anything between it and the scroll container clips.
 */
-const KanbanCardShell = ({ children, actions, actionsVisibility = "always", stickyHeader, active, onOpen, bodyRef, dragRef, className }) => {
+const KanbanCardShell = ({ children, appearance = "standard", actions, actionsVisibility = "always", stickyHeader, active, onOpen, bodyRef, dragRef, className }) => {
 	const body = /* @__PURE__ */ jsxs(Fragment, { children: [
 		stickyHeader === void 0 || stickyHeader === null ? null : /* @__PURE__ */ jsx("div", {
 			className: cn(STICKY_HEADER_CLASS, KANBAN_CARD_STICKY_TOP_CLASS),
@@ -34,7 +34,7 @@ const KanbanCardShell = ({ children, actions, actionsVisibility = "always", stic
 		"data-active": active ? "true" : void 0,
 		ref: dragRef,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn(CARD_CLASS, active && ACTIVE_CLASS, className),
+			className: cn(CARD_CLASS, appearance === "proposal" && "border-dashed", active && ACTIVE_CLASS, className),
 			ref: bodyRef,
 			children: body
 		})
@@ -44,7 +44,7 @@ const KanbanCardShell = ({ children, actions, actionsVisibility = "always", stic
 		"data-active": active ? "true" : void 0,
 		ref: dragRef,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn(CARD_CLASS, "cursor-pointer transition-shadow hover:shadow-md", active && ACTIVE_CLASS, className),
+			className: cn(CARD_CLASS, appearance === "proposal" && "border-dashed", "cursor-pointer transition-shadow hover:shadow-md", active && ACTIVE_CLASS, className),
 			onClick: containedEventHandler(onOpen),
 			onKeyDown: (event) => {
 				if (event.key !== "Enter" && event.key !== " ") return;

package/dist/kanban/column-header.js

@@ -20,7 +20,7 @@ const KanbanColumnHeader = ({ swatch, title, meta, calculation, dragHandle, acti
 				className: "sticky start-0 z-10 flex w-fit max-w-full items-center gap-2 bg-inherit",
 				"data-kanban-column-title": "",
 				children: [swatch, /* @__PURE__ */ jsxs("span", {
-					className: "flex min-w-0 flex-1 items-center gap-1.5 truncate",
+					className: "flex min-w-0 flex-1 items-center gap-1.5 truncate text-sm font-medium",
 					children: [title, meta !== void 0 && /* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground text-xs",
 						children: meta

package/dist/kanban/subgroup-board.d.ts

@@ -1,7 +1,7 @@
 import { KanbanBandToggleActivation } from "./column-band-header.js";
 import { KanbanColumnBand, KanbanGroup } from "./grouping.js";
 import { KanbanBoardCell, KanbanBoardColumn, KanbanBoardMatrix } from "./matrix.js";
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 //#region src/kanban/subgroup-board.d.ts
 export type KanbanSubgroupColumnHeaderContext = {
   column: KanbanBoardColumn;
@@ -73,6 +73,7 @@ type KanbanSubgroupCollapseControl = {
   onLaneCollapsedChange: (group: KanbanGroup, collapsed: boolean) => void;
 };
 export type KanbanSubgroupBoardProps<TRow> = {
+  scrollRef?: Ref<HTMLDivElement> | undefined;
   matrix: KanbanBoardMatrix<TRow>;
   renderColumnHeader: (context: KanbanSubgroupColumnHeaderContext) => ReactNode;
   renderLaneIdentity: (context: KanbanSubgroupLaneIdentityContext) => ReactNode;
@@ -152,5 +153,5 @@ export type KanbanSubgroupBoardProps<TRow> = {
  * in every state; the caption line never grows past its own height, so a
  * folded band costs no vertical space.
  */
-export declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
+export declare const KanbanSubgroupBoard: <TRow>({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
 //#endregion

package/dist/kanban/subgroup-board.js

@@ -42,7 +42,7 @@ const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0)
 * in every state; the caption line never grows past its own height, so a
 * folded band costs no vertical space.
 */
-const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }) => {
+const KanbanSubgroupBoard = ({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }) => {
 	const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
 	const [expandedEmptyLaneValues, setExpandedEmptyLaneValues] = useState(() => /* @__PURE__ */ new Set());
 	const [collapsedBandIds, setCollapsedBandIds] = useState(() => /* @__PURE__ */ new Set());
@@ -251,17 +251,17 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 		});
 	};
 	/** One column's cell in a lane's row: what it holds, then what it offers. */
-	const laneColumnCell = (group, column, count) => /* @__PURE__ */ jsxs("div", {
+	const laneColumnCell = ({ group, column, count, laneCount }) => /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center gap-1 px-3", "h-9"),
 		"data-kanban-lane-column-count": count,
-		children: [renderLaneColumnSummary ? renderLaneColumnSummary({
+		children: [laneCount > 0 && (renderLaneColumnSummary ? renderLaneColumnSummary({
 			column,
 			count,
 			lane: group
 		}) : /* @__PURE__ */ jsx("span", {
 			className: "text-muted-foreground text-xs tabular-nums",
 			children: formatCount(count)
-		}), renderLaneColumnAction === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		})), renderLaneColumnAction === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			className: "ms-auto flex items-center",
 			children: renderLaneColumnAction({
 				column,
@@ -279,6 +279,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 	const laneCellsStickyTopStyle = { [KANBAN_STICKY_TOP_VAR]: `${String(headerHeight + LANE_ROW_HEIGHT_PX)}px` };
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("h-full overflow-auto px-4 pb-4", className),
+		ref: scrollRef,
 		style: stickyTopStyle,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "min-w-max",
@@ -358,7 +359,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 								"data-kanban-lane-identity": "",
 								children: /* @__PURE__ */ jsxs("button", {
 									"aria-expanded": !collapsed,
-									className: cn("hover:bg-muted/60 flex items-center gap-2 rounded-lg px-2 text-start transition-[background-color]", "h-9", KANBAN_CHROME_TOGGLE_COARSE_TARGET_CLASS),
+									className: cn("hover:bg-muted/60 flex items-center gap-2 rounded-lg px-2 text-start text-sm font-medium transition-[background-color]", "h-9", KANBAN_CHROME_TOGGLE_COARSE_TARGET_CLASS),
 									onClick: () => setLaneCollapsed(group, count, !collapsed),
 									type: "button",
 									children: [
@@ -379,8 +380,13 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 								})
 							}), renderRow({
 								label: "Lane column summaries",
-								renderColumn: (column) => laneColumnCell(group, column, cellFor(column)?.rows.length ?? 0),
-								renderFoldedBand: (_band, span) => foldedCount(span, cells)
+								renderColumn: (column) => laneColumnCell({
+									group,
+									column,
+									count: cellFor(column)?.rows.length ?? 0,
+									laneCount: count
+								}),
+								renderFoldedBand: (_band, span) => count > 0 ? foldedCount(span, cells) : null
 							})]
 						}), !collapsed && /* @__PURE__ */ jsx("div", {
 							style: laneCellsStickyTopStyle,

package/dist/kanban/virtual-cell.js

@@ -128,7 +128,7 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
 		})
 	}) : null;
 	const content = /* @__PURE__ */ jsxs("div", {
-		className: cn(KANBAN_CELL_SURFACE_CLASS, "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),
+		className: cn(KANBAN_CELL_SURFACE_CLASS, "min-h-20 rounded-xl p-2 transition-[background-color,outline-color]", rows.length === 0 ? "overflow-visible" : "max-h-[min(60vh,40rem)] overflow-y-auto overscroll-y-contain", 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,

package/dist/lib/overlay-layer.d.ts

@@ -16,6 +16,13 @@ export declare const SHELL_CHROME_LAYER_CLASS_NAME = "z-30";
 export declare const OVERLAY_LAYER_CLASS_NAMES: {
   /** Docked composer, suggestion chips, and other in-pane floating chrome. */
   readonly chrome: "z-[80]";
+  /**
+   * In-pane controls floating over the docked composer (a review bar, a
+   * suggestion stepper). The composer's veil blurs everything beneath it with
+   * `backdrop-filter`; one step above `chrome` keeps these controls sharp
+   * regardless of mount order.
+   */
+  readonly "chrome-raised": "z-[81]";
   /** Dialogs, sheets, popovers, tooltips: above chrome, below toasts. */
   readonly default: "z-[85]";
   /** Search sits a hair above a plain dialog so its own popup wins. */

package/dist/lib/overlay-layer.js

@@ -16,6 +16,13 @@ const SHELL_CHROME_LAYER_CLASS_NAME = "z-30";
 const OVERLAY_LAYER_CLASS_NAMES = {
 	/** Docked composer, suggestion chips, and other in-pane floating chrome. */
 	chrome: "z-[80]",
+	/**
+	* In-pane controls floating over the docked composer (a review bar, a
+	* suggestion stepper). The composer's veil blurs everything beneath it with
+	* `backdrop-filter`; one step above `chrome` keeps these controls sharp
+	* regardless of mount order.
+	*/
+	"chrome-raised": "z-[81]",
 	/** Dialogs, sheets, popovers, tooltips: above chrome, below toasts. */
 	default: "z-[85]",
 	/** Search sits a hair above a plain dialog so its own popup wins. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.27.2",
+  "version": "0.28.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",
@@ -33,6 +33,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./view-toolbar": {
+      "types": "./dist/components/view-toolbar.d.ts",
+      "import": "./dist/components/view-toolbar.js"
+    },
     "./accordion": {
       "types": "./dist/components/accordion.d.ts",
       "import": "./dist/components/accordion.js"