@parallelworks/ui 0.17.0 → 0.19.0

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

@@ -1,22 +1,91 @@
+import { u as useStrings } from "./Provider-CDYurraE.js";
 import { AngleDownIcon, AngleRightIcon, CaretDownIcon } from "../icons.js";
-import { u as useStrings } from "./Provider-DHmZ3v9i.js";
-import { a as truncationTooltipProps, n as TOOLTIP_ID } from "./Tooltip-n9w7Tkt1.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 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
 	});
 }
@@ -131,7 +203,7 @@ function ToggleOption({ option, category, expanded, onToggle, ...virtualRowProps
 		})
 	});
 }
-function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl }) {
+function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassName = "w-full", options = [], onChange, onActiveChange, value, id, ariaLabel, "aria-describedby": describedBy, required, disabled = false, placeholder = "", loading = false, allowCustomValue = false, customValueLabel = "Use", collapsedLabel = defaultCollapsedLabel, portalEl, compact = false }) {
 	const DEBOUNCE_MS = 500;
 	const t = useStrings().dropdown;
 	const [query, setQuery] = useState("");
@@ -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) => {
@@ -253,11 +326,11 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 		allowCustomValue,
 		customValueLabel
 	]);
-	const comboOptions = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
+	const comboOptions = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(ComboboxOptions, {
 		modal: false,
 		ref: setPopperElement,
 		style: styles["popper"],
-		className: "bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) max-h-60! empty:invisible border overflow-auto rounded-md shadow-lg focus:outline-hidden sm:text-sm z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none",
+		className: cx("bg-(--theme-input-bg) border-(--theme-border) text-(--theme-app) max-h-60! empty:invisible border overflow-auto rounded-md shadow-lg focus:outline-hidden z-9999 data-[popper-reference-hidden=true]:invisible data-[popper-reference-hidden=true]:pointer-events-none", compact ? "text-xs" : "sm:text-sm"),
 		...attributes["popper"],
 		children: ({ option }) => {
 			const optionLabel = typeof option === "string" ? option : option.label;
@@ -274,7 +347,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 			return /* @__PURE__ */ jsx(ComboboxOption, {
 				"data-testid": "combobox-option",
 				value: option,
-				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : "h-10", isCategoryRow ? "text-[14px] font-bold pl-1 items-center" : "data-disabled:text-(--theme-muted-text-color) data-disabled:bg-(--theme-muted-panel-bg) data-disabled:cursor-not-allowed cursor-pointer items-center pr-9 pl-3 leading-5 data-focus:bg-(--theme-muted-panel-bg) data-focus:text-(--theme-app) data-focus:outline-hidden", "data-selected:border-l-2 data-selected:border-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-app)", isPinned && "border-t border-(--theme-border) font-medium"),
+				className: cx("w-full group relative flex", optionDescription ? "min-h-10 py-2" : compact ? "h-8" : "h-10", isCategoryRow ? "text-[14px] font-bold pl-1 items-center" : "data-disabled:text-(--theme-muted-text-color) data-disabled:bg-(--theme-muted-panel-bg) data-disabled:cursor-not-allowed cursor-pointer items-center pr-9 pl-3 leading-5 data-focus:bg-(--theme-muted-panel-bg) data-focus:text-(--theme-app) data-focus:outline-hidden", "data-selected:border-l-2 data-selected:border-(--theme-link) data-selected:bg-(--theme-muted-panel-bg) data-selected:text-(--theme-app)", isPinned && "border-t border-(--theme-border) font-medium"),
 				children: /* @__PURE__ */ jsx(OptionContent, {
 					label: optionLabel,
 					description: optionDescription,
@@ -302,7 +375,7 @@ function DropdownHelper({ wrapperClassName = "w-full", className, textBoxClassNa
 				disabled: (option) => Boolean(option.disabled)
 			},
 			disabled,
-			children: ({ activeOption, open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: ({ activeOption, open }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				onActiveChange && /* @__PURE__ */ jsx(ActiveWatcher, {
 					active: activeOption,
 					onChange: onActiveChange
@@ -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",
@@ -456,7 +529,7 @@ function CustomListbox({ options = [], handleOptionSelected, type, allowSearch =
 			leaveFrom: "opacity-100",
 			leaveTo: "opacity-0",
 			children: optionsElement || null
-		}) : /* @__PURE__ */ jsx(Fragment, { children: controlledOpen && optionsElement })]
+		}) : /* @__PURE__ */ jsx(Fragment$1, { children: controlledOpen && optionsElement })]
 	});
 }
 //#endregion
@@ -534,7 +607,7 @@ function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby":
 					children: loading ? /* @__PURE__ */ jsx("span", {
 						className: "theme-muted-text",
 						children: strings.loading
-					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 						className: "min-w-0 truncate",
 						children: display.label
 					}), display.overflow > 0 && /* @__PURE__ */ jsxs("span", {
@@ -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, { 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-C6JdFFiJ.js → Table-DU2MW8xz.js}

@@ -1,8 +1,8 @@
-import { u as useStrings } from "./Provider-DHmZ3v9i.js";
+import { u as useStrings } from "./Provider-CDYurraE.js";
 import { t as Loader } from "./Loader-BXoXTZGc.js";
 import cx from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Table.tsx
 function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
 	const yPadding = className?.includes("py-") ? "" : "py-4";
@@ -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-n9w7Tkt1.js → Tooltip-K5HJr4_p.js}

@@ -1,7 +1,33 @@
 import { TooltipIcon } from "../icons.js";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
 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$1, { 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$1, { 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 };