codebay 0.10.0 → 0.11.0

package/.mochi/svelte-compile/{App-59cdj86f.server.js → App-mzn3dqjm.server.js}

@@ -1,27 +1,28 @@
 // @bun
 import {
   StatusBadge,
-  apiDelete,
-  apiFetch,
-  apiPost,
   forwardedPortUrl
-} from "./chunk-3t7v4hk0.js";
+} from "./chunk-ed46m58e.js";
 import {
   Layout_template,
   Plus,
   Terminal
 } from "./chunk-bpqwf1nw.js";
 import {
+  apiDelete,
+  apiFetch,
+  apiPost,
   ideUrl
-} from "./chunk-gkjgybb2.js";
+} from "./chunk-zd49axkf.js";
 import {
   AppBar,
   Avatar,
   Button,
+  TOAST_OPTIONS,
   Toaster,
   dist_default,
   findAvatar
-} from "./chunk-th2dbqvc.js";
+} from "./chunk-gz6hv1h5.js";
 import {
   HydratableBoundary,
   Icon,
@@ -36,13 +37,40 @@ import {
 
 // src/pages/App.svelte
 import"svelte/internal/flags/async";
-import * as $29 from "svelte/internal/server";
+import * as $31 from "svelte/internal/server";
 
 // src/components/AppShell.svelte
 import"svelte/internal/flags/async";
-import * as $28 from "svelte/internal/server";
+import * as $30 from "svelte/internal/server";
+import { tick as tick2 } from "svelte";
 import { SvelteSet } from "svelte/reactivity";
 
+// src/lib/tab-nav.ts
+function digitTarget(digit, count) {
+  return digit === 9 ? count - 1 : digit - 1;
+}
+function nextTabIndex(current, key, count) {
+  if (count <= 0)
+    return null;
+  const from = current < 0 || current >= count ? 0 : current;
+  switch (key) {
+    case "ArrowRight":
+      return (from + 1) % count;
+    case "ArrowLeft":
+      return (from - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default: {
+      if (!/^[1-9]$/.test(key))
+        return null;
+      const target = digitTarget(Number(key), count);
+      return target < count ? target : null;
+    }
+  }
+}
+
 // src/components/DashboardView.svelte
 import"svelte/internal/flags/async";
 import * as $20 from "svelte/internal/server";
@@ -808,7 +836,7 @@ function TopBar($$renderer, $$props) {
     });
     $$renderer2.push(`<!----> `);
     Button($$renderer2, {
-      variant: "primary",
+      variant: "default",
       size: "sm",
       square: true,
       icon: altMode() === "terminal" ? Terminal : Layout_template,
@@ -1023,7 +1051,7 @@ function DashboardView($$renderer, $$props) {
 
 // src/components/IdeBar.svelte
 import"svelte/internal/flags/async";
-import * as $22 from "svelte/internal/server";
+import * as $24 from "svelte/internal/server";
 
 // node_modules/@lucide/svelte/dist/icons/rotate-cw.svelte
 import"svelte/internal/flags/async";
@@ -1039,6 +1067,22 @@ function Rotate_cw($$renderer, $$props) {
   ];
   Icon($$renderer, $21.spread_props([{ name: "rotate-cw" }, props, { iconNode }]));
 }
+// node_modules/@lucide/svelte/dist/icons/chevron-left.svelte
+import"svelte/internal/flags/async";
+import * as $22 from "svelte/internal/server";
+function Chevron_left($$renderer, $$props) {
+  let { $$slots, $$events, ...props } = $$props;
+  const iconNode = [["path", { d: "m15 18-6-6 6-6" }]];
+  Icon($$renderer, $22.spread_props([{ name: "chevron-left" }, props, { iconNode }]));
+}
+// node_modules/@lucide/svelte/dist/icons/chevron-right.svelte
+import"svelte/internal/flags/async";
+import * as $23 from "svelte/internal/server";
+function Chevron_right($$renderer, $$props) {
+  let { $$slots, $$events, ...props } = $$props;
+  const iconNode = [["path", { d: "m9 18 6-6-6-6" }]];
+  Icon($$renderer, $23.spread_props([{ name: "chevron-right" }, props, { iconNode }]));
+}
 // src/components/IdeBar.svelte
 function IdeBar($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
@@ -1054,53 +1098,102 @@ function IdeBar($$renderer, $$props) {
       oncommitrename,
       oncancelrename
     } = $$props;
+    const activeIndex = $24.derived(() => running.findIndex((i) => i.id === active));
+    const focusIndex = $24.derived(() => activeIndex() >= 0 ? activeIndex() : 0);
+    let viewport = null;
+    let content = null;
+    let atStart = true;
+    let atEnd = true;
+    const tabEls = {};
+    const overflowing = $24.derived(() => !atStart || !atEnd);
+    function measure() {
+      if (!viewport)
+        return;
+      atStart = viewport.scrollLeft <= 1;
+      atEnd = viewport.scrollLeft + viewport.clientWidth >= viewport.scrollWidth - 1;
+    }
+    function select(index) {
+      const inst = running[index];
+      if (!inst)
+        return;
+      onselect(inst.id);
+      tabEls[inst.id]?.focus();
+    }
+    function onTabKeydown(e) {
+      const next = nextTabIndex(activeIndex(), e.key, running.length);
+      if (next === null)
+        return;
+      e.preventDefault();
+      select(next);
+    }
+    function page(direction) {
+      if (!viewport)
+        return;
+      viewport.scrollBy({ left: direction * Math.max(160, viewport.clientWidth * 0.7) });
+    }
     AppBar($$renderer2, {
       children: ($$renderer3) => {
         if (running.length > 0) {
           $$renderer3.push("<!--[0-->");
-          $$renderer3.push(`<nav class="tabs svelte-r39acv"><!--[-->`);
-          const each_array = $22.ensure_array_like(running);
-          for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
-            let inst = each_array[$$index];
-            $$renderer3.push(`<div${$22.attr_class("tab svelte-r39acv", undefined, {
-              active: inst.id === active,
-              "attn-done": inst.id !== active && attention[inst.id] === "done",
-              "attn-waiting": inst.id !== active && attention[inst.id] === "waiting"
-            })}>`);
+          $$renderer3.push(`<div class="strip svelte-r39acv">`);
+          if (overflowing()) {
+            $$renderer3.push("<!--[0-->");
+            $$renderer3.push(`<button type="button" class="page svelte-r39acv"${$24.attr("disabled", atStart, true)} aria-label="Scroll tabs left">`);
+            Chevron_left($$renderer3, { size: 16 });
+            $$renderer3.push(`<!----></button>`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
+          }
+          $$renderer3.push(`<!--]--> <div class="viewport svelte-r39acv"><div class="tabs svelte-r39acv" role="tablist" aria-label="Instances"><!--[-->`);
+          const each_array = $24.ensure_array_like(running);
+          for (let i = 0, $$length = each_array.length;i < $$length; i++) {
+            let inst = each_array[i];
             if (editingId === inst.id) {
               $$renderer3.push("<!--[0-->");
-              $$renderer3.push(`<div class="tab-label editing svelte-r39acv">`);
+              $$renderer3.push(`<div class="tab editing svelte-r39acv">`);
               Avatar($$renderer3, {
                 name: inst.name,
                 art: findAvatar(inst.avatar ?? undefined) ?? null,
-                scale: 4
+                scale: 3
               });
-              $$renderer3.push(`<!----> <input class="tab-name-edit svelte-r39acv"${$22.attr("value", editingName)} autofocus=""/></div>`);
+              $$renderer3.push(`<!----> <input class="tab-name-edit svelte-r39acv"${$24.attr("value", editingName)} autofocus=""/></div>`);
             } else {
               $$renderer3.push("<!--[-1-->");
-              $$renderer3.push(`<button type="button" class="tab-label svelte-r39acv"${$22.attr("title", inst.name)}>`);
+              $$renderer3.push(`<button type="button"${$24.attr_class("tab svelte-r39acv", undefined, { active: inst.id === active })}${$24.attr("id", `tab-${$24.stringify(inst.id)}`)} role="tab"${$24.attr("aria-selected", inst.id === active)}${$24.attr("tabindex", i === focusIndex() ? 0 : -1)}${$24.attr("title", inst.name)}>`);
               Avatar($$renderer3, {
                 name: inst.name,
                 art: findAvatar(inst.avatar ?? undefined) ?? null,
-                scale: 4
+                scale: 3
               });
-              $$renderer3.push(`<!----> <span class="tab-name svelte-r39acv">${$22.escape(inst.name)}</span> `);
+              $$renderer3.push(`<!----> <span class="tab-name svelte-r39acv">${$24.escape(inst.name)}</span> <span class="tab-mode svelte-r39acv"${$24.attr("aria-label", inst.mode === "terminal" ? "Terminal-only instance" : "Full IDE instance")}>`);
               if (inst.mode === "terminal") {
                 $$renderer3.push("<!--[0-->");
-                $$renderer3.push(`<span class="tab-mode svelte-r39acv" title="Terminal-only instance">`);
-                Terminal($$renderer3, { size: 13 });
-                $$renderer3.push(`<!----></span>`);
+                Terminal($$renderer3, { size: 11 });
+              } else {
+                $$renderer3.push("<!--[-1-->");
+                Layout_template($$renderer3, { size: 11 });
+              }
+              $$renderer3.push(`<!--]--></span> `);
+              if (inst.id !== active && attention[inst.id]) {
+                $$renderer3.push("<!--[0-->");
+                $$renderer3.push(`<span${$24.attr_class(`attn ${$24.stringify(attention[inst.id])}`, "svelte-r39acv")}${$24.attr("aria-label", attention[inst.id] === "waiting" ? "Claude is waiting for input" : "Claude finished")}></span>`);
               } else {
                 $$renderer3.push("<!--[-1-->");
-                $$renderer3.push(`<span class="tab-mode svelte-r39acv" title="Full IDE instance">`);
-                Layout_template($$renderer3, { size: 13 });
-                $$renderer3.push(`<!----></span>`);
               }
               $$renderer3.push(`<!--]--></button>`);
             }
-            $$renderer3.push(`<!--]--></div>`);
+            $$renderer3.push(`<!--]-->`);
+          }
+          $$renderer3.push(`<!--]--></div></div> `);
+          if (overflowing()) {
+            $$renderer3.push("<!--[0-->");
+            $$renderer3.push(`<button type="button" class="page trailing svelte-r39acv"${$24.attr("disabled", atEnd, true)} aria-label="Scroll tabs right">`);
+            Chevron_right($$renderer3, { size: 16 });
+            $$renderer3.push(`<!----></button>`);
+          } else {
+            $$renderer3.push("<!--[-1-->");
           }
-          $$renderer3.push(`<!--]--></nav>`);
+          $$renderer3.push(`<!--]--></div>`);
         } else {
           $$renderer3.push("<!--[-1-->");
         }
@@ -1113,41 +1206,41 @@ function IdeBar($$renderer, $$props) {
         } else {
           $$renderer3.push("<!--[-1-->");
         }
-        $$renderer3.push(`<!--]--> <a class="cog svelte-r39acv"${$22.attr("href", withPopupMarker("/settings"))} target="_blank" rel="noopener noreferrer" title="Settings" aria-label="Settings">`);
+        $$renderer3.push(`<!--]--> <a class="cog svelte-r39acv"${$24.attr("href", withPopupMarker("/settings"))} target="_blank" rel="noopener noreferrer" title="Settings" aria-label="Settings">`);
         Settings($$renderer3, { size: 18 });
         $$renderer3.push(`<!----></a></div>`);
       },
       $$slots: { default: true }
     });
-    $22.bind_props($$props, { editingName });
+    $24.bind_props($$props, { editingName });
   });
 }
 
 // src/components/IdeLoader.svelte
 import"svelte/internal/flags/async";
-import * as $23 from "svelte/internal/server";
+import * as $25 from "svelte/internal/server";
 function IdeLoader($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
     let { speed = 1, mode = "ide", stalledAfterMs, onoverride } = $$props;
-    const isTerminal = $23.derived(() => mode === "terminal");
+    const isTerminal = $25.derived(() => mode === "terminal");
     let stalled = false;
     const ROWS = 3;
     const COLS = 22;
     const BASE_TICK_MS = 140;
     const FLIPS_PER_TICK = 7;
-    const tickMs = $23.derived(() => Math.max(20, BASE_TICK_MS / speed));
+    const tickMs = $25.derived(() => Math.max(20, BASE_TICK_MS / speed));
     const seed = () => Array.from({ length: ROWS }, () => Array.from({ length: COLS }, () => Math.random() < 0.5 ? 0 : 1));
     let grid = seed();
     $$renderer2.push(`<div class="loader svelte-w5e143"><div class="grid svelte-w5e143" aria-hidden="true"><!--[-->`);
-    const each_array = $23.ensure_array_like(grid);
+    const each_array = $25.ensure_array_like(grid);
     for (let i = 0, $$length = each_array.length;i < $$length; i++) {
       let row = each_array[i];
-      $$renderer2.push(`<div class="row svelte-w5e143">${$23.escape(row.join(""))}</div>`);
+      $$renderer2.push(`<div class="row svelte-w5e143">${$25.escape(row.join(""))}</div>`);
     }
-    $$renderer2.push(`<!--]--></div> <div class="label svelte-w5e143">Loading ${$23.escape(isTerminal() ? "terminal" : "editor")}<span class="dot svelte-w5e143">.</span><span class="dot svelte-w5e143">.</span><span class="dot svelte-w5e143">.</span></div> `);
+    $$renderer2.push(`<!--]--></div> <div class="label svelte-w5e143">Loading ${$25.escape(isTerminal() ? "terminal" : "editor")}<span class="dot svelte-w5e143">.</span><span class="dot svelte-w5e143">.</span><span class="dot svelte-w5e143">.</span></div> `);
     if (stalled) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<div class="stalled svelte-w5e143"><p class="svelte-w5e143">Waiting for ${$23.escape(isTerminal() ? "the terminal" : "code-server")} to answer inside the container.</p> `);
+      $$renderer2.push(`<div class="stalled svelte-w5e143"><p class="svelte-w5e143">Waiting for ${$25.escape(isTerminal() ? "the terminal" : "code-server")} to answer inside the container.</p> `);
       if (onoverride) {
         $$renderer2.push("<!--[0-->");
         Button($$renderer2, {
@@ -1171,11 +1264,11 @@ function IdeLoader($$renderer, $$props) {
 
 // src/components/TerminalSplit.svelte
 import"svelte/internal/flags/async";
-import * as $27 from "svelte/internal/server";
+import * as $29 from "svelte/internal/server";
 
 // node_modules/@lucide/svelte/dist/icons/panel-right-open.svelte
 import"svelte/internal/flags/async";
-import * as $24 from "svelte/internal/server";
+import * as $26 from "svelte/internal/server";
 function Panel_right_open($$renderer, $$props) {
   let { $$slots, $$events, ...props } = $$props;
   const iconNode = [
@@ -1186,11 +1279,11 @@ function Panel_right_open($$renderer, $$props) {
     ["path", { d: "M15 3v18" }],
     ["path", { d: "m10 15-3-3 3-3" }]
   ];
-  Icon($$renderer, $24.spread_props([{ name: "panel-right-open" }, props, { iconNode }]));
+  Icon($$renderer, $26.spread_props([{ name: "panel-right-open" }, props, { iconNode }]));
 }
 // node_modules/@lucide/svelte/dist/icons/panel-right-close.svelte
 import"svelte/internal/flags/async";
-import * as $25 from "svelte/internal/server";
+import * as $27 from "svelte/internal/server";
 function Panel_right_close($$renderer, $$props) {
   let { $$slots, $$events, ...props } = $$props;
   const iconNode = [
@@ -1201,11 +1294,11 @@ function Panel_right_close($$renderer, $$props) {
     ["path", { d: "M15 3v18" }],
     ["path", { d: "m8 9 3 3-3 3" }]
   ];
-  Icon($$renderer, $25.spread_props([{ name: "panel-right-close" }, props, { iconNode }]));
+  Icon($$renderer, $27.spread_props([{ name: "panel-right-close" }, props, { iconNode }]));
 }
 // src/components/TerminalPane.svelte
 import"svelte/internal/flags/async";
-import * as $26 from "svelte/internal/server";
+import * as $28 from "svelte/internal/server";
 import { onMount } from "svelte";
 function TerminalPane($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
@@ -1302,15 +1395,18 @@ function TerminalPane($$renderer, $$props) {
       }
     }
     function applyTheme() {
-      if (!term)
+      if (!term || !el)
         return;
-      const cs = getComputedStyle(document.documentElement);
-      const bg = cs.getPropertyValue("--bg").trim() || "#1a1a1a";
-      const fg = cs.getPropertyValue("--ink").trim() || "#e6e6e6";
+      const cs = getComputedStyle(el);
+      const bg = cs.backgroundColor || "#0d0e0a";
+      const fg = cs.color || "#d8d9cf";
       term.options.theme = { background: bg, foreground: fg, cursor: fg, cursorAccent: bg };
     }
     onMount(() => {
       let themeObs;
+      const scheme = window.matchMedia("(prefers-color-scheme: dark)");
+      const onScheme = () => applyTheme();
+      scheme.addEventListener("change", onScheme);
       (async () => {
         const [{ Terminal: Terminal2 }, { FitAddon }] = await Promise.all([import("./chunk-9nqc2r0y.js"), import("./chunk-rtdne1m8.js")]);
         if (disposed)
@@ -1341,6 +1437,7 @@ function TerminalPane($$renderer, $$props) {
         disposed = true;
         sizeObs.disconnect();
         themeObs?.disconnect();
+        scheme.removeEventListener("change", onScheme);
         if (retry)
           clearTimeout(retry);
         try {
@@ -1406,7 +1503,7 @@ function TerminalSplit($$renderer, $$props) {
       e.preventDefault();
     }
     function splitToggle($$renderer3) {
-      $$renderer3.push(`<button type="button"${$27.attr("aria-pressed", open)}${$27.attr("title", open ? "Hide the shell pane" : "Open a shell alongside Claude")}${$27.attr("aria-label", open ? "Hide the shell pane" : "Open a shell alongside Claude")}>`);
+      $$renderer3.push(`<button type="button"${$29.attr("aria-pressed", open)}${$29.attr("title", open ? "Hide the shell pane" : "Open a shell alongside Claude")}${$29.attr("aria-label", open ? "Hide the shell pane" : "Open a shell alongside Claude")}>`);
       if (open) {
         $$renderer3.push("<!--[0-->");
         Panel_right_close($$renderer3, { size: 14 });
@@ -1416,7 +1513,7 @@ function TerminalSplit($$renderer, $$props) {
       }
       $$renderer3.push(`<!--]--></button>`);
     }
-    $$renderer2.push(`<div class="split svelte-1ysvu88"><div class="side svelte-1ysvu88"${$27.attr_style("", { "flex-basis": open ? `${ratio}%` : "100%" })}>`);
+    $$renderer2.push(`<div class="split svelte-1ysvu88"><div class="side svelte-1ysvu88"${$29.attr_style("", { "flex-basis": open ? `${ratio}%` : "100%" })}>`);
     TerminalPane($$renderer2, {
       id,
       active,
@@ -1426,7 +1523,7 @@ function TerminalSplit($$renderer, $$props) {
     $$renderer2.push(`<!----></div> `);
     if (mounted) {
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<div${$27.attr_class("divider svelte-1ysvu88", undefined, { hidden: !open })} role="separator" aria-orientation="vertical" aria-label="Resize terminal panes"${$27.attr("aria-valuenow", Math.round(ratio))}${$27.attr("aria-valuemin", 20)}${$27.attr("aria-valuemax", 80)} tabindex="0"></div> <div${$27.attr_class("side svelte-1ysvu88", undefined, { hidden: !open })}${$27.attr_style("", { "flex-basis": `${$27.stringify(100 - ratio)}%` })}>`);
+      $$renderer2.push(`<div${$29.attr_class("divider svelte-1ysvu88", undefined, { hidden: !open })} role="separator" aria-orientation="vertical" aria-label="Resize terminal panes"${$29.attr("aria-valuenow", Math.round(ratio))}${$29.attr("aria-valuemin", 20)}${$29.attr("aria-valuemax", 80)} tabindex="0"></div> <div${$29.attr_class("side svelte-1ysvu88", undefined, { hidden: !open })}${$29.attr_style("", { "flex-basis": `${$29.stringify(100 - ratio)}%` })}>`);
       TerminalPane($$renderer2, {
         id,
         arg: "shell",
@@ -1451,7 +1548,7 @@ function AppShell($$renderer, $$props) {
     let livePet = pet;
     let liveFilter = filter;
     let loaded = snapshot.length > 0;
-    const running = $28.derived(() => instances.filter((i) => i.status === "running"));
+    const running = $30.derived(() => instances.filter((i) => i.status === "running"));
     let attention = Object.fromEntries(snapshot.map((i) => [i.id, i.attention]));
     let editingId = null;
     let editingName = "";
@@ -1482,9 +1579,9 @@ function AppShell($$renderer, $$props) {
       apiPost("/api/settings/filter", { value: v }).catch(() => {});
     }
     let path = initialPath;
-    const onIde = $28.derived(() => path.startsWith("/ide"));
-    const requestedId = $28.derived(() => path.startsWith("/ide/") ? path.slice("/ide/".length) : "");
-    const active = $28.derived(() => onIde() ? running().some((i) => i.id === requestedId()) ? requestedId() : running()[0]?.id ?? "" : "");
+    const onIde = $30.derived(() => path.startsWith("/ide"));
+    const requestedId = $30.derived(() => path.startsWith("/ide/") ? path.slice("/ide/".length) : "");
+    const active = $30.derived(() => onIde() ? running().some((i) => i.id === requestedId()) ? requestedId() : running()[0]?.id ?? "" : "");
     function navigate(to) {
       if (to === path)
         return;
@@ -1497,7 +1594,7 @@ function AppShell($$renderer, $$props) {
     const forced = new SvelteSet;
     const mountable = (id) => everReady.has(id) || forced.has(id);
     const STALLED_AFTER_MS = 1e4;
-    const activeInstance = $28.derived(() => running().find((i) => i.id === active()));
+    const activeInstance = $30.derived(() => running().find((i) => i.id === active()));
     const frames = {};
     function reloadActive() {
       const inst = activeInstance();
@@ -1506,10 +1603,27 @@ function AppShell($$renderer, $$props) {
       loadedFrames.delete(inst.id);
       frames[inst.id]?.contentWindow?.location.replace(ideUrl(inst));
     }
+    function jumpToTab(e, fromFrame) {
+      if (!e.altKey || e.ctrlKey || e.metaKey || editingId)
+        return;
+      const digit = /^Digit([1-9])$/.exec(e.code)?.[1];
+      if (!digit)
+        return;
+      const next = nextTabIndex(running().findIndex((i) => i.id === active()), digit, running().length);
+      const target = next === null ? undefined : running()[next];
+      if (!target)
+        return;
+      e.preventDefault();
+      e.stopPropagation();
+      navigate(`/ide/${target.id}`);
+      if (fromFrame)
+        tick2().then(() => frames[target.id]?.contentWindow?.focus());
+    }
+    const framedTabIds = $30.derived(() => running().filter((i) => i.mode !== "terminal" && loadedFrames.has(i.id)).map((i) => i.id).join(" "));
     let $$settled = true;
     let $$inner_renderer;
     function $$render_inner($$renderer3) {
-      $$renderer3.push(`<div${$28.attr_class("app svelte-1duc7gd", undefined, { ide: onIde() })}>`);
+      $$renderer3.push(`<div${$30.attr_class("app svelte-1duc7gd", undefined, { ide: onIde() })}>`);
       if (onIde()) {
         $$renderer3.push("<!--[0-->");
         IdeBar($$renderer3, {
@@ -1541,13 +1655,13 @@ function AppShell($$renderer, $$props) {
           onFilter: setFilter
         });
       }
-      $$renderer3.push(`<!--]--> <div${$28.attr_class("panes svelte-1duc7gd", undefined, { hidden: !onIde() })}><!--[-->`);
-      const each_array = $28.ensure_array_like(running());
+      $$renderer3.push(`<!--]--> <div${$30.attr_class("panes svelte-1duc7gd", undefined, { hidden: !onIde() })}><!--[-->`);
+      const each_array = $30.ensure_array_like(running());
       for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
         let inst = each_array[$$index];
         if (visited.has(inst.id)) {
           $$renderer3.push("<!--[0-->");
-          $$renderer3.push(`<div${$28.attr_class("pane svelte-1duc7gd", undefined, { active: inst.id === active() })}>`);
+          $$renderer3.push(`<div${$30.attr_class("pane svelte-1duc7gd", undefined, { active: inst.id === active() })} role="tabpanel"${$30.attr("aria-labelledby", `tab-${$30.stringify(inst.id)}`)}>`);
           if (mountable(inst.id)) {
             $$renderer3.push("<!--[0-->");
             if (inst.mode === "terminal") {
@@ -1559,7 +1673,7 @@ function AppShell($$renderer, $$props) {
               });
             } else {
               $$renderer3.push("<!--[-1-->");
-              $$renderer3.push(`<iframe${$28.attr("src", ideUrl(inst))}${$28.attr("title", inst.name)} class="svelte-1duc7gd" onload="this.__e=event"></iframe>`);
+              $$renderer3.push(`<iframe${$30.attr("src", ideUrl(inst))}${$30.attr("title", inst.name)} class="svelte-1duc7gd" onload="this.__e=event"></iframe>`);
             }
             $$renderer3.push(`<!--]-->`);
           } else {
@@ -1593,11 +1707,7 @@ function AppShell($$renderer, $$props) {
         $$renderer3.push("<!--[-1-->");
       }
       $$renderer3.push(`<!--]--></div></div> `);
-      Toaster($$renderer3, {
-        toastOptions: {
-          style: "border:1px solid var(--ink); background:var(--bg-card); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:var(--font-mono); font-size:13px;"
-        }
-      });
+      Toaster($$renderer3, { toastOptions: TOAST_OPTIONS });
       $$renderer3.push(`<!---->`);
     }
     do {
@@ -1615,7 +1725,7 @@ function App($$renderer, $$props) {
     let { preflight, initialPath, snapshot, pet, filter } = $$props;
     if (true) {
       let failed = function($$renderer3, error) {
-        $$renderer3.push(`<mochi-island-failure data-component="AppShell"${$29.attr("data-message", error.message)}></mochi-island-failure>`);
+        $$renderer3.push(`<mochi-island-failure data-component="AppShell"${$31.attr("data-message", error.message)}></mochi-island-failure>`);
       };
       $$renderer2.push("<!--[0-->");
       $$renderer2.boundary({ failed }, ($$renderer3) => {
@@ -1623,7 +1733,7 @@ function App($$renderer, $$props) {
         {
           HydratableBoundary($$renderer3, {
             children: ($$renderer4) => {
-              $$renderer4.push(`<mochi-hydratable-island component-name="AppShell_2rtnxn6pgp2rh" component-url="__MOCHI_COMPONENT_URL__AppShell_2rtnxn6pgp2rh__"${$29.attr("props-ref", emitIslandProps({ preflight, initialPath, snapshot, pet, filter }))}>`);
+              $$renderer4.push(`<mochi-hydratable-island component-name="AppShell_2rtnxn6pgp2rh" component-url="__MOCHI_COMPONENT_URL__AppShell_2rtnxn6pgp2rh__"${$31.attr("props-ref", emitIslandProps({ preflight, initialPath, snapshot, pet, filter }))}>`);
               $$renderer4.push(`<!--[-->`);
               {
                 AppShell($$renderer4, { preflight, initialPath, snapshot, pet, filter });

package/.mochi/svelte-compile/{Avatars-fmagfyj2.server.js → Avatars-c0k5jx8q.server.js}

@@ -11,11 +11,12 @@ import {
   OFF,
   ON,
   ROWS,
+  TOAST_OPTIONS,
   Toaster,
   avatars,
   decode,
   dist_default
-} from "./chunk-th2dbqvc.js";
+} from "./chunk-gz6hv1h5.js";
 import {
   HydratableBoundary,
   Icon,
@@ -452,11 +453,7 @@ function AvatarsView($$renderer, $$props) {
       $$renderer2.push(`<!--]--></li>`);
     }
     $$renderer2.push(`<!--]--></ul></section></main></div> `);
-    Toaster($$renderer2, {
-      toastOptions: {
-        style: "border:1px solid var(--ink); background:var(--bg-card); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:var(--font-mono); font-size:13px;"
-      }
-    });
+    Toaster($$renderer2, { toastOptions: TOAST_OPTIONS });
     $$renderer2.push(`<!---->`);
   });
 }

package/.mochi/svelte-compile/{Instance-s1gqwzmx.server.js → Instance-hj76qnha.server.js}

@@ -1,13 +1,13 @@
 // @bun
 import {
   StatusBadge,
-  apiDelete,
-  apiPost,
   forwardedPortUrl
-} from "./chunk-3t7v4hk0.js";
+} from "./chunk-ed46m58e.js";
 import {
+  apiDelete,
+  apiPost,
   ideUrl
-} from "./chunk-gkjgybb2.js";
+} from "./chunk-zd49axkf.js";
 import {
   HydratableBoundary,
   Icon,