@parallelworks/ui 0.5.3 → 0.7.0

package/dist/components/CreateModal.d.ts

@@ -73,10 +73,15 @@ export interface CreateModalSelectOption {
     icon?: ReactNode;
     /** Category header to group this option under in the dropdown. */
     group?: string;
+    /** Hidden behind the group's toggle row until the group is expanded. */
+    collapsible?: boolean;
 }
+/** Callers gating collapse on list size must use this same threshold so
+ * collapsed rows always come with a filter to find them. */
+export declare const CREATE_MODAL_SELECT_FILTER_THRESHOLD = 8;
 /** Compact property pill with a dropdown of options. Options may carry leading
  * icons and group headers (e.g. Clusters vs Kubernetes). */
-export declare function CreateModalSelect({ label, icon, value, options, onChange, disabled, disabledHint, tooltip, }: {
+export declare function CreateModalSelect({ label, icon, value, options, onChange, disabled, disabledHint, tooltip, collapsedLabel, }: {
     label: string;
     icon?: ReactNode;
     value?: string;
@@ -88,5 +93,7 @@ export declare function CreateModalSelect({ label, icon, value, options, onChang
     disabledHint?: string;
     /** Help text surfaced on hover (explains what the pill selects). */
     tooltip?: string;
+    /** Label for the toggle row hiding a group's collapsible options. */
+    collapsedLabel?: (count: number) => string;
 }): import("react").JSX.Element;
 export {};

package/dist/components/Dropdown.d.ts

@@ -19,6 +19,8 @@ export interface IProps {
     loading?: boolean;
     allowCustomValue?: boolean;
     customValueLabel?: string;
+    /** Label for the toggle row hiding a category's collapsible options. */
+    collapsedLabel?: (count: number) => string;
     portalEl?: HTMLElement;
 }
 export default function Dropdown(props: IProps): import("react").JSX.Element;

package/dist/components/Provider.d.ts

@@ -69,6 +69,22 @@ export interface UIStrings {
         showDebug: string;
         filterLogs: string;
         download: string;
+        beginningOfLog: string;
+        loadingOlderEntries: string;
+        loadOlderEntries: string;
+        timeRange: string;
+        timeRangeActive: string;
+        timeRangeOn: string;
+        filterByTimeRange: string;
+        timeRangeHelp: string;
+        timeRangeFrom: string;
+        timeRangeTo: string;
+        apply: string;
+        clear: string;
+        invalidStartTime: string;
+        invalidEndTime: string;
+        endBeforeStart: string;
+        endInFuture: string;
     };
     dag: {
         workflow: string;
@@ -332,6 +348,7 @@ export interface UIStrings {
         filter: string;
         clear: string;
         pager: (start: number, end: number, total: number) => string;
+        perPage: string;
         paginationPrevious: string;
         paginationNext: string;
         paginationShowing: (name: string, start: number | string, end: number | string) => ReactNode;

package/dist/components/dropdownUtils.d.ts

@@ -6,6 +6,8 @@ export interface IOptions<T = unknown> {
     disabled?: boolean;
     icon?: React.ReactNode;
     description?: string;
+    /** Hidden behind the category's toggle row until the category is expanded. */
+    collapsible?: boolean;
 }
 export interface ICategory<T = unknown> {
     category?: string;
@@ -15,14 +17,19 @@ export declare function isCategory<T>(option: ICategory<T> | IOptions<T> | strin
 export declare function isOption<T>(option: ICategory<T> | IOptions<T> | string): option is IOptions<T>;
 export declare function flattenOptions<T>(options: (ICategory<T> | IOptions<T> | string)[]): (IOptions<T> | ICategory<T>)[];
 export declare function filterOption<T>(option: IOptions<T>, query: string): boolean;
-export type FlatOption = IOptions & {
+export declare function toggleSetMember<T>(set: ReadonlySet<T>, member: T): Set<T>;
+export type FlatDisplayOption = IOptions & {
     category?: boolean;
+    /** Set on a category's toggle row to the category it expands/collapses. */
+    toggle?: string;
 };
-export declare function flattenFilteredOptions({ options, query, selectedValue, allowCustomValue, customValueLabel, }: {
+export declare function flattenDisplayOptions({ options, query, expandedCategories, collapsedLabel, selectedValue, allowCustomValue, customValueLabel, }: {
     options: (ICategory | IOptions)[];
     query: string;
+    expandedCategories?: ReadonlySet<string>;
+    collapsedLabel?: (count: number) => string;
     selectedValue?: unknown;
     allowCustomValue?: boolean;
     customValueLabel?: string;
-}): FlatOption[];
+}): FlatDisplayOption[];
 export declare function DropdownCaret(): React.JSX.Element;

package/dist/editor/index.js

@@ -1,2 +1,2 @@
-import { a as EditorField, i as FormCodePanel, n as defineEditorThemes, o as Editor, r as getThemeName, t as setupMonacoWorkers } from "../chunks/editor-4ZuZruLz.js";
+import { a as EditorField, i as FormCodePanel, n as defineEditorThemes, o as Editor, r as getThemeName, t as setupMonacoWorkers } from "../chunks/editor-BH81U5-C.js";
 export { Editor, EditorField, FormCodePanel, defineEditorThemes, getThemeName, setupMonacoWorkers };

package/dist/file-explorer/index.js

@@ -1,12 +1,12 @@
 import { AccessIcon, AlertIcon, AngleDownIcon, AngleRightIcon, AngleUpIcon, ChevronLeftIcon, ChevronRightIcon, ClipboardIcon, CloseIcon, CloudUploadIcon, CollapseIcon, CustomizeIcon, DiskIcon, DocumentIcon, DownloadFileIcon, ExpandIcon, ExpandVerticalIcon, EyeIcon, FileIcon, FileTextIcon, FolderIcon, FolderOpenIcon, ImageIcon, LinkIcon, LockIcon, MinimizeIcon, MusicIcon, PdfIcon, RefreshIcon, ShareIcon, SpreadsheetIcon, SuccessIcon, TrashIcon, UploadIcon, UserIcon, VideoIcon, ZipIcon, ZoomInIcon, ZoomOutIcon } from "../icons.js";
-import { d as Markdown, f as CopyCodeBlock, m as Callout, p as CopyToClipboard, s as ConfirmModal, t as CreateModal } from "../chunks/CreateModal-DEvWkdFl.js";
-import { a as useProvisionCorsRules, c as useStrings, i as useNotify, s as useSlots } from "../chunks/Provider-BIL5347a.js";
+import { c as ConfirmModal, f as Markdown, h as Callout, m as CopyToClipboard, n as CreateModal, p as CopyCodeBlock } from "../chunks/CreateModal-Lkl3Eek4.js";
+import { a as useProvisionCorsRules, c as useStrings, i as useNotify, s as useSlots } from "../chunks/Provider-CfFV-vc5.js";
 import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-WgbiC_nd.js";
+import { t as StatusBadge } from "../chunks/StatusBadge-P6C2tv7Z.js";
 import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
-import { d as copySubmenu, g as useRowMenuActive, h as useRowMenu, l as MoreButton, u as assembleRowMenu } from "../chunks/PageHeader-CSo3LVId.js";
-import { t as StatusBadge } from "../chunks/StatusBadge-DXp4zkSd.js";
+import { d as copySubmenu, g as useRowMenuActive, h as useRowMenu, l as MoreButton, u as assembleRowMenu } from "../chunks/PageHeader-BKYjvH2E.js";
 import { n as Table } from "../chunks/Table-ByziK93x.js";
-import { D as listTableFixedProps, O as listTableProps, S as ListSkeleton, T as RowSelectCheckbox, b as ListActionsHeader } from "../chunks/list-CgzqVlao.js";
+import { C as ListSkeleton, E as RowSelectCheckbox, O as listTableFixedProps, k as listTableProps, x as ListActionsHeader } from "../chunks/list-BhZVliAv.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, createContext, lazy, memo, use, useCallback, useEffect, useEffectEvent, useId, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
@@ -2515,7 +2515,7 @@ function useObjectText(url, { enabled, maxBytes, maxLines, knownSize, cacheKey,
 }
 //#endregion
 //#region src/file-explorer/FilePreview/Viewer.tsx
-var CodePreviewEditor = lazy(() => import("../chunks/CodePreviewEditor-Uij_Npp4.js"));
+var CodePreviewEditor = lazy(() => import("../chunks/CodePreviewEditor-hwjZof0M.js"));
 var PREVIEW_MARKDOWN_CONTROLS = {
 	table: { fullscreen: false },
 	mermaid: { fullscreen: false }

package/dist/form/index.js

@@ -1,17 +1,17 @@
 import { AngleRightIcon, EyeIcon, EyeOffIcon, SuccessCheckmark, TrashIcon } from "../icons.js";
-import { c as useStrings, s as useSlots } from "../chunks/Provider-BIL5347a.js";
+import { c as useStrings, s as useSlots } from "../chunks/Provider-CfFV-vc5.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-D_H1iJEe.js";
+import { n as StatusDot, s as isCategory } from "../chunks/StatusBadge-P6C2tv7Z.js";
+import { a as UncontrolledCollapsiblePanel, c as Dropdown, n as SectionHeader, o as MultiSelectDropdown, r as ControlledCollapsiblePanel, s as CustomListbox, t as SwitchToggle } from "../chunks/SwitchToggle-ByKNCE2m.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-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";
 import React, { Suspense, createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import deepEqual from "fast-deep-equal";
-import { callWhenParserInitialized, convertToDynamicForm, extractInputDeps, initializeParseStringsOfObj, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
 import { Duration } from "luxon";
+import { callWhenParserInitialized, convertToDynamicForm, extractInputDeps, initializeParseStringsOfObj, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
 import { Field, Form, Formik, getIn, useField, useFormikContext } from "formik";
 import { NumericFormat } from "react-number-format";
 //#region src/form/utils/getValueUsingPath.ts

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { default as DescriptionList } from './components/DescriptionList.js';
 export { DescriptionListItem } from './components/DescriptionList.js';
 export { default as Dropdown } from './components/Dropdown.js';
 export type { IProps as DropdownProps } from './components/Dropdown.js';
-export { DropdownCaret, filterOption, flattenOptions, isCategory, isOption, } from './components/dropdownUtils.js';
+export { DropdownCaret, filterOption, flattenOptions, isCategory, isOption, toggleSetMember, } from './components/dropdownUtils.js';
 export type { ICategory, IOptions } from './components/dropdownUtils.js';
 export { default as EmptyState } from './components/EmptyState.js';
 export { default as CustomListbox } from './components/Listbox.js';
@@ -15,7 +15,7 @@ export { default as Markdown } from './components/Markdown.js';
 export type { MarkdownProps } from './components/Markdown.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 { CREATE_MODAL_SELECT_FILTER_THRESHOLD, 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';

package/dist/index.js

@@ -1,16 +1,16 @@
 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 dangerButtonClasses, d as Markdown, f as CopyCodeBlock, i as CreateModalSelect, l as ghostButtonClasses, m as Callout, n as CreateModalAutocompleteField, o as CreateModalTextarea, p as CopyToClipboard, r as CreateModalField, s as ConfirmModal, t as CreateModal, u as primaryButtonClasses } from "./chunks/CreateModal-DEvWkdFl.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-BIL5347a.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-Lkl3Eek4.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-CfFV-vc5.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-D_H1iJEe.js";
+import { c as isOption, i as filterOption, l as toggleSetMember, n as StatusDot, o as flattenOptions, r as DropdownCaret, s as isCategory, t as StatusBadge } from "./chunks/StatusBadge-P6C2tv7Z.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-ByKNCE2m.js";
 import { t as Loader } from "./chunks/Loader-BXoXTZGc.js";
 import { n as modalPanelClasses, t as BareModal } from "./chunks/BareModal-DBa84JZO.js";
-import { S as AddMenu, _ as BreadcrumbProvider, a as HeaderAddButton, b as useHideBreadcrumbs, c as PageHeader, i as HeaderActionMenu, n as BreadcrumbsRightAction, o as HeaderEditButton, r as BreadcrumbsTitleAction, s as HeaderRowMenu, t as BreadcrumbsActionButton, v as useBreadcrumb, x as useSetBreadcrumbs, y as useClearBreadcrumbs } from "./chunks/PageHeader-CSo3LVId.js";
+import { S as AddMenu, _ as BreadcrumbProvider, a as HeaderAddButton, b as useHideBreadcrumbs, c as PageHeader, i as HeaderActionMenu, n as BreadcrumbsRightAction, o as HeaderEditButton, r as BreadcrumbsTitleAction, s as HeaderRowMenu, t as BreadcrumbsActionButton, v as useBreadcrumb, x as useSetBreadcrumbs, y as useClearBreadcrumbs } from "./chunks/PageHeader-BKYjvH2E.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-ByziK93x.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -536,4 +536,4 @@ function SettingModeOption({ name, checked, onSelect, label, description, isFirs
 	});
 }
 //#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 };
+export { AddMenu, 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, 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, toggleSetMember, useBreadcrumb, useClearBreadcrumbs, useCssIsDark, useHideBreadcrumbs, useNavigation, useNotify, useProvisionCorsRules, useRunFile, useSetBreadcrumbs, useSlots, useStrings, useWorkflowJsonResolver };

package/dist/list/ListPager.d.ts

@@ -1,7 +1,12 @@
+/** Page sizes offered by the pager's per-page select; first entry is the default. */
+export declare const LIST_PAGE_SIZES: readonly [number, ...number[]];
 /** 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, }: {
+export declare function ListPager({ page, pageSize, total, onPageChange, pageSizes, onPageSizeChange, }: {
     page: number;
     pageSize: number;
     total: number;
     onPageChange: (page: number) => void;
+    /** Selectable page sizes; shown only when onPageSizeChange is provided. */
+    pageSizes?: readonly number[];
+    onPageSizeChange?: (size: number) => void;
 }): import("react").JSX.Element | null;

package/dist/list/index.d.ts

@@ -5,6 +5,6 @@ export { actionsColumnWidth, GroupRow, ListActionsHeader, ListError, ListSkeleto
 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 { LIST_PAGE_SIZES, ListPager } from './ListPager.js';
 export { HoverCardSurface, useHoverCard } from './HoverCard.js';
 export { isTextEntryContext } from './textEntry.js';

package/dist/list/index.js

@@ -1,3 +1,3 @@
-import { d as copySubmenu, f as rowContextMenuProps, g as useRowMenuActive, h as useRowMenu, l as MoreButton, m as toolbarActionToRowAction, p as toRowMenuItem, u as assembleRowMenu } from "../chunks/PageHeader-CSo3LVId.js";
-import { A as ToolbarButton, C as NAME_MIN_WIDTH_PX, D as listTableFixedProps, E as actionsColumnWidth, M as stickyTabsUnderHeaderClasses, N as stickyToolbarClasses, O as listTableProps, S as ListSkeleton, T as RowSelectCheckbox, _ as ListRowActionsProvider, a as ListSearchControl, b as ListActionsHeader, c as ListFilterMenu, d as DEFAULT_ORDER, f as FAVORITE_ORDER, g as ListRow, h as ListPage, i as ListCount, j as stickyTabsClasses, k as ActionToolbar, l as listControlButtonClasses, m as ListColumns, n as useHoverCard, o as useListSearch, p as useListView, r as ListPager, s as ListDisplayMenu, t as HoverCardSurface, u as isTextEntryContext, v as useListNavigate, w as NameCell, x as ListError, y as GroupRow } from "../chunks/list-CgzqVlao.js";
-export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardSurface, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListPager, ListRow, ListRowActionsProvider, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, actionsColumnWidth, assembleRowMenu, copySubmenu, isTextEntryContext, listControlButtonClasses, listTableFixedProps, listTableProps, rowContextMenuProps, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses, toRowMenuItem, toolbarActionToRowAction, useHoverCard, useListNavigate, useListSearch, useListView, useRowMenu, useRowMenuActive };
+import { d as copySubmenu, f as rowContextMenuProps, g as useRowMenuActive, h as useRowMenu, l as MoreButton, m as toolbarActionToRowAction, p as toRowMenuItem, u as assembleRowMenu } from "../chunks/PageHeader-BKYjvH2E.js";
+import { A as ActionToolbar, C as ListSkeleton, D as actionsColumnWidth, E as RowSelectCheckbox, M as stickyTabsClasses, N as stickyTabsUnderHeaderClasses, O as listTableFixedProps, P as stickyToolbarClasses, S as ListError, T as NameCell, _ as ListRow, a as ListCount, b as GroupRow, c as ListDisplayMenu, d as isTextEntryContext, f as DEFAULT_ORDER, g as ListPage, h as ListColumns, i as ListPager, j as ToolbarButton, k as listTableProps, l as ListFilterMenu, m as useListView, n as useHoverCard, o as ListSearchControl, p as FAVORITE_ORDER, r as LIST_PAGE_SIZES, s as useListSearch, t as HoverCardSurface, u as listControlButtonClasses, v as ListRowActionsProvider, w as NAME_MIN_WIDTH_PX, x as ListActionsHeader, y as useListNavigate } from "../chunks/list-BhZVliAv.js";
+export { ActionToolbar, DEFAULT_ORDER, FAVORITE_ORDER, GroupRow, HoverCardSurface, LIST_PAGE_SIZES, ListActionsHeader, ListColumns, ListCount, ListDisplayMenu, ListError, ListFilterMenu, ListPage, ListPager, ListRow, ListRowActionsProvider, ListSearchControl, ListSkeleton, MoreButton, NAME_MIN_WIDTH_PX, NameCell, RowSelectCheckbox, ToolbarButton, actionsColumnWidth, assembleRowMenu, copySubmenu, isTextEntryContext, listControlButtonClasses, listTableFixedProps, listTableProps, rowContextMenuProps, stickyTabsClasses, stickyTabsUnderHeaderClasses, stickyToolbarClasses, toRowMenuItem, toolbarActionToRowAction, useHoverCard, useListNavigate, useListSearch, useListView, useRowMenu, useRowMenuActive };

package/dist/logviewer/LogViewer.d.ts

@@ -1,4 +1,4 @@
-export declare function LogViewer({ log, height, width, roundedBottom, lineNumbers, additionalLeftBarComponents, additionalRightBarComponents, additionalBottomLeftBarComponents, additionalBottomRightBarComponents, hideExpand, inline, contentClassName, enableWorkflowCommands, }: {
+export declare function LogViewer({ log, height, width, roundedBottom, lineNumbers, additionalLeftBarComponents, additionalRightBarComponents, additionalBottomLeftBarComponents, additionalBottomRightBarComponents, hideExpand, inline, contentClassName, enableWorkflowCommands, onReachTop, loadingTop, endOfLog, prependedSignal, enableTimeRangeFilter, onTimeRangeChange, initialTimeRangeFrom, initialTimeRangeTo, }: {
     log: string;
     height?: string | number;
     width: string | number;
@@ -15,4 +15,12 @@ export declare function LogViewer({ log, height, width, roundedBottom, lineNumbe
     contentClassName?: string;
     /** When true, parses workflow commands and applies visual styling */
     enableWorkflowCommands?: boolean;
+    onReachTop?: (() => void) | undefined;
+    loadingTop?: boolean | undefined;
+    endOfLog?: boolean | undefined;
+    prependedSignal?: number | undefined;
+    enableTimeRangeFilter?: boolean;
+    onTimeRangeChange?: ((from: string, to: string) => void) | undefined;
+    initialTimeRangeFrom?: string | undefined;
+    initialTimeRangeTo?: string | undefined;
 }): import("react").JSX.Element;

package/dist/logviewer/index.js

@@ -1,8 +1,10 @@
-import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon, XIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "../chunks/Provider-BIL5347a.js";
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, ClockIcon, CopyIcon, DownloadIcon, ExpandIcon, ShrinkIcon, XIcon } from "../icons.js";
+import { c as useStrings, i as useNotify } from "../chunks/Provider-CfFV-vc5.js";
+import { r as TooltipInfo } from "../chunks/Tooltip-WgbiC_nd.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";
+import { Fragment as Fragment$1, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { DateTime } from "luxon";
 import { highlightSegments, parseAnsiSegments, plainSegments, processLinesWithCommands } from "@parallelworks/workflow-parser";
 //#region src/logviewer/LogViewer.tsx
 function LogSegments({ segments }) {
@@ -61,7 +63,38 @@ var LogLine = memo(function LogLine({ index, segments, lineNumbers, isSelected,
 		})]
 	});
 });
-function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNumbers = true, additionalLeftBarComponents = null, additionalRightBarComponents = null, additionalBottomLeftBarComponents = null, additionalBottomRightBarComponents = null, hideExpand = false, inline = false, contentClassName, enableWorkflowCommands = false }) {
+function validateTimeRange(from, to) {
+	if (from === "" && to === "") return "";
+	const fromTime = from === "" ? null : DateTime.fromISO(from);
+	const toTime = to === "" ? null : DateTime.fromISO(to);
+	if (fromTime && !fromTime.isValid) return "invalidStartTime";
+	if (toTime && !toTime.isValid) return "invalidEndTime";
+	if (fromTime && toTime && toTime <= fromTime) return "endBeforeStart";
+	if (toTime && toTime > DateTime.now()) return "endInFuture";
+	return "";
+}
+var TopPaginationBanner = memo(function TopPaginationBanner({ endOfLog, loadingTop, onLoadOlder }) {
+	const { logviewer: t } = useStrings();
+	const baseCx = cx("flex items-center justify-center gap-2 h-7 text-xs font-mono select-none", "text-[var(--theme-muted-text-color)]", "border-b border-[var(--theme-border)]");
+	if (endOfLog) return /* @__PURE__ */ jsx("div", {
+		className: cx(baseCx, "opacity-70"),
+		children: t.beginningOfLog
+	});
+	if (loadingTop) return /* @__PURE__ */ jsxs("div", {
+		className: baseCx,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "w-3 h-3 rounded-full border-2 border-current border-t-transparent animate-spin",
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsx("span", { children: t.loadingOlderEntries })]
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onLoadOlder,
+		className: cx(baseCx, "w-full hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)] transition-colors"),
+		children: t.loadOlderEntries
+	});
+});
+function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNumbers = true, additionalLeftBarComponents = null, additionalRightBarComponents = null, additionalBottomLeftBarComponents = null, additionalBottomRightBarComponents = null, hideExpand = false, inline = false, contentClassName, enableWorkflowCommands = false, onReachTop, loadingTop = false, endOfLog = false, prependedSignal = 0, enableTimeRangeFilter = false, onTimeRangeChange, initialTimeRangeFrom = "", initialTimeRangeTo = "" }) {
 	const notify = useNotify();
 	const { common: tCommon, logviewer: t } = useStrings();
 	const annotationLabels = useMemo(() => ({
@@ -83,6 +116,17 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 	const [showDebug, setShowDebug] = useState(false);
 	const [collapsedGroups, setCollapsedGroups] = useState(/* @__PURE__ */ new Set());
 	const [filter, setFilter] = useState("");
+	const [timeRangeFrom, setTimeRangeFrom] = useState(initialTimeRangeFrom);
+	const [timeRangeTo, setTimeRangeTo] = useState(initialTimeRangeTo);
+	const [timeRangeOpen, setTimeRangeOpen] = useState(false);
+	const timeRangePopoverRef = useRef(null);
+	const timeRangeError = validateTimeRange(timeRangeFrom, timeRangeTo);
+	useEffect(() => {
+		setTimeRangeFrom(initialTimeRangeFrom);
+	}, [initialTimeRangeFrom]);
+	useEffect(() => {
+		setTimeRangeTo(initialTimeRangeTo);
+	}, [initialTimeRangeTo]);
 	const [visibleStart, setVisibleStart] = useState(0);
 	const [visibleEnd, setVisibleEnd] = useState(0);
 	const [selectedLines, setSelectedLines] = useState(/* @__PURE__ */ new Set());
@@ -95,6 +139,10 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 	const scrollAnimationRef = useRef(null);
 	const prevLogLengthRef = useRef(0);
 	const userScrollUpRef = useRef(false);
+	const reachTopFiredRef = useRef(false);
+	const prevScrollHeightRef = useRef(0);
+	const prevPrependedSignalRef = useRef(prependedSignal);
+	const pendingPrependRef = useRef(false);
 	const LINE_HEIGHT = 20;
 	const OVERSCAN = 20;
 	const handleLineClick = useCallback((lineNum, e) => {
@@ -174,6 +222,24 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 			document.removeEventListener("keydown", handleKeyDown);
 		};
 	}, [highlightCopyPosition]);
+	useEffect(() => {
+		if (!timeRangeOpen) return;
+		const handleClickOutside = (e) => {
+			const target = e.target;
+			if (timeRangePopoverRef.current?.contains(target)) return;
+			if (target.closest("[data-time-range-trigger]")) return;
+			setTimeRangeOpen(false);
+		};
+		const handleKey = (e) => {
+			if (e.key === "Escape") setTimeRangeOpen(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("keydown", handleKey);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleKey);
+		};
+	}, [timeRangeOpen]);
 	const copySelectedLines = useCallback(async () => {
 		if (selectedLines.size === 0) return;
 		const text = Array.from(selectedLines).sort((a, b) => a - b).map((ln) => rawLines[ln - 1] || "").join("\n");
@@ -275,6 +341,17 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 			container.removeEventListener("touchstart", onTouchStart);
 		};
 	}, [inline]);
+	const maybeFireReachTop = useCallback((scrollTop) => {
+		if (!onReachTop || loadingTop || endOfLog) return;
+		if (scrollTop < 50 && !reachTopFiredRef.current) {
+			reachTopFiredRef.current = true;
+			onReachTop();
+		} else if (scrollTop > 100) reachTopFiredRef.current = false;
+	}, [
+		onReachTop,
+		loadingTop,
+		endOfLog
+	]);
 	const handleLogScroll = (event) => {
 		const { scrollTop, clientHeight, scrollHeight } = event.currentTarget;
 		const isAnimating = scrollAnimationRef.current !== null;
@@ -284,6 +361,7 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 			else if (userScrollUpRef.current && follow) updateFollow(false);
 			userScrollUpRef.current = false;
 		}
+		maybeFireReachTop(scrollTop);
 		if (!followRef.current) {
 			const visibleCount = Math.ceil(clientHeight / LINE_HEIGHT) + OVERSCAN * 2;
 			const maxStart = Math.max(0, parsedLog.length - visibleCount);
@@ -357,6 +435,28 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 		observer.observe(logContainerRef.current);
 		return () => observer.disconnect();
 	}, [smoothScrollToBottom]);
+	useLayoutEffect(() => {
+		if (prependedSignal > prevPrependedSignalRef.current) pendingPrependRef.current = true;
+		else if (prependedSignal < prevPrependedSignalRef.current) pendingPrependRef.current = false;
+		prevPrependedSignalRef.current = prependedSignal;
+		if (!pendingPrependRef.current) return;
+		const container = logContainerRef.current;
+		if (!container) return;
+		const delta = container.scrollHeight - prevScrollHeightRef.current;
+		if (delta <= 0) return;
+		pendingPrependRef.current = false;
+		container.scrollTop += delta;
+		if (!followRef.current) {
+			const visibleCount = Math.ceil(container.clientHeight / LINE_HEIGHT) + OVERSCAN * 2;
+			const maxStart = Math.max(0, parsedLog.length - visibleCount);
+			const startIndex = Math.min(maxStart, Math.max(0, Math.floor(container.scrollTop / LINE_HEIGHT) - OVERSCAN));
+			setVisibleStart(startIndex);
+			setVisibleEnd(startIndex + visibleCount);
+		}
+	}, [prependedSignal, parsedLog.length]);
+	useLayoutEffect(() => {
+		if (logContainerRef.current) prevScrollHeightRef.current = logContainerRef.current.scrollHeight;
+	});
 	const handleFilterChange = (event) => {
 		const newFilter = event.target.value;
 		setFilter(newFilter);
@@ -447,6 +547,87 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 									className: cx("btn btn-neutral", showDebug && "btn-active"),
 									onClick: () => setShowDebug((prev) => !prev),
 									children: /* @__PURE__ */ jsx("span", { children: showDebug ? t.hideDebug : t.showDebug })
+								}),
+								enableTimeRangeFilter && /* @__PURE__ */ jsxs("div", {
+									className: "relative",
+									children: [/* @__PURE__ */ jsxs("button", {
+										type: "button",
+										"data-time-range-trigger": true,
+										className: "btn btn-neutral",
+										onClick: () => setTimeRangeOpen((o) => !o),
+										children: [
+											/* @__PURE__ */ jsx(ClockIcon, {}),
+											/* @__PURE__ */ jsx("span", { children: t.timeRange }),
+											(timeRangeFrom !== "" || timeRangeTo !== "") && /* @__PURE__ */ jsx("span", {
+												title: t.timeRangeActive,
+												className: "ml-1 px-1.5 py-0.5 text-[10px] rounded-full bg-[var(--theme-element)]/15 text-[var(--theme-element)]",
+												children: t.timeRangeOn
+											})
+										]
+									}), timeRangeOpen && /* @__PURE__ */ jsxs("div", {
+										ref: timeRangePopoverRef,
+										className: cx("absolute top-full left-0 mt-1 z-50 w-80 p-3 rounded-lg shadow-lg", "border border-[var(--theme-border)] bg-[var(--theme-panel-bg)]", "flex flex-col gap-y-3"),
+										children: [
+											/* @__PURE__ */ jsxs("div", {
+												className: "flex items-center gap-x-1.5",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "text-xs font-semibold text-[var(--theme-app)]",
+													children: t.filterByTimeRange
+												}), /* @__PURE__ */ jsx(TooltipInfo, { text: t.timeRangeHelp })]
+											}),
+											/* @__PURE__ */ jsxs("label", {
+												className: "flex flex-col gap-y-1",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "text-[11px] uppercase tracking-wide text-[var(--theme-muted-text-color)]",
+													children: t.timeRangeFrom
+												}), /* @__PURE__ */ jsx("input", {
+													type: "datetime-local",
+													value: timeRangeFrom,
+													onChange: (e) => setTimeRangeFrom(e.target.value),
+													className: "rounded-md text-sm h-8 px-2 bg-[var(--theme-input-bg)] text-[var(--theme-input)] border border-[var(--theme-border)]"
+												})]
+											}),
+											/* @__PURE__ */ jsxs("label", {
+												className: "flex flex-col gap-y-1",
+												children: [/* @__PURE__ */ jsx("span", {
+													className: "text-[11px] uppercase tracking-wide text-[var(--theme-muted-text-color)]",
+													children: t.timeRangeTo
+												}), /* @__PURE__ */ jsx("input", {
+													type: "datetime-local",
+													value: timeRangeTo,
+													onChange: (e) => setTimeRangeTo(e.target.value),
+													className: "rounded-md text-sm h-8 px-2 bg-[var(--theme-input-bg)] text-[var(--theme-input)] border border-[var(--theme-border)]"
+												})]
+											}),
+											timeRangeError !== "" && /* @__PURE__ */ jsx("span", {
+												className: "text-[11px] text-red-500",
+												children: t[timeRangeError]
+											}),
+											/* @__PURE__ */ jsxs("div", {
+												className: "flex gap-x-2",
+												children: [/* @__PURE__ */ jsx("button", {
+													type: "button",
+													disabled: timeRangeError !== "",
+													className: "btn btn-primary flex-1 justify-center",
+													onClick: () => {
+														onTimeRangeChange?.(timeRangeFrom, timeRangeTo);
+														setTimeRangeOpen(false);
+													},
+													children: t.apply
+												}), (timeRangeFrom !== "" || timeRangeTo !== "") && /* @__PURE__ */ jsx("button", {
+													type: "button",
+													className: "btn btn-neutral flex-1 justify-center",
+													onClick: () => {
+														setTimeRangeFrom("");
+														setTimeRangeTo("");
+														onTimeRangeChange?.("", "");
+														setTimeRangeOpen(false);
+													},
+													children: t.clear
+												})]
+											})
+										]
+									})]
 								})
 							]
 						}),
@@ -471,7 +652,7 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 					]
 				}), additionalRightBarComponents]
 			}),
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
 				"data-testid": "logviewer",
 				className: cx(roundedBottom && "rounded-b-lg", "w-full overflow-x-auto", !inline && "h-full grow overflow-y-auto", !inline && "bg-(--theme-muted-panel-bg)", contentClassName),
 				style: inline ? void 0 : {
@@ -482,7 +663,11 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 				ref: logContainerRef,
 				onScroll: inline ? void 0 : handleLogScroll,
 				onMouseUp: handleTextMouseUp,
-				children: /* @__PURE__ */ jsx("div", {
+				children: [!inline && onReachTop && /* @__PURE__ */ jsx(TopPaginationBanner, {
+					endOfLog,
+					loadingTop,
+					onLoadOlder: onReachTop
+				}), /* @__PURE__ */ jsx("div", {
 					className: "min-w-max",
 					style: inline ? void 0 : {
 						paddingTop,
@@ -503,7 +688,7 @@ function LogViewer({ log, height = "unset", width, roundedBottom = false, lineNu
 						onGroupToggle: enableWorkflowCommands ? handleGroupToggle : void 0,
 						annotationLabels
 					}, item.index))
-				})
+				})]
 			}),
 			highlightCopyPosition && highlightedText && /* @__PURE__ */ jsx("button", {
 				type: "button",