@orion-studios/payload-admin-components 0.1.0 → 0.2.0-beta.1

package/dist/index.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,9 +21,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BlockPicker: () => BlockPicker,
   Dashboard: () => Dashboard,
+  EmptyState: () => EmptyState,
+  HelpTooltip: () => HelpTooltip,
   Icon: () => Icon,
-  Logo: () => Logo
+  Logo: () => Logo,
+  SectionTabs: () => SectionTabs,
+  StatusBadge: () => StatusBadge,
+  ThemeProvider: () => ThemeProvider,
+  ThemeSwitcher: () => ThemeSwitcher,
+  WelcomeHeader: () => WelcomeHeader,
+  configureAdmin: () => configureAdmin,
+  themePreferenceField: () => themePreferenceField,
+  useTheme: () => useTheme,
+  withTooltips: () => withTooltips
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -33,37 +46,46 @@ function Logo() {
     "div",
     {
       style: {
-        alignItems: "center",
         display: "flex",
-        fontWeight: 600,
-        gap: 8,
-        padding: "12px 0"
+        alignItems: "center",
+        gap: 10,
+        padding: "4px 0",
+        textDecoration: "none",
+        transition: "opacity 0.2s ease"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "svg",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
           {
-            width: "32",
-            height: "32",
-            viewBox: "0 0 32 32",
-            fill: "none",
-            xmlns: "http://www.w3.org/2000/svg",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "32", height: "32", rx: "8", fill: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "path",
-                {
-                  d: "M16 8L8 16L16 24L24 16L16 8Z",
-                  fill: "white",
-                  stroke: "white",
-                  strokeWidth: "2",
-                  strokeLinejoin: "round"
-                }
-              )
-            ]
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: "var(--admin-radius-sm, 6px)",
+              background: "var(--admin-accent, #3b82f6)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "22", x2: "12", y2: "15.5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "22 8.5 12 15.5 2 8.5" })
+            ] })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 18 }, children: "Your Brand" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              fontSize: 15,
+              fontWeight: 700,
+              color: "var(--admin-text, #111827)",
+              letterSpacing: "-0.01em"
+            },
+            children: "Orion CMS"
+          }
+        )
       ]
     }
   );
@@ -72,103 +94,1239 @@ function Logo() {
 // src/components/Icon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Icon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "svg",
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "32", height: "32", rx: "8", fill: "var(--admin-accent, #3b82f6)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: "translate(4, 4)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: "12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2", fill: "none", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "22", x2: "12", y2: "15.5", stroke: "white", strokeWidth: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "22 8.5 12 15.5 2 8.5", fill: "none", stroke: "white", strokeWidth: "1.5" })
+    ] })
+  ] });
+}
+
+// src/components/Dashboard.tsx
+var import_react4 = require("react");
+
+// src/components/ThemeSwitcher.tsx
+var import_react2 = require("react");
+
+// src/hooks/useTheme.ts
+var import_react = require("react");
+var STORAGE_KEY = "orion-admin-theme";
+var DEFAULT_THEME = "light";
+function applyTheme(theme) {
+  document.documentElement.setAttribute("data-theme", theme);
+}
+function getCachedTheme() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && ["light", "dark", "brand-light", "brand-dark"].includes(stored)) {
+      return stored;
+    }
+  } catch {
+  }
+  return null;
+}
+function cacheTheme(theme) {
+  try {
+    localStorage.setItem(STORAGE_KEY, theme);
+  } catch {
+  }
+}
+function useTheme() {
+  const [theme, setThemeState] = (0, import_react.useState)(() => {
+    if (typeof window === "undefined") return DEFAULT_THEME;
+    return getCachedTheme() || DEFAULT_THEME;
+  });
+  const [isLoading, setIsLoading] = (0, import_react.useState)(true);
+  const debounceRef = (0, import_react.useRef)(null);
+  const userIdRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const cached = getCachedTheme();
+    if (cached) {
+      applyTheme(cached);
+      setThemeState(cached);
+    } else {
+      applyTheme(DEFAULT_THEME);
+    }
+    fetch("/api/users/me", { credentials: "include" }).then((res) => res.json()).then((data) => {
+      const user = data?.user || data;
+      if (user?.id) {
+        userIdRef.current = user.id;
+      }
+      if (user?.themePreference) {
+        const dbTheme = user.themePreference;
+        setThemeState(dbTheme);
+        applyTheme(dbTheme);
+        cacheTheme(dbTheme);
+      }
+    }).catch(() => {
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }, []);
+  const setTheme = (0, import_react.useCallback)((newTheme) => {
+    setThemeState(newTheme);
+    applyTheme(newTheme);
+    cacheTheme(newTheme);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = setTimeout(() => {
+      const userId = userIdRef.current;
+      if (!userId) return;
+      fetch(`/api/users/${userId}`, {
+        method: "PATCH",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ themePreference: newTheme })
+      }).catch(() => {
+      });
+    }, 300);
+  }, []);
+  const isDark = theme === "dark" || theme === "brand-dark";
+  const isBrand = theme === "brand-light" || theme === "brand-dark";
+  const toggleDarkMode = (0, import_react.useCallback)(() => {
+    if (isBrand) {
+      setTheme(isDark ? "brand-light" : "brand-dark");
+    } else {
+      setTheme(isDark ? "light" : "dark");
+    }
+  }, [isDark, isBrand, setTheme]);
+  const toggleBrandMode = (0, import_react.useCallback)(() => {
+    if (isBrand) {
+      setTheme(isDark ? "dark" : "light");
+    } else {
+      setTheme(isDark ? "brand-dark" : "brand-light");
+    }
+  }, [isDark, isBrand, setTheme]);
+  return {
+    theme,
+    setTheme,
+    isDark,
+    isBrand,
+    isLoading,
+    toggleDarkMode,
+    toggleBrandMode
+  };
+}
+
+// src/components/ThemeSwitcher.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var iconSize = 16;
+function SunIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+  ] });
+}
+function MoonIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
+}
+function PaletteIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "13.5", cy: "6.5", r: "0.5", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "17.5", cy: "10.5", r: "0.5", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "8.5", cy: "7.5", r: "0.5", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "6.5", cy: "12", r: "0.5", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" })
+  ] });
+}
+var buttonBase = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 32,
+  height: 32,
+  borderRadius: "var(--admin-radius-sm)",
+  border: "1px solid var(--admin-border)",
+  background: "var(--admin-surface)",
+  color: "var(--admin-text-secondary)",
+  cursor: "pointer",
+  transition: "all 0.2s ease",
+  padding: 0
+};
+var buttonActive = {
+  ...buttonBase,
+  background: "var(--admin-accent-subtle)",
+  borderColor: "var(--admin-accent)",
+  color: "var(--admin-accent)"
+};
+function ThemeSwitcher() {
+  const { isDark, isBrand, toggleDarkMode, toggleBrandMode } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
     {
-      width: "32",
-      height: "32",
-      viewBox: "0 0 32 32",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "8px 12px"
+      },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "32", height: "32", rx: "8", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "path",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
           {
-            d: "M16 8L8 16L16 24L24 16L16 8Z",
-            fill: "white",
-            stroke: "white",
-            strokeWidth: "2",
-            strokeLinejoin: "round"
+            type: "button",
+            onClick: toggleDarkMode,
+            style: isDark ? buttonActive : buttonBase,
+            title: isDark ? "Switch to light mode" : "Switch to dark mode",
+            "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
+            children: isDark ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MoonIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SunIcon, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: toggleBrandMode,
+            style: isBrand ? buttonActive : buttonBase,
+            title: isBrand ? "Switch to standard colors" : "Switch to brand colors",
+            "aria-label": isBrand ? "Switch to standard colors" : "Switch to brand colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaletteIcon, {})
           }
         )
       ]
     }
   );
 }
+function ThemeProvider({ children }) {
+  (0, import_react2.useEffect)(() => {
+    try {
+      const stored = localStorage.getItem("orion-admin-theme");
+      if (stored && ["light", "dark", "brand-light", "brand-dark"].includes(stored)) {
+        document.documentElement.setAttribute("data-theme", stored);
+      } else {
+        document.documentElement.setAttribute("data-theme", "light");
+      }
+    } catch {
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
+}
+
+// src/components/HelpTooltip.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function HelpTooltip({
+  content,
+  position = "top"
+}) {
+  const [isVisible, setIsVisible] = (0, import_react3.useState)(false);
+  const triggerRef = (0, import_react3.useRef)(null);
+  const tooltipRef = (0, import_react3.useRef)(null);
+  const tooltipId = (0, import_react3.useRef)(`tooltip-${Math.random().toString(36).slice(2, 9)}`);
+  const show = (0, import_react3.useCallback)(() => setIsVisible(true), []);
+  const hide = (0, import_react3.useCallback)(() => setIsVisible(false), []);
+  const toggle = (0, import_react3.useCallback)(() => setIsVisible((v) => !v), []);
+  (0, import_react3.useEffect)(() => {
+    if (!isVisible) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setIsVisible(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isVisible]);
+  (0, import_react3.useEffect)(() => {
+    if (!isVisible) return;
+    const handleClick = (e) => {
+      if (triggerRef.current && !triggerRef.current.contains(e.target) && tooltipRef.current && !tooltipRef.current.contains(e.target)) {
+        setIsVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isVisible]);
+  const positionStyles = {
+    top: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: 8 },
+    bottom: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: 8 },
+    left: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: 8 },
+    right: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: 8 }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { position: "relative", display: "inline-flex", verticalAlign: "middle", marginLeft: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: toggle,
+        onMouseEnter: show,
+        onMouseLeave: hide,
+        onFocus: show,
+        onBlur: hide,
+        "aria-describedby": isVisible ? tooltipId.current : void 0,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 18,
+          height: 18,
+          borderRadius: "50%",
+          border: "1.5px solid var(--admin-text-muted)",
+          background: "transparent",
+          color: "var(--admin-text-muted)",
+          fontSize: 11,
+          fontWeight: 700,
+          cursor: "help",
+          padding: 0,
+          lineHeight: 1,
+          transition: "all 0.15s ease",
+          ...isVisible ? {
+            borderColor: "var(--admin-accent)",
+            color: "var(--admin-accent)",
+            background: "var(--admin-accent-subtle)"
+          } : {}
+        },
+        children: "?"
+      }
+    ),
+    isVisible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        ref: tooltipRef,
+        id: tooltipId.current,
+        role: "tooltip",
+        style: {
+          position: "absolute",
+          ...positionStyles[position],
+          background: "var(--admin-tooltip-bg)",
+          color: "var(--admin-tooltip-text)",
+          padding: "8px 12px",
+          borderRadius: "var(--admin-radius-sm)",
+          fontSize: 12,
+          lineHeight: 1.5,
+          maxWidth: 260,
+          minWidth: 160,
+          whiteSpace: "normal",
+          zIndex: 9999,
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+          pointerEvents: "auto",
+          animation: "tooltipFadeIn 0.15s ease"
+        },
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/components/StatusBadge.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var statusConfig = {
+  draft: { label: "Draft" },
+  published: { label: "Published" },
+  changed: { label: "Changed" }
+};
+function StatusBadge({
+  status,
+  size = "md"
+}) {
+  const config = statusConfig[status];
+  const isSm = size === "sm";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: isSm ? "2px 8px" : "3px 10px",
+        borderRadius: 20,
+        fontSize: isSm ? 11 : 12,
+        fontWeight: 600,
+        lineHeight: 1.4,
+        background: `var(--admin-badge-${status}-bg)`,
+        color: `var(--admin-badge-${status}-text)`,
+        whiteSpace: "nowrap"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            style: {
+              width: isSm ? 5 : 6,
+              height: isSm ? 5 : 6,
+              borderRadius: "50%",
+              background: "currentColor",
+              flexShrink: 0
+            }
+          }
+        ),
+        config.label
+      ]
+    }
+  );
+}
 
 // src/components/Dashboard.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function PagesIcon({ size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "10 9 9 9 8 9" })
+  ] });
+}
+function MediaIcon({ size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "21 15 16 10 5 21" })
+  ] });
+}
+function SettingsIcon({ size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+  ] });
+}
+function LayoutIcon({ size = 24 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "3", y1: "15", x2: "21", y2: "15" })
+  ] });
+}
+function PlusIcon({ size = 16 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] });
+}
+function ClockIcon({ size = 14 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "12 6 12 12 16 14" })
+  ] });
+}
+function getGreeting() {
+  const hour = (/* @__PURE__ */ new Date()).getHours();
+  if (hour < 12) return "Good morning";
+  if (hour < 17) return "Good afternoon";
+  return "Good evening";
+}
+function formatRelativeTime(dateStr) {
+  const date = new Date(dateStr);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
 function Dashboard() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: "24px", maxWidth: 1200, margin: "0 auto" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { style: { fontSize: 32, fontWeight: 700, marginBottom: 8 }, children: "Welcome to Your CMS" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--theme-text-muted)", marginBottom: 32 }, children: "Manage your website content from this admin panel." }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  const [userName, setUserName] = (0, import_react4.useState)("");
+  const [recentPages, setRecentPages] = (0, import_react4.useState)([]);
+  const [pageCount, setPageCount] = (0, import_react4.useState)(null);
+  const [mediaCount, setMediaCount] = (0, import_react4.useState)(null);
+  (0, import_react4.useEffect)(() => {
+    fetch("/api/users/me", { credentials: "include" }).then((res) => res.json()).then((data) => {
+      const user = data?.user || data;
+      setUserName(user?.fullName || user?.email?.split("@")[0] || "");
+    }).catch(() => {
+    });
+    fetch("/api/pages?limit=5&sort=-updatedAt", { credentials: "include" }).then((res) => res.json()).then((data) => {
+      setRecentPages(data?.docs || []);
+      setPageCount(data?.totalDocs ?? null);
+    }).catch(() => {
+    });
+    fetch("/api/media?limit=0", { credentials: "include" }).then((res) => res.json()).then((data) => {
+      setMediaCount(data?.totalDocs ?? null);
+    }).catch(() => {
+    });
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { padding: "32px", maxWidth: 1200, margin: "0 auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 32 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h1", { style: { fontSize: 28, fontWeight: 700, color: "var(--admin-text)", margin: "0 0 6px" }, children: [
+          getGreeting(),
+          userName ? `, ${userName}` : ""
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontSize: 15, color: "var(--admin-text-muted)", margin: 0 }, children: "Manage your website content and settings from here." })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ThemeSwitcher, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", gap: 10, marginBottom: 32, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QuickAction, { href: "/admin/collections/pages/create", icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, {}), label: "New Page" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QuickAction, { href: "/admin/collections/media/create", icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, {}), label: "Upload Media" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QuickAction, { href: "/admin/globals/header", icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LayoutIcon, { size: 16 }), label: "Edit Navigation" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(QuickAction, { href: "/admin/globals/site-settings", icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SettingsIcon, { size: 16 }), label: "Website Settings" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         style: {
           display: "grid",
-          gap: 16,
-          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))"
+          gap: 20,
+          gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+          marginBottom: 32
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            DashboardCard,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ContentCard,
             {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PagesIcon, {}),
               title: "Pages",
-              description: "Create and manage website pages",
-              href: "/admin/collections/pages"
+              description: "Create and manage your website pages",
+              count: pageCount,
+              countLabel: "pages",
+              tooltip: "Pages are the individual sections of your website. Each page has a URL and contains content sections.",
+              actions: [
+                { label: "View All", href: "/admin/collections/pages" },
+                { label: "Create New", href: "/admin/collections/pages/create", primary: true }
+              ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            DashboardCard,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ContentCard,
             {
-              title: "Media",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MediaIcon, {}),
+              title: "Media Library",
               description: "Upload and organize images and files",
-              href: "/admin/collections/media"
+              count: mediaCount,
+              countLabel: "files",
+              tooltip: "Your media library stores all images, documents, and files used across your website.",
+              actions: [
+                { label: "Browse", href: "/admin/collections/media" },
+                { label: "Upload", href: "/admin/collections/media/create", primary: true }
+              ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            DashboardCard,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ContentCard,
             {
-              title: "Site Settings",
-              description: "Configure global site settings",
-              href: "/admin/globals/site-settings"
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LayoutIcon, {}),
+              title: "Site Design",
+              description: "Customize your header, footer, and site-wide settings",
+              tooltip: "These settings apply to every page on your website \u2014 your navigation menu, footer information, and global SEO settings.",
+              actions: [
+                { label: "Header & Nav", href: "/admin/globals/header" },
+                { label: "Footer", href: "/admin/globals/footer" },
+                { label: "Settings", href: "/admin/globals/site-settings", primary: true }
+              ]
             }
           )
         ]
       }
+    ),
+    recentPages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        style: {
+          background: "var(--admin-card-bg)",
+          border: "1px solid var(--admin-card-border)",
+          borderRadius: "var(--admin-radius-lg)",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "div",
+            {
+              style: {
+                padding: "16px 20px",
+                borderBottom: "1px solid var(--admin-border-subtle)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h3", { style: { fontSize: 15, fontWeight: 600, color: "var(--admin-text)", margin: 0, display: "flex", alignItems: "center", gap: 6 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ClockIcon, {}),
+                  " Recently Edited"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "a",
+                  {
+                    href: "/admin/collections/pages",
+                    style: { fontSize: 13, color: "var(--admin-accent)", textDecoration: "none", fontWeight: 500 },
+                    children: "View all"
+                  }
+                )
+              ]
+            }
+          ),
+          recentPages.map((page, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            "a",
+            {
+              href: `/admin/collections/pages/${page.id}`,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "12px 20px",
+                textDecoration: "none",
+                borderBottom: i < recentPages.length - 1 ? "1px solid var(--admin-border-subtle)" : "none",
+                transition: "background-color 0.15s ease"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "var(--admin-surface)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12, minWidth: 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PagesIcon, { size: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: 14, fontWeight: 500, color: "var(--admin-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: page.title || page.slug || "Untitled" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }, children: [
+                  page._status && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatusBadge, { status: page._status, size: "sm" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: 12, color: "var(--admin-text-muted)", whiteSpace: "nowrap" }, children: formatRelativeTime(page.updatedAt) })
+                ] })
+              ]
+            },
+            page.id
+          ))
+        ]
+      }
     )
   ] });
 }
-function DashboardCard({
-  title,
-  description,
-  href
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+function QuickAction({ href, icon, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "a",
     {
       href,
       style: {
-        background: "var(--theme-elevation-50)",
-        border: "1px solid var(--theme-elevation-150)",
-        borderRadius: 12,
-        display: "block",
-        padding: 20,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "8px 16px",
+        background: "var(--admin-surface)",
+        border: "1px solid var(--admin-border)",
+        borderRadius: "var(--admin-radius-md)",
+        color: "var(--admin-text)",
         textDecoration: "none",
-        transition: "border-color 0.2s"
+        fontSize: 13,
+        fontWeight: 500,
+        transition: "all 0.2s ease",
+        whiteSpace: "nowrap"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.borderColor = "var(--admin-accent)";
+        e.currentTarget.style.color = "var(--admin-accent)";
+        e.currentTarget.style.background = "var(--admin-accent-subtle)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.borderColor = "var(--admin-border)";
+        e.currentTarget.style.color = "var(--admin-text)";
+        e.currentTarget.style.background = "var(--admin-surface)";
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { fontSize: 18, fontWeight: 600, marginBottom: 8 }, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { color: "var(--theme-text-muted)", fontSize: 14, margin: 0 }, children: description })
+        icon,
+        label
       ]
     }
   );
 }
+function ContentCard({
+  icon,
+  title,
+  description,
+  count,
+  countLabel,
+  tooltip,
+  actions
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      style: {
+        background: "var(--admin-card-bg)",
+        border: "1px solid var(--admin-card-border)",
+        borderRadius: "var(--admin-radius-lg)",
+        padding: 24,
+        display: "flex",
+        flexDirection: "column",
+        gap: 16,
+        boxShadow: "var(--admin-card-shadow)",
+        transition: "all 0.2s ease"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              style: {
+                width: 40,
+                height: 40,
+                borderRadius: "var(--admin-radius-md)",
+                background: "var(--admin-accent-subtle)",
+                color: "var(--admin-accent)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h3", { style: { fontSize: 16, fontWeight: 600, color: "var(--admin-text)", margin: 0, display: "flex", alignItems: "center" }, children: [
+              title,
+              tooltip && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HelpTooltip, { content: tooltip, position: "right" })
+            ] }),
+            count !== void 0 && count !== null && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { fontSize: 12, color: "var(--admin-text-muted)" }, children: [
+              count,
+              " ",
+              countLabel
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { fontSize: 13, color: "var(--admin-text-muted)", margin: 0, lineHeight: 1.5 }, children: description }),
+        actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 8, marginTop: "auto", flexWrap: "wrap" }, children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "a",
+          {
+            href: action.href,
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              padding: "7px 14px",
+              borderRadius: "var(--admin-radius-sm)",
+              fontSize: 13,
+              fontWeight: 500,
+              textDecoration: "none",
+              transition: "all 0.15s ease",
+              ...action.primary ? {
+                background: "var(--admin-accent)",
+                color: "var(--admin-text-inverse)"
+              } : {
+                background: "var(--admin-surface)",
+                color: "var(--admin-text-secondary)",
+                border: "1px solid var(--admin-border)"
+              }
+            },
+            children: action.label
+          },
+          action.href
+        )) })
+      ]
+    }
+  );
+}
+
+// src/components/EmptyState.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function EmptyState({
+  icon,
+  title,
+  description,
+  actionLabel,
+  actionHref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "48px 24px",
+        textAlign: "center",
+        background: "var(--admin-surface)",
+        borderRadius: "var(--admin-radius-lg)",
+        border: "1px dashed var(--admin-border)"
+      },
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            style: {
+              marginBottom: 16,
+              color: "var(--admin-text-muted)",
+              opacity: 0.6
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "h3",
+          {
+            style: {
+              fontSize: 18,
+              fontWeight: 600,
+              color: "var(--admin-text)",
+              margin: "0 0 8px"
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "p",
+          {
+            style: {
+              fontSize: 14,
+              color: "var(--admin-text-muted)",
+              margin: "0 0 20px",
+              maxWidth: 400,
+              lineHeight: 1.5
+            },
+            children: description
+          }
+        ),
+        actionLabel && actionHref && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "a",
+          {
+            href: actionHref,
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
+              padding: "10px 20px",
+              background: "var(--admin-accent)",
+              color: "var(--admin-text-inverse)",
+              borderRadius: "var(--admin-radius-md)",
+              textDecoration: "none",
+              fontWeight: 600,
+              fontSize: 14,
+              transition: "all 0.2s ease"
+            },
+            children: actionLabel
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/BlockPicker.tsx
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function BlockPicker({
+  blocks,
+  onSelect
+}) {
+  const [searchQuery, setSearchQuery] = (0, import_react5.useState)("");
+  const filtered = blocks.filter(
+    (b) => b.label.toLowerCase().includes(searchQuery.toLowerCase()) || b.slug.toLowerCase().includes(searchQuery.toLowerCase()) || b.description && b.description.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    blocks.length > 4 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search sections...",
+        value: searchQuery,
+        onChange: (e) => setSearchQuery(e.target.value),
+        style: {
+          padding: "10px 14px",
+          border: "1px solid var(--admin-input-border)",
+          borderRadius: "var(--admin-radius-md)",
+          background: "var(--admin-input-bg)",
+          color: "var(--admin-text)",
+          fontSize: 14,
+          outline: "none",
+          width: "100%",
+          boxSizing: "border-box"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+          gap: 12
+        },
+        children: filtered.map((block) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelect(block.slug),
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 10,
+              padding: 16,
+              background: "var(--admin-card-bg)",
+              border: "1px solid var(--admin-card-border)",
+              borderRadius: "var(--admin-radius-lg)",
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              textAlign: "center"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.borderColor = "var(--admin-accent)";
+              e.currentTarget.style.boxShadow = "var(--admin-card-shadow-hover)";
+              e.currentTarget.style.transform = "translateY(-2px)";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.borderColor = "var(--admin-card-border)";
+              e.currentTarget.style.boxShadow = "none";
+              e.currentTarget.style.transform = "translateY(0)";
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  style: {
+                    width: 48,
+                    height: 48,
+                    borderRadius: "var(--admin-radius-md)",
+                    background: "var(--admin-accent-subtle)",
+                    color: "var(--admin-accent)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 24,
+                    overflow: "hidden"
+                  },
+                  children: block.imageURL ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    "img",
+                    {
+                      src: block.imageURL,
+                      alt: block.label,
+                      style: { width: "100%", height: "100%", objectFit: "cover" }
+                    }
+                  ) : block.icon ? block.icon : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlockDefaultIcon, {})
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: "var(--admin-text)",
+                    lineHeight: 1.3
+                  },
+                  children: block.label
+                }
+              ),
+              block.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "span",
+                {
+                  style: {
+                    fontSize: 11,
+                    color: "var(--admin-text-muted)",
+                    lineHeight: 1.4
+                  },
+                  children: block.description
+                }
+              )
+            ]
+          },
+          block.slug
+        ))
+      }
+    ),
+    filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { style: { textAlign: "center", color: "var(--admin-text-muted)", fontSize: 14, padding: 20 }, children: "No sections match your search." })
+  ] });
+}
+function BlockDefaultIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" })
+  ] });
+}
+
+// src/components/SectionTabs.tsx
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function SectionTabs({
+  tabs,
+  defaultTab = 0
+}) {
+  const [activeTab, setActiveTab] = (0, import_react6.useState)(defaultTab);
+  if (tabs.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      style: {
+        border: "1px solid var(--admin-border)",
+        borderRadius: "var(--admin-radius-lg)",
+        overflow: "hidden",
+        background: "var(--admin-card-bg)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: "2px solid var(--admin-border)",
+              background: "var(--admin-surface)",
+              overflowX: "auto",
+              scrollbarWidth: "none"
+            },
+            children: tabs.map((tab, index) => {
+              const isActive = index === activeTab;
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setActiveTab(index),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    padding: "12px 18px",
+                    border: "none",
+                    borderBottom: isActive ? "2px solid var(--admin-accent)" : "2px solid transparent",
+                    marginBottom: -2,
+                    background: "transparent",
+                    color: isActive ? "var(--admin-accent)" : "var(--admin-text-muted)",
+                    fontWeight: isActive ? 600 : 500,
+                    fontSize: 13,
+                    cursor: "pointer",
+                    transition: "all 0.15s ease",
+                    whiteSpace: "nowrap"
+                  },
+                  children: [
+                    tab.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { display: "flex", opacity: isActive ? 1 : 0.6 }, children: tab.icon }),
+                    tab.label
+                  ]
+                },
+                index
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: 20 }, children: tabs[activeTab]?.content })
+      ]
+    }
+  );
+}
+
+// src/components/WelcomeHeader.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function WelcomeHeader({
+  title,
+  description,
+  tooltip,
+  actions
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        padding: "24px 0",
+        borderBottom: "1px solid var(--admin-border-subtle)",
+        marginBottom: 24
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "h1",
+            {
+              style: {
+                fontSize: 24,
+                fontWeight: 700,
+                color: "var(--admin-text)",
+                margin: 0,
+                display: "flex",
+                alignItems: "center"
+              },
+              children: [
+                title,
+                tooltip && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HelpTooltip, { content: tooltip, position: "right" })
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { style: { fontSize: 14, color: "var(--admin-text-muted)", margin: "6px 0 0" }, children: description })
+        ] }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", gap: 8 }, children: actions })
+      ]
+    }
+  );
+}
+
+// src/fields/themePreference.ts
+var themePreferenceField = {
+  name: "themePreference",
+  type: "select",
+  defaultValue: "light",
+  options: [
+    { label: "Light", value: "light" },
+    { label: "Dark", value: "dark" },
+    { label: "Brand Light", value: "brand-light" },
+    { label: "Brand Dark", value: "brand-dark" }
+  ],
+  admin: {
+    position: "sidebar",
+    condition: () => false
+    // Hidden from form — managed by ThemeSwitcher
+  }
+};
+
+// src/helpers/configureAdmin.ts
+function configureAdmin(config) {
+  const { brandName, brandPrimary, brandSecondary } = config;
+  const brandCssVars = [
+    brandPrimary ? `--brand-primary: ${brandPrimary};` : "",
+    brandSecondary ? `--brand-secondary: ${brandSecondary};` : ""
+  ].filter(Boolean).join("\n  ");
+  return {
+    admin: {
+      components: {
+        graphics: {
+          Logo: {
+            exportName: "Logo",
+            path: "@orion-studios/payload-admin-components"
+          },
+          Icon: {
+            exportName: "Icon",
+            path: "@orion-studios/payload-admin-components"
+          }
+        },
+        views: {
+          dashboard: {
+            Component: {
+              exportName: "Dashboard",
+              path: "@orion-studios/payload-admin-components"
+            }
+          }
+        },
+        providers: [
+          {
+            exportName: "ThemeProvider",
+            path: "@orion-studios/payload-admin-components"
+          }
+        ],
+        afterNavLinks: [
+          {
+            exportName: "ThemeSwitcher",
+            path: "@orion-studios/payload-admin-components"
+          }
+        ]
+      },
+      meta: {
+        titleSuffix: ` \u2014 ${brandName}`
+      }
+    },
+    brandName,
+    brandPrimary: brandPrimary || "#3b82f6",
+    brandSecondary: brandSecondary || "#8b5cf6",
+    brandCssVars,
+    /**
+     * Wraps the Users collection to add theme preference field.
+     */
+    wrapUsers(usersCollection) {
+      return {
+        ...usersCollection,
+        fields: [...usersCollection.fields || [], themePreferenceField]
+      };
+    },
+    /**
+     * Wraps globals with intuitive group labels.
+     * Maps common global slugs to the "Site Design" group with user-friendly labels.
+     */
+    wrapGlobals(globals) {
+      const labelMap = {
+        header: { group: "Site Design", label: "Header & Navigation" },
+        footer: { group: "Site Design", label: "Footer" },
+        "site-settings": { group: "Site Design", label: "Website Settings" }
+      };
+      return globals.map((global) => {
+        const mapping = labelMap[global.slug];
+        if (!mapping) return global;
+        return {
+          ...global,
+          admin: {
+            ...global.admin,
+            group: mapping.group
+          },
+          label: mapping.label
+        };
+      });
+    }
+  };
+}
+
+// src/helpers/withTooltips.ts
+var defaultTooltips = {
+  title: "The main title displayed on this page.",
+  slug: 'The URL-friendly name for this page (e.g., "about-us"). This appears in the web address.',
+  template: "Choose a layout template. This controls the overall structure of the page.",
+  parent: "Select a parent page to nest this page under. This affects the URL path.",
+  path: "The full URL path for this page. This is automatically generated from the slug and parent.",
+  layout: "Add and arrange content sections on your page. Each section is a building block.",
+  metaTitle: "The title shown in search engine results and browser tabs. Keep under 60 characters.",
+  metaDescription: "A brief summary shown in search results. Keep under 160 characters for best results.",
+  canonicalUrl: "The preferred URL for this page. Used to prevent duplicate content in search engines.",
+  ogImage: "The image shown when this page is shared on social media (Facebook, LinkedIn, etc.).",
+  noIndex: "When enabled, search engines will not list this page in results.",
+  noFollow: "When enabled, search engines will not follow links on this page.",
+  publishedAt: "The date and time this page was first published.",
+  alt: "Describe this image for screen readers and search engines. Be specific and concise.",
+  navItems: "The links shown in your website's navigation menu.",
+  copyright: "The copyright text displayed in your website footer.",
+  contactEmail: "The email address displayed in your footer and contact sections.",
+  contactPhone: "The phone number displayed in your footer and contact sections.",
+  siteName: "Your website's name. Appears in browser tabs and search results.",
+  tagline: "A short phrase describing your business. Used in SEO and site metadata.",
+  canonicalBaseUrl: 'The base URL of your website (e.g., "https://example.com"). Used for generating canonical URLs.'
+};
+function withTooltips(fields, customTooltips) {
+  const tooltips = { ...defaultTooltips, ...customTooltips };
+  return fields.map((field) => addTooltipToField(field, tooltips));
+}
+function addTooltipToField(field, tooltips) {
+  if ("name" in field && field.name && tooltips[field.name]) {
+    const tooltip = tooltips[field.name];
+    const admin = field.admin;
+    if (!admin?.description) {
+      return {
+        ...field,
+        admin: {
+          ...admin,
+          description: tooltip
+        }
+      };
+    }
+  }
+  if ("fields" in field && Array.isArray(field.fields)) {
+    return {
+      ...field,
+      fields: field.fields.map((f) => addTooltipToField(f, tooltips))
+    };
+  }
+  if ("tabs" in field && Array.isArray(field.tabs)) {
+    return {
+      ...field,
+      tabs: field.tabs.map((tab) => ({
+        ...tab,
+        fields: tab.fields ? tab.fields.map((f) => addTooltipToField(f, tooltips)) : tab.fields
+      }))
+    };
+  }
+  return field;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BlockPicker,
   Dashboard,
+  EmptyState,
+  HelpTooltip,
   Icon,
-  Logo
+  Logo,
+  SectionTabs,
+  StatusBadge,
+  ThemeProvider,
+  ThemeSwitcher,
+  WelcomeHeader,
+  configureAdmin,
+  themePreferenceField,
+  useTheme,
+  withTooltips
 });