+
+
+
+
+
+ Authorize Vite DevTools
-
- Vite DevTools offers advanced features that can access your server, view your filesystem, and execute commands.
-
-
- To protect your project from unauthorized access, please authorize your browser before proceeding.
+
+ DevTools can access your server, read your filesystem, and run commands.
+ Confirm it's you before continuing.
-
- Check your terminal for the one-time authorization code and come back.
-
-
- or
+
+
+
+
+
+ Find the
+ 6-digit code
+ printed in your terminal.
+
+
+
+
-
+
+
+ You can also use the magic link to authorize automatically.
+
diff --git a/packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinSettings.stories.ts b/packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinSettings.stories.ts
new file mode 100644
index 00000000..a4a777fc
--- /dev/null
+++ b/packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinSettings.stories.ts
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { DevToolsViewBuiltin } from '@vitejs/devtools-kit'
+import { h } from 'vue'
+import { groupedEntries } from '../../stories/fixtures'
+import { mountWithContext } from '../../stories/story-helpers'
+import ViewBuiltinSettings from './ViewBuiltinSettings.vue'
+
+const entry: DevToolsViewBuiltin = {
+ 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/core/src/client/webcomponents/components/views/ViewLauncher.stories.ts b/packages/core/src/client/webcomponents/components/views/ViewLauncher.stories.ts
new file mode 100644
index 00000000..e74439ad
--- /dev/null
+++ b/packages/core/src/client/webcomponents/components/views/ViewLauncher.stories.ts
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { DevToolsViewLauncher } from '@vitejs/devtools-kit'
+import { h } from 'vue'
+import { mountWithContext } from '../../stories/story-helpers'
+import ViewLauncher from './ViewLauncher.vue'
+
+function launcher(status: 'idle' | 'loading' | 'error' | 'success'): DevToolsViewLauncher {
+ return {
+ id: 'launcher',
+ type: 'launcher',
+ title: 'Launcher',
+ icon: 'ph:rocket-launch-duotone',
+ launcher: {
+ title: 'Launch My Cool App',
+ description: 'Start the dev server and open it here.',
+ status,
+ },
+ } as DevToolsViewLauncher
+}
+
+function stage(children: any) {
+ return h('div', { class: 'h-100 bg-base color-base border border-base rounded-lg overflow-hidden font-sans' }, children)
+}
+
+const meta = {
+ title: 'Views/Launcher',
+ component: ViewLauncher,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A launcher view: a call-to-action that runs the entry\'s `onLaunch` and reflects idle / loading / success / error status.',
+ },
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+function launcherStory(status: 'idle' | 'loading' | 'error' | 'success'): Story {
+ return {
+ render: () => ({
+ setup: () => mountWithContext({}, ctx => stage(h(ViewLauncher, { context: ctx, entry: launcher(status) }))),
+ }),
+ }
+}
+
+export const Idle: Story = launcherStory('idle')
+export const Loading: Story = launcherStory('loading')
+export const Success: Story = launcherStory('success')
+export const Error: Story = launcherStory('error')
diff --git a/packages/core/src/client/webcomponents/components/views/ViewLauncher.vue b/packages/core/src/client/webcomponents/components/views/ViewLauncher.vue
index a11ef354..6b51ecf4 100644
--- a/packages/core/src/client/webcomponents/components/views/ViewLauncher.vue
+++ b/packages/core/src/client/webcomponents/components/views/ViewLauncher.vue
@@ -2,6 +2,7 @@
import type { DevToolsViewLauncher, DevToolsViewLauncherStatus } from '@vitejs/devtools-kit'
import type { DocksContext } from '@vitejs/devtools-kit/client'
import { computed } from 'vue'
+import Button from '../display/Button.vue'
import DockIcon from '../dock/DockIcon.vue'
const props = defineProps<{
@@ -42,13 +43,16 @@ const buttonText = computed(() => {
{{ entry.launcher.title }}
{{ entry.launcher.description }}
-
+
+
+
+ {{ buttonText }}
+