@mdxui/do 2.1.1 → 4.0.0

package/dist/chunk-7UFINK3Q.js

@@ -0,0 +1,1994 @@
+import { useNamespaces, useTypes } from './chunk-NA652ART.js';
+import { useCreateThing, useThings, useThing, useUpdateThing, useDeleteThing } from './chunk-5SHZZC7L.js';
+import { useDO } from './chunk-WMNT4OIE.js';
+import { cn } from './chunk-Y52IEYVM.js';
+import * as React4 from 'react';
+import { parseQuery, applyQueryFilter, DataSidebar, DataSidebarTrigger, QuerySearch, ViewSwitcher, DataFilterPopover, DatabaseListView, DatabaseTableView, DatabaseCardView, DatabaseCodeView, applyFilters, useEditHistory, DatabaseSidebar, TableEditorToolbar, DatabaseGrid, QueryView, FormatView, ColumnEditorPanel, TableCreatorPanel, DocumentSidebar, DocumentViewToolbar, DocumentEditor, FunctionSidebar, FunctionViewToolbar, SDKEditor } from '@mdxui/admin';
+export { DataFilterPopover, DataSidebar, DataSidebarTrigger, FILTER_OPERATOR_OPTIONS } from '@mdxui/admin';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Input, Textarea, DialogFooter, Button, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, Badge, ScrollArea, SheetFooter, Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuItem, Toaster } from '@mdxui/primitives';
+import { Hash, Save, Pencil, Copy, Shapes, X, Trash2, Columns3, Plus, MoreVertical, Download, RefreshCw, Database, ExternalLink, Calendar, Clock } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { toast } from 'sonner';
+
+function CreateDialog({
+  open,
+  onOpenChange,
+  namespace,
+  defaultType,
+  types,
+  onCreated
+}) {
+  const [selectedType, setSelectedType] = React4.useState(defaultType ?? "");
+  const [name, setName] = React4.useState("");
+  const [dataJson, setDataJson] = React4.useState("{}");
+  const [jsonError, setJsonError] = React4.useState(null);
+  const createMutation = useCreateThing();
+  React4.useEffect(() => {
+    if (open) {
+      setSelectedType(defaultType ?? "");
+      setName("");
+      setDataJson("{}");
+      setJsonError(null);
+    }
+  }, [open, defaultType]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setJsonError(null);
+    let parsedData;
+    try {
+      parsedData = JSON.parse(dataJson);
+    } catch {
+      setJsonError("Invalid JSON format");
+      return;
+    }
+    try {
+      const result = await createMutation.mutateAsync({
+        ns: namespace,
+        type: selectedType,
+        name: name.trim(),
+        data: parsedData
+      });
+      onCreated?.(result);
+      onOpenChange(false);
+    } catch (error) {
+      console.error("Failed to create thing:", error);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Create New Thing" }),
+      /* @__PURE__ */ jsxs(DialogDescription, { children: [
+        'Create a new thing in namespace "',
+        namespace,
+        '"'
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "type", children: "Type" }),
+        /* @__PURE__ */ jsxs(Select, { value: selectedType, onValueChange: setSelectedType, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a type" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: types.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type.name, children: type.label }, type.id)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "name", children: "Name" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "name",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            placeholder: "Enter a name",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "data", children: "Data (JSON)" }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: "data",
+            value: dataJson,
+            onChange: (e) => {
+              setDataJson(e.target.value);
+              setJsonError(null);
+            },
+            placeholder: '{"key": "value"}',
+            className: "font-mono text-sm min-h-[100px]"
+          }
+        ),
+        jsonError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: jsonError })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            disabled: !selectedType || !name.trim() || createMutation.isLoading,
+            children: createMutation.isLoading ? "Creating..." : "Create"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/views/utils/date-formatting.ts
+function isISODateString(value) {
+  if (typeof value !== "string") return false;
+  const date = new Date(value);
+  return !isNaN(date.getTime()) && value.includes("T");
+}
+function formatDate(dateValue) {
+  const date = typeof dateValue === "string" ? new Date(dateValue) : dateValue;
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  let relative;
+  if (diffMins < 1) relative = "Just now";
+  else if (diffMins < 60) relative = `${diffMins} minute${diffMins !== 1 ? "s" : ""} ago`;
+  else if (diffHours < 24) relative = `${diffHours} hour${diffHours !== 1 ? "s" : ""} ago`;
+  else if (diffDays < 7) relative = `${diffDays} day${diffDays !== 1 ? "s" : ""} ago`;
+  else
+    relative = date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  return {
+    date: date.toLocaleDateString("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    }),
+    time: date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit"
+    }),
+    relative
+  };
+}
+function formatFieldName(key) {
+  return key.replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/^./, (str) => str.toUpperCase()).trim();
+}
+
+// src/views/utils/export.ts
+function exportToJSON(data, filename) {
+  const json = JSON.stringify(data, null, 2);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${filename}.json`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+function DetailSheet({ open, onOpenChange, thing, onEdit, onSave }) {
+  const [isEditing, setIsEditing] = React4.useState(false);
+  const [editedName, setEditedName] = React4.useState("");
+  const [editedDataJson, setEditedDataJson] = React4.useState("");
+  const [jsonError, setJsonError] = React4.useState(null);
+  const [isSaving, setIsSaving] = React4.useState(false);
+  React4.useEffect(() => {
+    if (thing && open) {
+      setEditedName(thing.name);
+      setEditedDataJson(JSON.stringify(thing.data ?? {}, null, 2));
+      setJsonError(null);
+    }
+    if (!open) {
+      setIsEditing(false);
+    }
+  }, [thing, open]);
+  const handleStartEdit = () => {
+    if (thing) {
+      setEditedName(thing.name);
+      setEditedDataJson(JSON.stringify(thing.data ?? {}, null, 2));
+      setJsonError(null);
+      setIsEditing(true);
+    }
+  };
+  const handleCancelEdit = () => {
+    if (thing) {
+      setEditedName(thing.name);
+      setEditedDataJson(JSON.stringify(thing.data ?? {}, null, 2));
+      setJsonError(null);
+    }
+    setIsEditing(false);
+  };
+  const handleSave = async () => {
+    if (!thing || !onSave) return;
+    setJsonError(null);
+    let parsedData;
+    try {
+      parsedData = JSON.parse(editedDataJson);
+    } catch {
+      setJsonError("Invalid JSON format");
+      return;
+    }
+    const updates = {};
+    if (editedName !== thing.name) {
+      updates.name = editedName;
+    }
+    if (JSON.stringify(parsedData) !== JSON.stringify(thing.data)) {
+      updates.data = parsedData;
+    }
+    if (Object.keys(updates).length === 0) {
+      setIsEditing(false);
+      return;
+    }
+    setIsSaving(true);
+    try {
+      await onSave(thing, updates);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Failed to save:", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  if (!thing) return null;
+  const renderValue = (_key, value) => {
+    if (value === null || value === void 0) {
+      return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic text-sm", children: "null" });
+    }
+    if (typeof value === "boolean") {
+      return /* @__PURE__ */ jsx(Badge, { variant: value ? "default" : "secondary", children: value ? "Yes" : "No" });
+    }
+    if (Array.isArray(value)) {
+      return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: value.map((v, i) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs font-normal", children: String(v) }, String(i))) });
+    }
+    if (typeof value === "object") {
+      return /* @__PURE__ */ jsx("pre", { className: "text-xs bg-muted/50 p-3 rounded-[var(--radius)] overflow-auto max-h-48 font-mono", children: JSON.stringify(value, null, 2) });
+    }
+    if (typeof value === "string" && (value.startsWith("http://") || value.startsWith("https://"))) {
+      return /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: value,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-primary hover:underline inline-flex items-center gap-1.5 break-all",
+          children: [
+            value,
+            /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0" })
+          ]
+        }
+      );
+    }
+    if (typeof value === "string" && isISODateString(value)) {
+      const formatted = formatDate(value);
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx(Calendar, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { children: formatted.date })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx("span", { children: formatted.time }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs", children: [
+            "(",
+            formatted.relative,
+            ")"
+          ] })
+        ] })
+      ] });
+    }
+    if (value instanceof Date) {
+      const formatted = formatDate(value);
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx(Calendar, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { children: formatted.date })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx("span", { children: formatted.time }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs", children: [
+            "(",
+            formatted.relative,
+            ")"
+          ] })
+        ] })
+      ] });
+    }
+    if (typeof value === "number") {
+      return /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: value.toLocaleString() });
+    }
+    return /* @__PURE__ */ jsx("span", { className: "break-all", children: String(value) });
+  };
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(SheetContent, { className: "sm:max-w-lg flex flex-col p-0", children: [
+    /* @__PURE__ */ jsx(SheetHeader, { className: "px-6 py-4 border-b bg-muted/30", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 pr-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 min-w-0", children: [
+        isEditing ? /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: editedName,
+            onChange: (e) => setEditedName(e.target.value),
+            className: "text-lg font-semibold h-auto py-1"
+          }
+        ) : /* @__PURE__ */ jsx(SheetTitle, { className: "text-lg truncate", children: thing.name }),
+        /* @__PURE__ */ jsxs(SheetDescription, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Hash, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs", children: thing.id })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        isEditing && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "shrink-0", children: "Editing" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "capitalize shrink-0", children: thing.type })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Namespace" }),
+        renderValue("ns", thing.ns)
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Type" }),
+        renderValue("type", thing.type)
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Created" }),
+        renderValue("createdAt", thing.createdAt)
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Updated" }),
+        renderValue("updatedAt", thing.updatedAt)
+      ] }),
+      isEditing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Data (JSON)" }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            value: editedDataJson,
+            onChange: (e) => {
+              setEditedDataJson(e.target.value);
+              setJsonError(null);
+            },
+            className: "font-mono text-sm min-h-[200px]"
+          }
+        ),
+        jsonError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: jsonError })
+      ] }) : thing.data && Object.entries(thing.data).filter(([key]) => !key.startsWith("@")).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 py-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: formatFieldName(key) }),
+        renderValue(key, value)
+      ] }, key))
+    ] }) }),
+    /* @__PURE__ */ jsx(SheetFooter, { className: "border-t px-6 py-4 bg-muted/30", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-3", children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: handleCancelEdit, disabled: isSaving, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          onClick: handleSave,
+          disabled: isSaving || !editedName.trim(),
+          className: "gap-2",
+          children: isSaving ? /* @__PURE__ */ jsx(Fragment, { children: "Saving..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Save, { className: "h-4 w-4" }),
+            "Save"
+          ] })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        onSave && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "gap-2",
+            onClick: handleStartEdit,
+            children: [
+              /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }),
+              "Edit"
+            ]
+          }
+        ),
+        onEdit && !onSave && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            className: "gap-2",
+            onClick: () => onEdit(thing),
+            children: [
+              /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }),
+              "Edit"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => {
+                navigator.clipboard.writeText(JSON.stringify(thing, null, 2));
+              },
+              children: /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: "Copy as JSON" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => onOpenChange(false), children: "Close" })
+    ] }) }) })
+  ] }) });
+}
+function getTableColumns() {
+  return [
+    { accessorKey: "name", header: "Name", type: "text" },
+    { accessorKey: "type", header: "Type", type: "text" },
+    { accessorKey: "createdAt", header: "Created", type: "date" },
+    { accessorKey: "updatedAt", header: "Updated", type: "date" }
+  ];
+}
+function DataBrowserView({
+  initialNamespace,
+  initialType,
+  onSelect,
+  onOpen,
+  className
+}) {
+  const { namespace: contextNamespace, client } = useDO();
+  const selectedNamespace = initialNamespace ?? contextNamespace;
+  const [selectedType, setSelectedType] = React4.useState(
+    initialType
+  );
+  const [viewType, setViewType] = React4.useState("table");
+  const [searchQuery, setSearchQuery] = React4.useState("");
+  const [selectedIds, setSelectedIds] = React4.useState([]);
+  const [sidebarCollapsed, setSidebarCollapsed] = React4.useState(false);
+  const [detailThing, setDetailThing] = React4.useState(null);
+  const [detailOpen, setDetailOpen] = React4.useState(false);
+  const [recentQueries, setRecentQueries] = React4.useState([]);
+  const [createDialogOpen, setCreateDialogOpen] = React4.useState(false);
+  const [filterPopoverOpen, setFilterPopoverOpen] = React4.useState(false);
+  const [filterConditions, setFilterConditions] = React4.useState([]);
+  const [hiddenColumns, setHiddenColumns] = React4.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const { error: namespacesError } = useNamespaces();
+  const { data: types, error: typesError } = useTypes({ ns: selectedNamespace });
+  const filter = React4.useMemo(() => {
+    const f = { ns: selectedNamespace };
+    if (selectedType) f.type = selectedType;
+    if (searchQuery) f.nameSearch = searchQuery;
+    return f;
+  }, [selectedNamespace, selectedType, searchQuery]);
+  const { data: thingsResult, isLoading, error: thingsError, refetch } = useThings(filter);
+  const connectionError = namespacesError || typesError || thingsError;
+  const queryConditions = React4.useMemo(() => {
+    return parseQuery(searchQuery);
+  }, [searchQuery]);
+  const data = React4.useMemo(() => {
+    if (!thingsResult?.data) return [];
+    let filtered = thingsResult.data.map((thing) => ({
+      id: thing.id,
+      ns: thing.ns,
+      type: thing.type,
+      name: thing.name,
+      createdAt: thing.createdAt,
+      updatedAt: thing.updatedAt,
+      ...thing.data
+    }));
+    if (queryConditions.length > 0) {
+      filtered = applyQueryFilter(filtered, queryConditions);
+    }
+    if (filterConditions.length > 0) {
+      filtered = filtered.filter((item) => {
+        return filterConditions.every((condition) => {
+          const fieldValue = item[condition.field];
+          const strValue = String(fieldValue ?? "").toLowerCase();
+          const conditionValue = condition.value.toLowerCase();
+          switch (condition.operator) {
+            case "equals":
+              return strValue === conditionValue;
+            case "contains":
+              return strValue.includes(conditionValue);
+            case "startsWith":
+              return strValue.startsWith(conditionValue);
+            case "endsWith":
+              return strValue.endsWith(conditionValue);
+            case "isEmpty":
+              return !fieldValue || strValue === "";
+            case "isNotEmpty":
+              return !!fieldValue && strValue !== "";
+            default:
+              return true;
+          }
+        });
+      });
+    }
+    return filtered;
+  }, [thingsResult, queryConditions, filterConditions]);
+  const allTableColumns = React4.useMemo(() => getTableColumns(), []);
+  const tableColumns = React4.useMemo(
+    () => allTableColumns.filter((col) => !hiddenColumns.has(col.accessorKey)),
+    [allTableColumns, hiddenColumns]
+  );
+  const queryFields = React4.useMemo(() => {
+    return ["name", "type", "ns", "createdAt", "updatedAt"];
+  }, []);
+  const handleExportSelected = React4.useCallback(() => {
+    if (selectedIds.length === 0) return;
+    const exportData = data.filter((d) => selectedIds.includes(d.id));
+    const filename = `${selectedNamespace}-${selectedType ?? "all"}-selected-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}`;
+    exportToJSON(exportData, filename);
+  }, [data, selectedIds, selectedNamespace, selectedType]);
+  const handleExportAll = React4.useCallback(() => {
+    const filename = `${selectedNamespace}-${selectedType ?? "all"}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}`;
+    exportToJSON(data, filename);
+  }, [data, selectedNamespace, selectedType]);
+  const handleSaveThing = React4.useCallback(
+    async (thing, updates) => {
+      await client.Thing.update({
+        ns: thing.ns,
+        type: thing.type,
+        id: thing.id,
+        ...updates
+      });
+      await refetch();
+      if (detailThing?.id === thing.id) {
+        const updated = thingsResult?.data?.find((t) => t.id === thing.id);
+        if (updated) {
+          setDetailThing(updated);
+        }
+      }
+    },
+    [client, refetch, detailThing, thingsResult]
+  );
+  const handleItemClick = React4.useCallback(
+    (item) => {
+      const thing = thingsResult?.data?.find((t) => t.id === item.id);
+      if (thing) {
+        setDetailThing(thing);
+        setDetailOpen(true);
+        onSelect?.(thing);
+      }
+    },
+    [thingsResult, onSelect]
+  );
+  const handleClearSelection = React4.useCallback(() => {
+    setSelectedIds([]);
+  }, []);
+  const handleSelectRecentQuery = React4.useCallback((query) => {
+    setRecentQueries((prev) => {
+      const filtered = prev.filter((q) => q !== query);
+      return [query, ...filtered].slice(0, 10);
+    });
+    setSearchQuery(query);
+  }, []);
+  React4.useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 768px)");
+    const handleMediaChange = (e) => {
+      if (e.matches) {
+        setSidebarCollapsed(true);
+      }
+    };
+    handleMediaChange(mediaQuery);
+    mediaQuery.addEventListener("change", handleMediaChange);
+    return () => mediaQuery.removeEventListener("change", handleMediaChange);
+  }, []);
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-full bg-background", className), children: [
+    /* @__PURE__ */ jsx(
+      DataSidebar,
+      {
+        title: "Types",
+        items: types?.map(
+          (t) => ({
+            id: t.id,
+            name: t.name,
+            label: t.label
+          })
+        ),
+        selectedItem: selectedType,
+        onSelectItem: setSelectedType,
+        collapsed: sidebarCollapsed,
+        onCollapsedChange: setSidebarCollapsed,
+        allItemsLabel: "All Types",
+        emptyMessage: "No types found"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("header", { className: "flex h-12 shrink-0 items-center gap-3 border-b px-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsx(
+            DataSidebarTrigger,
+            {
+              collapsed: sidebarCollapsed,
+              onToggle: () => setSidebarCollapsed(!sidebarCollapsed)
+            }
+          ),
+          /* @__PURE__ */ jsx(Shapes, { className: "h-4 w-4 text-muted-foreground hidden sm:block" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold hidden sm:inline", children: selectedType ?? "All Things" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "hidden sm:flex flex-1" }),
+        /* @__PURE__ */ jsx(
+          QuerySearch,
+          {
+            query: searchQuery,
+            onQueryChange: setSearchQuery,
+            conditions: queryConditions,
+            fields: queryFields,
+            recentQueries,
+            onSelectRecentQuery: handleSelectRecentQuery,
+            placeholder: "Search... (e.g., type: User)",
+            className: "flex-1 min-w-0 sm:w-64 sm:flex-none md:w-80 lg:w-[480px]"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "hidden sm:flex flex-1" }),
+        selectedIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 animate-in fade-in-0 slide-in-from-left-2 duration-200 shrink-0", children: [
+          /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1 pl-2 pr-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: selectedIds.length }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "selected" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClearSelection,
+                className: "ml-0.5 rounded-sm p-0.5 hover:bg-muted-foreground/20 transition-colors",
+                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(AlertDialog, { children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 text-destructive" }) }) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: "Delete selected" })
+            ] }),
+            /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
+                  "Delete ",
+                  selectedIds.length,
+                  " item",
+                  selectedIds.length !== 1 ? "s" : "",
+                  "?"
+                ] }),
+                /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This action cannot be undone. The selected items will be permanently removed." })
+              ] }),
+              /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+                /* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }),
+                /* @__PURE__ */ jsx(
+                  AlertDialogAction,
+                  {
+                    className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                    onClick: async () => {
+                      try {
+                        const thingsToDelete = thingsResult?.data?.filter(
+                          (t) => selectedIds.includes(t.id)
+                        ) ?? [];
+                        await Promise.all(
+                          thingsToDelete.map(
+                            (thing) => client.Thing.delete({
+                              ns: thing.ns,
+                              type: thing.type,
+                              id: thing.id
+                            })
+                          )
+                        );
+                        setSelectedIds([]);
+                        await refetch();
+                      } catch (err) {
+                        console.error("Failed to delete:", err);
+                      }
+                    },
+                    children: "Delete"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ViewSwitcher,
+          {
+            currentView: viewType,
+            onViewChange: setViewType,
+            availableViews: ["list", "table", "card", "code"],
+            className: "hidden sm:inline-flex"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "hidden sm:block h-4 w-px bg-border" }),
+        /* @__PURE__ */ jsx(
+          DataFilterPopover,
+          {
+            open: filterPopoverOpen,
+            onOpenChange: setFilterPopoverOpen,
+            conditions: filterConditions,
+            onConditionsChange: setFilterConditions,
+            availableFields: queryFields
+          }
+        ),
+        viewType === "table" && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "h-7 w-7 relative",
+                children: [
+                  /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4" }),
+                  hiddenColumns.size > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground", children: hiddenColumns.size })
+                ]
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: "Columns" })
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
+            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Toggle columns" }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            allTableColumns.map((column) => /* @__PURE__ */ jsx(
+              DropdownMenuCheckboxItem,
+              {
+                checked: !hiddenColumns.has(column.accessorKey),
+                onCheckedChange: (checked) => {
+                  setHiddenColumns((prev) => {
+                    const next = new Set(prev);
+                    if (checked) {
+                      next.delete(column.accessorKey);
+                    } else {
+                      next.add(column.accessorKey);
+                    }
+                    return next;
+                  });
+                },
+                children: column.header
+              },
+              column.accessorKey
+            ))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "default",
+            size: "sm",
+            className: "gap-1.5 px-3 hidden sm:inline-flex",
+            onClick: () => setCreateDialogOpen(true),
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { children: "Add" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7", children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" }) }) }) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: "More actions" })
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                disabled: selectedIds.length === 0,
+                onClick: handleExportSelected,
+                children: [
+                  /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }),
+                  "Export selected (",
+                  selectedIds.length,
+                  ")"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: handleExportAll, children: [
+              /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-2" }),
+              "Export all (",
+              data.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => refetch(), children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2" }),
+              "Refresh data"
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden p-2", children: connectionError ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md p-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 h-12 w-12 rounded-full bg-destructive/10 flex items-center justify-center", children: /* @__PURE__ */ jsx(X, { className: "h-6 w-6 text-destructive" }) }),
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Connection Error" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: connectionError.message }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => refetch(),
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+              "Retry"
+            ]
+          }
+        )
+      ] }) }) : isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+      ] }) }) : data.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No things found" }),
+        searchQuery && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try adjusting your search query" })
+      ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        viewType === "list" && /* @__PURE__ */ jsx(
+          DatabaseListView,
+          {
+            data,
+            displayFields: ["name", "type", "ns"],
+            primaryField: "name",
+            secondaryField: "type",
+            selectedIds,
+            onSelectionChange: setSelectedIds,
+            onRecordClick: handleItemClick
+          }
+        ),
+        viewType === "table" && /* @__PURE__ */ jsx(
+          DatabaseTableView,
+          {
+            data,
+            columns: tableColumns,
+            onSelectionChange: setSelectedIds,
+            onRowClick: handleItemClick,
+            enableRowSelection: true,
+            enablePagination: false,
+            enableColumnVisibility: false
+          }
+        ),
+        viewType === "card" && /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto p-2", children: /* @__PURE__ */ jsx(
+          DatabaseCardView,
+          {
+            data,
+            titleField: "name",
+            descriptionField: "type",
+            badgeFields: ["ns"],
+            onItemClick: handleItemClick,
+            columns: 3
+          }
+        ) }),
+        viewType === "code" && /* @__PURE__ */ jsx(DatabaseCodeView, { data, height: "100%", format: "json" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-border bg-muted/50 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          thingsResult?.total ?? 0,
+          " items",
+          selectedType && ` \u2022 Type: ${selectedType}`
+        ] }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Page ",
+          thingsResult?.page ?? 1,
+          " of ",
+          thingsResult?.totalPages ?? 1
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DetailSheet,
+      {
+        open: detailOpen,
+        onOpenChange: setDetailOpen,
+        thing: detailThing,
+        onEdit: onOpen,
+        onSave: handleSaveThing
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CreateDialog,
+      {
+        open: createDialogOpen,
+        onOpenChange: setCreateDialogOpen,
+        namespace: selectedNamespace,
+        defaultType: selectedType,
+        types: types ?? [],
+        onCreated: (thing) => {
+          refetch();
+          setDetailThing(thing);
+          setDetailOpen(true);
+        }
+      }
+    )
+  ] }) });
+}
+function inferDataType(value) {
+  if (value === null || value === void 0) return "text";
+  if (typeof value === "boolean") return "boolean";
+  if (typeof value === "number") return "number";
+  if (value instanceof Date) return "date";
+  if (typeof value === "string") {
+    if (/^\d{4}-\d{2}-\d{2}/.test(value)) return "date";
+    if (value.includes("@")) return "email";
+  }
+  if (typeof value === "object") return "json";
+  return "text";
+}
+function generateColumns(things) {
+  const columns = [
+    { accessorKey: "id", header: "ID", dataType: "text", isPrimaryKey: true, editable: false },
+    { accessorKey: "name", header: "Name", dataType: "text" },
+    { accessorKey: "createdAt", header: "Created", dataType: "date", editable: false },
+    { accessorKey: "updatedAt", header: "Updated", dataType: "date", editable: false }
+  ];
+  const dataKeys = /* @__PURE__ */ new Map();
+  things.forEach((thing) => {
+    if (thing.data && typeof thing.data === "object") {
+      Object.entries(thing.data).forEach(([key, value]) => {
+        if (!key.startsWith("@") && !dataKeys.has(key)) {
+          dataKeys.set(key, inferDataType(value));
+        }
+      });
+    }
+  });
+  dataKeys.forEach((dataType, key) => {
+    columns.push({
+      accessorKey: key,
+      header: key.charAt(0).toUpperCase() + key.slice(1),
+      dataType
+    });
+  });
+  return columns;
+}
+function thingToRow(thing) {
+  return {
+    id: thing.id,
+    _ns: thing.ns,
+    _type: thing.type,
+    name: thing.name,
+    createdAt: thing.createdAt,
+    updatedAt: thing.updatedAt,
+    ...thing.data
+  };
+}
+function DataGridView({
+  initialNamespace,
+  initialType,
+  readOnly = false,
+  onRowSelect: _onRowSelect,
+  className
+}) {
+  const { namespace: contextNamespace, client } = useDO();
+  const [selectedNamespace, setSelectedNamespace] = React4.useState(
+    initialNamespace ?? contextNamespace
+  );
+  const [selectedType, setSelectedType] = React4.useState(initialType);
+  const [selectedTable, setSelectedTable] = React4.useState(
+    `${selectedNamespace}.${initialType ?? ""}`
+  );
+  const [sidebarCollapsed, setSidebarCollapsed] = React4.useState(false);
+  const [viewMode, setViewMode] = React4.useState("table");
+  const [formatViewFormat, _setFormatViewFormat] = React4.useState("json");
+  const [selectedRows, setSelectedRows] = React4.useState([]);
+  const [filters, setFilters] = React4.useState([]);
+  const [hiddenColumns, setHiddenColumns] = React4.useState(/* @__PURE__ */ new Set());
+  const [refreshStatus, setRefreshStatus] = React4.useState("idle");
+  const [autoRefreshEnabled, setAutoRefreshEnabled] = React4.useState(false);
+  const [autoRefreshInterval, setAutoRefreshInterval] = React4.useState(30);
+  const [lastRefreshTime, setLastRefreshTime] = React4.useState(null);
+  const [columnEditorOpen, setColumnEditorOpen] = React4.useState(false);
+  const [tableCreatorOpen, setTableCreatorOpen] = React4.useState(false);
+  const [editingColumn, setEditingColumn] = React4.useState();
+  const gridActionsRef = React4.useRef(null);
+  const [localData, setLocalData] = React4.useState([]);
+  const { data: namespaces } = useNamespaces();
+  const { data: types } = useTypes({ ns: selectedNamespace });
+  const filter = React4.useMemo(() => {
+    const f = { ns: selectedNamespace };
+    if (selectedType) f.type = selectedType;
+    return f;
+  }, [selectedNamespace, selectedType]);
+  const { data: thingsResult, isLoading, refetch } = useThings(filter);
+  React4.useEffect(() => {
+    if (thingsResult?.data) {
+      setLocalData(thingsResult.data.map(thingToRow));
+    }
+  }, [thingsResult]);
+  const schemas = React4.useMemo(() => {
+    if (!namespaces || !types) return [];
+    return namespaces.map((ns) => ({
+      name: ns.name,
+      tables: types.filter((t) => t.namespace === ns.name).map((t) => ({
+        name: t.name,
+        schema: ns.name,
+        rowCount: 0
+        // We don't have row counts per type from the hook
+      }))
+    }));
+  }, [namespaces, types]);
+  const columns = React4.useMemo(() => {
+    if (!thingsResult?.data || thingsResult.data.length === 0) {
+      return [
+        { accessorKey: "id", header: "ID", dataType: "text", isPrimaryKey: true, editable: false },
+        { accessorKey: "name", header: "Name", dataType: "text" },
+        { accessorKey: "createdAt", header: "Created", dataType: "date" },
+        { accessorKey: "updatedAt", header: "Updated", dataType: "date" }
+      ];
+    }
+    return generateColumns(thingsResult.data);
+  }, [thingsResult]);
+  const visibleColumns = React4.useMemo(
+    () => columns.filter((col) => !hiddenColumns.has(col.accessorKey)),
+    [columns, hiddenColumns]
+  );
+  const filteredData = React4.useMemo(
+    () => applyFilters(localData, filters, columns),
+    [localData, filters, columns]
+  );
+  const {
+    pushOperation,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    undoCount,
+    redoCount
+  } = useEditHistory({
+    onRedo: (operation) => {
+      const { rowIndex, columnId, newValue } = operation;
+      setLocalData((prev) => {
+        const newData = [...prev];
+        newData[rowIndex] = { ...newData[rowIndex], [columnId]: newValue };
+        return newData;
+      });
+    },
+    onUndo: (operation) => {
+      const { rowIndex, columnId, oldValue } = operation;
+      setLocalData((prev) => {
+        const newData = [...prev];
+        newData[rowIndex] = { ...newData[rowIndex], [columnId]: oldValue };
+        return newData;
+      });
+    }
+  });
+  const handleSelectTable = React4.useCallback((schema2, table) => {
+    setSelectedNamespace(schema2);
+    setSelectedType(table);
+    setSelectedTable(`${schema2}.${table}`);
+    setSelectedRows([]);
+    setFilters([]);
+  }, []);
+  const handleAddColumn = React4.useCallback(() => {
+    setEditingColumn(void 0);
+    setColumnEditorOpen(true);
+  }, []);
+  const handleSaveColumn = React4.useCallback(
+    async (column) => {
+      if (!selectedType) return;
+      try {
+        const nullable = column.isNullable ? "" : "NOT NULL";
+        const defaultVal = column.defaultValue ? `DEFAULT ${column.isDefaultExpression ? column.defaultValue : `'${column.defaultValue}'`}` : "";
+        const unique = column.isUnique ? "UNIQUE" : "";
+        const sql = editingColumn ? `ALTER TABLE ${selectedType} RENAME COLUMN ${editingColumn.name} TO ${column.name}` : `ALTER TABLE ${selectedType} ADD COLUMN ${column.name} ${column.dataType} ${nullable} ${defaultVal} ${unique}`;
+        await client.SQL.execute({ query: sql.trim() });
+        setColumnEditorOpen(false);
+        toast.success(`Column "${column.name}" ${editingColumn ? "updated" : "created"}`);
+        await refetch();
+      } catch (err) {
+        toast.error(`Failed to save column: ${err instanceof Error ? err.message : "Unknown error"}`);
+      }
+    },
+    [selectedType, editingColumn, client, refetch]
+  );
+  const handleDeleteColumn = React4.useCallback(async () => {
+    if (!selectedType || !editingColumn) return;
+    try {
+      await client.SQL.execute({
+        query: `ALTER TABLE ${selectedType} DROP COLUMN ${editingColumn.name}`
+      });
+      setColumnEditorOpen(false);
+      toast.success(`Column "${editingColumn.name}" deleted`);
+      await refetch();
+    } catch (err) {
+      toast.error(`Failed to delete column: ${err instanceof Error ? err.message : "Unknown error"}`);
+    }
+  }, [selectedType, editingColumn, client, refetch]);
+  const handleCreateTable = React4.useCallback(
+    async (table) => {
+      try {
+        const columnDefs = table.columns.map((col) => {
+          const nullable = col.isNullable ? "" : "NOT NULL";
+          const pk = col.isPrimaryKey ? "PRIMARY KEY" : "";
+          const defaultVal = col.defaultValue ? `DEFAULT '${col.defaultValue}'` : "";
+          return `${col.name} ${col.dataType} ${pk} ${nullable} ${defaultVal}`.trim();
+        }).join(", ");
+        const sql = `CREATE TABLE ${table.name} (${columnDefs})`;
+        await client.SQL.execute({ query: sql });
+        setTableCreatorOpen(false);
+        toast.success(`Table "${table.name}" created`);
+        await refetch();
+      } catch (err) {
+        toast.error(`Failed to create table: ${err instanceof Error ? err.message : "Unknown error"}`);
+      }
+    },
+    [client, refetch]
+  );
+  const handleCellUpdate = React4.useCallback(
+    async (rowIndex, columnId, value) => {
+      if (readOnly || !selectedType) return;
+      const row = localData[rowIndex];
+      const oldValue = row?.[columnId];
+      const rowId = row?.id;
+      pushOperation({ rowIndex, columnId, oldValue, newValue: value, type: "cell_update" });
+      try {
+        await client.Thing.update({
+          ns: selectedNamespace,
+          type: selectedType,
+          id: rowId,
+          data: { [columnId]: value }
+        });
+        toast.success("Cell updated");
+      } catch (err) {
+        undo();
+        toast.error(`Failed to save cell: ${err instanceof Error ? err.message : "Unknown error"}`);
+      }
+    },
+    [readOnly, selectedType, selectedNamespace, localData, pushOperation, undo, client]
+  );
+  const handleInsert = React4.useCallback(
+    async (newRow) => {
+      if (readOnly || !selectedType) return;
+      try {
+        const name = newRow.name || `New ${selectedType}`;
+        const cleanData = {};
+        for (const [key, value] of Object.entries(newRow)) {
+          if (["id", "createdAt", "updatedAt", "_ns", "_type"].includes(key)) continue;
+          if (value === null || value === void 0) continue;
+          cleanData[key] = value;
+        }
+        await client.Thing.create({
+          ns: selectedNamespace,
+          type: selectedType,
+          name,
+          data: cleanData
+        });
+        await refetch();
+        toast.success("Row added successfully");
+      } catch (err) {
+        console.error("[@mdxui/do] Failed to create row:", err);
+        toast.error(`Failed to create row: ${err instanceof Error ? err.message : "Unknown error"}`);
+      }
+    },
+    [readOnly, selectedType, selectedNamespace, client, refetch]
+  );
+  const handleDeleteRows = React4.useCallback(
+    async (rowIds) => {
+      if (readOnly || !selectedType) return;
+      try {
+        await Promise.all(
+          rowIds.map(
+            (id) => (
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              client.Thing.delete({
+                ns: selectedNamespace,
+                type: selectedType,
+                id
+              })
+            )
+          )
+        );
+        setLocalData((prev) => prev.filter((row) => !rowIds.includes(String(row.id))));
+        setSelectedRows([]);
+        toast.success(`${rowIds.length} row${rowIds.length > 1 ? "s" : ""} deleted`);
+      } catch (err) {
+        toast.error(`Failed to delete rows: ${err instanceof Error ? err.message : "Unknown error"}`);
+      }
+    },
+    [readOnly, selectedType, selectedNamespace, client]
+  );
+  const handleRefresh = React4.useCallback(async () => {
+    setRefreshStatus("refreshing");
+    try {
+      await refetch();
+      setRefreshStatus("success");
+      setLastRefreshTime(/* @__PURE__ */ new Date());
+      setTimeout(() => setRefreshStatus("idle"), 2e3);
+    } catch {
+      setRefreshStatus("error");
+      setTimeout(() => setRefreshStatus("idle"), 3e3);
+    }
+  }, [refetch]);
+  const handleToggleColumnVisibility = React4.useCallback((accessorKey) => {
+    setHiddenColumns((prev) => {
+      const next = new Set(prev);
+      if (next.has(accessorKey)) {
+        next.delete(accessorKey);
+      } else {
+        next.add(accessorKey);
+      }
+      return next;
+    });
+  }, []);
+  const handleExport = React4.useCallback(
+    (scope, format) => {
+      const dataToExport = scope === "all" ? localData : scope === "filtered" ? filteredData : filteredData;
+      let content;
+      let mimeType;
+      let extension;
+      switch (format) {
+        case "json":
+          content = JSON.stringify(dataToExport, null, 2);
+          mimeType = "application/json";
+          extension = "json";
+          break;
+        case "csv": {
+          const headers = visibleColumns.map((c) => c.header).join(",");
+          const rows = dataToExport.map(
+            (row) => visibleColumns.map((c) => JSON.stringify(row[c.accessorKey] ?? "")).join(",")
+          );
+          content = [headers, ...rows].join("\n");
+          mimeType = "text/csv";
+          extension = "csv";
+          break;
+        }
+        default:
+          content = JSON.stringify(dataToExport, null, 2);
+          mimeType = "application/json";
+          extension = "json";
+      }
+      const blob = new Blob([content], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `${selectedType ?? "data"}-${scope}.${extension}`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    },
+    [localData, filteredData, visibleColumns, selectedType]
+  );
+  const handleQueryExecute = React4.useCallback(
+    async (query) => {
+      const startTime = Date.now();
+      try {
+        const result = await client.SQL.execute({ query });
+        return {
+          rows: result.rows,
+          columns: result.columns.map((col) => ({
+            name: col.name,
+            type: col.type
+          })),
+          rowsAffected: result.rowsAffected,
+          executionTime: result.executionTimeMs ?? Date.now() - startTime
+        };
+      } catch (err) {
+        throw new Error(err instanceof Error ? err.message : "Query execution failed");
+      }
+    },
+    [client]
+  );
+  React4.useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 768px)");
+    const handleMediaChange = (e) => {
+      if (e.matches) {
+        setSidebarCollapsed(true);
+      }
+    };
+    handleMediaChange(mediaQuery);
+    mediaQuery.addEventListener("change", handleMediaChange);
+    return () => mediaQuery.removeEventListener("change", handleMediaChange);
+  }, []);
+  React4.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "z") {
+        if (e.shiftKey) {
+          e.preventDefault();
+          redo();
+        } else {
+          e.preventDefault();
+          undo();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [undo, redo]);
+  React4.useEffect(() => {
+    if (!autoRefreshEnabled) return;
+    const intervalMs = autoRefreshInterval * 1e3;
+    const timer = setInterval(handleRefresh, intervalMs);
+    return () => clearInterval(timer);
+  }, [autoRefreshEnabled, autoRefreshInterval, handleRefresh]);
+  const [schema, tableName] = selectedTable.split(".");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex h-full overflow-x-auto bg-background", className), children: [
+      /* @__PURE__ */ jsx(
+        DatabaseSidebar,
+        {
+          schemas,
+          selectedTable,
+          onSelectTable: handleSelectTable,
+          onViewTable: (schema2, table) => handleSelectTable(schema2, table),
+          onDuplicateTable: async (_schema, table) => {
+            try {
+              const sql = `CREATE TABLE ${table}_copy AS SELECT * FROM ${table}`;
+              await client.SQL.execute({ query: sql });
+              toast.success(`Table "${table}" duplicated as "${table}_copy"`);
+              await refetch();
+            } catch (err) {
+              toast.error(`Failed to duplicate table: ${err instanceof Error ? err.message : "Unknown error"}`);
+            }
+          },
+          onDeleteTable: async (_schema, table) => {
+            try {
+              await client.SQL.execute({ query: `DROP TABLE ${table}` });
+              toast.success(`Table "${table}" deleted`);
+              await refetch();
+            } catch (err) {
+              toast.error(`Failed to delete table: ${err instanceof Error ? err.message : "Unknown error"}`);
+            }
+          },
+          onCreateTable: () => setTableCreatorOpen(true),
+          collapsed: sidebarCollapsed,
+          onCollapsedChange: setSidebarCollapsed,
+          className: "shrink-0"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden min-w-[320px]", children: [
+        /* @__PURE__ */ jsx(
+          TableEditorToolbar,
+          {
+            schema,
+            tableName: tableName || "Select a type",
+            columns,
+            totalRowCount: localData.length,
+            filteredRowCount: filteredData.length,
+            visibleRowCount: filteredData.length,
+            selectedRowIds: selectedRows,
+            onClearSelection: () => setSelectedRows([]),
+            onDeleteSelectedRows: handleDeleteRows,
+            sidebarCollapsed,
+            onSidebarCollapsedChange: setSidebarCollapsed,
+            viewMode,
+            onViewModeChange: setViewMode,
+            canUndo,
+            canRedo,
+            undoCount,
+            redoCount,
+            onUndo: undo,
+            onRedo: redo,
+            refreshStatus,
+            onRefresh: handleRefresh,
+            autoRefreshEnabled,
+            onAutoRefreshEnabledChange: setAutoRefreshEnabled,
+            autoRefreshInterval,
+            onAutoRefreshIntervalChange: setAutoRefreshInterval,
+            lastRefreshTime,
+            filters,
+            onFiltersChange: setFilters,
+            hiddenColumns,
+            onToggleColumnVisibility: handleToggleColumnVisibility,
+            onInsertRow: () => gridActionsRef.current?.startNewRow(),
+            onAddColumn: handleAddColumn,
+            onExport: handleExport
+          }
+        ),
+        viewMode === "table" ? /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col p-2", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+        ] }) }) : !selectedType ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "Select a type from the sidebar to view data" }) : /* @__PURE__ */ jsx(
+          DatabaseGrid,
+          {
+            data: filteredData,
+            columns: visibleColumns,
+            onCellUpdate: handleCellUpdate,
+            onInsert: handleInsert,
+            onDeleteRows: handleDeleteRows,
+            onViewRow: (rowId) => {
+              toast.info(`Row ID: ${rowId}`);
+            },
+            onDuplicateRow: async (_rowId, row) => {
+              if (!selectedType) return;
+              const { id, _ns, _type, name, ...data } = row;
+              try {
+                await client.Thing.create({
+                  ns: selectedNamespace,
+                  type: selectedType,
+                  name: `${name || selectedType} (copy)`,
+                  data
+                });
+                await refetch();
+                toast.success("Row duplicated");
+              } catch (err) {
+                console.error("[@mdxui/do] Failed to duplicate row:", err);
+                toast.error(`Failed to duplicate row: ${err instanceof Error ? err.message : "Unknown error"}`);
+              }
+            },
+            onSelectionChange: setSelectedRows,
+            onColumnReorder: (order) => {
+              if (selectedType) {
+                localStorage.setItem(
+                  `do-column-order-${selectedNamespace}-${selectedType}`,
+                  JSON.stringify(order)
+                );
+              }
+            },
+            actionsRef: gridActionsRef,
+            emptyMessage: "No data matches the current filters",
+            className: "h-full"
+          }
+        ) }) : viewMode === "query" ? /* @__PURE__ */ jsx(
+          QueryView,
+          {
+            currentTable: tableName || "",
+            schema,
+            onExecute: handleQueryExecute,
+            className: "flex-1"
+          }
+        ) : /* @__PURE__ */ jsx(
+          FormatView,
+          {
+            data: filteredData,
+            columns,
+            format: formatViewFormat,
+            className: "flex-1"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ColumnEditorPanel,
+      {
+        open: columnEditorOpen,
+        onOpenChange: setColumnEditorOpen,
+        column: editingColumn,
+        referenceTables: types?.map((t) => ({
+          name: t.name,
+          columns: ["id", "name", "createdAt", "updatedAt"]
+        })) ?? [],
+        onSave: handleSaveColumn,
+        onDelete: editingColumn ? handleDeleteColumn : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TableCreatorPanel,
+      {
+        open: tableCreatorOpen,
+        onOpenChange: setTableCreatorOpen,
+        schemas: namespaces?.map((ns) => ns.name) ?? ["default"],
+        onCreate: handleCreateTable
+      }
+    ),
+    /* @__PURE__ */ jsx(Toaster, { closeButton: true, position: "top-right" })
+  ] });
+}
+DataGridView.displayName = "DataGridView";
+function toDocumentType(type) {
+  return {
+    id: type.id,
+    name: type.name,
+    label: type.label
+  };
+}
+function toDocumentTypeOption(type) {
+  return {
+    id: type.id,
+    name: type.name,
+    label: type.label
+  };
+}
+function toDocumentItem(thing) {
+  return {
+    id: thing.id,
+    name: thing.name,
+    type: thing.type
+  };
+}
+function DocumentEditorView({
+  initialNamespace,
+  initialType,
+  initialId,
+  onSave,
+  onDelete,
+  onBack: _onBack,
+  className
+}) {
+  const { namespace: contextNamespace } = useDO();
+  const [selectedNamespace] = React4.useState(initialNamespace ?? contextNamespace);
+  const [selectedType, setSelectedType] = React4.useState(initialType);
+  const [selectedThingId, setSelectedThingId] = React4.useState(initialId);
+  const [sidebarCollapsed, setSidebarCollapsed] = React4.useState(false);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = React4.useState(false);
+  const [isSaving, setIsSaving] = React4.useState(false);
+  const [localDocument, setLocalDocument] = React4.useState(null);
+  const fileInputRef = React4.useRef(null);
+  const { data: types } = useTypes({ ns: selectedNamespace });
+  const { data: thingsResult, refetch: refetchThings } = useThings({
+    ns: selectedNamespace,
+    type: selectedType
+  });
+  const thingParams = selectedType && selectedThingId ? { ns: selectedNamespace, type: selectedType, id: selectedThingId } : { ns: "", type: "", id: "" };
+  const { data: currentThing, isLoading: isLoadingThing } = useThing(thingParams);
+  const updateThing = useUpdateThing(
+    selectedType && selectedThingId ? { ns: selectedNamespace, type: selectedType, id: selectedThingId } : { ns: "temp", type: "temp", id: "temp" }
+  );
+  const deleteThing = useDeleteThing(
+    selectedType && selectedThingId ? { ns: selectedNamespace, type: selectedType, id: selectedThingId } : { ns: "temp", type: "temp", id: "temp" }
+  );
+  const documentTypes = React4.useMemo(
+    () => types?.map(toDocumentType) ?? [],
+    [types]
+  );
+  const documentTypeOptions = React4.useMemo(
+    () => types?.map(toDocumentTypeOption) ?? [],
+    [types]
+  );
+  const documentItems = React4.useMemo(
+    () => thingsResult?.data?.map(toDocumentItem) ?? [],
+    [thingsResult]
+  );
+  React4.useEffect(() => {
+    if (currentThing) {
+      setLocalDocument({
+        _id: currentThing.id,
+        _ns: currentThing.ns,
+        _type: currentThing.type,
+        name: currentThing.name,
+        createdAt: currentThing.createdAt instanceof Date ? currentThing.createdAt.toISOString() : currentThing.createdAt,
+        updatedAt: currentThing.updatedAt instanceof Date ? currentThing.updatedAt.toISOString() : currentThing.updatedAt,
+        ...currentThing.data
+      });
+      setHasUnsavedChanges(false);
+    } else {
+      setLocalDocument(null);
+    }
+  }, [currentThing]);
+  const handleSelectDocument = React4.useCallback((type, documentId) => {
+    setSelectedType(type);
+    setSelectedThingId(documentId);
+    setHasUnsavedChanges(false);
+  }, []);
+  const handleDocumentChange = React4.useCallback((updatedDoc) => {
+    setLocalDocument(updatedDoc);
+    setHasUnsavedChanges(true);
+  }, []);
+  const handleCreateDocument = React4.useCallback((type) => {
+    const newId = `${Date.now()}`;
+    setSelectedType(type);
+    setSelectedThingId(newId);
+    setLocalDocument({
+      _id: newId,
+      _type: type,
+      _ns: selectedNamespace,
+      name: "New Thing",
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    setHasUnsavedChanges(true);
+  }, [selectedNamespace]);
+  const handleSave = React4.useCallback(async () => {
+    if (!localDocument || !selectedType || !selectedThingId) return;
+    setIsSaving(true);
+    try {
+      const { _id, _ns, _type, createdAt, updatedAt, name, ...data } = localDocument;
+      await updateThing.mutateAsync({
+        name,
+        data
+      });
+      setHasUnsavedChanges(false);
+      await refetchThings();
+      if (onSave && currentThing) {
+        onSave({ ...currentThing, name, data });
+      }
+    } catch (err) {
+      console.error("Failed to save:", err);
+    } finally {
+      setIsSaving(false);
+    }
+  }, [localDocument, selectedType, selectedThingId, updateThing, refetchThings, onSave, currentThing]);
+  const handleDelete = React4.useCallback(async () => {
+    if (!selectedType || !selectedThingId) return;
+    try {
+      await deleteThing.mutateAsync();
+      const remainingThings = thingsResult?.data?.filter((t) => t.id !== selectedThingId) ?? [];
+      if (remainingThings.length > 0) {
+        setSelectedThingId(remainingThings[0].id);
+        setSelectedType(remainingThings[0].type);
+      } else {
+        setSelectedThingId(void 0);
+      }
+      setHasUnsavedChanges(false);
+      await refetchThings();
+      onDelete?.();
+    } catch (err) {
+      console.error("Failed to delete:", err);
+    }
+  }, [selectedType, selectedThingId, deleteThing, thingsResult, refetchThings, onDelete]);
+  const handleExport = React4.useCallback(() => {
+    if (!localDocument) return;
+    const json = JSON.stringify(localDocument, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${selectedThingId}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [localDocument, selectedThingId]);
+  const handleImport = React4.useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileChange = React4.useCallback(
+    (event) => {
+      const file = event.target.files?.[0];
+      if (!file || !selectedType) return;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const content = e.target?.result;
+          const parsed = JSON.parse(content);
+          if (typeof parsed !== "object" || parsed === null) {
+            throw new Error("Invalid JSON: root must be an object");
+          }
+          const newId = `${Date.now()}`;
+          setSelectedThingId(newId);
+          setLocalDocument({
+            ...parsed,
+            _id: newId,
+            _type: selectedType,
+            _ns: selectedNamespace
+          });
+          setHasUnsavedChanges(true);
+        } catch (err) {
+          console.error("Failed to import document:", err);
+        }
+      };
+      reader.readAsText(file);
+      event.target.value = "";
+    },
+    [selectedType, selectedNamespace]
+  );
+  const handleRefresh = React4.useCallback(async () => {
+    await refetchThings();
+    setHasUnsavedChanges(false);
+  }, [refetchThings]);
+  React4.useEffect(() => {
+    const mediaQuery = window.matchMedia("(max-width: 768px)");
+    const handleMediaChange = (e) => {
+      if (e.matches) {
+        setSidebarCollapsed(true);
+      }
+    };
+    handleMediaChange(mediaQuery);
+    mediaQuery.addEventListener("change", handleMediaChange);
+    return () => mediaQuery.removeEventListener("change", handleMediaChange);
+  }, []);
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-full overflow-x-auto bg-background", className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept: ".json,application/json",
+        className: "hidden",
+        onChange: handleFileChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DocumentSidebar,
+      {
+        types: documentTypes,
+        documents: documentItems,
+        selectedType,
+        selectedDocumentId: selectedThingId,
+        onSelectDocument: handleSelectDocument,
+        onCreateDocument: handleCreateDocument,
+        collapsed: sidebarCollapsed
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden min-w-[320px]", children: [
+      /* @__PURE__ */ jsx(
+        DocumentViewToolbar,
+        {
+          typeName: selectedType,
+          documentName: localDocument ? localDocument.name : void 0,
+          documentId: selectedThingId,
+          hasUnsavedChanges,
+          isSaving,
+          hasDocument: !!localDocument,
+          types: documentTypeOptions,
+          sidebarCollapsed,
+          onSidebarToggle: () => setSidebarCollapsed(!sidebarCollapsed),
+          onSave: handleSave,
+          onRefresh: handleRefresh,
+          onImport: handleImport,
+          onExport: handleExport,
+          onDelete: handleDelete,
+          onCreateNew: handleCreateDocument
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: isLoadingThing ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+      ] }) }) : localDocument ? /* @__PURE__ */ jsx(
+        DocumentEditor,
+        {
+          document: localDocument,
+          onChange: handleDocumentChange,
+          className: "h-full"
+        }
+      ) : /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Database, { className: "mb-4 h-12 w-12 opacity-20" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No document selected" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", children: "Select a document from the sidebar or create a new one" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("footer", { className: "flex h-10 shrink-0 items-center justify-between border-t bg-muted/30 px-2 sm:px-4 gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground whitespace-nowrap shrink-0", children: selectedType && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: thingsResult?.data?.filter((t) => t.type === selectedType).length ?? 0 }),
+          " ",
+          "documents in ",
+          selectedType
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: localDocument && /* @__PURE__ */ jsxs(Fragment, { children: [
+          "ID:",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground", children: selectedThingId })
+        ] }) })
+      ] })
+    ] })
+  ] }) });
+}
+DocumentEditorView.displayName = "DocumentEditorView";
+var STARTER_TEMPLATES = [
+  {
+    id: "list-things",
+    name: "List all Things",
+    description: "List all Things in the namespace",
+    code: `// List all Things
+const things = await client.things.list({
+  limit: 100,
+})
+
+return { things, relationships: [] }`
+  },
+  {
+    id: "list-by-type",
+    name: "List Things by type",
+    description: "Filter Things by their semantic type",
+    code: `// List Things by type
+const type = 'User' // Change this to your type
+
+const things = await client.things.list({
+  type,
+  limit: 100,
+})
+
+return { things, relationships: [] }`
+  },
+  {
+    id: "get-thing",
+    name: "Get single Thing",
+    description: "Fetch a specific Thing by ID",
+    code: `// Get a single Thing by ID
+const id = 'thing-id' // Replace with actual ID
+
+const thing = await client.things.get(id)
+
+return { things: [thing], relationships: [] }`
+  },
+  {
+    id: "create-thing",
+    name: "Create new Thing",
+    description: "Create a new Thing in the namespace",
+    code: `// Create a new Thing
+const newThing = await client.things.create({
+  type: 'User',
+  name: 'New User',
+  data: {
+    email: 'user@example.com',
+    role: 'member',
+  },
+})
+
+return { things: [newThing], relationships: [] }`
+  },
+  {
+    id: "update-thing",
+    name: "Update a Thing",
+    description: "Update an existing Thing",
+    code: `// Update a Thing
+const id = 'thing-id' // Replace with actual ID
+
+const updatedThing = await client.things.update(id, {
+  name: 'Updated Name',
+  data: {
+    email: 'updated@example.com',
+  },
+})
+
+return { things: [updatedThing], relationships: [] }`
+  },
+  {
+    id: "query-things",
+    name: "Query with filters",
+    description: "Complex query with multiple filters",
+    code: `// Query Things with filters
+const things = await client.things.list({
+  type: 'User',
+  filter: {
+    'data.role': 'admin',
+  },
+  sort: '-createdAt',
+  limit: 50,
+})
+
+return { things, relationships: [] }`
+  }
+];
+function FunctionEditorView({
+  initialCode,
+  onCodeChange,
+  className
+}) {
+  const { client, namespace } = useDO();
+  const editorControlsRef = React4.useRef(null);
+  const [, forceUpdate] = React4.useReducer((x) => x + 1, 0);
+  const [sidebarCollapsed, setSidebarCollapsed] = React4.useState(false);
+  const [currentCode, setCurrentCode] = React4.useState(initialCode ?? STARTER_TEMPLATES[0].code);
+  const [history, setHistory] = React4.useState([]);
+  const [savedQueries, setSavedQueries] = React4.useState([]);
+  const [saveDialogOpen, setSaveDialogOpen] = React4.useState(false);
+  const [queryName, setQueryName] = React4.useState("");
+  React4.useEffect(() => {
+    const interval = setInterval(() => {
+      if (editorControlsRef.current) {
+        forceUpdate();
+      }
+    }, 100);
+    return () => clearInterval(interval);
+  }, []);
+  const handleExecute = React4.useCallback(
+    async (code) => {
+      const startTime = performance.now();
+      try {
+        const AsyncFunction = Object.getPrototypeOf(async function() {
+        }).constructor;
+        const fn = new AsyncFunction("client", "namespace", code);
+        const result = await fn(client, namespace);
+        const executionTime = Math.round(performance.now() - startTime);
+        const historyItem = {
+          id: `hist_${Date.now()}`,
+          code,
+          timestamp: /* @__PURE__ */ new Date(),
+          executionTime,
+          resultCount: (result?.things?.length ?? 0) + (result?.relationships?.length ?? 0)
+        };
+        setHistory((prev) => [historyItem, ...prev].slice(0, 20));
+        onCodeChange?.(code);
+        return {
+          things: result?.things ?? [],
+          relationships: result?.relationships ?? [],
+          executionTime
+        };
+      } catch (err) {
+        const executionTime = Math.round(performance.now() - startTime);
+        const historyItem = {
+          id: `hist_${Date.now()}`,
+          code,
+          timestamp: /* @__PURE__ */ new Date(),
+          executionTime,
+          resultCount: 0
+        };
+        setHistory((prev) => [historyItem, ...prev].slice(0, 20));
+        throw err;
+      }
+    },
+    [client, namespace, onCodeChange]
+  );
+  const handleSelectHistory = React4.useCallback((code) => {
+    setCurrentCode(code);
+  }, []);
+  const handleClearHistory = React4.useCallback(() => {
+    setHistory([]);
+  }, []);
+  const handleSelectSavedQuery = React4.useCallback((query) => {
+    setCurrentCode(query.code);
+  }, []);
+  const handleDeleteSavedQuery = React4.useCallback((id) => {
+    setSavedQueries((prev) => prev.filter((q) => q.id !== id));
+  }, []);
+  const handleSelectTemplate = React4.useCallback((template) => {
+    setCurrentCode(template.code);
+  }, []);
+  const handleSaveQuery = React4.useCallback(() => {
+    if (!queryName.trim()) return;
+    const newQuery = {
+      id: `saved_${Date.now()}`,
+      name: queryName.trim(),
+      code: currentCode,
+      createdAt: /* @__PURE__ */ new Date(),
+      updatedAt: /* @__PURE__ */ new Date()
+    };
+    setSavedQueries((prev) => [newQuery, ...prev]);
+    setSaveDialogOpen(false);
+    setQueryName("");
+  }, [queryName, currentCode]);
+  const toolbarHistory = editorControlsRef.current?.history?.map((item) => ({
+    code: item.code,
+    timestamp: item.timestamp
+  })) ?? [];
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-full bg-background", className), children: [
+    /* @__PURE__ */ jsx(
+      FunctionSidebar,
+      {
+        title: "Function Editor",
+        templates: STARTER_TEMPLATES,
+        savedQueries,
+        history,
+        collapsed: sidebarCollapsed,
+        onCollapsedChange: setSidebarCollapsed,
+        onSelectTemplate: handleSelectTemplate,
+        onSelectSavedQuery: handleSelectSavedQuery,
+        onDeleteSavedQuery: handleDeleteSavedQuery,
+        onSelectHistory: handleSelectHistory,
+        onClearHistory: handleClearHistory
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden min-w-[320px]", children: [
+      /* @__PURE__ */ jsx(
+        FunctionViewToolbar,
+        {
+          sidebarCollapsed,
+          onSidebarToggle: () => setSidebarCollapsed(!sidebarCollapsed),
+          isExecuting: editorControlsRef.current?.isExecuting,
+          disabled: editorControlsRef.current?.disabled,
+          onRun: () => editorControlsRef.current?.execute(),
+          onClear: () => editorControlsRef.current?.clear(),
+          history: toolbarHistory,
+          onSelectHistory: (code) => editorControlsRef.current?.selectHistory(code),
+          canSave: !!currentCode.trim(),
+          onSave: () => setSaveDialogOpen(true)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 h-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+        SDKEditor,
+        {
+          initialCode: currentCode,
+          onExecute: handleExecute,
+          defaultResultTab: "table",
+          showToolbar: false,
+          controlsRef: editorControlsRef,
+          className: "h-full"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: saveDialogOpen, onOpenChange: setSaveDialogOpen, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Save Query" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Give your query a name to save it for later use." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "py-4", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: "Query name...",
+          value: queryName,
+          onChange: (e) => setQueryName(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              handleSaveQuery();
+            }
+          },
+          autoFocus: true
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setSaveDialogOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleSaveQuery, disabled: !queryName.trim(), children: "Save" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Toaster, { closeButton: true, position: "top-right" })
+  ] }) });
+}
+FunctionEditorView.displayName = "FunctionEditorView";
+
+export { CreateDialog, DataBrowserView, DataGridView, DetailSheet, DocumentEditorView, FunctionEditorView, exportToJSON, formatDate, formatFieldName, isISODateString };
+//# sourceMappingURL=chunk-7UFINK3Q.js.map
+//# sourceMappingURL=chunk-7UFINK3Q.js.map