+
+
+
diff --git a/packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue b/packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue
index 14277351..84b80043 100644
--- a/packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue
+++ b/packages/core/src/client/webcomponents/components/dock/DockEmbedded.vue
@@ -56,7 +56,7 @@ onUnmounted(() => {
-
+
diff --git a/packages/core/src/client/webcomponents/components/views-builtin/SettingsAppearance.vue b/packages/core/src/client/webcomponents/components/views-builtin/SettingsAppearance.vue
index 651309bf..047926f0 100644
--- a/packages/core/src/client/webcomponents/components/views-builtin/SettingsAppearance.vue
+++ b/packages/core/src/client/webcomponents/components/views-builtin/SettingsAppearance.vue
@@ -127,5 +127,23 @@ function setDockMode(mode: string) {
Close the DevTools panel when clicking outside of it (embedded mode only)
+
+
+
diff --git a/packages/core/src/client/webcomponents/style.css b/packages/core/src/client/webcomponents/style.css
index 125f1cfe..b9c1a1cf 100644
--- a/packages/core/src/client/webcomponents/style.css
+++ b/packages/core/src/client/webcomponents/style.css
@@ -98,6 +98,17 @@
background-image: linear-gradient(45deg, #61d9ff, #6b84fd, #715ebd);
}
+/*
+ * Edge-mode collapse (opt-in via `settings.autoCollapseEdgeToolbar`): the
+ * panel itself shrinks to a small pill (see `DockEdge.vue`'s `panelStyle`
+ * collapsed branches) rather than fading in place — this transition just
+ * animates that resize + the border-radius change.
+ */
+#vite-devtools-edge-panel {
+ --uno: transition-all duration-500;
+ transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
@media print {
#vite-devtools-anchor {
--uno: hidden;
@@ -132,4 +143,7 @@
.vite-devtools-shake {
animation: none;
}
+ #vite-devtools-edge-panel {
+ transition: none !important;
+ }
}
diff --git a/packages/kit/src/types/settings.ts b/packages/kit/src/types/settings.ts
index 9466f1f2..70aae95c 100644
--- a/packages/kit/src/types/settings.ts
+++ b/packages/kit/src/types/settings.ts
@@ -15,4 +15,12 @@ export interface DevToolsDocksUserSettings extends DevframeDocksUserSettings {
* dock out of the dock bar until the user opts in from Settings → Advanced.
*/
showDevframeInspector?: boolean
+ /**
+ * Auto-collapse the edge-mode toolbar to a small handle when idle (no
+ * hover or drag) and the panel content is closed, instead of permanently
+ * spanning the full edge. Off by default — an absent value preserves
+ * today's edge-mode behavior for existing users; opt in from
+ * Settings → Appearance.
+ */
+ autoCollapseEdgeToolbar?: boolean
}