Workbench widgets

Compose controls for settings, file loading, pane layouts, and large data explorers. Start with the focused examples and API guides for TreeView, JsonTree, SplitPane, VirtualList, and FileInput. The combined explorer below shares selection and settings between its panes.

NumberRangeInput

Draft text stays local until it is finite and within bounds. Clearing retains the value; use empty="undefined" for optional fields. commit="change" waits for Enter, blur, or change. on_commit receives accepted changes. Native input attributes go in number_props and range_props.

Committed: 0.5

SplitPane and TreeView

SplitPane sizes its parent through --split-pane-size. Bind ratio or first_px; min_px, max_px, and second_min_px constrain it. Arrow keys resize, Home/End reach the limits, and Enter collapses or restores when collapsible is set. Save bindings or on_resize values in your own store for persistence.

TreeView accepts stable unique IDs, labels, children, or an async load(signal) function. It renders expanded nodes only and supports arrow keys, Home/End, selection, and type-to-focus. JsonTree adds search, copy, paths, editing callbacks and comparison highlighting for object data.

VirtualList

Only visible rows plus overscan are mounted. Set a fixed item_size that fits your content and call scroll_to_index to reveal a row. The exported virtual_window helper supports custom table and grid markup. Variable-height rows require a different layout.

FileInput

Picker and drop validation share accept, max_size, max_files, and multiple. Rejections include type, size, or count reasons. Supply on_files(files, signal) to parse or upload; replacement, cancellation, and unmount abort the signal. Supply a children snippet for custom previews, including FileDetails for text.

Progress and TaskStatus

Progress uses a native progress element; omit value for indeterminate work. TaskStatus adds a live label and caller-owned cancellation/retry callbacks, so it can be used inside an action, pane, or toast without owning your operation.

CodeBlock and StatGrid

CodeBlock accepts plain code or an optional highlight(code, language, signal) callback. Return tokens with raw text and an optional CSS class (the component escapes the text), or trusted highlighted HTML. Changes cancel pending work; failures leave the source visible and show the error. Set wrap for long lines.

const total = values.reduce((sum, value) => sum + value, 0)

StatGrid accepts items with label, value, optional unit, delta and hint. A custom format callback controls value formatting. Non-finite values and changes display as unavailable.

Feedback

StatusMessage supports info, success, warning and error announcements. Dismissal clears its bindable message. Spinner adds an accessible status around CircleSpinner.

DragOverlay fills a positioned parent; ClickFeedback uses viewport coordinates. The caller owns visibility and timing.

Canvas and keyboard primitives

create_canvas_surface from svelte-widgets/canvas takes reactive canvas and optional overlay getters, an optional CSS height, draw callbacks and repaint_deps. Create it during component initialization. Frames receive a 2D context and CSS width/height. The base is cleared before drawing; the overlay clears itself. schedule(false) redraws only the overlay. Parent resizes and DPR changes update both backing stores; cleanup stops observers and pending frames.

create_roving_focus from svelte-widgets/roving-focus takes container and items getters. Give each item a unique data-roving-key, and use tabindex(key). Forward the container's keydown and focusin events. Arrow keys wrap through DOM order; Home and End reach its ends. Modified keys and editable children retain their normal behavior.