@mdxui/do 4.0.0 → 4.0.8

package/dist/chunk-UCWMSKCW.js

@@ -0,0 +1,901 @@
+import { useNamespaces, useTypes } from './chunk-FM2RTAHV.js';
+import { useCreateThing, useThings } from './chunk-WC6SFBAF.js';
+import { useDO } from './chunk-HC4PBXV4.js';
+import { cn } from './chunk-JPZ6RZJE.js';
+import * as React3 from 'react';
+import { parseQuery, applyQueryFilter, DataSidebar, DataSidebarTrigger, QuerySearch, ViewSwitcher, DataFilterPopover, DatabaseListView, DatabaseTableView, DatabaseCardView, DatabaseCodeView } 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 } from '@mdxui/primitives';
+import { Hash, Save, Pencil, Copy, Shapes, X, Trash2, Columns3, Plus, MoreVertical, Download, RefreshCw, ExternalLink, Calendar, Clock } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function CreateDialog({
+  open,
+  onOpenChange,
+  namespace,
+  defaultType,
+  types,
+  onCreated
+}) {
+  const [selectedType, setSelectedType] = React3.useState(defaultType ?? "");
+  const [name, setName] = React3.useState("");
+  const [dataJson, setDataJson] = React3.useState("{}");
+  const [jsonError, setJsonError] = React3.useState(null);
+  const createMutation = useCreateThing();
+  React3.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/features/data-browser/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/features/data-browser/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] = React3.useState(false);
+  const [editedName, setEditedName] = React3.useState("");
+  const [editedDataJson, setEditedDataJson] = React3.useState("");
+  const [jsonError, setJsonError] = React3.useState(null);
+  const [isSaving, setIsSaving] = React3.useState(false);
+  React3.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] = React3.useState(
+    initialType
+  );
+  const [viewType, setViewType] = React3.useState("table");
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [selectedIds, setSelectedIds] = React3.useState([]);
+  const [sidebarCollapsed, setSidebarCollapsed] = React3.useState(false);
+  const [detailThing, setDetailThing] = React3.useState(null);
+  const [detailOpen, setDetailOpen] = React3.useState(false);
+  const [recentQueries, setRecentQueries] = React3.useState([]);
+  const [createDialogOpen, setCreateDialogOpen] = React3.useState(false);
+  const [filterPopoverOpen, setFilterPopoverOpen] = React3.useState(false);
+  const [filterConditions, setFilterConditions] = React3.useState([]);
+  const [hiddenColumns, setHiddenColumns] = React3.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const { error: namespacesError } = useNamespaces();
+  const { data: types, error: typesError } = useTypes({ ns: selectedNamespace });
+  const filter = React3.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 = React3.useMemo(() => {
+    return parseQuery(searchQuery);
+  }, [searchQuery]);
+  const data = React3.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 = React3.useMemo(() => getTableColumns(), []);
+  const tableColumns = React3.useMemo(
+    () => allTableColumns.filter((col) => !hiddenColumns.has(col.accessorKey)),
+    [allTableColumns, hiddenColumns]
+  );
+  const queryFields = React3.useMemo(() => {
+    return ["name", "type", "ns", "createdAt", "updatedAt"];
+  }, []);
+  const handleExportSelected = React3.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 = React3.useCallback(() => {
+    const filename = `${selectedNamespace}-${selectedType ?? "all"}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}`;
+    exportToJSON(data, filename);
+  }, [data, selectedNamespace, selectedType]);
+  const handleSaveThing = React3.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 = React3.useCallback(
+    (item) => {
+      const thing = thingsResult?.data?.find((t) => t.id === item.id);
+      if (thing) {
+        setDetailThing(thing);
+        setDetailOpen(true);
+        onSelect?.(thing);
+      }
+    },
+    [thingsResult, onSelect]
+  );
+  const handleClearSelection = React3.useCallback(() => {
+    setSelectedIds([]);
+  }, []);
+  const handleSelectRecentQuery = React3.useCallback((query) => {
+    setRecentQueries((prev) => {
+      const filtered = prev.filter((q) => q !== query);
+      return [query, ...filtered].slice(0, 10);
+    });
+    setSearchQuery(query);
+  }, []);
+  React3.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);
+        }
+      }
+    )
+  ] }) });
+}
+
+export { CreateDialog, DataBrowserView, DetailSheet };
+//# sourceMappingURL=chunk-UCWMSKCW.js.map
+//# sourceMappingURL=chunk-UCWMSKCW.js.map