@stll/ui 0.34.2 → 0.34.4

package/dist/calendar/resource-calendar.js

@@ -3,6 +3,7 @@ import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarHeader
 import { assertConsecutiveCalendarDates, layoutResourceCalendarEntries, nextCalendarDate } from "./resource-calendar.logic.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { panic } from "better-result";
 //#region src/calendar/resource-calendar.tsx
 const ResourceCalendar = ({ ariaLabel, columns, empty, entries, onSelectEntry, resourceHeader, resources }) => {
 	assertResourceCalendarContract({
@@ -68,7 +69,7 @@ const ResourceCalendar = ({ ariaLabel, columns, empty, entries, onSelectEntry, r
 				const visibleEntriesByColumn = /* @__PURE__ */ new Map();
 				for (const placement of layout.placements) {
 					const entry = resourceEntryById.get(placement.entryId);
-					if (entry === void 0) throw new TypeError(`Resource calendar layout references unknown entry ${placement.entryId}`);
+					if (entry === void 0) panic(`Resource calendar layout references unknown entry ${placement.entryId}`);
 					const existing = visibleEntriesByColumn.get(placement.columnStart);
 					if (existing === void 0) {
 						visibleEntriesByColumn.set(placement.columnStart, [{
@@ -170,7 +171,7 @@ const ResourceCalendarEntryView = ({ entry, labelledBy, onSelectEntry, placement
 	});
 };
 const assertUniqueIds = (ids, label) => {
-	if (new Set(ids).size !== ids.length) throw new TypeError(`${label} ids must be unique`);
+	if (new Set(ids).size !== ids.length) panic(`${label} ids must be unique`);
 };
 const assertResourceCalendarContract = ({ columns, entries, resources }) => {
 	assertConsecutiveCalendarDates(columns.map(({ date }) => date));
@@ -178,7 +179,7 @@ const assertResourceCalendarContract = ({ columns, entries, resources }) => {
 	assertUniqueIds(entries.map(({ id }) => id), "Resource calendar entry");
 	const resourceIds = new Set(resources.map(({ id }) => id));
 	const orphan = entries.find(({ resourceId }) => !resourceIds.has(resourceId));
-	if (orphan !== void 0) throw new TypeError(`Resource calendar entry ${orphan.id} references an unknown resource`);
+	if (orphan !== void 0) panic(`Resource calendar entry ${orphan.id} references an unknown resource`);
 };
 //#endregion
 export { ResourceCalendar };

package/dist/calendar/resource-calendar.logic.js

@@ -1,4 +1,4 @@
-import { Result } from "better-result";
+import { Result, panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
 //#region src/calendar/resource-calendar.logic.ts
 const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/u;
@@ -9,13 +9,13 @@ const toPlainDate = (value) => {
 const differenceInCalendarDays = (later, earlier) => {
 	const laterDate = toPlainDate(later);
 	const earlierDate = toPlainDate(earlier);
-	if (laterDate === null || earlierDate === null) throw new RangeError("Calendar dates must use normalized YYYY-MM-DD values");
+	if (laterDate === null || earlierDate === null) panic("Calendar dates must use normalized YYYY-MM-DD values");
 	return laterDate.since(earlierDate, { largestUnit: "days" }).days;
 };
 const getResourceCalendarPlacement = ({ entry, visibleRange }) => {
 	const visibleDayCount = differenceInCalendarDays(visibleRange.endDateExclusive, visibleRange.startDate);
 	const entryDayCount = differenceInCalendarDays(entry.endDateExclusive, entry.startDate);
-	if (visibleDayCount <= 0 || entryDayCount <= 0) throw new RangeError("Calendar date ranges must be non-empty and half-open");
+	if (visibleDayCount <= 0 || entryDayCount <= 0) panic("Calendar date ranges must be non-empty and half-open");
 	if (entry.startDate >= visibleRange.endDateExclusive || entry.endDateExclusive <= visibleRange.startDate) return null;
 	const clippedStart = entry.startDate < visibleRange.startDate ? visibleRange.startDate : entry.startDate;
 	const clippedEnd = entry.endDateExclusive > visibleRange.endDateExclusive ? visibleRange.endDateExclusive : entry.endDateExclusive;
@@ -25,27 +25,27 @@ const getResourceCalendarPlacement = ({ entry, visibleRange }) => {
 	};
 };
 const assertConsecutiveCalendarDates = (dates) => {
-	if (dates.length === 0) throw new RangeError("A resource calendar needs at least one date column");
+	if (dates.length === 0) panic("A resource calendar needs at least one date column");
 	const first = dates.at(0);
-	if (first === void 0 || toPlainDate(first) === null) throw new RangeError("Resource calendar date columns must be consecutive normalized dates");
+	if (first === void 0 || toPlainDate(first) === null) panic("Resource calendar date columns must be consecutive normalized dates");
 	for (let index = 1; index < dates.length; index += 1) {
 		const previous = dates.at(index - 1);
 		const current = dates.at(index);
-		if (previous === void 0 || current === void 0 || differenceInCalendarDays(current, previous) !== 1) throw new RangeError("Resource calendar date columns must be consecutive normalized dates");
+		if (previous === void 0 || current === void 0 || differenceInCalendarDays(current, previous) !== 1) panic("Resource calendar date columns must be consecutive normalized dates");
 	}
 };
 const nextCalendarDate = (value) => {
 	const date = toPlainDate(value);
-	if (date === null) throw new RangeError("Calendar dates must use normalized YYYY-MM-DD values");
+	if (date === null) panic("Calendar dates must use normalized YYYY-MM-DD values");
 	const nextDate = date.add({ days: 1 }).toString();
-	if (toPlainDate(nextDate) === null) throw new RangeError("Calendar dates must have a following normalized YYYY-MM-DD value");
+	if (toPlainDate(nextDate) === null) panic("Calendar dates must have a following normalized YYYY-MM-DD value");
 	return nextDate;
 };
 const layoutResourceCalendarEntries = (entries, visibleRange) => {
 	const visibleEntries = [];
 	const entryIds = /* @__PURE__ */ new Set();
 	for (const entry of entries) {
-		if (entryIds.has(entry.id)) throw new TypeError("Resource calendar entry ids must be unique");
+		if (entryIds.has(entry.id)) panic("Resource calendar entry ids must be unique");
 		entryIds.add(entry.id);
 		const placement = getResourceCalendarPlacement({
 			entry,

package/dist/components/button.d.ts

@@ -13,8 +13,8 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "row" | "icon" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "muted" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "outline" | "secondary" | null | undefined;
+  size?: "default" | "row" | "chip" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "sm" | "xl" | "xs" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];

package/dist/components/color-picker.js

@@ -170,8 +170,9 @@ const CustomColorControls = ({ handleInputChange, handlePickerChange, inputHex,
 		})
 	]
 })] });
-const InlineCustomColor = ({ customSelected, handleInputChange, handlePickerChange, inputHex, label, pickerHex, presets, value }) => {
-	const customColor = customSelected ? `#${value}` : void 0;
+const InlineCustomColor = ({ customHex, handleInputChange, handlePickerChange, inputHex, label, pickerHex, presets }) => {
+	const customSelected = customHex !== null;
+	const customColor = customSelected ? `#${customHex}` : void 0;
 	const customGradient = `conic-gradient(${presets.map((preset) => swatchColor(preset)).join(", ")})`;
 	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
 		render: /* @__PURE__ */ jsx("button", {
@@ -199,11 +200,11 @@ const InlineCustomColor = ({ customSelected, handleInputChange, handlePickerChan
 		})
 	}) })] });
 };
-const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, presentation = "popover" }) => {
+const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaultExpanded, moreLabel, presentation }) => {
 	const [expanded, setExpanded] = useState(defaultExpanded);
 	const [pickerHex, setPickerHex] = useState(() => (looksLikeHex(value ?? "") ? value : "000000") ?? "000000");
 	const [inputHex, setInputHex] = useState("");
-	const customSelected = !presets.some((preset) => preset.value === value) && looksLikeHex(value ?? "");
+	const customHex = !presets.some((preset) => preset.value === value) && value !== void 0 && looksLikeHex(value) ? value : null;
 	/** Called when the visual picker (SB square / hue strip) emits a color. */
 	const handlePickerChange = (hex) => {
 		const normalized = normalizeHex(hex);
@@ -231,14 +232,13 @@ const ColorPickerContent = ({ value, onSelect, onClear, presets, columns, defaul
 			presentation: "inline",
 			selected: value === preset.value
 		}, preset.value)), /* @__PURE__ */ jsx(InlineCustomColor, {
-			customSelected,
+			customHex,
 			handleInputChange,
 			handlePickerChange,
 			inputHex,
 			label: moreLabel,
 			pickerHex,
-			presets,
-			value
+			presets
 		})]
 	});
 	return /* @__PURE__ */ jsxs("div", {

package/dist/components/destructive-confirm-dialog.js

@@ -18,7 +18,7 @@ const DestructiveConfirmDialog = ({ cancelLabel, confirmLabel, confirmation, des
 		} catch {}
 	};
 	const handleConfirmClick = () => {
-		handleConfirm().catch(() => void 0);
+		handleConfirm().catch(reportError);
 	};
 	return /* @__PURE__ */ jsx(AlertDialog, {
 		onOpenChange: handleOpenChange,

package/dist/components/outline-rail.js

@@ -88,7 +88,7 @@ const Chevron = ({ open }) => /* @__PURE__ */ jsx(DirectionalIcon, {
 	icon: ChevronRight
 });
 const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, collapsedFromLevel, topOffset = 0, panelWidth = 300, ariaLabel = "Outline" }) => {
-	const [pctById, setPctById] = useState({});
+	const [pctById, setPctById] = useState(/* @__PURE__ */ new Map());
 	const [derivedActive, setDerivedActive] = useState(null);
 	const [hovered, setHovered] = useState(false);
 	const [pinned, setPinned] = useState(false);
@@ -133,10 +133,10 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 	const recalc = useCallback(() => {
 		const container = scrollContainerRef.current;
 		if (!container) return;
-		const next = {};
+		const next = /* @__PURE__ */ new Map();
 		for (const item of items) {
 			const pct = resolvePct(item.id, container);
-			if (pct !== null) next[item.id] = pct;
+			if (pct !== null) next.set(item.id, pct);
 		}
 		setPctById(next);
 	}, [
@@ -324,10 +324,17 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 			children: node.children.map(renderNode)
 		})] }, `${node.item.id}-${node.index}`);
 	};
-	const visibleTicks = items.filter((item) => item.id in pctById && item.level <= railLevelCap);
+	const visibleTicks = items.flatMap((item) => {
+		const pct = pctById.get(item.id);
+		return pct !== void 0 && item.level <= railLevelCap ? [{
+			item,
+			pct
+		}] : [];
+	});
 	if (items.length < 2 && header === void 0) return null;
-	const visibleTickIds = new Set(visibleTicks.map((item) => item.id));
-	const ghostItem = hoveredId !== null && !visibleTickIds.has(hoveredId) && hoveredId in pctById ? items.find((item) => item.id === hoveredId) ?? null : null;
+	const visibleTickIds = new Set(visibleTicks.map(({ item }) => item.id));
+	const ghostPct = hoveredId !== null && !visibleTickIds.has(hoveredId) ? pctById.get(hoveredId) : void 0;
+	const ghostItem = ghostPct === void 0 ? void 0 : items.find((item) => item.id === hoveredId);
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-label": ariaLabel,
 		className: "absolute end-0 z-20 max-lg:hidden",
@@ -361,7 +368,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 				onWheel: (event) => {
 					scrollContainerRef.current?.scrollBy(0, event.deltaY);
 				},
-				children: [visibleTicks.map((item) => {
+				children: [visibleTicks.map(({ item, pct }) => {
 					const isActive = active === item.id;
 					const isHovered = hoveredId === item.id;
 					return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("button", {
@@ -372,7 +379,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 						onMouseEnter: () => setHoveredId(item.id),
 						onMouseLeave: () => setHoveredId(null),
 						style: {
-							top: `${pctById[item.id]}%`,
+							top: `${pct}%`,
 							transform: "translateY(-50%)",
 							width: isHovered ? tickWidth(item.level) + 8 : tickWidth(item.level),
 							height: tickHeight(isHovered, isActive),
@@ -380,11 +387,11 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 						},
 						type: "button"
 					}) }), /* @__PURE__ */ jsx(TooltipPopup, { children: item.label })] }, item.id);
-				}), ghostItem && /* @__PURE__ */ jsx("span", {
+				}), ghostItem && ghostPct !== void 0 && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
 					className: "absolute end-0 rounded-full opacity-100",
 					style: {
-						top: `${pctById[ghostItem.id]}%`,
+						top: `${ghostPct}%`,
 						transform: "translateY(-50%)",
 						width: tickWidth(ghostItem.level) + 8,
 						height: 4,

package/dist/components/sidebar.d.ts

@@ -83,7 +83,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "sm" | "default" | "lg" | "rail" | null | undefined;
+  size?: "default" | "lg" | "sm" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const SidebarMenuButton: ({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
   asChild?: boolean;

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
+declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.34.2",
+  "version": "0.34.4",
   "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",
@@ -349,6 +349,10 @@
       "types": "./dist/inspector/index.d.ts",
       "import": "./dist/inspector/index.js"
     },
+    "./layout-tokens": {
+      "types": "./dist/inspector/layout-tokens.d.ts",
+      "import": "./dist/inspector/layout-tokens.js"
+    },
     "./kanban": {
       "types": "./dist/kanban/index.d.ts",
       "import": "./dist/kanban/index.js"
@@ -607,7 +611,7 @@
     "test:browser": "playwright test --config playwright.config.ts",
     "pack:check": "cd ../.. && bun scripts/check-published-exports.ts packages/ui",
     "typecheck": "bun ../../packages/scripts/src/tsc-native.ts --noEmit",
-    "lint": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --report-unused-disable-directives-severity=error --deny-warnings --type-aware packages/ui",
+    "lint": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --report-unused-disable-directives-severity=error --type-aware packages/ui",
     "lint:fix": "cd ../.. && bun --bun oxlint -c oxlint.config.ts --type-aware --fix packages/ui",
     "format": "bun ../../scripts/run-oxfmt.ts .",
     "prepack": "bun run build"
@@ -619,7 +623,7 @@
     "input-otp": "^1.5.0",
     "lucide-react": "1.41.0",
     "tailwind-merge": "^3.7.0",
-    "temporal-polyfill": "1.0.4"
+    "temporal-polyfill": "1.0.5"
   },
   "devDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",