@sqlite-sync/devtools 0.2.0

package/dist/index.js

@@ -0,0 +1,1939 @@
+// src/devtools.tsx
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+
+// src/devtools-registry.ts
+var devtoolsRegistrySymbol = Symbol.for("@sqlite-sync/devtools");
+function createSQLiteSyncDevtoolsRegistry() {
+  const instances = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  let snapshot = {
+    instances: []
+  };
+  const notify = () => {
+    for (const listener of listeners) {
+      listener();
+    }
+  };
+  const updateSnapshot = () => {
+    snapshot = {
+      instances: Array.from(instances.values())
+    };
+    notify();
+  };
+  return {
+    version: 1,
+    instances,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot() {
+      return snapshot;
+    },
+    register(instance) {
+      instances.set(instance.instanceId, instance);
+      updateSnapshot();
+      let isUnregistered = false;
+      return () => {
+        if (isUnregistered) return;
+        isUnregistered = true;
+        if (!instances.delete(instance.instanceId)) return;
+        updateSnapshot();
+      };
+    }
+  };
+}
+function getOrCreateSQLiteSyncDevtoolsRegistry() {
+  const registryGlobal = globalThis;
+  registryGlobal[devtoolsRegistrySymbol] ??= createSQLiteSyncDevtoolsRegistry();
+  return registryGlobal[devtoolsRegistrySymbol];
+}
+
+// src/devtools.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SQLiteSyncDevtools({ className }) {
+  const registry = getOrCreateSQLiteSyncDevtoolsRegistry();
+  const snapshot = useSyncExternalStore(registry.subscribe, registry.getSnapshot, getEmptySnapshot);
+  const instances = snapshot.instances;
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("overview");
+  const [selectedInstanceId, setSelectedInstanceId] = useState("");
+  const [queryTarget, setQueryTarget] = useState("memory");
+  const [query, setQuery] = useState("");
+  const [queryState, setQueryState] = useState({
+    status: "idle"
+  });
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    if (instances.length === 0) {
+      setSelectedInstanceId("");
+      return;
+    }
+    if (instances.some((instance) => instance.instanceId === selectedInstanceId)) {
+      return;
+    }
+    setSelectedInstanceId(instances[0]?.instanceId ?? "");
+  }, [instances, selectedInstanceId]);
+  const dbIdCounts = useMemo(() => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const instance of instances) {
+      counts.set(instance.dbId, (counts.get(instance.dbId) ?? 0) + 1);
+    }
+    return counts;
+  }, [instances]);
+  const selectedInstance = useMemo(() => {
+    return instances.find((instance) => instance.instanceId === selectedInstanceId) ?? null;
+  }, [instances, selectedInstanceId]);
+  const canRunQuery = selectedInstance !== null && query.trim().length > 0 && queryState.status !== "running";
+  const runQuery = async () => {
+    if (!selectedInstance) return;
+    let normalizedQuery = query.trim();
+    try {
+      normalizedQuery = normalizeSingleStatement(query);
+      const statementKind = getStatementKind(normalizedQuery);
+      if (queryTarget === "worker") {
+        if (!isWorkerReadOnlyStatement(statementKind)) {
+          throw new Error("Worker DB devtools only allows read-only SQL: SELECT, PRAGMA.");
+        }
+      } else {
+        const touchedTables = selectedInstance.instance._internal.getMemoryQueryTables(normalizedQuery);
+        const writtenTables = touchedTables.filter((table) => table.isWrite).map((table) => table.name);
+        const allowedTables = new Set(selectedInstance.instance._internal.crdtTableNames);
+        const invalidTables = writtenTables.filter((table) => !allowedTables.has(table));
+        if (invalidTables.length > 0) {
+          throw new Error(
+            `Memory DB writes are only allowed for CRDT tables. Rejected tables: ${invalidTables.join(", ")}`
+          );
+        }
+      }
+      setQueryState({ status: "running" });
+      const startedAt = performance.now();
+      const result = queryTarget === "memory" ? selectedInstance.instance.db.execute(normalizedQuery) : await selectedInstance.instance._internal.executeAsync({
+        sql: normalizedQuery,
+        parameters: []
+      });
+      setQueryState({
+        status: "success",
+        output: {
+          target: queryTarget,
+          sql: normalizedQuery,
+          rowCount: result.rows.length,
+          durationMs: Number((performance.now() - startedAt).toFixed(2)),
+          rows: result.rows
+        }
+      });
+    } catch (error) {
+      setQueryState({
+        status: "error",
+        error: {
+          target: queryTarget,
+          sql: normalizedQuery,
+          message: error instanceof Error ? error.message : String(error)
+        }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: floatingRootStyles, children: /* @__PURE__ */ jsxs("button", { type: "button", style: triggerButtonStyles, onClick: () => setIsOpen(true), title: "SQLite Sync Devtools", children: [
+      /* @__PURE__ */ jsx("span", { style: triggerIconStyles, children: "\u25C8" }),
+      /* @__PURE__ */ jsx("span", { style: triggerCountStyles, children: instances.length })
+    ] }) }),
+    isOpen ? /* @__PURE__ */ jsx("div", { style: overlayStyles, onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "SQLite Sync devtools",
+        style: dialogStyles,
+        onClick: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+            /* @__PURE__ */ jsxs("div", { style: headerLeftStyles, children: [
+              /* @__PURE__ */ jsx("span", { style: headerLogoStyles, children: "\u25C8" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { style: eyebrowStyles, children: "sqlite-sync" }),
+                /* @__PURE__ */ jsx("h2", { style: titleStyles, children: "Devtools" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: headerRightStyles, children: [
+              instances.length > 0 && /* @__PURE__ */ jsxs("label", { style: instancePickerLabelStyles, children: [
+                /* @__PURE__ */ jsx("span", { style: instancePickerTextStyles, children: "DB" }),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    value: selectedInstanceId,
+                    onChange: (event) => setSelectedInstanceId(event.target.value),
+                    style: instancePickerSelectStyles,
+                    children: instances.map((instance) => /* @__PURE__ */ jsx("option", { value: instance.instanceId, children: formatInstanceLabel(instance.dbId, instance.instanceId, dbIdCounts.get(instance.dbId) ?? 0) }, instance.instanceId))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("span", { style: instanceCountBadgeStyles, children: [
+                instances.length,
+                " instance",
+                instances.length !== 1 ? "s" : ""
+              ] }),
+              /* @__PURE__ */ jsx("button", { type: "button", style: closeButtonStyles, onClick: () => setIsOpen(false), "aria-label": "Close", children: "\u2715" })
+            ] })
+          ] }),
+          instances.length === 0 ? /* @__PURE__ */ jsxs("div", { style: emptyStateStyles, children: [
+            /* @__PURE__ */ jsx("div", { style: emptyStateIconStyles, children: "\u25C8" }),
+            /* @__PURE__ */ jsx("p", { style: emptyStateTextStyles, children: "No SQLite Sync database instances registered." }),
+            /* @__PURE__ */ jsxs("p", { style: emptyStateSubtextStyles, children: [
+              "Call ",
+              /* @__PURE__ */ jsx("code", { style: inlineCodeStyles, children: "registerDevtools(db)" }),
+              " in your app to get started."
+            ] })
+          ] }) : /* @__PURE__ */ jsxs("div", { style: contentLayoutStyles, children: [
+            /* @__PURE__ */ jsxs("aside", { style: sidebarStyles, children: [
+              /* @__PURE__ */ jsxs("nav", { style: navStyles, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    style: getTabButtonStyles(activeTab === "overview"),
+                    onClick: () => setActiveTab("overview"),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: navIconStyles, children: "\u25A6" }),
+                      "Overview"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    style: getTabButtonStyles(activeTab === "schema"),
+                    onClick: () => setActiveTab("schema"),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: navIconStyles, children: "\u2B21" }),
+                      "Schema"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    style: getTabButtonStyles(activeTab === "event-log"),
+                    onClick: () => setActiveTab("event-log"),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: navIconStyles, children: "\u2261" }),
+                      "Event Log"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    style: getTabButtonStyles(activeTab === "query-runner"),
+                    onClick: () => setActiveTab("query-runner"),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: navIconStyles, children: "\u25B6" }),
+                      "Query Runner"
+                    ]
+                  }
+                )
+              ] }),
+              selectedInstance && /* @__PURE__ */ jsxs("div", { style: sidebarInfoStyles, children: [
+                /* @__PURE__ */ jsx("div", { style: sidebarInfoLabelStyles, children: "Active instance" }),
+                /* @__PURE__ */ jsx("div", { style: sidebarInfoValueStyles, children: formatInstanceLabel(
+                  selectedInstance.dbId,
+                  selectedInstance.instanceId,
+                  dbIdCounts.get(selectedInstance.dbId) ?? 0
+                ) }),
+                /* @__PURE__ */ jsxs("div", { style: sidebarInfoSubStyles, children: [
+                  "id: ",
+                  selectedInstance.instanceId.slice(0, 12),
+                  "\u2026"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: mainPaneStyles, children: activeTab === "overview" ? /* @__PURE__ */ jsx(OverviewTab, { selectedInstance, dbIdCounts }) : activeTab === "schema" ? /* @__PURE__ */ jsx(SchemaTab, { selectedInstance }) : activeTab === "event-log" ? /* @__PURE__ */ jsx(EventLogTab, { selectedInstance }) : /* @__PURE__ */ jsx(
+              QueryRunnerTab,
+              {
+                selectedInstance,
+                queryTarget,
+                setQueryTarget,
+                query,
+                setQuery,
+                queryState,
+                canRunQuery,
+                runQuery
+              }
+            ) })
+          ] })
+        ]
+      }
+    ) }) : null
+  ] });
+}
+var EVENT_HLC_ACCUMULATOR_KV_KEY = "crdt.consistency.event_hlc_sum.v2";
+var EVENT_HLC_ACCUMULATOR_QUERY = `SELECT value FROM "worker"."kv" WHERE key = '${EVENT_HLC_ACCUMULATOR_KV_KEY}'`;
+function OverviewTab({
+  selectedInstance,
+  dbIdCounts
+}) {
+  const [eventHlcAccumulator, setEventHlcAccumulator] = useState(null);
+  const [accumulatorError, setAccumulatorError] = useState(null);
+  const [isAccumulatorLoading, setIsAccumulatorLoading] = useState(false);
+  const refreshEventHlcAccumulator = useCallback(async () => {
+    if (!selectedInstance) return;
+    setIsAccumulatorLoading(true);
+    setAccumulatorError(null);
+    try {
+      const result = await selectedInstance.instance._internal.executeAsync({
+        sql: EVENT_HLC_ACCUMULATOR_QUERY,
+        parameters: []
+      });
+      const row = result.rows[0];
+      setEventHlcAccumulator(row?.value ?? "");
+    } catch (error) {
+      setAccumulatorError(error instanceof Error ? error.message : String(error));
+      setEventHlcAccumulator(null);
+    } finally {
+      setIsAccumulatorLoading(false);
+    }
+  }, [selectedInstance]);
+  useEffect(() => {
+    setEventHlcAccumulator(null);
+    setAccumulatorError(null);
+    void refreshEventHlcAccumulator();
+  }, [refreshEventHlcAccumulator]);
+  if (!selectedInstance) return null;
+  const label = formatInstanceLabel(
+    selectedInstance.dbId,
+    selectedInstance.instanceId,
+    dbIdCounts.get(selectedInstance.dbId) ?? 0
+  );
+  const crdtTables = selectedInstance.instance._internal.crdtTableNames;
+  return /* @__PURE__ */ jsxs("div", { style: overviewLayoutStyles, children: [
+    /* @__PURE__ */ jsxs("div", { style: overviewCardsRowStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: overviewCardStyles, children: [
+        /* @__PURE__ */ jsx("div", { style: overviewCardLabelStyles, children: "Database" }),
+        /* @__PURE__ */ jsx("div", { style: overviewCardValueStyles, children: label })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: overviewCardStyles, children: [
+        /* @__PURE__ */ jsx("div", { style: overviewCardLabelStyles, children: "Instance ID" }),
+        /* @__PURE__ */ jsxs("div", { style: { ...overviewCardValueStyles, fontFamily: "ui-monospace, monospace", fontSize: "0.78rem" }, children: [
+          selectedInstance.instanceId.slice(0, 16),
+          "\u2026"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: overviewCardStyles, children: [
+        /* @__PURE__ */ jsx("div", { style: overviewCardLabelStyles, children: "CRDT Tables" }),
+        /* @__PURE__ */ jsx("div", { style: overviewCardValueStyles, children: crdtTables.length })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: overviewSectionStyles, children: [
+      /* @__PURE__ */ jsx("div", { style: overviewSectionTitleStyles, children: "CRDT Tables" }),
+      crdtTables.length === 0 ? /* @__PURE__ */ jsx("div", { style: overviewEmptyStyles, children: "No CRDT tables registered." }) : /* @__PURE__ */ jsx("div", { style: crdtTableListStyles, children: [...crdtTables].map((name) => /* @__PURE__ */ jsxs("div", { style: crdtTableRowStyles, children: [
+        /* @__PURE__ */ jsx("span", { style: crdtTableIconStyles, children: "\u25A6" }),
+        /* @__PURE__ */ jsx("span", { style: crdtTableNameStyles, children: name })
+      ] }, name)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: overviewSectionStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: overviewSectionHeaderStyles, children: [
+        /* @__PURE__ */ jsx("div", { style: overviewSectionTitleStyles, children: "Event HLC accumulator" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            style: overviewRefreshButtonStyles,
+            disabled: isAccumulatorLoading,
+            onClick: () => void refreshEventHlcAccumulator(),
+            children: [
+              isAccumulatorLoading ? "\u2026" : "\u21BB",
+              " Refresh"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: overviewAccumulatorValueStyles, children: accumulatorError ? /* @__PURE__ */ jsx("span", { style: overviewAccumulatorErrorStyles, children: accumulatorError }) : isAccumulatorLoading && eventHlcAccumulator === null ? "Loading\u2026" : eventHlcAccumulator === "" ? /* @__PURE__ */ jsx("span", { style: overviewAccumulatorEmptyStyles, children: "(empty)" }) : eventHlcAccumulator })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: overviewSectionStyles, children: [
+      /* @__PURE__ */ jsx("div", { style: overviewSectionTitleStyles, children: "Write Permissions" }),
+      /* @__PURE__ */ jsxs("div", { style: permissionRowStyles, children: [
+        /* @__PURE__ */ jsx("span", { style: permissionIconStyles, children: "\u2713" }),
+        /* @__PURE__ */ jsx("span", { style: permissionTextStyles, children: "Memory DB \u2014 CRDT tables only" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: permissionRowStyles, children: [
+        /* @__PURE__ */ jsx("span", { style: { ...permissionIconStyles, color: "#f59e0b" }, children: "\u2298" }),
+        /* @__PURE__ */ jsx("span", { style: permissionTextStyles, children: "Worker DB \u2014 read-only (SELECT, PRAGMA, EXPLAIN)" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ResetSection, { dbId: selectedInstance.dbId, instance: selectedInstance.instance })
+  ] });
+}
+function ResetSection({ dbId, instance }) {
+  const [confirming, setConfirming] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+  const handleReset = () => {
+    setIsResetting(true);
+    void instance.requestReload({ clean: true });
+  };
+  return /* @__PURE__ */ jsxs("div", { style: dangerZoneStyles, children: [
+    /* @__PURE__ */ jsx("div", { style: dangerZoneTitleStyles, children: "Danger Zone" }),
+    /* @__PURE__ */ jsxs("div", { style: dangerZoneRowStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: dangerZoneDescStyles, children: [
+        "Requests a clean reload, so ",
+        /* @__PURE__ */ jsx("code", { style: inlineCodeStyles, children: dbId }),
+        " is wiped on next load via",
+        " ",
+        /* @__PURE__ */ jsx("code", { style: inlineCodeStyles, children: "clearOnInit" }),
+        ", then reloads all tabs."
+      ] }),
+      confirming ? /* @__PURE__ */ jsxs("div", { style: dangerZoneActionsStyles, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            style: resetCancelButtonStyles,
+            disabled: isResetting,
+            onClick: () => setConfirming(false),
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", style: resetConfirmButtonStyles, disabled: isResetting, onClick: handleReset, children: isResetting ? "Resetting\u2026" : "Confirm reset" })
+      ] }) : /* @__PURE__ */ jsx("button", { type: "button", style: resetButtonStyles, onClick: () => setConfirming(true), children: "Reset DB" })
+    ] })
+  ] });
+}
+function SchemaTab({
+  selectedInstance
+}) {
+  if (!selectedInstance) return null;
+  const { crdtTablesConfig, schemaVersion, migrationVersions } = selectedInstance.instance._internal;
+  const latestVersion = migrationVersions.at(-1) ?? 0;
+  return /* @__PURE__ */ jsxs("div", { style: schemaLayoutStyles, children: [
+    /* @__PURE__ */ jsxs("div", { style: schemaSectionStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: schemaSectionHeaderStyles, children: [
+        /* @__PURE__ */ jsx("div", { style: schemaSectionTitleStyles, children: "CRDT Tables" }),
+        /* @__PURE__ */ jsx("span", { style: schemaBadgeStyles, children: crdtTablesConfig.length })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: schemaTableGridStyles, children: [
+        /* @__PURE__ */ jsxs("div", { style: schemaTableHeaderRowStyles, children: [
+          /* @__PURE__ */ jsx("div", { style: schemaColHeaderStyles, children: "Base Table" }),
+          /* @__PURE__ */ jsx("div", { style: schemaColHeaderStyles, children: "CRDT Table" }),
+          /* @__PURE__ */ jsx("div", { style: { ...schemaColHeaderStyles, textAlign: "center" }, children: "Status" })
+        ] }),
+        crdtTablesConfig.map((table) => /* @__PURE__ */ jsxs("div", { style: schemaTableRowStyles, children: [
+          /* @__PURE__ */ jsxs("div", { style: schemaTableNameStyles, children: [
+            /* @__PURE__ */ jsx("span", { style: schemaTableIconStyles, children: "\u25A6" }),
+            table.baseTableName
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: schemaCrdtNameStyles, children: table.crdtTableName }),
+          /* @__PURE__ */ jsx("div", { style: schemaStatusCellStyles, children: /* @__PURE__ */ jsx("span", { style: schemaActiveTagStyles, children: "active" }) })
+        ] }, table.crdtTableName))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: schemaSectionStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: schemaSectionHeaderStyles, children: [
+        /* @__PURE__ */ jsx("div", { style: schemaSectionTitleStyles, children: "Migrations" }),
+        /* @__PURE__ */ jsxs("div", { style: schemaMigrationsMetaStyles, children: [
+          /* @__PURE__ */ jsxs("span", { style: schemaBadgeStyles, children: [
+            migrationVersions.length,
+            " total"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: schemaVersionChipStyles, children: [
+            "current: v",
+            schemaVersion,
+            " / latest: v",
+            latestVersion
+          ] })
+        ] })
+      ] }),
+      migrationVersions.length === 0 ? /* @__PURE__ */ jsx("div", { style: schemaEmptyStyles, children: "No migrations defined." }) : /* @__PURE__ */ jsx("div", { style: migrationListStyles, children: migrationVersions.map((version) => {
+        const applied = version <= schemaVersion;
+        const isCurrent = version === schemaVersion;
+        return /* @__PURE__ */ jsxs("div", { style: getMigrationRowStyles(applied), children: [
+          /* @__PURE__ */ jsxs("div", { style: migrationVersionStyles, children: [
+            "v",
+            version
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: migrationBarTrackStyles, children: /* @__PURE__ */ jsx("div", { style: getMigrationBarFillStyles(applied) }) }),
+          /* @__PURE__ */ jsx("div", { style: getMigrationTagStyles(applied, isCurrent), children: isCurrent ? "current" : applied ? "applied" : "pending" })
+        ] }, version);
+      }) })
+    ] })
+  ] });
+}
+var PAGE_SIZE = 50;
+function buildEventLogQuery(filters, afterSyncId) {
+  const conditions = [];
+  if (filters.dataset) conditions.push(`dataset = '${filters.dataset}'`);
+  if (filters.origin) conditions.push(`origin = '${filters.origin}'`);
+  if (filters.status) conditions.push(`status = '${filters.status}'`);
+  if (afterSyncId !== null) conditions.push(`sync_id < ${afterSyncId}`);
+  const where = conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
+  return `SELECT * FROM "worker"."crdt_events" ${where} ORDER BY sync_id DESC LIMIT ${PAGE_SIZE + 1}`;
+}
+function EventLogTab({
+  selectedInstance
+}) {
+  const baseTableNames = useMemo(
+    () => selectedInstance?.instance._internal.crdtTablesConfig.map((table) => table.baseTableName) ?? [],
+    [selectedInstance]
+  );
+  const [filters, setFilters] = useState({ dataset: "", origin: "", status: "" });
+  const [events, setEvents] = useState([]);
+  const [hasMore, setHasMore] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [expandedId, setExpandedId] = useState(null);
+  const afterSyncIdRef = useRef(null);
+  const isLoadingRef = useRef(false);
+  const executeQuery = useCallback(
+    async (sql) => {
+      if (!selectedInstance) return [];
+      const result = await selectedInstance.instance._internal.executeAsync({ sql, parameters: [] });
+      return result.rows;
+    },
+    [selectedInstance]
+  );
+  const load = useCallback(
+    async (reset, currentFilters) => {
+      if (!selectedInstance || isLoadingRef.current) return;
+      isLoadingRef.current = true;
+      setIsLoading(true);
+      try {
+        const afterSyncId = reset ? null : afterSyncIdRef.current;
+        const sql = buildEventLogQuery(currentFilters, afterSyncId);
+        const rows = await executeQuery(sql);
+        const page = rows.slice(0, PAGE_SIZE);
+        setHasMore(rows.length > PAGE_SIZE);
+        if (reset) {
+          setEvents(page);
+        } else {
+          setEvents((prev) => [...prev, ...page]);
+        }
+        afterSyncIdRef.current = page.at(-1)?.sync_id ?? null;
+      } finally {
+        isLoadingRef.current = false;
+        setIsLoading(false);
+      }
+    },
+    [selectedInstance, executeQuery]
+  );
+  useEffect(() => {
+    afterSyncIdRef.current = null;
+    setEvents([]);
+    void load(true, filters);
+  }, [filters, load]);
+  const applyFilters = (next) => {
+    setFilters(next);
+  };
+  if (!selectedInstance) return null;
+  return /* @__PURE__ */ jsxs("div", { style: eventLogLayoutStyles, children: [
+    /* @__PURE__ */ jsxs("div", { style: eventLogToolbarStyles, children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: filters.dataset,
+          onChange: (e) => applyFilters({ ...filters, dataset: e.target.value }),
+          style: eventLogFilterSelectStyles,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All datasets" }),
+            baseTableNames.map((name) => /* @__PURE__ */ jsx("option", { value: name, children: name }, name))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: filters.origin,
+          onChange: (e) => applyFilters({ ...filters, origin: e.target.value }),
+          style: eventLogFilterSelectStyles,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All origins" }),
+            /* @__PURE__ */ jsx("option", { value: "own", children: "own" }),
+            /* @__PURE__ */ jsx("option", { value: "remote", children: "remote" }),
+            /* @__PURE__ */ jsx("option", { value: "local", children: "local" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: filters.status,
+          onChange: (e) => applyFilters({ ...filters, status: e.target.value }),
+          style: eventLogFilterSelectStyles,
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: "All statuses" }),
+            /* @__PURE__ */ jsx("option", { value: "applied", children: "applied" }),
+            /* @__PURE__ */ jsx("option", { value: "pending", children: "pending" }),
+            /* @__PURE__ */ jsx("option", { value: "failed", children: "failed" }),
+            /* @__PURE__ */ jsx("option", { value: "deduped", children: "deduped" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          style: eventLogRefreshButtonStyles,
+          disabled: isLoading,
+          onClick: () => void load(true, filters),
+          children: [
+            isLoading ? "\u2026" : "\u21BB",
+            " Refresh"
+          ]
+        }
+      ),
+      events.length > 0 && /* @__PURE__ */ jsxs("span", { style: eventLogCountStyles, children: [
+        events.length,
+        hasMore ? "+" : "",
+        " events"
+      ] })
+    ] }),
+    events.length === 0 && !isLoading ? /* @__PURE__ */ jsx("div", { style: eventLogEmptyStyles, children: "No events match the current filters." }) : /* @__PURE__ */ jsxs("div", { style: eventLogListStyles, children: [
+      events.map((event) => {
+        const isExpanded = expandedId === event.sync_id;
+        return /* @__PURE__ */ jsxs("div", { style: getEventRowStyles(isExpanded), children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              style: eventRowHeaderStyles,
+              onClick: () => setExpandedId(isExpanded ? null : event.sync_id),
+              children: [
+                /* @__PURE__ */ jsxs("span", { style: eventSyncIdStyles, children: [
+                  "#",
+                  event.sync_id
+                ] }),
+                /* @__PURE__ */ jsx(EventTypeBadge, { type: event.type }),
+                /* @__PURE__ */ jsx(EventOriginBadge, { origin: event.origin }),
+                /* @__PURE__ */ jsx(EventStatusBadge, { status: event.status }),
+                /* @__PURE__ */ jsx("span", { style: eventDatasetStyles, children: event.dataset }),
+                /* @__PURE__ */ jsx("span", { style: eventItemIdStyles, children: event.item_id }),
+                /* @__PURE__ */ jsx("span", { style: eventTimestampStyles, children: formatHlcTimestamp(event.timestamp) }),
+                /* @__PURE__ */ jsx("span", { style: eventChevronStyles, children: isExpanded ? "\u25B2" : "\u25BC" })
+              ]
+            }
+          ),
+          isExpanded && /* @__PURE__ */ jsxs("div", { style: eventPayloadStyles, children: [
+            /* @__PURE__ */ jsxs("div", { style: eventPayloadMetaStyles, children: [
+              /* @__PURE__ */ jsxs("span", { style: eventMetaItemStyles, children: [
+                "schema v",
+                event.schema_version
+              ] }),
+              /* @__PURE__ */ jsxs("span", { style: eventMetaItemStyles, children: [
+                "node: ",
+                event.source_node_id || "\u2014"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { style: eventMetaItemStyles, children: [
+                "ts: ",
+                event.timestamp
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("pre", { style: eventPayloadPreStyles, children: formatPayload(event.payload) })
+          ] })
+        ] }, event.sync_id);
+      }),
+      hasMore && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          style: loadMoreButtonStyles,
+          disabled: isLoading,
+          onClick: () => void load(false, filters),
+          children: isLoading ? "Loading\u2026" : `Load ${PAGE_SIZE} more`
+        }
+      )
+    ] })
+  ] });
+}
+function EventTypeBadge({ type }) {
+  const isCreate = type === "item-created";
+  return /* @__PURE__ */ jsx("span", { style: isCreate ? eventTypeCreateStyles : eventTypeUpdateStyles, children: isCreate ? "create" : "update" });
+}
+function EventOriginBadge({ origin }) {
+  const style = origin === "own" ? eventOriginOwnStyles : origin === "remote" ? eventOriginRemoteStyles : eventOriginLocalStyles;
+  return /* @__PURE__ */ jsx("span", { style, children: origin });
+}
+function EventStatusBadge({ status }) {
+  const style = status === "applied" ? eventStatusAppliedStyles : status === "pending" ? eventStatusPendingStyles : status === "failed" ? eventStatusFailedStyles : eventStatusSkippedStyles;
+  return /* @__PURE__ */ jsx("span", { style, children: status });
+}
+function formatHlcTimestamp(ts) {
+  const ms = Number(ts.split("-")[0]);
+  if (!Number.isNaN(ms) && ms > 1e12) {
+    return new Date(ms).toLocaleTimeString();
+  }
+  return ts.slice(0, 19).replace("T", " ");
+}
+function formatPayload(raw) {
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2);
+  } catch {
+    return raw;
+  }
+}
+function QueryRunnerTab({
+  selectedInstance,
+  queryTarget,
+  setQueryTarget,
+  query,
+  setQuery,
+  queryState,
+  canRunQuery,
+  runQuery
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: queryRunnerLayoutStyles, children: [
+    /* @__PURE__ */ jsxs("div", { style: queryToolbarStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: targetToggleStyles, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            style: getTargetButtonStyles(queryTarget === "memory"),
+            onClick: () => setQueryTarget("memory"),
+            children: "Memory DB"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            style: getTargetButtonStyles(queryTarget === "worker"),
+            onClick: () => setQueryTarget("worker"),
+            children: "Worker DB"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: queryToolbarRightStyles, children: [
+        !selectedInstance && /* @__PURE__ */ jsx("span", { style: noInstanceWarningStyles, children: "No instance selected" }),
+        /* @__PURE__ */ jsx("span", { style: shortcutHintStyles, children: "\u2318\u21B5 to run" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            style: runButtonStyles(canRunQuery, queryState.status === "running"),
+            disabled: !canRunQuery,
+            onClick: () => void runQuery(),
+            children: queryState.status === "running" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: runningDotStyles }),
+              "Running\u2026"
+            ] }) : /* @__PURE__ */ jsx(Fragment, { children: "\u25B6 Run" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: editorWrapperStyles, children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        onKeyDown: (event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === "Enter" && canRunQuery) {
+            event.preventDefault();
+            void runQuery();
+          }
+        },
+        style: textareaStyles,
+        placeholder: "SELECT * FROM your_table LIMIT 100",
+        spellCheck: false
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { style: helperTextStyles, children: queryTarget === "worker" ? "Worker DB is read-only \u2014 only SELECT, PRAGMA, and EXPLAIN are allowed." : "Memory DB allows writes only to CRDT tables." }),
+    queryState.status === "error" && /* @__PURE__ */ jsxs("div", { style: errorPanelStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: resultHeaderStyles, children: [
+        /* @__PURE__ */ jsx("span", { style: errorBadgeStyles, children: "Error" }),
+        /* @__PURE__ */ jsxs("span", { style: resultMetaStyles, children: [
+          queryState.error.target,
+          " \xB7 ",
+          queryState.error.sql
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("pre", { style: errorMessageStyles, children: queryState.error.message })
+    ] }),
+    queryState.status === "success" && /* @__PURE__ */ jsxs("div", { style: resultPanelStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: resultHeaderStyles, children: [
+        /* @__PURE__ */ jsxs("span", { style: successBadgeStyles, children: [
+          queryState.output.rowCount,
+          " row",
+          queryState.output.rowCount !== 1 ? "s" : ""
+        ] }),
+        /* @__PURE__ */ jsxs("span", { style: resultMetaStyles, children: [
+          queryState.output.target,
+          " \xB7 ",
+          queryState.output.durationMs,
+          "ms"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ResultTable, { rows: queryState.output.rows })
+    ] })
+  ] });
+}
+function ResultTable({ rows }) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx("div", { style: resultEmptyStyles, children: "Query returned 0 rows." });
+  }
+  const firstRow = rows[0];
+  if (typeof firstRow !== "object" || firstRow === null) {
+    return /* @__PURE__ */ jsx("pre", { style: resultRawStyles, children: JSON.stringify(rows, null, 2) });
+  }
+  const columns = Object.keys(firstRow);
+  return /* @__PURE__ */ jsx("div", { style: tableWrapperStyles, children: /* @__PURE__ */ jsxs("table", { style: tableStyles, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { style: thRowNumStyles, children: "#" }),
+      columns.map((col) => /* @__PURE__ */ jsx("th", { style: thStyles, children: col }, col))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ jsxs("tr", { style: rowIdx % 2 === 0 ? trStyles : trAltStyles, children: [
+      /* @__PURE__ */ jsx("td", { style: tdRowNumStyles, children: rowIdx + 1 }),
+      columns.map((col) => {
+        const val = row[col];
+        return /* @__PURE__ */ jsx("td", { style: tdStyles, children: val === null ? /* @__PURE__ */ jsx("span", { style: nullValueStyles, children: "NULL" }) : typeof val === "object" ? /* @__PURE__ */ jsx("span", { style: jsonValueStyles, children: JSON.stringify(val) }) : String(val) }, col);
+      })
+    ] }, rowIdx)) })
+  ] }) });
+}
+function formatInstanceLabel(dbId, instanceId, duplicateCount) {
+  if (duplicateCount < 2) {
+    return dbId;
+  }
+  return `${dbId} (${instanceId.slice(0, 6)})`;
+}
+function normalizeSingleStatement(query) {
+  const trimmed = query.trim();
+  if (!trimmed) {
+    throw new Error("Enter a SQL statement.");
+  }
+  const withoutTrailingSemicolons = trimmed.replace(/;+\s*$/u, "");
+  if (withoutTrailingSemicolons.includes(";")) {
+    throw new Error("Devtools only supports a single SQL statement.");
+  }
+  return withoutTrailingSemicolons;
+}
+function getStatementKind(query) {
+  const match = query.trimStart().match(/^([a-z]+)/iu);
+  return match?.[1]?.toLowerCase() ?? "";
+}
+function isWorkerReadOnlyStatement(statementKind) {
+  return statementKind === "select" || statementKind === "pragma";
+}
+function getEmptySnapshot() {
+  return emptySnapshot;
+}
+var emptySnapshot = {
+  instances: []
+};
+var C = {
+  bg: "#0e1015",
+  bgPanel: "#161921",
+  bgCard: "#1c2030",
+  bgInput: "#111318",
+  border: "#2a2f3e",
+  borderLight: "#343a4f",
+  text: "#e2e8f0",
+  textMuted: "#6b7280",
+  textDim: "#9ca3af",
+  teal: "#2dd4bf",
+  tealDim: "rgba(45,212,191,0.12)",
+  tealGlow: "rgba(45,212,191,0.06)",
+  error: "#f87171",
+  errorBg: "rgba(248,113,113,0.08)",
+  errorBorder: "rgba(248,113,113,0.25)",
+  success: "#34d399",
+  successBg: "rgba(52,211,153,0.08)",
+  amber: "#fbbf24"
+};
+var floatingRootStyles = {
+  position: "fixed",
+  inset: 0,
+  pointerEvents: "none",
+  zIndex: 9998
+};
+var triggerButtonStyles = {
+  position: "absolute",
+  right: "16px",
+  bottom: "16px",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.3rem",
+  border: `1px solid ${C.border}`,
+  borderRadius: "8px",
+  padding: "0.3rem 0.45rem",
+  background: C.bgPanel,
+  color: C.text,
+  boxShadow: `0 0 0 1px ${C.border}, 0 4px 16px rgba(0,0,0,0.5)`,
+  cursor: "pointer",
+  pointerEvents: "auto"
+};
+var triggerIconStyles = {
+  color: C.teal,
+  fontSize: "0.9rem",
+  lineHeight: 1
+};
+var triggerCountStyles = {
+  minWidth: "1.1rem",
+  borderRadius: "4px",
+  padding: "0.05rem 0.25rem",
+  backgroundColor: C.tealDim,
+  color: C.teal,
+  fontSize: "0.65rem",
+  fontWeight: 700,
+  textAlign: "center",
+  fontFamily: "ui-monospace, monospace"
+};
+var overlayStyles = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 9999,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "1.5rem",
+  backgroundColor: "rgba(0,0,0,0.72)",
+  backdropFilter: "blur(8px)"
+};
+var dialogStyles = {
+  width: "min(72rem, 100%)",
+  height: "min(90vh, 860px)",
+  display: "flex",
+  flexDirection: "column",
+  border: `1px solid ${C.border}`,
+  borderRadius: "16px",
+  background: C.bg,
+  boxShadow: `0 0 0 1px ${C.border}, 0 40px 80px rgba(0,0,0,0.8), 0 0 60px rgba(45,212,191,0.04)`,
+  overflow: "hidden",
+  fontFamily: "ui-sans-serif, system-ui, sans-serif",
+  color: C.text,
+  fontSize: "0.88rem"
+};
+var headerStyles = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  gap: "1rem",
+  padding: "0.85rem 1.1rem",
+  borderBottom: `1px solid ${C.border}`,
+  background: C.bgPanel,
+  flexShrink: 0
+};
+var headerLeftStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem"
+};
+var headerLogoStyles = {
+  fontSize: "1.3rem",
+  color: C.teal,
+  lineHeight: 1
+};
+var eyebrowStyles = {
+  fontSize: "0.65rem",
+  fontWeight: 600,
+  letterSpacing: "0.1em",
+  textTransform: "uppercase",
+  color: C.textMuted,
+  fontFamily: "ui-monospace, monospace"
+};
+var titleStyles = {
+  margin: "0.05rem 0 0",
+  fontSize: "0.95rem",
+  fontWeight: 700,
+  color: C.text,
+  letterSpacing: "-0.01em"
+};
+var headerRightStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.6rem"
+};
+var instancePickerLabelStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem"
+};
+var instancePickerTextStyles = {
+  fontSize: "0.72rem",
+  fontWeight: 600,
+  color: C.textMuted,
+  textTransform: "uppercase",
+  letterSpacing: "0.06em"
+};
+var instancePickerSelectStyles = {
+  borderRadius: "7px",
+  border: `1px solid ${C.border}`,
+  padding: "0.35rem 0.6rem",
+  backgroundColor: C.bgCard,
+  color: C.text,
+  fontSize: "0.82rem",
+  fontFamily: "ui-monospace, monospace",
+  cursor: "pointer"
+};
+var instanceCountBadgeStyles = {
+  fontSize: "0.72rem",
+  fontWeight: 600,
+  color: C.teal,
+  backgroundColor: C.tealDim,
+  borderRadius: "5px",
+  padding: "0.2rem 0.5rem",
+  fontFamily: "ui-monospace, monospace"
+};
+var closeButtonStyles = {
+  border: `1px solid ${C.border}`,
+  borderRadius: "7px",
+  width: "28px",
+  height: "28px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "transparent",
+  color: C.textMuted,
+  fontSize: "0.82rem",
+  fontWeight: 600,
+  cursor: "pointer"
+};
+var emptyStateStyles = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "4rem 2rem",
+  gap: "0.75rem",
+  flex: 1
+};
+var emptyStateIconStyles = {
+  fontSize: "2.5rem",
+  color: C.textMuted,
+  opacity: 0.4
+};
+var emptyStateTextStyles = {
+  margin: 0,
+  fontSize: "0.95rem",
+  fontWeight: 600,
+  color: C.textDim
+};
+var emptyStateSubtextStyles = {
+  margin: 0,
+  fontSize: "0.82rem",
+  color: C.textMuted,
+  textAlign: "center"
+};
+var inlineCodeStyles = {
+  fontFamily: "ui-monospace, monospace",
+  backgroundColor: C.bgCard,
+  border: `1px solid ${C.border}`,
+  borderRadius: "4px",
+  padding: "0.1em 0.4em",
+  fontSize: "0.88em",
+  color: C.teal
+};
+var contentLayoutStyles = {
+  display: "grid",
+  gridTemplateColumns: "200px minmax(0, 1fr)",
+  flex: 1,
+  minHeight: 0,
+  overflow: "hidden"
+};
+var sidebarStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0",
+  padding: "0.75rem",
+  borderRight: `1px solid ${C.border}`,
+  background: C.bgPanel,
+  overflowY: "auto"
+};
+var navStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.25rem",
+  marginBottom: "1rem"
+};
+var navIconStyles = {
+  fontSize: "0.7rem",
+  opacity: 0.7
+};
+var sidebarInfoStyles = {
+  marginTop: "auto",
+  padding: "0.75rem",
+  borderRadius: "8px",
+  background: C.bgCard,
+  border: `1px solid ${C.border}`
+};
+var sidebarInfoLabelStyles = {
+  fontSize: "0.65rem",
+  fontWeight: 600,
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  color: C.textMuted,
+  marginBottom: "0.3rem"
+};
+var sidebarInfoValueStyles = {
+  fontSize: "0.88rem",
+  fontWeight: 600,
+  color: C.text,
+  wordBreak: "break-word",
+  fontFamily: "ui-monospace, monospace"
+};
+var sidebarInfoSubStyles = {
+  fontSize: "0.72rem",
+  color: C.textMuted,
+  fontFamily: "ui-monospace, monospace",
+  marginTop: "0.25rem"
+};
+var mainPaneStyles = {
+  minWidth: 0,
+  overflowY: "auto",
+  padding: "1rem"
+};
+var overviewLayoutStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.25rem"
+};
+var overviewCardsRowStyles = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(11rem, 1fr))",
+  gap: "0.75rem"
+};
+var overviewCardStyles = {
+  padding: "0.9rem 1rem",
+  borderRadius: "10px",
+  border: `1px solid ${C.border}`,
+  background: C.bgCard
+};
+var overviewCardLabelStyles = {
+  fontSize: "0.68rem",
+  fontWeight: 600,
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  color: C.textMuted,
+  marginBottom: "0.4rem"
+};
+var overviewCardValueStyles = {
+  fontSize: "1rem",
+  fontWeight: 700,
+  color: C.text,
+  wordBreak: "break-word"
+};
+var overviewSectionStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+};
+var overviewSectionTitleStyles = {
+  fontSize: "0.72rem",
+  fontWeight: 600,
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  color: C.textMuted
+};
+var overviewSectionHeaderStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "0.75rem"
+};
+var overviewRefreshButtonStyles = {
+  border: `1px solid ${C.border}`,
+  borderRadius: "7px",
+  padding: "0.35rem 0.7rem",
+  backgroundColor: "transparent",
+  color: C.textDim,
+  fontSize: "0.78rem",
+  fontFamily: "ui-monospace, monospace",
+  cursor: "pointer",
+  flexShrink: 0
+};
+var overviewAccumulatorValueStyles = {
+  padding: "0.75rem",
+  borderRadius: "8px",
+  border: `1px solid ${C.border}`,
+  background: C.bgCard,
+  fontFamily: "ui-monospace, monospace",
+  fontSize: "0.78rem",
+  color: C.text,
+  lineHeight: 1.5,
+  wordBreak: "break-all"
+};
+var overviewAccumulatorEmptyStyles = {
+  color: C.textMuted,
+  fontStyle: "italic"
+};
+var overviewAccumulatorErrorStyles = {
+  color: C.error
+};
+var overviewEmptyStyles = {
+  fontSize: "0.82rem",
+  color: C.textMuted,
+  fontStyle: "italic"
+};
+var crdtTableListStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.25rem"
+};
+var crdtTableRowStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.6rem",
+  padding: "0.5rem 0.75rem",
+  borderRadius: "7px",
+  background: C.bgCard,
+  border: `1px solid ${C.border}`
+};
+var crdtTableIconStyles = {
+  color: C.teal,
+  fontSize: "0.72rem"
+};
+var crdtTableNameStyles = {
+  fontFamily: "ui-monospace, monospace",
+  fontSize: "0.85rem",
+  color: C.text
+};
+var permissionRowStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.6rem",
+  fontSize: "0.82rem",
+  color: C.textDim
+};
+var permissionIconStyles = {
+  color: C.success,
+  fontWeight: 700,
+  fontSize: "0.85rem",
+  lineHeight: 1
+};
+var permissionTextStyles = {
+  color: C.textDim
+};
+var dangerZoneStyles = {
+  marginTop: "auto",
+  borderRadius: "10px",
+  border: `1px solid ${C.errorBorder}`,
+  padding: "0.75rem 1rem",
+  background: C.errorBg
+};
+var dangerZoneTitleStyles = {
+  fontSize: "0.65rem",
+  fontWeight: 700,
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  color: C.error,
+  marginBottom: "0.5rem"
+};
+var dangerZoneRowStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "1rem"
+};
+var dangerZoneDescStyles = {
+  fontSize: "0.75rem",
+  color: C.textMuted,
+  lineHeight: 1.5
+};
+var dangerZoneActionsStyles = {
+  display: "flex",
+  gap: "0.4rem",
+  flexShrink: 0
+};
+var resetButtonStyles = {
+  flexShrink: 0,
+  border: `1px solid ${C.errorBorder}`,
+  borderRadius: "7px",
+  padding: "0.35rem 0.75rem",
+  backgroundColor: "transparent",
+  color: C.error,
+  fontSize: "0.78rem",
+  fontWeight: 600,
+  cursor: "pointer",
+  whiteSpace: "nowrap"
+};
+var resetCancelButtonStyles = {
+  border: `1px solid ${C.border}`,
+  borderRadius: "7px",
+  padding: "0.35rem 0.65rem",
+  backgroundColor: "transparent",
+  color: C.textDim,
+  fontSize: "0.78rem",
+  fontWeight: 600,
+  cursor: "pointer",
+  whiteSpace: "nowrap"
+};
+var resetConfirmButtonStyles = {
+  border: "none",
+  borderRadius: "7px",
+  padding: "0.35rem 0.75rem",
+  backgroundColor: C.error,
+  color: "#0e1015",
+  fontSize: "0.78rem",
+  fontWeight: 700,
+  cursor: "pointer",
+  whiteSpace: "nowrap"
+};
+var queryRunnerLayoutStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem",
+  height: "100%"
+};
+var queryToolbarStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "0.75rem",
+  flexWrap: "wrap"
+};
+var targetToggleStyles = {
+  display: "flex",
+  gap: "0",
+  borderRadius: "8px",
+  border: `1px solid ${C.border}`,
+  overflow: "hidden",
+  background: C.bgCard
+};
+var queryToolbarRightStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.6rem"
+};
+var noInstanceWarningStyles = {
+  fontSize: "0.75rem",
+  color: C.amber,
+  fontWeight: 500
+};
+var shortcutHintStyles = {
+  fontSize: "0.72rem",
+  color: C.textMuted,
+  fontFamily: "ui-monospace, monospace",
+  padding: "0.2rem 0.5rem",
+  borderRadius: "5px",
+  border: `1px solid ${C.border}`,
+  background: C.bgCard
+};
+var editorWrapperStyles = {
+  borderRadius: "10px",
+  border: `1px solid ${C.border}`,
+  overflow: "hidden",
+  background: C.bgInput
+};
+var textareaStyles = {
+  width: "100%",
+  minHeight: "9rem",
+  resize: "vertical",
+  border: "none",
+  padding: "0.85rem 1rem",
+  backgroundColor: "transparent",
+  color: C.text,
+  fontSize: "0.875rem",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+  lineHeight: 1.6,
+  outline: "none",
+  boxSizing: "border-box"
+};
+var helperTextStyles = {
+  fontSize: "0.75rem",
+  lineHeight: 1.5,
+  color: C.textMuted
+};
+var resultPanelStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.6rem",
+  borderRadius: "10px",
+  border: `1px solid ${C.border}`,
+  overflow: "hidden",
+  background: C.bgPanel
+};
+var errorPanelStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.6rem",
+  padding: "0.85rem 1rem",
+  borderRadius: "10px",
+  border: `1px solid ${C.errorBorder}`,
+  background: C.errorBg
+};
+var resultHeaderStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.6rem",
+  padding: "0.6rem 0.85rem",
+  borderBottom: `1px solid ${C.border}`,
+  background: C.bgCard
+};
+var successBadgeStyles = {
+  fontSize: "0.72rem",
+  fontWeight: 700,
+  color: C.success,
+  backgroundColor: C.successBg,
+  borderRadius: "5px",
+  padding: "0.15rem 0.5rem",
+  fontFamily: "ui-monospace, monospace"
+};
+var errorBadgeStyles = {
+  fontSize: "0.72rem",
+  fontWeight: 700,
+  color: C.error,
+  backgroundColor: C.errorBg,
+  borderRadius: "5px",
+  padding: "0.15rem 0.5rem",
+  fontFamily: "ui-monospace, monospace"
+};
+var resultMetaStyles = {
+  fontSize: "0.72rem",
+  color: C.textMuted,
+  fontFamily: "ui-monospace, monospace"
+};
+var resultEmptyStyles = {
+  padding: "1.5rem",
+  fontSize: "0.82rem",
+  color: C.textMuted,
+  fontStyle: "italic",
+  textAlign: "center"
+};
+var resultRawStyles = {
+  margin: 0,
+  padding: "0.85rem 1rem",
+  overflowX: "auto",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  fontSize: "0.8rem",
+  lineHeight: 1.5,
+  color: C.text,
+  fontFamily: "ui-monospace, monospace"
+};
+var errorMessageStyles = {
+  margin: 0,
+  fontSize: "0.82rem",
+  lineHeight: 1.6,
+  color: C.error,
+  fontFamily: "ui-monospace, monospace",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word"
+};
+var tableWrapperStyles = {
+  overflowX: "auto",
+  maxHeight: "320px",
+  overflowY: "auto"
+};
+var tableStyles = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: "0.8rem",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+};
+var thStyles = {
+  padding: "0.5rem 0.85rem",
+  textAlign: "left",
+  fontWeight: 600,
+  fontSize: "0.7rem",
+  letterSpacing: "0.05em",
+  textTransform: "uppercase",
+  color: C.textMuted,
+  borderBottom: `1px solid ${C.border}`,
+  borderRight: `1px solid ${C.border}`,
+  background: C.bgCard,
+  whiteSpace: "nowrap",
+  position: "sticky",
+  top: 0
+};
+var thRowNumStyles = {
+  ...thStyles,
+  color: C.textMuted,
+  opacity: 0.5,
+  width: "2.5rem",
+  textAlign: "right"
+};
+var trStyles = {
+  background: "transparent"
+};
+var trAltStyles = {
+  background: C.tealGlow
+};
+var tdStyles = {
+  padding: "0.45rem 0.85rem",
+  borderBottom: `1px solid ${C.border}`,
+  borderRight: `1px solid ${C.border}`,
+  color: C.text,
+  whiteSpace: "nowrap",
+  maxWidth: "300px",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+};
+var tdRowNumStyles = {
+  ...tdStyles,
+  color: C.textMuted,
+  opacity: 0.5,
+  textAlign: "right",
+  userSelect: "none"
+};
+var nullValueStyles = {
+  color: C.textMuted,
+  fontStyle: "italic",
+  opacity: 0.6
+};
+var jsonValueStyles = {
+  color: C.textDim
+};
+function getTabButtonStyles(isActive) {
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    width: "100%",
+    border: "none",
+    borderRadius: "7px",
+    padding: "0.6rem 0.75rem",
+    background: isActive ? C.tealDim : "transparent",
+    color: isActive ? C.teal : C.textDim,
+    fontSize: "0.82rem",
+    fontWeight: isActive ? 700 : 500,
+    textAlign: "left",
+    cursor: "pointer",
+    transition: "background 0.15s",
+    borderLeft: isActive ? `2px solid ${C.teal}` : "2px solid transparent"
+  };
+}
+function getTargetButtonStyles(isActive) {
+  return {
+    border: "none",
+    borderRight: `1px solid ${C.border}`,
+    padding: "0.45rem 0.85rem",
+    background: isActive ? C.tealDim : "transparent",
+    color: isActive ? C.teal : C.textMuted,
+    fontSize: "0.78rem",
+    fontWeight: isActive ? 700 : 500,
+    cursor: "pointer",
+    fontFamily: "ui-monospace, monospace",
+    transition: "background 0.1s",
+    whiteSpace: "nowrap"
+  };
+}
+function runButtonStyles(enabled, running) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.4rem",
+    border: "none",
+    borderRadius: "7px",
+    padding: "0.45rem 0.9rem",
+    background: enabled ? C.teal : C.bgCard,
+    color: enabled ? "#0e1015" : C.textMuted,
+    fontSize: "0.82rem",
+    fontWeight: 700,
+    fontFamily: "ui-monospace, monospace",
+    cursor: enabled ? "pointer" : "not-allowed",
+    opacity: running ? 0.75 : 1,
+    transition: "background 0.15s",
+    whiteSpace: "nowrap"
+  };
+}
+var runningDotStyles = {
+  width: "6px",
+  height: "6px",
+  borderRadius: "50%",
+  backgroundColor: "currentColor",
+  animation: "pulse 1s infinite"
+};
+var schemaLayoutStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.5rem"
+};
+var schemaSectionStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.65rem"
+};
+var schemaSectionHeaderStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.6rem"
+};
+var schemaSectionTitleStyles = {
+  fontSize: "0.72rem",
+  fontWeight: 700,
+  letterSpacing: "0.08em",
+  textTransform: "uppercase",
+  color: C.textMuted
+};
+var schemaBadgeStyles = {
+  fontSize: "0.68rem",
+  fontWeight: 700,
+  color: C.teal,
+  backgroundColor: C.tealDim,
+  borderRadius: "4px",
+  padding: "0.1rem 0.4rem",
+  fontFamily: "ui-monospace, monospace"
+};
+var schemaMigrationsMetaStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginLeft: "auto"
+};
+var schemaVersionChipStyles = {
+  fontSize: "0.68rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.textMuted,
+  backgroundColor: C.bgCard,
+  border: `1px solid ${C.border}`,
+  borderRadius: "4px",
+  padding: "0.1rem 0.5rem"
+};
+var schemaTableGridStyles = {
+  borderRadius: "10px",
+  border: `1px solid ${C.border}`,
+  overflow: "hidden"
+};
+var schemaTableHeaderRowStyles = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr 90px",
+  gap: 0,
+  backgroundColor: C.bgCard,
+  borderBottom: `1px solid ${C.border}`
+};
+var schemaColHeaderStyles = {
+  padding: "0.5rem 0.85rem",
+  fontSize: "0.68rem",
+  fontWeight: 700,
+  letterSpacing: "0.07em",
+  textTransform: "uppercase",
+  color: C.textMuted,
+  borderRight: `1px solid ${C.border}`
+};
+var schemaTableRowStyles = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr 90px",
+  gap: 0,
+  borderBottom: `1px solid ${C.border}`
+};
+var schemaTableNameStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  padding: "0.6rem 0.85rem",
+  fontSize: "0.82rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.text,
+  borderRight: `1px solid ${C.border}`
+};
+var schemaTableIconStyles = {
+  color: C.teal,
+  fontSize: "0.68rem",
+  opacity: 0.8
+};
+var schemaCrdtNameStyles = {
+  display: "flex",
+  alignItems: "center",
+  padding: "0.6rem 0.85rem",
+  fontSize: "0.82rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.textDim,
+  borderRight: `1px solid ${C.border}`
+};
+var schemaStatusCellStyles = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0.6rem 0.5rem"
+};
+var schemaActiveTagStyles = {
+  fontSize: "0.68rem",
+  fontWeight: 700,
+  color: C.success,
+  backgroundColor: C.successBg,
+  borderRadius: "4px",
+  padding: "0.15rem 0.45rem",
+  fontFamily: "ui-monospace, monospace"
+};
+var schemaEmptyStyles = {
+  fontSize: "0.82rem",
+  color: C.textMuted,
+  fontStyle: "italic"
+};
+var migrationListStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.35rem"
+};
+function getMigrationRowStyles(applied) {
+  return {
+    display: "grid",
+    gridTemplateColumns: "3.5rem 1fr 70px",
+    alignItems: "center",
+    gap: "0.75rem",
+    padding: "0.55rem 0.85rem",
+    borderRadius: "8px",
+    background: applied ? C.bgCard : "transparent",
+    border: `1px solid ${applied ? C.border : C.borderLight}`,
+    opacity: applied ? 1 : 0.55
+  };
+}
+var migrationVersionStyles = {
+  fontSize: "0.78rem",
+  fontWeight: 700,
+  fontFamily: "ui-monospace, monospace",
+  color: C.textDim
+};
+var migrationBarTrackStyles = {
+  height: "4px",
+  borderRadius: "2px",
+  backgroundColor: C.border,
+  overflow: "hidden"
+};
+function getMigrationBarFillStyles(applied) {
+  return {
+    height: "100%",
+    width: applied ? "100%" : "0%",
+    borderRadius: "2px",
+    backgroundColor: C.teal,
+    transition: "width 0.3s ease"
+  };
+}
+function getMigrationTagStyles(applied, isCurrent) {
+  if (isCurrent) {
+    return {
+      fontSize: "0.68rem",
+      fontWeight: 700,
+      color: C.teal,
+      backgroundColor: C.tealDim,
+      borderRadius: "4px",
+      padding: "0.15rem 0.45rem",
+      fontFamily: "ui-monospace, monospace",
+      textAlign: "center"
+    };
+  }
+  if (applied) {
+    return {
+      fontSize: "0.68rem",
+      fontWeight: 600,
+      color: C.success,
+      backgroundColor: C.successBg,
+      borderRadius: "4px",
+      padding: "0.15rem 0.45rem",
+      fontFamily: "ui-monospace, monospace",
+      textAlign: "center"
+    };
+  }
+  return {
+    fontSize: "0.68rem",
+    fontWeight: 600,
+    color: C.amber,
+    backgroundColor: "rgba(251,191,36,0.08)",
+    borderRadius: "4px",
+    padding: "0.15rem 0.45rem",
+    fontFamily: "ui-monospace, monospace",
+    textAlign: "center"
+  };
+}
+var eventLogLayoutStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem",
+  height: "100%"
+};
+var eventLogToolbarStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap",
+  flexShrink: 0
+};
+var eventLogFilterSelectStyles = {
+  borderRadius: "7px",
+  border: `1px solid ${C.border}`,
+  padding: "0.35rem 0.6rem",
+  backgroundColor: C.bgCard,
+  color: C.text,
+  fontSize: "0.78rem",
+  fontFamily: "ui-monospace, monospace",
+  cursor: "pointer"
+};
+var eventLogRefreshButtonStyles = {
+  border: `1px solid ${C.border}`,
+  borderRadius: "7px",
+  padding: "0.35rem 0.7rem",
+  backgroundColor: "transparent",
+  color: C.textDim,
+  fontSize: "0.78rem",
+  fontFamily: "ui-monospace, monospace",
+  cursor: "pointer"
+};
+var eventLogCountStyles = {
+  marginLeft: "auto",
+  fontSize: "0.72rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.textMuted
+};
+var eventLogEmptyStyles = {
+  padding: "2rem",
+  textAlign: "center",
+  fontSize: "0.82rem",
+  color: C.textMuted,
+  fontStyle: "italic"
+};
+var eventLogListStyles = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.25rem",
+  overflowY: "auto",
+  flex: 1
+};
+function getEventRowStyles(isExpanded) {
+  return {
+    borderRadius: "8px",
+    border: `1px solid ${isExpanded ? `${C.teal}40` : C.border}`,
+    background: isExpanded ? C.tealGlow : C.bgCard,
+    overflow: "hidden",
+    flexShrink: 0
+  };
+}
+var eventRowHeaderStyles = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  width: "100%",
+  padding: "0.5rem 0.75rem",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  textAlign: "left",
+  flexWrap: "wrap"
+};
+var eventSyncIdStyles = {
+  fontSize: "0.7rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.textMuted,
+  minWidth: "3.5rem"
+};
+var eventDatasetStyles = {
+  fontSize: "0.8rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.text,
+  fontWeight: 600
+};
+var eventItemIdStyles = {
+  fontSize: "0.75rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.textMuted,
+  flex: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  minWidth: 0
+};
+var eventTimestampStyles = {
+  fontSize: "0.7rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.textMuted,
+  marginLeft: "auto"
+};
+var eventChevronStyles = {
+  fontSize: "0.6rem",
+  color: C.textMuted,
+  marginLeft: "0.25rem"
+};
+var eventPayloadStyles = {
+  borderTop: `1px solid ${C.border}`,
+  padding: "0.6rem 0.75rem"
+};
+var eventPayloadMetaStyles = {
+  display: "flex",
+  gap: "0.75rem",
+  marginBottom: "0.5rem"
+};
+var eventMetaItemStyles = {
+  fontSize: "0.68rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.textMuted
+};
+var eventPayloadPreStyles = {
+  margin: 0,
+  fontSize: "0.78rem",
+  fontFamily: "ui-monospace, monospace",
+  color: C.text,
+  lineHeight: 1.5,
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word"
+};
+var loadMoreButtonStyles = {
+  width: "100%",
+  border: `1px solid ${C.border}`,
+  borderRadius: "8px",
+  padding: "0.6rem",
+  backgroundColor: "transparent",
+  color: C.textDim,
+  fontSize: "0.78rem",
+  fontFamily: "ui-monospace, monospace",
+  cursor: "pointer",
+  flexShrink: 0
+};
+var eventTypeBadgeBase = {
+  fontSize: "0.65rem",
+  fontWeight: 700,
+  borderRadius: "4px",
+  padding: "0.1rem 0.4rem",
+  fontFamily: "ui-monospace, monospace",
+  whiteSpace: "nowrap"
+};
+var eventTypeCreateStyles = {
+  ...eventTypeBadgeBase,
+  color: C.teal,
+  backgroundColor: C.tealDim
+};
+var eventTypeUpdateStyles = {
+  ...eventTypeBadgeBase,
+  color: "#a78bfa",
+  backgroundColor: "rgba(167,139,250,0.12)"
+};
+var eventOriginOwnStyles = {
+  ...eventTypeBadgeBase,
+  color: C.success,
+  backgroundColor: C.successBg
+};
+var eventOriginRemoteStyles = {
+  ...eventTypeBadgeBase,
+  color: C.amber,
+  backgroundColor: "rgba(251,191,36,0.1)"
+};
+var eventOriginLocalStyles = {
+  ...eventTypeBadgeBase,
+  color: C.textDim,
+  backgroundColor: C.bgCard,
+  border: `1px solid ${C.border}`
+};
+var eventStatusAppliedStyles = {
+  ...eventTypeBadgeBase,
+  color: C.success,
+  backgroundColor: C.successBg
+};
+var eventStatusPendingStyles = {
+  ...eventTypeBadgeBase,
+  color: C.amber,
+  backgroundColor: "rgba(251,191,36,0.1)"
+};
+var eventStatusFailedStyles = {
+  ...eventTypeBadgeBase,
+  color: C.error,
+  backgroundColor: C.errorBg
+};
+var eventStatusSkippedStyles = {
+  ...eventTypeBadgeBase,
+  color: C.textMuted,
+  backgroundColor: C.bgCard
+};
+export {
+  SQLiteSyncDevtools
+};
+//# sourceMappingURL=index.js.map