@webdevarif/dashui 0.1.8 → 0.2.0

package/dist/index.js

@@ -50,6 +50,7 @@ __export(index_exports, {
   CardTitle: () => CardTitle,
   Checkbox: () => Checkbox,
   ConfirmDialog: () => ConfirmDialog,
+  DashboardLayout: () => DashboardLayout,
   DataTable: () => DataTable,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
@@ -80,15 +81,22 @@ __export(index_exports, {
   FormField: () => FormField,
   FormLayout: () => FormLayout,
   FormSection: () => FormSection,
+  ImagePickerField: () => ImagePickerField,
   Input: () => Input,
   Label: () => Label2,
   LoadingSpinner: () => LoadingSpinner,
+  MediaCard: () => MediaCard,
+  MediaGrid: () => MediaGrid,
+  MediaPickerDialog: () => MediaPickerDialog,
+  NotificationBell: () => NotificationBell,
   Page: () => Page,
   PageSection: () => PageSection,
   Pagination: () => Pagination,
+  PlanBadge: () => PlanBadge,
   Popover: () => Popover,
   PopoverContent: () => PopoverContent,
   PopoverTrigger: () => PopoverTrigger,
+  SearchBar: () => SearchBar,
   Select: () => Select,
   SelectContent: () => SelectContent,
   SelectGroup: () => SelectGroup,
@@ -103,13 +111,15 @@ __export(index_exports, {
   Sidebar: () => Sidebar,
   Skeleton: () => Skeleton2,
   Stats: () => Stats,
+  StorageBar: () => StorageBar,
   Switch: () => Switch,
   Tabs: () => Tabs,
   TabsContent: () => TabsContent,
   TabsList: () => TabsList,
   TabsTrigger: () => TabsTrigger,
   Textarea: () => Textarea,
-  ThemeProvider: () => import_next_themes.ThemeProvider,
+  ThemeProvider: () => import_next_themes2.ThemeProvider,
+  ThemeToggle: () => ThemeToggle,
   Tooltip: () => Tooltip,
   TooltipContent: () => TooltipContent,
   TooltipProvider: () => TooltipProvider,
@@ -120,7 +130,7 @@ __export(index_exports, {
   cn: () => cn,
   useDisclosure: () => useDisclosure,
   usePagination: () => usePagination,
-  useTheme: () => import_next_themes.useTheme
+  useTheme: () => import_next_themes2.useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -629,9 +639,9 @@ var SelectContent = React9.forwardRef(({ className, children, position = "popper
   SelectPrimitive.Content,
   {
     ref,
+    style: { background: "#ffffff", border: "1px solid #e5e7eb", borderRadius: 10, boxShadow: "0 8px 32px rgba(0,0,0,0.12)", zIndex: 9999, overflow: "hidden" },
     className: cn(
-      // explicit bg + border + shadow so it never relies on missing CSS vars
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
+      "relative max-h-96 min-w-[8rem] overflow-hidden",
       "rounded-lg border border-border bg-white text-foreground shadow-lg",
       "dark:bg-zinc-900 dark:border-zinc-700",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -1092,8 +1102,420 @@ function PageSection({
   );
 }
 
-// src/components/data/data-table.tsx
+// src/components/layout/search-bar.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
+function SearchBar({
+  value,
+  onChange,
+  placeholder = "Search\u2026",
+  shortcut,
+  className,
+  width = "max-w-xs"
+}) {
+  const shortcuts = shortcut ? shortcut.split(" ") : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("relative flex items-center", width, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "svg",
+      {
+        className: "pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-muted-foreground",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "m21 21-4.35-4.35" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "input",
+      {
+        type: "search",
+        value,
+        onChange: (e) => onChange?.(e.target.value),
+        placeholder,
+        className: cn(
+          "h-8 w-full rounded-lg border border-input bg-muted/50 pl-8 text-sm outline-none transition-colors",
+          "placeholder:text-muted-foreground",
+          "focus:border-primary focus:ring-1 focus:ring-primary",
+          shortcut ? "pr-16" : "pr-3"
+        )
+      }
+    ),
+    shortcuts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pointer-events-none absolute right-2 flex items-center gap-0.5", children: shortcuts.map((key, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "kbd",
+      {
+        className: "inline-flex h-5 items-center rounded border border-border bg-background px-1 font-mono text-[10px] text-muted-foreground",
+        children: key
+      },
+      i
+    )) })
+  ] });
+}
+
+// src/components/layout/notification-bell.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function NotificationBell({
+  count = 0,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "relative flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+        className
+      ),
+      "aria-label": count > 0 ? `${count} unread notifications` : "Notifications",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          "svg",
+          {
+            className: "h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+            ]
+          }
+        ),
+        count > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-green-500" })
+      ]
+    }
+  );
+}
+
+// src/components/layout/theme-toggle.tsx
+var React17 = __toESM(require("react"));
+var import_next_themes = require("next-themes");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function ThemeToggle({ className }) {
+  const { resolvedTheme, setTheme } = (0, import_next_themes.useTheme)();
+  const [mounted, setMounted] = React17.useState(false);
+  React17.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "button",
+      {
+        className: cn(
+          "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground",
+          className
+        ),
+        "aria-label": "Toggle theme",
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "h-4 w-4" })
+      }
+    );
+  }
+  const isDark = resolvedTheme === "dark";
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "button",
+    {
+      onClick: () => setTheme(isDark ? "light" : "dark"),
+      className: cn(
+        "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+        className
+      ),
+      "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
+      children: isDark ? (
+        /* Sun icon */
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          "svg",
+          {
+            className: "h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" })
+            ]
+          }
+        )
+      ) : (
+        /* Moon icon */
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "svg",
+          {
+            className: "h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+          }
+        )
+      )
+    }
+  );
+}
+
+// src/components/layout/dashboard-layout.tsx
+var React18 = __toESM(require("react"));
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function isActive(itemHref, activeHref) {
+  if (!activeHref) return false;
+  return activeHref === itemHref || activeHref.startsWith(itemHref + "/");
+}
+function NavItemRow({
+  item,
+  collapsed,
+  activeHref,
+  onNavigate,
+  depth = 0
+}) {
+  const active = isActive(item.href, activeHref);
+  const hasChildren = item.children && item.children.length > 0;
+  const childActive = hasChildren && item.children.some((c) => isActive(c.href, activeHref));
+  const [open, setOpen] = React18.useState(active || childActive);
+  const handleClick = (e) => {
+    if (onNavigate) {
+      e.preventDefault();
+      onNavigate(item.href);
+    }
+    if (hasChildren) {
+      e.preventDefault();
+      setOpen((v) => !v);
+    }
+  };
+  const rowClasses = cn(
+    "flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+    active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
+    depth > 0 && "py-1.5"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "a",
+      {
+        href: item.href,
+        onClick: hasChildren ? (e) => {
+          e.preventDefault();
+          setOpen((v) => !v);
+        } : onNavigate ? handleClick : void 0,
+        className: rowClasses,
+        title: collapsed ? item.label : void 0,
+        children: [
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: item.icon }),
+          !collapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex-1 truncate", children: item.label }),
+            item.badge !== void 0 && !hasChildren && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "rounded-full bg-primary/15 px-2 py-0.5 text-[11px] font-semibold text-primary", children: item.badge }),
+            hasChildren && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              "svg",
+              {
+                className: cn("h-3.5 w-3.5 shrink-0 transition-transform text-sidebar-foreground/50", open && "rotate-180"),
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    hasChildren && open && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mt-0.5 ml-[22px] space-y-0.5 border-l border-sidebar-border/60 pl-3", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      NavItemRow,
+      {
+        item: child,
+        collapsed,
+        activeHref,
+        onNavigate,
+        depth: depth + 1
+      },
+      child.href
+    )) })
+  ] });
+}
+function UserAvatar({ user, size = "sm" }) {
+  const initials = user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  const sizeClass = size === "md" ? "h-8 w-8 text-xs" : "h-7 w-7 text-[10px]";
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex shrink-0 items-center justify-center rounded-full bg-primary font-semibold text-primary-foreground overflow-hidden", sizeClass), children: user.avatar ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: user.avatar, alt: user.name, className: "h-full w-full object-cover" }) : initials });
+}
+function DashboardLayout({
+  logo,
+  appName = "Dashboard",
+  navItems,
+  bottomNavItems,
+  activeHref,
+  onNavigate,
+  searchPlaceholder,
+  searchShortcut,
+  notificationCount,
+  onNotificationClick,
+  user,
+  onSignOut,
+  children,
+  defaultCollapsed = false,
+  footerContent
+}) {
+  const [collapsed, setCollapsed] = React18.useState(defaultCollapsed);
+  const [userMenuOpen, setUserMenuOpen] = React18.useState(false);
+  const [searchValue, setSearchValue] = React18.useState("");
+  const userMenuRef = React18.useRef(null);
+  React18.useEffect(() => {
+    function handler(e) {
+      if (userMenuRef.current && !userMenuRef.current.contains(e.target)) {
+        setUserMenuOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  const ToggleIcon = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "svg",
+    {
+      className: "h-4 w-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex h-screen overflow-hidden bg-background", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "aside",
+      {
+        className: cn(
+          "flex shrink-0 flex-col border-r bg-sidebar transition-all duration-200 ease-in-out",
+          collapsed ? "w-16" : "w-80"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex h-14 shrink-0 items-center border-b border-sidebar-border px-4", children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm font-bold text-primary", children: appName?.[0] ?? "D" }) }) : logo ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-base font-semibold text-sidebar-foreground", children: appName }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("nav", { className: "flex-1 space-y-0.5 overflow-y-auto p-2", children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            NavItemRow,
+            {
+              item,
+              collapsed,
+              activeHref,
+              onNavigate
+            },
+            item.href
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "border-t border-sidebar-border p-2", children: [
+            bottomNavItems && bottomNavItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mb-2 space-y-0.5", children: bottomNavItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              NavItemRow,
+              {
+                item,
+                collapsed,
+                activeHref,
+                onNavigate
+              },
+              item.href
+            )) }),
+            footerContent && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mb-2", children: footerContent }),
+            user && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "relative", ref: userMenuRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                "button",
+                {
+                  onClick: () => setUserMenuOpen((v) => !v),
+                  className: "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-sidebar-accent/60",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UserAvatar, { user }),
+                    !collapsed && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex-1 overflow-hidden text-left", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "truncate text-xs font-medium text-sidebar-foreground", children: user.name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "truncate text-[11px] text-sidebar-foreground/60", children: user.email })
+                    ] })
+                  ]
+                }
+              ),
+              userMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn(
+                "absolute bottom-full mb-1 z-50 min-w-[180px] rounded-md border bg-popover shadow-md",
+                collapsed ? "left-full ml-2 bottom-0" : "left-0"
+              ), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "px-3 py-2 border-b", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-xs font-medium", children: user.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-[11px] text-muted-foreground truncate", children: user.email })
+                ] }),
+                onSignOut && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                  "button",
+                  {
+                    onClick: () => {
+                      setUserMenuOpen(false);
+                      onSignOut();
+                    },
+                    className: "flex w-full items-center gap-2 px-3 py-2 text-sm text-destructive hover:bg-accent transition-colors",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("svg", { className: "h-3.5 w-3.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("polyline", { points: "16 17 21 12 16 7" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+                      ] }),
+                      "Sign out"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: "flex h-14 shrink-0 items-center gap-3 border-b bg-background px-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "button",
+          {
+            onClick: () => setCollapsed((v) => !v),
+            className: "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+            "aria-label": "Toggle sidebar",
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ToggleIcon, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex flex-1 items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          SearchBar,
+          {
+            value: searchValue,
+            onChange: setSearchValue,
+            placeholder: searchPlaceholder,
+            shortcut: searchShortcut,
+            width: "max-w-sm"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ThemeToggle, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(NotificationBell, { count: notificationCount, onClick: onNotificationClick }),
+          user && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(UserAvatar, { user, size: "md" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("main", { className: "flex-1 overflow-y-auto bg-muted/30 p-6", children })
+    ] })
+  ] });
+}
+
+// src/components/data/data-table.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function DataTable({
   columns,
   data,
@@ -1125,17 +1547,17 @@ function DataTable({
     }
   }
   const totalPages = pagination ? Math.ceil(pagination.total / pagination.pageSize) : 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-4", children: [
-    selection && selection.selected.length > 0 && actions && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2 rounded-md border bg-muted/50 p-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-4", children: [
+    selection && selection.selected.length > 0 && actions && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2 rounded-md border bg-muted/50 p-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
         selection.selected.length,
         " selected"
       ] }),
       actions
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "rounded-md border", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "border-b bg-muted/50", children: [
-        selection && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "rounded-md border", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("tr", { className: "border-b bg-muted/50", children: [
+        selection && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("th", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Checkbox,
           {
             checked: allSelected,
@@ -1147,7 +1569,7 @@ function DataTable({
             onCheckedChange: toggleAll
           }
         ) }),
-        columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "th",
           {
             className: "px-4 py-3 text-left font-medium text-muted-foreground",
@@ -1157,20 +1579,20 @@ function DataTable({
           String(col.key)
         ))
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { children: loading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "border-b", children: [
-        selection && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "h-4 w-4" }) }),
-        columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Skeleton, { className: "h-4 w-24" }) }, String(col.key)))
-      ] }, i)) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tbody", { children: loading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("tr", { className: "border-b", children: [
+        selection && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Skeleton, { className: "h-4 w-4" }) }),
+        columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Skeleton, { className: "h-4 w-24" }) }, String(col.key)))
+      ] }, i)) : data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "td",
         {
           colSpan: columns.length + (selection ? 1 : 0),
           className: "py-12 text-center",
-          children: emptyState || /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-muted-foreground", children: "No data found" })
+          children: emptyState || /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-muted-foreground", children: "No data found" })
         }
       ) }) : data.map((row, idx) => {
         const rowId = String(row[idKey] ?? idx);
         const isSelected = selection?.selected.includes(rowId);
-        return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "tr",
           {
             className: cn(
@@ -1180,12 +1602,12 @@ function DataTable({
             ),
             onClick: () => onRowClick?.(row),
             children: [
-              selection && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              selection && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "td",
                 {
                   className: "px-4 py-3",
                   onClick: (e) => e.stopPropagation(),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     Checkbox,
                     {
                       checked: isSelected,
@@ -1194,15 +1616,15 @@ function DataTable({
                   )
                 }
               ),
-              columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "px-4 py-3", children: col.cell ? col.cell(row) : String(row[col.key] ?? "") }, String(col.key)))
+              columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("td", { className: "px-4 py-3", children: col.cell ? col.cell(row) : String(row[col.key] ?? "") }, String(col.key)))
             ]
           },
           rowId
         );
       }) })
     ] }) }) }),
-    pagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-between px-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "text-sm text-muted-foreground", children: [
+    pagination && totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "text-sm text-muted-foreground", children: [
         "Page ",
         pagination.page,
         " of ",
@@ -1211,8 +1633,8 @@ function DataTable({
         pagination.total,
         " total)"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "button",
           {
             className: "rounded-md border px-3 py-1.5 text-sm disabled:opacity-50",
@@ -1221,7 +1643,7 @@ function DataTable({
             children: "Previous"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "button",
           {
             className: "rounded-md border px-3 py-1.5 text-sm disabled:opacity-50",
@@ -1236,7 +1658,7 @@ function DataTable({
 }
 
 // src/components/data/empty-state.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function EmptyState({
   icon: Icon2,
   title,
@@ -1244,7 +1666,7 @@ function EmptyState({
   action,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       className: cn(
@@ -1252,26 +1674,26 @@ function EmptyState({
         className
       ),
       children: [
-        Icon2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mb-4 rounded-full bg-muted p-3", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon2, { className: "h-6 w-6 text-muted-foreground" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "text-lg font-semibold", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: description }),
-        action && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-4", children: action })
+        Icon2 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 rounded-full bg-muted p-3", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon2, { className: "h-6 w-6 text-muted-foreground" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "text-lg font-semibold", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: description }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-4", children: action })
       ]
     }
   );
 }
 
 // src/components/data/pagination.tsx
-var React17 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Pagination({
   page,
   totalPages,
   onPageChange,
   className
 }) {
-  const pages = React17.useMemo(() => {
+  const pages = React19.useMemo(() => {
     const items = [];
     if (totalPages <= 7) {
       for (let i = 1; i <= totalPages; i++) items.push(i);
@@ -1287,18 +1709,18 @@ function Pagination({
     return items;
   }, [page, totalPages]);
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { className: cn("flex items-center gap-1", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("nav", { className: cn("flex items-center gap-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "button",
       {
         className: "inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm disabled:opacity-50",
         disabled: page <= 1,
         onClick: () => onPageChange(page - 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react8.ChevronLeft, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.ChevronLeft, { className: "h-4 w-4" })
       }
     ),
     pages.map(
-      (p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "px-2 text-muted-foreground", children: "..." }, `e-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      (p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "px-2 text-muted-foreground", children: "..." }, `e-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           className: cn(
@@ -1311,13 +1733,13 @@ function Pagination({
         p
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "button",
       {
         className: "inline-flex h-9 w-9 items-center justify-center rounded-md border text-sm disabled:opacity-50",
         disabled: page >= totalPages,
         onClick: () => onPageChange(page + 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react8.ChevronRight, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react8.ChevronRight, { className: "h-4 w-4" })
       }
     )
   ] });
@@ -1325,9 +1747,9 @@ function Pagination({
 
 // src/components/data/stats.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Stats({ stats, columns = 4, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       className: cn(
@@ -1339,18 +1761,18 @@ function Stats({ stats, columns = 4, className }) {
       ),
       children: stats.map((stat, index) => {
         const Icon2 = stat.icon;
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "div",
           {
             className: "rounded-lg border bg-card p-6 text-card-foreground shadow-sm",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: stat.label }),
-                Icon2 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon2, { className: "h-4 w-4 text-muted-foreground" })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-sm font-medium text-muted-foreground", children: stat.label }),
+                Icon2 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon2, { className: "h-4 w-4 text-muted-foreground" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mt-2 flex items-baseline gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-2xl font-bold", children: stat.value }),
-                stat.change && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-2 flex items-baseline gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-2xl font-bold", children: stat.value }),
+                stat.change && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                   "span",
                   {
                     className: cn(
@@ -1358,7 +1780,7 @@ function Stats({ stats, columns = 4, className }) {
                       stat.change.type === "increase" ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"
                     ),
                     children: [
-                      stat.change.type === "increase" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react9.ArrowUp, { className: "mr-0.5 h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react9.ArrowDown, { className: "mr-0.5 h-3 w-3" }),
+                      stat.change.type === "increase" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react9.ArrowUp, { className: "mr-0.5 h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react9.ArrowDown, { className: "mr-0.5 h-3 w-3" }),
                       stat.change.value,
                       "%"
                     ]
@@ -1374,8 +1796,531 @@ function Stats({ stats, columns = 4, className }) {
   );
 }
 
+// src/components/data/plan-badge.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var PLAN_STYLES = {
+  BASIC: "bg-muted text-muted-foreground",
+  GROW: "bg-primary text-primary-foreground",
+  ADVANCED: "bg-zinc-900 text-amber-400 dark:bg-zinc-800"
+};
+function PlanBadge({ plan, size = "md", className }) {
+  const colorClass = PLAN_STYLES[plan.toUpperCase()] ?? "bg-muted text-muted-foreground";
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded font-semibold uppercase tracking-wide",
+        colorClass,
+        size === "sm" ? "px-1.5 py-0.5 text-[10px]" : "px-2 py-1 text-xs",
+        className
+      ),
+      children: plan
+    }
+  );
+}
+
+// src/components/data/storage-bar.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+function getBarColor(pct) {
+  if (pct >= 90) return "bg-destructive";
+  if (pct >= 70) return "bg-amber-500";
+  return "bg-primary";
+}
+function StorageIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3" })
+      ]
+    }
+  );
+}
+function StorageBar({
+  used,
+  limit,
+  plan,
+  collapsed = false,
+  className
+}) {
+  const pct = limit ? Math.min(100, used / limit * 100) : 0;
+  const barColor = getBarColor(pct);
+  if (collapsed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("flex justify-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StorageIcon, { className: "h-4 w-4 text-muted-foreground" }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("space-y-1.5 px-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StorageIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+      limit === null ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium text-foreground", children: formatBytes(used) }),
+        " \xB7 Unlimited"
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "font-medium text-foreground", children: formatBytes(used) }),
+        " / ",
+        formatBytes(limit)
+      ] })
+    ] }),
+    limit !== null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "div",
+      {
+        className: cn("h-full rounded-full transition-all duration-300", barColor),
+        style: { width: `${pct}%` }
+      }
+    ) }),
+    plan && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: plan })
+  ] });
+}
+
+// src/components/media/media-card.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function stripExtension(name) {
+  return name.replace(/\.[^/.]+$/, "");
+}
+function getFileEmoji(mimeType) {
+  if (mimeType.startsWith("video/")) return "\u{1F3AC}";
+  if (mimeType.startsWith("audio/")) return "\u{1F3B5}";
+  if (mimeType === "application/pdf") return "\u{1F4C4}";
+  return "\u{1F4CE}";
+}
+function MediaCard({ file, selected = false, onClick, className }) {
+  const isImage = file.mimeType.startsWith("image/");
+  const displayName = stripExtension(file.name);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") onClick?.();
+      },
+      className: cn(
+        "group relative aspect-square cursor-pointer rounded-xl overflow-hidden border-2 transition-all duration-150",
+        selected ? "border-[color:var(--primary)] shadow-[0_0_0_2px_rgba(40,127,113,0.2)]" : "border-transparent hover:border-[color:var(--primary)]/40",
+        className
+      ),
+      children: [
+        isImage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "img",
+          {
+            src: file.url,
+            alt: file.name,
+            className: "h-full w-full object-cover transition-transform duration-150 group-hover:scale-[1.03]",
+            loading: "lazy"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex h-full w-full items-center justify-center bg-muted text-4xl", children: getFileEmoji(file.mimeType) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-150 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "truncate px-2 pb-2 text-[11px] font-medium text-white", children: displayName }) }),
+        selected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute right-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary shadow", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "svg",
+          {
+            className: "h-3 w-3 text-white",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/media/media-grid.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var columnsClass = {
+  4: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4",
+  5: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
+  6: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
+};
+function MediaGrid({
+  files,
+  selected,
+  onSelect,
+  loading = false,
+  columns = 5,
+  emptyMessage = "No files yet.",
+  onUploadClick,
+  className
+}) {
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("grid gap-2", columnsClass[columns] ?? columnsClass[5], className), children: Array.from({ length: columns * 2 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "div",
+      {
+        className: "aspect-square animate-pulse rounded-xl bg-muted"
+      },
+      i
+    )) });
+  }
+  if (files.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("flex flex-col items-center justify-center gap-3 py-16 text-center", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        "svg",
+        {
+          className: "h-7 w-7 text-muted-foreground",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-sm text-muted-foreground", children: emptyMessage }),
+      onUploadClick && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "button",
+        {
+          onClick: onUploadClick,
+          className: "rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
+          children: "Upload files"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("grid gap-2", columnsClass[columns] ?? columnsClass[5], className), children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    MediaCard,
+    {
+      file,
+      selected: selected?.has(file.id),
+      onClick: () => onSelect?.(file)
+    },
+    file.id
+  )) });
+}
+
+// src/components/media/media-picker-dialog.tsx
+var React20 = __toESM(require("react"));
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var TYPE_OPTIONS = [
+  { value: "", label: "All" },
+  { value: "image", label: "Images" },
+  { value: "video", label: "Videos" },
+  { value: "audio", label: "Audio" },
+  { value: "document", label: "Docs" }
+];
+function MediaPickerDialog({
+  open,
+  onOpenChange,
+  title = "Media Library",
+  files,
+  folders = [],
+  loading = false,
+  total,
+  uploads = [],
+  typeFilter = "",
+  onTypeChange,
+  search = "",
+  onSearch,
+  activeFolderId,
+  onFolderChange,
+  onUpload,
+  onLoadMore,
+  hasMore = false,
+  multiple = false,
+  accept = "all",
+  onSelect
+}) {
+  const [localSelected, setLocalSelected] = React20.useState(/* @__PURE__ */ new Set());
+  const fileInputRef = React20.useRef(null);
+  const handleFileSelect = (file) => {
+    if (multiple) {
+      setLocalSelected((prev) => {
+        const next = new Set(prev);
+        if (next.has(file.id)) {
+          next.delete(file.id);
+        } else {
+          next.add(file.id);
+        }
+        return next;
+      });
+    } else {
+      const selected = files.filter((f) => f.id === file.id);
+      onSelect(selected);
+      onOpenChange(false);
+    }
+  };
+  const handleConfirm = () => {
+    const selected = files.filter((f) => localSelected.has(f.id));
+    onSelect(selected);
+    onOpenChange(false);
+  };
+  const handleUploadChange = (e) => {
+    if (e.target.files && onUpload) {
+      onUpload(e.target.files);
+    }
+  };
+  const activeUploads = uploads.filter((u) => u.status === "uploading");
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogContent, { className: "flex h-[85vh] max-h-[700px] max-w-4xl flex-col gap-0 p-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogHeader, { className: "flex-row items-center justify-between border-b px-5 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-base", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+          total,
+          " files"
+        ] }),
+        onUpload && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              className: "hidden",
+              multiple: true,
+              accept: accept === "images" ? "image/*" : void 0,
+              onChange: handleUploadChange
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            "button",
+            {
+              onClick: () => fileInputRef.current?.click(),
+              className: "flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { className: "h-3.5 w-3.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "17 8 12 3 7 8" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                ] }),
+                "Upload"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-1 overflow-hidden", children: [
+      folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("aside", { className: "flex w-44 shrink-0 flex-col gap-0.5 overflow-y-auto border-r p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          "button",
+          {
+            onClick: () => onFolderChange?.(""),
+            className: cn(
+              "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+              !activeFolderId ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-accent"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { className: "h-3.5 w-3.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }) }),
+              "All files"
+            ]
+          }
+        ),
+        folders.map((folder) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          "button",
+          {
+            onClick: () => onFolderChange?.(folder.id),
+            className: cn(
+              "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+              activeFolderId === folder.id ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-accent"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-base leading-none", children: folder.icon ?? "\u{1F4C1}" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate", children: folder.name })
+            ]
+          },
+          folder.id
+        ))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 border-b px-4 py-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "m21 21-4.35-4.35" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "input",
+              {
+                type: "search",
+                value: search,
+                onChange: (e) => onSearch?.(e.target.value),
+                placeholder: "Search files\u2026",
+                className: "h-7 w-full rounded-md border border-input bg-muted/50 pl-8 pr-3 text-xs outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex gap-1", children: TYPE_OPTIONS.filter((o) => accept === "images" ? o.value === "" || o.value === "image" : true).map((opt) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "button",
+            {
+              onClick: () => onTypeChange?.(opt.value),
+              className: cn(
+                "rounded px-2 py-1 text-xs transition-colors",
+                typeFilter === opt.value ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent"
+              ),
+              children: opt.label
+            },
+            opt.value
+          )) })
+        ] }),
+        activeUploads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "border-b px-4 py-2 space-y-1.5", children: activeUploads.map((u, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "flex-1 truncate text-xs text-muted-foreground", children: u.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-1.5 w-24 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "div",
+            {
+              className: "h-full rounded-full bg-primary transition-all",
+              style: { width: `${u.progress}%` }
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-[10px] text-muted-foreground", children: [
+            u.progress,
+            "%"
+          ] })
+        ] }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex-1 overflow-y-auto p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            MediaGrid,
+            {
+              files,
+              selected: localSelected,
+              onSelect: handleFileSelect,
+              loading,
+              columns: 5,
+              onUploadClick: onUpload ? () => fileInputRef.current?.click() : void 0
+            }
+          ),
+          hasMore && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "button",
+            {
+              onClick: onLoadMore,
+              className: "rounded-md border px-4 py-2 text-sm text-muted-foreground transition-colors hover:bg-accent",
+              children: "Load more"
+            }
+          ) })
+        ] }),
+        multiple && localSelected.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between border-t px-4 py-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
+            localSelected.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "button",
+              {
+                onClick: () => setLocalSelected(/* @__PURE__ */ new Set()),
+                className: "rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent",
+                children: "Clear"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+              "button",
+              {
+                onClick: handleConfirm,
+                className: "rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
+                children: [
+                  "Insert ",
+                  localSelected.size,
+                  " file",
+                  localSelected.size !== 1 ? "s" : ""
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/components/media/image-picker-field.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var sizeMap = {
+  sm: { box: "h-12 w-12", icon: "h-4 w-4", text: "text-[9px]" },
+  md: { box: "h-20 w-20", icon: "h-5 w-5", text: "text-[10px]" },
+  lg: { box: "h-24 w-24", icon: "h-6 w-6", text: "text-xs" }
+};
+function ImagePickerField({
+  value,
+  filename,
+  onPickerOpen,
+  onRemove,
+  size = "md",
+  emptyLabel = "Click to select",
+  className
+}) {
+  const sz = sizeMap[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("relative inline-flex shrink-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onPickerOpen,
+        className: cn(
+          "group flex items-center justify-center rounded-lg border-2 border-dashed transition-all duration-150",
+          sz.box,
+          value ? "border-border overflow-hidden" : "border-border hover:border-[color:var(--primary)] hover:bg-primary/5"
+        ),
+        children: value ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "img",
+          {
+            src: value,
+            alt: filename ?? "Selected image",
+            className: "h-full w-full rounded-md object-cover"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            "svg",
+            {
+              className: cn(sz.icon, "text-muted-foreground transition-colors group-hover:text-primary"),
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+              ]
+            }
+          ),
+          size !== "sm" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn(sz.text, "text-muted-foreground text-center leading-tight transition-colors group-hover:text-primary"), children: emptyLabel })
+        ] })
+      }
+    ),
+    value && onRemove && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        className: "absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-sm transition-opacity hover:opacity-90",
+        "aria-label": "Remove image",
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { className: "h-2.5 w-2.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) })
+      }
+    )
+  ] });
+}
+
 // src/components/form/form-field.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function FormField({
   label,
   error,
@@ -1384,19 +2329,19 @@ function FormField({
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Label2, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Label2, { children: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ml-1 text-destructive", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "ml-1 text-destructive", children: "*" })
     ] }),
     children,
-    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-muted-foreground", children: hint }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-sm text-destructive", children: error })
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-sm text-muted-foreground", children: hint }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-sm text-destructive", children: error })
   ] });
 }
 
 // src/components/form/form-layout.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function FormLayout({
   title,
   description,
@@ -1404,7 +2349,7 @@ function FormLayout({
   actions,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       className: cn(
@@ -1412,37 +2357,37 @@ function FormLayout({
         className
       ),
       children: [
-        (title || description) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "border-b p-6", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h3", { className: "text-lg font-semibold", children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+        (title || description) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "border-b p-6", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-lg font-semibold", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "space-y-6 p-6", children }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: actions })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "space-y-6 p-6", children }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: actions })
       ]
     }
   );
 }
 
 // src/components/form/form-section.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function FormSection({
   title,
   description,
   children,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h4", { className: "text-sm font-medium", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h4", { className: "text-sm font-medium", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "space-y-4", children })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "space-y-4", children })
   ] });
 }
 
 // src/components/feedback/alert.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var variantConfig = {
   info: {
     icon: import_lucide_react10.Info,
@@ -1471,7 +2416,7 @@ function Alert({
 }) {
   const config = variantConfig[variant];
   const Icon2 = config.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
     {
       className: cn(
@@ -1481,17 +2426,17 @@ function Alert({
       ),
       role: "alert",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon2, { className: "mt-0.5 h-5 w-5 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "font-medium", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("text-sm", title && "mt-1"), children })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon2, { className: "mt-0.5 h-5 w-5 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "font-medium", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("text-sm", title && "mt-1"), children })
         ] }),
-        dismissible && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "button",
           {
             onClick: onDismiss,
             className: "absolute right-3 top-3 rounded-md p-1 opacity-70 hover:opacity-100",
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react10.X, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react10.X, { className: "h-4 w-4" })
           }
         )
       ]
@@ -1501,23 +2446,23 @@ function Alert({
 
 // src/components/feedback/loading-spinner.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var sizeMap = {
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var sizeMap2 = {
   sm: "h-4 w-4",
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
 function LoadingSpinner({ size = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     import_lucide_react11.Loader2,
     {
-      className: cn("animate-spin text-muted-foreground", sizeMap[size], className)
+      className: cn("animate-spin text-muted-foreground", sizeMap2[size], className)
     }
   );
 }
 
 // src/components/feedback/confirm-dialog.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function ConfirmDialog({
   open,
   onOpenChange,
@@ -1529,13 +2474,13 @@ function ConfirmDialog({
   loading,
   variant = "default"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DialogContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DialogHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogTitle, { children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogDescription, { children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(DialogContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(DialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DialogTitle, { children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DialogFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(DialogFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         Button,
         {
           variant: "outline",
@@ -1544,14 +2489,14 @@ function ConfirmDialog({
           children: cancelLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         Button,
         {
           variant: variant === "destructive" ? "destructive" : "default",
           onClick: onConfirm,
           disabled: loading,
           children: [
-            loading && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LoadingSpinner, { size: "sm", className: "mr-2" }),
+            loading && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LoadingSpinner, { size: "sm", className: "mr-2" }),
             confirmLabel
           ]
         }
@@ -1579,9 +2524,9 @@ function usePagination(total, pageSize = 20) {
 }
 
 // src/components/auth/AuthShell.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       style: {
@@ -1596,7 +2541,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -1610,7 +2555,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -1624,16 +2569,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       style: {
@@ -1650,10 +2595,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "img",
       {
         src: imageUrl,
@@ -1662,7 +2607,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         height: size,
         style: { borderRadius: "calc(var(--radius, 0.5rem) * 1.2)", flexShrink: 0, display: "block" }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "div",
       {
         style: {
@@ -1681,7 +2626,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "span",
       {
         style: {
@@ -1697,10 +2642,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "h1",
       {
         style: {
@@ -1713,7 +2658,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "p",
       {
         style: {
@@ -1729,12 +2674,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "label",
         {
           htmlFor: fieldId,
@@ -1746,9 +2691,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "input",
       {
         id: fieldId,
@@ -1778,13 +2723,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function AuthButton({
   loading,
   variant = "primary",
@@ -1827,7 +2772,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "button",
     {
       disabled: loading || disabled,
@@ -1839,8 +2784,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "span",
           {
             style: {
@@ -1861,19 +2806,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -1881,7 +2826,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       "a",
       {
         href: linkHref,
@@ -1899,9 +2844,9 @@ function AuthFootnote({ text, linkText, linkHref }) {
 }
 
 // src/components/Skeleton.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Skeleton2({ width = "100%", height = 16, rounded, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       style: {
@@ -1914,7 +2859,7 @@ function Skeleton2({ width = "100%", height = 16, rounded, style }) {
         flexShrink: 0,
         ...style
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "div",
         {
           style: {
@@ -1930,7 +2875,7 @@ function Skeleton2({ width = "100%", height = 16, rounded, style }) {
 }
 
 // src/index.ts
-var import_next_themes = require("next-themes");
+var import_next_themes2 = require("next-themes");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -1953,6 +2898,7 @@ var import_next_themes = require("next-themes");
   CardTitle,
   Checkbox,
   ConfirmDialog,
+  DashboardLayout,
   DataTable,
   Dialog,
   DialogClose,
@@ -1983,15 +2929,22 @@ var import_next_themes = require("next-themes");
   FormField,
   FormLayout,
   FormSection,
+  ImagePickerField,
   Input,
   Label,
   LoadingSpinner,
+  MediaCard,
+  MediaGrid,
+  MediaPickerDialog,
+  NotificationBell,
   Page,
   PageSection,
   Pagination,
+  PlanBadge,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  SearchBar,
   Select,
   SelectContent,
   SelectGroup,
@@ -2006,6 +2959,7 @@ var import_next_themes = require("next-themes");
   Sidebar,
   Skeleton,
   Stats,
+  StorageBar,
   Switch,
   Tabs,
   TabsContent,
@@ -2013,6 +2967,7 @@ var import_next_themes = require("next-themes");
   TabsTrigger,
   Textarea,
   ThemeProvider,
+  ThemeToggle,
   Tooltip,
   TooltipContent,
   TooltipProvider,