Zag catalogue

Fuzor integrates every one of the 51 packages in Zag's machine catalogue at version 1.44.0, including the async-list utility and table of contents. The Zag packages are MIT licensed; their dependencies retain their own licenses, including Apache-2.0 for @internationalized/date. Each has a Fuzor DOM adapter and official fuzor-* root/part tags. Context and nested menus use the menu adapter; linear/circular progress use the progress adapter; single/range sliders use the slider adapter. These variants are not separate upstream packages.

All 51 adapters now use audited private-machine checkpoint contracts: finite states (including nested states), durable context, original defaults and durable refs. Browser resources reconnect to existing DOM. Delays retain deadlines, nested menus relink by stable identity, and async requests resume their loading intent. Use await runtime.dehydrateAsync() to include file bytes in a checkpoint that will move to another document; synchronous checkpoints retain files in their owning document. Restoration documents the resource and transport contract.

Live examples

These examples use the shared adapters with precompiled native parts and deferred activation.

Checkbox

Accept notifications

Number input

Quantity

Pagination

Password visibility

Example password

Steps

Step 1: Choose a project.

Range slider

Allowed range

Radio group

Output formatHTMLJSON

Toggle

Emphasis

Rating

Usefulness

Register or defer

defineAll() from fuzor/ui/client registers the full catalogue. For a specific component, import its register* function from fuzor/ui/components/<name>. For deferred loading, mark an existing root with data-fuzor-ui="<name>", give it a stable ID, and let resumeUi(document) activate its module on interaction. The docs runtime already owns that scope; do not create a second owner in a docs page.

Native buttons, inputs, labels, SVG and canvas parts preserve their browser semantics. Parts can be authored as data-part="thumb" or <fuzor-slider-thumb>. Use native form controls for hidden-input parts.

Shared configuration

configureUi is exported from fuzor/ui/client and fuzor/ui/engine. Configure before activation. The shared Web Components also expose .configuration, .configure(options), .state, .read(property) and .call(method, ...args). A DOM adapter obtained from enhance<Name>(root) has the same behavior methods. Backend interpreters are kept private.

props accepts initial component options, callbacks and collections. parts supplies arguments for parameterized parts. Options such as collection constructors and date/color parsers are re-exported by the corresponding Fuzor component module. Closures and collections stay in memory; checkpoints contain validated JSON public state.

import { configureUi } from "fuzor/ui/engine";
import { enhanceSlider } from "fuzor/ui/components/slider";
const root = document.getElementById("volume")!;
configureUi(root, {
  props: { defaultValue: [20, 80], min: 0, max: 100 },
  parts: {
    thumb: (_element, index) => ({ index }),
    "hidden-input": (_element, index) => ({ index, name: "volume" }),
  },
});
const slider = enhanceSlider(root);
slider.call("setValue", [30, 70]);
slider.destroy();

Simple arguments such as data-index="0", data-value="alpha" and data-ui-props='{"index":0}' are read from the part and its nearest item owner. Root data-ui-props supplies JSON-only component options. Complex objects such as a date, file, tree node or color channel should use configureUi. Async list requires a load function; tree/cascade components require a correctly shaped collection for nonempty trees.

Shared adapters emit ui:state-change with { component, state }. Public state is stored in Effect Atom checkpoints and reconnected to the existing DOM during activation. The named methods depend on the component, such as setValue, setPage, setOpen, setChecked and setPressed; unknown methods fail explicitly.

Coverage

Tests cover every declared finite state in the 42 added machines through an Effect Atom JSON round-trip, without replaying initialization. Deadline tests cover delayed transitions and timer disposal. Production SPA/MPA tests checkpoint and reactivate every added adapter, retain DOM identity, suspend an active slider drag, and restore file bytes after reload. Additional tests cover pending requests, original form-reset defaults and nested menu graphs. These tests qualify the checkpoint contracts; they do not enumerate every visual configuration or application callback.

Component	Root tag	Adapter / checkpoint
Accordion	`fuzor-accordion`	Dedicated / private machine
Angle Slider	`fuzor-angle-slider`	Shared / private machine
Async List	`fuzor-async-list`	Shared / private machine
Avatar	`fuzor-avatar`	Shared / private machine
Carousel	`fuzor-carousel`	Shared / private machine
Cascade Select	`fuzor-cascade-select`	Shared / private machine
Checkbox	`fuzor-checkbox`	Shared / private machine
Clipboard	`fuzor-clipboard`	Shared / private machine
Collapsible	`fuzor-collapsible`	Dedicated / private machine
Color Picker	`fuzor-color-picker`	Shared / private machine
Combobox	`fuzor-combobox`	Shared / private machine
Date Input	`fuzor-date-input`	Shared / private machine
Date Picker	`fuzor-date-picker`	Shared / private machine
Dialog	`fuzor-dialog`	Dedicated / private machine
Drawer	`fuzor-drawer`	Shared / private machine
Editable	`fuzor-editable`	Shared / private machine
File Upload	`fuzor-file-upload`	Shared / private machine
Floating Panel	`fuzor-floating-panel`	Shared / private machine
Hover Card	`fuzor-hover-card`	Shared / private machine
Image Cropper	`fuzor-image-cropper`	Shared / private machine
Listbox	`fuzor-listbox`	Shared / private machine
Marquee	`fuzor-marquee`	Shared / private machine
Menu	`fuzor-menu`	Dedicated / private machine
Navigation Menu	`fuzor-navigation-menu`	Shared / private machine
Number Input	`fuzor-number-input`	Shared / private machine
Pagination	`fuzor-pagination`	Shared / private machine
Password Input	`fuzor-password-input`	Shared / private machine
Pin Input	`fuzor-pin-input`	Shared / private machine
Popover	`fuzor-popover`	Dedicated / private machine
Presence	`fuzor-presence`	Shared / private machine
Progress	`fuzor-progress`	Shared / private machine
Qr Code	`fuzor-qr-code`	Shared / private machine
Radio Group	`fuzor-radio-group`	Shared / private machine
Rating Group	`fuzor-rating-group`	Shared / private machine
Scroll Area	`fuzor-scroll-area`	Shared / private machine
Select	`fuzor-select`	Dedicated / private machine
Signature Pad	`fuzor-signature-pad`	Shared / private machine
Slider	`fuzor-slider`	Shared / private machine
Splitter	`fuzor-splitter`	Shared / private machine
Steps	`fuzor-steps`	Shared / private machine
Switch	`fuzor-switch`	Dedicated / private machine
Tabs	`fuzor-tabs`	Dedicated / private machine
Tags Input	`fuzor-tags-input`	Shared / private machine
Timer	`fuzor-timer`	Shared / private machine
Toast	`fuzor-toast`	Shared / private machine
Toc	`fuzor-toc`	Shared / private machine
Toggle Group	`fuzor-toggle-group`	Shared / private machine
Toggle	`fuzor-toggle`	Shared / private machine
Tooltip	`fuzor-tooltip`	Dedicated / private machine
Tour	`fuzor-tour`	Shared / private machine
Tree View	`fuzor-tree-view`	Shared / private machine

Accordion

Import: fuzor/ui/components/accordion. Root: <fuzor-accordion>.

Parts: item, item-content, item-indicator, item-trigger.

Angle Slider

Import: fuzor/ui/components/angle-slider. Root: <fuzor-angle-slider>.

Parts: label, hidden-input, control, thumb, value-text, marker-group, marker.

Async List

Import: fuzor/ui/components/async-list. Root: <fuzor-async-list>.

Parts: programmatic utility; no generated DOM part getters.

Avatar

Import: fuzor/ui/components/avatar. Root: <fuzor-avatar>.

Parts: image, fallback.

Carousel

Import: fuzor/ui/components/carousel. Root: <fuzor-carousel>.

Parts: item-group, item, control, prev-trigger, next-trigger, indicator-group, indicator, autoplay-trigger, progress-text.

Cascade Select

Import: fuzor/ui/components/cascade-select. Root: <fuzor-cascade-select>.

Parts: label, control, trigger, clear-trigger, positioner, content, list, indicator, item, item-text, item-indicator, value-text, hidden-input.

Checkbox

Import: fuzor/ui/components/checkbox. Root: <fuzor-checkbox>.

Parts: label, control, indicator, hidden-input.

Clipboard

Import: fuzor/ui/components/clipboard. Root: <fuzor-clipboard>.

Parts: label, control, input, trigger, indicator.

Collapsible

Import: fuzor/ui/components/collapsible. Root: <fuzor-collapsible>.

Parts: content, trigger, indicator.

Color Picker

Import: fuzor/ui/components/color-picker. Root: <fuzor-color-picker>.

Parts: label, control, trigger, positioner, content, value-text, area, area-background, area-thumb, transparency-grid, channel-slider, channel-slider-track, channel-slider-label, channel-slider-value-text, channel-slider-thumb, channel-input, hidden-input, eye-dropper-trigger, swatch-group, swatch-trigger, swatch-indicator, swatch, format-trigger, format-select.

Combobox

Import: fuzor/ui/components/combobox. Root: <fuzor-combobox>.

Parts: label, control, positioner, input, trigger, content, list, clear-trigger, item, item-text, item-indicator, item-group, item-group-label.

Date Input

Import: fuzor/ui/components/date-input. Root: <fuzor-date-input>.

Parts: label, control, segment-group, segment, hidden-input.

Date Picker

Import: fuzor/ui/components/date-picker. Root: <fuzor-date-picker>.

Parts: label, control, range-text, content, table, table-head, table-header, table-body, table-row, week-number-header-cell, week-number-cell, day-table-cell, day-table-cell-trigger, month-table-cell, month-table-cell-trigger, year-table-cell, year-table-cell-trigger, next-trigger, prev-trigger, clear-trigger, trigger, view, view-trigger, view-control, input, month-select, year-select, positioner, preset-trigger.

Dialog

Import: fuzor/ui/components/dialog. Root: <fuzor-dialog>.

Parts: trigger, backdrop, positioner, content, title, description, close-trigger.

Drawer

Import: fuzor/ui/components/drawer. Root: <fuzor-drawer>.

Parts: positioner, content, title, description, trigger, backdrop, grabber, grabber-indicator, close-trigger, swipe-area.

Editable

Import: fuzor/ui/components/editable. Root: <fuzor-editable>.

Parts: area, label, input, preview, edit-trigger, control, submit-trigger, cancel-trigger.

File Upload

Import: fuzor/ui/components/file-upload. Root: <fuzor-file-upload>.

Parts: dropzone, trigger, hidden-input, item-group, item, item-name, item-size-text, item-preview, item-preview-image, item-delete-trigger, label, clear-trigger.

Floating Panel

Import: fuzor/ui/components/floating-panel. Root: <fuzor-floating-panel>.

Parts: trigger, positioner, content, close-trigger, stage-trigger, resize-trigger, drag-trigger, control, title, header, body.

Import: fuzor/ui/components/hover-card. Root: <fuzor-hover-card>.

Parts: arrow, arrow-tip, trigger, positioner, content.

Image Cropper

Import: fuzor/ui/components/image-cropper. Root: <fuzor-image-cropper>.

Parts: viewport, image, selection, handle, grid.

Listbox

Import: fuzor/ui/components/listbox. Root: <fuzor-listbox>.

Parts: input, label, value-text, item, item-text, item-indicator, item-group-label, item-group, content.

Marquee

Import: fuzor/ui/components/marquee. Root: <fuzor-marquee>.

Parts: viewport, content, edge, item.

Import: fuzor/ui/components/menu. Root: <fuzor-menu>.

Parts: option-item, item, context-trigger, trigger-item, trigger, indicator, positioner, arrow, arrow-tip, content, separator, item-indicator, item-text, item-group-label, item-group.

Import: fuzor/ui/components/navigation-menu. Root: <fuzor-navigation-menu>.

Parts: list, item, indicator, arrow, trigger, trigger-proxy, viewport-proxy, link, content, viewport-positioner, viewport, item-indicator.

Number Input

Import: fuzor/ui/components/number-input. Root: <fuzor-number-input>.

Parts: label, control, value-text, input, decrement-trigger, increment-trigger, scrubber.

Pagination

Import: fuzor/ui/components/pagination. Root: <fuzor-pagination>.

Parts: ellipsis, item, prev-trigger, first-trigger, next-trigger, last-trigger.

Password Input

Import: fuzor/ui/components/password-input. Root: <fuzor-password-input>.

Parts: label, input, visibility-trigger, indicator, control.

Pin Input

Import: fuzor/ui/components/pin-input. Root: <fuzor-pin-input>.

Parts: label, hidden-input, control, input.

Import: fuzor/ui/components/popover. Root: <fuzor-popover>.

Parts: arrow, arrow-tip, anchor, trigger, indicator, positioner, content, title, description, close-trigger.

Presence

Import: fuzor/ui/components/presence. Root: <fuzor-presence>.

Parts: programmatic utility; no generated DOM part getters.

Progress

Import: fuzor/ui/components/progress. Root: <fuzor-progress>.

Parts: circle, label, value-text, track, range, circle-track, circle-range, view.

Qr Code

Import: fuzor/ui/components/qr-code. Root: <fuzor-qr-code>.

Parts: frame, pattern, overlay, download-trigger.

Radio Group

Import: fuzor/ui/components/radio-group. Root: <fuzor-radio-group>.

Parts: label, item, item-text, item-control, item-hidden-input, indicator.

Rating Group

Import: fuzor/ui/components/rating-group. Root: <fuzor-rating-group>.

Parts: hidden-input, label, control, item.

Scroll Area

Import: fuzor/ui/components/scroll-area. Root: <fuzor-scroll-area>.

Parts: viewport, content, scrollbar, thumb, corner.

Select

Import: fuzor/ui/components/select. Root: <fuzor-select>.

Parts: label, control, value-text, trigger, indicator, item, item-text, item-indicator, item-group-label, item-group, clear-trigger, hidden-select, positioner, content, list.

Signature Pad

Import: fuzor/ui/components/signature-pad. Root: <fuzor-signature-pad>.

Parts: label, control, segment, segment-path, guide, clear-trigger, hidden-input.

Slider

Import: fuzor/ui/components/slider. Root: <fuzor-slider>.

Parts: label, value-text, track, thumb, hidden-input, range, control, marker-group, marker, dragging-indicator.

Splitter

Import: fuzor/ui/components/splitter. Root: <fuzor-splitter>.

Parts: panel, resize-trigger.

Steps

Import: fuzor/ui/components/steps. Root: <fuzor-steps>.

Parts: list, item, trigger, content, indicator, separator, next-trigger, prev-trigger, progress.

Switch

Import: fuzor/ui/components/switch. Root: <fuzor-switch>.

Parts: label, thumb, control, hidden-input.

Tabs

Import: fuzor/ui/components/tabs. Root: <fuzor-tabs>.

Parts: list, trigger, content, indicator.

Tags Input

Import: fuzor/ui/components/tags-input. Root: <fuzor-tags-input>.

Parts: label, control, input, hidden-input, item, item-preview, item-text, item-input, item-delete-trigger, clear-trigger.

Timer

Import: fuzor/ui/components/timer. Root: <fuzor-timer>.

Parts: area, control, item, item-label, item-value, separator, action-trigger.

Toast

Import: fuzor/ui/components/toast. Root: <fuzor-toast>.

Parts: ghost-before, ghost-after, title, description, action-trigger, close-trigger.

Toggle Group

Import: fuzor/ui/components/toggle-group. Root: <fuzor-toggle-group>.

Parts: item.

Toggle

Import: fuzor/ui/components/toggle. Root: <fuzor-toggle>.

Parts: indicator.

Import: fuzor/ui/components/tooltip. Root: <fuzor-tooltip>.

Parts: trigger, arrow, arrow-tip, positioner, content.

Tour

Import: fuzor/ui/components/tour. Root: <fuzor-tour>.

Parts: backdrop, spotlight, progress-text, positioner, arrow, arrow-tip, content, title, description, close-trigger, action-trigger.

Tree View

Import: fuzor/ui/components/tree-view. Root: <fuzor-tree-view>.

Parts: label, tree, item, item-text, item-indicator, branch, branch-indicator, branch-trigger, branch-control, branch-text, branch-content, branch-indent-guide, node-checkbox, node-rename-input.

On this page

@media (max-width: 800px) { .docs-desktop-menu { display: block; } .docs-menu { display: none; } } .docs-theme-switch, .docs-outline, fuzor-tooltip-positioner { display: none; } .docs-article fuzor-tabs-content[hidden], .docs-article fuzor-accordion-content[hidden] { display: block !important; }

Zag catalogue

Live examples

Checkbox

Number input

Pagination

Password visibility

Steps

Range slider

Radio group

Toggle

Rating

Register or defer

Shared configuration

Coverage

Accordion

Angle Slider

Async List

Avatar

Carousel

Cascade Select

Checkbox

Clipboard

Collapsible

Color Picker

Combobox

Date Input

Date Picker

Dialog

Drawer

Editable

File Upload

Floating Panel

Hover Card

Image Cropper

Listbox

Marquee

Menu

Navigation Menu

Number Input

Pagination

Password Input

Pin Input

Popover

Presence

Progress

Qr Code

Radio Group

Rating Group

Scroll Area

Select

Signature Pad

Slider

Splitter

Steps

Switch

Tabs

Tags Input

Timer

Toast

Toc

Toggle Group

Toggle

Tooltip

Tour

Tree View