@svelte-devtools/vite-plugin 0.1.2 → 0.1.3

package/dist/overlay.js

@@ -3149,13 +3149,6 @@ function from_namespace(content, flags2, ns = "svg") {
 function from_svg(content, flags2) {
   return /* @__PURE__ */ from_namespace(content, flags2, "svg");
 }
-function text(value = "") {
-  {
-    var t = create_text(value + "");
-    assign_nodes(t, t);
-    return t;
-  }
-}
 function comment() {
   var frag = document.createDocumentFragment();
   var start = document.createComment("");
@@ -3173,12 +3166,12 @@ function append(anchor, dom) {
     dom
   );
 }
-function set_text(text2, value) {
+function set_text(text, value) {
   var str = value == null ? "" : typeof value === "object" ? `${value}` : value;
   if (str !== /** @type {any} */
-  (text2[TEXT_CACHE] ?? (text2[TEXT_CACHE] = text2.nodeValue))) {
-    text2[TEXT_CACHE] = str;
-    text2.nodeValue = `${str}`;
+  (text[TEXT_CACHE] ?? (text[TEXT_CACHE] = text.nodeValue))) {
+    text[TEXT_CACHE] = str;
+    text.nodeValue = `${str}`;
   }
 }
 function mount(component, options) {
@@ -4244,7 +4237,7 @@ const CSS = `
   /* ── Toggle button ── */
   .sdt-toggle {
     position: absolute;
-    bottom: 20px;
+    bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px));
     left: 0;
     right: 0;
     margin: 0 auto;
@@ -4301,6 +4294,7 @@ const CSS = `
     left: auto;
     bottom: 0;
     right: 0;
+    max-width: 92dvw;
     animation: sdt-slide-right 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
   }
 
@@ -4316,6 +4310,7 @@ const CSS = `
 
   /* ── Panel ── */
   .sdt-panel {
+    container-type: inline-size;
     background: #1e1e2e;
     color: #cdd6f4;
     display: flex;
@@ -4356,13 +4351,14 @@ const CSS = `
   }
 
   .sdt-resize-handle:hover { background: rgba(255 62 0 / 0.15); }
+  .sdt-resize-handle, .sdt-resize-handle--right { touch-action: none; }
 
   /* ── Position toggle ── */
   .sdt-position-toggle {
     background: transparent;
     border: none;
     color: #45475a;
-    width: 32px;
+    width: 44px;
     height: 44px;
     cursor: pointer;
     display: flex;
@@ -4456,6 +4452,14 @@ const CSS = `
 
   .sdt-close:hover { color: #cdd6f4; background: #1e1e2e; }
 
+  /* ── Narrow panel: hide text labels, tighten spacing ── */
+  @container (max-width: 480px) {
+    .sdt-logo-text { display: none; }
+    .sdt-tab-label { display: none; }
+    .sdt-logo { padding: 0 10px; }
+    .sdt-tab  { padding: 0 10px; }
+  }
+
   /* ── Content area ── */
   .sdt-content {
     flex: 1;
@@ -4463,6 +4467,8 @@ const CSS = `
     min-height: 0;
     scrollbar-width: thin;
     scrollbar-color: #313244 transparent;
+    overscroll-behavior: contain;
+    padding-bottom: env(safe-area-inset-bottom);
   }
 
   /* ── Routes tab ── */
@@ -4581,11 +4587,16 @@ const CSS = `
     border: none;
     color: #45475a;
     font-size: 10px;
-    width: 14px;
+    width: 28px;
+    height: 28px;
+    margin: -6px -7px -6px -7px;
     cursor: pointer;
     flex-shrink: 0;
     line-height: 1;
     font-family: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .sdt-tag-name    { color: #f38ba8; font-family: monospace; font-size: 12.5px; }
@@ -4633,12 +4644,17 @@ const CSS = `
     border: none;
     color: #45475a;
     font-size: 10px;
-    width: 14px;
+    width: 28px;
+    height: 28px;
+    margin: -6px -7px -6px -7px;
     cursor: pointer;
     flex-shrink: 0;
-    line-height: 20px;
+    line-height: 1;
     font-family: monospace;
     padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .sdt-json-toggle--summary { width: auto; color: #6c7086; }
@@ -4700,14 +4716,14 @@ if (typeof window !== "undefined") {
   ((_b = window.__svelte ?? (window.__svelte = {})).v ?? (_b.v = /* @__PURE__ */ new Set())).add(PUBLIC_VERSION);
 }
 var root_2$3 = /* @__PURE__ */ from_html(`<div class="sdt-nav-indicator"><span class="sdt-spinner"></span> Navigating to <span class="sdt-mono" style="color:inherit"> </span></div>`);
-var root_4$3 = /* @__PURE__ */ from_html(`<span class="sdt-key"> </span> <code class="sdt-val sdt-val-str"> </code>`, 1);
-var root_3$3 = /* @__PURE__ */ from_html(`<div class="sdt-section"><div class="sdt-section-title">Route Params</div> <div class="sdt-kv"></div></div>`);
+var root_4$2 = /* @__PURE__ */ from_html(`<span class="sdt-key"> </span> <code class="sdt-val sdt-val-str"> </code>`, 1);
+var root_3$4 = /* @__PURE__ */ from_html(`<div class="sdt-section"><div class="sdt-section-title">Route Params</div> <div class="sdt-kv"></div></div>`);
 var root_6$2 = /* @__PURE__ */ from_html(`<span class="sdt-key"> </span> <code> </code>`, 1);
-var root_5$3 = /* @__PURE__ */ from_html(`<div class="sdt-section"><div class="sdt-section-title">Page Data</div> <div class="sdt-kv"></div></div>`);
+var root_5$2 = /* @__PURE__ */ from_html(`<div class="sdt-section"><div class="sdt-section-title">Page Data</div> <div class="sdt-kv"></div></div>`);
 var root_7$2 = /* @__PURE__ */ from_html(`<div class="sdt-section"><div class="sdt-section-title">Page Data</div> <span style="color:#6c7086;font-size:12px">No data returned from load()</span></div>`);
 var root_8$2 = /* @__PURE__ */ from_html(`<div class="sdt-section"><div class="sdt-section-title">Form Action Data</div> <code class="sdt-val" style="font-size:11px"> </code></div>`);
 var root_9$2 = /* @__PURE__ */ from_html(`<div class="sdt-section"><div class="sdt-section-title" style="color:#f38ba8">Page Error</div> <code class="sdt-val sdt-val-err"> </code></div>`);
-var root_1$4 = /* @__PURE__ */ from_html(`<!> <div><div class="sdt-info-row"><span class="sdt-badge">Route</span> <code class="sdt-mono"> </code></div> <div class="sdt-info-row"><span class="sdt-badge">URL</span> <code class="sdt-mono sdt-val-url"> </code></div> <div class="sdt-info-row"><span class="sdt-badge">Status</span> <code> </code></div></div> <!> <!> <!> <!>`, 1);
+var root_1$5 = /* @__PURE__ */ from_html(`<!> <div><div class="sdt-info-row"><span class="sdt-badge">Route</span> <code class="sdt-mono"> </code></div> <div class="sdt-info-row"><span class="sdt-badge">URL</span> <code class="sdt-mono sdt-val-url"> </code></div> <div class="sdt-info-row"><span class="sdt-badge">Status</span> <code> </code></div></div> <!> <!> <!> <!>`, 1);
 var root_10$2 = /* @__PURE__ */ from_html(`<div class="sdt-empty"><span class="sdt-empty-icon">⟨/⟩</span> <span>No SvelteKit page data detected.</span> <span style="color:#45475a;font-size:11px">Ensure the Vite plugin is installed in a SvelteKit project.</span></div>`);
 var root$5 = /* @__PURE__ */ from_html(`<div class="sdt-routes"><!></div>`);
 function RoutesTab($$anchor, $$props) {
@@ -4747,16 +4763,16 @@ function RoutesTab($$anchor, $$props) {
   var node = child(div);
   {
     var consequent_6 = ($$anchor2) => {
-      var fragment = root_1$4();
+      var fragment = root_1$5();
       var node_1 = first_child(fragment);
       {
         var consequent = ($$anchor3) => {
           var div_1 = root_2$3();
           var span = sibling(child(div_1), 2);
-          var text2 = child(span);
+          var text = child(span);
           template_effect(() => {
             var _a2, _b2;
-            return set_text(text2, ((_b2 = (_a2 = get(navigating).to) == null ? void 0 : _a2.url) == null ? void 0 : _b2.pathname) ?? "…");
+            return set_text(text, ((_b2 = (_a2 = get(navigating).to) == null ? void 0 : _a2.url) == null ? void 0 : _b2.pathname) ?? "…");
           });
           append($$anchor3, div_1);
         };
@@ -4777,13 +4793,13 @@ function RoutesTab($$anchor, $$props) {
       var node_2 = sibling(div_2, 2);
       {
         var consequent_1 = ($$anchor3) => {
-          var div_6 = root_3$3();
+          var div_6 = root_3$4();
           var div_7 = sibling(child(div_6), 2);
           each(div_7, 21, () => Object.entries(get(page).params), index, ($$anchor4, $$item) => {
             var $$array = /* @__PURE__ */ user_derived(() => to_array(get($$item), 2));
             let k = () => get($$array)[0];
             let v = () => get($$array)[1];
-            var fragment_1 = root_4$3();
+            var fragment_1 = root_4$2();
             var span_1 = first_child(fragment_1);
             var text_4 = child(span_1);
             var code_4 = sibling(span_1, 2);
@@ -4804,7 +4820,7 @@ function RoutesTab($$anchor, $$props) {
       var node_3 = sibling(node_2, 2);
       {
         var consequent_2 = ($$anchor3) => {
-          var div_8 = root_5$3();
+          var div_8 = root_5$2();
           var div_9 = sibling(child(div_8), 2);
           each(div_9, 21, () => Object.entries(get(page).data), index, ($$anchor4, $$item) => {
             var $$array_1 = /* @__PURE__ */ user_derived(() => to_array(get($$item), 2));
@@ -4888,14 +4904,14 @@ function RoutesTab($$anchor, $$props) {
   pop();
 }
 var root_2$2 = /* @__PURE__ */ from_html(`<button class="sdt-dom-node-toggle"> </button>`);
-var root_3$2 = /* @__PURE__ */ from_html(`<span class="sdt-dom-node-toggle"></span>`);
-var root_4$2 = /* @__PURE__ */ from_html(`<span class="sdt-component-name"> </span> <span class="sdt-dom-tag-hint"> </span>`, 1);
-var root_5$2 = /* @__PURE__ */ from_html(`<span class="sdt-tag-name"> </span>`);
+var root_3$3 = /* @__PURE__ */ from_html(`<span class="sdt-dom-node-toggle"></span>`);
+var root_4$1 = /* @__PURE__ */ from_html(`<span class="sdt-component-name"> </span> <span class="sdt-dom-tag-hint"> </span>`, 1);
+var root_5$1 = /* @__PURE__ */ from_html(`<span class="sdt-tag-name"> </span>`);
 var root_6$1 = /* @__PURE__ */ from_html(`<span class="sdt-attr-id"> </span>`);
 var root_8$1 = /* @__PURE__ */ from_html(`<span class="sdt-dom-overflow"> </span>`);
 var root_7$1 = /* @__PURE__ */ from_html(`<span class="sdt-attr-cls"> </span> <!>`, 1);
 var root_9$1 = /* @__PURE__ */ from_html(`<span class="sdt-json-count"> </span>`);
-var root_1$3 = /* @__PURE__ */ from_html(`<div role="treeitem"><!> <!> <!> <!> <!></div>`);
+var root_1$4 = /* @__PURE__ */ from_html(`<div role="treeitem"><!> <!> <!> <!> <!></div>`);
 var root_10$1 = /* @__PURE__ */ from_html(`<div class="sdt-empty"><span class="sdt-empty-icon">◈</span> <span>No elements found.</span></div>`);
 var root$4 = /* @__PURE__ */ from_html(`<div class="sdt-components"><!> <!></div>`);
 function ComponentsTab($$anchor, $$props) {
@@ -4996,7 +5012,7 @@ function ComponentsTab($$anchor, $$props) {
   var node_1 = child(div);
   each(node_1, 17, () => get(visibleNodes), index, ($$anchor2, node) => {
     const isCollapsed = /* @__PURE__ */ user_derived(() => get(collapsed).has(get(node).key));
-    var div_1 = root_1$3();
+    var div_1 = root_1$4();
     let classes_1;
     set_attribute(div_1, "tabindex", 0);
     let styles;
@@ -5004,16 +5020,16 @@ function ComponentsTab($$anchor, $$props) {
     {
       var consequent = ($$anchor3) => {
         var button = root_2$2();
-        var text2 = child(button);
+        var text = child(button);
         template_effect(() => {
           set_attribute(button, "aria-label", get(isCollapsed) ? "Expand" : "Collapse");
-          set_text(text2, get(isCollapsed) ? "▸" : "▾");
+          set_text(text, get(isCollapsed) ? "▸" : "▾");
         });
         delegated("click", button, () => toggleCollapse(get(node).key));
         append($$anchor3, button);
       };
       var alternate = ($$anchor3) => {
-        var span = root_3$2();
+        var span = root_3$3();
         append($$anchor3, span);
       };
       if_block(node_2, ($$render) => {
@@ -5024,7 +5040,7 @@ function ComponentsTab($$anchor, $$props) {
     var node_3 = sibling(node_2, 2);
     {
       var consequent_1 = ($$anchor3) => {
-        var fragment = root_4$2();
+        var fragment = root_4$1();
         var span_1 = first_child(fragment);
         var text_1 = child(span_1);
         var span_2 = sibling(span_1, 2);
@@ -5036,7 +5052,7 @@ function ComponentsTab($$anchor, $$props) {
         append($$anchor3, fragment);
       };
       var alternate_1 = ($$anchor3) => {
-        var span_3 = root_5$2();
+        var span_3 = root_5$1();
         var text_3 = child(span_3);
         template_effect(() => set_text(text_3, `<${get(node).tag ?? ""}>`));
         append($$anchor3, span_3);
@@ -5125,10 +5141,10 @@ function ComponentsTab($$anchor, $$props) {
   pop();
 }
 delegate(["keydown", "click"]);
-var root_1$2 = /* @__PURE__ */ from_html(`<button class="sdt-json-toggle"> </button>`);
+var root_1$3 = /* @__PURE__ */ from_html(`<button class="sdt-json-toggle"> </button>`);
 var root_2$1 = /* @__PURE__ */ from_html(`<span class="sdt-json-toggle"></span>`);
-var root_3$1 = /* @__PURE__ */ from_html(`<span class="sdt-json-key"> </span> <span class="sdt-json-colon">:</span>`, 1);
-var root_4$1 = /* @__PURE__ */ from_html(`<span> </span>`);
+var root_3$2 = /* @__PURE__ */ from_html(`<span class="sdt-json-key"> </span> <span class="sdt-json-colon">:</span>`, 1);
+var root_4 = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_6 = /* @__PURE__ */ from_html(`<span class="sdt-json-brace"> </span>`);
 var root_7 = /* @__PURE__ */ from_html(`<span class="sdt-json-brace"> </span>`);
 var root_8 = /* @__PURE__ */ from_html(`<button class="sdt-json-toggle sdt-json-toggle--summary"> <span class="sdt-json-count"> </span> </button>`);
@@ -5234,11 +5250,11 @@ function JsonNode_1($$anchor, $$props) {
   var node = child(div);
   {
     var consequent = ($$anchor2) => {
-      var button = root_1$2();
-      var text2 = child(button);
+      var button = root_1$3();
+      var text = child(button);
       template_effect(() => {
         set_attribute(button, "aria-label", get(expanded) ? "Collapse" : "Expand");
-        set_text(text2, get(expanded) ? "▾" : "▸");
+        set_text(text, get(expanded) ? "▾" : "▸");
       });
       delegated("click", button, () => set(expanded, !get(expanded)));
       append($$anchor2, button);
@@ -5255,7 +5271,7 @@ function JsonNode_1($$anchor, $$props) {
   var node_1 = sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var fragment_1 = root_3$1();
+      var fragment_1 = root_3$2();
       var span_1 = first_child(fragment_1);
       var text_1 = child(span_1);
       template_effect(() => set_text(text_1, `"${keyName() ?? ""}"`));
@@ -5268,7 +5284,7 @@ function JsonNode_1($$anchor, $$props) {
   var node_2 = sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var span_2 = root_4$1();
+      var span_2 = root_4();
       var text_2 = child(span_2);
       template_effect(
         ($0, $1) => {
@@ -5383,9 +5399,9 @@ function JsonNode_1($$anchor, $$props) {
   pop();
 }
 delegate(["click"]);
-var root_1$1 = /* @__PURE__ */ from_html(`<div class="sdt-state-section-label">Component State</div> <!>`, 1);
-var root_3 = /* @__PURE__ */ from_html(`<div class="sdt-state-section-label">Page Store</div> <!>`, 1);
-var root_5$1 = /* @__PURE__ */ from_html(`<div class="sdt-empty"><span class="sdt-empty-icon"></span> <span>No state data available.</span> <span style="color:#45475a;font-size:11px">SvelteKit page store not detected.</span></div>`);
+var root_1$2 = /* @__PURE__ */ from_html(`<div class="sdt-state-section-label">Component State</div> <!>`, 1);
+var root_3$1 = /* @__PURE__ */ from_html(`<div class="sdt-state-section-label">Page Store</div> <!>`, 1);
+var root_5 = /* @__PURE__ */ from_html(`<div class="sdt-empty"><span class="sdt-empty-icon"></span> <span>No state data available.</span> <span style="color:#45475a;font-size:11px">SvelteKit page store not detected.</span></div>`);
 var root$2 = /* @__PURE__ */ from_html(`<div class="sdt-state"><!> <!> <!></div>`);
 function StateTab($$anchor, $$props) {
   push($$props, true);
@@ -5419,7 +5435,7 @@ function StateTab($$anchor, $$props) {
   var node = child(div);
   {
     var consequent = ($$anchor2) => {
-      var fragment = root_1$1();
+      var fragment = root_1$2();
       var node_1 = sibling(first_child(fragment), 2);
       each(node_1, 17, () => get(componentEntries), index, ($$anchor3, $$item) => {
         var $$array = /* @__PURE__ */ user_derived(() => to_array(get($$item), 2));
@@ -5444,7 +5460,7 @@ function StateTab($$anchor, $$props) {
   var node_2 = sibling(node, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var fragment_2 = root_3();
+      var fragment_2 = root_3$1();
       var div_1 = first_child(fragment_2);
       var node_3 = sibling(div_1, 2);
       each(node_3, 17, () => get(pageSections), index, ($$anchor3, section) => {
@@ -5468,7 +5484,7 @@ function StateTab($$anchor, $$props) {
   var node_4 = sibling(node_2, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_2 = root_5$1();
+      var div_2 = root_5();
       var span = child(div_2);
       span.textContent = "{}";
       append($$anchor2, div_2);
@@ -5480,10 +5496,10 @@ function StateTab($$anchor, $$props) {
   append($$anchor, div);
   pop();
 }
-var root_2 = /* @__PURE__ */ from_html(`<button role="tab"><span class="sdt-tab-icon"> </span> <!></button>`);
-var root_4 = /* @__PURE__ */ from_svg(`<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="1.5" width="11" height="11" rx="1.5" stroke="currentColor" stroke-width="1.2"></rect><rect x="8" y="1.5" width="4.5" height="11" rx="0.5" fill="currentColor"></rect></svg>`);
-var root_5 = /* @__PURE__ */ from_svg(`<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="1.5" width="11" height="11" rx="1.5" stroke="currentColor" stroke-width="1.2"></rect><rect x="1.5" y="8" width="11" height="4.5" rx="0.5" fill="currentColor"></rect></svg>`);
-var root$1 = /* @__PURE__ */ from_html(`<div><button aria-label="Resize panel" title="Drag to resize"></button> <div class="sdt-header"><div class="sdt-logo" title="Svelte DevTools"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"><path d="M416.9 93.1c-41.1-58.9-122.4-76.3-181.2-38.9L132.5 120c-28.2 17.7-47.6 46.5-53.5 79.3-4.9 27.3-.6 55.5 12.3 80-8.8 13.4-14.9 28.5-17.7 44.2-5.9 33.4 1.8 67.8 21.6 95.4 41.2 58.9 122.4 76.3 181.2 38.9L379.6 392c28.2-17.7 47.6-46.5 53.5-79.3 4.9-27.3.6-55.5-12.3-80 8.8-13.4 14.9-28.4 17.7-44.2 5.8-33.4-1.9-67.8-21.6-95.4" style="fill:#ff3e00"></path><path d="M225.6 424.5c-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4.6-3.3 1.4-6.5 2.5-9.6l1.9-5.9 5.3 3.9c12.2 9 25.9 15.8 40.4 20.2l3.8 1.2-.4 3.8c-.5 5.4 1 10.9 4.2 15.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8l103.2-65.8c5.1-3.2 8.6-8.4 9.7-14.4 1.1-6.1-.3-12.3-3.9-17.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8L252 291c-6.5 4.1-13.5 7.2-21 9.2-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4 3.5-19.7 15.2-37 32.2-47.7l103.2-65.8c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-.6 3.3-1.4 6.5-2.5 9.6L383 193l-5.3-3.9c-12.2-9-25.9-15.8-40.4-20.2l-3.8-1.2.4-3.8c.5-5.4-1-10.9-4.2-15.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8l-103.2 65.8c-5.1 3.2-8.6 8.4-9.7 14.4-1.1 6.1.3 12.3 3.9 17.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8L260 221c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-3.5 19.7-15.2 37-32.2 47.7l-103.2 65.8c-6.5 4.1-13.6 7.2-21 9.2" style="fill:#fff"></path></svg> <!></div> <div class="sdt-tabs" role="tablist"></div> <button class="sdt-position-toggle"><!></button> <button class="sdt-close" title="Close (⇧⌥D)">✕</button></div> <div class="sdt-content" role="tabpanel"><!></div></div>`);
+var root_1$1 = /* @__PURE__ */ from_html(`<button role="tab"><span class="sdt-tab-icon"> </span> <span class="sdt-tab-label"> </span></button>`);
+var root_2 = /* @__PURE__ */ from_svg(`<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="1.5" width="11" height="11" rx="1.5" stroke="currentColor" stroke-width="1.2"></rect><rect x="8" y="1.5" width="4.5" height="11" rx="0.5" fill="currentColor"></rect></svg>`);
+var root_3 = /* @__PURE__ */ from_svg(`<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="1.5" width="11" height="11" rx="1.5" stroke="currentColor" stroke-width="1.2"></rect><rect x="1.5" y="8" width="11" height="4.5" rx="0.5" fill="currentColor"></rect></svg>`);
+var root$1 = /* @__PURE__ */ from_html(`<div><button aria-label="Resize panel" title="Drag to resize"></button> <div class="sdt-header"><div class="sdt-logo" title="Svelte DevTools"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"><path d="M416.9 93.1c-41.1-58.9-122.4-76.3-181.2-38.9L132.5 120c-28.2 17.7-47.6 46.5-53.5 79.3-4.9 27.3-.6 55.5 12.3 80-8.8 13.4-14.9 28.5-17.7 44.2-5.9 33.4 1.8 67.8 21.6 95.4 41.2 58.9 122.4 76.3 181.2 38.9L379.6 392c28.2-17.7 47.6-46.5 53.5-79.3 4.9-27.3.6-55.5-12.3-80 8.8-13.4 14.9-28.4 17.7-44.2 5.8-33.4-1.9-67.8-21.6-95.4" style="fill:#ff3e00"></path><path d="M225.6 424.5c-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4.6-3.3 1.4-6.5 2.5-9.6l1.9-5.9 5.3 3.9c12.2 9 25.9 15.8 40.4 20.2l3.8 1.2-.4 3.8c-.5 5.4 1 10.9 4.2 15.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8l103.2-65.8c5.1-3.2 8.6-8.4 9.7-14.4 1.1-6.1-.3-12.3-3.9-17.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8L252 291c-6.5 4.1-13.5 7.2-21 9.2-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4 3.5-19.7 15.2-37 32.2-47.7l103.2-65.8c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-.6 3.3-1.4 6.5-2.5 9.6L383 193l-5.3-3.9c-12.2-9-25.9-15.8-40.4-20.2l-3.8-1.2.4-3.8c.5-5.4-1-10.9-4.2-15.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8l-103.2 65.8c-5.1 3.2-8.6 8.4-9.7 14.4-1.1 6.1.3 12.3 3.9 17.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8L260 221c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-3.5 19.7-15.2 37-32.2 47.7l-103.2 65.8c-6.5 4.1-13.6 7.2-21 9.2" style="fill:#fff"></path></svg> <span class="sdt-logo-text">Svelte DevTools</span></div> <div class="sdt-tabs" role="tablist"></div> <button class="sdt-position-toggle"><!></button> <button class="sdt-close" title="Close (⇧⌥D)">✕</button></div> <div class="sdt-content" role="tabpanel"><!></div></div>`);
 function Panel($$anchor, $$props) {
   push($$props, true);
   function storageGet(key) {
@@ -5513,99 +5529,84 @@ function Panel($$anchor, $$props) {
     set(activeTab, id, true);
     storageSet("sdt:tab", id);
   }
-  function startResize(e) {
-    const startVal = $$props.position === "bottom" ? e.clientY : e.clientX;
+  function startResize(startClientY, startClientX) {
     const startSize = $$props.position === "bottom" ? $$props.height : $$props.width;
-    e.preventDefault();
-    const onMove = (e2) => {
-      const delta = $$props.position === "bottom" ? startVal - e2.clientY : (
+    const onMove = (clientY, clientX) => {
+      const delta = $$props.position === "bottom" ? startClientY - clientY : (
         // drag up → taller
-        startVal - e2.clientX
+        startClientX - clientX
       );
       const next = Math.min(900, Math.max(180, startSize + delta));
       $$props.onResize(next);
     };
-    const onUp = () => {
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
+    const onMouseMove = (e) => onMove(e.clientY, e.clientX);
+    const onTouchMove = (e) => onMove(e.touches[0].clientY, e.touches[0].clientX);
+    const onEnd = () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onEnd);
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onEnd);
     };
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onEnd);
+    document.addEventListener("touchmove", onTouchMove, { passive: true });
+    document.addEventListener("touchend", onEnd);
   }
   var div = root$1();
   let classes;
   var button = child(div);
   let classes_1;
   var div_1 = sibling(button, 2);
-  var div_2 = child(div_1);
-  var node = sibling(child(div_2), 2);
-  {
-    var consequent = ($$anchor2) => {
-      var text$1 = text("Svelte DevTools");
-      append($$anchor2, text$1);
-    };
-    if_block(node, ($$render) => {
-      if ($$props.position === "bottom") $$render(consequent);
-    });
-  }
-  var div_3 = sibling(div_2, 2);
-  each(div_3, 21, () => tabs, index, ($$anchor2, tab) => {
-    var button_1 = root_2();
+  var div_2 = sibling(child(div_1), 2);
+  each(div_2, 21, () => tabs, index, ($$anchor2, tab) => {
+    var button_1 = root_1$1();
     let classes_2;
     var span = child(button_1);
-    var text_1 = child(span);
-    var node_1 = sibling(span, 2);
-    {
-      var consequent_1 = ($$anchor3) => {
-        var text_2 = text();
-        template_effect(() => set_text(text_2, get(tab).label));
-        append($$anchor3, text_2);
-      };
-      if_block(node_1, ($$render) => {
-        if ($$props.position === "bottom") $$render(consequent_1);
-      });
-    }
+    var text = child(span);
+    var span_1 = sibling(span, 2);
+    var text_1 = child(span_1);
     template_effect(() => {
       classes_2 = set_class(button_1, 1, "sdt-tab", null, classes_2, { "sdt-tab--active": get(activeTab) === get(tab).id });
       set_attribute(button_1, "aria-selected", get(activeTab) === get(tab).id);
       set_attribute(button_1, "title", get(tab).label);
-      set_text(text_1, get(tab).icon);
+      set_text(text, get(tab).icon);
+      set_text(text_1, get(tab).label);
     });
     delegated("click", button_1, () => selectTab(get(tab).id));
     append($$anchor2, button_1);
   });
-  var button_2 = sibling(div_3, 2);
-  var node_2 = child(button_2);
+  var button_2 = sibling(div_2, 2);
+  var node = child(button_2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var svg = root_4();
+    var consequent = ($$anchor2) => {
+      var svg = root_2();
       append($$anchor2, svg);
     };
     var alternate = ($$anchor2) => {
-      var svg_1 = root_5();
+      var svg_1 = root_3();
       append($$anchor2, svg_1);
     };
-    if_block(node_2, ($$render) => {
-      if ($$props.position === "bottom") $$render(consequent_2);
+    if_block(node, ($$render) => {
+      if ($$props.position === "bottom") $$render(consequent);
       else $$render(alternate, -1);
     });
   }
   var button_3 = sibling(button_2, 2);
-  var div_4 = sibling(div_1, 2);
-  var node_3 = child(div_4);
+  var div_3 = sibling(div_1, 2);
+  var node_1 = child(div_3);
   {
-    var consequent_3 = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       RoutesTab($$anchor2, {});
     };
-    var consequent_4 = ($$anchor2) => {
+    var consequent_2 = ($$anchor2) => {
       ComponentsTab($$anchor2, {});
     };
     var alternate_1 = ($$anchor2) => {
       StateTab($$anchor2, {});
     };
-    if_block(node_3, ($$render) => {
-      if (get(activeTab) === "routes") $$render(consequent_3);
-      else if (get(activeTab) === "components") $$render(consequent_4, 1);
+    if_block(node_1, ($$render) => {
+      if (get(activeTab) === "routes") $$render(consequent_1);
+      else if (get(activeTab) === "components") $$render(consequent_2, 1);
       else $$render(alternate_1, -1);
     });
   }
@@ -5616,7 +5617,11 @@ function Panel($$anchor, $$props) {
     set_attribute(button_2, "title", $$props.position === "bottom" ? "Move to right" : "Move to bottom");
     set_attribute(button_2, "aria-label", $$props.position === "bottom" ? "Switch to right drawer" : "Switch to bottom drawer");
   });
-  delegated("mousedown", button, startResize);
+  delegated("mousedown", button, (e) => {
+    e.preventDefault();
+    startResize(e.clientY, e.clientX);
+  });
+  delegated("touchstart", button, (e) => startResize(e.touches[0].clientY, e.touches[0].clientX));
   delegated("keydown", button, (e) => {
     if ($$props.position === "bottom") {
       if (e.key === "ArrowUp") $$props.onResize(Math.min(900, $$props.height + 20));
@@ -5634,7 +5639,7 @@ function Panel($$anchor, $$props) {
   append($$anchor, div);
   pop();
 }
-delegate(["mousedown", "keydown", "click"]);
+delegate(["mousedown", "touchstart", "keydown", "click"]);
 var root_1 = /* @__PURE__ */ from_html(`<div><!></div>`);
 var root = /* @__PURE__ */ from_html(`<button aria-label="Toggle Svelte DevTools"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path d="M416.9 93.1c-41.1-58.9-122.4-76.3-181.2-38.9L132.5 120c-28.2 17.7-47.6 46.5-53.5 79.3-4.9 27.3-.6 55.5 12.3 80-8.8 13.4-14.9 28.5-17.7 44.2-5.9 33.4 1.8 67.8 21.6 95.4 41.2 58.9 122.4 76.3 181.2 38.9L379.6 392c28.2-17.7 47.6-46.5 53.5-79.3 4.9-27.3.6-55.5-12.3-80 8.8-13.4 14.9-28.4 17.7-44.2 5.8-33.4-1.9-67.8-21.6-95.4" style="fill:#ff3e00"></path><path d="M225.6 424.5c-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4.6-3.3 1.4-6.5 2.5-9.6l1.9-5.9 5.3 3.9c12.2 9 25.9 15.8 40.4 20.2l3.8 1.2-.4 3.8c-.5 5.4 1 10.9 4.2 15.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8l103.2-65.8c5.1-3.2 8.6-8.4 9.7-14.4 1.1-6.1-.3-12.3-3.9-17.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8L252 291c-6.5 4.1-13.5 7.2-21 9.2-33.3 8.6-68.4-4.4-88-32.6-11.9-16.6-16.5-37.3-13-57.4 3.5-19.7 15.2-37 32.2-47.7l103.2-65.8c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-.6 3.3-1.4 6.5-2.5 9.6L383 193l-5.3-3.9c-12.2-9-25.9-15.8-40.4-20.2l-3.8-1.2.4-3.8c.5-5.4-1-10.9-4.2-15.3-5.9-8.5-16.5-12.4-26.5-9.8-2.2.6-4.4 1.5-6.3 2.8l-103.2 65.8c-5.1 3.2-8.6 8.4-9.7 14.4-1.1 6.1.3 12.3 3.9 17.3 5.9 8.5 16.5 12.4 26.5 9.8 2.2-.6 4.4-1.5 6.3-2.8L260 221c6.5-4.1 13.5-7.2 21-9.2 33.3-8.6 68.4 4.4 88 32.6 11.9 16.6 16.5 37.3 13 57.4-3.5 19.7-15.2 37-32.2 47.7l-103.2 65.8c-6.5 4.1-13.6 7.2-21 9.2" style="fill:#fff"></path></svg> <span>Svelte DevTools</span></button> <!>`, 1);
 function Overlay($$anchor, $$props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-devtools/vite-plugin",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Vite plugin that adds a development overlay for inspecting Svelte 5 and SvelteKit apps",
   "type": "module",
   "keywords": [