@webdevarif/dashui 0.1.8 → 0.2.0

package/dist/index.mjs

@@ -503,9 +503,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",
@@ -966,8 +966,420 @@ function PageSection({
   );
 }
 
-// src/components/data/data-table.tsx
+// src/components/layout/search-bar.tsx
 import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+function SearchBar({
+  value,
+  onChange,
+  placeholder = "Search\u2026",
+  shortcut,
+  className,
+  width = "max-w-xs"
+}) {
+  const shortcuts = shortcut ? shortcut.split(" ") : [];
+  return /* @__PURE__ */ jsxs9("div", { className: cn("relative flex items-center", width, className), children: [
+    /* @__PURE__ */ jsxs9(
+      "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__ */ jsx22("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx22("path", { d: "m21 21-4.35-4.35" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx22(
+      "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__ */ jsx22("div", { className: "pointer-events-none absolute right-2 flex items-center gap-0.5", children: shortcuts.map((key, i) => /* @__PURE__ */ jsx22(
+      "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
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+function NotificationBell({
+  count = 0,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "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__ */ jsxs10(
+          "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__ */ jsx23("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+              /* @__PURE__ */ jsx23("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+            ]
+          }
+        ),
+        count > 0 && /* @__PURE__ */ jsx23("span", { className: "absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-green-500" })
+      ]
+    }
+  );
+}
+
+// src/components/layout/theme-toggle.tsx
+import * as React17 from "react";
+import { useTheme } from "next-themes";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+function ThemeToggle({ className }) {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = React17.useState(false);
+  React17.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx24(
+      "button",
+      {
+        className: cn(
+          "flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground",
+          className
+        ),
+        "aria-label": "Toggle theme",
+        children: /* @__PURE__ */ jsx24("span", { className: "h-4 w-4" })
+      }
+    );
+  }
+  const isDark = resolvedTheme === "dark";
+  return /* @__PURE__ */ jsx24(
+    "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__ */ jsxs11(
+          "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__ */ jsx24("circle", { cx: "12", cy: "12", r: "4" }),
+              /* @__PURE__ */ jsx24("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__ */ jsx24(
+          "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__ */ jsx24("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+          }
+        )
+      )
+    }
+  );
+}
+
+// src/components/layout/dashboard-layout.tsx
+import * as React18 from "react";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs12 } from "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__ */ jsxs12("div", { children: [
+    /* @__PURE__ */ jsxs12(
+      "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__ */ jsx25("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: item.icon }),
+          !collapsed && /* @__PURE__ */ jsxs12(Fragment3, { children: [
+            /* @__PURE__ */ jsx25("span", { className: "flex-1 truncate", children: item.label }),
+            item.badge !== void 0 && !hasChildren && /* @__PURE__ */ jsx25("span", { className: "rounded-full bg-primary/15 px-2 py-0.5 text-[11px] font-semibold text-primary", children: item.badge }),
+            hasChildren && /* @__PURE__ */ jsx25(
+              "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__ */ jsx25("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    hasChildren && open && !collapsed && /* @__PURE__ */ jsx25("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__ */ jsx25(
+      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__ */ jsx25("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__ */ jsx25("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__ */ jsxs12(
+    "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__ */ jsx25("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+        /* @__PURE__ */ jsx25("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+        /* @__PURE__ */ jsx25("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs12("div", { className: "flex h-screen overflow-hidden bg-background", children: [
+    /* @__PURE__ */ jsxs12(
+      "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__ */ jsx25("div", { className: "flex h-14 shrink-0 items-center border-b border-sidebar-border px-4", children: collapsed ? /* @__PURE__ */ jsx25("div", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10", children: /* @__PURE__ */ jsx25("span", { className: "text-sm font-bold text-primary", children: appName?.[0] ?? "D" }) }) : logo ?? /* @__PURE__ */ jsx25("span", { className: "text-base font-semibold text-sidebar-foreground", children: appName }) }),
+          /* @__PURE__ */ jsx25("nav", { className: "flex-1 space-y-0.5 overflow-y-auto p-2", children: navItems.map((item) => /* @__PURE__ */ jsx25(
+            NavItemRow,
+            {
+              item,
+              collapsed,
+              activeHref,
+              onNavigate
+            },
+            item.href
+          )) }),
+          /* @__PURE__ */ jsxs12("div", { className: "border-t border-sidebar-border p-2", children: [
+            bottomNavItems && bottomNavItems.length > 0 && /* @__PURE__ */ jsx25("div", { className: "mb-2 space-y-0.5", children: bottomNavItems.map((item) => /* @__PURE__ */ jsx25(
+              NavItemRow,
+              {
+                item,
+                collapsed,
+                activeHref,
+                onNavigate
+              },
+              item.href
+            )) }),
+            footerContent && !collapsed && /* @__PURE__ */ jsx25("div", { className: "mb-2", children: footerContent }),
+            user && /* @__PURE__ */ jsxs12("div", { className: "relative", ref: userMenuRef, children: [
+              /* @__PURE__ */ jsxs12(
+                "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__ */ jsx25(UserAvatar, { user }),
+                    !collapsed && /* @__PURE__ */ jsxs12("div", { className: "flex-1 overflow-hidden text-left", children: [
+                      /* @__PURE__ */ jsx25("div", { className: "truncate text-xs font-medium text-sidebar-foreground", children: user.name }),
+                      /* @__PURE__ */ jsx25("div", { className: "truncate text-[11px] text-sidebar-foreground/60", children: user.email })
+                    ] })
+                  ]
+                }
+              ),
+              userMenuOpen && /* @__PURE__ */ jsxs12("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__ */ jsxs12("div", { className: "px-3 py-2 border-b", children: [
+                  /* @__PURE__ */ jsx25("p", { className: "text-xs font-medium", children: user.name }),
+                  /* @__PURE__ */ jsx25("p", { className: "text-[11px] text-muted-foreground truncate", children: user.email })
+                ] }),
+                onSignOut && /* @__PURE__ */ jsxs12(
+                  "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__ */ jsxs12("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__ */ jsx25("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+                        /* @__PURE__ */ jsx25("polyline", { points: "16 17 21 12 16 7" }),
+                        /* @__PURE__ */ jsx25("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+                      ] }),
+                      "Sign out"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs12("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsxs12("header", { className: "flex h-14 shrink-0 items-center gap-3 border-b bg-background px-4", children: [
+        /* @__PURE__ */ jsx25(
+          "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__ */ jsx25(ToggleIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx25("div", { className: "flex flex-1 items-center gap-2", children: /* @__PURE__ */ jsx25(
+          SearchBar,
+          {
+            value: searchValue,
+            onChange: setSearchValue,
+            placeholder: searchPlaceholder,
+            shortcut: searchShortcut,
+            width: "max-w-sm"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx25(ThemeToggle, {}),
+          /* @__PURE__ */ jsx25(NotificationBell, { count: notificationCount, onClick: onNotificationClick }),
+          user && /* @__PURE__ */ jsx25("div", { className: "ml-1", children: /* @__PURE__ */ jsx25(UserAvatar, { user, size: "md" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx25("main", { className: "flex-1 overflow-y-auto bg-muted/30 p-6", children })
+    ] })
+  ] });
+}
+
+// src/components/data/data-table.tsx
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -999,17 +1411,17 @@ function DataTable({
     }
   }
   const totalPages = pagination ? Math.ceil(pagination.total / pagination.pageSize) : 1;
-  return /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
-    selection && selection.selected.length > 0 && actions && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 rounded-md border bg-muted/50 p-2", children: [
-      /* @__PURE__ */ jsxs9("span", { className: "text-sm text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-4", children: [
+    selection && selection.selected.length > 0 && actions && /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 rounded-md border bg-muted/50 p-2", children: [
+      /* @__PURE__ */ jsxs13("span", { className: "text-sm text-muted-foreground", children: [
         selection.selected.length,
         " selected"
       ] }),
       actions
     ] }),
-    /* @__PURE__ */ jsx22("div", { className: "rounded-md border", children: /* @__PURE__ */ jsx22("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs9("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsxs9("tr", { className: "border-b bg-muted/50", children: [
-        selection && /* @__PURE__ */ jsx22("th", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx26("div", { className: "rounded-md border", children: /* @__PURE__ */ jsx26("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs13("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx26("thead", { children: /* @__PURE__ */ jsxs13("tr", { className: "border-b bg-muted/50", children: [
+        selection && /* @__PURE__ */ jsx26("th", { className: "w-12 px-4 py-3", children: /* @__PURE__ */ jsx26(
           Checkbox,
           {
             checked: allSelected,
@@ -1021,7 +1433,7 @@ function DataTable({
             onCheckedChange: toggleAll
           }
         ) }),
-        columns.map((col) => /* @__PURE__ */ jsx22(
+        columns.map((col) => /* @__PURE__ */ jsx26(
           "th",
           {
             className: "px-4 py-3 text-left font-medium text-muted-foreground",
@@ -1031,20 +1443,20 @@ function DataTable({
           String(col.key)
         ))
       ] }) }),
-      /* @__PURE__ */ jsx22("tbody", { children: loading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs9("tr", { className: "border-b", children: [
-        selection && /* @__PURE__ */ jsx22("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx22(Skeleton, { className: "h-4 w-4" }) }),
-        columns.map((col) => /* @__PURE__ */ jsx22("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx22(Skeleton, { className: "h-4 w-24" }) }, String(col.key)))
-      ] }, i)) : data.length === 0 ? /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx26("tbody", { children: loading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs13("tr", { className: "border-b", children: [
+        selection && /* @__PURE__ */ jsx26("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx26(Skeleton, { className: "h-4 w-4" }) }),
+        columns.map((col) => /* @__PURE__ */ jsx26("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx26(Skeleton, { className: "h-4 w-24" }) }, String(col.key)))
+      ] }, i)) : data.length === 0 ? /* @__PURE__ */ jsx26("tr", { children: /* @__PURE__ */ jsx26(
         "td",
         {
           colSpan: columns.length + (selection ? 1 : 0),
           className: "py-12 text-center",
-          children: emptyState || /* @__PURE__ */ jsx22("p", { className: "text-muted-foreground", children: "No data found" })
+          children: emptyState || /* @__PURE__ */ jsx26("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__ */ jsxs9(
+        return /* @__PURE__ */ jsxs13(
           "tr",
           {
             className: cn(
@@ -1054,12 +1466,12 @@ function DataTable({
             ),
             onClick: () => onRowClick?.(row),
             children: [
-              selection && /* @__PURE__ */ jsx22(
+              selection && /* @__PURE__ */ jsx26(
                 "td",
                 {
                   className: "px-4 py-3",
                   onClick: (e) => e.stopPropagation(),
-                  children: /* @__PURE__ */ jsx22(
+                  children: /* @__PURE__ */ jsx26(
                     Checkbox,
                     {
                       checked: isSelected,
@@ -1068,15 +1480,15 @@ function DataTable({
                   )
                 }
               ),
-              columns.map((col) => /* @__PURE__ */ jsx22("td", { className: "px-4 py-3", children: col.cell ? col.cell(row) : String(row[col.key] ?? "") }, String(col.key)))
+              columns.map((col) => /* @__PURE__ */ jsx26("td", { className: "px-4 py-3", children: col.cell ? col.cell(row) : String(row[col.key] ?? "") }, String(col.key)))
             ]
           },
           rowId
         );
       }) })
     ] }) }) }),
-    pagination && totalPages > 1 && /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-2", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "text-sm text-muted-foreground", children: [
+    pagination && totalPages > 1 && /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "text-sm text-muted-foreground", children: [
         "Page ",
         pagination.page,
         " of ",
@@ -1085,8 +1497,8 @@ function DataTable({
         pagination.total,
         " total)"
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx26(
           "button",
           {
             className: "rounded-md border px-3 py-1.5 text-sm disabled:opacity-50",
@@ -1095,7 +1507,7 @@ function DataTable({
             children: "Previous"
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx26(
           "button",
           {
             className: "rounded-md border px-3 py-1.5 text-sm disabled:opacity-50",
@@ -1110,7 +1522,7 @@ function DataTable({
 }
 
 // src/components/data/empty-state.tsx
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function EmptyState({
   icon: Icon2,
   title,
@@ -1118,7 +1530,7 @@ function EmptyState({
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: cn(
@@ -1126,26 +1538,26 @@ function EmptyState({
         className
       ),
       children: [
-        Icon2 && /* @__PURE__ */ jsx23("div", { className: "mb-4 rounded-full bg-muted p-3", children: /* @__PURE__ */ jsx23(Icon2, { className: "h-6 w-6 text-muted-foreground" }) }),
-        /* @__PURE__ */ jsx23("h3", { className: "text-lg font-semibold", children: title }),
-        description && /* @__PURE__ */ jsx23("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: description }),
-        action && /* @__PURE__ */ jsx23("div", { className: "mt-4", children: action })
+        Icon2 && /* @__PURE__ */ jsx27("div", { className: "mb-4 rounded-full bg-muted p-3", children: /* @__PURE__ */ jsx27(Icon2, { className: "h-6 w-6 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx27("h3", { className: "text-lg font-semibold", children: title }),
+        description && /* @__PURE__ */ jsx27("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: description }),
+        action && /* @__PURE__ */ jsx27("div", { className: "mt-4", children: action })
       ]
     }
   );
 }
 
 // src/components/data/pagination.tsx
-import * as React17 from "react";
+import * as React19 from "react";
 import { ChevronLeft, ChevronRight as ChevronRight3 } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "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);
@@ -1161,18 +1573,18 @@ function Pagination({
     return items;
   }, [page, totalPages]);
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ jsxs11("nav", { className: cn("flex items-center gap-1", className), children: [
-    /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs15("nav", { className: cn("flex items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx28(
       "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__ */ jsx24(ChevronLeft, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx28(ChevronLeft, { className: "h-4 w-4" })
       }
     ),
     pages.map(
-      (p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx24("span", { className: "px-2 text-muted-foreground", children: "..." }, `e-${i}`) : /* @__PURE__ */ jsx24(
+      (p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx28("span", { className: "px-2 text-muted-foreground", children: "..." }, `e-${i}`) : /* @__PURE__ */ jsx28(
         "button",
         {
           className: cn(
@@ -1185,13 +1597,13 @@ function Pagination({
         p
       )
     ),
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx28(
       "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__ */ jsx24(ChevronRight3, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx28(ChevronRight3, { className: "h-4 w-4" })
       }
     )
   ] });
@@ -1199,9 +1611,9 @@ function Pagination({
 
 // src/components/data/stats.tsx
 import { ArrowDown, ArrowUp } from "lucide-react";
-import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 function Stats({ stats, columns = 4, className }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       className: cn(
@@ -1213,18 +1625,18 @@ function Stats({ stats, columns = 4, className }) {
       ),
       children: stats.map((stat, index) => {
         const Icon2 = stat.icon;
-        return /* @__PURE__ */ jsxs12(
+        return /* @__PURE__ */ jsxs16(
           "div",
           {
             className: "rounded-lg border bg-card p-6 text-card-foreground shadow-sm",
             children: [
-              /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx25("p", { className: "text-sm font-medium text-muted-foreground", children: stat.label }),
-                Icon2 && /* @__PURE__ */ jsx25(Icon2, { className: "h-4 w-4 text-muted-foreground" })
+              /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx29("p", { className: "text-sm font-medium text-muted-foreground", children: stat.label }),
+                Icon2 && /* @__PURE__ */ jsx29(Icon2, { className: "h-4 w-4 text-muted-foreground" })
               ] }),
-              /* @__PURE__ */ jsxs12("div", { className: "mt-2 flex items-baseline gap-2", children: [
-                /* @__PURE__ */ jsx25("p", { className: "text-2xl font-bold", children: stat.value }),
-                stat.change && /* @__PURE__ */ jsxs12(
+              /* @__PURE__ */ jsxs16("div", { className: "mt-2 flex items-baseline gap-2", children: [
+                /* @__PURE__ */ jsx29("p", { className: "text-2xl font-bold", children: stat.value }),
+                stat.change && /* @__PURE__ */ jsxs16(
                   "span",
                   {
                     className: cn(
@@ -1232,7 +1644,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__ */ jsx25(ArrowUp, { className: "mr-0.5 h-3 w-3" }) : /* @__PURE__ */ jsx25(ArrowDown, { className: "mr-0.5 h-3 w-3" }),
+                      stat.change.type === "increase" ? /* @__PURE__ */ jsx29(ArrowUp, { className: "mr-0.5 h-3 w-3" }) : /* @__PURE__ */ jsx29(ArrowDown, { className: "mr-0.5 h-3 w-3" }),
                       stat.change.value,
                       "%"
                     ]
@@ -1248,8 +1660,531 @@ function Stats({ stats, columns = 4, className }) {
   );
 }
 
+// src/components/data/plan-badge.tsx
+import { jsx as jsx30 } from "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__ */ jsx30(
+    "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
+import { jsx as jsx31, jsxs as jsxs17 } from "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__ */ jsxs17(
+    "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__ */ jsx31("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
+        /* @__PURE__ */ jsx31("path", { d: "M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" }),
+        /* @__PURE__ */ jsx31("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__ */ jsx31("div", { className: cn("flex justify-center", className), children: /* @__PURE__ */ jsx31(StorageIcon, { className: "h-4 w-4 text-muted-foreground" }) });
+  }
+  return /* @__PURE__ */ jsxs17("div", { className: cn("space-y-1.5 px-1", className), children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx31(StorageIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+      limit === null ? /* @__PURE__ */ jsxs17("p", { className: "text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx31("span", { className: "font-medium text-foreground", children: formatBytes(used) }),
+        " \xB7 Unlimited"
+      ] }) : /* @__PURE__ */ jsxs17("p", { className: "text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx31("span", { className: "font-medium text-foreground", children: formatBytes(used) }),
+        " / ",
+        formatBytes(limit)
+      ] })
+    ] }),
+    limit !== null && /* @__PURE__ */ jsx31("div", { className: "h-1 w-full overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx31(
+      "div",
+      {
+        className: cn("h-full rounded-full transition-all duration-300", barColor),
+        style: { width: `${pct}%` }
+      }
+    ) }),
+    plan && /* @__PURE__ */ jsx31("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: plan })
+  ] });
+}
+
+// src/components/media/media-card.tsx
+import { jsx as jsx32, jsxs as jsxs18 } from "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__ */ jsxs18(
+    "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__ */ jsx32(
+          "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__ */ jsx32("div", { className: "flex h-full w-full items-center justify-center bg-muted text-4xl", children: getFileEmoji(file.mimeType) }),
+        /* @__PURE__ */ jsx32("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__ */ jsx32("p", { className: "truncate px-2 pb-2 text-[11px] font-medium text-white", children: displayName }) }),
+        selected && /* @__PURE__ */ jsx32("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__ */ jsx32(
+          "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__ */ jsx32("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/media/media-grid.tsx
+import { jsx as jsx33, jsxs as jsxs19 } from "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__ */ jsx33("div", { className: cn("grid gap-2", columnsClass[columns] ?? columnsClass[5], className), children: Array.from({ length: columns * 2 }).map((_, i) => /* @__PURE__ */ jsx33(
+      "div",
+      {
+        className: "aspect-square animate-pulse rounded-xl bg-muted"
+      },
+      i
+    )) });
+  }
+  if (files.length === 0) {
+    return /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-col items-center justify-center gap-3 py-16 text-center", className), children: [
+      /* @__PURE__ */ jsx33("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsxs19(
+        "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__ */ jsx33("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+            /* @__PURE__ */ jsx33("circle", { cx: "9", cy: "9", r: "2" }),
+            /* @__PURE__ */ jsx33("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx33("p", { className: "text-sm text-muted-foreground", children: emptyMessage }),
+      onUploadClick && /* @__PURE__ */ jsx33(
+        "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__ */ jsx33("div", { className: cn("grid gap-2", columnsClass[columns] ?? columnsClass[5], className), children: files.map((file) => /* @__PURE__ */ jsx33(
+    MediaCard,
+    {
+      file,
+      selected: selected?.has(file.id),
+      onClick: () => onSelect?.(file)
+    },
+    file.id
+  )) });
+}
+
+// src/components/media/media-picker-dialog.tsx
+import * as React20 from "react";
+import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs20 } from "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__ */ jsx34(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs20(DialogContent, { className: "flex h-[85vh] max-h-[700px] max-w-4xl flex-col gap-0 p-0", children: [
+    /* @__PURE__ */ jsxs20(DialogHeader, { className: "flex-row items-center justify-between border-b px-5 py-3", children: [
+      /* @__PURE__ */ jsx34(DialogTitle, { className: "text-base", children: title }),
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground", children: [
+          total,
+          " files"
+        ] }),
+        onUpload && /* @__PURE__ */ jsxs20(Fragment4, { children: [
+          /* @__PURE__ */ jsx34(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              className: "hidden",
+              multiple: true,
+              accept: accept === "images" ? "image/*" : void 0,
+              onChange: handleUploadChange
+            }
+          ),
+          /* @__PURE__ */ jsxs20(
+            "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__ */ jsxs20("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__ */ jsx34("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  /* @__PURE__ */ jsx34("polyline", { points: "17 8 12 3 7 8" }),
+                  /* @__PURE__ */ jsx34("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                ] }),
+                "Upload"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 overflow-hidden", children: [
+      folders.length > 0 && /* @__PURE__ */ jsxs20("aside", { className: "flex w-44 shrink-0 flex-col gap-0.5 overflow-y-auto border-r p-2", children: [
+        /* @__PURE__ */ jsxs20(
+          "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__ */ jsx34("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__ */ jsx34("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__ */ jsxs20(
+          "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__ */ jsx34("span", { className: "text-base leading-none", children: folder.icon ?? "\u{1F4C1}" }),
+              /* @__PURE__ */ jsx34("span", { className: "truncate", children: folder.name })
+            ]
+          },
+          folder.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 border-b px-4 py-2", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "relative flex-1", children: [
+            /* @__PURE__ */ jsxs20("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__ */ jsx34("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ jsx34("path", { d: "m21 21-4.35-4.35" })
+            ] }),
+            /* @__PURE__ */ jsx34(
+              "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__ */ jsx34("div", { className: "flex gap-1", children: TYPE_OPTIONS.filter((o) => accept === "images" ? o.value === "" || o.value === "image" : true).map((opt) => /* @__PURE__ */ jsx34(
+            "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__ */ jsx34("div", { className: "border-b px-4 py-2 space-y-1.5", children: activeUploads.map((u, i) => /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx34("span", { className: "flex-1 truncate text-xs text-muted-foreground", children: u.name }),
+          /* @__PURE__ */ jsx34("div", { className: "h-1.5 w-24 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx34(
+            "div",
+            {
+              className: "h-full rounded-full bg-primary transition-all",
+              style: { width: `${u.progress}%` }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs20("span", { className: "text-[10px] text-muted-foreground", children: [
+            u.progress,
+            "%"
+          ] })
+        ] }, i)) }),
+        /* @__PURE__ */ jsxs20("div", { className: "flex-1 overflow-y-auto p-4", children: [
+          /* @__PURE__ */ jsx34(
+            MediaGrid,
+            {
+              files,
+              selected: localSelected,
+              onSelect: handleFileSelect,
+              loading,
+              columns: 5,
+              onUploadClick: onUpload ? () => fileInputRef.current?.click() : void 0
+            }
+          ),
+          hasMore && /* @__PURE__ */ jsx34("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx34(
+            "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__ */ jsxs20("div", { className: "flex items-center justify-between border-t px-4 py-3", children: [
+          /* @__PURE__ */ jsxs20("span", { className: "text-sm text-muted-foreground", children: [
+            localSelected.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx34(
+              "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__ */ jsxs20(
+              "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
+import { jsx as jsx35, jsxs as jsxs21 } from "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__ */ jsxs21("div", { className: cn("relative inline-flex shrink-0", className), children: [
+    /* @__PURE__ */ jsx35(
+      "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__ */ jsx35(
+          "img",
+          {
+            src: value,
+            alt: filename ?? "Selected image",
+            className: "h-full w-full rounded-md object-cover"
+          }
+        ) : /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsxs21(
+            "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__ */ jsx35("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx35("circle", { cx: "9", cy: "9", r: "2" }),
+                /* @__PURE__ */ jsx35("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+              ]
+            }
+          ),
+          size !== "sm" && /* @__PURE__ */ jsx35("span", { className: cn(sz.text, "text-muted-foreground text-center leading-tight transition-colors group-hover:text-primary"), children: emptyLabel })
+        ] })
+      }
+    ),
+    value && onRemove && /* @__PURE__ */ jsx35(
+      "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__ */ jsx35("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__ */ jsx35("path", { d: "M18 6 6 18M6 6l12 12" }) })
+      }
+    )
+  ] });
+}
+
 // src/components/form/form-field.tsx
-import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 function FormField({
   label,
   error,
@@ -1258,19 +2193,19 @@ function FormField({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs13("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs13(Label2, { children: [
+  return /* @__PURE__ */ jsxs22("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs22(Label2, { children: [
       label,
-      required && /* @__PURE__ */ jsx26("span", { className: "ml-1 text-destructive", children: "*" })
+      required && /* @__PURE__ */ jsx36("span", { className: "ml-1 text-destructive", children: "*" })
     ] }),
     children,
-    hint && !error && /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: hint }),
-    error && /* @__PURE__ */ jsx26("p", { className: "text-sm text-destructive", children: error })
+    hint && !error && /* @__PURE__ */ jsx36("p", { className: "text-sm text-muted-foreground", children: hint }),
+    error && /* @__PURE__ */ jsx36("p", { className: "text-sm text-destructive", children: error })
   ] });
 }
 
 // src/components/form/form-layout.tsx
-import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function FormLayout({
   title,
   description,
@@ -1278,7 +2213,7 @@ function FormLayout({
   actions,
   className
 }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn(
@@ -1286,37 +2221,37 @@ function FormLayout({
         className
       ),
       children: [
-        (title || description) && /* @__PURE__ */ jsxs14("div", { className: "border-b p-6", children: [
-          title && /* @__PURE__ */ jsx27("h3", { className: "text-lg font-semibold", children: title }),
-          description && /* @__PURE__ */ jsx27("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+        (title || description) && /* @__PURE__ */ jsxs23("div", { className: "border-b p-6", children: [
+          title && /* @__PURE__ */ jsx37("h3", { className: "text-lg font-semibold", children: title }),
+          description && /* @__PURE__ */ jsx37("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
         ] }),
-        /* @__PURE__ */ jsx27("div", { className: "space-y-6 p-6", children }),
-        actions && /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: actions })
+        /* @__PURE__ */ jsx37("div", { className: "space-y-6 p-6", children }),
+        actions && /* @__PURE__ */ jsx37("div", { className: "flex items-center justify-end gap-2 border-t px-6 py-4", children: actions })
       ]
     }
   );
 }
 
 // src/components/form/form-section.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 function FormSection({
   title,
   description,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs15("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs15("div", { children: [
-      /* @__PURE__ */ jsx28("h4", { className: "text-sm font-medium", children: title }),
-      description && /* @__PURE__ */ jsx28("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+  return /* @__PURE__ */ jsxs24("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs24("div", { children: [
+      /* @__PURE__ */ jsx38("h4", { className: "text-sm font-medium", children: title }),
+      description && /* @__PURE__ */ jsx38("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx28("div", { className: "space-y-4", children })
+    /* @__PURE__ */ jsx38("div", { className: "space-y-4", children })
   ] });
 }
 
 // src/components/feedback/alert.tsx
 import { AlertCircle, CheckCircle2, Info, AlertTriangle, X as X2 } from "lucide-react";
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var variantConfig = {
   info: {
     icon: Info,
@@ -1345,7 +2280,7 @@ function Alert({
 }) {
   const config = variantConfig[variant];
   const Icon2 = config.icon;
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cn(
@@ -1355,17 +2290,17 @@ function Alert({
       ),
       role: "alert",
       children: [
-        /* @__PURE__ */ jsx29(Icon2, { className: "mt-0.5 h-5 w-5 shrink-0" }),
-        /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsx29("p", { className: "font-medium", children: title }),
-          /* @__PURE__ */ jsx29("div", { className: cn("text-sm", title && "mt-1"), children })
+        /* @__PURE__ */ jsx39(Icon2, { className: "mt-0.5 h-5 w-5 shrink-0" }),
+        /* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsx39("p", { className: "font-medium", children: title }),
+          /* @__PURE__ */ jsx39("div", { className: cn("text-sm", title && "mt-1"), children })
         ] }),
-        dismissible && /* @__PURE__ */ jsx29(
+        dismissible && /* @__PURE__ */ jsx39(
           "button",
           {
             onClick: onDismiss,
             className: "absolute right-3 top-3 rounded-md p-1 opacity-70 hover:opacity-100",
-            children: /* @__PURE__ */ jsx29(X2, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx39(X2, { className: "h-4 w-4" })
           }
         )
       ]
@@ -1375,23 +2310,23 @@ function Alert({
 
 // src/components/feedback/loading-spinner.tsx
 import { Loader2 } from "lucide-react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var sizeMap = {
+import { jsx as jsx40 } from "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__ */ jsx30(
+  return /* @__PURE__ */ jsx40(
     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
-import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 function ConfirmDialog({
   open,
   onOpenChange,
@@ -1403,13 +2338,13 @@ function ConfirmDialog({
   loading,
   variant = "default"
 }) {
-  return /* @__PURE__ */ jsx31(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs17(DialogContent, { children: [
-    /* @__PURE__ */ jsxs17(DialogHeader, { children: [
-      /* @__PURE__ */ jsx31(DialogTitle, { children: title }),
-      description && /* @__PURE__ */ jsx31(DialogDescription, { children: description })
+  return /* @__PURE__ */ jsx41(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs26(DialogContent, { children: [
+    /* @__PURE__ */ jsxs26(DialogHeader, { children: [
+      /* @__PURE__ */ jsx41(DialogTitle, { children: title }),
+      description && /* @__PURE__ */ jsx41(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsxs17(DialogFooter, { children: [
-      /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsxs26(DialogFooter, { children: [
+      /* @__PURE__ */ jsx41(
         Button,
         {
           variant: "outline",
@@ -1418,14 +2353,14 @@ function ConfirmDialog({
           children: cancelLabel
         }
       ),
-      /* @__PURE__ */ jsxs17(
+      /* @__PURE__ */ jsxs26(
         Button,
         {
           variant: variant === "destructive" ? "destructive" : "default",
           onClick: onConfirm,
           disabled: loading,
           children: [
-            loading && /* @__PURE__ */ jsx31(LoadingSpinner, { size: "sm", className: "mr-2" }),
+            loading && /* @__PURE__ */ jsx41(LoadingSpinner, { size: "sm", className: "mr-2" }),
             confirmLabel
           ]
         }
@@ -1435,9 +2370,9 @@ function ConfirmDialog({
 }
 
 // src/hooks/index.ts
-import { useState as useState2 } from "react";
+import { useState as useState5 } from "react";
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = useState2(initial);
+  const [isOpen, setIsOpen] = useState5(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -1447,15 +2382,15 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = useState2(1);
+  const [page, setPage] = useState5(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
 
 // src/components/auth/AuthShell.tsx
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       style: {
@@ -1470,7 +2405,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ jsx32(
+        pattern === "dots" && /* @__PURE__ */ jsx42(
           "div",
           {
             "aria-hidden": true,
@@ -1484,7 +2419,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ jsx32(
+        pattern === "grid" && /* @__PURE__ */ jsx42(
           "div",
           {
             "aria-hidden": true,
@@ -1498,16 +2433,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ jsx32("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ jsx42("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       style: {
@@ -1524,10 +2459,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ jsxs19("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs28("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ jsx44(
       "img",
       {
         src: imageUrl,
@@ -1536,7 +2471,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__ */ jsx34(
+    ) : /* @__PURE__ */ jsx44(
       "div",
       {
         style: {
@@ -1555,7 +2490,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx44(
       "span",
       {
         style: {
@@ -1571,10 +2506,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ jsxs20("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx45(
       "h1",
       {
         style: {
@@ -1587,7 +2522,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ jsx35(
+    description && /* @__PURE__ */ jsx45(
       "p",
       {
         style: {
@@ -1603,12 +2538,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs30("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ jsxs30("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx46(
         "label",
         {
           htmlFor: fieldId,
@@ -1620,9 +2555,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ jsx36("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ jsx46("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx46(
       "input",
       {
         id: fieldId,
@@ -1652,13 +2587,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx36("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ jsx36("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ jsx46("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ jsx46("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 function AuthButton({
   loading,
   variant = "primary",
@@ -1701,7 +2636,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx47(
     "button",
     {
       disabled: loading || disabled,
@@ -1713,8 +2648,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ jsxs22(Fragment3, { children: [
-        /* @__PURE__ */ jsx37(
+      children: loading ? /* @__PURE__ */ jsxs31(Fragment5, { children: [
+        /* @__PURE__ */ jsx47(
           "span",
           {
             style: {
@@ -1735,19 +2670,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ jsxs23("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ jsx38("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ jsx38("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ jsx38("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ jsxs32("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ jsx48("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ jsx48("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ jsx48("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ jsxs24("p", { style: {
+  return /* @__PURE__ */ jsxs33("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -1755,7 +2690,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx49(
       "a",
       {
         href: linkHref,
@@ -1773,9 +2708,9 @@ function AuthFootnote({ text, linkText, linkHref }) {
 }
 
 // src/components/Skeleton.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function Skeleton2({ width = "100%", height = 16, rounded, style }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       style: {
@@ -1788,7 +2723,7 @@ function Skeleton2({ width = "100%", height = 16, rounded, style }) {
         flexShrink: 0,
         ...style
       },
-      children: /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx50(
         "div",
         {
           style: {
@@ -1804,7 +2739,7 @@ function Skeleton2({ width = "100%", height = 16, rounded, style }) {
 }
 
 // src/index.ts
-import { ThemeProvider, useTheme } from "next-themes";
+import { ThemeProvider, useTheme as useTheme2 } from "next-themes";
 export {
   Alert,
   AppShell,
@@ -1826,6 +2761,7 @@ export {
   CardTitle,
   Checkbox,
   ConfirmDialog,
+  DashboardLayout,
   DataTable,
   Dialog,
   DialogClose,
@@ -1856,15 +2792,22 @@ export {
   FormField,
   FormLayout,
   FormSection,
+  ImagePickerField,
   Input,
   Label2 as Label,
   LoadingSpinner,
+  MediaCard,
+  MediaGrid,
+  MediaPickerDialog,
+  NotificationBell,
   Page,
   PageSection,
   Pagination,
+  PlanBadge,
   Popover,
   PopoverContent,
   PopoverTrigger,
+  SearchBar,
   Select,
   SelectContent,
   SelectGroup,
@@ -1879,6 +2822,7 @@ export {
   Sidebar,
   Skeleton2 as Skeleton,
   Stats,
+  StorageBar,
   Switch,
   Tabs,
   TabsContent,
@@ -1886,6 +2830,7 @@ export {
   TabsTrigger,
   Textarea,
   ThemeProvider,
+  ThemeToggle,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -1896,6 +2841,6 @@ export {
   cn,
   useDisclosure,
   usePagination,
-  useTheme
+  useTheme2 as useTheme
 };
 //# sourceMappingURL=index.mjs.map