@cueplusplus/ui 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4028 -0
- package/LICENSE +21 -0
- package/NOTICE.md +34 -0
- package/README.md +237 -0
- package/dist/agent-runtime/_glyphs.js +43 -0
- package/dist/agent-runtime/branch-picker.d.ts +45 -0
- package/dist/agent-runtime/branch-picker.js +87 -0
- package/dist/agent-runtime/index.d.ts +4 -0
- package/dist/agent-runtime/index.js +4 -0
- package/dist/agent-runtime/tool-call-card.d.ts +69 -0
- package/dist/agent-runtime/tool-call-card.js +187 -0
- package/dist/agent-runtime/use-agent-thread.d.ts +164 -0
- package/dist/agent-runtime/use-agent-thread.js +251 -0
- package/dist/brand/_chassis.d.ts +54 -0
- package/dist/brand/_chassis.js +81 -0
- package/dist/brand/_geometry.js +41 -0
- package/dist/brand/cue-logotype.d.ts +29 -0
- package/dist/brand/cue-logotype.js +60 -0
- package/dist/brand/cue-mark.d.ts +30 -0
- package/dist/brand/cue-mark.js +61 -0
- package/dist/brand/index.d.ts +5 -0
- package/dist/brand/plussie.d.ts +67 -0
- package/dist/brand/plussie.js +125 -0
- package/dist/charts/_token.js +39 -0
- package/dist/charts/container.d.ts +58 -0
- package/dist/charts/container.js +77 -0
- package/dist/charts/index.d.ts +5 -0
- package/dist/charts/index.js +5 -0
- package/dist/charts/ramps.d.ts +140 -0
- package/dist/charts/ramps.js +615 -0
- package/dist/charts/theme.d.ts +112 -0
- package/dist/charts/theme.js +165 -0
- package/dist/charts/tones.d.ts +111 -0
- package/dist/charts/tones.js +127 -0
- package/dist/chat/_glyphs.js +55 -0
- package/dist/chat/agent-color.d.ts +84 -0
- package/dist/chat/agent-color.js +101 -0
- package/dist/chat/agent-pile.d.ts +55 -0
- package/dist/chat/agent-pile.js +121 -0
- package/dist/chat/ask-box.d.ts +88 -0
- package/dist/chat/ask-box.js +341 -0
- package/dist/chat/composer.d.ts +66 -0
- package/dist/chat/composer.js +144 -0
- package/dist/chat/delegation-card.d.ts +60 -0
- package/dist/chat/delegation-card.js +129 -0
- package/dist/chat/index.d.ts +8 -0
- package/dist/chat/index.js +8 -0
- package/dist/chat/message-list.d.ts +45 -0
- package/dist/chat/message-list.js +141 -0
- package/dist/chat/message.d.ts +47 -0
- package/dist/chat/message.js +108 -0
- package/dist/chrome/_band.js +54 -0
- package/dist/chrome/_drag.js +59 -0
- package/dist/chrome/_edge-scroller.d.ts +45 -0
- package/dist/chrome/_edge-scroller.js +149 -0
- package/dist/chrome/_glyphs.js +119 -0
- package/dist/chrome/_status-bar-item.js +85 -0
- package/dist/chrome/_status-bar.d.ts +15 -0
- package/dist/chrome/_status-bar.js +171 -0
- package/dist/chrome/_tabs-scroll.d.ts +67 -0
- package/dist/chrome/_tabs-scroll.js +73 -0
- package/dist/chrome/_tree.d.ts +75 -0
- package/dist/chrome/_tree.js +49 -0
- package/dist/chrome/app-bar.d.ts +103 -0
- package/dist/chrome/app-bar.js +175 -0
- package/dist/chrome/app-shell.d.ts +243 -0
- package/dist/chrome/app-shell.js +266 -0
- package/dist/chrome/band.d.ts +106 -0
- package/dist/chrome/band.js +97 -0
- package/dist/chrome/empty-state.d.ts +37 -0
- package/dist/chrome/empty-state.js +57 -0
- package/dist/chrome/eyebrow.d.ts +29 -0
- package/dist/chrome/eyebrow.js +36 -0
- package/dist/chrome/footer.d.ts +88 -0
- package/dist/chrome/footer.js +83 -0
- package/dist/chrome/index.d.ts +24 -0
- package/dist/chrome/index.js +22 -0
- package/dist/chrome/inspector.d.ts +61 -0
- package/dist/chrome/inspector.js +121 -0
- package/dist/chrome/navigation-menu.d.ts +80 -0
- package/dist/chrome/navigation-menu.js +121 -0
- package/dist/chrome/page-shell.d.ts +38 -0
- package/dist/chrome/page-shell.js +76 -0
- package/dist/chrome/panel.d.ts +55 -0
- package/dist/chrome/panel.js +67 -0
- package/dist/chrome/row.d.ts +82 -0
- package/dist/chrome/row.js +106 -0
- package/dist/chrome/scroll-area.d.ts +39 -0
- package/dist/chrome/scroll-area.js +70 -0
- package/dist/chrome/section-header.d.ts +42 -0
- package/dist/chrome/section-header.js +79 -0
- package/dist/chrome/segmented-control.d.ts +77 -0
- package/dist/chrome/segmented-control.js +95 -0
- package/dist/chrome/status-bar.d.ts +129 -0
- package/dist/chrome/status-bar.js +120 -0
- package/dist/chrome/tabs.d.ts +80 -0
- package/dist/chrome/tabs.js +132 -0
- package/dist/chrome/title-bar.d.ts +47 -0
- package/dist/chrome/title-bar.js +43 -0
- package/dist/chrome/toolbar.d.ts +68 -0
- package/dist/chrome/toolbar.js +83 -0
- package/dist/chrome/tree.d.ts +98 -0
- package/dist/chrome/tree.js +248 -0
- package/dist/color/_checker.js +14 -0
- package/dist/color/_convert.d.ts +52 -0
- package/dist/color/_convert.js +66 -0
- package/dist/color/_glyphs.js +28 -0
- package/dist/color/_thumb.js +15 -0
- package/dist/color/_value.js +28 -0
- package/dist/color/color-area.d.ts +27 -0
- package/dist/color/color-area.js +40 -0
- package/dist/color/color-field.d.ts +32 -0
- package/dist/color/color-field.js +43 -0
- package/dist/color/color-picker.d.ts +71 -0
- package/dist/color/color-picker.js +178 -0
- package/dist/color/color-slider.d.ts +31 -0
- package/dist/color/color-slider.js +51 -0
- package/dist/color/color-swatch.d.ts +32 -0
- package/dist/color/color-swatch.js +44 -0
- package/dist/color/index.d.ts +7 -0
- package/dist/color/index.js +7 -0
- package/dist/configurator/_export.d.ts +78 -0
- package/dist/configurator/_export.js +302 -0
- package/dist/configurator/_glyphs.js +92 -0
- package/dist/configurator/_overrides.d.ts +266 -0
- package/dist/configurator/_overrides.js +541 -0
- package/dist/configurator/configurator.d.ts +71 -0
- package/dist/configurator/configurator.js +284 -0
- package/dist/configurator/export-dialog.d.ts +30 -0
- package/dist/configurator/export-dialog.js +121 -0
- package/dist/configurator/index.d.ts +8 -0
- package/dist/configurator/index.js +8 -0
- package/dist/configurator/panel-sections.d.ts +86 -0
- package/dist/configurator/panel-sections.js +352 -0
- package/dist/configurator/token-editor.d.ts +74 -0
- package/dist/configurator/token-editor.js +152 -0
- package/dist/configurator/use-zoom.d.ts +87 -0
- package/dist/configurator/use-zoom.js +113 -0
- package/dist/date/_glyphs.js +34 -0
- package/dist/date/_segments.js +101 -0
- package/dist/date/_trigger.js +31 -0
- package/dist/date/calendar.d.ts +25 -0
- package/dist/date/calendar.js +125 -0
- package/dist/date/date-field.d.ts +34 -0
- package/dist/date/date-field.js +41 -0
- package/dist/date/date-picker.d.ts +69 -0
- package/dist/date/date-picker.js +89 -0
- package/dist/date/date-range-picker.d.ts +65 -0
- package/dist/date/date-range-picker.js +92 -0
- package/dist/date/index.d.ts +6 -0
- package/dist/date/index.js +6 -0
- package/dist/date/time-field.d.ts +29 -0
- package/dist/date/time-field.js +36 -0
- package/dist/dmx/_ramp.d.ts +77 -0
- package/dist/dmx/_ramp.js +169 -0
- package/dist/dmx/_readout.js +53 -0
- package/dist/dmx/_universe.d.ts +105 -0
- package/dist/dmx/_universe.js +112 -0
- package/dist/dmx/channel-matrix.d.ts +81 -0
- package/dist/dmx/channel-matrix.js +285 -0
- package/dist/dmx/dmx-bar.d.ts +50 -0
- package/dist/dmx/dmx-bar.js +107 -0
- package/dist/dmx/dmx-strip.d.ts +41 -0
- package/dist/dmx/dmx-strip.js +196 -0
- package/dist/dmx/index.d.ts +7 -0
- package/dist/dmx/index.js +7 -0
- package/dist/dmx/universe-grid.d.ts +61 -0
- package/dist/dmx/universe-grid.js +182 -0
- package/dist/elements/activity-graph.d.ts +40 -0
- package/dist/elements/activity-graph.js +81 -0
- package/dist/elements/agent-card.d.ts +49 -0
- package/dist/elements/agent-card.js +91 -0
- package/dist/elements/agent-handoff.d.ts +24 -0
- package/dist/elements/agent-handoff.js +53 -0
- package/dist/elements/agent-mode-badge.d.ts +72 -0
- package/dist/elements/agent-mode-badge.js +110 -0
- package/dist/elements/agent-plan.d.ts +24 -0
- package/dist/elements/agent-plan.js +74 -0
- package/dist/elements/agent-status.d.ts +29 -0
- package/dist/elements/agent-status.js +46 -0
- package/dist/elements/agent-surface.d.ts +65 -0
- package/dist/elements/agent-surface.js +68 -0
- package/dist/elements/animated-number.d.ts +86 -0
- package/dist/elements/animated-number.js +118 -0
- package/dist/elements/approval-card.d.ts +40 -0
- package/dist/elements/approval-card.js +78 -0
- package/dist/elements/artifact-card.d.ts +30 -0
- package/dist/elements/artifact-card.js +58 -0
- package/dist/elements/background-inbox.d.ts +39 -0
- package/dist/elements/background-inbox.js +60 -0
- package/dist/elements/canvas-split.d.ts +77 -0
- package/dist/elements/canvas-split.js +138 -0
- package/dist/elements/chart.d.ts +41 -0
- package/dist/elements/chart.js +117 -0
- package/dist/elements/chat-panel.d.ts +46 -0
- package/dist/elements/chat-panel.js +104 -0
- package/dist/elements/checkpoint-history.d.ts +31 -0
- package/dist/elements/checkpoint-history.js +65 -0
- package/dist/elements/clamp.d.ts +90 -0
- package/dist/elements/clamp.js +109 -0
- package/dist/elements/code-diff.d.ts +42 -0
- package/dist/elements/code-diff.js +69 -0
- package/dist/elements/code-runner.d.ts +38 -0
- package/dist/elements/code-runner.js +84 -0
- package/dist/elements/command-palette.d.ts +48 -0
- package/dist/elements/command-palette.js +129 -0
- package/dist/elements/compaction-row.d.ts +63 -0
- package/dist/elements/compaction-row.js +110 -0
- package/dist/elements/comparison-card.d.ts +47 -0
- package/dist/elements/comparison-card.js +69 -0
- package/dist/elements/composer.d.ts +274 -0
- package/dist/elements/composer.js +505 -0
- package/dist/elements/computer-use.d.ts +40 -0
- package/dist/elements/computer-use.js +92 -0
- package/dist/elements/confidence-marker.d.ts +39 -0
- package/dist/elements/confidence-marker.js +64 -0
- package/dist/elements/connection-state.d.ts +29 -0
- package/dist/elements/connection-state.js +66 -0
- package/dist/elements/context-breakdown.d.ts +30 -0
- package/dist/elements/context-breakdown.js +86 -0
- package/dist/elements/context-usage.d.ts +99 -0
- package/dist/elements/context-usage.js +225 -0
- package/dist/elements/conversation-search.d.ts +48 -0
- package/dist/elements/conversation-search.js +88 -0
- package/dist/elements/cost-meter.d.ts +33 -0
- package/dist/elements/cost-meter.js +75 -0
- package/dist/elements/data-table.d.ts +31 -0
- package/dist/elements/data-table.js +67 -0
- package/dist/elements/day-separator.d.ts +34 -0
- package/dist/elements/day-separator.js +50 -0
- package/dist/elements/diagram.d.ts +34 -0
- package/dist/elements/diagram.js +75 -0
- package/dist/elements/document-reference.d.ts +37 -0
- package/dist/elements/document-reference.js +66 -0
- package/dist/elements/draft-restore.d.ts +27 -0
- package/dist/elements/draft-restore.js +54 -0
- package/dist/elements/edit-message.d.ts +36 -0
- package/dist/elements/edit-message.js +77 -0
- package/dist/elements/elements.css +459 -0
- package/dist/elements/elicitation-form.d.ts +48 -0
- package/dist/elements/elicitation-form.js +106 -0
- package/dist/elements/empty-state.d.ts +52 -0
- package/dist/elements/empty-state.js +98 -0
- package/dist/elements/end-of-turn-summary.d.ts +60 -0
- package/dist/elements/end-of-turn-summary.js +75 -0
- package/dist/elements/error-state.d.ts +29 -0
- package/dist/elements/error-state.js +55 -0
- package/dist/elements/feedback-dialog.d.ts +36 -0
- package/dist/elements/feedback-dialog.js +81 -0
- package/dist/elements/file-tree.d.ts +45 -0
- package/dist/elements/file-tree.js +84 -0
- package/dist/elements/flow-graph.d.ts +45 -0
- package/dist/elements/flow-graph.js +78 -0
- package/dist/elements/generative/chart.js +200 -0
- package/dist/elements/generative/faults.js +111 -0
- package/dist/elements/generative/icons.d.ts +41 -0
- package/dist/elements/generative/icons.js +190 -0
- package/dist/elements/generative/intrinsics.js +483 -0
- package/dist/elements/generative/spec.d.ts +110 -0
- package/dist/elements/generative/spec.js +366 -0
- package/dist/elements/generative.css +1145 -0
- package/dist/elements/generative.d.ts +144 -0
- package/dist/elements/generative.js +126 -0
- package/dist/elements/guardrail-notice.d.ts +29 -0
- package/dist/elements/guardrail-notice.js +63 -0
- package/dist/elements/image-generation.d.ts +18 -0
- package/dist/elements/image-generation.js +64 -0
- package/dist/elements/index.d.ts +116 -0
- package/dist/elements/index.js +115 -0
- package/dist/elements/inline-citation.d.ts +43 -0
- package/dist/elements/inline-citation.js +93 -0
- package/dist/elements/job-progress.d.ts +49 -0
- package/dist/elements/job-progress.js +74 -0
- package/dist/elements/launcher-bubble.d.ts +34 -0
- package/dist/elements/launcher-bubble.js +72 -0
- package/dist/elements/live-region-announcer.d.ts +130 -0
- package/dist/elements/live-region-announcer.js +230 -0
- package/dist/elements/loading-state.d.ts +27 -0
- package/dist/elements/loading-state.js +36 -0
- package/dist/elements/map-answer.d.ts +38 -0
- package/dist/elements/map-answer.js +93 -0
- package/dist/elements/markdown.d.ts +131 -0
- package/dist/elements/markdown.js +528 -0
- package/dist/elements/math-block.d.ts +51 -0
- package/dist/elements/math-block.js +70 -0
- package/dist/elements/mcp-server-panel.d.ts +41 -0
- package/dist/elements/mcp-server-panel.js +115 -0
- package/dist/elements/memory-chips.d.ts +30 -0
- package/dist/elements/memory-chips.js +43 -0
- package/dist/elements/message-actions.d.ts +38 -0
- package/dist/elements/message-actions.js +71 -0
- package/dist/elements/message-attachment.d.ts +48 -0
- package/dist/elements/message-attachment.js +63 -0
- package/dist/elements/message-branches.d.ts +25 -0
- package/dist/elements/message-branches.js +65 -0
- package/dist/elements/message-pair.d.ts +33 -0
- package/dist/elements/message-pair.js +65 -0
- package/dist/elements/message-queue.d.ts +31 -0
- package/dist/elements/message-queue.js +80 -0
- package/dist/elements/message-timing.d.ts +33 -0
- package/dist/elements/message-timing.js +37 -0
- package/dist/elements/mobile-composer.d.ts +44 -0
- package/dist/elements/mobile-composer.js +88 -0
- package/dist/elements/model-picker.d.ts +38 -0
- package/dist/elements/model-picker.js +69 -0
- package/dist/elements/number-ticker.d.ts +18 -0
- package/dist/elements/number-ticker.js +47 -0
- package/dist/elements/onboarding.d.ts +30 -0
- package/dist/elements/onboarding.js +75 -0
- package/dist/elements/permission-grant.d.ts +35 -0
- package/dist/elements/permission-grant.js +86 -0
- package/dist/elements/permission-scopes.d.ts +215 -0
- package/dist/elements/permission-scopes.js +249 -0
- package/dist/elements/prompt-library.d.ts +43 -0
- package/dist/elements/prompt-library.js +117 -0
- package/dist/elements/queue-dock.d.ts +101 -0
- package/dist/elements/queue-dock.js +132 -0
- package/dist/elements/quota-banner.d.ts +26 -0
- package/dist/elements/quota-banner.js +66 -0
- package/dist/elements/quote-reply.d.ts +44 -0
- package/dist/elements/quote-reply.js +79 -0
- package/dist/elements/range.d.ts +29 -0
- package/dist/elements/range.js +45 -0
- package/dist/elements/read-aloud.d.ts +45 -0
- package/dist/elements/read-aloud.js +75 -0
- package/dist/elements/reasoning-effort.d.ts +36 -0
- package/dist/elements/reasoning-effort.js +67 -0
- package/dist/elements/reasoning-panel.d.ts +46 -0
- package/dist/elements/reasoning-panel.js +75 -0
- package/dist/elements/recommendation-card.d.ts +45 -0
- package/dist/elements/recommendation-card.js +83 -0
- package/dist/elements/regenerate-menu.d.ts +45 -0
- package/dist/elements/regenerate-menu.js +51 -0
- package/dist/elements/replay.d.ts +217 -0
- package/dist/elements/replay.js +498 -0
- package/dist/elements/research-report.d.ts +38 -0
- package/dist/elements/research-report.js +69 -0
- package/dist/elements/retrieval-chunks.d.ts +43 -0
- package/dist/elements/retrieval-chunks.js +81 -0
- package/dist/elements/revert-dock.d.ts +159 -0
- package/dist/elements/revert-dock.js +327 -0
- package/dist/elements/reviewable-diff.d.ts +45 -0
- package/dist/elements/reviewable-diff.js +110 -0
- package/dist/elements/risk-badge.d.ts +52 -0
- package/dist/elements/risk-badge.js +91 -0
- package/dist/elements/schedule-card.d.ts +42 -0
- package/dist/elements/schedule-card.js +90 -0
- package/dist/elements/score-breakdown.d.ts +47 -0
- package/dist/elements/score-breakdown.js +82 -0
- package/dist/elements/scroll-anchor.d.ts +32 -0
- package/dist/elements/scroll-anchor.js +123 -0
- package/dist/elements/settings-panel.d.ts +52 -0
- package/dist/elements/settings-panel.js +107 -0
- package/dist/elements/shared-conversation.d.ts +39 -0
- package/dist/elements/shared-conversation.js +68 -0
- package/dist/elements/sources.d.ts +33 -0
- package/dist/elements/sources.js +61 -0
- package/dist/elements/speaker-identity.d.ts +32 -0
- package/dist/elements/speaker-identity.js +51 -0
- package/dist/elements/spec-sheet.d.ts +31 -0
- package/dist/elements/spec-sheet.js +45 -0
- package/dist/elements/stopped-run.d.ts +22 -0
- package/dist/elements/stopped-run.js +50 -0
- package/dist/elements/streaming-text.d.ts +31 -0
- package/dist/elements/streaming-text.js +45 -0
- package/dist/elements/subagent-list.d.ts +37 -0
- package/dist/elements/subagent-list.js +79 -0
- package/dist/elements/suggestions.d.ts +30 -0
- package/dist/elements/suggestions.js +36 -0
- package/dist/elements/surfaces.d.ts +85 -0
- package/dist/elements/surfaces.js +108 -0
- package/dist/elements/tail-status.d.ts +131 -0
- package/dist/elements/tail-status.js +94 -0
- package/dist/elements/terminal-block.d.ts +29 -0
- package/dist/elements/terminal-block.js +54 -0
- package/dist/elements/thinking-indicator.d.ts +18 -0
- package/dist/elements/thinking-indicator.js +36 -0
- package/dist/elements/thread-list.d.ts +35 -0
- package/dist/elements/thread-list.js +68 -0
- package/dist/elements/thread-search.d.ts +42 -0
- package/dist/elements/thread-search.js +99 -0
- package/dist/elements/timeline.d.ts +37 -0
- package/dist/elements/timeline.js +46 -0
- package/dist/elements/todo-list.d.ts +42 -0
- package/dist/elements/todo-list.js +59 -0
- package/dist/elements/tool-call.d.ts +41 -0
- package/dist/elements/tool-call.js +85 -0
- package/dist/elements/tool-error.d.ts +39 -0
- package/dist/elements/tool-error.js +76 -0
- package/dist/elements/tool-group.d.ts +45 -0
- package/dist/elements/tool-group.js +71 -0
- package/dist/elements/tool-timeline.d.ts +65 -0
- package/dist/elements/tool-timeline.js +88 -0
- package/dist/elements/trace-waterfall.d.ts +37 -0
- package/dist/elements/trace-waterfall.js +69 -0
- package/dist/elements/transcript-rules.d.ts +67 -0
- package/dist/elements/transcript-rules.js +95 -0
- package/dist/elements/turn-footer.d.ts +74 -0
- package/dist/elements/turn-footer.js +101 -0
- package/dist/elements/typing-indicator.d.ts +16 -0
- package/dist/elements/typing-indicator.js +51 -0
- package/dist/elements/verdict-row.d.ts +89 -0
- package/dist/elements/verdict-row.js +150 -0
- package/dist/elements/vocabulary.d.ts +612 -0
- package/dist/elements/vocabulary.js +611 -0
- package/dist/elements/voice-conversation.d.ts +49 -0
- package/dist/elements/voice-conversation.js +123 -0
- package/dist/elements/web-preview.d.ts +32 -0
- package/dist/elements/web-preview.js +66 -0
- package/dist/elements/web-search.d.ts +37 -0
- package/dist/elements/web-search.js +66 -0
- package/dist/elements/work-collapse.d.ts +103 -0
- package/dist/elements/work-collapse.js +131 -0
- package/dist/flow/_frame.d.ts +52 -0
- package/dist/flow/_frame.js +38 -0
- package/dist/flow/controls.d.ts +41 -0
- package/dist/flow/controls.js +53 -0
- package/dist/flow/flow.css +121 -0
- package/dist/flow/handles.d.ts +40 -0
- package/dist/flow/handles.js +61 -0
- package/dist/flow/index.d.ts +7 -0
- package/dist/flow/index.js +7 -0
- package/dist/flow/node-card.d.ts +71 -0
- package/dist/flow/node-card.js +102 -0
- package/dist/flow/signal-edge.d.ts +60 -0
- package/dist/flow/signal-edge.js +108 -0
- package/dist/flow/use-flow-theme.d.ts +69 -0
- package/dist/flow/use-flow-theme.js +109 -0
- package/dist/forms/_chassis.d.ts +164 -0
- package/dist/forms/_chassis.js +159 -0
- package/dist/forms/_glyphs.js +143 -0
- package/dist/forms/_listbox.js +55 -0
- package/dist/forms/autocomplete.d.ts +61 -0
- package/dist/forms/autocomplete.js +88 -0
- package/dist/forms/button-group.d.ts +47 -0
- package/dist/forms/button-group.js +52 -0
- package/dist/forms/checkbox.d.ts +51 -0
- package/dist/forms/checkbox.js +98 -0
- package/dist/forms/combobox.d.ts +73 -0
- package/dist/forms/combobox.js +108 -0
- package/dist/forms/env-var-input.d.ts +74 -0
- package/dist/forms/env-var-input.js +116 -0
- package/dist/forms/field.d.ts +89 -0
- package/dist/forms/field.js +102 -0
- package/dist/forms/file-upload.d.ts +113 -0
- package/dist/forms/file-upload.js +232 -0
- package/dist/forms/index.d.ts +26 -0
- package/dist/forms/index.js +26 -0
- package/dist/forms/input-group.d.ts +36 -0
- package/dist/forms/input-group.js +59 -0
- package/dist/forms/input.d.ts +45 -0
- package/dist/forms/input.js +36 -0
- package/dist/forms/multi-select.d.ts +62 -0
- package/dist/forms/multi-select.js +107 -0
- package/dist/forms/number-field.d.ts +39 -0
- package/dist/forms/number-field.js +65 -0
- package/dist/forms/otp-field.d.ts +54 -0
- package/dist/forms/otp-field.js +59 -0
- package/dist/forms/password-input.d.ts +46 -0
- package/dist/forms/password-input.js +62 -0
- package/dist/forms/radio-group.d.ts +50 -0
- package/dist/forms/radio-group.js +64 -0
- package/dist/forms/rating.d.ts +69 -0
- package/dist/forms/rating.js +103 -0
- package/dist/forms/scrub-input.d.ts +81 -0
- package/dist/forms/scrub-input.js +249 -0
- package/dist/forms/search-input.d.ts +54 -0
- package/dist/forms/search-input.js +112 -0
- package/dist/forms/select.d.ts +75 -0
- package/dist/forms/select.js +91 -0
- package/dist/forms/slider.d.ts +44 -0
- package/dist/forms/slider.js +65 -0
- package/dist/forms/switch.d.ts +36 -0
- package/dist/forms/switch.js +71 -0
- package/dist/forms/tags-input.d.ts +69 -0
- package/dist/forms/tags-input.js +148 -0
- package/dist/forms/textarea.d.ts +39 -0
- package/dist/forms/textarea.js +37 -0
- package/dist/forms/toggle-group.d.ts +41 -0
- package/dist/forms/toggle-group.js +56 -0
- package/dist/forms/toggle.d.ts +47 -0
- package/dist/forms/toggle.js +100 -0
- package/dist/icons/containers.d.ts +89 -0
- package/dist/icons/containers.js +295 -0
- package/dist/icons/index.d.ts +2 -0
- package/dist/index.d.ts +138 -0
- package/dist/index.js +124 -0
- package/dist/instruments/_ansi.js +116 -0
- package/dist/instruments/_data-row.d.ts +68 -0
- package/dist/instruments/_data-row.js +139 -0
- package/dist/instruments/_glyphs.js +90 -0
- package/dist/instruments/_ledger-disclosure.js +103 -0
- package/dist/instruments/_ledger.d.ts +21 -0
- package/dist/instruments/_ledger.js +5 -0
- package/dist/instruments/_motion.js +56 -0
- package/dist/instruments/_rem.js +21 -0
- package/dist/instruments/app-window-frame.d.ts +48 -0
- package/dist/instruments/app-window-frame.js +76 -0
- package/dist/instruments/code-block.d.ts +35 -0
- package/dist/instruments/code-block.js +173 -0
- package/dist/instruments/copy-button.d.ts +41 -0
- package/dist/instruments/copy-button.js +112 -0
- package/dist/instruments/data-row.d.ts +94 -0
- package/dist/instruments/data-row.js +151 -0
- package/dist/instruments/data-table.d.ts +168 -0
- package/dist/instruments/data-table.js +212 -0
- package/dist/instruments/data-tree.d.ts +126 -0
- package/dist/instruments/data-tree.js +303 -0
- package/dist/instruments/group-bar.d.ts +63 -0
- package/dist/instruments/group-bar.js +122 -0
- package/dist/instruments/index.d.ts +18 -0
- package/dist/instruments/index.js +18 -0
- package/dist/instruments/ledger.d.ts +204 -0
- package/dist/instruments/ledger.js +204 -0
- package/dist/instruments/log-viewer.d.ts +74 -0
- package/dist/instruments/log-viewer.js +215 -0
- package/dist/instruments/meter.d.ts +81 -0
- package/dist/instruments/meter.js +96 -0
- package/dist/instruments/progress.d.ts +61 -0
- package/dist/instruments/progress.js +79 -0
- package/dist/instruments/seam-grid.d.ts +66 -0
- package/dist/instruments/seam-grid.js +78 -0
- package/dist/instruments/sparkline.d.ts +39 -0
- package/dist/instruments/sparkline.js +85 -0
- package/dist/instruments/stat.d.ts +35 -0
- package/dist/instruments/stat.js +59 -0
- package/dist/instruments/table.d.ts +170 -0
- package/dist/instruments/table.js +237 -0
- package/dist/instruments/terminal-frame.d.ts +89 -0
- package/dist/instruments/terminal-frame.js +256 -0
- package/dist/instruments/two-step-button.d.ts +47 -0
- package/dist/instruments/two-step-button.js +166 -0
- package/dist/instruments/usage-chart.d.ts +55 -0
- package/dist/instruments/usage-chart.js +235 -0
- package/dist/layout/_collapse.js +46 -0
- package/dist/layout/_glyphs.js +45 -0
- package/dist/layout/_ground.d.ts +22 -0
- package/dist/layout/_ground.js +9 -0
- package/dist/layout/accordion.d.ts +52 -0
- package/dist/layout/accordion.js +81 -0
- package/dist/layout/bento.d.ts +144 -0
- package/dist/layout/bento.js +266 -0
- package/dist/layout/breadcrumb.d.ts +35 -0
- package/dist/layout/breadcrumb.js +67 -0
- package/dist/layout/card.d.ts +51 -0
- package/dist/layout/card.js +76 -0
- package/dist/layout/carousel.d.ts +96 -0
- package/dist/layout/carousel.js +211 -0
- package/dist/layout/collapsible.d.ts +74 -0
- package/dist/layout/collapsible.js +126 -0
- package/dist/layout/container.d.ts +27 -0
- package/dist/layout/container.js +43 -0
- package/dist/layout/description-list.d.ts +24 -0
- package/dist/layout/description-list.js +37 -0
- package/dist/layout/frames.d.ts +70 -0
- package/dist/layout/frames.js +298 -0
- package/dist/layout/grid.d.ts +40 -0
- package/dist/layout/grid.js +48 -0
- package/dist/layout/index.d.ts +19 -0
- package/dist/layout/index.js +18 -0
- package/dist/layout/item.d.ts +65 -0
- package/dist/layout/item.js +100 -0
- package/dist/layout/link.d.ts +48 -0
- package/dist/layout/link.js +63 -0
- package/dist/layout/pagination.d.ts +54 -0
- package/dist/layout/pagination.js +121 -0
- package/dist/layout/preview.d.ts +177 -0
- package/dist/layout/preview.js +628 -0
- package/dist/layout/resizable.d.ts +38 -0
- package/dist/layout/resizable.js +68 -0
- package/dist/layout/sidebar.d.ts +105 -0
- package/dist/layout/sidebar.js +158 -0
- package/dist/layout/stack.d.ts +46 -0
- package/dist/layout/stack.js +62 -0
- package/dist/layout/stepper.d.ts +49 -0
- package/dist/layout/stepper.js +81 -0
- package/dist/layout/timeline.d.ts +43 -0
- package/dist/layout/timeline.js +63 -0
- package/dist/lib/aria-class.js +24 -0
- package/dist/lib/cn.js +18 -0
- package/dist/lib/compose.js +38 -0
- package/dist/lib/cva.d.ts +18 -0
- package/dist/lib/cva.js +65 -0
- package/dist/midi/_notes.d.ts +101 -0
- package/dist/midi/_notes.js +183 -0
- package/dist/midi/_ruler.d.ts +100 -0
- package/dist/midi/_ruler.js +105 -0
- package/dist/midi/_time.d.ts +107 -0
- package/dist/midi/_time.js +130 -0
- package/dist/midi/index.d.ts +9 -0
- package/dist/midi/index.js +9 -0
- package/dist/midi/musical-time-input.d.ts +48 -0
- package/dist/midi/musical-time-input.js +154 -0
- package/dist/midi/piano-keyboard.d.ts +50 -0
- package/dist/midi/piano-keyboard.js +197 -0
- package/dist/midi/spectrum-visualizer.d.ts +65 -0
- package/dist/midi/spectrum-visualizer.js +213 -0
- package/dist/midi/threshold-rail.d.ts +72 -0
- package/dist/midi/threshold-rail.js +214 -0
- package/dist/midi/timeline-ruler.d.ts +83 -0
- package/dist/midi/timeline-ruler.js +152 -0
- package/dist/overlays/_debounce.js +34 -0
- package/dist/overlays/_glyphs.js +59 -0
- package/dist/overlays/_surface.d.ts +70 -0
- package/dist/overlays/_surface.js +70 -0
- package/dist/overlays/_wheel.js +42 -0
- package/dist/overlays/alert-dialog.d.ts +67 -0
- package/dist/overlays/alert-dialog.js +117 -0
- package/dist/overlays/command-palette.d.ts +93 -0
- package/dist/overlays/command-palette.js +193 -0
- package/dist/overlays/context-menu.d.ts +64 -0
- package/dist/overlays/context-menu.js +78 -0
- package/dist/overlays/dialog.d.ts +72 -0
- package/dist/overlays/dialog.js +124 -0
- package/dist/overlays/drawer.d.ts +75 -0
- package/dist/overlays/drawer.js +151 -0
- package/dist/overlays/dropdown-menu.d.ts +79 -0
- package/dist/overlays/dropdown-menu.js +156 -0
- package/dist/overlays/hover-card.d.ts +58 -0
- package/dist/overlays/hover-card.js +91 -0
- package/dist/overlays/index.d.ts +15 -0
- package/dist/overlays/index.js +15 -0
- package/dist/overlays/info-tip.d.ts +41 -0
- package/dist/overlays/info-tip.js +45 -0
- package/dist/overlays/menubar.d.ts +72 -0
- package/dist/overlays/menubar.js +100 -0
- package/dist/overlays/popover.d.ts +66 -0
- package/dist/overlays/popover.js +114 -0
- package/dist/overlays/sheet.d.ts +78 -0
- package/dist/overlays/sheet.js +131 -0
- package/dist/overlays/toast.d.ts +106 -0
- package/dist/overlays/toast.js +146 -0
- package/dist/overlays/tooltip.d.ts +57 -0
- package/dist/overlays/tooltip.js +95 -0
- package/dist/primitives/avatar.d.ts +51 -0
- package/dist/primitives/avatar.js +93 -0
- package/dist/primitives/button.d.ts +58 -0
- package/dist/primitives/button.js +104 -0
- package/dist/primitives/chip.d.ts +73 -0
- package/dist/primitives/chip.js +238 -0
- package/dist/primitives/icon-button.d.ts +41 -0
- package/dist/primitives/icon-button.js +59 -0
- package/dist/primitives/index.d.ts +10 -0
- package/dist/primitives/index.js +10 -0
- package/dist/primitives/kbd.d.ts +17 -0
- package/dist/primitives/kbd.js +24 -0
- package/dist/primitives/separator.d.ts +25 -0
- package/dist/primitives/separator.js +30 -0
- package/dist/primitives/skeleton.d.ts +20 -0
- package/dist/primitives/skeleton.js +27 -0
- package/dist/primitives/spinner.d.ts +26 -0
- package/dist/primitives/spinner.js +31 -0
- package/dist/primitives/status-dot.d.ts +51 -0
- package/dist/primitives/status-dot.js +57 -0
- package/dist/styles.css +97 -0
- package/dist/system/agent-skin.d.ts +27 -0
- package/dist/system/agent-skin.js +20 -0
- package/dist/system/density.d.ts +73 -0
- package/dist/system/density.js +111 -0
- package/dist/system/index.d.ts +12 -0
- package/dist/system/index.js +10 -0
- package/dist/system/overrides.d.ts +80 -0
- package/dist/system/overrides.js +277 -0
- package/dist/system/portal.d.ts +56 -0
- package/dist/system/portal.js +193 -0
- package/dist/system/prepaint.d.ts +134 -0
- package/dist/system/prepaint.js +120 -0
- package/dist/system/theme-provider.d.ts +290 -0
- package/dist/system/theme-provider.js +543 -0
- package/dist/system/theme-registry.d.ts +53 -0
- package/dist/system/theme-registry.js +66 -0
- package/dist/system/use-density.d.ts +50 -0
- package/dist/system/use-density.js +232 -0
- package/dist/system/use-isomorphic-layout-effect.js +33 -0
- package/dist/system/use-theme.d.ts +30 -0
- package/dist/system/use-theme.js +36 -0
- package/dist/system/vocabulary.d.ts +16 -0
- package/dist/system/vocabulary.js +125 -0
- package/dist/theming/contrast.d.ts +2 -0
- package/dist/theming/contrast.js +2 -0
- package/dist/theming/create-theme.d.ts +195 -0
- package/dist/theming/create-theme.js +524 -0
- package/dist/theming/index.d.ts +4 -0
- package/dist/theming/index.js +4 -0
- package/dist/theming/serialize.d.ts +167 -0
- package/dist/theming/serialize.js +241 -0
- package/manifest/components/accordion.json +173 -0
- package/manifest/components/activity-graph.json +104 -0
- package/manifest/components/agent-card.json +150 -0
- package/manifest/components/agent-handoff.json +104 -0
- package/manifest/components/agent-mode-badge.json +102 -0
- package/manifest/components/agent-pile.json +147 -0
- package/manifest/components/agent-plan.json +74 -0
- package/manifest/components/agent-status.json +87 -0
- package/manifest/components/agent-surface.json +93 -0
- package/manifest/components/alert-dialog.json +215 -0
- package/manifest/components/animated-number.json +75 -0
- package/manifest/components/app-bar.json +297 -0
- package/manifest/components/app-shell.json +526 -0
- package/manifest/components/app-window-frame.json +124 -0
- package/manifest/components/approval-card.json +136 -0
- package/manifest/components/artifact-card.json +93 -0
- package/manifest/components/ask-box.json +288 -0
- package/manifest/components/audience-icon.json +46 -0
- package/manifest/components/autocomplete.json +262 -0
- package/manifest/components/avatar-group.json +83 -0
- package/manifest/components/avatar.json +113 -0
- package/manifest/components/background-inbox.json +79 -0
- package/manifest/components/band.json +104 -0
- package/manifest/components/bento.json +306 -0
- package/manifest/components/branch-picker.json +146 -0
- package/manifest/components/breadcrumb.json +85 -0
- package/manifest/components/button-group.json +91 -0
- package/manifest/components/button.json +163 -0
- package/manifest/components/calendar.json +65 -0
- package/manifest/components/canvas-split-body.json +66 -0
- package/manifest/components/canvas-split-document.json +55 -0
- package/manifest/components/canvas-split-header.json +97 -0
- package/manifest/components/canvas-split-line.json +66 -0
- package/manifest/components/canvas-split-message.json +70 -0
- package/manifest/components/canvas-split-thread.json +55 -0
- package/manifest/components/canvas-split.json +61 -0
- package/manifest/components/card.json +152 -0
- package/manifest/components/carousel.json +242 -0
- package/manifest/components/catalogue-icon.json +46 -0
- package/manifest/components/channel-beta-icon.json +46 -0
- package/manifest/components/channel-matrix.json +239 -0
- package/manifest/components/channel-released-icon.json +46 -0
- package/manifest/components/chart-container.json +127 -0
- package/manifest/components/chart-ramp.json +82 -0
- package/manifest/components/chart-swatch.json +72 -0
- package/manifest/components/chart-tooltip-content.json +140 -0
- package/manifest/components/chart.json +117 -0
- package/manifest/components/chat-empty-state.json +55 -0
- package/manifest/components/chat-panel-assistant-message.json +52 -0
- package/manifest/components/chat-panel-composer.json +74 -0
- package/manifest/components/chat-panel-messages.json +52 -0
- package/manifest/components/chat-panel-typing.json +52 -0
- package/manifest/components/chat-panel-user-message.json +52 -0
- package/manifest/components/chat-panel.json +58 -0
- package/manifest/components/checkbox-group.json +70 -0
- package/manifest/components/checkbox.json +106 -0
- package/manifest/components/checkpoint-history.json +91 -0
- package/manifest/components/chip.json +174 -0
- package/manifest/components/clamp.json +125 -0
- package/manifest/components/cli-tool-icon.json +46 -0
- package/manifest/components/code-block.json +107 -0
- package/manifest/components/code-diff.json +104 -0
- package/manifest/components/code-runner.json +124 -0
- package/manifest/components/collapsible.json +133 -0
- package/manifest/components/color-area.json +62 -0
- package/manifest/components/color-field.json +91 -0
- package/manifest/components/color-picker.json +235 -0
- package/manifest/components/color-slider.json +84 -0
- package/manifest/components/color-swatch.json +79 -0
- package/manifest/components/colors-section.json +70 -0
- package/manifest/components/combobox.json +265 -0
- package/manifest/components/command-palette.json +222 -0
- package/manifest/components/compaction-row.json +128 -0
- package/manifest/components/comparison-card.json +98 -0
- package/manifest/components/composer-actions.json +65 -0
- package/manifest/components/composer-attach-button.json +65 -0
- package/manifest/components/composer-attachment-chip.json +83 -0
- package/manifest/components/composer-attachments.json +60 -0
- package/manifest/components/composer-bar.json +76 -0
- package/manifest/components/composer-command-item.json +85 -0
- package/manifest/components/composer-context.json +71 -0
- package/manifest/components/composer-input.json +77 -0
- package/manifest/components/composer-menu-item.json +75 -0
- package/manifest/components/composer-menu.json +89 -0
- package/manifest/components/composer-model-item.json +82 -0
- package/manifest/components/composer-model-trigger.json +81 -0
- package/manifest/components/composer-person-item.json +86 -0
- package/manifest/components/composer-send.json +86 -0
- package/manifest/components/composer-toolbar.json +65 -0
- package/manifest/components/composer-voice-button.json +71 -0
- package/manifest/components/composer-voice.json +81 -0
- package/manifest/components/composer.json +238 -0
- package/manifest/components/computer-use.json +98 -0
- package/manifest/components/confidence-marker.json +86 -0
- package/manifest/components/connection-state.json +103 -0
- package/manifest/components/container.json +75 -0
- package/manifest/components/context-breakdown.json +72 -0
- package/manifest/components/context-menu.json +134 -0
- package/manifest/components/context-usage.json +98 -0
- package/manifest/components/conversation-search.json +111 -0
- package/manifest/components/copy-button.json +118 -0
- package/manifest/components/cost-meter.json +84 -0
- package/manifest/components/cue-logotype.json +110 -0
- package/manifest/components/cue-mark.json +111 -0
- package/manifest/components/cue-portal-frame.json +65 -0
- package/manifest/components/data-row.json +222 -0
- package/manifest/components/data-table-pagination.json +97 -0
- package/manifest/components/data-table-toolbar.json +127 -0
- package/manifest/components/data-tree.json +185 -0
- package/manifest/components/date-field.json +93 -0
- package/manifest/components/date-picker.json +255 -0
- package/manifest/components/date-range-picker.json +255 -0
- package/manifest/components/day-separator.json +63 -0
- package/manifest/components/delegation-card.json +196 -0
- package/manifest/components/density.json +93 -0
- package/manifest/components/description-list.json +91 -0
- package/manifest/components/diagram.json +126 -0
- package/manifest/components/dialog.json +222 -0
- package/manifest/components/disclosure.json +134 -0
- package/manifest/components/dmx-bar.json +107 -0
- package/manifest/components/dmx-strip.json +117 -0
- package/manifest/components/document-reference.json +108 -0
- package/manifest/components/draft-restore.json +96 -0
- package/manifest/components/drawer.json +204 -0
- package/manifest/components/dropdown-menu.json +275 -0
- package/manifest/components/edit-message.json +131 -0
- package/manifest/components/elements-command-palette.json +122 -0
- package/manifest/components/elements-composer.json +71 -0
- package/manifest/components/elements-data-table.json +75 -0
- package/manifest/components/elements-timeline.json +77 -0
- package/manifest/components/elicitation-form.json +130 -0
- package/manifest/components/empty-state-composer.json +71 -0
- package/manifest/components/empty-state-greeting.json +49 -0
- package/manifest/components/empty-state-suggestion.json +60 -0
- package/manifest/components/empty-state-suggestions.json +49 -0
- package/manifest/components/empty-state.json +111 -0
- package/manifest/components/end-of-turn-summary.json +89 -0
- package/manifest/components/env-var-input.json +194 -0
- package/manifest/components/error-state.json +93 -0
- package/manifest/components/export-dialog.json +101 -0
- package/manifest/components/eyebrow.json +59 -0
- package/manifest/components/feedback-dialog.json +133 -0
- package/manifest/components/field-description.json +66 -0
- package/manifest/components/field-error.json +87 -0
- package/manifest/components/field-label.json +66 -0
- package/manifest/components/field.json +82 -0
- package/manifest/components/file-tree.json +96 -0
- package/manifest/components/file-upload.json +204 -0
- package/manifest/components/flow-background.json +50 -0
- package/manifest/components/flow-controls.json +50 -0
- package/manifest/components/flow-graph.json +86 -0
- package/manifest/components/folder-icon.json +46 -0
- package/manifest/components/footer.json +133 -0
- package/manifest/components/frac.json +68 -0
- package/manifest/components/frames.json +210 -0
- package/manifest/components/generation-loader.json +78 -0
- package/manifest/components/generative-ui.json +125 -0
- package/manifest/components/grid.json +132 -0
- package/manifest/components/group-bar.json +122 -0
- package/manifest/components/guardrail-notice.json +109 -0
- package/manifest/components/hover-card.json +189 -0
- package/manifest/components/icon-button.json +106 -0
- package/manifest/components/image-generation.json +73 -0
- package/manifest/components/info-tip.json +133 -0
- package/manifest/components/inline-citation.json +90 -0
- package/manifest/components/input-group.json +112 -0
- package/manifest/components/input.json +121 -0
- package/manifest/components/inspector.json +199 -0
- package/manifest/components/item.json +163 -0
- package/manifest/components/job-progress.json +116 -0
- package/manifest/components/kbd.json +52 -0
- package/manifest/components/launcher-bubble.json +130 -0
- package/manifest/components/ledger.json +330 -0
- package/manifest/components/link.json +94 -0
- package/manifest/components/live-region-announcer.json +95 -0
- package/manifest/components/log-viewer.json +172 -0
- package/manifest/components/map-answer.json +97 -0
- package/manifest/components/markdown-text.json +126 -0
- package/manifest/components/math-block.json +84 -0
- package/manifest/components/mcp-server-icon.json +46 -0
- package/manifest/components/mcp-server-panel.json +102 -0
- package/manifest/components/memory-chips.json +73 -0
- package/manifest/components/menubar.json +184 -0
- package/manifest/components/message-actions.json +125 -0
- package/manifest/components/message-attachments.json +71 -0
- package/manifest/components/message-branches.json +83 -0
- package/manifest/components/message-list.json +121 -0
- package/manifest/components/message-pair.json +107 -0
- package/manifest/components/message-queue.json +85 -0
- package/manifest/components/message-timing.json +69 -0
- package/manifest/components/message.json +149 -0
- package/manifest/components/meter.json +150 -0
- package/manifest/components/mobile-composer.json +163 -0
- package/manifest/components/model-picker.json +87 -0
- package/manifest/components/multi-select.json +255 -0
- package/manifest/components/musical-time-input.json +141 -0
- package/manifest/components/navigation-menu.json +269 -0
- package/manifest/components/node-card.json +144 -0
- package/manifest/components/node-handle.json +84 -0
- package/manifest/components/number-field.json +131 -0
- package/manifest/components/number-ticker.json +67 -0
- package/manifest/components/onboarding.json +100 -0
- package/manifest/components/otp-field.json +163 -0
- package/manifest/components/page-shell.json +129 -0
- package/manifest/components/pagination.json +108 -0
- package/manifest/components/panel-header.json +89 -0
- package/manifest/components/panel.json +71 -0
- package/manifest/components/password-input.json +171 -0
- package/manifest/components/permission-grant.json +115 -0
- package/manifest/components/permission-scopes.json +184 -0
- package/manifest/components/piano-keyboard.json +149 -0
- package/manifest/components/plussie.json +140 -0
- package/manifest/components/popover.json +231 -0
- package/manifest/components/preset-section.json +80 -0
- package/manifest/components/preview.json +294 -0
- package/manifest/components/progress.json +114 -0
- package/manifest/components/prompt-library.json +122 -0
- package/manifest/components/queue-dock.json +139 -0
- package/manifest/components/quota-banner.json +113 -0
- package/manifest/components/quote-reply.json +129 -0
- package/manifest/components/radio-group.json +83 -0
- package/manifest/components/radio.json +94 -0
- package/manifest/components/rating.json +188 -0
- package/manifest/components/read-aloud.json +139 -0
- package/manifest/components/reasoning-effort.json +95 -0
- package/manifest/components/reasoning-panel.json +135 -0
- package/manifest/components/recommendation-card.json +133 -0
- package/manifest/components/regenerate-menu.json +107 -0
- package/manifest/components/replay-player.json +124 -0
- package/manifest/components/research-report.json +87 -0
- package/manifest/components/resizable.json +91 -0
- package/manifest/components/retrieval-chunks.json +98 -0
- package/manifest/components/revert-dock.json +197 -0
- package/manifest/components/reviewable-diff.json +113 -0
- package/manifest/components/risk-badge.json +89 -0
- package/manifest/components/row.json +122 -0
- package/manifest/components/schedule-card.json +121 -0
- package/manifest/components/score-breakdown.json +108 -0
- package/manifest/components/scroll-anchor.json +84 -0
- package/manifest/components/scroll-area.json +114 -0
- package/manifest/components/scrollable-tabs-list.json +91 -0
- package/manifest/components/scrub-input.json +268 -0
- package/manifest/components/seam-cell.json +91 -0
- package/manifest/components/seam-grid.json +84 -0
- package/manifest/components/seam-list.json +56 -0
- package/manifest/components/search-input.json +195 -0
- package/manifest/components/section-header.json +140 -0
- package/manifest/components/segmented-control.json +178 -0
- package/manifest/components/select.json +253 -0
- package/manifest/components/separator.json +56 -0
- package/manifest/components/settings-panel.json +152 -0
- package/manifest/components/shape-section.json +70 -0
- package/manifest/components/shared-conversation.json +107 -0
- package/manifest/components/sheet.json +210 -0
- package/manifest/components/shimmer-label.json +61 -0
- package/manifest/components/sidebar.json +245 -0
- package/manifest/components/signal-edge.json +56 -0
- package/manifest/components/skeleton.json +46 -0
- package/manifest/components/skill-icon.json +46 -0
- package/manifest/components/slider.json +106 -0
- package/manifest/components/sources.json +97 -0
- package/manifest/components/sparkline.json +89 -0
- package/manifest/components/speaker-identity.json +66 -0
- package/manifest/components/spec-sheet.json +93 -0
- package/manifest/components/spectrum-visualizer.json +147 -0
- package/manifest/components/spinner.json +71 -0
- package/manifest/components/stack-icon.json +46 -0
- package/manifest/components/stack.json +143 -0
- package/manifest/components/stacks-matrix-icon.json +46 -0
- package/manifest/components/stat.json +111 -0
- package/manifest/components/status-bar.json +233 -0
- package/manifest/components/status-dot.json +97 -0
- package/manifest/components/stepper.json +107 -0
- package/manifest/components/stopped-run.json +97 -0
- package/manifest/components/streaming-text.json +82 -0
- package/manifest/components/sub.json +45 -0
- package/manifest/components/subagent-list.json +106 -0
- package/manifest/components/suggestions.json +106 -0
- package/manifest/components/sup.json +45 -0
- package/manifest/components/swap-label.json +86 -0
- package/manifest/components/switch.json +102 -0
- package/manifest/components/table-scroll-region.json +78 -0
- package/manifest/components/table.json +306 -0
- package/manifest/components/tabs.json +156 -0
- package/manifest/components/tags-input.json +255 -0
- package/manifest/components/tail-status.json +138 -0
- package/manifest/components/terminal-block.json +111 -0
- package/manifest/components/terminal-frame.json +146 -0
- package/manifest/components/textarea.json +104 -0
- package/manifest/components/theme-configurator.json +158 -0
- package/manifest/components/theme-provider.json +228 -0
- package/manifest/components/thinking-indicator.json +69 -0
- package/manifest/components/thread-list.json +87 -0
- package/manifest/components/thread-search.json +108 -0
- package/manifest/components/threshold-rail.json +223 -0
- package/manifest/components/time-boundary.json +68 -0
- package/manifest/components/time-field.json +93 -0
- package/manifest/components/timeline-ruler.json +178 -0
- package/manifest/components/timeline.json +131 -0
- package/manifest/components/title-bar.json +97 -0
- package/manifest/components/toast.json +140 -0
- package/manifest/components/todo-list.json +76 -0
- package/manifest/components/toggle-group.json +134 -0
- package/manifest/components/toggle.json +140 -0
- package/manifest/components/token-editor.json +106 -0
- package/manifest/components/tool-call-card.json +268 -0
- package/manifest/components/tool-call.json +147 -0
- package/manifest/components/tool-error.json +141 -0
- package/manifest/components/tool-group.json +97 -0
- package/manifest/components/tool-timeline.json +147 -0
- package/manifest/components/toolbar.json +192 -0
- package/manifest/components/tooltip.json +199 -0
- package/manifest/components/trace-waterfall.json +84 -0
- package/manifest/components/tree-visibility-toggle.json +99 -0
- package/manifest/components/tree.json +182 -0
- package/manifest/components/turn-footer.json +133 -0
- package/manifest/components/two-step-button.json +150 -0
- package/manifest/components/typing-indicator.json +60 -0
- package/manifest/components/universe-grid.json +155 -0
- package/manifest/components/unread-divider.json +58 -0
- package/manifest/components/usage-chart.json +162 -0
- package/manifest/components/verdict-row.json +106 -0
- package/manifest/components/voice-conversation.json +141 -0
- package/manifest/components/web-preview.json +105 -0
- package/manifest/components/web-search.json +108 -0
- package/manifest/components/work-collapse.json +125 -0
- package/manifest/fixtures.json +776 -0
- package/manifest/manifest.json +5037 -0
- package/manifest/tokens.json +288 -0
- package/package.json +278 -0
|
@@ -0,0 +1,526 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "AppShell",
|
|
3
|
+
"slug": "app-shell",
|
|
4
|
+
"group": "chrome",
|
|
5
|
+
"importPath": "@cueplusplus/ui",
|
|
6
|
+
"peerDependencies": [],
|
|
7
|
+
"clientOnly": true,
|
|
8
|
+
"description": "The console frame: title bar, navigation, work area, status bar — one\nviewport tall, with exactly one thing scrolling.\n\nEvery console screen in this system is the same five parts in the same\narrangement, and the value here is not the parts (they already exist as\n`TitleBar`, `Sidebar`, `Toolbar` and `StatusBar`) but the arithmetic between\nthem: `h-dvh` on the frame rather than `min-h-dvh`, an unbroken `min-h-0`\nchain from the frame down to the scroller, `min-w-0` on the content column,\nand a scroller that is not the document. Get one of those wrong and the\nstatus bar leaves the screen or the navigation column gets shoved off the\nside; the shell exists so no page has to get them right again.\n\nThe bars are ordinary children — `TitleBar` and `StatusBar` are already\n`shrink-0` and need no wrapper — so a shell reads as the page's outline. The\none bar the shell does own is {@link AppShellBar}, and it owns it for one\nreason: it is divided by the navigation column, which means it has to be\nmeasured from the same length the column is.\n\nThat length is `--cue-nav-width`, written on the frame. `rail` rewrites it,\n`data-rail` announces it, and the column and the header cell over it move\ntogether because neither holds a width of its own. Persistence and the\ntoggle are the caller's — see {@link AppShellRootProps.rail}.\n\nThis is also the only component in the library with a viewport breakpoint:\nbelow `md` the navigation column becomes a drawer and a trigger appears in\nthe bar. See {@link AppShellSidebar} for the ruling.",
|
|
9
|
+
"props": [],
|
|
10
|
+
"typeReferences": [],
|
|
11
|
+
"subcomponents": [
|
|
12
|
+
"Root",
|
|
13
|
+
"Bar",
|
|
14
|
+
"Body",
|
|
15
|
+
"Sidebar",
|
|
16
|
+
"NavTrigger",
|
|
17
|
+
"Content",
|
|
18
|
+
"Scroller",
|
|
19
|
+
"Aside"
|
|
20
|
+
],
|
|
21
|
+
"parts": [
|
|
22
|
+
{
|
|
23
|
+
"name": "Root",
|
|
24
|
+
"usage": "AppShell.Root",
|
|
25
|
+
"description": "The frame: one viewport tall, a column, and the only element on the page that\nknows how tall the window is.\n\n`h-dvh`, not `min-h-dvh`. A console is a fixed frame with a scrolling middle;\na shell that grows past the viewport puts the status bar below the fold, where\na status bar is worthless. Everything under here is either `shrink-0` (the\nbars) or `min-h-0 flex-1` (the middle), which is what keeps the document\nitself from ever scrolling.\n\n`relative overflow-clip` is the other half of that promise, and it took a\nbrowser to find. The flex arithmetic only governs boxes *in the flow*: an\nabsolutely positioned descendant is laid out against its containing block,\nand a frame that is neither positioned nor clipping is not one — so the\ninitial containing block is, and the descendant's scrollable overflow lands\non `<html>`. `.sr-only` is the everyday case (it is `position: absolute`, and\nmost emitters give it no positioned ancestor), which is how a page carrying\na few thousand visually-hidden labels made the document 46,760px tall inside\na frame exactly one viewport high, with every visible box still on screen:\na browser scrollbar that scrolled nothing.\n\n`relative` makes the frame that containing block; the clip is then the\nguarantee, whatever any descendant leaks. `overflow-clip` rather than\n`overflow-hidden` on purpose — `hidden` makes the frame a *scroll container*,\nso a focus ring or a `scrollIntoView()` on something just outside it can\nscroll the whole console sideways with no scrollbar to put it back. `clip`\ncannot be scrolled at all, which is what a frame wants.\n\nIt is also where the navigation column's width is decided. `--cue-nav-width`\nis written here and read by both the column and the header cell over it, so\nrailing the console rewrites one length and the two boxes move together;\n`data-rail` and the `group/app-shell` beside it are how anything else in the\nframe answers to the same state — `group-data-[rail]/app-shell:hidden` on a\nwordmark, say, the way `Sidebar` already publishes `data-collapsed`.",
|
|
26
|
+
"props": [
|
|
27
|
+
{
|
|
28
|
+
"name": "navOpen",
|
|
29
|
+
"type": "boolean",
|
|
30
|
+
"required": false,
|
|
31
|
+
"defaultValue": null,
|
|
32
|
+
"description": "Whether the mobile navigation drawer is open, when controlled. Pass with `onNavOpenChange`.",
|
|
33
|
+
"control": {
|
|
34
|
+
"kind": "boolean"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"name": "defaultNavOpen",
|
|
39
|
+
"type": "boolean",
|
|
40
|
+
"required": false,
|
|
41
|
+
"defaultValue": "false",
|
|
42
|
+
"description": "Initial open state of the mobile navigation drawer when uncontrolled. Defaults to `false`.",
|
|
43
|
+
"control": {
|
|
44
|
+
"kind": "boolean"
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "onNavOpenChange",
|
|
49
|
+
"type": "((open: boolean) => void)",
|
|
50
|
+
"required": false,
|
|
51
|
+
"defaultValue": null,
|
|
52
|
+
"description": "Called with the next open state whenever the drawer is opened or dismissed.",
|
|
53
|
+
"control": {
|
|
54
|
+
"kind": "callback",
|
|
55
|
+
"fixture": "callback.log"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "rail",
|
|
60
|
+
"type": "boolean",
|
|
61
|
+
"required": false,
|
|
62
|
+
"defaultValue": null,
|
|
63
|
+
"description": "Whether the navigation column is collapsed to an icon rail, when\ncontrolled. Pass with `onRailChange`. Defaults to expanded.\n\nIt is the column's own collapse, owned one level up. Collapsing is a\nproperty of the column, but the header cell over it is a child of the bar\n— a different branch of the tree — and a length only one of them knows is\na length they will eventually disagree about. So the frame holds the\nstate, stamps `data-rail` on itself for anything that has to answer to it,\nand hands it down to `Sidebar.Root` as its controlled `collapsed`.\n\n**Persistence is the caller's.** A rail is set once and expected to be\nremembered, and where it is remembered — `localStorage`, a cookie the\nserver can read before first paint, a user record — is a decision about\nhydration and privacy that a layout component has no business making.",
|
|
64
|
+
"control": {
|
|
65
|
+
"kind": "boolean"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"name": "defaultRail",
|
|
70
|
+
"type": "boolean",
|
|
71
|
+
"required": false,
|
|
72
|
+
"defaultValue": "false",
|
|
73
|
+
"description": "Initial rail state when uncontrolled. Defaults to `false`.",
|
|
74
|
+
"control": {
|
|
75
|
+
"kind": "boolean"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "onRailChange",
|
|
80
|
+
"type": "((rail: boolean) => void)",
|
|
81
|
+
"required": false,
|
|
82
|
+
"defaultValue": null,
|
|
83
|
+
"description": "Called with the next rail state whenever the column is collapsed or expanded.",
|
|
84
|
+
"control": {
|
|
85
|
+
"kind": "callback",
|
|
86
|
+
"fixture": "callback.log"
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "navWidth",
|
|
91
|
+
"type": "string",
|
|
92
|
+
"required": false,
|
|
93
|
+
"defaultValue": "14rem",
|
|
94
|
+
"description": "Width of the navigation column while expanded. Any CSS length. Defaults to `\"14rem\"`.",
|
|
95
|
+
"control": {
|
|
96
|
+
"kind": "string"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "railWidth",
|
|
101
|
+
"type": "string",
|
|
102
|
+
"required": false,
|
|
103
|
+
"defaultValue": "3.5rem",
|
|
104
|
+
"description": "Width of the navigation column while railed. Any CSS length. Defaults to\n`\"3.5rem\"` — a `--cue-icon-md` glyph centred in a `--cue-control-md` row,\nwith a gutter either side that still reads as a column rather than a strip.",
|
|
105
|
+
"control": {
|
|
106
|
+
"kind": "string"
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
],
|
|
110
|
+
"typeReferences": [
|
|
111
|
+
"React.ComponentPropsWithoutRef<\"div\">"
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"name": "Bar",
|
|
116
|
+
"usage": "AppShell.Bar",
|
|
117
|
+
"description": "The bar across the top of the frame, divided by the navigation column: a\nheader cell exactly the column's width, and the rest of the bar beside it.\n\n`TitleBar` and `AppBar` span the whole frame and know nothing about the\ncolumn under them, which is right for a document and wrong for a console\nthat has an app mark over its navigation: two boxes that are meant to read\nas one column have to be measured from one length, or they drift the first\ntime the column changes width. This is the bar that is measured that way. It\nreads `--cue-nav-width` from {@link AppShellRoot}, so railing the console\nmoves the cell and the column together with nothing to keep in sync.\n\nBelow `md` the cell takes its content's width instead. That is the same\ndecision the column and the drawer trigger already make and not a third one:\nbelow the breakpoint the column is not in the layout, and a cell aligned to\na column that is not there is 14rem of a 390px bar walled off for nothing.\n\nA `<div>` rather than a `<header>`, like `TitleBar` beside it: a console\nframe that also carries an `AppBar` would otherwise have two `banner`\nlandmarks, and a page that wants one can say `role=\"banner\"` here.\n\n**It is also the desktop app's one chrome row.** `platformDrag` gives it the\ndrag contract `TitleBar` has always had, and `center` and `actions` give it\nthe two slots that made a second stacked bar necessary — so a Tauri or\nElectron window spends one `--cue-chrome-titlebar` on furniture instead of\ntwo. See {@link AppShellBarProps.platformDrag} for why the attribute lands on\nthree surfaces rather than one.\n\nThe bar is always three nested clusters — brand content, leading children,\ntrailing actions — whether or not it is draggable. One shape, not two: the\ndrag mode is then a class on a box that already exists rather than a\ndifferent tree, and a caller's own CSS cannot be right in a browser and wrong\nin a shell. In an ordinary web shell each cluster grows into the space its\ncell gives it, so an `ms-auto` on a brand control still reaches the cell's\ntrailing edge exactly as it did before the clusters existed; under\n`platformDrag` the clusters shrink to their content instead, so that the\nslack stays on the attributed cell and the window can be dragged by it.",
|
|
118
|
+
"props": [
|
|
119
|
+
{
|
|
120
|
+
"name": "brand",
|
|
121
|
+
"type": "ReactNode",
|
|
122
|
+
"required": false,
|
|
123
|
+
"defaultValue": null,
|
|
124
|
+
"description": "The header cell over the navigation column: the app mark, and whatever\ncontrol rails it.\n\nOmit it and the bar is one undivided strip — no empty bordered cell, which\nis worse than no cell.",
|
|
125
|
+
"control": {
|
|
126
|
+
"kind": "node",
|
|
127
|
+
"fixture": "children.text"
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"name": "brandClassName",
|
|
132
|
+
"type": "string",
|
|
133
|
+
"required": false,
|
|
134
|
+
"defaultValue": null,
|
|
135
|
+
"description": "Extra classes for the header cell — the bordered box that spans the\nnavigation column, not the row of brand content inside it. Anything about\nthe cell's width, rim or gutter belongs here; anything about how the mark\nand its controls sit belongs on the nodes passed as `brand`.",
|
|
136
|
+
"control": {
|
|
137
|
+
"kind": "string"
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"name": "platformDrag",
|
|
142
|
+
"type": "boolean",
|
|
143
|
+
"required": false,
|
|
144
|
+
"defaultValue": "false",
|
|
145
|
+
"description": "Make the bar's dead space a window drag handle. Defaults to `false`.\n\nThis is the same contract {@link TitleBar } has always offered, on the bar\na console with a navigation column actually uses — a desktop app should\nnot need a `TitleBar` *and* an `AppShell.Bar` stacked on top of each other\nto get one draggable row, which is two chrome rungs of a small window\nspent on furniture.\n\nEvery structural surface is attributed and every interactive cluster is\ncarved back out, because the two shells this ships into fail in opposite\ndirections. Tauri matches the *exact* element under the cursor, so the\nbrand cell and the rest cell carry the attribute themselves — a click on\nthe cell's own dead space targets the cell, never the root beneath it, and\na bar that only attributed its root would be draggable nowhere. Electron\nbuilds a geometric mask from painted boxes instead and excludes nothing on\nits own, so the brand content, the leading children and `actions` each sit\nin a cluster marked `app-region: no-drag` — without it a button that merely\noverlaps the bar stops receiving clicks at all. See `./_drag.ts`.\n\n**It changes how the clusters are sized, and that is a trade.** Off, each\ncluster grows into its cell, so a caller's own `ms-auto` reaches the cell's\ntrailing rim. On, the clusters take their content's width and `actions` is\npushed over with `ms-auto` instead, because a cluster that fills its cell\nis a `no-drag` rectangle painted over every dead pixel the cell just\nattributed — the bar would be draggable nowhere but its paddings and its\none gap. The dead area belongs to the window in drag mode, and a caller who\nneeds content to reach the rim there should say so on a box of their own\ninside the cluster.\n\n`select-none` comes with it: dragging a window and selecting the text you\nstarted the drag on are the same gesture, and the shell wins.\n\nNot wired here: double-click-to-maximise. Tauri's injected script already\ndoes it for any drag region, macOS's cancel-by-dragging-away included.\nElectron does not, and an Electron app has to listen for `dblclick` and\ntoggle the window itself. Which of those an app is, is not something a\nlayout component can know.",
|
|
146
|
+
"control": {
|
|
147
|
+
"kind": "boolean"
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"name": "center",
|
|
152
|
+
"type": "ReactNode",
|
|
153
|
+
"required": false,
|
|
154
|
+
"defaultValue": null,
|
|
155
|
+
"description": "A title centred on the **bar**, not between the cells beside it.\n\nAbsolutely positioned against the bar's own box, so it stays put when a\nbutton appears in `actions` or the column rails — the whole reason a\ndocument name in desktop chrome is not just another flex child.\n`pointer-events-none` so the dead space around a short title still drags,\nwhich is also what makes it click through to the drag surface underneath\nin Tauri, whose hit-testing is the browser's own.\n\nInert by construction. Anything the reader has to click belongs in\n`actions` or in `children`, where it can be carved out of the drag region.",
|
|
156
|
+
"control": {
|
|
157
|
+
"kind": "node",
|
|
158
|
+
"fixture": "children.text"
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"name": "actions",
|
|
163
|
+
"type": "ReactNode",
|
|
164
|
+
"required": false,
|
|
165
|
+
"defaultValue": null,
|
|
166
|
+
"description": "The trailing cluster: connection state, a run indicator, an overflow menu.\n\nPinned to the bar's trailing edge and never squeezed, so it reads as window\nfurniture rather than the end of a sentence. `children` keeps flowing into\nthe same cell ahead of it, which is what lets an existing web-shell caller\npass free-form content and gain a cluster without rearranging anything.",
|
|
167
|
+
"control": {
|
|
168
|
+
"kind": "node",
|
|
169
|
+
"fixture": "children.text"
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
],
|
|
173
|
+
"typeReferences": [
|
|
174
|
+
"React.ComponentPropsWithoutRef<\"div\">"
|
|
175
|
+
]
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"name": "Body",
|
|
179
|
+
"usage": "AppShell.Body",
|
|
180
|
+
"description": "The middle row: navigation column, content column, and anything else that\nsits beside them.\n\n`min-h-0` is the whole point. A flex child defaults to `min-height: auto`,\nwhich refuses to shrink below its content, so without it the first table\ntaller than the frame pushes the status bar off the bottom of the screen.\n`min-w-0` is the same argument one axis over, for the row that holds it.",
|
|
181
|
+
"props": [],
|
|
182
|
+
"typeReferences": [
|
|
183
|
+
"React.ComponentPropsWithoutRef<\"div\">"
|
|
184
|
+
]
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"name": "Sidebar",
|
|
188
|
+
"usage": "AppShell.Sidebar",
|
|
189
|
+
"description": "The navigation, in both of its shapes: a column on a wide viewport and a\ndrawer on a narrow one, from one set of children.\n\n**This part carries the only viewport breakpoint in `@cueplusplus/ui`, and it\nis deliberate.** The rest of the library is intrinsically responsive —\n`min()` clamps, `auto-fill` grids, overflow scrollers — and density is never\nviewport-driven. Navigation shape is the one decision that cannot be made\nthat way: `Sidebar.Root` is 14rem wide, a phone is 390px, and no amount of\nclamping turns a column into a drawer. So the switch is Tailwind's stock\n`md` (48rem), used **only** here, in {@link AppShellNavTrigger} and in\n{@link AppShellBar}'s header cell — one decision wearing three faces, since\nthe trigger exists exactly where the column does not and the cell aligns\nwith a column that below `md` is not in the layout at all. Anything beyond\nnav shape stays intrinsic; a later component that wants a breakpoint is a\nnew decision, not a precedent this one set.\n\nIt is a CSS-only dual render: both shapes are in the markup and one is hidden\nper viewport. No `useMediaQuery`, no hook, no JavaScript branch — so the\nfirst server-rendered frame is already correct and there is nothing to flash.\n\n`children` is rendered into both, so a console has one navigation definition\nand two presentations. Inside the drawer the items are not wrapped in a\n`Sidebar.Root`, which is what makes their labels stay visible there even when\nthe desktop column is collapsed to its rail — collapse is a property of the\ncolumn, not of the navigation, and the rail is drawn by the shell rather than\ntaken as a child for exactly that reason.\n\n**The column's collapse is the frame's rail.** This part hands\n{@link AppShellRoot}'s `rail` down to `Sidebar.Root` as its controlled\n`collapsed` and writes the rail back whenever the column's own hairline rail\nis pressed, so the two can never disagree and the header cell over the column\nmoves with it. Both widths come from the frame's `--cue-nav-width` for the\nsame reason. A `collapsed` or `defaultCollapsed` passed here instead is the\npre-rail spelling and still means exactly what it did: the column keeps its\nown state and its own two lengths, and the frame stays out of it.\n\n**Both halves announce as the same landmark**, from the one `landmark` prop:\nthe same navigation cannot be `navigation` on a phone and `complementary` on\na laptop, and until the prop existed it was, because the drawer was a `<nav>`\nand `Sidebar.Root` was an `<aside>`. `\"navigation\"` is the default, which is\nwhat a shell's primary column nearly always is.",
|
|
190
|
+
"props": [
|
|
191
|
+
{
|
|
192
|
+
"name": "drawerTitle",
|
|
193
|
+
"type": "ReactNode",
|
|
194
|
+
"required": false,
|
|
195
|
+
"defaultValue": "Navigation",
|
|
196
|
+
"description": "The drawer's heading, and its accessible name. Defaults to `\"Navigation\"`.",
|
|
197
|
+
"control": {
|
|
198
|
+
"kind": "node",
|
|
199
|
+
"fixture": "children.text"
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"name": "closeLabel",
|
|
204
|
+
"type": "string",
|
|
205
|
+
"required": false,
|
|
206
|
+
"defaultValue": "Close navigation",
|
|
207
|
+
"description": "Accessible name for the drawer's close affordance. Defaults to `\"Close navigation\"`.",
|
|
208
|
+
"control": {
|
|
209
|
+
"kind": "string"
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
"name": "drawerClassName",
|
|
214
|
+
"type": "string",
|
|
215
|
+
"required": false,
|
|
216
|
+
"defaultValue": null,
|
|
217
|
+
"description": "Extra classes for the drawer's popup surface.",
|
|
218
|
+
"control": {
|
|
219
|
+
"kind": "string"
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"name": "collapsible",
|
|
224
|
+
"type": "boolean",
|
|
225
|
+
"required": false,
|
|
226
|
+
"defaultValue": "true",
|
|
227
|
+
"description": "Draw the column's collapse rail. Defaults to `true`.\n\nThe shell renders the `Sidebar.Rail` itself rather than taking one in\n`children`, because collapsing is a property of the *column* and the same\nchildren are also the drawer's: a rail passed as a child would be laid out\ninside the overlay, where there is nothing to collapse.",
|
|
228
|
+
"control": {
|
|
229
|
+
"kind": "boolean"
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "landmark",
|
|
234
|
+
"type": "\"complementary\" | \"navigation\"",
|
|
235
|
+
"required": false,
|
|
236
|
+
"defaultValue": "navigation",
|
|
237
|
+
"description": "Which landmark **both** shapes announce as. Defaults to `\"navigation\"`.\n\nOne prop rather than two, because the column and the drawer are one\nnavigation wearing two shapes: the answer cannot differ by viewport.",
|
|
238
|
+
"control": {
|
|
239
|
+
"kind": "enum",
|
|
240
|
+
"members": [
|
|
241
|
+
"complementary",
|
|
242
|
+
"navigation"
|
|
243
|
+
]
|
|
244
|
+
}
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "collapsed",
|
|
248
|
+
"type": "boolean",
|
|
249
|
+
"required": false,
|
|
250
|
+
"defaultValue": null,
|
|
251
|
+
"description": "Collapsed state when controlled. Pass with `onCollapsedChange`.",
|
|
252
|
+
"control": {
|
|
253
|
+
"kind": "boolean"
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"name": "defaultCollapsed",
|
|
258
|
+
"type": "boolean",
|
|
259
|
+
"required": false,
|
|
260
|
+
"defaultValue": "false",
|
|
261
|
+
"description": "Initial collapsed state when uncontrolled. Defaults to `false`.",
|
|
262
|
+
"control": {
|
|
263
|
+
"kind": "boolean"
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"name": "onCollapsedChange",
|
|
268
|
+
"type": "((collapsed: boolean) => void)",
|
|
269
|
+
"required": false,
|
|
270
|
+
"defaultValue": null,
|
|
271
|
+
"description": "Called with the new collapsed state whenever the rail is pressed.",
|
|
272
|
+
"control": {
|
|
273
|
+
"kind": "callback",
|
|
274
|
+
"fixture": "callback.log"
|
|
275
|
+
}
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
"name": "width",
|
|
279
|
+
"type": "string",
|
|
280
|
+
"required": false,
|
|
281
|
+
"defaultValue": "14rem",
|
|
282
|
+
"description": "Width while expanded. Any CSS length. Defaults to `\"14rem\"`.",
|
|
283
|
+
"control": {
|
|
284
|
+
"kind": "string"
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
"name": "collapsedWidth",
|
|
289
|
+
"type": "string",
|
|
290
|
+
"required": false,
|
|
291
|
+
"defaultValue": "3rem",
|
|
292
|
+
"description": "Width while collapsed. Any CSS length. Defaults to `\"3rem\"`.",
|
|
293
|
+
"control": {
|
|
294
|
+
"kind": "string"
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
],
|
|
298
|
+
"typeReferences": [
|
|
299
|
+
"SidebarRootProps"
|
|
300
|
+
]
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"name": "NavTrigger",
|
|
304
|
+
"usage": "AppShell.NavTrigger",
|
|
305
|
+
"description": "The control that opens the navigation drawer. Put it in the shell's bar.\n\nPresent only below the same `md` breakpoint {@link AppShellSidebar} switches\non — above it the column is right there and a trigger would open a drawer\nduplicating navigation the reader can already see. That is the second of the\nthree faces of the library's one viewport breakpoint, and all three are the\nsame navigation-shape decision — see {@link AppShellSidebar} for the ruling.\n\nIt is the one piece of window furniture in this library that defaults to\n`size=\"md\"` rather than `\"sm\"`, and the breakpoint above is the whole reason:\na control that only ever renders on a touch screen has to clear WCAG 2.5.8's\n24×24 floor, and `sm` is 20px.",
|
|
306
|
+
"props": [
|
|
307
|
+
{
|
|
308
|
+
"name": "label",
|
|
309
|
+
"type": "string",
|
|
310
|
+
"required": false,
|
|
311
|
+
"defaultValue": "Open navigation",
|
|
312
|
+
"description": "Accessible name for the control. Defaults to `\"Open navigation\"`.",
|
|
313
|
+
"control": {
|
|
314
|
+
"kind": "string"
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
{
|
|
318
|
+
"name": "icon",
|
|
319
|
+
"type": "ElementType<any, keyof IntrinsicElements>",
|
|
320
|
+
"required": false,
|
|
321
|
+
"defaultValue": "MenuGlyph",
|
|
322
|
+
"description": "The icon it draws. Defaults to the shell's own three-stroke glyph.",
|
|
323
|
+
"control": {
|
|
324
|
+
"kind": "opaque",
|
|
325
|
+
"fixture": "icon.play"
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"name": "size",
|
|
330
|
+
"type": "\"sm\" | \"md\" | \"lg\"",
|
|
331
|
+
"required": false,
|
|
332
|
+
"defaultValue": "md",
|
|
333
|
+
"description": "Which rung of the control ladder the button takes. Defaults to `\"md\"`.\n\nThe rest of the window furniture in this library is built at `\"sm\"`, and\nthat is right for a mouse — but this control renders *only* below the `md`\nbreakpoint, which is to say only on a touch screen, where `sm` (20px at\nnormal density) is under the 24×24 CSS-pixel floor WCAG 2.2 SC 2.5.8 sets.\n`\"md\"` is 24px at normal and large, and the token layer's\n`@media (pointer: coarse)` rule lifts ultra-compact to the same 24px, so\nthe default clears the floor at every density a finger can reach it at.",
|
|
334
|
+
"control": {
|
|
335
|
+
"kind": "enum",
|
|
336
|
+
"members": [
|
|
337
|
+
"sm",
|
|
338
|
+
"md",
|
|
339
|
+
"lg"
|
|
340
|
+
]
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
],
|
|
344
|
+
"typeReferences": [
|
|
345
|
+
"Omit<React.ComponentPropsWithoutRef<\"button\">, \"children\">"
|
|
346
|
+
]
|
|
347
|
+
},
|
|
348
|
+
{
|
|
349
|
+
"name": "Content",
|
|
350
|
+
"usage": "AppShell.Content",
|
|
351
|
+
"description": "The content column beside the navigation, and the page's `<main>` landmark.\n\nA column rather than a scroller: a toolbar, a composer or a transport strip\nbelongs to the work area but must not move when it scrolls, so they are\nsiblings of {@link AppShellScroller} inside here. `min-w-0` is what stops a\ntable wider than the frame from shoving the navigation column off the screen.\n\nExactly one per shell.",
|
|
352
|
+
"props": [
|
|
353
|
+
{
|
|
354
|
+
"name": "main",
|
|
355
|
+
"type": "boolean",
|
|
356
|
+
"required": false,
|
|
357
|
+
"defaultValue": "true",
|
|
358
|
+
"description": "Render the `<main>` landmark. Defaults to `true`.\n\nSet it `false` when the shell is embedded in a document that already has a\n`<main>` — a specimen, a screenshot, a shell shown inside a device frame on\na page of prose. A document may have only one, and a nested one is a defect\nrather than a nicety.",
|
|
359
|
+
"control": {
|
|
360
|
+
"kind": "boolean"
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
],
|
|
364
|
+
"typeReferences": [
|
|
365
|
+
"React.ComponentPropsWithoutRef<\"main\">"
|
|
366
|
+
]
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"name": "Scroller",
|
|
370
|
+
"usage": "AppShell.Scroller",
|
|
371
|
+
"description": "The one scroller on the page.\n\nNot the document. That is what keeps `TitleBar`, `Toolbar` and `StatusBar`\nwhere they are without a single `sticky`, and it is why the shell can promise\nthat the status bar is always on screen.",
|
|
372
|
+
"props": [
|
|
373
|
+
{
|
|
374
|
+
"name": "padded",
|
|
375
|
+
"type": "boolean",
|
|
376
|
+
"required": false,
|
|
377
|
+
"defaultValue": "true",
|
|
378
|
+
"description": "Draw the standard work-area gutters. Defaults to `true`.",
|
|
379
|
+
"control": {
|
|
380
|
+
"kind": "boolean"
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
],
|
|
384
|
+
"typeReferences": [
|
|
385
|
+
"React.ComponentPropsWithoutRef<\"div\">"
|
|
386
|
+
]
|
|
387
|
+
},
|
|
388
|
+
{
|
|
389
|
+
"name": "Aside",
|
|
390
|
+
"usage": "AppShell.Aside",
|
|
391
|
+
"description": "A secondary column on the trailing edge: an inspector, an agent roster, an\nanalyser.\n\nIts own scroller, deliberately. Reading the panel beside the work area must\nnever move the work area, which is the defect a shared scroller ships with.",
|
|
392
|
+
"props": [
|
|
393
|
+
{
|
|
394
|
+
"name": "width",
|
|
395
|
+
"type": "string",
|
|
396
|
+
"required": false,
|
|
397
|
+
"defaultValue": "18rem",
|
|
398
|
+
"description": "Width of the column. Any CSS length. Defaults to `\"18rem\"`.",
|
|
399
|
+
"control": {
|
|
400
|
+
"kind": "string"
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
],
|
|
404
|
+
"typeReferences": [
|
|
405
|
+
"React.ComponentPropsWithoutRef<\"aside\">"
|
|
406
|
+
]
|
|
407
|
+
}
|
|
408
|
+
],
|
|
409
|
+
"variants": {},
|
|
410
|
+
"defaultVariants": {},
|
|
411
|
+
"tokensUsed": [
|
|
412
|
+
"--cue-bg",
|
|
413
|
+
"--cue-border",
|
|
414
|
+
"--cue-chrome-titlebar",
|
|
415
|
+
"--cue-fg",
|
|
416
|
+
"--cue-fg-muted",
|
|
417
|
+
"--cue-font-mono",
|
|
418
|
+
"--cue-nav-width",
|
|
419
|
+
"--cue-pad-row-x",
|
|
420
|
+
"--cue-space-3",
|
|
421
|
+
"--cue-space-4",
|
|
422
|
+
"--cue-space-5",
|
|
423
|
+
"--cue-surface-1",
|
|
424
|
+
"--cue-text-label"
|
|
425
|
+
],
|
|
426
|
+
"summary": "The console frame: title bar, navigation, work area and status bar, one viewport tall with exactly one thing scrolling.",
|
|
427
|
+
"examples": [
|
|
428
|
+
{
|
|
429
|
+
"title": "The five parts",
|
|
430
|
+
"code": "<AppShell.Root>\n <TitleBar center=\"main-stage.cue\" actions={<Chip tone=\"ok\">live</Chip>}>\n <AppShell.NavTrigger />\n <Eyebrow>CUE++</Eyebrow>\n </TitleBar>\n\n <AppShell.Body>\n <AppShell.Sidebar aria-label=\"Console\" drawerTitle=\"Console\">\n <Sidebar.Section label=\"Show\">\n <Sidebar.Item icon={List} active>Cues</Sidebar.Item>\n <Sidebar.Item icon={Lightbulb} badge={<Chip>48</Chip>}>Fixtures</Sidebar.Item>\n </Sidebar.Section>\n </AppShell.Sidebar>\n\n <AppShell.Content>\n <Toolbar.Root aria-label=\"Playback\">\n <Toolbar.Button icon={Play}>Go</Toolbar.Button>\n </Toolbar.Root>\n <AppShell.Scroller>\n <Panel>…</Panel>\n </AppShell.Scroller>\n </AppShell.Content>\n\n <AppShell.Aside aria-label=\"Inspector\">…</AppShell.Aside>\n </AppShell.Body>\n\n <StatusBar>\n <StatusBar.Item tone=\"ok\">Art-Net 10.0.0.42</StatusBar.Item>\n <StatusBar.Item push>Cue 4</StatusBar.Item>\n </StatusBar>\n</AppShell.Root>",
|
|
431
|
+
"language": "tsx"
|
|
432
|
+
},
|
|
433
|
+
{
|
|
434
|
+
"title": "The rail",
|
|
435
|
+
"code": "<AppShell.Root rail={rail} onRailChange={setRail}>",
|
|
436
|
+
"language": "tsx"
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
"title": "The rail",
|
|
440
|
+
"code": "<AppShell.Root rail={rail} onRailChange={setRail}>\n <AppShell.Bar brand={<><AppShell.NavTrigger /><CueMark /><RailToggle /></>}>\n <h1>Cue stack</h1>\n </AppShell.Bar>\n\n <AppShell.Body>\n <AppShell.Sidebar aria-label=\"Console\" drawerTitle=\"Console\">\n <Sidebar.Section label=\"Show\">\n <Sidebar.Item icon={List} active>Cues</Sidebar.Item>\n </Sidebar.Section>\n </AppShell.Sidebar>\n …\n </AppShell.Body>\n</AppShell.Root>",
|
|
441
|
+
"language": "tsx"
|
|
442
|
+
},
|
|
443
|
+
{
|
|
444
|
+
"title": "The toggle is yours",
|
|
445
|
+
"code": "function RailToggle() {\n return (\n <IconButton\n icon={PanelLeft}\n size=\"sm\"\n aria-label={rail ? \"Expand the sidebar\" : \"Collapse the sidebar\"}\n aria-pressed={rail}\n aria-controls={navId}\n onClick={() => setRail(!rail)}\n />\n );\n}",
|
|
446
|
+
"language": "tsx"
|
|
447
|
+
},
|
|
448
|
+
{
|
|
449
|
+
"title": "Persistence is yours too",
|
|
450
|
+
"code": "const [rail, setRail] = React.useState(() => readCookie(\"rail\") === \"1\");\n\n<AppShell.Root\n rail={rail}\n onRailChange={(next) => {\n setRail(next);\n writeCookie(\"rail\", next ? \"1\" : \"0\");\n }}\n>",
|
|
451
|
+
"language": "tsx"
|
|
452
|
+
},
|
|
453
|
+
{
|
|
454
|
+
"title": "What answers to it",
|
|
455
|
+
"code": "<span className=\"group-data-[rail]/app-shell:hidden\">CUE++</span>",
|
|
456
|
+
"language": "tsx"
|
|
457
|
+
},
|
|
458
|
+
{
|
|
459
|
+
"title": "The desktop shape: one chrome row",
|
|
460
|
+
"code": "<AppShell.Bar\n platformDrag\n center=\"main-stage.cue\"\n brand={<><AppShell.NavTrigger /><Eyebrow>cue++</Eyebrow></>}\n actions={<><Chip tone=\"ok\">live</Chip><IconButton aria-label=\"Preview\" icon={Monitor} size=\"sm\" /></>}\n>\n <Toolbar.Button icon={Play}>Go</Toolbar.Button>\n</AppShell.Bar>",
|
|
461
|
+
"language": "tsx"
|
|
462
|
+
},
|
|
463
|
+
{
|
|
464
|
+
"title": "Where the footer goes",
|
|
465
|
+
"code": "<AppShell.Content>\n <AppShell.Scroller className=\"flex flex-col\">\n <div className=\"flex-1\">{children}</div>\n <Footer meta={…}>…</Footer>\n </AppShell.Scroller>\n</AppShell.Content>",
|
|
466
|
+
"language": "tsx"
|
|
467
|
+
},
|
|
468
|
+
{
|
|
469
|
+
"title": "The one breakpoint",
|
|
470
|
+
"code": "// One definition, two presentations. Nothing below is written twice.\n<AppShell.Sidebar aria-label=\"Console\" drawerTitle=\"Console\">\n <Sidebar.Section label=\"Show\">\n <Sidebar.Item icon={List} active>Cues</Sidebar.Item>\n </Sidebar.Section>\n</AppShell.Sidebar>",
|
|
471
|
+
"language": "tsx"
|
|
472
|
+
},
|
|
473
|
+
{
|
|
474
|
+
"title": "Usage",
|
|
475
|
+
"code": "<AppShell.Root>\n <TitleBar center=\"main-stage.cue\" actions={<Chip tone=\"ok\">live</Chip>}>\n <AppShell.NavTrigger />\n <Eyebrow>CUE++</Eyebrow>\n </TitleBar>\n <AppShell.Body>\n <AppShell.Sidebar aria-label=\"Console\" drawerTitle=\"Console\">\n <Sidebar.Section label=\"Show\">\n <Sidebar.Item icon={List} active>Cues</Sidebar.Item>\n </Sidebar.Section>\n </AppShell.Sidebar>\n <AppShell.Content>\n <Toolbar.Root aria-label=\"Playback\"><Toolbar.Button icon={Play}>Go</Toolbar.Button></Toolbar.Root>\n <AppShell.Scroller><Panel>…</Panel></AppShell.Scroller>\n </AppShell.Content>\n <AppShell.Aside aria-label=\"Inspector\">…</AppShell.Aside>\n </AppShell.Body>\n <StatusBar><StatusBar.Item tone=\"ok\">Art-Net</StatusBar.Item></StatusBar>\n</AppShell.Root>",
|
|
476
|
+
"language": "tsx"
|
|
477
|
+
}
|
|
478
|
+
],
|
|
479
|
+
"status": "stable",
|
|
480
|
+
"url": "/docs/components/app-shell",
|
|
481
|
+
"mdUrl": "/docs/components/app-shell.md",
|
|
482
|
+
"jsonUrl": "/r/components/app-shell.json",
|
|
483
|
+
"whenToUse": [
|
|
484
|
+
"Any screen that fills the window and keeps its chrome on screen: a console, an editor, an agent run, a monitor wall.",
|
|
485
|
+
"Whenever a page needs a navigation column that has to survive a phone. `AppShell.Sidebar` renders the column and the drawer from one set of children.",
|
|
486
|
+
"As the frame around a full-bleed canvas — a graph, a timeline, a video wall — with no navigation column and no scroller at all."
|
|
487
|
+
],
|
|
488
|
+
"whenNotToUse": [
|
|
489
|
+
"A page of prose, a form, or a table that reads better centred. That is `PageShell` (or `Container`), which sets a measure and lets the document scroll.",
|
|
490
|
+
"A depiction of an application inside another page — a hero image, a marketing screenshot. `AppWindowFrame` is the picture of a window; this is the window.",
|
|
491
|
+
"A single panel that happens to be tall. A shell that wraps one `Panel` is four wrappers doing the job of `h-full`."
|
|
492
|
+
],
|
|
493
|
+
"commonMistakes": [
|
|
494
|
+
"Putting `Sidebar.Rail` in `AppShell.Sidebar`'s children. The shell draws the rail itself, into the column only — the same children are also the drawer's, where there is nothing to collapse.",
|
|
495
|
+
"Adding a second scroller. `AppShell.Scroller` is the only element that may scroll; giving `AppShell.Content` an `overflow-y-auto` too puts a scrollbar inside a scrollbar and detaches the toolbar from the work area.",
|
|
496
|
+
"Nesting a shell inside a page that already has a `<main>`. Pass `main={false}` on `AppShell.Content` — a document may have only one.",
|
|
497
|
+
"Reaching for a viewport variant of your own because the shell has one. The `md` switch is licensed for navigation shape and nothing else; everything else in this system is intrinsically responsive.",
|
|
498
|
+
"Hard-coding the navigation column's width somewhere else in the frame — a header cell, a toolbar offset, a sticky rule. Read `--cue-nav-width` instead, or the two drift the first time the column rails.",
|
|
499
|
+
"Railing a column of items with no icons. At 3.5rem the label goes `sr-only` and the icon is all that is left; without one the reader gets an empty strip. `AppShell.Sidebar` takes `collapsible={false}` for exactly that column.",
|
|
500
|
+
"Ending the page with a `Footer` after `AppShell.Body`. A footer belongs to the content column — the last child of `AppShell.Scroller` — or it stretches under the navigation and pretends to be part of the frame.",
|
|
501
|
+
"Stacking a `TitleBar` above an `AppShell.Bar` in a desktop app to get a drag region. `AppShell.Bar platformDrag` is the same contract on the bar you already have, and two chrome rungs of a small window is a lot to spend on furniture.",
|
|
502
|
+
"Putting something clickable in `AppShell.Bar`'s `center`. It is `pointer-events-none` so the dead space around a short title still drags — an interactive centre belongs in `actions` or in `children`, where it is carved out of the drag region."
|
|
503
|
+
],
|
|
504
|
+
"specimens": [
|
|
505
|
+
{
|
|
506
|
+
"title": "AppShell",
|
|
507
|
+
"group": "chrome",
|
|
508
|
+
"components": [
|
|
509
|
+
"AppShell"
|
|
510
|
+
],
|
|
511
|
+
"code": "<div className=\"w-full overflow-hidden rounded-(--radius-surface) border border-border\">\n {/* `h-[26rem]` overrides the shell's own `h-dvh`, and `main={false}`\n * keeps it from emitting a second `<main>` inside the page already\n * wrapping this corpus. Both are what embedding a whole-screen\n * component in a bench costs. */}\n <AppShell.Root className=\"h-[26rem]\" rail={rail} onRailChange={setRail}>\n {/* The toggle is rendered here rather than by the shell: where the\n * control lives is a decision about this bar, and persisting what\n * it sets is a decision about hydration. Both are the caller's. */}\n <AppShell.Bar\n brand={\n <>\n <AppShell.NavTrigger />\n <Eyebrow className=\"group-data-[rail]/app-shell:hidden\">CUE++</Eyebrow>\n <IconButton\n icon={PanelLeft}\n size=\"sm\"\n aria-label={rail ? \"Expand the sidebar\" : \"Collapse the sidebar\"}\n aria-pressed={rail}\n className=\"ms-auto\"\n onClick={() => setRail(!rail)}\n />\n </>\n }\n >\n <span className=\"font-mono text-(length:--cue-text-label) text-fg-muted\">\n main-stage.cue\n </span>\n <Chip tone=\"ok\" className=\"ms-auto\">\n live\n </Chip>\n </AppShell.Bar>\n\n <AppShell.Body>\n <AppShell.Sidebar aria-label=\"Console\" drawerTitle=\"Console\">\n <Sidebar.Section label=\"Show\">\n <Sidebar.Item icon={List} active>\n Cues\n </Sidebar.Item>\n <Sidebar.Item icon={Lightbulb} badge={<Chip>48</Chip>}>\n Fixtures\n </Sidebar.Item>\n </Sidebar.Section>\n </AppShell.Sidebar>\n\n <AppShell.Content main={false}>\n <Toolbar.Root aria-label=\"Cue list\">\n <Toolbar.Button icon={Plus}>Add cue</Toolbar.Button>\n <Toolbar.Separator />\n <Toolbar.Button icon={Monitor}>Live</Toolbar.Button>\n </Toolbar.Root>\n\n <AppShell.Scroller>\n <Panel>\n <PanelHeader title=\"Cue stack\" actions={<Chip tone=\"ok\">live</Chip>} />\n {CUES.map((cue) => (\n <Row key={cue.id}>\n <span className=\"w-[2rem] shrink-0 font-mono tabular-nums\">{cue.id}</span>\n <span className=\"flex-1 truncate\">{cue.label}</span>\n <span className=\"font-mono tabular-nums text-fg-muted\">{cue.time}</span>\n </Row>\n ))}\n </Panel>\n </AppShell.Scroller>\n </AppShell.Content>\n\n <AppShell.Aside aria-label=\"Inspector\" width=\"11rem\">\n <SectionHeader label=\"Selected\" />\n <p className=\"font-mono text-(length:--cue-text-ui) text-fg-muted\">\n Its own scroller, so reading it never moves the work area.\n </p>\n </AppShell.Aside>\n </AppShell.Body>\n\n <StatusBar>\n <StatusBar.Item tone=\"ok\">Art-Net</StatusBar.Item>\n <StatusBar.Item push>Cue 4</StatusBar.Item>\n </StatusBar>\n </AppShell.Root>\n</div>",
|
|
512
|
+
"note": "The console frame, and the arithmetic that holds it up: one viewport tall, an unbroken min-h-0 chain, and exactly one thing scrolling. AppShell.Bar divides the bar at the navigation column, so the mark over the column and the column itself are one box measured from one length. Boxed to 26rem here — a bench has no viewport to give it.",
|
|
513
|
+
"interaction": "the button beside the mark rails the column to 3.5rem of icons, and the header cell over it narrows with it — one --cue-nav-width, rewritten once. The 4px strip on the column's edge does the same. Below 48rem the column is not rendered at all and the trigger opens the same navigation as a drawer."
|
|
514
|
+
},
|
|
515
|
+
{
|
|
516
|
+
"title": "AppShell.Bar",
|
|
517
|
+
"group": "chrome",
|
|
518
|
+
"components": [
|
|
519
|
+
"AppShell"
|
|
520
|
+
],
|
|
521
|
+
"code": "<div className=\"w-full overflow-hidden rounded-(--radius-surface) border border-border\">\n <AppShell.Root className=\"h-auto\">\n <AppShell.Bar\n platformDrag\n center=\"main-stage.cue\"\n brand={\n <>\n <AppShell.NavTrigger />\n <Eyebrow>cue++</Eyebrow>\n </>\n }\n actions={\n <>\n <Chip tone=\"ok\">live</Chip>\n <IconButton aria-label=\"Preview\" icon={Monitor} size=\"sm\" />\n </>\n }\n >\n <Toolbar.Root aria-label=\"Playback\" className=\"border-0 bg-transparent px-0\">\n <Toolbar.Button icon={Play}>Go</Toolbar.Button>\n <Toolbar.Button icon={Eye}>Blind</Toolbar.Button>\n </Toolbar.Root>\n </AppShell.Bar>\n </AppShell.Root>\n</div>",
|
|
522
|
+
"note": "The same bar a console uses, given the desktop app's three extra slots: platformDrag hands every dead pixel to the window manager, center pins the document name to the middle of the bar rather than the middle of the space left over, and actions holds the trailing cluster. One chrome row instead of a TitleBar with a Toolbar stacked under it.",
|
|
523
|
+
"interaction": "the drag region is inert in a browser — there is no window to move — and live in Tauri and Electron, where it is also carved back out around the mark, the leading controls and the actions, so every one of them still takes its click. Double-click-to-maximise is Tauri's for free and the app's own work in Electron."
|
|
524
|
+
}
|
|
525
|
+
]
|
|
526
|
+
}
|