@strapi-community/plugin-io 5.0.6 → 5.1.0

package/dist/_chunks/{SettingsPage-DBIu309c.mjs → SettingsPage-DMbMGU6J.mjs}

@@ -5,7 +5,7 @@ import { Download, Upload, Check } from "@strapi/icons";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import styled from "styled-components";
-import { P as PLUGIN_ID } from "./index-DLXtrAtk.mjs";
+import { P as PLUGIN_ID } from "./index-CzvX8YTe.mjs";
 const ResponsiveMain = styled(Main)`
   & > div {
     padding: 16px !important;
@@ -78,6 +78,23 @@ const ResponsiveButtonGroup = styled(Flex)`
     }
   }
 `;
+const ToggleCard = styled(Box)`
+  padding: 16px;
+  background: ${({ $active, $color }) => $active ? `${$color}15` : "#ffffff"};
+  border-radius: 8px;
+  cursor: pointer;
+  border: 2px solid ${({ $active, $color }) => $active ? $color : "#dcdce4"};
+  transition: all 0.2s ease;
+  height: 100%;
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    border-color: ${({ $color }) => $color};
+    background: ${({ $color }) => `${$color}08`};
+  }
+`;
 const InputWrapper = styled.div`
   width: 100%;
   
@@ -684,21 +701,12 @@ const SettingsPage = () => {
         /* @__PURE__ */ jsx(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: t("security.title", "Security Settings") }),
         /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("security.description", "Configure authentication and rate limiting") })
       ] }),
-      /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+      /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
         /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(
-          Box,
+          ToggleCard,
           {
-            padding: 4,
-            background: settings.security?.requireAuthentication ? "success100" : "neutral0",
-            hasRadius: true,
-            style: {
-              cursor: "pointer",
-              border: `2px solid ${settings.security?.requireAuthentication ? "#5cb176" : "#dcdce4"}`,
-              transition: "all 0.2s ease",
-              minHeight: "110px",
-              display: "flex",
-              alignItems: "center"
-            },
+            $active: settings.security?.requireAuthentication,
+            $color: "#5cb176",
             onClick: () => updateSecurity("requireAuthentication", !settings.security?.requireAuthentication),
             children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsx(
@@ -709,34 +717,17 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "omega",
-                    fontWeight: settings.security?.requireAuthentication ? "bold" : "normal",
-                    textColor: settings.security?.requireAuthentication ? "success700" : "neutral800",
-                    children: t("security.requireAuth", "Require Authentication")
-                  }
-                ),
-                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.security?.requireAuthentication ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: t("security.requireAuth", "Require Authentication") }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: settings.security?.requireAuthentication ? "Active" : "Inactive" })
               ] })
             ] })
           }
         ) }),
-        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsx(
-          Box,
+        /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(
+          ToggleCard,
           {
-            padding: 4,
-            background: settings.security?.rateLimiting?.enabled ? "warning100" : "neutral0",
-            hasRadius: true,
-            style: {
-              cursor: "pointer",
-              border: `2px solid ${settings.security?.rateLimiting?.enabled ? "#f59e0b" : "#dcdce4"}`,
-              transition: "all 0.2s ease",
-              minHeight: "110px",
-              display: "flex",
-              alignItems: "center"
-            },
+            $active: settings.security?.rateLimiting?.enabled,
+            $color: "#f59e0b",
             onClick: () => updateSecurity("rateLimiting", { ...settings.security?.rateLimiting, enabled: !settings.security?.rateLimiting?.enabled }),
             children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsx(
@@ -747,49 +738,34 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "omega",
-                    fontWeight: settings.security?.rateLimiting?.enabled ? "bold" : "normal",
-                    textColor: settings.security?.rateLimiting?.enabled ? "warning700" : "neutral800",
-                    children: t("security.rateLimiting", "Enable Rate Limiting")
-                  }
-                ),
-                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.security?.rateLimiting?.enabled ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: t("security.rateLimiting", "Enable Rate Limiting") }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: settings.security?.rateLimiting?.enabled ? "Active" : "Inactive" })
               ] })
             ] })
           }
-        ) }),
-        settings.security?.rateLimiting?.enabled && /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(
+        ) })
+      ] }),
+      settings.security?.rateLimiting?.enabled && /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(ResponsiveField, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("security.maxEventsPerSecond", "Max Events/Second") }),
+        /* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(
           NumberInput,
           {
-            label: t("security.maxEventsPerSecond", "Max Events/Second"),
             value: settings.security?.rateLimiting?.maxEventsPerSecond || 10,
             onValueChange: (value) => updateSecurity("rateLimiting", { ...settings.security?.rateLimiting, maxEventsPerSecond: value })
           }
         ) })
-      ] }),
+      ] }) }) }) }),
       /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(Divider, {}) }),
       /* @__PURE__ */ jsxs(ResponsiveSection, { children: [
-        /* @__PURE__ */ jsx(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: t("events.title", "Event Configuration") }),
-        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("events.description", "Global event settings") })
+        /* @__PURE__ */ jsx(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: t("events.title", "Real-time Events") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("events.description", "Configure which events are sent for which content types") })
       ] }),
-      /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+      /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
         /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsx(
-          Box,
+          ToggleCard,
           {
-            padding: 4,
-            background: settings.events?.customEventNames ? "primary100" : "neutral0",
-            hasRadius: true,
-            style: {
-              cursor: "pointer",
-              border: `2px solid ${settings.events?.customEventNames ? "#4945ff" : "#dcdce4"}`,
-              transition: "all 0.2s ease",
-              minHeight: "110px",
-              display: "flex",
-              alignItems: "center"
-            },
+            $active: settings.events?.customEventNames,
+            $color: "#4945ff",
             onClick: () => updateEvents("customEventNames", !settings.events?.customEventNames),
             children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsx(
@@ -800,34 +776,17 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "omega",
-                    fontWeight: settings.events?.customEventNames ? "bold" : "normal",
-                    textColor: settings.events?.customEventNames ? "primary700" : "neutral800",
-                    children: t("events.customNames", "Use Custom Event Names")
-                  }
-                ),
-                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.events?.customEventNames ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: t("events.customNames", "Use Custom Event Names") }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: settings.events?.customEventNames ? "Active" : "Inactive" })
               ] })
             ] })
           }
         ) }),
         /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsx(
-          Box,
+          ToggleCard,
           {
-            padding: 4,
-            background: settings.events?.includeRelations ? "primary100" : "neutral0",
-            hasRadius: true,
-            style: {
-              cursor: "pointer",
-              border: `2px solid ${settings.events?.includeRelations ? "#4945ff" : "#dcdce4"}`,
-              transition: "all 0.2s ease",
-              minHeight: "110px",
-              display: "flex",
-              alignItems: "center"
-            },
+            $active: settings.events?.includeRelations,
+            $color: "#4945ff",
             onClick: () => updateEvents("includeRelations", !settings.events?.includeRelations),
             children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsx(
@@ -838,34 +797,17 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "omega",
-                    fontWeight: settings.events?.includeRelations ? "bold" : "normal",
-                    textColor: settings.events?.includeRelations ? "primary700" : "neutral800",
-                    children: t("events.includeRelations", "Include Relations")
-                  }
-                ),
-                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.events?.includeRelations ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: t("events.includeRelations", "Include Relations") }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: settings.events?.includeRelations ? "Active" : "Inactive" })
               ] })
             ] })
           }
         ) }),
         /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsx(
-          Box,
+          ToggleCard,
           {
-            padding: 4,
-            background: settings.events?.onlyPublished ? "primary100" : "neutral0",
-            hasRadius: true,
-            style: {
-              cursor: "pointer",
-              border: `2px solid ${settings.events?.onlyPublished ? "#4945ff" : "#dcdce4"}`,
-              transition: "all 0.2s ease",
-              minHeight: "110px",
-              display: "flex",
-              alignItems: "center"
-            },
+            $active: settings.events?.onlyPublished,
+            $color: "#4945ff",
             onClick: () => updateEvents("onlyPublished", !settings.events?.onlyPublished),
             children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsx(
@@ -876,16 +818,8 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "omega",
-                    fontWeight: settings.events?.onlyPublished ? "bold" : "normal",
-                    textColor: settings.events?.onlyPublished ? "primary700" : "neutral800",
-                    children: t("events.onlyPublished", "Only Published Content")
-                  }
-                ),
-                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.events?.onlyPublished ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: t("events.onlyPublished", "Only Published Content") }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: settings.events?.onlyPublished ? "Active" : "Inactive" })
               ] })
             ] })
           }
@@ -1037,7 +971,7 @@ const SettingsPage = () => {
                   /* @__PURE__ */ jsx(Grid.Item, { col: 2, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("events.delete", "DELETE") }) }) }),
                   /* @__PURE__ */ jsx(Grid.Item, { col: 2, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxs(Typography, { variant: "sigma", textColor: "neutral600", children: [
                     t("entitySubscriptions.allow", "ENTITIES"),
-                    " 🆕"
+                    " [NEW]"
                   ] }) }) })
                 ] }) }),
                 availableContentTypes.map((ct, idx) => {
@@ -1273,7 +1207,7 @@ const SettingsPage = () => {
             /* @__PURE__ */ jsxs(Badge, { children: [
               "/",
               ns,
-              config.requireAuth && /* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: "🔒" }),
+              config.requireAuth && /* @__PURE__ */ jsx("span", { style: { marginLeft: "4px" }, children: "[AUTH]" }),
               /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -1295,7 +1229,7 @@ const SettingsPage = () => {
         /* @__PURE__ */ jsxs(Box, { children: [
           /* @__PURE__ */ jsxs(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: [
             t("entitySubscriptions.title", "Entity Subscriptions"),
-            " 🆕"
+            " [NEW]"
           ] }),
           /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("entitySubscriptions.description", "Allow clients to subscribe to specific entities") })
         ] }),
@@ -1340,63 +1274,231 @@ const SettingsPage = () => {
         ] }) })
       ] }) }),
       /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(Divider, {}) }),
+      /* @__PURE__ */ jsx(ResponsiveSection, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: [
+            t("presence.title", "Presence System"),
+            " [NEW]"
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("presence.description", "Real-time collaboration awareness - see who is editing what") })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            checked: settings.presence?.enabled ?? true,
+            onChange: (e) => updateSettings((prev) => ({
+              ...prev,
+              presence: { ...prev.presence, enabled: e.target.checked }
+            }))
+          }
+        )
+      ] }) }),
+      settings.presence?.enabled !== false && /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("presence.heartbeat", "Heartbeat Interval (ms)") }),
+          /* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: settings.presence?.heartbeatInterval ?? 3e4,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                presence: { ...prev.presence, heartbeatInterval: value }
+              }))
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("presence.staleTimeout", "Stale Timeout (ms)") }),
+          /* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: settings.presence?.staleTimeout ?? 6e4,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                presence: { ...prev.presence, staleTimeout: value }
+              }))
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", paddingTop: 6, children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: settings.presence?.showTypingIndicator ?? true,
+              onCheckedChange: (checked) => updateSettings((prev) => ({
+                ...prev,
+                presence: { ...prev.presence, showTypingIndicator: checked }
+              }))
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: t("presence.typing", "Show Typing Indicators") })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(Divider, {}) }),
+      /* @__PURE__ */ jsx(ResponsiveSection, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: [
+            t("livePreview.title", "Live Preview"),
+            " [NEW]"
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("livePreview.description", "Real-time preview of draft changes for frontends") })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            checked: settings.livePreview?.enabled ?? true,
+            onChange: (e) => updateSettings((prev) => ({
+              ...prev,
+              livePreview: { ...prev.livePreview, enabled: e.target.checked }
+            }))
+          }
+        )
+      ] }) }),
+      settings.livePreview?.enabled !== false && /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("livePreview.debounce", "Debounce (ms)") }),
+          /* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: settings.livePreview?.debounceMs ?? 300,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                livePreview: { ...prev.livePreview, debounceMs: value }
+              }))
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", paddingTop: 6, children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: settings.livePreview?.draftEvents ?? true,
+              onCheckedChange: (checked) => updateSettings((prev) => ({
+                ...prev,
+                livePreview: { ...prev.livePreview, draftEvents: checked }
+              }))
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: t("livePreview.draftEvents", "Emit Draft Events") })
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("livePreview.maxSubs", "Max Subscriptions/Socket") }),
+          /* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: settings.livePreview?.maxSubscriptionsPerSocket ?? 50,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                livePreview: { ...prev.livePreview, maxSubscriptionsPerSocket: value }
+              }))
+            }
+          ) })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(Divider, {}) }),
+      /* @__PURE__ */ jsx(ResponsiveSection, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsxs(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: [
+            t("fieldChanges.title", "Field-level Changes"),
+            " [NEW]"
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("fieldChanges.description", "Send only changed fields instead of full entities (bandwidth optimization)") })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            checked: settings.fieldLevelChanges?.enabled ?? true,
+            onChange: (e) => updateSettings((prev) => ({
+              ...prev,
+              fieldLevelChanges: { ...prev.fieldLevelChanges, enabled: e.target.checked }
+            }))
+          }
+        )
+      ] }) }),
+      settings.fieldLevelChanges?.enabled !== false && /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", paddingTop: 2, children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: settings.fieldLevelChanges?.includeFullData ?? false,
+              onCheckedChange: (checked) => updateSettings((prev) => ({
+                ...prev,
+                fieldLevelChanges: { ...prev.fieldLevelChanges, includeFullData: checked }
+              }))
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", children: t("fieldChanges.includeFullData", "Include Full Data") })
+        ] }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("fieldChanges.maxDepth", "Max Diff Depth") }),
+          /* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: settings.fieldLevelChanges?.maxDiffDepth ?? 3,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                fieldLevelChanges: { ...prev.fieldLevelChanges, maxDiffDepth: value }
+              }))
+            }
+          ) })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsx(Divider, {}) }),
       /* @__PURE__ */ jsx(ResponsiveSection, { children: /* @__PURE__ */ jsx(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: t("monitoring.title", "Monitoring & Logging") }) }),
-      /* @__PURE__ */ jsxs(Grid.Root, { gap: 3, children: [
+      /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
         /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(
-          Box,
+          ToggleCard,
           {
-            padding: 4,
-            background: settings.monitoring?.enableConnectionLogging ? "primary100" : "neutral0",
-            hasRadius: true,
-            style: { cursor: "pointer", border: `1px solid ${settings.monitoring?.enableConnectionLogging ? "#4945ff" : "#dcdce4"}` },
+            $active: settings.monitoring?.enableConnectionLogging,
+            $color: "#4945ff",
             onClick: () => updateMonitoring("enableConnectionLogging", !settings.monitoring?.enableConnectionLogging),
-            children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
+            children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsx(
-                Checkbox,
+                Toggle,
                 {
                   checked: settings.monitoring?.enableConnectionLogging || false,
-                  onCheckedChange: (checked) => updateMonitoring("enableConnectionLogging", checked)
+                  onChange: (e) => updateMonitoring("enableConnectionLogging", e.target.checked)
                 }
               ),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", children: t("monitoring.connectionLogging", "Connection Logging") }),
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: t("monitoring.connectionLogging", "Connection Logging") }),
                 /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("monitoring.connectionLoggingHint", "Log client connections") })
               ] })
             ] })
           }
         ) }),
-        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsx(
-          Box,
+        /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsx(
+          ToggleCard,
           {
-            padding: 4,
-            background: settings.monitoring?.enableEventLogging ? "primary100" : "neutral0",
-            hasRadius: true,
-            style: { cursor: "pointer", border: `1px solid ${settings.monitoring?.enableEventLogging ? "#4945ff" : "#dcdce4"}` },
+            $active: settings.monitoring?.enableEventLogging,
+            $color: "#4945ff",
             onClick: () => updateMonitoring("enableEventLogging", !settings.monitoring?.enableEventLogging),
-            children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
+            children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsx(
-                Checkbox,
+                Toggle,
                 {
                   checked: settings.monitoring?.enableEventLogging || false,
-                  onCheckedChange: (checked) => updateMonitoring("enableEventLogging", checked)
+                  onChange: (e) => updateMonitoring("enableEventLogging", e.target.checked)
                 }
               ),
               /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", children: t("monitoring.eventLogging", "Event Logging") }),
+                /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: t("monitoring.eventLogging", "Event Logging") }),
                 /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("monitoring.eventLoggingHint", "Log all events for debugging") })
               ] })
             ] })
           }
-        ) }),
-        settings.monitoring?.enableEventLogging && /* @__PURE__ */ jsx(Grid.Item, { col: 12, s: 12, children: /* @__PURE__ */ jsx(ResponsiveField, { children: /* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(
+        ) })
+      ] }),
+      settings.monitoring?.enableEventLogging && /* @__PURE__ */ jsx(Box, { paddingTop: 3, children: /* @__PURE__ */ jsx(Grid.Root, { gap: 4, children: /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxs(ResponsiveField, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("monitoring.maxLogSize", "Max Log Size") }),
+        /* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(
           NumberInput,
           {
-            label: t("monitoring.maxLogSize", "Max Log Size"),
             value: settings.monitoring?.maxEventLogSize || 100,
             onValueChange: (value) => updateMonitoring("maxEventLogSize", value)
           }
-        ) }) }) })
-      ] })
+        ) })
+      ] }) }) }) })
     ] }),
     /* @__PURE__ */ jsx(Box, { marginTop: 3, padding: 3, background: "success100", hasRadius: true, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
       /* @__PURE__ */ jsx(Check, {}),

package/dist/_chunks/{index-BVQ20t1c.js → index--2NeIKGR.js}

@@ -51,7 +51,7 @@ const index = {
           },
           id: `${PLUGIN_ID}-settings`,
           to: `${PLUGIN_ID}/settings`,
-          Component: () => Promise.resolve().then(() => require("./SettingsPage-88RdJkLy.js")).then((mod) => ({ default: mod.SettingsPage }))
+          Component: () => Promise.resolve().then(() => require("./SettingsPage-4OkXJAjU.js")).then((mod) => ({ default: mod.SettingsPage }))
         },
         {
           intlLabel: {
@@ -60,7 +60,7 @@ const index = {
           },
           id: `${PLUGIN_ID}-monitoring`,
           to: `${PLUGIN_ID}/monitoring`,
-          Component: () => Promise.resolve().then(() => require("./MonitoringPage-HxHK1nFr.js")).then((mod) => ({ default: mod.MonitoringPage }))
+          Component: () => Promise.resolve().then(() => require("./MonitoringPage-K5Y3hhKF.js")).then((mod) => ({ default: mod.MonitoringPage }))
         }
       ]
     );
@@ -78,11 +78,21 @@ const index = {
         id: "socket-io-stats-widget",
         pluginId: PLUGIN_ID
       });
-      console.log(`[${PLUGIN_ID}] ✅ Socket.IO Stats Widget registered`);
+      console.log(`[${PLUGIN_ID}] [SUCCESS] Socket.IO Stats Widget registered`);
     }
   },
-  bootstrap(app) {
-    console.log(`[${PLUGIN_ID}] Bootstrapping plugin...`);
+  async bootstrap(app) {
+    console.log(`[${PLUGIN_ID}] [INFO] Bootstrapping plugin...`);
+    try {
+      const { default: LivePresencePanel } = await Promise.resolve().then(() => require("./LivePresencePanel-CNaEK-Gk.js"));
+      const contentManagerPlugin = app.getPlugin("content-manager");
+      if (contentManagerPlugin && contentManagerPlugin.apis) {
+        contentManagerPlugin.apis.addEditViewSidePanel([LivePresencePanel]);
+        console.log(`[${PLUGIN_ID}] [SUCCESS] LivePresencePanel injected into sidebar`);
+      }
+    } catch (error) {
+      console.log(`[${PLUGIN_ID}] [INFO] Content Manager panel injection not available:`, error.message);
+    }
   },
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(

package/dist/_chunks/{index-DLXtrAtk.mjs → index-CzvX8YTe.mjs}

@@ -50,7 +50,7 @@ const index = {
           },
           id: `${PLUGIN_ID}-settings`,
           to: `${PLUGIN_ID}/settings`,
-          Component: () => import("./SettingsPage-DBIu309c.mjs").then((mod) => ({ default: mod.SettingsPage }))
+          Component: () => import("./SettingsPage-DMbMGU6J.mjs").then((mod) => ({ default: mod.SettingsPage }))
         },
         {
           intlLabel: {
@@ -59,7 +59,7 @@ const index = {
           },
           id: `${PLUGIN_ID}-monitoring`,
           to: `${PLUGIN_ID}/monitoring`,
-          Component: () => import("./MonitoringPage-DLZdTZpg.mjs").then((mod) => ({ default: mod.MonitoringPage }))
+          Component: () => import("./MonitoringPage-Bn9XJSlg.mjs").then((mod) => ({ default: mod.MonitoringPage }))
         }
       ]
     );
@@ -77,11 +77,21 @@ const index = {
         id: "socket-io-stats-widget",
         pluginId: PLUGIN_ID
       });
-      console.log(`[${PLUGIN_ID}] ✅ Socket.IO Stats Widget registered`);
+      console.log(`[${PLUGIN_ID}] [SUCCESS] Socket.IO Stats Widget registered`);
     }
   },
-  bootstrap(app) {
-    console.log(`[${PLUGIN_ID}] Bootstrapping plugin...`);
+  async bootstrap(app) {
+    console.log(`[${PLUGIN_ID}] [INFO] Bootstrapping plugin...`);
+    try {
+      const { default: LivePresencePanel } = await import("./LivePresencePanel-BeNq_EnQ.mjs");
+      const contentManagerPlugin = app.getPlugin("content-manager");
+      if (contentManagerPlugin && contentManagerPlugin.apis) {
+        contentManagerPlugin.apis.addEditViewSidePanel([LivePresencePanel]);
+        console.log(`[${PLUGIN_ID}] [SUCCESS] LivePresencePanel injected into sidebar`);
+      }
+    } catch (error) {
+      console.log(`[${PLUGIN_ID}] [INFO] Content Manager panel injection not available:`, error.message);
+    }
   },
   async registerTrads({ locales }) {
     const importedTrads = await Promise.all(

package/dist/admin/index.js

@@ -1,3 +1,3 @@
 "use strict";
-const index = require("../_chunks/index-BVQ20t1c.js");
+const index = require("../_chunks/index--2NeIKGR.js");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { i } from "../_chunks/index-DLXtrAtk.mjs";
+import { i } from "../_chunks/index-CzvX8YTe.mjs";
 export {
   i as default
 };