npm - @strapi-community/plugin-io - Versions diffs - 5.0.4 → 5.1.0 - Mend

@strapi-community/plugin-io 5.0.4 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md +47 -1
package/dist/_chunks/LivePresencePanel-BeNq_EnQ.mjs +387 -0
package/dist/_chunks/LivePresencePanel-CNaEK-Gk.js +389 -0
package/dist/_chunks/{MonitoringPage-DLZdTZpg.mjs → MonitoringPage-Bn9XJSlg.mjs} +1 -1
package/dist/_chunks/{MonitoringPage-HxHK1nFr.js → MonitoringPage-K5Y3hhKF.js} +1 -1
package/dist/_chunks/{SettingsPage-88RdJkLy.js → SettingsPage-4OkXJAjU.js} +250 -148
package/dist/_chunks/{SettingsPage-DBIu309c.mjs → SettingsPage-DMbMGU6J.mjs} +250 -148
package/dist/_chunks/{index-BVQ20t1c.js → index--2NeIKGR.js} +15 -5
package/dist/_chunks/{index-DLXtrAtk.mjs → index-CzvX8YTe.mjs} +15 -5
package/dist/admin/index.js +1 -1
package/dist/admin/index.mjs +1 -1
package/dist/server/index.js +1120 -41
package/dist/server/index.mjs +1119 -40
package/package.json +13 -5

package/dist/_chunks/{SettingsPage-88RdJkLy.js → SettingsPage-4OkXJAjU.js} RENAMED Viewed

@@ -7,7 +7,7 @@ const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
 const index = require("./index-DkTxsEqL.js");
 const styled = require("styled-components");
-const index$1 = require("./index-BVQ20t1c.js");
+const index$1 = require("./index--2NeIKGR.js");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const styled__default = /* @__PURE__ */ _interopDefault(styled);
 const ResponsiveMain = styled__default.default(designSystem.Main)`
@@ -82,6 +82,23 @@ const ResponsiveButtonGroup = styled__default.default(designSystem.Flex)`
     }
   }
 `;
+const ToggleCard = styled__default.default(designSystem.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__default.default.div`
   width: 100%;
@@ -688,21 +705,12 @@ const SettingsPage = () => {
         /* @__PURE__ */ jsxRuntime.jsx(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: t("security.title", "Security Settings") }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("security.description", "Configure authentication and rate limiting") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.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__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -713,34 +721,17 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Typography,
-                  {
-                    variant: "omega",
-                    fontWeight: settings.security?.requireAuthentication ? "bold" : "normal",
-                    textColor: settings.security?.requireAuthentication ? "success700" : "neutral800",
-                    children: t("security.requireAuth", "Require Authentication")
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.security?.requireAuthentication ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: t("security.requireAuth", "Require Authentication") }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: settings.security?.requireAuthentication ? "Active" : "Inactive" })
               ] })
             ] })
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Box,
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -751,49 +742,34 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.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__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.security?.rateLimiting?.enabled ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: t("security.rateLimiting", "Enable Rate Limiting") }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: settings.security?.rateLimiting?.enabled ? "Active" : "Inactive" })
               ] })
             ] })
           }
-        ) }),
-        settings.security?.rateLimiting?.enabled && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+        ) })
+      ] }),
+      settings.security?.rateLimiting?.enabled && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveField, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("security.maxEventsPerSecond", "Max Events/Second") }),
+        /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.NumberInput,
           {
-            label: t("security.maxEventsPerSecond", "Max Events/Second"),
             value: settings.security?.rateLimiting?.maxEventsPerSecond || 10,
             onValueChange: (value) => updateSecurity("rateLimiting", { ...settings.security?.rateLimiting, maxEventsPerSecond: value })
           }
         ) })
-      ] }),
+      ] }) }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
       /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveSection, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: t("events.title", "Event Configuration") }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("events.description", "Global event settings") })
+        /* @__PURE__ */ jsxRuntime.jsx(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: t("events.title", "Real-time Events") }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("events.description", "Configure which events are sent for which content types") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.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__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -804,34 +780,17 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Typography,
-                  {
-                    variant: "omega",
-                    fontWeight: settings.events?.customEventNames ? "bold" : "normal",
-                    textColor: settings.events?.customEventNames ? "primary700" : "neutral800",
-                    children: t("events.customNames", "Use Custom Event Names")
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.events?.customEventNames ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: t("events.customNames", "Use Custom Event Names") }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: settings.events?.customEventNames ? "Active" : "Inactive" })
               ] })
             ] })
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.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__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -842,34 +801,17 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Typography,
-                  {
-                    variant: "omega",
-                    fontWeight: settings.events?.includeRelations ? "bold" : "normal",
-                    textColor: settings.events?.includeRelations ? "primary700" : "neutral800",
-                    children: t("events.includeRelations", "Include Relations")
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.events?.includeRelations ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: t("events.includeRelations", "Include Relations") }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: settings.events?.includeRelations ? "Active" : "Inactive" })
               ] })
             ] })
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.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__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -880,16 +822,8 @@ const SettingsPage = () => {
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Typography,
-                  {
-                    variant: "omega",
-                    fontWeight: settings.events?.onlyPublished ? "bold" : "normal",
-                    textColor: settings.events?.onlyPublished ? "primary700" : "neutral800",
-                    children: t("events.onlyPublished", "Only Published Content")
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "12px" }, children: settings.events?.onlyPublished ? "✓ Active" : "Inactive" })
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: t("events.onlyPublished", "Only Published Content") }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: settings.events?.onlyPublished ? "Active" : "Inactive" })
               ] })
             ] })
           }
@@ -1041,7 +975,7 @@ const SettingsPage = () => {
                   /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: t("events.delete", "DELETE") }) }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: [
                     t("entitySubscriptions.allow", "ENTITIES"),
-                    " 🆕"
+                    " [NEW]"
                   ] }) }) })
                 ] }) }),
                 availableContentTypes.map((ct, idx) => {
@@ -1277,7 +1211,7 @@ const SettingsPage = () => {
             /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { children: [
               "/",
               ns,
-              config.requireAuth && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: "4px" }, children: "🔒" }),
+              config.requireAuth && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: "4px" }, children: "[AUTH]" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 designSystem.Button,
                 {
@@ -1299,7 +1233,7 @@ const SettingsPage = () => {
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: [
             t("entitySubscriptions.title", "Entity Subscriptions"),
-            " 🆕"
+            " [NEW]"
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("entitySubscriptions.description", "Allow clients to subscribe to specific entities") })
         ] }),
@@ -1344,63 +1278,231 @@ const SettingsPage = () => {
         ] }) })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ResponsiveSection, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: [
+            t("presence.title", "Presence System"),
+            " [NEW]"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("presence.description", "Real-time collaboration awareness - see who is editing what") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Toggle,
+          {
+            checked: settings.presence?.enabled ?? true,
+            onChange: (e) => updateSettings((prev) => ({
+              ...prev,
+              presence: { ...prev.presence, enabled: e.target.checked }
+            }))
+          }
+        )
+      ] }) }),
+      settings.presence?.enabled !== false && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("presence.heartbeat", "Heartbeat Interval (ms)") }),
+          /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.NumberInput,
+            {
+              value: settings.presence?.heartbeatInterval ?? 3e4,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                presence: { ...prev.presence, heartbeatInterval: value }
+              }))
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("presence.staleTimeout", "Stale Timeout (ms)") }),
+          /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.NumberInput,
+            {
+              value: settings.presence?.staleTimeout ?? 6e4,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                presence: { ...prev.presence, staleTimeout: value }
+              }))
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", paddingTop: 6, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Checkbox,
+            {
+              checked: settings.presence?.showTypingIndicator ?? true,
+              onCheckedChange: (checked) => updateSettings((prev) => ({
+                ...prev,
+                presence: { ...prev.presence, showTypingIndicator: checked }
+              }))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: t("presence.typing", "Show Typing Indicators") })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ResponsiveSection, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: [
+            t("livePreview.title", "Live Preview"),
+            " [NEW]"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("livePreview.description", "Real-time preview of draft changes for frontends") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Toggle,
+          {
+            checked: settings.livePreview?.enabled ?? true,
+            onChange: (e) => updateSettings((prev) => ({
+              ...prev,
+              livePreview: { ...prev.livePreview, enabled: e.target.checked }
+            }))
+          }
+        )
+      ] }) }),
+      settings.livePreview?.enabled !== false && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("livePreview.debounce", "Debounce (ms)") }),
+          /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.NumberInput,
+            {
+              value: settings.livePreview?.debounceMs ?? 300,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                livePreview: { ...prev.livePreview, debounceMs: value }
+              }))
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", paddingTop: 6, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Checkbox,
+            {
+              checked: settings.livePreview?.draftEvents ?? true,
+              onCheckedChange: (checked) => updateSettings((prev) => ({
+                ...prev,
+                livePreview: { ...prev.livePreview, draftEvents: checked }
+              }))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: t("livePreview.draftEvents", "Emit Draft Events") })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("livePreview.maxSubs", "Max Subscriptions/Socket") }),
+          /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.NumberInput,
+            {
+              value: settings.livePreview?.maxSubscriptionsPerSocket ?? 50,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                livePreview: { ...prev.livePreview, maxSubscriptionsPerSocket: value }
+              }))
+            }
+          ) })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ResponsiveSection, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: [
+            t("fieldChanges.title", "Field-level Changes"),
+            " [NEW]"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("fieldChanges.description", "Send only changed fields instead of full entities (bandwidth optimization)") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Toggle,
+          {
+            checked: settings.fieldLevelChanges?.enabled ?? true,
+            onChange: (e) => updateSettings((prev) => ({
+              ...prev,
+              fieldLevelChanges: { ...prev.fieldLevelChanges, enabled: e.target.checked }
+            }))
+          }
+        )
+      ] }) }),
+      settings.fieldLevelChanges?.enabled !== false && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 3, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", paddingTop: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Checkbox,
+            {
+              checked: settings.fieldLevelChanges?.includeFullData ?? false,
+              onCheckedChange: (checked) => updateSettings((prev) => ({
+                ...prev,
+                fieldLevelChanges: { ...prev.fieldLevelChanges, includeFullData: checked }
+              }))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: t("fieldChanges.includeFullData", "Include Full Data") })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveField, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("fieldChanges.maxDepth", "Max Diff Depth") }),
+          /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.NumberInput,
+            {
+              value: settings.fieldLevelChanges?.maxDiffDepth ?? 3,
+              onValueChange: (value) => updateSettings((prev) => ({
+                ...prev,
+                fieldLevelChanges: { ...prev.fieldLevelChanges, maxDiffDepth: value }
+              }))
+            }
+          ) })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(ResponsiveSection, { children: /* @__PURE__ */ jsxRuntime.jsx(ResponsiveSectionTitle, { variant: "delta", as: "h2", children: t("monitoring.title", "Monitoring & Logging") }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.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__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Checkbox,
+                designSystem.Toggle,
                 {
                   checked: settings.monitoring?.enableConnectionLogging || false,
-                  onCheckedChange: (checked) => updateMonitoring("enableConnectionLogging", checked)
+                  onChange: (e) => updateMonitoring("enableConnectionLogging", e.target.checked)
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: t("monitoring.connectionLogging", "Connection Logging") }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: t("monitoring.connectionLogging", "Connection Logging") }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("monitoring.connectionLoggingHint", "Log client connections") })
               ] })
             ] })
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Box,
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", style: { width: "100%" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.Checkbox,
+                designSystem.Toggle,
                 {
                   checked: settings.monitoring?.enableEventLogging || false,
-                  onCheckedChange: (checked) => updateMonitoring("enableEventLogging", checked)
+                  onChange: (e) => updateMonitoring("enableEventLogging", e.target.checked)
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: t("monitoring.eventLogging", "Event Logging") }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: t("monitoring.eventLogging", "Event Logging") }),
                 /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t("monitoring.eventLoggingHint", "Log all events for debugging") })
               ] })
             ] })
           }
-        ) }),
-        settings.monitoring?.enableEventLogging && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 12, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(ResponsiveField, { children: /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        ) })
+      ] }),
+      settings.monitoring?.enableEventLogging && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(ResponsiveField, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("monitoring.maxLogSize", "Max Log Size") }),
+        /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
           designSystem.NumberInput,
           {
-            label: t("monitoring.maxLogSize", "Max Log Size"),
             value: settings.monitoring?.maxEventLogSize || 100,
             onValueChange: (value) => updateMonitoring("maxEventLogSize", value)
           }
-        ) }) }) })
-      ] })
+        ) })
+      ] }) }) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 3, padding: 3, background: "success100", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),