@parallelworks/ui 0.18.0 → 0.19.0

package/dist/chunks/{Provider-Ghua9PkN.js → Provider-CDYurraE.js}

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useCallback, useContext, useEffect, useMemo } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Provider.tsx
@@ -85,7 +85,7 @@ var DEFAULTS = {
 			timeRangeActive: "Time range active",
 			timeRangeOn: "ON",
 			filterByTimeRange: "Filter by time range",
-			timeRangeHelp: "Times are interpreted in your local timezone. Applying a range re-queries the journal on the cluster and replaces what is loaded. Setting an end time stops live tailing until you clear it.",
+			timeRangeHelp: "Times are interpreted in your local timezone. Applying a range re-queries the log source and replaces what is loaded. Setting an end time stops live tailing until you clear it.",
 			timeRangeFrom: "From",
 			timeRangeTo: "To",
 			apply: "Apply",
@@ -188,7 +188,7 @@ var DEFAULTS = {
 				},
 				propagating: {
 					title: "Propagating CORS rules",
-					description: "Azure is rolling out the new rules to its storage endpoints. This usually completes within a minute.",
+					description: "The storage provider is rolling out the new rules to its endpoints. This usually completes within a minute.",
 					stages: {
 						submitted: "Submitted",
 						propagating: "Propagating",
@@ -246,6 +246,7 @@ var DEFAULTS = {
 				collapse: "Collapse",
 				upload: "Upload",
 				download: "Download",
+				downloadFromBrowser: "From browser",
 				access: "Access",
 				manageAccess: "Manage Access",
 				delete: "Delete",
@@ -319,11 +320,7 @@ var DEFAULTS = {
 		form: {
 			invalidDuration: "Enter a duration as DD-HH:MM:SS or HH:MM:SS.",
 			durationOutOfRange: (min, max) => `Must be between ${min} and ${max}.`,
-			durationBelowMin: (min) => `Must be at least ${min}.`,
-			readOnly: "Read-only",
-			readWrite: "Read-write",
-			readOnlyDescription: "Read-only mounts can list and download objects, but cannot upload, modify, or delete them.",
-			readOnlyForced: "Your access to this bucket is read-only, so this mount cannot be writable."
+			durationBelowMin: (min) => `Must be at least ${min}.`
 		},
 		time: {
 			now: "now",
@@ -392,8 +389,8 @@ var DEFAULTS = {
 					className: "font-medium",
 					children: startTime
 				}),
+				" to",
 				" ",
-				"to ",
 				/* @__PURE__ */ jsx("span", {
 					className: "font-medium",
 					children: endTime
@@ -403,8 +400,9 @@ var DEFAULTS = {
 	},
 	navigation: {
 		goTo: (to) => window.location.assign(to),
-		toWorkflow: () => {},
-		toMarketItem: () => {},
+		openStepSource: (_uses, sourceUrl) => {
+			if (sourceUrl) window.open(sourceUrl, "_blank");
+		},
 		openExternal: (href) => window.open(href, "_blank")
 	},
 	data: {
@@ -426,15 +424,46 @@ function useNavigation() {
 function useSlots() {
 	return useContext(UIContext).slots;
 }
-function useWorkflowJsonResolver() {
-	return useContext(UIContext).data.resolveWorkflowJson;
+var loadedEngines = /* @__PURE__ */ new WeakMap();
+function loadEngine(load) {
+	let entry = loadedEngines.get(load);
+	if (!entry) {
+		const created = { promise: load() };
+		created.promise.then((engine) => {
+			created.engine = engine;
+		});
+		loadedEngines.set(load, created);
+		entry = created;
+	}
+	return entry;
+}
+function resolveEngine(source) {
+	if (typeof source !== "function") return source;
+	const entry = loadEngine(source);
+	return entry.engine ?? use(entry.promise);
+}
+/** The engine when one is provided and `enabled`; suspends while a loader resolves. */
+function useOptionalWorkflowEngine(enabled = true) {
+	const source = useContext(UIContext).engine;
+	if (!enabled || !source) return;
+	return resolveEngine(source);
+}
+function useWorkflowEngine() {
+	const source = useContext(UIContext).engine;
+	if (!source) throw new Error("Workflow forms and graphs need a UIProvider with an engine.");
+	return resolveEngine(source);
+}
+/** Resolves the engine without suspending, for async callers such as editor completions. */
+function useWorkflowEngineLoader() {
+	const source = useContext(UIContext).engine;
+	return useCallback(async () => {
+		if (!source) return;
+		return typeof source === "function" ? loadEngine(source).promise : source;
+	}, [source]);
 }
 function useProvisionCorsRules() {
 	return useContext(UIContext).data.provisionCorsRules;
 }
-function useRepoSuggestions() {
-	return useContext(UIContext).data.repoSuggestions;
-}
 function useRunFile(slug, path, options) {
 	const { useRunFile: boundUseRunFile } = useContext(UIContext).data;
 	return boundUseRunFile(slug, path, options);
@@ -443,7 +472,10 @@ function usePersistedState(key, defaultValue) {
 	const { usePersistedState: boundUsePersistedState } = useContext(UIContext).data;
 	return boundUsePersistedState(key, defaultValue);
 }
-function UIProvider({ notify, strings, navigation, data, slots, children }) {
+function UIProvider({ notify, strings, navigation, data, slots, engine, children }) {
+	useEffect(() => {
+		if (typeof engine === "function") loadEngine(engine);
+	}, [engine]);
 	const value = useMemo(() => ({
 		notify: {
 			...DEFAULTS.notify,
@@ -500,13 +532,15 @@ function UIProvider({ notify, strings, navigation, data, slots, children }) {
 			...DEFAULTS.data,
 			...data
 		},
-		slots: slots ?? DEFAULTS.slots
+		slots: slots ?? DEFAULTS.slots,
+		engine
 	}), [
 		notify,
 		strings,
 		navigation,
 		data,
-		slots
+		slots,
+		engine
 	]);
 	return /* @__PURE__ */ jsx(UIContext.Provider, {
 		value,
@@ -514,4 +548,4 @@ function UIProvider({ notify, strings, navigation, data, slots, children }) {
 	});
 }
 //#endregion
-export { usePersistedState as a, useRunFile as c, useWorkflowJsonResolver as d, useNotify as i, useSlots as l, useLink as n, useProvisionCorsRules as o, useNavigation as r, useRepoSuggestions as s, UIProvider as t, useStrings as u };
+export { useOptionalWorkflowEngine as a, useRunFile as c, useWorkflowEngine as d, useWorkflowEngineLoader as f, useNotify as i, useSlots as l, useLink as n, usePersistedState as o, useNavigation as r, useProvisionCorsRules as s, UIProvider as t, useStrings as u };

package/dist/chunks/{SwitchToggle-CHPP8uZQ.js → SwitchToggle-DShNdcao.js}

@@ -1,22 +1,91 @@
-import { u as useStrings } from "./Provider-Ghua9PkN.js";
+import { u as useStrings } from "./Provider-CDYurraE.js";
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { a as truncationTooltipProps, n as TOOLTIP_ID } from "./Tooltip-Crxo_eU_.js";
+import { a as truncationTooltipProps, n as TOOLTIP_ID, o as keyedByContent } from "./Tooltip-K5HJr4_p.js";
 import { a as filterOption, c as isCategory, i as DropdownCaret, l as isOption, o as flattenDisplayOptions, s as flattenOptions, u as toggleSetMember } from "./StatusBadge-C1Blx_cW.js";
+import { t as focusOnMount } from "./focus-D_iZJTW1.js";
+import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Switch, Transition } from "@headlessui/react";
 import cx from "classnames";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
-import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Switch, Transition } from "@headlessui/react";
+import AnimateHeight from "react-animate-height";
 import deepEqual from "fast-deep-equal";
 import { usePopper } from "react-popper";
-import AnimateHeight from "react-animate-height";
+//#region src/components/CollapsiblePanel.tsx
+var noop = () => {};
+function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, titleAction, className }) {
+	const toggleOpen = useCallback(() => {
+		if (onClick) onClick();
+		setOpen?.((open) => !open);
+	}, [setOpen, onClick]);
+	const contentId = React.useId();
+	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
+	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
+		duration: 300,
+		height: open ? "auto" : 0,
+		children
+	}) })] }) : /* @__PURE__ */ jsxs("div", {
+		className: cx("border border-solid rounded-2xl border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-panel) mb-1 w-full", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(!open && "text-(--theme-muted-text-color)", "w-full flex items-center transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-expanded": !!open,
+					"aria-controls": contentId,
+					className: cx("flex items-center text-left cursor-pointer", !titleAction && "w-full"),
+					onClick: toggleOpen,
+					children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
+						className: "px-2 font-bold select-none",
+						children: title?.toString()
+					})]
+				}),
+				titleAction,
+				/* @__PURE__ */ jsx("div", {
+					className: "ml-auto",
+					children: customizedButton
+				})
+			]
+		}), /* @__PURE__ */ jsx(AnimateHeight, {
+			id: contentId,
+			duration: 300,
+			height: open ? "auto" : 0,
+			children
+		})]
+	});
+}
+function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null }) {
+	const [open, setOpen] = React.useState(initialState);
+	const passTitle = typeof title === "function" ? title(open, setOpen) : title;
+	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
+		title: passTitle,
+		open,
+		setOpen,
+		onClick,
+		wrapperElement,
+		className,
+		customizedButton,
+		children
+	});
+}
+function MaybeCollapsible({ className, initialState, children, title, customizedButton, collapsible }) {
+	if (collapsible) return /* @__PURE__ */ jsx(UncontrolledCollapsiblePanel, {
+		className,
+		initialState,
+		title,
+		customizedButton,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children
+	});
+}
+//#endregion
 //#region src/components/Dropdown.tsx
 var defaultCollapsedLabel = (count) => `${count} more`;
-function isResourceValue(value) {
-	if (typeof value !== "object" || value === null || !("name" in value)) return false;
-	if (typeof value.name !== "string") return false;
-	if ("$type" in value && value.$type === "computeResource") return true;
-	return "type" in value && (value.type === "computeResource" || value.type === "bucket");
+function isNamedValue(value) {
+	return typeof value === "object" && value !== null && "name" in value && typeof value.name === "string";
 }
 var checkEquals = (val, opt) => {
 	if (typeof val === "object" && !Array.isArray(val)) return deepEqual(val, opt);
@@ -32,20 +101,22 @@ function getOptionFromValue(value, options) {
 		else if (isCategory(option)) return option.options.find((opt) => checkEquals(value, opt.value));
 		else return checkEquals(value, option.value);
 	});
-	if (found) if (typeof found === "string") return {
-		label: found,
-		value: found
-	};
-	else if (isCategory(found)) return found.options.find((opt) => checkEquals(value, opt.value)) || {
-		label: JSON.stringify(value),
-		value
-	};
-	else return found;
-	const isResourceObject = isResourceValue(value);
-	const fallbackLabel = typeof value === "string" ? value : isResourceObject ? value.name : JSON.stringify(value);
+	if (found) {
+		if (typeof found === "string") return {
+			label: found,
+			value: found
+		};
+		else if (isCategory(found)) return found.options.find((opt) => checkEquals(value, opt.value)) || {
+			label: JSON.stringify(value),
+			value
+		};
+		else return found;
+	}
+	const isNamedObject = isNamedValue(value);
+	const fallbackLabel = typeof value === "string" ? value : isNamedObject ? value.name : JSON.stringify(value);
 	return {
 		label: fallbackLabel,
-		value: isResourceObject ? value : fallbackLabel
+		value: isNamedObject ? value : fallbackLabel
 	};
 }
 function Dropdown(props) {
@@ -56,29 +127,30 @@ function Dropdown(props) {
 	const wrapperOnchange = (value) => {
 		if (onChange) onChange(value?.value);
 	};
+	const transformedOptions = useMemo(() => {
+		if (!options || options.length === 0) return [];
+		return options.map((item) => {
+			if (isCategory(item)) return {
+				...item,
+				options: item.options.map((opt) => {
+					if (typeof opt === "string") return {
+						label: opt,
+						value: opt
+					};
+					return opt;
+				})
+			};
+			else if (typeof item === "string") return {
+				label: item,
+				value: item
+			};
+			return item;
+		});
+	}, [options]);
 	return /* @__PURE__ */ jsx(DropdownHelper, {
 		value: val,
 		onChange: wrapperOnchange,
-		options: useMemo(() => {
-			if (!options || options.length === 0) return [];
-			return options.map((item) => {
-				if (isCategory(item)) return {
-					...item,
-					options: item.options.map((opt) => {
-						if (typeof opt === "string") return {
-							label: opt,
-							value: opt
-						};
-						return opt;
-					})
-				};
-				else if (typeof item === "string") return {
-					label: item,
-					value: item
-				};
-				return item;
-			});
-		}, [options]),
+		options: transformedOptions,
 		...others
 	});
 }
@@ -180,19 +252,20 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 			if (reference instanceof HTMLElement) popper.style.width = `${reference.offsetWidth}px`;
 		}
 	}), []);
+	const popperModifiers = useMemo(() => boundaryEl ? [
+		sameWidthModifier,
+		{
+			name: "flip",
+			options: { boundary: boundaryEl }
+		},
+		{
+			name: "preventOverflow",
+			options: { boundary: boundaryEl }
+		}
+	] : [sameWidthModifier], [boundaryEl, sameWidthModifier]);
 	const { styles, attributes } = usePopper(referenceElement, popperElement, {
 		strategy: "fixed",
-		modifiers: useMemo(() => boundaryEl ? [
-			sameWidthModifier,
-			{
-				name: "flip",
-				options: { boundary: boundaryEl }
-			},
-			{
-				name: "preventOverflow",
-				options: { boundary: boundaryEl }
-			}
-		] : [sameWidthModifier], [boundaryEl, sameWidthModifier])
+		modifiers: popperModifiers
 	});
 	const debounceRef = useRef(null);
 	const buttonRef = useRef(null);
@@ -202,7 +275,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 	useEffect(() => {
 		if (!selectedCategory || checkEquals(lastAutoExpandedValue.current, value.value)) return;
 		lastAutoExpandedValue.current = value.value;
-		setExpandedCategories((prev) => prev.size === 1 && prev.has(selectedCategory) ? prev : new Set([selectedCategory]));
+		setExpandedCategories((prev) => prev.size === 1 && prev.has(selectedCategory) ? prev : /* @__PURE__ */ new Set([selectedCategory]));
 	}, [selectedCategory, value]);
 	const toggleCategory = (category) => setExpandedCategories((prev) => toggleSetMember(prev, category));
 	const flushCustomValue = useCallback((val) => {
@@ -377,7 +450,7 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 			children: /* @__PURE__ */ jsx("input", {
 				autoComplete: "off",
 				type: "search",
-				autoFocus: true,
+				ref: focusOnMount,
 				onChange: (e) => setFilter(e.target.value),
 				value: filter,
 				className: "w-full p-1 theme-input",
@@ -394,7 +467,7 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 			})
 		}), /* @__PURE__ */ jsx("div", {
 			className: "overflow-auto max-h-60 theme-panel",
-			children: optionsToShow.length > 0 ? optionsToShow.map((option, index) => /* @__PURE__ */ jsx(ListboxOption, {
+			children: optionsToShow.length > 0 ? keyedByContent(optionsToShow, (o) => String(o.value)).map(({ key, item: option }) => /* @__PURE__ */ jsx(ListboxOption, {
 				className: "relative hover:theme-hover select-none pl-2 pr-4",
 				value: option.value,
 				children: /* @__PURE__ */ jsx("div", {
@@ -420,8 +493,8 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 							})
 						]
 					})
-				}, index)
-			}, index)) : /* @__PURE__ */ jsx("div", {
+				})
+			}, key)) : /* @__PURE__ */ jsx("div", {
 				className: "w-full flex flex-row",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "w-3/4 py-2 pl-2 capitalize flex items-center",
@@ -565,19 +638,19 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 							value: query,
 							onChange: (e) => setQuery(e.target.value),
 							onKeyDown: (e) => e.stopPropagation(),
-							autoFocus: true
+							ref: focusOnMount
 						})
 					}), /* @__PURE__ */ jsx("div", {
 						className: "py-1",
 						children: isEmpty ? /* @__PURE__ */ jsx("div", {
 							className: "px-4 py-2 text-sm theme-muted-text",
 							children: strings.dropdown.noOptionsFound
-						}) : filteredOptions.map((opt, index) => {
+						}) : keyedByContent(filteredOptions, (o) => isCategory(o) ? `category-${o.category ?? "uncat"}` : `option-${String(o.value)}`).map(({ key, item: opt }) => {
 							if (isCategory(opt)) return /* @__PURE__ */ jsx("li", {
 								role: "presentation",
 								className: "px-4 py-2 text-sm font-bold theme-muted-text",
 								children: opt.category
-							}, `category-${opt.category ?? "uncat"}-${index}`);
+							}, key);
 							const option = opt;
 							return /* @__PURE__ */ jsx(ComboboxOption, {
 								value: option.value,
@@ -612,7 +685,7 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 										})
 									]
 								})
-							}, `option-${String(option.value)}`);
+							}, key);
 						})
 					})]
 				})
@@ -621,76 +694,6 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 	});
 }
 //#endregion
-//#region src/components/CollapsiblePanel.tsx
-var noop = () => {};
-function ControlledCollapsiblePanel({ title = "", children, open, setOpen, onClick = noop, wrapperElement, customizedButton = null, titleAction, className }) {
-	const toggleOpen = useCallback(() => {
-		if (onClick) onClick();
-		setOpen?.((open) => !open);
-	}, [setOpen, onClick]);
-	const contentId = React.useId();
-	const Wrapper = wrapperElement ? wrapperElement : React.Fragment;
-	return React.isValidElement(title) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [title, /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(AnimateHeight, {
-		duration: 300,
-		height: open ? "auto" : 0,
-		children
-	}) })] }) : /* @__PURE__ */ jsxs("div", {
-		className: cx("border border-solid rounded-2xl border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-panel) mb-1 w-full", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx(!open && "text-(--theme-muted-text-color)", "w-full flex items-center transform ease-in transition text-sm py-3 px-2 cursor-pointer"),
-			children: [
-				/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					"aria-expanded": !!open,
-					"aria-controls": contentId,
-					className: cx("flex items-center text-left cursor-pointer", !titleAction && "w-full"),
-					onClick: toggleOpen,
-					children: [/* @__PURE__ */ jsx(AngleRightIcon, { className: cx(open && "transform rotate-90", "px-1 ml-1 text-[1.25rem] transition ease-in") }), /* @__PURE__ */ jsx("span", {
-						className: "px-2 font-bold select-none",
-						children: title?.toString()
-					})]
-				}),
-				titleAction,
-				/* @__PURE__ */ jsx("div", {
-					className: "ml-auto",
-					children: customizedButton
-				})
-			]
-		}), /* @__PURE__ */ jsx(AnimateHeight, {
-			id: contentId,
-			duration: 300,
-			height: open ? "auto" : 0,
-			children
-		})]
-	});
-}
-function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState = true, className, customizedButton = null }) {
-	const [open, setOpen] = React.useState(initialState);
-	return /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
-		title: typeof title === "function" ? title(open, setOpen) : title,
-		open,
-		setOpen,
-		onClick,
-		wrapperElement,
-		className,
-		customizedButton,
-		children
-	});
-}
-function MaybeCollapsible({ className, initialState, children, title, customizedButton, collapsible }) {
-	if (collapsible) return /* @__PURE__ */ jsx(UncontrolledCollapsiblePanel, {
-		className,
-		initialState,
-		title,
-		customizedButton,
-		children
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className,
-		children
-	});
-}
-//#endregion
 //#region src/components/SectionHeader.tsx
 function SectionHeader({ children, className = "", size = "md" }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -752,4 +755,4 @@ function SwitchToggle({ onChange, id, "aria-describedby": describedBy, value = v
 	});
 }
 //#endregion
-export { UncontrolledCollapsiblePanel as a, Dropdown as c, MaybeCollapsible as i, SectionHeader as n, MultiSelectDropdown as o, ControlledCollapsiblePanel as r, CustomListbox as s, SwitchToggle as t };
+export { Dropdown as a, UncontrolledCollapsiblePanel as c, CustomListbox as i, SectionHeader as n, ControlledCollapsiblePanel as o, MultiSelectDropdown as r, MaybeCollapsible as s, SwitchToggle as t };

package/dist/chunks/{Table-4OHjdKdO.js → Table-DU2MW8xz.js}

@@ -1,4 +1,4 @@
-import { u as useStrings } from "./Provider-Ghua9PkN.js";
+import { u as useStrings } from "./Provider-CDYurraE.js";
 import { t as Loader } from "./Loader-BXoXTZGc.js";
 import cx from "classnames";
 import React from "react";
@@ -49,9 +49,10 @@ function Table({ borderless = false, panel = true, className = "", wrapperClassN
 	const { loading } = useStrings();
 	const ChildrenArr = React.Children.toArray(children);
 	const Headers = getHeaders(ChildrenArr);
+	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx("div", {
 		"aria-busy": isLoading,
-		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
+		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
 		children: isLoading ? /* @__PURE__ */ jsxs("div", {
 			role: "status",
 			"aria-label": loading,
@@ -79,8 +80,9 @@ function Table({ borderless = false, panel = true, className = "", wrapperClassN
 function CompactTable({ wrapperClassName = "", className = "", tbodyClassName = "divide-y", children, roundedTop = false, rounded = false, roundedBottom = false }) {
 	const ChildrenArr = React.Children.toArray(children);
 	const Headers = getHeaders(ChildrenArr);
+	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("flex flex-col w-full", !wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-")) && "overflow-hidden", wrapperClassName),
+		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
 		children: /* @__PURE__ */ jsx("div", {
 			className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
 			children: /* @__PURE__ */ jsxs("table", {

package/dist/chunks/{Tooltip-Crxo_eU_.js → Tooltip-K5HJr4_p.js}

@@ -2,6 +2,32 @@ import { TooltipIcon } from "../icons.js";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "react-tooltip";
+//#region src/components/keys.ts
+/** Pairs each item with a React key from its content, suffixing repeats so keys stay unique. */
+function keyedByContent(items, toKey) {
+	const seen = /* @__PURE__ */ new Map();
+	return items.map((item) => {
+		const base = toKey(item);
+		const count = (seen.get(base) ?? 0) + 1;
+		seen.set(base, count);
+		return {
+			key: count === 1 ? base : `${base}#${count}`,
+			item
+		};
+	});
+}
+/** Keys for a list whose position is its identity, such as placeholder rows or a fixed grid. */
+function positionKeys(count, prefix = "position") {
+	return Array.from({ length: count }, (_, position) => `${prefix}-${position}`);
+}
+/** Pairs each item of a list that never reorders with a key from its position. */
+function withPositionKeys(items, prefix = "position") {
+	return items.map((item, position) => ({
+		key: `${prefix}-${position}`,
+		item
+	}));
+}
+//#endregion
 //#region src/components/Tooltip.tsx
 var TOOLTIP_ID = "global-tooltip";
 /** Anchor props that reveal `content` only while the text is ellipsized; `measure` picks the clipped descendant when it isn't the anchor. */
@@ -39,18 +65,19 @@ function formatLine(line) {
 function formatTooltipContent(content) {
 	if (typeof content !== "string") return content || null;
 	if (!content) return null;
-	return content.split(/<br\s*\/?>|\n/i).map((line, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, idx));
+	return keyedByContent(content.split(/<br\s*\/?>|\n/i), (l) => l).map(({ key, item: line }, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("br", {}), formatLine(line)] }, key));
 }
 function KbdShortcut({ keys }) {
+	const parts = keys.split("+").map((part) => part.trim()).filter(Boolean);
 	return /* @__PURE__ */ jsx("span", {
 		className: "inline-flex items-center gap-1 align-middle",
-		children: keys.split("+").map((part) => part.trim()).filter(Boolean).map((part, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
+		children: keyedByContent(parts, (p) => p).map(({ key, item: part }, idx) => /* @__PURE__ */ jsxs(Fragment, { children: [idx > 0 && /* @__PURE__ */ jsx("span", {
 			className: "opacity-60 text-[11px]",
 			children: "+"
 		}), /* @__PURE__ */ jsx("kbd", {
 			className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded border border-white/30 bg-white/10 font-sans text-[11px] font-semibold leading-none",
 			children: part
-		})] }, `${part}-${idx}`))
+		})] }, key))
 	});
 }
 var globalCloseEvents = { escape: true };
@@ -93,4 +120,4 @@ function TooltipInfo({ text, className = "", children, place = "top", tabIndex }
 	});
 }
 //#endregion
-export { truncationTooltipProps as a, formatTooltipContent as i, TOOLTIP_ID as n, TooltipInfo as r, GlobalTooltip as t };
+export { truncationTooltipProps as a, withPositionKeys as c, formatTooltipContent as i, TOOLTIP_ID as n, keyedByContent as o, TooltipInfo as r, positionKeys as s, GlobalTooltip as t };

package/dist/chunks/duration-BOv8Phl8.js

@@ -0,0 +1,17 @@
+import { Duration } from "luxon";
+//#region src/duration.ts
+var UnitDisplay = { ja: "short" };
+function durationToAbsHumanDuration(d) {
+	const duration = d.shiftTo("days", "hours", "minutes", "seconds").toObject();
+	if ("seconds" in duration) duration.seconds = Math.round(duration.seconds);
+	const cleanedDuration = Object.fromEntries(Object.entries(duration).filter(([, value]) => value !== 0).map(([key, value]) => [key, Math.abs(value)]));
+	if (Object.keys(cleanedDuration).length === 0) cleanedDuration.seconds = 0;
+	const human = Duration.fromObject(cleanedDuration);
+	const unitDisplay = UnitDisplay[human.locale] || "narrow";
+	return human.toHuman({ unitDisplay }).replaceAll(/[,、]/g, "");
+}
+function toAbsHumanDuration(start, end) {
+	return durationToAbsHumanDuration(end.diff(start));
+}
+//#endregion
+export { toAbsHumanDuration as n, durationToAbsHumanDuration as t };