@permitio/permit-strapi 1.0.0

package/dist/admin/App-BmwAac5t.js

@@ -0,0 +1,1029 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const admin = require("@strapi/strapi/admin");
+const reactRouterDom = require("react-router-dom");
+const designSystem = require("@strapi/design-system");
+const icons = require("@strapi/icons");
+const styled = require("styled-components");
+const index = require("./index-C2zppPZ6.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const Logo$1 = styled__default.default.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+`;
+const SegButton = styled__default.default.button`
+  padding: 6px 16px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+  background: ${({ $active, $variant }) => $active ? $variant === "success" ? "#c6f0c2" : "#fce4e4" : "transparent"};
+  color: ${({ $active, $variant }) => $active ? $variant === "success" ? "#2f6846" : "#b72b1a" : "#8e8ea9"};
+  &:not(:last-child) {
+    border-right: 1px solid #dcdce4;
+  }
+  &:hover {
+    background: ${({ $active, $variant }) => $active ? $variant === "success" ? "#c6f0c2" : "#fce4e4" : "#f6f6f9"};
+  }
+`;
+const TextLink = styled__default.default.a`
+  color: inherit;
+  text-decoration: underline;
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+const DEFAULT_PDP_URL$1 = "https://cloudpdp.api.permit.io";
+const HomePage = ({ onDisconnect }) => {
+  const [config, setConfig] = react.useState(null);
+  const [contentTypes, setContentTypes] = react.useState([]);
+  const [protectedTypes, setProtectedTypes] = react.useState({});
+  const [savingResources, setSavingResources] = react.useState(false);
+  const [syncingUsers, setSyncingUsers] = react.useState(false);
+  const [syncResult, setSyncResult] = react.useState(null);
+  const [updateApiKey, setUpdateApiKey] = react.useState("");
+  const [updatePdpUrl, setUpdatePdpUrl] = react.useState("");
+  const [updateLoading, setUpdateLoading] = react.useState(false);
+  const [disconnectLoading, setDisconnectLoading] = react.useState(false);
+  const [disconnectConfirmed, setDisconnectConfirmed] = react.useState(false);
+  const [rebacConfig, setRebacConfig] = react.useState({});
+  const [instanceRoles, setInstanceRoles] = react.useState({});
+  const [savingRebac, setSavingRebac] = react.useState(false);
+  const [savingInstanceRoles, setSavingInstanceRoles] = react.useState({});
+  const [syncingInstances, setSyncingInstances] = react.useState({});
+  const [instanceSyncResults, setInstanceSyncResults] = react.useState({});
+  const [userFields, setUserFields] = react.useState([]);
+  const [userAttrMappings, setUserAttrMappings] = react.useState([]);
+  const [savingUserAttrs, setSavingUserAttrs] = react.useState(false);
+  const [resourceFieldsMap, setResourceFieldsMap] = react.useState({});
+  const [resourceAttrMappings, setResourceAttrMappings] = react.useState({});
+  const [savingResourceAttrs, setSavingResourceAttrs] = react.useState(false);
+  const { get, post, del } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  react.useEffect(() => {
+    fetchConfig();
+    fetchContentTypes();
+    fetchAttributeMappings();
+    fetchRebacConfig();
+  }, []);
+  const fetchConfig = async () => {
+    try {
+      const { data } = await get("/permit-strapi/config");
+      setConfig(data);
+      setUpdatePdpUrl(data.pdpUrl);
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to load configuration" });
+    }
+  };
+  const fetchContentTypes = async () => {
+    try {
+      const [{ data: ctData }, { data: exData }] = await Promise.all([
+        get("/permit-strapi/content-types"),
+        get("/permit-strapi/excluded-resources")
+      ]);
+      setContentTypes(ctData.contentTypes);
+      console.log("[permit-strapi] content types fetched:", ctData.contentTypes);
+      const initial = {};
+      ctData.contentTypes.forEach((ct) => {
+        initial[ct.uid] = !exData.excludedResources.includes(ct.uid);
+      });
+      setProtectedTypes(initial);
+      for (const ct of ctData.contentTypes) {
+        fetchContentTypeFields(ct.uid);
+      }
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to load content types" });
+    }
+  };
+  const fetchContentTypeFields = async (uid) => {
+    try {
+      const encodedUid = encodeURIComponent(uid);
+      const { data } = await get(`/permit-strapi/content-type-fields/${encodedUid}`);
+      setResourceFieldsMap((prev) => ({ ...prev, [uid]: data.fields }));
+    } catch {
+    }
+  };
+  const fetchAttributeMappings = async () => {
+    try {
+      const [{ data: userFieldsData }, { data: userMappingsData }, { data: resourceMappingsData }] = await Promise.all([
+        get("/permit-strapi/user-fields"),
+        get("/permit-strapi/user-attribute-mappings"),
+        get("/permit-strapi/resource-attribute-mappings")
+      ]);
+      setUserFields(userFieldsData.fields);
+      setUserAttrMappings(userMappingsData.mappings);
+      setResourceAttrMappings(resourceMappingsData.mappings);
+    } catch {
+    }
+  };
+  const handleUpdateConfig = async () => {
+    if (!updateApiKey.trim()) return;
+    setUpdateLoading(true);
+    try {
+      await post("/permit-strapi/config", {
+        apiKey: updateApiKey.trim(),
+        pdpUrl: updatePdpUrl.trim() || DEFAULT_PDP_URL$1
+      });
+      toggleNotification({ type: "success", message: "Configuration updated successfully" });
+      fetchConfig();
+      setUpdateApiKey("");
+    } catch (error) {
+      const message = error?.response?.data?.error?.message || "Failed to update configuration";
+      toggleNotification({ type: "danger", message });
+    } finally {
+      setUpdateLoading(false);
+    }
+  };
+  const handleDisconnect = async () => {
+    setDisconnectLoading(true);
+    try {
+      await del("/permit-strapi/config");
+      toggleNotification({ type: "success", message: "Disconnected from Permit.io" });
+      setDisconnectConfirmed(false);
+      onDisconnect();
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to disconnect" });
+    } finally {
+      setDisconnectLoading(false);
+    }
+  };
+  const handleSyncAllUsers = async () => {
+    setSyncingUsers(true);
+    setSyncResult(null);
+    try {
+      const { data } = await post("/permit-strapi/sync-users", {});
+      setSyncResult(data);
+      toggleNotification({
+        type: "success",
+        message: `Synced ${data.synced} of ${data.total} users`
+      });
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to sync users" });
+    } finally {
+      setSyncingUsers(false);
+    }
+  };
+  const toggleProtection = (uid) => {
+    setProtectedTypes((prev) => ({ ...prev, [uid]: !prev[uid] }));
+  };
+  const handleSaveResources = async () => {
+    setSavingResources(true);
+    try {
+      const excludedResources = Object.entries(protectedTypes).filter(([, isProtected]) => !isProtected).map(([uid]) => uid);
+      await post("/permit-strapi/excluded-resources", { excludedResources });
+      toggleNotification({ type: "success", message: "Protected resources saved successfully" });
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to save protected resources" });
+    } finally {
+      setSavingResources(false);
+    }
+  };
+  const toggleUserAttribute = (fieldName) => {
+    setUserAttrMappings(
+      (prev) => prev.includes(fieldName) ? prev.filter((f) => f !== fieldName) : [...prev, fieldName]
+    );
+  };
+  const handleSaveUserAttributes = async () => {
+    setSavingUserAttrs(true);
+    try {
+      await post("/permit-strapi/user-attribute-mappings", { mappings: userAttrMappings });
+      toggleNotification({
+        type: "success",
+        message: "User attribute mappings saved. Resources re-synced."
+      });
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to save user attribute mappings" });
+    } finally {
+      setSavingUserAttrs(false);
+    }
+  };
+  const toggleResourceAttribute = (uid, fieldName) => {
+    setResourceAttrMappings((prev) => {
+      const current = prev[uid] || [];
+      const updated = current.includes(fieldName) ? current.filter((f) => f !== fieldName) : [...current, fieldName];
+      return { ...prev, [uid]: updated };
+    });
+  };
+  const handleSaveResourceAttributes = async () => {
+    setSavingResourceAttrs(true);
+    try {
+      await post("/permit-strapi/resource-attribute-mappings", { mappings: resourceAttrMappings });
+      toggleNotification({
+        type: "success",
+        message: "Resource attribute mappings saved. Resources re-synced."
+      });
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to save resource attribute mappings" });
+    } finally {
+      setSavingResourceAttrs(false);
+    }
+  };
+  const fetchRebacConfig = async () => {
+    try {
+      const { data } = await get("/permit-strapi/rebac-config");
+      setRebacConfig(data.config || {});
+    } catch {
+    }
+  };
+  const fetchInstanceRoles = async (uid) => {
+    try {
+      const encodedUid = encodeURIComponent(uid);
+      const { data } = await get(`/permit-strapi/instance-roles/${encodedUid}`);
+      setInstanceRoles((prev) => ({ ...prev, [uid]: data.roles || [] }));
+    } catch {
+    }
+  };
+  const toggleRebacEnabled = (uid) => {
+    setRebacConfig((prev) => {
+      const current = prev[uid] || { enabled: false, creatorRole: "owner" };
+      const updated = { ...current, enabled: !current.enabled };
+      if (updated.enabled && !instanceRoles[uid]) {
+        fetchInstanceRoles(uid);
+      }
+      return { ...prev, [uid]: updated };
+    });
+  };
+  const updateCreatorRole = (uid, value) => {
+    setRebacConfig((prev) => ({
+      ...prev,
+      [uid]: { ...prev[uid] || { enabled: false, creatorRole: "owner" }, creatorRole: value }
+    }));
+  };
+  const handleSaveRebacConfig = async () => {
+    setSavingRebac(true);
+    try {
+      await post("/permit-strapi/rebac-config", { config: rebacConfig });
+      toggleNotification({ type: "success", message: "ReBAC configuration saved" });
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to save ReBAC configuration" });
+    } finally {
+      setSavingRebac(false);
+    }
+  };
+  const addInstanceRole = (uid) => {
+    setInstanceRoles((prev) => ({
+      ...prev,
+      [uid]: [...prev[uid] || [], { key: "", name: "" }]
+    }));
+  };
+  const updateInstanceRole = (uid, index2, field, value) => {
+    setInstanceRoles((prev) => {
+      const roles = [...prev[uid] || []];
+      roles[index2] = { ...roles[index2], [field]: value };
+      return { ...prev, [uid]: roles };
+    });
+  };
+  const removeInstanceRole = (uid, index2) => {
+    setInstanceRoles((prev) => {
+      const roles = [...prev[uid] || []];
+      roles.splice(index2, 1);
+      return { ...prev, [uid]: roles };
+    });
+  };
+  const handleSaveInstanceRoles = async (uid) => {
+    setSavingInstanceRoles((prev) => ({ ...prev, [uid]: true }));
+    try {
+      const encodedUid = encodeURIComponent(uid);
+      const roles = instanceRoles[uid] || [];
+      await post(`/permit-strapi/instance-roles/${encodedUid}`, { roles });
+      toggleNotification({
+        type: "success",
+        message: "Instance roles saved and synced to Permit.io"
+      });
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to save instance roles" });
+    } finally {
+      setSavingInstanceRoles((prev) => ({ ...prev, [uid]: false }));
+    }
+  };
+  const handleSyncInstances = async (uid) => {
+    setSyncingInstances((prev) => ({ ...prev, [uid]: true }));
+    try {
+      const encodedUid = encodeURIComponent(uid);
+      const { data } = await post(`/permit-strapi/sync-instances/${encodedUid}`, {});
+      setInstanceSyncResults((prev) => ({ ...prev, [uid]: data }));
+      toggleNotification({
+        type: "success",
+        message: `Synced ${data.synced} of ${data.total} instances`
+      });
+    } catch {
+      toggleNotification({ type: "danger", message: "Failed to sync instances" });
+    } finally {
+      setSyncingInstances((prev) => ({ ...prev, [uid]: false }));
+    }
+  };
+  const protectedContentTypes = contentTypes.filter((ct) => protectedTypes[ct.uid] !== false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 10, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", shadow: "tableShadow", hasRadius: true, padding: 6, marginBottom: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Logo$1, { src: index.logo, alt: "Permit.io" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "Permit.io" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Status, { variant: "success", size: "S", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "success700", children: "Connected" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", paddingTop: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 8, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Typography,
+              {
+                variant: "sigma",
+                textColor: "neutral500",
+                style: { textTransform: "uppercase", letterSpacing: "0.08em", fontSize: "10px" },
+                children: "API KEY"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: config?.apiKey })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Typography,
+              {
+                variant: "sigma",
+                textColor: "neutral500",
+                style: { textTransform: "uppercase", letterSpacing: "0.08em", fontSize: "10px" },
+                children: "PDP URL"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", style: { lineHeight: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", style: { lineHeight: 1 }, children: config?.pdpUrl }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
+                {
+                  href: "https://docs.permit.io",
+                  target: "_blank",
+                  rel: "noreferrer",
+                  style: { display: "flex", alignItems: "center" },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, { width: "11px", height: "11px", fill: "neutral400" })
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Root, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {}), size: "S", children: "Update Config" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Update Configuration" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.Field.Root,
+                  {
+                    name: "updateApiKey",
+                    width: "100%",
+                    hint: "Enter a new Permit.io API key to replace the current one",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "New API Key" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.TextInput,
+                        {
+                          placeholder: "permit_key_...",
+                          value: updateApiKey,
+                          onChange: (e) => setUpdateApiKey(e.target.value),
+                          type: "password"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "updatePdpUrl", width: "100%", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "PDP UR" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.TextInput,
+                    {
+                      value: updatePdpUrl,
+                      onChange: (e) => setUpdatePdpUrl(e.target.value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.Flex,
+                  {
+                    gap: 2,
+                    alignItems: "flex-start",
+                    padding: 3,
+                    style: { background: "#f0f4ff", borderRadius: "4px" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        icons.Information,
+                        {
+                          width: "14px",
+                          height: "14px",
+                          fill: "primary600",
+                          style: { flexShrink: 0, marginTop: "2px" }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "primary600", children: [
+                        "The Cloud PDP supports ",
+                        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "RBAC only" }),
+                        ". For ABAC or ReBAC policies, use a",
+                        " ",
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          TextLink,
+                          {
+                            href: "https://docs.permit.io/how-to/deploy/deploy-to-production",
+                            target: "_blank",
+                            rel: "noreferrer",
+                            children: "self-hosted PDP"
+                          }
+                        ),
+                        "."
+                      ] })
+                    ]
+                  }
+                )
+              ] }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}), children: "Cancel" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+                    onClick: handleUpdateConfig,
+                    loading: updateLoading,
+                    disabled: !updateApiKey.trim() || updateLoading,
+                    children: "Save Changes"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Root, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "danger-light", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}), size: "S", children: "Disconnect" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Disconnect from Permit.io" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: "Are you sure you want to disconnect from Permit.io?" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "danger600", children: "All API requests will immediately stop being checked for authorization. Your content types will be unprotected until you reconnect." }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Checkbox,
+                  {
+                    checked: disconnectConfirmed,
+                    onCheckedChange: (val) => setDisconnectConfirmed(val),
+                    children: "I understand the consequences of disconnecting"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}), children: "Cancel" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    variant: "danger",
+                    startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
+                    onClick: handleDisconnect,
+                    loading: disconnectLoading,
+                    disabled: !disconnectConfirmed || disconnectLoading,
+                    children: "Yes, Disconnect"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", shadow: "tableShadow", hasRadius: true, padding: 6, marginBottom: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", width: "100%", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "User Sync" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Sync all existing Strapi users to Permit.io. New users are synced automatically on registration." }),
+        syncResult && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: [
+          "Last sync: ",
+          syncResult.synced,
+          " synced, ",
+          syncResult.failed,
+          " failed (total:",
+          " ",
+          syncResult.total,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", size: "S", onClick: handleSyncAllUsers, loading: syncingUsers, children: "Sync All Users" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", shadow: "tableShadow", hasRadius: true, padding: 6, marginBottom: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 4, width: "100%", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "Protected Resources" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Toggle which content types are protected by Permit.io authorization" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+            size: "S",
+            onClick: handleSaveResources,
+            loading: savingResources,
+            children: "Save"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+      contentTypes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", children: "No content types found. Create a collection type in the Content-Type Builder first." }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 0, paddingTop: 2, width: "100%", children: contentTypes.map((ct, index2) => {
+        const isProtected = protectedTypes[ct.uid] ?? true;
+        return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", padding: 4, style: { width: "100%" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: ct.displayName }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                style: {
+                  border: "1px solid #dcdce4",
+                  borderRadius: "4px",
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SegButton,
+                    {
+                      $active: !isProtected,
+                      $variant: "danger",
+                      onClick: () => isProtected && toggleProtection(ct.uid),
+                      children: "Unprotected"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SegButton,
+                    {
+                      $active: isProtected,
+                      $variant: "success",
+                      onClick: () => !isProtected && toggleProtection(ct.uid),
+                      children: "Protected"
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          index2 < contentTypes.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {})
+        ] }, ct.uid);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", shadow: "tableShadow", hasRadius: true, padding: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, paddingBottom: 4, alignItems: "flex-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "ABAC Attribute Mapping" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Select which fields to pass as attributes for Attribute-Based Access Control. Requires a self-hosted PDP." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "user-attributes", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: "User Attributes" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: userFields.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "No custom user fields found. Add fields to the User content type to use as ABAC attributes." }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, alignItems: "flex-start", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 4, wrap: "wrap", children: userFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Checkbox,
+              {
+                checked: userAttrMappings.includes(field.name),
+                onCheckedChange: () => toggleUserAttribute(field.name),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: field.name }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: [
+                    "(",
+                    field.type,
+                    ")"
+                  ] })
+                ] })
+              },
+              field.name
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+                size: "S",
+                onClick: handleSaveUserAttributes,
+                loading: savingUserAttrs,
+                variant: "secondary",
+                children: "Save User Attributes"
+              }
+            )
+          ] }) }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "resource-attributes", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: "Resource Attributes" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: protectedContentTypes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "No protected content types. Enable protection for a content type above to configure resource attributes." }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, alignItems: "flex-start", children: [
+            protectedContentTypes.map((ct) => {
+              const fields = resourceFieldsMap[ct.uid] || [];
+              const selected = resourceAttrMappings[ct.uid] || [];
+              return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: ct.displayName }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2 }),
+                fields.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: "No mappable fields" }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 4, wrap: "wrap", paddingLeft: 2, children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Checkbox,
+                  {
+                    checked: selected.includes(field.name),
+                    onCheckedChange: () => toggleResourceAttribute(ct.uid, field.name),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: field.name }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: [
+                        "(",
+                        field.type,
+                        ")"
+                      ] })
+                    ] })
+                  },
+                  field.name
+                )) })
+              ] }, ct.uid);
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Button,
+              {
+                startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+                size: "S",
+                onClick: handleSaveResourceAttributes,
+                loading: savingResourceAttrs,
+                variant: "secondary",
+                children: "Save Resource Attributes"
+              }
+            )
+          ] }) }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", shadow: "tableShadow", hasRadius: true, padding: 6, marginTop: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 4, width: "100%", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "ReBAC Configuration" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Enable Relationship-Based Access Control per content type. Requires a self-hosted PDP." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+            size: "S",
+            onClick: handleSaveRebacConfig,
+            loading: savingRebac,
+            children: "Save"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+      protectedContentTypes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", children: "No protected content types. Enable protection above first." }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: protectedContentTypes.map((ct) => {
+        const ctRebac = rebacConfig[ct.uid] || { enabled: false, creatorRole: "owner" };
+        const roles = instanceRoles[ct.uid] || [];
+        const syncResult2 = instanceSyncResults[ct.uid];
+        return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: ct.uid, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: ct.displayName }),
+            ctRebac.enabled && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "success600", children: "(ReBAC enabled)" })
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 5, alignItems: "flex-start", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: "ReBAC Mode" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Flex,
+                {
+                  style: {
+                    border: "1px solid #dcdce4",
+                    borderRadius: "4px",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SegButton,
+                      {
+                        $active: !ctRebac.enabled,
+                        $variant: "danger",
+                        onClick: () => ctRebac.enabled && toggleRebacEnabled(ct.uid),
+                        children: "Disabled"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SegButton,
+                      {
+                        $active: ctRebac.enabled,
+                        $variant: "success",
+                        onClick: () => !ctRebac.enabled && toggleRebacEnabled(ct.uid),
+                        children: "Enabled"
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            ctRebac.enabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Field.Root,
+                {
+                  name: `creator-role-${ct.uid}`,
+                  width: "300px",
+                  hint: "Role assigned to the user who creates a record",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Creator Role" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.TextInput,
+                      {
+                        placeholder: "owner",
+                        value: ctRebac.creatorRole,
+                        onChange: (e) => updateCreatorRole(ct.uid, e.target.value)
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, alignItems: "flex-start", width: "100%", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: "Instance Roles" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "Define roles that can be assigned to users on specific records (e.g. owner, editor, viewer)" }),
+                roles.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, width: "100%", children: roles.map((role, index2) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", width: "100%", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.TextInput,
+                    {
+                      placeholder: "key (e.g. owner)",
+                      value: role.key,
+                      onChange: (e) => updateInstanceRole(ct.uid, index2, "key", e.target.value),
+                      "aria-label": "Role key"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.TextInput,
+                    {
+                      placeholder: "name (e.g. Owner)",
+                      value: role.name,
+                      onChange: (e) => updateInstanceRole(
+                        ct.uid,
+                        index2,
+                        "name",
+                        e.target.value
+                      ),
+                      "aria-label": "Role name"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      variant: "danger-light",
+                      size: "S",
+                      onClick: () => removeInstanceRole(ct.uid, index2),
+                      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
+                      children: "Remove"
+                    }
+                  )
+                ] }, index2)) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      variant: "secondary",
+                      size: "S",
+                      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+                      onClick: () => addInstanceRole(ct.uid),
+                      children: "Add Role"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+                      size: "S",
+                      onClick: () => handleSaveInstanceRoles(ct.uid),
+                      loading: savingInstanceRoles[ct.uid],
+                      disabled: roles.length === 0,
+                      children: "Save Roles"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", width: "100%", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "flex-start", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: "Sync Instances" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: [
+                    "Bulk sync all existing ",
+                    ct.displayName,
+                    " records to Permit.io as resource instances"
+                  ] }),
+                  syncResult2 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: [
+                    "Last sync: ",
+                    syncResult2.synced,
+                    " synced, ",
+                    syncResult2.failed,
+                    " ",
+                    "failed (total: ",
+                    syncResult2.total,
+                    ")"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    variant: "secondary",
+                    size: "S",
+                    onClick: () => handleSyncInstances(ct.uid),
+                    loading: syncingInstances[ct.uid],
+                    children: "Sync Instances"
+                  }
+                )
+              ] })
+            ] })
+          ] }) }) })
+        ] }, ct.uid);
+      }) })
+    ] })
+  ] });
+};
+const Logo = styled__default.default.img`
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+`;
+const StepLink = styled__default.default.a`
+  color: ${({ theme }) => theme.colors.primary600};
+  font-size: ${({ theme }) => theme.fontSizes[2]};
+  text-decoration: none;
+  &:hover { text-decoration: underline; }
+`;
+const StepNumber = styled__default.default(designSystem.Flex)`
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.colors.primary100};
+  flex-shrink: 0;
+`;
+const steps = [
+  {
+    number: 1,
+    title: "Create a Permit.io account",
+    description: "Sign up at permit.io and create a new workspace for your project.",
+    link: "https://app.permit.io",
+    linkText: "Go to Permit.io"
+  },
+  {
+    number: 2,
+    title: "Assign policies in Permit.io",
+    description: "Once connected, your Strapi content types and roles sync automatically. Head to the Permit.io dashboard to assign permissions per role.",
+    link: "https://docs.permit.io",
+    linkText: "Read the docs"
+  },
+  {
+    number: 3,
+    title: "Enter your API key below",
+    description: "Copy your API key from the Permit.io dashboard and paste it below to connect."
+  }
+];
+const DEFAULT_PDP_URL = "https://cloudpdp.api.permit.io";
+const GettingStarted = ({ onConnect }) => {
+  const [apiKey, setApiKey] = react.useState("");
+  const [pdpUrl, setPdpUrl] = react.useState(DEFAULT_PDP_URL);
+  const [errors, setErrors] = react.useState({});
+  const [loading, setLoading] = react.useState(false);
+  const { post } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const handleConnect = async () => {
+    if (!apiKey.trim()) {
+      setErrors({ apiKey: "API key is required" });
+      return;
+    }
+    setErrors({});
+    setLoading(true);
+    try {
+      await post("/permit-strapi/config", {
+        apiKey: apiKey.trim(),
+        pdpUrl: pdpUrl.trim() || DEFAULT_PDP_URL
+      });
+      toggleNotification({
+        type: "success",
+        message: "Successfully connected to Permit.io"
+      });
+      onConnect();
+    } catch (error) {
+      const message = error?.response?.data?.error?.message || "Failed to connect. Please check your API key.";
+      toggleNotification({
+        type: "danger",
+        message
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 10, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, paddingBottom: 10, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Logo, { src: index.logo, alt: "Permit.io" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Welcome to Permit Strapi" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", textColor: "neutral600", children: "Fine-grained authorization for your Strapi content types, powered by Permit.io" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Box,
+      {
+        background: "neutral0",
+        shadow: "tableShadow",
+        hasRadius: true,
+        padding: 8,
+        marginBottom: 6,
+        style: { maxWidth: 640, margin: "0 auto 24px auto" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", paddingBottom: 6, children: "Get started in 3 steps" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 6, paddingTop: 4, children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "flex-start", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StepNumber, { justifyContent: "center", alignItems: "center", style: { marginTop: "2px", flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "primary600", children: step.number }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, alignItems: "flex-start", style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: step.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: step.description }),
+              step.link && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", paddingTop: 1, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(StepLink, { href: step.link, target: "_blank", rel: "noreferrer", children: step.linkText }),
+                /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, { width: "12px", height: "12px", fill: "primary600" })
+              ] })
+            ] })
+          ] }, step.number)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 8, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "apiKey", error: errors.apiKey, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Permit.io API Key" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.TextInput,
+              {
+                placeholder: "permit_key_...",
+                value: apiKey,
+                onChange: (e) => setApiKey(e.target.value),
+                type: "password"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "pdpUrl", hint: "Leave as default to use Permit.io Cloud PDP. Change to your local PDP URL if self-hosting.", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "PDP URL" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.TextInput,
+                {
+                  placeholder: DEFAULT_PDP_URL,
+                  value: pdpUrl,
+                  onChange: (e) => setPdpUrl(e.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                gap: 2,
+                alignItems: "flex-start",
+                padding: 3,
+                style: { background: "#f0f4ff", borderRadius: "4px" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(icons.Information, { width: "14px", height: "14px", fill: "primary600", style: { flexShrink: 0, marginTop: "2px" } }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "primary600", children: [
+                    "The Cloud PDP supports ",
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "RBAC only" }),
+                    ". If you plan to use ABAC or ReBAC policies, you must deploy a",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href: "https://docs.permit.io/how-to/deploy/deploy-to-production",
+                        target: "_blank",
+                        rel: "noreferrer",
+                        style: { color: "inherit", textDecoration: "underline" },
+                        children: "self-hosted PDP"
+                      }
+                    ),
+                    "."
+                  ] })
+                ]
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { paddingTop: 6, justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+              onClick: handleConnect,
+              disabled: !apiKey.trim() || loading,
+              loading,
+              size: "L",
+              children: "Connect to Permit.io"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+const App = () => {
+  const [isConfigured, setIsConfigured] = react.useState(null);
+  const { get } = admin.useFetchClient();
+  react.useEffect(() => {
+    get("/permit-strapi/config").then(({ data }) => setIsConfigured(data.configured)).catch(() => setIsConfigured(false));
+  }, []);
+  if (isConfigured === null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Loading, {});
+  }
+  if (!isConfigured) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GettingStarted, { onConnect: () => setIsConfigured(true) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, { onDisconnect: () => setIsConfigured(false) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(admin.Page.Error, {}) })
+  ] });
+};
+exports.App = App;