@ixo/editor 3.0.0 → 3.2.0

package/dist/{chunk-UWTEHXWI.mjs → chunk-3MI2QQYH.mjs}

@@ -1,4 +1,5 @@
 import {
+  LATEST_VERSION,
   buildDomainCardLinkedResource,
   buildFlowNodeFromBlock,
   buildGovernanceGroupLinkedEntities,
@@ -19,7 +20,7 @@ import {
   resolveActionType,
   sendDirectMessage,
   transformSurveyToCredentialSubject
-} from "./chunk-5D26UG3I.mjs";
+} from "./chunk-3EZI42YS.mjs";
 
 // src/mantine/hooks/useCreateIxoEditor.ts
 import { useCreateBlockNote } from "@blocknote/react";
@@ -1498,6 +1499,7 @@ function initializeHookedActions() {
 // src/mantine/context/BlocknoteContext.tsx
 var BlocknoteContext = createContext({
   docType: "flow",
+  flowVersion: "0.3",
   sharedProposals: {},
   fetchSharedProposal: async () => {
     throw new Error("BlocknoteContext not initialized");
@@ -1534,6 +1536,7 @@ var BlocknoteProvider = ({
   const [activeDrawerId, setActiveDrawerId] = useState3(null);
   const [drawerContent, setDrawerContent] = useState3(null);
   const docType = editor?.docType || "flow";
+  const flowVersion = editor?.getFlowMetadata?.()?.schema_version || "0.3";
   useEffect4(() => {
     initializeHookedActions();
   }, []);
@@ -1617,6 +1620,7 @@ var BlocknoteProvider = ({
         blockRequirements,
         editable,
         docType,
+        flowVersion,
         sharedProposals,
         fetchSharedProposal,
         invalidateProposal,
@@ -6741,6 +6745,7 @@ function useBlockAuthorization({ editor, blockId, actorDid, ucanService, flowUri
     const metadata = editor.getFlowMetadata?.();
     return metadata?.doc_id ? `ixo:flow:${metadata.doc_id}` : "";
   }, [flowUri, editor]);
+  const schemaVersion = useMemo25(() => editor.getFlowMetadata?.()?.schema_version || "0.3", [editor]);
   useEffect23(() => {
     const checkAuthorization = async () => {
       setLoading(true);
@@ -6760,7 +6765,7 @@ function useBlockAuthorization({ editor, blockId, actorDid, ucanService, flowUri
         return;
       }
       try {
-        const authResult = await isAuthorized(blockId, actorDid, ucanService, resolvedFlowUri);
+        const authResult = await isAuthorized(blockId, actorDid, ucanService, resolvedFlowUri, schemaVersion);
         setResult(authResult);
       } catch (error) {
         setResult({
@@ -6772,7 +6777,7 @@ function useBlockAuthorization({ editor, blockId, actorDid, ucanService, flowUri
       }
     };
     checkAuthorization();
-  }, [blockId, actorDid, ucanService, resolvedFlowUri, checkTrigger]);
+  }, [blockId, actorDid, ucanService, resolvedFlowUri, schemaVersion, checkTrigger]);
   const recheck = () => setCheckTrigger((prev) => prev + 1);
   return {
     isAuthorized: result.authorized,
@@ -30997,7 +31002,7 @@ var MatrixMetadataManager = class {
     this.eventHandler = (event) => {
       if (event.getRoomId() === this.roomId) {
         const eventType = event.getType();
-        if (eventType === COVER_IMAGE_EVENT_TYPE || eventType === COVER_ICON_EVENT_TYPE) {
+        if (eventType === COVER_IMAGE_EVENT_TYPE || eventType === COVER_ICON_EVENT_TYPE || eventType === "m.room.name") {
           const metadata = this.getMetadata();
           if (metadata) {
             this.notifySubscribers(metadata);
@@ -31063,6 +31068,17 @@ var MatrixMetadataManager = class {
           )
         );
       }
+      if ("title" in metadata) {
+        promises.push(
+          this.matrixClient.sendStateEvent(
+            this.roomId,
+            "m.room.name",
+            { name: metadata.title || "" },
+            ""
+            // Empty state key
+          )
+        );
+      }
       await Promise.all(promises);
     } catch (error) {
       console.error("Failed to set page metadata:", error);
@@ -31096,10 +31112,13 @@ var MatrixMetadataManager = class {
       );
       const iconContent = iconEvent ? iconEvent.getContent() : null;
       const iconUrl = iconContent?.url || null;
-      if (!coverUrl && !iconUrl) {
+      const nameEvent = room.currentState.getStateEvents("m.room.name", "");
+      const roomName = nameEvent ? nameEvent.getContent()?.name || null : null;
+      if (!coverUrl && !iconUrl && !roomName) {
         return null;
       }
       return {
+        title: roomName || void 0,
         cover: coverUrl || void 0,
         icon: iconUrl || void 0,
         coverPosition: coverPos ?? void 0
@@ -31546,6 +31565,7 @@ function useCreateCollaborativeIxoEditor(options) {
   const runtimeMap = useMemo118(() => yDoc.getMap("runtime"), [yDoc]);
   const delegationsMap = useMemo118(() => yDoc.getMap("delegations"), [yDoc]);
   const invocationsMap = useMemo118(() => yDoc.getMap("invocations"), [yDoc]);
+  const migrationMap = useMemo118(() => yDoc.getMap("migration"), [yDoc]);
   const ucanDelegationStore = useMemo118(() => {
     const store = createUcanDelegationStore(delegationsMap);
     const originalSet = store.set;
@@ -31662,6 +31682,7 @@ function useCreateCollaborativeIxoEditor(options) {
     ixoEditor._yInvocations = invocationsMap;
     ixoEditor._ucanDelegationStore = ucanDelegationStore;
     ixoEditor._invocationStore = invocationStore;
+    ixoEditor._yMigration = migrationMap;
     ixoEditor.getUcanService = () => {
       return null;
     };
@@ -31802,9 +31823,9 @@ function useCreateCollaborativeIxoEditor(options) {
     if (!permissions.write) {
       return;
     }
-    root.set("@context", "https://ixo.world/flow/0.3");
+    root.set("@context", `https://ixo.world/flow/${LATEST_VERSION}`);
     root.set("_type", "ixo.flow.crdt");
-    root.set("schema_version", "0.3");
+    root.set("schema_version", LATEST_VERSION);
     root.set("doc_id", options.docId || `flow_${Date.now()}`);
     root.set("createdAt", (/* @__PURE__ */ new Date()).toISOString());
     root.set("createdBy", memoizedUser.id || "anonymous");
@@ -31876,7 +31897,7 @@ function useCreateCollaborativeIxoEditor(options) {
 }
 
 // src/mantine/IxoEditor.tsx
-import React299, { useState as useState138, useEffect as useEffect113, useCallback as useCallback111 } from "react";
+import React299 from "react";
 import { SuggestionMenuController } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import { filterSuggestionItems } from "@blocknote/core";
@@ -31933,8 +31954,9 @@ function PanelContent({ theme }) {
 }
 
 // src/mantine/components/CoverImage.tsx
-import React296, { useState as useState135, useRef as useRef29, useEffect as useEffect110, useMemo as useMemo121 } from "react";
-import { Box as Box62, Group as Group108 } from "@mantine/core";
+import React296, { useState as useState136, useRef as useRef29, useEffect as useEffect110, useMemo as useMemo121 } from "react";
+import { Box as Box62, Group as Group109 } from "@mantine/core";
+import { IconMoodSmile, IconPhoto as IconPhoto4, IconSettings as IconSettings22, IconArrowsMove, IconTrash as IconTrash11, IconRefresh as IconRefresh5 } from "@tabler/icons-react";
 
 // src/core/lib/imageTransform.ts
 var CLOUDFLARE_CDN_BASE = "https://www.ixo.earth/cdn-cgi/image";
@@ -32067,33 +32089,53 @@ function transformIconImage(sourceUrl, size = "default", customOptions) {
 }
 
 // src/mantine/components/Base/CoverImageButton.tsx
-import React292, { forwardRef } from "react";
-import { Button as Button55 } from "@mantine/core";
-var CoverImageButton = forwardRef(({ isActive = false, onClick, children, style, ...props }, ref) => /* @__PURE__ */ React292.createElement(
-  Button55,
-  {
-    ref,
-    variant: "filled",
-    onClick,
-    size: "xs",
-    style: {
-      backgroundColor: isActive ? "rgba(55, 53, 47, 0.9)" : "rgba(255, 255, 255, 0.9)",
-      color: isActive ? "white" : "#37352f",
-      fontSize: "12px",
-      fontWeight: 500,
-      padding: "4px 8px",
-      height: "auto",
-      ...style
-    },
-    ...props
-  },
-  children
-));
-CoverImageButton.displayName = "CoverImageButton";
+import React292, { forwardRef, useState as useState133 } from "react";
+import { UnstyledButton as UnstyledButton6, Group as Group106, Text as Text170 } from "@mantine/core";
+var CoverImageButton = forwardRef(function CoverImageButton2({ isActive = false, onClick, icon: icon2, children, style }, ref) {
+  const [hovered, setHovered] = useState133(false);
+  return /* @__PURE__ */ React292.createElement(
+    UnstyledButton6,
+    {
+      ref,
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        padding: "4px 8px",
+        borderRadius: "4px",
+        border: "none",
+        background: isActive || hovered ? "var(--mantine-color-neutralColor-5)" : "transparent",
+        transition: "background 0.15s ease",
+        ...style
+      }
+    },
+    /* @__PURE__ */ React292.createElement(Group106, { gap: 4, wrap: "nowrap" }, icon2 && /* @__PURE__ */ React292.createElement(
+      "span",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          color: "var(--mantine-color-neutralColor-7)"
+        }
+      },
+      icon2
+    ), /* @__PURE__ */ React292.createElement(
+      Text170,
+      {
+        fz: 12,
+        style: {
+          color: "var(--mantine-color-neutralColor-7) !important",
+          whiteSpace: "nowrap"
+        }
+      },
+      children
+    ))
+  );
+});
 
 // src/mantine/components/Base/BaseIconPicker.tsx
-import React293, { useState as useState133, useMemo as useMemo119, useEffect as useEffect108 } from "react";
-import { TextInput as TextInput7, Tabs as Tabs4, Box as Box59, Stack as Stack196, UnstyledButton as UnstyledButton6, Text as Text170, Center as Center14, ScrollArea as ScrollArea9, Group as Group106, Popover as Popover6 } from "@mantine/core";
+import React293, { useState as useState134, useMemo as useMemo119, useEffect as useEffect108 } from "react";
+import { TextInput as TextInput7, Tabs as Tabs4, Box as Box59, Stack as Stack196, UnstyledButton as UnstyledButton7, Text as Text171, Center as Center14, ScrollArea as ScrollArea9, Group as Group107, Popover as Popover6 } from "@mantine/core";
 import * as TablerIcons from "@tabler/icons-react";
 import { IconSearch as IconSearch7, IconX as IconX13, IconChevronLeft, IconChevronRight as IconChevronRight13 } from "@tabler/icons-react";
 
@@ -32124,10 +32166,10 @@ var localStorageService = {
 // src/mantine/components/Base/BaseIconPicker.tsx
 var iconsKey = "editor_recent_icons";
 var ICONS_PER_PAGE = 500;
-function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children, currentIcon }) {
-  const [searchQuery, setSearchQuery] = useState133("");
-  const [activeTab, setActiveTab] = useState133("icons");
-  const [currentPage, setCurrentPage] = useState133(1);
+function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, onRemove, children, currentIcon }) {
+  const [searchQuery, setSearchQuery] = useState134("");
+  const [activeTab, setActiveTab] = useState134("icons");
+  const [currentPage, setCurrentPage] = useState134(1);
   const allIcons = useMemo119(() => {
     const iconEntries = Object.entries(TablerIcons).filter(([name]) => name.startsWith("Icon") && name !== "IconProps");
     return iconEntries;
@@ -32161,7 +32203,7 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
   };
   const renderIconGrid = (icons) => {
     if (icons.length === 0) {
-      return /* @__PURE__ */ React293.createElement(Center14, { py: "xl" }, /* @__PURE__ */ React293.createElement(Text170, { c: "dimmed", size: "sm" }, "No icons found"));
+      return /* @__PURE__ */ React293.createElement(Center14, { py: "xl" }, /* @__PURE__ */ React293.createElement(Text171, { c: "dimmed", size: "sm" }, "No icons found"));
     }
     return /* @__PURE__ */ React293.createElement(
       Box59,
@@ -32176,7 +32218,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__ */ React293.createElement(
-          UnstyledButton6,
+          UnstyledButton7,
           {
             key: name,
             onClick: () => handleIconClick(name),
@@ -32201,7 +32243,7 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
               }
             }
           },
-          /* @__PURE__ */ React293.createElement(IconComponent, { color: "white", size: 24, stroke: 1.5 })
+          /* @__PURE__ */ React293.createElement(IconComponent, { size: 24, stroke: 1.5, style: { color: "var(--mantine-color-neutralColor-8) !important" } })
         );
       })
     );
@@ -32210,12 +32252,32 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
     Popover6.Dropdown,
     {
       style: {
-        backgroundColor: "#1a1a1a",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
+        backgroundColor: "var(--mantine-color-neutralColor-3)",
+        border: "1px solid var(--mantine-color-neutralColor-5)",
         borderRadius: "12px"
       },
       p: 0
     },
+    onRemove && /* @__PURE__ */ React293.createElement(
+      UnstyledButton7,
+      {
+        onClick: () => {
+          onRemove();
+          onClose();
+        },
+        style: {
+          position: "absolute",
+          top: 12,
+          right: 12,
+          zIndex: 10,
+          padding: "4px 8px",
+          borderRadius: "4px",
+          color: "var(--mantine-color-neutralColor-7)",
+          transition: "background 0.15s ease"
+        }
+      },
+      /* @__PURE__ */ React293.createElement(Group107, { gap: 4, wrap: "nowrap" }, /* @__PURE__ */ React293.createElement(IconX13, { size: 14 }), /* @__PURE__ */ React293.createElement(Text171, { fz: 12, style: { color: "var(--mantine-color-neutralColor-7) !important", whiteSpace: "nowrap" } }, "Remove"))
+    ),
     /* @__PURE__ */ React293.createElement(Stack196, { gap: "md", p: "md" }, /* @__PURE__ */ React293.createElement(Tabs4, { value: activeTab, onChange: setActiveTab, variant: "pills" }, /* @__PURE__ */ React293.createElement(Tabs4.List, null, /* @__PURE__ */ React293.createElement(Tabs4.Tab, { value: "icons" }, "Icons"), /* @__PURE__ */ React293.createElement(Tabs4.Tab, { value: "upload" }, "Upload")), /* @__PURE__ */ React293.createElement(Tabs4.Panel, { value: "icons", pt: "md" }, /* @__PURE__ */ React293.createElement(
       TextInput7,
       {
@@ -32224,7 +32286,7 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
         leftSection: /* @__PURE__ */ React293.createElement(IconSearch7, { size: 18 }),
         value: searchQuery,
         onChange: (e) => setSearchQuery(e.currentTarget.value),
-        rightSection: searchQuery && /* @__PURE__ */ React293.createElement(UnstyledButton6, { onClick: () => setSearchQuery("") }, /* @__PURE__ */ React293.createElement(IconX13, { size: 18 })),
+        rightSection: searchQuery && /* @__PURE__ */ React293.createElement(UnstyledButton7, { onClick: () => setSearchQuery("") }, /* @__PURE__ */ React293.createElement(IconX13, { size: 18 })),
         style: { flex: 1 },
         styles: {
           input: {
@@ -32234,7 +32296,7 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
           }
         }
       }
-    ), !searchQuery && /* @__PURE__ */ React293.createElement(Box59, { mb: "md" }, /* @__PURE__ */ React293.createElement(Text170, { size: "sm", fw: 500, mb: "xs", px: "xs" }, "Recent"), /* @__PURE__ */ React293.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 60 }, renderIconGrid(recentIcons))), /* @__PURE__ */ React293.createElement(Box59, null, /* @__PURE__ */ React293.createElement(Group106, { justify: "space-between", mb: "xs", px: "xs" }, /* @__PURE__ */ React293.createElement(Text170, { size: "sm", fw: 500 }, searchQuery ? "Results" : "Icons"), totalPages > 1 && /* @__PURE__ */ React293.createElement(Group106, { gap: "xs" }, /* @__PURE__ */ React293.createElement(Text170, { size: "xs", c: "dimmed" }, "Page ", currentPage, " of ", totalPages, " (", filteredIcons.length, " total)"), /* @__PURE__ */ React293.createElement(BaseButton, { size: "xs", onClick: () => setCurrentPage((p) => Math.max(1, p - 1)), disabled: currentPage === 1, leftSection: /* @__PURE__ */ React293.createElement(IconChevronLeft, { size: 14 }) }, "Prev"), /* @__PURE__ */ React293.createElement(
+    ), !searchQuery && /* @__PURE__ */ React293.createElement(Box59, { mb: "md" }, /* @__PURE__ */ React293.createElement(Text171, { size: "sm", fw: 500, mb: "xs", px: "xs" }, "Recent"), /* @__PURE__ */ React293.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 60 }, renderIconGrid(recentIcons))), /* @__PURE__ */ React293.createElement(Box59, null, /* @__PURE__ */ React293.createElement(Group107, { justify: "space-between", mb: "xs", px: "xs" }, /* @__PURE__ */ React293.createElement(Text171, { size: "sm", fw: 500 }, searchQuery ? "Results" : "Icons"), totalPages > 1 && /* @__PURE__ */ React293.createElement(Group107, { gap: "xs" }, /* @__PURE__ */ React293.createElement(Text171, { size: "xs", c: "dimmed" }, "Page ", currentPage, " of ", totalPages, " (", filteredIcons.length, " total)"), /* @__PURE__ */ React293.createElement(BaseButton, { size: "xs", onClick: () => setCurrentPage((p) => Math.max(1, p - 1)), disabled: currentPage === 1, leftSection: /* @__PURE__ */ React293.createElement(IconChevronLeft, { size: 14 }) }, "Prev"), /* @__PURE__ */ React293.createElement(
       BaseButton,
       {
         size: "xs",
@@ -32243,7 +32305,7 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, children
         leftSection: /* @__PURE__ */ React293.createElement(IconChevronRight13, { size: 14 })
       },
       "Next"
-    ))), /* @__PURE__ */ React293.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 200 }, renderIconGrid(paginatedIcons)))), /* @__PURE__ */ React293.createElement(Tabs4.Panel, { value: "upload", pt: "md" }, /* @__PURE__ */ React293.createElement(Center14, { py: "xl" }, /* @__PURE__ */ React293.createElement(Stack196, { align: "center", gap: "md" }, /* @__PURE__ */ React293.createElement(Text170, { size: "sm", c: "dimmed", ta: "center" }, "Upload a custom icon image", /* @__PURE__ */ React293.createElement("br", null), "(PNG, JPG, SVG)"), /* @__PURE__ */ React293.createElement(CoverImageButton, { onClick: onUploadClick }, "Choose File"))))))
+    ))), /* @__PURE__ */ React293.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 200 }, renderIconGrid(paginatedIcons)))), /* @__PURE__ */ React293.createElement(Tabs4.Panel, { value: "upload", pt: "md" }, /* @__PURE__ */ React293.createElement(Center14, { py: "xl" }, /* @__PURE__ */ React293.createElement(Stack196, { align: "center", gap: "md" }, /* @__PURE__ */ React293.createElement(Text171, { size: "sm", c: "dimmed", ta: "center" }, "Upload a custom icon image", /* @__PURE__ */ React293.createElement("br", null), "(PNG, JPG, SVG)"), /* @__PURE__ */ React293.createElement(CoverImageButton, { onClick: onUploadClick }, "Choose File"))))))
   ));
 }
 
@@ -32276,7 +32338,7 @@ function PageIcon({ src, iconSize = 64, useCenter = false, style }) {
           ...style
         }
       },
-      /* @__PURE__ */ React294.createElement(IconComponent, { size: iconSize, color: "white", stroke: 1.5 })
+      /* @__PURE__ */ React294.createElement(IconComponent, { size: iconSize, stroke: 1.5, style: { color: "var(--mantine-color-neutralColor-8) !important" } })
     );
   }
   return /* @__PURE__ */ React294.createElement(
@@ -32300,13 +32362,13 @@ function PageIcon({ src, iconSize = 64, useCenter = false, style }) {
 import { useDisclosure as useDisclosure7 } from "@mantine/hooks";
 
 // src/mantine/components/FlowSettingsPanel.tsx
-import React295, { useState as useState134, useEffect as useEffect109, useCallback as useCallback109 } from "react";
-import { Stack as Stack197, Group as Group107, Button as Button56, ActionIcon as ActionIcon37, Text as Text171, Box as Box61 } from "@mantine/core";
+import React295, { useState as useState135, useEffect as useEffect109, useCallback as useCallback109 } from "react";
+import { Stack as Stack197, Group as Group108, Button as Button55, ActionIcon as ActionIcon37, Text as Text172, Box as Box61 } from "@mantine/core";
 import { IconPlus as IconPlus10, 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] = useState134([]);
+  const [rows, setRows] = useState135([]);
   const loadSettings = useCallback109(() => {
     const metadata = editor.getFlowMetadata?.();
     if (!metadata) return;
@@ -32367,20 +32429,20 @@ var FlowSettingsPanel = ({ editor }) => {
     },
     [editor]
   );
-  const subtitle = /* @__PURE__ */ React295.createElement(Box61, { px: 40, mb: "md" }, /* @__PURE__ */ React295.createElement(Text171, { size: "sm", c: "dimmed" }, "Add key-value settings for this flow. These are available to oracles and action blocks at runtime."));
-  return /* @__PURE__ */ React295.createElement(BaseRightPanelLayout, { title: "Flow Settings", onClose: closePanel, isTemplate: true, captionContent: subtitle }, /* @__PURE__ */ React295.createElement(Stack197, { gap: "lg" }, rows.map((row, index) => /* @__PURE__ */ React295.createElement(Stack197, { key: index, gap: "xs" }, /* @__PURE__ */ React295.createElement(Group107, { gap: "xs", align: "center", wrap: "nowrap" }, /* @__PURE__ */ React295.createElement(BaseTextInput, { placeholder: "Key (e.g. protocolDid)", value: row.key, onChange: (e) => handleKeyChange(index, e.currentTarget.value), style: { flex: 1 } }), /* @__PURE__ */ React295.createElement(ActionIcon37, { variant: "subtle", color: "red", onClick: () => handleDelete(index), size: "lg" }, /* @__PURE__ */ React295.createElement(IconTrash10, { size: 16 }))), /* @__PURE__ */ React295.createElement(BaseTextArea, { placeholder: "Value", value: row.value, onChange: (e) => handleValueChange(index, e.currentTarget.value), minRows: 1, maxRows: 8 }))), /* @__PURE__ */ React295.createElement(Button56, { variant: "subtle", leftSection: /* @__PURE__ */ React295.createElement(IconPlus10, { size: 16 }), onClick: handleAdd, size: "sm" }, "Add setting")));
+  const subtitle = /* @__PURE__ */ React295.createElement(Box61, { px: 40, mb: "md" }, /* @__PURE__ */ React295.createElement(Text172, { size: "sm", c: "dimmed" }, "Add key-value settings for this flow. These are available to oracles and action blocks at runtime."));
+  return /* @__PURE__ */ React295.createElement(BaseRightPanelLayout, { title: "Flow Details", onClose: closePanel, isTemplate: true, captionContent: subtitle }, /* @__PURE__ */ React295.createElement(Stack197, { gap: "lg" }, rows.map((row, index) => /* @__PURE__ */ React295.createElement(Stack197, { key: index, gap: "xs" }, /* @__PURE__ */ React295.createElement(Group108, { gap: "xs", align: "center", wrap: "nowrap" }, /* @__PURE__ */ React295.createElement(BaseTextInput, { placeholder: "Key (e.g. protocolDid)", value: row.key, onChange: (e) => handleKeyChange(index, e.currentTarget.value), style: { flex: 1 } }), /* @__PURE__ */ React295.createElement(ActionIcon37, { variant: "subtle", color: "red", onClick: () => handleDelete(index), size: "lg" }, /* @__PURE__ */ React295.createElement(IconTrash10, { size: 16 }))), /* @__PURE__ */ React295.createElement(BaseTextArea, { placeholder: "Value", value: row.value, onChange: (e) => handleValueChange(index, e.currentTarget.value), minRows: 1, maxRows: 8 }))), /* @__PURE__ */ React295.createElement(Button55, { variant: "subtle", leftSection: /* @__PURE__ */ React295.createElement(IconPlus10, { size: 16 }), onClick: handleAdd, size: "sm" }, "Add detail")));
 };
 
 // src/mantine/components/CoverImage.tsx
 function CoverImage({ coverImageUrl, logoUrl }) {
   const { editor, handlers, editable } = useBlocknoteContext();
-  const [isHovering, setIsHovering] = useState135(false);
-  const [isRepositioning, setIsRepositioning] = useState135(false);
-  const [coverPosition, setCoverPosition] = useState135(() => editor?.getPageMetadata?.()?.coverPosition ?? 50);
+  const [isHovering, setIsHovering] = useState136(false);
+  const [isRepositioning, setIsRepositioning] = useState136(false);
+  const [coverPosition, setCoverPosition] = useState136(() => editor?.getPageMetadata?.()?.coverPosition ?? 50);
   const coverFileInputRef = useRef29(null);
   const logoFileInputRef = useRef29(null);
   const [opened, { open, close }] = useDisclosure7(false);
-  const [metadata, setMetadata] = useState135(() => editor?.getPageMetadata?.() || null);
+  const [metadata, setMetadata] = useState136(() => editor?.getPageMetadata?.() || null);
   const settingsPanelContent = useMemo121(() => editor ? /* @__PURE__ */ React296.createElement(FlowSettingsPanel, { editor }) : null, [editor]);
   const { open: openSettings } = usePanel("flow-settings-panel", settingsPanelContent);
   useEffect110(() => {
@@ -32477,38 +32539,13 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         style: {
           position: "relative",
           width: "100%",
-          minHeight: hasLogo ? "140px" : "48px",
-          backgroundColor: "transparent",
-          marginBottom: "0"
+          minHeight: hasLogo ? "140px" : editable ? "28px" : "0",
+          backgroundColor: "transparent"
         },
         onMouseEnter: () => editable && setIsHovering(true),
         onMouseLeave: () => editable && setIsHovering(false)
       },
-      /* @__PURE__ */ React296.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "relative", height: "100%" } }, /* @__PURE__ */ React296.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }), /* @__PURE__ */ React296.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") }), editable && isHovering && !logoSrc && /* @__PURE__ */ React296.createElement(
-        Group108,
-        {
-          gap: "xs",
-          style: {
-            position: "absolute",
-            top: "12px",
-            left: "0",
-            zIndex: 10
-          }
-        },
-        /* @__PURE__ */ React296.createElement(
-          BaseIconPicker,
-          {
-            opened,
-            onClose: close,
-            currentIcon: metadata?.icon ?? "",
-            onSelectIcon: (name) => handleSelectLogoIcon(name),
-            onUploadClick: () => logoFileInputRef.current?.click()
-          },
-          /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: open }, "Add icon")
-        ),
-        /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click() }, "Add cover"),
-        /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: openSettings }, "Settings")
-      ), logoSrc && /* @__PURE__ */ React296.createElement(
+      /* @__PURE__ */ React296.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "relative", minHeight: "inherit" } }, /* @__PURE__ */ React296.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }), /* @__PURE__ */ React296.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") }), logoSrc && /* @__PURE__ */ React296.createElement(
         Box62,
         {
           style: {
@@ -32516,44 +32553,46 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             insetInlineStart: "0",
             width: "120px",
             height: "120px",
-            left: -20,
             marginTop: "16px",
             padding: 12,
             zIndex: 11
           }
         },
         /* @__PURE__ */ React296.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }),
-        editable && isHovering && /* @__PURE__ */ React296.createElement(
-          "div",
+        editable && /* @__PURE__ */ React296.createElement(
+          BaseIconPicker,
           {
-            style: {
-              position: "absolute",
-              bottom: "-32px",
-              left: "50%",
-              transform: "translateX(-50%)",
-              zIndex: 12,
-              display: "flex",
-              flexDirection: "row",
-              gap: "4px",
-              alignItems: "center"
-            }
+            opened,
+            onClose: close,
+            currentIcon: metadata?.icon ?? "",
+            onSelectIcon: (name) => handleSelectLogoIcon(name),
+            onUploadClick: () => logoFileInputRef.current?.click(),
+            onRemove: handleRemoveLogo
           },
           /* @__PURE__ */ React296.createElement(
-            BaseIconPicker,
+            Box62,
             {
-              opened,
-              onClose: close,
-              currentIcon: metadata?.icon ?? "",
-              onSelectIcon: (name) => handleSelectLogoIcon(name),
-              onUploadClick: () => logoFileInputRef.current?.click()
-            },
-            /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: open }, "Change")
-          ),
-          /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: handleRemoveLogo }, "Remove"),
-          /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click() }, "Add cover"),
-          /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: openSettings }, "Settings")
+              onClick: open,
+              style: {
+                position: "absolute",
+                inset: 12,
+                cursor: "pointer",
+                borderRadius: "100%"
+              }
+            }
+          )
         )
-      ))
+      ), editable && (isHovering || opened) && /* @__PURE__ */ React296.createElement(Group109, { gap: 4, style: { position: "absolute", bottom: hasLogo ? -18 : 0, left: 0, zIndex: 10 } }, !logoSrc && /* @__PURE__ */ React296.createElement(
+        BaseIconPicker,
+        {
+          opened,
+          onClose: close,
+          currentIcon: metadata?.icon ?? "",
+          onSelectIcon: (name) => handleSelectLogoIcon(name),
+          onUploadClick: () => logoFileInputRef.current?.click()
+        },
+        /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: open, icon: /* @__PURE__ */ React296.createElement(IconMoodSmile, { size: 14 }) }, "Add icon")
+      ), /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click(), icon: /* @__PURE__ */ React296.createElement(IconPhoto4, { size: 14 }) }, "Add cover"), /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: openSettings, icon: /* @__PURE__ */ React296.createElement(IconSettings22, { size: 14 }) }, "Details")))
     );
   }
   return /* @__PURE__ */ React296.createElement(
@@ -32603,7 +32642,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
       }
     ),
     editable && isHovering && /* @__PURE__ */ React296.createElement(
-      Group108,
+      Group109,
       {
         gap: "xs",
         style: {
@@ -32613,7 +32652,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           zIndex: 10
         }
       },
-      /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click() }, "Change cover"),
+      /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click(), icon: /* @__PURE__ */ React296.createElement(IconRefresh5, { size: 14 }) }, "Change cover"),
       /* @__PURE__ */ React296.createElement(
         CoverImageButton,
         {
@@ -32623,12 +32662,12 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             }
             setIsRepositioning(!isRepositioning);
           },
-          isActive: isRepositioning
+          isActive: isRepositioning,
+          icon: /* @__PURE__ */ React296.createElement(IconArrowsMove, { size: 14 })
         },
         isRepositioning ? "Done" : "Reposition"
       ),
-      /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: handleRemoveCover }, "Remove"),
-      /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: openSettings }, "Settings")
+      /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: handleRemoveCover, icon: /* @__PURE__ */ React296.createElement(IconTrash11, { size: 14 }) }, "Remove")
     ),
     /* @__PURE__ */ React296.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "absolute", bottom: 0, left: 0, right: 0, height: "70px" } }, /* @__PURE__ */ React296.createElement(
       Box62,
@@ -32642,31 +32681,29 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           zIndex: 11
         }
       },
-      logoSrc && /* @__PURE__ */ React296.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }),
-      editable && isHovering && /* @__PURE__ */ React296.createElement(React296.Fragment, null, logoSrc ? /* @__PURE__ */ React296.createElement(
-        Group108,
+      logoSrc ? /* @__PURE__ */ React296.createElement(React296.Fragment, null, /* @__PURE__ */ React296.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }), editable && /* @__PURE__ */ React296.createElement(
+        BaseIconPicker,
         {
-          gap: "xs",
-          style: {
-            position: "absolute",
-            top: "0",
-            left: "130px",
-            zIndex: 12
-          }
+          opened,
+          onClose: close,
+          currentIcon: metadata?.icon ?? "",
+          onSelectIcon: (name) => handleSelectLogoIcon(name),
+          onUploadClick: () => logoFileInputRef.current?.click(),
+          onRemove: handleRemoveLogo
         },
         /* @__PURE__ */ React296.createElement(
-          BaseIconPicker,
+          Box62,
           {
-            opened,
-            onClose: close,
-            currentIcon: metadata?.icon ?? "",
-            onSelectIcon: (name) => handleSelectLogoIcon(name),
-            onUploadClick: () => logoFileInputRef.current?.click()
-          },
-          /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: open }, "Change")
-        ),
-        /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: handleRemoveLogo }, "Remove")
-      ) : /* @__PURE__ */ React296.createElement(
+            onClick: open,
+            style: {
+              position: "absolute",
+              inset: 0,
+              cursor: "pointer",
+              borderRadius: "100%"
+            }
+          }
+        )
+      )) : editable && isHovering && /* @__PURE__ */ React296.createElement(
         BaseIconPicker,
         {
           opened,
@@ -32679,6 +32716,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           CoverImageButton,
           {
             onClick: open,
+            icon: /* @__PURE__ */ React296.createElement(IconMoodSmile, { size: 14 }),
             style: {
               position: "absolute",
               top: "50%",
@@ -32689,230 +32727,185 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           },
           "Add icon"
         )
-      ))
+      )
     )),
     /* @__PURE__ */ React296.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }),
     /* @__PURE__ */ React296.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") })
   );
 }
 
-// src/mantine/components/PageHeader.tsx
-import React297, { useState as useState136, useRef as useRef30, useEffect as useEffect111 } from "react";
-function PageHeader({
-  title = "New page",
-  icon: icon2,
-  isPrivate = true,
-  onPrivacyChange,
-  lastEdited,
-  onShare,
-  onFavorite,
-  isFavorited = false,
-  menuItems = []
-}) {
-  const [isMenuOpen, setIsMenuOpen] = useState136(false);
-  const [isPrivacyOpen, setIsPrivacyOpen] = useState136(false);
-  const menuRef = useRef30(null);
-  const privacyRef = useRef30(null);
+// src/mantine/components/PageTitle.tsx
+import React297, { useState as useState137, useEffect as useEffect111, useRef as useRef30, useCallback as useCallback110 } from "react";
+import { Box as Box63 } from "@mantine/core";
+var DEFAULT_TITLE = "New page";
+function isUserTitle(name) {
+  if (!name) return "";
+  if (name.startsWith("#") || name.startsWith("!")) return "";
+  if (name === DEFAULT_TITLE) return "";
+  return name;
+}
+function cleanEmptyEditable(el) {
+  const text = el.textContent?.trim() || "";
+  if (!text) {
+    el.innerHTML = "";
+  }
+}
+function PageTitle({ editor, editable }) {
+  const [title, setTitle] = useState137("");
+  const [hasIcon, setHasIcon] = useState137(false);
+  const titleRef = useRef30(null);
+  const isComposing = useRef30(false);
   useEffect111(() => {
-    function handleClickOutside(event) {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setIsMenuOpen(false);
-      }
-      if (privacyRef.current && !privacyRef.current.contains(event.target)) {
-        setIsPrivacyOpen(false);
+    if (!editor?._metadataManager) return;
+    const metadata = editor._metadataManager.getMetadata();
+    const initial = isUserTitle(metadata?.title);
+    if (initial) {
+      setTitle(initial);
+    }
+    setHasIcon(!!metadata?.icon);
+    const unsubscribe = editor._metadataManager.subscribe((newMetadata) => {
+      if (newMetadata.title !== void 0) {
+        const resolved = isUserTitle(newMetadata.title);
+        setTitle(resolved);
+        if (titleRef.current && titleRef.current.textContent !== resolved) {
+          titleRef.current.textContent = resolved;
+        }
       }
+      setHasIcon(!!newMetadata.icon);
+    });
+    return unsubscribe;
+  }, [editor]);
+  useEffect111(() => {
+    if (titleRef.current && title && !titleRef.current.textContent) {
+      titleRef.current.textContent = title;
     }
-    if (isMenuOpen || isPrivacyOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
+  }, [title]);
+  const saveTitle = useCallback110(
+    async (newTitle) => {
+      const trimmed = newTitle.trim();
+      const toSave = trimmed || DEFAULT_TITLE;
+      setTitle(trimmed);
+      try {
+        await editor.setPageMetadata?.({ title: toSave });
+      } catch {
+        const current = editor.getPageMetadata?.();
+        if (current?.title !== void 0) {
+          setTitle(isUserTitle(current.title));
+        }
+      }
+    },
+    [editor]
+  );
+  const handleInput = useCallback110(() => {
+    if (titleRef.current) {
+      cleanEmptyEditable(titleRef.current);
+      setTitle(titleRef.current.textContent || "");
     }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isMenuOpen, isPrivacyOpen]);
-  const handleMenuItemClick = (item) => {
-    if (!item.disabled) {
-      item.onClick();
-      setIsMenuOpen(false);
+  }, []);
+  const handleBlur = useCallback110(() => {
+    if (titleRef.current) {
+      cleanEmptyEditable(titleRef.current);
+      saveTitle(titleRef.current.textContent || "");
     }
-  };
-  return /* @__PURE__ */ React297.createElement("div", { style: styles.container }, /* @__PURE__ */ React297.createElement("div", { style: styles.leftSection }, /* @__PURE__ */ React297.createElement("span", { style: styles.icon }, icon2 || "\u{1F4C4}"), /* @__PURE__ */ React297.createElement("span", { style: styles.title }, title), /* @__PURE__ */ React297.createElement("div", { style: styles.privacyContainer, ref: privacyRef }, /* @__PURE__ */ React297.createElement("button", { style: styles.privacyBadge, onClick: () => onPrivacyChange && setIsPrivacyOpen(!isPrivacyOpen) }, /* @__PURE__ */ React297.createElement("span", { style: styles.lockIcon }, isPrivate ? "\u{1F512}" : "\u{1F310}"), /* @__PURE__ */ React297.createElement("span", null, isPrivate ? "Private" : "Public"), onPrivacyChange && /* @__PURE__ */ React297.createElement("span", { style: styles.chevron }, "\u25BE")), isPrivacyOpen && onPrivacyChange && /* @__PURE__ */ React297.createElement("div", { style: styles.dropdown }, /* @__PURE__ */ React297.createElement(
-    "button",
-    {
-      style: {
-        ...styles.menuItem,
-        ...isPrivate ? styles.menuItemActive : {}
-      },
-      onClick: () => {
-        onPrivacyChange(true);
-        setIsPrivacyOpen(false);
+  }, [saveTitle]);
+  const handleKeyDown = useCallback110(
+    (e) => {
+      if (isComposing.current) return;
+      if (e.key === "Enter" || e.key === "ArrowDown") {
+        e.preventDefault();
+        saveTitle(titleRef.current?.textContent || "");
+        editor.focus?.();
       }
     },
-    /* @__PURE__ */ React297.createElement("span", { style: styles.menuItemIcon }, "\u{1F512}"),
-    /* @__PURE__ */ React297.createElement("span", null, "Private")
-  ), /* @__PURE__ */ React297.createElement(
-    "button",
-    {
-      style: {
-        ...styles.menuItem,
-        ...!isPrivate ? styles.menuItemActive : {}
-      },
-      onClick: () => {
-        onPrivacyChange(false);
-        setIsPrivacyOpen(false);
+    [editor, saveTitle]
+  );
+  useEffect111(() => {
+    const handleEditorKeyDown = (e) => {
+      if (e.key !== "ArrowUp" || !titleRef.current) return;
+      try {
+        const pos = editor.getTextCursorPosition?.();
+        if (pos && !pos.prevBlock) {
+          e.preventDefault();
+          titleRef.current.focus();
+          const sel = window.getSelection();
+          if (sel && titleRef.current.childNodes.length > 0) {
+            sel.selectAllChildren(titleRef.current);
+            sel.collapseToEnd();
+          }
+        }
+      } catch {
       }
-    },
-    /* @__PURE__ */ React297.createElement("span", { style: styles.menuItemIcon }, "\u{1F310}"),
-    /* @__PURE__ */ React297.createElement("span", null, "Public")
-  )))), /* @__PURE__ */ React297.createElement("div", { style: styles.rightSection }, lastEdited && /* @__PURE__ */ React297.createElement("span", { style: styles.editedText }, lastEdited), onShare && /* @__PURE__ */ React297.createElement("button", { style: styles.shareButton, onClick: onShare }, "Share"), onFavorite && /* @__PURE__ */ React297.createElement("button", { style: styles.iconButton, onClick: onFavorite }, isFavorited ? "\u2605" : "\u2606"), menuItems.length > 0 && /* @__PURE__ */ React297.createElement("div", { style: styles.menuContainer, ref: menuRef }, /* @__PURE__ */ React297.createElement("button", { style: styles.menuButton, onClick: () => setIsMenuOpen(!isMenuOpen), "aria-label": "Menu" }, /* @__PURE__ */ React297.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, /* @__PURE__ */ React297.createElement("circle", { cx: "3", cy: "8", r: "1.5" }), /* @__PURE__ */ React297.createElement("circle", { cx: "8", cy: "8", r: "1.5" }), /* @__PURE__ */ React297.createElement("circle", { cx: "13", cy: "8", r: "1.5" }))), isMenuOpen && /* @__PURE__ */ React297.createElement("div", { style: styles.dropdown }, menuItems.map((item, index) => /* @__PURE__ */ React297.createElement(React297.Fragment, { key: index }, item.divider && index > 0 && /* @__PURE__ */ React297.createElement("div", { style: styles.divider }), /* @__PURE__ */ React297.createElement(
-    "button",
+    };
+    const container = titleRef.current?.closest(".ixo-editor");
+    container?.addEventListener("keydown", handleEditorKeyDown, true);
+    return () => {
+      container?.removeEventListener("keydown", handleEditorKeyDown, true);
+    };
+  }, [editor]);
+  const handlePaste = useCallback110((e) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text/plain").replace(/\n/g, " ");
+    document.execCommand("insertText", false, text);
+  }, []);
+  return /* @__PURE__ */ React297.createElement(Box63, { maw: 900, mx: "auto", w: "100%" }, /* @__PURE__ */ React297.createElement(
+    Box63,
     {
+      ref: titleRef,
+      component: "div",
+      contentEditable: editable !== false,
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      "aria-label": "Page title",
+      "data-placeholder": "New page",
+      fz: 40,
+      fw: 700,
+      lh: 1.2,
+      mih: "1em",
+      pt: hasIcon ? 24 : 0,
+      pb: 24,
+      px: 0,
       style: {
-        ...styles.menuItem,
-        ...item.disabled ? styles.menuItemDisabled : {}
-      },
-      onClick: () => handleMenuItemClick(item),
-      disabled: item.disabled
-    },
-    item.icon && /* @__PURE__ */ React297.createElement("span", { style: styles.menuItemIcon }, item.icon),
-    /* @__PURE__ */ React297.createElement("span", null, item.label)
-  )))))));
+        color: "var(--mantine-color-neutralColor-8) !important",
+        caretColor: "var(--mantine-color-neutralColor-8) !important",
+        outline: "none",
+        border: "none",
+        wordBreak: "break-word",
+        whiteSpace: "pre-wrap",
+        cursor: editable === false ? "default" : void 0
+      },
+      onInput: handleInput,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      onCompositionStart: () => {
+        isComposing.current = true;
+      },
+      onCompositionEnd: () => {
+        isComposing.current = false;
+      },
+      spellCheck: false
+    }
+  ));
 }
-var styles = {
-  container: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "8px 12px",
-    borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
-    backgroundColor: "transparent",
-    fontSize: "14px",
-    minHeight: "44px",
-    color: "rgba(255, 255, 255, 0.9)"
-  },
-  leftSection: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px"
-  },
-  icon: {
-    fontSize: "16px"
-  },
-  title: {
-    fontWeight: 500,
-    color: "rgba(255, 255, 255, 0.9)"
-  },
-  privacyContainer: {
-    position: "relative"
-  },
-  privacyBadge: {
-    display: "flex",
-    alignItems: "center",
-    gap: "4px",
-    padding: "2px 6px",
-    border: "none",
-    backgroundColor: "transparent",
-    color: "rgba(255, 255, 255, 0.5)",
-    fontSize: "12px",
-    cursor: "pointer",
-    borderRadius: "3px"
-  },
-  lockIcon: {
-    fontSize: "12px"
-  },
-  chevron: {
-    fontSize: "10px",
-    marginLeft: "2px"
-  },
-  rightSection: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px"
-  },
-  editedText: {
-    color: "rgba(255, 255, 255, 0.4)",
-    fontSize: "12px"
-  },
-  shareButton: {
-    padding: "4px 10px",
-    border: "none",
-    backgroundColor: "transparent",
-    color: "rgba(255, 255, 255, 0.9)",
-    fontSize: "14px",
-    cursor: "pointer",
-    borderRadius: "3px",
-    fontWeight: 500
-  },
-  iconButton: {
-    padding: "4px 8px",
-    border: "none",
-    backgroundColor: "transparent",
-    color: "rgba(255, 255, 255, 0.5)",
-    fontSize: "16px",
-    cursor: "pointer",
-    borderRadius: "3px"
-  },
-  menuContainer: {
-    position: "relative"
-  },
-  menuButton: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "4px 8px",
-    border: "none",
-    backgroundColor: "transparent",
-    color: "rgba(255, 255, 255, 0.5)",
-    cursor: "pointer",
-    borderRadius: "3px"
-  },
-  dropdown: {
-    position: "absolute",
-    top: "100%",
-    right: 0,
-    marginTop: "4px",
-    minWidth: "180px",
-    backgroundColor: "rgb(37, 37, 37)",
-    borderRadius: "6px",
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.4)",
-    border: "1px solid rgba(255, 255, 255, 0.1)",
-    padding: "4px 0",
-    zIndex: 1e3
-  },
-  menuItem: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    width: "100%",
-    padding: "8px 12px",
-    border: "none",
-    backgroundColor: "transparent",
-    color: "rgba(255, 255, 255, 0.9)",
-    fontSize: "14px",
-    cursor: "pointer",
-    textAlign: "left"
-  },
-  menuItemDisabled: {
-    color: "rgba(255, 255, 255, 0.3)",
-    cursor: "not-allowed"
-  },
-  menuItemActive: {
-    backgroundColor: "rgba(255, 255, 255, 0.08)"
-  },
-  menuItemIcon: {
-    display: "flex",
-    alignItems: "center",
-    fontSize: "16px"
-  },
-  divider: {
-    height: "1px",
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-    margin: "4px 0"
+if (typeof document !== "undefined") {
+  const styleId = "ixo-page-title-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      [data-placeholder]:empty::before {
+        content: attr(data-placeholder);
+        color: var(--mantine-color-neutralColor-7) !important;
+        pointer-events: none;
+      }
+    `;
+    document.head.appendChild(style);
   }
-};
+}
 
 // src/mantine/components/ExternalDropZone.tsx
-import React298, { useCallback as useCallback110, useEffect as useEffect112, useRef as useRef31, useState as useState137 } from "react";
-import { Box as Box63 } from "@mantine/core";
+import React298, { useCallback as useCallback111, useEffect as useEffect112, useRef as useRef31, useState as useState138 } from "react";
+import { Box as Box64 } from "@mantine/core";
 var SCROLL_ZONE_SIZE = 80;
 var SCROLL_SPEED = 12;
 var ExternalDropZone = ({
@@ -32925,19 +32918,19 @@ var ExternalDropZone = ({
   children
 }) => {
   const containerRef = useRef31(null);
-  const [isValidDrag, setIsValidDrag] = useState137(false);
-  const [isHoveringInPlacementMode, setIsHoveringInPlacementMode] = useState137(false);
-  const [indicatorStyle, setIndicatorStyle] = useState137({});
+  const [isValidDrag, setIsValidDrag] = useState138(false);
+  const [isHoveringInPlacementMode, setIsHoveringInPlacementMode] = useState138(false);
+  const [indicatorStyle, setIndicatorStyle] = useState138({});
   const dropPositionRef = useRef31(null);
   const scrollAnimationRef = useRef31(null);
   const scrollDirectionRef = useRef31(null);
   const scrollContainerRef = useRef31(null);
-  const getBlockElements = useCallback110(() => {
+  const getBlockElements = useCallback111(() => {
     if (!containerRef.current) return [];
     const blocks = containerRef.current.querySelectorAll('[data-node-type="blockContainer"]');
     return Array.from(blocks);
   }, []);
-  const getScrollContainer = useCallback110(() => {
+  const getScrollContainer = useCallback111(() => {
     if (scrollContainerRef.current) return scrollContainerRef.current;
     let element = containerRef.current;
     while (element) {
@@ -32952,7 +32945,7 @@ var ExternalDropZone = ({
     scrollContainerRef.current = window;
     return window;
   }, []);
-  const performScroll = useCallback110(() => {
+  const performScroll = useCallback111(() => {
     const container = getScrollContainer();
     const direction = scrollDirectionRef.current;
     if (!direction) {
@@ -32967,7 +32960,7 @@ var ExternalDropZone = ({
     }
     scrollAnimationRef.current = requestAnimationFrame(performScroll);
   }, [getScrollContainer]);
-  const startAutoScroll = useCallback110(
+  const startAutoScroll = useCallback111(
     (direction) => {
       if (scrollDirectionRef.current === direction) return;
       scrollDirectionRef.current = direction;
@@ -32977,14 +32970,14 @@ var ExternalDropZone = ({
     },
     [performScroll]
   );
-  const stopAutoScroll = useCallback110(() => {
+  const stopAutoScroll = useCallback111(() => {
     scrollDirectionRef.current = null;
     if (scrollAnimationRef.current) {
       cancelAnimationFrame(scrollAnimationRef.current);
       scrollAnimationRef.current = null;
     }
   }, []);
-  const checkAutoScroll = useCallback110(
+  const checkAutoScroll = useCallback111(
     (clientY) => {
       const container = getScrollContainer();
       let containerTop;
@@ -33007,7 +33000,7 @@ var ExternalDropZone = ({
     },
     [getScrollContainer, startAutoScroll, stopAutoScroll]
   );
-  const findDropPosition = useCallback110(
+  const findDropPosition = useCallback111(
     (clientY) => {
       const blocks = getBlockElements();
       if (blocks.length === 0 || !editor?.document) return null;
@@ -33040,7 +33033,7 @@ var ExternalDropZone = ({
     },
     [getBlockElements, editor]
   );
-  const handleDragOver = useCallback110(
+  const handleDragOver = useCallback111(
     (e) => {
       if (!e.dataTransfer.types.includes(acceptedType)) return;
       e.preventDefault();
@@ -33063,7 +33056,7 @@ var ExternalDropZone = ({
     },
     [acceptedType, findDropPosition, checkAutoScroll]
   );
-  const handleDragLeave = useCallback110(
+  const handleDragLeave = useCallback111(
     (e) => {
       if (containerRef.current && !containerRef.current.contains(e.relatedTarget)) {
         setIsValidDrag(false);
@@ -33073,7 +33066,7 @@ var ExternalDropZone = ({
     },
     [stopAutoScroll]
   );
-  const handleDrop = useCallback110(
+  const handleDrop = useCallback111(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -33096,7 +33089,7 @@ var ExternalDropZone = ({
     window.addEventListener("dragend", handleGlobalDragEnd);
     return () => window.removeEventListener("dragend", handleGlobalDragEnd);
   }, [stopAutoScroll]);
-  const handleOverlayMouseMove = useCallback110(
+  const handleOverlayMouseMove = useCallback111(
     (e) => {
       setIsHoveringInPlacementMode(true);
       checkAutoScroll(e.clientY);
@@ -33115,12 +33108,12 @@ var ExternalDropZone = ({
     },
     [findDropPosition, checkAutoScroll]
   );
-  const handleOverlayMouseLeave = useCallback110(() => {
+  const handleOverlayMouseLeave = useCallback111(() => {
     setIsHoveringInPlacementMode(false);
     dropPositionRef.current = null;
     stopAutoScroll();
   }, [stopAutoScroll]);
-  const handleOverlayClick = useCallback110(
+  const handleOverlayClick = useCallback111(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -33134,7 +33127,7 @@ var ExternalDropZone = ({
     },
     [onDrop, stopAutoScroll]
   );
-  const handleOverlayWheel = useCallback110(
+  const handleOverlayWheel = useCallback111(
     (e) => {
       const container = getScrollContainer();
       if (container === window) {
@@ -33197,7 +33190,7 @@ var ExternalDropZone = ({
   }) : dropIndicator;
   const shouldShowIndicator = isValidDrag || isPlacementMode && isHoveringInPlacementMode;
   return /* @__PURE__ */ React298.createElement(
-    Box63,
+    Box64,
     {
       ref: containerRef,
       style: {
@@ -33213,7 +33206,7 @@ var ExternalDropZone = ({
     },
     children,
     isPlacementMode && /* @__PURE__ */ React298.createElement(
-      Box63,
+      Box64,
       {
         style: {
           position: "absolute",
@@ -33232,7 +33225,7 @@ var ExternalDropZone = ({
         onWheel: handleOverlayWheel
       }
     ),
-    shouldShowIndicator && indicatorWithPosition && /* @__PURE__ */ React298.createElement(Box63, { style: { ...indicatorStyle, background: "none", border: "none", boxShadow: "none" } }, indicatorWithPosition)
+    shouldShowIndicator && indicatorWithPosition && /* @__PURE__ */ React298.createElement(Box64, { style: { ...indicatorStyle, background: "none", border: "none", boxShadow: "none" } }, indicatorWithPosition)
   );
 };
 
@@ -33248,8 +33241,6 @@ function IxoEditorContent({
   children,
   coverImageUrl,
   logoUrl,
-  selfNav = false,
-  pageHeaderProps,
   onExternalDrop,
   externalDropType,
   dropIndicator,
@@ -33258,44 +33249,6 @@ function IxoEditorContent({
 }) {
   const { activePanel } = usePanelStore();
   const isPanelOpen = activePanel !== null;
-  const [isRoomPrivate, setIsRoomPrivate] = useState138(pageHeaderProps?.isPrivate ?? true);
-  useEffect113(() => {
-    const matrixClient = editor.getMatrixClient?.();
-    const roomId = editor.getRoomId?.();
-    if (!matrixClient || !roomId) return;
-    try {
-      const room = matrixClient.getRoom(roomId);
-      if (room) {
-        const joinRules = room.currentState.getStateEvents("m.room.join_rules", "");
-        if (joinRules) {
-          const rule = joinRules.getContent?.()?.join_rule;
-          setIsRoomPrivate(rule !== "public");
-        }
-      }
-    } catch {
-    }
-  }, [editor]);
-  const handlePrivacyChange = useCallback111(
-    async (makePrivate) => {
-      const matrixClient = editor.getMatrixClient?.();
-      const roomId = editor.getRoomId?.();
-      if (!matrixClient || !roomId) return;
-      try {
-        await matrixClient.sendStateEvent(
-          roomId,
-          "m.room.join_rules",
-          {
-            join_rule: makePrivate ? "invite" : "public"
-          },
-          ""
-        );
-        setIsRoomPrivate(makePrivate);
-      } catch (err) {
-        console.error("Failed to update room privacy:", err);
-      }
-    },
-    [editor]
-  );
   const editorContent = /* @__PURE__ */ React299.createElement(
     BlockNoteView,
     {
@@ -33338,8 +33291,8 @@ function IxoEditorContent({
         transition: "width 0.2s ease"
       }
     },
-    selfNav && /* @__PURE__ */ React299.createElement(PageHeader, { ...pageHeaderProps, isPrivate: isRoomPrivate, onPrivacyChange: handlePrivacyChange }),
     /* @__PURE__ */ React299.createElement(CoverImage, { coverImageUrl, logoUrl }),
+    /* @__PURE__ */ React299.createElement(PageTitle, { editor, editable: isEditable }),
     (onExternalDrop || isPlacementMode) && isEditable ? /* @__PURE__ */ React299.createElement(
       ExternalDropZone,
       {
@@ -33368,8 +33321,6 @@ function IxoEditor({
   isPanelVisible,
   coverImageUrl,
   logoUrl,
-  selfNav = false,
-  pageHeaderProps,
   visualizationRenderer,
   getDynamicListData,
   dynamicListPanelRenderer,
@@ -33423,8 +33374,6 @@ function IxoEditor({
         onSelectionChange,
         coverImageUrl,
         logoUrl,
-        selfNav,
-        pageHeaderProps,
         onExternalDrop,
         externalDropType,
         dropIndicator,
@@ -33493,16 +33442,230 @@ function DebugButton({ editor }) {
   );
 }
 
+// src/mantine/components/PageHeader.tsx
+import React301, { useState as useState139, useRef as useRef32, useEffect as useEffect113 } from "react";
+function PageHeader({
+  title = "New page",
+  icon: icon2,
+  isPrivate = true,
+  onPrivacyChange,
+  lastEdited,
+  onShare,
+  onFavorite,
+  isFavorited = false,
+  menuItems = []
+}) {
+  const [isMenuOpen, setIsMenuOpen] = useState139(false);
+  const [isPrivacyOpen, setIsPrivacyOpen] = useState139(false);
+  const menuRef = useRef32(null);
+  const privacyRef = useRef32(null);
+  useEffect113(() => {
+    function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsMenuOpen(false);
+      }
+      if (privacyRef.current && !privacyRef.current.contains(event.target)) {
+        setIsPrivacyOpen(false);
+      }
+    }
+    if (isMenuOpen || isPrivacyOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isMenuOpen, isPrivacyOpen]);
+  const handleMenuItemClick = (item) => {
+    if (!item.disabled) {
+      item.onClick();
+      setIsMenuOpen(false);
+    }
+  };
+  return /* @__PURE__ */ React301.createElement("div", { style: styles.container }, /* @__PURE__ */ React301.createElement("div", { style: styles.leftSection }, /* @__PURE__ */ React301.createElement("span", { style: styles.icon }, icon2 || "\u{1F4C4}"), /* @__PURE__ */ React301.createElement("span", { style: styles.title }, title), /* @__PURE__ */ React301.createElement("div", { style: styles.privacyContainer, ref: privacyRef }, /* @__PURE__ */ React301.createElement("button", { style: styles.privacyBadge, onClick: () => onPrivacyChange && setIsPrivacyOpen(!isPrivacyOpen) }, /* @__PURE__ */ React301.createElement("span", { style: styles.lockIcon }, isPrivate ? "\u{1F512}" : "\u{1F310}"), /* @__PURE__ */ React301.createElement("span", null, isPrivate ? "Private" : "Public"), onPrivacyChange && /* @__PURE__ */ React301.createElement("span", { style: styles.chevron }, "\u25BE")), isPrivacyOpen && onPrivacyChange && /* @__PURE__ */ React301.createElement("div", { style: styles.dropdown }, /* @__PURE__ */ React301.createElement(
+    "button",
+    {
+      style: {
+        ...styles.menuItem,
+        ...isPrivate ? styles.menuItemActive : {}
+      },
+      onClick: () => {
+        onPrivacyChange(true);
+        setIsPrivacyOpen(false);
+      }
+    },
+    /* @__PURE__ */ React301.createElement("span", { style: styles.menuItemIcon }, "\u{1F512}"),
+    /* @__PURE__ */ React301.createElement("span", null, "Private")
+  ), /* @__PURE__ */ React301.createElement(
+    "button",
+    {
+      style: {
+        ...styles.menuItem,
+        ...!isPrivate ? styles.menuItemActive : {}
+      },
+      onClick: () => {
+        onPrivacyChange(false);
+        setIsPrivacyOpen(false);
+      }
+    },
+    /* @__PURE__ */ React301.createElement("span", { style: styles.menuItemIcon }, "\u{1F310}"),
+    /* @__PURE__ */ React301.createElement("span", null, "Public")
+  )))), /* @__PURE__ */ React301.createElement("div", { style: styles.rightSection }, lastEdited && /* @__PURE__ */ React301.createElement("span", { style: styles.editedText }, lastEdited), onShare && /* @__PURE__ */ React301.createElement("button", { style: styles.shareButton, onClick: onShare }, "Share"), onFavorite && /* @__PURE__ */ React301.createElement("button", { style: styles.iconButton, onClick: onFavorite }, isFavorited ? "\u2605" : "\u2606"), menuItems.length > 0 && /* @__PURE__ */ React301.createElement("div", { style: styles.menuContainer, ref: menuRef }, /* @__PURE__ */ React301.createElement("button", { style: styles.menuButton, onClick: () => setIsMenuOpen(!isMenuOpen), "aria-label": "Menu" }, /* @__PURE__ */ React301.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, /* @__PURE__ */ React301.createElement("circle", { cx: "3", cy: "8", r: "1.5" }), /* @__PURE__ */ React301.createElement("circle", { cx: "8", cy: "8", r: "1.5" }), /* @__PURE__ */ React301.createElement("circle", { cx: "13", cy: "8", r: "1.5" }))), isMenuOpen && /* @__PURE__ */ React301.createElement("div", { style: styles.dropdown }, menuItems.map((item, index) => /* @__PURE__ */ React301.createElement(React301.Fragment, { key: index }, item.divider && index > 0 && /* @__PURE__ */ React301.createElement("div", { style: styles.divider }), /* @__PURE__ */ React301.createElement(
+    "button",
+    {
+      style: {
+        ...styles.menuItem,
+        ...item.disabled ? styles.menuItemDisabled : {}
+      },
+      onClick: () => handleMenuItemClick(item),
+      disabled: item.disabled
+    },
+    item.icon && /* @__PURE__ */ React301.createElement("span", { style: styles.menuItemIcon }, item.icon),
+    /* @__PURE__ */ React301.createElement("span", null, item.label)
+  )))))));
+}
+var styles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 12px",
+    borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+    backgroundColor: "transparent",
+    fontSize: "14px",
+    minHeight: "44px",
+    color: "rgba(255, 255, 255, 0.9)"
+  },
+  leftSection: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  icon: {
+    fontSize: "16px"
+  },
+  title: {
+    fontWeight: 500,
+    color: "rgba(255, 255, 255, 0.9)"
+  },
+  privacyContainer: {
+    position: "relative"
+  },
+  privacyBadge: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    padding: "2px 6px",
+    border: "none",
+    backgroundColor: "transparent",
+    color: "rgba(255, 255, 255, 0.5)",
+    fontSize: "12px",
+    cursor: "pointer",
+    borderRadius: "3px"
+  },
+  lockIcon: {
+    fontSize: "12px"
+  },
+  chevron: {
+    fontSize: "10px",
+    marginLeft: "2px"
+  },
+  rightSection: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  editedText: {
+    color: "rgba(255, 255, 255, 0.4)",
+    fontSize: "12px"
+  },
+  shareButton: {
+    padding: "4px 10px",
+    border: "none",
+    backgroundColor: "transparent",
+    color: "rgba(255, 255, 255, 0.9)",
+    fontSize: "14px",
+    cursor: "pointer",
+    borderRadius: "3px",
+    fontWeight: 500
+  },
+  iconButton: {
+    padding: "4px 8px",
+    border: "none",
+    backgroundColor: "transparent",
+    color: "rgba(255, 255, 255, 0.5)",
+    fontSize: "16px",
+    cursor: "pointer",
+    borderRadius: "3px"
+  },
+  menuContainer: {
+    position: "relative"
+  },
+  menuButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "4px 8px",
+    border: "none",
+    backgroundColor: "transparent",
+    color: "rgba(255, 255, 255, 0.5)",
+    cursor: "pointer",
+    borderRadius: "3px"
+  },
+  dropdown: {
+    position: "absolute",
+    top: "100%",
+    right: 0,
+    marginTop: "4px",
+    minWidth: "180px",
+    backgroundColor: "rgb(37, 37, 37)",
+    borderRadius: "6px",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.4)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    padding: "4px 0",
+    zIndex: 1e3
+  },
+  menuItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    width: "100%",
+    padding: "8px 12px",
+    border: "none",
+    backgroundColor: "transparent",
+    color: "rgba(255, 255, 255, 0.9)",
+    fontSize: "14px",
+    cursor: "pointer",
+    textAlign: "left"
+  },
+  menuItemDisabled: {
+    color: "rgba(255, 255, 255, 0.3)",
+    cursor: "not-allowed"
+  },
+  menuItemActive: {
+    backgroundColor: "rgba(255, 255, 255, 0.08)"
+  },
+  menuItemIcon: {
+    display: "flex",
+    alignItems: "center",
+    fontSize: "16px"
+  },
+  divider: {
+    height: "1px",
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    margin: "4px 0"
+  }
+};
+
 // src/mantine/components/EntitySigningSetup.tsx
-import React301, { useState as useState139 } from "react";
-import { Modal as Modal3, Stack as Stack198, Text as Text172, TextInput as TextInput8, Button as Button57, Alert as Alert54, Group as Group109 } from "@mantine/core";
+import React302, { useState as useState140 } from "react";
+import { Modal as Modal3, Stack as Stack198, Text as Text173, TextInput as TextInput8, Button as Button56, Alert as Alert54, Group as Group110 } 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] = useState139("");
-  const [confirmPin, setConfirmPin] = useState139("");
-  const [loading, setLoading] = useState139(false);
-  const [error, setError] = useState139(null);
-  const [success, setSuccess] = useState139(false);
+  const [pin, setPin] = useState140("");
+  const [confirmPin, setConfirmPin] = useState140("");
+  const [loading, setLoading] = useState140(false);
+  const [error, setError] = useState140(null);
+  const [success, setSuccess] = useState140(false);
   const handleSetup = async () => {
     if (pin.length < 4) {
       setError("PIN must be at least 4 characters");
@@ -33542,15 +33705,15 @@ var EntitySigningSetup = ({ opened, onClose, entityDid, entityName, onSetup }) =
       setSuccess(false);
     }
   };
-  return /* @__PURE__ */ React301.createElement(
+  return /* @__PURE__ */ React302.createElement(
     Modal3,
     {
       opened,
       onClose: handleClose,
-      title: /* @__PURE__ */ React301.createElement(Group109, { gap: "xs" }, /* @__PURE__ */ React301.createElement(IconKey2, { size: 20 }), /* @__PURE__ */ React301.createElement(Text172, { fw: 600 }, "Entity Signing Setup")),
+      title: /* @__PURE__ */ React302.createElement(Group110, { gap: "xs" }, /* @__PURE__ */ React302.createElement(IconKey2, { size: 20 }), /* @__PURE__ */ React302.createElement(Text173, { fw: 600 }, "Entity Signing Setup")),
       size: "md"
     },
-    /* @__PURE__ */ React301.createElement(Stack198, { gap: "md" }, success ? /* @__PURE__ */ React301.createElement(Alert54, { color: "green", icon: /* @__PURE__ */ React301.createElement(IconCheck23, { size: 16 }) }, "Entity signing key set up successfully!") : /* @__PURE__ */ React301.createElement(React301.Fragment, null, /* @__PURE__ */ React301.createElement(Text172, { size: "sm", c: "dimmed" }, "Flow authorization requires a signing key for", " ", /* @__PURE__ */ React301.createElement(Text172, { span: true, fw: 500 }, entityName || entityDid), "."), /* @__PURE__ */ React301.createElement(Alert54, { color: "blue", variant: "light" }, /* @__PURE__ */ React301.createElement(Text172, { size: "sm" }, "This is a ", /* @__PURE__ */ React301.createElement("strong", null, "one-time setup"), " that allows flows to grant permissions without requiring wallet signatures for each delegation.")), /* @__PURE__ */ React301.createElement(Stack198, { gap: "xs" }, /* @__PURE__ */ React301.createElement(Text172, { size: "sm", fw: 500 }, "What happens:"), /* @__PURE__ */ React301.createElement(Text172, { size: "sm", c: "dimmed" }, "1. A new signing key is generated"), /* @__PURE__ */ React301.createElement(Text172, { size: "sm", c: "dimmed" }, "2. Key is registered on the entity's DID document (requires wallet)"), /* @__PURE__ */ React301.createElement(Text172, { size: "sm", c: "dimmed" }, "3. Key is stored encrypted in the entity's Matrix room")), /* @__PURE__ */ React301.createElement(
+    /* @__PURE__ */ React302.createElement(Stack198, { gap: "md" }, success ? /* @__PURE__ */ React302.createElement(Alert54, { color: "green", icon: /* @__PURE__ */ React302.createElement(IconCheck23, { size: 16 }) }, "Entity signing key set up successfully!") : /* @__PURE__ */ React302.createElement(React302.Fragment, null, /* @__PURE__ */ React302.createElement(Text173, { size: "sm", c: "dimmed" }, "Flow authorization requires a signing key for", " ", /* @__PURE__ */ React302.createElement(Text173, { span: true, fw: 500 }, entityName || entityDid), "."), /* @__PURE__ */ React302.createElement(Alert54, { color: "blue", variant: "light" }, /* @__PURE__ */ React302.createElement(Text173, { size: "sm" }, "This is a ", /* @__PURE__ */ React302.createElement("strong", null, "one-time setup"), " that allows flows to grant permissions without requiring wallet signatures for each delegation.")), /* @__PURE__ */ React302.createElement(Stack198, { gap: "xs" }, /* @__PURE__ */ React302.createElement(Text173, { size: "sm", fw: 500 }, "What happens:"), /* @__PURE__ */ React302.createElement(Text173, { size: "sm", c: "dimmed" }, "1. A new signing key is generated"), /* @__PURE__ */ React302.createElement(Text173, { size: "sm", c: "dimmed" }, "2. Key is registered on the entity's DID document (requires wallet)"), /* @__PURE__ */ React302.createElement(Text173, { size: "sm", c: "dimmed" }, "3. Key is stored encrypted in the entity's Matrix room")), /* @__PURE__ */ React302.createElement(
       TextInput8,
       {
         label: "Enter PIN to encrypt signing key",
@@ -33561,18 +33724,18 @@ var EntitySigningSetup = ({ opened, onClose, entityDid, entityName, onSetup }) =
         onChange: (e) => setPin(e.currentTarget.value),
         disabled: loading
       }
-    ), /* @__PURE__ */ React301.createElement(TextInput8, { label: "Confirm PIN", type: "password", placeholder: "Confirm PIN", value: confirmPin, onChange: (e) => setConfirmPin(e.currentTarget.value), disabled: loading }), error && /* @__PURE__ */ React301.createElement(Alert54, { color: "red", icon: /* @__PURE__ */ React301.createElement(IconAlertCircle20, { size: 16 }) }, error), /* @__PURE__ */ React301.createElement(Group109, { justify: "flex-end", mt: "md" }, /* @__PURE__ */ React301.createElement(Button57, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React301.createElement(Button57, { onClick: handleSetup, loading, leftSection: /* @__PURE__ */ React301.createElement(IconKey2, { size: 16 }) }, "Setup Entity Signing"))))
+    ), /* @__PURE__ */ React302.createElement(TextInput8, { label: "Confirm PIN", type: "password", placeholder: "Confirm PIN", value: confirmPin, onChange: (e) => setConfirmPin(e.currentTarget.value), disabled: loading }), error && /* @__PURE__ */ React302.createElement(Alert54, { color: "red", icon: /* @__PURE__ */ React302.createElement(IconAlertCircle20, { size: 16 }) }, error), /* @__PURE__ */ React302.createElement(Group110, { justify: "flex-end", mt: "md" }, /* @__PURE__ */ React302.createElement(Button56, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React302.createElement(Button56, { onClick: handleSetup, loading, leftSection: /* @__PURE__ */ React302.createElement(IconKey2, { size: 16 }) }, "Setup Entity Signing"))))
   );
 };
 
 // src/mantine/components/FlowPermissionsPanel.tsx
-import React302, { useState as useState140, useEffect as useEffect114, useMemo as useMemo122 } from "react";
-import { Stack as Stack199, Text as Text173, Paper as Paper18, Group as Group110, Badge as Badge45, Button as Button58, ActionIcon as ActionIcon38, Loader as Loader54, Alert as Alert55, Divider as Divider29 } from "@mantine/core";
-import { IconPlus as IconPlus11, IconTrash as IconTrash11, IconShieldCheck as IconShieldCheck16, IconUser as IconUser14, IconRobot as IconRobot4, IconBuilding as IconBuilding2 } from "@tabler/icons-react";
+import React303, { useState as useState141, useEffect as useEffect114, useMemo as useMemo122 } from "react";
+import { Stack as Stack199, Text as Text174, Paper as Paper18, Group as Group111, Badge as Badge45, Button as Button57, ActionIcon as ActionIcon38, Loader as Loader54, Alert as Alert55, Divider as Divider29 } from "@mantine/core";
+import { IconPlus as IconPlus11, IconTrash as IconTrash12, IconShieldCheck as IconShieldCheck16, IconUser as IconUser14, IconRobot as IconRobot4, IconBuilding as IconBuilding2 } from "@tabler/icons-react";
 var FlowPermissionsPanel = ({ editor, entityDid, entityName, onGrantPermission, onRevokePermission, getUserDisplayName }) => {
-  const [delegations, setDelegations] = useState140([]);
-  const [loading, setLoading] = useState140(true);
-  const [revoking, setRevoking] = useState140(null);
+  const [delegations, setDelegations] = useState141([]);
+  const [loading, setLoading] = useState141(true);
+  const [revoking, setRevoking] = useState141(null);
   const rootDelegation = useMemo122(() => {
     if (editor.getUcanService) {
       return editor.getUcanService()?.getRootDelegation() || null;
@@ -33621,11 +33784,11 @@ var FlowPermissionsPanel = ({ editor, entityDid, entityName, onGrantPermission,
   const getIcon2 = (type) => {
     switch (type) {
       case "oracle":
-        return /* @__PURE__ */ React302.createElement(IconRobot4, { size: 16 });
+        return /* @__PURE__ */ React303.createElement(IconRobot4, { size: 16 });
       case "entity":
-        return /* @__PURE__ */ React302.createElement(IconBuilding2, { size: 16 });
+        return /* @__PURE__ */ React303.createElement(IconBuilding2, { size: 16 });
       default:
-        return /* @__PURE__ */ React302.createElement(IconUser14, { size: 16 });
+        return /* @__PURE__ */ React303.createElement(IconUser14, { size: 16 });
     }
   };
   const formatCapabilities = (caps) => {
@@ -33644,31 +33807,31 @@ var FlowPermissionsPanel = ({ editor, entityDid, entityName, onGrantPermission,
     if (date < /* @__PURE__ */ new Date()) return "Expired";
     return date.toLocaleDateString();
   };
-  return /* @__PURE__ */ React302.createElement(Stack199, { gap: "md" }, /* @__PURE__ */ React302.createElement(Stack199, { gap: "xs" }, /* @__PURE__ */ React302.createElement(Text173, { fw: 600, size: "sm" }, "Root Authority"), /* @__PURE__ */ React302.createElement(Paper18, { p: "sm", withBorder: true }, /* @__PURE__ */ React302.createElement(Group110, { gap: "xs" }, /* @__PURE__ */ React302.createElement(IconShieldCheck16, { size: 20, color: "var(--mantine-color-green-6)" }), /* @__PURE__ */ React302.createElement(Stack199, { gap: 2, style: { flex: 1 } }, /* @__PURE__ */ React302.createElement(Text173, { size: "sm", fw: 500 }, entityName || entityDid), /* @__PURE__ */ React302.createElement(Text173, { size: "xs", c: "dimmed" }, rootDelegation ? `Granted: ${new Date(rootDelegation.createdAt).toLocaleDateString()}` : "Root capability not set up")), /* @__PURE__ */ React302.createElement(Badge45, { color: "green", variant: "light" }, "Entity")))), /* @__PURE__ */ React302.createElement(Divider29, { label: "Delegated Permissions", labelPosition: "center" }), loading ? /* @__PURE__ */ React302.createElement(Group110, { justify: "center", py: "xl" }, /* @__PURE__ */ React302.createElement(Loader54, { size: "sm" })) : delegations.length === 0 ? /* @__PURE__ */ React302.createElement(Alert55, { color: "gray", variant: "light" }, /* @__PURE__ */ React302.createElement(Text173, { size: "sm" }, "No permissions have been granted yet.")) : /* @__PURE__ */ React302.createElement(Stack199, { gap: "xs" }, delegations.map(({ delegation, displayName, type }) => /* @__PURE__ */ React302.createElement(Paper18, { key: delegation.cid, p: "sm", withBorder: true }, /* @__PURE__ */ React302.createElement(Group110, { justify: "space-between" }, /* @__PURE__ */ React302.createElement(Group110, { gap: "xs" }, getIcon2(type), /* @__PURE__ */ React302.createElement(Stack199, { gap: 2 }, /* @__PURE__ */ React302.createElement(Text173, { size: "sm", fw: 500 }, displayName), /* @__PURE__ */ React302.createElement(Text173, { size: "xs", c: "dimmed" }, formatCapabilities(delegation.capabilities)), /* @__PURE__ */ React302.createElement(Group110, { gap: "xs" }, /* @__PURE__ */ React302.createElement(Text173, { size: "xs", c: "dimmed" }, "Expires: ", formatExpiration(delegation.expiration)), /* @__PURE__ */ React302.createElement(Text173, { size: "xs", c: "dimmed" }, "\u2022"), /* @__PURE__ */ React302.createElement(Text173, { size: "xs", c: "dimmed" }, "Granted by: ", delegation.issuerDid === entityDid ? "Entity" : delegation.issuerDid.slice(-8))))), /* @__PURE__ */ React302.createElement(ActionIcon38, { color: "red", variant: "subtle", onClick: () => handleRevoke(delegation.cid), loading: revoking === delegation.cid, disabled: !!revoking }, /* @__PURE__ */ React302.createElement(IconTrash11, { size: 16 })))))), /* @__PURE__ */ React302.createElement(Button58, { leftSection: /* @__PURE__ */ React302.createElement(IconPlus11, { size: 16 }), variant: "light", onClick: onGrantPermission }, "Grant Permission"));
+  return /* @__PURE__ */ React303.createElement(Stack199, { gap: "md" }, /* @__PURE__ */ React303.createElement(Stack199, { gap: "xs" }, /* @__PURE__ */ React303.createElement(Text174, { fw: 600, size: "sm" }, "Root Authority"), /* @__PURE__ */ React303.createElement(Paper18, { p: "sm", withBorder: true }, /* @__PURE__ */ React303.createElement(Group111, { gap: "xs" }, /* @__PURE__ */ React303.createElement(IconShieldCheck16, { size: 20, color: "var(--mantine-color-green-6)" }), /* @__PURE__ */ React303.createElement(Stack199, { gap: 2, style: { flex: 1 } }, /* @__PURE__ */ React303.createElement(Text174, { size: "sm", fw: 500 }, entityName || entityDid), /* @__PURE__ */ React303.createElement(Text174, { size: "xs", c: "dimmed" }, rootDelegation ? `Granted: ${new Date(rootDelegation.createdAt).toLocaleDateString()}` : "Root capability not set up")), /* @__PURE__ */ React303.createElement(Badge45, { color: "green", variant: "light" }, "Entity")))), /* @__PURE__ */ React303.createElement(Divider29, { label: "Delegated Permissions", labelPosition: "center" }), loading ? /* @__PURE__ */ React303.createElement(Group111, { justify: "center", py: "xl" }, /* @__PURE__ */ React303.createElement(Loader54, { size: "sm" })) : delegations.length === 0 ? /* @__PURE__ */ React303.createElement(Alert55, { color: "gray", variant: "light" }, /* @__PURE__ */ React303.createElement(Text174, { size: "sm" }, "No permissions have been granted yet.")) : /* @__PURE__ */ React303.createElement(Stack199, { gap: "xs" }, delegations.map(({ delegation, displayName, type }) => /* @__PURE__ */ React303.createElement(Paper18, { key: delegation.cid, p: "sm", withBorder: true }, /* @__PURE__ */ React303.createElement(Group111, { justify: "space-between" }, /* @__PURE__ */ React303.createElement(Group111, { gap: "xs" }, getIcon2(type), /* @__PURE__ */ React303.createElement(Stack199, { gap: 2 }, /* @__PURE__ */ React303.createElement(Text174, { size: "sm", fw: 500 }, displayName), /* @__PURE__ */ React303.createElement(Text174, { size: "xs", c: "dimmed" }, formatCapabilities(delegation.capabilities)), /* @__PURE__ */ React303.createElement(Group111, { gap: "xs" }, /* @__PURE__ */ React303.createElement(Text174, { size: "xs", c: "dimmed" }, "Expires: ", formatExpiration(delegation.expiration)), /* @__PURE__ */ React303.createElement(Text174, { size: "xs", c: "dimmed" }, "\u2022"), /* @__PURE__ */ React303.createElement(Text174, { size: "xs", c: "dimmed" }, "Granted by: ", delegation.issuerDid === entityDid ? "Entity" : delegation.issuerDid.slice(-8))))), /* @__PURE__ */ React303.createElement(ActionIcon38, { color: "red", variant: "subtle", onClick: () => handleRevoke(delegation.cid), loading: revoking === delegation.cid, disabled: !!revoking }, /* @__PURE__ */ React303.createElement(IconTrash12, { size: 16 })))))), /* @__PURE__ */ React303.createElement(Button57, { leftSection: /* @__PURE__ */ React303.createElement(IconPlus11, { size: 16 }), variant: "light", onClick: onGrantPermission }, "Grant Permission"));
 };
 
 // src/mantine/components/GrantPermissionModal.tsx
-import React303, { useState as useState141, useCallback as useCallback112 } from "react";
-import { Modal as Modal4, Stack as Stack200, Text as Text174, TextInput as TextInput9, Button as Button59, Group as Group111, Radio as Radio5, Checkbox as Checkbox13, Alert as Alert56, Paper as Paper19, Loader as Loader55, Badge as Badge46, ActionIcon as ActionIcon39, Divider as Divider30, NumberInput as NumberInput3 } from "@mantine/core";
+import React304, { useState as useState142, useCallback as useCallback112 } from "react";
+import { Modal as Modal4, Stack as Stack200, Text as Text175, TextInput as TextInput9, Button as Button58, Group as Group112, Radio as Radio5, Checkbox as Checkbox13, Alert as Alert56, Paper as Paper19, Loader as Loader55, Badge as Badge46, ActionIcon as ActionIcon39, Divider as Divider30, NumberInput as NumberInput3 } from "@mantine/core";
 import { IconSearch as IconSearch8, IconUser as IconUser15, IconRobot as IconRobot5, IconX as IconX14, 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] = useState141("user");
-  const [searchQuery, setSearchQuery] = useState141("");
-  const [searchResults, setSearchResults] = useState141([]);
-  const [searching, setSearching] = useState141(false);
-  const [selectedRecipient, setSelectedRecipient] = useState141(null);
-  const [manualDid, setManualDid] = useState141("");
-  const [scopeType, setScopeType] = useState141("full");
-  const [selectedBlocks, setSelectedBlocks] = useState141([]);
-  const [expirationEnabled, setExpirationEnabled] = useState141(false);
-  const [expirationDays, setExpirationDays] = useState141(30);
-  const [canDelegate, setCanDelegate] = useState141(false);
-  const [pin, setPin] = useState141("");
-  const [loading, setLoading] = useState141(false);
-  const [error, setError] = useState141(null);
+  const [recipientType, setRecipientType] = useState142("user");
+  const [searchQuery, setSearchQuery] = useState142("");
+  const [searchResults, setSearchResults] = useState142([]);
+  const [searching, setSearching] = useState142(false);
+  const [selectedRecipient, setSelectedRecipient] = useState142(null);
+  const [manualDid, setManualDid] = useState142("");
+  const [scopeType, setScopeType] = useState142("full");
+  const [selectedBlocks, setSelectedBlocks] = useState142([]);
+  const [expirationEnabled, setExpirationEnabled] = useState142(false);
+  const [expirationDays, setExpirationDays] = useState142(30);
+  const [canDelegate, setCanDelegate] = useState142(false);
+  const [pin, setPin] = useState142("");
+  const [loading, setLoading] = useState142(false);
+  const [error, setError] = useState142(null);
   const handleSearch = useCallback112(async () => {
     if (searchQuery.length < 2) return;
     setSearching(true);
@@ -33756,15 +33919,15 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
       resetForm();
     }
   };
-  return /* @__PURE__ */ React303.createElement(
+  return /* @__PURE__ */ React304.createElement(
     Modal4,
     {
       opened,
       onClose: handleClose,
-      title: /* @__PURE__ */ React303.createElement(Group111, { gap: "xs" }, /* @__PURE__ */ React303.createElement(IconShieldPlus4, { size: 20 }), /* @__PURE__ */ React303.createElement(Text174, { fw: 600 }, "Grant Permission")),
+      title: /* @__PURE__ */ React304.createElement(Group112, { gap: "xs" }, /* @__PURE__ */ React304.createElement(IconShieldPlus4, { size: 20 }), /* @__PURE__ */ React304.createElement(Text175, { fw: 600 }, "Grant Permission")),
       size: "lg"
     },
-    /* @__PURE__ */ React303.createElement(Stack200, { gap: "md" }, /* @__PURE__ */ React303.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React303.createElement(Text174, { size: "sm", fw: 500 }, "Recipient Type"), /* @__PURE__ */ React303.createElement(
+    /* @__PURE__ */ React304.createElement(Stack200, { gap: "md" }, /* @__PURE__ */ React304.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React304.createElement(Text175, { size: "sm", fw: 500 }, "Recipient Type"), /* @__PURE__ */ React304.createElement(
       Radio5.Group,
       {
         value: recipientType,
@@ -33774,23 +33937,23 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
           setSearchResults([]);
         }
       },
-      /* @__PURE__ */ React303.createElement(Group111, null, /* @__PURE__ */ React303.createElement(Radio5, { value: "user", label: "User" }), /* @__PURE__ */ React303.createElement(Radio5, { value: "oracle", label: "Oracle" }), /* @__PURE__ */ React303.createElement(Radio5, { value: "manual", label: "Enter DID" }))
-    )), recipientType !== "manual" ? /* @__PURE__ */ React303.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React303.createElement(
+      /* @__PURE__ */ React304.createElement(Group112, null, /* @__PURE__ */ React304.createElement(Radio5, { value: "user", label: "User" }), /* @__PURE__ */ React304.createElement(Radio5, { value: "oracle", label: "Oracle" }), /* @__PURE__ */ React304.createElement(Radio5, { value: "manual", label: "Enter DID" }))
+    )), recipientType !== "manual" ? /* @__PURE__ */ React304.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React304.createElement(
       TextInput9,
       {
         placeholder: recipientType === "oracle" ? "Search oracles..." : "Search users...",
-        leftSection: /* @__PURE__ */ React303.createElement(IconSearch8, { size: 16 }),
-        rightSection: searching ? /* @__PURE__ */ React303.createElement(Loader55, { size: 14 }) : null,
+        leftSection: /* @__PURE__ */ React304.createElement(IconSearch8, { size: 16 }),
+        rightSection: searching ? /* @__PURE__ */ React304.createElement(Loader55, { size: 14 }) : null,
         value: searchQuery,
         onChange: (e) => setSearchQuery(e.currentTarget.value),
         onKeyDown: (e) => e.key === "Enter" && handleSearch()
       }
-    ), selectedRecipient ? /* @__PURE__ */ React303.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React303.createElement(Group111, { justify: "space-between" }, /* @__PURE__ */ React303.createElement(Group111, { gap: "xs" }, recipientType === "oracle" ? /* @__PURE__ */ React303.createElement(IconRobot5, { size: 16 }) : /* @__PURE__ */ React303.createElement(IconUser15, { size: 16 }), /* @__PURE__ */ React303.createElement(Text174, { size: "sm" }, selectedRecipient.displayName), /* @__PURE__ */ React303.createElement(Badge46, { size: "xs", variant: "light" }, selectedRecipient.did.slice(-12))), /* @__PURE__ */ React303.createElement(ActionIcon39, { size: "sm", variant: "subtle", onClick: () => setSelectedRecipient(null) }, /* @__PURE__ */ React303.createElement(IconX14, { size: 14 })))) : searchResults.length > 0 ? /* @__PURE__ */ React303.createElement(Paper19, { p: "xs", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React303.createElement(Stack200, { gap: 4 }, searchResults.map((result) => /* @__PURE__ */ React303.createElement(Button59, { key: result.did, variant: "subtle", size: "sm", justify: "flex-start", onClick: () => setSelectedRecipient(result) }, result.displayName)))) : null) : /* @__PURE__ */ React303.createElement(TextInput9, { label: "Recipient DID", placeholder: "did:ixo:...", value: manualDid, onChange: (e) => setManualDid(e.currentTarget.value) }), /* @__PURE__ */ React303.createElement(Divider30, null), /* @__PURE__ */ React303.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React303.createElement(Text174, { size: "sm", fw: 500 }, "Permission Scope"), singleBlockMode && fixedBlock ? (
+    ), selectedRecipient ? /* @__PURE__ */ React304.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React304.createElement(Group112, { justify: "space-between" }, /* @__PURE__ */ React304.createElement(Group112, { gap: "xs" }, recipientType === "oracle" ? /* @__PURE__ */ React304.createElement(IconRobot5, { size: 16 }) : /* @__PURE__ */ React304.createElement(IconUser15, { size: 16 }), /* @__PURE__ */ React304.createElement(Text175, { size: "sm" }, selectedRecipient.displayName), /* @__PURE__ */ React304.createElement(Badge46, { size: "xs", variant: "light" }, selectedRecipient.did.slice(-12))), /* @__PURE__ */ React304.createElement(ActionIcon39, { size: "sm", variant: "subtle", onClick: () => setSelectedRecipient(null) }, /* @__PURE__ */ React304.createElement(IconX14, { size: 14 })))) : searchResults.length > 0 ? /* @__PURE__ */ React304.createElement(Paper19, { p: "xs", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React304.createElement(Stack200, { gap: 4 }, searchResults.map((result) => /* @__PURE__ */ React304.createElement(Button58, { key: result.did, variant: "subtle", size: "sm", justify: "flex-start", onClick: () => setSelectedRecipient(result) }, result.displayName)))) : null) : /* @__PURE__ */ React304.createElement(TextInput9, { label: "Recipient DID", placeholder: "did:ixo:...", value: manualDid, onChange: (e) => setManualDid(e.currentTarget.value) }), /* @__PURE__ */ React304.createElement(Divider30, null), /* @__PURE__ */ React304.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React304.createElement(Text175, { size: "sm", fw: 500 }, "Permission Scope"), singleBlockMode && fixedBlock ? (
       // Single block mode: show fixed block info
-      /* @__PURE__ */ React303.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React303.createElement(Group111, { gap: "xs" }, /* @__PURE__ */ React303.createElement(Badge46, { variant: "light", color: "blue" }, fixedBlock.type), /* @__PURE__ */ React303.createElement(Text174, { size: "sm" }, fixedBlock.name || `Block ${fixedBlock.id.slice(-8)}`)), /* @__PURE__ */ React303.createElement(Text174, { size: "xs", c: "dimmed", mt: "xs" }, "Permission will be granted to execute this specific block."))
+      /* @__PURE__ */ React304.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React304.createElement(Group112, { gap: "xs" }, /* @__PURE__ */ React304.createElement(Badge46, { variant: "light", color: "blue" }, fixedBlock.type), /* @__PURE__ */ React304.createElement(Text175, { size: "sm" }, fixedBlock.name || `Block ${fixedBlock.id.slice(-8)}`)), /* @__PURE__ */ React304.createElement(Text175, { size: "xs", c: "dimmed", mt: "xs" }, "Permission will be granted to execute this specific block."))
     ) : (
       // Multi-block mode: show scope selection
-      /* @__PURE__ */ React303.createElement(React303.Fragment, null, /* @__PURE__ */ React303.createElement(Radio5.Group, { value: scopeType, onChange: (v) => setScopeType(v) }, /* @__PURE__ */ React303.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React303.createElement(Radio5, { value: "full", label: "Full flow access (can execute any block)" }), /* @__PURE__ */ React303.createElement(Radio5, { value: "blocks", label: "Specific blocks only" }))), scopeType === "blocks" && /* @__PURE__ */ React303.createElement(Paper19, { p: "sm", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React303.createElement(Stack200, { gap: "xs" }, blocks.map((block) => /* @__PURE__ */ React303.createElement(
+      /* @__PURE__ */ React304.createElement(React304.Fragment, null, /* @__PURE__ */ React304.createElement(Radio5.Group, { value: scopeType, onChange: (v) => setScopeType(v) }, /* @__PURE__ */ React304.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React304.createElement(Radio5, { value: "full", label: "Full flow access (can execute any block)" }), /* @__PURE__ */ React304.createElement(Radio5, { value: "blocks", label: "Specific blocks only" }))), scopeType === "blocks" && /* @__PURE__ */ React304.createElement(Paper19, { p: "sm", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React304.createElement(Stack200, { gap: "xs" }, blocks.map((block) => /* @__PURE__ */ React304.createElement(
         Checkbox13,
         {
           key: block.id,
@@ -33805,7 +33968,7 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
           }
         }
       )))))
-    )), /* @__PURE__ */ React303.createElement(Divider30, null), /* @__PURE__ */ React303.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React303.createElement(Checkbox13, { label: "Set expiration", checked: expirationEnabled, onChange: (e) => setExpirationEnabled(e.currentTarget.checked) }), expirationEnabled && /* @__PURE__ */ React303.createElement(NumberInput3, { label: "Expires in (days)", placeholder: "30", value: expirationDays, onChange: setExpirationDays, min: 1, max: 365 })), /* @__PURE__ */ React303.createElement(
+    )), /* @__PURE__ */ React304.createElement(Divider30, null), /* @__PURE__ */ React304.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React304.createElement(Checkbox13, { label: "Set expiration", checked: expirationEnabled, onChange: (e) => setExpirationEnabled(e.currentTarget.checked) }), expirationEnabled && /* @__PURE__ */ React304.createElement(NumberInput3, { label: "Expires in (days)", placeholder: "30", value: expirationDays, onChange: setExpirationDays, min: 1, max: 365 })), /* @__PURE__ */ React304.createElement(
       Checkbox13,
       {
         label: "Recipient can grant permissions to others",
@@ -33813,7 +33976,7 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
         checked: canDelegate,
         onChange: (e) => setCanDelegate(e.currentTarget.checked)
       }
-    ), /* @__PURE__ */ React303.createElement(Divider30, null), /* @__PURE__ */ React303.createElement(TextInput9, { label: "Enter your PIN to sign this delegation", type: "password", placeholder: "PIN", value: pin, onChange: (e) => setPin(e.currentTarget.value) }), error && /* @__PURE__ */ React303.createElement(Alert56, { color: "red" }, error), /* @__PURE__ */ React303.createElement(Group111, { justify: "flex-end" }, /* @__PURE__ */ React303.createElement(Button59, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React303.createElement(Button59, { onClick: handleGrant, loading }, "Grant Permission")))
+    ), /* @__PURE__ */ React304.createElement(Divider30, null), /* @__PURE__ */ React304.createElement(TextInput9, { label: "Enter your PIN to sign this delegation", type: "password", placeholder: "PIN", value: pin, onChange: (e) => setPin(e.currentTarget.value) }), error && /* @__PURE__ */ React304.createElement(Alert56, { color: "red" }, error), /* @__PURE__ */ React304.createElement(Group112, { justify: "flex-end" }, /* @__PURE__ */ React304.createElement(Button58, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React304.createElement(Button58, { onClick: handleGrant, loading }, "Grant Permission")))
   );
 };
 
@@ -33905,10 +34068,11 @@ export {
   useCreateCollaborativeIxoEditor,
   BaseIconPicker,
   CoverImage,
-  PageHeader,
+  PageTitle,
   ExternalDropZone,
   IxoEditor,
   DebugButton,
+  PageHeader,
   EvaluationTab,
   EntitySigningSetup,
   FlowPermissionsPanel,
@@ -33926,4 +34090,4 @@ export {
   getExtraSlashMenuItems,
   useCreateIxoEditor
 };
-//# sourceMappingURL=chunk-UWTEHXWI.mjs.map
+//# sourceMappingURL=chunk-3MI2QQYH.mjs.map