+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/command-palette/CommandPaletteItem.stories.ts b/packages/hub-ui/src/client/components/command-palette/CommandPaletteItem.stories.ts
new file mode 100644
index 00000000..4a1ee039
--- /dev/null
+++ b/packages/hub-ui/src/client/components/command-palette/CommandPaletteItem.stories.ts
@@ -0,0 +1,46 @@
+import type { DevframeCommandEntry } from '@devframes/hub'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import CommandPaletteItem from './CommandPaletteItem.vue'
+
+const entry: DevframeCommandEntry = {
+ id: 'devframes:open-settings',
+ source: 'client',
+ title: 'Open Settings',
+ icon: 'ph:gear-duotone',
+} as DevframeCommandEntry
+
+const meta = {
+ title: 'Commands/PaletteItem',
+ component: CommandPaletteItem,
+ tags: ['autodocs'],
+ decorators: [() => ({ template: '
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No results for "{{ search }}"
+
+
+ No commands available
+
+
+
+
+
+
+
+ + {{ options.title }} +
++ {{ options.message }} +
+ +
+
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts b/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts
new file mode 100644
index 00000000..08b29191
--- /dev/null
+++ b/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h, onMounted } from 'vue'
+import { addToast } from '../../state/toasts'
+import { message } from '../../stories/fixtures'
+import ToastOverlay from './ToastOverlay.vue'
+
+const meta = {
+ title: 'Messages/ToastOverlay',
+ component: ToastOverlay,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'fullscreen',
+ // Fixed bottom-right overlay — render in an iframe for the docs canvas.
+ docs: {
+ story: { inline: false, height: '360px' },
+ description: {
+ component: 'The toast stack shown bottom-right for `notify` messages. These stories push toasts on mount (with a long auto-dismiss so they stay visible).',
+ },
+ },
+ },
+} satisfies Meta
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/ColorSchemeRoot.vue b/packages/hub-ui/src/client/components/dock/ColorSchemeRoot.vue
new file mode 100644
index 00000000..41744e32
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/ColorSchemeRoot.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/Dock.stories.ts b/packages/hub-ui/src/client/components/dock/Dock.stories.ts
new file mode 100644
index 00000000..e7779be2
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/Dock.stories.ts
@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { CreateMockContextOptions } from '../../stories/mock-context'
+import type { DockLayout } from './dock-layout'
+import { h } from 'vue'
+import { categorizedEntries, groupedEntries, overflowEntries } from '../../stories/fixtures'
+import { mountWithContext } from '../../stories/story-helpers'
+import FloatingElements from '../floating/FloatingElements.vue'
+import { DEFAULT_DOCK_LAYOUT } from './dock-layout'
+import Dock from './Dock.vue'
+
+/**
+ * The story args ARE the dock layout: every field is wired to a Storybook
+ * control so the bar's dimensions, capacity, spacing and snapping can be tuned
+ * live from the Controls panel. Individual stories override specific fields to
+ * showcase a single tunable in isolation.
+ */
+type LayoutArgs = DockLayout
+
+const meta = {
+ title: 'Dock/Shell/Float Bar',
+ component: Dock,
+ tags: ['autodocs'],
+ args: { ...DEFAULT_DOCK_LAYOUT },
+ argTypes: {
+ barHeight: { control: { type: 'range', min: 24, max: 80, step: 1 }, description: 'Height of the bar (px).' },
+ barMinWidth: { control: { type: 'range', min: 60, max: 220, step: 1 }, description: 'Minimum bar width before content (px).' },
+ minimizedSize: { control: { type: 'range', min: 14, max: 40, step: 1 }, description: 'Side length of the collapsed nub (px).' },
+ glowSize: { control: { type: 'range', min: 60, max: 320, step: 1 }, description: 'Diameter of the ambient glow (px).' },
+ glowBlur: { control: { type: 'range', min: 0, max: 120, step: 1 }, description: 'Blur radius of the glow (px).' },
+ maxVisibleItems: { control: { type: 'range', min: 1, max: 12, step: 1 }, description: 'Inline item capacity before overflow.' },
+ viewportMargin: { control: { type: 'range', min: 0, max: 48, step: 1 }, description: 'Gap from the viewport edge (px).' },
+ panelOverlapFactor: { control: { type: 'range', min: 0, max: 1, step: 0.05 }, description: 'Dock↔panel overlap (fraction of bar thickness). Visible with the panel open — see the Embedded stories.' },
+ edgeSnapPercent: { control: { type: 'range', min: 0, max: 20, step: 1 }, description: 'Snap-to-edge zone (viewport %).' },
+ centerSnapPercent: { control: { type: 'range', min: 0, max: 20, step: 1 }, description: 'Snap-to-center zone (viewport %).' },
+ edgeZoneHeight: { control: { type: 'range', min: 0, max: 200, step: 1 }, description: 'Top/bottom edge-detection zone height (px).' },
+ },
+ parameters: {
+ layout: 'fullscreen',
+ // The shell is `position: fixed` to the viewport, so it escapes the small
+ // inline docs preview block — render it in an iframe of a fixed height.
+ docs: {
+ story: { inline: false, height: '520px' },
+ description: {
+ component: 'The floating dock bar (float mode). It anchors to an edge of the viewport and can be dragged around. Its padding, sizing, spacing, capacity and snapping are driven by the `DockLayout` constants (`dock-layout.ts`) — every field is exposed here as a live control. These stories pin `inactiveTimeout: -1` so the bar stays expanded.',
+ },
+ },
+ },
+} satisfies Meta
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockContextMenu.ts b/packages/hub-ui/src/client/components/dock/DockContextMenu.ts
new file mode 100644
index 00000000..cdf2ae49
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockContextMenu.ts
@@ -0,0 +1,135 @@
+import type { DevframeDockEntry } from '@devframes/hub'
+import type { DocksContext } from '@devframes/hub/client'
+import { h } from 'vue'
+import { setDockContextMenu } from '../../state/floating-tooltip'
+import { isDockPopupSupported, requestDockPopupOpen, useIsDockPopupOpen } from '../../state/popup'
+
+// @unocss-include
+
+interface DockMenuItem {
+ label: string
+ icon: string
+ action: () => void
+ visible: boolean
+}
+
+function renderMenuItem(item: DockMenuItem) {
+ return h('button', {
+ class: 'flex items-center gap-2 px3 py1.5 rounded hover:bg-active transition text-left',
+ onClick: item.action,
+ }, [
+ h('div', { class: `${item.icon} text-base op60` }),
+ h('span', item.label),
+ ])
+}
+
+function hideDock(context: DocksContext, entry: DevframeDockEntry) {
+ const settingsStore = context.docks.settings
+ const id = entry.id
+ settingsStore.mutate((state) => {
+ if (!state.docksHidden.includes(id))
+ state.docksHidden = [...state.docksHidden, id]
+ })
+ if (context.docks.selected?.id === id)
+ context.docks.switchEntry(null)
+ setDockContextMenu(null)
+}
+
+function refreshDock(context: DocksContext, entry: DevframeDockEntry) {
+ const state = context.docks.getStateById(entry.id)
+ const iframe = state?.domElements.iframe
+ if (!iframe) {
+ setDockContextMenu(null)
+ return
+ }
+ const src = iframe.src
+ iframe.src = ''
+ iframe.src = src
+ setDockContextMenu(null)
+}
+
+function canHide(context: DocksContext, entry: DevframeDockEntry) {
+ if (entry.id === '~settings')
+ return false
+ return context.docks.entries.some(item => item.id === entry.id)
+}
+
+function canRefresh(entry: DevframeDockEntry) {
+ return entry.type === 'iframe'
+}
+
+export function openDockContextMenu(options: {
+ context: DocksContext
+ entry: DevframeDockEntry
+ el: HTMLElement
+ gap?: number
+}) {
+ const { context, entry, el, gap = 6 } = options
+ const isEdgeMode = context.panel.store.mode === 'edge'
+ const items: DockMenuItem[] = [
+ {
+ label: 'Hide',
+ icon: 'i-ph-eye-slash-duotone',
+ action: () => hideDock(context, entry),
+ visible: canHide(context, entry),
+ },
+ {
+ label: 'Refresh',
+ icon: 'i-ph-arrow-clockwise-duotone',
+ action: () => refreshDock(context, entry),
+ visible: canRefresh(entry),
+ },
+ {
+ label: isEdgeMode ? 'Float Mode' : 'Edge Mode',
+ icon: isEdgeMode ? 'i-ph-arrows-out-duotone' : 'i-ph-square-half-bottom-duotone',
+ action: () => {
+ if (isEdgeMode) {
+ // Reset float position defaults based on current edge position
+ const store = context.panel.store
+ switch (store.position) {
+ case 'bottom':
+ store.left = 50
+ store.top = 100
+ break
+ case 'top':
+ store.left = 50
+ store.top = 0
+ break
+ case 'left':
+ store.left = 0
+ store.top = 50
+ break
+ case 'right':
+ store.left = 100
+ store.top = 50
+ break
+ }
+ store.mode = 'float'
+ }
+ else {
+ context.panel.store.mode = 'edge'
+ }
+ setDockContextMenu(null)
+ },
+ visible: context.clientType === 'embedded',
+ },
+ {
+ label: 'Popup',
+ icon: 'i-ph-arrow-square-out-duotone',
+ action: () => {
+ setDockContextMenu(null)
+ requestDockPopupOpen(context)
+ },
+ visible: isDockPopupSupported() && !useIsDockPopupOpen().value && context.clientType === 'embedded',
+ },
+ ].filter(item => item.visible)
+
+ if (items.length === 0)
+ return
+
+ setDockContextMenu({
+ el,
+ gap,
+ content: () => h('div', { class: 'flex flex-col text-sm min-w-36 mx--1' }, items.map(renderMenuItem)),
+ })
+}
diff --git a/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts b/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts
new file mode 100644
index 00000000..439ee4e6
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockEdge.stories.ts
@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { categorizedEntries, groupedEntries } from '../../stories/fixtures'
+import { mountWithContext } from '../../stories/story-helpers'
+import FloatingElements from '../floating/FloatingElements.vue'
+import DockEdge from './DockEdge.vue'
+
+/** A stand-in panel body (the real one mounts iframe/custom views). */
+function body(entry: any) {
+ return h('div', { class: 'w-full h-full p6 font-sans color-base of-auto' }, [
+ h('div', { class: 'text-lg font-medium mb2' }, entry?.title ?? 'No selection'),
+ h('div', { class: 'op60 text-sm' }, `Panel content for "${entry?.id ?? '—'}"`),
+ ])
+}
+
+const meta = {
+ title: 'Dock/Shell/Edge Panel',
+ component: DockEdge,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ story: { inline: false, height: '520px' },
+ description: {
+ component: 'The edge-docked shell (edge mode): a toolbar pinned to one viewport edge with a resizable panel. The `#view` slot is stubbed here in place of the live view renderer.',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+function edgeStory(position: 'top' | 'right' | 'bottom' | 'left', open = true) {
+ return {
+ render: () => ({
+ setup: () => mountWithContext(
+ {
+ entries: categorizedEntries,
+ selectedId: open ? 'overview' : null,
+ panel: { mode: 'edge', position, open, height: 40, width: 30 },
+ },
+ ctx => [
+ h(DockEdge, { context: ctx }, { view: ({ entry }: any) => body(entry) }),
+ h(FloatingElements),
+ ],
+ ),
+ }),
+ } satisfies Story
+}
+
+/** Bottom edge with the panel open. */
+export const Bottom: Story = edgeStory('bottom')
+
+/** Top edge. */
+export const Top: Story = edgeStory('top')
+
+/** Left edge — toolbar runs vertically. */
+export const Left: Story = edgeStory('left')
+
+/** Right edge. */
+export const Right: Story = edgeStory('right')
+
+/** Toolbar only — nothing selected, so the panel body is collapsed away. */
+export const ToolbarOnly: Story = edgeStory('bottom', false)
+
+/** Edge dock hosting a group — the group rail shows inside the panel. */
+export const WithGroup: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ {
+ entries: groupedEntries,
+ selectedId: 'nuxt:overview',
+ panel: { mode: 'edge', position: 'bottom', open: true, height: 45 },
+ },
+ ctx => [
+ h(DockEdge, { context: ctx }, { view: ({ entry }: any) => body(entry) }),
+ h(FloatingElements),
+ ],
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/dock/DockEdge.vue b/packages/hub-ui/src/client/components/dock/DockEdge.vue
new file mode 100644
index 00000000..5d589db2
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockEdge.vue
@@ -0,0 +1,292 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockEmbedded.stories.ts b/packages/hub-ui/src/client/components/dock/DockEmbedded.stories.ts
new file mode 100644
index 00000000..a3c110ef
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockEmbedded.stories.ts
@@ -0,0 +1,86 @@
+import type { DevframeDockEntry } from '@devframes/hub'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { categorizedEntries } from '../../stories/fixtures'
+import { mountWithContext } from '../../stories/story-helpers'
+import DockEmbedded from './DockEmbedded.vue'
+
+// Entries whose iframes load `about:blank`, so the full shell (address bar +
+// iframe pane) renders without reaching for a dev server.
+const blankEntries: DevframeDockEntry[] = [
+ { id: 'overview', type: 'iframe', url: 'about:blank', title: 'Overview', icon: 'ph:gauge-duotone' },
+ { id: 'inspect', type: 'iframe', url: 'about:blank', title: 'Inspect', icon: 'ph:stethoscope-duotone' },
+ { id: 'assets', type: 'iframe', url: 'about:blank', title: 'Assets', icon: 'ph:images-duotone' },
+] as DevframeDockEntry[]
+
+const meta = {
+ title: 'Dock/Shell/Embedded',
+ component: DockEmbedded,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ story: { inline: false, height: '540px' },
+ description: {
+ component: 'The full embedded shell as injected into a host app: the dock bar plus panel (float or edge), floating overlays, command palette, toasts and confirm dialog — switched by `panel.store.mode`.',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** Float mode, panel closed — just the resting dock bar. */
+export const FloatClosed: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: categorizedEntries, panel: { mode: 'float', position: 'bottom', left: 50, top: 100, inactiveTimeout: -1 } },
+ ctx => h(DockEmbedded, { context: ctx }),
+ ),
+ }),
+}
+
+/** Float mode with the panel open over an `about:blank` iframe. */
+export const FloatOpen: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: blankEntries, selectedId: 'overview', panel: { mode: 'float', position: 'bottom', left: 50, top: 100, inactiveTimeout: -1, width: 60, height: 60 } },
+ ctx => h(DockEmbedded, { context: ctx }),
+ ),
+ }),
+}
+
+/**
+ * `panelOverlapFactor: 0.2` — the panel slides clear of the dock bar, leaving
+ * most of the bar hanging past the panel edge so the iframe underneath stays
+ * readable (compare with `FloatOpen`, which uses the default `0.5`).
+ */
+export const FloatReducedOverlap: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: blankEntries, selectedId: 'overview', panel: { mode: 'float', position: 'bottom', left: 50, top: 100, inactiveTimeout: -1, width: 60, height: 60 } },
+ ctx => h(DockEmbedded, { context: ctx, layout: { panelOverlapFactor: 0.2 } }),
+ ),
+ }),
+}
+
+/** Edge mode, docked to the bottom with the panel open. */
+export const Edge: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: blankEntries, selectedId: 'overview', panel: { mode: 'edge', position: 'bottom', open: true, height: 45 } },
+ ctx => h(DockEmbedded, { context: ctx }),
+ ),
+ }),
+}
+
+/** Unauthorized — the shell forces float mode and shows the warning. */
+export const Unauthorized: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: categorizedEntries, isTrusted: false, panel: { mode: 'edge', position: 'bottom', inactiveTimeout: -1 } },
+ ctx => h(DockEmbedded, { context: ctx }),
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/dock/DockEmbedded.vue b/packages/hub-ui/src/client/components/dock/DockEmbedded.vue
new file mode 100644
index 00000000..ca3fd6d2
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockEmbedded.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupButton.stories.ts b/packages/hub-ui/src/client/components/dock/DockGroupButton.stories.ts
new file mode 100644
index 00000000..bd2f6d76
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockGroupButton.stories.ts
@@ -0,0 +1,93 @@
+import type { DevframeViewGroup } from '@devframes/hub'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { groupedEntries } from '../../stories/fixtures'
+import { mountWithContext, stage } from '../../stories/story-helpers'
+import FloatingElements from '../floating/FloatingElements.vue'
+import DockGroupButton from './DockGroupButton.vue'
+
+const nuxtGroup = groupedEntries.find(e => e.id === 'nuxt') as DevframeViewGroup
+const playgroundGroup = groupedEntries.find(e => e.id === 'playground') as DevframeViewGroup
+
+function bar(children: any) {
+ return h('div', { class: 'flex items-center gap-0.5 p1.5 rounded-full bg-glass border border-base shadow color-base' }, children)
+}
+
+const meta = {
+ title: 'Dock/Group/Button',
+ component: DockGroupButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'The dock-bar button representing a group. Click behaviour depends on the group: a group with `defaultChildId` opens that member directly, otherwise it reveals a popover of members. `FloatingElements` is mounted alongside so the popover renders.',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/**
+ * A popover-only group (no `defaultChildId`): clicking reveals the member
+ * popover.
+ */
+export const PopoverOnly: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries },
+ ctx => stage([
+ bar(h(DockGroupButton, {
+ context: ctx,
+ group: playgroundGroup,
+ isVertical: false,
+ selected: ctx.docks.selected,
+ onSelect: (e: any) => ctx.docks.switchEntry(e?.id),
+ })),
+ h(FloatingElements),
+ ]),
+ ),
+ }),
+}
+
+/**
+ * A group with a `defaultChildId`: clicking opens that member straight away
+ * instead of showing the popover.
+ */
+export const WithDefaultChild: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries },
+ ctx => stage([
+ bar(h(DockGroupButton, {
+ context: ctx,
+ group: nuxtGroup,
+ isVertical: false,
+ selected: ctx.docks.selected,
+ onSelect: (e: any) => ctx.docks.switchEntry(e?.id),
+ })),
+ h(FloatingElements),
+ ]),
+ ),
+ }),
+}
+
+/** Active state — a member of the group currently owns the panel. */
+export const Active: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries, selectedId: 'nuxt:pages' },
+ ctx => stage([
+ bar(h(DockGroupButton, {
+ context: ctx,
+ group: nuxtGroup,
+ isVertical: false,
+ selected: ctx.docks.selected,
+ onSelect: (e: any) => ctx.docks.switchEntry(e?.id),
+ })),
+ h(FloatingElements),
+ ]),
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupButton.vue b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
new file mode 100644
index 00000000..4bec2bbd
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockGroupButton.vue
@@ -0,0 +1,134 @@
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupPopover.stories.ts b/packages/hub-ui/src/client/components/dock/DockGroupPopover.stories.ts
new file mode 100644
index 00000000..3f91acd8
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockGroupPopover.stories.ts
@@ -0,0 +1,107 @@
+import type { DevframeViewGroup } from '@devframes/hub'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { DEFAULT_STATE_USER_SETTINGS } from '@devframes/hub/constants'
+import { h } from 'vue'
+import { getGroupMembersGrouped } from '../../state/dock-settings'
+import { group, groupedEntries, subcategorizedGroupEntries, toolsGroup } from '../../stories/fixtures'
+import { mountWithContext, stage } from '../../stories/story-helpers'
+import DockGroupPopover from './DockGroupPopover.vue'
+
+const settings = DEFAULT_STATE_USER_SETTINGS()
+const nuxtGroup = groupedEntries.find(e => e.id === 'nuxt') as DevframeViewGroup
+// Members split by in-group sub-category (the shape the popover renders).
+const nuxtMembers = getGroupMembersGrouped(groupedEntries, 'nuxt', settings)
+const toolsMembers = getGroupMembersGrouped(subcategorizedGroupEntries, 'tools', settings)
+
+/** A framed surface that stands in for the floating popover container. */
+function popover(children: any) {
+ return h('div', { class: 'bg-glass color-base border border-base rounded-lg shadow p1 font-sans' }, children)
+}
+
+const meta = {
+ title: 'Dock/Group/Popover',
+ component: DockGroupPopover,
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** The group's members listed under its heading; click to select one. */
+export const Default: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries },
+ ctx => stage(popover(h(DockGroupPopover, {
+ context: ctx,
+ group: nuxtGroup,
+ members: nuxtMembers,
+ selectedId: ctx.docks.selectedId,
+ onSelect: (entry: any) => ctx.docks.switchEntry(entry.id),
+ }))),
+ ),
+ }),
+}
+
+/** With one member already active — it gets the tinted, highlighted row. */
+export const WithSelection: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries, selectedId: 'nuxt:pages' },
+ ctx => stage(popover(h(DockGroupPopover, {
+ context: ctx,
+ group: nuxtGroup,
+ members: nuxtMembers,
+ selectedId: ctx.docks.selectedId,
+ onSelect: (entry: any) => ctx.docks.switchEntry(entry.id),
+ }))),
+ ),
+ }),
+}
+
+/** A member carrying a count badge. */
+export const WithBadge: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries },
+ ctx => stage(popover(h(DockGroupPopover, {
+ context: ctx,
+ group: nuxtGroup,
+ members: nuxtMembers,
+ selectedId: 'nuxt:components',
+ onSelect: (entry: any) => ctx.docks.switchEntry(entry.id),
+ }))),
+ ),
+ }),
+}
+
+/** Members split across in-group sub-categories, shown with section dividers. */
+export const WithSubcategories: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: subcategorizedGroupEntries },
+ ctx => stage(popover(h(DockGroupPopover, {
+ context: ctx,
+ group: toolsGroup,
+ members: toolsMembers,
+ selectedId: ctx.docks.selectedId,
+ onSelect: (entry: any) => ctx.docks.switchEntry(entry.id),
+ }))),
+ ),
+ }),
+}
+
+/** An empty group falls back to the "No tools yet" placeholder. */
+export const Empty: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: [group('empty', 'Empty', 'ph:folder-dashed-duotone')] },
+ ctx => stage(popover(h(DockGroupPopover, {
+ context: ctx,
+ group: group('empty', 'Empty', 'ph:folder-dashed-duotone') as DevframeViewGroup,
+ members: [],
+ selectedId: null,
+ }))),
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue b/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue
new file mode 100644
index 00000000..8abd655c
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockGroupPopover.vue
@@ -0,0 +1,57 @@
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.stories.ts b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.stories.ts
new file mode 100644
index 00000000..928853cf
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.stories.ts
@@ -0,0 +1,75 @@
+import type { DevframeViewGroup } from '@devframes/hub'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { groupedEntries, subcategorizedGroupEntries, toolsGroup } from '../../stories/fixtures'
+import { mountWithContext, stage } from '../../stories/story-helpers'
+import DockGroupSidebar from './DockGroupSidebar.vue'
+
+const nuxtGroup = groupedEntries.find(e => e.id === 'nuxt') as DevframeViewGroup
+
+/** A bordered shell that mimics the panel the sidebar lives inside. */
+function shell(children: any, heightClass = 'h-80') {
+ return h('div', { class: `flex ${heightClass} bg-glass color-base border border-base rounded-lg shadow overflow-hidden font-sans` }, [
+ children,
+ h('div', { class: 'flex-1 flex items-center justify-center op40 text-sm' }, 'panel body'),
+ ])
+}
+
+const meta = {
+ title: 'Dock/Group/Sidebar',
+ component: DockGroupSidebar,
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/**
+ * The group rail shown down the side of a panel when the active entry belongs
+ * to a group — the group anchor on top, its members below.
+ */
+export const Default: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries, selectedId: 'nuxt:overview' },
+ ctx => stage(shell(h(DockGroupSidebar, {
+ context: ctx,
+ group: nuxtGroup,
+ selectedId: ctx.docks.selectedId,
+ }))),
+ ),
+ }),
+}
+
+/** A different member active — the highlight follows the selection. */
+export const WithSelection: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries, selectedId: 'nuxt:components' },
+ ctx => stage(shell(h(DockGroupSidebar, {
+ context: ctx,
+ group: nuxtGroup,
+ selectedId: ctx.docks.selectedId,
+ }))),
+ ),
+ }),
+}
+
+/**
+ * A short frame folds the members that don't fit into a bottom "show more"
+ * button (with a count badge). Here the active member (`tools:graph`) lands in
+ * the overflow, so the show-more button is highlighted to flag the hidden
+ * selection.
+ */
+export const Overflow: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: subcategorizedGroupEntries, selectedId: 'tools:graph' },
+ ctx => stage(shell(h(DockGroupSidebar, {
+ context: ctx,
+ group: toolsGroup,
+ selectedId: ctx.docks.selectedId,
+ }), 'h-44')),
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
new file mode 100644
index 00000000..bab673ef
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockGroupSidebar.vue
@@ -0,0 +1,197 @@
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockIcon.stories.ts b/packages/hub-ui/src/client/components/dock/DockIcon.stories.ts
new file mode 100644
index 00000000..d21d7d6f
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockIcon.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DockIcon from './DockIcon.vue'
+
+const meta = {
+ title: 'Dock/Icon',
+ component: DockIcon,
+ tags: ['autodocs'],
+ // Render at a legible size — DockIcon fills its box. Use the template-based
+ // `
+
+
+
+
+
+
+
+ No tools yet
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockOverflowButton.stories.ts b/packages/hub-ui/src/client/components/dock/DockOverflowButton.stories.ts
new file mode 100644
index 00000000..698775e8
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockOverflowButton.stories.ts
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { docksSplitGroupsWithCapacity } from '../../state/dock-settings'
+import { overflowEntries } from '../../stories/fixtures'
+import { mountWithContext, stage } from '../../stories/story-helpers'
+import FloatingElements from '../floating/FloatingElements.vue'
+import DockOverflowButton from './DockOverflowButton.vue'
+
+function bar(children: any) {
+ return h('div', { class: 'flex items-center gap-0.5 p1.5 rounded-full bg-glass border border-base shadow color-base' }, children)
+}
+
+const meta = {
+ title: 'Dock/Bar/OverflowButton',
+ component: DockOverflowButton,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'Shown when the bar exceeds its slot capacity. Carries a badge with the hidden count and reveals the remaining entries in a popover on click.',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** Enough entries to overflow the 5-slot capacity; the remainder go behind the button. */
+export const Default: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: overflowEntries },
+ (ctx) => {
+ const overflow = docksSplitGroupsWithCapacity(ctx.docks.groupedEntries, 5).overflow
+ return stage([
+ bar(h(DockOverflowButton, {
+ context: ctx,
+ isVertical: false,
+ groups: overflow,
+ selected: ctx.docks.selected,
+ onSelect: (e: any) => ctx.docks.switchEntry(e?.id),
+ })),
+ h(FloatingElements),
+ ])
+ },
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/dock/DockOverflowButton.vue b/packages/hub-ui/src/client/components/dock/DockOverflowButton.vue
new file mode 100644
index 00000000..d1eb524b
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockOverflowButton.vue
@@ -0,0 +1,98 @@
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockPanel.stories.ts b/packages/hub-ui/src/client/components/dock/DockPanel.stories.ts
new file mode 100644
index 00000000..6e3b7260
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockPanel.stories.ts
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { categorizedEntries, groupedEntries } from '../../stories/fixtures'
+import { mountWithContext } from '../../stories/story-helpers'
+import DockPanel from './DockPanel.vue'
+
+const MARGINS = { left: 2, top: 2, right: 2, bottom: 2 }
+
+function body(entry: any) {
+ return h('div', { class: 'w-full h-full p6 font-sans color-base of-auto' }, [
+ h('div', { class: 'text-lg font-medium mb2' }, entry?.title ?? 'No selection'),
+ h('div', { class: 'op60 text-sm' }, `Panel content for "${entry?.id ?? '—'}"`),
+ ])
+}
+
+const meta = {
+ title: 'Dock/Shell/Float Panel',
+ component: DockPanel,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ story: { inline: false, height: '540px' },
+ description: {
+ component: 'The floating panel shown above the dock bar in float mode. The `#view` slot is stubbed here in place of the live view renderer.',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** A plain entry selected, panel anchored to the bottom. */
+export const Default: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: categorizedEntries, selectedId: 'overview', panel: { position: 'bottom', width: 60, height: 60 } },
+ ctx => h(DockPanel, {
+ context: ctx,
+ selected: ctx.docks.selected,
+ panelMargins: MARGINS,
+ }, { view: ({ entry }: any) => body(entry) }),
+ ),
+ }),
+}
+
+/** A group member selected — the group rail appears down the left of the panel. */
+export const WithGroupSidebar: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries, selectedId: 'nuxt:overview', panel: { position: 'bottom', width: 60, height: 60 } },
+ ctx => h(DockPanel, {
+ context: ctx,
+ selected: ctx.docks.selected,
+ panelMargins: MARGINS,
+ }, { view: ({ entry }: any) => body(entry) }),
+ ),
+ }),
+}
+
+/** Anchored to the right edge. */
+export const RightAnchored: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: categorizedEntries, selectedId: 'overview', panel: { position: 'right', width: 40, height: 80 } },
+ ctx => h(DockPanel, {
+ context: ctx,
+ selected: ctx.docks.selected,
+ panelMargins: MARGINS,
+ }, { view: ({ entry }: any) => body(entry) }),
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/dock/DockPanel.vue b/packages/hub-ui/src/client/components/dock/DockPanel.vue
new file mode 100644
index 00000000..7785f3c2
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockPanel.vue
@@ -0,0 +1,212 @@
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockPanelResizer.vue b/packages/hub-ui/src/client/components/dock/DockPanelResizer.vue
new file mode 100644
index 00000000..1d99bacc
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockPanelResizer.vue
@@ -0,0 +1,144 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/dock/DockStandalone.stories.ts b/packages/hub-ui/src/client/components/dock/DockStandalone.stories.ts
new file mode 100644
index 00000000..b467a98c
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockStandalone.stories.ts
@@ -0,0 +1,63 @@
+import type { DevframeDockEntry } from '@devframes/hub'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { mountWithContext } from '../../stories/story-helpers'
+import DockStandalone from './DockStandalone.vue'
+
+// Standalone renders the selected entry's view; use about:blank iframes so the
+// shell renders without a dev server.
+const blankEntries: DevframeDockEntry[] = [
+ { id: 'overview', type: 'iframe', url: 'about:blank', title: 'Overview', icon: 'ph:gauge-duotone', category: 'app' },
+ { id: 'routes', type: 'iframe', url: 'about:blank', title: 'Routes', icon: 'ph:signpost-duotone', category: 'app' },
+ { id: 'nuxt', type: 'group', title: 'Nuxt', icon: 'logos:nuxt-icon', category: 'framework', defaultChildId: 'nuxt:overview' },
+ { id: 'nuxt:overview', type: 'iframe', url: 'about:blank', title: 'Overview', icon: 'ph:gauge-duotone', groupId: 'nuxt' },
+ { id: 'nuxt:pages', type: 'iframe', url: 'about:blank', title: 'Pages', icon: 'ph:files-duotone', groupId: 'nuxt' },
+] as DevframeDockEntry[]
+
+const meta = {
+ title: 'Dock/Shell/Standalone',
+ component: DockStandalone,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'fullscreen',
+ docs: {
+ story: { inline: false, height: '560px' },
+ description: {
+ component: 'The standalone shell: a full-window sidebar + view layout (no floating dock), used when Devframes runs in its own page/window.',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** Sidebar of tools with the first entry auto-selected. */
+export const Default: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: blankEntries, clientType: 'standalone' },
+ ctx => h(DockStandalone, { context: ctx }),
+ ),
+ }),
+}
+
+/** A group member selected — the group rail appears beside the view. */
+export const WithGroup: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: blankEntries, clientType: 'standalone', selectedId: 'nuxt:overview' },
+ ctx => h(DockStandalone, { context: ctx }),
+ ),
+ }),
+}
+
+/** Unauthorized — the standalone window shows the auth notice. */
+export const Unauthorized: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: blankEntries, clientType: 'standalone', isTrusted: false },
+ ctx => h(DockStandalone, { context: ctx }),
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/dock/DockStandalone.vue b/packages/hub-ui/src/client/components/dock/DockStandalone.vue
new file mode 100644
index 00000000..68b44f7d
--- /dev/null
+++ b/packages/hub-ui/src/client/components/dock/DockStandalone.vue
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/icons/BrandWordmark.vue b/packages/hub-ui/src/client/components/icons/BrandWordmark.vue
new file mode 100644
index 00000000..0b86ea20
--- /dev/null
+++ b/packages/hub-ui/src/client/components/icons/BrandWordmark.vue
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/icons/IconifyIcon.vue b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
new file mode 100644
index 00000000..7a210cca
--- /dev/null
+++ b/packages/hub-ui/src/client/components/icons/IconifyIcon.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/message/MessageItemConstants.ts b/packages/hub-ui/src/client/components/message/MessageItemConstants.ts
new file mode 100644
index 00000000..ba5aa4e5
--- /dev/null
+++ b/packages/hub-ui/src/client/components/message/MessageItemConstants.ts
@@ -0,0 +1,29 @@
+import type { DevframeMessageLevel } from '@devframes/hub'
+
+// @unocss-include
+
+export interface LevelStyle {
+ icon: string
+ color: string
+ bg: string
+ label: string
+}
+
+export const levels: Record
+
+
+
+
+ {{ entry.message }}
+
+ {{ timeAgo }}
+
+ {{ entry.description }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue b/packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue
new file mode 100644
index 00000000..0975d8c4
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views-builtin/SettingsAppearance.vue
@@ -0,0 +1,131 @@
+
+
+
+
+
+
+
+
+
+
+
+ Reset Keyboard Shortcuts
+
+
+ Remove all custom shortcut overrides and restore default keybindings
+
+
+
+
+
+
+
+
+
+ Reset Dock Settings
+
+
+ Restore default dock visibility, order, and pinning
+
+
+
+
+
+
+
+
+
+
+
+ Reset All Settings
+
+
+ Reset everything to defaults including appearance, docks, and shortcuts
+
+
+
+
+
+
+
+
+
+ Revoke Authorization
+
+
+ De-authorize this browser and revoke its access token; you'll re-authorize with a new code
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/views-builtin/SettingsDocks.vue b/packages/hub-ui/src/client/components/views-builtin/SettingsDocks.vue
new file mode 100644
index 00000000..ea29142e
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views-builtin/SettingsDocks.vue
@@ -0,0 +1,557 @@
+
+
+
+
+
+
+
+
+ Color mode
+ Theme for Devframes and its inner panels
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Dock mode
+ How the Devframes panel is displayed
+
+
+
+
+ + Manage visibility and order of dock entries. Hidden entries will not appear in the dock bar. +
+ +
+
+
+
diff --git a/packages/hub-ui/src/client/components/views-builtin/SettingsShortcuts.vue b/packages/hub-ui/src/client/components/views-builtin/SettingsShortcuts.vue
new file mode 100644
index 00000000..fad03431
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views-builtin/SettingsShortcuts.vue
@@ -0,0 +1,434 @@
+
+
+
+
+
+
+
+
+
+ {{ getCategoryLabel(category) }}
+ ({{ entries.length }})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No tools in this group yet
+
+
+
+
+ {{ getCategoryLabel(subcategory) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Customize keyboard shortcuts for commands. +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ row.command.title }}
+ server
+
+
+ {{ row.command.description }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No commands found
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinClientAuthNotice.stories.ts b/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinClientAuthNotice.stories.ts
new file mode 100644
index 00000000..dddb5b14
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinClientAuthNotice.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { mountWithContext } from '../../stories/story-helpers'
+import ViewBuiltinClientAuthNotice from './ViewBuiltinClientAuthNotice.vue'
+
+const meta = {
+ title: 'Views/Builtin/AuthNotice',
+ component: ViewBuiltinClientAuthNotice,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'The authorization prompt shown when the client is not yet trusted — explains the risk and takes a one-time code.',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { isTrusted: false },
+ ctx => h('div', { class: 'h-140 bg-base color-base border border-base rounded-lg overflow-auto' }, h(ViewBuiltinClientAuthNotice, { context: ctx })),
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinClientAuthNotice.vue b/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinClientAuthNotice.vue
new file mode 100644
index 00000000..26ac0e8a
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinClientAuthNotice.vue
@@ -0,0 +1,133 @@
+
+
+
+
+
+ + Edit Shortcut +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ warning }}
+
+
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinSettings.stories.ts b/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinSettings.stories.ts
new file mode 100644
index 00000000..350575fb
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinSettings.stories.ts
@@ -0,0 +1,53 @@
+import type { DevframeViewBuiltin } from '@devframes/hub'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { groupedEntries } from '../../stories/fixtures'
+import { mountWithContext } from '../../stories/story-helpers'
+import ViewBuiltinSettings from './ViewBuiltinSettings.vue'
+
+const entry: DevframeViewBuiltin = {
+ type: '~builtin',
+ id: '~settings',
+ title: 'Settings',
+ icon: 'ph:gear-duotone',
+}
+
+function stage(children: any) {
+ return h('div', { class: 'h-140 bg-base color-base border border-base rounded-lg overflow-hidden font-sans' }, children)
+}
+
+const meta = {
+ title: 'Views/Builtin/Settings',
+ component: ViewBuiltinSettings,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'The built-in settings view: Appearance, Docks, Shortcuts and Advanced tabs. Click the tabs to switch.',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** Embedded client — the Appearance tab shows dock-mode options. */
+export const Embedded: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries, clientType: 'embedded' },
+ ctx => stage(h(ViewBuiltinSettings, { context: ctx, entry })),
+ ),
+ }),
+}
+
+/** Standalone client — dock-mode options are hidden. */
+export const Standalone: Story = {
+ render: () => ({
+ setup: () => mountWithContext(
+ { entries: groupedEntries, clientType: 'standalone' },
+ ctx => stage(h(ViewBuiltinSettings, { context: ctx, entry })),
+ ),
+ }),
+}
diff --git a/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinSettings.vue b/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinSettings.vue
new file mode 100644
index 00000000..6570522a
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views-builtin/ViewBuiltinSettings.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
+
+
+
+ + Authorize Devframes +
++ Devframes can access your server, read your filesystem, and run commands. + Confirm it's you before continuing. +
+ + +
+
+
+
+
+
+
+ + Find the + 6-digit code + printed in your terminal. +
++ You can also use the magic link to authorize automatically. +
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/views/ViewCustomRenderer.vue b/packages/hub-ui/src/client/components/views/ViewCustomRenderer.vue
new file mode 100644
index 00000000..9f91ad20
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views/ViewCustomRenderer.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/views/ViewEntry.vue b/packages/hub-ui/src/client/components/views/ViewEntry.vue
new file mode 100644
index 00000000..200d94ad
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views/ViewEntry.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Unknown builtin entry: {{ entry }}
+
+
+
+
+
+
+
+
+ Unknown entry: {{ entry }}
+
+
+
+
+ Loading...
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/views/ViewJsonRender.vue b/packages/hub-ui/src/client/components/views/ViewJsonRender.vue
new file mode 100644
index 00000000..47755a3f
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views/ViewJsonRender.vue
@@ -0,0 +1,109 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cross-Origin
+
+
+
+
+
+
+
+
+
+
+ Loading iframe...
+
+
+
+
+
+
diff --git a/packages/hub-ui/src/client/components/views/ViewLauncher.stories.ts b/packages/hub-ui/src/client/components/views/ViewLauncher.stories.ts
new file mode 100644
index 00000000..c90268d9
--- /dev/null
+++ b/packages/hub-ui/src/client/components/views/ViewLauncher.stories.ts
@@ -0,0 +1,71 @@
+import type { DevframeViewLauncher } from '@devframes/hub'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import { mountWithContext } from '../../stories/story-helpers'
+import ViewLauncher from './ViewLauncher.vue'
+
+function launcher(
+ status: 'idle' | 'loading' | 'error' | 'success',
+ extras: Partial
+ Loading...
+
+
+ Error loading spec: {{ error }}
+
+
+ No spec provided
+
+
+
+
diff --git a/packages/hub-ui/src/client/constants.ts b/packages/hub-ui/src/client/constants.ts
new file mode 100644
index 00000000..0864513a
--- /dev/null
+++ b/packages/hub-ui/src/client/constants.ts
@@ -0,0 +1,45 @@
+import type { DevframeViewBuiltin } from '@devframes/hub'
+
+/**
+ * `window` event the "Hide" command dispatches to ask whoever mounted the
+ * embedded dock to tear it down for the session. The hub-ui dock is always
+ * visible by design — hiding is a page-lifetime action, and a reload brings
+ * the dock back (see `src/client/embedded/index.ts`).
+ */
+export const HUB_UI_HIDE_EVENT = 'devframes:hub-ui:hide'
+
+/**
+ * Dock id of the Devframe Inspector (mounted from `@devframes/plugin-inspect`).
+ * The client gates the dock behind the `showDevframeInspector` user setting.
+ * Mirrors the plugin's `PLUGIN_ID`.
+ */
+export const INSPECTOR_DOCK_ID = 'devframes_plugin_inspect'
+
+/**
+ * Dock id of the Terminals feed (from `@devframes/plugin-terminals`).
+ * A launcher tracking a terminal session targets this dock via
+ * `hub:docks:activate({ dockId, params: { sessionId } })` to jump the user
+ * straight to that session's output. Mirrors the plugin's `PLUGIN_ID`.
+ */
+export const TERMINALS_DOCK_ID = 'devframes_plugin_terminals'
+
+/**
+ * Dock id of the Messages feed (from `@devframes/plugin-messages`).
+ * Clicking a toast focuses the entry in that panel. Mirrors the plugin's
+ * `PLUGIN_ID`.
+ */
+export const MESSAGES_DOCK_ID = 'devframes_plugin_messages'
+
+export const BUILTIN_ENTRY_CLIENT_AUTH_NOTICE: DevframeViewBuiltin = Object.freeze({
+ type: '~builtin',
+ category: '~builtin',
+ id: '~client-auth-notice',
+ title: 'Unauthorized',
+ icon: 'ph:warning-duotone',
+})
+
+export const BUILTIN_ENTRIES: readonly DevframeViewBuiltin[] = Object.freeze([
+ BUILTIN_ENTRY_CLIENT_AUTH_NOTICE,
+])
+
+export { DEFAULT_CATEGORIES_ORDER } from '@devframes/hub/constants'
diff --git a/packages/hub-ui/src/client/embedded/index.ts b/packages/hub-ui/src/client/embedded/index.ts
new file mode 100644
index 00000000..24b50cf5
--- /dev/null
+++ b/packages/hub-ui/src/client/embedded/index.ts
@@ -0,0 +1,56 @@
+import type { DockPanelStorage } from '@devframes/hub/client'
+import { getDevframeRpcClient, setDevframeClientContext } from '@devframes/hub/client'
+import { useLocalStorage } from '@vueuse/core'
+import { HUB_UI_HIDE_EVENT } from '../constants'
+import { DEFAULT_DOCK_PANEL_STORE } from '../state/docks'
+
+/**
+ * The floating-dock bootstrap the hub serves at `+ {{ entry.launcher.title }} +
+{{ entry.launcher.description }}
+ + + + + + +
+
+
+ + {{ error }} +
+
+
+ {{ progress }}
+
+
+
+