@pstdio/ui 0.18.0 → 0.20.0

package/dist/components/chat-ui/components/chat-message-list-items.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { SessionMessage } from './message-types';
+interface ChatMessageListResponseProps {
+    message: SessionMessage;
+    streaming: boolean;
+    hideQuestionForms?: boolean;
+    animate?: boolean;
+    showAssistantActions: boolean;
+}
+export declare const ChatMessageListResponse: (props: ChatMessageListResponseProps) => import("react/jsx-runtime").JSX.Element;
+interface StickyMessageToggleProps {
+    label: string;
+    onClick: () => void;
+    actionPanel?: ReactNode;
+}
+export declare const StickyMessageToggle: (props: StickyMessageToggleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/chat-ui/components/message-types.d.ts

@@ -109,6 +109,7 @@ export interface MessageGroup {
     userMessage: SessionMessage;
     responses: SessionMessage[];
 }
+export declare const getAssistantMessageActionTargetId: (messages: SessionMessage[]) => string | null;
 export declare const groupMessagesByTurn: (messages: SessionMessage[]) => {
     groups: MessageGroup[];
     leadingResponses: SessionMessage[];

package/dist/components/chat-ui/components/timeline.d.ts

@@ -27,6 +27,8 @@ export type TitleSegment = {
     text: string;
     bold?: boolean;
     muted?: boolean;
+    truncate?: boolean;
+    monospace?: boolean;
 } | {
     kind: "avatar";
     src: string;

package/dist/components/chat-ui/tool-rendering/default-renderers.d.ts

@@ -6,6 +6,7 @@ export declare const createDefaultToolRenderers: () => {
     grep: import('./types').ToolRenderer;
     question: import('./types').ToolRenderer;
     read: import('./types').ToolRenderer;
+    shell: import('./types').ToolRenderer;
     skill: import('./types').ToolRenderer;
     todo_write: import('./types').ToolRenderer;
     todowrite: import('./types').ToolRenderer;

package/dist/components/chat-ui/tool-rendering/shared.d.ts

@@ -17,13 +17,14 @@ export declare const buildIndicator: (invocation: ToolPart) => {
     readonly type: "icon";
     readonly icon: "search" | "dot" | "danger" | "file" | "terminal" | "shell" | "ls" | "read_file" | "write_file" | "delete_file" | "patch" | "upload_files" | "download_file" | "move_file" | "browser" | "question" | "todo";
 };
-export declare const buildBaseTitle: (invocation: ToolPart, detail?: string, labelOverride?: string) => TitleSegment[];
+export declare const buildBaseTitle: (invocation: ToolPart, detail?: string, labelOverride?: string, detailStyle?: "monospace") => TitleSegment[];
 export declare const getInputObject: (invocation: ToolPart) => Record<string, unknown> | null;
 export declare const getOutputObject: (invocation: ToolPart) => Record<string, unknown> | null;
 export declare const getStringValue: (value: unknown) => string | null;
 export declare const getObjectValue: (value: unknown) => Record<string, unknown> | null;
 export declare const getStateObject: (invocation: ToolPart, key: string) => Record<string, unknown> | null;
 export declare const getApplyPatchMetadataFiles: (invocation: ToolPart) => ApplyPatchMetadataFile[];
+export declare const getApplyPatchInputFilePaths: (invocation: ToolPart) => string[];
 export declare const getApplyPatchDiffText: (invocation: ToolPart) => string | null;
 export declare const buildApplyPatchMetadataTitleSegments: (files: ApplyPatchMetadataFile[]) => TitleSegment[];
 export declare const getApplyPatchMetadataReferences: (files: ApplyPatchMetadataFile[]) => string[];
@@ -33,7 +34,7 @@ export declare const parseSkillContentBlock: (value: string) => {
     content: string;
 } | null;
 export declare const getSkillName: (invocation: ToolPart) => string | undefined;
-export declare const buildFileLinkSegment: (filePath: string) => TitleSegment;
+export declare const buildFileLinkSegment: (filePath: string, variant?: "default" | "bubble") => TitleSegment;
 export declare const prependErrorBlock: (invocation: ToolPart, blocks: Block[]) => Block[];
 export declare const getDiffBlocks: (diffText?: string | null) => {
     type: "diff";

package/dist/components/chat-ui/tool-rendering/standard-renderers.d.ts

@@ -1,6 +1,7 @@
 import { ToolRenderer } from './types';
 export declare const renderRead: ToolRenderer;
 export declare const renderBash: ToolRenderer;
+export declare const renderShell: ToolRenderer;
 export declare const renderGrep: ToolRenderer;
 export declare const renderGlob: ToolRenderer;
 export declare const renderSkill: ToolRenderer;

package/dist/components/data-table/data-table-header.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode } from 'react';
-import { AttributeDescriptor, KanbanRendererRow } from '../kanban-renderer/types';
+import { AttributeDescriptor, KanbanRendererRow, KanbanRendererSavedView } from '../kanban-renderer/types';
 interface DataTableHeaderProps {
     rows: KanbanRendererRow[];
     attributes: AttributeDescriptor[];
     storageKey: string;
     columnControl: ReactNode;
+    defaultViews?: KanbanRendererSavedView[];
+    defaultActiveViewId?: string;
 }
 export declare const DataTableHeader: (props: DataTableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/data-table-skeleton.d.ts

@@ -0,0 +1,13 @@
+export interface DataTableSkeletonColumn {
+    id: string;
+    label: string;
+}
+interface DataTableSkeletonProps {
+    /** Real column headers when the caller already knows them. */
+    columns?: DataTableSkeletonColumn[];
+    /** Placeholder column count when the headers are still unknown. */
+    columnCount?: number;
+    rowCount?: number;
+}
+export declare const DataTableSkeleton: (props: DataTableSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/edit-mode-data-table-body.d.ts

@@ -0,0 +1,29 @@
+import { DataTableEditModeColumn, DataTableEditModeConfig, RowData } from './types';
+interface ActiveCell {
+    rowId: string;
+    columnId: string;
+    draft: string;
+}
+interface EditModeDataTableBodyProps {
+    activeCell: ActiveCell | null;
+    columns: DataTableEditModeColumn[];
+    data: RowData[];
+    editMode: DataTableEditModeConfig;
+    enableSelection: boolean;
+    isReadOnly: boolean;
+    pageIndex: number;
+    pageRows: RowData[];
+    pageSize: number;
+    selectedRowIds: Set<string>;
+    showNewRow: boolean;
+    onActivateCell: (cell: ActiveCell) => void;
+    onAddRow: () => void;
+    onCancelCell: () => void;
+    onCommitCell: () => void;
+    onDraftChange: (cell: ActiveCell) => void;
+    onRemoveRow: (rowId: string) => void;
+    onToggleRowSelection: (rowId: string, checked: boolean) => void;
+    rowIdFor: (row: RowData, index: number) => string;
+}
+export declare const EditModeDataTableBody: (props: EditModeDataTableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/edit-mode-data-table-cell.d.ts

@@ -0,0 +1,15 @@
+import { DataTableCellContext, DataTableEditModeColumn, DataTableEditModeConfig } from './types';
+interface EditModeDataTableCellProps {
+    activeDraft?: string;
+    column: DataTableEditModeColumn;
+    context: DataTableCellContext;
+    editMode: DataTableEditModeConfig;
+    isActive: boolean;
+    isReadOnly: boolean;
+    onActivate: () => void;
+    onCancel: () => void;
+    onDraftChange: (draft: string) => void;
+    onSave: () => void;
+}
+export declare const EditModeDataTableCell: (props: EditModeDataTableCellProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/edit-mode-data-table-editors.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode, RefObject } from 'react';
+interface EditModeHeaderEditorProps {
+    accessibleName: string;
+    draft: string;
+    onCancel: () => void;
+    onChange: (value: string) => void;
+    onSave: () => void;
+}
+export declare const EditModeHeaderEditor: (props: EditModeHeaderEditorProps) => import("react/jsx-runtime").JSX.Element;
+interface EditModeCellEditorProps {
+    anchorRef: RefObject<HTMLElement | null>;
+    customEditor?: ReactNode;
+    draft: string;
+    onCancel: () => void;
+    onChange: (value: string) => void;
+    onSave: () => void;
+}
+export declare const EditModeCellEditor: (props: EditModeCellEditorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/edit-mode-data-table-header.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { DataTableEditModeColumn, DataTableEditModeConfig, RowData } from './types';
+interface ActiveHeader {
+    columnId: string;
+    draft: string;
+}
+interface EditModeDataTableHeaderProps {
+    activeHeader: ActiveHeader | null;
+    columnIcons?: Record<string, ReactNode>;
+    columns: DataTableEditModeColumn[];
+    data: RowData[];
+    editMode: DataTableEditModeConfig;
+    isReadOnly: boolean;
+    selectionHeader?: ReactNode;
+    onAddColumn: () => void;
+    onCancelHeaderEdit: () => void;
+    onDeleteColumn: (columnId: string) => void;
+    onHeaderDraftChange: (draft: string) => void;
+    onHeaderEdit: (column: DataTableEditModeColumn) => void;
+    onSaveHeader: () => void;
+}
+export declare const EditModeDataTableHeader: (props: EditModeDataTableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/edit-mode-data-table-selection.d.ts

@@ -0,0 +1,12 @@
+interface EditModeSelectionHeaderProps {
+    checked: boolean;
+    indeterminate: boolean;
+    onChange: (checked: boolean) => void;
+}
+export declare const EditModeSelectionHeader: (props: EditModeSelectionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+interface EditModeSelectionCellProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+export declare const EditModeSelectionCell: (props: EditModeSelectionCellProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/edit-mode-data-table.d.ts

@@ -0,0 +1,2 @@
+import { DataTableProps } from './types';
+export declare const EditModeDataTable: (props: DataTableProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/data-table/edit-mode-story.d.ts

@@ -0,0 +1,5 @@
+export declare const EditModeStory: () => import("react/jsx-runtime").JSX.Element;
+export declare const ModeToggleStory: () => import("react/jsx-runtime").JSX.Element;
+export declare const RichTextEditModeStory: () => import("react/jsx-runtime").JSX.Element;
+export declare const EditableSelectableRowsStory: () => import("react/jsx-runtime").JSX.Element;
+export declare const EditableWithViewsStory: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/index.d.ts

@@ -1,5 +1,7 @@
 export { DataTable } from './data-table';
+export type { DataTableSkeletonColumn } from './data-table-skeleton';
+export { DataTableSkeleton } from './data-table-skeleton';
 export type { FriendlyJsonDisplayProps } from './friendly-json-display';
 export { FriendlyJsonDisplay } from './friendly-json-display';
 export { formatDisplayValue, getIcon } from './helpers';
-export type { DataTableCategoricalColor, DataTableCategoricalValue, DataTableCellContext, DataTableCellContextAction, DataTableColorScaleStop, DataTableColumnRenderer, DataTableColumnStat, DataTableProps, DataTableRowAction, DataTableSelectionAction, DataTableThemeColor, RowData, } from './types';
+export type { DataTableCategoricalColor, DataTableCategoricalValue, DataTableCellContext, DataTableCellContextAction, DataTableColorScaleStop, DataTableColumnRenderer, DataTableColumnStat, DataTableEditModeAlignment, DataTableEditModeCellEditorProps, DataTableEditModeColumn, DataTableEditModeConfig, DataTableProps, DataTableRowAction, DataTableSelectionAction, DataTableThemeColor, RowData, } from './types';

package/dist/components/data-table/pagination-footer.d.ts

@@ -1,8 +1,11 @@
-import { useReactTable } from '@tanstack/react-table';
-import { RowData } from './types';
-export declare function PaginationFooter({ table, pageIndex, pageSize, pageSizeOptions, }: {
-    table: ReturnType<typeof useReactTable<RowData>>;
+interface PaginationFooterProps {
+    pageCount: number;
     pageIndex: number;
     pageSize: number;
     pageSizeOptions: number[];
-}): import("react/jsx-runtime").JSX.Element;
+    totalRows: number;
+    onPageChange: (pageIndex: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+}
+export declare function PaginationFooter(props: PaginationFooterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { KanbanRendererSavedView } from '../kanban-renderer/types';
 export type ColumnType = "boolean" | "date" | "number" | "string" | "unknown";
 export type RowData = Record<string, unknown>;
 export type DisplayValue = {
@@ -64,8 +65,29 @@ export interface DataTableCellContextAction {
     destructive?: boolean;
     onSelect: (context: DataTableCellContext) => void;
 }
+export type DataTableEditModeAlignment = "left" | "center" | "right" | null;
+export interface DataTableEditModeColumn {
+    id: string;
+    label: string;
+    alignment: DataTableEditModeAlignment;
+}
+export interface DataTableEditModeCellEditorProps {
+    context: DataTableCellContext;
+    value: string;
+    onChange: (value: string) => void;
+}
+export interface DataTableEditModeConfig {
+    columns: DataTableEditModeColumn[];
+    onDataChange: (data: RowData[]) => void;
+    onColumnsChange: (columns: DataTableEditModeColumn[]) => void;
+    isCellEditable?: (context: DataTableCellContext) => boolean;
+    renderHeader?: (column: DataTableEditModeColumn) => ReactNode;
+    renderCell?: (context: DataTableCellContext) => ReactNode;
+    renderCellEditor?: (props: DataTableEditModeCellEditorProps) => ReactNode;
+}
 export interface DataTableProps {
     data: RowData[];
+    editMode?: DataTableEditModeConfig;
     isReadOnly?: boolean;
     noBorder?: boolean;
     fullWidth?: boolean;
@@ -77,6 +99,8 @@ export interface DataTableProps {
     compactHeaders?: Partial<Record<string, string>>;
     getRowId?: (row: RowData, index: number) => string;
     toolbarStorageKey?: string;
+    defaultViews?: KanbanRendererSavedView[];
+    defaultActiveViewId?: string;
     enableRowActivation?: boolean;
     getCellContextMenuActions?: (context: DataTableCellContext) => DataTableCellContextAction[];
     onCSVUpload?: (csv: string) => Promise<void>;

package/dist/components/overlays/dialog-accept-shortcut.d.ts

@@ -0,0 +1,12 @@
+interface DialogAcceptShortcutEvent {
+    key: string;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    altKey: boolean;
+    defaultPrevented: boolean;
+    preventDefault: () => void;
+    stopPropagation: () => void;
+}
+export declare const handleDialogAcceptShortcut: (event: DialogAcceptShortcutEvent, accept: () => void, enabled?: boolean) => void;
+export {};

package/dist/components/overlays/index.d.ts

@@ -6,6 +6,7 @@ export { AttachmentChip } from './attachment-chip';
 export { BubbleButton } from './bubble-button';
 export { BubblePanel } from './bubble-panel';
 export { DeleteConfirmationModal } from './delete-confirmation-modal';
+export { handleDialogAcceptShortcut } from './dialog-accept-shortcut';
 export type { RepoPickerDialogEntry, RepoPickerDialogProps } from './repo-picker-dialog';
 export { RepoPickerDialog } from './repo-picker-dialog';
 export type { ResourceActionMenuProps, ResourceContextAction } from './resource-context-menu';

package/dist/components/param-editor/index.d.ts

@@ -16,7 +16,7 @@ export { TextInput } from './inputs/text-input';
 export { VectorInput } from './inputs/vector-input';
 export type { ParamEditorProps } from './param-editor';
 export { ParamEditor } from './param-editor';
-export type { ActionOption, ActionsParam, AnchorGridParam, AnchorGridValue, BaseParam, BooleanParam, ColorParam, DateParam, FileUploadParam, FileUploadStatus, FileUploadValue, InputGroup, MarkdownParam, NumberParam, Param, ParamEditorReadOnlyContent, ParamEditorReadOnlyImage, ParamValue, ParamValueMap, PropertyParam, RangeParam, RangeValue, ReadOnlyParam, ResourceOption, ResourceParam, ResourceRefValue, SegmentedOption, SegmentedParam, SelectionParam, TextParam, VectorParam, VectorValue, } from './param-editor.types';
+export type { ActionOption, ActionsParam, AnchorGridParam, AnchorGridValue, BaseParam, BooleanParam, ColorParam, DateParam, FileUploadParam, FileUploadStatus, FileUploadValue, InputGroup, MarkdownParam, NumberParam, Param, ParamEditorReadOnlyContent, ParamEditorReadOnlyImage, ParamValue, ParamValueMap, PropertyParam, RangeParam, RangeValue, ReadOnlyParam, ResourceOption, ResourceParam, ResourceRefValue, SegmentedOption, SegmentedParam, SelectionGroup, SelectionOption, SelectionParam, TextParam, VectorParam, VectorValue, } from './param-editor.types';
 export { ParamEditorControlItem } from './param-editor-control-item';
 export { ParamEditorControlList } from './param-editor-control-list';
 export { ParamEditorField } from './param-editor-field';
@@ -26,4 +26,6 @@ export { ParamEditorLabel } from './param-editor-label';
 export { isParamEditorRichControl } from './param-editor-presentation';
 export { ParamEditorReadOnlyField } from './param-editor-read-only-field';
 export { ParamEditorReadOnlyValue } from './param-editor-read-only-value';
+export type { ParamEditorRowProps } from './param-editor-row';
+export { ParamEditorRow } from './param-editor-row';
 export { ParamEditorSection } from './param-editor-section';

package/dist/components/param-editor/inputs/selection-input.d.ts

@@ -1,3 +1,4 @@
+import { SelectionGroup } from '../param-editor.types';
 import { SelectionMenuOption } from './selection-menu';
 interface SelectionInputProps {
     id: string;
@@ -16,6 +17,10 @@ interface SelectionInputProps {
     clearable?: boolean;
     /** Inert, but still rendered as a control. */
     disabled?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    group?: SelectionGroup;
     size?: "xs" | "sm";
 }
 export declare const SelectionInput: (props: SelectionInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/param-editor/inputs/selection-menu.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { SelectionGroup } from '../param-editor.types';
 export interface SelectionMenuOption {
     id: string;
     name: string;
@@ -14,11 +15,16 @@ export interface SelectionMenuProps {
     selectedIds: string[];
     multiSelect: boolean;
     disabled?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    group?: SelectionGroup;
     fullWidth?: boolean;
     triggerVariant?: "button" | "icon";
     triggerAriaLabel?: string;
     size?: "xs" | "sm";
     onToggle: (optionId: string) => void;
+    onGroupChange?: (optionId: string) => void;
 }
 export declare const selectionIndicator: (multiSelect: boolean, selected: boolean) => import("react/jsx-runtime").JSX.Element | null;
 export declare const selectionOptionIcon: (option: SelectionMenuOption | undefined, boxSize: string) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/param-editor/param-editor-row.d.ts

@@ -0,0 +1,17 @@
+import { Param, ParamValue, ParamValueMap, ResourceRefValue } from './param-editor.types';
+export interface ParamEditorRowProps {
+    param: Param;
+    values?: ParamValueMap;
+    onChange?: (id: string, value: ParamValue) => void;
+    onOpenResource?: (ref: ResourceRefValue) => void;
+    readOnly?: boolean;
+    fullWidth?: boolean;
+    variant?: "default" | "small";
+}
+/**
+ * The padded field row every param surface is built from. Surfaces that compose
+ * their own list of fields — a command dialog mixing built-in and host-supplied
+ * controls — stack these instead of nesting one editor per field, so the whole
+ * form keeps a single rhythm.
+ */
+export declare const ParamEditorRow: (props: ParamEditorRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/param-editor/param-editor.types.d.ts

@@ -33,6 +33,20 @@ export interface SelectionOption {
     icon?: string;
     /** Palette key (e.g. "blue") applied to the option's icon. */
     color?: string;
+    description?: string;
+    disabled?: boolean;
+}
+/** Parent selector used to swap the option set of a grouped selection. */
+export interface SelectionGroup {
+    id: string;
+    name: string;
+    defaultValue: string;
+    options: SelectionOption[];
+    placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
 }
 export interface SelectionParam extends BaseParam {
     type: "selection";
@@ -40,6 +54,10 @@ export interface SelectionParam extends BaseParam {
     options: SelectionOption[];
     multiSelect?: boolean;
     placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    group?: SelectionGroup;
     /** Adds a "clear" row so a single-select can be returned to unset. */
     clearable?: boolean;
     /**

package/dist/components/primitives/glyph-icon.d.ts

@@ -0,0 +1,16 @@
+import { ComponentType, HTMLAttributes } from 'react';
+type GlyphIconProps = Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+export interface GlyphIconOptions {
+    /**
+     * Optical size relative to a round glyph. Every glyph is normalised to the same
+     * ink box, so square marks such as the level bars need trimming to carry the
+     * same visual weight as the status rings.
+     */
+    scale?: number;
+}
+/**
+ * Builds a component for one `prompt-studio-icons` glyph so lucide icons and
+ * font glyphs share a single component type in the icon registry.
+ */
+export declare const createGlyphIcon: (glyph: string, options?: GlyphIconOptions) => ComponentType<GlyphIconProps>;
+export {};

package/dist/components/primitives/icon-color-picker.d.ts

@@ -1,16 +1,4 @@
-import { ComponentType } from 'react';
-export interface IconColorPickerIconOption {
-    value: string | null;
-    label: string;
-    icon: ComponentType;
-}
-export declare const optionColors: readonly ["gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink"];
-export declare const optionIcons: {
-    value: string;
-    label: string;
-    icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
-}[];
-export declare const getIconComponent: (name: string | null | undefined, iconOptions?: readonly IconColorPickerIconOption[]) => ComponentType;
+import { IconColorPickerIconOption } from './icon-options';
 export interface IconColorPickerProps {
     color: string;
     colorOptions?: readonly string[];
@@ -20,6 +8,8 @@ export interface IconColorPickerProps {
     onIconChange?: (icon: string | null) => void;
     disabled?: boolean;
     showIcons?: boolean;
+    colorLabel?: string;
+    iconLabel?: string;
     "aria-label"?: string;
 }
 export declare const IconColorPicker: (props: IconColorPickerProps) => import("react/jsx-runtime").JSX.Element;