shadcn-data-views 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1868 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/components/DataViews.tsx
+import { useState as useState5, useEffect as useEffect2 } from "react";
+
+// src/lib/schema.ts
+var tableSchema = {
+  id: "tasks",
+  name: "Tasks",
+  icon: "\u{1F4CB}",
+  fields: [
+    { id: "title", name: "Title", type: "text", isPrimary: true },
+    { id: "description", name: "Description", type: "text" },
+    {
+      id: "status",
+      name: "Status",
+      type: "select",
+      options: [
+        { id: "todo", name: "To Do", color: "gray" },
+        { id: "in_progress", name: "In Progress", color: "blue" },
+        { id: "review", name: "Review", color: "yellow" },
+        { id: "done", name: "Done", color: "green" }
+      ]
+    },
+    {
+      id: "priority",
+      name: "Priority",
+      type: "select",
+      options: [
+        { id: "low", name: "Low", color: "gray" },
+        { id: "medium", name: "Medium", color: "yellow" },
+        { id: "high", name: "High", color: "red" }
+      ]
+    },
+    { id: "dueDate", name: "Due Date", type: "date" },
+    { id: "completed", name: "Completed", type: "checkbox" }
+  ]
+};
+function getSelectField(schema) {
+  return schema.fields.find((f) => f.type === "select");
+}
+function getDateField(schema) {
+  return schema.fields.find((f) => f.type === "date");
+}
+function getPrimaryField(schema) {
+  return schema.fields.find((f) => f.isPrimary) || schema.fields[0];
+}
+
+// src/components/ui/tabs.tsx
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/tabs.tsx
+import { jsx } from "react/jsx-runtime";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    __spreadValues({
+      ref,
+      className: cn(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      )
+    }, props)
+  );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    __spreadValues({
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+        className
+      )
+    }, props)
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    __spreadValues({
+      ref,
+      className: cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      )
+    }, props)
+  );
+});
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// src/components/DataViews.tsx
+import { LayoutGrid, Columns, Calendar as CalendarIcon, Image, FileText } from "lucide-react";
+
+// src/components/views/GridView.tsx
+import { Plus, Trash2, Eye, Pencil } from "lucide-react";
+
+// src/components/ui/button.tsx
+import * as React2 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React2.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest(_b, ["className", "variant", "size", "asChild"]);
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx2(
+      Comp,
+      __spreadValues({
+        className: cn(buttonVariants({ variant, size, className })),
+        ref
+      }, props)
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/table.tsx
+import * as React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Table = React3.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx3(
+    "table",
+    __spreadValues({
+      ref,
+      className: cn("w-full caption-bottom text-sm", className)
+    }, props)
+  ) });
+});
+Table.displayName = "Table";
+var TableHeader = React3.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3("thead", __spreadValues({ ref, className: cn("[&_tr]:border-b", className) }, props));
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React3.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "tbody",
+    __spreadValues({
+      ref,
+      className: cn("[&_tr:last-child]:border-0", className)
+    }, props)
+  );
+});
+TableBody.displayName = "TableBody";
+var TableFooter = React3.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "tfoot",
+    __spreadValues({
+      ref,
+      className: cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )
+    }, props)
+  );
+});
+TableFooter.displayName = "TableFooter";
+var TableRow = React3.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "tr",
+    __spreadValues({
+      ref,
+      className: cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )
+    }, props)
+  );
+});
+TableRow.displayName = "TableRow";
+var TableHead = React3.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "th",
+    __spreadValues({
+      ref,
+      className: cn(
+        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )
+    }, props)
+  );
+});
+TableHead.displayName = "TableHead";
+var TableCell = React3.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "td",
+    __spreadValues({
+      ref,
+      className: cn(
+        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )
+    }, props)
+  );
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React3.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "caption",
+    __spreadValues({
+      ref,
+      className: cn("mt-4 text-sm text-muted-foreground", className)
+    }, props)
+  );
+});
+TableCaption.displayName = "TableCaption";
+
+// src/components/ui/checkbox.tsx
+import * as React4 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Checkbox = React4.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx4(
+    CheckboxPrimitive.Root,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx4(
+        CheckboxPrimitive.Indicator,
+        {
+          className: cn("grid place-content-center text-current"),
+          children: /* @__PURE__ */ jsx4(Check, { className: "h-4 w-4" })
+        }
+      )
+    })
+  );
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// src/components/ui/badge.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge(_a) {
+  var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+  return /* @__PURE__ */ jsx5("div", __spreadValues({ className: cn(badgeVariants({ variant }), className) }, props));
+}
+
+// src/components/views/GridView.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var BADGE_COLOR_MAP = {
+  gray: "bg-muted text-muted-foreground",
+  blue: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300",
+  green: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300",
+  yellow: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
+  red: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300",
+  purple: "bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300"
+};
+function GridView({ schema, records, onUpdateRecord, onDeleteRecord, onOpenModal }) {
+  const renderCellValue = (record, field) => {
+    var _a;
+    const value = record.fields[field.id];
+    switch (field.type) {
+      case "checkbox":
+        return /* @__PURE__ */ jsx6(
+          Checkbox,
+          {
+            checked: !!value,
+            onCheckedChange: (checked) => onUpdateRecord(record.id, { [field.id]: checked }),
+            onClick: (e) => e.stopPropagation()
+          }
+        );
+      case "select":
+        const option = (_a = field.options) == null ? void 0 : _a.find((o) => o.name === value);
+        return value ? /* @__PURE__ */ jsx6(Badge, { variant: "secondary", className: cn("font-normal", BADGE_COLOR_MAP[(option == null ? void 0 : option.color) || "gray"]), children: value }) : null;
+      case "multiSelect":
+        const values = Array.isArray(value) ? value : [];
+        return /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap gap-1", children: values.map((v) => {
+          var _a2;
+          const opt = (_a2 = field.options) == null ? void 0 : _a2.find((o) => o.name === v);
+          return /* @__PURE__ */ jsx6(Badge, { variant: "secondary", className: cn("font-normal", BADGE_COLOR_MAP[(opt == null ? void 0 : opt.color) || "gray"]), children: v }, v);
+        }) });
+      case "date":
+        return value ? new Date(value).toLocaleDateString() : null;
+      case "number":
+        return value != null ? Number(value).toLocaleString() : null;
+      default:
+        return value;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full grow overflow-hidden sm:pl-2 relative group flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx6("div", { className: "relative w-full h-full", children: /* @__PURE__ */ jsx6("div", { className: "w-full h-full", style: { pointerEvents: "auto" }, children: /* @__PURE__ */ jsx6("div", { "data-t-grid-container": "true", tabIndex: 0, className: "relative outline-none w-full h-full", children: /* @__PURE__ */ jsx6("div", { className: "w-full h-full overflow-auto pb-10", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx6(TableHeader, { className: "bg-muted/50 sticky top-0 z-10", children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx6(TableHead, { className: "w-12 text-muted-foreground", children: "#" }),
+        schema.fields.map((field) => /* @__PURE__ */ jsxs(TableHead, { className: "min-w-[150px]", children: [
+          /* @__PURE__ */ jsx6("span", { className: "font-medium", children: field.name }),
+          field.isPrimary && /* @__PURE__ */ jsx6(Badge, { variant: "outline", className: "ml-2 text-xs", children: "Primary" })
+        ] }, field.id)),
+        /* @__PURE__ */ jsx6(TableHead, { className: "w-[100px] text-right", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(TableBody, { children: [
+        records.map((record, index) => /* @__PURE__ */ jsxs(
+          TableRow,
+          {
+            className: "group cursor-pointer hover:bg-muted/50",
+            onClick: () => onOpenModal("view", record),
+            children: [
+              /* @__PURE__ */ jsx6(TableCell, { className: "text-muted-foreground tabular-nums", children: index + 1 }),
+              schema.fields.map((field) => /* @__PURE__ */ jsx6(TableCell, { children: /* @__PURE__ */ jsx6("div", { className: "min-h-[24px] flex items-center", children: renderCellValue(record, field) }) }, field.id)),
+              /* @__PURE__ */ jsx6(TableCell, { className: "text-right", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+                /* @__PURE__ */ jsx6(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    onClick: () => onOpenModal("view", record),
+                    children: /* @__PURE__ */ jsx6(Eye, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    onClick: () => onOpenModal("edit", record),
+                    children: /* @__PURE__ */ jsx6(Pencil, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8 text-muted-foreground hover:text-destructive",
+                    onClick: () => onDeleteRecord(record.id),
+                    children: /* @__PURE__ */ jsx6(Trash2, { className: "h-4 w-4" })
+                  }
+                )
+              ] }) })
+            ]
+          },
+          record.id
+        )),
+        /* @__PURE__ */ jsx6(TableRow, { children: /* @__PURE__ */ jsx6(TableCell, { colSpan: schema.fields.length + 2, className: "p-0", children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => onOpenModal("add"),
+            className: "w-full justify-start px-4 h-10 text-muted-foreground hover:text-foreground rounded-none",
+            children: [
+              /* @__PURE__ */ jsx6(Plus, { className: "h-4 w-4 mr-2" }),
+              "Add new record"
+            ]
+          }
+        ) }) })
+      ] })
+    ] }) }) }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center h-6 pl-2 ml-1 text-xs bg-violet-200 dark:bg-zinc-600 rounded absolute bottom-3 left-0 shadow-sm z-20", children: [
+      records.length,
+      " records",
+      /* @__PURE__ */ jsx6("button", { className: "inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 gap-2 hover:text-accent-foreground rounded-md text-xs ml-[2px] h-full rounded-l-none p-[2px] hover:bg-violet-300 dark:hover:bg-zinc-500", children: /* @__PURE__ */ jsx6("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", className: "w-3 h-3", children: /* @__PURE__ */ jsx6("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m15 18-6-6 6-6" }) }) })
+    ] })
+  ] });
+}
+
+// src/components/views/FormView.tsx
+import { useState as useState2 } from "react";
+
+// src/components/ui/card.tsx
+import * as React5 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Card = React5.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn(
+        "rounded-xl border bg-card text-card-foreground shadow",
+        className
+      )
+    }, props)
+  );
+});
+Card.displayName = "Card";
+var CardHeader = React5.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-6", className)
+    }, props)
+  );
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = React5.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("font-semibold leading-none tracking-tight", className)
+    }, props)
+  );
+});
+CardTitle.displayName = "CardTitle";
+var CardDescription = React5.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("text-sm text-muted-foreground", className)
+    }, props)
+  );
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = React5.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
+});
+CardContent.displayName = "CardContent";
+var CardFooter = React5.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("flex items-center p-6 pt-0", className)
+    }, props)
+  );
+});
+CardFooter.displayName = "CardFooter";
+
+// src/components/ui/alert.tsx
+import * as React6 from "react";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var alertVariants = cva3(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Alert = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    __spreadValues({
+      ref,
+      role: "alert",
+      className: cn(alertVariants({ variant }), className)
+    }, props)
+  );
+});
+Alert.displayName = "Alert";
+var AlertTitle = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx8(
+    "h5",
+    __spreadValues({
+      ref,
+      className: cn("mb-1 font-medium leading-none tracking-tight", className)
+    }, props)
+  );
+});
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React6.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("text-sm [&_p]:leading-relaxed", className)
+    }, props)
+  );
+});
+AlertDescription.displayName = "AlertDescription";
+
+// src/components/views/FormView.tsx
+import { CheckCircle2 } from "lucide-react";
+
+// src/components/RecordForm.tsx
+import { useState, useEffect } from "react";
+
+// src/components/ui/input.tsx
+import * as React7 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Input = React7.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
+    return /* @__PURE__ */ jsx9(
+      "input",
+      __spreadValues({
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref
+      }, props)
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/ui/label.tsx
+import * as React8 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var labelVariants = cva4(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React8.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx10(
+    LabelPrimitive.Root,
+    __spreadValues({
+      ref,
+      className: cn(labelVariants(), className)
+    }, props)
+  );
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/ui/select.tsx
+import * as React9 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check as Check2, ChevronDown, ChevronUp } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React9.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs2(
+    SelectPrimitive.Trigger,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx11(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx11(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      ]
+    })
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React9.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx11(
+    SelectPrimitive.ScrollUpButton,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx11(ChevronUp, { className: "h-4 w-4" })
+    })
+  );
+});
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React9.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx11(
+    SelectPrimitive.ScrollDownButton,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx11(ChevronDown, { className: "h-4 w-4" })
+    })
+  );
+});
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React9.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, position = "popper" } = _b, props = __objRest(_b, ["className", "children", "position"]);
+  return /* @__PURE__ */ jsx11(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+    SelectPrimitive.Content,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx11(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx11(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx11(SelectScrollDownButton, {})
+      ]
+    })
+  ) });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React9.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx11(
+    SelectPrimitive.Label,
+    __spreadValues({
+      ref,
+      className: cn("px-2 py-1.5 text-sm font-semibold", className)
+    }, props)
+  );
+});
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React9.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs2(
+    SelectPrimitive.Item,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx11("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(Check2, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx11(SelectPrimitive.ItemText, { children })
+      ]
+    })
+  );
+});
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React9.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx11(
+    SelectPrimitive.Separator,
+    __spreadValues({
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-muted", className)
+    }, props)
+  );
+});
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/ui/textarea.tsx
+import * as React10 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Textarea = React10.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx12(
+    "textarea",
+    __spreadValues({
+      className: cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ref
+    }, props)
+  );
+});
+Textarea.displayName = "Textarea";
+
+// src/components/RecordForm.tsx
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+var COLOR_MAP = {
+  gray: "bg-muted",
+  blue: "bg-blue-500",
+  green: "bg-green-500",
+  yellow: "bg-amber-500",
+  red: "bg-red-500",
+  purple: "bg-purple-500"
+};
+var DEFAULT_INITIAL_VALUES = {};
+function RecordForm({ schema, initialValues = DEFAULT_INITIAL_VALUES, onSubmit, mode }) {
+  const [formData, setFormData] = useState(initialValues);
+  useEffect(() => {
+    setFormData(initialValues);
+  }, [initialValues]);
+  const handleChange = (fieldId, value) => {
+    if (mode === "view") return;
+    setFormData((prev) => __spreadProps(__spreadValues({}, prev), { [fieldId]: value }));
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (onSubmit && mode !== "view") onSubmit(formData);
+  };
+  const isReadOnly = mode === "view";
+  const renderField = (field) => {
+    var _a, _b, _c;
+    const value = (_a = formData[field.id]) != null ? _a : "";
+    if (field.id === "description" || field.type === "text" && field.name.toLowerCase().includes("description")) {
+      return /* @__PURE__ */ jsx13(
+        Textarea,
+        {
+          value,
+          disabled: isReadOnly,
+          onChange: (e) => handleChange(field.id, e.target.value),
+          placeholder: isReadOnly ? "" : `Enter ${field.name}...`,
+          className: "min-h-[100px] resize-none"
+        }
+      );
+    }
+    switch (field.type) {
+      case "text":
+        return /* @__PURE__ */ jsx13(
+          Input,
+          {
+            value,
+            disabled: isReadOnly,
+            onChange: (e) => handleChange(field.id, e.target.value),
+            placeholder: isReadOnly ? "" : `Enter ${field.name}...`
+          }
+        );
+      case "number":
+        return /* @__PURE__ */ jsx13(
+          Input,
+          {
+            type: "number",
+            value,
+            disabled: isReadOnly,
+            onChange: (e) => handleChange(field.id, e.target.value),
+            placeholder: isReadOnly ? "" : `Enter ${field.name}...`
+          }
+        );
+      case "date":
+        return /* @__PURE__ */ jsx13(
+          Input,
+          {
+            type: "date",
+            value,
+            disabled: isReadOnly,
+            onChange: (e) => handleChange(field.id, e.target.value)
+          }
+        );
+      case "checkbox":
+        return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx13(
+            Checkbox,
+            {
+              id: field.id,
+              checked: !!value,
+              disabled: isReadOnly,
+              onCheckedChange: (checked) => handleChange(field.id, checked)
+            }
+          ),
+          /* @__PURE__ */ jsx13(Label, { htmlFor: field.id, className: "cursor-pointer text-sm", children: value ? "Yes" : "No" })
+        ] });
+      case "select":
+        if (isReadOnly) {
+          return value ? /* @__PURE__ */ jsx13(Badge, { variant: "secondary", children: value }) : /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground text-sm", children: "None" });
+        }
+        return /* @__PURE__ */ jsxs3(Select, { value, onValueChange: (v) => handleChange(field.id, v), children: [
+          /* @__PURE__ */ jsx13(SelectTrigger, { children: /* @__PURE__ */ jsx13(SelectValue, { placeholder: "Select..." }) }),
+          /* @__PURE__ */ jsx13(SelectContent, { children: (_b = field.options) == null ? void 0 : _b.map((opt) => /* @__PURE__ */ jsx13(SelectItem, { value: opt.name, children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx13("div", { className: cn("w-2 h-2 rounded-full", COLOR_MAP[opt.color || "gray"]) }),
+            opt.name
+          ] }) }, opt.id)) })
+        ] });
+      case "multiSelect":
+        const selectedValues = Array.isArray(value) ? value : [];
+        if (isReadOnly) {
+          return /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-1", children: [
+            selectedValues.map((v) => /* @__PURE__ */ jsx13(Badge, { variant: "secondary", children: v }, v)),
+            selectedValues.length === 0 && /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground text-sm", children: "None" })
+          ] });
+        }
+        return /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-2", children: (_c = field.options) == null ? void 0 : _c.map((opt) => /* @__PURE__ */ jsx13(
+          Badge,
+          {
+            variant: selectedValues.includes(opt.name) ? "default" : "outline",
+            className: "cursor-pointer",
+            onClick: () => {
+              const newValues = selectedValues.includes(opt.name) ? selectedValues.filter((v) => v !== opt.name) : [...selectedValues, opt.name];
+              handleChange(field.id, newValues);
+            },
+            children: opt.name
+          },
+          opt.id
+        )) });
+      default:
+        return /* @__PURE__ */ jsx13(
+          Input,
+          {
+            value,
+            disabled: isReadOnly,
+            onChange: (e) => handleChange(field.id, e.target.value),
+            placeholder: isReadOnly ? "" : `Enter ${field.name}...`
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxs3("form", { id: "record-form", onSubmit: handleSubmit, className: "space-y-5", children: [
+    schema.fields.map((field) => /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs3(Label, { className: "text-sm font-medium", children: [
+        field.name,
+        field.isPrimary && /* @__PURE__ */ jsx13(Badge, { variant: "outline", className: "ml-2 text-xs", children: "Primary" })
+      ] }),
+      renderField(field)
+    ] }, field.id)),
+    mode !== "view" && /* @__PURE__ */ jsx13("div", { className: "flex justify-end pt-4 border-t", children: /* @__PURE__ */ jsx13(Button, { type: "submit", children: mode === "add" ? "Create Record" : "Save Changes" }) })
+  ] });
+}
+
+// src/components/views/FormView.tsx
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+function FormView({ schema, onCreateRecord }) {
+  const [success, setSuccess] = useState2(false);
+  const handleSubmit = (formData) => {
+    onCreateRecord(formData);
+    setSuccess(true);
+    setTimeout(() => setSuccess(false), 3e3);
+  };
+  return /* @__PURE__ */ jsx14("div", { className: "h-full overflow-auto p-8 bg-muted/30", children: /* @__PURE__ */ jsx14("div", { className: "max-w-xl mx-auto", children: /* @__PURE__ */ jsxs4(Card, { children: [
+    /* @__PURE__ */ jsxs4(CardHeader, { children: [
+      /* @__PURE__ */ jsx14(CardTitle, { children: "Add New Record" }),
+      /* @__PURE__ */ jsx14(CardDescription, { children: "Fill out the form below to add a new entry to the database." })
+    ] }),
+    /* @__PURE__ */ jsxs4(CardContent, { children: [
+      success && /* @__PURE__ */ jsxs4(Alert, { className: "mb-6 border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-200", children: [
+        /* @__PURE__ */ jsx14(CheckCircle2, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx14(AlertDescription, { children: "Record created successfully!" })
+      ] }),
+      /* @__PURE__ */ jsx14(
+        RecordForm,
+        {
+          schema,
+          mode: "add",
+          onSubmit: handleSubmit
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+// src/components/views/KanbanView.tsx
+import { useState as useState3, useMemo } from "react";
+import {
+  Plus as Plus2,
+  Calendar,
+  AlignLeft,
+  CheckSquare,
+  Hash,
+  Tag,
+  Tags,
+  User as UserIcon
+} from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+var BADGE_COLOR_MAP2 = {
+  gray: "bg-muted text-muted-foreground hover:bg-muted/80",
+  blue: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300 hover:bg-blue-100/80",
+  green: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300 hover:bg-green-100/80",
+  yellow: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300 hover:bg-amber-100/80",
+  red: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300 hover:bg-red-100/80",
+  purple: "bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300 hover:bg-purple-100/80"
+};
+var COLUMN_DOT_COLOR_MAP = {
+  gray: "bg-gray-400",
+  blue: "bg-blue-500",
+  green: "bg-green-500",
+  yellow: "bg-amber-500",
+  red: "bg-red-500",
+  purple: "bg-purple-500"
+};
+var FIELD_ICON_MAP = {
+  text: AlignLeft,
+  number: Hash,
+  select: Tag,
+  multiSelect: Tags,
+  date: Calendar,
+  checkbox: CheckSquare,
+  user: UserIcon
+};
+function KanbanView({ schema, records, onUpdateRecord, onDeleteRecord, onOpenModal }) {
+  const [draggedRecord, setDraggedRecord] = useState3(null);
+  const selectField = getSelectField(schema);
+  const primaryField = getPrimaryField(schema);
+  const columns = useMemo(() => {
+    if (!(selectField == null ? void 0 : selectField.options)) return [];
+    return [
+      { id: "__empty__", name: "Uncategorized", color: "gray" },
+      ...selectField.options
+    ];
+  }, [selectField]);
+  const recordsByColumn = useMemo(() => {
+    const grouped = {};
+    columns.forEach((col) => {
+      grouped[col.id] = [];
+    });
+    records.forEach((record) => {
+      var _a, _b;
+      if (!selectField) return;
+      const value = record.fields[selectField.id];
+      const option = (_a = selectField.options) == null ? void 0 : _a.find((o) => o.name === value);
+      const colId = (option == null ? void 0 : option.id) || "__empty__";
+      (_b = grouped[colId]) == null ? void 0 : _b.push(record);
+    });
+    return grouped;
+  }, [records, columns, selectField]);
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+  const handleDrop = (columnId) => {
+    if (!draggedRecord || !selectField) return;
+    const column = columns.find((c) => c.id === columnId);
+    const value = columnId === "__empty__" ? "" : (column == null ? void 0 : column.name) || "";
+    onUpdateRecord(draggedRecord, { [selectField.id]: value });
+    setDraggedRecord(null);
+  };
+  if (!selectField) {
+    return /* @__PURE__ */ jsx15("div", { className: "h-full flex items-center justify-center text-muted-foreground", children: "No select field found in schema. Add a select field to enable Kanban view." });
+  }
+  return /* @__PURE__ */ jsx15("div", { className: "w-full grow overflow-hidden bg-background", children: /* @__PURE__ */ jsx15("div", { className: "relative w-full h-full overflow-x-auto overflow-y-hidden p-2", children: /* @__PURE__ */ jsx15("div", { className: "flex h-full", children: columns.map((column) => {
+    var _a, _b;
+    return /* @__PURE__ */ jsx15("div", { className: "h-full pr-4", children: /* @__PURE__ */ jsxs5("div", { className: "w-[264px] h-full border bg-muted rounded-md shrink-0 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx15("div", { className: "w-full", children: /* @__PURE__ */ jsx15("div", { className: "flex h-12 w-full shrink-0 items-center justify-between border-b bg-card px-4", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center space-x-2 overflow-hidden text-muted-foreground", children: [
+        /* @__PURE__ */ jsx15("div", { className: cn("w-2 h-2 rounded-full shrink-0", COLUMN_DOT_COLOR_MAP[column.color || "gray"]) }),
+        /* @__PURE__ */ jsx15("span", { className: "text-sm font-semibold truncate", children: column.name }),
+        /* @__PURE__ */ jsx15("span", { className: "rounded-xl border px-2 text-xs", children: ((_a = recordsByColumn[column.id]) == null ? void 0 : _a.length) || 0 })
+      ] }) }) }),
+      /* @__PURE__ */ jsx15(
+        "div",
+        {
+          className: "flex-1 w-full overflow-y-auto min-h-0",
+          onDragOver: handleDragOver,
+          onDrop: () => handleDrop(column.id),
+          children: /* @__PURE__ */ jsx15("div", { className: "flex flex-col pt-3 pb-3", children: (_b = recordsByColumn[column.id]) == null ? void 0 : _b.map((record) => /* @__PURE__ */ jsx15("div", { className: "w-full px-3 mb-2", children: /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              draggable: true,
+              onDragStart: () => setDraggedRecord(record.id),
+              onClick: () => onOpenModal("view", record),
+              className: cn(
+                "relative flex w-full grow flex-col space-y-2 gap-1 overflow-hidden rounded-md border border-border bg-card hover:border-primary/15 p-3 cursor-pointer transition-all",
+                draggedRecord === record.id && "opacity-50 ring-2 ring-primary"
+              ),
+              children: [
+                /* @__PURE__ */ jsx15("div", { className: "text-base font-semibold", children: primaryField ? record.fields[primaryField.id] || "Untitled" : "Untitled" }),
+                schema.fields.filter((f) => !f.isPrimary && f.id !== selectField.id).map((field) => {
+                  const value = record.fields[field.id];
+                  if (value === void 0 || value === null || value === "" || value === false) return null;
+                  const Icon2 = FIELD_ICON_MAP[field.type] || AlignLeft;
+                  return /* @__PURE__ */ jsxs5("div", { children: [
+                    /* @__PURE__ */ jsxs5("div", { className: "mb-1 flex items-center space-x-1 text-muted-foreground", children: [
+                      /* @__PURE__ */ jsx15(Icon2, { className: "w-4 h-4 text-sm" }),
+                      /* @__PURE__ */ jsx15("span", { className: "text-xs", children: field.name })
+                    ] }),
+                    /* @__PURE__ */ jsx15("div", { className: "w-full text-[13px] leading-5 breaking-all line-clamp-6", children: field.type === "select" ? /* @__PURE__ */ jsx15("div", { className: "flex gap-1 flex-wrap", children: (() => {
+                      var _a2;
+                      const option = (_a2 = field.options) == null ? void 0 : _a2.find((o) => o.name === value);
+                      return /* @__PURE__ */ jsx15(
+                        "div",
+                        {
+                          className: cn(
+                            "text-xs px-2 h-5 rounded-md flex items-center gap-1 min-w-0 truncate",
+                            BADGE_COLOR_MAP2[(option == null ? void 0 : option.color) || "gray"]
+                          ),
+                          title: String(value),
+                          children: /* @__PURE__ */ jsx15("span", { className: "min-w-0 truncate", children: String(value) })
+                        }
+                      );
+                    })() }) : field.type === "checkbox" ? /* @__PURE__ */ jsx15("div", { className: "flex gap-1 flex-wrap", children: /* @__PURE__ */ jsx15("div", { className: cn(
+                      "flex items-center justify-center w-5 h-5 rounded-sm border border-primary shadow bg-primary text-primary-foreground"
+                    ), children: /* @__PURE__ */ jsx15(CheckSquare, { className: "h-4 w-4" }) }) }) : /* @__PURE__ */ jsx15("span", { title: String(value), className: "whitespace-pre-wrap break-all", children: String(value) }) })
+                  ] }, field.id);
+                })
+              ]
+            }
+          ) }, record.id)) })
+        }
+      ),
+      /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center rounded-b-md bg-slate-50 px-3 py-2 dark:bg-muted", children: /* @__PURE__ */ jsx15(
+        Button,
+        {
+          variant: "outline",
+          className: "w-full h-9 gap-2 bg-background dark:bg-white/5 dark:hover:bg-white/10 shadow-none hover:bg-zinc-100 dark:hover:bg-zinc-800",
+          onClick: () => onOpenModal("add"),
+          children: /* @__PURE__ */ jsx15(Plus2, { className: "w-5 h-5" })
+        }
+      ) })
+    ] }) }, column.id);
+  }) }) }) });
+}
+
+// src/components/views/GalleryView.tsx
+import { Plus as Plus3, Trash2 as Trash23, MoreHorizontal as MoreHorizontal2, Eye as Eye3, Pencil as Pencil3 } from "lucide-react";
+
+// src/components/ui/dropdown-menu.tsx
+import * as React11 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check as Check3, ChevronRight, Circle } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuSubTrigger = React11.forwardRef((_a, ref) => {
+  var _b = _a, { className, inset, children } = _b, props = __objRest(_b, ["className", "inset", "children"]);
+  return /* @__PURE__ */ jsxs6(
+    DropdownMenuPrimitive.SubTrigger,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        inset && "pl-8",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx16(ChevronRight, { className: "ml-auto" })
+      ]
+    })
+  );
+});
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React11.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx16(
+    DropdownMenuPrimitive.SubContent,
+    __spreadValues({
+      ref,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )
+    }, props)
+  );
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React11.forwardRef((_a, ref) => {
+  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
+  return /* @__PURE__ */ jsx16(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
+    DropdownMenuPrimitive.Content,
+    __spreadValues({
+      ref,
+      sideOffset,
+      className: cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )
+    }, props)
+  ) });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React11.forwardRef((_a, ref) => {
+  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
+  return /* @__PURE__ */ jsx16(
+    DropdownMenuPrimitive.Item,
+    __spreadValues({
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+        inset && "pl-8",
+        className
+      )
+    }, props)
+  );
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React11.forwardRef((_a, ref) => {
+  var _b = _a, { className, children, checked } = _b, props = __objRest(_b, ["className", "children", "checked"]);
+  return /* @__PURE__ */ jsxs6(
+    DropdownMenuPrimitive.CheckboxItem,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      checked
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(Check3, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    })
+  );
+});
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React11.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs6(
+    DropdownMenuPrimitive.RadioItem,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+        children
+      ]
+    })
+  );
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React11.forwardRef((_a, ref) => {
+  var _b = _a, { className, inset } = _b, props = __objRest(_b, ["className", "inset"]);
+  return /* @__PURE__ */ jsx16(
+    DropdownMenuPrimitive.Label,
+    __spreadValues({
+      ref,
+      className: cn(
+        "px-2 py-1.5 text-sm font-semibold",
+        inset && "pl-8",
+        className
+      )
+    }, props)
+  );
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React11.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx16(
+    DropdownMenuPrimitive.Separator,
+    __spreadValues({
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-muted", className)
+    }, props)
+  );
+});
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = (_a) => {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx16(
+    "span",
+    __spreadValues({
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className)
+    }, props)
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/components/views/GalleryView.tsx
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+function GalleryView({ schema, records, onDeleteRecord, onOpenModal }) {
+  const primaryField = getPrimaryField(schema);
+  const displayFields = schema.fields.filter((f) => f.id !== (primaryField == null ? void 0 : primaryField.id)).slice(0, 3);
+  return /* @__PURE__ */ jsx17("div", { className: "h-full overflow-auto p-6 bg-muted/30", children: /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: [
+    records.map((record) => {
+      const title = primaryField ? record.fields[primaryField.id] : "Untitled";
+      return /* @__PURE__ */ jsxs7(
+        Card,
+        {
+          className: "group hover:shadow-md transition-all cursor-pointer overflow-hidden",
+          onClick: () => onOpenModal("view", record),
+          children: [
+            /* @__PURE__ */ jsxs7("div", { className: "aspect-[16/10] bg-muted flex items-center justify-center relative", children: [
+              /* @__PURE__ */ jsx17("span", { className: "text-4xl font-semibold text-muted-foreground/20 select-none", children: (title || "U").charAt(0).toUpperCase() }),
+              /* @__PURE__ */ jsx17("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx17(Button, { variant: "secondary", size: "icon", className: "h-8 w-8", children: /* @__PURE__ */ jsx17(MoreHorizontal2, { className: "h-4 w-4" }) }) }),
+                /* @__PURE__ */ jsxs7(DropdownMenuContent, { align: "end", children: [
+                  /* @__PURE__ */ jsxs7(DropdownMenuItem, { onClick: () => onOpenModal("view", record), children: [
+                    /* @__PURE__ */ jsx17(Eye3, { className: "h-4 w-4 mr-2" }),
+                    "View"
+                  ] }),
+                  /* @__PURE__ */ jsxs7(DropdownMenuItem, { onClick: () => onOpenModal("edit", record), children: [
+                    /* @__PURE__ */ jsx17(Pencil3, { className: "h-4 w-4 mr-2" }),
+                    "Edit"
+                  ] }),
+                  /* @__PURE__ */ jsxs7(
+                    DropdownMenuItem,
+                    {
+                      className: "text-destructive focus:text-destructive",
+                      onClick: () => onDeleteRecord(record.id),
+                      children: [
+                        /* @__PURE__ */ jsx17(Trash23, { className: "h-4 w-4 mr-2" }),
+                        "Delete"
+                      ]
+                    }
+                  )
+                ] })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs7(CardContent, { className: "p-4", children: [
+              /* @__PURE__ */ jsx17("h3", { className: "font-medium text-sm truncate mb-2", children: title || "Untitled" }),
+              /* @__PURE__ */ jsx17("div", { className: "space-y-1.5", children: displayFields.map((field) => {
+                const value = record.fields[field.id];
+                if (value === void 0 || value === null || value === "" || value === false) return null;
+                let displayValue = value;
+                if (Array.isArray(value)) displayValue = value.join(", ");
+                else if (typeof value === "boolean") displayValue = value ? "Yes" : "No";
+                else if (field.type === "date") displayValue = new Date(value).toLocaleDateString();
+                return /* @__PURE__ */ jsxs7("div", { className: "flex items-baseline gap-2 text-xs", children: [
+                  /* @__PURE__ */ jsxs7("span", { className: "text-muted-foreground flex-shrink-0", children: [
+                    field.name,
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ jsx17("span", { className: "text-foreground truncate", children: displayValue })
+                ] }, field.id);
+              }) })
+            ] })
+          ]
+        },
+        record.id
+      );
+    }),
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: "flex flex-col items-center justify-center cursor-pointer border-2 border-dashed border-muted-foreground/20 rounded-lg transition-all hover:border-primary hover:bg-muted/50 min-h-[200px]",
+        onClick: () => onOpenModal("add"),
+        children: [
+          /* @__PURE__ */ jsx17("div", { className: "h-10 w-10 rounded-full bg-muted flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx17(Plus3, { className: "h-5 w-5 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-muted-foreground", children: "Add Record" })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/views/CalendarView.tsx
+import { useMemo as useMemo2, useState as useState4 } from "react";
+import { ChevronLeft, ChevronRight as ChevronRight2, Plus as Plus4, Eye as Eye4, Pencil as Pencil4, Trash2 as Trash24, MoreHorizontal as MoreHorizontal3 } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+function CalendarView({ schema, records, onUpdateRecord, onDeleteRecord, onOpenModal }) {
+  const [currentDate, setCurrentDate] = useState4(/* @__PURE__ */ new Date());
+  const dateField = getDateField(schema);
+  const primaryField = getPrimaryField(schema);
+  const monthStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+  const monthEnd = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+  const calendarDays = useMemo2(() => {
+    const days = [];
+    const firstDayOfWeek = monthStart.getDay();
+    for (let i = firstDayOfWeek - 1; i >= 0; i--) {
+      const date = new Date(monthStart);
+      date.setDate(date.getDate() - i - 1);
+      days.push(date);
+    }
+    for (let i = 1; i <= monthEnd.getDate(); i++) {
+      days.push(new Date(currentDate.getFullYear(), currentDate.getMonth(), i));
+    }
+    const remaining = 42 - days.length;
+    for (let i = 1; i <= remaining; i++) {
+      const date = new Date(monthEnd);
+      date.setDate(date.getDate() + i);
+      days.push(date);
+    }
+    return days;
+  }, [currentDate, monthStart, monthEnd]);
+  const recordsByDate = useMemo2(() => {
+    const map = {};
+    if (!dateField) return map;
+    records.forEach((record) => {
+      const dateValue = record.fields[dateField.id];
+      if (dateValue) {
+        const date = new Date(dateValue);
+        const key = date.toISOString().split("T")[0];
+        if (!map[key]) map[key] = [];
+        map[key].push(record);
+      }
+    });
+    return map;
+  }, [records, dateField]);
+  const isToday = (date) => date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+  const isCurrentMonth = (date) => date.getMonth() === currentDate.getMonth();
+  const handleDayClick = (date) => {
+    if (!dateField) return;
+    onOpenModal("add", void 0, { [dateField.id]: date.toISOString().split("T")[0] });
+  };
+  const handleDrop = (recordId, newDate) => {
+    if (!dateField) return;
+    onUpdateRecord(recordId, { [dateField.id]: newDate.toISOString().split("T")[0] });
+  };
+  const weekDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  if (!dateField) {
+    return /* @__PURE__ */ jsx18("div", { className: "h-full flex items-center justify-center text-muted-foreground", children: "No date field found in schema. Add a date field to enable Calendar view." });
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: "h-full flex flex-col p-6 bg-muted/30", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs8("h2", { className: "text-xl font-semibold", children: [
+          monthNames[currentDate.getMonth()],
+          " ",
+          currentDate.getFullYear()
+        ] }),
+        /* @__PURE__ */ jsx18(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => setCurrentDate(/* @__PURE__ */ new Date()),
+            children: "Today"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx18(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "h-8 w-8",
+            onClick: () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1)),
+            children: /* @__PURE__ */ jsx18(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            className: "h-8 w-8",
+            onClick: () => setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)),
+            children: /* @__PURE__ */ jsx18(ChevronRight2, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex-1 border rounded-lg overflow-hidden bg-background flex flex-col", children: [
+      /* @__PURE__ */ jsx18("div", { className: "grid grid-cols-7 bg-muted/50 border-b", children: weekDays.map((day) => /* @__PURE__ */ jsx18("div", { className: "px-2 py-2 text-center text-xs font-medium text-muted-foreground", children: day }, day)) }),
+      /* @__PURE__ */ jsx18("div", { className: "grid grid-cols-7 flex-1", children: calendarDays.map((date, index) => {
+        const dateKey = date.toISOString().split("T")[0];
+        const dayRecords = recordsByDate[dateKey] || [];
+        return /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: cn(
+              "min-h-[100px] p-1.5 border-b border-r transition-all group relative flex flex-col",
+              !isCurrentMonth(date) && "bg-muted/30 text-muted-foreground/50",
+              isCurrentMonth(date) && "hover:bg-muted/10",
+              index % 7 === 6 && "border-r-0"
+            ),
+            onDragOver: (e) => e.preventDefault(),
+            onDrop: (e) => {
+              const recordId = e.dataTransfer.getData("recordId");
+              if (recordId) handleDrop(recordId, date);
+            },
+            children: [
+              /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-1", children: [
+                /* @__PURE__ */ jsx18("span", { className: cn(
+                  "text-xs w-6 h-6 flex items-center justify-center rounded-full",
+                  isToday(date) ? "bg-primary text-primary-foreground font-medium" : ""
+                ), children: date.getDate() }),
+                /* @__PURE__ */ jsx18(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity",
+                    onClick: () => handleDayClick(date),
+                    children: /* @__PURE__ */ jsx18(Plus4, { className: "h-3 w-3" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx18("div", { className: "flex-1 space-y-0.5 overflow-y-auto", children: dayRecords.map((record) => /* @__PURE__ */ jsxs8(
+                "div",
+                {
+                  draggable: true,
+                  onDragStart: (e) => {
+                    e.stopPropagation();
+                    e.dataTransfer.setData("recordId", record.id);
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onOpenModal("view", record);
+                  },
+                  className: "group/item relative",
+                  children: [
+                    /* @__PURE__ */ jsx18(
+                      Badge,
+                      {
+                        variant: "secondary",
+                        className: "w-full justify-start truncate text-xs py-0.5 cursor-grab active:cursor-grabbing hover:bg-primary/10",
+                        children: primaryField ? record.fields[primaryField.id] || "Untitled" : "Event"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx18("div", { className: "absolute right-0 top-0 h-full flex items-center opacity-0 group-hover/item:opacity-100 bg-background/80 pr-1 rounded-r", children: /* @__PURE__ */ jsxs8(DropdownMenu, { children: [
+                      /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx18(MoreHorizontal3, { className: "h-3 w-3 text-muted-foreground cursor-pointer" }) }),
+                      /* @__PURE__ */ jsxs8(DropdownMenuContent, { align: "end", children: [
+                        /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onOpenModal("view", record), children: [
+                          /* @__PURE__ */ jsx18(Eye4, { className: "h-4 w-4 mr-2" }),
+                          "View"
+                        ] }),
+                        /* @__PURE__ */ jsxs8(DropdownMenuItem, { onClick: () => onOpenModal("edit", record), children: [
+                          /* @__PURE__ */ jsx18(Pencil4, { className: "h-4 w-4 mr-2" }),
+                          "Edit"
+                        ] }),
+                        /* @__PURE__ */ jsxs8(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => onDeleteRecord(record.id), children: [
+                          /* @__PURE__ */ jsx18(Trash24, { className: "h-4 w-4 mr-2" }),
+                          "Delete"
+                        ] })
+                      ] })
+                    ] }) })
+                  ]
+                },
+                record.id
+              )) })
+            ]
+          },
+          index
+        );
+      }) })
+    ] })
+  ] });
+}
+
+// src/components/ui/dialog.tsx
+import * as React12 from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React12.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx19(
+    DialogPrimitive.Overlay,
+    __spreadValues({
+      ref,
+      className: cn(
+        "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )
+    }, props)
+  );
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React12.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs9(DialogPortal, { children: [
+    /* @__PURE__ */ jsx19(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs9(
+      DialogPrimitive.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        )
+      }, props), {
+        children: [
+          children,
+          /* @__PURE__ */ jsxs9(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ jsx19(X, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx19("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      })
+    )
+  ] });
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = (_a) => {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx19(
+    "div",
+    __spreadValues({
+      className: cn(
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className
+      )
+    }, props)
+  );
+};
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = (_a) => {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx19(
+    "div",
+    __spreadValues({
+      className: cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className
+      )
+    }, props)
+  );
+};
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React12.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx19(
+    DialogPrimitive.Title,
+    __spreadValues({
+      ref,
+      className: cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      )
+    }, props)
+  );
+});
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React12.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx19(
+    DialogPrimitive.Description,
+    __spreadValues({
+      ref,
+      className: cn("text-sm text-muted-foreground", className)
+    }, props)
+  );
+});
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/components/ui/scroll-area.tsx
+import * as React13 from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var ScrollArea = React13.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs10(
+    ScrollAreaPrimitive.Root,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("relative overflow-hidden", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx20(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+        /* @__PURE__ */ jsx20(ScrollBar, {}),
+        /* @__PURE__ */ jsx20(ScrollAreaPrimitive.Corner, {})
+      ]
+    })
+  );
+});
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React13.forwardRef((_a, ref) => {
+  var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
+  return /* @__PURE__ */ jsx20(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    __spreadProps(__spreadValues({
+      ref,
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx20(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    })
+  );
+});
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+// src/components/RecordModal.tsx
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+function RecordModal({
+  isOpen,
+  onClose,
+  mode,
+  schema,
+  record,
+  initialValues,
+  onSubmit
+}) {
+  const titles = {
+    add: "Create New Record",
+    edit: "Edit Record",
+    view: "Record Details"
+  };
+  const descriptions = {
+    add: "Enter the details for the new record.",
+    edit: "Modify the values for this record.",
+    view: "View the data for this record."
+  };
+  const handleSubmit = (values) => {
+    onSubmit(values);
+    onClose();
+  };
+  const formValues = mode === "add" ? initialValues : record == null ? void 0 : record.fields;
+  return /* @__PURE__ */ jsx21(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs11(DialogContent, { className: "sm:max-w-[500px] max-h-[85vh] flex flex-col", children: [
+    /* @__PURE__ */ jsxs11(DialogHeader, { children: [
+      /* @__PURE__ */ jsx21(DialogTitle, { children: titles[mode] }),
+      /* @__PURE__ */ jsx21(DialogDescription, { children: descriptions[mode] })
+    ] }),
+    /* @__PURE__ */ jsx21(ScrollArea, { className: "flex-1 -mx-6 px-6", children: /* @__PURE__ */ jsx21(
+      RecordForm,
+      {
+        schema,
+        mode,
+        initialValues: formValues || {},
+        onSubmit: handleSubmit
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/ThemeToggle.tsx
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+function ThemeToggle() {
+  const { setTheme, theme } = useTheme();
+  return /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx22(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(Button, { variant: "ghost", size: "icon", className: "h-9 w-9", children: [
+      /* @__PURE__ */ jsx22(Sun, { className: "h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+      /* @__PURE__ */ jsx22(Moon, { className: "absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
+      /* @__PURE__ */ jsx22("span", { className: "sr-only", children: "Toggle theme" })
+    ] }) }),
+    /* @__PURE__ */ jsxs12(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ jsx22(DropdownMenuItem, { onClick: () => setTheme("light"), children: "Light" }),
+      /* @__PURE__ */ jsx22(DropdownMenuItem, { onClick: () => setTheme("dark"), children: "Dark" }),
+      /* @__PURE__ */ jsx22(DropdownMenuItem, { onClick: () => setTheme("system"), children: "System" })
+    ] })
+  ] });
+}
+
+// src/components/DataViews.tsx
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+function DataViews({ schema, dbClient, config }) {
+  const [records, setRecords] = useState5([]);
+  const [activeView, setActiveView] = useState5((config == null ? void 0 : config.defaultView) || "grid");
+  const [modalState, setModalState] = useState5({
+    isOpen: false,
+    mode: "add"
+  });
+  const [mounted, setMounted] = useState5(false);
+  const hasSelectField = !!getSelectField(schema);
+  const hasDateField = !!getDateField(schema);
+  const fetchRecords = async () => {
+    try {
+      const data = await dbClient.getRecords();
+      setRecords(data);
+    } catch (error) {
+      console.error("Failed to fetch records:", error);
+    }
+  };
+  useEffect2(() => {
+    setMounted(true);
+    fetchRecords();
+  }, [dbClient]);
+  const handleCreateRecord = async (fieldValues) => {
+    try {
+      const newRecord = await dbClient.createRecord({ fields: fieldValues });
+      setRecords((prev) => [newRecord, ...prev]);
+      return newRecord;
+    } catch (error) {
+      console.error("Failed to create record:", error);
+      throw error;
+    }
+  };
+  const handleUpdateRecord = async (recordId, fieldValues) => {
+    try {
+      const updatedRecord = await dbClient.updateRecord(recordId, { fields: fieldValues });
+      setRecords((prev) => prev.map((r) => r.id === recordId ? updatedRecord : r));
+    } catch (error) {
+      console.error("Failed to update record:", error);
+      throw error;
+    }
+  };
+  const handleDeleteRecord = async (recordId) => {
+    try {
+      await dbClient.deleteRecord(recordId);
+      setRecords((prev) => prev.filter((r) => r.id !== recordId));
+    } catch (error) {
+      console.error("Failed to delete record:", error);
+      throw error;
+    }
+  };
+  const openModal = (mode, record, initialValues) => {
+    setModalState({ isOpen: true, mode, record, initialValues });
+  };
+  const commonProps = {
+    schema,
+    records,
+    onCreateRecord: handleCreateRecord,
+    onUpdateRecord: handleUpdateRecord,
+    onDeleteRecord: handleDeleteRecord,
+    onOpenModal: openModal
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "h-full w-full flex flex-col bg-background", children: [
+    /* @__PURE__ */ jsxs13("header", { className: "border-b px-6 py-3 flex items-center justify-between shrink-0", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx23("span", { className: "text-2xl", children: schema.icon }),
+        /* @__PURE__ */ jsx23("h1", { className: "text-lg font-semibold", children: schema.name })
+      ] }),
+      /* @__PURE__ */ jsx23(ThemeToggle, {})
+    ] }),
+    /* @__PURE__ */ jsxs13(Tabs, { value: activeView, onValueChange: (v) => setActiveView(v), className: "flex-1 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx23("div", { className: "border-b px-4 shrink-0", children: /* @__PURE__ */ jsxs13(TabsList, { className: "h-10", children: [
+        /* @__PURE__ */ jsxs13(TabsTrigger, { value: "grid", className: "gap-2", children: [
+          mounted && /* @__PURE__ */ jsx23(LayoutGrid, { className: "h-4 w-4" }),
+          "Grid"
+        ] }),
+        /* @__PURE__ */ jsxs13(TabsTrigger, { value: "form", className: "gap-2", children: [
+          mounted && /* @__PURE__ */ jsx23(FileText, { className: "h-4 w-4" }),
+          "Form"
+        ] }),
+        hasSelectField && /* @__PURE__ */ jsxs13(TabsTrigger, { value: "kanban", className: "gap-2", children: [
+          mounted && /* @__PURE__ */ jsx23(Columns, { className: "h-4 w-4" }),
+          "Kanban"
+        ] }),
+        /* @__PURE__ */ jsxs13(TabsTrigger, { value: "gallery", className: "gap-2", children: [
+          mounted && /* @__PURE__ */ jsx23(Image, { className: "h-4 w-4" }),
+          "Gallery"
+        ] }),
+        hasDateField && /* @__PURE__ */ jsxs13(TabsTrigger, { value: "calendar", className: "gap-2", children: [
+          mounted && /* @__PURE__ */ jsx23(CalendarIcon, { className: "h-4 w-4" }),
+          "Calendar"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs13("div", { className: "flex-1 overflow-auto relative", children: [
+        /* @__PURE__ */ jsx23(TabsContent, { value: "grid", className: "h-full m-0", children: /* @__PURE__ */ jsx23(GridView, __spreadValues({}, commonProps)) }),
+        /* @__PURE__ */ jsx23(TabsContent, { value: "form", className: "h-full m-0", children: /* @__PURE__ */ jsx23(FormView, __spreadValues({}, commonProps)) }),
+        hasSelectField && /* @__PURE__ */ jsx23(TabsContent, { value: "kanban", className: "h-full m-0", children: /* @__PURE__ */ jsx23(KanbanView, __spreadValues({}, commonProps)) }),
+        /* @__PURE__ */ jsx23(TabsContent, { value: "gallery", className: "h-full m-0", children: /* @__PURE__ */ jsx23(GalleryView, __spreadValues({}, commonProps)) }),
+        hasDateField && /* @__PURE__ */ jsx23(TabsContent, { value: "calendar", className: "h-full m-0", children: /* @__PURE__ */ jsx23(CalendarView, __spreadValues({}, commonProps)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx23(
+      RecordModal,
+      {
+        isOpen: modalState.isOpen,
+        onClose: () => setModalState((s) => __spreadProps(__spreadValues({}, s), { isOpen: false })),
+        mode: modalState.mode,
+        schema,
+        record: modalState.record,
+        initialValues: modalState.initialValues,
+        onSubmit: (values) => {
+          if (modalState.mode === "add") {
+            handleCreateRecord(values);
+          } else if (modalState.mode === "edit" && modalState.record) {
+            handleUpdateRecord(modalState.record.id, values);
+          }
+        }
+      }
+    )
+  ] });
+}
+export {
+  DataViews,
+  getDateField,
+  getPrimaryField,
+  getSelectField,
+  tableSchema
+};