@parallelworks/ui 0.5.0 → 0.5.1

package/dist/index.js

@@ -1,9 +1,9 @@
 import { DEFAULT_PRESET, THEME_PRESETS, THEME_TOKENS, applyTheme, contrastRatio, deriveTheme, isDarkColor } from "./theme/index.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 { AddIcon, AlertIcon, AngleRightIcon, ChevronRightIcon, EditIcon, EyeIcon, EyeOffIcon, FilterIcon, LoaderIcon, MoreIcon, 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-CXSi9ELO.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-wC9G01Ou.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-D0ud8cd5.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-CkYT1isd.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";
@@ -11,9 +11,11 @@ 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-ByziK93x.js";
+import { s as useRowMenu } from "./chunks/RowContextMenu-D3G3DPQk.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useState } from "react";
+import React, { Fragment as Fragment$1, createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import Skeleton from "react-loading-skeleton";
 //#region src/components/DescriptionList.tsx
 function DescriptionListItem({ label, children, tooltip, className, ...props }) {
@@ -188,7 +190,7 @@ function MethodButton({ icon, label, description, href, className = "", ...props
 //#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),
+		className: cx("w-full bg-[var(--theme-card-bg)] backdrop-blur-xl border border-[var(--theme-border)] rounded-2xl", authShadow ? "shadow-[var(--theme-auth-shadow)]" : "shadow-[var(--theme-shadow)]", 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
 	});
 }
@@ -535,4 +537,228 @@ function SettingModeOption({ name, checked, onSelect, label, description, isFirs
 	});
 }
 //#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 };
+//#region src/components/Breadcrumbs.tsx
+var BreadcrumbContext = createContext({
+	breadcrumbs: [],
+	setBreadcrumbs: () => {},
+	rightsideBreadcrumb: null,
+	setRightsideBreadcrumb: () => {},
+	hidden: false,
+	setHidden: () => {},
+	titleActionSlot: null,
+	setTitleActionSlot: () => {},
+	rightActionSlot: null,
+	setRightActionSlot: () => {}
+});
+var useBreadcrumb = () => useContext(BreadcrumbContext);
+function BreadcrumbProvider({ children }) {
+	const [breadcrumbs, setBreadcrumbs] = React.useState([]);
+	const [rightsideBreadcrumb, setRightsideBreadcrumb] = React.useState(null);
+	const [hidden, setHidden] = React.useState(false);
+	const [titleActionSlot, setTitleActionSlot] = React.useState(null);
+	const [rightActionSlot, setRightActionSlot] = React.useState(null);
+	return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, {
+		value: {
+			breadcrumbs,
+			setBreadcrumbs,
+			rightsideBreadcrumb,
+			setRightsideBreadcrumb,
+			hidden,
+			setHidden,
+			titleActionSlot,
+			setTitleActionSlot,
+			rightActionSlot,
+			setRightActionSlot
+		},
+		children
+	});
+}
+function useSetBreadcrumbs(getBreadcrumbs) {
+	const { setBreadcrumbs } = useBreadcrumb();
+	useLayoutEffect(() => {
+		setBreadcrumbs(typeof getBreadcrumbs === "function" ? getBreadcrumbs() : getBreadcrumbs);
+	}, [getBreadcrumbs, setBreadcrumbs]);
+}
+var EMPTY_BREADCRUMBS = [];
+/** For pages that render their own header instead of the breadcrumb strip. */
+function useClearBreadcrumbs() {
+	useSetBreadcrumbs(EMPTY_BREADCRUMBS);
+}
+function useHideBreadcrumbs(hidden) {
+	const { setHidden } = useBreadcrumb();
+	useEffect(() => {
+		setHidden(hidden);
+		return () => setHidden(false);
+	}, [hidden, setHidden]);
+}
+//#endregion
+//#region src/components/PageHeader.tsx
+var headerActionButtonClasses = "flex items-center justify-center w-6 h-6 rounded-md shrink-0 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
+var headerAddButtonClasses = "inline-flex h-[26px] shrink-0 items-center gap-1.5 rounded-md border border-(--theme-border) px-2 text-xs font-medium cursor-pointer text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
+/** With menu, the plus opens a chooser; otherwise navigates to or calls the
+* single action. `word` is the visible verb; `label` stays the full action for
+* the tooltip and screen readers. */
+function HeaderAddButton({ to, onClick, label, word = "add", menu }) {
+	const { common } = useStrings();
+	const Link = useLink();
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
+	if (menu) return /* @__PURE__ */ jsx(AddMenu, {
+		items: menu,
+		label,
+		buttonClassName: headerAddButtonClasses,
+		children: content
+	});
+	if (to) return /* @__PURE__ */ jsx(Link, {
+		to,
+		"aria-label": label,
+		title: label,
+		className: headerAddButtonClasses,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		"aria-label": label,
+		title: label,
+		className: headerAddButtonClasses,
+		children: content
+	});
+}
+function HeaderActionMenu({ items, label = "Actions" }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(AddMenu, {
+		items,
+		label,
+		buttonClassName: headerActionButtonClasses,
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+	});
+}
+/** The header "…" trigger for a RowMenuItem menu — same rendering (submenus,
+* destructive styling) as the list pages' right-click context menus. */
+function HeaderRowMenu({ items, label = "Actions" }) {
+	const { openMenu, contextMenu } = useRowMenu();
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		className: headerActionButtonClasses,
+		onClick: (e) => {
+			const r = e.currentTarget.getBoundingClientRect();
+			openMenu(r.left, r.bottom + 4, items);
+		},
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+	}), contextMenu] });
+}
+function HeaderEditButton({ to, onClick, label = "Edit", disabled, tooltip }) {
+	const Link = useLink();
+	const tooltipProps = tooltip ? {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": tooltip
+	} : {};
+	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
+		to,
+		"aria-label": label,
+		...tooltip ? {} : { title: label },
+		className: headerActionButtonClasses,
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled,
+		"aria-label": label,
+		title: tooltip ? void 0 : label,
+		className: cx(headerActionButtonClasses, disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"),
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+	});
+}
+/** Renders nothing when the modern breadcrumb strip isn't mounted (classic chrome or self-headered pages). */
+function BreadcrumbsTitleAction({ children }) {
+	const { titleActionSlot } = useBreadcrumb();
+	if (!titleActionSlot) return null;
+	return createPortal(children, titleActionSlot);
+}
+function BreadcrumbsRightAction({ children }) {
+	const { rightActionSlot } = useBreadcrumb();
+	if (!rightActionSlot) return null;
+	return createPortal(children, rightActionSlot);
+}
+var breadcrumbsActionClasses = "flex items-center gap-1 link text-xs whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed";
+function BreadcrumbsActionButton({ icon: Icon, label, to, onClick, disabled, tooltip }) {
+	const Link = useLink();
+	const tip = tooltip ? {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": tooltip
+	} : {};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
+	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
+		to,
+		className: breadcrumbsActionClasses,
+		...tip,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled,
+		className: breadcrumbsActionClasses,
+		...tip,
+		children: content
+	});
+}
+function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, className, sticky = true, stickyTopClassName = "top-0" }) {
+	const { setHidden } = useBreadcrumb();
+	const Link = useLink();
+	const { breadcrumbPin } = useSlots();
+	useLayoutEffect(() => {
+		setHidden(true);
+		return () => setHidden(false);
+	}, [setHidden]);
+	const crumbs = [...breadcrumbs ?? []];
+	const lastLabel = crumbs[crumbs.length - 1]?.label;
+	if (title !== null && title !== void 0 && title !== lastLabel) crumbs.push({ label: title });
+	const crumbRow = crumbs.length > 0 && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5 min-w-0",
+		children: [
+			/* @__PURE__ */ jsx("nav", {
+				"aria-label": "Breadcrumb",
+				className: "flex items-center gap-2 min-w-0 text-[13px]",
+				children: crumbs.map((crumb, idx) => {
+					if (idx === crumbs.length - 1) return /* @__PURE__ */ jsx("h1", {
+						className: "m-0 text-[13px] font-medium leading-none text-(--theme-app) truncate",
+						children: crumb.label
+					}, `${crumb.label}-${idx}`);
+					return /* @__PURE__ */ jsxs(Fragment$1, { children: [crumb.href ? /* @__PURE__ */ jsx(Link, {
+						to: crumb.href,
+						className: "text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors cursor-pointer whitespace-nowrap",
+						children: crumb.label
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-(--theme-muted-text-color) whitespace-nowrap",
+						children: crumb.label
+					}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, `${crumb.label}-${idx}`);
+				})
+			}),
+			titleAction,
+			breadcrumbPin?.({ crumbs })
+		]
+	});
+	const actionCluster = actions && /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1.5 shrink-0",
+		children: actions
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(sticky && cx("sticky z-20", stickyTopClassName), "w-full bg-(--theme-app-bg)", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex items-center justify-between gap-6 px-4 h-11", crumbRow && "border-b border-(--theme-border)"),
+			children: [crumbRow || /* @__PURE__ */ jsx("div", {}), actionCluster]
+		}), toolbar && /* @__PURE__ */ jsx("div", {
+			className: "px-4",
+			children: toolbar
+		})]
+	});
+}
+//#endregion
+export { AddMenu, BareModal, BreadcrumbProvider, BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, 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, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, IconButton, Indicator, Input, LetterBadge, Loader, Markdown, MaybeCollapsible, MethodButton, MultiSelectDropdown, Overview, PageHeader, 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, useBreadcrumb, useClearBreadcrumbs, useCssIsDark, useHideBreadcrumbs, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSetBreadcrumbs, useSlots, useStrings, useWorkflowJsonResolver };

package/dist/list/index.js

@@ -1,2 +1,3 @@
-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";
+import { a as toRowMenuItem, c as useRowMenuActive, i as rowContextMenuProps, n as assembleRowMenu, o as toolbarActionToRowAction, r as copySubmenu, s as useRowMenu, t as MoreButton } from "../chunks/RowContextMenu-D3G3DPQk.js";
+import { C as listTableProps, S as listTableFixedProps, _ 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, 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, x as actionsColumnWidth, y as NameCell } from "../chunks/list-CGbR-ueU.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/logviewer/index.js

@@ -1,5 +1,5 @@
 import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon, XIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "../chunks/Provider-jQCAN3NN.js";
+import { c as useStrings, i as useNotify } from "../chunks/Provider-wC9G01Ou.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";

package/dist/styles/theme.css

@@ -46,6 +46,7 @@
   --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
   --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
   --theme-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
+  --theme-auth-shadow: 0 25px 80px -20px rgba(0, 0, 0, 0.2), 0 10px 30px -10px rgba(0, 0, 0, 0.1);
 }
 
 @utility theme-element {