@parallelworks/ui 0.3.1 → 0.5.0

package/dist/form/index.js

@@ -1,10 +1,10 @@
 import { AngleRightIcon, EyeIcon, EyeOffIcon, SuccessCheckmark, TrashIcon } from "../icons.js";
-import { c as useStrings, s as useSlots } from "../chunks/Provider-DvVvScTQ.js";
+import { c as useStrings, s as useSlots } from "../chunks/Provider-jQCAN3NN.js";
 import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-WgbiC_nd.js";
-import { a as UncontrolledCollapsiblePanel, c as Dropdown, f as isCategory, n as SectionHeader, o as MultiSelectDropdown, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle } from "../chunks/SwitchToggle-2uRw8ZeJ.js";
-import { t as Loader } from "../chunks/Loader-DQiZ75fa.js";
+import { a as UncontrolledCollapsiblePanel, c as Dropdown, f as isCategory, n as SectionHeader, o as MultiSelectDropdown, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle } from "../chunks/SwitchToggle-D0ud8cd5.js";
+import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
 import { n as StatusDot } from "../chunks/StatusBadge-DXp4zkSd.js";
-import { n as Table } from "../chunks/Table-C5z6qWjM.js";
+import { n as Table } from "../chunks/Table-ByziK93x.js";
 import { a as resolvedFlag, c as FieldWrapper, i as initializeValues, n as flattenGroups, o as applySecondaryField, r as impureSetValueFromPath, s as findSecondaryOption, t as enforceOneMustBeTrue } from "../chunks/lib-DTgL8klR.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/index.d.ts

@@ -13,10 +13,15 @@ export { default as CustomListbox } from './components/Listbox.js';
 export { default as Loader } from './components/Loader.js';
 export { default as Markdown } from './components/Markdown.js';
 export type { MarkdownProps } from './components/Markdown.js';
-export { default as Modal, type ModalProps } from './components/Modal.js';
+export { BareModal, modalPanelClasses } from './components/BareModal.js';
+export { ConfirmModal } from './components/ConfirmModal.js';
+export { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, type CreateModalSelectOption, CreateModalSwitch, CreateModalTextarea, } from './components/CreateModal.js';
+export { AddMenu, type HeaderAddMenuItem } from './components/AddMenu.js';
+export { dangerButtonClasses, ghostButtonClasses, primaryButtonClasses, } from './components/ghostButton.js';
 export { default as MultiSelectDropdown } from './components/MultiSelect.js';
 export { Overview } from './components/Overview.js';
 export { UIProvider, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowJsonResolver, type RunFileResult, type WorkflowJsonRef, type UIData, type UINavigation, type UINotify, type UISlots, type UIStrings, } from './components/Provider.js';
+export { useCssIsDark } from './components/useCssIsDark.js';
 export { Indicator } from './components/Indicator.js';
 export { ControlledCollapsiblePanel, MaybeCollapsible, UncontrolledCollapsiblePanel, } from './components/CollapsiblePanel.js';
 export { default as SectionHeader } from './components/SectionHeader.js';
@@ -25,3 +30,18 @@ export { StatusBadge, StatusDot } from './components/StatusBadge.js';
 export { default as SwitchToggle } from './components/SwitchToggle.js';
 export { CompactTable, Table } from './components/Table.js';
 export { formatTooltipContent, GlobalTooltip, TOOLTIP_ID, TooltipInfo, } from './components/Tooltip.js';
+export { Button, MethodButton } from './components/Button.js';
+export { Card, CardHeader } from './components/Card.js';
+export { Input, Textarea } from './components/Input.js';
+export { inputClasses } from './components/inputClasses.js';
+export { IconButton } from './components/IconButton.js';
+export { Toggle } from './components/Toggle.js';
+export { LetterBadge } from './components/LetterBadge.js';
+export { FilterPill } from './components/FilterPill.js';
+export { default as Filter } from './components/Filter.js';
+export { default as Sort, type TDirection } from './components/Sort.js';
+export { Pagination } from './components/Pagination.js';
+export { default as SettingsCard } from './components/SettingsCard.js';
+export { default as SettingsGroup } from './components/SettingsGroup.js';
+export { SettingRow, SettingSection } from './components/SettingRow.js';
+export { SettingModeOption } from './components/SettingModeOption.js';

package/dist/index.js

@@ -1,17 +1,19 @@
 import { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor } from "./theme/index.js";
-import { i as Callout, n as CopyCodeBlock, r as CopyToClipboard, t as Markdown } from "./chunks/Markdown-C5Re2ezs.js";
-import { a as useProvisionCorsRules, c as useStrings, i as useNotify, l as useWorkflowJsonResolver, o as useRunFile, r as useNavigation, s as useSlots, t as UIProvider } from "./chunks/Provider-DvVvScTQ.js";
+import { AlertIcon, AngleRightIcon, EyeIcon, EyeOffIcon, FilterIcon, LoaderIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon } from "./icons.js";
+import { a as CreateModalSwitch, c as ConfirmModal, d as primaryButtonClasses, f as Markdown, h as Callout, i as CreateModalSelect, l as dangerButtonClasses, m as CopyToClipboard, n as CreateModalAutocompleteField, o as CreateModalTextarea, p as CopyCodeBlock, r as CreateModalField, s as AddMenu, t as CreateModal, u as ghostButtonClasses } from "./chunks/CreateModal-6zZZHxCI.js";
+import { a as useProvisionCorsRules, c as useStrings, i as useNotify, l as useWorkflowJsonResolver, n as useLink, o as useRunFile, r as useNavigation, s as useSlots, t as UIProvider } from "./chunks/Provider-jQCAN3NN.js";
 import { i as formatTooltipContent, n as TOOLTIP_ID, r as TooltipInfo, t as GlobalTooltip } from "./chunks/Tooltip-WgbiC_nd.js";
-import { a as UncontrolledCollapsiblePanel, c as Dropdown, d as flattenOptions, f as isCategory, i as MaybeCollapsible, l as DropdownCaret, n as SectionHeader, o as MultiSelectDropdown, p as isOption, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle, u as filterOption } from "./chunks/SwitchToggle-2uRw8ZeJ.js";
-import { t as Loader } from "./chunks/Loader-DQiZ75fa.js";
-import { t as Modal } from "./chunks/Modal-sOUEwebV.js";
+import { a as UncontrolledCollapsiblePanel, c as Dropdown, d as flattenOptions, f as isCategory, i as MaybeCollapsible, l as DropdownCaret, n as SectionHeader, o as MultiSelectDropdown, p as isOption, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle, u as filterOption } from "./chunks/SwitchToggle-D0ud8cd5.js";
+import { t as Loader } from "./chunks/Loader-BXoXTZGc.js";
+import { n as modalPanelClasses, t as BareModal } from "./chunks/BareModal-DBa84JZO.js";
+import { t as useCssIsDark } from "./chunks/useCssIsDark-DHr05dG2.js";
 import { t as Indicator } from "./chunks/Indicator-hBSIxOPK.js";
 import { t as SwitchToggleSmall } from "./chunks/SwitchToggleSmall-FcsaYSTs.js";
 import { n as StatusDot, t as StatusBadge } from "./chunks/StatusBadge-DXp4zkSd.js";
-import { n as Table, t as CompactTable } from "./chunks/Table-C5z6qWjM.js";
+import { n as Table, t as CompactTable } from "./chunks/Table-ByziK93x.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { forwardRef, useState } from "react";
 import Skeleton from "react-loading-skeleton";
 //#region src/components/DescriptionList.tsx
 function DescriptionListItem({ label, children, tooltip, className, ...props }) {
@@ -110,4 +112,427 @@ function Overview({ Icon, name, type, children, right, className, loading, iconS
 	});
 }
 //#endregion
-export { Callout, CompactTable, ControlledCollapsiblePanel, CopyCodeBlock, CopyToClipboard, CustomListbox, DEFAULT_PRESET, DescriptionList, DescriptionListItem, Dropdown, DropdownCaret, EmptyState, GlobalTooltip, Indicator, Loader, Markdown, MaybeCollapsible, Modal, MultiSelectDropdown, Overview, SectionHeader, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, contrastRatio, deriveTheme, filterOption, flattenOptions, formatTooltipContent, isCategory, isDarkColor, isOption, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowJsonResolver };
+//#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";
+	const variantClasses = {
+		primary: "bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] text-white shadow-[0_4px_14px_0_rgba(59,130,246,0.3)] hover:enabled:-translate-y-0.5 hover:enabled:shadow-[0_6px_20px_0_rgba(59,130,246,0.4)] active:enabled:translate-y-0",
+		secondary: "bg-[var(--theme-muted-panel-bg)] text-[var(--theme-app)] border border-[var(--theme-border)] hover:enabled:bg-[var(--theme-border)]",
+		outline: "bg-transparent text-[var(--theme-app)] border border-[var(--theme-border)] hover:enabled:bg-[var(--theme-muted-panel-bg)] hover:enabled:border-[var(--theme-muted-text-color)]",
+		ghost: "bg-transparent text-[var(--theme-muted-text-color)] hover:enabled:text-[var(--theme-app)] hover:enabled:bg-[var(--theme-muted-panel-bg)]"
+	};
+	const sizeClasses = {
+		sm: "py-2 px-4 text-[0.8125rem]",
+		default: "py-3 px-5 text-sm",
+		lg: "py-4 px-6 text-base"
+	};
+	const widthClass = fullWidth ? "w-full" : "w-auto";
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		disabled: disabled || loading,
+		className: cx(baseClasses, variantClasses[variant], sizeClasses[size], widthClass, className),
+		...props,
+		children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "size-[18px]" }), children] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon && iconPosition === "left" && /* @__PURE__ */ jsx("span", {
+				className: "flex items-center",
+				children: icon
+			}),
+			children,
+			icon && iconPosition === "right" && /* @__PURE__ */ jsx("span", {
+				className: "flex items-center",
+				children: icon
+			})
+		] })
+	});
+});
+Button.displayName = "Button";
+function MethodButton({ icon, label, description, href, className = "", ...props }) {
+	const Link = useLink();
+	const baseClasses = "flex items-center w-full p-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-xl text-[var(--theme-app)] text-[0.9375rem] font-medium cursor-pointer transition-all duration-200 no-underline mb-3 last:mb-0 hover:bg-[var(--theme-border)] hover:border-[var(--theme-muted-text-color)] hover:-translate-y-0.5 active:translate-y-0";
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon && /* @__PURE__ */ jsx("span", {
+			className: "size-10 rounded-lg bg-gradient-to-br from-[var(--gradient-start,var(--theme-element))] to-[var(--gradient-mid,var(--theme-link))] flex items-center justify-center shrink-0 mr-4 [&_svg]:size-5 [&_svg]:text-white",
+			children: icon
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex-1 text-left",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "block font-semibold text-[var(--theme-app)]",
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				className: "block text-[0.8125rem] text-[var(--theme-muted-text-color)] font-normal mt-0.5",
+				children: description
+			})]
+		}),
+		/* @__PURE__ */ jsx(AngleRightIcon, { className: "size-5 text-[var(--theme-muted-text-color)] shrink-0 ml-2 transition-all duration-200 group-hover:translate-x-[3px] group-hover:text-[var(--theme-app)]" })
+	] });
+	if (href) {
+		if (href.startsWith("/api/") || href.startsWith("http")) return /* @__PURE__ */ jsx("a", {
+			href,
+			className: cx("group", baseClasses, className),
+			children: content
+		});
+		return /* @__PURE__ */ jsx(Link, {
+			to: href,
+			className: cx("group", baseClasses, className),
+			children: content
+		});
+	}
+	return /* @__PURE__ */ jsx("button", {
+		className: cx("group", baseClasses, className),
+		...props,
+		children: content
+	});
+}
+//#endregion
+//#region src/components/Card.tsx
+function Card({ children, className = "", wide, compact, interactive, authShadow }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("w-full bg-[var(--theme-panel-bg)] backdrop-blur-xl border border-[var(--theme-border)] rounded-2xl", authShadow ? "shadow-[0_25px_80px_-20px_rgba(0,0,0,0.4),0_10px_30px_-10px_rgba(0,0,0,0.25)]" : "shadow-md", wide && "max-w-[560px] p-8", compact && "max-w-[400px] p-6", !wide && !compact && "max-w-[520px] p-10", interactive && "ds-card-interactive cursor-pointer", className),
+		children
+	});
+}
+function CardHeader({ badge, title, description, className = "", align = "center" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(align === "center" ? "text-center" : "text-left", "mb-6", className),
+		children: [
+			badge && /* @__PURE__ */ jsx("div", {
+				className: "inline-flex items-center gap-1.5 py-1.5 px-3 text-xs font-medium bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-full text-[var(--theme-muted-text-color)] mb-4 transition-colors duration-200",
+				children: badge
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl font-bold tracking-tight text-[var(--theme-app)]",
+				style: { letterSpacing: "-0.025em" },
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "text-[var(--theme-muted-text-color)] text-sm leading-relaxed mt-2",
+				children: description
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Input.tsx
+var Input = forwardRef(({ label, error, className = "", mono, type, ...props }, ref) => {
+	const [showPassword, setShowPassword] = useState(false);
+	const isPassword = type === "password";
+	const inputType = isPassword && showPassword ? "text" : type;
+	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__ */ jsx("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: props.id || props.name,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: isPassword ? "relative w-full" : "",
+				children: [/* @__PURE__ */ jsx("input", {
+					ref,
+					type: inputType,
+					className: inputClasses,
+					...props
+				}), 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", {
+				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, ...props }, ref) => {
+	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__ */ jsx("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: props.id || props.name,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				ref,
+				className: textareaClasses,
+				...props
+			}),
+			error && /* @__PURE__ */ jsxs("span", {
+				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/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)]"),
+		ghost: cx("bg-transparent text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-muted-panel-bg)] hover:text-[var(--theme-app)]", active && "text-[var(--theme-element)]"),
+		primary: cx("bg-[var(--theme-element)] text-white", "hover:bg-[var(--theme-element)]/90", active && "ring-2 ring-[var(--theme-element)]/50"),
+		success: cx("bg-[#22c55e] text-white", "hover:bg-[#22c55e]/90", active && "ring-2 ring-[#22c55e]/50")
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"aria-label": label,
+		disabled,
+		"data-tooltip-id": showTooltip ? TOOLTIP_ID : void 0,
+		"data-tooltip-content": label,
+		"data-tooltip-delay-show": 300,
+		"data-tooltip-class-name": "!bg-[var(--theme-app)] !text-[var(--theme-app-bg)] !text-xs !py-1 !px-2 !rounded-md",
+		className: cx("inline-flex items-center justify-center rounded-lg", "transition-all duration-200 cursor-pointer", "disabled:opacity-50 disabled:cursor-not-allowed", sizeClasses[size], variantClasses[variant], className),
+		...props,
+		children: icon
+	});
+});
+IconButton.displayName = "IconButton";
+//#endregion
+//#region src/components/Toggle.tsx
+function Toggle({ checked, onChange, disabled, label }) {
+	return /* @__PURE__ */ jsxs("label", {
+		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
+//#region src/components/LetterBadge.tsx
+/** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
+* an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
+function LetterBadge({ text, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
+		children: text
+	});
+}
+//#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 }) {
+	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 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", {
+			onClick: () => sort(currentlySorted, currentDirection),
+			children: /* @__PURE__ */ jsx(SortIcon, {
+				currentDirection,
+				currentlySorted,
+				name
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/Pagination.tsx
+function Pagination({ endingNumber, endingTime, nextCallback, prevCallback, roundedBottom, startingNumber, startingTime, nextDisabled, prevDisabled, name, useTimeRange = false }) {
+	const t = useStrings().list;
+	return /* @__PURE__ */ jsxs("nav", {
+		className: cx(roundedBottom && "rounded-b-2xl", "theme-muted-panel flex items-center justify-between border-t theme-border  px-4 py-1 sm:px-6"),
+		"aria-label": "Pagination",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cx("hidden", (startingNumber !== void 0 && startingNumber !== null && endingNumber !== void 0 && endingNumber !== null || startingTime && endingTime) && "sm:block"),
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-sm whitespace-nowrap",
+				children: useTimeRange && startingTime && endingTime ? t.paginationShowingTimeRange(name ?? "", startingTime, endingTime) : t.paginationShowing(name ?? "", startingNumber ?? "", endingNumber ?? "")
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 justify-between sm:justify-end gap-x-2",
+			children: [/* @__PURE__ */ jsx("button", {
+				disabled: prevDisabled,
+				onClick: prevCallback,
+				className: cx("link text-sm", prevDisabled && "disabled"),
+				children: t.paginationPrevious
+			}), /* @__PURE__ */ jsx("button", {
+				disabled: nextDisabled,
+				onClick: nextCallback,
+				className: cx("link text-sm", nextDisabled && "disabled"),
+				children: t.paginationNext
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/components/SettingsCard.tsx
+/**
+* A settings card: an optional sentence-case section label sits above a
+* bordered panel of rows. The label carries the breathing-room rhythm between
+* cards; the rows inside provide their own dividers via SettingRow's `isFirst`.
+*/
+function SettingsCard({ title, description, action, actionAlign = "adjacent", overflowVisible, children, className }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cx("mt-10 first:mt-0", className),
+		children: [(title || action) && /* @__PURE__ */ jsxs("div", {
+			className: "mb-3 px-0.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cx("flex items-center gap-1.5", actionAlign === "right" && "justify-between"),
+				children: [title && /* @__PURE__ */ jsx("h2", {
+					className: "text-[15px] font-semibold theme-text leading-none",
+					children: title
+				}), action]
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-xs theme-muted-text mt-1.5 leading-snug",
+				children: description
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("panel", overflowVisible ? "overflow-visible" : "overflow-hidden"),
+			children
+		})]
+	});
+}
+//#endregion
+//#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
+//#region src/components/SettingRow.tsx
+function SettingRow({ label, htmlFor, helpText, children, isFirst, fill, onClick }) {
+	return /* @__PURE__ */ jsxs("div", {
+		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/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
+export { AddMenu, BareModal, Button, 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, IconButton, Indicator, Input, LetterBadge, Loader, Markdown, MaybeCollapsible, MethodButton, MultiSelectDropdown, Overview, Pagination, SectionHeader, SettingModeOption, SettingRow, SettingSection, SettingsCard, SettingsGroup, Sort, StatusBadge, StatusDot, SwitchToggle, SwitchToggleSmall, THEME_PRESETS, THEME_TOKENS, TOOLTIP_ID, Table, Textarea, Toggle, TooltipInfo, UIProvider, UncontrolledCollapsiblePanel, applyTheme, contrastRatio, dangerButtonClasses, deriveTheme, filterOption, flattenOptions, formatTooltipContent, ghostButtonClasses, inputClasses, isCategory, isDarkColor, isOption, modalPanelClasses, primaryButtonClasses, useCssIsDark, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSlots, useStrings, useWorkflowJsonResolver };

package/dist/list/HoverCard.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+type HoverCoords = {
+    x: number;
+    y: number;
+};
+export declare function useHoverCard<T extends HTMLElement>(): {
+    triggerRef: import("react").RefObject<T | null>;
+    coords: HoverCoords | null;
+    scheduleOpen: () => void;
+    scheduleClose: () => void;
+    keepOpen: () => void;
+};
+export declare function HoverCardSurface({ x, y, widthClassName, relayoutKey, onKeepOpen, onLeave, children, }: {
+    x: number;
+    y: number;
+    widthClassName: string;
+    relayoutKey?: unknown;
+    onKeepOpen: () => void;
+    onLeave: () => void;
+    children: ReactNode;
+}): import("react").ReactPortal;
+export {};

package/dist/list/ListPager.d.ts

@@ -0,0 +1,7 @@
+/** Footer pager bar for paginated new-nav lists: "{start}–{end} of {total}" with prev/next. Renders nothing for a single page. */
+export declare function ListPager({ page, pageSize, total, onPageChange, }: {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+}): import("react").JSX.Element | null;

package/dist/list/ListViewControls.d.ts

@@ -0,0 +1,12 @@
+import type { ListView } from './listView.js';
+/** Shared chrome for the toolbar control buttons (Filter, Display, Search) so
+ * they read as a consistent button cluster — matched by ListSearchControl. */
+export declare const listControlButtonClasses = "relative flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
+export declare function ListDisplayMenu<T>({ view, label, }: {
+    view: ListView<T>;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function ListFilterMenu<T>({ view, label, }: {
+    view: ListView<T>;
+    label?: string;
+}): import("react").JSX.Element | null;

package/dist/list/index.d.ts

@@ -1,2 +1,8 @@
 export { assembleRowMenu, copySubmenu, MoreButton, rowContextMenuProps, toolbarActionToRowAction, toRowMenuItem, useRowMenu, useRowMenuActive, type OpenMenu, type RowAction, type RowMenuItem, } from './RowContextMenu.js';
 export { actionsColumnWidth, GroupRow, ListActionsHeader, ListError, ListSkeleton, listTableFixedProps, listTableProps, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, } from './ListTable.js';
+export { DEFAULT_ORDER, FAVORITE_ORDER, useListView, type ActionDef, type ColumnDef, type FilterFacet, type ListView, type ListViewChrome, type ListViewConfig, type OrderByOption, } from './listView.js';
+export { ListCount, ListSearchControl, useListSearch, type ListSearch, } from './listSearch.js';
+export { listControlButtonClasses, ListDisplayMenu, ListFilterMenu, } from './ListViewControls.js';
+export { ListPager } from './ListPager.js';
+export { HoverCardSurface, useHoverCard } from './HoverCard.js';
+export { isTextEntryContext } from './textEntry.js';

package/dist/list/index.js

@@ -1,2 +1,2 @@
-import { _ as useRowMenu, a as NAME_MIN_WIDTH_PX, c as actionsColumnWidth, d as MoreButton, f as assembleRowMenu, g as toolbarActionToRowAction, h as toRowMenuItem, i as ListSkeleton, l as listTableFixedProps, m as rowContextMenuProps, n as ListActionsHeader, o as NameCell, p as copySubmenu, r as ListError, s as RowSelectCheckbox, t as GroupRow, u as listTableProps, v as useRowMenuActive } from "../chunks/list-7PyDF1tz.js";
-export { GroupRow, ListActionsHeader, ListError, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, assembleRowMenu, copySubmenu, listTableFixedProps, listTableProps, rowContextMenuProps, toRowMenuItem, toolbarActionToRowAction, useRowMenu, useRowMenuActive };
+import { A as useRowMenu, C as listTableProps, D as rowContextMenuProps, E as copySubmenu, O as toRowMenuItem, S as listTableFixedProps, T as assembleRowMenu, _ as ListSkeleton, a as ListSearchControl, b as RowSelectCheckbox, c as ListFilterMenu, d as DEFAULT_ORDER, f as FAVORITE_ORDER, g as ListError, h as ListActionsHeader, i as ListCount, j as useRowMenuActive, k as toolbarActionToRowAction, l as listControlButtonClasses, m as GroupRow, n as useHoverCard, o as useListSearch, p as useListView, r as ListPager, s as ListDisplayMenu, t as HoverCardSurface, u as isTextEntryContext, v as NAME_MIN_WIDTH_PX, w as MoreButton, x as actionsColumnWidth, y as NameCell } from "../chunks/list-CvDWt0TC.js";
+export { DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardSurface, ListActionsHeader, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPager, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, actionsColumnWidth, assembleRowMenu, copySubmenu, isTextEntryContext, listControlButtonClasses, listTableFixedProps, listTableProps, rowContextMenuProps, toRowMenuItem, toolbarActionToRowAction, useHoverCard, useListSearch, useListView, useRowMenu, useRowMenuActive };

package/dist/list/listSearch.d.ts

@@ -0,0 +1,27 @@
+/** Pass `enabled: false` to suspend the global ⌘F/`/` hijack (e.g. when search isn't shown and browser Find should stay active). */
+export declare function useListSearch(enabled?: boolean, storageKey?: string): {
+    filter: string;
+    setFilter: import("react").Dispatch<import("react").SetStateAction<string>>;
+    searchOpen: boolean;
+    openSearch: () => void;
+    closeSearch: () => void;
+    clearSearch: () => void;
+    terms: string[];
+    addTerm: (term: string) => void;
+    removeTerm: (term: string) => void;
+    queries: string[];
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+};
+export type ListSearch = ReturnType<typeof useListSearch>;
+export declare function ListSearchControl({ search, placeholder, label, }: {
+    search: ListSearch;
+    placeholder: string;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function ListCount({ total, matches, filterActive, noun, nounPlural, }: {
+    total: number;
+    matches: number;
+    filterActive: boolean;
+    noun: string;
+    nounPlural: string;
+}): import("react").JSX.Element;