@rebasepro/studio 0.0.1-canary.eae7889 → 0.1.0

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@rebasepro/core"), require("react/jsx-runtime"), require("react"), require("@rebasepro/ui"), require("react-compiler-runtime"), require("lucide-react"), require("react-router-dom"), require("react-dom"), require("pgsql-ast-parser"), require("@rebasepro/utils"), require("prism-react-renderer"), require("@rebasepro/client"), require("@monaco-editor/react"), require("@rebasepro/types"), require("@xyflow/react"), require("@xyflow/react/dist/style.css"), require("@rebasepro/common"), require("dagre")) : typeof define === "function" && define.amd ? define(["exports", "@rebasepro/core", "react/jsx-runtime", "react", "@rebasepro/ui", "react-compiler-runtime", "lucide-react", "react-router-dom", "react-dom", "pgsql-ast-parser", "@rebasepro/utils", "prism-react-renderer", "@rebasepro/client", "@monaco-editor/react", "@rebasepro/types", "@xyflow/react", "@xyflow/react/dist/style.css", "@rebasepro/common", "dagre"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["Rebase collection editor"] = {}, global.core, global.jsxRuntime, global.React, global.ui, global.reactCompilerRuntime, global.lucideReact, global.reactRouterDom, global.reactDom, global.pgsqlAstParser, global.utils, global.prismReactRenderer, global.client, global.Editor, global.types, global.react, null, global.common, global.dagre));
-})(this, (function(exports2, core, jsxRuntime, React, ui, reactCompilerRuntime, lucideReact, reactRouterDom, reactDom, pgsqlAstParser, utils, prismReactRenderer, client, Editor, types, react, style_css, common, dagre) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@rebasepro/core"), require("react/jsx-runtime"), require("react"), require("@rebasepro/ui"), require("react-compiler-runtime"), require("lucide-react"), require("react-router-dom"), require("react-dom"), require("pgsql-ast-parser"), require("@rebasepro/utils"), require("prism-react-renderer"), require("@rebasepro/client"), require("@monaco-editor/react"), require("@rebasepro/types"), require("react-dropzone"), require("@xyflow/react"), require("@xyflow/react/dist/style.css"), require("@rebasepro/common"), require("dagre")) : typeof define === "function" && define.amd ? define(["exports", "@rebasepro/core", "react/jsx-runtime", "react", "@rebasepro/ui", "react-compiler-runtime", "lucide-react", "react-router-dom", "react-dom", "pgsql-ast-parser", "@rebasepro/utils", "prism-react-renderer", "@rebasepro/client", "@monaco-editor/react", "@rebasepro/types", "react-dropzone", "@xyflow/react", "@xyflow/react/dist/style.css", "@rebasepro/common", "dagre"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["Rebase collection editor"] = {}, global.core, global.jsxRuntime, global.React, global.ui, global.reactCompilerRuntime, global.lucideReact, global.reactRouterDom, global.reactDom, global.pgsqlAstParser, global.utils, global.prismReactRenderer, global.client, global.Editor, global.types, global.reactDropzone, global.react, null, global.common, global.dagre));
+})(this, (function(exports2, core, jsxRuntime, React, ui, reactCompilerRuntime, lucideReact, reactRouterDom, reactDom, pgsqlAstParser, utils, prismReactRenderer, client, Editor, types, reactDropzone, react, style_css, common, dagre) {
   "use strict";
   const SECTIONS = [{
     label: "Database",
@@ -84,7 +84,7 @@
     }]
   }];
   function StudioHomePage(t0) {
-    const $ = reactCompilerRuntime.c(29);
+    const $ = reactCompilerRuntime.c(30);
     const {
       additionalActions,
       additionalChildrenStart,
@@ -131,20 +131,27 @@
     const sectionProps = t3;
     const pluginActions = core.useSlot("home.actions", sectionProps);
     let t4;
-    if ($[6] !== additionalActions || $[7] !== pluginActions) {
-      t4 = (additionalActions || pluginActions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4 justify-end", children: [
+    if ($[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(core.BootstrapAdminBanner, {}) });
+      $[6] = t4;
+    } else {
+      t4 = $[6];
+    }
+    let t5;
+    if ($[7] !== additionalActions || $[8] !== pluginActions) {
+      t5 = (additionalActions || pluginActions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4 justify-end", children: [
         additionalActions,
         pluginActions
       ] });
-      $[6] = additionalActions;
-      $[7] = pluginActions;
-      $[8] = t4;
+      $[7] = additionalActions;
+      $[8] = pluginActions;
+      $[9] = t5;
     } else {
-      t4 = $[8];
+      t5 = $[9];
     }
-    let t5;
-    if ($[9] !== context || $[10] !== navigate) {
-      t5 = SECTIONS.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": section.label, children: [
+    let t6;
+    if ($[10] !== context || $[11] !== navigate) {
+      t6 = SECTIONS.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": section.label, children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", component: "h2", color: "secondary", className: "py-2 font-medium uppercase text-sm text-surface-600 dark:text-surface-400", children: section.label }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-2", children: section.tools.map((tool) => /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { onClick: () => {
           navigate(tool.path);
@@ -166,43 +173,43 @@
           }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRightIcon, { className: "text-primary", size: ui.iconSize.small }) }) })
         ] }) }, tool.path)) })
       ] }, section.label));
-      $[9] = context;
-      $[10] = navigate;
-      $[11] = t5;
-    } else {
-      t5 = $[11];
-    }
-    let t6;
-    if ($[12] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8 pt-2", children: t5 });
-      $[12] = t5;
-      $[13] = t6;
+      $[10] = context;
+      $[11] = navigate;
+      $[12] = t6;
     } else {
-      t6 = $[13];
+      t6 = $[12];
     }
     let t7;
-    if ($[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center mb-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", component: "h2", color: "secondary", className: "py-2 font-medium uppercase text-sm text-surface-600 dark:text-surface-400", children: "Quick Start" }) });
+    if ($[13] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8 pt-2", children: t6 });
+      $[13] = t6;
       $[14] = t7;
     } else {
       t7 = $[14];
     }
     let t8;
     if ($[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "body2", color: "secondary", className: "mb-4 max-w-2xl", children: [
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center mb-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", component: "h2", color: "secondary", className: "py-2 font-medium uppercase text-sm text-surface-600 dark:text-surface-400", children: "Quick Start" }) });
+      $[15] = t8;
+    } else {
+      t8 = $[15];
+    }
+    let t9;
+    if ($[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "body2", color: "secondary", className: "mb-4 max-w-2xl", children: [
         "Generate a fully-typed SDK from your collections with",
         " ",
         /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-emerald-400 font-mono text-xs bg-emerald-400/10 px-1.5 py-0.5 rounded", children: "npx rebase generate-sdk" }),
         " ",
         "and start querying your data with full TypeScript autocompletion."
       ] });
-      $[15] = t8;
+      $[16] = t9;
     } else {
-      t8 = $[15];
+      t9 = $[16];
     }
-    let t9;
-    if ($[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-surface-200/40 dark:border-surface-700/40 bg-surface-50 dark:bg-surface-900/80", children: [
+    let t10;
+    if ($[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2.5 border-b border-surface-200/40 dark:border-surface-700/40 bg-surface-50 dark:bg-surface-900/80", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 rounded-full bg-red-400/60" }),
@@ -213,63 +220,64 @@
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-surface-400 dark:text-surface-500", children: "TypeScript" })
       ] });
-      $[16] = t9;
+      $[17] = t10;
     } else {
-      t9 = $[16];
+      t10 = $[17];
     }
-    let t10;
-    if ($[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-10 mb-6", children: [
-        t7,
+    let t11;
+    if ($[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-10 mb-6", children: [
         t8,
+        t9,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-surface-200/40 dark:border-surface-700/40 bg-white dark:bg-surface-950 overflow-hidden", children: [
-          t9,
+          t10,
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4 overflow-x-auto text-[13px] leading-6 font-mono", children: /* @__PURE__ */ jsxRuntime.jsx(SyntaxHighlightedSnippet, {}) })
         ] })
       ] });
-      $[17] = t10;
+      $[18] = t11;
     } else {
-      t10 = $[17];
+      t11 = $[18];
     }
-    let t11;
-    if ($[18] !== sections) {
-      t11 = sections?.map(_temp$6);
-      $[18] = sections;
-      $[19] = t11;
+    let t12;
+    if ($[19] !== sections) {
+      t12 = sections?.map(_temp$7);
+      $[19] = sections;
+      $[20] = t12;
     } else {
-      t11 = $[19];
+      t12 = $[20];
     }
-    let t12;
-    if ($[20] !== additionalChildrenEnd || $[21] !== additionalChildrenStart || $[22] !== t11 || $[23] !== t4 || $[24] !== t6) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { maxWidth: "6xl", children: [
+    let t13;
+    if ($[21] !== additionalChildrenEnd || $[22] !== additionalChildrenStart || $[23] !== t12 || $[24] !== t5 || $[25] !== t7) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { maxWidth: "6xl", children: [
         t4,
+        t5,
         additionalChildrenStart,
-        t6,
-        t10,
+        t7,
         t11,
+        t12,
         additionalChildrenEnd
       ] });
-      $[20] = additionalChildrenEnd;
-      $[21] = additionalChildrenStart;
-      $[22] = t11;
-      $[23] = t4;
-      $[24] = t6;
-      $[25] = t12;
+      $[21] = additionalChildrenEnd;
+      $[22] = additionalChildrenStart;
+      $[23] = t12;
+      $[24] = t5;
+      $[25] = t7;
+      $[26] = t13;
     } else {
-      t12 = $[25];
+      t13 = $[26];
     }
-    let t13;
-    if ($[26] !== containerRef || $[27] !== t12) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "py-2 overflow-auto h-full w-full", children: t12 });
-      $[26] = containerRef;
-      $[27] = t12;
+    let t14;
+    if ($[27] !== containerRef || $[28] !== t13) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "py-2 overflow-auto h-full w-full", children: t13 });
+      $[27] = containerRef;
       $[28] = t13;
+      $[29] = t14;
     } else {
-      t13 = $[28];
+      t14 = $[29];
     }
-    return t13;
+    return t14;
   }
-  function _temp$6(s) {
+  function _temp$7(s) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-10", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", component: "h2", color: "secondary", className: "p-4 py-2 rounded font-medium uppercase text-sm text-surface-600 dark:text-surface-400", children: s.title }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: s.children })
@@ -897,12 +905,12 @@
             /* @__PURE__ */ jsxRuntime.jsx("svg", { className: ui.cls("w-3 h-3 mr-1 transition-transform shrink-0", expandedTables[`${schemaName}.${table.tableName}`] ? "rotate-90" : ""), fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-text-secondary dark:text-text-secondary-dark text-xs truncate flex-1 min-w-0", children: table.tableName }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-100 dark:bg-surface-950 px-1 gap-1 rounded transition-opacity", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "smallest", className: "transition-colors text-text-secondary hover:text-text-primary pointer-events-auto", onClick: (e) => {
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-100 dark:bg-surface-800 px-1 gap-1 rounded transition-opacity", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (e) => {
                 e.stopPropagation();
                 navigator.clipboard.writeText(table.tableName);
-              }, title: "CopyIcon table name", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, { size: ui.iconSize.smallest }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { trigger: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "smallest", className: "transition-colors text-text-secondary hover:text-text-primary pointer-events-auto", onClick: (e_0) => e_0.stopPropagation(), title: "Generate SQL templates", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVerticalIcon, { size: ui.iconSize.smallest }) }), children: [
+              }, title: "CopyIcon table name", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, { size: ui.iconSize.small }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, { trigger: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (e_0) => e_0.stopPropagation(), title: "Generate SQL templates", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVerticalIcon, { size: ui.iconSize.small }) }), children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, { dense: true, className: "text-xs", onClick: (e_1) => {
                   e_1.stopPropagation();
                   onTableClick?.(`SELECT * FROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} LIMIT 100;`);
@@ -939,7 +947,7 @@ WHERE id = ?;`);
             /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 mr-1.5 text-text-disabled dark:text-text-disabled-dark shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 4.5v15m6-15v15m-10.5-1.5h15c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125h-15c-.621 0-1.125.504-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125Z" }) }),
             /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-primary dark:text-text-primary-dark text-[11px] truncate flex-grow mr-2", children: col.name }),
             /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark text-[9px] truncate mr-1 uppercase shrink-0", title: col.dataType, children: col.dataType }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "smallest", className: "opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-50 dark:bg-surface-950 transition-colors pointer-events-auto", onClick: (e_6) => {
+            /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "smallest", className: "opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-50 dark:bg-surface-800 transition-colors pointer-events-auto", onClick: (e_6) => {
               e_6.stopPropagation();
               navigator.clipboard.writeText(col.name);
             }, title: "CopyIcon column name", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, { size: ui.iconSize.smallest }) })
@@ -1520,7 +1528,7 @@ WHERE id = ?;`);
     }
     let t37;
     if ($[67] !== expanded || $[68] !== hasChildren || $[69] !== plan.Plans) {
-      t37 = expanded && hasChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col space-y-2 mt-[-4px]", children: plan.Plans.map(_temp$5) });
+      t37 = expanded && hasChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col space-y-2 mt-[-4px]", children: plan.Plans.map(_temp$6) });
       $[67] = expanded;
       $[68] = hasChildren;
       $[69] = plan.Plans;
@@ -1547,7 +1555,7 @@ WHERE id = ?;`);
     }
     return t38;
   };
-  function _temp$5(childPlan, idx) {
+  function _temp$6(childPlan, idx) {
     return /* @__PURE__ */ jsxRuntime.jsx(ExplainVisualizer, { plan: childPlan, isRoot: false }, idx);
   }
   let VirtualTableInput = null;
@@ -1559,7 +1567,7 @@ WHERE id = ?;`);
   const STORAGE_KEY_TABS = "rebase_sql_tabs";
   const STORAGE_KEY_ACTIVE_TAB = "rebase_sql_active_tab";
   const FixedEditorOverlay = (t0) => {
-    const $ = reactCompilerRuntime.c(29);
+    const $ = reactCompilerRuntime.c(26);
     const {
       displayValue,
       onSave,
@@ -1650,90 +1658,70 @@ WHERE id = ?;`);
       t7 = $[9];
     }
     let t8;
-    if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    if ($[10] !== resolvedMaxHeight) {
       t8 = {
-        minHeight: "32px"
+        minHeight: "32px",
+        maxHeight: resolvedMaxHeight
       };
-      $[10] = t8;
+      $[10] = resolvedMaxHeight;
+      $[11] = t8;
     } else {
-      t8 = $[10];
+      t8 = $[11];
     }
     let t10;
     let t9;
-    if ($[11] !== resolvedMaxHeight) {
-      t9 = (e) => {
-        const val = e.target.value;
-        e.target.value = "";
-        e.target.value = val;
-        e.target.style.height = "auto";
-        e.target.style.height = `${Math.min(e.target.scrollHeight, resolvedMaxHeight)}px`;
-      };
-      t10 = (e_0) => {
-        e_0.target.style.height = "auto";
-        e_0.target.style.height = `${Math.min(e_0.target.scrollHeight, resolvedMaxHeight)}px`;
-      };
-      $[11] = resolvedMaxHeight;
-      $[12] = t10;
-      $[13] = t9;
-    } else {
-      t10 = $[12];
-      t9 = $[13];
-    }
-    let t11;
-    let t12;
-    if ($[14] !== onCancel || $[15] !== onSave) {
-      t11 = (e_1) => {
-        onSave(e_1.target.value || null);
+    if ($[12] !== onCancel || $[13] !== onSave) {
+      t9 = (e_0) => {
+        onSave(e_0.target.value || null);
         onCancel();
       };
-      t12 = (e_2) => {
-        if (e_2.key === "Enter" && !e_2.shiftKey) {
-          e_2.preventDefault();
-          onSave(e_2.currentTarget.value || null);
+      t10 = (e_1) => {
+        if (e_1.key === "Enter" && !e_1.shiftKey) {
+          e_1.preventDefault();
+          onSave(e_1.currentTarget.value || null);
           onCancel();
         }
-        if (e_2.key === "Escape") {
+        if (e_1.key === "Escape") {
           onCancel();
         }
       };
-      $[14] = onCancel;
-      $[15] = onSave;
-      $[16] = t11;
-      $[17] = t12;
+      $[12] = onCancel;
+      $[13] = onSave;
+      $[14] = t10;
+      $[15] = t9;
     } else {
-      t11 = $[16];
-      t12 = $[17];
+      t10 = $[14];
+      t9 = $[15];
     }
-    let t13;
-    if ($[18] !== displayValue || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t9) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsx("textarea", { className: "w-full h-full bg-transparent outline-none border-none ring-0 font-mono text-[13px] text-text-primary dark:text-text-primary-dark px-4 py-1.5 resize-none overflow-y-auto", defaultValue: displayValue, autoFocus: true, style: t8, onFocus: t9, onChange: t10, onBlur: t11, onKeyDown: t12 });
-      $[18] = displayValue;
-      $[19] = t10;
+    let t11;
+    if ($[16] !== displayValue || $[17] !== t10 || $[18] !== t8 || $[19] !== t9) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsx(ui.TextareaAutosize, { className: "w-full h-full bg-transparent outline-none border-none ring-0 font-mono text-[13px] text-text-primary dark:text-text-primary-dark px-4 py-1.5 resize-none overflow-y-auto", defaultValue: displayValue, autoFocus: true, style: t8, onFocus: _temp$5, onBlur: t9, onKeyDown: t10 });
+      $[16] = displayValue;
+      $[17] = t10;
+      $[18] = t8;
+      $[19] = t9;
       $[20] = t11;
-      $[21] = t12;
-      $[22] = t9;
-      $[23] = t13;
     } else {
-      t13 = $[23];
+      t11 = $[20];
     }
-    let t14;
-    if ($[24] !== t13 || $[25] !== t7) {
-      t14 = reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed z-[9999] bg-surface-50 dark:bg-surface-900 border-2 border-primary dark:border-primary-dark shadow-xl flex flex-col", style: t7, children: t13 }), document.body);
-      $[24] = t13;
-      $[25] = t7;
-      $[26] = t14;
+    let t12;
+    if ($[21] !== t11 || $[22] !== t7) {
+      t12 = reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed z-[9999] bg-surface-50 dark:bg-surface-900 border-2 border-primary dark:border-primary-dark shadow-xl flex flex-col", style: t7, children: t11 }), document.body);
+      $[21] = t11;
+      $[22] = t7;
+      $[23] = t12;
     } else {
-      t14 = $[26];
+      t12 = $[23];
     }
-    let t15;
-    if ($[27] !== t14) {
-      t15 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: anchorRef, className: "w-full h-full min-h-[20px]", children: t14 });
-      $[27] = t14;
-      $[28] = t15;
+    let t13;
+    if ($[24] !== t12) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: anchorRef, className: "w-full h-full min-h-[20px]", children: t12 });
+      $[24] = t12;
+      $[25] = t13;
     } else {
-      t15 = $[28];
+      t13 = $[25];
     }
-    return t15;
+    return t13;
   };
   const SQLEditor = () => {
     const {
@@ -2568,12 +2556,15 @@ WHERE id = ?;`);
             /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: handleAddTab, className: "ml-2 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { size: ui.iconSize.smallest }) })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-end pr-2 gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: t("studio_sql_format_sql"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: handlePrettify, className: "text-text-secondary hover:text-text-primary transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MenuIcon, { size: ui.iconSize.smallest }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: t("studio_sql_format_sql"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: handlePrettify, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MenuIcon, { size: ui.iconSize.smallest }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: "small", onClick: handleExplain, disabled: loading, children: t("studio_sql_explain") }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 px-2 cursor-pointer", onClick: () => setAutoLimit(!autoLimit), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 px-2", onClick: (e_14) => {
+              setAutoLimit(!autoLimit);
+              e_14.stopPropagation();
+            }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-[11px] text-text-secondary cursor-pointer select-none", children: t("studio_sql_limit_1000") }),
-              /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: autoLimit, onChange: (e_14) => setAutoLimit(e_14.target.checked), onClick: (e_15) => e_15.stopPropagation(), className: "w-3.5 h-3.5 rounded border-surface-300 text-primary focus:ring-primary cursor-pointer" })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: (e_15) => e_15.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { checked: autoLimit, onCheckedChange: setAutoLimit, size: "smallest", padding: false }) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1" }),
             /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: isFavorite ? t("studio_sql_remove_from_favorites") : t("studio_sql_add_to_favorites"), children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => {
@@ -2638,6 +2629,11 @@ WHERE id = ?;`);
       } })
     ] });
   };
+  function _temp$5(e) {
+    const val = e.target.value;
+    e.target.value = "";
+    e.target.value = val;
+  }
   const SQLEditor$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     SQLEditor
@@ -3269,7 +3265,7 @@ return result;`);
     return t8;
   }
   function AuthSimulationSelector(t0) {
-    const $ = reactCompilerRuntime.c(27);
+    const $ = reactCompilerRuntime.c(25);
     const {
       authMode,
       setAuthMode,
@@ -3290,77 +3286,65 @@ return result;`);
       t1 = $[0];
       t2 = $[1];
     }
-    let t3;
+    const t3 = authMode === "jwt" ? "outlined" : "outlined";
+    const t4 = authMode === "jwt" ? "primary" : "neutral";
+    let t5;
     if ($[2] !== setAuthMode) {
-      t3 = () => setAuthMode("jwt");
+      t5 = () => setAuthMode("jwt");
       $[2] = setAuthMode;
-      $[3] = t3;
+      $[3] = t5;
     } else {
-      t3 = $[3];
-    }
-    const t4 = authMode === "jwt" ? "bg-primary/15 text-primary dark:text-primary-dark border-primary/30 font-medium" : "border-surface-300 dark:border-surface-600 text-text-secondary dark:text-text-secondary-dark hover:border-primary/30";
-    let t5;
-    if ($[4] !== t4) {
-      t5 = ui.cls("px-3 py-1 text-xs rounded-full border transition-all", t4);
-      $[4] = t4;
-      $[5] = t5;
-    } else {
-      t5 = $[5];
+      t5 = $[3];
     }
     let t6;
-    if ($[6] !== t3 || $[7] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: t3, className: t5, children: "JWT Token" });
-      $[6] = t3;
-      $[7] = t5;
-      $[8] = t6;
-    } else {
-      t6 = $[8];
-    }
-    let t7;
-    if ($[9] !== setAuthMode) {
-      t7 = () => setAuthMode("none");
-      $[9] = setAuthMode;
-      $[10] = t7;
+    if ($[4] !== t3 || $[5] !== t4 || $[6] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: t3, color: t4, onClick: t5, className: "rounded-full !px-3 !py-1 !text-xs", children: "JWT Token" });
+      $[4] = t3;
+      $[5] = t4;
+      $[6] = t5;
+      $[7] = t6;
     } else {
-      t7 = $[10];
+      t6 = $[7];
     }
-    const t8 = authMode === "none" ? "bg-red-500/15 text-red-600 dark:text-red-400 border-red-500/30 font-medium" : "border-surface-300 dark:border-surface-600 text-text-secondary dark:text-text-secondary-dark hover:border-red-500/30";
+    const t7 = authMode === "none" ? "outlined" : "outlined";
+    const t8 = authMode === "none" ? "error" : "neutral";
     let t9;
-    if ($[11] !== t8) {
-      t9 = ui.cls("px-3 py-1 text-xs rounded-full border transition-all", t8);
-      $[11] = t8;
-      $[12] = t9;
+    if ($[8] !== setAuthMode) {
+      t9 = () => setAuthMode("none");
+      $[8] = setAuthMode;
+      $[9] = t9;
     } else {
-      t9 = $[12];
+      t9 = $[9];
     }
     let t10;
-    if ($[13] !== t7 || $[14] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: t7, className: t9, children: "No Auth" });
-      $[13] = t7;
-      $[14] = t9;
-      $[15] = t10;
+    if ($[10] !== t7 || $[11] !== t8 || $[12] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: t7, color: t8, onClick: t9, className: "rounded-full !px-3 !py-1 !text-xs", children: "No Auth" });
+      $[10] = t7;
+      $[11] = t8;
+      $[12] = t9;
+      $[13] = t10;
     } else {
-      t10 = $[15];
+      t10 = $[13];
     }
     let t11;
-    if ($[16] !== authMode || $[17] !== currentUser || $[18] !== loading || $[19] !== selectedUser || $[20] !== setSelectedUser || $[21] !== users) {
+    if ($[14] !== authMode || $[15] !== currentUser || $[16] !== loading || $[17] !== selectedUser || $[18] !== setSelectedUser || $[19] !== users) {
       t11 = authMode === "jwt" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-surface-300 dark:bg-surface-600 mx-1" }),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark text-xs font-medium", children: "Run as:" }),
         /* @__PURE__ */ jsxRuntime.jsx(core.UserSelectPopover, { selectedUser, onUserSelected: setSelectedUser, users, loading, currentUser })
       ] });
-      $[16] = authMode;
-      $[17] = currentUser;
-      $[18] = loading;
-      $[19] = selectedUser;
-      $[20] = setSelectedUser;
-      $[21] = users;
-      $[22] = t11;
+      $[14] = authMode;
+      $[15] = currentUser;
+      $[16] = loading;
+      $[17] = selectedUser;
+      $[18] = setSelectedUser;
+      $[19] = users;
+      $[20] = t11;
     } else {
-      t11 = $[22];
+      t11 = $[20];
     }
     let t12;
-    if ($[23] !== t10 || $[24] !== t11 || $[25] !== t6) {
+    if ($[21] !== t10 || $[22] !== t11 || $[23] !== t6) {
       t12 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
         t1,
         t2,
@@ -3368,12 +3352,12 @@ return result;`);
         t10,
         t11
       ] });
-      $[23] = t10;
-      $[24] = t11;
-      $[25] = t6;
-      $[26] = t12;
+      $[21] = t10;
+      $[22] = t11;
+      $[23] = t6;
+      $[24] = t12;
     } else {
-      t12 = $[26];
+      t12 = $[24];
     }
     return t12;
   }
@@ -5419,6 +5403,12 @@ return result;
   function _temp2$2(role) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.MultiSelectItem, { value: role, children: role }, role);
   }
+  function sanitizeSqlIdentifier(name) {
+    if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name)) {
+      throw new Error(`Invalid SQL identifier: "${name}". Only letters, digits, and underscores are allowed.`);
+    }
+    return `"${name}"`;
+  }
   const RLSEditor = ({
     apiUrl = ""
   }) => {
@@ -5694,6 +5684,30 @@ return result;
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark text-[11px]", children: "Total policies" }),
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "font-mono text-[13px] font-medium", children: rlsStats.totalPolicies })
               ] })
+            ] }),
+            rlsStats.total - rlsStats.enabled > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("p-2.5 rounded border border-yellow-200 dark:border-yellow-900/50 bg-yellow-50 dark:bg-yellow-900/20 flex items-start gap-2", ui.defaultBorderMixin), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { size: 14, className: "text-yellow-600 dark:text-yellow-500 mt-0.5 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "text-yellow-800 dark:text-yellow-400 text-[11px] font-semibold block", children: [
+                  rlsStats.total - rlsStats.enabled,
+                  " table",
+                  rlsStats.total - rlsStats.enabled > 1 ? "s" : "",
+                  " without RLS"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-yellow-700 dark:text-yellow-600 text-[10px] block mt-0.5", children: "These tables have no row-level access control. If auth enforcement is disabled, data may be publicly accessible." })
+              ] })
+            ] }),
+            rlsStats.enabled > 0 && rlsStats.enabled - rlsStats.withPolicies > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("p-2.5 rounded border border-blue-200 dark:border-blue-900/50 bg-blue-50 dark:bg-blue-900/20 flex items-start gap-2", ui.defaultBorderMixin), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldIcon, { size: 14, className: "text-blue-600 dark:text-blue-400 mt-0.5 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "text-blue-800 dark:text-blue-300 text-[11px] font-semibold block", children: [
+                  rlsStats.enabled - rlsStats.withPolicies,
+                  " table",
+                  rlsStats.enabled - rlsStats.withPolicies > 1 ? "s" : "",
+                  " with RLS but no policies"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-blue-700 dark:text-blue-500 text-[10px] block mt-0.5", children: "RLS is enabled but no permissive policies exist. All access is denied by default (Postgres deny-all)." })
+              ] })
             ] })
           ] })
         ] })
@@ -5710,7 +5724,7 @@ return result;
             const action = activeTableData.rlsEnabled ? "DISABLE" : "ENABLE";
             if (!confirm(`Are you sure you want to ${action.toLowerCase()} Row Level Security on "${table_3}"?`)) return;
             try {
-              await databaseAdmin.executeSql(`ALTER TABLE "${table_3}" ${action} ROW LEVEL SECURITY`);
+              await databaseAdmin.executeSql(`ALTER TABLE ${sanitizeSqlIdentifier(table_3)} ${action} ROW LEVEL SECURITY`);
               snackbarController.open({
                 type: "success",
                 message: `RLS ${action.toLowerCase()}d on ${table_3}`
@@ -5729,7 +5743,7 @@ return result;
           /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", color: "primary", disabled: !activeCollection, onClick: () => setEditingPolicy("new"), children: t("studio_rls_create_policy") })
         ] }) })
       ] }),
-      error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(core.ErrorView, { title: t("studio_rls_error"), error, onRetry: fetchRLSData }) }) : !activeTableData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex items-center justify-center text-text-disabled h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      isLoading && !activeTableData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "small" }) }) : error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 h-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(core.ErrorView, { title: t("studio_rls_error"), error, onRetry: fetchRLSData }) }) : !activeTableData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex items-center justify-center text-text-disabled h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-12 h-12 mx-auto mb-4 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", children: t("studio_rls_select_table") })
       ] }) }) : editingPolicy ? /* @__PURE__ */ jsxRuntime.jsx(PolicyEditor, { policy: editingPolicy === "new" ? void 0 : editingPolicy, schema: activeTableData.schemaName, table: activeTableData.tableName, onSave: async (newPolicy) => {
@@ -5848,7 +5862,7 @@ return result;
                 const table_4 = activeTableData.tableName;
                 if (!confirm(`Drop policy "${policy.policyname}" from table "${table_4}"?`)) return;
                 try {
-                  await databaseAdmin.executeSql(`DROP POLICY "${policy.policyname}" ON "${table_4}"`);
+                  await databaseAdmin.executeSql(`DROP POLICY ${sanitizeSqlIdentifier(policy.policyname)} ON ${sanitizeSqlIdentifier(table_4)}`);
                   snackbarController.open({
                     type: "success",
                     message: `Policy "${policy.policyname}" dropped`
@@ -5863,6 +5877,17 @@ return result;
               }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { size: ui.iconSize.smallest }) }) })
             ] })
           ] }, policy.policyname))
+        ] }),
+        activeTableData && mergedPolicies.length === 0 && activeTableData.rlsEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldIcon, { size: 40, className: "text-surface-300 dark:text-surface-600 mb-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "text-text-secondary dark:text-text-secondary-dark mb-2", children: "No policies defined" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark max-w-sm mb-4", children: "RLS is enabled on this table but no policies exist. All access is denied by default (Postgres deny-all). Create a policy to allow specific access." }),
+          activeCollection && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: "filled", color: "primary", onClick: () => setEditingPolicy("new"), children: t("studio_rls_create_policy") })
+        ] }),
+        activeTableData && mergedPolicies.length === 0 && !activeTableData.rlsEnabled && activeCollection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangleIcon, { size: 40, className: "text-yellow-400 dark:text-yellow-600 mb-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "text-text-secondary dark:text-text-secondary-dark mb-2", children: "No access control" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark max-w-sm", children: "This table has neither RLS nor policies. Enable RLS and create policies to restrict row-level access." })
         ] })
       ] }) }) })
     ] }) }) });
@@ -5945,570 +5970,157 @@ return result;
       }
     }, [uploading, onClose]);
     return /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open, onOpenChange: (o) => !o && handleClose(), maxWidth: "md", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { className: "p-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b border-surface-accent-200 dark:border-surface-accent-700", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "h6", children: "Upload Files" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark mt-1 block", children: [
-            "to ",
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-primary", children: [
-              "/",
-              currentPath || "root"
-            ] })
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogTitle, { children: [
+        "Upload Files",
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark mt-0.5 block", children: [
+          "to ",
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-primary", children: [
+            "/",
+            currentPath || "root"
           ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.FileUpload, { accept: {}, onFilesAdded: handleFilesAdded, size: "large", uploadDescription: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center pointer-events-none mt-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloudIcon, { className: "text-surface-accent-400 mb-2 w-8 h-8" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "h6", className: "font-bold", children: "Drop files here or click to browse" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 font-medium", children: "Any file type supported" })
-          ] }) }),
-          error && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-red-500 mt-2 block whitespace-pre-line", children: error }),
-          selectedFiles.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "text-surface-accent-500", children: [
-              "Selected files (",
-              selectedFiles.length,
-              ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.FileUpload, { onFilesAdded: handleFilesAdded, size: "large", uploadDescription: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center pointer-events-none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloudIcon, { className: "text-surface-accent-400 mb-2 w-8 h-8" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: "Drop files here or click to browse" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: "Any file type supported" })
+        ] }) }),
+        error && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-red-500 block whitespace-pre-line", children: error }),
+        selectedFiles.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", color: "secondary", children: [
+            "Selected files (",
+            selectedFiles.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-40 overflow-auto space-y-1", children: selectedFiles.map((file, index_0) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-2 rounded bg-surface-100 dark:bg-surface-800", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 mr-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "truncate", children: file.name }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", children: formatFileSize(file.size) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-40 overflow-auto space-y-1", children: selectedFiles.map((file, index_0) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex items-center justify-between p-2 rounded", "bg-surface-accent-50 dark:bg-surface-accent-800"), children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 mr-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "truncate", children: file.name }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500", children: formatFileSize(file.size) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: "small", onClick: (e) => {
-                e.stopPropagation();
-                handleRemoveFile(index_0);
-              }, disabled: uploading, children: "Remove" })
-            ] }, `${file.name}-${index_0}`)) })
-          ] })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: (e) => {
+              e.stopPropagation();
+              handleRemoveFile(index_0);
+            }, disabled: uploading, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { size: 14 }) })
+          ] }, `${file.name}-${index_0}`)) })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: handleClose, disabled: uploading, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", onClick: handleUpload, disabled: selectedFiles.length === 0 || uploading, children: uploading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "smallest" }),
-          "Uploading..."
-        ] }) : `Upload ${selectedFiles.length > 0 ? `(${selectedFiles.length})` : ""}` })
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", onClick: handleUpload, disabled: selectedFiles.length === 0 || uploading, startIcon: uploading ? /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloudIcon, { size: 14 }), children: uploading ? "Uploading..." : `Upload${selectedFiles.length > 0 ? ` (${selectedFiles.length})` : ""}` })
       ] })
     ] });
   }
-  function FilePreviewPanel(t0) {
-    const $ = reactCompilerRuntime.c(79);
-    const {
-      file,
-      onClose,
-      onDelete,
-      downloadUrl
-    } = t0;
+  function FilePreviewPanel({
+    file,
+    onClose,
+    onDelete,
+    downloadUrl
+  }) {
     file.contentType?.startsWith("image/");
     file.contentType?.startsWith("video/");
     file.contentType?.startsWith("audio/");
-    let t1;
-    if ($[0] !== file.contentType) {
-      t1 = getFileIcon(file.contentType);
-      $[0] = file.contentType;
-      $[1] = t1;
-    } else {
-      t1 = $[1];
-    }
-    const FileIconComponent = t1;
+    const FileIconComponent = getFileIcon(file.contentType);
     const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
-    let t2;
-    let t3;
-    if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t2 = ui.cls("flex flex-col h-full border-l", ui.defaultBorderMixin, "bg-white dark:bg-surface-950");
-      t3 = ui.cls("flex items-center justify-between p-3 border-b shrink-0", ui.defaultBorderMixin);
-      $[2] = t2;
-      $[3] = t3;
-    } else {
-      t2 = $[2];
-      t3 = $[3];
-    }
-    let t4;
-    if ($[4] !== file.name) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "font-medium truncate flex-1 mr-2", children: file.name });
-      $[4] = file.name;
-      $[5] = t4;
-    } else {
-      t4 = $[5];
-    }
-    let t5;
-    if ($[6] !== downloadUrl) {
-      t5 = downloadUrl && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Download", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => window.open(downloadUrl, "_blank"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { size: ui.iconSize.smallest }) }) });
-      $[6] = downloadUrl;
-      $[7] = t5;
-    } else {
-      t5 = $[7];
-    }
-    let t6;
-    if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t6 = () => setDeleteDialogOpen(true);
-      $[8] = t6;
-    } else {
-      t6 = $[8];
-    }
-    let t7;
-    if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Delete", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: t6, className: "text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { size: ui.iconSize.smallest }) }) });
-      $[9] = t7;
-    } else {
-      t7 = $[9];
-    }
-    let t8;
-    if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { size: ui.iconSize.smallest });
-      $[10] = t8;
-    } else {
-      t8 = $[10];
-    }
-    let t9;
-    if ($[11] !== onClose) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: onClose, children: t8 });
-      $[11] = onClose;
-      $[12] = t9;
-    } else {
-      t9 = $[12];
-    }
-    let t10;
-    if ($[13] !== t5 || $[14] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
-        t5,
-        t7,
-        t9
-      ] });
-      $[13] = t5;
-      $[14] = t9;
-      $[15] = t10;
-    } else {
-      t10 = $[15];
-    }
-    let t11;
-    if ($[16] !== t10 || $[17] !== t4) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t3, children: [
-        t4,
-        t10
-      ] });
-      $[16] = t10;
-      $[17] = t4;
-      $[18] = t11;
-    } else {
-      t11 = $[18];
-    }
-    let t12;
-    const ext = getExtension(file.name)?.toLowerCase() || "";
-    const isImage_0 = file.contentType?.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
-    const isVideo_0 = file.contentType?.startsWith("video/") || ["mp4", "webm", "ogg", "mov"].includes(ext);
-    const isAudio_0 = file.contentType?.startsWith("audio/") || ["mp3", "wav", "ogg", "m4a"].includes(ext);
-    const downloadUrl_0 = file.downloadUrl;
-    if (isImage_0 && downloadUrl_0) {
-      let t132;
-      if ($[19] !== downloadUrl_0 || $[20] !== file.name) {
-        t132 = /* @__PURE__ */ jsxRuntime.jsx("img", { src: downloadUrl_0, alt: file.name, className: "max-w-full max-h-[400px] object-contain rounded-md shadow-sm" });
-        $[19] = downloadUrl_0;
-        $[20] = file.name;
-        $[21] = t132;
-      } else {
-        t132 = $[21];
-      }
-      t12 = t132;
-    } else {
-      if (isVideo_0 && downloadUrl_0) {
-        let t132;
-        if ($[22] !== downloadUrl_0) {
-          t132 = /* @__PURE__ */ jsxRuntime.jsx("video", { src: downloadUrl_0, className: "max-w-full max-h-[400px] rounded-md", controls: true });
-          $[22] = downloadUrl_0;
-          $[23] = t132;
-        } else {
-          t132 = $[23];
-        }
-        t12 = t132;
-      } else {
-        if (isAudio_0 && downloadUrl_0) {
-          let t132;
-          if ($[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-            t132 = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Music2Icon, { className: "text-surface-accent-400 w-10 h-10" });
-            $[24] = t132;
-          } else {
-            t132 = $[24];
-          }
-          let t142;
-          if ($[25] !== downloadUrl_0) {
-            t142 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
-              t132,
+    const [urlCopied, setUrlCopied] = React.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex flex-col h-full border-l", ui.defaultBorderMixin, "bg-white dark:bg-surface-800"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex items-center justify-between p-3 border-b shrink-0", ui.defaultBorderMixin), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "font-medium truncate flex-1 mr-2", children: file.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+            downloadUrl && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Download", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => window.open(downloadUrl, "_blank"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.DownloadIcon, { size: ui.iconSize.smallest }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Delete", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => setDeleteDialogOpen(true), className: "text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { size: ui.iconSize.smallest }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { size: ui.iconSize.smallest }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("flex flex-col items-center justify-center min-h-[200px] p-4 bg-surface-50 dark:bg-surface-800 border-b", ui.defaultBorderMixin), children: (() => {
+          const ext = getExtension(file.name)?.toLowerCase() || "";
+          const isImage_0 = file.contentType?.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
+          const isVideo_0 = file.contentType?.startsWith("video/") || ["mp4", "webm", "ogg", "mov"].includes(ext);
+          const isAudio_0 = file.contentType?.startsWith("audio/") || ["mp3", "wav", "ogg", "m4a"].includes(ext);
+          const downloadUrl_0 = file.downloadUrl;
+          if (isImage_0 && downloadUrl_0) {
+            return /* @__PURE__ */ jsxRuntime.jsx("img", { src: downloadUrl_0, alt: file.name, className: "max-w-full max-h-[400px] object-contain rounded-md shadow-sm" });
+          } else if (isVideo_0 && downloadUrl_0) {
+            return /* @__PURE__ */ jsxRuntime.jsx("video", { src: downloadUrl_0, className: "max-w-full max-h-[400px] rounded-md", controls: true });
+          } else if (isAudio_0 && downloadUrl_0) {
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Music2Icon, { className: "text-surface-accent-400 w-10 h-10" }),
               /* @__PURE__ */ jsxRuntime.jsx("audio", { src: downloadUrl_0, controls: true, className: "w-full max-w-xs" })
             ] });
-            $[25] = downloadUrl_0;
-            $[26] = t142;
-          } else {
-            t142 = $[26];
-          }
-          t12 = t142;
-        } else {
-          let t132;
-          if ($[27] !== FileIconComponent) {
-            t132 = /* @__PURE__ */ jsxRuntime.jsx(FileIconComponent, { className: "w-10 h-10" });
-            $[27] = FileIconComponent;
-            $[28] = t132;
-          } else {
-            t132 = $[28];
-          }
-          let t142;
-          if ($[29] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-            t142 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark", children: "No preview available" });
-            $[29] = t142;
           } else {
-            t142 = $[29];
-          }
-          let t152;
-          if ($[30] !== t132) {
-            t152 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 text-surface-accent-400", children: [
-              t132,
-              t142
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 text-surface-accent-400", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(FileIconComponent, { className: "w-10 h-10" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark", children: "No preview available" })
             ] });
-            $[30] = t132;
-            $[31] = t152;
-          } else {
-            t152 = $[31];
           }
-          t12 = t152;
-        }
-      }
-    }
-    let t13;
-    if ($[32] !== t12) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center min-h-[200px] p-4 bg-surface-50 dark:bg-surface-900 border-b border-surface-accent-200 dark:border-surface-accent-700", children: t12 }) });
-      $[32] = t12;
-      $[33] = t13;
-    } else {
-      t13 = $[33];
-    }
-    let t14;
-    if ($[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t14 = /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark text-[10px] uppercase tracking-wider font-bold mb-1 block", children: "File Info" }) });
-      $[34] = t14;
-    } else {
-      t14 = $[34];
-    }
-    let t15;
-    if ($[35] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t15 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Name" });
-      $[35] = t15;
-    } else {
-      t15 = $[35];
-    }
-    let t16;
-    if ($[36] !== file.name) {
-      t16 = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        t15,
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] break-all", children: file.name })
-      ] });
-      $[36] = file.name;
-      $[37] = t16;
-    } else {
-      t16 = $[37];
-    }
-    let t17;
-    if ($[38] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t17 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Type" });
-      $[38] = t17;
-    } else {
-      t17 = $[38];
-    }
-    const t18 = file.contentType || "Unknown";
-    let t19;
-    if ($[39] !== t18) {
-      t19 = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        t17,
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px]", children: t18 })
-      ] });
-      $[39] = t18;
-      $[40] = t19;
-    } else {
-      t19 = $[40];
-    }
-    let t20;
-    if ($[41] !== file.size) {
-      t20 = file.size !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Size" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px]", children: formatFileSize(file.size) })
-      ] });
-      $[41] = file.size;
-      $[42] = t20;
-    } else {
-      t20 = $[42];
-    }
-    let t21;
-    if ($[43] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t21 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Extension" });
-      $[43] = t21;
-    } else {
-      t21 = $[43];
-    }
-    let t22;
-    if ($[44] !== file.name) {
-      t22 = getExtension(file.name) || "—";
-      $[44] = file.name;
-      $[45] = t22;
-    } else {
-      t22 = $[45];
-    }
-    let t23;
-    if ($[46] !== t22) {
-      t23 = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        t21,
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] font-mono", children: t22 })
-      ] });
-      $[46] = t22;
-      $[47] = t23;
-    } else {
-      t23 = $[47];
-    }
-    let t24;
-    if ($[48] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t24 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Path" });
-      $[48] = t24;
-    } else {
-      t24 = $[48];
-    }
-    let t25;
-    if ($[49] !== file.fullPath) {
-      t25 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2", children: [
-        t24,
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] font-mono break-all", children: file.fullPath })
-      ] });
-      $[49] = file.fullPath;
-      $[50] = t25;
-    } else {
-      t25 = $[50];
-    }
-    let t26;
-    if ($[51] !== t16 || $[52] !== t19 || $[53] !== t20 || $[54] !== t23 || $[55] !== t25) {
-      t26 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
-        t16,
-        t19,
-        t20,
-        t23,
-        t25
-      ] });
-      $[51] = t16;
-      $[52] = t19;
-      $[53] = t20;
-      $[54] = t23;
-      $[55] = t25;
-      $[56] = t26;
-    } else {
-      t26 = $[56];
-    }
-    let t27;
-    if ($[57] !== downloadUrl) {
-      t27 = downloadUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px] block mb-1", children: "URL" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2 rounded bg-surface-100 dark:bg-surface-950 cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors", onClick: () => {
-          navigator.clipboard.writeText(downloadUrl);
-        }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "font-mono text-[11px] break-all text-primary", children: downloadUrl }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark text-[10px] block mt-1", children: "Click to copy" })
-        ] })
-      ] });
-      $[57] = downloadUrl;
-      $[58] = t27;
-    } else {
-      t27 = $[58];
-    }
-    let t28;
-    if ($[59] !== t26 || $[60] !== t27) {
-      t28 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 space-y-3", children: [
-        t14,
-        t26,
-        t27
-      ] });
-      $[59] = t26;
-      $[60] = t27;
-      $[61] = t28;
-    } else {
-      t28 = $[61];
-    }
-    let t29;
-    if ($[62] !== t11 || $[63] !== t13 || $[64] !== t28) {
-      t29 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t2, children: [
-        t11,
-        t13,
-        t28
-      ] });
-      $[62] = t11;
-      $[63] = t13;
-      $[64] = t28;
-      $[65] = t29;
-    } else {
-      t29 = $[65];
-    }
-    let t30;
-    if ($[66] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t30 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle1", className: "mb-2", children: "Delete File?" });
-      $[66] = t30;
-    } else {
-      t30 = $[66];
-    }
-    let t31;
-    if ($[67] !== file.name) {
-      t31 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { children: [
-        t30,
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { className: "text-surface-accent-600 dark:text-surface-accent-400", children: [
-          'Are you sure you want to delete "',
-          file.name,
-          '"? This action cannot be undone.'
+        })() }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark text-[10px] uppercase tracking-wider font-bold mb-1 block", children: "File Info" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Name" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] break-all", children: file.name })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Type" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px]", children: file.contentType || "Unknown" })
+            ] }),
+            file.size !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Size" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px]", children: formatFileSize(file.size) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Extension" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] font-mono", children: getExtension(file.name) || "—" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Path" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] font-mono break-all", children: file.fullPath })
+            ] })
+          ] }),
+          downloadUrl && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px] block mb-1", children: "URL" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex items-center gap-2 p-2 rounded cursor-pointer transition-colors", "bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700"), onClick: () => {
+              const fullUrl = downloadUrl.startsWith("http") ? downloadUrl : `${window.location.origin}${downloadUrl.startsWith("/") ? "" : "/"}${downloadUrl}`;
+              navigator.clipboard.writeText(fullUrl).then(() => {
+                setUrlCopied(true);
+                setTimeout(() => setUrlCopied(false), 2e3);
+              });
+            }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "font-mono text-[11px] truncate flex-1 min-w-0 text-primary", children: (() => {
+                const fullUrl_0 = downloadUrl.startsWith("http") ? downloadUrl : `${window.location.origin}${downloadUrl.startsWith("/") ? "" : "/"}${downloadUrl}`;
+                return fullUrl_0;
+              })() }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: urlCopied ? "Copied!" : "Copy URL", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: urlCopied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { size: 14, className: "text-green-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CopyIcon, { size: 14, className: "text-surface-accent-400" }) }) })
+            ] })
+          ] })
         ] })
-      ] });
-      $[67] = file.name;
-      $[68] = t31;
-    } else {
-      t31 = $[68];
-    }
-    let t32;
-    if ($[69] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t32 = /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => setDeleteDialogOpen(false), children: "Cancel" });
-      $[69] = t32;
-    } else {
-      t32 = $[69];
-    }
-    let t33;
-    if ($[70] !== onDelete) {
-      t33 = /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
-        t32,
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", color: "error", onClick: () => {
-          setDeleteDialogOpen(false);
-          onDelete();
-        }, children: "Delete" })
-      ] });
-      $[70] = onDelete;
-      $[71] = t33;
-    } else {
-      t33 = $[71];
-    }
-    let t34;
-    if ($[72] !== deleteDialogOpen || $[73] !== t31 || $[74] !== t33) {
-      t34 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: [
-        t31,
-        t33
-      ] });
-      $[72] = deleteDialogOpen;
-      $[73] = t31;
-      $[74] = t33;
-      $[75] = t34;
-    } else {
-      t34 = $[75];
-    }
-    let t35;
-    if ($[76] !== t29 || $[77] !== t34) {
-      t35 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        t29,
-        t34
-      ] });
-      $[76] = t29;
-      $[77] = t34;
-      $[78] = t35;
-    } else {
-      t35 = $[78];
-    }
-    return t35;
-  }
-  function StorageSidebar(t0) {
-    const $ = reactCompilerRuntime.c(19);
-    const {
-      folders,
-      currentPath,
-      onNavigate,
-      loading
-    } = t0;
-    breadcrumbSegments(currentPath);
-    let t1;
-    let t2;
-    if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t1 = ui.cls("flex flex-col h-full w-full bg-white dark:bg-surface-950 border-r", ui.defaultBorderMixin);
-      t2 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900 shrink-0", ui.defaultBorderMixin), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "Folders" }) });
-      $[0] = t1;
-      $[1] = t2;
-    } else {
-      t1 = $[0];
-      t2 = $[1];
-    }
-    const t3 = currentPath === "" || !currentPath ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light" : "hover:bg-surface-100 dark:hover:bg-surface-950 text-text-secondary dark:text-text-secondary-dark";
-    let t4;
-    if ($[2] !== t3) {
-      t4 = ui.cls("flex items-center p-1.5 cursor-pointer rounded transition-colors", t3);
-      $[2] = t3;
-      $[3] = t4;
-    } else {
-      t4 = $[3];
-    }
-    let t5;
-    if ($[4] !== onNavigate) {
-      t5 = () => onNavigate("");
-      $[4] = onNavigate;
-      $[5] = t5;
-    } else {
-      t5 = $[5];
-    }
-    let t6;
-    let t7;
-    if ($[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HomeIcon, { size: ui.iconSize.smallest, className: "mr-1.5 shrink-0" });
-      t7 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-xs truncate", children: "Root" });
-      $[6] = t6;
-      $[7] = t7;
-    } else {
-      t6 = $[6];
-      t7 = $[7];
-    }
-    let t8;
-    if ($[8] !== t4 || $[9] !== t5) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t4, onClick: t5, children: [
-        t6,
-        t7
-      ] });
-      $[8] = t4;
-      $[9] = t5;
-      $[10] = t8;
-    } else {
-      t8 = $[10];
-    }
-    let t9;
-    if ($[11] !== currentPath || $[12] !== folders || $[13] !== loading || $[14] !== onNavigate) {
-      t9 = loading && folders.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "small" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 space-y-0.5", children: folders.map((folder) => {
-        const isSelected = currentPath === folder.fullPath;
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex items-center p-1.5 cursor-pointer rounded transition-colors group", isSelected ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light" : "hover:bg-surface-100 dark:hover:bg-surface-950 text-text-secondary dark:text-text-secondary-dark"), onClick: () => onNavigate(folder.fullPath), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderIcon, { size: ui.iconSize.smallest, className: "mr-1.5 shrink-0 text-amber-500 dark:text-amber-400" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-xs truncate flex-1 min-w-0", children: folder.name })
-        ] }, folder.fullPath);
-      }) });
-      $[11] = currentPath;
-      $[12] = folders;
-      $[13] = loading;
-      $[14] = onNavigate;
-      $[15] = t9;
-    } else {
-      t9 = $[15];
-    }
-    let t10;
-    if ($[16] !== t8 || $[17] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t1, children: [
-        t2,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: [
-          t8,
-          t9
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle1", className: "mb-2", children: "Delete File?" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { className: "text-surface-accent-600 dark:text-surface-accent-400", children: [
+            'Are you sure you want to delete "',
+            file.name,
+            '"? This action cannot be undone.'
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => setDeleteDialogOpen(false), children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "filled", color: "error", onClick: () => {
+            setDeleteDialogOpen(false);
+            onDelete();
+          }, children: "Delete" })
         ] })
-      ] });
-      $[16] = t8;
-      $[17] = t9;
-      $[18] = t10;
-    } else {
-      t10 = $[18];
-    }
-    return t10;
+      ] })
+    ] });
   }
   const StorageView = () => {
     const storageSource = core.useStorageSource();
     const snackbarController = core.useSnackbarController();
-    const [currentPath, setCurrentPath] = React.useState("");
+    const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
+    const currentPath = searchParams.get("path") || "";
     const [loading, setLoading] = React.useState(true);
     const [error, setError] = React.useState(null);
     const [folders, setFolders] = React.useState([]);
@@ -6517,25 +6129,24 @@ return result;
     const [selectedDownloadUrl, setSelectedDownloadUrl] = React.useState(null);
     const [uploadDialogOpen, setUploadDialogOpen] = React.useState(false);
     const [viewMode, setViewMode] = React.useState("grid");
-    const [sidebarSize, setSidebarSize] = React.useState(() => {
-      try {
-        const saved = localStorage.getItem("rebase_storage_sidebar_size");
-        return saved !== null ? parseFloat(saved) : 18;
-      } catch {
-        return 18;
-      }
-    });
+    const [selectedPaths, setSelectedPaths] = React.useState(/* @__PURE__ */ new Set());
+    const lastClickedRef = React.useRef(null);
+    const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+    const [deleteDialogTarget, setDeleteDialogTarget] = React.useState(null);
+    const [deleting, setDeleting] = React.useState(false);
+    const [newFolderDialogOpen, setNewFolderDialogOpen] = React.useState(false);
+    const [newFolderName, setNewFolderName] = React.useState("");
+    const [creatingFolder, setCreatingFolder] = React.useState(false);
+    const apiConfig = core.useApiConfig();
+    const storageSourceRef = React.useRef(storageSource);
     React.useEffect(() => {
-      try {
-        localStorage.setItem("rebase_storage_sidebar_size", sidebarSize.toString());
-      } catch {
-      }
-    }, [sidebarSize]);
+      storageSourceRef.current = storageSource;
+    }, [storageSource]);
     const fetchContents = React.useCallback(async (path) => {
       setLoading(true);
       setError(null);
       try {
-        const result = await storageSource.listObjects(path);
+        const result = await storageSourceRef.current.listObjects(path);
         const folderItems = (result.prefixes ?? []).map((ref) => ({
           name: ref.name,
           fullPath: ref.fullPath,
@@ -6543,7 +6154,7 @@ return result;
         }));
         const fileItems = await Promise.all((result.items ?? []).map(async (ref_0) => {
           try {
-            const downloadConfig = await storageSource.getSignedUrl(ref_0.fullPath);
+            const downloadConfig = await storageSourceRef.current.getSignedUrl(ref_0.fullPath);
             return {
               name: ref_0.name,
               fullPath: ref_0.fullPath,
@@ -6568,38 +6179,84 @@ return result;
       } finally {
         setLoading(false);
       }
-    }, [storageSource]);
+    }, []);
     React.useEffect(() => {
       fetchContents(currentPath);
     }, [currentPath, fetchContents]);
     const handleNavigate = React.useCallback((path_0) => {
-      setCurrentPath(path_0);
+      if (!path_0) {
+        setSearchParams({});
+      } else {
+        setSearchParams({
+          path: path_0
+        });
+      }
       setSelectedFile(null);
       setSelectedDownloadUrl(null);
-    }, []);
+      setSelectedPaths(/* @__PURE__ */ new Set());
+      lastClickedRef.current = null;
+    }, [setSearchParams]);
     const handleNavigateUp = React.useCallback(() => {
       const parts = currentPath.split("/").filter(Boolean);
       parts.pop();
       handleNavigate(parts.join("/"));
     }, [currentPath, handleNavigate]);
-    const handleSelectFile = React.useCallback(async (file) => {
-      setSelectedFile(file);
-      if (file.downloadUrl) {
-        setSelectedDownloadUrl(file.downloadUrl);
+    const allItems = React.useMemo(() => [...folders, ...files], [folders, files]);
+    const handleItemClick = React.useCallback((item, e_0) => {
+      const path_1 = item.fullPath;
+      if (e_0.metaKey || e_0.ctrlKey) {
+        setSelectedPaths((prev) => {
+          const next = new Set(prev);
+          if (next.has(path_1)) next.delete(path_1);
+          else next.add(path_1);
+          return next;
+        });
+        lastClickedRef.current = path_1;
+      } else if (e_0.shiftKey && lastClickedRef.current) {
+        const allPaths = allItems.map((i) => i.fullPath);
+        const anchorIdx = allPaths.indexOf(lastClickedRef.current);
+        const currentIdx = allPaths.indexOf(path_1);
+        if (anchorIdx >= 0 && currentIdx >= 0) {
+          const [start, end] = anchorIdx < currentIdx ? [anchorIdx, currentIdx] : [currentIdx, anchorIdx];
+          setSelectedPaths((prev_0) => {
+            const next_0 = new Set(prev_0);
+            for (let i_0 = start; i_0 <= end; i_0++) next_0.add(allPaths[i_0]);
+            return next_0;
+          });
+        }
       } else {
-        try {
-          const config = await storageSource.getSignedUrl(file.fullPath);
-          setSelectedDownloadUrl(config.url);
-        } catch {
+        setSelectedPaths(/* @__PURE__ */ new Set([path_1]));
+        lastClickedRef.current = path_1;
+        if (!item.isFolder) {
+          setSelectedFile(item);
+          if (item.downloadUrl) {
+            setSelectedDownloadUrl(item.downloadUrl);
+          } else {
+            storageSourceRef.current.getSignedUrl(item.fullPath).then((config) => setSelectedDownloadUrl(config.url)).catch(() => setSelectedDownloadUrl(null));
+          }
+        } else {
+          setSelectedFile(null);
           setSelectedDownloadUrl(null);
         }
       }
-    }, [storageSource]);
+    }, [allItems]);
+    const handleItemDoubleClick = React.useCallback((item_0) => {
+      if (item_0.isFolder) {
+        handleNavigate(item_0.fullPath);
+      } else {
+        setSelectedFile(item_0);
+        if (item_0.downloadUrl) {
+          setSelectedDownloadUrl(item_0.downloadUrl);
+        } else {
+          storageSourceRef.current.getSignedUrl(item_0.fullPath).then((config_0) => setSelectedDownloadUrl(config_0.url)).catch(() => setSelectedDownloadUrl(null));
+        }
+      }
+    }, [handleNavigate]);
     const handleUpload = React.useCallback(async (uploadFiles) => {
-      for (const file_0 of uploadFiles) {
-        const key = currentPath ? `${currentPath}/${file_0.name}` : file_0.name;
-        await storageSource.putObject({
-          file: file_0,
+      for (const file of uploadFiles) {
+        const key = currentPath ? `${currentPath}/${file.name}` : file.name;
+        await storageSourceRef.current.putObject({
+          file,
           key
         });
       }
@@ -6607,25 +6264,220 @@ return result;
         type: "success",
         message: `${uploadFiles.length} file${uploadFiles.length > 1 ? "s" : ""} uploaded successfully`
       });
-      fetchContents(currentPath);
-    }, [storageSource, currentPath, snackbarController, fetchContents]);
+      await fetchContents(currentPath);
+    }, [currentPath, snackbarController, fetchContents]);
+    const handleCreateFolder = React.useCallback(async () => {
+      if (!newFolderName.trim() || !apiConfig?.apiUrl) return;
+      const name = newFolderName.trim();
+      if (name.includes("/") || name.includes("\\")) {
+        snackbarController.open({
+          type: "error",
+          message: "Folder name cannot contain slashes"
+        });
+        return;
+      }
+      const existingFolder = folders.find((f) => f.name === name);
+      if (existingFolder) {
+        snackbarController.open({
+          type: "error",
+          message: `Folder "${name}" already exists`
+        });
+        return;
+      }
+      setCreatingFolder(true);
+      try {
+        const folderPath = currentPath ? `default/${currentPath}/${name}` : `default/${name}`;
+        const token = apiConfig.getAuthToken ? await apiConfig.getAuthToken() : null;
+        const response = await fetch(`${apiConfig.apiUrl}/api/storage/folder`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...token ? {
+              "Authorization": `Bearer ${token}`
+            } : {}
+          },
+          body: JSON.stringify({
+            path: folderPath
+          })
+        });
+        if (!response.ok) {
+          const err = await response.json().catch(() => ({
+            error: "Failed to create folder"
+          }));
+          throw new Error(err.error || "Failed to create folder");
+        }
+        snackbarController.open({
+          type: "success",
+          message: `Folder "${name}" created`
+        });
+        setNewFolderDialogOpen(false);
+        setNewFolderName("");
+        await fetchContents(currentPath);
+      } catch (e_1) {
+        snackbarController.open({
+          type: "error",
+          message: e_1 instanceof Error ? e_1.message : String(e_1)
+        });
+      } finally {
+        setCreatingFolder(false);
+      }
+    }, [newFolderName, currentPath, apiConfig, snackbarController, fetchContents, folders]);
+    const handleDropFiles = React.useCallback(async (droppedFiles) => {
+      if (droppedFiles.length === 0) return;
+      try {
+        for (const file_0 of droppedFiles) {
+          const key_0 = currentPath ? `${currentPath}/${file_0.name}` : file_0.name;
+          await storageSourceRef.current.putObject({
+            file: file_0,
+            key: key_0
+          });
+        }
+        snackbarController.open({
+          type: "success",
+          message: `${droppedFiles.length} file${droppedFiles.length > 1 ? "s" : ""} uploaded successfully`
+        });
+        await fetchContents(currentPath);
+      } catch (e_2) {
+        snackbarController.open({
+          type: "error",
+          message: e_2 instanceof Error ? e_2.message : String(e_2)
+        });
+      }
+    }, [currentPath, snackbarController, fetchContents]);
+    const {
+      getRootProps: getDropRootProps,
+      getInputProps: getDropInputProps,
+      isDragActive
+    } = reactDropzone.useDropzone({
+      onDrop: handleDropFiles,
+      noClick: true,
+      noKeyboard: true,
+      noDragEventsBubbling: true
+    });
+    const deleteFolderRecursive = React.useCallback(async (prefix) => {
+      const result_0 = await storageSourceRef.current.listObjects(prefix);
+      for (const item_1 of result_0.items ?? []) {
+        await storageSourceRef.current.deleteObject(item_1.fullPath);
+      }
+      for (const sub of result_0.prefixes ?? []) {
+        await deleteFolderRecursive(sub.fullPath);
+      }
+      try {
+        await storageSourceRef.current.deleteObject(prefix);
+      } catch {
+      }
+    }, []);
     const handleDeleteFile = React.useCallback(async (file_1) => {
       try {
-        await storageSource.deleteObject(file_1.fullPath);
+        if (file_1.isFolder) {
+          await deleteFolderRecursive(file_1.fullPath);
+        } else {
+          await storageSourceRef.current.deleteObject(file_1.fullPath);
+        }
         snackbarController.open({
           type: "success",
           message: `"${file_1.name}" deleted`
         });
         setSelectedFile(null);
         setSelectedDownloadUrl(null);
+        setSelectedPaths((prev_1) => {
+          const next_1 = new Set(prev_1);
+          next_1.delete(file_1.fullPath);
+          return next_1;
+        });
         fetchContents(currentPath);
-      } catch (e_0) {
+      } catch (e_3) {
         snackbarController.open({
           type: "error",
-          message: e_0 instanceof Error ? e_0.message : String(e_0)
+          message: e_3 instanceof Error ? e_3.message : String(e_3)
         });
       }
-    }, [storageSource, currentPath, snackbarController, fetchContents]);
+    }, [currentPath, snackbarController, fetchContents, deleteFolderRecursive]);
+    const handleBulkDelete = React.useCallback(async () => {
+      setDeleting(true);
+      try {
+        const items = allItems.filter((i_1) => selectedPaths.has(i_1.fullPath));
+        for (const item_2 of items) {
+          if (item_2.isFolder) {
+            await deleteFolderRecursive(item_2.fullPath);
+          } else {
+            await storageSourceRef.current.deleteObject(item_2.fullPath);
+          }
+        }
+        snackbarController.open({
+          type: "success",
+          message: `${items.length} item${items.length !== 1 ? "s" : ""} deleted`
+        });
+        setSelectedPaths(/* @__PURE__ */ new Set());
+        setSelectedFile(null);
+        setSelectedDownloadUrl(null);
+        await fetchContents(currentPath);
+      } catch (e_4) {
+        snackbarController.open({
+          type: "error",
+          message: e_4 instanceof Error ? e_4.message : String(e_4)
+        });
+      } finally {
+        setDeleting(false);
+        setDeleteDialogOpen(false);
+        setDeleteDialogTarget(null);
+      }
+    }, [allItems, selectedPaths, currentPath, snackbarController, fetchContents, deleteFolderRecursive]);
+    const handleConfirmDeleteFolder = React.useCallback(async () => {
+      if (!deleteDialogTarget || deleteDialogTarget === "selection") return;
+      setDeleting(true);
+      try {
+        await deleteFolderRecursive(deleteDialogTarget.fullPath);
+        snackbarController.open({
+          type: "success",
+          message: `Folder "${deleteDialogTarget.name}" deleted`
+        });
+        setSelectedPaths((prev_2) => {
+          const next_2 = new Set(prev_2);
+          next_2.delete(deleteDialogTarget.fullPath);
+          return next_2;
+        });
+        await fetchContents(currentPath);
+      } catch (e_5) {
+        snackbarController.open({
+          type: "error",
+          message: e_5 instanceof Error ? e_5.message : String(e_5)
+        });
+      } finally {
+        setDeleting(false);
+        setDeleteDialogOpen(false);
+        setDeleteDialogTarget(null);
+      }
+    }, [deleteDialogTarget, currentPath, snackbarController, fetchContents, deleteFolderRecursive]);
+    const handleSelectAll = React.useCallback(() => {
+      if (selectedPaths.size === allItems.length) {
+        setSelectedPaths(/* @__PURE__ */ new Set());
+      } else {
+        setSelectedPaths(new Set(allItems.map((i_2) => i_2.fullPath)));
+      }
+    }, [allItems, selectedPaths]);
+    React.useEffect(() => {
+      const handler = (e_6) => {
+        if (deleteDialogOpen || uploadDialogOpen || newFolderDialogOpen) return;
+        if ((e_6.metaKey || e_6.ctrlKey) && e_6.key === "a") {
+          e_6.preventDefault();
+          handleSelectAll();
+        }
+        if (e_6.key === "Escape") {
+          setSelectedPaths(/* @__PURE__ */ new Set());
+          setSelectedFile(null);
+          setSelectedDownloadUrl(null);
+        }
+        if ((e_6.key === "Delete" || e_6.key === "Backspace") && selectedPaths.size > 0 && !e_6.metaKey && !e_6.ctrlKey) {
+          if (e_6.target?.tagName === "INPUT" || e_6.target?.tagName === "TEXTAREA") return;
+          e_6.preventDefault();
+          setDeleteDialogTarget("selection");
+          setDeleteDialogOpen(true);
+        }
+      };
+      window.addEventListener("keydown", handler);
+      return () => window.removeEventListener("keydown", handler);
+    }, [handleSelectAll, selectedPaths, deleteDialogOpen, uploadDialogOpen, newFolderDialogOpen]);
     const handleRefresh = React.useCallback(() => {
       fetchContents(currentPath);
     }, [currentPath, fetchContents]);
@@ -6640,43 +6492,74 @@ return result;
       if (error) {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex items-center justify-center p-6 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(core.ErrorView, { title: "Error loading storage", error, onRetry: handleRefresh }) });
       }
-      const allItems = [...folders, ...files];
       if (allItems.length === 0) {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex items-center justify-center text-text-disabled dark:text-text-disabled-dark", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-12 h-12 mx-auto mb-4 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", children: "This folder is empty" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { className: "mt-3", onClick: () => setUploadDialogOpen(true), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { size: ui.iconSize.smallest }),
-            "Upload files"
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", onClick: () => {
+              setNewFolderName("");
+              setNewFolderDialogOpen(true);
+            }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderPlusIcon, { size: ui.iconSize.smallest }),
+              "New folder"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: () => setUploadDialogOpen(true), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, { size: ui.iconSize.smallest }),
+              "Upload files"
+            ] })
           ] })
         ] }) });
       }
       if (viewMode === "list") {
         return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: ui.cls("border-b text-left text-[10px] uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", ui.defaultBorderMixin), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-2 font-bold", children: "Name" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "pl-3 pr-0 py-2 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { size: "small", checked: allItems.length > 0 && selectedPaths.size === allItems.length, indeterminate: selectedPaths.size > 0 && selectedPaths.size < allItems.length, onCheckedChange: handleSelectAll }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-2 font-bold", children: "Name" }),
             /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-2 font-bold w-24", children: "Type" }),
-            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-2 font-bold w-24 text-right", children: "Size" })
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-2 font-bold w-24 text-right", children: "Size" }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-2 w-10" })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-            folders.map((folder) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-surface-100 dark:hover:bg-surface-950 cursor-pointer transition-colors border-b border-surface-100 dark:border-surface-950/50", onClick: () => handleNavigate(folder.fullPath), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderIcon, { size: ui.iconSize.smallest, className: "text-amber-500 dark:text-amber-400 shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] font-medium truncate", children: folder.name })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark", children: "Folder" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2.5 text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark", children: "—" }) })
-            ] }, folder.fullPath)),
+            folders.map((folder) => {
+              const isChecked = selectedPaths.has(folder.fullPath);
+              return /* @__PURE__ */ jsxRuntime.jsxs("tr", { "data-storage-item": true, className: ui.cls("cursor-pointer transition-colors border-b group", ui.defaultBorderMixin, isChecked ? "bg-primary/5 dark:bg-primary/10" : "hover:bg-surface-100 dark:hover:bg-surface-800"), onClick: (e_7) => handleItemClick(folder, e_7), onDoubleClick: () => handleItemDoubleClick(folder), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pl-3 pr-0 py-2.5", onClick: (e_8) => e_8.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { size: "small", checked: isChecked, onCheckedChange: () => {
+                  setSelectedPaths((prev_3) => {
+                    const next_3 = new Set(prev_3);
+                    if (next_3.has(folder.fullPath)) next_3.delete(folder.fullPath);
+                    else next_3.add(folder.fullPath);
+                    return next_3;
+                  });
+                } }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-2.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderIcon, { size: ui.iconSize.smallest, className: "text-amber-500 dark:text-amber-400 shrink-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] font-medium truncate", children: folder.name })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark", children: "Folder" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2.5 text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark", children: "—" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-2.5" })
+              ] }, folder.fullPath);
+            }),
             files.map((file_2) => {
               const FileIconComp = getFileIcon(file_2.contentType);
-              const isSelected = selectedFile?.fullPath === file_2.fullPath;
-              return /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: ui.cls("cursor-pointer transition-colors border-b border-surface-100 dark:border-surface-950/50", isSelected ? "bg-primary/5 dark:bg-primary/10" : "hover:bg-surface-100 dark:hover:bg-surface-950"), onClick: () => handleSelectFile(file_2), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              const isChecked_0 = selectedPaths.has(file_2.fullPath);
+              return /* @__PURE__ */ jsxRuntime.jsxs("tr", { "data-storage-item": true, className: ui.cls("cursor-pointer transition-colors border-b group", ui.defaultBorderMixin, isChecked_0 ? "bg-primary/5 dark:bg-primary/10" : "hover:bg-surface-100 dark:hover:bg-surface-800"), onClick: (e_9) => handleItemClick(file_2, e_9), onDoubleClick: () => handleItemDoubleClick(file_2), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "pl-3 pr-0 py-2.5", onClick: (e_10) => e_10.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { size: "small", checked: isChecked_0, onCheckedChange: () => {
+                  setSelectedPaths((prev_4) => {
+                    const next_4 = new Set(prev_4);
+                    if (next_4.has(file_2.fullPath)) next_4.delete(file_2.fullPath);
+                    else next_4.add(file_2.fullPath);
+                    return next_4;
+                  });
+                } }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-2.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(FileIconComp, { size: ui.iconSize.smallest, className: "text-surface-accent-400 shrink-0" }),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] truncate", children: file_2.name })
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark", children: getExtension(file_2.name) || file_2.contentType?.split("/")[1]?.toUpperCase() || "—" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2.5 text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark font-mono text-[11px]", children: file_2.size !== void 0 ? formatFileSize(file_2.size) : "—" }) })
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-2.5 text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark font-mono text-[11px]", children: file_2.size !== void 0 ? formatFileSize(file_2.size) : "—" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-2 py-2.5", onClick: (e_11) => e_11.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "smallest", className: "opacity-0 group-hover:opacity-100 transition-opacity", onClick: () => handleDeleteFile(file_2), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { size: 14 }) }) })
               ] }, file_2.fullPath);
             })
           ] })
@@ -6685,10 +6568,13 @@ return result;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow overflow-auto p-4", children: [
         folders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-[10px] uppercase tracking-wider font-bold text-text-disabled dark:text-text-disabled-dark mb-2 block", children: "Folders" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3", children: folders.map((folder_0) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("rounded-lg p-3 cursor-pointer transition-all duration-150 border", ui.defaultBorderMixin, "hover:bg-surface-100 dark:hover:bg-surface-950 hover:shadow-sm", "flex items-center gap-2"), onClick: () => handleNavigate(folder_0.fullPath), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderIcon, { size: ui.iconSize.smallest, className: "text-amber-500 dark:text-amber-400 shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] font-medium truncate", children: folder_0.name })
-          ] }, folder_0.fullPath)) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3 grid-cols-[repeat(auto-fill,minmax(140px,1fr))]", children: folders.map((folder_0) => {
+            const isChecked_1 = selectedPaths.has(folder_0.fullPath);
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-storage-item": true, className: ui.cls("rounded-lg p-3 cursor-pointer border", "transition-colors duration-150", ui.defaultBorderMixin, "hover:bg-surface-100 dark:hover:bg-surface-800 hover:shadow-sm", "flex items-center gap-2", isChecked_1 && "ring-2 ring-primary bg-primary/5 dark:bg-primary/10"), onClick: (e_12) => handleItemClick(folder_0, e_12), onDoubleClick: () => handleItemDoubleClick(folder_0), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderIcon, { size: ui.iconSize.smallest, className: "text-amber-500 dark:text-amber-400 shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[13px] font-medium truncate", children: folder_0.name })
+            ] }, folder_0.fullPath);
+          }) })
         ] }),
         files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "text-[10px] uppercase tracking-wider font-bold text-text-disabled dark:text-text-disabled-dark mb-2 block", children: [
@@ -6696,16 +6582,15 @@ return result;
             files.length,
             ")"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3", children: files.map((file_3) => {
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3 grid-cols-[repeat(auto-fill,minmax(140px,1fr))]", children: files.map((file_3) => {
             const FileIconComp_0 = getFileIcon(file_3.contentType);
             const ext = getExtension(file_3.name)?.toLowerCase() || "";
             const isImage = file_3.contentType?.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
-            const isSelected_0 = selectedFile?.fullPath === file_3.fullPath;
-            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("rounded-lg overflow-hidden cursor-pointer transition-all duration-150 border group", ui.defaultBorderMixin, "hover:shadow-md hover:-translate-y-0.5", isSelected_0 && "ring-2 ring-primary"), onClick: () => handleSelectFile(file_3), children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square relative overflow-hidden bg-surface-100 dark:bg-surface-950 flex items-center justify-center", children: [
-                isImage && file_3.downloadUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: file_3.downloadUrl, alt: file_3.name, className: "w-full h-full object-cover transition-transform duration-200 group-hover:scale-105", loading: "lazy" }) : /* @__PURE__ */ jsxRuntime.jsx(FileIconComp_0, { className: "text-surface-accent-400 dark:text-surface-accent-500 w-8 h-8" }),
-                getExtension(file_3.name) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-1.5 right-1.5 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase bg-black/50 text-white backdrop-blur-sm", children: getExtension(file_3.name) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("absolute inset-0 bg-black/0 group-hover:bg-black/10", "transition-colors duration-200") })
+            const isChecked_2 = selectedPaths.has(file_3.fullPath);
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-storage-item": true, className: ui.cls("rounded-lg overflow-hidden cursor-pointer border", "transition-shadow duration-150", ui.defaultBorderMixin, "hover:shadow-md", isChecked_2 && "ring-2 ring-primary"), onClick: (e_13) => handleItemClick(file_3, e_13), onDoubleClick: () => handleItemDoubleClick(file_3), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square relative overflow-hidden bg-surface-100 dark:bg-surface-800 flex items-center justify-center", children: [
+                isImage && file_3.downloadUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: file_3.downloadUrl, alt: file_3.name, className: "w-full h-full object-cover", loading: "lazy" }) : /* @__PURE__ */ jsxRuntime.jsx(FileIconComp_0, { className: "text-surface-accent-400 dark:text-surface-accent-500 w-8 h-8" }),
+                getExtension(file_3.name) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-1.5 right-1.5 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase bg-black/50 text-white backdrop-blur-sm", children: getExtension(file_3.name) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-2.5", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", className: "text-[12px] font-medium truncate text-surface-900 dark:text-white", children: file_3.name }),
@@ -6716,37 +6601,79 @@ return result;
         ] })
       ] });
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full bg-white dark:bg-surface-950 overflow-hidden text-text-primary dark:text-text-primary-dark", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.ResizablePanels, { orientation: "horizontal", panelSizePercent: sidebarSize, onPanelSizeChange: setSidebarSize, minPanelSizePx: 180, firstPanel: /* @__PURE__ */ jsxRuntime.jsx(StorageSidebar, { folders, currentPath, onNavigate: handleNavigate, loading }), secondPanel: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full bg-white dark:bg-surface-800 overflow-hidden text-text-primary dark:text-text-primary-dark", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow flex flex-col min-w-0 h-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex items-center justify-between pr-2 border-b bg-white dark:bg-surface-950 shrink-0", ui.defaultBorderMixin), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex items-center justify-between pr-2 border-b bg-white dark:bg-surface-800 shrink-0 h-10", ui.defaultBorderMixin), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-grow overflow-hidden px-3 py-2", children: [
               currentPath && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Go up", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: handleNavigateUp, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { size: ui.iconSize.smallest }) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5 overflow-x-auto no-scrollbar", children: segments.map((seg, i) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-                i > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark mx-0.5", children: "/" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: "small", className: ui.cls("px-1.5 py-0.5 min-h-0 min-w-0 h-6 text-xs whitespace-nowrap normal-case font-normal", i === segments.length - 1 ? "text-text-primary dark:text-text-primary-dark font-medium" : "text-text-secondary dark:text-text-secondary-dark"), onClick: () => handleNavigate(seg.path), children: seg.label })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0.5 overflow-x-auto no-scrollbar", children: segments.map((seg, i_3) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+                i_3 > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark mx-0.5", children: "/" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", size: "small", className: ui.cls("px-1.5 py-0.5 min-h-0 min-w-0 h-6 text-xs whitespace-nowrap normal-case font-normal", i_3 === segments.length - 1 ? "text-text-primary dark:text-text-primary-dark font-medium" : "text-text-secondary dark:text-text-secondary-dark"), onClick: () => handleNavigate(seg.path), children: seg.label })
               ] }, seg.path)) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-              !loading && /* @__PURE__ */ jsxRuntime.jsxs(ui.Chip, { size: "small", className: "shrink-0 text-[10px]", children: [
+              selectedPaths.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "body2", className: "text-[13px] font-medium whitespace-nowrap", children: [
+                  selectedPaths.size,
+                  " selected"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { size: "small", variant: "text", onClick: () => {
+                  setDeleteDialogTarget("selection");
+                  setDeleteDialogOpen(true);
+                }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { size: 14, className: "mr-1" }),
+                  "Delete"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { size: "small", variant: "text", onClick: () => {
+                  setSelectedPaths(/* @__PURE__ */ new Set());
+                  setSelectedFile(null);
+                  setSelectedDownloadUrl(null);
+                }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { size: 14, className: "mr-1" }),
+                  "Deselect"
+                ] })
+              ] }) : !loading ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Chip, { size: "small", className: "shrink-0 text-[10px]", children: [
                 files.length,
                 " file",
                 files.length !== 1 ? "s" : "",
                 folders.length > 0 ? `, ${folders.length} folder${folders.length !== 1 ? "s" : ""}` : ""
-              ] })
+              ] }) : null
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-end gap-1.5 pr-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Grid view", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => setViewMode("grid"), className: ui.cls(viewMode === "grid" && "bg-surface-100 dark:bg-surface-950"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGridIcon, { size: ui.iconSize.smallest }) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "List view", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => setViewMode("list"), className: ui.cls(viewMode === "list" && "bg-surface-100 dark:bg-surface-950"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListIcon, { size: ui.iconSize.smallest }) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-0.5" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Grid view", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => setViewMode("grid"), className: ui.cls(viewMode === "grid" && "bg-surface-100 dark:bg-surface-800"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGridIcon, { size: ui.iconSize.smallest }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "List view", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => setViewMode("list"), className: ui.cls(viewMode === "list" && "bg-surface-100 dark:bg-surface-800"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListIcon, { size: ui.iconSize.smallest }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("h-4 w-px mx-0.5", ui.defaultBorderMixin, "bg-surface-200 dark:bg-surface-700") }),
               /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Refresh", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: handleRefresh, disabled: loading, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCwIcon, { size: ui.iconSize.smallest }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "New folder", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => {
+                setNewFolderName("");
+                setNewFolderDialogOpen(true);
+              }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderPlusIcon, { size: ui.iconSize.smallest }) }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { size: "small", color: "primary", onClick: () => setUploadDialogOpen(true), children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloudIcon, { size: ui.iconSize.smallest, className: "mr-1" }),
                 "Upload"
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow flex flex-col overflow-hidden min-h-0", children: renderContents() }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("px-4 py-1.5 border-t bg-surface-50 dark:bg-surface-900 flex items-center justify-between shrink-0", ui.defaultBorderMixin), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { ...getDropRootProps(), className: "flex-grow flex flex-col overflow-hidden min-h-0 relative", onClick: (e_14) => {
+            const target = e_14.target;
+            if (!target.closest("[data-storage-item]") && selectedPaths.size > 0) {
+              setSelectedPaths(/* @__PURE__ */ new Set());
+              setSelectedFile(null);
+              setSelectedDownloadUrl(null);
+            }
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("input", { ...getDropInputProps() }),
+            renderContents(),
+            isDragActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-primary/5 dark:bg-primary/10 backdrop-blur-[2px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 p-6 rounded-xl border-2 border-dashed border-primary bg-white/80 dark:bg-surface-900/80", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloudIcon, { className: "w-10 h-10 text-primary" }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "text-primary font-semibold", children: "Drop files to upload" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", color: "secondary", children: [
+                "to /",
+                currentPath || "root"
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("px-4 py-1.5 border-t bg-surface-50 dark:bg-surface-800 flex items-center justify-between shrink-0", ui.defaultBorderMixin), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-[11px]", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-disabled dark:text-text-disabled-dark font-bold uppercase tracking-tighter", children: "Path" }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-text-secondary dark:text-text-secondary-dark", children: [
@@ -6754,18 +6681,78 @@ return result;
                 currentPath || ""
               ] })
             ] }),
-            selectedFile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[11px] text-text-secondary dark:text-text-secondary-dark", children: [
+            selectedPaths.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[11px] text-text-secondary dark:text-text-secondary-dark", children: [
+              selectedPaths.size,
+              " item",
+              selectedPaths.size !== 1 ? "s" : "",
+              " selected"
+            ] }) : selectedFile ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[11px] text-text-secondary dark:text-text-secondary-dark", children: [
               "Selected: ",
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono", children: selectedFile.name })
-            ] })
+            ] }) : null
           ] })
         ] }),
         selectedFile && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-80 lg:w-96 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(FilePreviewPanel, { file: selectedFile, downloadUrl: selectedDownloadUrl, onClose: () => {
           setSelectedFile(null);
           setSelectedDownloadUrl(null);
         }, onDelete: () => handleDeleteFile(selectedFile) }) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(UploadDialog, { open: uploadDialogOpen, currentPath, onClose: () => setUploadDialogOpen(false), onUpload: handleUpload })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(UploadDialog, { open: uploadDialogOpen, currentPath, onClose: () => setUploadDialogOpen(false), onUpload: handleUpload }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open: deleteDialogOpen, onOpenChange: (open) => {
+        if (!open && !deleting) {
+          setDeleteDialogOpen(false);
+          setDeleteDialogTarget(null);
+        }
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle1", className: "font-semibold mb-2", children: deleteDialogTarget === "selection" ? `Delete ${selectedPaths.size} item${selectedPaths.size !== 1 ? "s" : ""}?` : deleteDialogTarget ? `Delete folder "${deleteDialogTarget.name}"?` : "Delete?" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", color: "secondary", children: deleteDialogTarget === "selection" ? "This will permanently delete all selected files and folders, including their contents. This action cannot be undone." : "This will permanently delete the folder and all of its contents. This action cannot be undone." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => {
+            setDeleteDialogOpen(false);
+            setDeleteDialogTarget(null);
+          }, disabled: deleting, children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { color: "error", loading: deleting, onClick: deleteDialogTarget === "selection" ? handleBulkDelete : handleConfirmDeleteFolder, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { size: 14, className: "mr-1" }),
+            "Delete"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Dialog, { open: newFolderDialogOpen, onOpenChange: (open_0) => {
+        if (!open_0 && !creatingFolder) {
+          setNewFolderDialogOpen(false);
+          setNewFolderName("");
+        }
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle1", className: "font-semibold mb-4", children: "New Folder" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { autoFocus: true, size: "small", label: "Folder name", value: newFolderName, onChange: (e_15) => setNewFolderName(e_15.target.value), onKeyDown: (e_16) => {
+            if (e_16.key === "Enter" && newFolderName.trim()) {
+              e_16.preventDefault();
+              handleCreateFolder();
+            }
+          }, disabled: creatingFolder, placeholder: "Enter folder name" }),
+          currentPath && /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", color: "secondary", className: "mt-2", children: [
+            "Will be created in ",
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+              "/",
+              currentPath,
+              "/"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogActions, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "text", onClick: () => {
+            setNewFolderDialogOpen(false);
+            setNewFolderName("");
+          }, disabled: creatingFolder, children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.LoadingButton, { color: "primary", loading: creatingFolder, disabled: !newFolderName.trim(), onClick: handleCreateFolder, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderPlusIcon, { size: 14, className: "mr-1" }),
+            "Create"
+          ] })
+        ] })
+      ] })
     ] });
   };
   const StorageView$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -8127,7 +8114,7 @@ return result;
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", children: "Tables" }),
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-[10px] text-text-disabled dark:text-text-disabled-dark font-mono", children: stats.tables })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 border-b border-surface-200/40 dark:border-surface-700/40", children: /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { size: "smallest", placeholder: "Filter tables…", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), inputClassName: "text-xs" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 border-b border-surface-200/40 dark:border-surface-700/40", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SearchBar, { size: "smallest", placeholder: "Filter tables…", onTextSearch: (val) => setSearchQuery(val ?? ""), innerClassName: "text-xs" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow overflow-y-auto no-scrollbar p-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: filteredCollections.map((collection) => {
           const table = collection.table ?? collection.slug;
@@ -8183,8 +8170,8 @@ return result;
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", className: "font-mono text-text-secondary dark:text-text-secondary-dark", children: "Schema Visualizer" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center bg-surface-100 dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Left to right layout", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setDirection("LR"), className: ui.cls("px-2 py-1 text-[10px] font-mono rounded-l-md transition-colors", direction === "LR" ? "bg-primary text-white" : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-700"), children: "LR" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Top to bottom layout", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setDirection("TB"), className: ui.cls("px-2 py-1 text-[10px] font-mono rounded-r-md transition-colors", direction === "TB" ? "bg-primary text-white" : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-700"), children: "TB" }) })
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Left to right layout", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: direction === "LR" ? "filled" : "text", color: direction === "LR" ? "primary" : "neutral", onClick: () => setDirection("LR"), className: "!rounded-r-none !px-2 !py-1 !text-[10px] !font-mono", children: "LR" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Top to bottom layout", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { size: "small", variant: direction === "TB" ? "filled" : "text", color: direction === "TB" ? "primary" : "neutral", onClick: () => setDirection("TB"), className: "!rounded-l-none !px-2 !py-1 !text-[10px] !font-mono", children: "TB" }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-0.5" }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Fit to view", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: handleFitView, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) }) }) }),
@@ -9212,10 +9199,10 @@ return result;
       } }),
       hasBody && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark text-xs font-semibold uppercase tracking-wider mb-2 block", children: "Request Body" }),
-        /* @__PURE__ */ jsxRuntime.jsx("textarea", { value: body, onChange: (e) => {
+        /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { multiline: true, minRows: 10, value: body, onChange: (e) => {
           setBody(e.target.value);
           setValidationError(null);
-        }, rows: 10, spellCheck: false, className: ui.cls("w-full font-mono text-xs p-3 rounded-lg resize-y", "bg-surface-50 dark:bg-surface-900", validationError ? "border-red-500 focus:ring-red-500/30" : ui.cls("border focus:ring-primary/30 dark:focus:ring-primary-dark/30", ui.defaultBorderMixin), "text-text-primary dark:text-text-primary-dark", "focus:outline-none focus:ring-2", "transition-all") }),
+        }, spellCheck: false, error: !!validationError, className: "w-full", inputClassName: "font-mono text-xs p-3 resize-y" }),
         validationError && /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-red-500 mt-1 block text-xs", children: validationError })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-surface-100 dark:bg-surface-900 p-3", children: [
@@ -9269,7 +9256,7 @@ return result;
             /* @__PURE__ */ jsxRuntime.jsx("code", { className: "text-xs font-mono font-semibold", children: p.name }),
             p.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-0.5 text-xs", children: "*" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: p.description ?? p.name, value: values[p.name] ?? "", onChange: (e) => onChange(p.name, e.target.value), className: ui.cls("flex-1 px-3 py-1.5 text-xs rounded-lg font-mono", "bg-surface-50 dark:bg-surface-900", "border", ui.defaultBorderMixin, "text-text-primary dark:text-text-primary-dark", "placeholder:text-text-secondary/50", "focus:outline-none focus:ring-2 focus:ring-primary/30", "transition-all") })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { size: "small", placeholder: p.description ?? p.name, value: values[p.name] ?? "", onChange: (e) => onChange(p.name, e.target.value), className: "flex-1", inputClassName: "font-mono text-xs" })
         ] }, p.name);
         $[6] = onChange;
         $[7] = values;
@@ -9333,7 +9320,7 @@ return result;
     }
     let t3;
     if ($[3] !== onAdd) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onAdd, className: "text-xs text-primary dark:text-primary-dark hover:underline flex items-center gap-1 font-medium", children: [
+      t3 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", size: "small", color: "primary", onClick: onAdd, className: "text-xs p-0 min-h-0", children: [
         t2,
         " Add Header"
       ] });
@@ -9359,9 +9346,9 @@ return result;
       let t62;
       if ($[12] !== onChange || $[13] !== onRemove) {
         t62 = (v, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: "Header name", value: v.key, onChange: (e) => onChange(i, e.target.value, v.value), className: ui.cls("w-1/3 px-3 py-1.5 text-xs rounded-lg font-mono", "bg-surface-50 dark:bg-surface-900", "border", ui.defaultBorderMixin, "text-text-primary dark:text-text-primary-dark", "placeholder:text-text-secondary/50", "focus:outline-none focus:ring-2 focus:ring-primary/30", "transition-all") }),
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: "Value", value: v.value, onChange: (e_0) => onChange(i, v.key, e_0.target.value), className: ui.cls("flex-1 px-3 py-1.5 text-xs rounded-lg font-mono", "bg-surface-50 dark:bg-surface-900", "border", ui.defaultBorderMixin, "text-text-primary dark:text-text-primary-dark", "placeholder:text-text-secondary/50", "focus:outline-none focus:ring-2 focus:ring-primary/30", "transition-all") }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onRemove(i), className: "p-1.5 text-text-secondary hover:text-red-500 rounded transition-colors flex items-center justify-center shrink-0", title: "Remove", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { size: ui.iconSize.small }) })
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { size: "small", placeholder: "Header name", value: v.key, onChange: (e) => onChange(i, e.target.value, v.value), className: "w-1/3", inputClassName: "font-mono text-xs" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.TextField, { size: "small", placeholder: "Value", value: v.value, onChange: (e_0) => onChange(i, v.key, e_0.target.value), className: "flex-1", inputClassName: "font-mono text-xs" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", onClick: () => onRemove(i), className: "text-text-secondary hover:text-red-500 shrink-0", title: "Remove", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { size: ui.iconSize.small }) })
         ] }, i);
         $[12] = onChange;
         $[13] = onRemove;
@@ -9573,17 +9560,17 @@ return result;
             "v",
             spec.info.version
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SearchBar, { placeholder: "Filter endpoints…", size: "small", onTextSearch: (val) => setSidebarFilter(val || "") }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SearchBar, { placeholder: "Filter endpoints…", size: "small", onTextSearch: (val) => setSidebarFilter(val ?? "") }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto px-2 pb-4", children: [
           filteredGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "px-2 py-1.5 text-text-secondary dark:text-text-secondary-dark uppercase tracking-wider font-semibold text-[10px]", children: group.tag }),
             group.endpoints.map((ep) => {
               const isSelected = selectedEndpoint?.id === ep.id;
-              return /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => {
+              return /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "text", color: "neutral", fullWidth: true, onClick: () => {
                 setSelectedEndpoint(ep);
                 setTryItOpen(false);
-              }, className: ui.cls("w-full flex items-center justify-between gap-2 px-2.5 py-1.5 rounded-lg text-left text-sm transition-all", "hover:bg-surface-200 dark:hover:bg-surface-800", isSelected ? "bg-surface-200 dark:bg-surface-800 font-medium" : "text-text-primary dark:text-text-primary-dark"), children: [
+              }, className: ui.cls("!justify-between !px-2.5 !py-1.5 !text-left !text-sm", isSelected ? "bg-surface-200 dark:bg-surface-800 font-medium" : "text-text-primary dark:text-text-primary-dark"), children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[13px] opacity-90", children: ep.summary || ep.shortPath }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: ui.cls("text-[10px] font-bold uppercase shrink-0", METHOD_COLORS[ep.method] ?? "text-text-secondary"), children: ep.method })
               ] }, ep.id);