@orion-studios/payload-admin-components 0.2.0-beta.0 → 0.2.0-beta.2

package/dist/client.mjs

@@ -0,0 +1,1128 @@
+'use client';
+"use client";
+
+// src/components/Logo.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Logo() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "4px 0",
+        textDecoration: "none",
+        transition: "opacity 0.2s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            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__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("polygon", { points: "12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: "22", x2: "12", y2: "15.5" }),
+              /* @__PURE__ */ jsx("polyline", { points: "22 8.5 12 15.5 2 8.5" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: 15,
+              fontWeight: 700,
+              color: "var(--admin-text, #111827)",
+              letterSpacing: "-0.01em"
+            },
+            children: "Orion CMS"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Icon.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Icon() {
+  return /* @__PURE__ */ jsxs2("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx2("rect", { width: "32", height: "32", rx: "8", fill: "var(--admin-accent, #3b82f6)" }),
+    /* @__PURE__ */ jsxs2("g", { transform: "translate(4, 4)", children: [
+      /* @__PURE__ */ jsx2("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__ */ jsx2("line", { x1: "12", y1: "22", x2: "12", y2: "15.5", stroke: "white", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx2("polyline", { points: "22 8.5 12 15.5 2 8.5", fill: "none", stroke: "white", strokeWidth: "1.5" })
+    ] })
+  ] });
+}
+
+// src/components/Dashboard.tsx
+import { useEffect as useEffect4, useState as useState3 } from "react";
+
+// src/components/ThemeSwitcher.tsx
+import { useEffect as useEffect2 } from "react";
+
+// src/hooks/useTheme.ts
+import { useCallback, useEffect, useRef, useState } from "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] = useState(() => {
+    if (typeof window === "undefined") return DEFAULT_THEME;
+    return getCachedTheme() || DEFAULT_THEME;
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const debounceRef = useRef(null);
+  const userIdRef = useRef(null);
+  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 = 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 = useCallback(() => {
+    if (isBrand) {
+      setTheme(isDark ? "brand-light" : "brand-dark");
+    } else {
+      setTheme(isDark ? "light" : "dark");
+    }
+  }, [isDark, isBrand, setTheme]);
+  const toggleBrandMode = 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
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var iconSize = 16;
+function SunIcon() {
+  return /* @__PURE__ */ jsxs3("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "5" }),
+    /* @__PURE__ */ jsx3("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+    /* @__PURE__ */ jsx3("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsx3("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+    /* @__PURE__ */ jsx3("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+    /* @__PURE__ */ jsx3("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+    /* @__PURE__ */ jsx3("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+    /* @__PURE__ */ jsx3("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+    /* @__PURE__ */ jsx3("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+  ] });
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsx3("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx3("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) });
+}
+function PaletteIcon() {
+  return /* @__PURE__ */ jsxs3("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "13.5", cy: "6.5", r: "0.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "17.5", cy: "10.5", r: "0.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "8.5", cy: "7.5", r: "0.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "6.5", cy: "12", r: "0.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx3("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__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "8px 12px"
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            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__ */ jsx3(MoonIcon, {}) : /* @__PURE__ */ jsx3(SunIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "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__ */ jsx3(PaletteIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function ThemeProvider({ children }) {
+  useEffect2(() => {
+    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__ */ jsx3(Fragment, { children });
+}
+
+// src/components/HelpTooltip.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function HelpTooltip({
+  content,
+  position = "top"
+}) {
+  const [isVisible, setIsVisible] = useState2(false);
+  const triggerRef = useRef2(null);
+  const tooltipRef = useRef2(null);
+  const tooltipId = useRef2(`tooltip-${Math.random().toString(36).slice(2, 9)}`);
+  const show = useCallback2(() => setIsVisible(true), []);
+  const hide = useCallback2(() => setIsVisible(false), []);
+  const toggle = useCallback2(() => setIsVisible((v) => !v), []);
+  useEffect3(() => {
+    if (!isVisible) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setIsVisible(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isVisible]);
+  useEffect3(() => {
+    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__ */ jsxs4("span", { style: { position: "relative", display: "inline-flex", verticalAlign: "middle", marginLeft: 6 }, children: [
+    /* @__PURE__ */ jsx4(
+      "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__ */ jsx4(
+      "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
+import { jsx as jsx5, jsxs as jsxs5 } from "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__ */ jsxs5(
+    "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__ */ jsx5(
+          "span",
+          {
+            style: {
+              width: isSm ? 5 : 6,
+              height: isSm ? 5 : 6,
+              borderRadius: "50%",
+              background: "currentColor",
+              flexShrink: 0
+            }
+          }
+        ),
+        config.label
+      ]
+    }
+  );
+}
+
+// src/components/Dashboard.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function PagesIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsxs6("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx6("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "14 2 14 8 20 8" }),
+    /* @__PURE__ */ jsx6("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+    /* @__PURE__ */ jsx6("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "10 9 9 9 8 9" })
+  ] });
+}
+function MediaIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsxs6("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx6("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+    /* @__PURE__ */ jsx6("polyline", { points: "21 15 16 10 5 21" })
+  ] });
+}
+function SettingsIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsxs6("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx6("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__ */ jsxs6("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx6("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx6("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
+    /* @__PURE__ */ jsx6("line", { x1: "3", y1: "15", x2: "21", y2: "15" })
+  ] });
+}
+function PlusIcon({ size = 16 }) {
+  return /* @__PURE__ */ jsxs6("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx6("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsx6("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] });
+}
+function ClockIcon({ size = 14 }) {
+  return /* @__PURE__ */ jsxs6("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx6("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() {
+  const [userName, setUserName] = useState3("");
+  const [recentPages, setRecentPages] = useState3([]);
+  const [pageCount, setPageCount] = useState3(null);
+  const [mediaCount, setMediaCount] = useState3(null);
+  useEffect4(() => {
+    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__ */ jsxs6("div", { style: { padding: "32px", maxWidth: 1200, margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 32 }, children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsxs6("h1", { style: { fontSize: 28, fontWeight: 700, color: "var(--admin-text)", margin: "0 0 6px" }, children: [
+          getGreeting(),
+          userName ? `, ${userName}` : ""
+        ] }),
+        /* @__PURE__ */ jsx6("p", { style: { fontSize: 15, color: "var(--admin-text-muted)", margin: 0 }, children: "Manage your website content and settings from here." })
+      ] }),
+      /* @__PURE__ */ jsx6(ThemeSwitcher, {})
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 10, marginBottom: 32, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx6(QuickAction, { href: "/admin/collections/pages/create", icon: /* @__PURE__ */ jsx6(PlusIcon, {}), label: "New Page" }),
+      /* @__PURE__ */ jsx6(QuickAction, { href: "/admin/collections/media/create", icon: /* @__PURE__ */ jsx6(PlusIcon, {}), label: "Upload Media" }),
+      /* @__PURE__ */ jsx6(QuickAction, { href: "/admin/globals/header", icon: /* @__PURE__ */ jsx6(LayoutIcon, { size: 16 }), label: "Edit Navigation" }),
+      /* @__PURE__ */ jsx6(QuickAction, { href: "/admin/globals/site-settings", icon: /* @__PURE__ */ jsx6(SettingsIcon, { size: 16 }), label: "Website Settings" })
+    ] }),
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: 20,
+          gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+          marginBottom: 32
+        },
+        children: [
+          /* @__PURE__ */ jsx6(
+            ContentCard,
+            {
+              icon: /* @__PURE__ */ jsx6(PagesIcon, {}),
+              title: "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__ */ jsx6(
+            ContentCard,
+            {
+              icon: /* @__PURE__ */ jsx6(MediaIcon, {}),
+              title: "Media Library",
+              description: "Upload and organize images and files",
+              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__ */ jsx6(
+            ContentCard,
+            {
+              icon: /* @__PURE__ */ jsx6(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__ */ jsxs6(
+      "div",
+      {
+        style: {
+          background: "var(--admin-card-bg)",
+          border: "1px solid var(--admin-card-border)",
+          borderRadius: "var(--admin-radius-lg)",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              style: {
+                padding: "16px 20px",
+                borderBottom: "1px solid var(--admin-border-subtle)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxs6("h3", { style: { fontSize: 15, fontWeight: 600, color: "var(--admin-text)", margin: 0, display: "flex", alignItems: "center", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx6(ClockIcon, {}),
+                  " Recently Edited"
+                ] }),
+                /* @__PURE__ */ jsx6(
+                  "a",
+                  {
+                    href: "/admin/collections/pages",
+                    style: { fontSize: 13, color: "var(--admin-accent)", textDecoration: "none", fontWeight: 500 },
+                    children: "View all"
+                  }
+                )
+              ]
+            }
+          ),
+          recentPages.map((page, i) => /* @__PURE__ */ jsxs6(
+            "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__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 12, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx6(PagesIcon, { size: 16 }),
+                  /* @__PURE__ */ jsx6("span", { style: { fontSize: 14, fontWeight: 500, color: "var(--admin-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: page.title || page.slug || "Untitled" })
+                ] }),
+                /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }, children: [
+                  page._status && /* @__PURE__ */ jsx6(StatusBadge, { status: page._status, size: "sm" }),
+                  /* @__PURE__ */ jsx6("span", { style: { fontSize: 12, color: "var(--admin-text-muted)", whiteSpace: "nowrap" }, children: formatRelativeTime(page.updatedAt) })
+                ] })
+              ]
+            },
+            page.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+function QuickAction({ href, icon, label }) {
+  return /* @__PURE__ */ jsxs6(
+    "a",
+    {
+      href,
+      style: {
+        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",
+        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: [
+        icon,
+        label
+      ]
+    }
+  );
+}
+function ContentCard({
+  icon,
+  title,
+  description,
+  count,
+  countLabel,
+  tooltip,
+  actions
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "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__ */ jsx6("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ jsx6(
+            "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__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsxs6("h3", { style: { fontSize: 16, fontWeight: 600, color: "var(--admin-text)", margin: 0, display: "flex", alignItems: "center" }, children: [
+              title,
+              tooltip && /* @__PURE__ */ jsx6(HelpTooltip, { content: tooltip, position: "right" })
+            ] }),
+            count !== void 0 && count !== null && /* @__PURE__ */ jsxs6("span", { style: { fontSize: 12, color: "var(--admin-text-muted)" }, children: [
+              count,
+              " ",
+              countLabel
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx6("p", { style: { fontSize: 13, color: "var(--admin-text-muted)", margin: 0, lineHeight: 1.5 }, children: description }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 8, marginTop: "auto", flexWrap: "wrap" }, children: actions.map((action) => /* @__PURE__ */ jsx6(
+          "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
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function EmptyState({
+  icon,
+  title,
+  description,
+  actionLabel,
+  actionHref
+}) {
+  return /* @__PURE__ */ jsxs7(
+    "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__ */ jsx7(
+          "div",
+          {
+            style: {
+              marginBottom: 16,
+              color: "var(--admin-text-muted)",
+              opacity: 0.6
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "h3",
+          {
+            style: {
+              fontSize: 18,
+              fontWeight: 600,
+              color: "var(--admin-text)",
+              margin: "0 0 8px"
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "p",
+          {
+            style: {
+              fontSize: 14,
+              color: "var(--admin-text-muted)",
+              margin: "0 0 20px",
+              maxWidth: 400,
+              lineHeight: 1.5
+            },
+            children: description
+          }
+        ),
+        actionLabel && actionHref && /* @__PURE__ */ jsx7(
+          "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
+import { useState as useState4 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function BlockPicker({
+  blocks,
+  onSelect
+}) {
+  const [searchQuery, setSearchQuery] = useState4("");
+  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__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    blocks.length > 4 && /* @__PURE__ */ jsx8(
+      "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__ */ jsx8(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+          gap: 12
+        },
+        children: filtered.map((block) => /* @__PURE__ */ jsxs8(
+          "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__ */ jsx8(
+                "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__ */ jsx8(
+                    "img",
+                    {
+                      src: block.imageURL,
+                      alt: block.label,
+                      style: { width: "100%", height: "100%", objectFit: "cover" }
+                    }
+                  ) : block.icon ? block.icon : /* @__PURE__ */ jsx8(BlockDefaultIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "span",
+                {
+                  style: {
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: "var(--admin-text)",
+                    lineHeight: 1.3
+                  },
+                  children: block.label
+                }
+              ),
+              block.description && /* @__PURE__ */ jsx8(
+                "span",
+                {
+                  style: {
+                    fontSize: 11,
+                    color: "var(--admin-text-muted)",
+                    lineHeight: 1.4
+                  },
+                  children: block.description
+                }
+              )
+            ]
+          },
+          block.slug
+        ))
+      }
+    ),
+    filtered.length === 0 && /* @__PURE__ */ jsx8("p", { style: { textAlign: "center", color: "var(--admin-text-muted)", fontSize: 14, padding: 20 }, children: "No sections match your search." })
+  ] });
+}
+function BlockDefaultIcon() {
+  return /* @__PURE__ */ jsxs8("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx8("rect", { x: "3", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx8("rect", { x: "14", y: "3", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx8("rect", { x: "14", y: "14", width: "7", height: "7" }),
+    /* @__PURE__ */ jsx8("rect", { x: "3", y: "14", width: "7", height: "7" })
+  ] });
+}
+
+// src/components/SectionTabs.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function SectionTabs({
+  tabs,
+  defaultTab = 0
+}) {
+  const [activeTab, setActiveTab] = useState5(defaultTab);
+  if (tabs.length === 0) return null;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      style: {
+        border: "1px solid var(--admin-border)",
+        borderRadius: "var(--admin-radius-lg)",
+        overflow: "hidden",
+        background: "var(--admin-card-bg)"
+      },
+      children: [
+        /* @__PURE__ */ jsx9(
+          "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__ */ jsxs9(
+                "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__ */ jsx9("span", { style: { display: "flex", opacity: isActive ? 1 : 0.6 }, children: tab.icon }),
+                    tab.label
+                  ]
+                },
+                index
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx9("div", { style: { padding: 20 }, children: tabs[activeTab]?.content })
+      ]
+    }
+  );
+}
+
+// src/components/WelcomeHeader.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function WelcomeHeader({
+  title,
+  description,
+  tooltip,
+  actions
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        padding: "24px 0",
+        borderBottom: "1px solid var(--admin-border-subtle)",
+        marginBottom: 24
+      },
+      children: [
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsxs10(
+            "h1",
+            {
+              style: {
+                fontSize: 24,
+                fontWeight: 700,
+                color: "var(--admin-text)",
+                margin: 0,
+                display: "flex",
+                alignItems: "center"
+              },
+              children: [
+                title,
+                tooltip && /* @__PURE__ */ jsx10(HelpTooltip, { content: tooltip, position: "right" })
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ jsx10("p", { style: { fontSize: 14, color: "var(--admin-text-muted)", margin: "6px 0 0" }, children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx10("div", { style: { display: "flex", gap: 8 }, children: actions })
+      ]
+    }
+  );
+}
+export {
+  BlockPicker,
+  Dashboard,
+  EmptyState,
+  HelpTooltip,
+  Icon,
+  Logo,
+  SectionTabs,
+  StatusBadge,
+  ThemeProvider,
+  ThemeSwitcher,
+  WelcomeHeader,
+  useTheme
+};