{ "twins": { "/agent-chat/": "/agent-chat.md", "/agents-page/": "/agents-page.md", "/blocks-page/auth/": "/blocks-page/auth.md", "/blocks-page/faq/": "/blocks-page/faq.md", "/blocks-page/features/": "/blocks-page/features.md", "/blocks-page/footer/": "/blocks-page/footer.md", "/blocks-page/hero/": "/blocks-page/hero.md", "/blocks-page/": "/blocks-page.md", "/blocks-page/pricing/": "/blocks-page/pricing.md", "/brand/": "/brand.md", "/builder/": "/builder.md", "/built-with/": "/built-with.md", "/built-with/protoyard/": "/built-with/protoyard.md", "/canvas-page/": "/canvas-page.md", "/changelog/": "/changelog.md", "/charts-page/canvas/": "/charts-page/canvas.md", "/charts-page/cartesian/": "/charts-page/cartesian.md", "/charts-page/compact/": "/charts-page/compact.md", "/charts-page/flow/": "/charts-page/flow.md", "/charts-page/geo/": "/charts-page/geo.md", "/charts-page/": "/charts-page.md", "/charts-page/interaction/": "/charts-page/interaction.md", "/charts-page/matrix/": "/charts-page/matrix.md", "/charts-page/part-whole/": "/charts-page/part-whole.md", "/color-explorer/": "/color-explorer.md", "/component-pages/accordion/": "/component-pages/accordion.md", "/component-pages/alert-dialog/": "/component-pages/alert-dialog.md", "/component-pages/alert/": "/component-pages/alert.md", "/component-pages/analytics-grid/": "/component-pages/analytics-grid.md", "/component-pages/app-nav/": "/component-pages/app-nav.md", "/component-pages/avatar-group-grid/": "/component-pages/avatar-group-grid.md", "/component-pages/avatar/": "/component-pages/avatar.md", "/component-pages/badge/": "/component-pages/badge.md", "/component-pages/banner/": "/component-pages/banner.md", "/component-pages/blocks-code/": "/component-pages/blocks-code.md", "/component-pages/blocks-data/": "/component-pages/blocks-data.md", "/component-pages/blocks-diagram/": "/component-pages/blocks-diagram.md", "/component-pages/blocks-embed/": "/component-pages/blocks-embed.md", "/component-pages/blocks-interactive/": "/component-pages/blocks-interactive.md", "/component-pages/blocks-map/": "/component-pages/blocks-map.md", "/component-pages/blocks-media/": "/component-pages/blocks-media.md", "/component-pages/blocks-structure/": "/component-pages/blocks-structure.md", "/component-pages/blocks-text/": "/component-pages/blocks-text.md", "/component-pages/bottom-nav/": "/component-pages/bottom-nav.md", "/component-pages/box/": "/component-pages/box.md", "/component-pages/breadcrumb/": "/component-pages/breadcrumb.md", "/component-pages/button-group/": "/component-pages/button-group.md", "/component-pages/button/": "/component-pages/button.md", "/component-pages/callout/": "/component-pages/callout.md", "/component-pages/card/": "/component-pages/card.md", "/component-pages/carousel/": "/component-pages/carousel.md", "/component-pages/charts-area/": "/component-pages/charts-area.md", "/component-pages/charts-bar/": "/component-pages/charts-bar.md", "/component-pages/charts-bubble/": "/component-pages/charts-bubble.md", "/component-pages/charts-bullet/": "/component-pages/charts-bullet.md", "/component-pages/charts-canvas-renderer/": "/component-pages/charts-canvas-renderer.md", "/component-pages/charts-cartesian/": "/component-pages/charts-cartesian.md", "/component-pages/charts-combo/": "/component-pages/charts-combo.md", "/component-pages/charts-donut/": "/component-pages/charts-donut.md", "/component-pages/charts-funnel/": "/component-pages/charts-funnel.md", "/component-pages/charts-gauge/": "/component-pages/charts-gauge.md", "/component-pages/charts-geo-map/": "/component-pages/charts-geo-map.md", "/component-pages/charts-geo-point-map/": "/component-pages/charts-geo-point-map.md", "/component-pages/charts-heatmap/": "/component-pages/charts-heatmap.md", "/component-pages/charts-line/": "/component-pages/charts-line.md", "/component-pages/charts-network/": "/component-pages/charts-network.md", "/component-pages/charts-pie/": "/component-pages/charts-pie.md", "/component-pages/charts-progress-ring/": "/component-pages/charts-progress-ring.md", "/component-pages/charts-sankey/": "/component-pages/charts-sankey.md", "/component-pages/charts-scatter/": "/component-pages/charts-scatter.md", "/component-pages/charts-sparkline/": "/component-pages/charts-sparkline.md", "/component-pages/charts-stacked-bar/": "/component-pages/charts-stacked-bar.md", "/component-pages/charts-sunburst/": "/component-pages/charts-sunburst.md", "/component-pages/charts-treemap/": "/component-pages/charts-treemap.md", "/component-pages/checkbox/": "/component-pages/checkbox.md", "/component-pages/chip/": "/component-pages/chip.md", "/component-pages/code-field/": "/component-pages/code-field.md", "/component-pages/code/": "/component-pages/code.md", "/component-pages/color-swatch/": "/component-pages/color-swatch.md", "/component-pages/combobox/": "/component-pages/combobox.md", "/component-pages/command-palette/": "/component-pages/command-palette.md", "/component-pages/content-layout/": "/component-pages/content-layout.md", "/component-pages/context-menu-trigger/": "/component-pages/context-menu-trigger.md", "/component-pages/context-menu/": "/component-pages/context-menu.md", "/component-pages/deck-slide/": "/component-pages/deck-slide.md", "/component-pages/description/": "/component-pages/description.md", "/component-pages/detail-panel/": "/component-pages/detail-panel.md", "/component-pages/dialog/": "/component-pages/dialog.md", "/component-pages/drawer/": "/component-pages/drawer.md", "/component-pages/dropdown-menu-content/": "/component-pages/dropdown-menu-content.md", "/component-pages/dropdown-menu-item/": "/component-pages/dropdown-menu-item.md", "/component-pages/dropdown-menu-trigger/": "/component-pages/dropdown-menu-trigger.md", "/component-pages/dropdown-menu/": "/component-pages/dropdown-menu.md", "/component-pages/empty-state/": "/component-pages/empty-state.md", "/component-pages/error-state/": "/component-pages/error-state.md", "/component-pages/field-error/": "/component-pages/field-error.md", "/component-pages/field/": "/component-pages/field.md", "/component-pages/file-upload/": "/component-pages/file-upload.md", "/component-pages/form/": "/component-pages/form.md", "/component-pages/heading/": "/component-pages/heading.md", "/component-pages/hover-card-content/": "/component-pages/hover-card-content.md", "/component-pages/hover-card/": "/component-pages/hover-card.md", "/component-pages/icon-button/": "/component-pages/icon-button.md", "/component-pages/icon/": "/component-pages/icon.md", "/component-pages/": "/component-pages.md", "/component-pages/inline-text/": "/component-pages/inline-text.md", "/component-pages/input-group/": "/component-pages/input-group.md", "/component-pages/input/": "/component-pages/input.md", "/component-pages/kbd/": "/component-pages/kbd.md", "/component-pages/kpi/": "/component-pages/kpi.md", "/component-pages/label/": "/component-pages/label.md", "/component-pages/layout-auth-split/": "/component-pages/layout-auth-split.md", "/component-pages/layout-blog/": "/component-pages/layout-blog.md", "/component-pages/layout-card/": "/component-pages/layout-card.md", "/component-pages/layout-chrome/": "/component-pages/layout-chrome.md", "/component-pages/layout-dashboard-grid/": "/component-pages/layout-dashboard-grid.md", "/component-pages/layout-deck/": "/component-pages/layout-deck.md", "/component-pages/layout-doc/": "/component-pages/layout-doc.md", "/component-pages/layout-docs/": "/component-pages/layout-docs.md", "/component-pages/layout-drawer/": "/component-pages/layout-drawer.md", "/component-pages/layout-dual-sidebar/": "/component-pages/layout-dual-sidebar.md", "/component-pages/layout-editorial/": "/component-pages/layout-editorial.md", "/component-pages/layout-grid/": "/component-pages/layout-grid.md", "/component-pages/layout-host/": "/component-pages/layout-host.md", "/component-pages/layout-landing/": "/component-pages/layout-landing.md", "/component-pages/layout-marketing/": "/component-pages/layout-marketing.md", "/component-pages/layout-page/": "/component-pages/layout-page.md", "/component-pages/layout-pricing/": "/component-pages/layout-pricing.md", "/component-pages/layout-settings/": "/component-pages/layout-settings.md", "/component-pages/layout-sidebar/": "/component-pages/layout-sidebar.md", "/component-pages/layout-top-nav/": "/component-pages/layout-top-nav.md", "/component-pages/layout-wizard/": "/component-pages/layout-wizard.md", "/component-pages/link/": "/component-pages/link.md", "/component-pages/list-item/": "/component-pages/list-item.md", "/component-pages/list/": "/component-pages/list.md", "/component-pages/mark/": "/component-pages/mark.md", "/component-pages/media-composition-canvas/": "/component-pages/media-composition-canvas.md", "/component-pages/media-composition-svg/": "/component-pages/media-composition-svg.md", "/component-pages/media-image/": "/component-pages/media-image.md", "/component-pages/menubar-trigger/": "/component-pages/menubar-trigger.md", "/component-pages/menubar/": "/component-pages/menubar.md", "/component-pages/mobile-app-frame/": "/component-pages/mobile-app-frame.md", "/component-pages/mobile-header/": "/component-pages/mobile-header.md", "/component-pages/multi-select/": "/component-pages/multi-select.md", "/component-pages/nav-icon/": "/component-pages/nav-icon.md", "/component-pages/navigation-menu/": "/component-pages/navigation-menu.md", "/component-pages/number-field/": "/component-pages/number-field.md", "/component-pages/pagination/": "/component-pages/pagination.md", "/component-pages/pin-input/": "/component-pages/pin-input.md", "/component-pages/popover-content/": "/component-pages/popover-content.md", "/component-pages/popover/": "/component-pages/popover.md", "/component-pages/progress/": "/component-pages/progress.md", "/component-pages/prose/": "/component-pages/prose.md", "/component-pages/radio-group/": "/component-pages/radio-group.md", "/component-pages/radio/": "/component-pages/radio.md", "/component-pages/rating/": "/component-pages/rating.md", "/component-pages/responsive-modal/": "/component-pages/responsive-modal.md", "/component-pages/screen-outlet/": "/component-pages/screen-outlet.md", "/component-pages/select-content/": "/component-pages/select-content.md", "/component-pages/select-group/": "/component-pages/select-group.md", "/component-pages/select-item/": "/component-pages/select-item.md", "/component-pages/select-label/": "/component-pages/select-label.md", "/component-pages/select-portal/": "/component-pages/select-portal.md", "/component-pages/select-separator/": "/component-pages/select-separator.md", "/component-pages/select-trigger/": "/component-pages/select-trigger.md", "/component-pages/select-value/": "/component-pages/select-value.md", "/component-pages/select-viewport/": "/component-pages/select-viewport.md", "/component-pages/select/": "/component-pages/select.md", "/component-pages/separator/": "/component-pages/separator.md", "/component-pages/sheet/": "/component-pages/sheet.md", "/component-pages/sidebar/": "/component-pages/sidebar.md", "/component-pages/skeleton/": "/component-pages/skeleton.md", "/component-pages/spinner/": "/component-pages/spinner.md", "/component-pages/split-view/": "/component-pages/split-view.md", "/component-pages/stat/": "/component-pages/stat.md", "/component-pages/stepper/": "/component-pages/stepper.md", "/component-pages/switch/": "/component-pages/switch.md", "/component-pages/table/": "/component-pages/table.md", "/component-pages/tabs/": "/component-pages/tabs.md", "/component-pages/tag/": "/component-pages/tag.md", "/component-pages/tags-input/": "/component-pages/tags-input.md", "/component-pages/text-counter/": "/component-pages/text-counter.md", "/component-pages/text/": "/component-pages/text.md", "/component-pages/textarea/": "/component-pages/textarea.md", "/component-pages/time-field/": "/component-pages/time-field.md", "/component-pages/timeline/": "/component-pages/timeline.md", "/component-pages/toaster/": "/component-pages/toaster.md", "/component-pages/toggle-group/": "/component-pages/toggle-group.md", "/component-pages/tooltip/": "/component-pages/tooltip.md", "/dashboards-page/": "/dashboards-page.md", "/design-systems/": "/design-systems.md", "/design-systems/kit/": "/design-systems/kit.md", "/developers/": "/developers.md", "/docs-shell/getting-started/": "/docs-shell/getting-started.md", "/docs-shell/": "/docs-shell.md", "/docs-shell/navigation/": "/docs-shell/navigation.md", "/documents-page/": "/documents-page.md", "/drag-page/": "/drag-page.md", "/editor-page/": "/editor-page.md", "/emoji/": "/emoji.md", "/evidence/": "/evidence.md", "/examples/astro-site-doc/": "/examples/astro-site-doc.md", "/examples/astro-site-hero/": "/examples/astro-site-hero.md", "/examples/blocks-code-field/": "/examples/blocks-code-field.md", "/examples/blocks-code-hostile/": "/examples/blocks-code-hostile.md", "/examples/blocks-code/": "/examples/blocks-code.md", "/examples/blocks-data-charts/": "/examples/blocks-data-charts.md", "/examples/blocks-data/": "/examples/blocks-data.md", "/examples/blocks-diagram/": "/examples/blocks-diagram.md", "/examples/blocks-embed/": "/examples/blocks-embed.md", "/examples/blocks-interactive/": "/examples/blocks-interactive.md", "/examples/blocks-map/": "/examples/blocks-map.md", "/examples/blocks-media-hostile/": "/examples/blocks-media-hostile.md", "/examples/blocks-media/": "/examples/blocks-media.md", "/examples/blocks-structure/": "/examples/blocks-structure.md", "/examples/blocks-text-hostile/": "/examples/blocks-text-hostile.md", "/examples/blocks-text/": "/examples/blocks-text.md", "/examples/canvas-editor/": "/examples/canvas-editor.md", "/examples/canvas-viewer/": "/examples/canvas-viewer.md", "/examples/charts-calendar/": "/examples/charts-calendar.md", "/examples/charts-canvas/": "/examples/charts-canvas.md", "/examples/charts-cartesian/": "/examples/charts-cartesian.md", "/examples/charts-compact/": "/examples/charts-compact.md", "/examples/charts-flow/": "/examples/charts-flow.md", "/examples/charts-geo/": "/examples/charts-geo.md", "/examples/charts-histogram/": "/examples/charts-histogram.md", "/examples/charts-interaction/": "/examples/charts-interaction.md", "/examples/charts-matrix/": "/examples/charts-matrix.md", "/examples/charts-pack/": "/examples/charts-pack.md", "/examples/charts-part-whole/": "/examples/charts-part-whole.md", "/examples/charts-rtl/": "/examples/charts-rtl.md", "/examples/charts-statistical/": "/examples/charts-statistical.md", "/examples/charts-windowed/": "/examples/charts-windowed.md", "/examples/chat-attachment/": "/examples/chat-attachment.md", "/examples/chat-composer/": "/examples/chat-composer.md", "/examples/chat-display/": "/examples/chat-display.md", "/examples/chat-thread/": "/examples/chat-thread.md", "/examples/core-safe-href/": "/examples/core-safe-href.md", "/examples/data-activity/": "/examples/data-activity.md", "/examples/data-board-footer/": "/examples/data-board-footer.md", "/examples/data-board-lanes/": "/examples/data-board-lanes.md", "/examples/data-board/": "/examples/data-board.md", "/examples/data-calendar-month/": "/examples/data-calendar-month.md", "/examples/data-calendar/": "/examples/data-calendar.md", "/examples/data-cohort/": "/examples/data-cohort.md", "/examples/data-dashboard-metrics/": "/examples/data-dashboard-metrics.md", "/examples/data-dashboard/": "/examples/data-dashboard.md", "/examples/data-files/": "/examples/data-files.md", "/examples/data-filter-builder/": "/examples/data-filter-builder.md", "/examples/data-grid-columns-rtl/": "/examples/data-grid-columns-rtl.md", "/examples/data-grid-columns/": "/examples/data-grid-columns.md", "/examples/data-grid-core/": "/examples/data-grid-core.md", "/examples/data-grid-editing-virtual/": "/examples/data-grid-editing-virtual.md", "/examples/data-grid-editing/": "/examples/data-grid-editing.md", "/examples/data-grid-paging/": "/examples/data-grid-paging.md", "/examples/data-grid-virtual/": "/examples/data-grid-virtual.md", "/examples/data-inbox/": "/examples/data-inbox.md", "/examples/data-map/": "/examples/data-map.md", "/examples/data-timeline/": "/examples/data-timeline.md", "/examples/data-tree-view/": "/examples/data-tree-view.md", "/examples/data-virtual-list-view/": "/examples/data-virtual-list-view.md", "/examples/data-virtual-list/": "/examples/data-virtual-list.md", "/examples/editor-basic/": "/examples/editor-basic.md", "/examples/editor-block-menu/": "/examples/editor-block-menu.md", "/examples/editor-dialect-export/": "/examples/editor-dialect-export.md", "/examples/editor-emoji/": "/examples/editor-emoji.md", "/examples/editor-long-document/": "/examples/editor-long-document.md", "/examples/editor-paste/": "/examples/editor-paste.md", "/examples/editor-toolbar/": "/examples/editor-toolbar.md", "/examples/forms-builder/": "/examples/forms-builder.md", "/examples/forms-fields/": "/examples/forms-fields.md", "/examples/forms-registration/": "/examples/forms-registration.md", "/examples/": "/examples.md", "/examples/layout-blog-content/": "/examples/layout-blog-content.md", "/examples/layout-docs-content/": "/examples/layout-docs-content.md", "/examples/layout-editorial-content/": "/examples/layout-editorial-content.md", "/examples/layouts-auth-settings/": "/examples/layouts-auth-settings.md", "/examples/layouts-dashboard/": "/examples/layouts-dashboard.md", "/examples/layouts-marketing/": "/examples/layouts-marketing.md", "/examples/layouts-mobile-drawer/": "/examples/layouts-mobile-drawer.md", "/examples/layouts-mobile-rtl/": "/examples/layouts-mobile-rtl.md", "/examples/layouts-mobile-tabs/": "/examples/layouts-mobile-tabs.md", "/examples/layouts-shells/": "/examples/layouts-shells.md", "/examples/lego/": "/examples/lego.md", "/examples/media-animation-timeline/": "/examples/media-animation-timeline.md", "/examples/media-animation/": "/examples/media-animation.md", "/examples/media-audio/": "/examples/media-audio.md", "/examples/media-captions/": "/examples/media-captions.md", "/examples/media-composition-canvas/": "/examples/media-composition-canvas.md", "/examples/media-composition-model/": "/examples/media-composition-model.md", "/examples/media-composition-svg/": "/examples/media-composition-svg.md", "/examples/media-export/": "/examples/media-export.md", "/examples/media-gallery-blocked/": "/examples/media-gallery-blocked.md", "/examples/media-gallery-masonry/": "/examples/media-gallery-masonry.md", "/examples/media-gallery/": "/examples/media-gallery.md", "/examples/media-generator-slot/": "/examples/media-generator-slot.md", "/examples/media-image-dark/": "/examples/media-image-dark.md", "/examples/media-image-editor-blocked/": "/examples/media-image-editor-blocked.md", "/examples/media-image-editor-edited/": "/examples/media-image-editor-edited.md", "/examples/media-image-editor/": "/examples/media-image-editor.md", "/examples/media-image/": "/examples/media-image.md", "/examples/media-video-edit/": "/examples/media-video-edit.md", "/examples/media-video/": "/examples/media-video.md", "/examples/player-blueprint-preview/": "/examples/player-blueprint-preview.md", "/examples/player-dashboard/": "/examples/player-dashboard.md", "/examples/player-deck/": "/examples/player-deck.md", "/examples/preview/astro-site-doc/": "/examples/preview/astro-site-doc.md", "/examples/preview/astro-site-hero/": "/examples/preview/astro-site-hero.md", "/examples/preview/blocks-code-field/": "/examples/preview/blocks-code-field.md", "/examples/preview/blocks-code-hostile/": "/examples/preview/blocks-code-hostile.md", "/examples/preview/blocks-code/": "/examples/preview/blocks-code.md", "/examples/preview/blocks-data-charts/": "/examples/preview/blocks-data-charts.md", "/examples/preview/blocks-data/": "/examples/preview/blocks-data.md", "/examples/preview/blocks-diagram/": "/examples/preview/blocks-diagram.md", "/examples/preview/blocks-embed/": "/examples/preview/blocks-embed.md", "/examples/preview/blocks-interactive/": "/examples/preview/blocks-interactive.md", "/examples/preview/blocks-map/": "/examples/preview/blocks-map.md", "/examples/preview/blocks-media-hostile/": "/examples/preview/blocks-media-hostile.md", "/examples/preview/blocks-media/": "/examples/preview/blocks-media.md", "/examples/preview/blocks-structure/": "/examples/preview/blocks-structure.md", "/examples/preview/blocks-text-hostile/": "/examples/preview/blocks-text-hostile.md", "/examples/preview/blocks-text/": "/examples/preview/blocks-text.md", "/examples/preview/canvas-editor/": "/examples/preview/canvas-editor.md", "/examples/preview/canvas-viewer/": "/examples/preview/canvas-viewer.md", "/examples/preview/charts-calendar/": "/examples/preview/charts-calendar.md", "/examples/preview/charts-canvas/": "/examples/preview/charts-canvas.md", "/examples/preview/charts-cartesian/": "/examples/preview/charts-cartesian.md", "/examples/preview/charts-compact/": "/examples/preview/charts-compact.md", "/examples/preview/charts-flow/": "/examples/preview/charts-flow.md", "/examples/preview/charts-geo/": "/examples/preview/charts-geo.md", "/examples/preview/charts-histogram/": "/examples/preview/charts-histogram.md", "/examples/preview/charts-interaction/": "/examples/preview/charts-interaction.md", "/examples/preview/charts-matrix/": "/examples/preview/charts-matrix.md", "/examples/preview/charts-pack/": "/examples/preview/charts-pack.md", "/examples/preview/charts-part-whole/": "/examples/preview/charts-part-whole.md", "/examples/preview/charts-rtl/": "/examples/preview/charts-rtl.md", "/examples/preview/charts-statistical/": "/examples/preview/charts-statistical.md", "/examples/preview/charts-windowed/": "/examples/preview/charts-windowed.md", "/examples/preview/chat-attachment/": "/examples/preview/chat-attachment.md", "/examples/preview/chat-composer/": "/examples/preview/chat-composer.md", "/examples/preview/chat-display/": "/examples/preview/chat-display.md", "/examples/preview/chat-thread/": "/examples/preview/chat-thread.md", "/examples/preview/core-safe-href/": "/examples/preview/core-safe-href.md", "/examples/preview/data-activity/": "/examples/preview/data-activity.md", "/examples/preview/data-board-footer/": "/examples/preview/data-board-footer.md", "/examples/preview/data-board-lanes/": "/examples/preview/data-board-lanes.md", "/examples/preview/data-board/": "/examples/preview/data-board.md", "/examples/preview/data-calendar-month/": "/examples/preview/data-calendar-month.md", "/examples/preview/data-calendar/": "/examples/preview/data-calendar.md", "/examples/preview/data-cohort/": "/examples/preview/data-cohort.md", "/examples/preview/data-dashboard-metrics/": "/examples/preview/data-dashboard-metrics.md", "/examples/preview/data-dashboard/": "/examples/preview/data-dashboard.md", "/examples/preview/data-files/": "/examples/preview/data-files.md", "/examples/preview/data-filter-builder/": "/examples/preview/data-filter-builder.md", "/examples/preview/data-grid-columns-rtl/": "/examples/preview/data-grid-columns-rtl.md", "/examples/preview/data-grid-columns/": "/examples/preview/data-grid-columns.md", "/examples/preview/data-grid-core/": "/examples/preview/data-grid-core.md", "/examples/preview/data-grid-editing-virtual/": "/examples/preview/data-grid-editing-virtual.md", "/examples/preview/data-grid-editing/": "/examples/preview/data-grid-editing.md", "/examples/preview/data-grid-paging/": "/examples/preview/data-grid-paging.md", "/examples/preview/data-grid-virtual/": "/examples/preview/data-grid-virtual.md", "/examples/preview/data-inbox/": "/examples/preview/data-inbox.md", "/examples/preview/data-map/": "/examples/preview/data-map.md", "/examples/preview/data-timeline/": "/examples/preview/data-timeline.md", "/examples/preview/data-tree-view/": "/examples/preview/data-tree-view.md", "/examples/preview/data-virtual-list-view/": "/examples/preview/data-virtual-list-view.md", "/examples/preview/data-virtual-list/": "/examples/preview/data-virtual-list.md", "/examples/preview/editor-basic/": "/examples/preview/editor-basic.md", "/examples/preview/editor-block-menu/": "/examples/preview/editor-block-menu.md", "/examples/preview/editor-dialect-export/": "/examples/preview/editor-dialect-export.md", "/examples/preview/editor-emoji/": "/examples/preview/editor-emoji.md", "/examples/preview/editor-long-document/": "/examples/preview/editor-long-document.md", "/examples/preview/editor-paste/": "/examples/preview/editor-paste.md", "/examples/preview/editor-toolbar/": "/examples/preview/editor-toolbar.md", "/examples/preview/forms-builder/": "/examples/preview/forms-builder.md", "/examples/preview/forms-fields/": "/examples/preview/forms-fields.md", "/examples/preview/forms-registration/": "/examples/preview/forms-registration.md", "/examples/preview/layout-blog-content/": "/examples/preview/layout-blog-content.md", "/examples/preview/layout-docs-content/": "/examples/preview/layout-docs-content.md", "/examples/preview/layout-editorial-content/": "/examples/preview/layout-editorial-content.md", "/examples/preview/layouts-auth-settings/": "/examples/preview/layouts-auth-settings.md", "/examples/preview/layouts-dashboard/": "/examples/preview/layouts-dashboard.md", "/examples/preview/layouts-marketing/": "/examples/preview/layouts-marketing.md", "/examples/preview/layouts-mobile-drawer/": "/examples/preview/layouts-mobile-drawer.md", "/examples/preview/layouts-mobile-rtl/": "/examples/preview/layouts-mobile-rtl.md", "/examples/preview/layouts-mobile-tabs/": "/examples/preview/layouts-mobile-tabs.md", "/examples/preview/layouts-shells/": "/examples/preview/layouts-shells.md", "/examples/preview/lego/": "/examples/preview/lego.md", "/examples/preview/media-animation-timeline/": "/examples/preview/media-animation-timeline.md", "/examples/preview/media-animation/": "/examples/preview/media-animation.md", "/examples/preview/media-audio/": "/examples/preview/media-audio.md", "/examples/preview/media-captions/": "/examples/preview/media-captions.md", "/examples/preview/media-composition-canvas/": "/examples/preview/media-composition-canvas.md", "/examples/preview/media-composition-model/": "/examples/preview/media-composition-model.md", "/examples/preview/media-composition-svg/": "/examples/preview/media-composition-svg.md", "/examples/preview/media-export/": "/examples/preview/media-export.md", "/examples/preview/media-gallery-blocked/": "/examples/preview/media-gallery-blocked.md", "/examples/preview/media-gallery-masonry/": "/examples/preview/media-gallery-masonry.md", "/examples/preview/media-gallery/": "/examples/preview/media-gallery.md", "/examples/preview/media-generator-slot/": "/examples/preview/media-generator-slot.md", "/examples/preview/media-image-dark/": "/examples/preview/media-image-dark.md", "/examples/preview/media-image-editor-blocked/": "/examples/preview/media-image-editor-blocked.md", "/examples/preview/media-image-editor-edited/": "/examples/preview/media-image-editor-edited.md", "/examples/preview/media-image-editor/": "/examples/preview/media-image-editor.md", "/examples/preview/media-image/": "/examples/preview/media-image.md", "/examples/preview/media-video-edit/": "/examples/preview/media-video-edit.md", "/examples/preview/media-video/": "/examples/preview/media-video.md", "/examples/preview/player-blueprint-preview/": "/examples/preview/player-blueprint-preview.md", "/examples/preview/player-dashboard/": "/examples/preview/player-dashboard.md", "/examples/preview/player-deck/": "/examples/preview/player-deck.md", "/examples/preview/primitives-sortable/": "/examples/preview/primitives-sortable.md", "/examples/preview/sheets-budget/": "/examples/preview/sheets-budget.md", "/examples/preview/slides-backgrounds/": "/examples/preview/slides-backgrounds.md", "/examples/preview/slides-fragments/": "/examples/preview/slides-fragments.md", "/examples/preview/slides-layout-big-stat/": "/examples/preview/slides-layout-big-stat.md", "/examples/preview/slides-layout-chart/": "/examples/preview/slides-layout-chart.md", "/examples/preview/slides-layout-closing-cta/": "/examples/preview/slides-layout-closing-cta.md", "/examples/preview/slides-layout-code-with-callout/": "/examples/preview/slides-layout-code-with-callout.md", "/examples/preview/slides-layout-comparison-table/": "/examples/preview/slides-layout-comparison-table.md", "/examples/preview/slides-layout-image-centered/": "/examples/preview/slides-layout-image-centered.md", "/examples/preview/slides-layout-image-full-bleed/": "/examples/preview/slides-layout-image-full-bleed.md", "/examples/preview/slides-layout-image-left/": "/examples/preview/slides-layout-image-left.md", "/examples/preview/slides-layout-image-right/": "/examples/preview/slides-layout-image-right.md", "/examples/preview/slides-layout-process-steps/": "/examples/preview/slides-layout-process-steps.md", "/examples/preview/slides-layout-quote/": "/examples/preview/slides-layout-quote.md", "/examples/preview/slides-layout-section-divider/": "/examples/preview/slides-layout-section-divider.md", "/examples/preview/slides-layout-team-avatars/": "/examples/preview/slides-layout-team-avatars.md", "/examples/preview/slides-layout-three-column-cards/": "/examples/preview/slides-layout-three-column-cards.md", "/examples/preview/slides-layout-timeline/": "/examples/preview/slides-layout-timeline.md", "/examples/preview/slides-layout-title-hero/": "/examples/preview/slides-layout-title-hero.md", "/examples/preview/slides-layout-two-column-split/": "/examples/preview/slides-layout-two-column-split.md", "/examples/preview/slides-layout-video-centered/": "/examples/preview/slides-layout-video-centered.md", "/examples/preview/slides-layout-video-left/": "/examples/preview/slides-layout-video-left.md", "/examples/preview/slides-layout-video-right/": "/examples/preview/slides-layout-video-right.md", "/examples/preview/slides-media-deck/": "/examples/preview/slides-media-deck.md", "/examples/preview/slides-presenter-screen/": "/examples/preview/slides-presenter-screen.md", "/examples/preview/slides-slot-masters/": "/examples/preview/slides-slot-masters.md", "/examples/preview/slides-template-pitch/": "/examples/preview/slides-template-pitch.md", "/examples/preview/slides-template-report/": "/examples/preview/slides-template-report.md", "/examples/preview/slides-template-review/": "/examples/preview/slides-template-review.md", "/examples/preview/slides-tour/": "/examples/preview/slides-tour.md", "/examples/preview/texuli-alert/": "/examples/preview/texuli-alert.md", "/examples/preview/texuli-app-layouts/": "/examples/preview/texuli-app-layouts.md", "/examples/preview/texuli-badge/": "/examples/preview/texuli-badge.md", "/examples/preview/texuli-button/": "/examples/preview/texuli-button.md", "/examples/preview/texuli-card/": "/examples/preview/texuli-card.md", "/examples/preview/texuli-choice/": "/examples/preview/texuli-choice.md", "/examples/preview/texuli-combobox/": "/examples/preview/texuli-combobox.md", "/examples/preview/texuli-date/": "/examples/preview/texuli-date.md", "/examples/preview/texuli-emoji-picker/": "/examples/preview/texuli-emoji-picker.md", "/examples/preview/texuli-empty/": "/examples/preview/texuli-empty.md", "/examples/preview/texuli-feedback/": "/examples/preview/texuli-feedback.md", "/examples/preview/texuli-field/": "/examples/preview/texuli-field.md", "/examples/preview/texuli-file-upload/": "/examples/preview/texuli-file-upload.md", "/examples/preview/texuli-icons/": "/examples/preview/texuli-icons.md", "/examples/preview/texuli-input/": "/examples/preview/texuli-input.md", "/examples/preview/texuli-kbd-code/": "/examples/preview/texuli-kbd-code.md", "/examples/preview/texuli-list-item/": "/examples/preview/texuli-list-item.md", "/examples/preview/texuli-menus/": "/examples/preview/texuli-menus.md", "/examples/preview/texuli-motion-loop/": "/examples/preview/texuli-motion-loop.md", "/examples/preview/texuli-number-pin/": "/examples/preview/texuli-number-pin.md", "/examples/preview/texuli-rating/": "/examples/preview/texuli-rating.md", "/examples/preview/texuli-resizable/": "/examples/preview/texuli-resizable.md", "/examples/preview/texuli-scroll-area/": "/examples/preview/texuli-scroll-area.md", "/examples/preview/texuli-separator-aspect/": "/examples/preview/texuli-separator-aspect.md", "/examples/preview/texuli-sheet/": "/examples/preview/texuli-sheet.md", "/examples/preview/texuli-sidebar/": "/examples/preview/texuli-sidebar.md", "/examples/preview/texuli-slider/": "/examples/preview/texuli-slider.md", "/examples/preview/texuli-stat/": "/examples/preview/texuli-stat.md", "/examples/preview/texuli-stepper/": "/examples/preview/texuli-stepper.md", "/examples/preview/texuli-table/": "/examples/preview/texuli-table.md", "/examples/preview/texuli-tabs-accordion/": "/examples/preview/texuli-tabs-accordion.md", "/examples/preview/texuli-tags-color/": "/examples/preview/texuli-tags-color.md", "/examples/preview/texuli-timeline/": "/examples/preview/texuli-timeline.md", "/examples/preview/texuli-toast/": "/examples/preview/texuli-toast.md", "/examples/preview/texuli-toaster-positions/": "/examples/preview/texuli-toaster-positions.md", "/examples/preview/texuli-toggle/": "/examples/preview/texuli-toggle.md", "/examples/preview/texuli-toolbar/": "/examples/preview/texuli-toolbar.md", "/examples/preview/texuli-tooltip/": "/examples/preview/texuli-tooltip.md", "/examples/preview/texuli-tree/": "/examples/preview/texuli-tree.md", "/examples/preview/texuli-typography/": "/examples/preview/texuli-typography.md", "/examples/preview/ui-avatar-dark/": "/examples/preview/ui-avatar-dark.md", "/examples/preview/ui-avatar-grid/": "/examples/preview/ui-avatar-grid.md", "/examples/preview/ui-avatar-rtl/": "/examples/preview/ui-avatar-rtl.md", "/examples/preview/ui-avatar-states/": "/examples/preview/ui-avatar-states.md", "/examples/preview/ui-avatar-variants/": "/examples/preview/ui-avatar-variants.md", "/examples/preview/ui-avatar/": "/examples/preview/ui-avatar.md", "/examples/preview/ui-carousel-autoplay/": "/examples/preview/ui-carousel-autoplay.md", "/examples/preview/ui-carousel-dark/": "/examples/preview/ui-carousel-dark.md", "/examples/preview/ui-carousel-overlay/": "/examples/preview/ui-carousel-overlay.md", "/examples/preview/ui-carousel-rtl/": "/examples/preview/ui-carousel-rtl.md", "/examples/preview/ui-carousel-states/": "/examples/preview/ui-carousel-states.md", "/examples/preview/ui-carousel/": "/examples/preview/ui-carousel.md", "/examples/preview/ui-command-dark/": "/examples/preview/ui-command-dark.md", "/examples/preview/ui-command-rtl/": "/examples/preview/ui-command-rtl.md", "/examples/preview/ui-command-states/": "/examples/preview/ui-command-states.md", "/examples/preview/ui-command-variants/": "/examples/preview/ui-command-variants.md", "/examples/preview/ui-command/": "/examples/preview/ui-command.md", "/examples/preview/ui-dialog-dark/": "/examples/preview/ui-dialog-dark.md", "/examples/preview/ui-dialog-rtl/": "/examples/preview/ui-dialog-rtl.md", "/examples/preview/ui-dialog-states/": "/examples/preview/ui-dialog-states.md", "/examples/preview/ui-dialog-variants/": "/examples/preview/ui-dialog-variants.md", "/examples/preview/ui-dialog/": "/examples/preview/ui-dialog.md", "/examples/preview/ui-navigation-dark/": "/examples/preview/ui-navigation-dark.md", "/examples/preview/ui-navigation-rtl/": "/examples/preview/ui-navigation-rtl.md", "/examples/preview/ui-navigation-states/": "/examples/preview/ui-navigation-states.md", "/examples/preview/ui-navigation-variants/": "/examples/preview/ui-navigation-variants.md", "/examples/preview/ui-navigation/": "/examples/preview/ui-navigation.md", "/examples/preview/ui-popover-dark/": "/examples/preview/ui-popover-dark.md", "/examples/preview/ui-popover-rtl/": "/examples/preview/ui-popover-rtl.md", "/examples/preview/ui-popover-states/": "/examples/preview/ui-popover-states.md", "/examples/preview/ui-popover-variants/": "/examples/preview/ui-popover-variants.md", "/examples/preview/ui-popover/": "/examples/preview/ui-popover.md", "/examples/preview/ui-select-dark/": "/examples/preview/ui-select-dark.md", "/examples/preview/ui-select-rtl/": "/examples/preview/ui-select-rtl.md", "/examples/preview/ui-select-states/": "/examples/preview/ui-select-states.md", "/examples/preview/ui-select-variants/": "/examples/preview/ui-select-variants.md", "/examples/preview/ui-select/": "/examples/preview/ui-select.md", "/examples/preview/workflows-editor/": "/examples/preview/workflows-editor.md", "/examples/preview/workflows-state-machine/": "/examples/preview/workflows-state-machine.md", "/examples/preview/workflows-viewer/": "/examples/preview/workflows-viewer.md", "/examples/primitives-sortable/": "/examples/primitives-sortable.md", "/examples/sheets-budget/": "/examples/sheets-budget.md", "/examples/slides-backgrounds/": "/examples/slides-backgrounds.md", "/examples/slides-fragments/": "/examples/slides-fragments.md", "/examples/slides-layout-big-stat/": "/examples/slides-layout-big-stat.md", "/examples/slides-layout-chart/": "/examples/slides-layout-chart.md", "/examples/slides-layout-closing-cta/": "/examples/slides-layout-closing-cta.md", "/examples/slides-layout-code-with-callout/": "/examples/slides-layout-code-with-callout.md", "/examples/slides-layout-comparison-table/": "/examples/slides-layout-comparison-table.md", "/examples/slides-layout-image-centered/": "/examples/slides-layout-image-centered.md", "/examples/slides-layout-image-full-bleed/": "/examples/slides-layout-image-full-bleed.md", "/examples/slides-layout-image-left/": "/examples/slides-layout-image-left.md", "/examples/slides-layout-image-right/": "/examples/slides-layout-image-right.md", "/examples/slides-layout-process-steps/": "/examples/slides-layout-process-steps.md", "/examples/slides-layout-quote/": "/examples/slides-layout-quote.md", "/examples/slides-layout-section-divider/": "/examples/slides-layout-section-divider.md", "/examples/slides-layout-team-avatars/": "/examples/slides-layout-team-avatars.md", "/examples/slides-layout-three-column-cards/": "/examples/slides-layout-three-column-cards.md", "/examples/slides-layout-timeline/": "/examples/slides-layout-timeline.md", "/examples/slides-layout-title-hero/": "/examples/slides-layout-title-hero.md", "/examples/slides-layout-two-column-split/": "/examples/slides-layout-two-column-split.md", "/examples/slides-layout-video-centered/": "/examples/slides-layout-video-centered.md", "/examples/slides-layout-video-left/": "/examples/slides-layout-video-left.md", "/examples/slides-layout-video-right/": "/examples/slides-layout-video-right.md", "/examples/slides-media-deck/": "/examples/slides-media-deck.md", "/examples/slides-presenter-screen/": "/examples/slides-presenter-screen.md", "/examples/slides-slot-masters/": "/examples/slides-slot-masters.md", "/examples/slides-template-pitch/": "/examples/slides-template-pitch.md", "/examples/slides-template-report/": "/examples/slides-template-report.md", "/examples/slides-template-review/": "/examples/slides-template-review.md", "/examples/slides-tour/": "/examples/slides-tour.md", "/examples/texuli-alert/": "/examples/texuli-alert.md", "/examples/texuli-app-layouts/": "/examples/texuli-app-layouts.md", "/examples/texuli-badge/": "/examples/texuli-badge.md", "/examples/texuli-button/": "/examples/texuli-button.md", "/examples/texuli-card/": "/examples/texuli-card.md", "/examples/texuli-choice/": "/examples/texuli-choice.md", "/examples/texuli-combobox/": "/examples/texuli-combobox.md", "/examples/texuli-date/": "/examples/texuli-date.md", "/examples/texuli-emoji-picker/": "/examples/texuli-emoji-picker.md", "/examples/texuli-empty/": "/examples/texuli-empty.md", "/examples/texuli-feedback/": "/examples/texuli-feedback.md", "/examples/texuli-field/": "/examples/texuli-field.md", "/examples/texuli-file-upload/": "/examples/texuli-file-upload.md", "/examples/texuli-icons/": "/examples/texuli-icons.md", "/examples/texuli-input/": "/examples/texuli-input.md", "/examples/texuli-kbd-code/": "/examples/texuli-kbd-code.md", "/examples/texuli-list-item/": "/examples/texuli-list-item.md", "/examples/texuli-menus/": "/examples/texuli-menus.md", "/examples/texuli-motion-loop/": "/examples/texuli-motion-loop.md", "/examples/texuli-number-pin/": "/examples/texuli-number-pin.md", "/examples/texuli-rating/": "/examples/texuli-rating.md", "/examples/texuli-resizable/": "/examples/texuli-resizable.md", "/examples/texuli-scroll-area/": "/examples/texuli-scroll-area.md", "/examples/texuli-separator-aspect/": "/examples/texuli-separator-aspect.md", "/examples/texuli-sheet/": "/examples/texuli-sheet.md", "/examples/texuli-sidebar/": "/examples/texuli-sidebar.md", "/examples/texuli-slider/": "/examples/texuli-slider.md", "/examples/texuli-stat/": "/examples/texuli-stat.md", "/examples/texuli-stepper/": "/examples/texuli-stepper.md", "/examples/texuli-table/": "/examples/texuli-table.md", "/examples/texuli-tabs-accordion/": "/examples/texuli-tabs-accordion.md", "/examples/texuli-tags-color/": "/examples/texuli-tags-color.md", "/examples/texuli-timeline/": "/examples/texuli-timeline.md", "/examples/texuli-toast/": "/examples/texuli-toast.md", "/examples/texuli-toaster-positions/": "/examples/texuli-toaster-positions.md", "/examples/texuli-toggle/": "/examples/texuli-toggle.md", "/examples/texuli-toolbar/": "/examples/texuli-toolbar.md", "/examples/texuli-tooltip/": "/examples/texuli-tooltip.md", "/examples/texuli-tree/": "/examples/texuli-tree.md", "/examples/texuli-typography/": "/examples/texuli-typography.md", "/examples/ui-avatar-dark/": "/examples/ui-avatar-dark.md", "/examples/ui-avatar-grid/": "/examples/ui-avatar-grid.md", "/examples/ui-avatar-rtl/": "/examples/ui-avatar-rtl.md", "/examples/ui-avatar-states/": "/examples/ui-avatar-states.md", "/examples/ui-avatar-variants/": "/examples/ui-avatar-variants.md", "/examples/ui-avatar/": "/examples/ui-avatar.md", "/examples/ui-carousel-autoplay/": "/examples/ui-carousel-autoplay.md", "/examples/ui-carousel-dark/": "/examples/ui-carousel-dark.md", "/examples/ui-carousel-overlay/": "/examples/ui-carousel-overlay.md", "/examples/ui-carousel-rtl/": "/examples/ui-carousel-rtl.md", "/examples/ui-carousel-states/": "/examples/ui-carousel-states.md", "/examples/ui-carousel/": "/examples/ui-carousel.md", "/examples/ui-command-dark/": "/examples/ui-command-dark.md", "/examples/ui-command-rtl/": "/examples/ui-command-rtl.md", "/examples/ui-command-states/": "/examples/ui-command-states.md", "/examples/ui-command-variants/": "/examples/ui-command-variants.md", "/examples/ui-command/": "/examples/ui-command.md", "/examples/ui-dialog-dark/": "/examples/ui-dialog-dark.md", "/examples/ui-dialog-rtl/": "/examples/ui-dialog-rtl.md", "/examples/ui-dialog-states/": "/examples/ui-dialog-states.md", "/examples/ui-dialog-variants/": "/examples/ui-dialog-variants.md", "/examples/ui-dialog/": "/examples/ui-dialog.md", "/examples/ui-navigation-dark/": "/examples/ui-navigation-dark.md", "/examples/ui-navigation-rtl/": "/examples/ui-navigation-rtl.md", "/examples/ui-navigation-states/": "/examples/ui-navigation-states.md", "/examples/ui-navigation-variants/": "/examples/ui-navigation-variants.md", "/examples/ui-navigation/": "/examples/ui-navigation.md", "/examples/ui-popover-dark/": "/examples/ui-popover-dark.md", "/examples/ui-popover-rtl/": "/examples/ui-popover-rtl.md", "/examples/ui-popover-states/": "/examples/ui-popover-states.md", "/examples/ui-popover-variants/": "/examples/ui-popover-variants.md", "/examples/ui-popover/": "/examples/ui-popover.md", "/examples/ui-select-dark/": "/examples/ui-select-dark.md", "/examples/ui-select-rtl/": "/examples/ui-select-rtl.md", "/examples/ui-select-states/": "/examples/ui-select-states.md", "/examples/ui-select-variants/": "/examples/ui-select-variants.md", "/examples/ui-select/": "/examples/ui-select.md", "/examples/workflows-editor/": "/examples/workflows-editor.md", "/examples/workflows-state-machine/": "/examples/workflows-state-machine.md", "/examples/workflows-viewer/": "/examples/workflows-viewer.md", "/forms-page/": "/forms-page.md", "/foundation/": "/foundation.md", "/gallery-components/": "/gallery-components.md", "/gallery-components/preview/": "/gallery-components/preview.md", "/gallery-themes/": "/gallery-themes.md", "/guides/accessibility/": "/guides/accessibility.md", "/guides/dark-mode/": "/guides/dark-mode.md", "/guides/forms/": "/guides/forms.md", "/guides/getting-started/": "/guides/getting-started.md", "/guides/": "/guides.md", "/guides/performance/": "/guides/performance.md", "/guides/rtl-i18n/": "/guides/rtl-i18n.md", "/guides/solutions/agent-chat/": "/guides/solutions/agent-chat.md", "/guides/solutions/canvas/": "/guides/solutions/canvas.md", "/guides/solutions/dashboards/": "/guides/solutions/dashboards.md", "/guides/solutions/design-systems/": "/guides/solutions/design-systems.md", "/guides/solutions/documents/": "/guides/solutions/documents.md", "/guides/solutions/editor/": "/guides/solutions/editor.md", "/guides/solutions/forms/": "/guides/solutions/forms.md", "/guides/solutions/sheets/": "/guides/solutions/sheets.md", "/guides/solutions/slides/": "/guides/solutions/slides.md", "/guides/solutions/workflows/": "/guides/solutions/workflows.md", "/guides/theming/": "/guides/theming.md", "/guides/why-svelte-kotlin/": "/guides/why-svelte-kotlin.md", "/": "/index.md", "/live-generation/": "/live-generation.md", "/markdown/": "/markdown.md", "/mcp-server/": "/mcp-server.md", "/media-page/": "/media-page.md", "/motion-page/": "/motion-page.md", "/native/compatibility/": "/native/compatibility.md", "/native/": "/native.md", "/output-page/": "/output-page.md", "/output-page/preview/": "/output-page/preview.md", "/perf/": "/perf.md", "/playground/": "/playground.md", "/primitives-page/accordion/": "/primitives-page/accordion.md", "/primitives-page/alert-dialog/": "/primitives-page/alert-dialog.md", "/primitives-page/avatar/": "/primitives-page/avatar.md", "/primitives-page/calendar/": "/primitives-page/calendar.md", "/primitives-page/checkbox/": "/primitives-page/checkbox.md", "/primitives-page/collapsible/": "/primitives-page/collapsible.md", "/primitives-page/color-picker/": "/primitives-page/color-picker.md", "/primitives-page/combobox/": "/primitives-page/combobox.md", "/primitives-page/command/": "/primitives-page/command.md", "/primitives-page/context-menu/": "/primitives-page/context-menu.md", "/primitives-page/date-field/": "/primitives-page/date-field.md", "/primitives-page/date-picker/": "/primitives-page/date-picker.md", "/primitives-page/dialog/": "/primitives-page/dialog.md", "/primitives-page/file-drop/": "/primitives-page/file-drop.md", "/primitives-page/hover-card/": "/primitives-page/hover-card.md", "/primitives-page/": "/primitives-page.md", "/primitives-page/label/": "/primitives-page/label.md", "/primitives-page/listbox/": "/primitives-page/listbox.md", "/primitives-page/menu/": "/primitives-page/menu.md", "/primitives-page/menubar/": "/primitives-page/menubar.md", "/primitives-page/navigation-menu/": "/primitives-page/navigation-menu.md", "/primitives-page/number-field/": "/primitives-page/number-field.md", "/primitives-page/pagination/": "/primitives-page/pagination.md", "/primitives-page/pin-input/": "/primitives-page/pin-input.md", "/primitives-page/popover/": "/primitives-page/popover.md", "/primitives-page/portal/": "/primitives-page/portal.md", "/primitives-page/progress/": "/primitives-page/progress.md", "/primitives-page/radio-group/": "/primitives-page/radio-group.md", "/primitives-page/scroll-area/": "/primitives-page/scroll-area.md", "/primitives-page/select/": "/primitives-page/select.md", "/primitives-page/separator/": "/primitives-page/separator.md", "/primitives-page/sheet/": "/primitives-page/sheet.md", "/primitives-page/slider/": "/primitives-page/slider.md", "/primitives-page/sortable/": "/primitives-page/sortable.md", "/primitives-page/splitter/": "/primitives-page/splitter.md", "/primitives-page/switch/": "/primitives-page/switch.md", "/primitives-page/tabs/": "/primitives-page/tabs.md", "/primitives-page/tags-input/": "/primitives-page/tags-input.md", "/primitives-page/toast/": "/primitives-page/toast.md", "/primitives-page/toggle/": "/primitives-page/toggle.md", "/primitives-page/toolbar/": "/primitives-page/toolbar.md", "/primitives-page/tooltip/": "/primitives-page/tooltip.md", "/primitives-page/tree/": "/primitives-page/tree.md", "/search/": "/search.md", "/sheets-page/": "/sheets-page.md", "/showcase/checkout/": "/showcase/checkout.md", "/showcase/dashboard/": "/showcase/dashboard.md", "/showcase/docs/": "/showcase/docs.md", "/showcase/inbox/": "/showcase/inbox.md", "/showcase/": "/showcase.md", "/showcase/kanban/": "/showcase/kanban.md", "/showcase/landing/": "/showcase/landing.md", "/showcase/media-studio/": "/showcase/media-studio.md", "/showcase/settings/": "/showcase/settings.md", "/showcase/slide-deck/": "/showcase/slide-deck.md", "/skill/": "/skill.md", "/slides-page/": "/slides-page.md", "/solutions/agent-chat/": "/solutions/agent-chat.md", "/solutions/canvas/": "/solutions/canvas.md", "/solutions/dashboards/": "/solutions/dashboards.md", "/solutions/design-systems/": "/solutions/design-systems.md", "/solutions/documents/": "/solutions/documents.md", "/solutions/editor/": "/solutions/editor.md", "/solutions/forms/": "/solutions/forms.md", "/solutions/": "/solutions.md", "/solutions/sheets/": "/solutions/sheets.md", "/solutions/slides/": "/solutions/slides.md", "/solutions/workflows/": "/solutions/workflows.md", "/theme-studio/": "/theme-studio.md", "/theme-switcher/": "/theme-switcher.md", "/tokens/components/": "/tokens/components.md", "/tokens/": "/tokens.md", "/web-and-native/": "/web-and-native.md", "/whats-new/": "/whats-new.md", "/workflows-page/": "/workflows-page.md", "/workflows-page/json/": "/workflows-page/json.md" }, "pages": [ { "path": "/agent-chat/", "twin": "/agent-chat.md", "title": "Agent chat", "description": "Ask the Texuli agent for a report, dashboard or deck and get back a validated, untrusted blueprint draft.", "headings": [ "Conversation", "Draft preview", "For agents" ] }, { "path": "/agents-page/", "twin": "/agents-page.md", "title": "Texuli for agents", "description": "How coding agents build with Texuli: closed catalog, emit tiers, sink-free renderer, MCP, CLI, golden set, llms.txt and catalog JSON.", "headings": [ "How agents build with Texuli", "Closed catalog", "Emit tiers", "Sink-free renderer", "MCP server", "CLI", "Golden set", "Setup order", "Agent resources", "llms.txt", "llms-full.txt", "Catalog JSON", "Docs shell" ] }, { "path": "/blocks-page/auth/", "twin": "/blocks-page/auth.md", "title": "Sign in template", "description": "An email and password form with inline validation messages. A copy-paste Texuli section template built on the styled components.", "headings": [ "Preview, install and source", "Sign in to Harbor Notes", "Install", "For agents" ] }, { "path": "/blocks-page/faq/", "twin": "/blocks-page/faq.md", "title": "FAQ template", "description": "Questions in a keyboard-operable accordion, one open at a time. A copy-paste Texuli section template built on the styled components.", "headings": [ "Preview, install and source", "Frequently asked questions", "Install", "For agents" ] }, { "path": "/blocks-page/features/", "twin": "/blocks-page/features.md", "title": "Features template", "description": "A responsive grid of cards, one per capability. A copy-paste Texuli section template built on the styled components.", "headings": [ "Preview, install and source", "Everything a crew writes down", "Install", "For agents" ] }, { "path": "/blocks-page/footer/", "twin": "/blocks-page/footer.md", "title": "Footer template", "description": "Brand, link columns and the legal line, in plain markup on tokens. A copy-paste Texuli section template built on the styled components.", "headings": [ "Preview, install and source", "Install", "For agents" ] }, { "path": "/blocks-page/hero/", "twin": "/blocks-page/hero.md", "title": "Hero template", "description": "An announcement badge, the headline, a short lead and two actions. A copy-paste Texuli section template built on the styled components.", "headings": [ "Preview, install and source", "Notes your whole harbor crew can trust", "Install", "For agents" ] }, { "path": "/blocks-page/", "twin": "/blocks-page.md", "title": "Blocks and templates", "description": "Copy-ready page sections built with Texuli: hero, features, pricing, FAQ, sign in and footer, each with its texuli add command and source.", "headings": [ "Hero", "Notes your whole harbor crew can trust", "Install", "Features", "Everything a crew writes down", "Install", "Pricing", "Simple plans for every crew", "Install", "FAQ", "Frequently asked questions", "Install", "Sign in", "Sign in to Harbor Notes", "Install", "Footer", "Install", "For agents" ] }, { "path": "/blocks-page/pricing/", "twin": "/blocks-page/pricing.md", "title": "Pricing template", "description": "Three plans with the middle one featured; prices kept as integer cents. A copy-paste Texuli section template built on the styled components.", "headings": [ "Preview, install and source", "Simple plans for every crew", "Install", "For agents" ] }, { "path": "/brand/", "twin": "/brand.md", "title": "Small pieces. Infinite possibilities.", "description": "The Texuli brand story: Texels to components to interfaces, owned primitives, and agents on a closed catalog.", "headings": [ "Texels → Texuli → Interfaces", "Built for people and agents", "What Texuli is", "Why owned primitives", "Why agents", "Real behavior", "Live demos", "Actions", "Status", "Surfaces", "The mark: a T built from texels", "Color is a token story", "Voice", "Assets" ] }, { "path": "/builder/", "twin": "/builder.md", "title": "Blueprint builder", "description": "Compose an untrusted Texuli blueprint from catalog manifests, inspect it, and edit its JSON payload.", "headings": [ "Palette", "Structure", "Compose your first blueprint", "Preview", "Untrusted draft preview", "Draft issues", "Inspector", "Page layout", "Blueprint JSON", "For agents" ] }, { "path": "/built-with/", "twin": "/built-with.md", "title": "Built with Texuli", "description": "Products built on Texuli. Each keeps its own brand and domain; status shows what is available today and what is planned.", "headings": [ "From the Texuli team", "From the community" ] }, { "path": "/built-with/protoyard/", "twin": "/built-with/protoyard.md", "title": "Protoyard", "description": "Protoyard is an open-source local prototyping tool built on Texuli. What it does today, which Texuli packages it uses, and what is only on its roadmap.", "headings": [ "The job it does", "What works today", "What is built with Texuli", "Roadmap", "Want to build something like this?" ] }, { "path": "/canvas-page/", "twin": "/canvas-page.md", "title": "An infinite canvas you can use from the keyboard", "description": "The Texuli infinite canvas (@texuli/canvas, in development): shapes, connectors, a full keyboard model, local collaboration, SVG and PNG export, agent data.", "headings": [ "An infinite canvas", "The closed vocabulary", "Keyboard model", "Two people, one canvas", "Canvases as agent data", "The blueprint the agent wrote", "The hostile sticky note", "Painted by the player", "What keeps it safe", "In code", "Package docs", "For agents" ] }, { "path": "/changelog/", "twin": "/changelog.md", "title": "Changelog", "description": "What shipped in each Texuli release, from the 0.1 previews to 0.18.0: new packages, breaking changes and the blueprint spec version.", "headings": [ "Texuli 0.18 2026-11", "Texuli 0.17 2026-11", "Texuli 0.16 2026-11", "Texuli 0.15 2026-11", "Texuli 0.14 2026-11", "Texuli 0.13 2026-11", "Texuli 0.12 2026-11", "Texuli 0.11 2026-10", "Texuli 0.10 2026-10", "Texuli 0.9 2026-10", "Texuli 0.8 2026-10", "Texuli 0.7 2026-10", "Texuli 0.6 2026-10", "Texuli 0.5 2026-10", "Texuli 0.4 2026-10", "Texuli 0.3 2026-10", "Texuli 0.2 2026-10", "Texuli 0.1 2026-10" ] }, { "path": "/charts-page/canvas/", "twin": "/charts-page/canvas.md", "title": "Canvas renderer", "description": "Dense cartesian series rendered on canvas with the same contracts as SVG charts. Data contract and interactive examples.", "headings": [ "Data contract", "Canvas renderer examples", "Daily activity (canvas) Five hundred twelve deterministic daily activity samples on the canvas renderer.", "Activity area (canvas) The same samples as a filled canvas area chart.", "For agents" ] }, { "path": "/charts-page/cartesian/", "twin": "/charts-page/cartesian.md", "title": "Cartesian", "description": "Line, area, bar, stacked bar and combo charts on a shared series model. Data contract and interactive examples.", "headings": [ "Data contract", "Cartesian examples", "Account growth New and returning Harbor Notes accounts each month.", "Accounts over time Account additions by month as stacked areas.", "Monthly accounts Grouped new and returning accounts.", "Account mix Monthly accounts stacked by type.", "Accounts and retention New accounts as bars and returning accounts as a line.", "For agents" ] }, { "path": "/charts-page/compact/", "twin": "/charts-page/compact.md", "title": "Compact", "description": "Sparklines, bullets, gauges and progress rings for dense dashboards. Data contract and interactive examples.", "headings": [ "Data contract", "Compact examples", "Weekly signups", "Quarterly target", "Service health", "Project completion", "For agents" ] }, { "path": "/charts-page/flow/", "twin": "/charts-page/flow.md", "title": "Flow", "description": "Funnel, sankey and network graphs for conversion and collaboration flows. Data contract and interactive examples.", "headings": [ "Data contract", "Flow examples", "Signup funnel Harbor Notes signup flow from visit to paid account.", "Acquisition flow Website and referrals flow through trials to paid accounts.", "Team network Connections between four fictional Harbor teammates.", "For agents" ] }, { "path": "/charts-page/geo/", "twin": "/charts-page/geo.md", "title": "Geo", "description": "Offline choropleth and point maps on bundled schematic tiles (not live GIS). Data contract and interactive examples.", "headings": [ "Data contract", "Geo examples", "Revenue by world region Revenue in millions on schematic world tiles; missing values use a patterned fill. Not precise borders.", "Team activity by district Marker size shows quarterly activity across fictional Harbor Bay districts.", "For agents" ] }, { "path": "/charts-page/", "twin": "/charts-page.md", "title": "Charts gallery", "description": "Every Texuli chart family with interactive examples and data contracts. Static site, no runtime network.", "headings": [ "A chart family, not a dashboard builder", "Cartesian", "Data contract", "Cartesian examples", "Account growth New and returning Harbor Notes accounts each month.", "Accounts over time Account additions by month as stacked areas.", "Monthly accounts Grouped new and returning accounts.", "Account mix Monthly accounts stacked by type.", "Accounts and retention New accounts as bars and returning accounts as a line.", "Part-whole", "Data contract", "Part-whole examples", "Revenue mix Platform is the largest share, followed by services, support and other.", "Revenue share The same revenue mix with the total in the center.", "Revenue by team Area encodes each product and service revenue amount.", "Revenue hierarchy Inner ring groups product and services; outer ring shows their parts.", "Compact", "Data contract", "Compact examples", "Weekly signups", "Quarterly target", "Service health", "Project completion", "Matrix", "Data contract", "Matrix examples", "Squad effort by day Relative story points by squad and weekday. Fictional planning data.", "Latency versus throughput Desks by requests per minute and p95 latency.", "Service footprint Services by error rate (x), traffic (y) and instance count (size).", "Flow", "Data contract", "Flow examples", "Signup funnel Harbor Notes signup flow from visit to paid account.", "Acquisition flow Website and referrals flow through trials to paid accounts.", "Team network Connections between four fictional Harbor teammates.", "Geo", "Data contract", "Geo examples", "Revenue by world region Revenue in millions on schematic world tiles; missing values use a patterned fill. Not precise borders.", "Team activity by district Marker size shows quarterly activity across fictional Harbor Bay districts.", "Interaction", "Data contract", "Interaction examples", "Canvas renderer", "Data contract", "Canvas renderer examples", "Daily activity (canvas) Five hundred twelve deterministic daily activity samples on the canvas renderer.", "Activity area (canvas) The same samples as a filled canvas area chart.", "For agents" ] }, { "path": "/charts-page/interaction/", "twin": "/charts-page/interaction.md", "title": "Interaction", "description": "Legend toggles, keyboard plot focus, tooltips, brush/zoom and data table. Data contract and interactive examples.", "headings": [ "Data contract", "Interaction examples", "For agents" ] }, { "path": "/charts-page/matrix/", "twin": "/charts-page/matrix.md", "title": "Matrix", "description": "Heatmap, scatter and bubble plots for two- and three-dimensional metrics. Data contract and interactive examples.", "headings": [ "Data contract", "Matrix examples", "Squad effort by day Relative story points by squad and weekday. Fictional planning data.", "Latency versus throughput Desks by requests per minute and p95 latency.", "Service footprint Services by error rate (x), traffic (y) and instance count (size).", "For agents" ] }, { "path": "/charts-page/part-whole/", "twin": "/charts-page/part-whole.md", "title": "Part-whole", "description": "Pie, donut, treemap and sunburst for categorical and hierarchical shares. Data contract and interactive examples.", "headings": [ "Data contract", "Part-whole examples", "Revenue mix Platform is the largest share, followed by services, support and other.", "Revenue share The same revenue mix with the total in the center.", "Revenue by team Area encodes each product and service revenue amount.", "Revenue hierarchy Inner ring groups product and services; outer ring shows their parts.", "For agents" ] }, { "path": "/color-explorer/", "twin": "/color-explorer.md", "title": "Color and token explorer", "description": "Explore OKLCH scales, semantic roles, WCAG contrast pairs and export tokens as CSS, JSON or Tailwind for any Texuli theme.", "headings": [ "OKLCH scales", "primary", "accent", "secondary", "Semantic roles", "Contrast pairs", "Export", "For agents" ] }, { "path": "/component-pages/accordion/", "twin": "/component-pages/accordion.md", "title": "Accordion", "description": "Stacked sections that expand and collapse one or more panels. One token contract, every theme. Catalog id accordion.", "headings": [ "Live examples", "FAQ", "FAQ", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for accordion", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/alert-dialog/", "twin": "/component-pages/alert-dialog.md", "title": "AlertDialog", "description": "Modal confirm/cancel dialog for consequential actions. Overlay behavior from owned texels. Catalog id alert-dialog.", "headings": [ "Live examples", "Destructive confirm", "Destructive confirm", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for alert-dialog", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/alert/", "twin": "/component-pages/alert.md", "title": "Alert", "description": "Inline feedback for a page section (status or error). One token contract, every theme. Catalog id alert.", "headings": [ "Live examples", "Warning alert", "Warning alert", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for alert", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/analytics-grid/", "twin": "/component-pages/analytics-grid.md", "title": "AnalyticsGrid", "description": "Auto-fit KPI and widget grid for dashboard screens. Logical CSS, so right-to-left mirrors correctly. Catalog id analytics-grid.", "headings": [ "Live examples", "Three columns", "Three columns", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for analytics-grid", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/app-nav/", "twin": "/component-pages/app-nav.md", "title": "AppNav", "description": "Desktop sidebar shell with mobile sheet drawer and main slot. Navigation landmarks that mark where you are. Catalog id app-nav.", "headings": [ "Live examples", "App shell", "App shell", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for app-nav", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/avatar-group-grid/", "twin": "/component-pages/avatar-group-grid.md", "title": "AvatarGroupGrid", "description": "Up to four faces in one avatar circle, +N past four. One token contract, every theme. Catalog id avatar-group-grid.", "headings": [ "Live examples", "Group chat", "Group chat", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for avatar-group-grid", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/avatar/", "twin": "/component-pages/avatar.md", "title": "Avatar", "description": "A face or initials for one person, with an optional presence status. One token contract, every theme. Catalog id avatar.", "headings": [ "Live examples", "Named person", "Named person", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for avatar", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/badge/", "twin": "/component-pages/badge.md", "title": "Badge", "description": "A compact status or category label. One token contract, every theme. Catalog id badge.", "headings": [ "Live examples", "Success badge", "Success badge", "Labelled badge", "Labelled badge", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for badge", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/banner/", "twin": "/component-pages/banner.md", "title": "Banner", "description": "Full-width notice across a page or app shell. One token contract, every theme. Catalog id banner.", "headings": [ "Live examples", "Brand banner", "Brand banner", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for banner", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/blocks-code/", "twin": "/component-pages/blocks-code.md", "title": "Code blocks", "description": "Validated, highlighted code. Agent-safe content rendering, built in. Catalog id blocks-code.", "headings": [ "Live examples", "Code blocks example", "Code blocks example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for blocks-code", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/blocks-data/", "twin": "/component-pages/blocks-data.md", "title": "Data blocks", "description": "Validated tables, statistics, key metrics and chart content blocks. Agent-safe content rendering, built in. Catalog id blocks-data.", "headings": [ "Live examples", "Data blocks example", "Data blocks example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for blocks-data", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/blocks-diagram/", "twin": "/component-pages/blocks-diagram.md", "title": "Diagram blocks", "description": "Validated flow, tree, board and terminal diagrams. Agent-safe content rendering, built in. Catalog id blocks-diagram.", "headings": [ "Live examples", "Diagram blocks example", "Diagram blocks example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for blocks-diagram", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/blocks-embed/", "twin": "/component-pages/blocks-embed.md", "title": "Embed blocks", "description": "Validated link previews (URL policy) and embed-app shells. Texuli never runs app JSON; hosts mount via mountEmbed with a sandboxed iframe contract.", "headings": [ "Live examples", "Embed blocks example", "Embed blocks example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for blocks-embed", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/blocks-interactive/", "twin": "/component-pages/blocks-interactive.md", "title": "Interactive blocks", "description": "Validated polls, quizzes, calculators and checklists. Agent-safe content rendering, built in. Catalog id blocks-interactive.", "headings": [ "Live examples", "Interactive blocks example", "Interactive blocks example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for blocks-interactive", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/blocks-map/", "twin": "/component-pages/blocks-map.md", "title": "Map blocks", "description": "Validated map points and routes. Agent-safe content rendering, built in. Catalog id blocks-map.", "headings": [ "Live examples", "Map blocks example", "Map blocks example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for blocks-map", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/blocks-media/", "twin": "/component-pages/blocks-media.md", "title": "Media blocks", "description": "Validated image, figure, video and gallery content blocks. Agent-safe content rendering, built in. Catalog id blocks-media.", "headings": [ "Live examples", "Media blocks example", "Media blocks example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for blocks-media", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/blocks-structure/", "twin": "/component-pages/blocks-structure.md", "title": "Structure blocks", "description": "Validated layouts and calls to action. Agent-safe content rendering, built in. Catalog id blocks-structure.", "headings": [ "Live examples", "Structure blocks example", "Structure blocks example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for blocks-structure", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/blocks-text/", "twin": "/component-pages/blocks-text.md", "title": "Text blocks", "description": "Validated heading, paragraph, list, quote and callout content. Agent-safe content rendering, built in. Catalog id blocks-text.", "headings": [ "Live examples", "Text blocks example", "Text blocks example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for blocks-text", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/bottom-nav/", "twin": "/component-pages/bottom-nav.md", "title": "BottomNav", "description": "A mobile tab bar of destinations. Host chrome; agents never emit it. Logical CSS, so right-to-left mirrors correctly. Catalog id bottom-nav.", "headings": [ "Live examples", "Primary destinations", "Primary destinations", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for bottom-nav", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/box/", "twin": "/component-pages/box.md", "title": "Box", "description": "A panel or region with layout options and token-based surface or color-reference fill. One token contract, every theme. Catalog id box.", "headings": [ "Live examples", "Bordered panel", "Bordered panel", "Muted region", "Muted region", "App header (no card chrome)", "App header (no card chrome)", "Brand logo tile", "Brand logo tile", "Page canvas", "Page canvas", "Translucent sticky header", "Translucent sticky header", "Dashed panel", "Dashed panel", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for box", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/breadcrumb/", "twin": "/component-pages/breadcrumb.md", "title": "Breadcrumb", "description": "Hierarchy trail with URL-policy links. Navigation landmarks that mark where you are. Catalog id breadcrumb.", "headings": [ "Live examples", "Trail", "Trail", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for breadcrumb", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/button-group/", "twin": "/component-pages/button-group.md", "title": "ButtonGroup", "description": "Groups related buttons with shared borders and orientation. Forms with the wiring documented, not guessed. Catalog id button-group.", "headings": [ "Live examples", "Attached horizontal group", "Attached horizontal group", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for button-group", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/button/", "twin": "/component-pages/button.md", "title": "Button", "description": "A pressable action control with loading and optional link rendering. Forms with the wiring documented, not guessed. Catalog id button.", "headings": [ "Live examples", "Default button", "Default button", "Outline destructive button", "Outline destructive button", "Loading button", "Loading button", "Labelled submit button", "Labelled submit button", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for button", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/callout/", "twin": "/component-pages/callout.md", "title": "Callout", "description": "Emphasized documentation-style tip with a strong start edge. One token contract, every theme. Catalog id callout.", "headings": [ "Live examples", "Info callout", "Info callout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for callout", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/card/", "twin": "/component-pages/card.md", "title": "Card", "description": "A surface for grouping related content with optional stretched-link behavior. One token contract, every theme. Catalog id card.", "headings": [ "Live examples", "Elevated card", "Elevated card", "Linked card", "Linked card", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for card", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/carousel/", "twin": "/component-pages/carousel.md", "title": "Carousel", "description": "A labelled region of slides with previous, next and a picker. One token contract, every theme. Catalog id carousel.", "headings": [ "Live examples", "Quotes", "Quotes", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for carousel", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/charts-area/", "twin": "/component-pages/charts-area.md", "title": "Area chart", "description": "A categorical area chart with an accessible data table. Agent-safe content rendering, built in. Catalog id charts-area.", "headings": [ "Live examples", "Area chart example", "Area chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-area", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-bar/", "twin": "/component-pages/charts-bar.md", "title": "Bar chart", "description": "A categorical bar chart with a zero baseline and accessible data table. Agent-safe content rendering, built in. Catalog id charts-bar.", "headings": [ "Live examples", "Bar chart example", "Bar chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-bar", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-bubble/", "twin": "/component-pages/charts-bubble.md", "title": "Bubble chart", "description": "A scatter plot where point size can encode another measure. Agent-safe content rendering, built in. Catalog id charts-bubble.", "headings": [ "Live examples", "Bubble chart example", "Bubble chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-bubble", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-bullet/", "twin": "/component-pages/charts-bullet.md", "title": "Bullet chart", "description": "A compact value, range and target comparison. Agent-safe content rendering, built in. Catalog id charts-bullet.", "headings": [ "Live examples", "Bullet chart example", "Bullet chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-bullet", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-canvas-renderer/", "twin": "/component-pages/charts-canvas-renderer.md", "title": "Canvas chart renderer", "description": "A low-level canvas mark renderer for dense chart series. Agent-safe content rendering, built in. Catalog id charts-canvas-renderer.", "headings": [ "Live examples", "Canvas chart renderer example", "Canvas chart renderer example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-canvas-renderer", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-cartesian/", "twin": "/component-pages/charts-cartesian.md", "title": "Cartesian chart", "description": "The general line, area, bar, stacked bar or combo chart renderer. Agent-safe content rendering, built in. Catalog id charts-cartesian.", "headings": [ "Live examples", "Cartesian chart example", "Cartesian chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-cartesian", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-combo/", "twin": "/component-pages/charts-combo.md", "title": "Combo chart", "description": "A categorical chart that combines bar and line series. Agent-safe content rendering, built in. Catalog id charts-combo.", "headings": [ "Live examples", "Combo chart example", "Combo chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-combo", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-donut/", "twin": "/component-pages/charts-donut.md", "title": "Donut chart", "description": "A part-to-whole chart with a central opening and data table. Agent-safe content rendering, built in. Catalog id charts-donut.", "headings": [ "Live examples", "Donut chart example", "Donut chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-donut", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-funnel/", "twin": "/component-pages/charts-funnel.md", "title": "Funnel chart", "description": "A conversion funnel with step values and accessible table. Agent-safe content rendering, built in. Catalog id charts-funnel.", "headings": [ "Live examples", "Funnel chart example", "Funnel chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-funnel", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-gauge/", "twin": "/component-pages/charts-gauge.md", "title": "Gauge chart", "description": "A radial value gauge with thresholds and an accessible data table. Agent-safe content rendering, built in. Catalog id charts-gauge.", "headings": [ "Live examples", "Gauge chart example", "Gauge chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-gauge", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-geo-map/", "twin": "/component-pages/charts-geo-map.md", "title": "Geographic map", "description": "A tiled geographic choropleth with a tabular data alternative. Agent-safe content rendering, built in. Catalog id charts-geo-map.", "headings": [ "Live examples", "Geographic map example", "Geographic map example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-geo-map", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-geo-point-map/", "twin": "/component-pages/charts-geo-point-map.md", "title": "Geographic point map", "description": "Geographic points positioned on a tiled map. Agent-safe content rendering, built in. Catalog id charts-geo-point-map.", "headings": [ "Live examples", "Geographic point map example", "Geographic point map example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-geo-point-map", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-heatmap/", "twin": "/component-pages/charts-heatmap.md", "title": "Heatmap", "description": "A matrix of labeled cells with an accessible data table. Agent-safe content rendering, built in. Catalog id charts-heatmap.", "headings": [ "Live examples", "Heatmap example", "Heatmap example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-heatmap", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-line/", "twin": "/component-pages/charts-line.md", "title": "Line chart", "description": "A categorical line chart with accessible values. Agent-safe content rendering, built in. Catalog id charts-line.", "headings": [ "Live examples", "Line chart example", "Line chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-line", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-network/", "twin": "/component-pages/charts-network.md", "title": "Network graph", "description": "A node and connection graph with an accessible table. Agent-safe content rendering, built in. Catalog id charts-network.", "headings": [ "Live examples", "Network graph example", "Network graph example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-network", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-pie/", "twin": "/component-pages/charts-pie.md", "title": "Pie chart", "description": "A part-to-whole chart with an accessible data table. Agent-safe content rendering, built in. Catalog id charts-pie.", "headings": [ "Live examples", "Pie chart example", "Pie chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-pie", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-progress-ring/", "twin": "/component-pages/charts-progress-ring.md", "title": "Progress ring", "description": "A compact radial progress indicator with a data table. Agent-safe content rendering, built in. Catalog id charts-progress-ring.", "headings": [ "Live examples", "Progress ring example", "Progress ring example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-progress-ring", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-sankey/", "twin": "/component-pages/charts-sankey.md", "title": "Sankey chart", "description": "A weighted flow diagram with an accessible table. Agent-safe content rendering, built in. Catalog id charts-sankey.", "headings": [ "Live examples", "Sankey chart example", "Sankey chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-sankey", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-scatter/", "twin": "/component-pages/charts-scatter.md", "title": "Scatter chart", "description": "A quantitative scatter plot with an accessible data table. Agent-safe content rendering, built in. Catalog id charts-scatter.", "headings": [ "Live examples", "Scatter chart example", "Scatter chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-scatter", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-sparkline/", "twin": "/component-pages/charts-sparkline.md", "title": "Sparkline", "description": "A compact line, area or bar trend chart. Agent-safe content rendering, built in. Catalog id charts-sparkline.", "headings": [ "Live examples", "Sparkline example", "Sparkline example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-sparkline", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-stacked-bar/", "twin": "/component-pages/charts-stacked-bar.md", "title": "Stacked bar chart", "description": "A categorical stacked bar chart with accessible values. Agent-safe content rendering, built in. Catalog id charts-stacked-bar.", "headings": [ "Live examples", "Stacked bar chart example", "Stacked bar chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-stacked-bar", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-sunburst/", "twin": "/component-pages/charts-sunburst.md", "title": "Sunburst chart", "description": "A hierarchical part-to-whole chart with an accessible table. Agent-safe content rendering, built in. Catalog id charts-sunburst.", "headings": [ "Live examples", "Sunburst chart example", "Sunburst chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-sunburst", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/charts-treemap/", "twin": "/component-pages/charts-treemap.md", "title": "Treemap chart", "description": "A hierarchical part-to-whole chart with an accessible table. Agent-safe content rendering, built in. Catalog id charts-treemap.", "headings": [ "Live examples", "Treemap chart example", "Treemap chart example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for charts-treemap", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/checkbox/", "twin": "/component-pages/checkbox.md", "title": "Checkbox", "description": "A binary or indeterminate checkbox with optional label. Forms with the wiring documented, not guessed. Catalog id checkbox.", "headings": [ "Live examples", "Labeled checkbox", "Labeled checkbox", "Indeterminate", "Indeterminate", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for checkbox", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/chip/", "twin": "/component-pages/chip.md", "title": "Chip", "description": "A toggleable filter chip (pressed state). One token contract, every theme. Catalog id chip.", "headings": [ "Live examples", "Selected chip", "Selected chip", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for chip", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/code-field/", "twin": "/component-pages/code-field.md", "title": "CodeField", "description": "An editable, syntax-highlighted code textarea. Forms with the wiring documented, not guessed. Catalog id code-field.", "headings": [ "Live examples", "SQL", "SQL", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for code-field", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/code/", "twin": "/component-pages/code.md", "title": "Code", "description": "Inline or block code with escaped text (no HTML). One token contract, every theme. Catalog id code.", "headings": [ "Live examples", "TypeScript block", "TypeScript block", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for code", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/color-swatch/", "twin": "/component-pages/color-swatch.md", "title": "Color swatch", "description": "A chip of a closed palette, role or data-viz color with contrast ink from tokens. Never free CSS. One token contract, every theme. Catalog id color-swatch.", "headings": [ "Live examples", "Primary swatch", "Primary swatch", "Chart series", "Chart series", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for color-swatch", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/combobox/", "twin": "/component-pages/combobox.md", "title": "Combobox", "description": "A text input that filters a list of options, for one value or several. Forms with the wiring documented, not guessed. Catalog id combobox.", "headings": [ "Live examples", "Required form field", "Required form field", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for combobox", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/command-palette/", "twin": "/component-pages/command-palette.md", "title": "CommandPalette", "description": "Dialog-hosted command palette with search and recent items. Overlay behavior from owned texels. Catalog id command-palette.", "headings": [ "Live examples", "Open palette", "Open palette", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for command-palette", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/content-layout/", "twin": "/component-pages/content-layout.md", "title": "ContentLayout", "description": "Shared docs/blog/editorial reading frame with optional TOC. Logical CSS, so right-to-left mirrors correctly. Catalog id content-layout.", "headings": [ "Live examples", "Docs", "Docs", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for content-layout", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/context-menu-trigger/", "twin": "/component-pages/context-menu-trigger.md", "title": "ContextMenu.Trigger", "description": "Region that opens the context menu. Overlay behavior from owned texels. Catalog id context-menu-trigger.", "headings": [ "Live examples", "Canvas region", "Canvas region", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for context-menu-trigger", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/context-menu/", "twin": "/component-pages/context-menu.md", "title": "ContextMenu", "description": "Pointer-anchored menu (right-click, long-press, Menu key). Overlay behavior from owned texels. Catalog id context-menu.", "headings": [ "Live examples", "Context region", "Context region", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for context-menu", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/deck-slide/", "twin": "/component-pages/deck-slide.md", "title": "Deck slide", "description": "One slide in a deck: a title, content blocks and speaker notes. Logical CSS, so right-to-left mirrors correctly. Catalog id deck-slide.", "headings": [ "Live examples", "Deck slide", "Deck slide", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for deck-slide", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/description/", "twin": "/component-pages/description.md", "title": "Description", "description": "Help text associated with a field control. Forms with the wiring documented, not guessed. Catalog id description.", "headings": [ "Live examples", "Help text", "Help text", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for description", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/detail-panel/", "twin": "/component-pages/detail-panel.md", "title": "DetailPanel", "description": "Non-modal detail panel alongside content. Overlay behavior from owned texels. Catalog id detail-panel.", "headings": [ "Live examples", "End panel", "End panel", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for detail-panel", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/dialog/", "twin": "/component-pages/dialog.md", "title": "Dialog", "description": "Modal dialog with title, optional description, body and footer. Overlay behavior from owned texels. Catalog id dialog.", "headings": [ "Live examples", "Basic dialog", "Basic dialog", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for dialog", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/drawer/", "twin": "/component-pages/drawer.md", "title": "Drawer", "description": "Bottom or edge drawer with optional drag dismiss. Overlay behavior from owned texels. Catalog id drawer.", "headings": [ "Live examples", "Bottom drawer", "Bottom drawer", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for drawer", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/dropdown-menu-content/", "twin": "/component-pages/dropdown-menu-content.md", "title": "DropdownMenu.Content", "description": "Floating menu surface for dropdown items. Overlay behavior from owned texels. Catalog id dropdown-menu-content.", "headings": [ "Live examples", "Content", "Content", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for dropdown-menu-content", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/dropdown-menu-item/", "twin": "/component-pages/dropdown-menu-item.md", "title": "DropdownMenu.Item", "description": "Menu item with optional icon and shortcut chrome. Overlay behavior from owned texels. Catalog id dropdown-menu-item.", "headings": [ "Live examples", "Item with shortcut", "Item with shortcut", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for dropdown-menu-item", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/dropdown-menu-trigger/", "twin": "/component-pages/dropdown-menu-trigger.md", "title": "DropdownMenu.Trigger", "description": "Styled button that opens a dropdown menu. Overlay behavior from owned texels. Catalog id dropdown-menu-trigger.", "headings": [ "Live examples", "Trigger", "Trigger", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for dropdown-menu-trigger", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/dropdown-menu/", "twin": "/component-pages/dropdown-menu.md", "title": "DropdownMenu", "description": "Menu button pattern with items, checkboxes, radios and submenus. Overlay behavior from owned texels. Catalog id dropdown-menu.", "headings": [ "Live examples", "Actions menu", "Actions menu", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for dropdown-menu", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/empty-state/", "twin": "/component-pages/empty-state.md", "title": "Empty state", "description": "Placeholder when a list or panel has nothing to show yet. One token contract, every theme. Catalog id empty-state.", "headings": [ "Live examples", "No orders", "No orders", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for empty-state", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/error-state/", "twin": "/component-pages/error-state.md", "title": "Error state", "description": "Full-panel failure with optional retry. One token contract, every theme. Catalog id error-state.", "headings": [ "Live examples", "Retry error", "Retry error", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for error-state", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/field-error/", "twin": "/component-pages/field-error.md", "title": "FieldError", "description": "An alert-role error message for a field. Forms with the wiring documented, not guessed. Catalog id field-error.", "headings": [ "Live examples", "Error message", "Error message", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for field-error", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/field/", "twin": "/component-pages/field.md", "title": "Field", "description": "Label, description and error wiring for a single control. Forms with the wiring documented, not guessed. Catalog id field.", "headings": [ "Live examples", "Vertical field", "Vertical field", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for field", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/file-upload/", "twin": "/component-pages/file-upload.md", "title": "FileUpload", "description": "A labelled drop zone and file list for choosing local files. Forms with the wiring documented, not guessed. Catalog id file-upload.", "headings": [ "Live examples", "Images", "Images", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for file-upload", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/form/", "twin": "/component-pages/form.md", "title": "Form", "description": "A form shell with layout, validation hook and error map. Forms with the wiring documented, not guessed. Catalog id form.", "headings": [ "Live examples", "Stacked form", "Stacked form", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for form", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/heading/", "twin": "/component-pages/heading.md", "title": "Heading", "description": "A page title or section heading: a semantic h1–h6 with a size from the type scale. One token contract, every theme. Catalog id heading.", "headings": [ "Live examples", "Page title", "Page title", "Muted section heading", "Muted section heading", "Responsive hero title", "Responsive hero title", "Small card title", "Small card title", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for heading", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/hover-card-content/", "twin": "/component-pages/hover-card-content.md", "title": "HoverCard.Content", "description": "Styled hover-card surface. Overlay behavior from owned texels. Catalog id hover-card-content.", "headings": [ "Live examples", "Content", "Content", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for hover-card-content", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/hover-card/", "twin": "/component-pages/hover-card.md", "title": "HoverCard", "description": "Preview panel that opens on hover or focus. Overlay behavior from owned texels. Catalog id hover-card.", "headings": [ "Live examples", "Preview", "Preview", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for hover-card", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/icon-button/", "twin": "/component-pages/icon-button.md", "title": "IconButton", "description": "An icon-only button that requires an accessible name. Forms with the wiring documented, not guessed. Catalog id icon-button.", "headings": [ "Live examples", "Close icon button", "Close icon button", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for icon-button", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/icon/", "twin": "/component-pages/icon.md", "title": "Icon", "description": "A glyph by name or Lucide component; allowing icon allows every icon set. One token contract, every theme. Catalog id icon.", "headings": [ "Live examples", "Search glyph", "Search glyph", "Muted chevron", "Muted chevron", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for icon", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/", "twin": "/component-pages.md", "title": "Components", "description": "One static page per catalog component: examples, props, keyboard, accessibility and guidance — generated from manifests.", "headings": [ "content 35", "display 36", "forms 36", "layouts 30", "overlays 26", "Domain components", "For agents" ] }, { "path": "/component-pages/inline-text/", "twin": "/component-pages/inline-text.md", "title": "Inline text", "description": "A plain text run for the slot of a slot-only component (button, label, badge). One token contract, every theme. Catalog id inline-text.", "headings": [ "Live examples", "Button label", "Button label", "Badge word", "Badge word", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for inline-text", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/input-group/", "twin": "/component-pages/input-group.md", "title": "InputGroup", "description": "An input with start/end adornments and optional clear. Forms with the wiring documented, not guessed. Catalog id input-group.", "headings": [ "Live examples", "Search group", "Search group", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for input-group", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/input/", "twin": "/component-pages/input.md", "title": "Input", "description": "A single-line text (or file) control with optional clear. Forms with the wiring documented, not guessed. Catalog id input.", "headings": [ "Live examples", "Text input", "Text input", "Email input", "Email input", "Inline-edit title", "Inline-edit title", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for input", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/kbd/", "twin": "/component-pages/kbd.md", "title": "Kbd", "description": "Inline keyboard key affordance. One token contract, every theme. Catalog id kbd.", "headings": [ "Live examples", "Save shortcut", "Save shortcut", "Labelled key", "Labelled key", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for kbd", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/kpi/", "twin": "/component-pages/kpi.md", "title": "KPI", "description": "A formatted metric with unit, previous-period delta and optional link. One token contract, every theme. Catalog id kpi.", "headings": [ "Live examples", "Orders KPI", "Orders KPI", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for kpi", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/label/", "twin": "/component-pages/label.md", "title": "Label", "description": "A form label with optional required marker and sr-only mode. Forms with the wiring documented, not guessed. Catalog id label.", "headings": [ "Live examples", "Required label", "Required label", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for label", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-auth-split/", "twin": "/component-pages/layout-auth-split.md", "title": "Auth split layout", "description": "Sign-in form column plus brand panel. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-auth-split.", "headings": [ "Live examples", "Sign in", "Sign in", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-auth-split", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-blog/", "twin": "/component-pages/layout-blog.md", "title": "Blog layout", "description": "Blog/post reading layout (content-layout kind blog). Logical CSS, so right-to-left mirrors correctly. Catalog id layout-blog.", "headings": [ "Live examples", "Blog layout", "Blog layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-blog", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-card/", "twin": "/component-pages/layout-card.md", "title": "Card layout", "description": "Content card frame for grouped agent-authored blocks. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-card.", "headings": [ "Live examples", "Card layout", "Card layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-card", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-chrome/", "twin": "/component-pages/layout-chrome.md", "title": "LayoutChrome", "description": "Shared brand, actions, user and skip-link chrome for desktop layouts. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-chrome.", "headings": [ "Live examples", "Brand chrome", "Brand chrome", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-chrome", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-dashboard-grid/", "twin": "/component-pages/layout-dashboard-grid.md", "title": "Dashboard grid layout", "description": "Top chrome plus container-query widget grid. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-dashboard-grid.", "headings": [ "Live examples", "Dashboard grid layout", "Dashboard grid layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-dashboard-grid", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-deck/", "twin": "/component-pages/layout-deck.md", "title": "Deck layout", "description": "Slide deck frame for sequenced content. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-deck.", "headings": [ "Live examples", "Deck layout", "Deck layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-deck", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-doc/", "twin": "/component-pages/layout-doc.md", "title": "Doc layout", "description": "Document frame with optional table of contents. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-doc.", "headings": [ "Live examples", "Doc layout", "Doc layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-doc", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-docs/", "twin": "/component-pages/layout-docs.md", "title": "Docs layout", "description": "Documentation reading layout (content-layout kind docs). Logical CSS, so right-to-left mirrors correctly. Catalog id layout-docs.", "headings": [ "Live examples", "Docs layout", "Docs layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-docs", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-drawer/", "twin": "/component-pages/layout-drawer.md", "title": "LayoutDrawer", "description": "Mobile navigation drawer built on the dialog primitive. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-drawer.", "headings": [ "Live examples", "Open drawer", "Open drawer", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-drawer", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-dual-sidebar/", "twin": "/component-pages/layout-dual-sidebar.md", "title": "Dual sidebar layout", "description": "Primary nav plus optional context aside. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-dual-sidebar.", "headings": [ "Live examples", "Dual sidebar layout", "Dual sidebar layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-dual-sidebar", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-editorial/", "twin": "/component-pages/layout-editorial.md", "title": "Editorial layout", "description": "Long-read editorial layout (content-layout kind editorial). Logical CSS, so right-to-left mirrors correctly. Catalog id layout-editorial.", "headings": [ "Live examples", "Editorial layout", "Editorial layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-editorial", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-grid/", "twin": "/component-pages/layout-grid.md", "title": "Grid layout", "description": "Responsive content grid for agent-authored tiles. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-grid.", "headings": [ "Live examples", "Grid layout", "Grid layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-grid", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-host/", "twin": "/component-pages/layout-host.md", "title": "LayoutHost", "description": "Resolves a layout id, applies width fallbacks, and keeps one stable screen outlet. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-host.", "headings": [ "Live examples", "Sidebar host", "Sidebar host", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-host", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-landing/", "twin": "/component-pages/layout-landing.md", "title": "Landing layout", "description": "Standalone marketing landing composition. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-landing.", "headings": [ "Live examples", "Landing", "Landing", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-landing", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-marketing/", "twin": "/component-pages/layout-marketing.md", "title": "Marketing layout", "description": "Marketing page frame with hero, sections and footer slots. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-marketing.", "headings": [ "Live examples", "Marketing", "Marketing", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-marketing", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-page/", "twin": "/component-pages/layout-page.md", "title": "Page layout", "description": "Full page content frame for agent-authored documents. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-page.", "headings": [ "Live examples", "Page layout", "Page layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-page", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-pricing/", "twin": "/component-pages/layout-pricing.md", "title": "Pricing layout", "description": "Pricing plans grid with title and footnote. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-pricing.", "headings": [ "Live examples", "Three plans", "Three plans", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-pricing", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-settings/", "twin": "/component-pages/layout-settings.md", "title": "Settings layout", "description": "Settings section list plus detail pane. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-settings.", "headings": [ "Live examples", "Account settings", "Account settings", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-settings", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-sidebar/", "twin": "/component-pages/layout-sidebar.md", "title": "Sidebar layout", "description": "App sidebar column with responsive drawer fallback. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-sidebar.", "headings": [ "Live examples", "Sidebar layout", "Sidebar layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-sidebar", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-top-nav/", "twin": "/component-pages/layout-top-nav.md", "title": "Top navigation layout", "description": "Horizontal top navigation with optional mobile menu. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-top-nav.", "headings": [ "Live examples", "Top navigation layout", "Top navigation layout", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-top-nav", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/layout-wizard/", "twin": "/component-pages/layout-wizard.md", "title": "Wizard layout", "description": "Centered onboarding wizard frame with steps. Logical CSS, so right-to-left mirrors correctly. Catalog id layout-wizard.", "headings": [ "Live examples", "Onboarding", "Onboarding", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for layout-wizard", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/link/", "twin": "/component-pages/link.md", "title": "Link", "description": "An inline sentence link. Underline and color come from link tokens; href is filtered by the URL policy. One token contract, every theme. Catalog id link.", "headings": [ "Live examples", "Inline sentence link", "Inline sentence link", "External link", "External link", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for link", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/list-item/", "twin": "/component-pages/list-item.md", "title": "ListItem", "description": "A list row with a title, optional description, icon and trailing meta. One token contract, every theme. Catalog id list-item.", "headings": [ "Live examples", "Inbox row", "Inbox row", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for list-item", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/list/", "twin": "/component-pages/list.md", "title": "List", "description": "A list of ListItem rows; divided draws a token hairline between them. One token contract, every theme. Catalog id list.", "headings": [ "Live examples", "Divided inbox", "Divided inbox", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for list", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/mark/", "twin": "/component-pages/mark.md", "title": "Mark", "description": "An inline highlight for search results, from role soft tokens. One token contract, every theme. Catalog id mark.", "headings": [ "Live examples", "Search hit", "Search hit", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for mark", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/media-composition-canvas/", "twin": "/component-pages/media-composition-canvas.md", "title": "Canvas composition", "description": "A validated layered composition rendered to a canvas. Agent-safe content rendering, built in. Catalog id media-composition-canvas.", "headings": [ "Live examples", "Canvas composition example", "Canvas composition example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for media-composition-canvas", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/media-composition-svg/", "twin": "/component-pages/media-composition-svg.md", "title": "SVG composition", "description": "A validated, structured vector composition. Agent-safe content rendering, built in. Catalog id media-composition-svg.", "headings": [ "Live examples", "SVG composition example", "SVG composition example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for media-composition-svg", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/media-image/", "twin": "/component-pages/media-image.md", "title": "Responsive image", "description": "A responsive image with URL validation, loading states and actions. Agent-safe content rendering, built in. Catalog id media-image.", "headings": [ "Live examples", "Responsive image example", "Responsive image example", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for media-image", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "For agents" ] }, { "path": "/component-pages/menubar-trigger/", "twin": "/component-pages/menubar-trigger.md", "title": "Menubar.Trigger", "description": "Top-level menubar item that opens a menu. Overlay behavior from owned texels. Catalog id menubar-trigger.", "headings": [ "Live examples", "File", "File", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for menubar-trigger", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/menubar/", "twin": "/component-pages/menubar.md", "title": "Menubar", "description": "Application menubar with roving top-level items. Overlay behavior from owned texels. Catalog id menubar.", "headings": [ "Live examples", "Application bar", "Application bar", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for menubar", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/mobile-app-frame/", "twin": "/component-pages/mobile-app-frame.md", "title": "MobileAppFrame", "description": "A phone-sized app frame: skip link, header, scrolling screen, optional footer and bottom nav. Host chrome; agents never emit it.", "headings": [ "Live examples", "Phone frame", "Phone frame", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for mobile-app-frame", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/mobile-header/", "twin": "/component-pages/mobile-header.md", "title": "MobileHeader", "description": "A mobile stack header with back, title and actions. Host chrome; agents never emit it. Logical CSS, so right-to-left mirrors correctly.", "headings": [ "Live examples", "Inbox header", "Inbox header", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for mobile-header", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/multi-select/", "twin": "/component-pages/multi-select.md", "title": "MultiSelect", "description": "A combobox for several values, shown as removable chips. Forms with the wiring documented, not guessed. Catalog id multi-select.", "headings": [ "Live examples", "Tags field", "Tags field", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for multi-select", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/nav-icon/", "twin": "/component-pages/nav-icon.md", "title": "NavIcon", "description": "Renders a nav model icon by name or component. Logical CSS, so right-to-left mirrors correctly. Catalog id nav-icon.", "headings": [ "Live examples", "Home icon", "Home icon", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for nav-icon", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/navigation-menu/", "twin": "/component-pages/navigation-menu.md", "title": "NavigationMenu", "description": "Site or app navigation with expandable triggers and links. Navigation landmarks that mark where you are. Catalog id navigation-menu.", "headings": [ "Live examples", "Main nav", "Main nav", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for navigation-menu", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/number-field/", "twin": "/component-pages/number-field.md", "title": "NumberField", "description": "A numeric value with optional steppers, min, max and locale formatting. Forms with the wiring documented, not guessed. Catalog id number-field.", "headings": [ "Live examples", "Quantity", "Quantity", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for number-field", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/pagination/", "twin": "/component-pages/pagination.md", "title": "Pagination", "description": "Page controls for long lists. Navigation landmarks that mark where you are. Catalog id pagination.", "headings": [ "Live examples", "Twelve pages", "Twelve pages", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for pagination", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/pin-input/", "twin": "/component-pages/pin-input.md", "title": "PinInput", "description": "A one-time code of fixed length, one cell per character. Forms with the wiring documented, not guessed. Catalog id pin-input.", "headings": [ "Live examples", "One-time code", "One-time code", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for pin-input", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/popover-content/", "twin": "/component-pages/popover-content.md", "title": "Popover.Content", "description": "Styled popover surface with optional arrow. Overlay behavior from owned texels. Catalog id popover-content.", "headings": [ "Live examples", "Elevated", "Elevated", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for popover-content", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/popover/", "twin": "/component-pages/popover.md", "title": "Popover", "description": "Non-modal floating panel anchored to a trigger. Overlay behavior from owned texels. Catalog id popover.", "headings": [ "Live examples", "Open popover", "Open popover", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for popover", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/progress/", "twin": "/component-pages/progress.md", "title": "Progress", "description": "A linear or circular progress bar, determinate or indeterminate. One token contract, every theme. Catalog id progress.", "headings": [ "Live examples", "Upload", "Upload", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for progress", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/prose/", "twin": "/component-pages/prose.md", "title": "Prose", "description": "Long-form text with the design system's reading rhythm: measure, spacing, headings, lists. One token contract, every theme. Catalog id prose.", "headings": [ "Live examples", "Article body", "Article body", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for prose", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/radio-group/", "twin": "/component-pages/radio-group.md", "title": "RadioGroup", "description": "A set of exclusive radio options with keyboard roving. Forms with the wiring documented, not guessed. Catalog id radio-group.", "headings": [ "Live examples", "Vertical group", "Vertical group", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for radio-group", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/radio/", "twin": "/component-pages/radio.md", "title": "Radio", "description": "One option inside a RadioGroup. Forms with the wiring documented, not guessed. Catalog id radio.", "headings": [ "Live examples", "Radio option", "Radio option", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for radio", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/rating/", "twin": "/component-pages/rating.md", "title": "Rating", "description": "A star rating the person sets, or a read-only average. Forms with the wiring documented, not guessed. Catalog id rating.", "headings": [ "Live examples", "Review", "Review", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for rating", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/responsive-modal/", "twin": "/component-pages/responsive-modal.md", "title": "ResponsiveModal", "description": "Dialog on large screens, drawer/sheet on small screens. Overlay behavior from owned texels. Catalog id responsive-modal.", "headings": [ "Live examples", "Adaptive", "Adaptive", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for responsive-modal", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/screen-outlet/", "twin": "/component-pages/screen-outlet.md", "title": "ScreenOutlet", "description": "Stable screen mount point that survives layout switches. Logical CSS, so right-to-left mirrors correctly. Catalog id screen-outlet.", "headings": [ "Live examples", "Outlet", "Outlet", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for screen-outlet", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select-content/", "twin": "/component-pages/select-content.md", "title": "Select.Content", "description": "The positioned listbox surface for Select items. Forms with the wiring documented, not guessed. Catalog id select-content.", "headings": [ "Live examples", "Medium content", "Medium content", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select-content", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select-group/", "twin": "/component-pages/select-group.md", "title": "Select.Group", "description": "Groups related Select items under an optional label. Forms with the wiring documented, not guessed. Catalog id select-group.", "headings": [ "Live examples", "Group", "Group", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select-group", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select-item/", "twin": "/component-pages/select-item.md", "title": "Select.Item", "description": "One selectable option inside Select.Content. Forms with the wiring documented, not guessed. Catalog id select-item.", "headings": [ "Live examples", "Option", "Option", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select-item", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select-label/", "twin": "/component-pages/select-label.md", "title": "Select.Label", "description": "A non-interactive heading inside a Select group. Forms with the wiring documented, not guessed. Catalog id select-label.", "headings": [ "Live examples", "Group label", "Group label", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select-label", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select-portal/", "twin": "/component-pages/select-portal.md", "title": "Select.Portal", "description": "Portals Select.Content out of overflow-clipped ancestors. Forms with the wiring documented, not guessed. Catalog id select-portal.", "headings": [ "Live examples", "Portal", "Portal", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select-portal", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select-separator/", "twin": "/component-pages/select-separator.md", "title": "Select.Separator", "description": "A visual divider between Select groups or items. Forms with the wiring documented, not guessed. Catalog id select-separator.", "headings": [ "Live examples", "Divider", "Divider", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select-separator", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select-trigger/", "twin": "/component-pages/select-trigger.md", "title": "Select.Trigger", "description": "The button that opens a Select listbox. Forms with the wiring documented, not guessed. Catalog id select-trigger.", "headings": [ "Live examples", "Default trigger", "Default trigger", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select-trigger", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select-value/", "twin": "/component-pages/select-value.md", "title": "Select.Value", "description": "Shows the selected label or a placeholder inside the trigger. Forms with the wiring documented, not guessed. Catalog id select-value.", "headings": [ "Live examples", "Placeholder", "Placeholder", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select-value", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select-viewport/", "twin": "/component-pages/select-viewport.md", "title": "Select.Viewport", "description": "Scrollable viewport inside Select.Content. Forms with the wiring documented, not guessed. Catalog id select-viewport.", "headings": [ "Live examples", "Viewport", "Viewport", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select-viewport", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/select/", "twin": "/component-pages/select.md", "title": "Select", "description": "A single-value select root with size and variant chrome. Forms with the wiring documented, not guessed. Catalog id select.", "headings": [ "Live examples", "Outline select", "Outline select", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for select", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/separator/", "twin": "/component-pages/separator.md", "title": "Separator", "description": "A horizontal or vertical divider on the token scale. One token contract, every theme. Catalog id separator.", "headings": [ "Live examples", "Horizontal rule", "Horizontal rule", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for separator", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/sheet/", "twin": "/component-pages/sheet.md", "title": "Sheet", "description": "Edge-anchored modal panel (drawer-like sheet). Overlay behavior from owned texels. Catalog id sheet.", "headings": [ "Live examples", "Start edge", "Start edge", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for sheet", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/sidebar/", "twin": "/component-pages/sidebar.md", "title": "Sidebar", "description": "Collapsible app rail with sections, badges and safe links. Navigation landmarks that mark where you are. Catalog id sidebar.", "headings": [ "Live examples", "Workspace rail", "Workspace rail", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for sidebar", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/skeleton/", "twin": "/component-pages/skeleton.md", "title": "Skeleton", "description": "A placeholder bar or circle while content loads. One token contract, every theme. Catalog id skeleton.", "headings": [ "Live examples", "Text line", "Text line", "Avatar placeholder", "Avatar placeholder", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for skeleton", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/spinner/", "twin": "/component-pages/spinner.md", "title": "Spinner", "description": "An indeterminate wait indicator, labelled or decorative. One token contract, every theme. Catalog id spinner.", "headings": [ "Live examples", "Saving", "Saving", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for spinner", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/split-view/", "twin": "/component-pages/split-view.md", "title": "SplitView", "description": "Master-detail split with list and detail panes. Logical CSS, so right-to-left mirrors correctly. Catalog id split-view.", "headings": [ "Live examples", "Split", "Split", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for split-view", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/stat/", "twin": "/component-pages/stat.md", "title": "Stat", "description": "A single metric with optional delta, trend and sparkline slot. One token contract, every theme. Catalog id stat.", "headings": [ "Live examples", "Revenue up", "Revenue up", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for stat", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/stepper/", "twin": "/component-pages/stepper.md", "title": "Stepper", "description": "Horizontal or vertical progress through ordered steps. One token contract, every theme. Catalog id stepper.", "headings": [ "Live examples", "Checkout steps", "Checkout steps", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for stepper", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/switch/", "twin": "/component-pages/switch.md", "title": "Switch", "description": "An immediate on/off setting control. Forms with the wiring documented, not guessed. Catalog id switch.", "headings": [ "Live examples", "Labeled switch", "Labeled switch", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for switch", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/table/", "twin": "/component-pages/table.md", "title": "Table", "description": "A responsive data table with density, stacking and sticky header options. One token contract, every theme. Catalog id table.", "headings": [ "Live examples", "Striped sticky header", "Striped sticky header", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for table", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/tabs/", "twin": "/component-pages/tabs.md", "title": "Tabs", "description": "A tab list that shows one panel at a time. One token contract, every theme. Catalog id tabs.", "headings": [ "Live examples", "Line tabs", "Line tabs", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for tabs", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/tag/", "twin": "/component-pages/tag.md", "title": "Tag", "description": "A labeled chip that can be removed. One token contract, every theme. Catalog id tag.", "headings": [ "Live examples", "Removable tag", "Removable tag", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for tag", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/tags-input/", "twin": "/component-pages/tags-input.md", "title": "TagsInput", "description": "A list of tags the person types, pastes or removes. Forms with the wiring documented, not guessed. Catalog id tags-input.", "headings": [ "Live examples", "Topics", "Topics", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for tags-input", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/text-counter/", "twin": "/component-pages/text-counter.md", "title": "TextCounter", "description": "An input or textarea that shows remaining characters near the limit. Forms with the wiring documented, not guessed. Catalog id text-counter.", "headings": [ "Live examples", "Near limit", "Near limit", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for text-counter", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/text/", "twin": "/component-pages/text.md", "title": "Text", "description": "Body copy, labels and small print with a size, tone and weight from the design system. One token contract, every theme. Catalog id text.", "headings": [ "Live examples", "Muted helper text", "Muted helper text", "Small print", "Small print", "Eyebrow (overline)", "Eyebrow (overline)", "Large figure", "Large figure", "Nested text that inherits", "Nested text that inherits", "Struck price", "Struck price", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for text", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/textarea/", "twin": "/component-pages/textarea.md", "title": "Textarea", "description": "A multi-line text control with optional autosize. Forms with the wiring documented, not guessed. Catalog id textarea.", "headings": [ "Live examples", "Autosize textarea", "Autosize textarea", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for textarea", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/time-field/", "twin": "/component-pages/time-field.md", "title": "TimeField", "description": "A labelled time of day typed or stepped by segment (hour, minute, AM/PM), with a 24-hour HH:mm value. Forms with the wiring documented, not guessed.", "headings": [ "Live examples", "Reminder time", "Reminder time", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for time-field", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/timeline/", "twin": "/component-pages/timeline.md", "title": "Timeline", "description": "Vertical or horizontal chronological list of events. One token contract, every theme. Catalog id timeline.", "headings": [ "Live examples", "Shipment timeline", "Shipment timeline", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for timeline", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/toaster/", "twin": "/component-pages/toaster.md", "title": "Toaster", "description": "Live region that renders toast notifications from the shared store. Overlay behavior from owned texels. Catalog id toaster.", "headings": [ "Live examples", "Toaster region", "Toaster region", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for toaster", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/toggle-group/", "twin": "/component-pages/toggle-group.md", "title": "ToggleGroup", "description": "A group of toggle buttons: one value, or several. Forms with the wiring documented, not guessed. Catalog id toggle-group.", "headings": [ "Live examples", "Alignment", "Alignment", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for toggle-group", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/component-pages/tooltip/", "twin": "/component-pages/tooltip.md", "title": "Tooltip", "description": "Short delayed hint on hover or focus. Overlay behavior from owned texels. Catalog id tooltip.", "headings": [ "Live examples", "Basic tooltip", "Basic tooltip", "In your theme", "Props", "Keyboard", "Accessibility", "Evidence for tooltip", "Behavior", "Size (gzip)", "Axe", "Browsers", "When to use", "Use when", "Don’t use when", "Related", "For agents" ] }, { "path": "/dashboards-page/", "twin": "/dashboards-page.md", "title": "Dashboards people arrange, from the keyboard too", "description": "The Texuli dashboard (@texuli/data/dashboard): widgets moved and resized by pointer or keyboard, responsive breakpoints, safe persistence and agent data.", "headings": [ "Arrange it yourself", "What a screen reader hears", "Saved layout", "Host data source calls", "Keyboard and announcements", "Breakpoints", "Saving a layout, and reading it back", "Dashboards as agent data", "The blueprint the agent wrote", "The hostile binding", "Painted by the player", "What keeps it safe", "In code", "Package docs", "For agents" ] }, { "path": "/design-systems/", "twin": "/design-systems.md", "title": "Design systems", "description": "One JSON document per brand, followed by every Texuli surface: three example brands on one dashboard, slide, document and email, their conformance, and how to start.", "headings": [ "What a design system is", "Three brands, four surfaces", "Dashboard", "Deck slide", "Document page", "Email", "Conformance", "Start one", "In the browser: the studio", "In a terminal: texuli ds", "With an agent: the MCP", "Read the guide", "See the whole loop" ] }, { "path": "/design-systems/kit/", "twin": "/design-systems/kit.md", "title": "Design system kit", "description": "A whole design system on one page: foundations, voice, every allowed component in light and dark, its own components and its approval, rendered by texuli/ds-kit for a fictional example brand.", "headings": [ "Use it in your app", "Ledgerline2.3.0", "Foundations", "Voice and rules", "Components", "Library" ] }, { "path": "/developers/", "twin": "/developers.md", "title": "Developers", "description": "The texuli.com developer portal: a read-only JSON API described by OpenAPI 3.1, the MCP server (remote and npx), the CLI, agent files, limits and versioning.", "headings": [ "Quick start", "Endpoints", "MCP server", "Command line", "Files for agents", "Limits", "Errors", "Versioning and deprecation", "Access and license" ] }, { "path": "/docs-shell/getting-started/", "twin": "/docs-shell/getting-started.md", "title": "Getting started with the docs shell", "description": "How to read a documentation page in this shell from top to bottom.", "headings": [ "Open a page", "Follow the outline", "Move on" ] }, { "path": "/docs-shell/", "twin": "/docs-shell.md", "title": "Docs shell", "description": "Sidebar, table of contents, previous and next — a static documentation frame for texuli.com.", "headings": [ "What you get", "Static and local", "Reading order" ] }, { "path": "/docs-shell/navigation/", "twin": "/docs-shell/navigation.md", "title": "Navigation", "description": "How the docs shell exposes sidebar, mobile menu, and pager landmarks.", "headings": [ "Sidebar", "Mobile menu", "Previous and next", "No edit link" ] }, { "path": "/documents-page/", "twin": "/documents-page.md", "title": "Documents people edit and agents write", "description": "Texuli documents (in development): a block editor with nested pages and live embeds, a reader, print, Markdown, DOCX and PDF export, and collaboration.", "headings": [ "One document: edit, read, paginate, export", "Every block, every slash item, every embed", "The slash menu: 46 items", "Two editors, one document", "Documents as agent data", "The blueprint the agent wrote", "The bounded patch", "The hostile patch", "Painted by the player", "Keyboard", "What keeps it safe", "In code", "Package docs", "For agents" ] }, { "path": "/drag-page/", "twin": "/drag-page.md", "title": "Drag, drop, and build interactions", "description": "@texuli/drag (in development), Texuli's own drag engine: sortable lists, boards, trees, groups, a free canvas and grid columns, all keyboard-accessible.", "headings": [ "One engine, three surfaces", "Sortable list", "Board", "Tree", "Announcements", "Lists in every axis", "Vertical", "Horizontal", "Grid", "Groups, clones and locked items", "Block palette", "Page", "Free placement on a canvas", "Grid columns", "File drop: a different interaction kind", "A capability inside larger systems", "The contract every surface keeps", "For agents" ] }, { "path": "/editor-page/", "twin": "/editor-page.md", "title": "Editor", "description": "The Texuli rich text editor: a closed document model, a formatting toolbar, links checked by the URL policy, undo and redo, and Markdown in and out.", "headings": [ "Try the editor", "Launch notes", "Launch notes", "Saved as Markdown", "Nodes and marks", "In the builder", "Examples", "What ships", "Planned", "Package docs", "For agents" ] }, { "path": "/emoji/", "twin": "/emoji.md", "title": "Emoji components", "description": "Accessible emoji rendering, safe text tokenization and a keyboard-friendly emoji picker for Texuli.", "headings": [ "Try the picker", "Components", "For agents" ] }, { "path": "/evidence/", "twin": "/evidence.md", "title": "Evidence", "description": "Behavior checks, gzip size, axe and browser matrix snapshots shown on every component page.", "headings": [ "Sample components", "Badge badge", "Evidence for badge", "Behavior", "Size (gzip)", "Axe", "Browsers", "Button button", "Evidence for button", "Behavior", "Size (gzip)", "Axe", "Browsers", "Card card", "Evidence for card", "Behavior", "Size (gzip)", "Axe", "Browsers", "Combobox combobox", "Evidence for combobox", "Behavior", "Size (gzip)", "Axe", "Browsers", "Dialog dialog", "Evidence for dialog", "Behavior", "Size (gzip)", "Axe", "Browsers" ] }, { "path": "/examples/astro-site-doc/", "twin": "/examples/astro-site-doc.md", "title": "Astro content site doc", "description": "A visual preview of a documentation page over the Astro content layout: compact hero, reading-width prose and a surface strip in light and dark token themes.", "headings": [ "For agents" ] }, { "path": "/examples/astro-site-hero/", "twin": "/examples/astro-site-hero.md", "title": "Astro content site hero", "description": "A visual preview of an Astro static content layout with a responsive hero, feature section and light/dark token themes. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-code-field/", "twin": "/examples/blocks-code-field.md", "title": "Code field", "description": "An editable, syntax-highlighted code field: a real textarea over the owned tokenizer, with Tab indentation, Escape then Tab to leave, line numbers, wrapping…", "headings": [ "For agents" ] }, { "path": "/examples/blocks-code-hostile/", "twin": "/examples/blocks-code-hostile.md", "title": "Code blocks reject hostile input", "description": "Markup in code stays text, and bidi overrides, injected language tokens or foreign block types show a notice. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-code/", "twin": "/examples/blocks-code.md", "title": "Code blocks", "description": "Code blocks with an owned tokenizer: TypeScript, Python, SQL, JSON, shell and plain text, line numbers, stepped highlights and a caption from block data, copy…", "headings": [ "For agents" ] }, { "path": "/examples/blocks-data-charts/", "twin": "/examples/blocks-data-charts.md", "title": "Chart blocks", "description": "Chart content blocks across every chart family: pie, gauge, sankey, histogram, pack, calendar, combo, annotated line and scatter with series labels.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-data/", "twin": "/examples/blocks-data.md", "title": "Data blocks", "description": "Table, stat, KPI and chart content blocks with validation and a hostile rejection sample. Fictional metrics only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-diagram/", "twin": "/examples/blocks-diagram.md", "title": "Diagram blocks", "description": "Flow, org chart, board and terminal diagrams from validated data, plus a hostile rejection. Fictional Harbor team copy only.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-embed/", "twin": "/examples/blocks-embed.md", "title": "Embedded app and safe link preview", "description": "A host starts the validated app only after activation; link previews render bounded text and a safe HTTPS link. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-interactive/", "twin": "/examples/blocks-interactive.md", "title": "Interactive blocks", "description": "Poll, quiz, calculator and checklist blocks from validated data. Fictional Harbor Notes copy only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-map/", "twin": "/examples/blocks-map.md", "title": "Map block", "description": "Places and a delivery route on the fictional Port Meridian basemap, keyboard pan and zoom, and a hostile block the guard rejects. No tiles or network.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-media-hostile/", "twin": "/examples/blocks-media-hostile.md", "title": "Media blocks reject hostile input", "description": "Remote image URLs, executable video sources and SVG paths are refused; rejected blocks show an inert notice. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-media/", "twin": "/examples/blocks-media.md", "title": "Media blocks", "description": "Image, figure, video and gallery blocks rendered from validated data. Fictional Harbor Notes copy; embedded raster swatches only.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-structure/", "twin": "/examples/blocks-structure.md", "title": "Structure blocks", "description": "Columns, grid, tabs, accordion, cards, divider and CTA from validated data, plus a hostile rejection. Fictional Harbor copy only.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-text-hostile/", "twin": "/examples/blocks-text-hostile.md", "title": "Text blocks reject hostile input", "description": "Raw HTML stays text, executable links lose their href, and bidi overrides or foreign block types show a notice. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/blocks-text/", "twin": "/examples/blocks-text.md", "title": "Text blocks", "description": "Heading, rich text, list, quote and callout blocks rendered from validated data. Fictional example.com content. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/canvas-editor/", "twin": "/examples/canvas-editor.md", "title": "Infinite canvas", "description": "A launch retro on the infinite canvas: sticky notes in a frame and a decision flow.", "headings": [ "For agents" ] }, { "path": "/examples/canvas-viewer/", "twin": "/examples/canvas-viewer.md", "title": "Canvas viewer", "description": "A read-only canvas fitted into an SVG image, with every shape and connector listed in reading order for screen readers. No editing code.", "headings": [ "For agents" ] }, { "path": "/examples/charts-calendar/", "twin": "/examples/charts-calendar.md", "title": "Calendar heatmap", "description": "A UTC calendar grid shows fictional daily activity with sequential tokens and explicit missing days. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/charts-canvas/", "twin": "/examples/charts-canvas.md", "title": "Canvas charts at scale", "description": "A 100,000-point series rendered on Canvas in light and dark themes, with an accessible description and data table. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/charts-cartesian/", "twin": "/examples/charts-cartesian.md", "title": "Cartesian charts", "description": "Line, area, grouped bar, stacked bar and combo charts with descriptions and table fallbacks in light and dark modes. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/charts-compact/", "twin": "/examples/charts-compact.md", "title": "Compact charts", "description": "A sparkline, bullet chart, gauge and progress ring use the active theme tokens and include data table fallbacks. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/charts-flow/", "twin": "/examples/charts-flow.md", "title": "Flow charts", "description": "Sankey, funnel and network graphs use token palettes, accessible descriptions and expandable data tables in light and dark modes.", "headings": [ "For agents" ] }, { "path": "/examples/charts-geo/", "twin": "/examples/charts-geo.md", "title": "Geo charts", "description": "Offline choropleth and point maps using bundled schematic regions, token colors and accessible data tables. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/charts-histogram/", "twin": "/examples/charts-histogram.md", "title": "Histogram chart", "description": "A fictional response-time distribution uses math-backed bins, theme tokens and a data table fallback. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/charts-interaction/", "twin": "/examples/charts-interaction.md", "title": "Chart interaction", "description": "Keyboard and pointer exploration, tooltips, legend series toggles, brush and zoom hooks, and a data table. Fictional Harbor Notes metrics.", "headings": [ "For agents" ] }, { "path": "/examples/charts-matrix/", "twin": "/examples/charts-matrix.md", "title": "Matrix charts", "description": "Heatmap, scatter and bubble charts with accessible descriptions and data table fallbacks in light and dark modes. Fictional metrics only.", "headings": [ "For agents" ] }, { "path": "/examples/charts-pack/", "twin": "/examples/charts-pack.md", "title": "Pack chart", "description": "Fictional team capacity is shown as nested circles backed by the public pack layout math. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/charts-part-whole/", "twin": "/examples/charts-part-whole.md", "title": "Part-whole charts", "description": "Pie, donut, treemap and sunburst views with accessible descriptions and expandable data tables in light and dark token palettes.", "headings": [ "For agents" ] }, { "path": "/examples/charts-rtl/", "twin": "/examples/charts-rtl.md", "title": "Charts in right-to-left layouts", "description": "Line, heatmap, scatter, sankey and gauge charts inside dir=\"rtl\" with fictional Arabic labels: captions, legends and tables mirror, while each plot keeps a…", "headings": [ "For agents" ] }, { "path": "/examples/charts-statistical/", "twin": "/examples/charts-statistical.md", "title": "Statistical charts", "description": "Box plot, violin and ECDF charts summarize fictional response-time samples with theme tokens and data table fallbacks. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/charts-windowed/", "twin": "/examples/charts-windowed.md", "title": "Windowed cartesian series", "description": "A 200-request fictional latency series shown through a movable visibleDomain window: axes, marks and keyboard exploration follow the window.", "headings": [ "For agents" ] }, { "path": "/examples/chat-attachment/", "twin": "/examples/chat-attachment.md", "title": "Chat blueprint attachment", "description": "A message card that validates an attached blueprint with the catalog validator and paints it with the player behind a disclosure, and a refused card that…", "headings": [ "For agents" ] }, { "path": "/examples/chat-composer/", "twin": "/examples/chat-composer.md", "title": "Chat composer and typing indicator", "description": "An autosizing, IME-safe message composer with attachment actions, pending and error feedback, and an announced typing indicator.", "headings": [ "For agents" ] }, { "path": "/examples/chat-display/", "twin": "/examples/chat-display.md", "title": "Static chat transcript", "description": "User, agent, and system roles with parsed and plain @ text; hostile-looking text remains text in a static transcript. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/chat-thread/", "twin": "/examples/chat-thread.md", "title": "Chat thread and message list", "description": "Grouped messages, safe inline formatting, timestamps, own-message alignment, and a long virtualized history with fictional people.", "headings": [ "For agents" ] }, { "path": "/examples/core-safe-href/", "twin": "/examples/core-safe-href.md", "title": "safeHref blocks unsafe URLs", "description": "Shows how safeHref keeps https and mailto links and drops javascript: schemes. Fictional example.com only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/data-activity/", "twin": "/examples/data-activity.md", "title": "Activity feed", "description": "Day-grouped activity with avatars, mention tokens, reactions, kind filters and load-more pagination on a fictional CRM timeline.", "headings": [ "For agents" ] }, { "path": "/examples/data-board-footer/", "twin": "/examples/data-board-footer.md", "title": "Board column footers", "description": "A board nested under a page section: column headings start at level 4, and each column ends with a footer snippet that adds a card and shows the count.", "headings": [ "For agents" ] }, { "path": "/examples/data-board-lanes/", "twin": "/examples/data-board-lanes.md", "title": "Board with collapsible lanes", "description": "A board with swimlanes: one lane starts collapsed behind its disclosure while its cards still count toward the column limits, and every column-by-lane cell…", "headings": [ "For agents" ] }, { "path": "/examples/data-board/", "twin": "/examples/data-board.md", "title": "Kanban board", "description": "Shows pointer and keyboard card moves, swimlane-ready board structure, RTL layout and work-in-progress limits. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/data-calendar-month/", "twin": "/examples/data-calendar-month.md", "title": "Calendar month overflow and event content", "description": "A busy month with custom event chip content from the event snippet, two events per day and a \"more events\" button that opens the day. Fictional schedule.", "headings": [ "For agents" ] }, { "path": "/examples/data-calendar/", "twin": "/examples/data-calendar.md", "title": "Calendar views", "description": "Month, week, day and agenda views with overlapping events, explicit time zones, locale-aware dates and keyboard navigation.", "headings": [ "For agents" ] }, { "path": "/examples/data-cohort/", "twin": "/examples/data-cohort.md", "title": "Cohort retention table", "description": "Monthly retention by signup cohort as a real table: a caption, period column headers, cohort row headers, sizes, size-weighted averages, incomplete and…", "headings": [ "For agents" ] }, { "path": "/examples/data-dashboard-metrics/", "twin": "/examples/data-dashboard-metrics.md", "title": "Dashboard metrics and filters", "description": "A reporting period picker, removable applied-filter chips with the full filter builder, and metric cards with accessible sparklines, comparison, loading and…", "headings": [ "For agents" ] }, { "path": "/examples/data-dashboard/", "twin": "/examples/data-dashboard.md", "title": "Dashboard", "description": "A widget grid people rearrange: move and resize handles for pointer drags, the arrow keys with announced positions and a click-to-arrange toolbar, breakpoints…", "headings": [ "For agents" ] }, { "path": "/examples/data-files/", "twin": "/examples/data-files.md", "title": "File browser", "description": "Grid and list file browser with breadcrumbs, multi-select, side preview and keyboard navigation on a fictional workspace library.", "headings": [ "For agents" ] }, { "path": "/examples/data-filter-builder/", "twin": "/examples/data-filter-builder.md", "title": "Filter builder", "description": "Nested and/or groups with operators by field type, native keyboard controls and focus that follows each add and remove; the model filters a data grid and is…", "headings": [ "For agents" ] }, { "path": "/examples/data-grid-columns-rtl/", "twin": "/examples/data-grid-columns-rtl.md", "title": "Data grid column operations, right to left", "description": "The same grid in a right-to-left layout: the start pin sits on the right and the resize edges, arrows and drags follow the reading direction.", "headings": [ "For agents" ] }, { "path": "/examples/data-grid-columns/", "twin": "/examples/data-grid-columns.md", "title": "Data grid column operations", "description": "Resize, reorder, pin, hide and group the columns of a grid of fictional deals; every pointer action has a keyboard path in the column menu.", "headings": [ "For agents" ] }, { "path": "/examples/data-grid-core/", "twin": "/examples/data-grid-core.md", "title": "Data grid", "description": "Sortable columns (Shift for more keys), search, a filter, row selection and APG grid keyboard navigation on the texuli Table, with an RTL grid. Fictional deals.", "headings": [ "For agents" ] }, { "path": "/examples/data-grid-editing-virtual/", "twin": "/examples/data-grid-editing-virtual.md", "title": "Editable grid, 100,000 rows", "description": "The editable data grid windows its rows above a threshold: 100,000 fictional records stay editable, with inline edits, the active cell and keyboard navigation…", "headings": [ "For agents" ] }, { "path": "/examples/data-grid-editing/", "twin": "/examples/data-grid-editing.md", "title": "Editable data grid", "description": "Inline cell editors with validation, undo/redo and TSV clipboard on the data grid. Fictional Harbor deals. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/data-grid-paging/", "twin": "/examples/data-grid-paging.md", "title": "Data grid paging and bulk actions", "description": "Client paging with a bound page and page size, row classes for overdue invoices, a filter and an export action in the toolbar, and bulk actions that follow…", "headings": [ "For agents" ] }, { "path": "/examples/data-grid-virtual/", "twin": "/examples/data-grid-virtual.md", "title": "Virtualized data grid", "description": "A two-axis virtualized grid keeps 100,000 fictional records and wide tables bounded to the visible rows and columns, with keyboard navigation and RTL support.", "headings": [ "For agents" ] }, { "path": "/examples/data-inbox/", "twin": "/examples/data-inbox.md", "title": "Notification inbox", "description": "Unread state with a count, mark read and unread, mark all, an unread view that keeps items until you leave it, per-item actions and a polite announcement for…", "headings": [ "For agents" ] }, { "path": "/examples/data-map/", "twin": "/examples/data-map.md", "title": "Offline map", "description": "Fictional vector basemap with clustered locations, a synchronized list, keyboard controls and no network tiles. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/data-timeline/", "twin": "/examples/data-timeline.md", "title": "Timeline and Gantt", "description": "Time-scaled Gantt with phase bands, collapsible groups, row selection, a window-end marker, dependencies, zoom, critical path, RTL and keyboard rescheduling…", "headings": [ "For agents" ] }, { "path": "/examples/data-tree-view/", "twin": "/examples/data-tree-view.md", "title": "Tree data view", "description": "Outline tree with lazy folders, multi-select checkboxes, drag reorder and keyboard indent on fictional workspace pages. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/data-virtual-list-view/", "twin": "/examples/data-virtual-list-view.md", "title": "Virtual list view", "description": "A 10,000-row team feed windowed by the VirtualListView catalog component: rows through a snippet, keyboard selection and position announcements, with no…", "headings": [ "For agents" ] }, { "path": "/examples/data-virtual-list/", "twin": "/examples/data-virtual-list.md", "title": "Variable-height virtual list", "description": "Shows variable row measurements, keyboard navigation, RTL layout and threshold-based loading with fictional records. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/editor-basic/", "twin": "/examples/editor-basic.md", "title": "Rich text editor", "description": "A labelled multiline textbox over the closed editor model: headings, marks, lists, todos, quotes and code rendered as real elements, with Markdown in and out.", "headings": [ "For agents" ] }, { "path": "/examples/editor-block-menu/", "twin": "/examples/editor-block-menu.md", "title": "Editor block-type menu", "description": "A menu button in the toolbar that sets paragraph, headings, lists, quote or code at the caret in one undoable step. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/editor-dialect-export/", "twin": "/examples/editor-dialect-export.md", "title": "Export for chat", "description": "The document written for Slack, Discord, WhatsApp, Telegram, Teams, Google Chat, Mattermost or plain text, with what each format loses listed and broadcast…", "headings": [ "For agents" ] }, { "path": "/examples/editor-emoji/", "twin": "/examples/editor-emoji.md", "title": "Editor emoji", "description": "An emoji button in the editor toolbar that opens the emoji picker in a popover, and a :shortcode: input rule, each insertion one undo step.", "headings": [ "For agents" ] }, { "path": "/examples/editor-long-document/", "twin": "/examples/editor-long-document.md", "title": "Long document editing", "description": "Four hundred blocks rendered in full and keyed by id, with off-screen blocks skipping layout and paint through content-visibility.", "headings": [ "For agents" ] }, { "path": "/examples/editor-paste/", "twin": "/examples/editor-paste.md", "title": "Markdown and HTML paste", "description": "Clipboard HTML read without a DOM (scripts, handlers and unsafe links dropped) and plain text kept plain unless pasted as Markdown.", "headings": [ "For agents" ] }, { "path": "/examples/editor-toolbar/", "twin": "/examples/editor-toolbar.md", "title": "Editor with toolbar and links", "description": "The roving formatting toolbar with pressed states and shortcuts, the link dialog that refuses unsafe addresses visibly, and the Markdown the document saves as.", "headings": [ "For agents" ] }, { "path": "/examples/forms-builder/", "twin": "/examples/forms-builder.md", "title": "Form builder: edit and preview a schema", "description": "Add fields from a palette, reorder them with the keyboard or pointer, inspect field settings, and see the validated form preview and schema JSON update…", "headings": [ "For agents" ] }, { "path": "/examples/forms-fields/", "twin": "/examples/forms-fields.md", "title": "Schema form: every field type", "description": "One page with every field type of the form schema (text, textarea, number, email, url, date, time, select, multiselect, checkbox, radio, switch, slider, file…", "headings": [ "For agents" ] }, { "path": "/examples/forms-registration/", "twin": "/examples/forms-registration.md", "title": "Schema form: multi-step registration", "description": "A three-step form painted from a closed schema: sections, a field that appears and becomes required from an earlier answer, a step that opens once a track is…", "headings": [ "For agents" ] }, { "path": "/examples/", "twin": "/examples.md", "title": "Examples", "description": "Every registered Texuli example, live from the shared registry. Filter by package and kind. Static site, no foreign network.", "headings": [ "Start from a job", "Dashboards", "Forms", "Data views", "Docs and content", "Decks", "Every family, counted", "Astro content site doc", "Astro content site hero", "Code blocks", "Code field", "Code blocks reject hostile input", "Data blocks", "Chart blocks", "Diagram blocks", "Embedded app and safe link preview", "Interactive blocks", "Map block", "Media blocks", "Media blocks reject hostile input", "Structure blocks", "Text blocks", "Text blocks reject hostile input", "Infinite canvas", "Canvas viewer", "Calendar heatmap", "Canvas charts at scale", "Cartesian charts", "Compact charts", "Flow charts", "Geo charts", "Histogram chart", "Chart interaction", "Matrix charts", "Pack chart", "Part-whole charts", "Charts in right-to-left layouts", "Statistical charts", "Windowed cartesian series", "Chat blueprint attachment", "Chat composer and typing indicator", "Static chat transcript", "Chat thread and message list", "safeHref blocks unsafe URLs", "Activity feed", "Kanban board", "Board column footers", "Board with collapsible lanes", "Calendar views", "Calendar month overflow and event content", "Cohort retention table", "Dashboard", "Dashboard metrics and filters", "File browser", "Filter builder", "Data grid column operations", "Data grid column operations, right to left", "Data grid", "Editable data grid", "Editable grid, 100,000 rows", "Data grid paging and bulk actions", "Virtualized data grid", "Notification inbox", "Offline map" ] }, { "path": "/examples/layout-blog-content/", "twin": "/examples/layout-blog-content.md", "title": "Blog layout", "description": "A readable article layout with author metadata, responsive contents navigation and safe in-page links. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/layout-docs-content/", "twin": "/examples/layout-docs-content.md", "title": "Documentation layout", "description": "Responsive documentation frame with section navigation, a generated table of contents and keyboard-friendly heading anchors.", "headings": [ "For agents" ] }, { "path": "/examples/layout-editorial-content/", "twin": "/examples/layout-editorial-content.md", "title": "Editorial layout", "description": "A long-form editorial frame with an eyebrow, introduction, reading metadata and responsive table of contents. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/layouts-auth-settings/", "twin": "/examples/layouts-auth-settings.md", "title": "Auth, onboarding and settings layouts", "description": "Authentication split, onboarding wizard and settings shell — responsive and RTL. Fictional Harbor Labs copy. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/layouts-dashboard/", "twin": "/examples/layouts-dashboard.md", "title": "Dashboard grid layout", "description": "Dashboard-grid layout with top chrome, container-query widget spans and an analytics auto-fit KPI grid. LTR and RTL. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/layouts-marketing/", "twin": "/examples/layouts-marketing.md", "title": "Marketing layouts", "description": "Landing hero, pricing tiers (integer cents) and marketing sections on the shared marketing frame. Responsive and RTL-ready.", "headings": [ "For agents" ] }, { "path": "/examples/layouts-mobile-drawer/", "twin": "/examples/layouts-mobile-drawer.md", "title": "Mobile drawer layout", "description": "The drawer layout at a desktop width on a detail screen: Back and the screen title in the header, and the whole navigation in a side drawer.", "headings": [ "For agents" ] }, { "path": "/examples/layouts-mobile-rtl/", "twin": "/examples/layouts-mobile-rtl.md", "title": "Mobile tab bar layout, right to left", "description": "The tab bar layout in a right-to-left document: the tabs, Back and its chevron mirror. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/layouts-mobile-tabs/", "twin": "/examples/layouts-mobile-tabs.md", "title": "Mobile tab bar layout", "description": "A phone-sized app with a bottom tab bar, a More sheet for the sixth item, a primary action and stacked navigation with Back on a detail screen.", "headings": [ "For agents" ] }, { "path": "/examples/layouts-shells/", "twin": "/examples/layouts-shells.md", "title": "Responsive application shell", "description": "A wide application column and an RTL shell with sidebar drawer, skip link, and notification corner using fictional Harbor Notes content.", "headings": [ "For agents" ] }, { "path": "/examples/lego/", "twin": "/examples/lego.md", "title": "Player: lego composition", "description": "One JSON blueprint composes layouts, a board, charts, media, blocks, a block palette, a page outline and a workflow editor.", "headings": [ "For agents" ] }, { "path": "/examples/media-animation-timeline/", "twin": "/examples/media-animation-timeline.md", "title": "Animation timeline editor", "description": "Edits a fictional lower-third composition with a selected keyframe, live preview, and an RTL timeline view. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/media-animation/", "twin": "/examples/media-animation.md", "title": "Composition keyframe animation", "description": "Keyframes and easing on composition layers with a timeline scrubber and reduced-motion stills. Fictional example data only.", "headings": [ "For agents" ] }, { "path": "/examples/media-audio/", "twin": "/examples/media-audio.md", "title": "Audio player and waveform", "description": "Play/pause and keyboard seek on a waveform built from peak samples. Untrusted sources go through the media URL policy; unsafe URLs are refused.", "headings": [ "For agents" ] }, { "path": "/examples/media-captions/", "twin": "/examples/media-captions.md", "title": "Captions and chapters", "description": "WebVTT captions with a chapter menu, transcript seek, active caption line, and a blocked unsafe track. Fictional harbor tour copy only.", "headings": [ "For agents" ] }, { "path": "/examples/media-composition-canvas/", "twin": "/examples/media-composition-canvas.md", "title": "Composition rendered on a canvas", "description": "Draws a fictional layered poster with gradients, a blend mode, a luminance mask and 160 shapes on a canvas, with keyboard zoom and pan, and refuses a hostile…", "headings": [ "For agents" ] }, { "path": "/examples/media-composition-model/", "twin": "/examples/media-composition-model.md", "title": "Bounded media composition model", "description": "Validates a fictional layered scene with a gradient, masked image, transforms and text without rendering untrusted markup.", "headings": [ "For agents" ] }, { "path": "/examples/media-composition-svg/", "twin": "/examples/media-composition-svg.md", "title": "Composition SVG renderer", "description": "Renders a validated composition document to an accessible SVG with real text nodes. Fictional example.com / example data only.", "headings": [ "For agents" ] }, { "path": "/examples/media-export/", "twin": "/examples/media-export.md", "title": "Media export", "description": "Export a composition as PNG or SVG and its animation (with OKLCH color keyframes) as WebM in the browser; an unsafe image source is refused. Fictional data.", "headings": [ "For agents" ] }, { "path": "/examples/media-gallery-blocked/", "twin": "/examples/media-gallery-blocked.md", "title": "Gallery refusing unsafe sources", "description": "HTTP, script and data URLs fail the media URL policy: their tiles show a labeled fallback, are never requested and are skipped by the lightbox.", "headings": [ "For agents" ] }, { "path": "/examples/media-gallery-masonry/", "twin": "/examples/media-gallery-masonry.md", "title": "Masonry gallery", "description": "The same photos in a masonry layout: each keeps its shape, packed into the shortest column, with captions over the image. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/media-gallery/", "twin": "/examples/media-gallery.md", "title": "Gallery", "description": "A grid of fictional landscape photos with captions. A tile opens an accessible lightbox with keyboard, swipe and zoom. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/media-generator-slot/", "twin": "/examples/media-generator-slot.md", "title": "Media generator slot", "description": "Host-provided generate UI with loading, cancel and error states. Texuli ships no model; the demo mock returns a local SVG. Unsafe results are blocked.", "headings": [ "For agents" ] }, { "path": "/examples/media-image-dark/", "twin": "/examples/media-image-dark.md", "title": "Image, light and dark pair", "description": "One image with a light and a dark source: it follows the page theme, a forced dark or light scope wins over the OS preference, or a picture element follows…", "headings": [ "For agents" ] }, { "path": "/examples/media-image-editor-blocked/", "twin": "/examples/media-image-editor-blocked.md", "title": "Image editor refusing an unsafe source", "description": "An untrusted HTTP source fails the media URL policy: the editor shows a note and never requests the image. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/media-image-editor-edited/", "twin": "/examples/media-image-editor-edited.md", "title": "Image editor with a saved edit", "description": "Opens a validated saved edit: a crop, three adjustments, an ellipse, an arrow and a text label over the photo. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/media-image-editor/", "twin": "/examples/media-image-editor.md", "title": "Image editor", "description": "Crop, rotate, flip, resize, adjust and annotate a fictional harbor photo without changing it, then export the result. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/media-image/", "twin": "/examples/media-image.md", "title": "Image", "description": "Responsive srcset, focal-point crops, blur-up and color placeholders, link and button images, and fallbacks for blocked or missing sources.", "headings": [ "For agents" ] }, { "path": "/examples/media-video-edit/", "twin": "/examples/media-video-edit.md", "title": "Video trim and captions", "description": "Edits a short fictional clip with a trim range and plain-text caption cues; no media is fetched. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/media-video/", "twin": "/examples/media-video.md", "title": "Video player", "description": "Accessible custom playback controls with captions toggle (C), track picker, on-video cue text, chapter menu, optional transcript, picture-in-picture, and…", "headings": [ "For agents" ] }, { "path": "/examples/player-blueprint-preview/", "twin": "/examples/player-blueprint-preview.md", "title": "Player: blueprint preview", "description": "The Player paints a fictional weekly report blueprint (document layout, KPIs, a chart and a callout) at the untrusted tier, with its trust badge.", "headings": [ "For agents" ] }, { "path": "/examples/player-dashboard/", "twin": "/examples/player-dashboard.md", "title": "Player: painted dashboard", "description": "The Player paints a fictional fleet dashboard blueprint: a KPI row, a two-column grid of line, donut, bar and gauge charts, and an incidents table.", "headings": [ "For agents" ] }, { "path": "/examples/player-deck/", "twin": "/examples/player-deck.md", "title": "Player: deck fixture view", "description": "The Player paints a fictional four-slide planning deck blueprint (agenda, progress stats, a burn-down chart and a decision callout).", "headings": [ "For agents" ] }, { "path": "/examples/preview/astro-site-doc/", "twin": "/examples/preview/astro-site-doc.md", "title": "Astro content site doc", "description": "A visual preview of a documentation page over the Astro content layout: compact hero, reading-width prose and a surface strip in light and dark token themes.", "headings": [ "For agents" ] }, { "path": "/examples/preview/astro-site-hero/", "twin": "/examples/preview/astro-site-hero.md", "title": "Astro content site hero", "description": "A visual preview of an Astro static content layout with a responsive hero, feature section and light/dark token themes.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-code-field/", "twin": "/examples/preview/blocks-code-field.md", "title": "Code field", "description": "An editable, syntax-highlighted code field: a real textarea over the owned tokenizer, with Tab indentation, Escape then Tab to leave, line numbers, wrapping, read-only and disabled states. Fictional content.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-code-hostile/", "twin": "/examples/preview/blocks-code-hostile.md", "title": "Code blocks reject hostile input", "description": "Markup in code stays text, and bidi overrides, injected language tokens or foreign block types show a notice.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-code/", "twin": "/examples/preview/blocks-code.md", "title": "Code blocks", "description": "Code blocks with an owned tokenizer: TypeScript, Python, SQL, JSON, shell and plain text, line numbers, stepped highlights and a caption from block data, copy and an RTL page. Fictional content.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-data-charts/", "twin": "/examples/preview/blocks-data-charts.md", "title": "Chart blocks", "description": "Chart content blocks across every chart family: pie, gauge, sankey, histogram, pack, calendar, combo, annotated line and scatter with series labels. Fictional metrics only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-data/", "twin": "/examples/preview/blocks-data.md", "title": "Data blocks", "description": "Table, stat, KPI and chart content blocks with validation and a hostile rejection sample. Fictional metrics only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-diagram/", "twin": "/examples/preview/blocks-diagram.md", "title": "Diagram blocks", "description": "Flow, org chart, board and terminal diagrams from validated data, plus a hostile rejection. Fictional Harbor team copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-embed/", "twin": "/examples/preview/blocks-embed.md", "title": "Embedded app and safe link preview", "description": "A host starts the validated app only after activation; link previews render bounded text and a safe HTTPS link.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-interactive/", "twin": "/examples/preview/blocks-interactive.md", "title": "Interactive blocks", "description": "Poll, quiz, calculator and checklist blocks from validated data. Fictional Harbor Notes copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-map/", "twin": "/examples/preview/blocks-map.md", "title": "Map block", "description": "Places and a delivery route on the fictional Port Meridian basemap, keyboard pan and zoom, and a hostile block the guard rejects. No tiles or network.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-media-hostile/", "twin": "/examples/preview/blocks-media-hostile.md", "title": "Media blocks reject hostile input", "description": "Remote image URLs, executable video sources and SVG paths are refused; rejected blocks show an inert notice.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-media/", "twin": "/examples/preview/blocks-media.md", "title": "Media blocks", "description": "Image, figure, video and gallery blocks rendered from validated data. Fictional Harbor Notes copy; embedded raster swatches only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-structure/", "twin": "/examples/preview/blocks-structure.md", "title": "Structure blocks", "description": "Columns, grid, tabs, accordion, cards, divider and CTA from validated data, plus a hostile rejection. Fictional Harbor copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-text-hostile/", "twin": "/examples/preview/blocks-text-hostile.md", "title": "Text blocks reject hostile input", "description": "Raw HTML stays text, executable links lose their href, and bidi overrides or foreign block types show a notice.", "headings": [ "For agents" ] }, { "path": "/examples/preview/blocks-text/", "twin": "/examples/preview/blocks-text.md", "title": "Text blocks", "description": "Heading, rich text, list, quote and callout blocks rendered from validated data. Fictional example.com content.", "headings": [ "For agents" ] }, { "path": "/examples/preview/canvas-editor/", "twin": "/examples/preview/canvas-editor.md", "title": "Infinite canvas", "description": "A launch retro on the infinite canvas: sticky notes in a frame and a decision flow. Tab through shapes, move with arrows, resize with Shift, connect with K, zoom and undo.", "headings": [ "For agents" ] }, { "path": "/examples/preview/canvas-viewer/", "twin": "/examples/preview/canvas-viewer.md", "title": "Canvas viewer", "description": "A read-only canvas fitted into an SVG image, with every shape and connector listed in reading order for screen readers. No editing code.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-calendar/", "twin": "/examples/preview/charts-calendar.md", "title": "Calendar heatmap", "description": "A UTC calendar grid shows fictional daily activity with sequential tokens and explicit missing days.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-canvas/", "twin": "/examples/preview/charts-canvas.md", "title": "Canvas charts at scale", "description": "A 100,000-point series rendered on Canvas in light and dark themes, with an accessible description and data table.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-cartesian/", "twin": "/examples/preview/charts-cartesian.md", "title": "Cartesian charts", "description": "Line, area, grouped bar, stacked bar and combo charts with descriptions and table fallbacks in light and dark modes.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-compact/", "twin": "/examples/preview/charts-compact.md", "title": "Compact charts", "description": "A sparkline, bullet chart, gauge and progress ring use the active theme tokens and include data table fallbacks.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-flow/", "twin": "/examples/preview/charts-flow.md", "title": "Flow charts", "description": "Sankey, funnel and network graphs use token palettes, accessible descriptions and expandable data tables in light and dark modes.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-geo/", "twin": "/examples/preview/charts-geo.md", "title": "Geo charts", "description": "Offline choropleth and point maps using bundled schematic regions, token colors and accessible data tables.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-histogram/", "twin": "/examples/preview/charts-histogram.md", "title": "Histogram chart", "description": "A fictional response-time distribution uses math-backed bins, theme tokens and a data table fallback.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-interaction/", "twin": "/examples/preview/charts-interaction.md", "title": "Chart interaction", "description": "Keyboard and pointer exploration, tooltips, legend series toggles, brush and zoom hooks, and a data table. Fictional Harbor Notes metrics.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-matrix/", "twin": "/examples/preview/charts-matrix.md", "title": "Matrix charts", "description": "Heatmap, scatter and bubble charts with accessible descriptions and data table fallbacks in light and dark modes. Fictional metrics only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-pack/", "twin": "/examples/preview/charts-pack.md", "title": "Pack chart", "description": "Fictional team capacity is shown as nested circles backed by the public pack layout math.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-part-whole/", "twin": "/examples/preview/charts-part-whole.md", "title": "Part-whole charts", "description": "Pie, donut, treemap and sunburst views with accessible descriptions and expandable data tables in light and dark token palettes.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-rtl/", "twin": "/examples/preview/charts-rtl.md", "title": "Charts in right-to-left layouts", "description": "Line, heatmap, scatter, sankey and gauge charts inside dir=\"rtl\" with fictional Arabic labels: captions, legends and tables mirror, while each plot keeps a left-to-right coordinate system.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-statistical/", "twin": "/examples/preview/charts-statistical.md", "title": "Statistical charts", "description": "Box plot, violin and ECDF charts summarize fictional response-time samples with theme tokens and data table fallbacks.", "headings": [ "For agents" ] }, { "path": "/examples/preview/charts-windowed/", "twin": "/examples/preview/charts-windowed.md", "title": "Windowed cartesian series", "description": "A 200-request fictional latency series shown through a movable visibleDomain window: axes, marks and keyboard exploration follow the window.", "headings": [ "For agents" ] }, { "path": "/examples/preview/chat-attachment/", "twin": "/examples/preview/chat-attachment.md", "title": "Chat blueprint attachment", "description": "A message card that validates an attached blueprint with the catalog validator and paints it with the player behind a disclosure, and a refused card that lists why it was not painted.", "headings": [ "For agents" ] }, { "path": "/examples/preview/chat-composer/", "twin": "/examples/preview/chat-composer.md", "title": "Chat composer and typing indicator", "description": "An autosizing, IME-safe message composer with attachment actions, pending and error feedback, and an announced typing indicator.", "headings": [ "For agents" ] }, { "path": "/examples/preview/chat-display/", "twin": "/examples/preview/chat-display.md", "title": "Static chat transcript", "description": "User, agent, and system roles with parsed and plain @ text; hostile-looking text remains text in a static transcript.", "headings": [ "For agents" ] }, { "path": "/examples/preview/chat-thread/", "twin": "/examples/preview/chat-thread.md", "title": "Chat thread and message list", "description": "Grouped messages, safe inline formatting, timestamps, own-message alignment, and a long virtualized history with fictional people.", "headings": [ "For agents" ] }, { "path": "/examples/preview/core-safe-href/", "twin": "/examples/preview/core-safe-href.md", "title": "safeHref blocks unsafe URLs", "description": "Shows how safeHref keeps https and mailto links and drops javascript: schemes. Fictional example.com only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-activity/", "twin": "/examples/preview/data-activity.md", "title": "Activity feed", "description": "Day-grouped activity with avatars, mention tokens, reactions, kind filters and load-more pagination on a fictional CRM timeline.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-board-footer/", "twin": "/examples/preview/data-board-footer.md", "title": "Board column footers", "description": "A board nested under a page section: column headings start at level 4, and each column ends with a footer snippet that adds a card and shows the count.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-board-lanes/", "twin": "/examples/preview/data-board-lanes.md", "title": "Board with collapsible lanes", "description": "A board with swimlanes: one lane starts collapsed behind its disclosure while its cards still count toward the column limits, and every column-by-lane cell ends with an add button that knows its column and lane.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-board/", "twin": "/examples/preview/data-board.md", "title": "Kanban board", "description": "Shows pointer and keyboard card moves, swimlane-ready board structure, RTL layout and work-in-progress limits.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-calendar-month/", "twin": "/examples/preview/data-calendar-month.md", "title": "Calendar month overflow and event content", "description": "A busy month with custom event chip content from the event snippet, two events per day and a \"more events\" button that opens the day. Fictional schedule.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-calendar/", "twin": "/examples/preview/data-calendar.md", "title": "Calendar views", "description": "Month, week, day and agenda views with overlapping events, explicit time zones, locale-aware dates and keyboard navigation.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-cohort/", "twin": "/examples/preview/data-cohort.md", "title": "Cohort retention table", "description": "Monthly retention by signup cohort as a real table: a caption, period column headers, cohort row headers, sizes, size-weighted averages, incomplete and missing cells read aloud, and contrast-safe heat steps. Fictional cohorts.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-dashboard-metrics/", "twin": "/examples/preview/data-dashboard-metrics.md", "title": "Dashboard metrics and filters", "description": "A reporting period picker, removable applied-filter chips with the full filter builder, and metric cards with accessible sparklines, comparison, loading and empty states.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-dashboard/", "twin": "/examples/preview/data-dashboard.md", "title": "Dashboard", "description": "A widget grid people rearrange: move and resize handles for pointer drags, the arrow keys with announced positions and a click-to-arrange toolbar, breakpoints that reflow to one column, and a layout saved as JSON.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-files/", "twin": "/examples/preview/data-files.md", "title": "File browser", "description": "Grid and list file browser with breadcrumbs, multi-select, side preview and keyboard navigation on a fictional workspace library.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-filter-builder/", "twin": "/examples/preview/data-filter-builder.md", "title": "Filter builder", "description": "Nested and/or groups with operators by field type, native keyboard controls and focus that follows each add and remove; the model filters a data grid and is shown as JSON. Fictional deals.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-grid-columns-rtl/", "twin": "/examples/preview/data-grid-columns-rtl.md", "title": "Data grid column operations, right to left", "description": "The same grid in a right-to-left layout: the start pin sits on the right and the resize edges, arrows and drags follow the reading direction.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-grid-columns/", "twin": "/examples/preview/data-grid-columns.md", "title": "Data grid column operations", "description": "Resize, reorder, pin, hide and group the columns of a grid of fictional deals; every pointer action has a keyboard path in the column menu.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-grid-core/", "twin": "/examples/preview/data-grid-core.md", "title": "Data grid", "description": "Sortable columns (Shift for more keys), search, a filter, row selection and APG grid keyboard navigation on the texuli Table, with an RTL grid. Fictional deals.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-grid-editing-virtual/", "twin": "/examples/preview/data-grid-editing-virtual.md", "title": "Editable grid, 100,000 rows", "description": "The editable data grid windows its rows above a threshold: 100,000 fictional records stay editable, with inline edits, the active cell and keyboard navigation kept across scrolling.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-grid-editing/", "twin": "/examples/preview/data-grid-editing.md", "title": "Editable data grid", "description": "Inline cell editors with validation, undo/redo and TSV clipboard on the data grid. Fictional Harbor deals.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-grid-paging/", "twin": "/examples/preview/data-grid-paging.md", "title": "Data grid paging and bulk actions", "description": "Client paging with a bound page and page size, row classes for overdue invoices, a filter and an export action in the toolbar, and bulk actions that follow the selection across pages. Fictional invoices.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-grid-virtual/", "twin": "/examples/preview/data-grid-virtual.md", "title": "Virtualized data grid", "description": "A two-axis virtualized grid keeps 100,000 fictional records and wide tables bounded to the visible rows and columns, with keyboard navigation and RTL support.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-inbox/", "twin": "/examples/preview/data-inbox.md", "title": "Notification inbox", "description": "Unread state with a count, mark read and unread, mark all, an unread view that keeps items until you leave it, per-item actions and a polite announcement for new arrivals. Fictional workspace notifications.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-map/", "twin": "/examples/preview/data-map.md", "title": "Offline map", "description": "Fictional vector basemap with clustered locations, a synchronized list, keyboard controls and no network tiles.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-timeline/", "twin": "/examples/preview/data-timeline.md", "title": "Timeline and Gantt", "description": "Time-scaled Gantt with phase bands, collapsible groups, row selection, a window-end marker, dependencies, zoom, critical path, RTL and keyboard rescheduling on a fictional launch plan.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-tree-view/", "twin": "/examples/preview/data-tree-view.md", "title": "Tree data view", "description": "Outline tree with lazy folders, multi-select checkboxes, drag reorder and keyboard indent on fictional workspace pages.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-virtual-list-view/", "twin": "/examples/preview/data-virtual-list-view.md", "title": "Virtual list view", "description": "A 10,000-row team feed windowed by the VirtualListView catalog component: rows through a snippet, keyboard selection and position announcements, with no inline style in the page.", "headings": [ "For agents" ] }, { "path": "/examples/preview/data-virtual-list/", "twin": "/examples/preview/data-virtual-list.md", "title": "Variable-height virtual list", "description": "Shows variable row measurements, keyboard navigation, RTL layout and threshold-based loading with fictional records.", "headings": [ "For agents" ] }, { "path": "/examples/preview/editor-basic/", "twin": "/examples/preview/editor-basic.md", "title": "Rich text editor", "description": "A labelled multiline textbox over the closed editor model: headings, marks, lists, todos, quotes and code rendered as real elements, with Markdown in and out.", "headings": [ "For agents" ] }, { "path": "/examples/preview/editor-block-menu/", "twin": "/examples/preview/editor-block-menu.md", "title": "Editor block-type menu", "description": "A menu button in the toolbar that sets paragraph, headings, lists, quote or code at the caret in one undoable step.", "headings": [ "For agents" ] }, { "path": "/examples/preview/editor-dialect-export/", "twin": "/examples/preview/editor-dialect-export.md", "title": "Export for chat", "description": "The document written for Slack, Discord, WhatsApp, Telegram, Teams, Google Chat, Mattermost or plain text, with what each format loses listed and broadcast mentions kept as text.", "headings": [ "For agents" ] }, { "path": "/examples/preview/editor-emoji/", "twin": "/examples/preview/editor-emoji.md", "title": "Editor emoji", "description": "An emoji button in the editor toolbar that opens the emoji picker in a popover, and a :shortcode: input rule, each insertion one undo step.", "headings": [ "For agents" ] }, { "path": "/examples/preview/editor-long-document/", "twin": "/examples/preview/editor-long-document.md", "title": "Long document editing", "description": "Four hundred blocks rendered in full and keyed by id, with off-screen blocks skipping layout and paint through content-visibility.", "headings": [ "For agents" ] }, { "path": "/examples/preview/editor-paste/", "twin": "/examples/preview/editor-paste.md", "title": "Markdown and HTML paste", "description": "Clipboard HTML read without a DOM (scripts, handlers and unsafe links dropped) and plain text kept plain unless pasted as Markdown.", "headings": [ "For agents" ] }, { "path": "/examples/preview/editor-toolbar/", "twin": "/examples/preview/editor-toolbar.md", "title": "Editor with toolbar and links", "description": "The roving formatting toolbar with pressed states and shortcuts, the link dialog that refuses unsafe addresses visibly, and the Markdown the document saves as.", "headings": [ "For agents" ] }, { "path": "/examples/preview/forms-builder/", "twin": "/examples/preview/forms-builder.md", "title": "Form builder: edit and preview a schema", "description": "Add fields from a palette, reorder them with the keyboard or pointer, inspect field settings, and see the validated form preview and schema JSON update together.", "headings": [ "For agents" ] }, { "path": "/examples/preview/forms-fields/", "twin": "/examples/preview/forms-fields.md", "title": "Schema form: every field type", "description": "One page with every field type of the form schema (text, textarea, number, email, url, date, time, select, multiselect, checkbox, radio, switch, slider, file and tags), each a texuli control with its label, description and errors.", "headings": [ "For agents" ] }, { "path": "/examples/preview/forms-registration/", "twin": "/examples/preview/forms-registration.md", "title": "Schema form: multi-step registration", "description": "A three-step form painted from a closed schema: sections, a field that appears and becomes required from an earlier answer, a step that opens once a track is chosen, a cross-field date rule and an error summary. Fictional event.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layout-blog-content/", "twin": "/examples/preview/layout-blog-content.md", "title": "Blog layout", "description": "A readable article layout with author metadata, responsive contents navigation and safe in-page links.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layout-docs-content/", "twin": "/examples/preview/layout-docs-content.md", "title": "Documentation layout", "description": "Responsive documentation frame with section navigation, a generated table of contents and keyboard-friendly heading anchors.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layout-editorial-content/", "twin": "/examples/preview/layout-editorial-content.md", "title": "Editorial layout", "description": "A long-form editorial frame with an eyebrow, introduction, reading metadata and responsive table of contents.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layouts-auth-settings/", "twin": "/examples/preview/layouts-auth-settings.md", "title": "Auth, onboarding and settings layouts", "description": "Authentication split, onboarding wizard and settings shell — responsive and RTL. Fictional Harbor Labs copy.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layouts-dashboard/", "twin": "/examples/preview/layouts-dashboard.md", "title": "Dashboard grid layout", "description": "Dashboard-grid layout with top chrome, container-query widget spans and an analytics auto-fit KPI grid. LTR and RTL.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layouts-marketing/", "twin": "/examples/preview/layouts-marketing.md", "title": "Marketing layouts", "description": "Landing hero, pricing tiers (integer cents) and marketing sections on the shared marketing frame. Responsive and RTL-ready.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layouts-mobile-drawer/", "twin": "/examples/preview/layouts-mobile-drawer.md", "title": "Mobile drawer layout", "description": "The drawer layout at a desktop width on a detail screen: Back and the screen title in the header, and the whole navigation in a side drawer.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layouts-mobile-rtl/", "twin": "/examples/preview/layouts-mobile-rtl.md", "title": "Mobile tab bar layout, right to left", "description": "The tab bar layout in a right-to-left document: the tabs, Back and its chevron mirror.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layouts-mobile-tabs/", "twin": "/examples/preview/layouts-mobile-tabs.md", "title": "Mobile tab bar layout", "description": "A phone-sized app with a bottom tab bar, a More sheet for the sixth item, a primary action and stacked navigation with Back on a detail screen. Fictional sales app.", "headings": [ "For agents" ] }, { "path": "/examples/preview/layouts-shells/", "twin": "/examples/preview/layouts-shells.md", "title": "Responsive application shell", "description": "A wide application column and an RTL shell with sidebar drawer, skip link, and notification corner using fictional Harbor Notes content.", "headings": [ "For agents" ] }, { "path": "/examples/preview/lego/", "twin": "/examples/preview/lego.md", "title": "Player: lego composition", "description": "One JSON blueprint composes layouts, a board, charts, media, blocks, a block palette, a page outline and a workflow editor. Cards move between columns and palette blocks copy into the outline, all through reorder, bindings and closed actions.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-animation-timeline/", "twin": "/examples/preview/media-animation-timeline.md", "title": "Animation timeline editor", "description": "Edits a fictional lower-third composition with a selected keyframe, live preview, and an RTL timeline view.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-animation/", "twin": "/examples/preview/media-animation.md", "title": "Composition keyframe animation", "description": "Keyframes and easing on composition layers with a timeline scrubber and reduced-motion stills. Fictional example data only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-audio/", "twin": "/examples/preview/media-audio.md", "title": "Audio player and waveform", "description": "Play/pause and keyboard seek on a waveform built from peak samples. Untrusted sources go through the media URL policy; unsafe URLs are refused.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-captions/", "twin": "/examples/preview/media-captions.md", "title": "Captions and chapters", "description": "WebVTT captions with a chapter menu, transcript seek, active caption line, and a blocked unsafe track. Fictional harbor tour copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-composition-canvas/", "twin": "/examples/preview/media-composition-canvas.md", "title": "Composition rendered on a canvas", "description": "Draws a fictional layered poster with gradients, a blend mode, a luminance mask and 160 shapes on a canvas, with keyboard zoom and pan, and refuses a hostile scene.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-composition-model/", "twin": "/examples/preview/media-composition-model.md", "title": "Bounded media composition model", "description": "Validates a fictional layered scene with a gradient, masked image, transforms and text without rendering untrusted markup.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-composition-svg/", "twin": "/examples/preview/media-composition-svg.md", "title": "Composition SVG renderer", "description": "Renders a validated composition document to an accessible SVG with real text nodes. Fictional example.com / example data only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-export/", "twin": "/examples/preview/media-export.md", "title": "Media export", "description": "Export a composition as PNG or SVG and its animation (with OKLCH color keyframes) as WebM in the browser; an unsafe image source is refused. Fictional data.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-gallery-blocked/", "twin": "/examples/preview/media-gallery-blocked.md", "title": "Gallery refusing unsafe sources", "description": "HTTP, script and data URLs fail the media URL policy: their tiles show a labeled fallback, are never requested and are skipped by the lightbox.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-gallery-masonry/", "twin": "/examples/preview/media-gallery-masonry.md", "title": "Masonry gallery", "description": "The same photos in a masonry layout: each keeps its shape, packed into the shortest column, with captions over the image.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-gallery/", "twin": "/examples/preview/media-gallery.md", "title": "Gallery", "description": "A grid of fictional landscape photos with captions. A tile opens an accessible lightbox with keyboard, swipe and zoom.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-generator-slot/", "twin": "/examples/preview/media-generator-slot.md", "title": "Media generator slot", "description": "Host-provided generate UI with loading, cancel and error states. Texuli ships no model; the demo mock returns a local SVG. Unsafe results are blocked.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-image-dark/", "twin": "/examples/preview/media-image-dark.md", "title": "Image, light and dark pair", "description": "One image with a light and a dark source: it follows the page theme, a forced dark or light scope wins over the OS preference, or a picture element follows the OS alone.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-image-editor-blocked/", "twin": "/examples/preview/media-image-editor-blocked.md", "title": "Image editor refusing an unsafe source", "description": "An untrusted HTTP source fails the media URL policy: the editor shows a note and never requests the image.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-image-editor-edited/", "twin": "/examples/preview/media-image-editor-edited.md", "title": "Image editor with a saved edit", "description": "Opens a validated saved edit: a crop, three adjustments, an ellipse, an arrow and a text label over the photo.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-image-editor/", "twin": "/examples/preview/media-image-editor.md", "title": "Image editor", "description": "Crop, rotate, flip, resize, adjust and annotate a fictional harbor photo without changing it, then export the result.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-image/", "twin": "/examples/preview/media-image.md", "title": "Image", "description": "Responsive srcset, focal-point crops, blur-up and color placeholders, link and button images, and fallbacks for blocked or missing sources.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-video-edit/", "twin": "/examples/preview/media-video-edit.md", "title": "Video trim and captions", "description": "Edits a short fictional clip with a trim range and plain-text caption cues; no media is fetched.", "headings": [ "For agents" ] }, { "path": "/examples/preview/media-video/", "twin": "/examples/preview/media-video.md", "title": "Video player", "description": "Accessible custom playback controls with captions toggle (C), track picker, on-video cue text, chapter menu, optional transcript, picture-in-picture, and blocked-source state.", "headings": [ "For agents" ] }, { "path": "/examples/preview/player-blueprint-preview/", "twin": "/examples/preview/player-blueprint-preview.md", "title": "Player: blueprint preview", "description": "The Player paints a fictional weekly report blueprint (document layout, KPIs, a chart and a callout) at the untrusted tier, with its trust badge.", "headings": [ "For agents" ] }, { "path": "/examples/preview/player-dashboard/", "twin": "/examples/preview/player-dashboard.md", "title": "Player: painted dashboard", "description": "The Player paints a fictional fleet dashboard blueprint: a KPI row, a two-column grid of line, donut, bar and gauge charts, and an incidents table.", "headings": [ "For agents" ] }, { "path": "/examples/preview/player-deck/", "twin": "/examples/preview/player-deck.md", "title": "Player: deck fixture view", "description": "The Player paints a fictional four-slide planning deck blueprint (agenda, progress stats, a burn-down chart and a decision callout).", "headings": [ "For agents" ] }, { "path": "/examples/preview/primitives-sortable/", "twin": "/examples/preview/primitives-sortable.md", "title": "Sortable", "description": "Owned drag and drop on @texuli/drag: a board with columns, a nested outline, right-to-left chips, a palette that clones, a swap grid, locked items and multi-select. Keyboard pick-up, move, drop and cancel, with localized announcements. Fictional content only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/sheets-budget/", "twin": "/examples/preview/sheets-budget.md", "title": "Spreadsheet", "description": "A two-tab budget with formulas (SUM, SUMIF, IF and a cross-sheet reference) that recalculate as cells change, a formula bar and keyboard editing on the data grid.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-backgrounds/", "twin": "/examples/preview/slides-backgrounds.md", "title": "Deck backgrounds gallery", "description": "Every background preset (solid, gradient, pattern) and one spec of each kind (hex solid, angled gradient, light and dark image) under a free slide, each with its contrast scrim.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-fragments/", "twin": "/examples/preview/slides-fragments.md", "title": "Reveal steps (fragments)", "description": "A DeckStage slide at reveal step 2 of 4: two of three list items shown, a line struck through, and a callout still hidden in its reserved space. Fictional launch plan.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-big-stat/", "twin": "/examples/preview/slides-layout-big-stat.md", "title": "Layout: big-stat", "description": "One large number with its label, context and source. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-chart/", "twin": "/examples/preview/slides-layout-chart.md", "title": "Layout: chart", "description": "A bar chart block with its data table beside it. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-closing-cta/", "twin": "/examples/preview/slides-layout-closing-cta.md", "title": "Layout: closing-cta", "description": "The last slide with its call-to-action link and a footnote. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-code-with-callout/", "twin": "/examples/preview/slides-layout-code-with-callout.md", "title": "Layout: code-with-callout", "description": "A tokenized code block at its first highlight step beside the explanation. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-comparison-table/", "twin": "/examples/preview/slides-layout-comparison-table.md", "title": "Layout: comparison-table", "description": "Three plans across four attributes, with yes, no and empty cells. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-image-centered/", "twin": "/examples/preview/slides-layout-image-centered.md", "title": "Layout: image-centered", "description": "One image is the focus, fitted inside its frame, with a caption. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-image-full-bleed/", "twin": "/examples/preview/slides-layout-image-full-bleed.md", "title": "Layout: image-full-bleed", "description": "The image edge to edge with a dark overlay and a caption band. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-image-left/", "twin": "/examples/preview/slides-layout-image-left.md", "title": "Layout: image-left", "description": "A media pane on the inline start with the copy beside it. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-image-right/", "twin": "/examples/preview/slides-layout-image-right.md", "title": "Layout: image-right", "description": "Copy first, then the media pane on the inline end. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-process-steps/", "twin": "/examples/preview/slides-layout-process-steps.md", "title": "Layout: process-steps", "description": "Four numbered, connected steps. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-quote/", "twin": "/examples/preview/slides-layout-quote.md", "title": "Layout: quote", "description": "One pull quote with its attribution and a decorative quote mark. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-section-divider/", "twin": "/examples/preview/slides-layout-section-divider.md", "title": "Layout: section-divider", "description": "A chapter break: an eyebrow and a large title beside an accent rule. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-team-avatars/", "twin": "/examples/preview/slides-layout-team-avatars.md", "title": "Layout: team-avatars", "description": "Four people with initials (no avatar adapter in the example). DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-three-column-cards/", "twin": "/examples/preview/slides-layout-three-column-cards.md", "title": "Layout: three-column-cards", "description": "Three parallel cards with numbered tiles, headings and bodies. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-timeline/", "twin": "/examples/preview/slides-layout-timeline.md", "title": "Layout: timeline", "description": "Five dated events on two axis rows. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-title-hero/", "twin": "/examples/preview/slides-layout-title-hero.md", "title": "Layout: title-hero", "description": "The cover: title, subtitle and a meta line over decorative accent shapes. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-two-column-split/", "twin": "/examples/preview/slides-layout-two-column-split.md", "title": "Layout: two-column-split", "description": "Two parallel text panels (before and after) under a title. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-video-centered/", "twin": "/examples/preview/slides-layout-video-centered.md", "title": "Layout: video-centered", "description": "One video player is the focus (the example clip path has no file, so the player shows its fallback). DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-video-left/", "twin": "/examples/preview/slides-layout-video-left.md", "title": "Layout: video-left", "description": "A video player on the inline start with the copy beside it. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-layout-video-right/", "twin": "/examples/preview/slides-layout-video-right.md", "title": "Layout: video-right", "description": "Copy first, then the video player on the inline end. DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-media-deck/", "twin": "/examples/preview/slides-media-deck.md", "title": "Media deck (print view)", "description": "Every slide of a media deck in DeckPrint: a media-left figure (cover fit), a media-right image and a body gallery. Embedded swatches only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-presenter-screen/", "twin": "/examples/preview/slides-presenter-screen.md", "title": "Presenter screen", "description": "DeckStage in presenter mode at reveal step 1 of 4: the slide, speaker notes with the step progress, and the next step. Timer-free, so the view is deterministic.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-slot-masters/", "twin": "/examples/preview/slides-slot-masters.md", "title": "Slot masters (print view)", "description": "Every slide of a slot-master deck in DeckPrint: dividers split blocks into a title footer, two columns with a footer, and a quote with its attribution. Fictional Example Co. data.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-template-pitch/", "twin": "/examples/preview/slides-template-pitch.md", "title": "Pitch deck template", "description": "The pitch starter deck in DeckStage on its media-right solution slide. Fictional Harborline copy.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-template-report/", "twin": "/examples/preview/slides-template-report.md", "title": "Report deck template", "description": "The report starter deck (createDeckFromTemplate) in DeckStage on its media-left trend slide. Fictional Example Co. data.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-template-review/", "twin": "/examples/preview/slides-template-review.md", "title": "Review deck template", "description": "The review starter deck in DeckStage on its media-left demo slide with a code block. Fictional sprint data.", "headings": [ "For agents" ] }, { "path": "/examples/preview/slides-tour/", "twin": "/examples/preview/slides-tour.md", "title": "Slides tour", "description": "One DeckStage deck that tours the stage: slot masters, reveal steps, code highlights, speaker notes for the presenter view, the overview and fullscreen. Fictional Example Co. content.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-alert/", "twin": "/examples/preview/texuli-alert.md", "title": "Alert, Callout and Banner", "description": "Inline alerts, documentation callouts and page banners with every tone, actions, dismiss, RTL and dark. Fictional copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-app-layouts/", "twin": "/examples/preview/texuli-app-layouts.md", "title": "App layouts", "description": "Responsive sidebar, icon rail, master-detail, top navigation, split view and three-pane layouts with fictional workspace content.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-badge/", "twin": "/examples/preview/texuli-badge.md", "title": "Badge, Tag and Chip", "description": "Status badges in every tone, removable tags (including RTL), and a filter chip with pressed state. Fictional labels only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-button/", "twin": "/examples/preview/texuli-button.md", "title": "Button, IconButton and ButtonGroup", "description": "Styled buttons on the token contract: every variant and size, loading, safe href, groups, RTL and dark. Fictional example.com copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-card/", "twin": "/examples/preview/texuli-card.md", "title": "Card surfaces", "description": "Elevated and flat cards, media, footer actions, auto-fit grid and a clickable card with URL policy. Fictional example.com only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-choice/", "twin": "/examples/preview/texuli-choice.md", "title": "Checkbox, Radio and Switch", "description": "Styled choice controls with labels, descriptions, indeterminate checkbox, card radios, sizes and RTL. Fictional Harbor Notes preferences.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-combobox/", "twin": "/examples/preview/texuli-combobox.md", "title": "Combobox and MultiSelect", "description": "Styled combobox with async loading, empty and error chrome, multi-select chips. Fictional Harbor Notes people and tags.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-date/", "twin": "/examples/preview/texuli-date.md", "title": "Date pickers and calendar", "description": "Styled Calendar, DatePicker and DateRangePicker with presets, on the owned APG primitives: sizes, required, invalid, disabled, bounds, RTL and dark.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-emoji-picker/", "twin": "/examples/preview/texuli-emoji-picker.md", "title": "Emoji picker and text", "description": "Search and select Unicode emoji with keyboard navigation, category tabs and host-controlled recents.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-empty/", "twin": "/examples/preview/texuli-empty.md", "title": "Empty and error states", "description": "EmptyState with actions and sizes, RTL compact empty, and ErrorState with pending retry. Fictional Harbor Notes copy.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-feedback/", "twin": "/examples/preview/texuli-feedback.md", "title": "Skeleton, Spinner and Progress", "description": "Loading placeholders, status spinners, and linear/circular progress (determinate and indeterminate) on the token contract. Fictional Harbor Notes copy.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-field/", "twin": "/examples/preview/texuli-field.md", "title": "Field and Form", "description": "Labeled fields with description and error states, horizontal RTL layout, and a form validate hook. Fictional Harbor workspace copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-file-upload/", "twin": "/examples/preview/texuli-file-upload.md", "title": "File upload", "description": "Styled drop zone with file list, image previews, progress and rejection errors. Fictional Harbor Notes copy; no real network upload.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-icons/", "twin": "/examples/preview/texuli-icons.md", "title": "Icon system", "description": "A small built-in icon set, size variants, decorative and labelled states, custom SVG compatibility, lazy registered icons with a fallback, RTL and dark mode.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-input/", "twin": "/examples/preview/texuli-input.md", "title": "Input, InputGroup and Textarea", "description": "Styled text fields with clearable input, adornment group, autosize textarea, character count, invalid and disabled states, RTL and dark. Fictional copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-kbd-code/", "twin": "/examples/preview/texuli-kbd-code.md", "title": "Kbd, Code and CopyButton", "description": "Keyboard keys, escaped inline and block code, and copy-with-feedback on the token contract. Fictional example.com only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-list-item/", "twin": "/examples/preview/texuli-list-item.md", "title": "List item", "description": "Rows of a role=\"list\": leading avatar or icon, title and description, trailing meta and a trailing action, as links (URL policy), buttons or plain text. Fictional example.com only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-menus/", "twin": "/examples/preview/texuli-menus.md", "title": "DropdownMenu, ContextMenu and Menubar", "description": "Styled menus with shortcuts, checkbox and radio items, submenus, context regions and an application menubar. Fictional Harbor Notes chrome.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-motion-loop/", "twin": "/examples/preview/texuli-motion-loop.md", "title": "Looping motion: a voice waveform", "description": "MotionLoop from texuli/motion/loop: five waveform bars that wave while a fictional voice note plays and a live dot that pulses, on the motion tokens. Static at rest under reduced motion or level none.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-number-pin/", "twin": "/examples/preview/texuli-number-pin.md", "title": "NumberField and PinInput", "description": "Locale-aware number controls and one-time-code cells with sizes, disabled states, RTL and dark surfaces.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-rating/", "twin": "/examples/preview/texuli-rating.md", "title": "Rating", "description": "Star rating input and display: whole and half stars, clearable, sizes, tones, read-only, disabled, ten stars, averages and RTL. Fictional Harbor Notes Cafe reviews.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-resizable/", "twin": "/examples/preview/texuli-resizable.md", "title": "Resizable panels", "description": "Styled resizable panel groups: plain and bordered, side by side and stacked, collapsible, disabled, RTL and a remembered layout. Fictional content only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-scroll-area/", "twin": "/examples/preview/texuli-scroll-area.md", "title": "ScrollArea", "description": "Native, keyboard-accessible scrolling with styled scrollbar visibility, size variants, RTL and dark mode.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-separator-aspect/", "twin": "/examples/preview/texuli-separator-aspect.md", "title": "Separator, AspectRatio and VisuallyHidden", "description": "Layout utilities: horizontal and vertical separators, aspect-ratio boxes, and screen-reader-only text. Fictional Harbor Notes copy.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-sheet/", "twin": "/examples/preview/texuli-sheet.md", "title": "Sheet, Drawer, DetailPanel and ResponsiveModal", "description": "Token-styled sheets, snap-point drawer, non-modal detail panel and responsive modal with logical sides.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-sidebar/", "twin": "/examples/preview/texuli-sidebar.md", "title": "Sidebar and AppNav", "description": "Collapsible app sidebar with sections and badges, plus AppNav mobile drawer. Fictional Harbor Notes navigation.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-slider/", "twin": "/examples/preview/texuli-slider.md", "title": "Slider", "description": "Styled single and range sliders with sizes, marks, vertical orientation, RTL and dark. Fictional controls only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-stat/", "twin": "/examples/preview/texuli-stat.md", "title": "Stat and KPI", "description": "Stat tiles with delta tone and sparkline slot; KPI with unit formatting, previous-period comparison, loading and empty. Fictional Harbor Notes metrics.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-stepper/", "twin": "/examples/preview/texuli-stepper.md", "title": "Stepper and Wizard", "description": "Horizontal and vertical steppers (including RTL), plus a multi-step wizard with validation. Fictional Harbor workspace copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-table/", "twin": "/examples/preview/texuli-table.md", "title": "Table", "description": "Static tables with caption, plain, striped and grid rows, three densities, numeric and footer cells, a selected row, an empty state, a sticky header in a capped area, stacked rows on narrow widths and RTL. Fictional data only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-tabs-accordion/", "twin": "/examples/preview/texuli-tabs-accordion.md", "title": "Tabs, Accordion and Collapsible", "description": "Styled tabs (line, pills, enclosed), bordered accordion and collapsible disclosure. Tabs that switch a host view (panelId). Fictional Harbor Notes copy; RTL pills demo.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-tags-color/", "twin": "/examples/preview/texuli-tags-color.md", "title": "TagsInput and ColorPicker", "description": "Styled tags field (RTL) and color pickers with swatches. Fictional Harbor Notes topics and brand colors.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-timeline/", "twin": "/examples/preview/texuli-timeline.md", "title": "Timeline", "description": "Vertical and horizontal timelines: every status and tone, links through the URL policy, composed items, right to left and dark. Fictional data only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-toast/", "twin": "/examples/preview/texuli-toast.md", "title": "Toaster", "description": "Styled toast stack with success, error, info, warning, actions, promise toasts, and RTL. Fictional Harbor copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-toaster-positions/", "twin": "/examples/preview/texuli-toaster-positions.md", "title": "Toaster positions", "description": "Two styled toasters (top end and bottom start) with two toasts in each tone, logical placement and enter/exit motion. Fictional Harbor copy only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-toggle/", "twin": "/examples/preview/texuli-toggle.md", "title": "Toggle and ToggleGroup", "description": "Styled pressable toggles and segmented groups (single and multiple) with variants, sizes, RTL and dark. Fictional labels only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-toolbar/", "twin": "/examples/preview/texuli-toolbar.md", "title": "Toolbar", "description": "Styled toolbars with buttons, links, separators and single/multiple groups. Variants, vertical, RTL and dark. Fictional actions only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-tooltip/", "twin": "/examples/preview/texuli-tooltip.md", "title": "Tooltip", "description": "Styled tooltips with optional keyboard shortcut chips on the token contract. Fictional Harbor Notes copy.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-tree/", "twin": "/examples/preview/texuli-tree.md", "title": "TreeView", "description": "A nested tree with keyboard navigation, expandable folders, single and multiple selection, disabled items, density variants, RTL and dark mode. Fictional content only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/texuli-typography/", "twin": "/examples/preview/texuli-typography.md", "title": "Heading, Text, Prose and Box", "description": "A locked-prototype page built from catalog components only: an app header Box with one border side, headings at sizes independent of their level, an eyebrow, a large tabular figure, muted and small text, long-form Prose and bordered panels. Fictional data only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-avatar-dark/", "twin": "/examples/preview/ui-avatar-dark.md", "title": "Avatar on a dark surface", "description": "Avatars and groups on the dark theme using only token colors.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-avatar-grid/", "twin": "/examples/preview/ui-avatar-grid.md", "title": "Avatar group grid", "description": "AvatarGroupGrid (texuli/avatar): two to four faces collaged in one circle with a +N cell, by member count, size and in a group conversation list.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-avatar-rtl/", "twin": "/examples/preview/ui-avatar-rtl.md", "title": "Avatar, right to left", "description": "Arabic labels and stacked group in a right-to-left layout.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-avatar-states/", "twin": "/examples/preview/ui-avatar-states.md", "title": "Avatar states", "description": "Presence dots, unsafe src fallback and decorative pairing.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-avatar-variants/", "twin": "/examples/preview/ui-avatar-variants.md", "title": "Avatar sizes", "description": "Every avatar size from xs to lg on the token contract.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-avatar/", "twin": "/examples/preview/ui-avatar.md", "title": "Avatar", "description": "Styled avatars with initials, presence status and a stacked group with overflow. Fictional Harbor names only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-carousel-autoplay/", "twin": "/examples/preview/ui-carousel-autoplay.md", "title": "Carousel with autoplay", "description": "Rotates every four seconds with a rotation control first in tab order; hovering pauses it, keyboard focus stops it, and reduced motion keeps it off.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-carousel-dark/", "twin": "/examples/preview/ui-carousel-dark.md", "title": "Carousel on a dark surface", "description": "The same carousel on a dark color scheme, using only token fallbacks.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-carousel-overlay/", "twin": "/examples/preview/ui-carousel-overlay.md", "title": "Carousel with overlay controls", "description": "The previous and next buttons sit on the inline edges of the slides.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-carousel-rtl/", "twin": "/examples/preview/ui-carousel-rtl.md", "title": "Carousel, right to left", "description": "Arabic labels in a right-to-left layout: the slides, arrows, swipe and edge buttons all follow the inline direction.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-carousel-states/", "twin": "/examples/preview/ui-carousel-states.md", "title": "Carousel states", "description": "No loop at the first slide, buttons without a picker, a single slide with no controls, and translated labels.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-carousel/", "twin": "/examples/preview/ui-carousel.md", "title": "Carousel", "description": "A labelled carousel of fictional destinations with previous and next buttons and a slide picker that roves with the arrow keys.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-command-dark/", "twin": "/examples/preview/ui-command-dark.md", "title": "Command on a dark surface", "description": "Command palette on the dark theme using only token colors.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-command-rtl/", "twin": "/examples/preview/ui-command-rtl.md", "title": "Command, right to left", "description": "Arabic labels for an inline command panel in a right-to-left layout.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-command-states/", "twin": "/examples/preview/ui-command-states.md", "title": "Command states", "description": "Empty filter, disabled option and the ⌘K trigger chrome.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-command-variants/", "twin": "/examples/preview/ui-command-variants.md", "title": "Command sizes and variants", "description": "Inline command panels across sm/md/lg and outline/soft.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-command/", "twin": "/examples/preview/ui-command.md", "title": "Command palette", "description": "Modal command palette with recent items, search groups and a ⌘K trigger. Fictional Harbor actions only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-dialog-dark/", "twin": "/examples/preview/ui-dialog-dark.md", "title": "Dialog on a dark surface", "description": "Dialog and alert trigger on the dark theme using only token colors.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-dialog-rtl/", "twin": "/examples/preview/ui-dialog-rtl.md", "title": "Dialog, right to left", "description": "A workspace settings dialog with Arabic labels in a right-to-left layout, shown open with logical padding.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-dialog-states/", "twin": "/examples/preview/ui-dialog-states.md", "title": "Dialog and AlertDialog states", "description": "Closed dialog trigger beside an open destructive confirm, disabled until a typed confirmation matches.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-dialog-variants/", "twin": "/examples/preview/ui-dialog-variants.md", "title": "Dialog sizes", "description": "sm, md and lg dialog widths side by side on the token contract.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-dialog/", "twin": "/examples/preview/ui-dialog.md", "title": "Dialog", "description": "Styled modal with header, scrollable body and footer actions. Fictional Harbor Labs copy.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-navigation-dark/", "twin": "/examples/preview/ui-navigation-dark.md", "title": "Navigation on a dark surface", "description": "Navigation pieces on the dark theme using only token colors.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-navigation-rtl/", "twin": "/examples/preview/ui-navigation-rtl.md", "title": "Navigation, right to left", "description": "Arabic labels for breadcrumb, menu and pagination in a right-to-left layout.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-navigation-states/", "twin": "/examples/preview/ui-navigation-states.md", "title": "Navigation states", "description": "Collapsed breadcrumb with an abbreviated crumb, closed menu, blocked href and disabled pagination.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-navigation-variants/", "twin": "/examples/preview/ui-navigation-variants.md", "title": "Navigation variants", "description": "Breadcrumb sizes and pagination outline/soft across sm, md and lg.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-navigation/", "twin": "/examples/preview/ui-navigation.md", "title": "Navigation", "description": "Styled breadcrumb, navigation menu flyouts and pagination on the token contract. Fictional example.com links only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-popover-dark/", "twin": "/examples/preview/ui-popover-dark.md", "title": "Popover on a dark surface", "description": "Popover and hover card on the dark theme using only token colors.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-popover-rtl/", "twin": "/examples/preview/ui-popover-rtl.md", "title": "Popover, right to left", "description": "Arabic labels in a right-to-left layout with logical padding and arrow placement.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-popover-states/", "twin": "/examples/preview/ui-popover-states.md", "title": "Popover and HoverCard states", "description": "Closed popover, open without arrow, and an open hover card profile preview.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-popover-variants/", "twin": "/examples/preview/ui-popover-variants.md", "title": "Popover variants", "description": "Elevated, flat and size variants of the popover surface side by side.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-popover/", "twin": "/examples/preview/ui-popover.md", "title": "Popover", "description": "Styled floating account menu with an arrow, header, list and close control. Fictional example.com copy.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-select-dark/", "twin": "/examples/preview/ui-select-dark.md", "title": "Select on a dark surface", "description": "Soft variant select with groups and a separator on the dark theme.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-select-rtl/", "twin": "/examples/preview/ui-select-rtl.md", "title": "Select, right to left", "description": "A language select with Arabic labels in a right-to-left layout, shown open with its list of three languages and logical padding.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-select-states/", "twin": "/examples/preview/ui-select-states.md", "title": "Select states", "description": "Placeholder, disabled trigger and open list with a disabled option.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-select-variants/", "twin": "/examples/preview/ui-select-variants.md", "title": "Select variants", "description": "Outline and soft triggers across sm, md and lg sizes.", "headings": [ "For agents" ] }, { "path": "/examples/preview/ui-select/", "twin": "/examples/preview/ui-select.md", "title": "Select", "description": "Styled single-select listbox with groups, option descriptions and a chevron trigger. Fictional plans only.", "headings": [ "For agents" ] }, { "path": "/examples/preview/workflows-editor/", "twin": "/examples/preview/workflows-editor.md", "title": "Workflow editor", "description": "An automation pipeline with typed ports: keyboard connect mode, palette drops, marquee, undo and redo, minimap, an inspector and a treegrid outline.", "headings": [ "For agents" ] }, { "path": "/examples/preview/workflows-state-machine/", "twin": "/examples/preview/workflows-state-machine.md", "title": "State diagram", "description": "The same editor as a state machine: cycles allowed, custom node bodies through a snippet, and every label localized in Spanish.", "headings": [ "For agents" ] }, { "path": "/examples/preview/workflows-viewer/", "twin": "/examples/preview/workflows-viewer.md", "title": "Workflow viewer", "description": "A read-only approval flow: nodes read as a list that says where each one leads, edges drawn behind, scaled to fit, with no editing code.", "headings": [ "For agents" ] }, { "path": "/examples/primitives-sortable/", "twin": "/examples/primitives-sortable.md", "title": "Sortable", "description": "Owned drag and drop on @texuli/drag: a board with columns, a nested outline, right-to-left chips, a palette that clones, a swap grid, locked items and…", "headings": [ "For agents" ] }, { "path": "/examples/sheets-budget/", "twin": "/examples/sheets-budget.md", "title": "Spreadsheet", "description": "A two-tab budget with formulas (SUM, SUMIF, IF and a cross-sheet reference) that recalculate as cells change, a formula bar and keyboard editing on the data…", "headings": [ "For agents" ] }, { "path": "/examples/slides-backgrounds/", "twin": "/examples/slides-backgrounds.md", "title": "Deck backgrounds gallery", "description": "Every background preset (solid, gradient, pattern) and one spec of each kind (hex solid, angled gradient, light and dark image) under a free slide, each with…", "headings": [ "For agents" ] }, { "path": "/examples/slides-fragments/", "twin": "/examples/slides-fragments.md", "title": "Reveal steps (fragments)", "description": "A DeckStage slide at reveal step 2 of 4: two of three list items shown, a line struck through, and a callout still hidden in its reserved space.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-big-stat/", "twin": "/examples/slides-layout-big-stat.md", "title": "Layout: big-stat", "description": "One large number with its label, context and source. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-chart/", "twin": "/examples/slides-layout-chart.md", "title": "Layout: chart", "description": "A bar chart block with its data table beside it. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-closing-cta/", "twin": "/examples/slides-layout-closing-cta.md", "title": "Layout: closing-cta", "description": "The last slide with its call-to-action link and a footnote. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-code-with-callout/", "twin": "/examples/slides-layout-code-with-callout.md", "title": "Layout: code-with-callout", "description": "A tokenized code block at its first highlight step beside the explanation. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-comparison-table/", "twin": "/examples/slides-layout-comparison-table.md", "title": "Layout: comparison-table", "description": "Three plans across four attributes, with yes, no and empty cells. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-image-centered/", "twin": "/examples/slides-layout-image-centered.md", "title": "Layout: image-centered", "description": "One image is the focus, fitted inside its frame, with a caption. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-image-full-bleed/", "twin": "/examples/slides-layout-image-full-bleed.md", "title": "Layout: image-full-bleed", "description": "The image edge to edge with a dark overlay and a caption band. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-image-left/", "twin": "/examples/slides-layout-image-left.md", "title": "Layout: image-left", "description": "A media pane on the inline start with the copy beside it. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-image-right/", "twin": "/examples/slides-layout-image-right.md", "title": "Layout: image-right", "description": "Copy first, then the media pane on the inline end. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-process-steps/", "twin": "/examples/slides-layout-process-steps.md", "title": "Layout: process-steps", "description": "Four numbered, connected steps. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-quote/", "twin": "/examples/slides-layout-quote.md", "title": "Layout: quote", "description": "One pull quote with its attribution and a decorative quote mark. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-section-divider/", "twin": "/examples/slides-layout-section-divider.md", "title": "Layout: section-divider", "description": "A chapter break: an eyebrow and a large title beside an accent rule. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-team-avatars/", "twin": "/examples/slides-layout-team-avatars.md", "title": "Layout: team-avatars", "description": "Four people with initials (no avatar adapter in the example). DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-three-column-cards/", "twin": "/examples/slides-layout-three-column-cards.md", "title": "Layout: three-column-cards", "description": "Three parallel cards with numbered tiles, headings and bodies. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-timeline/", "twin": "/examples/slides-layout-timeline.md", "title": "Layout: timeline", "description": "Five dated events on two axis rows. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-title-hero/", "twin": "/examples/slides-layout-title-hero.md", "title": "Layout: title-hero", "description": "The cover: title, subtitle and a meta line over decorative accent shapes. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-two-column-split/", "twin": "/examples/slides-layout-two-column-split.md", "title": "Layout: two-column-split", "description": "Two parallel text panels (before and after) under a title. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-video-centered/", "twin": "/examples/slides-layout-video-centered.md", "title": "Layout: video-centered", "description": "One video player is the focus (the example clip path has no file, so the player shows its fallback). DeckStage, deck model v2.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-video-left/", "twin": "/examples/slides-layout-video-left.md", "title": "Layout: video-left", "description": "A video player on the inline start with the copy beside it. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-layout-video-right/", "twin": "/examples/slides-layout-video-right.md", "title": "Layout: video-right", "description": "Copy first, then the video player on the inline end. DeckStage, deck model v2. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-media-deck/", "twin": "/examples/slides-media-deck.md", "title": "Media deck (print view)", "description": "Every slide of a media deck in DeckPrint: a media-left figure (cover fit), a media-right image and a body gallery. Embedded swatches only.", "headings": [ "For agents" ] }, { "path": "/examples/slides-presenter-screen/", "twin": "/examples/slides-presenter-screen.md", "title": "Presenter screen", "description": "DeckStage in presenter mode at reveal step 1 of 4: the slide, speaker notes with the step progress, and the next step. Timer-free, so the view is deterministic.", "headings": [ "For agents" ] }, { "path": "/examples/slides-slot-masters/", "twin": "/examples/slides-slot-masters.md", "title": "Slot masters (print view)", "description": "Every slide of a slot-master deck in DeckPrint: dividers split blocks into a title footer, two columns with a footer, and a quote with its attribution.", "headings": [ "For agents" ] }, { "path": "/examples/slides-template-pitch/", "twin": "/examples/slides-template-pitch.md", "title": "Pitch deck template", "description": "The pitch starter deck in DeckStage on its media-right solution slide. Fictional Harborline copy. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-template-report/", "twin": "/examples/slides-template-report.md", "title": "Report deck template", "description": "The report starter deck (createDeckFromTemplate) in DeckStage on its media-left trend slide. Fictional Example Co. data. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-template-review/", "twin": "/examples/slides-template-review.md", "title": "Review deck template", "description": "The review starter deck in DeckStage on its media-left demo slide with a code block. Fictional sprint data. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/slides-tour/", "twin": "/examples/slides-tour.md", "title": "Slides tour", "description": "One DeckStage deck that tours the stage: slot masters, reveal steps, code highlights, speaker notes for the presenter view, the overview and fullscreen.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-alert/", "twin": "/examples/texuli-alert.md", "title": "Alert, Callout and Banner", "description": "Inline alerts, documentation callouts and page banners with every tone, actions, dismiss, RTL and dark. Fictional copy only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-app-layouts/", "twin": "/examples/texuli-app-layouts.md", "title": "App layouts", "description": "Responsive sidebar, icon rail, master-detail, top navigation, split view and three-pane layouts with fictional workspace content.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-badge/", "twin": "/examples/texuli-badge.md", "title": "Badge, Tag and Chip", "description": "Status badges in every tone, removable tags (including RTL), and a filter chip with pressed state. Fictional labels only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-button/", "twin": "/examples/texuli-button.md", "title": "Button, IconButton and ButtonGroup", "description": "Styled buttons on the token contract: every variant and size, loading, safe href, groups, RTL and dark. Fictional example.com copy only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-card/", "twin": "/examples/texuli-card.md", "title": "Card surfaces", "description": "Elevated and flat cards, media, footer actions, auto-fit grid and a clickable card with URL policy. Fictional example.com only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-choice/", "twin": "/examples/texuli-choice.md", "title": "Checkbox, Radio and Switch", "description": "Styled choice controls with labels, descriptions, indeterminate checkbox, card radios, sizes and RTL. Fictional Harbor Notes preferences.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-combobox/", "twin": "/examples/texuli-combobox.md", "title": "Combobox and MultiSelect", "description": "Styled combobox with async loading, empty and error chrome, multi-select chips. Fictional Harbor Notes people and tags. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-date/", "twin": "/examples/texuli-date.md", "title": "Date pickers and calendar", "description": "Styled Calendar, DatePicker and DateRangePicker with presets, on the owned APG primitives: sizes, required, invalid, disabled, bounds, RTL and dark.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-emoji-picker/", "twin": "/examples/texuli-emoji-picker.md", "title": "Emoji picker and text", "description": "Search and select Unicode emoji with keyboard navigation, category tabs and host-controlled recents. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-empty/", "twin": "/examples/texuli-empty.md", "title": "Empty and error states", "description": "EmptyState with actions and sizes, RTL compact empty, and ErrorState with pending retry. Fictional Harbor Notes copy. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-feedback/", "twin": "/examples/texuli-feedback.md", "title": "Skeleton, Spinner and Progress", "description": "Loading placeholders, status spinners, and linear/circular progress (determinate and indeterminate) on the token contract. Fictional Harbor Notes copy.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-field/", "twin": "/examples/texuli-field.md", "title": "Field and Form", "description": "Labeled fields with description and error states, horizontal RTL layout, and a form validate hook. Fictional Harbor workspace copy only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-file-upload/", "twin": "/examples/texuli-file-upload.md", "title": "File upload", "description": "Styled drop zone with file list, image previews, progress and rejection errors. Fictional Harbor Notes copy; no real network upload.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-icons/", "twin": "/examples/texuli-icons.md", "title": "Icon system", "description": "A small built-in icon set, size variants, decorative and labelled states, custom SVG compatibility, lazy registered icons with a fallback, RTL and dark mode.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-input/", "twin": "/examples/texuli-input.md", "title": "Input, InputGroup and Textarea", "description": "Styled text fields with clearable input, adornment group, autosize textarea, character count, invalid and disabled states, RTL and dark. Fictional copy only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-kbd-code/", "twin": "/examples/texuli-kbd-code.md", "title": "Kbd, Code and CopyButton", "description": "Keyboard keys, escaped inline and block code, and copy-with-feedback on the token contract. Fictional example.com only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-list-item/", "twin": "/examples/texuli-list-item.md", "title": "List item", "description": "Rows of a role=\"list\": leading avatar or icon, title and description, trailing meta and a trailing action, as links (URL policy), buttons or plain text.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-menus/", "twin": "/examples/texuli-menus.md", "title": "DropdownMenu, ContextMenu and Menubar", "description": "Styled menus with shortcuts, checkbox and radio items, submenus, context regions and an application menubar. Fictional Harbor Notes chrome.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-motion-loop/", "twin": "/examples/texuli-motion-loop.md", "title": "Looping motion: a voice waveform", "description": "MotionLoop from texuli/motion/loop: five waveform bars that wave while a fictional voice note plays and a live dot that pulses, on the motion tokens.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-number-pin/", "twin": "/examples/texuli-number-pin.md", "title": "NumberField and PinInput", "description": "Locale-aware number controls and one-time-code cells with sizes, disabled states, RTL and dark surfaces. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-rating/", "twin": "/examples/texuli-rating.md", "title": "Rating", "description": "Star rating input and display: whole and half stars, clearable, sizes, tones, read-only, disabled, ten stars, averages and RTL.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-resizable/", "twin": "/examples/texuli-resizable.md", "title": "Resizable panels", "description": "Styled resizable panel groups: plain and bordered, side by side and stacked, collapsible, disabled, RTL and a remembered layout. Fictional content only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-scroll-area/", "twin": "/examples/texuli-scroll-area.md", "title": "ScrollArea", "description": "Native, keyboard-accessible scrolling with styled scrollbar visibility, size variants, RTL and dark mode. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-separator-aspect/", "twin": "/examples/texuli-separator-aspect.md", "title": "Separator, AspectRatio and VisuallyHidden", "description": "Layout utilities: horizontal and vertical separators, aspect-ratio boxes, and screen-reader-only text. Fictional Harbor Notes copy.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-sheet/", "twin": "/examples/texuli-sheet.md", "title": "Sheet, Drawer, DetailPanel and ResponsiveModal", "description": "Token-styled sheets, snap-point drawer, non-modal detail panel and responsive modal with logical sides. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-sidebar/", "twin": "/examples/texuli-sidebar.md", "title": "Sidebar and AppNav", "description": "Collapsible app sidebar with sections and badges, plus AppNav mobile drawer. Fictional Harbor Notes navigation. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-slider/", "twin": "/examples/texuli-slider.md", "title": "Slider", "description": "Styled single and range sliders with sizes, marks, vertical orientation, RTL and dark. Fictional controls only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-stat/", "twin": "/examples/texuli-stat.md", "title": "Stat and KPI", "description": "Stat tiles with delta tone and sparkline slot; KPI with unit formatting, previous-period comparison, loading and empty. Fictional Harbor Notes metrics.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-stepper/", "twin": "/examples/texuli-stepper.md", "title": "Stepper and Wizard", "description": "Horizontal and vertical steppers (including RTL), plus a multi-step wizard with validation. Fictional Harbor workspace copy only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-table/", "twin": "/examples/texuli-table.md", "title": "Table", "description": "Static tables with caption, plain, striped and grid rows, three densities, numeric and footer cells, a selected row, an empty state, a sticky header in a…", "headings": [ "For agents" ] }, { "path": "/examples/texuli-tabs-accordion/", "twin": "/examples/texuli-tabs-accordion.md", "title": "Tabs, Accordion and Collapsible", "description": "Styled tabs (line, pills, enclosed), bordered accordion and collapsible disclosure. Tabs that switch a host view (panelId).", "headings": [ "For agents" ] }, { "path": "/examples/texuli-tags-color/", "twin": "/examples/texuli-tags-color.md", "title": "TagsInput and ColorPicker", "description": "Styled tags field (RTL) and color pickers with swatches. Fictional Harbor Notes topics and brand colors. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-timeline/", "twin": "/examples/texuli-timeline.md", "title": "Timeline", "description": "Vertical and horizontal timelines: every status and tone, links through the URL policy, composed items, right to left and dark. Fictional data only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-toast/", "twin": "/examples/texuli-toast.md", "title": "Toaster", "description": "Styled toast stack with success, error, info, warning, actions, promise toasts, and RTL. Fictional Harbor copy only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-toaster-positions/", "twin": "/examples/texuli-toaster-positions.md", "title": "Toaster positions", "description": "Two styled toasters (top end and bottom start) with two toasts in each tone, logical placement and enter/exit motion. Fictional Harbor copy only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-toggle/", "twin": "/examples/texuli-toggle.md", "title": "Toggle and ToggleGroup", "description": "Styled pressable toggles and segmented groups (single and multiple) with variants, sizes, RTL and dark. Fictional labels only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-toolbar/", "twin": "/examples/texuli-toolbar.md", "title": "Toolbar", "description": "Styled toolbars with buttons, links, separators and single/multiple groups. Variants, vertical, RTL and dark. Fictional actions only.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-tooltip/", "twin": "/examples/texuli-tooltip.md", "title": "Tooltip", "description": "Styled tooltips with optional keyboard shortcut chips on the token contract. Fictional Harbor Notes copy. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-tree/", "twin": "/examples/texuli-tree.md", "title": "TreeView", "description": "A nested tree with keyboard navigation, expandable folders, single and multiple selection, disabled items, density variants, RTL and dark mode.", "headings": [ "For agents" ] }, { "path": "/examples/texuli-typography/", "twin": "/examples/texuli-typography.md", "title": "Heading, Text, Prose and Box", "description": "A locked-prototype page built from catalog components only: an app header Box with one border side, headings at sizes independent of their level, an eyebrow…", "headings": [ "For agents" ] }, { "path": "/examples/ui-avatar-dark/", "twin": "/examples/ui-avatar-dark.md", "title": "Avatar on a dark surface", "description": "Avatars and groups on the dark theme using only token colors. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-avatar-grid/", "twin": "/examples/ui-avatar-grid.md", "title": "Avatar group grid", "description": "AvatarGroupGrid (texuli/avatar): two to four faces collaged in one circle with a +N cell, by member count, size and in a group conversation list.", "headings": [ "For agents" ] }, { "path": "/examples/ui-avatar-rtl/", "twin": "/examples/ui-avatar-rtl.md", "title": "Avatar, right to left", "description": "Arabic labels and stacked group in a right-to-left layout. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-avatar-states/", "twin": "/examples/ui-avatar-states.md", "title": "Avatar states", "description": "Presence dots, unsafe src fallback and decorative pairing. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-avatar-variants/", "twin": "/examples/ui-avatar-variants.md", "title": "Avatar sizes", "description": "Every avatar size from xs to lg on the token contract. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-avatar/", "twin": "/examples/ui-avatar.md", "title": "Avatar", "description": "Styled avatars with initials, presence status and a stacked group with overflow. Fictional Harbor names only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-carousel-autoplay/", "twin": "/examples/ui-carousel-autoplay.md", "title": "Carousel with autoplay", "description": "Rotates every four seconds with a rotation control first in tab order; hovering pauses it, keyboard focus stops it, and reduced motion keeps it off.", "headings": [ "For agents" ] }, { "path": "/examples/ui-carousel-dark/", "twin": "/examples/ui-carousel-dark.md", "title": "Carousel on a dark surface", "description": "The same carousel on a dark color scheme, using only token fallbacks. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-carousel-overlay/", "twin": "/examples/ui-carousel-overlay.md", "title": "Carousel with overlay controls", "description": "The previous and next buttons sit on the inline edges of the slides. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-carousel-rtl/", "twin": "/examples/ui-carousel-rtl.md", "title": "Carousel, right to left", "description": "Arabic labels in a right-to-left layout: the slides, arrows, swipe and edge buttons all follow the inline direction. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-carousel-states/", "twin": "/examples/ui-carousel-states.md", "title": "Carousel states", "description": "No loop at the first slide, buttons without a picker, a single slide with no controls, and translated labels. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-carousel/", "twin": "/examples/ui-carousel.md", "title": "Carousel", "description": "A labelled carousel of fictional destinations with previous and next buttons and a slide picker that roves with the arrow keys.", "headings": [ "For agents" ] }, { "path": "/examples/ui-command-dark/", "twin": "/examples/ui-command-dark.md", "title": "Command on a dark surface", "description": "Command palette on the dark theme using only token colors. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-command-rtl/", "twin": "/examples/ui-command-rtl.md", "title": "Command, right to left", "description": "Arabic labels for an inline command panel in a right-to-left layout. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-command-states/", "twin": "/examples/ui-command-states.md", "title": "Command states", "description": "Empty filter, disabled option and the ⌘K trigger chrome. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-command-variants/", "twin": "/examples/ui-command-variants.md", "title": "Command sizes and variants", "description": "Inline command panels across sm/md/lg and outline/soft. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-command/", "twin": "/examples/ui-command.md", "title": "Command palette", "description": "Modal command palette with recent items, search groups and a ⌘K trigger. Fictional Harbor actions only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-dialog-dark/", "twin": "/examples/ui-dialog-dark.md", "title": "Dialog on a dark surface", "description": "Dialog and alert trigger on the dark theme using only token colors. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-dialog-rtl/", "twin": "/examples/ui-dialog-rtl.md", "title": "Dialog, right to left", "description": "A workspace settings dialog with Arabic labels in a right-to-left layout, shown open with logical padding. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-dialog-states/", "twin": "/examples/ui-dialog-states.md", "title": "Dialog and AlertDialog states", "description": "Closed dialog trigger beside an open destructive confirm, disabled until a typed confirmation matches. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-dialog-variants/", "twin": "/examples/ui-dialog-variants.md", "title": "Dialog sizes", "description": "sm, md and lg dialog widths side by side on the token contract. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-dialog/", "twin": "/examples/ui-dialog.md", "title": "Dialog", "description": "Styled modal with header, scrollable body and footer actions. Fictional Harbor Labs copy. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-navigation-dark/", "twin": "/examples/ui-navigation-dark.md", "title": "Navigation on a dark surface", "description": "Navigation pieces on the dark theme using only token colors. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-navigation-rtl/", "twin": "/examples/ui-navigation-rtl.md", "title": "Navigation, right to left", "description": "Arabic labels for breadcrumb, menu and pagination in a right-to-left layout. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-navigation-states/", "twin": "/examples/ui-navigation-states.md", "title": "Navigation states", "description": "Collapsed breadcrumb with an abbreviated crumb, closed menu, blocked href and disabled pagination. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-navigation-variants/", "twin": "/examples/ui-navigation-variants.md", "title": "Navigation variants", "description": "Breadcrumb sizes and pagination outline/soft across sm, md and lg. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-navigation/", "twin": "/examples/ui-navigation.md", "title": "Navigation", "description": "Styled breadcrumb, navigation menu flyouts and pagination on the token contract. Fictional example.com links only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-popover-dark/", "twin": "/examples/ui-popover-dark.md", "title": "Popover on a dark surface", "description": "Popover and hover card on the dark theme using only token colors. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-popover-rtl/", "twin": "/examples/ui-popover-rtl.md", "title": "Popover, right to left", "description": "Arabic labels in a right-to-left layout with logical padding and arrow placement. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-popover-states/", "twin": "/examples/ui-popover-states.md", "title": "Popover and HoverCard states", "description": "Closed popover, open without arrow, and an open hover card profile preview. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-popover-variants/", "twin": "/examples/ui-popover-variants.md", "title": "Popover variants", "description": "Elevated, flat and size variants of the popover surface side by side. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-popover/", "twin": "/examples/ui-popover.md", "title": "Popover", "description": "Styled floating account menu with an arrow, header, list and close control. Fictional example.com copy. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-select-dark/", "twin": "/examples/ui-select-dark.md", "title": "Select on a dark surface", "description": "Soft variant select with groups and a separator on the dark theme. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-select-rtl/", "twin": "/examples/ui-select-rtl.md", "title": "Select, right to left", "description": "A language select with Arabic labels in a right-to-left layout, shown open with its list of three languages and logical padding.", "headings": [ "For agents" ] }, { "path": "/examples/ui-select-states/", "twin": "/examples/ui-select-states.md", "title": "Select states", "description": "Placeholder, disabled trigger and open list with a disabled option. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-select-variants/", "twin": "/examples/ui-select-variants.md", "title": "Select variants", "description": "Outline and soft triggers across sm, md and lg sizes. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/ui-select/", "twin": "/examples/ui-select.md", "title": "Select", "description": "Styled single-select listbox with groups, option descriptions and a chevron trigger. Fictional plans only. A live Texuli example with its source.", "headings": [ "For agents" ] }, { "path": "/examples/workflows-editor/", "twin": "/examples/workflows-editor.md", "title": "Workflow editor", "description": "An automation pipeline with typed ports: keyboard connect mode, palette drops, marquee, undo and redo, minimap, an inspector and a treegrid outline.", "headings": [ "For agents" ] }, { "path": "/examples/workflows-state-machine/", "twin": "/examples/workflows-state-machine.md", "title": "State diagram", "description": "The same editor as a state machine: cycles allowed, custom node bodies through a snippet, and every label localized in Spanish.", "headings": [ "For agents" ] }, { "path": "/examples/workflows-viewer/", "twin": "/examples/workflows-viewer.md", "title": "Workflow viewer", "description": "A read-only approval flow: nodes read as a list that says where each one leads, edges drawn behind, scaled to fit, with no editing code.", "headings": [ "For agents" ] }, { "path": "/forms-page/", "twin": "/forms-page.md", "title": "Forms as data, painted accessibly", "description": "Texuli schema-driven forms (@texuli/forms, in development): every field type, announced validation, multi-step flows, conditions, drafts and agent-made forms.", "headings": [ "Every field type", "Every field type", "Typed values", "Named formats, never patterns", "Validation with announced errors", "Create a workspace", "Multi-step flows and conditional logic", "Request a pilot workspace", "Steps", "Cross-field rules", "Drafts and autosave", "Launch feedback", "What the storage holds", "Fields backed by host data", "Request log", "Forms as agent data", "The blueprint the agent wrote", "The hostile field", "Painted by the player", "Keyboard and screen readers", "What a screen reader hears", "What keeps it safe", "In code", "Package docs", "For agents" ] }, { "path": "/foundation/", "twin": "/foundation.md", "title": "Foundation", "description": "How texuli.com is built: static Astro pages on Texuli components, with no runtime network.", "headings": [ "Static output", "No runtime network", "Built with Texuli", "Light, dark and system" ] }, { "path": "/gallery-components/", "twin": "/gallery-components.md", "title": "Component gallery", "description": "Every Texuli catalog component, live: real previews you can switch to dark or right to left, props you can edit and code you can copy.", "headings": [ "For agents" ] }, { "path": "/gallery-components/preview/", "twin": "/gallery-components/preview.md", "title": "Component preview", "description": "An isolated live preview of one Texuli component.", "headings": [ "For agents" ] }, { "path": "/gallery-themes/", "twin": "/gallery-themes.md", "title": "Theme gallery", "description": "Browse every Texuli library theme with live previews, palette swatches and WCAG AA contrast scores. Apply one click site-wide.", "headings": [ "For agents" ] }, { "path": "/guides/accessibility/", "twin": "/guides/accessibility.md", "title": "Accessibility", "description": "Keyboard operation, associated labels, focus rings and WCAG 2.x contrast in light, dark and forced-colors.", "headings": [ "The bar", "Labels and names", "Keyboard", "Live controls" ] }, { "path": "/guides/dark-mode/", "twin": "/guides/dark-mode.md", "title": "Dark mode", "description": "Light, dark and system preferences without a first-paint flash.", "headings": [ "Modes", "No flash", "Live mode", "data-tx-mode" ] }, { "path": "/guides/forms/", "twin": "/guides/forms.md", "title": "Forms", "description": "Compose Field, Input and Form with associated labels, errors and a validate hook.", "headings": [ "Field and Input", "Validation", "Live form" ] }, { "path": "/guides/getting-started/", "twin": "/guides/getting-started.md", "title": "Getting started", "description": "Add Texuli to a Vite, Astro or SvelteKit app — install packages or copy with texuli init.", "headings": [ "Install", "Wire tokens", "Import a component", "Live example", "Harbor workspace" ] }, { "path": "/guides/", "twin": "/guides.md", "title": "Guides", "description": "Install Texuli, theme it, ship accessible forms, and keep bundles small — with live snippets on every page.", "headings": [ "What you get", "How to read", "Solutions", "Static and local" ] }, { "path": "/guides/performance/", "twin": "/guides/performance.md", "title": "Performance", "description": "Lazy subpath imports, measured gzip budgets and static pages that ship only what they use.", "headings": [ "Subpath imports", "Budgets", "Live imports", "Lazy-friendly imports" ] }, { "path": "/guides/rtl-i18n/", "twin": "/guides/rtl-i18n.md", "title": "RTL and i18n", "description": "Logical CSS properties, document direction and locale — one component tree for LTR and RTL.", "headings": [ "Logical CSS", "dir and lang", "Live RTL" ] }, { "path": "/guides/solutions/agent-chat/", "twin": "/guides/solutions/agent-chat.md", "title": "Agent chat docs", "description": "Install @texuli/chat, stream replies with Stop, read message Markdown safely, autocomplete mentions and commands, and attach validated blueprints. Autocomplete, stopped replies and ChatAttachment are in development.", "headings": [ "Install and status", "Streamed replies and Stop", "Markdown, mentions and dialect export", "Composer autocomplete", "Blueprint attachments" ] }, { "path": "/guides/solutions/canvas/", "twin": "/guides/solutions/canvas.md", "title": "Canvas docs", "description": "Install @texuli/canvas, load a board, edit it, export SVG or PNG. In development.", "headings": [ "What Canvas is", "What you get", "Install", "Load and edit", "Build from operations", "Format", "Operations", "Editor and viewer", "Export", "Sync", "Keyboard and tree", "Motion and contrast", "Status", "Not built", "Untrusted canvases", "Catalog and player" ] }, { "path": "/guides/solutions/dashboards/", "twin": "/guides/solutions/dashboards.md", "title": "Dashboards docs", "description": "Build responsive dashboard grids with @texuli/data. The grid, FilterBar and MetricCard are in 0.18.0, in development.", "headings": [ "What Dashboards is", "Components and release status", "What you get", "Install", "Render a board", "Add metric and filter controls", "Grid model", "Layout engine", "Persistence shape", "Keep data in the host", "Persist layouts", "Filter and date controls", "Metric cards", "Keyboard and pointer", "Reading order and focus", "Layout and motion", "Status and release", "Host responsibilities", "Agent-authored dashboards", "Keep agent data untrusted", "Skill" ] }, { "path": "/guides/solutions/design-systems/", "twin": "/guides/solutions/design-systems.md", "title": "Design systems docs", "description": "Use a closed design-system document to define, validate, compile and apply a brand across Texuli.", "headings": [ "The document", "Apply and govern", "Reference pages" ] }, { "path": "/guides/solutions/documents/", "twin": "/guides/solutions/documents.md", "title": "Documents docs", "description": "Install @texuli/document, @texuli/pages and @texuli/editor, edit a document, export it. In development.", "headings": [ "What Documents is", "What you get", "Install", "Create and edit a document", "Put it on the page", "Document format", "Operations", "Editor model", "Editor and reader", "Paged view and export", "Collaboration", "Keyboard", "Motion and links", "Status", "Not built", "Untrusted documents", "MCP operations" ] }, { "path": "/guides/solutions/editor/", "twin": "/guides/solutions/editor.md", "title": "Rich text editor docs", "description": "Install @texuli/editor, read and write Markdown, paste HTML safely, set block types from a menu, add emoji and export to chat dialects. Paste through @texuli/core/html, the block menu, emoji and chat export are in development.", "headings": [ "Install and status", "Markdown in and out", "Safe paste", "Block-type menu", "Emoji", "Export to chat" ] }, { "path": "/guides/solutions/forms/", "twin": "/guides/solutions/forms.md", "title": "Forms docs", "description": "Install and use @texuli/forms schemas, conditions, steps and drafts. The visual builder is in development and is planned for the next release.", "headings": [ "Install and status", "Schemas, conditions and steps", "Drafts and host storage", "Visual builder" ] }, { "path": "/guides/solutions/sheets/", "twin": "/guides/solutions/sheets.md", "title": "Sheets docs", "description": "Install @texuli/sheets, load a workbook, evaluate formulas, show the grid. In development. Owned formula engine.", "headings": [ "What Sheets is", "What you get", "Install", "Load and show a sheet", "Drive the workbook", "Workbook", "Owned formula engine", "CSV", "Sheet view", "Player host", "Grid", "No HTML", "Status", "Not built", "Untrusted sheets", "Catalog and skill" ] }, { "path": "/guides/solutions/slides/", "twin": "/guides/solutions/slides.md", "title": "Slides docs", "description": "Install @texuli/slides and @texuli/deck, parse a deck, present it, print it. In development.", "headings": [ "What Slides is", "What you get", "Install", "A JSON deck on the stage", "Parse first", "Model v2", "Markdown dialect", "Engine", "Stage", "Layouts", "Print and PPTX", "Keyboard and input", "Motion and contrast", "Status", "Not built", "Untrusted decks", "Markdown and JSON" ] }, { "path": "/guides/solutions/workflows/", "twin": "/guides/solutions/workflows.md", "title": "Workflows docs", "description": "Install @texuli/workflows, build a typed graph, edit or view it. In development. Not a workflow runner.", "headings": [ "What Workflows is", "What you get", "Install", "Build a graph and edit it", "Graph model", "Layout", "Spec adapter", "Editor", "Viewer and inspector", "Player", "Keyboard first", "Drag contract", "Status", "Not built", "Untrusted graphs", "Catalog and skill" ] }, { "path": "/guides/theming/", "twin": "/guides/theming.md", "title": "Theming", "description": "Pick a library theme, compile CSS variables, and let consumer classes win through CSS layers.", "headings": [ "Theme ids", "CSS layers", "Using Texuli with your own CSS", "Apply a theme", "Live tokens" ] }, { "path": "/guides/why-svelte-kotlin/", "twin": "/guides/why-svelte-kotlin.md", "title": "Why Svelte and Kotlin", "description": "The two technologies behind Texuli, what each one is responsible for, and how one contract serves both.", "headings": [ "Why Svelte", "Why Kotlin", "One catalog, two runtimes", "What exists today" ] }, { "path": "/", "twin": "/index.md", "title": "Build any interface.", "description": "One owned, accessible Svelte 5 component library to build any interface, safe for agents, with a Kotlin Multiplatform renderer in development.", "headings": [ "Small pieces. Infinite possibilities.", "Your interfaces shouldn’t stop at the browser.", "More than widgets: complete systems.", "Built for humans and agents.", "Your brand in one JSON file.", "The foundation behind real products.", "Accessible and owned.", "Build your next interface.", "For agents" ] }, { "path": "/live-generation/", "twin": "/live-generation.md", "title": "Watch an agent's draft paint as it streams", "description": "Watch a recorded agent draft stream into the Texuli player: skeletons, nodes painted as they validate, a held node and a retry. Replayed in your browser.", "headings": [ "Stream a recorded draft", "What happened", "How a node goes from bytes to paint", "What the replay is", "In code", "Read more", "For agents" ] }, { "path": "/markdown/", "twin": "/markdown.md", "title": "Markdown, HTML and chat dialects", "description": "Untrusted Markdown, HTML and nine chat dialects through @texuli/core. In development, released in 0.18.0.", "headings": [ "Status", "Subpaths", "Agents", "For agents" ] }, { "path": "/mcp-server/", "twin": "/mcp-server.md", "title": "Texuli MCP", "description": "Texuli MCP: 35 tools, 14 resources and 4 prompts for agents, remote at texuli.com/mcp or local with npx -y @texuli/mcp, with setup for every host.", "headings": [ "Two doors, one registry", "Set up your host", "Claude Code", "Cursor", "VS Code", "Windsurf", "Codex", "Any other host", "Tools", "Edge tools", "Node tools", "Site tools", "Resources and templates", "Prompts", "Limits and security", "Remote", "Local", "Versions", "Site tools and WebMCP", "Try it" ] }, { "path": "/media-page/", "twin": "/media-page.md", "title": "Media lab", "description": "Explore Texuli media components for images, video, audio, compositions, animation, and export. Available on npm, pre-1.0.", "headings": [ "Image", "Video", "Audio", "Composition and export", "Middle frame preview", "Unsafe image layer", "Media inside larger Solutions", "For agents" ] }, { "path": "/motion-page/", "twin": "/motion-page.md", "title": "Motion that respects the reader", "description": "Texuli motion (in development): presence, FLIP layout, shared elements, timelines and springs on the Web Animations API, motion tokens and reduced motion.", "headings": [ "A capability inside larger systems", "Motion level and reduced motion", "Every preset", "Presence: overlays that enter and leave", "Every component that moves", "Layout: lists and boards that glide", "A keyed list", "A board", "Release board", "Shared elements: one card, two places", "Timelines and stagger", "Springs", "Spring lab", "Tokens explorer", "Deck motion: transitions, fragments and levels", "Motion as data: an agent declares it, the player paints it", "The blueprint", "The refused node", "Painted by the player", "Motion blueprint (untrusted)", "Every export and every token", "The rules every animation keeps", "In code", "One API contract", "Package docs", "For agents" ] }, { "path": "/native/compatibility/", "twin": "/native/compatibility.md", "title": "Native compatibility", "description": "The generated compatibility matrix for Texuli Native: each catalog component's web, Compose Desktop and conformance status, with links to the parity catalog and traces.", "headings": [ "Compatibility, component by component", "Platform status" ] }, { "path": "/native/", "twin": "/native.md", "title": "Your interface language, beyond the browser.", "description": "One blueprint contract for web and native. The web is available today; the Compose renderer is in development and paints a read-only slice; Android and iOS are planned.", "headings": [ "One blueprint, many renderers", "A report, one contract and two kinds of evidence", "Web · the report's semantic outline", "Compose Desktop · parity and trace evidence", "Why Kotlin Multiplatform", "Why Kotlin wins the native half", "How the renderer consumes the contract", "How components travel", "Examples with current trace evidence", "Complex solutions share a model, not a screen", "Compatibility, honestly", "What exists in this repository today", "The native modules", "Shipped, in this repository", "Planned", "Questions", "Native should feel native.", "Built for humans and agents, on every target.", "Start building." ] }, { "path": "/output-page/", "twin": "/output-page.md", "title": "One blueprint: a page, an email, a PDF, in any language", "description": "One Texuli blueprint, many targets: email-safe HTML with a plain-text part, print and PDF, and every component label from one i18n message catalog.", "headings": [ "Email from a blueprint", "The weekly digest as an email", "Render it yourself", "Ids that paint in email (16)", "Block types inside them (16)", "Print and PDF", "Every label from one message catalog", "A translation file from outside", "The pseudo-locale", "What keeps it safe", "Package docs", "For agents" ] }, { "path": "/output-page/preview/", "twin": "/output-page/preview.md", "title": "Harbor weekly digest", "description": "", "headings": [ "Highlights", "For agents" ] }, { "path": "/perf/", "twin": "/perf.md", "title": "Performance budgets", "description": "The lab budgets every texuli.com route is held to: HTML and page weight, JavaScript, layout shift and largest contentful paint.", "headings": [ "Measured, not claimed", "How the heavy routes stay light", "How it is measured" ] }, { "path": "/playground/", "twin": "/playground.md", "title": "Agent playground", "description": "Paste a catalog tree, run the sink-free renderer, inspect diagnostics, and try hostile presets. Static site, no runtime network.", "headings": [ "Presets, and what each one proves", "Sink-free preview", "Validation", "For agents" ] }, { "path": "/primitives-page/accordion/", "twin": "/primitives-page/accordion.md", "title": "Accordion", "description": "Stacked headings that each show or hide a section of content.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/alert-dialog/", "twin": "/primitives-page/alert-dialog.md", "title": "AlertDialog", "description": "A modal dialog that interrupts to confirm or cancel an action.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/avatar/", "twin": "/primitives-page/avatar.md", "title": "Avatar", "description": "An image with a fallback while it loads or when it fails. An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/calendar/", "twin": "/primitives-page/calendar.md", "title": "Calendar", "description": "A locale-aware month grid with keyboard navigation between days.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/checkbox/", "twin": "/primitives-page/checkbox.md", "title": "Checkbox", "description": "A two- or three-state checkbox, alone or in a group. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Checkbox pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/collapsible/", "twin": "/primitives-page/collapsible.md", "title": "Collapsible", "description": "One button that shows or hides one region. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Disclosure pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/color-picker/", "twin": "/primitives-page/color-picker.md", "title": "ColorPicker", "description": "A two-dimensional color area with hue and alpha sliders, a format field and swatches.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/combobox/", "twin": "/primitives-page/combobox.md", "title": "Combobox", "description": "A text input that filters a popup list of options, for one or many values.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/command/", "twin": "/primitives-page/command.md", "title": "Command", "description": "A search field over a filtered, grouped command list.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/context-menu/", "twin": "/primitives-page/context-menu.md", "title": "ContextMenu", "description": "A menu opened by right-click, long press or the Menu key on a region.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/date-field/", "twin": "/primitives-page/date-field.md", "title": "DateField", "description": "A segmented date (or time) input, one spin button per segment.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/date-picker/", "twin": "/primitives-page/date-picker.md", "title": "DatePicker", "description": "A date field with a button that opens a calendar dialog.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/dialog/", "twin": "/primitives-page/dialog.md", "title": "Dialog", "description": "A modal window that traps focus, makes the page inert and restores focus on close.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/file-drop/", "twin": "/primitives-page/file-drop.md", "title": "FileDrop", "description": "A drop zone and file button that validates type, size and count.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/hover-card/", "twin": "/primitives-page/hover-card.md", "title": "HoverCard", "description": "A preview card shown on hover or focus of a link, for sighted pointer users. An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/", "twin": "/primitives-page.md", "title": "Primitives", "description": "Headless, accessible Svelte 5 primitives: anatomy, APG pattern and the behavior checks for each one.", "headings": [] }, { "path": "/primitives-page/label/", "twin": "/primitives-page/label.md", "title": "Label and Field", "description": "A label, description and error wired to one control by id. An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/listbox/", "twin": "/primitives-page/listbox.md", "title": "Listbox", "description": "An inline list of options with single or multiple selection. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Listbox pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/menu/", "twin": "/primitives-page/menu.md", "title": "Menu", "description": "A menu button and its menu, with checkbox and radio items and submenus.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/menubar/", "twin": "/primitives-page/menubar.md", "title": "Menubar", "description": "A horizontal bar of menus, as in a desktop application. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Menubar pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/navigation-menu/", "twin": "/primitives-page/navigation-menu.md", "title": "NavigationMenu", "description": "Site navigation whose items open flyout panels of links.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/number-field/", "twin": "/primitives-page/number-field.md", "title": "NumberField", "description": "A locale-aware number input with step buttons. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Spinbutton pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/pagination/", "twin": "/primitives-page/pagination.md", "title": "Pagination", "description": "Page links with previous and next buttons and collapsed ranges. An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/pin-input/", "twin": "/primitives-page/pin-input.md", "title": "PinInput", "description": "A one-time code entered one character per cell. An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/popover/", "twin": "/primitives-page/popover.md", "title": "Popover", "description": "A non-modal (or modal) panel anchored to a button.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/portal/", "twin": "/primitives-page/portal.md", "title": "Portal", "description": "Moves its content to the end of the document body (or a target). An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/progress/", "twin": "/primitives-page/progress.md", "title": "Progress", "description": "A determinate or indeterminate progress bar. An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/radio-group/", "twin": "/primitives-page/radio-group.md", "title": "RadioGroup", "description": "A set of radio buttons where one is checked, with arrow-key movement.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/scroll-area/", "twin": "/primitives-page/scroll-area.md", "title": "ScrollArea", "description": "A scroll region with custom, still accessible scrollbars. An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/select/", "twin": "/primitives-page/select.md", "title": "Select", "description": "A button that opens a listbox of options, with groups and typeahead.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/separator/", "twin": "/primitives-page/separator.md", "title": "Separator", "description": "A horizontal or vertical divider, semantic or decorative. An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/sheet/", "twin": "/primitives-page/sheet.md", "title": "Sheet", "description": "A dialog that slides in from an edge; Drawer adds drag to dismiss.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/slider/", "twin": "/primitives-page/slider.md", "title": "Slider", "description": "One or more thumbs on a track, with steps and ticks. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Slider pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/sortable/", "twin": "/primitives-page/sortable.md", "title": "Sortable", "description": "Reorder and move items by pointer, touch or keyboard: lists in every axis, boards, nested lists and trees, on the @texuli/drag engine.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/splitter/", "twin": "/primitives-page/splitter.md", "title": "Splitter", "description": "Resizable panes separated by keyboard-operable handles.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/switch/", "twin": "/primitives-page/switch.md", "title": "Switch", "description": "An on/off control. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Switch pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/tabs/", "twin": "/primitives-page/tabs.md", "title": "Tabs", "description": "A tab list where each tab shows one panel. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Tabs pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/tags-input/", "twin": "/primitives-page/tags-input.md", "title": "TagsInput", "description": "A text input that turns entries into removable tags. An owned headless Svelte 5 primitive from @texuli/primitives.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/toast/", "twin": "/primitives-page/toast.md", "title": "Toast", "description": "Timed notifications announced politely, with actions. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Alert pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/toggle/", "twin": "/primitives-page/toggle.md", "title": "Toggle", "description": "A pressed/unpressed button, alone or in a group. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Button (toggle) pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/toolbar/", "twin": "/primitives-page/toolbar.md", "title": "Toolbar", "description": "A row of controls reached with one Tab stop and arrow keys. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Toolbar pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/tooltip/", "twin": "/primitives-page/tooltip.md", "title": "Tooltip", "description": "A short description shown on hover or focus, after a delay. An owned headless Svelte 5 primitive from @texuli/primitives, held to the WAI-ARIA Tooltip pattern.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/primitives-page/tree/", "twin": "/primitives-page/tree.md", "title": "Tree", "description": "A hierarchical list with expand, collapse, selection and lazy children.", "headings": [ "Live demo", "Anatomy", "Behavior checks", "Limits" ] }, { "path": "/search/", "twin": "/search.md", "title": "Search", "description": "Search Texuli docs, components, themes and examples. Static index, ⌘K palette, no runtime network.", "headings": [ "Browse", "Pages", "Docs", "Components", "Themes", "Examples", "For agents" ] }, { "path": "/sheets-page/", "twin": "/sheets-page.md", "title": "Spreadsheets with a formula engine you can trust", "description": "Texuli spreadsheets (@texuli/sheets, in development): an owned formula engine, incremental recalculation, injection-safe CSV and an accessible sheet view.", "headings": [ "A live workbook", "What the last change recalculated", "Every function, evaluated", "Incremental recalculation", "Try it above", "Cycles, limits and refused formulas", "CSV in and out", "Exported CSV", "Spreadsheets as agent data", "The blueprint the agent wrote", "The hostile cell", "Painted by the player", "In code", "Package docs", "For agents" ] }, { "path": "/showcase/checkout/", "twin": "/showcase/checkout.md", "title": "Checkout", "description": "A checkout screen built only with Texuli components: order summary and payment form chrome.", "headings": [ "Order summary", "Payment", "For agents" ] }, { "path": "/showcase/dashboard/", "twin": "/showcase/dashboard.md", "title": "Dashboard", "description": "A dashboard screen built only with Texuli components: analytics overview with KPIs and a widget grid.", "headings": [ "Harbor Notes overview", "Weekly activity", "Top tags", "Recent activity", "For agents" ] }, { "path": "/showcase/docs/", "twin": "/showcase/docs.md", "title": "Docs", "description": "A docs screen built only with Texuli components: documentation page with outline and prose.", "headings": [ "On this page", "Building with Texuli", "Install", "Accessibility", "For agents" ] }, { "path": "/showcase/inbox/", "twin": "/showcase/inbox.md", "title": "Inbox", "description": "An inbox screen built only with Texuli components: threaded messages with filters and actions.", "headings": [ "Messages", "Caption pass on ferry reel", "For agents" ] }, { "path": "/showcase/", "twin": "/showcase.md", "title": "Showcase", "description": "Complete interfaces built only with Texuli: dashboard, settings, inbox, kanban, docs, landing, checkout, media studio and slide deck.", "headings": [ "Start here", "All 9 screens", "Dashboard", "Settings", "Inbox", "Kanban", "Docs", "Landing", "Checkout", "Media studio", "Slide deck", "For agents" ] }, { "path": "/showcase/kanban/", "twin": "/showcase/kanban.md", "title": "Kanban", "description": "A kanban screen built only with Texuli components: board columns for Harbor Notes delivery work.", "headings": [ "To do 2", "In progress 1", "Done 2", "For agents" ] }, { "path": "/showcase/landing/", "twin": "/showcase/landing.md", "title": "Landing", "description": "A landing screen built only with Texuli components: marketing landing with hero and feature grid.", "headings": [ "Harbor Notes for every crew", "Accessible by default", "Static sites", "Media that stays safe", "For agents" ] }, { "path": "/showcase/media-studio/", "twin": "/showcase/media-studio.md", "title": "Media studio", "description": "A media studio screen built only with Texuli components: composition canvas chrome and export actions.", "headings": [ "Composition · Ferry poster", "Canvas", "Layers", "For agents" ] }, { "path": "/showcase/settings/", "twin": "/showcase/settings.md", "title": "Settings", "description": "A settings screen built only with Texuli components: account and workspace preferences.", "headings": [ "Profile", "Notifications", "Workspace", "For agents" ] }, { "path": "/showcase/slide-deck/", "twin": "/showcase/slide-deck.md", "title": "Slide deck", "description": "A slide deck screen built only with Texuli components: presentation slides for a product walkthrough.", "headings": [ "Harbor Notes", "For agents" ] }, { "path": "/skill/", "twin": "/skill.md", "title": "The Texuli skill", "description": "An offline agent skill for building with Texuli: install it in Claude Code, Cursor, Codex and other hosts, see what each sub-skill does, and verify its checksums.", "headings": [ "What it may do", "Install in your agent host", "Pin a release", "Install, update and uninstall", "Sub-skills", "Checksums" ] }, { "path": "/slides-page/", "twin": "/slides-page.md", "title": "Decks from JSON or Markdown, on one stage", "description": "@texuli/slides on the @texuli/deck engine (in development): decks from JSON or Markdown, 21 layouts, any Texuli component on a slide, presenter, print and PPTX.", "headings": [ "The flagship deck", "Small pieces", "Write a deck in JSON or Markdown", "Deck source", "Result", "Diagnostics", "Rendered deck", "Layouts", "Shipping calmer releases", "Backgrounds", "solid-color", "Components on slides", "Releases per month", "Releases per month", "Print, PDF and PPTX", "For agents" ] }, { "path": "/solutions/agent-chat/", "twin": "/solutions/agent-chat.md", "title": "A chat where agent replies become working interfaces.", "description": "A thread whose replies paint validated blueprints.", "headings": [ "Ask the demo agent", "Copy the last reply for another chat", "From a request in the thread to an interface people can use.", "Watch the reply arrive, and stop it.", "Mention people and run commands from the composer.", "Paint only what validates.", "From a streamed reply to a painted blueprint.", "Start with a thread", "Install", "Stream a reply", "Attach a blueprint (in development, released in 0.18.0)", "Keep building", "For agents", "Platforms", "Start building with Agent chat", "For agents" ] }, { "path": "/solutions/canvas/", "twin": "/solutions/canvas.md", "title": "Give every idea room to connect.", "description": "An embeddable whiteboard with shapes, connectors and export.", "headings": [ "Sketch a launch plan", "Canvas shapes", "What a canvas can do", "Turn scattered ideas into a clear board", "Keep every shape within keyboard reach", "Keep shared boards in step", "Carry the board into SVG or PNG", "From shape model to SVG or PNG.", "Start with a canvas", "Install", "Create a canvas", "Load untrusted JSON", "Edit with CanvasEditor", "Recipes", "For agents", "Platforms", "More Solutions", "Start building with Canvas", "For agents" ] }, { "path": "/solutions/dashboards/", "twin": "/solutions/dashboards.md", "title": "A dashboard that fits the way you work.", "description": "KPI boards people arrange, from the keyboard too.", "headings": [ "Explore a dashboard, then arrange it", "Active users", "Activation rate", "Returning users", "Support tickets", "One board, several ways to see the work", "See product signals together.", "Spot support pressure early.", "Keep the pipeline in view.", "From sample rows to a board you can arrange.", "Start with a widget grid", "Install", "Compose a dashboard", "Keep building", "For agents", "Platforms", "More Solutions", "Start building with Dashboards", "For agents" ] }, { "path": "/solutions/design-systems/", "twin": "/solutions/design-systems.md", "title": "Your brand, locked in one file.", "description": "Generate a design system from brand inputs, review it in the kit, approve it in a commit, and check every prototype against it.", "headings": [ "Lock a brand in a minute.", "2. The input and its report", "3. Preview the Harborline kit", "Join the Harborline beta", "4. Lock the allowed set", "From brand inputs to locked prototypes.", "Create: start from a brief, tokens, CSS or a logo.", "Review: see every component it allows, in light and dark.", "Approve: a person, a commit, CODEOWNERS.", "Lock: prototypes use what the brand allows.", "Share: hand it over as one versioned bundle.", "One document, every surface.", "Built on it: Protoyard.", "Run the loop from your terminal", "Install", "Create", "Approve", "Lock", "Share", "Recipes", "For agents", "Platforms", "Questions", "More Solutions", "Start building with Design systems", "For agents" ] }, { "path": "/solutions/documents/", "twin": "/solutions/documents.md", "title": "Documents you can edit, read and export.", "description": "Edit, read, paginate and export block documents.", "headings": [ "Edit a real report", "Lumen quarterly product report", "Highlights", "Metrics", "One document. Every way to work with it.", "Edit without fear: every change can be undone", "From the editor to the reader to the printed page", "One source, three formats", "From blocks to a finished document.", "Start with a document", "Install", "Create and edit", "Load untrusted JSON", "Edit with PageEditor", "Recipes", "For agents", "Platforms", "More Solutions", "Start building with Documents", "For agents" ] }, { "path": "/solutions/editor/", "twin": "/solutions/editor.md", "title": "Rich text that reads and writes Markdown, and travels to any chat.", "description": "Owned rich text with Markdown in and out, safe paste and export to any chat.", "headings": [ "Write, paste and send", "Northwind 2.4 release notes", "New", "Fixed", "Markdown in and out", "Try pasting this HTML", "Write once, keep the Markdown, send it anywhere.", "Load and save Markdown without losing the document.", "Paste from any page, safely.", "Send the same note to every chat.", "From Markdown in to a message out.", "Start with the editor", "Install", "Markdown in and out", "Block menu, emoji and chat export (in development, released in 0.18.0)", "Keep building", "For agents", "Platforms", "Start building with Rich text editor", "For agents" ] }, { "path": "/solutions/forms/", "twin": "/solutions/forms.md", "title": "Forms shaped by a schema. Ready for real workflows.", "description": "Schema-driven forms with conditions, steps and drafts.", "headings": [ "Edit a schema, then try the form", "Fill the workshop intake", "Community workshop request", "About you", "Canvas", "Inspector", "Preview", "Workshop contact form", "Schema", "One schema, from first draft to a working form.", "Ask the next question at the right time.", "Keep long intakes in clear steps.", "Shape fields, then inspect the result.", "From a closed schema to a form people can finish.", "Start with a form schema", "Install", "Validate a schema", "Keep a local draft", "Keep building", "For agents", "Platforms", "Start building with Forms", "For agents" ] }, { "path": "/solutions/", "twin": "/solutions.md", "title": "Complete systems, built from small pieces.", "description": "Embeddable open-source systems built from Texuli: design systems, slides, documents, workflows, canvases and sheets, each with its status on the web and on native targets.", "headings": [] }, { "path": "/solutions/sheets/", "twin": "/solutions/sheets.md", "title": "A spreadsheet with formulas built to recalculate.", "description": "An embeddable spreadsheet with formulas and CSV.", "headings": [ "Plan a project budget", "What you can ship in a sheet", "Totals follow every edit", "Move rows without breaking formulas", "Hand off CSV that stays inert", "Work on it together, later", "From a workbook to a grid you can edit.", "Start with a sheet", "Install", "Evaluate a formula", "Import CSV", "Edit with SheetView", "Recipes", "For agents", "Platforms", "More Solutions", "Start building with Sheets", "For agents" ] }, { "path": "/solutions/slides/", "twin": "/solutions/slides.md", "title": "Decks written as data, presented on the web.", "description": "Write decks as JSON or Markdown and present them in the browser.", "headings": [ "Present a real deck", "Small pieces. Infinite possibilities.", "Write it once. Check it, present it, hand it out.", "Catch deck errors before anyone presents", "Present on any screen, notes in view", "Good-looking slides that stay readable", "Hand it out as PDF or PPTX", "From a text file to a presented deck.", "Start with a deck", "Install", "Parse a JSON deck", "Parse a Markdown deck", "Present with DeckStage", "Recipes", "For agents", "Platforms", "More Solutions", "Start building with Slides", "For agents" ] }, { "path": "/solutions/workflows/", "twin": "/solutions/workflows.md", "title": "Workflow graphs you can draw, check and embed.", "description": "Author and view workflow graphs inside your app.", "headings": [ "Edit an approval flow", "Workflow steps", "What a workflow graph can do", "Stop invalid changes before they land.", "Place the graph predictably.", "Edit visually. Keep control of history.", "From typed graph to editable view.", "Start with a workflow graph", "Install", "Create a graph", "Lay the graph out", "Edit with WorkflowEditor", "Recipes", "For agents", "Platforms", "More Solutions", "Start building with Workflows", "For agents" ] }, { "path": "/theme-studio/", "twin": "/theme-studio.md", "title": "Design system studio", "description": "Build a Texuli design system from a seed color, a logo, a library theme or a token file: edit, preview five surfaces, check contrast, export and share.", "headings": [ "Start from", "A seed color", "A library theme", "A logo", "A tokens or design-system file", "Words", "Edit the design system", "Preview", "Contrast report", "Export", "Share", "For agents" ] }, { "path": "/theme-switcher/", "twin": "/theme-switcher.md", "title": "Theme and mode", "description": "Pick any Texuli library theme and light, dark, high-contrast or system mode. Persisted site-wide with no flash.", "headings": [ "For agents" ] }, { "path": "/tokens/components/", "twin": "/tokens/components.md", "title": "Component tokens", "description": "Every Texuli component token: 365 tokens for 57 components, each with the fallback its read carries, generated from @texuli/tokens/components.", "headings": [ "texuli", "Alert (7)", "Avatar (6)", "Badge, tag and chip (8)", "Button (18)", "Card (11)", "Carousel (2)", "Checkbox, radio and switch (6)", "Combobox (8)", "Command palette (7)", "Date field and picker (9)", "Dialog and alert dialog (11)", "Empty state (6)", "Field label and description (6)", "File upload (6)", "Icon (5)", "Input and textarea (12)", "Keyboard key (5)", "Code (7)", "Menus (12)", "Navigation menu (5)", "Number field (5)", "PIN input (5)", "Popover and hover card (10)", "Progress (6)", "Rating (4)", "Resizable panels (2)", "Scroll area (6)", "Select (15)", "Separator (1)", "Aspect ratio (1)", "Sheet, drawer and detail panel (11)", "Sidebar (7)", "Skeleton (5)", "Slider (3)", "Spinner (1)", "Stat and KPI (11)", "Stepper (8)", "Table (5)", "Tabs (8)", "Accordion and collapsible (5)", "Tags input (10)", "Color picker (3)", "Timeline (4)", "Toast (9)", "Toggle and toggle group (13)", "Toolbar (8)", "Tooltip (6)", "Tree (7)", "@texuli/data", "Data grid (3)", "Board (5)", "@texuli/charts", "Chart frame (1)", "@texuli/chat", "Chat message bubble (4)", "Chat composer (3)", "@texuli/canvas", "Canvas toolbar (4)", "@texuli/workflows", "Workflow node (4)", "@texuli/sheets", "Sheet view (4)", "@texuli/forms" ] }, { "path": "/tokens/", "twin": "/tokens.md", "title": "Design tokens", "description": "The Texuli token contract v2: 159 system tokens in 11 families with their defaults, 365 component tokens and the scope model, generated from the registries.", "headings": [ "The scope model", "How design systems and agents drive them", "Hooks", "setDesignDefaults", "System families", "Space (14)", "Size (10)", "Type roles (35)", "Elevation (8)", "Shape (9)", "Layers (8)", "Opacity (3)", "Layout (14)", "Icons (2)", "Status (20)", "Data-viz (36)" ] }, { "path": "/web-and-native/", "twin": "/web-and-native.md", "title": "Web and native, one contract — Texuli's architecture", "description": "One manifest projects to TypeScript and Kotlin: the spec seam that keeps web and native interfaces portable. What exists today, honestly.", "headings": [ "Why both technologies", "The layer graph: nine floors, dependencies point down", "The texel ladder: three rungs, two runtimes", "One contract, two projections", "One line in, two languages out", "What moves today", "Planned", "Interface portability: the mechanism", "One declaration, two projections", "Define once", "Project twice", "Tokens cross", "Semantic roles cross", "What does not move today", "What exists today", "The same catalog, capability by capability" ] }, { "path": "/whats-new/", "twin": "/whats-new.md", "title": "What’s new in Texuli", "description": "Every new Texuli package and capability from 0.6.0 to 0.18.0, each with a demo: motion, documents, forms, canvas, sheets, dashboards, MCP and design systems.", "headings": [ "0.18.0: Markdown and HTML, Texuli Emojis and four new Solutions", "0.17.0: Protoyard adoption fixes for the generator, bundles, render check and kit", "0.16.0: the design-system kit, the full locked checks and category colors", "0.15.0: locked design systems, typography and button tone", "0.14.0: timeline groups, non-text contrast and looping motion", "0.13.0: brand fields and one label dictionary", "0.12.0: pages core entries without the deck model", "0.11.0: lighter design-system hosts", "0.10.0: design systems", "0.9.0: MCP, an agent-ready site and design tokens", "0.8.0: forms, canvas, sheets and output", "0.7.0: documents", "0.6.0: motion and live generation", "For agents" ] }, { "path": "/workflows-page/", "twin": "/workflows-page.md", "title": "Workflows you can edit, read and ship as JSON", "description": "@texuli/workflows (in development): an accessible workflow editor and viewer on Texuli's own drag engine, with typed ports, auto-layout and validated JSON.", "headings": [ "The editor", "Inspector", "The read-only viewer", "For agents" ] }, { "path": "/workflows-page/json/", "twin": "/workflows-page/json.md", "title": "JSON live preview", "description": "Edit a Texuli blueprint as JSON, read the validator's diagnostics with their JSON paths, and watch @texuli/player paint it at the untrusted tier.", "headings": [ "Blueprint", "Result", "Diagnostics", "Rendered preview", "How the preview works", "What is in development", "For agents" ] } ] }