@parallelworks/ui 0.18.0 → 0.19.1

package/dist/components/SettingsGroup.js

@@ -0,0 +1,17 @@
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SettingsGroup.tsx
+function SettingsGroup({ title, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("mt-8 first:mt-0", className),
+		children: [title && /* @__PURE__ */ jsx("h2", {
+			className: "text-[11px] font-semibold uppercase tracking-wider theme-muted-text mb-2 px-1",
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: "panel divide-y divide-(--theme-border)",
+			children
+		})]
+	});
+}
+//#endregion
+export { SettingsGroup as default };

package/dist/components/Sort.js

@@ -0,0 +1,42 @@
+import { useStrings } from "./Provider.js";
+import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Sort.tsx
+var SortIcon = ({ currentlySorted, currentDirection, name }) => {
+	const style = { transform: "translateY(2px)" };
+	if (currentlySorted === name) {
+		if (currentDirection === "ascending") return /* @__PURE__ */ jsx(SortDownIcon, { style });
+		else if (currentDirection === "descending") return /* @__PURE__ */ jsx(SortUpIcon, { style });
+	} else return /* @__PURE__ */ jsx(SortUnsortedIcon, { style });
+	return null;
+};
+function Sort({ currentlySorted, name, setCurrentDirection, setCurrentlySorted, currentDirection }) {
+	const t = useStrings().common;
+	const sort = (sorted, direction) => {
+		if (sorted === name) {
+			if (direction === "ascending") setCurrentDirection("descending");
+			else if (direction === "descending") {
+				setCurrentDirection("unsorted");
+				setCurrentlySorted("");
+			}
+		} else {
+			setCurrentDirection("ascending");
+			setCurrentlySorted(name);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "inline",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t.sort,
+			onClick: () => sort(currentlySorted, currentDirection),
+			children: /* @__PURE__ */ jsx(SortIcon, {
+				currentDirection,
+				currentlySorted,
+				name
+			})
+		})
+	});
+}
+//#endregion
+export { Sort as default };

package/dist/components/StatusBadge.js

@@ -0,0 +1,63 @@
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/StatusBadge.tsx
+var variantStyles = {
+	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
+	success: "bg-emerald-500/10 text-emerald-800 dark:text-emerald-400 border-emerald-500/20",
+	warning: "bg-amber-500/10 text-amber-800 dark:text-amber-400 border-amber-500/20",
+	error: "bg-red-500/10 text-red-800 dark:text-red-400 border-red-500/20",
+	info: "bg-blue-500/10 text-blue-800 dark:text-blue-400 border-blue-500/20",
+	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
+};
+var pulseColors = {
+	default: "bg-(--theme-app)",
+	success: "bg-emerald-500",
+	warning: "bg-amber-500",
+	error: "bg-red-500",
+	info: "bg-blue-500",
+	muted: "bg-(--theme-muted-text-color)"
+};
+var textColors = {
+	default: "text-(--theme-app)",
+	success: "text-emerald-600 dark:text-emerald-400",
+	warning: "text-amber-600 dark:text-amber-400",
+	error: "text-red-600 dark:text-red-400",
+	info: "text-blue-600 dark:text-blue-400",
+	muted: "text-(--theme-muted-text-color)"
+};
+/** A line of text in a variant's colour, for a status that stands beside a
+*  dot rather than inside a badge. */
+function statusTextClass(variant) {
+	return textColors[variant];
+}
+function StatusBadge({ children, variant = "default", pulse = false, dot = false, size = "sm", className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
+		children: [
+			pulse && /* @__PURE__ */ jsxs("span", {
+				className: "relative flex h-2 w-2",
+				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
+			}),
+			dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 rounded-full", pulseColors[variant]) }),
+			children
+		]
+	});
+}
+function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("relative inline-flex", className),
+		style: {
+			width: size,
+			height: size
+		},
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
+			className: cx("relative inline-flex rounded-full", pulseColors[variant]),
+			style: {
+				width: size,
+				height: size
+			}
+		})]
+	});
+}
+//#endregion
+export { StatusBadge, StatusDot, statusTextClass };

package/dist/components/SwitchToggle.js

@@ -0,0 +1,59 @@
+import { TOOLTIP_ID } from "./Tooltip.js";
+import { Switch } from "@headlessui/react";
+import cx from "classnames";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SwitchToggle.tsx
+function SwitchToggle({ onChange, id, "aria-describedby": describedBy, value = void 0, yesLabel = "Yes", noLabel = "No", disabled = false, datatip = "", invalid = false }) {
+	const [enabled, setEnabled] = useState(value ?? false);
+	const [isFocused, setIsFocused] = useState(false);
+	const setIsEnabled = (e) => {
+		setEnabled(e);
+		onChange(e);
+	};
+	useEffect(() => {
+		if (value !== void 0) setEnabled(value);
+	}, [value]);
+	const checked = value ?? enabled;
+	return /* @__PURE__ */ jsx("div", {
+		...datatip ? {
+			"data-tooltip-content": datatip,
+			"data-tooltip-id": TOOLTIP_ID
+		} : {},
+		className: cx("w-[198px] h-[30px] overflow-hidden shadow-sm rounded-md cursor-pointer ring-(--theme-border) ring-1", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500 ring-1 ring-red-500", !invalid && isFocused && "ring-1 ring-[rgba(82,168,236,.8)] drop-shadow-[0_1px_2px_rgba(82,168,236,0.8)]"),
+		children: /* @__PURE__ */ jsx(Switch, {
+			id,
+			"aria-describedby": describedBy,
+			checked,
+			onChange: setIsEnabled,
+			className: "text-white text-sm shadow-sm rounded-md cursor-pointer",
+			onClick: (e) => e.stopPropagation(),
+			onFocus: () => setIsFocused(true),
+			onBlur: () => setIsFocused(false),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cx(checked ? "translate-x-0" : "-translate-x-[100px]", "relative transform flex flex-row  ease-in-out duration-500", disabled && "cursor-not-allowed opacity-50"),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "inline text-center capitalize px-2 py-1 w-[99px] border-0",
+						style: {
+							background: `linear-gradient(
+              to bottom,
+              var(--theme-element, #04c) 0%,
+              var(--theme-element, #08c) 100%
+            )`,
+							color: "var(--theme-element-text, #ffffff)"
+						},
+						children: yesLabel
+					}),
+					/* @__PURE__ */ jsx("div", { className: "inline px-2 py-1 h-8 w-[99px] bg-linear-to-b from-white to-[#e6e6e6]" }),
+					/* @__PURE__ */ jsx("div", {
+						className: "inline text-center capitalize px-2 py-1 w-[99px] bg-linear-to-b from-[#e6e6e6] to-white bg-[#04c] text-black",
+						children: noLabel
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { SwitchToggle as default };

package/dist/{chunks/SwitchToggleSmall-FcsaYSTs.js → components/SwitchToggleSmall.js}

@@ -11,4 +11,4 @@ function SwitchToggleSmall({ value = false, disabled = false, className, ...butt
 	});
 }
 //#endregion
-export { SwitchToggleSmall as t };
+export { SwitchToggleSmall as default };

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

@@ -1,5 +1,5 @@
-import { u as useStrings } from "./Provider-Ghua9PkN.js";
-import { t as Loader } from "./Loader-BXoXTZGc.js";
+import { useStrings } from "./Provider.js";
+import Loader from "./Loader.js";
 import cx from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -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", {
@@ -104,4 +106,4 @@ Table.Item = Item;
 CompactTable.Header = Header;
 CompactTable.Item = CompactItem;
 //#endregion
-export { Table as n, CompactTable as t };
+export { CompactTable, Table };

package/dist/components/Toggle.js

@@ -0,0 +1,20 @@
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Toggle.tsx
+function Toggle({ checked, onChange, disabled, label }) {
+	return /* @__PURE__ */ jsxs("label", {
+		role: "none",
+		onClick: (e) => e.stopPropagation(),
+		className: cx("relative inline-flex items-center", disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"),
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			className: "peer sr-only",
+			checked,
+			onChange: (e) => onChange(e.target.checked),
+			disabled,
+			"aria-label": label
+		}), /* @__PURE__ */ jsx("div", { className: "h-6 w-11 rounded-full bg-(--theme-muted-panel-bg) transition-colors peer-checked:bg-(--theme-element) peer-focus-visible:ring-2 peer-focus-visible:ring-[color-mix(in_srgb,var(--theme-element)_25%,transparent)] after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:content-[\"\"] motion-reduce:after:transition-none peer-checked:after:translate-x-5" })]
+	});
+}
+//#endregion
+export { Toggle };

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

@@ -1,4 +1,5 @@
 import { TooltipIcon } from "../icons.js";
+import { keyedByContent } from "./keys.js";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "react-tooltip";
@@ -39,18 +40,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 +95,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 { GlobalTooltip, TOOLTIP_ID, TooltipInfo, formatTooltipContent, truncationTooltipProps };

package/dist/{chunks/StatusBadge-C1Blx_cW.js → components/dropdownUtils.js}

@@ -1,6 +1,5 @@
 import { CaretDownIcon } from "../icons.js";
-import cx from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/dropdownUtils.tsx
 function isCategory(option) {
 	return typeof option === "object" && option !== null && option !== void 0 && "options" in option;
@@ -98,64 +97,4 @@ function DropdownCaret() {
 	return /* @__PURE__ */ jsx(CaretDownIcon, { className: "text-neutral-400 absolute top-1/2 -translate-y-1/2 right-0 mr-3 inset-y-0 flex items-center rounded-r-md focus:outline-hidden" });
 }
 //#endregion
-//#region src/components/StatusBadge.tsx
-var variantStyles = {
-	default: "bg-(--theme-muted-panel-bg) text-(--theme-app) border-(--theme-border)",
-	success: "bg-emerald-500/10 text-emerald-800 dark:text-emerald-400 border-emerald-500/20",
-	warning: "bg-amber-500/10 text-amber-800 dark:text-amber-400 border-amber-500/20",
-	error: "bg-red-500/10 text-red-800 dark:text-red-400 border-red-500/20",
-	info: "bg-blue-500/10 text-blue-800 dark:text-blue-400 border-blue-500/20",
-	muted: "bg-(--theme-muted-panel-bg)/50 text-(--theme-muted-text-color) border-(--theme-border)"
-};
-var pulseColors = {
-	default: "bg-(--theme-app)",
-	success: "bg-emerald-500",
-	warning: "bg-amber-500",
-	error: "bg-red-500",
-	info: "bg-blue-500",
-	muted: "bg-(--theme-muted-text-color)"
-};
-var textColors = {
-	default: "text-(--theme-app)",
-	success: "text-emerald-600 dark:text-emerald-400",
-	warning: "text-amber-600 dark:text-amber-400",
-	error: "text-red-600 dark:text-red-400",
-	info: "text-blue-600 dark:text-blue-400",
-	muted: "text-(--theme-muted-text-color)"
-};
-/** A line of text in a variant's colour, for a status that stands beside a
-*  dot rather than inside a badge. */
-function statusTextClass(variant) {
-	return textColors[variant];
-}
-function StatusBadge({ children, variant = "default", pulse = false, dot = false, size = "sm", className }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: cx("inline-flex items-center gap-1.5 rounded-full border font-medium", size === "sm" && "px-2 py-0.5 text-[10px]", size === "md" && "px-2.5 py-1 text-xs", variantStyles[variant], className),
-		children: [
-			pulse && /* @__PURE__ */ jsxs("span", {
-				className: "relative flex h-2 w-2",
-				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", pulseColors[variant]) })]
-			}),
-			dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 rounded-full", pulseColors[variant]) }),
-			children
-		]
-	});
-}
-function StatusDot({ variant = "default", pulse = false, size = 8, className }) {
-	return /* @__PURE__ */ jsxs("span", {
-		className: cx("relative inline-flex", className),
-		style: {
-			width: size,
-			height: size
-		},
-		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", pulseColors[variant]) }), /* @__PURE__ */ jsx("span", {
-			className: cx("relative inline-flex rounded-full", pulseColors[variant]),
-			style: {
-				width: size,
-				height: size
-			}
-		})]
-	});
-}
-//#endregion
-export { filterOption as a, isCategory as c, DropdownCaret as i, isOption as l, StatusDot as n, flattenDisplayOptions as o, statusTextClass as r, flattenOptions as s, StatusBadge as t, toggleSetMember as u };
+export { DropdownCaret, filterOption, flattenDisplayOptions, flattenOptions, isCategory, isOption, toggleSetMember };

package/dist/components/focus.d.ts

@@ -0,0 +1,2 @@
+/** A ref that focuses a field once, when it mounts; stable so re-renders never move focus back. */
+export declare function focusOnMount(element: HTMLElement | null): void;

package/dist/components/focus.js

@@ -0,0 +1,7 @@
+//#region src/components/focus.ts
+/** A ref that focuses a field once, when it mounts; stable so re-renders never move focus back. */
+function focusOnMount(element) {
+	element?.focus();
+}
+//#endregion
+export { focusOnMount };

package/dist/components/ghostButton.js

@@ -0,0 +1,7 @@
+//#region src/components/ghostButton.ts
+var ghostButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-8 px-3 rounded-md text-sm text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
+var primaryButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-(--theme-element) text-(--theme-element-text) hover:opacity-90 transition-opacity";
+/** Filled destructive button for confirming irreversible actions in ds modals. */
+var dangerButtonClasses = "inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-red-600 text-white hover:bg-red-700 transition-colors";
+//#endregion
+export { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses };

package/dist/components/inputClasses.js

@@ -0,0 +1,4 @@
+//#region src/components/inputClasses.ts
+var inputClasses = "w-full rounded-md border theme-border bg-(--theme-input-bg) px-3 py-2 text-sm text-(--theme-panel) outline-none focus:ring-2 focus:ring-(--theme-element)";
+//#endregion
+export { inputClasses };

package/dist/components/keys.d.ts

@@ -0,0 +1,12 @@
+/** Pairs each item with a React key from its content, suffixing repeats so keys stay unique. */
+export declare function keyedByContent<T>(items: readonly T[], toKey: (item: T) => string): {
+    key: string;
+    item: T;
+}[];
+/** Keys for a list whose position is its identity, such as placeholder rows or a fixed grid. */
+export declare function positionKeys(count: number, prefix?: string): string[];
+/** Pairs each item of a list that never reorders with a key from its position. */
+export declare function withPositionKeys<T>(items: readonly T[], prefix?: string): {
+    key: string;
+    item: T;
+}[];

package/dist/components/keys.js

@@ -0,0 +1,27 @@
+//#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
+export { keyedByContent, positionKeys, withPositionKeys };

package/dist/components/relativeTime.js

@@ -0,0 +1,32 @@
+import { useStrings } from "./Provider.js";
+import { useEffect, useState } from "react";
+import { DateTime } from "luxon";
+//#region src/components/relativeTime.ts
+var TICK_MS = 3e4;
+function compactRelativeMinutes(minutes, t) {
+	if (!Number.isFinite(minutes) || minutes < 1) return t.now;
+	if (minutes < 60) return t.minutes(minutes);
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return t.hours(hours);
+	const days = Math.floor(hours / 24);
+	if (days < 365) return t.days(days);
+	return t.years(Math.floor(days / 365));
+}
+/** A clock that re-reads itself, so "5m" ages while the page sits open, with
+*  the abbreviated form a row has room for. */
+function useRelativeTime() {
+	const t = useStrings().time;
+	const [now, setNow] = useState(() => DateTime.now());
+	useEffect(() => {
+		const id = setInterval(() => setNow(DateTime.now()), TICK_MS);
+		return () => clearInterval(id);
+	}, []);
+	const compactMinutes = (minutes) => compactRelativeMinutes(minutes, t);
+	return {
+		now,
+		compactMinutes,
+		compact: (iso) => iso ? compactMinutes(Math.floor(now.diff(DateTime.fromISO(iso)).as("minutes"))) : ""
+	};
+}
+//#endregion
+export { compactRelativeMinutes, useRelativeTime };

package/dist/{chunks/useCssIsDark-DHr05dG2.js → components/useCssIsDark.js}

@@ -35,4 +35,4 @@ function useCssIsDark() {
 	return isDark;
 }
 //#endregion
-export { useCssIsDark as t };
+export { useCssIsDark };

package/dist/duration.d.ts

@@ -0,0 +1,3 @@
+import { type DateTime, Duration } from 'luxon';
+export declare function durationToAbsHumanDuration(d: Duration): string;
+export declare function toAbsHumanDuration(start: DateTime, end: DateTime): string;

package/dist/duration.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 { durationToAbsHumanDuration, toAbsHumanDuration };

package/dist/editor/Editor.js

@@ -0,0 +1,13 @@
+import Loader from "../components/Loader.js";
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/editor/Editor.tsx
+var MonacoEditor = lazy(() => import("./Monaco.js"));
+function Editor({ ...props }) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
+		children: /* @__PURE__ */ jsx(MonacoEditor, { ...props })
+	});
+}
+//#endregion
+export { Editor as default };

package/dist/editor/EditorField.js

@@ -0,0 +1,53 @@
+import Editor from "./Editor.js";
+import { FieldWrapper } from "../form/FieldWrapper.js";
+import cx from "classnames";
+import { useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useField, useFormikContext } from "formik";
+//#region src/editor/EditorField.tsx
+function hasResetKeys(obj) {
+	return typeof obj === "object" && obj !== null && "editorKeyPostfix" in obj && typeof obj.editorKeyPostfix === "string";
+}
+function EditorField(props) {
+	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched, values } = useFormikContext();
+	const debounceRef = useRef(null);
+	const touchedRef = useRef(false);
+	const handleChange = (val) => {
+		touchedRef.current = true;
+		if (debounceRef.current) clearTimeout(debounceRef.current);
+		debounceRef.current = setTimeout(() => {
+			if (onChange) onChange(val);
+			setFieldTouched(field.name, true);
+			setFieldValue(field.name, val);
+			setFormDirty(true);
+		}, 500);
+	};
+	let editorKeyPostfix = "";
+	if (hasResetKeys(values)) editorKeyPostfix = values.editorKeyPostfix;
+	const postfixKey = useMemo(() => {
+		const randomKey = Math.random().toString(36).substring(7);
+		return editorKeyPostfix || randomKey;
+	}, [editorKeyPostfix]);
+	const value = fieldState.value;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: field.optional,
+		label,
+		tooltipComponent,
+		labelPosition,
+		spaceCompact,
+		children: /* @__PURE__ */ jsx(Editor, {
+			ariaLabel: label,
+			height: "200px",
+			path: field.name,
+			...touchedRef.current ? {} : { value },
+			className: cx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
+			readOnly: disabled,
+			onChange: handleChange,
+			language: field.options?.language || "shell"
+		}, field.name + postfixKey)
+	});
+}
+//#endregion
+export { EditorField as default };