@stll/ui 0.17.0 → 0.17.1

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

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

package/dist/inspector/tabs.d.ts

@@ -8,7 +8,7 @@ import { Tabs } from "@base-ui/react/tabs";
  */
 declare const InspectorTabs: ({ className, ...props }: Omit<Tabs.Root.Props, "orientation">) => React$1.JSX.Element;
 declare const INSPECTOR_RAIL_MEDIA_QUERY: "(min-width: 48rem)";
-declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "horizontal" | "vertical";
+declare const resolveInspectorTabOrientation: (isRailLayout: boolean) => "vertical" | "horizontal";
 declare const InspectorTabList: ({ className, ...props }: Tabs.List.Props) => React$1.JSX.Element;
 declare const InspectorTab: ({ className, ...props }: Tabs.Tab.Props) => React$1.JSX.Element;
 declare const InspectorTabPanel: ({ className, ...props }: Tabs.Panel.Props) => React$1.JSX.Element;

package/dist/kanban/column-band-header.d.ts

@@ -7,8 +7,14 @@ type KanbanColumnBandHeaderProps = {
   swatch?: ReactNode;
   /** Short text after the name, such as the band's card count. */
   meta?: ReactNode;
-  /** Whether the band's columns are shown; drives the toggle and its icon. */
+  /** The band's persisted state; drives the toggle, its icon, and its label. */
   collapsed: boolean;
+  /**
+   * Render only the toggle, for the narrow slot of a folded band. Defaults to
+   * `collapsed`; a board that peeks a collapsed band open passes `false` so
+   * the caption shows the name while the toggle still offers to pin it open.
+   */
+  compact?: boolean | undefined;
   /** Accessible name for the toggle, such as "Collapse To do". */
   toggleLabel: string;
   onCollapsedChange: (collapsed: boolean) => void;
@@ -16,12 +22,11 @@ type KanbanColumnBandHeaderProps = {
   actions?: ReactNode;
 };
 /**
- * The band header row above a run of columns: the same rhythm as
- * `KanbanColumnHeader` (swatch, name, count, controls), plus the collapse
- * toggle that folds the run into one narrow lane. Collapsed, the header is
- * the only thing left of the band, so it also carries the band's identity on
- * `aria-expanded` for the columns it hides.
+ * The band line above a run of columns: one 28px row of toggle, swatch, name,
+ * and count, so a band costs the board a caption's height and nothing more.
+ * Folded, only the toggle remains in this line; the band's name moves down
+ * into the narrow column body, where the height is already there.
  */
-declare const KanbanColumnBandHeader: ({ title, swatch, meta, collapsed, toggleLabel, onCollapsedChange, actions }: KanbanColumnBandHeaderProps) => import("react").JSX.Element;
+declare const KanbanColumnBandHeader: ({ title, swatch, meta, collapsed, compact, toggleLabel, onCollapsedChange, actions }: KanbanColumnBandHeaderProps) => import("react").JSX.Element;
 //#endregion
 export { KanbanColumnBandHeader, KanbanColumnBandHeaderProps };

package/dist/kanban/column-band-header.js

@@ -1,42 +1,42 @@
 import { cn } from "../lib/utils.js";
 import { DirectionalIcon } from "../components/directional-icon.js";
 import { ChevronDownIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/kanban/column-band-header.tsx
 /**
-* The band header row above a run of columns: the same rhythm as
-* `KanbanColumnHeader` (swatch, name, count, controls), plus the collapse
-* toggle that folds the run into one narrow lane. Collapsed, the header is
-* the only thing left of the band, so it also carries the band's identity on
-* `aria-expanded` for the columns it hides.
+* The band line above a run of columns: one 28px row of toggle, swatch, name,
+* and count, so a band costs the board a caption's height and nothing more.
+* Folded, only the toggle remains in this line; the band's name moves down
+* into the narrow column body, where the height is already there.
 */
-const KanbanColumnBandHeader = ({ title, swatch, meta, collapsed, toggleLabel, onCollapsedChange, actions }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("flex items-center gap-2 py-2", collapsed ? "flex-col px-1" : "px-3"),
+const KanbanColumnBandHeader = ({ title, swatch, meta, collapsed, compact = collapsed, toggleLabel, onCollapsedChange, actions }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("flex h-7 items-center gap-1", compact ? "justify-center" : "pe-1"),
 	"data-collapsed": collapsed ? "" : void 0,
+	"data-compact": compact ? "" : void 0,
 	"data-slot": "kanban-column-band-header",
-	children: [
-		/* @__PURE__ */ jsx("button", {
-			"aria-expanded": !collapsed,
-			"aria-label": toggleLabel,
-			className: "hover:bg-muted/60 text-muted-foreground hover:text-foreground flex size-8 shrink-0 items-center justify-center rounded-md transition-[background-color]",
-			onClick: () => onCollapsedChange(!collapsed),
-			type: "button",
-			children: /* @__PURE__ */ jsx(DirectionalIcon, {
-				className: cn("size-4 transition-transform", collapsed && "-rotate-90"),
-				flip: collapsed,
-				icon: ChevronDownIcon
-			})
-		}),
+	children: [/* @__PURE__ */ jsx("button", {
+		"aria-expanded": !collapsed,
+		"aria-label": toggleLabel,
+		className: "hover:bg-muted/60 text-muted-foreground hover:text-foreground flex size-6 shrink-0 items-center justify-center rounded-md transition-[background-color]",
+		onClick: () => onCollapsedChange(!collapsed),
+		title: toggleLabel,
+		type: "button",
+		children: /* @__PURE__ */ jsx(DirectionalIcon, {
+			className: cn("size-3.5 transition-transform", collapsed && "-rotate-90"),
+			flip: collapsed,
+			icon: ChevronDownIcon
+		})
+	}), compact ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
 		swatch,
 		/* @__PURE__ */ jsxs("span", {
-			className: cn("flex min-w-0 items-center gap-1.5 text-sm font-medium", collapsed ? "rotate-180 [writing-mode:vertical-rl]" : "flex-1 truncate"),
+			className: "flex min-w-0 flex-1 items-baseline gap-1.5 truncate text-xs font-medium",
 			children: [title, meta !== void 0 && /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground text-xs tabular-nums",
+				className: "text-muted-foreground font-normal tabular-nums",
 				children: meta
 			})]
 		}),
-		collapsed ? null : actions
-	]
+		actions
+	] })]
 });
 //#endregion
 export { KanbanColumnBandHeader };

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

@@ -23,7 +23,14 @@ type KanbanSubgroupBandHeaderContext = {
   columns: KanbanBoardColumn[];
   /** Rows across the band's columns, every lane included. */
   count: number;
+  /** The persisted state the toggle reports and flips. */
   collapsed: boolean;
+  /**
+   * Whether the band renders as one narrow slot right now. False while a
+   * collapsed band peeks open under the pointer, so a caption can show its
+   * name and offer to pin the band open.
+   */
+  folded: boolean;
   onCollapsedChange: (collapsed: boolean) => void;
 };
 /**
@@ -50,13 +57,14 @@ type KanbanSubgroupBoardProps<TRow> = {
   renderLaneIdentity: (context: KanbanSubgroupLaneIdentityContext) => ReactNode;
   renderCell: (context: KanbanSubgroupCellContext<TRow>) => ReactNode;
   /**
-   * The header above a band's columns. Defaults to `KanbanColumnBandHeader`
+   * The line above a band's columns. Defaults to `KanbanColumnBandHeader`
    * with the band's label and count.
    */
   renderBandHeader?: ((context: KanbanSubgroupBandHeaderContext) => ReactNode) | undefined;
   /**
-   * A lane's slot while its band is collapsed. Defaults to the count alone;
-   * a host that accepts drops into a collapsed band renders its target here.
+   * A lane's slot while its band is collapsed. Defaults to the band's name
+   * set vertically over the count; a host that accepts drops into a collapsed
+   * band renders its target here.
    */
   renderCollapsedBandCell?: ((context: KanbanSubgroupCollapsedBandCellContext<TRow>) => ReactNode) | undefined;
   /** Accessible name for a band's collapse toggle. */
@@ -74,12 +82,14 @@ type KanbanSubgroupBoardProps<TRow> = {
 /**
  * Reusable swimlane layout over the canonical two-axis Kanban matrix.
  *
- * Columns that carry band metadata render under a band header and can be
- * collapsed as a run: the band folds into one narrow slot in every row, whose
- * cells stay reachable (a host renders its drop target in them), and peeks
- * open while a pointer rests on it, so a drag can still land on a specific
- * column inside. Every row is laid out span by span with the same widths,
- * which is what keeps headers, counts, and cells aligned in every state.
+ * Columns that carry band metadata render under a one-line band caption and
+ * can be collapsed as a run: the band folds into one narrow slot in every
+ * row, whose cells stay reachable (a host renders its drop target in them),
+ * and peeks open while a pointer rests on it, so a drag can still land on a
+ * specific column inside. Every row is laid out span by span with the same
+ * widths, which is what keeps captions, headers, counts, and cells aligned
+ * in every state; the caption line never grows past its own height, so a
+ * folded band costs no vertical space.
  */
 declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
 //#endregion

package/dist/kanban/subgroup-board.js

@@ -15,12 +15,14 @@ const KANBAN_BAND_PEEK_DELAY_MS = 400;
 /**
 * Reusable swimlane layout over the canonical two-axis Kanban matrix.
 *
-* Columns that carry band metadata render under a band header and can be
-* collapsed as a run: the band folds into one narrow slot in every row, whose
-* cells stay reachable (a host renders its drop target in them), and peeks
-* open while a pointer rests on it, so a drag can still land on a specific
-* column inside. Every row is laid out span by span with the same widths,
-* which is what keeps headers, counts, and cells aligned in every state.
+* Columns that carry band metadata render under a one-line band caption and
+* can be collapsed as a run: the band folds into one narrow slot in every
+* row, whose cells stay reachable (a host renders its drop target in them),
+* and peeks open while a pointer rests on it, so a drag can still land on a
+* specific column inside. Every row is laid out span by span with the same
+* widths, which is what keeps captions, headers, counts, and cells aligned
+* 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, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }) => {
 	const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
@@ -73,10 +75,14 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			return next;
 		});
 	};
-	const isBandFolded = (band) => {
-		if (peekingBandId === band.id) return false;
-		return isBandCollapsed ? isBandCollapsed(band) : collapsedBandIds.has(band.id);
-	};
+	/** The band's persisted state: what the toggle reports and flips. */
+	const isBandCollapsedNow = (band) => isBandCollapsed ? isBandCollapsed(band) : collapsedBandIds.has(band.id);
+	/**
+	* Whether the band renders folded right now. A peek opens the layout
+	* without changing the persisted state, so a peeked band still reports
+	* itself collapsed and its toggle pins it open rather than closing it.
+	*/
+	const isBandFolded = (band) => peekingBandId !== band.id && isBandCollapsedNow(band);
 	const setBandCollapsed = (band, collapsed) => {
 		setPeekingBandId(null);
 		if (onBandCollapsedChange) {
@@ -122,17 +128,20 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 		})
 	});
 	const bandHeader = (band, span) => {
-		const collapsed = isBandFolded(band);
+		const collapsed = isBandCollapsedNow(band);
+		const folded = isBandFolded(band);
 		const context = {
 			band,
 			collapsed,
 			columns: span.columns,
 			count: span.columns.reduce((sum, column) => sum + columnCount(column), 0),
+			folded,
 			onCollapsedChange: (next) => setBandCollapsed(band, next)
 		};
 		if (renderBandHeader) return /* @__PURE__ */ jsx(Fragment, { children: renderBandHeader(context) });
 		return /* @__PURE__ */ jsx(KanbanColumnBandHeader, {
 			collapsed,
+			compact: folded,
 			meta: formatCount(context.count),
 			title: band.label,
 			toggleLabel: formatBandToggleLabel ? formatBandToggleLabel(band, collapsed) : band.label,
@@ -148,10 +157,16 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			count,
 			laneValue
 		}) });
-		return /* @__PURE__ */ jsx("div", {
-			className: "text-muted-foreground flex justify-center px-1 py-2 text-xs tabular-nums",
+		return /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex flex-col items-center gap-2 py-2 text-xs",
 			"data-kanban-collapsed-band-count": count,
-			children: formatCount(count)
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "max-h-40 truncate font-medium [writing-mode:vertical-rl]",
+				children: band.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: formatCount(count)
+			})]
 		});
 	};
 	const foldedCount = (span, cells) => {
@@ -173,7 +188,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 				/* @__PURE__ */ jsxs("div", {
 					className: "bg-background sticky top-0 z-20 pt-4 pb-3",
 					children: [hasBands ? /* @__PURE__ */ jsx("div", {
-						className: "flex gap-3 pb-2",
+						className: "flex items-end gap-3 pb-1.5",
 						"data-kanban-band-row": "",
 						children: spans.map((span) => {
 							const band = span.band;
@@ -183,13 +198,13 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 							}, spanKey(span));
 							if (isBandFolded(band)) return /* @__PURE__ */ jsx(FoldedBandSlot, {
 								band,
-								className: cn("border-border/60 bg-muted/40 rounded-lg border", KANBAN_COLLAPSED_BAND_WIDTH_CLASS),
+								className: cn("border-border/60 border-b", KANBAN_COLLAPSED_BAND_WIDTH_CLASS),
 								onPeek: setPeekingBandId,
 								onPeekEnd: endPeek,
 								children: bandHeader(band, span)
 							}, spanKey(span));
 							return /* @__PURE__ */ jsx("div", {
-								className: "border-border/60 bg-muted/40 shrink-0 rounded-lg border",
+								className: "border-border/60 shrink-0 border-b",
 								"data-kanban-band": band.id,
 								style: { width: `${String(spanWidth(span))}px` },
 								onPointerLeave: peekingBandId === band.id ? endPeek : void 0,
@@ -290,6 +305,8 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 * The narrow slot a folded band occupies in a row. A pointer resting on it
 * for `KANBAN_BAND_PEEK_DELAY_MS` peeks the band open; leaving ends the peek
 * and cancels a pending one, so a drag passing over it does not unfold it.
+* The pointer must enter the slot after it appeared: a band folded under a
+* resting pointer does not peek straight back open.
 */
 const FoldedBandSlot = ({ band, children, className, onPeek, onPeekEnd }) => {
 	const timer = useRef(null);
@@ -300,8 +317,8 @@ const FoldedBandSlot = ({ band, children, className, onPeek, onPeekEnd }) => {
 		className,
 		"data-kanban-band": band.id,
 		"data-kanban-band-collapsed": "",
-		onPointerEnter: () => {
-			if (timer.current !== null) clearTimeout(timer.current);
+		onPointerMove: () => {
+			if (timer.current !== null) return;
 			timer.current = setTimeout(() => {
 				timer.current = null;
 				onPeek(band.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "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",