@stll/ui 0.26.0 → 0.26.2

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

@@ -1,16 +1,16 @@
+import { Result } 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;
-const DAY_IN_MS = 864e5;
-const toUTCDate = (value) => {
+const toPlainDate = (value) => {
 	if (!ISO_DATE_PATTERN.test(value)) return null;
-	const date = /* @__PURE__ */ new Date(`${value}T00:00:00.000Z`);
-	return date.toISOString().slice(0, 10) === value ? date : null;
+	return Result.try(() => Temporal.PlainDate.from(value)).unwrapOr(null);
 };
 const differenceInCalendarDays = (later, earlier) => {
-	const laterDate = toUTCDate(later);
-	const earlierDate = toUTCDate(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");
-	return (laterDate.getTime() - earlierDate.getTime()) / DAY_IN_MS;
+	return laterDate.since(earlierDate, { largestUnit: "days" }).days;
 };
 const getResourceCalendarPlacement = ({ entry, visibleRange }) => {
 	const visibleDayCount = differenceInCalendarDays(visibleRange.endDateExclusive, visibleRange.startDate);
@@ -27,7 +27,7 @@ const getResourceCalendarPlacement = ({ entry, visibleRange }) => {
 const assertConsecutiveCalendarDates = (dates) => {
 	if (dates.length === 0) throw new RangeError("A resource calendar needs at least one date column");
 	const first = dates.at(0);
-	if (first === void 0 || toUTCDate(first) === null) throw new RangeError("Resource calendar date columns must be consecutive normalized dates");
+	if (first === void 0 || toPlainDate(first) === null) throw new RangeError("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);
@@ -35,11 +35,10 @@ const assertConsecutiveCalendarDates = (dates) => {
 	}
 };
 const nextCalendarDate = (value) => {
-	const date = toUTCDate(value);
+	const date = toPlainDate(value);
 	if (date === null) throw new RangeError("Calendar dates must use normalized YYYY-MM-DD values");
-	date.setUTCDate(date.getUTCDate() + 1);
-	const nextDate = date.toISOString().slice(0, 10);
-	if (toUTCDate(nextDate) === null) throw new RangeError("Calendar dates must have a following normalized YYYY-MM-DD value");
+	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");
 	return nextDate;
 };
 const layoutResourceCalendarEntries = (entries, visibleRange) => {

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

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

package/dist/components/date-picker-popover.js

@@ -3,17 +3,22 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { DirectionalIcon } from "./directional-icon.js";
 import { getLocaleWeekInfo, getWeekendDays } from "../lib/week.js";
-import { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth } from "./date-picker-popover.logic.js";
+import { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth, shiftCalendarDate } from "./date-picker-popover.logic.js";
 import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
 import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Temporal } from "temporal-polyfill/full";
 //#region src/components/date-picker-popover.tsx
-const toISODate = (date) => date.toISOString().slice(0, 10);
+const toISODate = (date) => date.toString();
+const toUTCDateTime = (date) => date.toZonedDateTime({
+	plainTime: Temporal.PlainTime.from("00:00"),
+	timeZone: "UTC"
+}).epochMilliseconds;
 const HYDRATION_DATE = "1970-01-01";
 const HYDRATION_LOCALE = "en";
 const noopSubscribe = (_onStoreChange) => () => void 0;
-const getLocalToday = () => localDateFromTimestamp(Date.now());
+const getLocalToday = () => localDateFromTimestamp(Temporal.Now.instant().epochMilliseconds);
 const localDateListeners = /* @__PURE__ */ new Set();
 let localDateTimeoutId;
 const notifyLocalDateListeners = () => {
@@ -24,7 +29,7 @@ const scheduleNextLocalDate = () => {
 	localDateTimeoutId = setTimeout(() => {
 		notifyLocalDateListeners();
 		if (localDateListeners.size > 0) scheduleNextLocalDate();
-	}, millisecondsUntilNextLocalDate(Date.now()));
+	}, millisecondsUntilNextLocalDate(Temporal.Now.instant().epochMilliseconds));
 };
 const refreshLocalDateEnvironment = () => {
 	notifyLocalDateListeners();
@@ -58,19 +63,21 @@ const getFirstDayOfWeek = (locale) => {
 };
 const getMonthDays = (year, month, firstDow, weekendDays, today) => {
 	const days = [];
-	const first = new Date(Date.UTC(year, month, 1));
-	const startOffset = ((first.getUTCDay() + 6) % 7 - firstDow + 7) % 7;
-	const start = new Date(first);
-	start.setUTCDate(start.getUTCDate() - startOffset);
+	const first = Temporal.PlainDate.from({
+		year,
+		month: month + 1,
+		day: 1
+	});
+	const startOffset = (first.dayOfWeek - 1 - firstDow + 7) % 7;
+	const start = first.subtract({ days: startOffset });
 	for (let i = 0; i < 42; i++) {
-		const d = new Date(start);
-		d.setUTCDate(d.getUTCDate() + i);
+		const d = start.add({ days: i });
 		const iso = toISODate(d);
 		days.push({
 			date: iso,
-			isCurrentMonth: d.getUTCMonth() === month,
+			isCurrentMonth: d.month === month + 1,
 			isToday: iso === today,
-			isWeekend: weekendDays.has(d.getUTCDay())
+			isWeekend: weekendDays.has(d.dayOfWeek % 7)
 		});
 	}
 	return days;
@@ -87,14 +94,21 @@ const getWeekdayFormatter = (locale) => {
 const getWeekdayLabels = (locale, firstDow, weekendDays) => {
 	const fmt = getWeekdayFormatter(locale);
 	return Array.from({ length: 7 }, (_, i) => {
-		const d = new Date(Date.UTC(2024, 0, 1 + (i + firstDow) % 7));
+		const d = Temporal.PlainDate.from("2024-01-01").add({ days: (i + firstDow) % 7 });
 		return {
-			isWeekend: weekendDays.has(d.getUTCDay()),
-			label: fmt.format(d)
+			isWeekend: weekendDays.has(d.dayOfWeek % 7),
+			label: fmt.format(toUTCDateTime(d))
 		};
 	});
 };
 const monthFormatters = /* @__PURE__ */ new Map();
+const dateFormatters = /* @__PURE__ */ new Map();
+const getDateFormatter = (locale, options) => {
+	const key = `${locale}:${JSON.stringify(options)}`;
+	const formatter = dateFormatters.get(key) ?? new Intl.DateTimeFormat(locale, options);
+	dateFormatters.set(key, formatter);
+	return formatter;
+};
 const getMonthFormatter = (locale, format) => {
 	const key = `${locale}:${format}`;
 	const fmt = monthFormatters.get(key) ?? new Intl.DateTimeFormat(locale, {
@@ -107,7 +121,11 @@ const getMonthFormatter = (locale, format) => {
 };
 const getMonthLabels = (locale, format = "long") => {
 	const fmt = getMonthFormatter(locale, format);
-	return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(Date.UTC(2024, i, 1))));
+	return Array.from({ length: 12 }, (_, i) => fmt.format(toUTCDateTime(Temporal.PlainDate.from({
+		year: 2024,
+		month: i + 1,
+		day: 1
+	}))));
 };
 const monthYearFormatters = /* @__PURE__ */ new Map();
 const getMonthYearFormatter = (locale) => {
@@ -120,7 +138,11 @@ const getMonthYearFormatter = (locale) => {
 	monthYearFormatters.set(locale, fmt);
 	return fmt;
 };
-const formatMonthYear = (locale, year, month) => getMonthYearFormatter(locale).format(new Date(Date.UTC(year, month, 1)));
+const formatMonthYear = (locale, year, month) => getMonthYearFormatter(locale).format(toUTCDateTime(Temporal.PlainDate.from({
+	year,
+	month: month + 1,
+	day: 1
+})));
 const relativeTimeFormatters = /* @__PURE__ */ new Map();
 const getRelativeTimeFormatter = (locale) => {
 	const fmt = relativeTimeFormatters.get(locale) ?? new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
@@ -134,14 +156,10 @@ const deriveTodayLabel = (locale) => {
 };
 const normalizeDate = (v) => {
 	if (v === null || v === void 0) return "";
-	if (v instanceof Date) return v.toISOString().slice(0, 10);
+	if (v instanceof Date) return Temporal.Instant.fromEpochMilliseconds(v.getTime()).toZonedDateTimeISO("UTC").toPlainDate().toString();
 	return v.length >= 10 ? v.slice(0, 10) : v;
 };
-const addDays = (iso, n) => {
-	const d = /* @__PURE__ */ new Date(`${iso}T00:00:00Z`);
-	d.setUTCDate(d.getUTCDate() + n);
-	return toISODate(d);
-};
+const addDays = (iso, n) => Temporal.PlainDate.from(iso).add({ days: n }).toString();
 const isBefore = (a, b) => a < b;
 const isAfter = (a, b) => a > b;
 /** Round down to the start of a decade (e.g. 2026 → 2020). */
@@ -186,22 +204,22 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		maxDate,
 		isDateDisabled
 	]);
-	const displayLabel = value ? (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).toLocaleDateString(locale, {
+	const displayLabel = value ? getDateFormatter(locale, {
 		month: "short",
 		day: "numeric",
 		year: "numeric",
 		calendar: "gregory",
 		timeZone: "UTC"
-	}) : placeholderLabel ?? "—";
-	const formatDayLabel = useCallback((iso) => (/* @__PURE__ */ new Date(`${iso}T00:00:00Z`)).toLocaleDateString(locale, {
+	}).format(toUTCDateTime(Temporal.PlainDate.from(value))) : placeholderLabel ?? "—";
+	const formatDayLabel = useCallback((iso) => getDateFormatter(locale, {
 		weekday: "long",
 		month: "long",
 		day: "numeric",
 		year: "numeric",
 		calendar: "gregory",
 		timeZone: "UTC"
-	}), [locale]);
-	const handleGridKeyDown = useCallback((e) => {
+	}).format(toUTCDateTime(Temporal.PlainDate.from(iso))), [locale]);
+	const handleGridKeyDown = (e) => {
 		const firstDay = days.at(0);
 		if (!firstDay) return;
 		const current = focusedDate || value || firstDay.date;
@@ -212,22 +230,14 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		else if (e.key === "ArrowDown") next = addDays(current, 7);
 		else if (e.key === "ArrowUp") next = addDays(current, -7);
 		else if (e.key === "Home") {
-			const offset = (((/* @__PURE__ */ new Date(`${current}T00:00:00Z`)).getUTCDay() + 6) % 7 - firstDow + 7) % 7;
+			const offset = (Temporal.PlainDate.from(current).dayOfWeek - 1 - firstDow + 7) % 7;
 			next = addDays(current, -offset);
 		} else if (e.key === "End") {
-			const offset = (((/* @__PURE__ */ new Date(`${current}T00:00:00Z`)).getUTCDay() + 6) % 7 - firstDow + 7) % 7;
+			const offset = (Temporal.PlainDate.from(current).dayOfWeek - 1 - firstDow + 7) % 7;
 			next = addDays(current, 6 - offset);
-		} else if (e.key === "PageUp") {
-			const d = /* @__PURE__ */ new Date(`${current}T00:00:00Z`);
-			if (e.shiftKey) d.setUTCFullYear(d.getUTCFullYear() - 1);
-			else d.setUTCMonth(d.getUTCMonth() - 1);
-			next = toISODate(d);
-		} else if (e.key === "PageDown") {
-			const d = /* @__PURE__ */ new Date(`${current}T00:00:00Z`);
-			if (e.shiftKey) d.setUTCFullYear(d.getUTCFullYear() + 1);
-			else d.setUTCMonth(d.getUTCMonth() + 1);
-			next = toISODate(d);
-		} else {
+		} else if (e.key === "PageUp") next = shiftCalendarDate(current, e.shiftKey ? { years: -1 } : { months: -1 });
+		else if (e.key === "PageDown") next = shiftCalendarDate(current, e.shiftKey ? { years: 1 } : { months: 1 });
+		else {
 			if (e.key === "Enter" || e.key === " ") {
 				e.preventDefault();
 				if (!isDayDisabled(current)) onChange(current);
@@ -237,9 +247,9 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		e.preventDefault();
 		if (next) {
 			setFocusedDate(next);
-			const nextDate = /* @__PURE__ */ new Date(`${next}T00:00:00Z`);
-			const nextMonth = nextDate.getUTCMonth();
-			const nextYear = nextDate.getUTCFullYear();
+			const nextDate = Temporal.PlainDate.from(next);
+			const nextMonth = nextDate.month - 1;
+			const nextYear = nextDate.year;
 			if (nextMonth !== viewMonth || nextYear !== viewYear) setViewMonthOverride({
 				month: nextMonth,
 				year: nextYear
@@ -248,17 +258,7 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 				(gridRef.current?.querySelector(`[data-date="${next}"]`))?.focus();
 			});
 		}
-	}, [
-		focusedDate,
-		value,
-		days,
-		firstDow,
-		viewMonth,
-		viewYear,
-		isDayDisabled,
-		onChange,
-		setViewMonthOverride
-	]);
+	};
 	const handlePrev = () => {
 		if (view === "days") if (viewMonth === 0) setViewMonthOverride({
 			month: 11,
@@ -316,8 +316,8 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 		setDecadeBaseOverride(decadeStart(year));
 		setView("months");
 	};
-	const selectedYear = value ? (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).getUTCFullYear() : null;
-	const selectedMonth = value ? (/* @__PURE__ */ new Date(`${value}T00:00:00Z`)).getUTCMonth() : null;
+	const selectedYear = value ? Temporal.PlainDate.from(value).year : null;
+	const selectedMonth = value ? Temporal.PlainDate.from(value).month - 1 : null;
 	const handleOpenChange = (open) => {
 		onOpenChange?.(open);
 		if (!open) {
@@ -451,10 +451,10 @@ const DatePickerPopoverContent = ({ id, labelledBy, value: rawValue, onChange, l
 						children: [/* @__PURE__ */ jsx(Button, {
 							className: "flex-1",
 							onClick: () => {
-								const todayDate = /* @__PURE__ */ new Date(`${today}T00:00:00Z`);
+								const todayDate = Temporal.PlainDate.from(today);
 								setViewMonthOverride({
-									month: todayDate.getUTCMonth(),
-									year: todayDate.getUTCFullYear()
+									month: todayDate.month - 1,
+									year: todayDate.year
 								});
 								setView("days");
 							},
@@ -487,9 +487,9 @@ const DatePickerPopover = (props) => {
 const MONTHS_PER_ROW = 3;
 const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, today }) => {
 	const labels = useMemo(() => getMonthLabels(locale, "short"), [locale]);
-	const now = /* @__PURE__ */ new Date(`${today}T00:00:00Z`);
-	const todayMonth = now.getUTCMonth();
-	const todayYear = now.getUTCFullYear();
+	const now = Temporal.PlainDate.from(today);
+	const todayMonth = now.month - 1;
+	const todayYear = now.year;
 	const rows = [];
 	for (let r = 0; r < 12; r += MONTHS_PER_ROW) rows.push(Array.from({ length: MONTHS_PER_ROW }, (_, c) => r + c));
 	return /* @__PURE__ */ jsx("div", {
@@ -518,7 +518,7 @@ const MonthGrid = ({ locale, viewYear, currentMonth, currentYear, onSelect, toda
 };
 const YEARS_PER_ROW = 3;
 const YearGrid = ({ decadeBase, currentYear, onSelect, today }) => {
-	const todayYear = (/* @__PURE__ */ new Date(`${today}T00:00:00Z`)).getUTCFullYear();
+	const todayYear = Temporal.PlainDate.from(today).year;
 	const startYear = decadeBase - 1;
 	const rows = [];
 	for (let r = 0; r < DECADE_SIZE; r += YEARS_PER_ROW) rows.push(Array.from({ length: Math.min(YEARS_PER_ROW, DECADE_SIZE - r) }, (_, c) => r + c));

package/dist/components/date-picker-popover.logic.d.ts

@@ -9,6 +9,10 @@ declare const resolveCalendarViewMonth: ({ override, today, value }: {
   today: string;
   value: string;
 }) => CalendarMonth;
+declare const shiftCalendarDate: (date: string, options: {
+  months?: number;
+  years?: number;
+}) => string;
 declare const millisecondsUntilNextLocalDate: (timestamp: number) => number;
 //#endregion
-export { CalendarMonth, localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth };
+export { CalendarMonth, localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth, shiftCalendarDate };

package/dist/components/date-picker-popover.logic.js

@@ -1,26 +1,31 @@
+import { Temporal } from "temporal-polyfill/full";
 //#region src/components/date-picker-popover.logic.ts
 const DATE_ROLLOVER_EPSILON_MS = 50;
 const padDatePart = (value) => value.toString().padStart(2, "0");
 const localDateFromTimestamp = (timestamp) => {
-	const current = new Date(timestamp);
+	const current = Temporal.Instant.fromEpochMilliseconds(timestamp).toZonedDateTimeISO(Temporal.Now.timeZoneId());
 	return [
-		current.getFullYear(),
-		padDatePart(current.getMonth() + 1),
-		padDatePart(current.getDate())
+		current.year,
+		padDatePart(current.month),
+		padDatePart(current.day)
 	].join("-");
 };
 const calendarMonthFromDate = (date) => {
-	const current = /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
+	const current = Temporal.PlainDate.from(date);
 	return {
-		month: current.getUTCMonth(),
-		year: current.getUTCFullYear()
+		month: current.month - 1,
+		year: current.year
 	};
 };
 const resolveCalendarViewMonth = ({ override, today, value }) => override ?? calendarMonthFromDate(value || today);
+const shiftCalendarDate = (date, options) => Temporal.PlainDate.from(date).add(options).toString();
 const millisecondsUntilNextLocalDate = (timestamp) => {
-	const current = new Date(timestamp);
-	const nextLocalDate = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
-	return Math.max(0, nextLocalDate.getTime() - timestamp) + DATE_ROLLOVER_EPSILON_MS;
+	const current = Temporal.Instant.fromEpochMilliseconds(timestamp).toZonedDateTimeISO(Temporal.Now.timeZoneId());
+	const nextLocalDate = current.toPlainDate().add({ days: 1 }).toZonedDateTime({
+		plainTime: Temporal.PlainTime.from("00:00"),
+		timeZone: current.timeZoneId
+	});
+	return Math.max(0, nextLocalDate.epochMilliseconds - timestamp) + DATE_ROLLOVER_EPSILON_MS;
 };
 //#endregion
-export { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth };
+export { localDateFromTimestamp, millisecondsUntilNextLocalDate, resolveCalendarViewMonth, shiftCalendarDate };

package/dist/components/outline-rail.js

@@ -3,6 +3,7 @@ import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Temporal } from "temporal-polyfill/full";
 //#region src/components/outline-rail.tsx
 /**
 * Outline rail — the shared right-edge navigation rail.
@@ -153,7 +154,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		if (!container || items.length === 0) return;
 		let raf = 0;
 		const compute = () => {
-			if (Date.now() < manualLockUntil.current || container.scrollHeight <= 0) return;
+			if (Temporal.Now.instant().epochMilliseconds < manualLockUntil.current || container.scrollHeight <= 0) return;
 			const centrePct = (container.scrollTop + container.clientHeight / 2) / container.scrollHeight * 100;
 			let next = null;
 			for (const item of items) {
@@ -197,7 +198,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		if (!container) return;
 		if (activeId === void 0) {
 			setDerivedActive(id);
-			manualLockUntil.current = Date.now() + 900;
+			manualLockUntil.current = Temporal.Now.instant().epochMilliseconds + 900;
 		}
 		onJumpRef.current(id, container);
 	}, [activeId, scrollContainerRef]);

package/dist/inspector/chrome.js

@@ -45,7 +45,7 @@ const InspectorRailCell = ({ className, ...props }) => /* @__PURE__ */ jsx("div"
 });
 /** Scroll owner for rail tabs and other middle actions. */
 const InspectorRailContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("scrollbar-subtle flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto overscroll-contain", className),
+	className: cn("flex min-h-0 flex-1 scrollbar-none flex-col overflow-x-hidden overflow-y-auto overscroll-contain", className),
 	"data-slot": "inspector-rail-content",
 	...props
 });

package/dist/inspector/dock.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import "./pane-width.js";
+import { EllipsisIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inspector/dock.tsx
 const InspectorDock = ({ children, className, onResetWidth, rail, resizeHandleLabel, resizeHandleProps, showPaneContent, width }) => {
@@ -18,14 +19,23 @@ const InspectorDock = ({ children, className, onResetWidth, rail, resizeHandleLa
 			className: "fixed inset-y-0 end-0 z-10 hidden h-svh md:flex",
 			"data-slot": "inspector-dock-pane",
 			style: { width: widthPx },
-			children: [showPaneContent && /* @__PURE__ */ jsx("div", {
+			children: [showPaneContent && /* @__PURE__ */ jsxs("div", {
 				"aria-label": resizeHandleLabel,
-				className: "hover:bg-border active:bg-border focus-visible:bg-primary focus-visible:outline-primary absolute inset-y-0 -start-px z-20 flex w-1 cursor-col-resize items-center justify-center border-s focus-visible:outline-2",
+				className: "group focus-visible:outline-primary absolute inset-y-0 -start-1.5 z-20 flex w-3 cursor-col-resize items-center justify-center focus-visible:outline-2",
 				"data-slot": "inspector-resize-handle",
 				role: "separator",
 				...resizeHandleProps,
 				tabIndex: 0,
-				onDoubleClick: onResetWidth
+				onDoubleClick: onResetWidth,
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "bg-border group-hover:bg-primary group-active:bg-primary absolute inset-y-0 start-1/2 w-px -translate-x-1/2"
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "bg-background/80 text-foreground-placeholder ring-border/60 group-hover:bg-accent group-hover:text-foreground group-focus-visible:bg-accent group-focus-visible:text-foreground relative flex h-5 w-3 items-center justify-center rounded-full opacity-0 shadow-xs ring-1 backdrop-blur-sm transition-[color,background-color,opacity] group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100",
+					"data-slot": "inspector-resize-grip",
+					children: /* @__PURE__ */ jsx(EllipsisIcon, { className: "size-3 rotate-90" })
+				})]
 			}), showPaneContent || rail === void 0 ? /* @__PURE__ */ jsxs("div", {
 				className: "bg-sidebar flex h-full w-full flex-row",
 				children: [rail, /* @__PURE__ */ jsx("div", {

package/dist/lib/week.d.ts

@@ -10,13 +10,13 @@
  */
 declare const getLocaleWeekInfo: (locale: string) => Intl.WeekInfo | undefined;
 /**
- * First weekday as a `Date.getDay()` value (0 = Sunday … 6 = Saturday): Monday
+ * First weekday as a day-of-week value (0 = Sunday … 6 = Saturday): Monday
  * across most of Europe, Sunday in the US, Saturday across much of the Gulf.
  * Falls back to Monday when the runtime lacks week info.
  */
 declare const getFirstWeekday: (locale: string) => number;
 /**
- * Weekend weekdays as `Date.getDay()` values (0 = Sunday … 6 = Saturday):
+ * Weekend weekdays as day-of-week values (0 = Sunday … 6 = Saturday):
  * Saturday/Sunday across the West, Friday/Saturday across much of the Gulf.
  * Falls back to Saturday/Sunday when the runtime lacks week info.
  */

package/dist/lib/week.js

@@ -18,7 +18,7 @@ const getLocaleWeekInfo = (locale) => {
 	}
 };
 /**
-* First weekday as a `Date.getDay()` value (0 = Sunday … 6 = Saturday): Monday
+* First weekday as a day-of-week value (0 = Sunday … 6 = Saturday): Monday
 * across most of Europe, Sunday in the US, Saturday across much of the Gulf.
 * Falls back to Monday when the runtime lacks week info.
 */
@@ -27,7 +27,7 @@ const getFirstWeekday = (locale) => {
 	return typeof firstDay === "number" ? firstDay % 7 : 1;
 };
 /**
-* Weekend weekdays as `Date.getDay()` values (0 = Sunday … 6 = Saturday):
+* Weekend weekdays as day-of-week values (0 = Sunday … 6 = Saturday):
 * Saturday/Sunday across the West, Friday/Saturday across much of the Gulf.
 * Falls back to Saturday/Sunday when the runtime lacks week info.
 */

package/dist/review/review-comment-card.js

@@ -4,6 +4,7 @@ import { BidiText } from "../components/bidi-text.js";
 import { ReviewAuthorAvatar } from "./review-author-avatar.js";
 import { CheckIcon, RotateCcwIcon, Trash2Icon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Temporal } from "temporal-polyfill/full";
 //#region src/review/review-comment-card.tsx
 /** One comment on a reviewed surface: who wrote it, when, what it says, what
 *  it points at, and the two things a reader can do to it. */
@@ -70,7 +71,7 @@ const ReviewCommentCard = ({ author, timestamp, formattedTime, body, anchorText,
 *  yields no attribute rather than throwing on `toISOString`. */
 const toIsoInstant = (timestamp) => {
 	if (typeof timestamp === "string") return timestamp;
-	return Number.isNaN(timestamp.getTime()) ? void 0 : timestamp.toISOString();
+	return Number.isNaN(timestamp.getTime()) ? void 0 : Temporal.Instant.fromEpochMilliseconds(timestamp.getTime()).toString({ fractionalSecondDigits: 3 });
 };
 //#endregion
 export { ReviewCommentCard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/ui",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "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",
@@ -594,7 +594,8 @@
     "clsx": "^2.1.1",
     "input-otp": "^1.5.0",
     "lucide-react": "1.39.0",
-    "tailwind-merge": "^3.6.0"
+    "tailwind-merge": "^3.6.0",
+    "temporal-polyfill": "1.0.4"
   },
   "devDependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
@@ -602,7 +603,7 @@
     "@base-ui/react": "1.7.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@playwright/test": "^1.62.0",
+    "@playwright/test": "^1.63.0",
     "@stll/typescript-config": "0.0.0",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/react-virtual": "^3.14.10",