@band-app/server 0.16.8 → 0.16.9

package/dist/server/assets/DockviewBrowserContainer-Bm7ARaqd.js

@@ -0,0 +1,1934 @@
+import { r as reactExports, j as jsxRuntimeExports, R as React } from "../server.js";
+import { E as createLucideIcon, i as isDesktop, ch as invoke, ci as listen, t as trpc, cj as reactDomExports, ck as Globe, cc as SearchBar, cl as Popover, cm as PopoverTrigger, cn as PopoverContent, co as Search, cp as Trash2, cq as DropdownMenu, cr as DropdownMenuTrigger, cs as ChevronDown, ct as DropdownMenuContent, cu as DropdownMenuItem, cv as TriangleAlert, bk as ArrowLeft, c5 as ArrowRight, X, cw as RotateCw, F as useAdapter, G as useQueryClient, H as useQuery, J as selectNeighbourBeforeRemove, K as DockviewReact, S as cycleTabsInActiveGroup, U as cycleGridGroups, M as Columns2, O as Rows2, Q as Plus } from "./router-GhGSLKfP.js";
+import "node:async_hooks";
+import "node:stream";
+import "util";
+import "crypto";
+import "async_hooks";
+import "stream";
+import "node:stream/web";
+import "node:process";
+import "node:path";
+import "node:url";
+const __iconNode$1 = [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
+  ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
+];
+const History = createLucideIcon("history", __iconNode$1);
+const __iconNode = [
+  [
+    "path",
+    {
+      d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z",
+      key: "1ngwbx"
+    }
+  ]
+];
+const Wrench = createLucideIcon("wrench", __iconNode);
+function injectInitialUrls(layout, urls) {
+  if (!urls || urls.size === 0) return layout;
+  if (typeof layout !== "object" || layout === null) return layout;
+  const panels = layout.panels;
+  if (typeof panels !== "object" || panels === null) return layout;
+  let changed = false;
+  const nextPanels = {};
+  for (const [id, panel] of Object.entries(panels)) {
+    const url = urls.get(id);
+    if (url && typeof panel === "object" && panel !== null && typeof panel.params === "object" && panel.params !== null) {
+      const params = panel.params;
+      if (!params.initialUrl) {
+        nextPanels[id] = { ...panel, params: { ...params, initialUrl: url } };
+        changed = true;
+        continue;
+      }
+    }
+    nextPanels[id] = panel;
+  }
+  if (!changed) return layout;
+  return { ...layout, panels: nextPanels };
+}
+let domOverlayCount = 0;
+let manualHoldCount = 0;
+const listeners$1 = /* @__PURE__ */ new Set();
+let lastEmitted = false;
+function isFrozen() {
+  return domOverlayCount + manualHoldCount > 0;
+}
+function emitIfChanged() {
+  const next = isFrozen();
+  if (next === lastEmitted) return;
+  lastEmitted = next;
+  for (const l of listeners$1) l();
+}
+function subscribe$1(l) {
+  listeners$1.add(l);
+  return () => {
+    listeners$1.delete(l);
+  };
+}
+function getSnapshot$1() {
+  return lastEmitted;
+}
+function useBrowserPaneFrozen() {
+  return reactExports.useSyncExternalStore(subscribe$1, getSnapshot$1, getSnapshot$1);
+}
+function acquireFreezeHold() {
+  manualHoldCount += 1;
+  emitIfChanged();
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    manualHoldCount = Math.max(0, manualHoldCount - 1);
+    emitIfChanged();
+  };
+}
+function useFreezeWhile(open) {
+  reactExports.useEffect(() => {
+    if (!open) return;
+    return acquireFreezeHold();
+  }, [open]);
+}
+const DEFAULT_OPTIONS = {
+  caseSensitive: false,
+  wholeWord: false,
+  regex: false
+};
+function useBrowserFindInPage({
+  key,
+  keyName
+}) {
+  const [isOpen, setIsOpen] = reactExports.useState(false);
+  const [query, setQuery] = reactExports.useState("");
+  const [options, setOptions] = reactExports.useState(DEFAULT_OPTIONS);
+  const [matchInfo, setMatchInfo] = reactExports.useState(null);
+  const searchBarRef = reactExports.useRef(null);
+  const keyRef = reactExports.useRef(key);
+  keyRef.current = key;
+  const activeRequestIdRef = reactExports.useRef(null);
+  const payloadKey = reactExports.useCallback(
+    (payload) => keyName === "browserId" ? payload.browser_id : payload.workspace_id,
+    [keyName]
+  );
+  const buildArgs = reactExports.useCallback(
+    (extra = {}) => ({ [keyName]: keyRef.current, ...extra }),
+    [keyName]
+  );
+  const focusInput = reactExports.useCallback(() => {
+    requestAnimationFrame(() => {
+      searchBarRef.current?.focus();
+      searchBarRef.current?.select();
+    });
+  }, []);
+  const issueFind = reactExports.useCallback(
+    async (text, opts = {}) => {
+      if (!isDesktop) return;
+      if (!text) {
+        setMatchInfo(null);
+        activeRequestIdRef.current = null;
+        try {
+          await invoke("browser_stop_find_in_page", buildArgs({ action: "clearSelection" }));
+        } catch {
+        }
+        return;
+      }
+      if (!(opts.findNext ?? false)) {
+        setMatchInfo(null);
+        activeRequestIdRef.current = null;
+      }
+      try {
+        const reqId = await invoke(
+          "browser_find_in_page",
+          buildArgs({
+            text,
+            options: {
+              matchCase: options.caseSensitive,
+              // First search for a query → omit findNext so Chromium
+              // rescans. Stepping → set findNext: true and toggle forward.
+              findNext: opts.findNext ?? false,
+              forward: opts.forward ?? true
+            }
+          })
+        );
+        if (typeof reqId === "number") activeRequestIdRef.current = reqId;
+      } catch (e) {
+        console.error("browser_find_in_page failed:", e);
+      }
+    },
+    [buildArgs, options.caseSensitive]
+  );
+  const close = reactExports.useCallback(() => {
+    setIsOpen(false);
+    setQuery("");
+    setMatchInfo(null);
+    activeRequestIdRef.current = null;
+    if (!isDesktop) return;
+    invoke("browser_stop_find_in_page", buildArgs({ action: "clearSelection" })).catch(
+      () => {
+      }
+    );
+  }, [buildArgs]);
+  const open = reactExports.useCallback(() => {
+    setIsOpen(true);
+    focusInput();
+  }, [focusInput]);
+  reactExports.useEffect(() => {
+    if (!isOpen) return;
+    void issueFind(query);
+  }, [query, isOpen, issueFind]);
+  reactExports.useEffect(() => {
+    if (!isDesktop) return;
+    let unlisten;
+    void (async () => {
+      unlisten = await listen("browser-found-in-page", (event) => {
+        if (payloadKey(event.payload) !== keyRef.current) return;
+        if (activeRequestIdRef.current !== null && event.payload.request_id !== activeRequestIdRef.current) {
+          return;
+        }
+        setMatchInfo({
+          total: event.payload.matches,
+          // Chromium reports `0` while a query is being typed and the
+          // scan is mid-flight; promote to 0 of N so the UI shows
+          // "No results" until a match is selected.
+          current: event.payload.active_match_ordinal
+        });
+      });
+    })();
+    return () => unlisten?.();
+  }, [payloadKey]);
+  reactExports.useEffect(() => {
+    if (!isDesktop) return;
+    let unlisten;
+    void (async () => {
+      unlisten = await listen("browser-find-shortcut", (event) => {
+        if (payloadKey(event.payload) !== keyRef.current) return;
+        setIsOpen(true);
+        focusInput();
+      });
+    })();
+    return () => unlisten?.();
+  }, [focusInput, payloadKey]);
+  reactExports.useEffect(() => {
+    if (!isDesktop) return;
+    let unlisten;
+    void (async () => {
+      unlisten = await listen("browser-url-changed", (event) => {
+        if (payloadKey(event.payload) !== keyRef.current) return;
+        if (event.payload.loading) {
+          close();
+        }
+      });
+    })();
+    return () => unlisten?.();
+  }, [close, payloadKey]);
+  const findNext = reactExports.useCallback(() => {
+    if (!query) return;
+    void issueFind(query, { findNext: true, forward: true });
+  }, [query, issueFind]);
+  const findPrevious = reactExports.useCallback(() => {
+    if (!query) return;
+    void issueFind(query, { findNext: true, forward: false });
+  }, [query, issueFind]);
+  return {
+    isOpen,
+    open,
+    close,
+    query,
+    setQuery,
+    options,
+    setOptions,
+    matchInfo,
+    findNext,
+    findPrevious,
+    searchBarRef
+  };
+}
+const AUTOCOMPLETE_DEBOUNCE_MS = 50;
+const AUTOCOMPLETE_BLUR_CLOSE_MS = 100;
+function useBrowserPaneControls(args) {
+  const { key, keyName, workspaceId, currentUrlRef, setInputUrl, inputUrl, onNavigate } = args;
+  const find = useBrowserFindInPage({ key, keyName });
+  const addressInputFocusedRef = reactExports.useRef(false);
+  const [autocompleteItems, setAutocompleteItems] = reactExports.useState([]);
+  const [autocompleteIsOpen, setAutocompleteIsOpen] = reactExports.useState(false);
+  const [autocompleteSelectedIndex, setAutocompleteSelectedIndex] = reactExports.useState(0);
+  useFreezeWhile(autocompleteIsOpen);
+  const closeAutocomplete = reactExports.useCallback(() => {
+    setAutocompleteIsOpen(false);
+    setAutocompleteItems([]);
+    setAutocompleteSelectedIndex(0);
+  }, []);
+  reactExports.useEffect(() => {
+    if (!addressInputFocusedRef.current) return;
+    const trimmed = inputUrl.trim();
+    if (trimmed === "") {
+      closeAutocomplete();
+      return;
+    }
+    if (trimmed === currentUrlRef.current.trim()) {
+      closeAutocomplete();
+      return;
+    }
+    let cancelled = false;
+    const handle = setTimeout(() => {
+      trpc.history.search.query({ workspaceId, query: trimmed, limit: 8 }).then((result) => {
+        if (cancelled) return;
+        if (result.entries.length === 0) {
+          closeAutocomplete();
+          return;
+        }
+        setAutocompleteItems(result.entries);
+        setAutocompleteIsOpen(true);
+        setAutocompleteSelectedIndex(0);
+      }).catch(() => {
+        if (!cancelled) closeAutocomplete();
+      });
+    }, AUTOCOMPLETE_DEBOUNCE_MS);
+    return () => {
+      cancelled = true;
+      clearTimeout(handle);
+    };
+  }, [inputUrl, workspaceId, closeAutocomplete, currentUrlRef]);
+  const handleAddressFocus = reactExports.useCallback((e) => {
+    addressInputFocusedRef.current = true;
+    e.target.select();
+  }, []);
+  const handleAddressBlur = reactExports.useCallback(() => {
+    addressInputFocusedRef.current = false;
+    setInputUrl(currentUrlRef.current);
+    setTimeout(() => {
+      if (!addressInputFocusedRef.current) closeAutocomplete();
+    }, AUTOCOMPLETE_BLUR_CLOSE_MS);
+  }, [currentUrlRef, setInputUrl, closeAutocomplete]);
+  const handleAddressKeyDown = reactExports.useCallback(
+    (e) => {
+      if (autocompleteIsOpen) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setAutocompleteSelectedIndex((i) => Math.min(i + 1, autocompleteItems.length - 1));
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setAutocompleteSelectedIndex((i) => Math.max(i - 1, 0));
+          return;
+        }
+        if (e.key === "Enter") {
+          const selected = autocompleteItems[autocompleteSelectedIndex];
+          if (selected) {
+            e.preventDefault();
+            closeAutocomplete();
+            onNavigate(selected.url);
+            return;
+          }
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          closeAutocomplete();
+          return;
+        }
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        closeAutocomplete();
+        onNavigate(inputUrl);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setInputUrl(currentUrlRef.current);
+        const input = e.currentTarget;
+        requestAnimationFrame(() => {
+          if (input.isConnected) input.select();
+        });
+      }
+    },
+    [
+      inputUrl,
+      onNavigate,
+      setInputUrl,
+      currentUrlRef,
+      autocompleteIsOpen,
+      autocompleteItems,
+      autocompleteSelectedIndex,
+      closeAutocomplete
+    ]
+  );
+  const handlePaneKeyDown = reactExports.useCallback(
+    (e) => {
+      if (e.key.toLowerCase() !== "f") return;
+      if (e.shiftKey || e.altKey) return;
+      const isMac = /mac/i.test(navigator.userAgent);
+      const wantsFind = isMac ? e.metaKey && !e.ctrlKey : e.ctrlKey && !e.metaKey;
+      if (!wantsFind) return;
+      e.preventDefault();
+      e.stopPropagation();
+      find.open();
+    },
+    [find]
+  );
+  const handleToggleDevTools = reactExports.useCallback(async () => {
+    if (!isDesktop) return;
+    try {
+      await invoke("browser_toggle_dev_tools", { [keyName]: key });
+    } catch (e) {
+      console.error("browser_toggle_dev_tools failed:", e);
+    }
+  }, [key, keyName]);
+  return {
+    find,
+    addressInputFocusedRef,
+    handleAddressFocus,
+    handleAddressBlur,
+    handleAddressKeyDown,
+    handlePaneKeyDown,
+    handleToggleDevTools,
+    autocomplete: {
+      isOpen: autocompleteIsOpen,
+      items: autocompleteItems,
+      selectedIndex: autocompleteSelectedIndex,
+      close: closeAutocomplete,
+      setSelectedIndex: setAutocompleteSelectedIndex
+    },
+    paneDataAttrs: {
+      "data-band-browser-pane": "",
+      "data-band-browser-pane-key": key,
+      "data-band-browser-pane-keyname": keyName
+    }
+  };
+}
+function waitForPaint() {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+function useBrowserPaneFreeze(args) {
+  const { created, visible, ipcKeyRef } = args;
+  const frozen = useBrowserPaneFrozen();
+  const [snapshot, setSnapshot] = reactExports.useState(null);
+  const freezeAppliedRef = reactExports.useRef(false);
+  reactExports.useEffect(() => {
+    if (!isDesktop || !created) return;
+    let cancelled = false;
+    if (frozen) {
+      if (!visible) return;
+      const ipcKey = ipcKeyRef.current;
+      (async () => {
+        try {
+          const dataUrl = await invoke("browser_capture_page", ipcKey);
+          if (!cancelled && dataUrl) {
+            reactDomExports.flushSync(() => setSnapshot(dataUrl));
+            await waitForPaint();
+          }
+        } catch {
+        }
+        if (cancelled) return;
+        freezeAppliedRef.current = true;
+        invoke("browser_pause_media", ipcKey).catch(() => {
+        });
+        invoke("browser_hide", ipcKey).catch(() => {
+        });
+      })();
+    } else {
+      if (freezeAppliedRef.current) {
+        freezeAppliedRef.current = false;
+        const ipcKey = ipcKeyRef.current;
+        invoke("browser_show", ipcKey).catch(() => {
+        });
+        invoke("browser_resume_media", ipcKey).catch(() => {
+        });
+        (async () => {
+          await waitForPaint();
+          if (!cancelled) setSnapshot(null);
+        })();
+      } else {
+        setSnapshot(null);
+      }
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [frozen, created, visible, ipcKeyRef]);
+  return { snapshot };
+}
+let hosts = /* @__PURE__ */ new Set();
+const listeners = /* @__PURE__ */ new Set();
+let bootstrapped = false;
+function setHosts(updater) {
+  const next = updater(hosts);
+  if (next === hosts) return;
+  hosts = next;
+  for (const cb of listeners) cb();
+}
+function addHost(raw) {
+  const h = raw.toLowerCase();
+  if (!h || hosts.has(h)) return;
+  setHosts((prev) => {
+    const next = new Set(prev);
+    next.add(h);
+    return next;
+  });
+}
+function bootstrap() {
+  if (bootstrapped) return;
+  if (!isDesktop) return;
+  bootstrapped = true;
+  void listen("browser-host-overridden", (event) => {
+    if (event.payload.host) addHost(event.payload.host);
+  }).catch((err) => {
+    console.error("browser-host-overridden listen failed:", err);
+    bootstrapped = false;
+  });
+  invoke("browser_get_overridden_hosts").then((list) => {
+    if (!Array.isArray(list)) return;
+    for (const h of list) addHost(h);
+  }).catch((err) => {
+    console.error("browser_get_overridden_hosts failed:", err);
+  });
+}
+function subscribe(cb) {
+  bootstrap();
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+}
+function getSnapshot() {
+  return hosts;
+}
+function useOverriddenHosts() {
+  const currentHosts = reactExports.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const isOverriddenHost = reactExports.useCallback(
+    (currentUrl) => {
+      if (!currentUrl) return false;
+      let host;
+      try {
+        host = new URL(currentUrl).hostname.toLowerCase();
+      } catch {
+        return false;
+      }
+      return currentHosts.has(host);
+    },
+    [currentHosts]
+  );
+  return { isOverriddenHost };
+}
+function AddressBarAutocomplete({ state, onSelect }) {
+  if (!state.isOpen || state.items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "absolute top-full left-0 right-0 z-20 mx-2 mt-1 overflow-hidden rounded-md border border-border bg-popover shadow-md",
+      onMouseDown: (e) => {
+        e.preventDefault();
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "max-h-80 overflow-y-auto py-1", children: state.items.map((item, index) => {
+        const selected = index === state.selectedIndex;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            type: "button",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              onSelect(item.url);
+              state.close();
+            },
+            onMouseEnter: () => state.setSelectedIndex(index),
+            className: `flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors ${selected ? "bg-accent text-foreground" : "text-foreground hover:bg-accent/60"}`,
+            children: [
+              item.faviconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: item.faviconUrl,
+                  alt: "",
+                  className: "size-4 shrink-0 rounded-sm",
+                  onError: (e) => {
+                    e.currentTarget.style.display = "none";
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "size-4 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                item.title ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-medium leading-tight", children: item.title }) : null,
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "span",
+                  {
+                    className: `truncate text-xs leading-tight ${item.title ? "text-muted-foreground" : "text-foreground"}`,
+                    children: item.url
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }, item.id);
+      }) })
+    }
+  );
+}
+function BrowserFindBar({ find }) {
+  if (!find.isOpen) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SearchBar,
+    {
+      ref: find.searchBarRef,
+      query: find.query,
+      onQueryChange: find.setQuery,
+      options: find.options,
+      onOptionsChange: find.setOptions,
+      placeholder: "Find in page",
+      matchInfo: find.matchInfo ?? void 0,
+      onNext: find.findNext,
+      onPrevious: find.findPrevious,
+      onClose: find.close,
+      visibleOptions: ["caseSensitive"]
+    }
+  );
+}
+const SEARCH_DEBOUNCE_MS = 150;
+const LIST_LIMIT = 200;
+function groupByDay(entries) {
+  const groups = /* @__PURE__ */ new Map();
+  const order = [];
+  for (const entry of entries) {
+    const dayKey = dayKeyFor(entry.lastVisitedAt);
+    let group = groups.get(dayKey);
+    if (!group) {
+      group = { label: labelFor(dayKey), entries: [] };
+      groups.set(dayKey, group);
+      order.push(dayKey);
+    }
+    group.entries.push(entry);
+  }
+  return order.map((k) => groups.get(k));
+}
+function dayKeyFor(ts) {
+  const d = new Date(ts);
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function labelFor(dayKey) {
+  const now = /* @__PURE__ */ new Date();
+  const today = dayKeyFor(now.getTime());
+  const yesterdayDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
+  const yesterday = dayKeyFor(yesterdayDate.getTime());
+  if (dayKey === today) return "Today";
+  if (dayKey === yesterday) return "Yesterday";
+  const [y, m, d] = dayKey.split("-").map(Number);
+  const date = new Date(y, m - 1, d);
+  const daysSince = Math.floor((Date.now() - date.getTime()) / (24 * 60 * 60 * 1e3));
+  if (daysSince <= 7) {
+    return date.toLocaleDateString(void 0, { weekday: "long", month: "short", day: "numeric" });
+  }
+  return date.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function timeFor(ts) {
+  return new Date(ts).toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+function HistoryPopover({ workspaceId, onNavigate }) {
+  const searchId = reactExports.useId();
+  const [open, setOpen] = reactExports.useState(false);
+  const [query, setQuery] = reactExports.useState("");
+  const [entries, setEntries] = reactExports.useState([]);
+  const [loading, setLoading] = reactExports.useState(false);
+  const [reloadKey, setReloadKey] = reactExports.useState(0);
+  const refresh = reactExports.useCallback(() => {
+    setReloadKey((k) => k + 1);
+  }, []);
+  reactExports.useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    const trimmed = query.trim();
+    const fire = () => {
+      const promise = trimmed ? trpc.history.search.query({ workspaceId, query: trimmed, limit: 50 }) : trpc.history.list.query({ workspaceId, limit: LIST_LIMIT });
+      promise.then((result) => {
+        if (cancelled) return;
+        setEntries(result.entries);
+      }).catch(() => {
+        if (!cancelled) setEntries([]);
+      }).finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    };
+    const delay = trimmed ? SEARCH_DEBOUNCE_MS : 0;
+    const handle = setTimeout(fire, delay);
+    return () => {
+      cancelled = true;
+      clearTimeout(handle);
+    };
+  }, [open, query, workspaceId, reloadKey]);
+  const groups = reactExports.useMemo(() => groupByDay(entries), [entries]);
+  const handleNavigate = reactExports.useCallback(
+    (url) => {
+      onNavigate(url);
+      setOpen(false);
+    },
+    [onNavigate]
+  );
+  const handleDelete = reactExports.useCallback(
+    async (id) => {
+      await trpc.history.delete.mutate({ id, workspaceId }).catch(() => {
+      });
+      refresh();
+    },
+    [refresh, workspaceId]
+  );
+  const handleClear = reactExports.useCallback(
+    async (range) => {
+      await trpc.history.clear.mutate({ workspaceId, range }).catch(() => {
+      });
+      refresh();
+    },
+    [refresh, workspaceId]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        title: "History",
+        "aria-label": "Browser history",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(History, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      PopoverContent,
+      {
+        align: "end",
+        sideOffset: 6,
+        className: "w-[440px] p-0",
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          const input = document.getElementById(searchId);
+          if (input) input.focus();
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "size-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                id: searchId,
+                type: "text",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: "Search history",
+                className: "min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-h-[420px] overflow-y-auto", children: loading && entries.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: "Loading…" }) : groups.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-3 py-6 text-center text-sm text-muted-foreground", children: query ? "No matching history" : "No history yet" }) : groups.map((group) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-popover px-3 py-1 text-xs font-medium text-muted-foreground", children: group.label }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { children: group.entries.map((entry) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "li",
+              {
+                className: "group relative flex min-w-0 items-center gap-2 py-1.5 pl-3 pr-2 hover:bg-accent/60",
+                children: [
+                  entry.faviconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "img",
+                    {
+                      src: entry.faviconUrl,
+                      alt: "",
+                      className: "size-4 shrink-0 rounded-sm",
+                      onError: (e) => {
+                        e.currentTarget.style.display = "none";
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "size-4 shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleNavigate(entry.url),
+                      className: "flex min-w-0 flex-1 flex-col items-stretch gap-0.5 overflow-hidden pr-6 text-left",
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block truncate text-sm font-medium leading-tight text-foreground", children: entry.title || entry.url }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-baseline gap-2 leading-tight", children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1 truncate text-xs text-muted-foreground", children: entry.url }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground tabular-nums", children: timeFor(entry.lastVisitedAt) })
+                        ] })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleDelete(entry.id),
+                      className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100",
+                      title: "Delete entry",
+                      "aria-label": "Delete entry",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-3.5" })
+                    }
+                  )
+                ]
+              },
+              entry.id
+            )) })
+          ] }, group.label)) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-end border-t border-border px-3 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-1 rounded px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                children: [
+                  "Clear ",
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuContent, { align: "end", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuItem, { onSelect: () => handleClear("hour"), children: "Last hour" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuItem, { onSelect: () => handleClear("day"), children: "Last 24 hours" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuItem, { onSelect: () => handleClear("week"), children: "Last week" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuItem, { onSelect: () => handleClear("all"), children: "All time" })
+            ] })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function NotSecureBadge() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "span",
+    {
+      className: "inline-flex shrink-0 items-center gap-1 rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive",
+      title: "The certificate for this site was overridden for the current session. Use with caution.",
+      "data-testid": "cert-not-secure-badge",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-hidden": true }),
+        "Not secure"
+      ]
+    }
+  );
+}
+const DEFAULT_URL = "";
+const BLANK_URL = "about:blank";
+const faviconMap = /* @__PURE__ */ new Map();
+const faviconListeners = /* @__PURE__ */ new Set();
+function setFaviconUrl(browserId, url) {
+  if (faviconMap.get(browserId) !== url) {
+    faviconMap.set(browserId, url);
+    for (const listener of faviconListeners) listener();
+  }
+}
+function subscribeFavicons(cb) {
+  faviconListeners.add(cb);
+  return () => {
+    faviconListeners.delete(cb);
+  };
+}
+function useFavicon(browserId) {
+  return reactExports.useSyncExternalStore(subscribeFavicons, () => faviconMap.get(browserId));
+}
+function BrowserPaneComponent({
+  params,
+  api
+}) {
+  const { browserId, initialUrl, workspaceId: workspaceIdParam } = params;
+  const [currentUrl, setCurrentUrl] = reactExports.useState(() => initialUrl ?? DEFAULT_URL);
+  const [inputUrl, setInputUrl] = reactExports.useState(() => initialUrl ?? DEFAULT_URL);
+  const [loading, setLoading] = reactExports.useState(false);
+  const [created, setCreated] = reactExports.useState(false);
+  const createdRef = reactExports.useRef(false);
+  const placeholderRef = reactExports.useRef(null);
+  const creatingRef = reactExports.useRef(false);
+  const pendingNavRef = reactExports.useRef(null);
+  const browserIdRef = reactExports.useRef(browserId);
+  browserIdRef.current = browserId;
+  const currentUrlRef = reactExports.useRef(currentUrl);
+  currentUrlRef.current = currentUrl;
+  const [workspaceId, setWorkspaceId] = reactExports.useState(workspaceIdParam ?? "");
+  const workspaceIdRef = reactExports.useRef(workspaceId);
+  workspaceIdRef.current = workspaceId;
+  const ipcKeyRef = reactExports.useRef({ browserId });
+  ipcKeyRef.current = { browserId };
+  const { snapshot } = useBrowserPaneFreeze({
+    created,
+    visible: api.isVisible && params.wsActive !== false,
+    ipcKeyRef
+  });
+  const { isOverriddenHost } = useOverriddenHosts();
+  const getBounds = reactExports.useCallback(() => {
+    const el = placeholderRef.current;
+    if (!el) return null;
+    const rect = el.getBoundingClientRect();
+    return {
+      x: rect.left + 1,
+      y: rect.top,
+      width: Math.max(0, rect.width - 2),
+      height: rect.height
+    };
+  }, []);
+  const invoke$1 = reactExports.useCallback(async (cmd, args) => {
+    if (!isDesktop) return;
+    return invoke(cmd, args);
+  }, []);
+  reactExports.useEffect(() => {
+    if (!browserId || initialUrl) return;
+    let cancelled = false;
+    trpc.browsers.get.query({ browserId }).then((result) => {
+      if (cancelled) return;
+      const ws = result.browser?.workspaceId;
+      if (ws && !workspaceIdRef.current) {
+        setWorkspaceId(ws);
+      }
+      const url = result.browser?.url;
+      if (!url || url === "" || url === BLANK_URL) return;
+      setCurrentUrl(url);
+      setInputUrl(url);
+      if (createdRef.current) {
+        invoke$1("browser_navigate", { browserId, url }).catch(() => {
+        });
+      } else {
+        pendingNavRef.current = url;
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [browserId, initialUrl, invoke$1]);
+  reactExports.useEffect(() => {
+    if (!isDesktop || created || creatingRef.current) return;
+    const el = placeholderRef.current;
+    if (!el) return;
+    let cancelled = false;
+    const tryCreate = async () => {
+      if (cancelled || createdRef.current || creatingRef.current) return;
+      const bounds = getBounds();
+      if (!bounds || bounds.width === 0 || bounds.height === 0) return;
+      observer.disconnect();
+      creatingRef.current = true;
+      try {
+        await invoke$1("browser_create", {
+          browserId,
+          ...bounds,
+          url: currentUrlRef.current || BLANK_URL
+        });
+        createdRef.current = true;
+        setCreated(true);
+        const pending = pendingNavRef.current;
+        if (pending) {
+          pendingNavRef.current = null;
+          await invoke$1("browser_navigate", {
+            browserId: browserIdRef.current,
+            url: pending
+          });
+        }
+      } catch (e) {
+        console.error("Failed to create browser webview:", e);
+      } finally {
+        creatingRef.current = false;
+      }
+    };
+    const observer = new ResizeObserver(() => {
+      tryCreate();
+    });
+    observer.observe(el);
+    const timer = setTimeout(tryCreate, 50);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+      observer.disconnect();
+    };
+  }, [created, getBounds, invoke$1, browserId]);
+  const urlPersistTimer = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (!isDesktop) return;
+    let unlistenUrl;
+    let unlistenTitle;
+    (async () => {
+      unlistenUrl = await listen("browser-url-changed", (event) => {
+        if (event.payload.browser_id !== browserIdRef.current) return;
+        const url = event.payload.url;
+        setLoading(event.payload.loading);
+        if (url === BLANK_URL) return;
+        setCurrentUrl(url);
+        if (!addressInputFocusedRef.current) {
+          setInputUrl(url);
+        }
+        if (urlPersistTimer.current) clearTimeout(urlPersistTimer.current);
+        urlPersistTimer.current = setTimeout(() => {
+          trpc.browsers.navigate.mutate({ browserId: browserIdRef.current, url }).catch(() => {
+          });
+        }, 500);
+        let faviconForHistory;
+        try {
+          const origin = new URL(url).origin;
+          faviconForHistory = `${origin}/favicon.ico`;
+          setFaviconUrl(browserIdRef.current, faviconForHistory);
+        } catch {
+        }
+        if (!event.payload.loading && workspaceIdRef.current) {
+          trpc.history.record.mutate({
+            workspaceId: workspaceIdRef.current,
+            url,
+            faviconUrl: faviconForHistory
+          }).catch(() => {
+          });
+        }
+      });
+      unlistenTitle = await listen(
+        "browser-title-changed",
+        (event) => {
+          if (event.payload.browser_id !== browserIdRef.current) return;
+          if (event.payload.title) {
+            api.setTitle(event.payload.title);
+            const url = currentUrlRef.current;
+            if (url && url !== BLANK_URL && workspaceIdRef.current) {
+              trpc.history.updateMeta.mutate({
+                workspaceId: workspaceIdRef.current,
+                url,
+                title: event.payload.title
+              }).catch(() => {
+              });
+            }
+          }
+        }
+      );
+    })();
+    return () => {
+      unlistenUrl?.();
+      unlistenTitle?.();
+      if (urlPersistTimer.current) {
+        clearTimeout(urlPersistTimer.current);
+        urlPersistTimer.current = null;
+        const finalUrl = currentUrlRef.current;
+        if (finalUrl && finalUrl !== BLANK_URL) {
+          trpc.browsers.navigate.mutate({ browserId: browserIdRef.current, url: finalUrl }).catch(() => {
+          });
+        }
+      }
+    };
+  }, [api]);
+  reactExports.useEffect(() => {
+    if (!isDesktop || !created) return;
+    const logFail = (cmd) => (err) => console.error(`[BrowserPane] ${cmd} failed`, err);
+    const showWebview = () => {
+      const bounds = getBounds();
+      if (bounds && bounds.width > 0 && bounds.height > 0) {
+        invoke$1("browser_set_bounds", { browserId, ...bounds }).catch(logFail("browser_set_bounds"));
+      }
+      invoke$1("browser_show", { browserId }).catch(logFail("browser_show"));
+    };
+    const hideWebview = () => {
+      invoke$1("browser_hide", { browserId }).catch(logFail("browser_hide"));
+    };
+    const d = api.onDidVisibilityChange((e) => {
+      if (e.isVisible) {
+        showWebview();
+      } else {
+        hideWebview();
+      }
+    });
+    return () => {
+      d.dispose();
+    };
+  }, [api, created, getBounds, invoke$1, browserId]);
+  reactExports.useEffect(() => {
+    if (!isDesktop || !created) return;
+    const wsActive = params.wsActive !== false;
+    const logFail = (cmd) => (err) => console.error(`[BrowserPane] ${cmd} failed`, err);
+    if (!wsActive) {
+      invoke$1("browser_hide", { browserId }).catch(logFail("browser_hide"));
+    } else if (api.isVisible) {
+      const bounds = getBounds();
+      if (bounds && bounds.width > 0 && bounds.height > 0) {
+        invoke$1("browser_set_bounds", { browserId, ...bounds }).catch(logFail("browser_set_bounds"));
+      }
+      invoke$1("browser_show", { browserId }).catch(logFail("browser_show"));
+    }
+  }, [params.wsActive, api, created, getBounds, invoke$1, browserId]);
+  reactExports.useEffect(() => {
+    if (!isDesktop || !created) return;
+    const el = placeholderRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      const bounds = getBounds();
+      if (!bounds || bounds.width === 0 || bounds.height === 0) return;
+      invoke$1("browser_set_bounds", { browserId, ...bounds }).catch(() => {
+      });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [created, getBounds, invoke$1, browserId]);
+  reactExports.useEffect(() => {
+    return () => {
+      if (isDesktop) {
+        const bId = browserIdRef.current;
+        invoke("browser_destroy", { browserId: bId }).catch(() => {
+        });
+      }
+    };
+  }, []);
+  const handleNavigate = reactExports.useCallback(
+    async (rawUrl) => {
+      let normalized = rawUrl.trim();
+      if (!normalized) {
+        setCurrentUrl("");
+        setInputUrl("");
+        setLoading(false);
+        if (createdRef.current) {
+          try {
+            await invoke$1("browser_navigate", { browserId, url: BLANK_URL });
+          } catch (e) {
+            console.error("browser_navigate failed:", e);
+          }
+        } else {
+          pendingNavRef.current = BLANK_URL;
+        }
+        return;
+      }
+      if (!normalized.startsWith("http://") && !normalized.startsWith("https://")) {
+        if (normalized.includes(".") && !normalized.includes(" ")) {
+          normalized = `https://${normalized}`;
+        } else {
+          normalized = `https://www.google.com/search?q=${encodeURIComponent(normalized)}`;
+        }
+      }
+      setCurrentUrl(normalized);
+      setInputUrl(normalized);
+      setLoading(true);
+      if (createdRef.current) {
+        try {
+          await invoke$1("browser_navigate", { browserId, url: normalized });
+        } catch (e) {
+          console.error("browser_navigate failed:", e);
+        }
+      } else {
+        pendingNavRef.current = normalized;
+      }
+    },
+    [invoke$1, browserId]
+  );
+  const handleBack = reactExports.useCallback(async () => {
+    try {
+      await invoke$1("browser_go_back", { browserId });
+    } catch (e) {
+      console.error("browser_go_back failed:", e);
+    }
+  }, [invoke$1, browserId]);
+  const handleForward = reactExports.useCallback(async () => {
+    try {
+      await invoke$1("browser_go_forward", { browserId });
+    } catch (e) {
+      console.error("browser_go_forward failed:", e);
+    }
+  }, [invoke$1, browserId]);
+  const handleReload = reactExports.useCallback(async () => {
+    try {
+      setLoading(true);
+      await invoke$1("browser_reload", { browserId });
+    } catch (e) {
+      console.error("browser_reload failed:", e);
+    }
+  }, [invoke$1, browserId]);
+  const handleStop = reactExports.useCallback(async () => {
+    try {
+      await invoke$1("browser_eval", { browserId, js: "window.stop()" });
+      setLoading(false);
+    } catch {
+      setLoading(false);
+    }
+  }, [invoke$1, browserId]);
+  const {
+    find,
+    addressInputFocusedRef,
+    handleAddressFocus,
+    handleAddressBlur,
+    handleAddressKeyDown,
+    handlePaneKeyDown,
+    handleToggleDevTools,
+    autocomplete,
+    paneDataAttrs
+  } = useBrowserPaneControls({
+    key: browserId,
+    keyName: "browserId",
+    workspaceId,
+    currentUrlRef,
+    setInputUrl,
+    inputUrl,
+    onNavigate: handleNavigate
+  });
+  if (!browserId) return null;
+  if (!isDesktop) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center justify-center text-muted-foreground", children: "Browser panel is only available in the desktop app" });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full w-full flex-col", onKeyDown: handlePaneKeyDown, ...paneDataAttrs, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `@keyframes browser-bar-slide {
+  0% { transform: translateX(-100%); }
+  50% { transform: translateX(200%); }
+  100% { transform: translateX(-100%); }
+}` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-10 shrink-0 items-center gap-1 border-b border-border bg-background px-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleBack,
+          className: "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          title: "Back",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowLeft, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleForward,
+          className: "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          title: "Forward",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowRight, { className: "size-4" })
+        }
+      ),
+      loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleStop,
+          className: "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          title: "Stop",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleReload,
+          className: "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          title: "Reload",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCw, { className: "size-4" })
+        }
+      ),
+      isOverriddenHost(currentUrl) ? /* @__PURE__ */ jsxRuntimeExports.jsx(NotSecureBadge, {}) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          type: "text",
+          value: inputUrl,
+          onChange: (e) => setInputUrl(e.target.value),
+          onKeyDown: handleAddressKeyDown,
+          onFocus: handleAddressFocus,
+          onBlur: handleAddressBlur,
+          className: "min-w-0 flex-1 rounded border border-transparent bg-muted/50 px-3 py-1.5 text-sm text-foreground outline-none transition-colors focus:border-border",
+          placeholder: "Enter URL or search...",
+          "data-band-address-input": ""
+        }
+      ),
+      workspaceId ? /* @__PURE__ */ jsxRuntimeExports.jsx(HistoryPopover, { workspaceId, onNavigate: handleNavigate }) : null,
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleToggleDevTools,
+          className: "flex items-center justify-center rounded p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+          title: "Toggle DevTools",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-4" })
+        }
+      ),
+      loading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-x-0 bottom-0 h-0.5 overflow-hidden bg-blue-500/10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "h-full w-2/5 rounded-full bg-blue-500",
+          style: {
+            animation: "browser-bar-slide 1.4s ease-in-out infinite"
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AddressBarAutocomplete, { state: autocomplete, onSelect: handleNavigate })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(BrowserFindBar, { find }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: placeholderRef, className: "relative min-h-0 flex-1", children: snapshot ? (
+      // `object-contain object-top` — see the identical block in
+      // `BrowserPanelComponent` for the DevTools-aware rationale.
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "img",
+        {
+          src: snapshot,
+          alt: "",
+          className: "pointer-events-none absolute inset-0 size-full object-contain object-top",
+          draggable: false
+        }
+      )
+    ) : null })
+  ] });
+}
+const freshBrowserIds = /* @__PURE__ */ new Set();
+function markBrowserFresh(browserId) {
+  freshBrowserIds.add(browserId);
+}
+function uuid() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  const bytes = crypto.getRandomValues(new Uint8Array(16));
+  bytes[6] = bytes[6] & 15 | 64;
+  bytes[8] = bytes[8] & 63 | 128;
+  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+function newBrowserId() {
+  return `browser_${uuid()}`;
+}
+function browserLayoutKey(workspaceId) {
+  return ["browserLayout", workspaceId];
+}
+const saveTimers = /* @__PURE__ */ new Map();
+function panelIdsFromLayout(layout) {
+  if (typeof layout === "object" && layout !== null) {
+    const panels = layout.panels;
+    if (typeof panels === "object" && panels !== null) {
+      return new Set(Object.keys(panels));
+    }
+  }
+  return /* @__PURE__ */ new Set();
+}
+function persistToServer(workspaceId, layout, opts) {
+  if (opts?.queryClient) {
+    const prev = opts.queryClient.getQueryData(browserLayoutKey(workspaceId));
+    opts.queryClient.setQueryData(browserLayoutKey(workspaceId), {
+      layout,
+      browserIds: panelIdsFromLayout(layout),
+      urls: prev?.urls ?? /* @__PURE__ */ new Map()
+    });
+  }
+  const existing = saveTimers.get(workspaceId);
+  if (existing) clearTimeout(existing);
+  saveTimers.set(
+    workspaceId,
+    setTimeout(() => {
+      saveTimers.delete(workspaceId);
+      trpc.browserLayout.save.mutate({ workspaceId, tree: layout }).catch((err) => {
+        console.error("[DockviewBrowserContainer] failed to persist layout:", err);
+      });
+    }, 500)
+  );
+}
+function isDockviewLayout(obj) {
+  if (typeof obj !== "object" || obj === null) return false;
+  const o = obj;
+  return typeof o.grid === "object" && typeof o.panels === "object";
+}
+const browserTabTheme = {
+  name: "band",
+  className: "dockview-theme-band dockview-browser-tabs"
+};
+const BrowserVisibilityContext = reactExports.createContext({ visible: true, wsActive: true });
+function BrowserTabPanel({ params, api }) {
+  const { visible } = reactExports.useContext(BrowserVisibilityContext);
+  if (!params.workspaceId || !params.browserId) return null;
+  const paneParams = {
+    workspaceId: params.workspaceId,
+    browserId: params.browserId,
+    wsActive: visible,
+    initialUrl: params.initialUrl
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full w-full flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    BrowserPaneComponent,
+    {
+      params: paneParams,
+      api,
+      ...{}
+    }
+  ) });
+}
+function BrowserTab(props) {
+  const [title, setTitle] = reactExports.useState(props.api.title ?? "New Tab");
+  const [panelCount, setPanelCount] = reactExports.useState(props.containerApi.panels.length);
+  const [faviconError, setFaviconError] = reactExports.useState(false);
+  const browserId = props.params.browserId;
+  const faviconUrl = useFavicon(browserId);
+  const prevFaviconRef = reactExports.useRef(faviconUrl);
+  if (faviconUrl !== prevFaviconRef.current) {
+    prevFaviconRef.current = faviconUrl;
+    if (faviconError) setFaviconError(false);
+  }
+  reactExports.useEffect(() => {
+    const d = props.api.onDidTitleChange(() => setTitle(props.api.title ?? "New Tab"));
+    return () => d.dispose();
+  }, [props.api]);
+  reactExports.useEffect(() => {
+    const cApi = props.containerApi;
+    const update = () => setPanelCount(cApi.panels.length);
+    const d1 = cApi.onDidAddPanel(update);
+    const d2 = cApi.onDidRemovePanel(update);
+    return () => {
+      d1.dispose();
+      d2.dispose();
+    };
+  }, [props.containerApi]);
+  const handleClose = reactExports.useCallback(
+    (e) => {
+      e.stopPropagation();
+      closeTabRef.current?.(browserId);
+    },
+    [browserId]
+  );
+  const showClose = panelCount > 1;
+  const showFavicon = faviconUrl && !faviconError;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "dv-default-tab", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+      showFavicon ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "img",
+        {
+          src: faviconUrl,
+          alt: "",
+          className: "size-3.5 shrink-0",
+          onError: () => setFaviconError(true)
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate", children: title })
+    ] }),
+    showClose && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "ml-1 inline-flex size-4 items-center justify-center rounded-sm opacity-60 hover:opacity-100 hover:bg-accent transition-colors",
+        onClick: handleClose,
+        title: "Close tab",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3" })
+      }
+    )
+  ] });
+}
+const addTabRef = {
+  current: { onAdd: () => {
+  }, onSplit: () => {
+  } }
+};
+const closeTabRef = {
+  current: null
+};
+const RightHeaderActions = React.memo(function RightHeaderActions2(props) {
+  const groupId = props.group.id;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex size-8 items-center justify-center text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors",
+        onClick: () => addTabRef.current.onSplit(groupId, "right"),
+        title: "Split right",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Columns2, { className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex size-8 items-center justify-center text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors",
+        onClick: () => addTabRef.current.onSplit(groupId, "below"),
+        title: "Split down",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Rows2, { className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex size-8 items-center justify-center text-muted-foreground hover:text-foreground hover:bg-accent rounded transition-colors",
+        onClick: () => addTabRef.current.onAdd(groupId),
+        title: "New browser tab",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "size-4" })
+      }
+    )
+  ] });
+});
+const browserPanelComponents = {
+  browserTab: BrowserTabPanel
+};
+const browserTabComponents = {
+  browserTab: BrowserTab
+};
+function DockviewBrowserContainer({
+  workspaceId,
+  visible,
+  wsActive
+}) {
+  const adapter = useAdapter();
+  const queryClient = useQueryClient();
+  const apiRef = reactExports.useRef(null);
+  const isRestoringRef = reactExports.useRef(false);
+  const containerRef = reactExports.useRef(null);
+  const { data: initialData } = useQuery({
+    queryKey: browserLayoutKey(workspaceId),
+    queryFn: async () => {
+      const [{ tree }, { browsers }] = await Promise.all([
+        trpc.browserLayout.get.query({ workspaceId }).catch(() => ({ tree: null })),
+        trpc.browsers.list.query({ workspaceId }).catch(() => ({ browsers: [] }))
+      ]);
+      const urls = /* @__PURE__ */ new Map();
+      for (const b of browsers) {
+        if (b.url && b.url !== "about:blank") urls.set(b.id, b.url);
+      }
+      return {
+        layout: tree,
+        browserIds: new Set(browsers.map((b) => b.id)),
+        urls
+      };
+    },
+    staleTime: Number.POSITIVE_INFINITY
+    // never auto-refetch — we manage persistence ourselves
+  });
+  const queryClientRef = reactExports.useRef(queryClient);
+  queryClientRef.current = queryClient;
+  const schedulePersist = reactExports.useCallback(() => {
+    if (isRestoringRef.current) return;
+    const api = apiRef.current;
+    if (!api) return;
+    persistToServer(workspaceId, api.toJSON(), { queryClient: queryClientRef.current });
+  }, [workspaceId]);
+  const handleAddTab = reactExports.useCallback(
+    async (groupId, addOptions) => {
+      const api = apiRef.current;
+      if (!api) return;
+      const browserId = newBrowserId();
+      markBrowserFresh(browserId);
+      const initialUrl = addOptions?.initialUrl;
+      const options = {
+        id: browserId,
+        component: "browserTab",
+        tabComponent: "browserTab",
+        title: "New Tab",
+        params: {
+          workspaceId,
+          browserId,
+          ...initialUrl ? { initialUrl } : {}
+        }
+      };
+      if (groupId) {
+        options.position = {
+          referenceGroup: groupId
+        };
+      }
+      api.addPanel(options);
+      try {
+        await trpc.browsers.create.mutate({
+          workspaceId,
+          id: browserId,
+          ...initialUrl ? { url: initialUrl } : {}
+        });
+      } catch (err) {
+        console.error("[DockviewBrowserContainer] error pre-creating browser:", err);
+      }
+    },
+    [workspaceId]
+  );
+  const handleSplit = reactExports.useCallback(
+    async (groupId, direction) => {
+      const api = apiRef.current;
+      if (!api) return;
+      const browserId = newBrowserId();
+      markBrowserFresh(browserId);
+      try {
+        api.addPanel({
+          id: browserId,
+          component: "browserTab",
+          tabComponent: "browserTab",
+          title: "New Tab",
+          params: {
+            workspaceId,
+            browserId
+          },
+          position: {
+            referenceGroup: groupId,
+            direction
+          }
+        });
+      } catch (err) {
+        console.error("[DockviewBrowserContainer] split addPanel threw:", err);
+        return;
+      }
+      try {
+        await trpc.browsers.create.mutate({ workspaceId, id: browserId });
+      } catch (err) {
+        console.error("[DockviewBrowserContainer] error creating split browser:", err);
+      }
+    },
+    [workspaceId]
+  );
+  const closeTab = reactExports.useCallback((browserId) => {
+    const api = apiRef.current;
+    if (!api || api.panels.length <= 1) return;
+    selectNeighbourBeforeRemove(api, browserId);
+    const panel = api.getPanel(browserId);
+    if (panel) {
+      api.removePanel(panel);
+    }
+    requestAnimationFrame(() => {
+      const activePanel = api.activePanel;
+      if (!activePanel) return;
+      activePanel.view.content.element.querySelector("[data-band-address-input]")?.focus();
+    });
+    trpc.browsers.remove.mutate({ browserId }).catch((err) => {
+      console.error("[DockviewBrowserContainer] failed to remove browser:", err);
+    });
+  }, []);
+  reactExports.useEffect(() => {
+    if (!visible) return;
+    const refocusAddressBar = () => {
+      const panel = apiRef.current?.activePanel;
+      if (!panel) return;
+      panel.view.content.element.querySelector("[data-band-address-input]")?.focus();
+    };
+    const cycleTabs = (direction) => {
+      cycleTabsInActiveGroup(apiRef.current, direction, () => {
+        requestAnimationFrame(refocusAddressBar);
+      });
+    };
+    const cycleGroups = (direction) => {
+      cycleGridGroups(apiRef.current, direction, () => {
+        requestAnimationFrame(refocusAddressBar);
+      });
+    };
+    const handler = (e) => {
+      if (!containerRef.current?.contains(document.activeElement)) return;
+      const key = e.key.toLowerCase();
+      if (e.ctrlKey && !e.metaKey && key === "tab") {
+        e.preventDefault();
+        e.stopPropagation();
+        cycleTabs(e.shiftKey ? -1 : 1);
+        return;
+      }
+      const mod = e.metaKey || e.ctrlKey;
+      if (!mod) return;
+      if (e.shiftKey && (key === "[" || key === "]")) {
+        e.preventDefault();
+        e.stopPropagation();
+        cycleTabs(key === "]" ? 1 : -1);
+        return;
+      }
+      if (!e.shiftKey && (key === "[" || key === "]")) {
+        e.preventDefault();
+        e.stopPropagation();
+        cycleGroups(key === "]" ? 1 : -1);
+        return;
+      }
+      if (key === "t" && !e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleAddTab().then(() => {
+          requestAnimationFrame(() => {
+            const panel = apiRef.current?.activePanel;
+            if (!panel) return;
+            panel.view.content.element.querySelector("[data-band-address-input]")?.focus();
+          });
+        });
+      } else if (key === "w" && !e.shiftKey) {
+        const api = apiRef.current;
+        if (!api || api.panels.length <= 1) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const active = api.activePanel;
+        if (active) {
+          closeTab(active.id);
+        }
+      } else if (key === "d") {
+        e.preventDefault();
+        e.stopPropagation();
+        const api = apiRef.current;
+        if (!api) return;
+        const activeGroup = api.activeGroup;
+        if (!activeGroup) return;
+        const direction = e.shiftKey ? "below" : "right";
+        handleSplit(activeGroup.id, direction);
+      } else if (key === "r" && !e.shiftKey && isDesktop) {
+        const api = apiRef.current;
+        if (!api) return;
+        const active = api.activePanel;
+        const browserId = active?.params?.browserId;
+        if (!browserId) return;
+        e.preventDefault();
+        e.stopPropagation();
+        invoke("browser_reload", { browserId }).catch((err) => {
+          console.error("[DockviewBrowserContainer] browser_reload failed:", err);
+        });
+      }
+    };
+    window.addEventListener("keydown", handler, true);
+    return () => window.removeEventListener("keydown", handler, true);
+  }, [visible, closeTab, handleSplit, handleAddTab]);
+  reactExports.useLayoutEffect(() => {
+    if (!visible) return;
+    const api = apiRef.current;
+    const container = containerRef.current;
+    if (!api || !container) return;
+    const rect = container.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      api.layout(Math.round(rect.width), Math.round(rect.height), true);
+      return;
+    }
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      if (width <= 0 || height <= 0) return;
+      ro.disconnect();
+      api.layout(Math.round(width), Math.round(height), true);
+    });
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [visible]);
+  reactExports.useEffect(() => {
+    if (!visible) return;
+    const id = requestAnimationFrame(() => {
+      const panel = apiRef.current?.activePanel;
+      if (!panel) return;
+      panel.view.content.element.querySelector("[data-band-address-input]")?.focus();
+    });
+    return () => cancelAnimationFrame(id);
+  }, [visible]);
+  reactExports.useEffect(() => {
+    if (!isDesktop) return;
+    let unlisten;
+    void (async () => {
+      unlisten = await listen(
+        "browser-new-tab-shortcut",
+        (event) => {
+          const api = apiRef.current;
+          if (!api) return;
+          const sourceId = event.payload.browser_id;
+          if (!sourceId || !api.getPanel(sourceId)) return;
+          void handleAddTab().then(() => {
+            requestAnimationFrame(() => {
+              const panel = apiRef.current?.activePanel;
+              panel?.view.content.element.querySelector("[data-band-address-input]")?.focus();
+            });
+          });
+        }
+      );
+    })();
+    return () => unlisten?.();
+  }, [handleAddTab]);
+  reactExports.useEffect(() => {
+    if (!isDesktop) return;
+    let unlisten;
+    let cancelled = false;
+    void (async () => {
+      const fn = await listen("browser-open-window", (event) => {
+        const api = apiRef.current;
+        if (!api) return;
+        const sourceId = event.payload.browser_id;
+        const sourcePanel = sourceId ? api.getPanel(sourceId) : void 0;
+        if (!sourcePanel) return;
+        const groupId = sourcePanel.group?.id;
+        const url = event.payload.url;
+        if (!url) return;
+        void handleAddTab(groupId, { initialUrl: url }).then(() => {
+          requestAnimationFrame(() => {
+            const panel = apiRef.current?.activePanel;
+            panel?.view.content.element.querySelector("[data-band-address-input]")?.focus();
+          });
+        }).catch((err) => {
+          console.error("[DockviewBrowserContainer] browser-open-window add-tab failed:", err);
+        });
+      });
+      if (cancelled) fn();
+      else unlisten = fn;
+    })();
+    return () => {
+      cancelled = true;
+      unlisten?.();
+    };
+  }, [handleAddTab]);
+  reactExports.useEffect(() => {
+    if (!isDesktop) return;
+    const unlisteners = [];
+    let cancelled = false;
+    const refocusAddressBar = () => {
+      const panel = apiRef.current?.activePanel;
+      panel?.view.content.element.querySelector("[data-band-address-input]")?.focus();
+    };
+    void (async () => {
+      const fns = await Promise.all([
+        listen("browser-split-shortcut", (event) => {
+          const api = apiRef.current;
+          if (!api) return;
+          const sourcePanel = api.getPanel(event.payload.browser_id);
+          if (!sourcePanel?.group) return;
+          void handleSplit(sourcePanel.group.id, event.payload.direction);
+        }),
+        listen("browser-close-shortcut", (event) => {
+          const api = apiRef.current;
+          if (!api) return;
+          const sourceId = event.payload.browser_id;
+          if (!api.getPanel(sourceId)) return;
+          closeTab(sourceId);
+        }),
+        listen("browser-cycle-shortcut", (event) => {
+          const api = apiRef.current;
+          if (!api) return;
+          const sourcePanel = api.getPanel(event.payload.browser_id);
+          if (!sourcePanel) return;
+          sourcePanel.api.setActive();
+          const refocus = () => requestAnimationFrame(refocusAddressBar);
+          if (event.payload.target === "tabs") {
+            cycleTabsInActiveGroup(apiRef.current, event.payload.direction, refocus);
+          } else {
+            cycleGridGroups(apiRef.current, event.payload.direction, refocus);
+          }
+        })
+      ]);
+      if (cancelled) {
+        for (const fn of fns) fn();
+      } else {
+        unlisteners.push(...fns);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      for (const unlisten of unlisteners) unlisten();
+    };
+  }, [handleSplit, closeTab]);
+  reactExports.useEffect(() => {
+    const handler = () => {
+      const root = containerRef.current;
+      if (!root || root.offsetParent === null) return;
+      const inputs = root.querySelectorAll("[data-band-address-input]");
+      for (const input of inputs) {
+        if (input.offsetParent !== null) {
+          input.focus({ preventScroll: true });
+          return;
+        }
+      }
+    };
+    window.addEventListener("band:focus-browser", handler);
+    return () => window.removeEventListener("band:focus-browser", handler);
+  }, []);
+  reactExports.useEffect(() => {
+    return adapter.subscribeStatusEvents((event) => {
+      if (event.workspaceId !== workspaceId) return;
+      const api = apiRef.current;
+      if (!api) return;
+      if (event.kind === "browser-created" && typeof event.browserId === "string") {
+        if (api.getPanel(event.browserId)) return;
+        api.addPanel({
+          id: event.browserId,
+          component: "browserTab",
+          tabComponent: "browserTab",
+          title: "New Tab",
+          params: { workspaceId, browserId: event.browserId }
+        });
+      } else if (event.kind === "browser-removed" && typeof event.browserId === "string") {
+        const panel = api.getPanel(event.browserId);
+        if (panel) {
+          api.removePanel(panel);
+          if (api.panels.length === 0) {
+            createDefaultPanel(api, workspaceId);
+          }
+        }
+      }
+    });
+  }, [adapter, workspaceId]);
+  addTabRef.current = { onAdd: handleAddTab, onSplit: handleSplit };
+  closeTabRef.current = closeTab;
+  const initialLayoutRef = reactExports.useRef(null);
+  initialLayoutRef.current = initialData?.layout ?? null;
+  const initialBrowserIdsRef = reactExports.useRef(null);
+  initialBrowserIdsRef.current = initialData?.browserIds ?? null;
+  const initialUrlsRef = reactExports.useRef(null);
+  initialUrlsRef.current = initialData?.urls ?? null;
+  const visibleRef = reactExports.useRef(visible);
+  visibleRef.current = visible;
+  const onReady = reactExports.useCallback(
+    (event) => {
+      apiRef.current = event.api;
+      const savedLayout = initialLayoutRef.current;
+      const knownBrowserIds = initialBrowserIdsRef.current;
+      const knownUrls = initialUrlsRef.current;
+      if (savedLayout && isDockviewLayout(savedLayout)) {
+        isRestoringRef.current = true;
+        const layoutToRestore = injectInitialUrls(savedLayout, knownUrls);
+        try {
+          event.api.fromJSON(layoutToRestore);
+        } catch (err) {
+          console.error("[DockviewBrowserContainer] fromJSON failed, creating default:", err);
+          createDefaultPanel(event.api, workspaceId);
+        }
+        let dropped = 0;
+        if (knownBrowserIds) {
+          const orphans = event.api.panels.filter((p) => !knownBrowserIds.has(p.id));
+          for (const orphan of orphans) {
+            event.api.removePanel(orphan);
+            dropped++;
+          }
+          if (event.api.panels.length === 0) {
+            createDefaultPanel(event.api, workspaceId);
+            dropped++;
+          }
+        }
+        setTimeout(() => {
+          isRestoringRef.current = false;
+        }, 0);
+        if (dropped > 0) {
+          persistToServer(workspaceId, event.api.toJSON(), {
+            queryClient: queryClientRef.current
+          });
+        }
+      } else {
+        createDefaultPanel(event.api, workspaceId);
+        persistToServer(workspaceId, event.api.toJSON(), { queryClient: queryClientRef.current });
+      }
+      const persist = () => schedulePersist();
+      event.api.onDidLayoutChange(persist);
+      event.api.onDidAddPanel(persist);
+      event.api.onDidRemovePanel(persist);
+      event.api.onDidActivePanelChange(persist);
+      event.api.onDidAddGroup(persist);
+      event.api.onDidRemoveGroup(persist);
+      if (visibleRef.current && containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+          event.api.layout(Math.round(rect.width), Math.round(rect.height), true);
+        }
+      }
+    },
+    [workspaceId, schedulePersist]
+  );
+  const visibilityValue = reactExports.useMemo(
+    () => ({ visible: visible && wsActive !== false, wsActive: wsActive !== false }),
+    [visible, wsActive]
+  );
+  if (!initialData) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full w-full items-center justify-center" });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: containerRef, className: "flex h-full w-full flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrowserVisibilityContext.Provider, { value: visibilityValue, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DockviewReact,
+    {
+      theme: browserTabTheme,
+      className: "h-full",
+      components: browserPanelComponents,
+      tabComponents: browserTabComponents,
+      defaultTabComponent: BrowserTab,
+      onReady,
+      rightHeaderActionsComponent: RightHeaderActions
+    }
+  ) }) });
+}
+function createDefaultPanel(api, workspaceId) {
+  const browserId = newBrowserId();
+  trpc.browsers.create.mutate({ workspaceId, id: browserId }).catch((err) => {
+    console.error("[DockviewBrowserContainer] error creating default browser:", err);
+  });
+  api.addPanel({
+    id: browserId,
+    component: "browserTab",
+    tabComponent: "browserTab",
+    title: "Browser",
+    params: {
+      workspaceId,
+      browserId
+    }
+  });
+}
+export {
+  DockviewBrowserContainer,
+  markBrowserFresh,
+  newBrowserId
+};