@humbdb/ui 0.0.1

package/dist/index.js

@@ -0,0 +1,1221 @@
+// src/components/console-log.tsx
+import { Trash2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LEVEL_COLOR = {
+  info: void 0,
+  warn: "var(--c-amber)",
+  error: "var(--c-red)"
+};
+function formatTime(timestamp) {
+  return new Date(timestamp).toLocaleTimeString("en-US", { hour12: false });
+}
+function ConsoleLog({ events, onClear }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "console-log",
+      className: "flex h-full flex-col overflow-hidden rounded-[3px] border border-border",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[9px] uppercase tracking-widest text-muted-foreground", children: "Console" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onClear,
+              className: "ml-auto flex items-center gap-1 rounded-[3px] px-2 py-1 text-[11px] text-muted-foreground hover:bg-accent",
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "h-2.5 w-2.5" }),
+                "Clear"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-0.5 overflow-auto p-3", children: [
+          events.length === 0 ? /* @__PURE__ */ jsx("p", { className: "font-mono text-[11px] text-muted-foreground/50", children: "No events yet." }) : events.map((event) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-0.5 font-mono text-[11px]", children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 tabular-nums text-muted-foreground/30", children: formatTime(event.timestamp) }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "w-9 shrink-0 text-right text-[10px]",
+                style: { color: LEVEL_COLOR[event.level] },
+                children: event.level === "info" ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: event.level }) : event.level
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: event.level === "info" ? "text-foreground/65" : "",
+                style: { color: LEVEL_COLOR[event.level] },
+                children: event.message
+              }
+            )
+          ] }, event.id)),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 pt-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-[11px]", style: { color: "var(--c-green)" }, children: "\u276F" }),
+            /* @__PURE__ */ jsx("span", { className: "animate-pulse font-mono text-[11px] text-muted-foreground/25", children: "\u2588" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/files-browser.tsx
+import { File, FileCode2, FolderOpen } from "lucide-react";
+import { useState } from "react";
+
+// src/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/spinner.tsx
+import { Loader2 } from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsx2(
+    Loader2,
+    {
+      className: cn("h-3 w-3 animate-spin text-muted-foreground", className),
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/components/files-browser.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function TreeRow({
+  node,
+  depth,
+  selectedPath,
+  onSelectFile
+}) {
+  const [open, setOpen] = useState(depth < 1);
+  const isSelected = node.type === "file" && node.path === selectedPath;
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: node.type === "file" ? "button" : void 0,
+        "aria-pressed": node.type === "file" ? isSelected : void 0,
+        className: cn(
+          "mx-1 flex cursor-pointer select-none items-center gap-1.5 rounded-[2px] py-[3px] pr-2 hover:bg-sidebar-accent",
+          isSelected && "bg-primary/10"
+        ),
+        style: { paddingLeft: `${8 + depth * 14}px` },
+        onClick: () => {
+          if (node.type === "directory") setOpen((current) => !current);
+          else onSelectFile(node.path);
+        },
+        children: [
+          node.type === "directory" ? /* @__PURE__ */ jsx3(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              className: cn(
+                "h-2.5 w-2.5 shrink-0 text-muted-foreground/60 transition-transform",
+                open && "rotate-90"
+              ),
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" })
+            }
+          ) : /* @__PURE__ */ jsx3("span", { className: "w-2.5 shrink-0" }),
+          node.type === "directory" ? /* @__PURE__ */ jsx3(FolderOpen, { className: "h-3 w-3 shrink-0", style: { color: "var(--c-amber)" } }) : /* @__PURE__ */ jsx3(File, { className: "h-3 w-3 shrink-0", style: { color: "var(--c-blue)" } }),
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: cn(
+                "truncate font-mono text-[11px] text-foreground/70",
+                isSelected ? "text-foreground" : "hover:text-foreground"
+              ),
+              children: node.name
+            }
+          )
+        ]
+      }
+    ),
+    node.type === "directory" && open && /* @__PURE__ */ jsx3("div", { children: node.children?.map((child) => /* @__PURE__ */ jsx3(
+      TreeRow,
+      {
+        node: child,
+        depth: depth + 1,
+        selectedPath,
+        onSelectFile
+      },
+      child.path
+    )) })
+  ] });
+}
+function FilesBrowser({
+  tree,
+  selectedPath,
+  onSelectFile,
+  content,
+  isContentLoading,
+  contentError
+}) {
+  const lines = content?.split("\n") ?? [];
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-testid": "files-browser",
+      className: "flex h-full overflow-hidden rounded-[3px] border border-border",
+      children: [
+        /* @__PURE__ */ jsx3("nav", { className: "w-48 shrink-0 overflow-y-auto border-r border-border bg-sidebar py-1", children: tree.map((node) => /* @__PURE__ */ jsx3(
+          TreeRow,
+          {
+            node,
+            depth: 0,
+            selectedPath,
+            onSelectFile
+          },
+          node.path
+        )) }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-2 border-b border-border bg-card px-3 py-2", children: [
+            /* @__PURE__ */ jsx3(FileCode2, { className: "h-3 w-3 shrink-0", style: { color: "var(--c-blue)" } }),
+            /* @__PURE__ */ jsx3("span", { className: "truncate font-mono text-[11px] text-foreground", children: selectedPath ?? "Select a file" })
+          ] }),
+          isContentLoading ? /* @__PURE__ */ jsxs2("p", { className: "flex items-center gap-1.5 p-3 text-[13px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx3(Spinner, {}),
+            " Loading file..."
+          ] }) : contentError ? /* @__PURE__ */ jsx3("p", { className: "p-3 text-[13px] text-muted-foreground", children: contentError }) : content === void 0 ? /* @__PURE__ */ jsx3("p", { className: "p-3 font-mono text-[11px] text-muted-foreground", children: "No file selected." }) : /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 overflow-auto", children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "shrink-0 select-none border-r border-border bg-background pr-3 pt-3 text-right font-mono text-[11px] text-muted-foreground/30",
+                style: { minWidth: "44px" },
+                children: lines.map((_, index) => /* @__PURE__ */ jsx3("div", { style: { lineHeight: "20px" }, children: index + 1 }, index))
+              }
+            ),
+            /* @__PURE__ */ jsx3("pre", { className: "flex-1 whitespace-pre p-3 font-mono text-[12px] leading-5 text-foreground/80", children: content })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/table-detail.tsx
+import { Link, Table2 } from "lucide-react";
+
+// src/components/type-icon.tsx
+import { Calendar, Hash, ToggleLeft, Type } from "lucide-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function classify(dataType) {
+  const type = dataType.toLowerCase();
+  if (type.startsWith("int") || type.startsWith("numeric") || type.startsWith("decimal") || type.startsWith("float") || type.startsWith("double") || type.startsWith("real") || type.startsWith("serial")) {
+    return "numeric";
+  }
+  if (type.startsWith("bool")) return "boolean";
+  if (type.startsWith("timestamp") || type.startsWith("date") || type.startsWith("time")) {
+    return "datetime";
+  }
+  if (type.startsWith("char") || type.startsWith("varchar") || type.startsWith("text") || type.startsWith("uuid") || type.startsWith("json")) {
+    return "text";
+  }
+  return "other";
+}
+function TypeIcon({ dataType }) {
+  switch (classify(dataType)) {
+    case "numeric":
+      return /* @__PURE__ */ jsx4(Hash, { className: "h-2.5 w-2.5 shrink-0", style: { color: "var(--c-amber)" } });
+    case "text":
+      return /* @__PURE__ */ jsx4(Type, { className: "h-2.5 w-2.5 shrink-0", style: { color: "var(--c-blue)" } });
+    case "boolean":
+      return /* @__PURE__ */ jsx4(ToggleLeft, { className: "h-2.5 w-2.5 shrink-0", style: { color: "var(--c-green)" } });
+    case "datetime":
+      return /* @__PURE__ */ jsx4(Calendar, { className: "h-2.5 w-2.5 shrink-0", style: { color: "var(--c-purple)" } });
+    default:
+      return /* @__PURE__ */ jsx4(Hash, { className: "h-2.5 w-2.5 shrink-0 text-muted-foreground" });
+  }
+}
+
+// src/components/table-detail.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function TableDetail({ table }) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-testid": "table-detail",
+      className: "max-w-xl overflow-hidden rounded-[3px] border border-border",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 border-b border-border bg-card px-3 py-2", children: [
+          /* @__PURE__ */ jsx5(Table2, { className: "h-3 w-3 shrink-0", style: { color: "var(--c-blue)" } }),
+          /* @__PURE__ */ jsx5("span", { className: "font-mono text-[12px] font-medium text-foreground", children: table.name }),
+          table.rowCount !== void 0 && /* @__PURE__ */ jsxs3("span", { className: "ml-auto font-mono text-[10px] text-muted-foreground", children: [
+            "~",
+            table.rowCount.toLocaleString(),
+            " row",
+            table.rowCount === 1 ? "" : "s"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "bg-background", children: table.columns.map((column, index) => /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: "flex items-center gap-2 px-3 py-1.5 font-mono text-[11px] hover:bg-accent/50" + (index !== 0 ? " border-t border-border-subtle" : ""),
+            children: [
+              /* @__PURE__ */ jsx5(TypeIcon, { dataType: column.dataType }),
+              /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  className: column.isPrimaryKey || column.isForeignKey ? "" : "text-foreground/80",
+                  style: {
+                    color: column.isPrimaryKey ? "var(--c-amber)" : column.isForeignKey ? "var(--c-blue)" : void 0
+                  },
+                  children: column.name
+                }
+              ),
+              column.isPrimaryKey && /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  className: "rounded-[2px] border px-1 text-[8px]",
+                  style: {
+                    color: "var(--c-amber)",
+                    borderColor: "color-mix(in srgb, var(--c-amber) 30%, transparent)"
+                  },
+                  children: "PK"
+                }
+              ),
+              column.isForeignKey && /* @__PURE__ */ jsxs3(
+                "span",
+                {
+                  className: "flex items-center gap-0.5 rounded-[2px] border px-1 text-[8px]",
+                  style: {
+                    color: "var(--c-blue)",
+                    borderColor: "color-mix(in srgb, var(--c-blue) 30%, transparent)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(Link, { className: "h-2 w-2" }),
+                    "FK"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx5("span", { className: "ml-auto text-[9px] text-muted-foreground/40", children: column.dataType }),
+              column.nullable && /* @__PURE__ */ jsx5("span", { className: "text-[9px] text-muted-foreground/30", children: "null" })
+            ]
+          },
+          column.name
+        )) }),
+        table.indexes && table.indexes.length > 0 && /* @__PURE__ */ jsx5("div", { className: "border-t border-border bg-card px-3 py-2", children: /* @__PURE__ */ jsx5("ul", { className: "space-y-0.5 font-mono text-[10px] text-muted-foreground", children: table.indexes.map((index) => /* @__PURE__ */ jsxs3("li", { children: [
+          index.name,
+          " (",
+          index.columns.join(", "),
+          ")",
+          index.primary ? " \xB7 primary key" : index.unique ? " \xB7 unique" : ""
+        ] }, index.name)) }) })
+      ]
+    }
+  );
+}
+
+// src/components/schema-grid.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SchemaGrid({ tables }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-testid": "schema-grid",
+      className: "grid gap-3",
+      style: { gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))" },
+      children: tables.map((table) => /* @__PURE__ */ jsx6(TableDetail, { table }, `${table.schema}.${table.name}`))
+    }
+  );
+}
+
+// src/components/schema-tree.tsx
+import { Circle, FolderOpen as FolderOpen2, Table2 as Table22 } from "lucide-react";
+import { useMemo, useState as useState2 } from "react";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var STATUS_DOT_COLOR = {
+  connected: "var(--c-green)",
+  disconnected: "var(--c-red)",
+  unconfigured: "rgb(var(--muted-foreground))"
+};
+function buildTree(target, schemas) {
+  return {
+    id: "connection",
+    name: target ?? "not connected",
+    type: "connection",
+    children: schemas.map((schema) => ({
+      id: `schema:${schema.name}`,
+      name: schema.name,
+      type: "schema",
+      children: schema.tables.map((table) => ({
+        id: `table:${schema.name}:${table}`,
+        name: table,
+        type: "table",
+        schema: schema.name
+      }))
+    }))
+  };
+}
+function collectMatchIds(node, query, ancestors = []) {
+  const result = /* @__PURE__ */ new Set();
+  const path = [...ancestors, node.id];
+  if (node.name.toLowerCase().includes(query.toLowerCase())) {
+    for (const id of path) result.add(id);
+  }
+  for (const child of node.children ?? []) {
+    for (const id of collectMatchIds(child, query, path)) result.add(id);
+  }
+  return result;
+}
+function highlight(text, query) {
+  if (!query) return text;
+  const index = text.toLowerCase().indexOf(query.toLowerCase());
+  if (index === -1) return text;
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    text.slice(0, index),
+    /* @__PURE__ */ jsx7("mark", { className: "rounded-[1px] bg-[color-mix(in_srgb,var(--c-blue)_25%,transparent)] text-[var(--c-blue)]", children: text.slice(index, index + query.length) }),
+    text.slice(index + query.length)
+  ] });
+}
+function TreeRow2({
+  node,
+  depth,
+  query,
+  matchIds,
+  selected,
+  onSelect,
+  status
+}) {
+  const [manualOpen, setManualOpen] = useState2(depth < 2);
+  const forceOpen = query.length > 0 && matchIds.has(node.id);
+  const open = query.length > 0 ? forceOpen : manualOpen;
+  if (query.length > 0 && !matchIds.has(node.id)) return null;
+  const hasChildren = Boolean(node.children && node.children.length > 0);
+  const isSelected = node.type === "table" && selected?.schema === node.schema && selected?.table === node.name;
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        role: node.type === "table" ? "button" : void 0,
+        "aria-pressed": node.type === "table" ? isSelected : void 0,
+        className: cn(
+          "mx-1 flex cursor-pointer select-none items-center gap-1.5 rounded-[2px] py-[3px] pr-2 hover:bg-sidebar-accent",
+          isSelected && "bg-primary/10"
+        ),
+        style: { paddingLeft: `${8 + depth * 14}px` },
+        onClick: () => {
+          if (hasChildren) setManualOpen((current) => !current);
+          if (node.type === "table" && node.schema) onSelect(node.schema, node.name);
+        },
+        children: [
+          hasChildren ? /* @__PURE__ */ jsx7(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              className: cn(
+                "h-2.5 w-2.5 shrink-0 text-muted-foreground/60 transition-transform",
+                open && "rotate-90"
+              ),
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx7("path", { d: "m9 18 6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" })
+            }
+          ) : /* @__PURE__ */ jsx7("span", { className: "w-2.5 shrink-0" }),
+          node.type === "connection" && /* @__PURE__ */ jsx7(
+            Circle,
+            {
+              className: "h-1.5 w-1.5 shrink-0",
+              fill: STATUS_DOT_COLOR[status],
+              style: { color: STATUS_DOT_COLOR[status] }
+            }
+          ),
+          node.type === "schema" && /* @__PURE__ */ jsx7(FolderOpen2, { className: "h-3 w-3 shrink-0", style: { color: "var(--c-amber)" } }),
+          node.type === "table" && /* @__PURE__ */ jsx7(Table22, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx7(
+            "span",
+            {
+              className: cn(
+                "truncate font-mono text-[11px] text-foreground/70",
+                isSelected ? "text-foreground" : "hover:text-foreground"
+              ),
+              children: highlight(node.name, query)
+            }
+          )
+        ]
+      }
+    ),
+    hasChildren && open && /* @__PURE__ */ jsx7("div", { children: node.children?.map((child) => /* @__PURE__ */ jsx7(
+      TreeRow2,
+      {
+        node: child,
+        depth: depth + 1,
+        query,
+        matchIds,
+        selected,
+        onSelect,
+        status
+      },
+      child.id
+    )) })
+  ] });
+}
+function SchemaTree({
+  target,
+  status,
+  schemas,
+  selected,
+  onSelect
+}) {
+  const [query, setQuery] = useState2("");
+  const tree = useMemo(() => buildTree(target, schemas), [target, schemas]);
+  const matchIds = useMemo(
+    () => query.trim().length > 1 ? collectMatchIds(tree, query.trim()) : /* @__PURE__ */ new Set(),
+    [tree, query]
+  );
+  const trimmedQuery = query.trim();
+  return /* @__PURE__ */ jsxs4("div", { "data-testid": "schema-tree", className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx7("div", { className: "shrink-0 border-b border-border px-2 py-2", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5 rounded-[3px] border border-border bg-background px-2 py-1.5", children: [
+      /* @__PURE__ */ jsxs4(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          className: "h-2.5 w-2.5 shrink-0 text-muted-foreground/50",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          children: [
+            /* @__PURE__ */ jsx7("circle", { cx: "11", cy: "11", r: "8" }),
+            /* @__PURE__ */ jsx7("path", { d: "m21 21-4.35-4.35", strokeLinecap: "round", strokeLinejoin: "round" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          type: "text",
+          value: query,
+          onChange: (event) => setQuery(event.target.value),
+          placeholder: "Search tables, schemas...",
+          "aria-label": "Search tables",
+          className: "w-full min-w-0 bg-transparent font-mono text-[11px] text-foreground outline-none placeholder:text-muted-foreground/40"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx7("nav", { className: "flex-1 overflow-y-auto py-1", children: trimmedQuery.length > 1 && matchIds.size === 0 ? /* @__PURE__ */ jsx7("div", { className: "px-3 py-4 text-center font-mono text-[11px] text-muted-foreground/40", children: "no results" }) : /* @__PURE__ */ jsx7(
+      TreeRow2,
+      {
+        node: tree,
+        depth: 0,
+        query: trimmedQuery.length > 1 ? trimmedQuery : "",
+        matchIds,
+        selected,
+        onSelect,
+        status
+      }
+    ) })
+  ] });
+}
+
+// src/components/sidebar.tsx
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function Sidebar({
+  target,
+  status,
+  schemas,
+  selected,
+  onSelect,
+  isLoading,
+  isError,
+  onRetry,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    open && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "fixed inset-0 z-40 bg-black/50 md:hidden",
+        onClick: () => onOpenChange(false),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "aside",
+      {
+        className: cn(
+          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-sidebar-border bg-sidebar transition-transform duration-150",
+          "md:static md:z-auto md:translate-x-0 md:transition-none",
+          open ? "translate-x-0" : "-translate-x-full",
+          !open && "md:w-8"
+        ),
+        children: open ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ jsx8("span", { className: "font-mono text-[9px] uppercase tracking-widest text-muted-foreground/60", children: "Explorer" }),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Collapse sidebar",
+                onClick: () => onOpenChange(false),
+                className: "ml-auto rounded p-0.5 text-muted-foreground hover:bg-sidebar-accent hover:text-foreground",
+                children: /* @__PURE__ */ jsx8(PanelLeftClose, { className: "h-3 w-3" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: "min-h-0 flex-1", children: isLoading ? /* @__PURE__ */ jsxs5("p", { className: "flex items-center gap-1.5 px-3 py-2 font-mono text-[11px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx8(Spinner, {}),
+            " Loading schemas..."
+          ] }) : isError ? /* @__PURE__ */ jsxs5("div", { className: "px-3 py-2 font-mono text-[11px] text-muted-foreground", children: [
+            "Failed to load schemas.",
+            " ",
+            /* @__PURE__ */ jsx8("button", { type: "button", onClick: onRetry, className: "text-primary underline", children: "Retry" })
+          ] }) : /* @__PURE__ */ jsx8(
+            SchemaTree,
+            {
+              target,
+              status,
+              schemas,
+              selected,
+              onSelect: (schema, table) => {
+                onSelect(schema, table);
+                if (window.innerWidth < 768) onOpenChange(false);
+              }
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsx8("div", { className: "hidden flex-col items-center gap-2 px-1.5 py-2 md:flex", children: /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Expand sidebar",
+            onClick: () => onOpenChange(true),
+            className: "rounded-md p-1 text-muted-foreground hover:bg-sidebar-accent hover:text-foreground",
+            children: /* @__PURE__ */ jsx8(PanelLeftOpen, { className: "h-3.5 w-3.5" })
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+// src/components/status-bar.tsx
+import { Clock } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var STATUS_LABEL = {
+  connected: "connected",
+  disconnected: "disconnected",
+  unconfigured: "no database"
+};
+var STATUS_COLOR = {
+  connected: "var(--c-green)",
+  disconnected: "var(--c-red)",
+  unconfigured: "rgb(var(--muted-foreground))"
+};
+function Separator() {
+  return /* @__PURE__ */ jsx9("span", { className: "text-border", children: "\xB7" });
+}
+function StatusBar({
+  status,
+  engine,
+  engineVersion,
+  schema,
+  lastQueryMs
+}) {
+  const engineLabel = engineVersion ?? engine;
+  return /* @__PURE__ */ jsxs6("footer", { className: "flex h-6 shrink-0 items-center justify-between gap-3 border-t border-border bg-sidebar px-3 sm:px-4 font-mono text-[10px]", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 items-center gap-3 text-muted-foreground/60", children: [
+      /* @__PURE__ */ jsx9("span", { style: { color: STATUS_COLOR[status] }, children: STATUS_LABEL[status] }),
+      engineLabel && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx9(Separator, {}),
+        /* @__PURE__ */ jsx9("span", { className: "hidden sm:inline", children: engineLabel })
+      ] }),
+      schema && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx9(Separator, {}),
+        /* @__PURE__ */ jsx9("span", { className: "hidden truncate sm:inline", children: schema })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "hidden shrink-0 items-center gap-3 text-muted-foreground/40 sm:flex", children: [
+      /* @__PURE__ */ jsx9("span", { children: "UTF-8" }),
+      lastQueryMs !== void 0 && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx9(Separator, {}),
+        /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx9(Clock, { className: "h-2.5 w-2.5" }),
+          lastQueryMs,
+          "ms"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/tab-bar.tsx
+import { FileCode2 as FileCode22, FolderOpen as FolderOpen3, Network, Table2 as Table23, Terminal } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var TABS = [
+  { id: "sql-editor", label: "SQL Editor", icon: FileCode22 },
+  { id: "tables", label: "Tables", icon: Table23 },
+  { id: "schema", label: "Schema", icon: Network },
+  { id: "files", label: "Files", icon: FolderOpen3 },
+  { id: "console", label: "Console", icon: Terminal }
+];
+function TabBar({ active, onChange }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      role: "tablist",
+      className: "flex shrink-0 items-end gap-0.5 overflow-x-auto overflow-y-hidden border-b border-border bg-card px-2 pt-1",
+      children: TABS.map(({ id, label, icon: Icon }) => {
+        const isActive = id === active;
+        return /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": isActive,
+            onClick: () => onChange(id),
+            className: cn(
+              "flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-t-[3px] px-3 py-1.5 text-[11px] font-medium transition-colors",
+              isActive ? "-mb-px border border-border border-b-background bg-background text-foreground" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx10(Icon, { className: "h-3 w-3" }),
+              label
+            ]
+          },
+          id
+        );
+      })
+    }
+  );
+}
+
+// src/components/title-bar.tsx
+import { ChevronRight, Menu, Moon, RefreshCw, Settings, Sun } from "lucide-react";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var STATUS_DOT_COLOR2 = {
+  connected: "bg-[var(--c-green)]",
+  disconnected: "bg-[var(--c-red)]",
+  unconfigured: "bg-muted-foreground"
+};
+var STATUS_LABEL2 = {
+  connected: "Connected",
+  disconnected: "Disconnected",
+  unconfigured: "No database"
+};
+function splitTarget(target) {
+  const lastSlash = target.lastIndexOf("/");
+  if (lastSlash === -1) return { name: target };
+  return { prefix: target.slice(0, lastSlash), name: target.slice(lastSlash + 1) };
+}
+function TitleBar({
+  status,
+  target,
+  theme,
+  onToggleTheme,
+  onRefresh,
+  isRefreshing,
+  onToggleSidebar
+}) {
+  const breadcrumb = target ? splitTarget(target) : null;
+  return /* @__PURE__ */ jsxs8("header", { className: "flex h-9 shrink-0 items-center border-b border-border bg-card px-3 sm:px-4", children: [
+    /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: "button",
+        onClick: onToggleSidebar,
+        "aria-label": "Toggle sidebar",
+        className: "mr-2 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground md:hidden",
+        children: /* @__PURE__ */ jsx11(Menu, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx11("h1", { className: "m-0 mr-4 shrink-0 font-mono text-[13px] font-semibold tracking-tight text-foreground", children: "Humb" }),
+    /* @__PURE__ */ jsx11("div", { className: "mr-4 hidden h-3.5 w-px shrink-0 bg-border sm:block" }),
+    /* @__PURE__ */ jsx11("div", { className: "flex min-w-0 items-center gap-0 truncate font-mono text-[11px]", children: breadcrumb ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+      breadcrumb.prefix && /* @__PURE__ */ jsx11("span", { className: "hidden truncate text-muted-foreground/60 sm:inline", children: breadcrumb.prefix }),
+      breadcrumb.prefix && /* @__PURE__ */ jsx11(ChevronRight, { className: "mx-1 hidden h-3 w-3 shrink-0 text-border sm:inline" }),
+      /* @__PURE__ */ jsx11("span", { className: "truncate font-medium text-foreground/80", children: breadcrumb.name })
+    ] }) : /* @__PURE__ */ jsx11("span", { className: "text-muted-foreground/60", children: "not connected" }) }),
+    /* @__PURE__ */ jsxs8(
+      "span",
+      {
+        "data-testid": "status-badge",
+        "data-status": status,
+        title: STATUS_LABEL2[status],
+        className: "ml-3 flex shrink-0 items-center gap-1.5",
+        children: [
+          /* @__PURE__ */ jsx11("span", { className: cn("h-1.5 w-1.5 rounded-full", STATUS_DOT_COLOR2[status]) }),
+          /* @__PURE__ */ jsx11(
+            "span",
+            {
+              "data-testid": "connection-summary",
+              className: "font-mono text-[11px] text-muted-foreground",
+              children: STATUS_LABEL2[status]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs8("div", { className: "ml-auto flex shrink-0 items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: onToggleTheme,
+          title: theme === "dark" ? "Switch to light" : "Switch to dark",
+          "aria-label": "Toggle theme",
+          className: "rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground",
+          children: theme === "dark" ? /* @__PURE__ */ jsx11(Sun, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx11(Moon, { className: "h-3.5 w-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: onRefresh,
+          disabled: isRefreshing,
+          "aria-label": "Refresh",
+          className: "rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50",
+          children: /* @__PURE__ */ jsx11(RefreshCw, { className: cn("h-3.5 w-3.5", isRefreshing && "animate-spin") })
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Settings",
+          disabled: true,
+          className: "cursor-not-allowed rounded-md p-1.5 text-muted-foreground opacity-50",
+          children: /* @__PURE__ */ jsx11(Settings, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/rows-table.tsx
+import {
+  ArrowUpDown,
+  ChevronLeft,
+  ChevronRight as ChevronRight2,
+  Copy,
+  Download,
+  RefreshCw as RefreshCw2,
+  Search,
+  X
+} from "lucide-react";
+import { useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/format-cell.ts
+function formatCell(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return typeof value === "string" ? value : JSON.stringify(value);
+}
+
+// src/components/rows-table.tsx
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function toCsv(columns, rows) {
+  const escape = (value) => {
+    const text = formatCell(value);
+    return /[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+  };
+  const lines = [columns.map(escape).join(",")];
+  for (const row of rows) lines.push(columns.map((column) => escape(row[column])).join(","));
+  return lines.join("\n");
+}
+function downloadCsv(filename, csv) {
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+function RowsTable({
+  rowPage,
+  columns = [],
+  tableName,
+  approxRowCount,
+  page,
+  canGoPrevious,
+  canGoNext,
+  onPrevious,
+  onNext,
+  onRefresh
+}) {
+  const [search, setSearch] = useState3("");
+  const [sortCol, setSortCol] = useState3(null);
+  const [sortDir, setSortDir] = useState3(null);
+  const [selected, setSelected] = useState3(/* @__PURE__ */ new Set());
+  const columnByName = useMemo2(
+    () => new Map(columns.map((column) => [column.name, column])),
+    [columns]
+  );
+  const indexed = useMemo2(() => rowPage.rows.map((row, index) => ({ row, index })), [rowPage.rows]);
+  const filtered = useMemo2(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return indexed;
+    return indexed.filter(
+      ({ row }) => Object.values(row).some((value) => formatCell(value).toLowerCase().includes(query))
+    );
+  }, [indexed, search]);
+  const sorted = useMemo2(() => {
+    if (!sortCol || !sortDir) return filtered;
+    const copy = [...filtered];
+    copy.sort((a, b) => {
+      const left = formatCell(a.row[sortCol]);
+      const right = formatCell(b.row[sortCol]);
+      const cmp = left < right ? -1 : left > right ? 1 : 0;
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+    return copy;
+  }, [filtered, sortCol, sortDir]);
+  function handleSort(column) {
+    if (sortCol !== column) {
+      setSortCol(column);
+      setSortDir("asc");
+    } else if (sortDir === "asc") {
+      setSortDir("desc");
+    } else {
+      setSortCol(null);
+      setSortDir(null);
+    }
+  }
+  function toggleRow(index) {
+    setSelected((current) => {
+      const next = new Set(current);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  }
+  async function copySelected() {
+    const rows = sorted.filter(({ index }) => selected.has(index)).map(({ row }) => row);
+    await navigator.clipboard.writeText(toCsv(rowPage.columns, rows));
+  }
+  function exportCsv() {
+    downloadCsv(
+      `${tableName ?? "rows"}.csv`,
+      toCsv(
+        rowPage.columns,
+        sorted.map(({ row }) => row)
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs9("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5 rounded-[3px] bg-accent px-2 py-1 font-mono text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx12(Search, { className: "h-2.5 w-2.5" }),
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            value: search,
+            onChange: (event) => setSearch(event.target.value),
+            placeholder: "Filter this page...",
+            "aria-label": "Filter this page",
+            title: "Filters only the rows currently loaded on this page, not the whole table",
+            className: "w-28 min-w-0 bg-transparent text-foreground outline-none placeholder:text-muted-foreground sm:w-36"
+          }
+        ),
+        search && /* @__PURE__ */ jsx12("button", { type: "button", onClick: () => setSearch(""), "aria-label": "Clear filter", children: /* @__PURE__ */ jsx12(X, { className: "h-2.5 w-2.5" }) })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "ml-auto flex items-center gap-2", children: [
+        selected.size > 0 && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+          /* @__PURE__ */ jsxs9("span", { className: "font-mono text-[10px]", style: { color: "var(--c-blue)" }, children: [
+            selected.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              onClick: () => void copySelected(),
+              className: "flex items-center gap-1 rounded-[3px] px-2 py-1 text-[11px] text-muted-foreground hover:bg-accent hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsx12(Copy, { className: "h-3 w-3" }),
+                " Copy as CSV"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            onClick: exportCsv,
+            "aria-label": "Export this page as CSV",
+            title: "Exports the rows currently loaded on this page, not the whole table",
+            className: "rounded-[3px] p-1 text-muted-foreground hover:bg-accent hover:text-foreground",
+            children: /* @__PURE__ */ jsx12(Download, { className: "h-3 w-3" })
+          }
+        ),
+        onRefresh && /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            onClick: onRefresh,
+            "aria-label": "Refresh rows",
+            className: "rounded-[3px] p-1 text-muted-foreground hover:bg-accent hover:text-foreground",
+            children: /* @__PURE__ */ jsx12(RefreshCw2, { className: "h-3 w-3" })
+          }
+        )
+      ] })
+    ] }),
+    columns.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "flex shrink-0 overflow-x-auto overflow-y-hidden border-b border-border bg-card", children: [
+      /* @__PURE__ */ jsx12("div", { className: "w-8 shrink-0 border-r border-border" }),
+      /* @__PURE__ */ jsx12("div", { className: "w-8 shrink-0 border-r border-border" }),
+      rowPage.columns.map((columnName) => {
+        const meta = columnByName.get(columnName);
+        return /* @__PURE__ */ jsxs9(
+          "div",
+          {
+            className: "flex min-w-[120px] shrink-0 items-center gap-1 whitespace-nowrap border-r border-border px-3 py-1 font-mono text-[9px] text-muted-foreground",
+            children: [
+              meta && /* @__PURE__ */ jsx12(TypeIcon, { dataType: meta.dataType }),
+              /* @__PURE__ */ jsx12("span", { children: meta?.dataType ?? "unknown" }),
+              meta?.isPrimaryKey && /* @__PURE__ */ jsx12("span", { className: "ml-1 font-bold", style: { color: "var(--c-amber)" }, children: "PK" })
+            ]
+          },
+          columnName
+        );
+      })
+    ] }),
+    rowPage.rows.length === 0 ? /* @__PURE__ */ jsx12("div", { "data-testid": "rows-table", className: "flex-1 p-3", children: /* @__PURE__ */ jsx12("p", { className: "font-mono text-[11px] text-muted-foreground", children: "No rows in this table." }) }) : /* @__PURE__ */ jsx12("div", { "data-testid": "rows-table", className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs9("table", { className: "w-full border-collapse font-mono text-[11px]", children: [
+      /* @__PURE__ */ jsx12("thead", { className: "sticky top-0 z-10 bg-card", children: /* @__PURE__ */ jsxs9("tr", { children: [
+        /* @__PURE__ */ jsx12("th", { className: "w-8 border-b border-r border-border px-2 py-2" }),
+        /* @__PURE__ */ jsx12("th", { className: "w-8 border-b border-r border-border px-2 py-2 text-right font-normal text-muted-foreground/40", children: "#" }),
+        rowPage.columns.map((columnName) => /* @__PURE__ */ jsx12(
+          "th",
+          {
+            onClick: () => handleSort(columnName),
+            className: "group cursor-pointer whitespace-nowrap border-b border-r border-border px-3 py-2 text-left font-medium text-muted-foreground hover:text-foreground",
+            children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5", children: [
+              columnName,
+              /* @__PURE__ */ jsx12(
+                ArrowUpDown,
+                {
+                  className: cn(
+                    "h-2.5 w-2.5 transition-opacity",
+                    sortCol === columnName ? "text-primary opacity-100" : "opacity-0 group-hover:opacity-40"
+                  )
+                }
+              )
+            ] })
+          },
+          columnName
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsx12("tbody", { children: sorted.map(({ row, index }, displayIndex) => /* @__PURE__ */ jsxs9(
+        "tr",
+        {
+          onClick: () => toggleRow(index),
+          className: cn(
+            "cursor-pointer border-b border-border-subtle hover:bg-accent/40",
+            selected.has(index) && "bg-primary/5"
+          ),
+          children: [
+            /* @__PURE__ */ jsx12("td", { className: "w-8 border-r border-border-subtle px-2 py-1.5 text-center", children: /* @__PURE__ */ jsx12(
+              "input",
+              {
+                type: "checkbox",
+                checked: selected.has(index),
+                onChange: () => toggleRow(index),
+                onClick: (event) => event.stopPropagation(),
+                className: "h-3 w-3 accent-primary",
+                "aria-label": `Select row ${displayIndex + 1}`
+              }
+            ) }),
+            /* @__PURE__ */ jsx12("td", { className: "w-8 border-r border-border-subtle px-2 py-1.5 text-right text-muted-foreground/30", children: displayIndex + 1 }),
+            rowPage.columns.map((columnName) => /* @__PURE__ */ jsx12(
+              "td",
+              {
+                className: "whitespace-nowrap border-r border-border-subtle px-3 py-1.5 text-foreground/80",
+                children: row[columnName] === null || row[columnName] === void 0 ? /* @__PURE__ */ jsx12("span", { className: "italic text-muted-foreground/30", children: "null" }) : formatCell(row[columnName])
+              },
+              columnName
+            ))
+          ]
+        },
+        index
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex shrink-0 items-center justify-between border-t border-border bg-card px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs9("span", { className: "font-mono text-[10px] text-muted-foreground", children: [
+        sorted.length.toLocaleString(),
+        " of",
+        " ",
+        approxRowCount !== void 0 ? `~${approxRowCount.toLocaleString()}` : sorted.length.toLocaleString(),
+        " ",
+        "rows",
+        tableName && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+          " \xB7 ",
+          tableName
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            disabled: !canGoPrevious,
+            onClick: onPrevious,
+            "aria-label": "Previous page",
+            className: "rounded-[2px] p-0.5 text-muted-foreground hover:bg-accent disabled:opacity-30",
+            children: /* @__PURE__ */ jsx12(ChevronLeft, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxs9("span", { className: "px-1 font-mono text-[10px] text-muted-foreground", children: [
+          "Page ",
+          page + 1
+        ] }),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            disabled: !canGoNext,
+            onClick: onNext,
+            "aria-label": "Next page",
+            className: "rounded-[2px] p-0.5 text-muted-foreground hover:bg-accent disabled:opacity-30",
+            children: /* @__PURE__ */ jsx12(ChevronRight2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/query-runner.tsx
+import { Play } from "lucide-react";
+import { useRef } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function QueryRunner({
+  sql,
+  onSqlChange,
+  onRun,
+  isRunning,
+  result,
+  error
+}) {
+  const canRun = !isRunning && sql.trim().length > 0;
+  const lineCount = sql.split("\n").length;
+  const gutterRef = useRef(null);
+  function handleKeyDown(event) {
+    if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+      event.preventDefault();
+      if (canRun) onRun();
+    }
+  }
+  function handleScroll(event) {
+    if (gutterRef.current) {
+      gutterRef.current.scrollTop = event.currentTarget.scrollTop;
+    }
+  }
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      "data-testid": "query-runner",
+      className: "flex h-full flex-col overflow-hidden rounded-[3px] border border-border",
+      children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsxs10(
+            "button",
+            {
+              type: "button",
+              onClick: onRun,
+              disabled: !canRun,
+              className: "flex items-center gap-1.5 rounded-[3px] bg-primary px-3 py-1 text-[11px] font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-50",
+              children: [
+                isRunning ? /* @__PURE__ */ jsx13(Spinner, { className: "h-2.5 w-2.5 text-primary-foreground" }) : /* @__PURE__ */ jsx13(Play, { className: "h-2.5 w-2.5" }),
+                isRunning ? "Running..." : "Run"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx13("span", { className: "hidden font-mono text-[10px] text-muted-foreground sm:inline", children: "\u2318 Enter" }),
+          /* @__PURE__ */ jsxs10("span", { className: "ml-auto font-mono text-[10px] text-muted-foreground", children: [
+            lineCount,
+            " line",
+            lineCount === 1 ? "" : "s"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex min-h-[8rem] flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx13(
+            "div",
+            {
+              ref: gutterRef,
+              "aria-hidden": "true",
+              className: "shrink-0 select-none overflow-hidden border-r border-border bg-background pr-3 pt-3 text-right font-mono text-[11px] text-muted-foreground/30",
+              style: { minWidth: "44px" },
+              children: Array.from({ length: lineCount }, (_, index) => /* @__PURE__ */ jsx13("div", { style: { lineHeight: "20px" }, children: index + 1 }, index))
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "textarea",
+            {
+              value: sql,
+              onChange: (event) => onSqlChange(event.target.value),
+              onKeyDown: handleKeyDown,
+              onScroll: handleScroll,
+              placeholder: "SELECT * FROM my_table LIMIT 10",
+              spellCheck: false,
+              className: "flex-1 resize-none overflow-auto bg-background p-3 font-mono text-[12px] leading-5 text-foreground outline-none",
+              style: { caretColor: "var(--c-blue)" }
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx13(
+          "p",
+          {
+            "data-testid": "query-error",
+            className: "border-t border-border px-3 py-2 font-mono text-[11px]",
+            style: { color: "var(--c-red)" },
+            children: error
+          }
+        ),
+        result && !error && /* @__PURE__ */ jsx13(
+          "div",
+          {
+            "data-testid": "query-result",
+            className: "max-h-64 shrink-0 overflow-auto border-t border-border",
+            children: result.rows.length === 0 ? /* @__PURE__ */ jsx13("p", { className: "p-3 font-mono text-[11px] text-muted-foreground", children: "Query returned no rows." }) : /* @__PURE__ */ jsxs10("table", { className: "w-full border-collapse font-mono text-[11px]", children: [
+              /* @__PURE__ */ jsx13("thead", { className: "sticky top-0 bg-card", children: /* @__PURE__ */ jsx13("tr", { children: result.columns.map((column) => /* @__PURE__ */ jsx13(
+                "th",
+                {
+                  className: "whitespace-nowrap border-b border-r border-border px-3 py-1.5 text-left font-medium text-muted-foreground",
+                  children: column
+                },
+                column
+              )) }) }),
+              /* @__PURE__ */ jsx13("tbody", { children: result.rows.map((row, rowIndex) => /* @__PURE__ */ jsx13("tr", { className: "border-b border-border-subtle", children: result.columns.map((column) => /* @__PURE__ */ jsx13(
+                "td",
+                {
+                  className: "whitespace-nowrap border-r border-border-subtle px-3 py-1.5 text-foreground/80",
+                  children: formatCell(row[column])
+                },
+                column
+              )) }, rowIndex)) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ConsoleLog,
+  FilesBrowser,
+  QueryRunner,
+  RowsTable,
+  SchemaGrid,
+  SchemaTree,
+  Sidebar,
+  Spinner,
+  StatusBar,
+  TabBar,
+  TableDetail,
+  TitleBar,
+  TypeIcon
+};
+//# sourceMappingURL=index.js.map