strapi-plugin-magic-mark 1.1.0

package/dist/_chunks/App-7ZH1Reka.mjs

@@ -0,0 +1,1390 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import styled, { keyframes } from "styled-components";
+import { Flex, Loader, Box, Typography, SingleSelect, SingleSelectOption, Thead, Tr, Th, VisuallyHidden, Tbody, Td, Button, Table, TextInput } from "@strapi/design-system";
+import { Sparkle, User, Pin, Link, Eye, Pencil, Trash, Search, Cross, Key, Check } from "@strapi/icons";
+import { useFetchClient, useNotification } from "@strapi/strapi/admin";
+import { p as pluginId, C as CreateEditModal } from "./index-DYHEyGJr.mjs";
+const theme = {
+  colors: {
+    primary: {
+      50: "#F0F9FF",
+      100: "#E0F2FE",
+      500: "#0EA5E9",
+      600: "#0284C7",
+      700: "#0369A1"
+    },
+    secondary: {
+      600: "#9333EA"
+    },
+    success: {
+      100: "#DCFCE7",
+      500: "#22C55E",
+      600: "#16A34A"
+    },
+    warning: {
+      100: "#FEF3C7",
+      500: "#F59E0B",
+      600: "#D97706"
+    },
+    neutral: {
+      0: "#FFFFFF",
+      50: "#F9FAFB",
+      100: "#F3F4F6",
+      200: "#E5E7EB",
+      600: "#4B5563",
+      700: "#374151",
+      800: "#1F2937"
+    }
+  },
+  shadows: {
+    sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+  },
+  transitions: {
+    fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)",
+    normal: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
+    slow: "500ms cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+    "2xl": "48px"
+  },
+  borderRadius: {
+    md: "8px",
+    lg: "12px",
+    xl: "16px"
+  }
+};
+const fadeIn$1 = keyframes`
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+keyframes`
+  from { opacity: 0; transform: translateX(-10px); }
+  to { opacity: 1; transform: translateX(0); }
+`;
+const shimmer = keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+`;
+const float = keyframes`
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-5px); }
+`;
+const breakpoints = {
+  mobile: "768px"
+};
+const Container = styled(Box)`
+  animation: ${fadeIn$1} ${theme.transitions.slow};
+  min-height: 100vh;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: ${theme.spacing.xl} ${theme.spacing.lg} 0;
+
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    padding: ${theme.spacing.md} ${theme.spacing.sm} 0;
+  }
+`;
+const Header = styled(Box)`
+  background: linear-gradient(135deg, 
+    ${theme.colors.primary[600]} 0%, 
+    ${theme.colors.secondary[600]} 100%
+  );
+  border-radius: ${theme.borderRadius.xl};
+  padding: ${theme.spacing.xl} ${theme.spacing["2xl"]};
+  margin-bottom: ${theme.spacing.xl};
+  position: relative;
+  overflow: hidden;
+  box-shadow: ${theme.shadows.xl};
+
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    padding: ${theme.spacing.lg} ${theme.spacing.md} !important;
+    border-radius: ${theme.borderRadius.lg} !important;
+  }
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 200%;
+    height: 100%;
+    background: linear-gradient(
+      90deg, 
+      transparent, 
+      rgba(255, 255, 255, 0.1), 
+      transparent
+    );
+    animation: ${shimmer} 3s infinite;
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(circle at 20% 80%, transparent 50%, rgba(255, 255, 255, 0.1) 50%);
+    background-size: 15px 15px;
+    opacity: 0.3;
+  }
+`;
+const HeaderContent = styled(Flex)`
+  position: relative;
+  z-index: 1;
+`;
+const Title = styled(Typography)`
+  color: ${theme.colors.neutral[0]};
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  gap: ${theme.spacing.sm};
+  
+  svg {
+    width: 28px;
+    height: 28px;
+    animation: ${float} 3s ease-in-out infinite;
+  }
+`;
+const Subtitle = styled(Typography)`
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.95rem;
+  font-weight: 400;
+  margin-top: ${theme.spacing.xs};
+  letter-spacing: 0.01em;
+`;
+const StatsGrid = styled.div`
+  margin-bottom: ${theme.spacing.xl};
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: ${theme.spacing.md};
+  justify-content: center;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 12px !important;
+    margin-bottom: 24px !important;
+  }
+`;
+const StatCard = styled(Box)`
+  background: ${theme.colors.neutral[0]};
+  border-radius: ${theme.borderRadius.lg};
+  padding: ${theme.spacing.lg};
+  position: relative;
+  overflow: hidden;
+  transition: all ${theme.transitions.normal};
+  animation: ${fadeIn$1} ${theme.transitions.slow} backwards;
+  animation-delay: ${(props) => props.$delay || "0s"};
+  box-shadow: ${theme.shadows.sm};
+  border: 1px solid ${theme.colors.neutral[200]};
+  min-width: 200px;
+  flex: 1;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: ${theme.shadows.xl};
+    border-color: ${(props) => props.$color || theme.colors.primary[500]};
+    
+    .stat-icon {
+      transform: scale(1.1);
+    }
+    
+    .stat-value {
+      transform: scale(1.05);
+    }
+  }
+
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    min-width: unset !important;
+    padding: ${theme.spacing.md} !important;
+    
+    &:hover {
+      transform: none !important;
+    }
+  }
+`;
+const StatIcon = styled(Box)`
+  width: 64px;
+  height: 64px;
+  border-radius: ${theme.borderRadius.md};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(props) => props.$bg || theme.colors.primary[100]};
+  transition: all ${theme.transitions.normal};
+  margin-bottom: ${theme.spacing.md};
+  
+  svg {
+    width: 32px;
+    height: 32px;
+    color: ${(props) => props.$color || theme.colors.primary[600]};
+  }
+`;
+const StatValue = styled(Typography)`
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: ${theme.colors.neutral[800]};
+  line-height: 1;
+  margin-bottom: ${theme.spacing.xs};
+  transition: transform ${theme.transitions.normal};
+`;
+const StatLabel = styled(Typography)`
+  font-size: 0.875rem;
+  color: ${theme.colors.neutral[600]};
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-transform: capitalize;
+`;
+const DataTable = styled(Box)`
+  background: ${theme.colors.neutral[0]};
+  border-radius: ${theme.borderRadius.lg};
+  overflow: hidden;
+  box-shadow: ${theme.shadows.sm};
+  border: 1px solid ${theme.colors.neutral[200]};
+  margin-bottom: ${theme.spacing.xl};
+`;
+const StyledTable = styled(Table)`
+  thead {
+    background: ${theme.colors.neutral[0]};
+    border-bottom: 2px solid ${theme.colors.neutral[100]};
+    
+    th {
+      font-weight: 600;
+      color: ${theme.colors.neutral[700]};
+      font-size: 0.875rem;
+      text-transform: uppercase;
+      letter-spacing: 0.025em;
+      padding: ${theme.spacing.lg} ${theme.spacing.lg};
+    }
+  }
+  
+  tbody tr {
+    transition: all ${theme.transitions.fast};
+    border-bottom: 1px solid ${theme.colors.neutral[100]};
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    &:hover {
+      background: ${theme.colors.neutral[50]};
+      
+      .action-buttons {
+        opacity: 1;
+      }
+    }
+    
+    td {
+      padding: ${theme.spacing.lg} ${theme.spacing.lg};
+      color: ${theme.colors.neutral[700]};
+      vertical-align: middle;
+    }
+  }
+`;
+styled(Box)`
+  width: 4px;
+  height: 40px;
+  background: ${(props) => props.$isPinned ? theme.colors.warning[500] : "transparent"};
+  border-radius: 2px;
+  transition: all ${theme.transitions.normal};
+`;
+styled.div`
+  font-size: 32px;
+  line-height: 1;
+  text-align: center;
+`;
+const ActionButtons = styled(Flex)`
+  opacity: 1;
+  transition: all ${theme.transitions.fast};
+  gap: ${theme.spacing.xs};
+  justify-content: flex-end;
+`;
+const FloatingEmoji = styled.div`
+  position: absolute;
+  bottom: 40px;
+  right: 40px;
+  font-size: 72px;
+  opacity: 0.08;
+  animation: ${float} 4s ease-in-out infinite;
+`;
+const FilterBar = styled(Flex)`
+  background: ${theme.colors.neutral[0]};
+  padding: ${theme.spacing.md} ${theme.spacing.lg};
+  border-radius: ${theme.borderRadius.lg};
+  margin-bottom: ${theme.spacing.lg};
+  box-shadow: ${theme.shadows.sm};
+  border: 1px solid ${theme.colors.neutral[200]};
+  gap: ${theme.spacing.md};
+  align-items: center;
+`;
+const FilterSelect = styled(Box)`
+  min-width: 120px;
+`;
+const SearchInputWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+const SearchIcon = styled(Search)`
+  position: absolute;
+  left: 12px;
+  width: 16px;
+  height: 16px;
+  color: ${theme.colors.neutral[600]};
+  pointer-events: none;
+`;
+const StyledSearchInput = styled.input`
+  width: 100%;
+  padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} 36px;
+  border: 1px solid ${theme.colors.neutral[200]};
+  border-radius: ${theme.borderRadius.md};
+  font-size: 0.875rem;
+  transition: all ${theme.transitions.fast};
+  background: ${theme.colors.neutral[0]};
+  color: ${theme.colors.neutral[800]};
+  
+  &:focus {
+    outline: none;
+    border-color: ${theme.colors.primary[500]};
+    box-shadow: 0 0 0 3px ${theme.colors.primary[100]};
+  }
+  
+  &::placeholder {
+    color: ${theme.colors.neutral[600]};
+  }
+`;
+const HomePageModern = () => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const { get, post, del } = useFetchClient();
+  const [currentUser, setCurrentUser] = useState(null);
+  const [bookmarks, setBookmarks] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [editingBookmark, setEditingBookmark] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterType, setFilterType] = useState("all");
+  const [entriesPerPage, setEntriesPerPage] = useState("10");
+  const [availableRoles, setAvailableRoles] = useState([]);
+  const [availableUsers, setAvailableUsers] = useState([]);
+  useEffect(() => {
+    fetchBookmarks();
+    fetchCurrentUser();
+    fetchRoles();
+    fetchUsers();
+  }, []);
+  const fetchRoles = async () => {
+    try {
+      const response = await get(`/${pluginId}/roles`);
+      const roles = response.data?.data?.data || response.data?.data || [];
+      console.log("[Magic-Mark] Available roles in HomePage:", roles);
+      setAvailableRoles(roles);
+    } catch (error) {
+      console.error("[Magic-Mark] Error fetching roles:", error);
+    }
+  };
+  const fetchUsers = async () => {
+    try {
+      const response = await get("/admin/users?pageSize=100&page=1&sort=firstname");
+      console.log("[Magic-Mark] Admin users API response:", response);
+      const allUsers = response.data?.data?.results || response.data?.results || [];
+      console.log("[Magic-Mark] All users from API in HomePage:", allUsers);
+      const users = currentUser && Array.isArray(allUsers) ? allUsers.filter((u) => u.id !== currentUser.id) : allUsers;
+      console.log("[Magic-Mark] Available users in HomePage:", users);
+      setAvailableUsers(users);
+    } catch (error) {
+      console.error("[Magic-Mark] Error fetching users from admin API:", error);
+      try {
+        const response = await get(`/${pluginId}/users`);
+        const users = response.data?.data?.data || response.data?.data || [];
+        setAvailableUsers(users);
+      } catch (fallbackError) {
+        console.warn("[Magic-Mark] Both user endpoints failed");
+        setAvailableUsers([]);
+      }
+    }
+  };
+  const fetchCurrentUser = async () => {
+    try {
+      const response = await get("/admin/users/me");
+      console.log("[Magic-Mark] Current user response:", response);
+      const userData = response.data?.data || response.data || response;
+      setCurrentUser(userData);
+      console.log("[Magic-Mark] Current user set to:", userData);
+    } catch (error) {
+      console.error("[Magic-Mark] Error fetching current user:", error);
+    }
+  };
+  const fetchBookmarks = async () => {
+    setLoading(true);
+    try {
+      const { data } = await get(`/${pluginId}/bookmarks`);
+      console.log("[Magic-Mark HomePage] Bookmarks loaded:", data);
+      console.log("[Magic-Mark HomePage] Current user state:", currentUser);
+      setBookmarks(data.data || []);
+    } catch (error) {
+      console.error("[Magic-Mark HomePage] Error fetching bookmarks:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleDelete = async (id) => {
+    if (!confirm(formatMessage({
+      id: `${pluginId}.confirm.delete`,
+      defaultMessage: "Are you sure you want to delete this bookmark?"
+    }))) {
+      return;
+    }
+    try {
+      await del(`/${pluginId}/bookmarks/${id}`);
+      console.log("[Magic-Mark HomePage] Bookmark deleted:", id);
+      fetchBookmarks();
+    } catch (error) {
+      console.error("[Magic-Mark HomePage] Error deleting bookmark:", error);
+    }
+  };
+  const handlePin = async (bookmark) => {
+    try {
+      await post(`/${pluginId}/bookmarks/${bookmark.id}/pin`, {
+        isPinned: !bookmark.isPinned
+      });
+      console.log("[Magic-Mark HomePage] Bookmark pinned:", bookmark.id);
+      fetchBookmarks();
+    } catch (error) {
+      console.error("[Magic-Mark HomePage] Error pinning bookmark:", error);
+    }
+  };
+  const handleEdit = (bookmark) => {
+    setEditingBookmark(bookmark);
+    setShowModal(true);
+  };
+  const handleModalClose = () => {
+    setShowModal(false);
+    setEditingBookmark(null);
+  };
+  const handleModalSuccess = () => {
+    setShowModal(false);
+    setEditingBookmark(null);
+    fetchBookmarks();
+  };
+  const handleBookmarkClick = (bookmark) => {
+    if (bookmark.path) {
+      let path = bookmark.path;
+      if (path.startsWith("/admin/")) {
+        path = path.substring(6);
+      }
+      const url = bookmark.query ? `${path}?${bookmark.query}` : path;
+      console.log("[HomePage] Navigating to:", url);
+      navigate(url);
+    }
+  };
+  const filteredBookmarks = bookmarks.filter((bookmark) => {
+    if (filterType === "pinned" && !bookmark.isPinned) return false;
+    if (filterType === "unpinned" && bookmark.isPinned) return false;
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    return bookmark.name.toLowerCase().includes(query) || bookmark.description && bookmark.description.toLowerCase().includes(query) || bookmark.path.toLowerCase().includes(query);
+  }).slice(0, parseInt(entriesPerPage));
+  const pinnedBookmarks = bookmarks.filter((b) => b.isPinned);
+  const myBookmarks = bookmarks.filter((b) => b.createdBy?.id === currentUser?.id);
+  const sharedWithMe = bookmarks.filter((b) => b.createdBy?.id !== currentUser?.id && b.createdBy?.id);
+  return /* @__PURE__ */ jsxs(Container, { padding: 8, children: [
+    /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderContent, { direction: "column", alignItems: "flex-start", gap: 2, children: [
+      /* @__PURE__ */ jsxs(Title, { children: [
+        /* @__PURE__ */ jsx(Sparkle, {}),
+        " MagicMark"
+      ] }),
+      /* @__PURE__ */ jsx(Subtitle, { children: "Save filtered views and navigate with one click" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(StatsGrid, { children: [
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.1s", $color: theme.colors.primary[500], children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsx(User, {}) }),
+        /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: myBookmarks.length }),
+        /* @__PURE__ */ jsx(StatLabel, { children: "My Bookmarks" })
+      ] }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.2s", $color: theme.colors.success[500], children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsx(Sparkle, {}) }),
+        /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: sharedWithMe.length }),
+        /* @__PURE__ */ jsx(StatLabel, { children: "Shared with Me" })
+      ] }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.3s", $color: theme.colors.warning[500], children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.warning[100], $color: theme.colors.warning[600], children: /* @__PURE__ */ jsx(Pin, {}) }),
+        /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: pinnedBookmarks.length }),
+        /* @__PURE__ */ jsx(StatLabel, { children: "Pinned" })
+      ] }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.4s", $color: theme.colors.neutral[600], children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.neutral[100], $color: theme.colors.neutral[600], children: /* @__PURE__ */ jsx(Link, {}) }),
+        /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: bookmarks.length }),
+        /* @__PURE__ */ jsx(StatLabel, { children: "Total Available" })
+      ] })
+    ] }),
+    loading && /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading bookmarks..." }) }),
+    !loading && sharedWithMe.length > 0 && /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Box, { style: {
+      padding: theme.spacing.lg,
+      background: theme.colors.primary[50],
+      borderRadius: theme.borderRadius.lg,
+      border: `1px solid ${theme.colors.primary[200]}`
+    }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { marginBottom: theme.spacing.sm, color: theme.colors.primary[700] }, children: "🤝 Shared with You" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { color: theme.colors.primary[600] }, children: [
+        sharedWithMe.length,
+        " bookmark",
+        sharedWithMe.length > 1 ? "s" : "",
+        " have been shared with you"
+      ] }),
+      /* @__PURE__ */ jsx(Box, { marginTop: 2, children: [...new Map(sharedWithMe.map((b) => [b.createdBy?.id, b.createdBy])).values()].map((creator) => {
+        const creatorBookmarks = sharedWithMe.filter((b) => b.createdBy?.id === creator?.id);
+        return creator && /* @__PURE__ */ jsxs(Flex, { alignItems: "center", marginTop: 1, children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "pi", fontWeight: "semiBold", children: [
+            creator.firstname || "Unknown",
+            " ",
+            creator.lastname || "",
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "pi", marginLeft: 1, children: [
+            creatorBookmarks.length,
+            " bookmark",
+            creatorBookmarks.length > 1 ? "s" : ""
+          ] })
+        ] }, creator.id);
+      }) })
+    ] }) }),
+    !loading && bookmarks.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Box, { style: { marginBottom: theme.spacing.md }, children: /* @__PURE__ */ jsx(Typography, { variant: "delta", style: { marginBottom: theme.spacing.md, color: theme.colors.neutral[700] }, children: "🔖 All Available Bookmarks" }) }),
+      /* @__PURE__ */ jsxs(FilterBar, { children: [
+        /* @__PURE__ */ jsxs(SearchInputWrapper, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(SearchIcon, {}),
+          /* @__PURE__ */ jsx(
+            StyledSearchInput,
+            {
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              placeholder: "Search by name, description...",
+              type: "text"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FilterSelect, { children: /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: filterType,
+            onChange: setFilterType,
+            placeholder: "Filter",
+            size: "S",
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "all", children: "Show All" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "pinned", children: "Pinned Only" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "unpinned", children: "Unpinned Only" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FilterSelect, { children: /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: entriesPerPage,
+            onChange: setEntriesPerPage,
+            placeholder: "Entries",
+            size: "S",
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "10", children: "10 entries" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "25", children: "25 entries" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "50", children: "50 entries" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "100", children: "100 entries" })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(DataTable, { children: /* @__PURE__ */ jsxs(StyledTable, { children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { children: formatMessage({
+            id: `${pluginId}.table.name`,
+            defaultMessage: "Name"
+          }) }),
+          /* @__PURE__ */ jsx(Th, { children: formatMessage({
+            id: `${pluginId}.table.description`,
+            defaultMessage: "Description"
+          }) }),
+          /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: "Actions" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Tbody, { children: filteredBookmarks.map((bookmark) => /* @__PURE__ */ jsxs(Tr, { style: {
+          background: bookmark.isPinned ? theme.colors.warning[50] : "transparent"
+        }, children: [
+          /* @__PURE__ */ jsx(Td, { onClick: () => handleBookmarkClick(bookmark), style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                style: {
+                  width: "36px",
+                  height: "36px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                  fontSize: "24px"
+                },
+                children: bookmark.emoji
+              }
+            ),
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 0, children: [
+              /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", ellipsis: true, style: { fontSize: "1.125rem", lineHeight: "1.4" }, children: bookmark.name }),
+              /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
+                bookmark.createdBy?.id && currentUser?.id && bookmark.createdBy.id === currentUser.id ? /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.primary[600], fontWeight: 500 }, children: "• My Bookmark" }) : /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.neutral[600] }, children: [
+                  "• Shared by ",
+                  bookmark.createdBy?.firstname || "Unknown"
+                ] }),
+                bookmark.isPublic && /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.success[600], marginLeft: "8px" }, children: "• Public" }),
+                bookmark.sharedWithRoles && bookmark.sharedWithRoles.length > 0 && !bookmark.isPublic && /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.warning[600], marginLeft: "8px" }, children: [
+                  "• Roles: ",
+                  bookmark.sharedWithRoles.map((roleId) => {
+                    const role = availableRoles.find((r) => r.id === roleId);
+                    return role?.name || `Role ${roleId}`;
+                  }).join(", ")
+                ] }),
+                bookmark.sharedWithUsers && bookmark.sharedWithUsers.length > 0 && !bookmark.isPublic && /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme.colors.primary[600], marginLeft: "8px" }, children: [
+                  "• Users: ",
+                  bookmark.sharedWithUsers.map((userId) => {
+                    const user = availableUsers.find((u) => u.id === userId);
+                    return user ? `${user.firstname} ${user.lastname}` : `User ${userId}`;
+                  }).join(", ")
+                ] })
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Td, { onClick: () => handleBookmarkClick(bookmark), style: { cursor: "pointer" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, style: { fontSize: "1rem", lineHeight: "1.6", fontWeight: 400 }, children: bookmark.description || "-" }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(
+            ActionButtons,
+            {
+              className: "action-buttons",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: bookmark.isPinned ? "secondary" : "ghost",
+                    size: "S",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handlePin(bookmark);
+                    },
+                    style: {
+                      color: bookmark.isPinned ? theme.colors.warning[600] : "inherit",
+                      background: bookmark.isPinned ? theme.colors.warning[100] : "transparent"
+                    },
+                    children: /* @__PURE__ */ jsx(Pin, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "S",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleBookmarkClick(bookmark);
+                    },
+                    children: /* @__PURE__ */ jsx(Eye, {})
+                  }
+                ),
+                bookmark.createdBy && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "S",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleEdit(bookmark);
+                    },
+                    disabled: bookmark.createdBy?.id !== currentUser?.id,
+                    children: /* @__PURE__ */ jsx(Pencil, {})
+                  }
+                ),
+                bookmark.createdBy?.id && currentUser?.id && bookmark.createdBy.id === currentUser.id && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "S",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleDelete(bookmark.id);
+                    },
+                    children: /* @__PURE__ */ jsx(Trash, {})
+                  }
+                )
+              ]
+            }
+          ) })
+        ] }, bookmark.id)) })
+      ] }) })
+    ] }),
+    !loading && bookmarks.length === 0 && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: {
+          background: theme.colors.neutral[0],
+          borderRadius: theme.borderRadius.xl,
+          border: `2px dashed ${theme.colors.neutral[200]}`,
+          padding: theme.spacing["3xl"],
+          textAlign: "center",
+          position: "relative",
+          overflow: "hidden",
+          minHeight: "400px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: {
+                content: "",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                background: `linear-gradient(135deg, ${theme.colors.primary[50]} 0%, ${theme.colors.secondary[50]} 100%)`,
+                opacity: 0.3,
+                zIndex: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(FloatingEmoji, { children: "✨" }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 6, style: { position: "relative", zIndex: 1 }, children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                style: {
+                  width: "120px",
+                  height: "120px",
+                  borderRadius: "50%",
+                  background: `linear-gradient(135deg, ${theme.colors.primary[100]} 0%, ${theme.colors.secondary[100]} 100%)`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  boxShadow: theme.shadows.xl
+                },
+                children: /* @__PURE__ */ jsx(Sparkle, { style: { width: "60px", height: "60px", color: theme.colors.primary[600] } })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "alpha",
+                style: {
+                  fontSize: "1.75rem",
+                  fontWeight: "700",
+                  color: theme.colors.neutral[800],
+                  marginBottom: "8px"
+                },
+                children: "No bookmarks yet"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "omega",
+                textColor: "neutral600",
+                style: {
+                  fontSize: "1rem",
+                  maxWidth: "500px",
+                  lineHeight: "1.6"
+                },
+                children: [
+                  "Navigate to any Content Manager view, apply filters, and click ",
+                  /* @__PURE__ */ jsx("strong", { children: '"Save Bookmark"' }),
+                  " to create quick access shortcuts"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    showModal && /* @__PURE__ */ jsx(
+      CreateEditModal,
+      {
+        bookmark: editingBookmark,
+        pluginId,
+        onClose: handleModalClose,
+        onSuccess: handleModalSuccess,
+        currentPath: "",
+        currentQuery: ""
+      }
+    )
+  ] });
+};
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+const slideUp = keyframes`
+  from { 
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(4, 28, 47, 0.85);
+  backdrop-filter: blur(8px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${fadeIn} 0.3s ease-out;
+  padding: 20px;
+`;
+const ModalContent = styled(Box)`
+  background: white;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 580px;
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+  animation: ${slideUp} 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+`;
+const GradientHeader = styled(Box)`
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 32px 40px;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+  }
+`;
+const IconWrapper = styled.div`
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  backdrop-filter: blur(10px);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+
+  svg {
+    width: 36px;
+    height: 36px;
+    color: white;
+  }
+`;
+const CloseButton = styled.button`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  z-index: 10;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: white;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+const ToggleButton = styled.button`
+  background: none;
+  border: none;
+  color: #667eea;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 8px 0;
+  text-decoration: underline;
+  transition: color 0.2s;
+  
+  &:hover {
+    color: #764ba2;
+  }
+`;
+const LicenseGuard = ({ children }) => {
+  const { get, post } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const navigate = useNavigate();
+  const [isChecking, setIsChecking] = useState(true);
+  const [needsLicense, setNeedsLicense] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [useExistingKey, setUseExistingKey] = useState(false);
+  const [useAutoCreate, setUseAutoCreate] = useState(true);
+  const [existingLicenseKey, setExistingLicenseKey] = useState("");
+  const [existingEmail, setExistingEmail] = useState("");
+  const [adminUser, setAdminUser] = useState(null);
+  const [formData, setFormData] = useState({
+    email: "",
+    firstName: "",
+    lastName: ""
+  });
+  useEffect(() => {
+    checkLicenseStatus();
+    fetchAdminUser();
+  }, []);
+  const fetchAdminUser = async () => {
+    try {
+      const response = await get("/admin/users/me");
+      console.log("Admin user response:", response);
+      const userData = response.data?.data || response.data;
+      console.log("User data extracted:", userData);
+      if (userData) {
+        setAdminUser(userData);
+        setFormData({
+          email: userData.email || "",
+          firstName: userData.firstname || "",
+          lastName: userData.lastname || ""
+        });
+        console.log("Admin user set:", {
+          email: userData.email,
+          firstname: userData.firstname,
+          lastname: userData.lastname
+        });
+      }
+    } catch (error) {
+      console.error("Error fetching admin user:", error);
+    }
+  };
+  const checkLicenseStatus = async () => {
+    setIsChecking(true);
+    try {
+      const response = await get("/magic-mark/license/status");
+      if (response.data.valid) {
+        setNeedsLicense(false);
+      } else {
+        setNeedsLicense(true);
+      }
+    } catch (error) {
+      console.error("Error checking license:", error);
+      setNeedsLicense(true);
+    } finally {
+      setIsChecking(false);
+    }
+  };
+  const handleAutoCreateLicense = async (e) => {
+    e.preventDefault();
+    setIsCreating(true);
+    try {
+      console.log("Auto-creating license with admin user data...");
+      const response = await post("/magic-mark/license/auto-create", {});
+      if (response.data && response.data.success) {
+        toggleNotification({
+          type: "success",
+          message: `License automatically created! Reloading...`
+        });
+        setNeedsLicense(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        throw new Error("Failed to auto-create license");
+      }
+    } catch (error) {
+      console.error("Error auto-creating license:", error);
+      toggleNotification({
+        type: "danger",
+        message: error?.response?.data?.error?.message || "Failed to auto-create license. Try manual creation."
+      });
+      setIsCreating(false);
+      setUseAutoCreate(false);
+    }
+  };
+  const handleCreateLicense = async (e) => {
+    e.preventDefault();
+    if (!formData.email || !formData.firstName || !formData.lastName) {
+      toggleNotification({
+        type: "warning",
+        message: "Please fill in all fields"
+      });
+      return;
+    }
+    setIsCreating(true);
+    try {
+      console.log("Creating license with data:", formData);
+      const response = await post("/magic-mark/license/create", formData);
+      console.log("License creation response:", response);
+      if (response.data && response.data.success) {
+        toggleNotification({
+          type: "success",
+          message: `License created successfully! Reloading...`
+        });
+        setNeedsLicense(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        throw new Error("Failed to create license");
+      }
+    } catch (error) {
+      console.error("Error creating license:", error);
+      toggleNotification({
+        type: "danger",
+        message: error?.response?.data?.error?.message || "Failed to create license. Please try again."
+      });
+      setIsCreating(false);
+    }
+  };
+  const handleValidateExistingKey = async (e) => {
+    e.preventDefault();
+    if (!existingLicenseKey.trim() || !existingEmail.trim()) {
+      toggleNotification({
+        type: "warning",
+        message: "Please enter both license key and email address"
+      });
+      return;
+    }
+    setIsCreating(true);
+    try {
+      console.log("Validating existing license key...");
+      const pluginStore = await post("/magic-mark/license/store-key", {
+        licenseKey: existingLicenseKey.trim(),
+        email: existingEmail.trim()
+      });
+      if (pluginStore.data && pluginStore.data.success) {
+        toggleNotification({
+          type: "success",
+          message: "License key validated successfully! Reloading..."
+        });
+        setNeedsLicense(false);
+        setTimeout(() => {
+          window.location.reload();
+        }, 500);
+      } else {
+        throw new Error("Invalid license key or email");
+      }
+    } catch (error) {
+      console.error("Error validating license key:", error);
+      toggleNotification({
+        type: "danger",
+        message: error?.response?.data?.error?.message || "Invalid license key or email address. Please check and try again."
+      });
+      setIsCreating(false);
+    }
+  };
+  const handleClose = () => {
+    navigate("/content-manager");
+  };
+  if (isChecking) {
+    return /* @__PURE__ */ jsx(Box, { padding: 8, style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Loader, { children: "Checking license..." }) });
+  }
+  if (needsLicense) {
+    return /* @__PURE__ */ jsx(ModalOverlay, { children: /* @__PURE__ */ jsxs(ModalContent, { children: [
+      /* @__PURE__ */ jsxs(GradientHeader, { children: [
+        /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose, type: "button", children: /* @__PURE__ */ jsx(Cross, {}) }),
+        /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Key, {}) }),
+        /* @__PURE__ */ jsxs(Box, { style: { textAlign: "center", position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "alpha",
+              style: {
+                color: "white",
+                fontSize: "24px",
+                fontWeight: "700",
+                marginBottom: "12px",
+                display: "block"
+              },
+              children: "🔐 Activate MagicMark Plugin"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "epsilon",
+              style: {
+                color: "rgba(255, 255, 255, 0.9)",
+                fontSize: "14px",
+                display: "block"
+              },
+              children: useExistingKey ? "Enter your existing license key" : "Create a license to start using the plugin"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("form", { onSubmit: useExistingKey ? handleValidateExistingKey : useAutoCreate ? handleAutoCreateLicense : handleCreateLicense, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 6,
+          paddingLeft: 8,
+          paddingRight: 8,
+          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 5, style: { width: "100%" }, children: [
+            /* @__PURE__ */ jsxs(Box, { style: { textAlign: "center", width: "100%" }, children: [
+              !useExistingKey && /* @__PURE__ */ jsx(
+                ToggleButton,
+                {
+                  type: "button",
+                  onClick: () => setUseAutoCreate(!useAutoCreate),
+                  disabled: isCreating,
+                  style: { marginBottom: "8px", display: "block", margin: "0 auto" },
+                  children: useAutoCreate ? "→ Manual entry" : "← Auto-create with my account"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToggleButton,
+                {
+                  type: "button",
+                  onClick: () => {
+                    setUseExistingKey(!useExistingKey);
+                    if (!useExistingKey) setUseAutoCreate(false);
+                  },
+                  disabled: isCreating,
+                  children: useExistingKey ? "← Create new license" : "Have a license key? →"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                background: "primary100",
+                padding: 4,
+                style: {
+                  borderRadius: "8px",
+                  border: "2px solid #BAE6FD",
+                  width: "100%"
+                },
+                children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { fontSize: "13px", lineHeight: "1.6" }, children: useExistingKey ? "🔑 Enter your email and license key to activate." : useAutoCreate && adminUser && adminUser.email ? `✨ Click "Activate" to auto-create a license with your account (${adminUser.email})` : useAutoCreate ? '✨ Click "Activate" to auto-create a license with your admin account' : "💡 A license will be created with the details below." })
+              }
+            ),
+            useExistingKey ? (
+              // Existing License Key Input
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "Email Address *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "admin@example.com",
+                      type: "email",
+                      value: existingEmail,
+                      onChange: (e) => setExistingEmail(e.target.value),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "11px", marginTop: "4px" }, children: "Enter the email address associated with this license" })
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "License Key *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "67C5-40D2-7695-718C",
+                      value: existingLicenseKey,
+                      onChange: (e) => setExistingLicenseKey(e.target.value),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: { fontSize: "11px", marginTop: "4px" }, children: "Enter the license key in the format: XXXX-XXXX-XXXX-XXXX" })
+                ] })
+              ] })
+            ) : useAutoCreate && adminUser ? (
+              // Auto-create mode - Show user info
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  background: "success100",
+                  padding: 5,
+                  style: {
+                    borderRadius: "8px",
+                    border: "2px solid #DCFCE7",
+                    textAlign: "center"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", style: { marginBottom: "12px", display: "block" }, children: "Ready to activate with your account:" }),
+                    /* @__PURE__ */ jsxs(Typography, { variant: "pi", style: { marginBottom: "4px", display: "block" }, children: [
+                      "👤 ",
+                      adminUser.firstname || "Admin",
+                      " ",
+                      adminUser.lastname || "User"
+                    ] }),
+                    /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+                      "📧 ",
+                      adminUser.email || "Loading..."
+                    ] })
+                  ]
+                }
+              )
+            ) : (
+              // Manual Create License Fields
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "Email Address *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "admin@example.com",
+                      type: "email",
+                      value: formData.email,
+                      onChange: (e) => setFormData({ ...formData, email: e.target.value }),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "First Name *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "John",
+                      value: formData.firstName,
+                      onChange: (e) => setFormData({ ...formData, firstName: e.target.value }),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Box, { style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "pi",
+                      fontWeight: "bold",
+                      style: { marginBottom: "8px", display: "block" },
+                      children: "Last Name *"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      placeholder: "Doe",
+                      value: formData.lastName,
+                      onChange: (e) => setFormData({ ...formData, lastName: e.target.value }),
+                      required: true,
+                      disabled: isCreating
+                    }
+                  )
+                ] })
+              ] })
+            ),
+            /* @__PURE__ */ jsx(Flex, { gap: 3, justifyContent: "center", style: { marginTop: "16px" }, children: useExistingKey ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                size: "L",
+                startIcon: /* @__PURE__ */ jsx(Check, {}),
+                loading: isCreating,
+                disabled: isCreating || !existingLicenseKey.trim() || !existingEmail.trim(),
+                style: {
+                  background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                  color: "white",
+                  fontWeight: "600",
+                  border: "none",
+                  boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)"
+                },
+                children: "Validate License"
+              }
+            ) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                size: "L",
+                startIcon: /* @__PURE__ */ jsx(Check, {}),
+                loading: isCreating,
+                disabled: isCreating || !useAutoCreate && (!formData.email || !formData.firstName || !formData.lastName),
+                style: {
+                  background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+                  color: "white",
+                  fontWeight: "600",
+                  border: "none",
+                  boxShadow: "0 4px 12px rgba(102, 126, 234, 0.4)"
+                },
+                children: useAutoCreate ? "Activate License" : "Create License"
+              }
+            ) })
+          ] })
+        }
+      ) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+const App = () => {
+  return /* @__PURE__ */ jsx(LicenseGuard, { children: /* @__PURE__ */ jsx(HomePageModern, {}) });
+};
+export {
+  App as default
+};