@parallelworks/ui 0.18.0 → 0.19.0

package/dist/index.js

@@ -1,148 +1,24 @@
-import { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor } from "./theme/index.js";
-import { a as usePersistedState, c as useRunFile, d as useWorkflowJsonResolver, i as useNotify, l as useSlots, n as useLink, o as useProvisionCorsRules, r as useNavigation, s as useRepoSuggestions, t as UIProvider, u as useStrings } from "./chunks/Provider-Ghua9PkN.js";
-import { C as useSetDefaultBreadcrumbs, E as avatarInitials, S as useSetBreadcrumbs, T as Avatar, a as HeaderAddButton, b as useClearBreadcrumbs, c as PageHeader, i as HeaderActionMenu, l as headerActionButtonClasses, n as BreadcrumbsRightAction, o as HeaderEditButton, r as BreadcrumbsTitleAction, s as HeaderRowMenu, t as BreadcrumbsActionButton, v as BreadcrumbProvider, w as AddMenu, x as useHideBreadcrumbs, y as useBreadcrumb } from "./chunks/PageHeader-l49p1nM9.js";
+import { a as useOptionalWorkflowEngine, c as useRunFile, d as useWorkflowEngine, f as useWorkflowEngineLoader, i as useNotify, l as useSlots, n as useLink, o as usePersistedState, r as useNavigation, s as useProvisionCorsRules, t as UIProvider, u as useStrings } from "./chunks/Provider-CDYurraE.js";
 import { AlertIcon, AngleRightIcon, EyeIcon, EyeOffIcon, FilterIcon, LoaderIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon } from "./icons.js";
-import { a as CreateModalSelect, c as ConfirmModal, d as primaryButtonClasses, f as Markdown, h as Callout, i as CreateModalField, l as dangerButtonClasses, m as CopyToClipboard, n as CreateModal, o as CreateModalSwitch, p as CopyCodeBlock, r as CreateModalAutocompleteField, s as CreateModalTextarea, t as CREATE_MODAL_SELECT_FILTER_THRESHOLD, u as ghostButtonClasses } from "./chunks/CreateModal-BY6DLmur.js";
-import { a as truncationTooltipProps, i as formatTooltipContent, n as TOOLTIP_ID, r as TooltipInfo, t as GlobalTooltip } from "./chunks/Tooltip-Crxo_eU_.js";
-import { a as filterOption, c as isCategory, i as DropdownCaret, l as isOption, n as StatusDot, r as statusTextClass, s as flattenOptions, t as StatusBadge, u as toggleSetMember } from "./chunks/StatusBadge-C1Blx_cW.js";
-import { a as UncontrolledCollapsiblePanel, c as Dropdown, i as MaybeCollapsible, n as SectionHeader, o as MultiSelectDropdown, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle } from "./chunks/SwitchToggle-CHPP8uZQ.js";
-import { t as Loader } from "./chunks/Loader-BXoXTZGc.js";
+import { a as truncationTooltipProps, i as formatTooltipContent, n as TOOLTIP_ID, r as TooltipInfo, t as GlobalTooltip } from "./chunks/Tooltip-K5HJr4_p.js";
+import { C as useSetDefaultBreadcrumbs, E as AddMenu, S as useSetBreadcrumbs, T as avatarInitials, a as HeaderAddButton, b as useClearBreadcrumbs, c as PageHeader, i as HeaderActionMenu, l as headerActionButtonClasses, n as BreadcrumbsRightAction, o as HeaderEditButton, r as BreadcrumbsTitleAction, s as HeaderRowMenu, t as BreadcrumbsActionButton, v as BreadcrumbProvider, w as Avatar, x as useHideBreadcrumbs, y as useBreadcrumb } from "./chunks/PageHeader-0kG_iypP.js";
 import { n as modalPanelClasses, t as BareModal } from "./chunks/BareModal-BtRiQezg.js";
-import { t as useCssIsDark } from "./chunks/useCssIsDark-DHr05dG2.js";
+import { a as CreateModalField, c as CreateModalTextarea, d as Callout, i as CreateModalAutocompleteField, l as CopyCodeBlock, n as CREATE_MODAL_SELECT_FILTER_THRESHOLD, o as CreateModalSelect, r as CreateModal, s as CreateModalSwitch, t as Markdown, u as CopyToClipboard } from "./chunks/Markdown-CM-FenNE.js";
+import { a as Dropdown, c as UncontrolledCollapsiblePanel, i as CustomListbox, n as SectionHeader, o as ControlledCollapsiblePanel, r as MultiSelectDropdown, s as MaybeCollapsible, t as SwitchToggle } from "./chunks/SwitchToggle-DShNdcao.js";
+import { i as primaryButtonClasses, n as dangerButtonClasses, r as ghostButtonClasses, t as ConfirmModal } from "./chunks/ConfirmModal-aOR4O1QE.js";
+import { a as filterOption, c as isCategory, i as DropdownCaret, l as isOption, n as StatusDot, r as statusTextClass, s as flattenOptions, t as StatusBadge, u as toggleSetMember } from "./chunks/StatusBadge-C1Blx_cW.js";
 import { t as Indicator } from "./chunks/Indicator-hBSIxOPK.js";
-import { t as SwitchToggleSmall } from "./chunks/SwitchToggleSmall-FcsaYSTs.js";
-import { n as Table, t as CompactTable } from "./chunks/Table-4OHjdKdO.js";
 import { t as RequiredMark } from "./chunks/RequiredMark-DfLdYbYZ.js";
+import { t as Loader } from "./chunks/Loader-BXoXTZGc.js";
+import { t as SwitchToggleSmall } from "./chunks/SwitchToggleSmall-FcsaYSTs.js";
+import { n as Table, t as CompactTable } from "./chunks/Table-DU2MW8xz.js";
+import { t as useCssIsDark } from "./chunks/useCssIsDark-DHr05dG2.js";
+import { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor } from "./theme/index.js";
 import cx from "classnames";
 import React, { forwardRef, useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Skeleton from "react-loading-skeleton";
 import { DateTime } from "luxon";
-//#region src/components/DescriptionList.tsx
-function DescriptionListItem({ label, children, tooltip, className, ...props }) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("dt", {
-		className: cx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "min-w-0 truncate",
-			children: label
-		}), tooltip && /* @__PURE__ */ jsx(TooltipInfo, {
-			className: "pr-2",
-			text: tooltip
-		})]
-	}), /* @__PURE__ */ jsx("dd", {
-		...props,
-		className: "flex text-[13px] leading-6 col-span-4 font-light items-center overflow-auto",
-		children
-	})] });
-}
-function DescriptionList({ children, title, separators = true, subtitle, className, wrapperClassName, vertical = false }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("w-full", wrapperClassName),
-		children: [
-			title && /* @__PURE__ */ jsx("h2", {
-				className: "text-sm font-semibold w-full mb-1",
-				children: title
-			}),
-			subtitle && /* @__PURE__ */ jsx("div", {
-				className: "max-w-2xl text-sm/6 w-full",
-				children: subtitle
-			}),
-			/* @__PURE__ */ jsx("dl", {
-				className: cx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
-				children: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ jsx(React.Fragment, { children: child }, index)) : children
-			})
-		]
-	});
-}
-//#endregion
-//#region src/components/EmptyState.tsx
-function EmptyState({ title, description, action, icon: Icon }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "border-solid rounded-2xl border border-(--theme-border) theme-panel flex flex-col items-center justify-center py-12 px-6",
-		children: [
-			Icon && /* @__PURE__ */ jsx("div", {
-				className: "w-10 h-10 rounded-full bg-(--theme-muted-panel-bg) flex items-center justify-center mb-3",
-				children: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 theme-muted-text" })
-			}),
-			/* @__PURE__ */ jsx("p", {
-				className: "text-sm font-medium mb-1",
-				children: title
-			}),
-			description && /* @__PURE__ */ jsx("p", {
-				className: "text-xs theme-muted-text text-center max-w-xs",
-				children: description
-			}),
-			action && /* @__PURE__ */ jsx("div", {
-				className: "mt-4",
-				children: action
-			})
-		]
-	});
-}
-//#endregion
-//#region src/components/Overview.tsx
-function Overview({ Icon, name, type, children, right, className, loading, iconSize = 75 }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex items-center w-full", className),
-		children: [
-			loading ? /* @__PURE__ */ jsx(Skeleton, {
-				width: iconSize,
-				height: iconSize,
-				circle: true
-			}) : Icon,
-			/* @__PURE__ */ jsx("div", {
-				className: "flex flex-col min-w-0 flex-1",
-				children: loading ? /* @__PURE__ */ jsx(Skeleton, {
-					count: 2,
-					height: 12
-				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "font-semibold text-xl tracking-tight",
-						children: name
-					}),
-					type && /* @__PURE__ */ jsx("p", { children: type }),
-					/* @__PURE__ */ jsx("div", {
-						className: "flex flex-row gap-x-2",
-						children
-					})
-				] })
-			}),
-			right && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0 self-center",
-				children: right
-			})
-		]
-	});
-}
-//#endregion
-//#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
 //#region src/components/Button.tsx
 var Button = forwardRef(({ children, variant = "primary", size = "default", loading, icon, iconPosition = "right", fullWidth = true, className = "", disabled, ...props }, ref) => {
 	const baseClasses = "inline-flex items-center justify-center gap-2 font-semibold rounded-lg transition-all duration-200 cursor-pointer border-none mt-2 disabled:opacity-50 disabled:cursor-not-allowed";
@@ -248,97 +124,112 @@ function CardHeader({ badge, title, description, className = "", align = "center
 	});
 }
 //#endregion
-//#region src/components/Input.tsx
-var Input = forwardRef(({ label, error, className = "", mono, type, required, ...props }, ref) => {
-	const [showPassword, setShowPassword] = useState(false);
-	const isPassword = type === "password";
-	const inputType = isPassword && showPassword ? "text" : type;
-	const generatedId = useId();
-	const id = props.id ?? generatedId;
-	const errorId = `${id}-error`;
-	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
-	const inputClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", isPassword && "pr-11", className);
+//#region src/components/DescriptionList.tsx
+function DescriptionListItem({ label, children, tooltip, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("dt", {
+		className: cx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: label
+		}), tooltip && /* @__PURE__ */ jsx(TooltipInfo, {
+			className: "pr-2",
+			text: tooltip
+		})]
+	}), /* @__PURE__ */ jsx("dd", {
+		...props,
+		className: "flex text-[13px] leading-6 col-span-4 font-light items-center overflow-auto",
+		children
+	})] });
+}
+function DescriptionList({ children, title, separators = true, subtitle, className, wrapperClassName, vertical = false }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1.5",
+		className: cx("w-full", wrapperClassName),
 		children: [
-			label && /* @__PURE__ */ jsxs("label", {
-				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
-				htmlFor: id,
-				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			title && /* @__PURE__ */ jsx("h2", {
+				className: "text-sm font-semibold w-full mb-1",
+				children: title
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: isPassword ? "relative w-full" : "",
-				children: [/* @__PURE__ */ jsx("input", {
-					ref,
-					type: inputType,
-					className: inputClasses,
-					...props,
-					id,
-					required,
-					"aria-invalid": error ? true : props["aria-invalid"],
-					"aria-describedby": describedBy
-				}), isPassword && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none text-[var(--theme-muted-text-color)] cursor-pointer p-1 transition-colors duration-200 flex items-center justify-center hover:text-[var(--theme-app)]",
-					onClick: () => setShowPassword(!showPassword),
-					tabIndex: -1,
-					"aria-label": showPassword ? "Hide password" : "Show password",
-					children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "w-5 h-5" })
-				})]
+			subtitle && /* @__PURE__ */ jsx("div", {
+				className: "max-w-2xl text-sm/6 w-full",
+				children: subtitle
 			}),
-			error && /* @__PURE__ */ jsxs("span", {
-				id: errorId,
-				role: "alert",
-				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
-				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+			/* @__PURE__ */ jsx("dl", {
+				className: cx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
+				children: Array.isArray(children) ? React.Children.toArray(children) : children
 			})
 		]
 	});
-});
-Input.displayName = "Input";
-var Textarea = forwardRef(({ label, error, className = "", mono, required, ...props }, ref) => {
-	const generatedId = useId();
-	const id = props.id ?? generatedId;
-	const errorId = `${id}-error`;
-	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
-	const textareaClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border min-h-[140px] resize-y", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", className);
+}
+//#endregion
+//#region src/components/EmptyState.tsx
+function EmptyState({ title, description, action, icon: Icon }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-1.5",
+		className: "border-solid rounded-2xl border border-(--theme-border) theme-panel flex flex-col items-center justify-center py-12 px-6",
 		children: [
-			label && /* @__PURE__ */ jsxs("label", {
-				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
-				htmlFor: id,
-				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			Icon && /* @__PURE__ */ jsx("div", {
+				className: "w-10 h-10 rounded-full bg-(--theme-muted-panel-bg) flex items-center justify-center mb-3",
+				children: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 theme-muted-text" })
 			}),
-			/* @__PURE__ */ jsx("textarea", {
-				ref,
-				className: textareaClasses,
-				...props,
-				id,
-				required,
-				"aria-invalid": error ? true : props["aria-invalid"],
-				"aria-describedby": describedBy
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium mb-1",
+				children: title
 			}),
-			error && /* @__PURE__ */ jsxs("span", {
-				id: errorId,
-				role: "alert",
-				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
-				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-xs theme-muted-text text-center max-w-xs",
+				children: description
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: action
 			})
 		]
 	});
-});
-Textarea.displayName = "Textarea";
-//#endregion
-//#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
-//#region src/components/IconButton.tsx
-var IconButton = forwardRef(({ icon, label, variant = "default", size = "md", active = false, showTooltip = true, className, disabled, ...props }, ref) => {
-	const sizeClasses = {
-		sm: "w-7 h-7 [&_svg]:w-3.5 [&_svg]:h-3.5",
-		md: "w-9 h-9 [&_svg]:w-4 [&_svg]:h-4",
-		lg: "w-11 h-11 [&_svg]:w-5 [&_svg]:h-5"
+//#region src/components/Filter.tsx
+function Filter({ filter, setFilter, placeholder = "Filter...", pills, activePill, onPillChange }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative flex items-center",
+			children: [/* @__PURE__ */ jsx("input", {
+				placeholder,
+				type: "text",
+				value: filter,
+				onChange: (e) => setFilter(e.target.value.toLowerCase()),
+				className: "shadow-sm focus:ring-1 block w-full pr-3 sm:text-sm theme-border rounded-md py-1.5 pl-8"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-y-0 left-0 flex py-2.5 pl-2",
+				children: /* @__PURE__ */ jsx(FilterIcon, {})
+			})]
+		}), pills && onPillChange && /* @__PURE__ */ jsx("div", {
+			className: "flex gap-1",
+			children: pills.map((pill) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onPillChange(pill.value),
+				className: cx("px-2.5 py-1 text-xs rounded-full transition-colors border", activePill === pill.value ? "bg-(--theme-element) text-(--theme-element-text) border-transparent" : "theme-border theme-text hover:theme-hover"),
+				children: pill.label
+			}, pill.value))
+		})]
+	});
+}
+//#endregion
+//#region src/components/FilterPill.tsx
+function FilterPill({ active, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		className: cx("px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200", active ? "bg-[var(--theme-panel-bg)] border-[var(--theme-border)] text-[var(--theme-panel)] shadow-sm" : "bg-transparent border-transparent text-[var(--theme-muted-text-color)] hover:text-[var(--theme-panel)] hover:bg-[var(--theme-hover)]"),
+		children
+	});
+}
+//#endregion
+//#region src/components/IconButton.tsx
+var IconButton = forwardRef(({ icon, label, variant = "default", size = "md", active = false, showTooltip = true, className, disabled, ...props }, ref) => {
+	const sizeClasses = {
+		sm: "w-7 h-7 [&_svg]:w-3.5 [&_svg]:h-3.5",
+		md: "w-9 h-9 [&_svg]:w-4 [&_svg]:h-4",
+		lg: "w-11 h-11 [&_svg]:w-5 [&_svg]:h-5"
 	};
 	const variantClasses = {
 		default: cx("bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-border)] hover:text-[var(--theme-app)]", active && "bg-[var(--theme-element)]/10 text-[var(--theme-element)]"),
@@ -362,22 +253,90 @@ var IconButton = forwardRef(({ icon, label, variant = "default", size = "md", ac
 });
 IconButton.displayName = "IconButton";
 //#endregion
-//#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" })]
+//#region src/components/Input.tsx
+var Input = forwardRef(({ label, error, className = "", mono, type, required, ...props }, ref) => {
+	const [showPassword, setShowPassword] = useState(false);
+	const isPassword = type === "password";
+	const inputType = isPassword && showPassword ? "text" : type;
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	const errorId = `${id}-error`;
+	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const inputClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", isPassword && "pr-11", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: id,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: isPassword ? "relative w-full" : "",
+				children: [/* @__PURE__ */ jsx("input", {
+					ref,
+					type: inputType,
+					className: inputClasses,
+					...props,
+					id,
+					required,
+					"aria-invalid": error ? true : props["aria-invalid"],
+					"aria-describedby": describedBy
+				}), isPassword && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none text-[var(--theme-muted-text-color)] cursor-pointer p-1 transition-colors duration-200 flex items-center justify-center hover:text-[var(--theme-app)]",
+					onClick: () => setShowPassword(!showPassword),
+					tabIndex: -1,
+					"aria-label": showPassword ? "Hide password" : "Show password",
+					children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "w-5 h-5" })
+				})]
+			}),
+			error && /* @__PURE__ */ jsxs("span", {
+				id: errorId,
+				role: "alert",
+				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+			})
+		]
 	});
-}
+});
+Input.displayName = "Input";
+var Textarea = forwardRef(({ label, error, className = "", mono, required, ...props }, ref) => {
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	const errorId = `${id}-error`;
+	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const textareaClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border min-h-[140px] resize-y", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: id,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				ref,
+				className: textareaClasses,
+				...props,
+				id,
+				required,
+				"aria-invalid": error ? true : props["aria-invalid"],
+				"aria-describedby": describedBy
+			}),
+			error && /* @__PURE__ */ jsxs("span", {
+				id: errorId,
+				role: "alert",
+				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+//#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
 //#region src/components/LetterBadge.tsx
 /** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
@@ -389,79 +348,38 @@ function LetterBadge({ text, className }) {
 	});
 }
 //#endregion
-//#region src/components/FilterPill.tsx
-function FilterPill({ active, onClick, children }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick,
-		className: cx("px-3 py-1.5 text-xs font-medium rounded-full border transition-all duration-200", active ? "bg-[var(--theme-panel-bg)] border-[var(--theme-border)] text-[var(--theme-panel)] shadow-sm" : "bg-transparent border-transparent text-[var(--theme-muted-text-color)] hover:text-[var(--theme-panel)] hover:bg-[var(--theme-hover)]"),
-		children
-	});
-}
-//#endregion
-//#region src/components/Filter.tsx
-function Filter({ filter, setFilter, placeholder = "Filter...", pills, activePill, onPillChange }) {
+//#region src/components/Overview.tsx
+function Overview({ Icon, name, type, children, right, className, loading, iconSize = 75 }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "relative flex items-center",
-			children: [/* @__PURE__ */ jsx("input", {
-				placeholder,
-				type: "text",
-				value: filter,
-				onChange: (e) => setFilter(e.target.value.toLowerCase()),
-				className: "shadow-sm focus:ring-1 block w-full pr-3 sm:text-sm theme-border rounded-md py-1.5 pl-8"
-			}), /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-y-0 left-0 flex py-2.5 pl-2",
-				children: /* @__PURE__ */ jsx(FilterIcon, {})
-			})]
-		}), pills && onPillChange && /* @__PURE__ */ jsx("div", {
-			className: "flex gap-1",
-			children: pills.map((pill) => /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => onPillChange(pill.value),
-				className: cx("px-2.5 py-1 text-xs rounded-full transition-colors border", activePill === pill.value ? "bg-(--theme-element) text-(--theme-element-text) border-transparent" : "theme-border theme-text hover:theme-hover"),
-				children: pill.label
-			}, pill.value))
-		})]
-	});
-}
-//#endregion
-//#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
+		className: cx("flex items-center w-full", className),
+		children: [
+			loading ? /* @__PURE__ */ jsx(Skeleton, {
+				width: iconSize,
+				height: iconSize,
+				circle: true
+			}) : Icon,
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col min-w-0 flex-1",
+				children: loading ? /* @__PURE__ */ jsx(Skeleton, {
+					count: 2,
+					height: 12
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "font-semibold text-xl tracking-tight",
+						children: name
+					}),
+					type && /* @__PURE__ */ jsx("p", { children: type }),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex flex-row gap-x-2",
+						children
+					})
+				] })
+			}),
+			right && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 self-center",
+				children: right
 			})
-		})
+		]
 	});
 }
 //#endregion
@@ -496,6 +414,93 @@ function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roun
 	});
 }
 //#endregion
+//#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
+//#region src/components/SettingModeOption.tsx
+/** A labeled + described radio option row, used inside a SettingsCard to pick
+* between modes (e.g. default vs custom). Stacked rows share the card's
+* dividers via `isFirst`. */
+function SettingModeOption({ name, checked, onSelect, label, description, isFirst, disabled }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", !isFirst && "border-t theme-border"),
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "radio",
+			name,
+			checked,
+			onChange: onSelect,
+			disabled,
+			className: "mt-0.5 w-4 h-4 theme-input shrink-0"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "font-semibold theme-text leading-tight",
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "theme-muted-text text-xs leading-snug mt-0.5",
+				children: description
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/SettingRow.tsx
+function SettingRow({ label, htmlFor, helpText, children, isFirst, fill, onClick }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "none",
+		onClick,
+		className: cx("px-5 py-5 grid grid-cols-1 gap-x-8 gap-y-2", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", !isFirst && "border-t theme-border", onClick && "cursor-pointer select-none hover:theme-hover transition-colors"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-y-1",
+			children: [/* @__PURE__ */ jsx("label", {
+				htmlFor,
+				className: "font-semibold theme-text leading-tight",
+				children: label
+			}), helpText && /* @__PURE__ */ jsx("div", {
+				className: "theme-muted-text text-xs leading-snug",
+				children: helpText
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("min-w-0", !fill && "flex items-center justify-end"),
+			children
+		})]
+	});
+}
+function SettingSection({ title, isFirst }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("px-5 py-3 theme-muted-panel", !isFirst && "border-t theme-border"),
+		children: /* @__PURE__ */ jsx("h2", {
+			className: "font-semibold text-sm uppercase tracking-wider theme-muted-text",
+			children: title
+		})
+	});
+}
+//#endregion
 //#region src/components/SettingsCard.tsx
 /**
 * A settings card: an optional sentence-case section label sits above a
@@ -538,63 +543,59 @@ function SettingsGroup({ title, children, className }) {
 	});
 }
 //#endregion
-//#region src/components/SettingRow.tsx
-function SettingRow({ label, htmlFor, helpText, children, isFirst, fill, onClick }) {
-	return /* @__PURE__ */ jsxs("div", {
-		role: "none",
-		onClick,
-		className: cx("px-5 py-5 grid grid-cols-1 gap-x-8 gap-y-2", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", !isFirst && "border-t theme-border", onClick && "cursor-pointer select-none hover:theme-hover transition-colors"),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-y-1",
-			children: [/* @__PURE__ */ jsx("label", {
-				htmlFor,
-				className: "font-semibold theme-text leading-tight",
-				children: label
-			}), helpText && /* @__PURE__ */ jsx("div", {
-				className: "theme-muted-text text-xs leading-snug",
-				children: helpText
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx("min-w-0", !fill && "flex items-center justify-end"),
-			children
-		})]
-	});
-}
-function SettingSection({ title, isFirst }) {
+//#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: cx("px-5 py-3 theme-muted-panel", !isFirst && "border-t theme-border"),
-		children: /* @__PURE__ */ jsx("h2", {
-			className: "font-semibold text-sm uppercase tracking-wider theme-muted-text",
-			children: title
+		className: "inline",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": t.sort,
+			onClick: () => sort(currentlySorted, currentDirection),
+			children: /* @__PURE__ */ jsx(SortIcon, {
+				currentDirection,
+				currentlySorted,
+				name
+			})
 		})
 	});
 }
 //#endregion
-//#region src/components/SettingModeOption.tsx
-/** A labeled + described radio option row, used inside a SettingsCard to pick
-* between modes (e.g. default vs custom). Stacked rows share the card's
-* dividers via `isFirst`. */
-function SettingModeOption({ name, checked, onSelect, label, description, isFirst, disabled }) {
+//#region src/components/Toggle.tsx
+function Toggle({ checked, onChange, disabled, label }) {
 	return /* @__PURE__ */ jsxs("label", {
-		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", !isFirst && "border-t theme-border"),
+		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: "radio",
-			name,
+			type: "checkbox",
+			className: "peer sr-only",
 			checked,
-			onChange: onSelect,
+			onChange: (e) => onChange(e.target.checked),
 			disabled,
-			className: "mt-0.5 w-4 h-4 theme-input shrink-0"
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "min-w-0",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "font-semibold theme-text leading-tight",
-				children: label
-			}), /* @__PURE__ */ jsx("div", {
-				className: "theme-muted-text text-xs leading-snug mt-0.5",
-				children: description
-			})]
-		})]
+			"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 { AddMenu, Avatar, BareModal, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, Button, CREATE_MODAL_SELECT_FILTER_THRESHOLD, Callout, Card, CardHeader, CompactTable, ConfirmModal, ControlledCollapsiblePanel, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, CustomListbox, DEFAULT_PRESET, DescriptionList, DescriptionListItem, Dropdown, DropdownCaret, EmptyState, Filter, FilterPill, GlobalTooltip, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, IconButton, Indicator, Input, LetterBadge, Loader, Markdown, MaybeCollapsible, MethodButton, MultiSelectDropdown, Overview, PageHeader, Pagination, RequiredMark, SectionHeader, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, Textarea, Toggle, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, avatarInitials, contrastRatio, dangerButtonClasses, deriveTheme, filterOption, flattenOptions, formatTooltipContent, ghostButtonClasses, headerActionButtonClasses, inputClasses, isCategory, isDarkColor, isOption, modalPanelClasses, primaryButtonClasses, statusTextClass, toggleSetMember, truncationTooltipProps, useBreadcrumb, useClearBreadcrumbs, useCssIsDark, useHideBreadcrumbs, useNavigation, useNotify, usePersistedState, useProvisionCorsRules, useRelativeTime, useRepoSuggestions, useRunFile, useSetBreadcrumbs, useSetDefaultBreadcrumbs, useSlots, useStrings, useWorkflowJsonResolver };
+export { AddMenu, Avatar, BareModal, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, Button, CREATE_MODAL_SELECT_FILTER_THRESHOLD, Callout, Card, CardHeader, CompactTable, ConfirmModal, ControlledCollapsiblePanel, CopyCodeBlock, CopyToClipboard, CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea, CustomListbox, DEFAULT_PRESET, DescriptionList, DescriptionListItem, Dropdown, DropdownCaret, EmptyState, Filter, FilterPill, GlobalTooltip, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, IconButton, Indicator, Input, LetterBadge, Loader, Markdown, MaybeCollapsible, MethodButton, MultiSelectDropdown, Overview, PageHeader, Pagination, RequiredMark, SectionHeader, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, Textarea, Toggle, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, avatarInitials, contrastRatio, dangerButtonClasses, deriveTheme, filterOption, flattenOptions, formatTooltipContent, ghostButtonClasses, headerActionButtonClasses, inputClasses, isCategory, isDarkColor, isOption, modalPanelClasses, primaryButtonClasses, statusTextClass, toggleSetMember, truncationTooltipProps, useBreadcrumb, useClearBreadcrumbs, useCssIsDark, useHideBreadcrumbs, useNavigation, useNotify, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useSetBreadcrumbs, useSetDefaultBreadcrumbs, useSlots, useStrings, useWorkflowEngine, useWorkflowEngineLoader };