@ixo/editor 3.0.0-beta.23 → 3.0.0-beta.25

package/dist/{chunk-GKAKYGC3.mjs → chunk-TLYT3OAQ.mjs}

@@ -929,7 +929,8 @@ var CONDITIONABLE_PROPERTIES = {
       description: "Number of configured links"
     }
   ],
-  action: []
+  action: [],
+  embed: []
 };
 function getConditionableProperties(blockType, block) {
   const baseProperties = CONDITIONABLE_PROPERTIES[blockType] || [];
@@ -3216,7 +3217,8 @@ import {
   IconDotsCircleHorizontal,
   IconUsers as IconUsers3,
   IconExternalLink,
-  IconBolt
+  IconBolt,
+  IconCode
 } from "@tabler/icons-react";
 var ICON_MAP = {
   "square-check": IconSquareCheck,
@@ -3233,7 +3235,8 @@ var ICON_MAP = {
   "dots-circle": IconDotsCircleHorizontal,
   users: IconUsers3,
   "external-link": IconExternalLink,
-  bolt: IconBolt
+  bolt: IconBolt,
+  code: IconCode
 };
 var getIcon = (fallback = "square-check", key, color = "white", size = 26, stroke = 1.5) => {
   const validKey = key in ICON_MAP ? key : fallback;
@@ -14287,7 +14290,7 @@ import React149, { useMemo as useMemo48 } from "react";
 
 // src/mantine/blocks/apiRequest/template/TemplateConfig.tsx
 import React148, { useCallback as useCallback39, useMemo as useMemo47 } from "react";
-import { IconSettings as IconSettings7, IconCode, IconShieldCheck as IconShieldCheck7, IconUser as IconUser7, IconChecklist as IconChecklist5, IconClock as IconClock6 } from "@tabler/icons-react";
+import { IconSettings as IconSettings7, IconCode as IconCode2, IconShieldCheck as IconShieldCheck7, IconUser as IconUser7, IconChecklist as IconChecklist5, IconClock as IconClock6 } from "@tabler/icons-react";
 
 // src/mantine/blocks/apiRequest/template/GeneralTab.tsx
 import React145, { useEffect as useEffect46, useState as useState57 } from "react";
@@ -15055,7 +15058,7 @@ var TemplateConfig5 = ({ editor, block }) => {
       {
         label: "Response Schema",
         value: "response-schema",
-        icon: icon(IconCode),
+        icon: icon(IconCode2),
         content: /* @__PURE__ */ React148.createElement(ResponseSchemaTab, { schema: parsedResponseSchema, onSchemaChange: handleSchemaChange, blockId: block.id })
       },
       {
@@ -29617,6 +29620,249 @@ var LocationBlockSpec = createReactBlockSpec21(
   }
 );
 
+// src/mantine/blocks/embed/EmbedBlockSpec.tsx
+import React285 from "react";
+import { createReactBlockSpec as createReactBlockSpec22 } from "@blocknote/react";
+
+// src/mantine/blocks/embed/EmbedBlock.tsx
+import React284 from "react";
+
+// src/mantine/blocks/embed/template/TemplateView.tsx
+import React281, { useMemo as useMemo110 } from "react";
+import { Box as Box54, Group as Group103, Stack as Stack192, Text as Text163 } from "@mantine/core";
+
+// src/mantine/blocks/embed/template/TemplateConfig.tsx
+import React280, { useCallback as useCallback101 } from "react";
+import { IconSettings as IconSettings20 } from "@tabler/icons-react";
+
+// src/mantine/blocks/embed/template/GeneralTab.tsx
+import React279, { useEffect as useEffect101, useState as useState124 } from "react";
+import { Stack as Stack191, Switch as Switch7, Text as Text162 } from "@mantine/core";
+var GeneralTab18 = ({
+  url,
+  title,
+  description,
+  icon: icon2,
+  height,
+  allowAuth,
+  onUrlChange,
+  onTitleChange,
+  onDescriptionChange,
+  onIconChange,
+  onHeightChange,
+  onAllowAuthChange
+}) => {
+  const [localUrl, setLocalUrl] = useState124(url);
+  const [localHeight, setLocalHeight] = useState124(height);
+  const iconOptions = Object.keys(ICON_MAP).map((key) => ({
+    value: key,
+    label: key.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")
+  }));
+  useEffect101(() => {
+    setLocalUrl(url);
+  }, [url]);
+  useEffect101(() => {
+    setLocalHeight(height);
+  }, [height]);
+  return /* @__PURE__ */ React279.createElement(Stack191, { gap: "md" }, /* @__PURE__ */ React279.createElement(Stack191, { gap: "xs" }, /* @__PURE__ */ React279.createElement(Text162, { size: "sm", fw: 600 }, "URL"), /* @__PURE__ */ React279.createElement(
+    BaseTextInput,
+    {
+      placeholder: "https://example.com",
+      value: localUrl,
+      onChange: (event) => {
+        const v = event.currentTarget.value;
+        setLocalUrl(v);
+        onUrlChange(v);
+      }
+    }
+  ), /* @__PURE__ */ React279.createElement(Text162, { size: "xs", c: "dimmed" }, "Enter the URL of the page to embed.")), /* @__PURE__ */ React279.createElement(BaseTextInput, { label: "Title", placeholder: "e.g. Dashboard", value: title, onChange: (e) => onTitleChange(e.currentTarget.value) }), /* @__PURE__ */ React279.createElement(BaseTextArea, { label: "Description", placeholder: "Enter description", value: description, onChange: (e) => onDescriptionChange(e.currentTarget.value), minRows: 2 }), /* @__PURE__ */ React279.createElement(BaseSelect, { label: "Icon", placeholder: "Select an icon", value: icon2 || "code", onChange: (value) => onIconChange(value || "code"), data: iconOptions, searchable: true }), /* @__PURE__ */ React279.createElement(
+    BaseTextInput,
+    {
+      label: "Height (px)",
+      type: "number",
+      placeholder: "400",
+      value: localHeight,
+      onChange: (event) => {
+        const v = event.currentTarget.value;
+        setLocalHeight(v);
+        onHeightChange(v);
+      }
+    }
+  ), /* @__PURE__ */ React279.createElement(Stack191, { gap: "xs" }, /* @__PURE__ */ React279.createElement(Switch7, { label: "Allow authenticated embeds", checked: allowAuth, onChange: (event) => onAllowAuthChange(event.currentTarget.checked) }), /* @__PURE__ */ React279.createElement(Text162, { size: "xs", c: "dimmed" }, "Enable for services like Google Calendar that require cookie access. Only use with trusted URLs.")));
+};
+
+// src/mantine/blocks/embed/template/TemplateConfig.tsx
+var TemplateConfig18 = ({ editor, block }) => {
+  const { closePanel } = usePanelStore();
+  const updateProp = useCallback101(
+    (key, value) => {
+      editor.updateBlock(block, { props: { ...block.props, [key]: value } });
+    },
+    [editor, block]
+  );
+  const tabs = [
+    {
+      label: "General",
+      value: "general",
+      icon: icon(IconSettings20),
+      content: /* @__PURE__ */ React280.createElement(
+        GeneralTab18,
+        {
+          url: block.props.url || "",
+          title: block.props.title || "",
+          description: block.props.description || "",
+          icon: block.props.icon || "code",
+          height: block.props.height || "400",
+          allowAuth: block.props.allowAuth === "true",
+          onUrlChange: (v) => updateProp("url", v),
+          onTitleChange: (v) => updateProp("title", v),
+          onDescriptionChange: (v) => updateProp("description", v),
+          onIconChange: (v) => updateProp("icon", v),
+          onHeightChange: (v) => updateProp("height", v),
+          onAllowAuthChange: (v) => updateProp("allowAuth", String(v))
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ React280.createElement(BaseRightPanelLayout, { title: "Embed Settings", onClose: closePanel, tabs, context: { editor, block } });
+};
+
+// src/mantine/blocks/embed/sanitizeUrl.ts
+var ALLOWED_PROTOCOLS = ["https:"];
+function sanitizeEmbedUrl(raw) {
+  if (!raw) return null;
+  try {
+    const url = new URL(raw);
+    if (ALLOWED_PROTOCOLS.includes(url.protocol)) {
+      return url.href;
+    }
+  } catch {
+  }
+  return null;
+}
+
+// src/mantine/blocks/embed/template/TemplateView.tsx
+var EMBED_TEMPLATE_PANEL_ID = "embed-template-panel";
+var EmbedTemplateView = ({ editor, block }) => {
+  const panelId = `${EMBED_TEMPLATE_PANEL_ID}-${block.id}`;
+  const panelContent = useMemo110(() => /* @__PURE__ */ React281.createElement(TemplateConfig18, { editor, block }), [editor, block]);
+  const { open } = usePanel(panelId, panelContent);
+  const safeUrl = sanitizeEmbedUrl(block.props.url);
+  const height = Number(block.props.height) || 400;
+  const sandbox = block.props.allowAuth === "true" ? "allow-scripts allow-same-origin allow-forms allow-popups" : "allow-scripts allow-forms allow-popups";
+  return /* @__PURE__ */ React281.createElement(BaseContainer, { blockId: block.id, onClick: open, style: { minHeight: 90, justifyContent: "center" } }, /* @__PURE__ */ React281.createElement(Stack192, { gap: "xs", justify: "center" }, /* @__PURE__ */ React281.createElement(Group103, { wrap: "nowrap", align: "center" }, getIcon("code", block.props.icon), /* @__PURE__ */ React281.createElement(Stack192, { gap: 2 }, /* @__PURE__ */ React281.createElement(Text163, { fw: 500, size: "sm", contentEditable: false }, block.props.title || "Embed"), /* @__PURE__ */ React281.createElement(Text163, { size: "xs", c: "dimmed", contentEditable: false, lineClamp: 1 }, block.props.description || safeUrl || "Click to configure"))), safeUrl && /* @__PURE__ */ React281.createElement(Box54, { style: { borderRadius: 8, overflow: "hidden" } }, /* @__PURE__ */ React281.createElement(
+    "iframe",
+    {
+      src: safeUrl,
+      title: block.props.title || "Embedded content",
+      width: "100%",
+      height,
+      style: { border: "none", display: "block" },
+      sandbox,
+      referrerPolicy: "strict-origin-when-cross-origin",
+      loading: "lazy"
+    }
+  ))));
+};
+
+// src/mantine/blocks/embed/flow/FlowView.tsx
+import React283, { useMemo as useMemo111 } from "react";
+import { Box as Box55, Group as Group104, Stack as Stack193, Text as Text164 } from "@mantine/core";
+
+// src/mantine/blocks/embed/flow/FlowConfig.tsx
+import React282, { useCallback as useCallback102 } from "react";
+import { IconSettings as IconSettings21 } from "@tabler/icons-react";
+var FlowConfig4 = ({ editor, block }) => {
+  const { closePanel } = usePanelStore();
+  const updateProp = useCallback102(
+    (key, value) => {
+      editor.updateBlock(block, { props: { ...block.props, [key]: value } });
+    },
+    [editor, block]
+  );
+  const tabs = [
+    {
+      label: "General",
+      value: "general",
+      icon: icon(IconSettings21),
+      content: /* @__PURE__ */ React282.createElement(
+        GeneralTab18,
+        {
+          url: block.props.url || "",
+          title: block.props.title || "",
+          description: block.props.description || "",
+          icon: block.props.icon || "code",
+          height: block.props.height || "400",
+          allowAuth: block.props.allowAuth === "true",
+          onUrlChange: (v) => updateProp("url", v),
+          onTitleChange: (v) => updateProp("title", v),
+          onDescriptionChange: (v) => updateProp("description", v),
+          onIconChange: (v) => updateProp("icon", v),
+          onHeightChange: (v) => updateProp("height", v),
+          onAllowAuthChange: (v) => updateProp("allowAuth", String(v))
+        }
+      )
+    }
+  ];
+  return /* @__PURE__ */ React282.createElement(BaseRightPanelLayout, { title: "Embed Settings", onClose: closePanel, tabs, context: { editor, block }, isTemplate: false });
+};
+
+// src/mantine/blocks/embed/flow/FlowView.tsx
+var EMBED_FLOW_PANEL_ID = "embed-flow-panel";
+var EmbedFlowView = ({ editor, block }) => {
+  const panelId = `${EMBED_FLOW_PANEL_ID}-${block.id}`;
+  const panelContent = useMemo111(() => /* @__PURE__ */ React283.createElement(FlowConfig4, { editor, block }), [editor, block]);
+  const { open } = usePanel(panelId, panelContent);
+  const safeUrl = sanitizeEmbedUrl(block.props.url);
+  const height = Number(block.props.height) || 400;
+  const sandbox = block.props.allowAuth === "true" ? "allow-scripts allow-same-origin allow-forms allow-popups" : "allow-scripts allow-forms allow-popups";
+  return /* @__PURE__ */ React283.createElement(BaseContainer, { blockId: block.id, onClick: open, style: { minHeight: 90, justifyContent: "center" } }, /* @__PURE__ */ React283.createElement(Stack193, { gap: "xs", justify: "center" }, /* @__PURE__ */ React283.createElement(Group104, { wrap: "nowrap", align: "center" }, getIcon("code", block.props.icon), /* @__PURE__ */ React283.createElement(Stack193, { gap: 2 }, /* @__PURE__ */ React283.createElement(Text164, { fw: 500, size: "sm", contentEditable: false }, block.props.title || "Embed"), /* @__PURE__ */ React283.createElement(Text164, { size: "xs", c: "dimmed", contentEditable: false, lineClamp: 1 }, block.props.description || safeUrl || "No URL configured"))), safeUrl && /* @__PURE__ */ React283.createElement(Box55, { style: { borderRadius: 8, overflow: "hidden" } }, /* @__PURE__ */ React283.createElement(
+    "iframe",
+    {
+      src: safeUrl,
+      title: block.props.title || "Embedded content",
+      width: "100%",
+      height,
+      style: { border: "none", display: "block" },
+      sandbox,
+      referrerPolicy: "strict-origin-when-cross-origin",
+      loading: "lazy"
+    }
+  ))));
+};
+
+// src/mantine/blocks/embed/EmbedBlock.tsx
+function EmbedBlock({ editor, block }) {
+  const { docType } = useBlocknoteContext();
+  if (docType === "template" || docType === "page") {
+    return /* @__PURE__ */ React284.createElement(EmbedTemplateView, { editor, block });
+  }
+  return /* @__PURE__ */ React284.createElement(EmbedFlowView, { editor, block });
+}
+
+// src/mantine/blocks/embed/EmbedBlockSpec.tsx
+var EmbedBlockSpec = createReactBlockSpec22(
+  {
+    type: "embed",
+    propSchema: {
+      url: { default: "" },
+      title: { default: "" },
+      description: { default: "" },
+      icon: { default: "code" },
+      height: { default: "400" },
+      allowAuth: { default: "false" },
+      skill: { default: "" }
+    },
+    content: "none"
+  },
+  {
+    render: (props) => {
+      const ixoProps = props;
+      return /* @__PURE__ */ React285.createElement(EmbedBlock, { ...ixoProps });
+    }
+  }
+);
+
 // src/mantine/blocks/registry/blockRegistry.ts
 var BlockRegistry = class {
   constructor() {
@@ -29813,12 +30059,29 @@ blockRegistry.register({
   validDependencies: [],
   defaultProps: {}
 });
+blockRegistry.register({
+  type: "embed",
+  propSchema: {
+    url: "",
+    title: "",
+    description: "",
+    icon: "code",
+    height: "400",
+    allowAuth: "false",
+    skill: ""
+  },
+  validDependencies: [],
+  defaultProps: {
+    icon: "code",
+    height: "400"
+  }
+});
 
 // src/mantine/blocks/hooks/useBlockDependencies.ts
-import { useMemo as useMemo110, useEffect as useEffect101, useState as useState124, useCallback as useCallback101 } from "react";
+import { useMemo as useMemo112, useEffect as useEffect102, useState as useState125, useCallback as useCallback103 } from "react";
 
 // src/mantine/blocks/hooks/useDependsOn.ts
-import { useMemo as useMemo111 } from "react";
+import { useMemo as useMemo113 } from "react";
 
 // src/mantine/blocks/index.ts
 var blockSpecs = {
@@ -29842,7 +30105,8 @@ var blockSpecs = {
   governanceGroup: GovernanceGroupBlockSpec,
   flowLink: FlowLinkBlockSpec,
   action: ActionBlockSpec,
-  location: LocationBlockSpec
+  location: LocationBlockSpec,
+  embed: EmbedBlockSpec
 };
 var getExtraSlashMenuItems = (editor) => {
   const slashMenuList = [
@@ -30209,6 +30473,30 @@ var getExtraSlashMenuItems = (editor) => {
       aliases: ["location", "map", "gps", "coordinates"],
       group: "Basics",
       subtext: "Set a location on a map"
+    },
+    {
+      title: "Embed",
+      onItemClick: () => {
+        editor.insertBlocks(
+          [
+            {
+              type: "embed",
+              props: {
+                url: "",
+                title: "",
+                description: "",
+                icon: "code",
+                height: "400"
+              }
+            }
+          ],
+          editor.getTextCursorPosition().block,
+          "after"
+        );
+      },
+      aliases: ["embed", "iframe", "website", "external"],
+      group: "Basics",
+      subtext: "Embed an external website or content via iframe"
     }
   ];
   const yRoot = editor?._yRoot;
@@ -30288,15 +30576,15 @@ import { useCreateBlockNote as useCreateBlockNote2 } from "@blocknote/react";
 import { BlockNoteSchema as BlockNoteSchema2, defaultBlockSpecs as defaultBlockSpecs2, defaultInlineContentSpecs as defaultInlineContentSpecs2, defaultStyleSpecs as defaultStyleSpecs2 } from "@blocknote/core";
 
 // src/core/hooks/useMatrixProvider.ts
-import { useEffect as useEffect102, useState as useState125, useRef as useRef25, useCallback as useCallback102, useMemo as useMemo112 } from "react";
+import { useEffect as useEffect103, useState as useState126, useRef as useRef25, useCallback as useCallback104, useMemo as useMemo114 } from "react";
 import { MatrixProvider } from "@ixo/matrix-crdt";
 function useMatrixProvider({ matrixClient, roomId, yDoc }) {
-  const [matrixProvider, setProvider] = useState125(null);
-  const [status, setStatus] = useState125("disconnected");
+  const [matrixProvider, setProvider] = useState126(null);
+  const [status, setStatus] = useState126("disconnected");
   const isMountedRef = useRef25(true);
   const providerRef = useRef25(null);
   const retryTimeoutRef = useRef25(null);
-  const providerOptions = useMemo112(
+  const providerOptions = useMemo114(
     () => ({
       translator: {
         updateEventType: "matrix-crdt.doc_update",
@@ -30309,22 +30597,22 @@ function useMatrixProvider({ matrixClient, roomId, yDoc }) {
     }),
     []
   );
-  const handleDocumentAvailable = useCallback102(() => {
+  const handleDocumentAvailable = useCallback104(() => {
     if (isMountedRef.current) {
       setStatus("connected");
     }
   }, []);
-  const handleDocumentUnavailable = useCallback102(() => {
+  const handleDocumentUnavailable = useCallback104(() => {
     if (isMountedRef.current) {
       setStatus("failed");
     }
   }, []);
-  const handleCanWriteChanged = useCallback102(() => {
+  const handleCanWriteChanged = useCallback104(() => {
     if (isMountedRef.current && providerRef.current) {
       setStatus(providerRef.current.canWrite ? "connected" : "failed");
     }
   }, []);
-  const initProvider = useCallback102(async () => {
+  const initProvider = useCallback104(async () => {
     if (!isMountedRef.current) return;
     if (retryTimeoutRef.current) {
       clearTimeout(retryTimeoutRef.current);
@@ -30357,7 +30645,7 @@ function useMatrixProvider({ matrixClient, roomId, yDoc }) {
       }
     }
   }, [matrixClient, providerOptions, handleDocumentAvailable, handleDocumentUnavailable, handleCanWriteChanged]);
-  useEffect102(() => {
+  useEffect103(() => {
     isMountedRef.current = true;
     initProvider();
     return () => {
@@ -30374,7 +30662,7 @@ function useMatrixProvider({ matrixClient, roomId, yDoc }) {
       setStatus("disconnected");
     };
   }, [initProvider]);
-  useEffect102(() => {
+  useEffect103(() => {
     return () => {
       isMountedRef.current = false;
     };
@@ -30383,17 +30671,17 @@ function useMatrixProvider({ matrixClient, roomId, yDoc }) {
 }
 
 // src/mantine/hooks/useCollaborativeYDoc.ts
-import { useMemo as useMemo113 } from "react";
+import { useMemo as useMemo115 } from "react";
 import * as Y from "yjs";
 function useCollaborativeYDoc(_options) {
-  return useMemo113(() => {
+  return useMemo115(() => {
     const doc = new Y.Doc();
     return doc;
   }, []);
 }
 
 // src/mantine/hooks/useCollaborativeIxoEditor.ts
-import { useMemo as useMemo114, useEffect as useEffect103, useState as useState126, useRef as useRef26 } from "react";
+import { useMemo as useMemo116, useEffect as useEffect104, useState as useState127, useRef as useRef26 } from "react";
 
 // src/core/lib/matrixMetadata.ts
 var COVER_IMAGE_EVENT_TYPE = "ixo.page.cover_image";
@@ -30590,7 +30878,7 @@ function useCreateCollaborativeIxoEditor(options) {
     matrixClient,
     permissions = { write: false }
   } = options || {};
-  const memoizedUser = useMemo114(
+  const memoizedUser = useMemo116(
     () => ({
       id: user?.id || "",
       name: user?.name || "",
@@ -30606,13 +30894,13 @@ function useCreateCollaborativeIxoEditor(options) {
     matrixClient,
     roomId: options.roomId
   });
-  const metadataManager = useMemo114(() => new MatrixMetadataManager(matrixClient, options.roomId), [matrixClient, options.roomId]);
-  useEffect103(() => {
+  const metadataManager = useMemo116(() => new MatrixMetadataManager(matrixClient, options.roomId), [matrixClient, options.roomId]);
+  useEffect104(() => {
     return () => {
       metadataManager.dispose();
     };
   }, [metadataManager]);
-  const defaultUploadFile = useMemo114(
+  const defaultUploadFile = useMemo116(
     () => uploadFile || (async (file) => {
       return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -30626,7 +30914,7 @@ function useCreateCollaborativeIxoEditor(options) {
     }),
     [uploadFile]
   );
-  const schema = useMemo114(
+  const schema = useMemo116(
     () => BlockNoteSchema2.create({
       blockSpecs: {
         ...defaultBlockSpecs2,
@@ -30641,16 +30929,16 @@ function useCreateCollaborativeIxoEditor(options) {
     }),
     []
   );
-  const root = useMemo114(() => yDoc.getMap("root"), [yDoc]);
-  const documentFragment = useMemo114(() => yDoc.getXmlFragment("document"), [yDoc]);
-  const flowArray = useMemo114(() => yDoc.getArray("flow"), [yDoc]);
-  const runtimeMap = useMemo114(() => yDoc.getMap("runtime"), [yDoc]);
-  const delegationsMap = useMemo114(() => yDoc.getMap("delegations"), [yDoc]);
-  const invocationsMap = useMemo114(() => yDoc.getMap("invocations"), [yDoc]);
-  const ucanDelegationStore = useMemo114(() => createUcanDelegationStore(delegationsMap), [delegationsMap]);
-  const invocationStore = useMemo114(() => createInvocationStore(invocationsMap), [invocationsMap]);
-  const userFragment = useMemo114(() => yDoc.getMap(memoizedUser.id), [yDoc, memoizedUser.id]);
-  const collaborationConfig = useMemo114(
+  const root = useMemo116(() => yDoc.getMap("root"), [yDoc]);
+  const documentFragment = useMemo116(() => yDoc.getXmlFragment("document"), [yDoc]);
+  const flowArray = useMemo116(() => yDoc.getArray("flow"), [yDoc]);
+  const runtimeMap = useMemo116(() => yDoc.getMap("runtime"), [yDoc]);
+  const delegationsMap = useMemo116(() => yDoc.getMap("delegations"), [yDoc]);
+  const invocationsMap = useMemo116(() => yDoc.getMap("invocations"), [yDoc]);
+  const ucanDelegationStore = useMemo116(() => createUcanDelegationStore(delegationsMap), [delegationsMap]);
+  const invocationStore = useMemo116(() => createInvocationStore(invocationsMap), [invocationsMap]);
+  const userFragment = useMemo116(() => yDoc.getMap(memoizedUser.id), [yDoc, memoizedUser.id]);
+  const collaborationConfig = useMemo116(
     () => ({
       provider: matrixProvider,
       fragment: documentFragment,
@@ -30662,7 +30950,7 @@ function useCreateCollaborativeIxoEditor(options) {
     }),
     [matrixProvider, documentFragment, memoizedUser.name, memoizedUser.color]
   );
-  const ixoConfig = useMemo114(
+  const ixoConfig = useMemo116(
     () => ({
       theme,
       editable,
@@ -30682,7 +30970,7 @@ function useCreateCollaborativeIxoEditor(options) {
     collaboration: collaborationConfig,
     pasteHandler: ixoPasteHandler
   });
-  const titleText = useMemo114(() => yDoc.getText("title"), [yDoc]);
+  const titleText = useMemo116(() => yDoc.getText("title"), [yDoc]);
   let ixoEditor;
   if (editor) {
     ixoEditor = editor;
@@ -30874,12 +31162,12 @@ function useCreateCollaborativeIxoEditor(options) {
       return void 0;
     };
   }
-  useEffect103(() => {
+  useEffect104(() => {
     if (ixoEditor) {
       ixoEditor.isEditable = editable;
     }
   }, [ixoEditor, editable]);
-  useEffect103(() => {
+  useEffect104(() => {
     if (connectionStatus !== "connected") {
       return;
     }
@@ -30901,10 +31189,10 @@ function useCreateCollaborativeIxoEditor(options) {
       titleText.insert(0, options.title);
     }
   }, [connectionStatus, root, titleText, permissions.write, options.docId, options.title, memoizedUser.id]);
-  const [connectedUsers, setConnectedUsers] = useState126([]);
+  const [connectedUsers, setConnectedUsers] = useState127([]);
   const activeBlockIdRef = useRef26(null);
   const awarenessInstance = matrixProvider?.awarenessInstance ?? null;
-  useEffect103(() => {
+  useEffect104(() => {
     if (!awarenessInstance || connectionStatus !== "connected") {
       return;
     }
@@ -30922,7 +31210,7 @@ function useCreateCollaborativeIxoEditor(options) {
       awarenessInstance.off("change", updateUsers);
     };
   }, [awarenessInstance, connectionStatus]);
-  useEffect103(() => {
+  useEffect104(() => {
     if (!awarenessInstance || connectionStatus !== "connected") {
       return;
     }
@@ -30951,7 +31239,7 @@ function useCreateCollaborativeIxoEditor(options) {
     };
   }, [awarenessInstance, connectionStatus, memoizedUser.id, memoizedUser.name, memoizedUser.color, memoizedUser.avatar]);
   const dmSentRef = useRef26(false);
-  useEffect103(() => {
+  useEffect104(() => {
     if (!ixoEditor || connectionStatus !== "connected" || dmSentRef.current) return;
     if (ixoEditor.docType !== "flow") return;
     const mx = ixoEditor.getMatrixClient?.();
@@ -30960,10 +31248,10 @@ function useCreateCollaborativeIxoEditor(options) {
     if (!mx || !runtime || !currentUserId) return;
     dmSentRef.current = true;
     const sendNotifications = async () => {
-      const blocks = ixoEditor.document || [];
+      const blocks = ixoEditor?.document || [];
       const dedupState = getDMNotificationState(runtime);
-      const flowTitle = ixoEditor.getFlowMetadata?.()?.title || "Untitled Flow";
-      const roomId = ixoEditor.getRoomId?.() || "";
+      const flowTitle = ixoEditor?.getFlowMetadata?.()?.title || "Untitled Flow";
+      const roomId = ixoEditor?.getRoomId?.() || "";
       const selfDid = currentUserId.split(":")[0].replace("@", "").replace(/-/g, ":");
       const notifications = [];
       for (const block of blocks) {
@@ -31016,15 +31304,15 @@ function useCreateCollaborativeIxoEditor(options) {
 }
 
 // src/mantine/IxoEditor.tsx
-import React287, { useState as useState132, useEffect as useEffect109, useCallback as useCallback105 } from "react";
+import React294, { useState as useState133, useEffect as useEffect110, useCallback as useCallback107 } from "react";
 import { SuggestionMenuController } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import { filterSuggestionItems } from "@blocknote/core";
 import { MantineProvider } from "@mantine/core";
 
 // src/mantine/components/PanelContent.tsx
-import React279 from "react";
-import { Box as Box54 } from "@mantine/core";
+import React286 from "react";
+import { Box as Box56 } from "@mantine/core";
 var panelStyles = {
   light: {
     backgroundColor: "#ffffff",
@@ -31053,8 +31341,8 @@ function PanelContent({ theme }) {
   const { activePanel, registeredPanels } = usePanelStore();
   const isOpen = activePanel !== null;
   const content = activePanel ? registeredPanels.get(activePanel) : null;
-  return /* @__PURE__ */ React279.createElement(
-    Box54,
+  return /* @__PURE__ */ React286.createElement(
+    Box56,
     {
       pos: "sticky",
       right: 0,
@@ -31073,8 +31361,8 @@ function PanelContent({ theme }) {
 }
 
 // src/mantine/components/CoverImage.tsx
-import React284, { useState as useState129, useRef as useRef27, useEffect as useEffect106, useMemo as useMemo117 } from "react";
-import { Box as Box58, Group as Group105 } from "@mantine/core";
+import React291, { useState as useState130, useRef as useRef27, useEffect as useEffect107, useMemo as useMemo119 } from "react";
+import { Box as Box60, Group as Group107 } from "@mantine/core";
 
 // src/core/lib/imageTransform.ts
 var CLOUDFLARE_CDN_BASE = "https://www.ixo.earth/cdn-cgi/image";
@@ -31207,9 +31495,9 @@ function transformIconImage(sourceUrl, size = "default", customOptions) {
 }
 
 // src/mantine/components/Base/CoverImageButton.tsx
-import React280, { forwardRef } from "react";
+import React287, { forwardRef } from "react";
 import { Button as Button51 } from "@mantine/core";
-var CoverImageButton = forwardRef(({ isActive = false, onClick, children, style, ...props }, ref) => /* @__PURE__ */ React280.createElement(
+var CoverImageButton = forwardRef(({ isActive = false, onClick, children, style, ...props }, ref) => /* @__PURE__ */ React287.createElement(
   Button51,
   {
     ref,
@@ -31232,8 +31520,8 @@ var CoverImageButton = forwardRef(({ isActive = false, onClick, children, style,
 CoverImageButton.displayName = "CoverImageButton";
 
 // src/mantine/components/Base/BaseIconPicker.tsx
-import React281, { useState as useState127, useMemo as useMemo115, useEffect as useEffect104 } from "react";
-import { TextInput as TextInput8, Tabs as Tabs4, Box as Box55, Stack as Stack191, UnstyledButton as UnstyledButton5, Text as Text162, Center as Center13, ScrollArea as ScrollArea9, Group as Group103, Popover as Popover6 } from "@mantine/core";
+import React288, { useState as useState128, useMemo as useMemo117, useEffect as useEffect105 } from "react";
+import { TextInput as TextInput8, Tabs as Tabs4, Box as Box57, Stack as Stack194, UnstyledButton as UnstyledButton5, Text as Text165, Center as Center13, ScrollArea as ScrollArea9, Group as Group105, Popover as Popover6 } from "@mantine/core";
 import * as TablerIcons from "@tabler/icons-react";
 import { IconSearch as IconSearch7, IconX as IconX14, IconChevronLeft, IconChevronRight as IconChevronRight14 } from "@tabler/icons-react";
 
@@ -31265,28 +31553,28 @@ var localStorageService = {
 var iconsKey = "editor_recent_icons";
 var ICONS_PER_PAGE = 500;
 function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children, currentIcon }) {
-  const [searchQuery, setSearchQuery] = useState127("");
-  const [activeTab, setActiveTab] = useState127("icons");
-  const [currentPage, setCurrentPage] = useState127(1);
-  const allIcons = useMemo115(() => {
+  const [searchQuery, setSearchQuery] = useState128("");
+  const [activeTab, setActiveTab] = useState128("icons");
+  const [currentPage, setCurrentPage] = useState128(1);
+  const allIcons = useMemo117(() => {
     const iconEntries = Object.entries(TablerIcons).filter(([name]) => name.startsWith("Icon") && name !== "IconProps");
     return iconEntries;
   }, []);
-  const filteredIcons = useMemo115(() => {
+  const filteredIcons = useMemo117(() => {
     if (!searchQuery) return allIcons;
     const query = searchQuery.toLowerCase();
     return allIcons.filter(([name]) => name.toLowerCase().includes(query));
   }, [allIcons, searchQuery]);
-  useEffect104(() => {
+  useEffect105(() => {
     setCurrentPage(1);
   }, [searchQuery]);
-  const paginatedIcons = useMemo115(() => {
+  const paginatedIcons = useMemo117(() => {
     const startIndex = (currentPage - 1) * ICONS_PER_PAGE;
     const endIndex = startIndex + ICONS_PER_PAGE;
     return filteredIcons.slice(startIndex, endIndex);
   }, [filteredIcons, currentPage]);
   const totalPages = Math.ceil(filteredIcons.length / ICONS_PER_PAGE);
-  const recentIcons = useMemo115(() => {
+  const recentIcons = useMemo117(() => {
     const recentIconNames = localStorageService.get(iconsKey);
     if (!recentIconNames || recentIconNames.length === 0) return [];
     return recentIconNames.slice(0, 24).map((iconName) => allIcons.find(([name]) => name === iconName)).filter((entry) => entry !== void 0);
@@ -31301,10 +31589,10 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
   };
   const renderIconGrid = (icons) => {
     if (icons.length === 0) {
-      return /* @__PURE__ */ React281.createElement(Center13, { py: "xl" }, /* @__PURE__ */ React281.createElement(Text162, { c: "dimmed", size: "sm" }, "No icons found"));
+      return /* @__PURE__ */ React288.createElement(Center13, { py: "xl" }, /* @__PURE__ */ React288.createElement(Text165, { c: "dimmed", size: "sm" }, "No icons found"));
     }
-    return /* @__PURE__ */ React281.createElement(
-      Box55,
+    return /* @__PURE__ */ React288.createElement(
+      Box57,
       {
         style: {
           display: "grid",
@@ -31315,7 +31603,7 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
       },
       icons.map(([name, IconComponent]) => {
         const isSelected = currentIcon === name.replace("Icon", "").replace(/([A-Z])/g, "-$1").toLowerCase().slice(1);
-        return /* @__PURE__ */ React281.createElement(
+        return /* @__PURE__ */ React288.createElement(
           UnstyledButton5,
           {
             key: name,
@@ -31341,12 +31629,12 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
               }
             }
           },
-          /* @__PURE__ */ React281.createElement(IconComponent, { color: "white", size: 24, stroke: 1.5 })
+          /* @__PURE__ */ React288.createElement(IconComponent, { color: "white", size: 24, stroke: 1.5 })
         );
       })
     );
   };
-  return /* @__PURE__ */ React281.createElement(Popover6, { opened, onClose, position: "right", width: 500, shadow: "xl" }, /* @__PURE__ */ React281.createElement(Popover6.Target, null, children), /* @__PURE__ */ React281.createElement(
+  return /* @__PURE__ */ React288.createElement(Popover6, { opened, onClose, position: "right", width: 500, shadow: "xl" }, /* @__PURE__ */ React288.createElement(Popover6.Target, null, children), /* @__PURE__ */ React288.createElement(
     Popover6.Dropdown,
     {
       style: {
@@ -31356,15 +31644,15 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
       },
       p: 0
     },
-    /* @__PURE__ */ React281.createElement(Stack191, { gap: "md", p: "md" }, /* @__PURE__ */ React281.createElement(Tabs4, { value: activeTab, onChange: setActiveTab, variant: "pills" }, /* @__PURE__ */ React281.createElement(Tabs4.List, null, /* @__PURE__ */ React281.createElement(Tabs4.Tab, { value: "icons" }, "Icons"), /* @__PURE__ */ React281.createElement(Tabs4.Tab, { value: "upload" }, "Upload")), /* @__PURE__ */ React281.createElement(Tabs4.Panel, { value: "icons", pt: "md" }, /* @__PURE__ */ React281.createElement(
+    /* @__PURE__ */ React288.createElement(Stack194, { gap: "md", p: "md" }, /* @__PURE__ */ React288.createElement(Tabs4, { value: activeTab, onChange: setActiveTab, variant: "pills" }, /* @__PURE__ */ React288.createElement(Tabs4.List, null, /* @__PURE__ */ React288.createElement(Tabs4.Tab, { value: "icons" }, "Icons"), /* @__PURE__ */ React288.createElement(Tabs4.Tab, { value: "upload" }, "Upload")), /* @__PURE__ */ React288.createElement(Tabs4.Panel, { value: "icons", pt: "md" }, /* @__PURE__ */ React288.createElement(
       TextInput8,
       {
         mb: "md",
         placeholder: "Filter",
-        leftSection: /* @__PURE__ */ React281.createElement(IconSearch7, { size: 18 }),
+        leftSection: /* @__PURE__ */ React288.createElement(IconSearch7, { size: 18 }),
         value: searchQuery,
         onChange: (e) => setSearchQuery(e.currentTarget.value),
-        rightSection: searchQuery && /* @__PURE__ */ React281.createElement(UnstyledButton5, { onClick: () => setSearchQuery("") }, /* @__PURE__ */ React281.createElement(IconX14, { size: 18 })),
+        rightSection: searchQuery && /* @__PURE__ */ React288.createElement(UnstyledButton5, { onClick: () => setSearchQuery("") }, /* @__PURE__ */ React288.createElement(IconX14, { size: 18 })),
         style: { flex: 1 },
         styles: {
           input: {
@@ -31374,26 +31662,26 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
           }
         }
       }
-    ), !searchQuery && /* @__PURE__ */ React281.createElement(Box55, { mb: "md" }, /* @__PURE__ */ React281.createElement(Text162, { size: "sm", fw: 500, mb: "xs", px: "xs" }, "Recent"), /* @__PURE__ */ React281.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 60 }, renderIconGrid(recentIcons))), /* @__PURE__ */ React281.createElement(Box55, null, /* @__PURE__ */ React281.createElement(Group103, { justify: "space-between", mb: "xs", px: "xs" }, /* @__PURE__ */ React281.createElement(Text162, { size: "sm", fw: 500 }, searchQuery ? "Results" : "Icons"), totalPages > 1 && /* @__PURE__ */ React281.createElement(Group103, { gap: "xs" }, /* @__PURE__ */ React281.createElement(Text162, { size: "xs", c: "dimmed" }, "Page ", currentPage, " of ", totalPages, " (", filteredIcons.length, " total)"), /* @__PURE__ */ React281.createElement(BaseButton, { size: "xs", onClick: () => setCurrentPage((p) => Math.max(1, p - 1)), disabled: currentPage === 1, leftSection: /* @__PURE__ */ React281.createElement(IconChevronLeft, { size: 14 }) }, "Prev"), /* @__PURE__ */ React281.createElement(
+    ), !searchQuery && /* @__PURE__ */ React288.createElement(Box57, { mb: "md" }, /* @__PURE__ */ React288.createElement(Text165, { size: "sm", fw: 500, mb: "xs", px: "xs" }, "Recent"), /* @__PURE__ */ React288.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 60 }, renderIconGrid(recentIcons))), /* @__PURE__ */ React288.createElement(Box57, null, /* @__PURE__ */ React288.createElement(Group105, { justify: "space-between", mb: "xs", px: "xs" }, /* @__PURE__ */ React288.createElement(Text165, { size: "sm", fw: 500 }, searchQuery ? "Results" : "Icons"), totalPages > 1 && /* @__PURE__ */ React288.createElement(Group105, { gap: "xs" }, /* @__PURE__ */ React288.createElement(Text165, { size: "xs", c: "dimmed" }, "Page ", currentPage, " of ", totalPages, " (", filteredIcons.length, " total)"), /* @__PURE__ */ React288.createElement(BaseButton, { size: "xs", onClick: () => setCurrentPage((p) => Math.max(1, p - 1)), disabled: currentPage === 1, leftSection: /* @__PURE__ */ React288.createElement(IconChevronLeft, { size: 14 }) }, "Prev"), /* @__PURE__ */ React288.createElement(
       BaseButton,
       {
         size: "xs",
         onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
         disabled: currentPage === totalPages,
-        leftSection: /* @__PURE__ */ React281.createElement(IconChevronRight14, { size: 14 })
+        leftSection: /* @__PURE__ */ React288.createElement(IconChevronRight14, { size: 14 })
       },
       "Next"
-    ))), /* @__PURE__ */ React281.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 200 }, renderIconGrid(paginatedIcons)))), /* @__PURE__ */ React281.createElement(Tabs4.Panel, { value: "upload", pt: "md" }, /* @__PURE__ */ React281.createElement(Center13, { py: "xl" }, /* @__PURE__ */ React281.createElement(Stack191, { align: "center", gap: "md" }, /* @__PURE__ */ React281.createElement(Text162, { size: "sm", c: "dimmed", ta: "center" }, "Upload a custom icon image", /* @__PURE__ */ React281.createElement("br", null), "(PNG, JPG, SVG)"), /* @__PURE__ */ React281.createElement(CoverImageButton, { onClick: onUploadClick }, "Choose File"))))))
+    ))), /* @__PURE__ */ React288.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 200 }, renderIconGrid(paginatedIcons)))), /* @__PURE__ */ React288.createElement(Tabs4.Panel, { value: "upload", pt: "md" }, /* @__PURE__ */ React288.createElement(Center13, { py: "xl" }, /* @__PURE__ */ React288.createElement(Stack194, { align: "center", gap: "md" }, /* @__PURE__ */ React288.createElement(Text165, { size: "sm", c: "dimmed", ta: "center" }, "Upload a custom icon image", /* @__PURE__ */ React288.createElement("br", null), "(PNG, JPG, SVG)"), /* @__PURE__ */ React288.createElement(CoverImageButton, { onClick: onUploadClick }, "Choose File"))))))
   ));
 }
 
 // src/mantine/components/Base/PageIcon.tsx
-import React282, { useMemo as useMemo116 } from "react";
-import { Center as Center14, Box as Box56 } from "@mantine/core";
+import React289, { useMemo as useMemo118 } from "react";
+import { Center as Center14, Box as Box58 } from "@mantine/core";
 import * as TablerIcons2 from "@tabler/icons-react";
 function PageIcon({ src, iconSize = 64, useCenter = false, style }) {
   const isIconName = src && !src.startsWith("http");
-  const IconComponent = useMemo116(() => {
+  const IconComponent = useMemo118(() => {
     if (!isIconName || !src) return null;
     const iconComponent = TablerIcons2[src];
     if (iconComponent) {
@@ -31401,10 +31689,10 @@ function PageIcon({ src, iconSize = 64, useCenter = false, style }) {
     }
     return null;
   }, [isIconName, src]);
-  const Container = useCenter ? Center14 : Box56;
+  const Container = useCenter ? Center14 : Box58;
   if (!src) return null;
   if (IconComponent) {
-    return /* @__PURE__ */ React282.createElement(
+    return /* @__PURE__ */ React289.createElement(
       Container,
       {
         style: {
@@ -31416,10 +31704,10 @@ function PageIcon({ src, iconSize = 64, useCenter = false, style }) {
           ...style
         }
       },
-      /* @__PURE__ */ React282.createElement(IconComponent, { size: iconSize, color: "white", stroke: 1.5 })
+      /* @__PURE__ */ React289.createElement(IconComponent, { size: iconSize, color: "white", stroke: 1.5 })
     );
   }
-  return /* @__PURE__ */ React282.createElement(
+  return /* @__PURE__ */ React289.createElement(
     "img",
     {
       src,
@@ -31440,14 +31728,14 @@ function PageIcon({ src, iconSize = 64, useCenter = false, style }) {
 import { useDisclosure as useDisclosure7 } from "@mantine/hooks";
 
 // src/mantine/components/FlowSettingsPanel.tsx
-import React283, { useState as useState128, useEffect as useEffect105, useCallback as useCallback103 } from "react";
-import { Stack as Stack192, Group as Group104, Button as Button52, ActionIcon as ActionIcon37, Text as Text163, Box as Box57 } from "@mantine/core";
+import React290, { useState as useState129, useEffect as useEffect106, useCallback as useCallback105 } from "react";
+import { Stack as Stack195, Group as Group106, Button as Button52, ActionIcon as ActionIcon37, Text as Text166, Box as Box59 } from "@mantine/core";
 import { IconPlus as IconPlus11, IconTrash as IconTrash10 } from "@tabler/icons-react";
 var SYSTEM_KEYS = /* @__PURE__ */ new Set(["@context", "_type", "schema_version", "doc_id", "title", "createdAt", "createdBy", "flowOwnerDid"]);
 var FlowSettingsPanel = ({ editor }) => {
   const { closePanel } = usePanelStore();
-  const [rows, setRows] = useState128([]);
-  const loadSettings = useCallback103(() => {
+  const [rows, setRows] = useState129([]);
+  const loadSettings = useCallback105(() => {
     const metadata = editor.getFlowMetadata?.();
     if (!metadata) return;
     const customRows = [];
@@ -31458,10 +31746,10 @@ var FlowSettingsPanel = ({ editor }) => {
     }
     setRows(customRows);
   }, [editor]);
-  useEffect105(() => {
+  useEffect106(() => {
     loadSettings();
   }, [loadSettings]);
-  const handleKeyChange = useCallback103(
+  const handleKeyChange = useCallback105(
     (index, newKey) => {
       setRows((prev) => {
         const updated = [...prev];
@@ -31478,7 +31766,7 @@ var FlowSettingsPanel = ({ editor }) => {
     },
     [editor]
   );
-  const handleValueChange = useCallback103(
+  const handleValueChange = useCallback105(
     (index, newValue) => {
       setRows((prev) => {
         const updated = [...prev];
@@ -31492,10 +31780,10 @@ var FlowSettingsPanel = ({ editor }) => {
     },
     [editor]
   );
-  const handleAdd = useCallback103(() => {
+  const handleAdd = useCallback105(() => {
     setRows((prev) => [...prev, { key: "", value: "" }]);
   }, []);
-  const handleDelete = useCallback103(
+  const handleDelete = useCallback105(
     (index) => {
       setRows((prev) => {
         const row = prev[index];
@@ -31507,23 +31795,23 @@ var FlowSettingsPanel = ({ editor }) => {
     },
     [editor]
   );
-  const subtitle = /* @__PURE__ */ React283.createElement(Box57, { px: 40, mb: "md" }, /* @__PURE__ */ React283.createElement(Text163, { size: "sm", c: "dimmed" }, "Add key-value settings for this flow. These are available to oracles and action blocks at runtime."));
-  return /* @__PURE__ */ React283.createElement(BaseRightPanelLayout, { title: "Flow Settings", onClose: closePanel, isTemplate: true, captionContent: subtitle }, /* @__PURE__ */ React283.createElement(Stack192, { gap: "lg" }, rows.map((row, index) => /* @__PURE__ */ React283.createElement(Stack192, { key: index, gap: "xs" }, /* @__PURE__ */ React283.createElement(Group104, { gap: "xs", align: "center", wrap: "nowrap" }, /* @__PURE__ */ React283.createElement(BaseTextInput, { placeholder: "Key (e.g. protocolDid)", value: row.key, onChange: (e) => handleKeyChange(index, e.currentTarget.value), style: { flex: 1 } }), /* @__PURE__ */ React283.createElement(ActionIcon37, { variant: "subtle", color: "red", onClick: () => handleDelete(index), size: "lg" }, /* @__PURE__ */ React283.createElement(IconTrash10, { size: 16 }))), /* @__PURE__ */ React283.createElement(BaseTextArea, { placeholder: "Value", value: row.value, onChange: (e) => handleValueChange(index, e.currentTarget.value), minRows: 1, maxRows: 8 }))), /* @__PURE__ */ React283.createElement(Button52, { variant: "subtle", leftSection: /* @__PURE__ */ React283.createElement(IconPlus11, { size: 16 }), onClick: handleAdd, size: "sm" }, "Add setting")));
+  const subtitle = /* @__PURE__ */ React290.createElement(Box59, { px: 40, mb: "md" }, /* @__PURE__ */ React290.createElement(Text166, { size: "sm", c: "dimmed" }, "Add key-value settings for this flow. These are available to oracles and action blocks at runtime."));
+  return /* @__PURE__ */ React290.createElement(BaseRightPanelLayout, { title: "Flow Settings", onClose: closePanel, isTemplate: true, captionContent: subtitle }, /* @__PURE__ */ React290.createElement(Stack195, { gap: "lg" }, rows.map((row, index) => /* @__PURE__ */ React290.createElement(Stack195, { key: index, gap: "xs" }, /* @__PURE__ */ React290.createElement(Group106, { gap: "xs", align: "center", wrap: "nowrap" }, /* @__PURE__ */ React290.createElement(BaseTextInput, { placeholder: "Key (e.g. protocolDid)", value: row.key, onChange: (e) => handleKeyChange(index, e.currentTarget.value), style: { flex: 1 } }), /* @__PURE__ */ React290.createElement(ActionIcon37, { variant: "subtle", color: "red", onClick: () => handleDelete(index), size: "lg" }, /* @__PURE__ */ React290.createElement(IconTrash10, { size: 16 }))), /* @__PURE__ */ React290.createElement(BaseTextArea, { placeholder: "Value", value: row.value, onChange: (e) => handleValueChange(index, e.currentTarget.value), minRows: 1, maxRows: 8 }))), /* @__PURE__ */ React290.createElement(Button52, { variant: "subtle", leftSection: /* @__PURE__ */ React290.createElement(IconPlus11, { size: 16 }), onClick: handleAdd, size: "sm" }, "Add setting")));
 };
 
 // src/mantine/components/CoverImage.tsx
 function CoverImage({ coverImageUrl, logoUrl }) {
   const { editor, handlers, editable } = useBlocknoteContext();
-  const [isHovering, setIsHovering] = useState129(false);
-  const [isRepositioning, setIsRepositioning] = useState129(false);
-  const [coverPosition, setCoverPosition] = useState129(() => editor?.getPageMetadata?.()?.coverPosition ?? 50);
+  const [isHovering, setIsHovering] = useState130(false);
+  const [isRepositioning, setIsRepositioning] = useState130(false);
+  const [coverPosition, setCoverPosition] = useState130(() => editor?.getPageMetadata?.()?.coverPosition ?? 50);
   const coverFileInputRef = useRef27(null);
   const logoFileInputRef = useRef27(null);
   const [opened, { open, close }] = useDisclosure7(false);
-  const [metadata, setMetadata] = useState129(() => editor?.getPageMetadata?.() || null);
-  const settingsPanelContent = useMemo117(() => editor ? /* @__PURE__ */ React284.createElement(FlowSettingsPanel, { editor }) : null, [editor]);
+  const [metadata, setMetadata] = useState130(() => editor?.getPageMetadata?.() || null);
+  const settingsPanelContent = useMemo119(() => editor ? /* @__PURE__ */ React291.createElement(FlowSettingsPanel, { editor }) : null, [editor]);
   const { open: openSettings } = usePanel("flow-settings-panel", settingsPanelContent);
-  useEffect106(() => {
+  useEffect107(() => {
     if (!editor?._metadataManager) {
       return;
     }
@@ -31611,8 +31899,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
     return null;
   }
   if (!hasCover) {
-    return /* @__PURE__ */ React284.createElement(
-      Box58,
+    return /* @__PURE__ */ React291.createElement(
+      Box60,
       {
         style: {
           position: "relative",
@@ -31624,8 +31912,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         onMouseEnter: () => editable && setIsHovering(true),
         onMouseLeave: () => editable && setIsHovering(false)
       },
-      /* @__PURE__ */ React284.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "relative", height: "100%" } }, /* @__PURE__ */ React284.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }), /* @__PURE__ */ React284.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") }), editable && isHovering && !logoSrc && /* @__PURE__ */ React284.createElement(
-        Group105,
+      /* @__PURE__ */ React291.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "relative", height: "100%" } }, /* @__PURE__ */ React291.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }), /* @__PURE__ */ React291.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") }), editable && isHovering && !logoSrc && /* @__PURE__ */ React291.createElement(
+        Group107,
         {
           gap: "xs",
           style: {
@@ -31635,7 +31923,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             zIndex: 10
           }
         },
-        /* @__PURE__ */ React284.createElement(
+        /* @__PURE__ */ React291.createElement(
           BaseIconPicker,
           {
             opened,
@@ -31644,12 +31932,12 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             onSelectIcon: (name) => handleSelectLogoIcon(name),
             onUploadClick: () => logoFileInputRef.current?.click()
           },
-          /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: open }, "Add icon")
+          /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: open }, "Add icon")
         ),
-        /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click() }, "Add cover"),
-        /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: openSettings }, "Settings")
-      ), logoSrc && /* @__PURE__ */ React284.createElement(
-        Box58,
+        /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click() }, "Add cover"),
+        /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: openSettings }, "Settings")
+      ), logoSrc && /* @__PURE__ */ React291.createElement(
+        Box60,
         {
           style: {
             position: "relative",
@@ -31662,8 +31950,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             zIndex: 11
           }
         },
-        /* @__PURE__ */ React284.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }),
-        editable && isHovering && /* @__PURE__ */ React284.createElement(
+        /* @__PURE__ */ React291.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }),
+        editable && isHovering && /* @__PURE__ */ React291.createElement(
           "div",
           {
             style: {
@@ -31678,7 +31966,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
               alignItems: "center"
             }
           },
-          /* @__PURE__ */ React284.createElement(
+          /* @__PURE__ */ React291.createElement(
             BaseIconPicker,
             {
               opened,
@@ -31687,17 +31975,17 @@ function CoverImage({ coverImageUrl, logoUrl }) {
               onSelectIcon: (name) => handleSelectLogoIcon(name),
               onUploadClick: () => logoFileInputRef.current?.click()
             },
-            /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: open }, "Change")
+            /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: open }, "Change")
           ),
-          /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: handleRemoveLogo }, "Remove"),
-          /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click() }, "Add cover"),
-          /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: openSettings }, "Settings")
+          /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: handleRemoveLogo }, "Remove"),
+          /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click() }, "Add cover"),
+          /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: openSettings }, "Settings")
         )
       ))
     );
   }
-  return /* @__PURE__ */ React284.createElement(
-    Box58,
+  return /* @__PURE__ */ React291.createElement(
+    Box60,
     {
       style: {
         position: "relative",
@@ -31724,7 +32012,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         }
       }
     },
-    /* @__PURE__ */ React284.createElement(
+    /* @__PURE__ */ React291.createElement(
       "img",
       {
         src: coverUrl,
@@ -31742,8 +32030,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         }
       }
     ),
-    editable && isHovering && /* @__PURE__ */ React284.createElement(
-      Group105,
+    editable && isHovering && /* @__PURE__ */ React291.createElement(
+      Group107,
       {
         gap: "xs",
         style: {
@@ -31753,8 +32041,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           zIndex: 10
         }
       },
-      /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click() }, "Change cover"),
-      /* @__PURE__ */ React284.createElement(
+      /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click() }, "Change cover"),
+      /* @__PURE__ */ React291.createElement(
         CoverImageButton,
         {
           onClick: () => {
@@ -31767,11 +32055,11 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         },
         isRepositioning ? "Done" : "Reposition"
       ),
-      /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: handleRemoveCover }, "Remove"),
-      /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: openSettings }, "Settings")
+      /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: handleRemoveCover }, "Remove"),
+      /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: openSettings }, "Settings")
     ),
-    /* @__PURE__ */ React284.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "absolute", bottom: 0, left: 0, right: 0, height: "70px" } }, /* @__PURE__ */ React284.createElement(
-      Box58,
+    /* @__PURE__ */ React291.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "absolute", bottom: 0, left: 0, right: 0, height: "70px" } }, /* @__PURE__ */ React291.createElement(
+      Box60,
       {
         style: {
           position: "absolute",
@@ -31782,9 +32070,9 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           zIndex: 11
         }
       },
-      logoSrc && /* @__PURE__ */ React284.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }),
-      editable && isHovering && /* @__PURE__ */ React284.createElement(React284.Fragment, null, logoSrc ? /* @__PURE__ */ React284.createElement(
-        Group105,
+      logoSrc && /* @__PURE__ */ React291.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }),
+      editable && isHovering && /* @__PURE__ */ React291.createElement(React291.Fragment, null, logoSrc ? /* @__PURE__ */ React291.createElement(
+        Group107,
         {
           gap: "xs",
           style: {
@@ -31794,7 +32082,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             zIndex: 12
           }
         },
-        /* @__PURE__ */ React284.createElement(
+        /* @__PURE__ */ React291.createElement(
           BaseIconPicker,
           {
             opened,
@@ -31803,10 +32091,10 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             onSelectIcon: (name) => handleSelectLogoIcon(name),
             onUploadClick: () => logoFileInputRef.current?.click()
           },
-          /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: open }, "Change")
+          /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: open }, "Change")
         ),
-        /* @__PURE__ */ React284.createElement(CoverImageButton, { onClick: handleRemoveLogo }, "Remove")
-      ) : /* @__PURE__ */ React284.createElement(
+        /* @__PURE__ */ React291.createElement(CoverImageButton, { onClick: handleRemoveLogo }, "Remove")
+      ) : /* @__PURE__ */ React291.createElement(
         BaseIconPicker,
         {
           opened,
@@ -31815,7 +32103,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           onSelectIcon: (name) => handleSelectLogoIcon(name),
           onUploadClick: () => logoFileInputRef.current?.click()
         },
-        /* @__PURE__ */ React284.createElement(
+        /* @__PURE__ */ React291.createElement(
           CoverImageButton,
           {
             onClick: open,
@@ -31831,13 +32119,13 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         )
       ))
     )),
-    /* @__PURE__ */ React284.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }),
-    /* @__PURE__ */ React284.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") })
+    /* @__PURE__ */ React291.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }),
+    /* @__PURE__ */ React291.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") })
   );
 }
 
 // src/mantine/components/PageHeader.tsx
-import React285, { useState as useState130, useRef as useRef28, useEffect as useEffect107 } from "react";
+import React292, { useState as useState131, useRef as useRef28, useEffect as useEffect108 } from "react";
 function PageHeader({
   title = "New page",
   icon: icon2,
@@ -31849,11 +32137,11 @@ function PageHeader({
   isFavorited = false,
   menuItems = []
 }) {
-  const [isMenuOpen, setIsMenuOpen] = useState130(false);
-  const [isPrivacyOpen, setIsPrivacyOpen] = useState130(false);
+  const [isMenuOpen, setIsMenuOpen] = useState131(false);
+  const [isPrivacyOpen, setIsPrivacyOpen] = useState131(false);
   const menuRef = useRef28(null);
   const privacyRef = useRef28(null);
-  useEffect107(() => {
+  useEffect108(() => {
     function handleClickOutside(event) {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
         setIsMenuOpen(false);
@@ -31875,7 +32163,7 @@ function PageHeader({
       setIsMenuOpen(false);
     }
   };
-  return /* @__PURE__ */ React285.createElement("div", { style: styles.container }, /* @__PURE__ */ React285.createElement("div", { style: styles.leftSection }, /* @__PURE__ */ React285.createElement("span", { style: styles.icon }, icon2 || "\u{1F4C4}"), /* @__PURE__ */ React285.createElement("span", { style: styles.title }, title), /* @__PURE__ */ React285.createElement("div", { style: styles.privacyContainer, ref: privacyRef }, /* @__PURE__ */ React285.createElement("button", { style: styles.privacyBadge, onClick: () => onPrivacyChange && setIsPrivacyOpen(!isPrivacyOpen) }, /* @__PURE__ */ React285.createElement("span", { style: styles.lockIcon }, isPrivate ? "\u{1F512}" : "\u{1F310}"), /* @__PURE__ */ React285.createElement("span", null, isPrivate ? "Private" : "Public"), onPrivacyChange && /* @__PURE__ */ React285.createElement("span", { style: styles.chevron }, "\u25BE")), isPrivacyOpen && onPrivacyChange && /* @__PURE__ */ React285.createElement("div", { style: styles.dropdown }, /* @__PURE__ */ React285.createElement(
+  return /* @__PURE__ */ React292.createElement("div", { style: styles.container }, /* @__PURE__ */ React292.createElement("div", { style: styles.leftSection }, /* @__PURE__ */ React292.createElement("span", { style: styles.icon }, icon2 || "\u{1F4C4}"), /* @__PURE__ */ React292.createElement("span", { style: styles.title }, title), /* @__PURE__ */ React292.createElement("div", { style: styles.privacyContainer, ref: privacyRef }, /* @__PURE__ */ React292.createElement("button", { style: styles.privacyBadge, onClick: () => onPrivacyChange && setIsPrivacyOpen(!isPrivacyOpen) }, /* @__PURE__ */ React292.createElement("span", { style: styles.lockIcon }, isPrivate ? "\u{1F512}" : "\u{1F310}"), /* @__PURE__ */ React292.createElement("span", null, isPrivate ? "Private" : "Public"), onPrivacyChange && /* @__PURE__ */ React292.createElement("span", { style: styles.chevron }, "\u25BE")), isPrivacyOpen && onPrivacyChange && /* @__PURE__ */ React292.createElement("div", { style: styles.dropdown }, /* @__PURE__ */ React292.createElement(
     "button",
     {
       style: {
@@ -31887,9 +32175,9 @@ function PageHeader({
         setIsPrivacyOpen(false);
       }
     },
-    /* @__PURE__ */ React285.createElement("span", { style: styles.menuItemIcon }, "\u{1F512}"),
-    /* @__PURE__ */ React285.createElement("span", null, "Private")
-  ), /* @__PURE__ */ React285.createElement(
+    /* @__PURE__ */ React292.createElement("span", { style: styles.menuItemIcon }, "\u{1F512}"),
+    /* @__PURE__ */ React292.createElement("span", null, "Private")
+  ), /* @__PURE__ */ React292.createElement(
     "button",
     {
       style: {
@@ -31901,9 +32189,9 @@ function PageHeader({
         setIsPrivacyOpen(false);
       }
     },
-    /* @__PURE__ */ React285.createElement("span", { style: styles.menuItemIcon }, "\u{1F310}"),
-    /* @__PURE__ */ React285.createElement("span", null, "Public")
-  )))), /* @__PURE__ */ React285.createElement("div", { style: styles.rightSection }, lastEdited && /* @__PURE__ */ React285.createElement("span", { style: styles.editedText }, lastEdited), onShare && /* @__PURE__ */ React285.createElement("button", { style: styles.shareButton, onClick: onShare }, "Share"), onFavorite && /* @__PURE__ */ React285.createElement("button", { style: styles.iconButton, onClick: onFavorite }, isFavorited ? "\u2605" : "\u2606"), menuItems.length > 0 && /* @__PURE__ */ React285.createElement("div", { style: styles.menuContainer, ref: menuRef }, /* @__PURE__ */ React285.createElement("button", { style: styles.menuButton, onClick: () => setIsMenuOpen(!isMenuOpen), "aria-label": "Menu" }, /* @__PURE__ */ React285.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, /* @__PURE__ */ React285.createElement("circle", { cx: "3", cy: "8", r: "1.5" }), /* @__PURE__ */ React285.createElement("circle", { cx: "8", cy: "8", r: "1.5" }), /* @__PURE__ */ React285.createElement("circle", { cx: "13", cy: "8", r: "1.5" }))), isMenuOpen && /* @__PURE__ */ React285.createElement("div", { style: styles.dropdown }, menuItems.map((item, index) => /* @__PURE__ */ React285.createElement(React285.Fragment, { key: index }, item.divider && index > 0 && /* @__PURE__ */ React285.createElement("div", { style: styles.divider }), /* @__PURE__ */ React285.createElement(
+    /* @__PURE__ */ React292.createElement("span", { style: styles.menuItemIcon }, "\u{1F310}"),
+    /* @__PURE__ */ React292.createElement("span", null, "Public")
+  )))), /* @__PURE__ */ React292.createElement("div", { style: styles.rightSection }, lastEdited && /* @__PURE__ */ React292.createElement("span", { style: styles.editedText }, lastEdited), onShare && /* @__PURE__ */ React292.createElement("button", { style: styles.shareButton, onClick: onShare }, "Share"), onFavorite && /* @__PURE__ */ React292.createElement("button", { style: styles.iconButton, onClick: onFavorite }, isFavorited ? "\u2605" : "\u2606"), menuItems.length > 0 && /* @__PURE__ */ React292.createElement("div", { style: styles.menuContainer, ref: menuRef }, /* @__PURE__ */ React292.createElement("button", { style: styles.menuButton, onClick: () => setIsMenuOpen(!isMenuOpen), "aria-label": "Menu" }, /* @__PURE__ */ React292.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, /* @__PURE__ */ React292.createElement("circle", { cx: "3", cy: "8", r: "1.5" }), /* @__PURE__ */ React292.createElement("circle", { cx: "8", cy: "8", r: "1.5" }), /* @__PURE__ */ React292.createElement("circle", { cx: "13", cy: "8", r: "1.5" }))), isMenuOpen && /* @__PURE__ */ React292.createElement("div", { style: styles.dropdown }, menuItems.map((item, index) => /* @__PURE__ */ React292.createElement(React292.Fragment, { key: index }, item.divider && index > 0 && /* @__PURE__ */ React292.createElement("div", { style: styles.divider }), /* @__PURE__ */ React292.createElement(
     "button",
     {
       style: {
@@ -31913,8 +32201,8 @@ function PageHeader({
       onClick: () => handleMenuItemClick(item),
       disabled: item.disabled
     },
-    item.icon && /* @__PURE__ */ React285.createElement("span", { style: styles.menuItemIcon }, item.icon),
-    /* @__PURE__ */ React285.createElement("span", null, item.label)
+    item.icon && /* @__PURE__ */ React292.createElement("span", { style: styles.menuItemIcon }, item.icon),
+    /* @__PURE__ */ React292.createElement("span", null, item.label)
   )))))));
 }
 var styles = {
@@ -32051,8 +32339,8 @@ var styles = {
 };
 
 // src/mantine/components/ExternalDropZone.tsx
-import React286, { useCallback as useCallback104, useEffect as useEffect108, useRef as useRef29, useState as useState131 } from "react";
-import { Box as Box59 } from "@mantine/core";
+import React293, { useCallback as useCallback106, useEffect as useEffect109, useRef as useRef29, useState as useState132 } from "react";
+import { Box as Box61 } from "@mantine/core";
 var SCROLL_ZONE_SIZE = 80;
 var SCROLL_SPEED = 12;
 var ExternalDropZone = ({
@@ -32065,19 +32353,19 @@ var ExternalDropZone = ({
   children
 }) => {
   const containerRef = useRef29(null);
-  const [isValidDrag, setIsValidDrag] = useState131(false);
-  const [isHoveringInPlacementMode, setIsHoveringInPlacementMode] = useState131(false);
-  const [indicatorStyle, setIndicatorStyle] = useState131({});
+  const [isValidDrag, setIsValidDrag] = useState132(false);
+  const [isHoveringInPlacementMode, setIsHoveringInPlacementMode] = useState132(false);
+  const [indicatorStyle, setIndicatorStyle] = useState132({});
   const dropPositionRef = useRef29(null);
   const scrollAnimationRef = useRef29(null);
   const scrollDirectionRef = useRef29(null);
   const scrollContainerRef = useRef29(null);
-  const getBlockElements = useCallback104(() => {
+  const getBlockElements = useCallback106(() => {
     if (!containerRef.current) return [];
     const blocks = containerRef.current.querySelectorAll('[data-node-type="blockContainer"]');
     return Array.from(blocks);
   }, []);
-  const getScrollContainer = useCallback104(() => {
+  const getScrollContainer = useCallback106(() => {
     if (scrollContainerRef.current) return scrollContainerRef.current;
     let element = containerRef.current;
     while (element) {
@@ -32092,7 +32380,7 @@ var ExternalDropZone = ({
     scrollContainerRef.current = window;
     return window;
   }, []);
-  const performScroll = useCallback104(() => {
+  const performScroll = useCallback106(() => {
     const container = getScrollContainer();
     const direction = scrollDirectionRef.current;
     if (!direction) {
@@ -32107,7 +32395,7 @@ var ExternalDropZone = ({
     }
     scrollAnimationRef.current = requestAnimationFrame(performScroll);
   }, [getScrollContainer]);
-  const startAutoScroll = useCallback104(
+  const startAutoScroll = useCallback106(
     (direction) => {
       if (scrollDirectionRef.current === direction) return;
       scrollDirectionRef.current = direction;
@@ -32117,14 +32405,14 @@ var ExternalDropZone = ({
     },
     [performScroll]
   );
-  const stopAutoScroll = useCallback104(() => {
+  const stopAutoScroll = useCallback106(() => {
     scrollDirectionRef.current = null;
     if (scrollAnimationRef.current) {
       cancelAnimationFrame(scrollAnimationRef.current);
       scrollAnimationRef.current = null;
     }
   }, []);
-  const checkAutoScroll = useCallback104(
+  const checkAutoScroll = useCallback106(
     (clientY) => {
       const container = getScrollContainer();
       let containerTop;
@@ -32147,7 +32435,7 @@ var ExternalDropZone = ({
     },
     [getScrollContainer, startAutoScroll, stopAutoScroll]
   );
-  const findDropPosition = useCallback104(
+  const findDropPosition = useCallback106(
     (clientY) => {
       const blocks = getBlockElements();
       if (blocks.length === 0 || !editor?.document) return null;
@@ -32180,7 +32468,7 @@ var ExternalDropZone = ({
     },
     [getBlockElements, editor]
   );
-  const handleDragOver = useCallback104(
+  const handleDragOver = useCallback106(
     (e) => {
       if (!e.dataTransfer.types.includes(acceptedType)) return;
       e.preventDefault();
@@ -32203,7 +32491,7 @@ var ExternalDropZone = ({
     },
     [acceptedType, findDropPosition, checkAutoScroll]
   );
-  const handleDragLeave = useCallback104(
+  const handleDragLeave = useCallback106(
     (e) => {
       if (containerRef.current && !containerRef.current.contains(e.relatedTarget)) {
         setIsValidDrag(false);
@@ -32213,7 +32501,7 @@ var ExternalDropZone = ({
     },
     [stopAutoScroll]
   );
-  const handleDrop = useCallback104(
+  const handleDrop = useCallback106(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -32227,7 +32515,7 @@ var ExternalDropZone = ({
     },
     [onDrop, stopAutoScroll]
   );
-  useEffect108(() => {
+  useEffect109(() => {
     const handleGlobalDragEnd = () => {
       setIsValidDrag(false);
       dropPositionRef.current = null;
@@ -32236,7 +32524,7 @@ var ExternalDropZone = ({
     window.addEventListener("dragend", handleGlobalDragEnd);
     return () => window.removeEventListener("dragend", handleGlobalDragEnd);
   }, [stopAutoScroll]);
-  const handleOverlayMouseMove = useCallback104(
+  const handleOverlayMouseMove = useCallback106(
     (e) => {
       setIsHoveringInPlacementMode(true);
       checkAutoScroll(e.clientY);
@@ -32255,12 +32543,12 @@ var ExternalDropZone = ({
     },
     [findDropPosition, checkAutoScroll]
   );
-  const handleOverlayMouseLeave = useCallback104(() => {
+  const handleOverlayMouseLeave = useCallback106(() => {
     setIsHoveringInPlacementMode(false);
     dropPositionRef.current = null;
     stopAutoScroll();
   }, [stopAutoScroll]);
-  const handleOverlayClick = useCallback104(
+  const handleOverlayClick = useCallback106(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -32274,7 +32562,7 @@ var ExternalDropZone = ({
     },
     [onDrop, stopAutoScroll]
   );
-  const handleOverlayWheel = useCallback104(
+  const handleOverlayWheel = useCallback106(
     (e) => {
       const container = getScrollContainer();
       if (container === window) {
@@ -32285,7 +32573,7 @@ var ExternalDropZone = ({
     },
     [getScrollContainer]
   );
-  useEffect108(() => {
+  useEffect109(() => {
     if (!isPlacementMode) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -32308,13 +32596,13 @@ var ExternalDropZone = ({
       document.removeEventListener("click", handleGlobalClick, true);
     };
   }, [isPlacementMode, onPlacementCancel]);
-  useEffect108(() => {
+  useEffect109(() => {
     if (!isPlacementMode) {
       setIsHoveringInPlacementMode(false);
       dropPositionRef.current = null;
     }
   }, [isPlacementMode]);
-  useEffect108(() => {
+  useEffect109(() => {
     const isActive = isValidDrag || isPlacementMode && isHoveringInPlacementMode;
     if (isActive) {
       document.body.classList.add("external-artifact-drag-active");
@@ -32325,19 +32613,19 @@ var ExternalDropZone = ({
       document.body.classList.remove("external-artifact-drag-active");
     };
   }, [isValidDrag, isPlacementMode, isHoveringInPlacementMode]);
-  useEffect108(() => {
+  useEffect109(() => {
     return () => {
       if (scrollAnimationRef.current) {
         cancelAnimationFrame(scrollAnimationRef.current);
       }
     };
   }, []);
-  const indicatorWithPosition = dropIndicator && React286.isValidElement(dropIndicator) ? React286.cloneElement(dropIndicator, {
+  const indicatorWithPosition = dropIndicator && React293.isValidElement(dropIndicator) ? React293.cloneElement(dropIndicator, {
     indicatorTop: typeof indicatorStyle.top === "number" ? indicatorStyle.top : void 0
   }) : dropIndicator;
   const shouldShowIndicator = isValidDrag || isPlacementMode && isHoveringInPlacementMode;
-  return /* @__PURE__ */ React286.createElement(
-    Box59,
+  return /* @__PURE__ */ React293.createElement(
+    Box61,
     {
       ref: containerRef,
       style: {
@@ -32352,8 +32640,8 @@ var ExternalDropZone = ({
       "data-placement-mode": isPlacementMode ? "true" : void 0
     },
     children,
-    isPlacementMode && /* @__PURE__ */ React286.createElement(
-      Box59,
+    isPlacementMode && /* @__PURE__ */ React293.createElement(
+      Box61,
       {
         style: {
           position: "absolute",
@@ -32372,7 +32660,7 @@ var ExternalDropZone = ({
         onWheel: handleOverlayWheel
       }
     ),
-    shouldShowIndicator && indicatorWithPosition && /* @__PURE__ */ React286.createElement(Box59, { style: { ...indicatorStyle, background: "none", border: "none", boxShadow: "none" } }, indicatorWithPosition)
+    shouldShowIndicator && indicatorWithPosition && /* @__PURE__ */ React293.createElement(Box61, { style: { ...indicatorStyle, background: "none", border: "none", boxShadow: "none" } }, indicatorWithPosition)
   );
 };
 
@@ -32398,8 +32686,8 @@ function IxoEditorContent({
 }) {
   const { activePanel } = usePanelStore();
   const isPanelOpen = activePanel !== null;
-  const [isRoomPrivate, setIsRoomPrivate] = useState132(pageHeaderProps?.isPrivate ?? true);
-  useEffect109(() => {
+  const [isRoomPrivate, setIsRoomPrivate] = useState133(pageHeaderProps?.isPrivate ?? true);
+  useEffect110(() => {
     const matrixClient = editor.getMatrixClient?.();
     const roomId = editor.getRoomId?.();
     if (!matrixClient || !roomId) return;
@@ -32415,7 +32703,7 @@ function IxoEditorContent({
     } catch {
     }
   }, [editor]);
-  const handlePrivacyChange = useCallback105(
+  const handlePrivacyChange = useCallback107(
     async (makePrivate) => {
       const matrixClient = editor.getMatrixClient?.();
       const roomId = editor.getRoomId?.();
@@ -32436,7 +32724,7 @@ function IxoEditorContent({
     },
     [editor]
   );
-  const editorContent = /* @__PURE__ */ React287.createElement(
+  const editorContent = /* @__PURE__ */ React294.createElement(
     BlockNoteView,
     {
       editor,
@@ -32451,7 +32739,7 @@ function IxoEditorContent({
       onChange,
       onSelectionChange
     },
-    config.slashMenu && /* @__PURE__ */ React287.createElement(
+    config.slashMenu && /* @__PURE__ */ React294.createElement(
       SuggestionMenuController,
       {
         triggerCharacter: "/",
@@ -32469,7 +32757,7 @@ function IxoEditorContent({
     ),
     children
   );
-  return /* @__PURE__ */ React287.createElement("div", { style: { display: "flex", height: "100%", width: "100%", gap: 0 } }, /* @__PURE__ */ React287.createElement(
+  return /* @__PURE__ */ React294.createElement("div", { style: { display: "flex", height: "100%", width: "100%", gap: 0 } }, /* @__PURE__ */ React294.createElement(
     "div",
     {
       className: `ixo-editor ixo-editor--theme-${config.theme} ${className}`,
@@ -32478,9 +32766,9 @@ function IxoEditorContent({
         transition: "width 0.2s ease"
       }
     },
-    selfNav && /* @__PURE__ */ React287.createElement(PageHeader, { ...pageHeaderProps, isPrivate: isRoomPrivate, onPrivacyChange: handlePrivacyChange }),
-    /* @__PURE__ */ React287.createElement(CoverImage, { coverImageUrl, logoUrl }),
-    (onExternalDrop || isPlacementMode) && isEditable ? /* @__PURE__ */ React287.createElement(
+    selfNav && /* @__PURE__ */ React294.createElement(PageHeader, { ...pageHeaderProps, isPrivate: isRoomPrivate, onPrivacyChange: handlePrivacyChange }),
+    /* @__PURE__ */ React294.createElement(CoverImage, { coverImageUrl, logoUrl }),
+    (onExternalDrop || isPlacementMode) && isEditable ? /* @__PURE__ */ React294.createElement(
       ExternalDropZone,
       {
         editor,
@@ -32493,7 +32781,7 @@ function IxoEditorContent({
       },
       editorContent
     ) : editorContent
-  ), isPanelVisible && /* @__PURE__ */ React287.createElement(PanelContent, { theme: config.theme }));
+  ), isPanelVisible && /* @__PURE__ */ React294.createElement(PanelContent, { theme: config.theme }));
 }
 function IxoEditor({
   editor,
@@ -32536,7 +32824,7 @@ function IxoEditor({
     tableHandles: true
   };
   const isEditable = editable;
-  const editorContent = /* @__PURE__ */ React287.createElement(
+  const editorContent = /* @__PURE__ */ React294.createElement(
     BlocknoteProvider,
     {
       editor,
@@ -32551,7 +32839,7 @@ function IxoEditor({
       connectedUsers,
       awarenessInstance
     },
-    /* @__PURE__ */ React287.createElement(
+    /* @__PURE__ */ React294.createElement(
       IxoEditorContent,
       {
         isPanelVisible,
@@ -32575,13 +32863,13 @@ function IxoEditor({
     )
   );
   if (mantineTheme) {
-    return /* @__PURE__ */ React287.createElement(MantineProvider, { theme: mantineTheme }, editorContent);
+    return /* @__PURE__ */ React294.createElement(MantineProvider, { theme: mantineTheme }, editorContent);
   }
   return editorContent;
 }
 
 // src/mantine/components/DebugButton.tsx
-import React288 from "react";
+import React295 from "react";
 function DebugButton({ editor }) {
   const yMapToObject = (map) => {
     if (!map) return null;
@@ -32608,7 +32896,7 @@ function DebugButton({ editor }) {
     const json = JSON.stringify(dump, null, 2);
     console.log("Editor Debug Dump:\n" + json);
   };
-  return /* @__PURE__ */ React288.createElement(
+  return /* @__PURE__ */ React295.createElement(
     "button",
     {
       onClick: handleClick,
@@ -32634,15 +32922,15 @@ function DebugButton({ editor }) {
 }
 
 // src/mantine/components/EntitySigningSetup.tsx
-import React289, { useState as useState133 } from "react";
-import { Modal as Modal3, Stack as Stack193, Text as Text164, TextInput as TextInput9, Button as Button53, Alert as Alert53, Group as Group106 } from "@mantine/core";
+import React296, { useState as useState134 } from "react";
+import { Modal as Modal3, Stack as Stack196, Text as Text167, TextInput as TextInput9, Button as Button53, Alert as Alert53, Group as Group108 } from "@mantine/core";
 import { IconAlertCircle as IconAlertCircle20, IconCheck as IconCheck23, IconKey as IconKey2 } from "@tabler/icons-react";
 var EntitySigningSetup = ({ opened, onClose, entityDid, entityName, onSetup }) => {
-  const [pin, setPin] = useState133("");
-  const [confirmPin, setConfirmPin] = useState133("");
-  const [loading, setLoading] = useState133(false);
-  const [error, setError] = useState133(null);
-  const [success, setSuccess] = useState133(false);
+  const [pin, setPin] = useState134("");
+  const [confirmPin, setConfirmPin] = useState134("");
+  const [loading, setLoading] = useState134(false);
+  const [error, setError] = useState134(null);
+  const [success, setSuccess] = useState134(false);
   const handleSetup = async () => {
     if (pin.length < 4) {
       setError("PIN must be at least 4 characters");
@@ -32682,15 +32970,15 @@ var EntitySigningSetup = ({ opened, onClose, entityDid, entityName, onSetup }) =
       setSuccess(false);
     }
   };
-  return /* @__PURE__ */ React289.createElement(
+  return /* @__PURE__ */ React296.createElement(
     Modal3,
     {
       opened,
       onClose: handleClose,
-      title: /* @__PURE__ */ React289.createElement(Group106, { gap: "xs" }, /* @__PURE__ */ React289.createElement(IconKey2, { size: 20 }), /* @__PURE__ */ React289.createElement(Text164, { fw: 600 }, "Entity Signing Setup")),
+      title: /* @__PURE__ */ React296.createElement(Group108, { gap: "xs" }, /* @__PURE__ */ React296.createElement(IconKey2, { size: 20 }), /* @__PURE__ */ React296.createElement(Text167, { fw: 600 }, "Entity Signing Setup")),
       size: "md"
     },
-    /* @__PURE__ */ React289.createElement(Stack193, { gap: "md" }, success ? /* @__PURE__ */ React289.createElement(Alert53, { color: "green", icon: /* @__PURE__ */ React289.createElement(IconCheck23, { size: 16 }) }, "Entity signing key set up successfully!") : /* @__PURE__ */ React289.createElement(React289.Fragment, null, /* @__PURE__ */ React289.createElement(Text164, { size: "sm", c: "dimmed" }, "Flow authorization requires a signing key for", " ", /* @__PURE__ */ React289.createElement(Text164, { span: true, fw: 500 }, entityName || entityDid), "."), /* @__PURE__ */ React289.createElement(Alert53, { color: "blue", variant: "light" }, /* @__PURE__ */ React289.createElement(Text164, { size: "sm" }, "This is a ", /* @__PURE__ */ React289.createElement("strong", null, "one-time setup"), " that allows flows to grant permissions without requiring wallet signatures for each delegation.")), /* @__PURE__ */ React289.createElement(Stack193, { gap: "xs" }, /* @__PURE__ */ React289.createElement(Text164, { size: "sm", fw: 500 }, "What happens:"), /* @__PURE__ */ React289.createElement(Text164, { size: "sm", c: "dimmed" }, "1. A new signing key is generated"), /* @__PURE__ */ React289.createElement(Text164, { size: "sm", c: "dimmed" }, "2. Key is registered on the entity's DID document (requires wallet)"), /* @__PURE__ */ React289.createElement(Text164, { size: "sm", c: "dimmed" }, "3. Key is stored encrypted in the entity's Matrix room")), /* @__PURE__ */ React289.createElement(
+    /* @__PURE__ */ React296.createElement(Stack196, { gap: "md" }, success ? /* @__PURE__ */ React296.createElement(Alert53, { color: "green", icon: /* @__PURE__ */ React296.createElement(IconCheck23, { size: 16 }) }, "Entity signing key set up successfully!") : /* @__PURE__ */ React296.createElement(React296.Fragment, null, /* @__PURE__ */ React296.createElement(Text167, { size: "sm", c: "dimmed" }, "Flow authorization requires a signing key for", " ", /* @__PURE__ */ React296.createElement(Text167, { span: true, fw: 500 }, entityName || entityDid), "."), /* @__PURE__ */ React296.createElement(Alert53, { color: "blue", variant: "light" }, /* @__PURE__ */ React296.createElement(Text167, { size: "sm" }, "This is a ", /* @__PURE__ */ React296.createElement("strong", null, "one-time setup"), " that allows flows to grant permissions without requiring wallet signatures for each delegation.")), /* @__PURE__ */ React296.createElement(Stack196, { gap: "xs" }, /* @__PURE__ */ React296.createElement(Text167, { size: "sm", fw: 500 }, "What happens:"), /* @__PURE__ */ React296.createElement(Text167, { size: "sm", c: "dimmed" }, "1. A new signing key is generated"), /* @__PURE__ */ React296.createElement(Text167, { size: "sm", c: "dimmed" }, "2. Key is registered on the entity's DID document (requires wallet)"), /* @__PURE__ */ React296.createElement(Text167, { size: "sm", c: "dimmed" }, "3. Key is stored encrypted in the entity's Matrix room")), /* @__PURE__ */ React296.createElement(
       TextInput9,
       {
         label: "Enter PIN to encrypt signing key",
@@ -32701,20 +32989,20 @@ var EntitySigningSetup = ({ opened, onClose, entityDid, entityName, onSetup }) =
         onChange: (e) => setPin(e.currentTarget.value),
         disabled: loading
       }
-    ), /* @__PURE__ */ React289.createElement(TextInput9, { label: "Confirm PIN", type: "password", placeholder: "Confirm PIN", value: confirmPin, onChange: (e) => setConfirmPin(e.currentTarget.value), disabled: loading }), error && /* @__PURE__ */ React289.createElement(Alert53, { color: "red", icon: /* @__PURE__ */ React289.createElement(IconAlertCircle20, { size: 16 }) }, error), /* @__PURE__ */ React289.createElement(Group106, { justify: "flex-end", mt: "md" }, /* @__PURE__ */ React289.createElement(Button53, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React289.createElement(Button53, { onClick: handleSetup, loading, leftSection: /* @__PURE__ */ React289.createElement(IconKey2, { size: 16 }) }, "Setup Entity Signing"))))
+    ), /* @__PURE__ */ React296.createElement(TextInput9, { label: "Confirm PIN", type: "password", placeholder: "Confirm PIN", value: confirmPin, onChange: (e) => setConfirmPin(e.currentTarget.value), disabled: loading }), error && /* @__PURE__ */ React296.createElement(Alert53, { color: "red", icon: /* @__PURE__ */ React296.createElement(IconAlertCircle20, { size: 16 }) }, error), /* @__PURE__ */ React296.createElement(Group108, { justify: "flex-end", mt: "md" }, /* @__PURE__ */ React296.createElement(Button53, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React296.createElement(Button53, { onClick: handleSetup, loading, leftSection: /* @__PURE__ */ React296.createElement(IconKey2, { size: 16 }) }, "Setup Entity Signing"))))
   );
 };
 
 // src/mantine/components/FlowPermissionsPanel.tsx
-import React290, { useState as useState134, useEffect as useEffect110, useMemo as useMemo118 } from "react";
-import { Stack as Stack194, Text as Text165, Paper as Paper18, Group as Group107, Badge as Badge43, Button as Button54, ActionIcon as ActionIcon38, Loader as Loader54, Alert as Alert54, Divider as Divider29 } from "@mantine/core";
+import React297, { useState as useState135, useEffect as useEffect111, useMemo as useMemo120 } from "react";
+import { Stack as Stack197, Text as Text168, Paper as Paper18, Group as Group109, Badge as Badge43, Button as Button54, ActionIcon as ActionIcon38, Loader as Loader54, Alert as Alert54, Divider as Divider29 } from "@mantine/core";
 import { IconPlus as IconPlus12, IconTrash as IconTrash11, IconShieldCheck as IconShieldCheck15, IconUser as IconUser14, IconRobot as IconRobot4, IconBuilding as IconBuilding2 } from "@tabler/icons-react";
 var FlowPermissionsPanel = ({ editor, entityDid, entityName, onGrantPermission, onRevokePermission, getUserDisplayName }) => {
-  const [delegations, setDelegations] = useState134([]);
-  const [loading, setLoading] = useState134(true);
-  const [revoking, setRevoking] = useState134(null);
-  const rootCapability = useMemo118(() => editor.getRootCapability?.(), [editor]);
-  useEffect110(() => {
+  const [delegations, setDelegations] = useState135([]);
+  const [loading, setLoading] = useState135(true);
+  const [revoking, setRevoking] = useState135(null);
+  const rootCapability = useMemo120(() => editor.getRootCapability?.(), [editor]);
+  useEffect111(() => {
     const loadDelegations = async () => {
       setLoading(true);
       const allDelegations = editor.getAllDelegations?.() || [];
@@ -32753,11 +33041,11 @@ var FlowPermissionsPanel = ({ editor, entityDid, entityName, onGrantPermission,
   const getIcon2 = (type) => {
     switch (type) {
       case "oracle":
-        return /* @__PURE__ */ React290.createElement(IconRobot4, { size: 16 });
+        return /* @__PURE__ */ React297.createElement(IconRobot4, { size: 16 });
       case "entity":
-        return /* @__PURE__ */ React290.createElement(IconBuilding2, { size: 16 });
+        return /* @__PURE__ */ React297.createElement(IconBuilding2, { size: 16 });
       default:
-        return /* @__PURE__ */ React290.createElement(IconUser14, { size: 16 });
+        return /* @__PURE__ */ React297.createElement(IconUser14, { size: 16 });
     }
   };
   const formatCapabilities = (caps) => {
@@ -32776,32 +33064,32 @@ var FlowPermissionsPanel = ({ editor, entityDid, entityName, onGrantPermission,
     if (date < /* @__PURE__ */ new Date()) return "Expired";
     return date.toLocaleDateString();
   };
-  return /* @__PURE__ */ React290.createElement(Stack194, { gap: "md" }, /* @__PURE__ */ React290.createElement(Stack194, { gap: "xs" }, /* @__PURE__ */ React290.createElement(Text165, { fw: 600, size: "sm" }, "Root Authority"), /* @__PURE__ */ React290.createElement(Paper18, { p: "sm", withBorder: true }, /* @__PURE__ */ React290.createElement(Group107, { gap: "xs" }, /* @__PURE__ */ React290.createElement(IconShieldCheck15, { size: 20, color: "var(--mantine-color-green-6)" }), /* @__PURE__ */ React290.createElement(Stack194, { gap: 2, style: { flex: 1 } }, /* @__PURE__ */ React290.createElement(Text165, { size: "sm", fw: 500 }, entityName || entityDid), /* @__PURE__ */ React290.createElement(Text165, { size: "xs", c: "dimmed" }, rootCapability ? `Granted: ${new Date(rootCapability.issuedAt).toLocaleDateString()}` : "Root capability not set up")), /* @__PURE__ */ React290.createElement(Badge43, { color: "green", variant: "light" }, "Entity")))), /* @__PURE__ */ React290.createElement(Divider29, { label: "Delegated Permissions", labelPosition: "center" }), loading ? /* @__PURE__ */ React290.createElement(Group107, { justify: "center", py: "xl" }, /* @__PURE__ */ React290.createElement(Loader54, { size: "sm" })) : delegations.length === 0 ? /* @__PURE__ */ React290.createElement(Alert54, { color: "gray", variant: "light" }, /* @__PURE__ */ React290.createElement(Text165, { size: "sm" }, "No permissions have been granted yet.")) : /* @__PURE__ */ React290.createElement(Stack194, { gap: "xs" }, delegations.map(({ capability, displayName, type }) => /* @__PURE__ */ React290.createElement(Paper18, { key: capability.id, p: "sm", withBorder: true }, /* @__PURE__ */ React290.createElement(Group107, { justify: "space-between" }, /* @__PURE__ */ React290.createElement(Group107, { gap: "xs" }, getIcon2(type), /* @__PURE__ */ React290.createElement(Stack194, { gap: 2 }, /* @__PURE__ */ React290.createElement(Text165, { size: "sm", fw: 500 }, displayName), /* @__PURE__ */ React290.createElement(Text165, { size: "xs", c: "dimmed" }, formatCapabilities(capability.capabilities)), /* @__PURE__ */ React290.createElement(Group107, { gap: "xs" }, /* @__PURE__ */ React290.createElement(Text165, { size: "xs", c: "dimmed" }, "Expires: ", formatExpiration(capability.expiration)), /* @__PURE__ */ React290.createElement(Text165, { size: "xs", c: "dimmed" }, "\u2022"), /* @__PURE__ */ React290.createElement(Text165, { size: "xs", c: "dimmed" }, "Granted by: ", capability.issuer === entityDid ? "Entity" : capability.issuer.slice(-8))))), /* @__PURE__ */ React290.createElement(ActionIcon38, { color: "red", variant: "subtle", onClick: () => handleRevoke(capability.id), loading: revoking === capability.id, disabled: !!revoking }, /* @__PURE__ */ React290.createElement(IconTrash11, { size: 16 })))))), /* @__PURE__ */ React290.createElement(Button54, { leftSection: /* @__PURE__ */ React290.createElement(IconPlus12, { size: 16 }), variant: "light", onClick: onGrantPermission }, "Grant Permission"));
+  return /* @__PURE__ */ React297.createElement(Stack197, { gap: "md" }, /* @__PURE__ */ React297.createElement(Stack197, { gap: "xs" }, /* @__PURE__ */ React297.createElement(Text168, { fw: 600, size: "sm" }, "Root Authority"), /* @__PURE__ */ React297.createElement(Paper18, { p: "sm", withBorder: true }, /* @__PURE__ */ React297.createElement(Group109, { gap: "xs" }, /* @__PURE__ */ React297.createElement(IconShieldCheck15, { size: 20, color: "var(--mantine-color-green-6)" }), /* @__PURE__ */ React297.createElement(Stack197, { gap: 2, style: { flex: 1 } }, /* @__PURE__ */ React297.createElement(Text168, { size: "sm", fw: 500 }, entityName || entityDid), /* @__PURE__ */ React297.createElement(Text168, { size: "xs", c: "dimmed" }, rootCapability ? `Granted: ${new Date(rootCapability.issuedAt).toLocaleDateString()}` : "Root capability not set up")), /* @__PURE__ */ React297.createElement(Badge43, { color: "green", variant: "light" }, "Entity")))), /* @__PURE__ */ React297.createElement(Divider29, { label: "Delegated Permissions", labelPosition: "center" }), loading ? /* @__PURE__ */ React297.createElement(Group109, { justify: "center", py: "xl" }, /* @__PURE__ */ React297.createElement(Loader54, { size: "sm" })) : delegations.length === 0 ? /* @__PURE__ */ React297.createElement(Alert54, { color: "gray", variant: "light" }, /* @__PURE__ */ React297.createElement(Text168, { size: "sm" }, "No permissions have been granted yet.")) : /* @__PURE__ */ React297.createElement(Stack197, { gap: "xs" }, delegations.map(({ capability, displayName, type }) => /* @__PURE__ */ React297.createElement(Paper18, { key: capability.id, p: "sm", withBorder: true }, /* @__PURE__ */ React297.createElement(Group109, { justify: "space-between" }, /* @__PURE__ */ React297.createElement(Group109, { gap: "xs" }, getIcon2(type), /* @__PURE__ */ React297.createElement(Stack197, { gap: 2 }, /* @__PURE__ */ React297.createElement(Text168, { size: "sm", fw: 500 }, displayName), /* @__PURE__ */ React297.createElement(Text168, { size: "xs", c: "dimmed" }, formatCapabilities(capability.capabilities)), /* @__PURE__ */ React297.createElement(Group109, { gap: "xs" }, /* @__PURE__ */ React297.createElement(Text168, { size: "xs", c: "dimmed" }, "Expires: ", formatExpiration(capability.expiration)), /* @__PURE__ */ React297.createElement(Text168, { size: "xs", c: "dimmed" }, "\u2022"), /* @__PURE__ */ React297.createElement(Text168, { size: "xs", c: "dimmed" }, "Granted by: ", capability.issuer === entityDid ? "Entity" : capability.issuer.slice(-8))))), /* @__PURE__ */ React297.createElement(ActionIcon38, { color: "red", variant: "subtle", onClick: () => handleRevoke(capability.id), loading: revoking === capability.id, disabled: !!revoking }, /* @__PURE__ */ React297.createElement(IconTrash11, { size: 16 })))))), /* @__PURE__ */ React297.createElement(Button54, { leftSection: /* @__PURE__ */ React297.createElement(IconPlus12, { size: 16 }), variant: "light", onClick: onGrantPermission }, "Grant Permission"));
 };
 
 // src/mantine/components/GrantPermissionModal.tsx
-import React291, { useState as useState135, useCallback as useCallback106 } from "react";
-import { Modal as Modal4, Stack as Stack195, Text as Text166, TextInput as TextInput10, Button as Button55, Group as Group108, Radio as Radio6, Checkbox as Checkbox13, Alert as Alert55, Paper as Paper19, Loader as Loader55, Badge as Badge44, ActionIcon as ActionIcon39, Divider as Divider30, NumberInput as NumberInput3 } from "@mantine/core";
+import React298, { useState as useState136, useCallback as useCallback108 } from "react";
+import { Modal as Modal4, Stack as Stack198, Text as Text169, TextInput as TextInput10, Button as Button55, Group as Group110, Radio as Radio6, Checkbox as Checkbox13, Alert as Alert55, Paper as Paper19, Loader as Loader55, Badge as Badge44, ActionIcon as ActionIcon39, Divider as Divider30, NumberInput as NumberInput3 } from "@mantine/core";
 import { IconSearch as IconSearch8, IconUser as IconUser15, IconRobot as IconRobot5, IconX as IconX15, IconShieldPlus as IconShieldPlus4 } from "@tabler/icons-react";
 var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, searchUsers, getOracles, onGrant }) => {
   const singleBlockMode = !!targetBlockId || blocks.length === 1;
   const fixedBlockId = targetBlockId || (blocks.length === 1 ? blocks[0].id : null);
   const fixedBlock = fixedBlockId ? blocks.find((b) => b.id === fixedBlockId) || blocks[0] : null;
-  const [recipientType, setRecipientType] = useState135("user");
-  const [searchQuery, setSearchQuery] = useState135("");
-  const [searchResults, setSearchResults] = useState135([]);
-  const [searching, setSearching] = useState135(false);
-  const [selectedRecipient, setSelectedRecipient] = useState135(null);
-  const [manualDid, setManualDid] = useState135("");
-  const [scopeType, setScopeType] = useState135("full");
-  const [selectedBlocks, setSelectedBlocks] = useState135([]);
-  const [expirationEnabled, setExpirationEnabled] = useState135(false);
-  const [expirationDays, setExpirationDays] = useState135(30);
-  const [canDelegate, setCanDelegate] = useState135(false);
-  const [pin, setPin] = useState135("");
-  const [loading, setLoading] = useState135(false);
-  const [error, setError] = useState135(null);
-  const handleSearch = useCallback106(async () => {
+  const [recipientType, setRecipientType] = useState136("user");
+  const [searchQuery, setSearchQuery] = useState136("");
+  const [searchResults, setSearchResults] = useState136([]);
+  const [searching, setSearching] = useState136(false);
+  const [selectedRecipient, setSelectedRecipient] = useState136(null);
+  const [manualDid, setManualDid] = useState136("");
+  const [scopeType, setScopeType] = useState136("full");
+  const [selectedBlocks, setSelectedBlocks] = useState136([]);
+  const [expirationEnabled, setExpirationEnabled] = useState136(false);
+  const [expirationDays, setExpirationDays] = useState136(30);
+  const [canDelegate, setCanDelegate] = useState136(false);
+  const [pin, setPin] = useState136("");
+  const [loading, setLoading] = useState136(false);
+  const [error, setError] = useState136(null);
+  const handleSearch = useCallback108(async () => {
     if (searchQuery.length < 2) return;
     setSearching(true);
     try {
@@ -32888,15 +33176,15 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
       resetForm();
     }
   };
-  return /* @__PURE__ */ React291.createElement(
+  return /* @__PURE__ */ React298.createElement(
     Modal4,
     {
       opened,
       onClose: handleClose,
-      title: /* @__PURE__ */ React291.createElement(Group108, { gap: "xs" }, /* @__PURE__ */ React291.createElement(IconShieldPlus4, { size: 20 }), /* @__PURE__ */ React291.createElement(Text166, { fw: 600 }, "Grant Permission")),
+      title: /* @__PURE__ */ React298.createElement(Group110, { gap: "xs" }, /* @__PURE__ */ React298.createElement(IconShieldPlus4, { size: 20 }), /* @__PURE__ */ React298.createElement(Text169, { fw: 600 }, "Grant Permission")),
       size: "lg"
     },
-    /* @__PURE__ */ React291.createElement(Stack195, { gap: "md" }, /* @__PURE__ */ React291.createElement(Stack195, { gap: "xs" }, /* @__PURE__ */ React291.createElement(Text166, { size: "sm", fw: 500 }, "Recipient Type"), /* @__PURE__ */ React291.createElement(
+    /* @__PURE__ */ React298.createElement(Stack198, { gap: "md" }, /* @__PURE__ */ React298.createElement(Stack198, { gap: "xs" }, /* @__PURE__ */ React298.createElement(Text169, { size: "sm", fw: 500 }, "Recipient Type"), /* @__PURE__ */ React298.createElement(
       Radio6.Group,
       {
         value: recipientType,
@@ -32906,23 +33194,23 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
           setSearchResults([]);
         }
       },
-      /* @__PURE__ */ React291.createElement(Group108, null, /* @__PURE__ */ React291.createElement(Radio6, { value: "user", label: "User" }), /* @__PURE__ */ React291.createElement(Radio6, { value: "oracle", label: "Oracle" }), /* @__PURE__ */ React291.createElement(Radio6, { value: "manual", label: "Enter DID" }))
-    )), recipientType !== "manual" ? /* @__PURE__ */ React291.createElement(Stack195, { gap: "xs" }, /* @__PURE__ */ React291.createElement(
+      /* @__PURE__ */ React298.createElement(Group110, null, /* @__PURE__ */ React298.createElement(Radio6, { value: "user", label: "User" }), /* @__PURE__ */ React298.createElement(Radio6, { value: "oracle", label: "Oracle" }), /* @__PURE__ */ React298.createElement(Radio6, { value: "manual", label: "Enter DID" }))
+    )), recipientType !== "manual" ? /* @__PURE__ */ React298.createElement(Stack198, { gap: "xs" }, /* @__PURE__ */ React298.createElement(
       TextInput10,
       {
         placeholder: recipientType === "oracle" ? "Search oracles..." : "Search users...",
-        leftSection: /* @__PURE__ */ React291.createElement(IconSearch8, { size: 16 }),
-        rightSection: searching ? /* @__PURE__ */ React291.createElement(Loader55, { size: 14 }) : null,
+        leftSection: /* @__PURE__ */ React298.createElement(IconSearch8, { size: 16 }),
+        rightSection: searching ? /* @__PURE__ */ React298.createElement(Loader55, { size: 14 }) : null,
         value: searchQuery,
         onChange: (e) => setSearchQuery(e.currentTarget.value),
         onKeyDown: (e) => e.key === "Enter" && handleSearch()
       }
-    ), selectedRecipient ? /* @__PURE__ */ React291.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React291.createElement(Group108, { justify: "space-between" }, /* @__PURE__ */ React291.createElement(Group108, { gap: "xs" }, recipientType === "oracle" ? /* @__PURE__ */ React291.createElement(IconRobot5, { size: 16 }) : /* @__PURE__ */ React291.createElement(IconUser15, { size: 16 }), /* @__PURE__ */ React291.createElement(Text166, { size: "sm" }, selectedRecipient.displayName), /* @__PURE__ */ React291.createElement(Badge44, { size: "xs", variant: "light" }, selectedRecipient.did.slice(-12))), /* @__PURE__ */ React291.createElement(ActionIcon39, { size: "sm", variant: "subtle", onClick: () => setSelectedRecipient(null) }, /* @__PURE__ */ React291.createElement(IconX15, { size: 14 })))) : searchResults.length > 0 ? /* @__PURE__ */ React291.createElement(Paper19, { p: "xs", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React291.createElement(Stack195, { gap: 4 }, searchResults.map((result) => /* @__PURE__ */ React291.createElement(Button55, { key: result.did, variant: "subtle", size: "sm", justify: "flex-start", onClick: () => setSelectedRecipient(result) }, result.displayName)))) : null) : /* @__PURE__ */ React291.createElement(TextInput10, { label: "Recipient DID", placeholder: "did:ixo:...", value: manualDid, onChange: (e) => setManualDid(e.currentTarget.value) }), /* @__PURE__ */ React291.createElement(Divider30, null), /* @__PURE__ */ React291.createElement(Stack195, { gap: "xs" }, /* @__PURE__ */ React291.createElement(Text166, { size: "sm", fw: 500 }, "Permission Scope"), singleBlockMode && fixedBlock ? (
+    ), selectedRecipient ? /* @__PURE__ */ React298.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React298.createElement(Group110, { justify: "space-between" }, /* @__PURE__ */ React298.createElement(Group110, { gap: "xs" }, recipientType === "oracle" ? /* @__PURE__ */ React298.createElement(IconRobot5, { size: 16 }) : /* @__PURE__ */ React298.createElement(IconUser15, { size: 16 }), /* @__PURE__ */ React298.createElement(Text169, { size: "sm" }, selectedRecipient.displayName), /* @__PURE__ */ React298.createElement(Badge44, { size: "xs", variant: "light" }, selectedRecipient.did.slice(-12))), /* @__PURE__ */ React298.createElement(ActionIcon39, { size: "sm", variant: "subtle", onClick: () => setSelectedRecipient(null) }, /* @__PURE__ */ React298.createElement(IconX15, { size: 14 })))) : searchResults.length > 0 ? /* @__PURE__ */ React298.createElement(Paper19, { p: "xs", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React298.createElement(Stack198, { gap: 4 }, searchResults.map((result) => /* @__PURE__ */ React298.createElement(Button55, { key: result.did, variant: "subtle", size: "sm", justify: "flex-start", onClick: () => setSelectedRecipient(result) }, result.displayName)))) : null) : /* @__PURE__ */ React298.createElement(TextInput10, { label: "Recipient DID", placeholder: "did:ixo:...", value: manualDid, onChange: (e) => setManualDid(e.currentTarget.value) }), /* @__PURE__ */ React298.createElement(Divider30, null), /* @__PURE__ */ React298.createElement(Stack198, { gap: "xs" }, /* @__PURE__ */ React298.createElement(Text169, { size: "sm", fw: 500 }, "Permission Scope"), singleBlockMode && fixedBlock ? (
       // Single block mode: show fixed block info
-      /* @__PURE__ */ React291.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React291.createElement(Group108, { gap: "xs" }, /* @__PURE__ */ React291.createElement(Badge44, { variant: "light", color: "blue" }, fixedBlock.type), /* @__PURE__ */ React291.createElement(Text166, { size: "sm" }, fixedBlock.name || `Block ${fixedBlock.id.slice(-8)}`)), /* @__PURE__ */ React291.createElement(Text166, { size: "xs", c: "dimmed", mt: "xs" }, "Permission will be granted to execute this specific block."))
+      /* @__PURE__ */ React298.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React298.createElement(Group110, { gap: "xs" }, /* @__PURE__ */ React298.createElement(Badge44, { variant: "light", color: "blue" }, fixedBlock.type), /* @__PURE__ */ React298.createElement(Text169, { size: "sm" }, fixedBlock.name || `Block ${fixedBlock.id.slice(-8)}`)), /* @__PURE__ */ React298.createElement(Text169, { size: "xs", c: "dimmed", mt: "xs" }, "Permission will be granted to execute this specific block."))
     ) : (
       // Multi-block mode: show scope selection
-      /* @__PURE__ */ React291.createElement(React291.Fragment, null, /* @__PURE__ */ React291.createElement(Radio6.Group, { value: scopeType, onChange: (v) => setScopeType(v) }, /* @__PURE__ */ React291.createElement(Stack195, { gap: "xs" }, /* @__PURE__ */ React291.createElement(Radio6, { value: "full", label: "Full flow access (can execute any block)" }), /* @__PURE__ */ React291.createElement(Radio6, { value: "blocks", label: "Specific blocks only" }))), scopeType === "blocks" && /* @__PURE__ */ React291.createElement(Paper19, { p: "sm", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React291.createElement(Stack195, { gap: "xs" }, blocks.map((block) => /* @__PURE__ */ React291.createElement(
+      /* @__PURE__ */ React298.createElement(React298.Fragment, null, /* @__PURE__ */ React298.createElement(Radio6.Group, { value: scopeType, onChange: (v) => setScopeType(v) }, /* @__PURE__ */ React298.createElement(Stack198, { gap: "xs" }, /* @__PURE__ */ React298.createElement(Radio6, { value: "full", label: "Full flow access (can execute any block)" }), /* @__PURE__ */ React298.createElement(Radio6, { value: "blocks", label: "Specific blocks only" }))), scopeType === "blocks" && /* @__PURE__ */ React298.createElement(Paper19, { p: "sm", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React298.createElement(Stack198, { gap: "xs" }, blocks.map((block) => /* @__PURE__ */ React298.createElement(
         Checkbox13,
         {
           key: block.id,
@@ -32937,7 +33225,7 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
           }
         }
       )))))
-    )), /* @__PURE__ */ React291.createElement(Divider30, null), /* @__PURE__ */ React291.createElement(Stack195, { gap: "xs" }, /* @__PURE__ */ React291.createElement(Checkbox13, { label: "Set expiration", checked: expirationEnabled, onChange: (e) => setExpirationEnabled(e.currentTarget.checked) }), expirationEnabled && /* @__PURE__ */ React291.createElement(NumberInput3, { label: "Expires in (days)", placeholder: "30", value: expirationDays, onChange: setExpirationDays, min: 1, max: 365 })), /* @__PURE__ */ React291.createElement(
+    )), /* @__PURE__ */ React298.createElement(Divider30, null), /* @__PURE__ */ React298.createElement(Stack198, { gap: "xs" }, /* @__PURE__ */ React298.createElement(Checkbox13, { label: "Set expiration", checked: expirationEnabled, onChange: (e) => setExpirationEnabled(e.currentTarget.checked) }), expirationEnabled && /* @__PURE__ */ React298.createElement(NumberInput3, { label: "Expires in (days)", placeholder: "30", value: expirationDays, onChange: setExpirationDays, min: 1, max: 365 })), /* @__PURE__ */ React298.createElement(
       Checkbox13,
       {
         label: "Recipient can grant permissions to others",
@@ -32945,7 +33233,7 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
         checked: canDelegate,
         onChange: (e) => setCanDelegate(e.currentTarget.checked)
       }
-    ), /* @__PURE__ */ React291.createElement(Divider30, null), /* @__PURE__ */ React291.createElement(TextInput10, { label: "Enter your PIN to sign this delegation", type: "password", placeholder: "PIN", value: pin, onChange: (e) => setPin(e.currentTarget.value) }), error && /* @__PURE__ */ React291.createElement(Alert55, { color: "red" }, error), /* @__PURE__ */ React291.createElement(Group108, { justify: "flex-end" }, /* @__PURE__ */ React291.createElement(Button55, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React291.createElement(Button55, { onClick: handleGrant, loading }, "Grant Permission")))
+    ), /* @__PURE__ */ React298.createElement(Divider30, null), /* @__PURE__ */ React298.createElement(TextInput10, { label: "Enter your PIN to sign this delegation", type: "password", placeholder: "PIN", value: pin, onChange: (e) => setPin(e.currentTarget.value) }), error && /* @__PURE__ */ React298.createElement(Alert55, { color: "red" }, error), /* @__PURE__ */ React298.createElement(Group110, { justify: "flex-end" }, /* @__PURE__ */ React298.createElement(Button55, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React298.createElement(Button55, { onClick: handleGrant, loading }, "Grant Permission")))
   );
 };
 
@@ -33062,4 +33350,4 @@ export {
   getExtraSlashMenuItems,
   useCreateIxoEditor
 };
-//# sourceMappingURL=chunk-GKAKYGC3.mjs.map
+//# sourceMappingURL=chunk-TLYT3OAQ.mjs.map