@ixo/editor 3.2.1 → 3.3.0

package/dist/{chunk-ZCRLP7QH.mjs → chunk-T6RCHQV6.mjs}

@@ -21,7 +21,7 @@ import {
   resolveActionType,
   sendDirectMessage,
   transformSurveyToCredentialSubject
-} from "./chunk-F2JSGDES.mjs";
+} from "./chunk-UBCN5SXM.mjs";
 
 // src/mantine/hooks/useCreateIxoEditor.ts
 import { useCreateBlockNote } from "@blocknote/react";
@@ -46,7 +46,19 @@ var ixoPasteHandler = ({
     void editor.pasteHTML(tightenHtmlList(html));
     return true;
   }
-  return defaultPasteHandler();
+  try {
+    return defaultPasteHandler();
+  } catch {
+    if (plain) {
+      const view = editor.prosemirrorView;
+      if (view) {
+        const { from, to } = view.state.selection;
+        view.dispatch(view.state.tr.insertText(plain, from, to));
+        return true;
+      }
+    }
+    return void 0;
+  }
 };
 
 // src/mantine/blocks/checkbox/CheckboxBlockSpec.tsx
@@ -9283,10 +9295,10 @@ var ListSelectionPanel = ({ selectedIds, listConfig, listData, listType, userRol
       captionContent: panelConfig?.description && /* @__PURE__ */ React83.createElement(Text55, { pb: "md", px: "40px" }, panelConfig.description(itemHandlerData)),
       context: { editor, block }
     },
-    !supportTabsLists.includes(listType) && /* @__PURE__ */ React83.createElement(Stack55, { gap: "md", style: { flex: 1 } }, panelConfig?.image && /* @__PURE__ */ React83.createElement(
+    !supportTabsLists.includes(listType) && /* @__PURE__ */ React83.createElement(Stack55, { gap: "md", style: { flex: 1 } }, panelConfig?.image && panelConfig.image(itemHandlerData) && /* @__PURE__ */ React83.createElement(
       "img",
       {
-        src: panelConfig?.image(itemHandlerData),
+        src: panelConfig.image(itemHandlerData),
         alt: "Selected item preview",
         style: {
           borderRadius: 8,
@@ -30226,6 +30238,26 @@ var EmbedBlockSpec = createReactBlockSpec22(
   }
 );
 
+// src/mantine/blocks/index.ts
+import {
+  IconCheckbox as IconCheckbox4,
+  IconFileDescription as IconFileDescription4,
+  IconUsers as IconUsers6,
+  IconList,
+  IconChecklist as IconChecklist7,
+  IconLayoutDashboard,
+  IconGavel,
+  IconChartBar,
+  IconTable,
+  IconGitBranch,
+  IconPencil,
+  IconId,
+  IconBolt as IconBolt9,
+  IconExternalLink as IconExternalLink3,
+  IconMapPin as IconMapPin3,
+  IconCode as IconCode3
+} from "@tabler/icons-react";
+
 // src/mantine/blocks/registry/blockRegistry.ts
 var BlockRegistry = class {
   constructor() {
@@ -30475,6 +30507,7 @@ var getExtraSlashMenuItems = (editor) => {
   const slashMenuList = [
     {
       title: "Checkbox",
+      icon: icon(IconCheckbox4),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30502,6 +30535,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Domain Creator",
+      icon: icon(IconFileDescription4),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30525,6 +30559,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Governance Group",
+      icon: icon(IconUsers6),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30553,6 +30588,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "List",
+      icon: icon(IconList),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30575,6 +30611,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Enum Checklist",
+      icon: icon(IconChecklist7),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30596,6 +30633,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Overview",
+      icon: icon(IconLayoutDashboard),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30614,6 +30652,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Proposal",
+      icon: icon(IconGavel),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30638,6 +30677,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Visualization",
+      icon: icon(IconChartBar),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30660,6 +30700,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Dynamic List",
+      icon: icon(IconTable),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30685,6 +30726,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Protocol Selector",
+      icon: icon(IconGitBranch),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30712,6 +30754,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Sign to Create",
+      icon: icon(IconPencil),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30740,6 +30783,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Domain Card",
+      icon: icon(IconId),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30767,6 +30811,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Action",
+      icon: icon(IconBolt9),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30793,6 +30838,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Flow Link",
+      icon: icon(IconExternalLink3),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30817,6 +30863,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Location",
+      icon: icon(IconMapPin3),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30839,6 +30886,7 @@ var getExtraSlashMenuItems = (editor) => {
     },
     {
       title: "Embed",
+      icon: icon(IconCode3),
       onItemClick: () => {
         editor.insertBlocks(
           [
@@ -30862,10 +30910,9 @@ var getExtraSlashMenuItems = (editor) => {
       subtext: "Embed an external website or content via iframe"
     }
   ];
-  const yRoot = editor?._yRoot;
-  const docType = yRoot?.get("docType");
+  const docType = editor?.docType;
   if (docType === "page") {
-    return slashMenuList.filter((item) => item.title !== "Proposal");
+    return slashMenuList.filter((item) => item.title !== "Proposal" && item.title !== "Action" && item.title !== "Protocol Selector");
   }
   return slashMenuList;
 };
@@ -31551,6 +31598,47 @@ function useFlowLifecycle({ editor, connectionStatus, enabled = true }) {
   }, [editor, connectionStatus, enabled, runPipeline]);
 }
 
+// src/mantine/utils/iconToAvatar.ts
+import { renderToStaticMarkup } from "react-dom/server";
+import * as TablerIcons from "@tabler/icons-react";
+import { createElement } from "react";
+function isTablerIconName(value) {
+  return value.startsWith("Icon") && typeof TablerIcons[value] === "function";
+}
+function tablerIconToSvgBlob(iconName) {
+  const Icon = TablerIcons[iconName];
+  if (!Icon || typeof Icon !== "function") return null;
+  const svg = renderToStaticMarkup(createElement(Icon, { size: 120, stroke: 1.5, color: "#868e96" }));
+  return new Blob([svg], { type: "image/svg+xml" });
+}
+async function uploadToMatrix(matrixClient, blob, contentType, fileName) {
+  const result = await matrixClient.uploadContent(blob, {
+    type: contentType,
+    name: fileName
+  });
+  return result.content_uri ?? result;
+}
+async function mirrorIconToRoomAvatar(matrixClient, roomId, iconValue) {
+  if (!iconValue) {
+    await matrixClient.sendStateEvent(roomId, "m.room.avatar", {}, "");
+    return;
+  }
+  let blob = null;
+  let contentType = "image/svg+xml";
+  let fileName = "avatar.svg";
+  if (isTablerIconName(iconValue)) {
+    blob = tablerIconToSvgBlob(iconValue);
+  } else if (iconValue.startsWith("http")) {
+    const response = await fetch(iconValue);
+    blob = await response.blob();
+    contentType = blob.type || "image/png";
+    fileName = `avatar.${contentType.split("/")[1] || "png"}`;
+  }
+  if (!blob) return;
+  const mxcUri = await uploadToMatrix(matrixClient, blob, contentType, fileName);
+  await matrixClient.sendStateEvent(roomId, "m.room.avatar", { url: mxcUri }, "");
+}
+
 // src/mantine/hooks/useCollaborativeIxoEditor.ts
 function useCreateCollaborativeIxoEditor(options) {
   const yDoc = useCollaborativeYDoc(options);
@@ -31838,6 +31926,11 @@ function useCreateCollaborativeIxoEditor(options) {
       }
       const current = metadataManager.getMetadata() || {};
       await metadataManager.setMetadata({ ...current, ...updates }, permissions);
+      if ("icon" in updates) {
+        mirrorIconToRoomAvatar(matrixClient, options.roomId, updates.icon).catch((error) => {
+          console.error("Failed to mirror icon to m.room.avatar:", error);
+        });
+      }
     };
     ixoEditor.getPageMetadata = () => {
       return metadataManager.getMetadata();
@@ -31959,15 +32052,224 @@ function useCreateCollaborativeIxoEditor(options) {
 }
 
 // src/mantine/IxoEditor.tsx
-import React299 from "react";
-import { SuggestionMenuController } from "@blocknote/react";
+import React300 from "react";
+import { SuggestionMenuController, getDefaultReactSlashMenuItems } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import { filterSuggestionItems } from "@blocknote/core";
 import { MantineProvider } from "@mantine/core";
 
+// src/mantine/components/CommandPalette.tsx
+import React291, { useEffect as useEffect108, useRef as useRef29, useState as useState133, useMemo as useMemo120, useCallback as useCallback109 } from "react";
+import { Box as Box58, Text as Text170, Stack as Stack196 } from "@mantine/core";
+var GROUP_ORDER = {
+  Headings: 0,
+  "Basic blocks": 1,
+  Media: 2,
+  Advanced: 3,
+  Others: 4,
+  Basics: 5,
+  Domains: 6,
+  DAO: 7,
+  Flows: 8
+};
+function PaletteItem({ item, isSelected, onClick, id }) {
+  const ref = useRef29(null);
+  const [hovered, setHovered] = useState133(false);
+  useEffect108(() => {
+    if (isSelected && ref.current) {
+      ref.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isSelected]);
+  const highlighted = isSelected || hovered;
+  return /* @__PURE__ */ React291.createElement(
+    Box58,
+    {
+      ref,
+      id,
+      role: "option",
+      "aria-selected": isSelected || void 0,
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "6px 8px",
+        cursor: "pointer",
+        borderRadius: 6,
+        margin: "0 6px",
+        transition: "background-color 0.1s ease",
+        backgroundColor: highlighted ? "var(--mantine-color-neutralColor-4)" : "transparent"
+      }
+    },
+    /* @__PURE__ */ React291.createElement(
+      Box58,
+      {
+        style: {
+          width: 32,
+          height: 32,
+          minWidth: 32,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 6,
+          backgroundColor: "var(--mantine-color-neutralColor-4)",
+          border: "1px solid var(--mantine-color-neutralColor-5)"
+        }
+      },
+      item.icon
+    ),
+    /* @__PURE__ */ React291.createElement(Stack196, { gap: 0, style: { overflow: "hidden", minWidth: 0, flex: 1 } }, /* @__PURE__ */ React291.createElement(
+      Text170,
+      {
+        size: "sm",
+        fw: 500,
+        truncate: true,
+        style: {
+          color: "var(--mantine-color-neutralColor-8) !important"
+        }
+      },
+      item.title
+    ), item.subtext && /* @__PURE__ */ React291.createElement(
+      Text170,
+      {
+        size: "xs",
+        truncate: true,
+        style: {
+          color: "var(--mantine-color-neutralColor-7) !important"
+        }
+      },
+      item.subtext
+    ))
+  );
+}
+function CommandPalette({ items, onItemClick, loadingState, selectedIndex }) {
+  const groupedItems = useMemo120(() => {
+    const groups = [];
+    let currentGroup;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.group !== currentGroup) {
+        currentGroup = item.group;
+        groups.push({ label: currentGroup || "", items: [] });
+      }
+      groups[groups.length - 1].items.push({ item, globalIndex: i });
+    }
+    return groups;
+  }, [items]);
+  const handleItemClick = useCallback109(
+    (item) => {
+      onItemClick?.(item);
+    },
+    [onItemClick]
+  );
+  if (loadingState === "loading-initial") {
+    return /* @__PURE__ */ React291.createElement(
+      Box58,
+      {
+        style: {
+          width: 330,
+          padding: "12px",
+          backgroundColor: "var(--mantine-color-neutralColor-3)",
+          border: "1px solid var(--mantine-color-neutralColor-5)",
+          borderRadius: 10,
+          boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)"
+        }
+      },
+      /* @__PURE__ */ React291.createElement(Text170, { size: "sm", style: { color: "var(--mantine-color-neutralColor-7) !important", textAlign: "center" } }, "Loading...")
+    );
+  }
+  return /* @__PURE__ */ React291.createElement(
+    Box58,
+    {
+      id: "bn-suggestion-menu",
+      role: "listbox",
+      style: {
+        width: 330,
+        maxHeight: 350,
+        overflow: "hidden",
+        backgroundColor: "var(--mantine-color-neutralColor-3)",
+        border: "1px solid var(--mantine-color-neutralColor-5)",
+        borderRadius: 10,
+        boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)",
+        padding: "6px 0"
+      }
+    },
+    /* @__PURE__ */ React291.createElement(
+      Box58,
+      {
+        style: {
+          maxHeight: 338,
+          overflowY: "auto",
+          overflowX: "hidden",
+          scrollbarWidth: "none",
+          msOverflowStyle: "none"
+        }
+      },
+      groupedItems.map((group) => /* @__PURE__ */ React291.createElement(React291.Fragment, { key: group.label }, /* @__PURE__ */ React291.createElement(
+        Text170,
+        {
+          size: "xs",
+          fw: 600,
+          style: {
+            textTransform: "uppercase",
+            letterSpacing: "0.04em",
+            color: "var(--mantine-color-neutralColor-7) !important",
+            padding: "8px 14px 4px 14px",
+            fontSize: 11
+          }
+        },
+        group.label
+      ), group.items.map(({ item, globalIndex }) => /* @__PURE__ */ React291.createElement(
+        PaletteItem,
+        {
+          key: `${item.title}-${globalIndex}`,
+          item,
+          isSelected: globalIndex === selectedIndex,
+          onClick: () => handleItemClick(item),
+          id: `bn-suggestion-menu-item-${globalIndex}`
+        }
+      )))),
+      items.length === 0 && (loadingState === "loaded" || loadingState === "loading") && /* @__PURE__ */ React291.createElement(
+        Text170,
+        {
+          size: "sm",
+          style: {
+            color: "var(--mantine-color-neutralColor-7) !important",
+            textAlign: "center",
+            padding: "12px"
+          }
+        },
+        "No results"
+      )
+    )
+  );
+}
+
+// src/mantine/IxoEditor.tsx
+import {
+  IconH1,
+  IconH2,
+  IconH3,
+  IconBlockquote,
+  IconListNumbers,
+  IconList as IconList2,
+  IconListCheck,
+  IconPilcrow,
+  IconCode as IconCode4,
+  IconTable as IconTable2,
+  IconPhoto as IconPhoto5,
+  IconVideo,
+  IconVolume,
+  IconFile as IconFile5,
+  IconMoodSmile as IconMoodSmile2,
+  IconPageBreak
+} from "@tabler/icons-react";
+
 // src/mantine/components/PanelContent.tsx
-import React291 from "react";
-import { Box as Box58 } from "@mantine/core";
+import React292 from "react";
+import { Box as Box59 } from "@mantine/core";
 var panelStyles = {
   light: {
     backgroundColor: "#ffffff",
@@ -31996,8 +32298,8 @@ function PanelContent({ theme }) {
   const { activePanel, registeredPanels } = usePanelStore();
   const isOpen = activePanel !== null;
   const content = activePanel ? registeredPanels.get(activePanel) : null;
-  return /* @__PURE__ */ React291.createElement(
-    Box58,
+  return /* @__PURE__ */ React292.createElement(
+    Box59,
     {
       pos: "sticky",
       right: 0,
@@ -32016,8 +32318,8 @@ function PanelContent({ theme }) {
 }
 
 // src/mantine/components/CoverImage.tsx
-import React296, { useState as useState136, useRef as useRef29, useEffect as useEffect110, useMemo as useMemo122 } from "react";
-import { Box as Box62, Group as Group109 } from "@mantine/core";
+import React297, { useState as useState137, useRef as useRef30, useEffect as useEffect111, useMemo as useMemo123 } from "react";
+import { Box as Box63, 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
@@ -32151,11 +32453,11 @@ function transformIconImage(sourceUrl, size = "default", customOptions) {
 }
 
 // src/mantine/components/Base/CoverImageButton.tsx
-import React292, { forwardRef, useState as useState133 } from "react";
-import { UnstyledButton as UnstyledButton6, Group as Group106, Text as Text170 } from "@mantine/core";
+import React293, { forwardRef, useState as useState134 } from "react";
+import { UnstyledButton as UnstyledButton6, Group as Group106, Text as Text171 } 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(
+  const [hovered, setHovered] = useState134(false);
+  return /* @__PURE__ */ React293.createElement(
     UnstyledButton6,
     {
       ref,
@@ -32171,7 +32473,7 @@ var CoverImageButton = forwardRef(function CoverImageButton2({ isActive = false,
         ...style
       }
     },
-    /* @__PURE__ */ React292.createElement(Group106, { gap: 4, wrap: "nowrap" }, icon2 && /* @__PURE__ */ React292.createElement(
+    /* @__PURE__ */ React293.createElement(Group106, { gap: 4, wrap: "nowrap" }, icon2 && /* @__PURE__ */ React293.createElement(
       "span",
       {
         style: {
@@ -32181,8 +32483,8 @@ var CoverImageButton = forwardRef(function CoverImageButton2({ isActive = false,
         }
       },
       icon2
-    ), /* @__PURE__ */ React292.createElement(
-      Text170,
+    ), /* @__PURE__ */ React293.createElement(
+      Text171,
       {
         fz: 12,
         style: {
@@ -32196,9 +32498,9 @@ var CoverImageButton = forwardRef(function CoverImageButton2({ isActive = false,
 });
 
 // src/mantine/components/Base/BaseIconPicker.tsx
-import React293, { useState as useState134, useMemo as useMemo120, 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 React294, { useState as useState135, useMemo as useMemo121, useEffect as useEffect109 } from "react";
+import { TextInput as TextInput7, Tabs as Tabs4, Box as Box60, Stack as Stack197, UnstyledButton as UnstyledButton7, Text as Text172, Center as Center14, ScrollArea as ScrollArea9, Group as Group107, Popover as Popover6 } from "@mantine/core";
+import * as TablerIcons2 from "@tabler/icons-react";
 import { IconSearch as IconSearch7, IconX as IconX13, IconChevronLeft, IconChevronRight as IconChevronRight13 } from "@tabler/icons-react";
 
 // src/core/services/localStorage.ts
@@ -32229,28 +32531,28 @@ var localStorageService = {
 var iconsKey = "editor_recent_icons";
 var ICONS_PER_PAGE = 500;
 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 = useMemo120(() => {
-    const iconEntries = Object.entries(TablerIcons).filter(([name]) => name.startsWith("Icon") && name !== "IconProps");
+  const [searchQuery, setSearchQuery] = useState135("");
+  const [activeTab, setActiveTab] = useState135("icons");
+  const [currentPage, setCurrentPage] = useState135(1);
+  const allIcons = useMemo121(() => {
+    const iconEntries = Object.entries(TablerIcons2).filter(([name]) => name.startsWith("Icon") && name !== "IconProps");
     return iconEntries;
   }, []);
-  const filteredIcons = useMemo120(() => {
+  const filteredIcons = useMemo121(() => {
     if (!searchQuery) return allIcons;
     const query = searchQuery.toLowerCase();
     return allIcons.filter(([name]) => name.toLowerCase().includes(query));
   }, [allIcons, searchQuery]);
-  useEffect108(() => {
+  useEffect109(() => {
     setCurrentPage(1);
   }, [searchQuery]);
-  const paginatedIcons = useMemo120(() => {
+  const paginatedIcons = useMemo121(() => {
     const startIndex = (currentPage - 1) * ICONS_PER_PAGE;
     const endIndex = startIndex + ICONS_PER_PAGE;
     return filteredIcons.slice(startIndex, endIndex);
   }, [filteredIcons, currentPage]);
   const totalPages = Math.ceil(filteredIcons.length / ICONS_PER_PAGE);
-  const recentIcons = useMemo120(() => {
+  const recentIcons = useMemo121(() => {
     const recentIconNames = localStorageService.get(iconsKey);
     if (!recentIconNames || recentIconNames.length === 0) return [];
     return recentIconNames.slice(0, 24).map((iconName) => allIcons.find(([name]) => name === iconName)).filter((entry) => entry !== void 0);
@@ -32265,10 +32567,10 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, onRemove
   };
   const renderIconGrid = (icons) => {
     if (icons.length === 0) {
-      return /* @__PURE__ */ React293.createElement(Center14, { py: "xl" }, /* @__PURE__ */ React293.createElement(Text171, { c: "dimmed", size: "sm" }, "No icons found"));
+      return /* @__PURE__ */ React294.createElement(Center14, { py: "xl" }, /* @__PURE__ */ React294.createElement(Text172, { c: "dimmed", size: "sm" }, "No icons found"));
     }
-    return /* @__PURE__ */ React293.createElement(
-      Box59,
+    return /* @__PURE__ */ React294.createElement(
+      Box60,
       {
         style: {
           display: "grid",
@@ -32279,7 +32581,7 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, onRemove
       },
       icons.map(([name, IconComponent]) => {
         const isSelected = currentIcon === name.replace("Icon", "").replace(/([A-Z])/g, "-$1").toLowerCase().slice(1);
-        return /* @__PURE__ */ React293.createElement(
+        return /* @__PURE__ */ React294.createElement(
           UnstyledButton7,
           {
             key: name,
@@ -32305,12 +32607,12 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, onRemove
               }
             }
           },
-          /* @__PURE__ */ React293.createElement(IconComponent, { size: 24, stroke: 1.5, style: { color: "var(--mantine-color-neutralColor-8) !important" } })
+          /* @__PURE__ */ React294.createElement(IconComponent, { size: 24, stroke: 1.5, style: { color: "var(--mantine-color-neutralColor-8) !important" } })
         );
       })
     );
   };
-  return /* @__PURE__ */ React293.createElement(Popover6, { opened, onClose, position: "right", width: 500, shadow: "xl" }, /* @__PURE__ */ React293.createElement(Popover6.Target, null, children), /* @__PURE__ */ React293.createElement(
+  return /* @__PURE__ */ React294.createElement(Popover6, { opened, onClose, position: "right", width: 500, shadow: "xl" }, /* @__PURE__ */ React294.createElement(Popover6.Target, null, children), /* @__PURE__ */ React294.createElement(
     Popover6.Dropdown,
     {
       style: {
@@ -32320,7 +32622,7 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, onRemove
       },
       p: 0
     },
-    onRemove && /* @__PURE__ */ React293.createElement(
+    onRemove && /* @__PURE__ */ React294.createElement(
       UnstyledButton7,
       {
         onClick: () => {
@@ -32338,17 +32640,17 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, onRemove
           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__ */ React294.createElement(Group107, { gap: 4, wrap: "nowrap" }, /* @__PURE__ */ React294.createElement(IconX13, { size: 14 }), /* @__PURE__ */ React294.createElement(Text172, { 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(
+    /* @__PURE__ */ React294.createElement(Stack197, { gap: "md", p: "md" }, /* @__PURE__ */ React294.createElement(Tabs4, { value: activeTab, onChange: setActiveTab, variant: "pills" }, /* @__PURE__ */ React294.createElement(Tabs4.List, null, /* @__PURE__ */ React294.createElement(Tabs4.Tab, { value: "icons" }, "Icons"), /* @__PURE__ */ React294.createElement(Tabs4.Tab, { value: "upload" }, "Upload")), /* @__PURE__ */ React294.createElement(Tabs4.Panel, { value: "icons", pt: "md" }, /* @__PURE__ */ React294.createElement(
       TextInput7,
       {
         mb: "md",
         placeholder: "Filter",
-        leftSection: /* @__PURE__ */ React293.createElement(IconSearch7, { size: 18 }),
+        leftSection: /* @__PURE__ */ React294.createElement(IconSearch7, { size: 18 }),
         value: searchQuery,
         onChange: (e) => setSearchQuery(e.currentTarget.value),
-        rightSection: searchQuery && /* @__PURE__ */ React293.createElement(UnstyledButton7, { onClick: () => setSearchQuery("") }, /* @__PURE__ */ React293.createElement(IconX13, { size: 18 })),
+        rightSection: searchQuery && /* @__PURE__ */ React294.createElement(UnstyledButton7, { onClick: () => setSearchQuery("") }, /* @__PURE__ */ React294.createElement(IconX13, { size: 18 })),
         style: { flex: 1 },
         styles: {
           input: {
@@ -32358,37 +32660,37 @@ function BaseIconPicker({ opened, onClose, onSelectIcon, onUploadClick, onRemove
           }
         }
       }
-    ), !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(
+    ), !searchQuery && /* @__PURE__ */ React294.createElement(Box60, { mb: "md" }, /* @__PURE__ */ React294.createElement(Text172, { size: "sm", fw: 500, mb: "xs", px: "xs" }, "Recent"), /* @__PURE__ */ React294.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 60 }, renderIconGrid(recentIcons))), /* @__PURE__ */ React294.createElement(Box60, null, /* @__PURE__ */ React294.createElement(Group107, { justify: "space-between", mb: "xs", px: "xs" }, /* @__PURE__ */ React294.createElement(Text172, { size: "sm", fw: 500 }, searchQuery ? "Results" : "Icons"), totalPages > 1 && /* @__PURE__ */ React294.createElement(Group107, { gap: "xs" }, /* @__PURE__ */ React294.createElement(Text172, { size: "xs", c: "dimmed" }, "Page ", currentPage, " of ", totalPages, " (", filteredIcons.length, " total)"), /* @__PURE__ */ React294.createElement(BaseButton, { size: "xs", onClick: () => setCurrentPage((p) => Math.max(1, p - 1)), disabled: currentPage === 1, leftSection: /* @__PURE__ */ React294.createElement(IconChevronLeft, { size: 14 }) }, "Prev"), /* @__PURE__ */ React294.createElement(
       BaseButton,
       {
         size: "xs",
         onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
         disabled: currentPage === totalPages,
-        leftSection: /* @__PURE__ */ React293.createElement(IconChevronRight13, { size: 14 })
+        leftSection: /* @__PURE__ */ React294.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(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"))))))
+    ))), /* @__PURE__ */ React294.createElement(ScrollArea9.Autosize, { scrollbarSize: 0, mah: 200 }, renderIconGrid(paginatedIcons)))), /* @__PURE__ */ React294.createElement(Tabs4.Panel, { value: "upload", pt: "md" }, /* @__PURE__ */ React294.createElement(Center14, { py: "xl" }, /* @__PURE__ */ React294.createElement(Stack197, { align: "center", gap: "md" }, /* @__PURE__ */ React294.createElement(Text172, { size: "sm", c: "dimmed", ta: "center" }, "Upload a custom icon image", /* @__PURE__ */ React294.createElement("br", null), "(PNG, JPG, SVG)"), /* @__PURE__ */ React294.createElement(CoverImageButton, { onClick: onUploadClick }, "Choose File"))))))
   ));
 }
 
 // src/mantine/components/Base/PageIcon.tsx
-import React294, { useMemo as useMemo121 } from "react";
-import { Center as Center15, Box as Box60 } from "@mantine/core";
-import * as TablerIcons2 from "@tabler/icons-react";
+import React295, { useMemo as useMemo122 } from "react";
+import { Center as Center15, Box as Box61 } from "@mantine/core";
+import * as TablerIcons3 from "@tabler/icons-react";
 function PageIcon({ src, iconSize = 64, useCenter = false, style }) {
   const isIconName = src && !src.startsWith("http");
-  const IconComponent = useMemo121(() => {
+  const IconComponent = useMemo122(() => {
     if (!isIconName || !src) return null;
-    const iconComponent = TablerIcons2[src];
+    const iconComponent = TablerIcons3[src];
     if (iconComponent) {
       return iconComponent;
     }
     return null;
   }, [isIconName, src]);
-  const Container = useCenter ? Center15 : Box60;
+  const Container = useCenter ? Center15 : Box61;
   if (!src) return null;
   if (IconComponent) {
-    return /* @__PURE__ */ React294.createElement(
+    return /* @__PURE__ */ React295.createElement(
       Container,
       {
         style: {
@@ -32400,10 +32702,10 @@ function PageIcon({ src, iconSize = 64, useCenter = false, style }) {
           ...style
         }
       },
-      /* @__PURE__ */ React294.createElement(IconComponent, { size: iconSize, stroke: 1.5, style: { color: "var(--mantine-color-neutralColor-8) !important" } })
+      /* @__PURE__ */ React295.createElement(IconComponent, { size: iconSize, stroke: 1.5, style: { color: "var(--mantine-color-neutralColor-8) !important" } })
     );
   }
-  return /* @__PURE__ */ React294.createElement(
+  return /* @__PURE__ */ React295.createElement(
     "img",
     {
       src,
@@ -32424,14 +32726,14 @@ function PageIcon({ src, iconSize = 64, useCenter = false, style }) {
 import { useDisclosure as useDisclosure7 } from "@mantine/hooks";
 
 // src/mantine/components/FlowSettingsPanel.tsx
-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 React296, { useState as useState136, useEffect as useEffect110, useCallback as useCallback110 } from "react";
+import { Stack as Stack198, Group as Group108, Button as Button55, ActionIcon as ActionIcon37, Text as Text173, Box as Box62 } 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] = useState135([]);
-  const loadSettings = useCallback109(() => {
+  const [rows, setRows] = useState136([]);
+  const loadSettings = useCallback110(() => {
     const metadata = editor.getFlowMetadata?.();
     if (!metadata) return;
     const customRows = [];
@@ -32442,10 +32744,10 @@ var FlowSettingsPanel = ({ editor }) => {
     }
     setRows(customRows);
   }, [editor]);
-  useEffect109(() => {
+  useEffect110(() => {
     loadSettings();
   }, [loadSettings]);
-  const handleKeyChange = useCallback109(
+  const handleKeyChange = useCallback110(
     (index, newKey) => {
       setRows((prev) => {
         const updated = [...prev];
@@ -32462,7 +32764,7 @@ var FlowSettingsPanel = ({ editor }) => {
     },
     [editor]
   );
-  const handleValueChange = useCallback109(
+  const handleValueChange = useCallback110(
     (index, newValue) => {
       setRows((prev) => {
         const updated = [...prev];
@@ -32476,10 +32778,10 @@ var FlowSettingsPanel = ({ editor }) => {
     },
     [editor]
   );
-  const handleAdd = useCallback109(() => {
+  const handleAdd = useCallback110(() => {
     setRows((prev) => [...prev, { key: "", value: "" }]);
   }, []);
-  const handleDelete = useCallback109(
+  const handleDelete = useCallback110(
     (index) => {
       setRows((prev) => {
         const row = prev[index];
@@ -32491,23 +32793,23 @@ var FlowSettingsPanel = ({ editor }) => {
     },
     [editor]
   );
-  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")));
+  const subtitle = /* @__PURE__ */ React296.createElement(Box62, { px: 40, mb: "md" }, /* @__PURE__ */ React296.createElement(Text173, { size: "sm", c: "dimmed" }, "Add key-value settings for this flow. These are available to oracles and action blocks at runtime."));
+  return /* @__PURE__ */ React296.createElement(BaseRightPanelLayout, { title: "Flow Details", onClose: closePanel, isTemplate: true, captionContent: subtitle }, /* @__PURE__ */ React296.createElement(Stack198, { gap: "lg" }, rows.map((row, index) => /* @__PURE__ */ React296.createElement(Stack198, { key: index, gap: "xs" }, /* @__PURE__ */ React296.createElement(Group108, { gap: "xs", align: "center", wrap: "nowrap" }, /* @__PURE__ */ React296.createElement(BaseTextInput, { placeholder: "Key (e.g. protocolDid)", value: row.key, onChange: (e) => handleKeyChange(index, e.currentTarget.value), style: { flex: 1 } }), /* @__PURE__ */ React296.createElement(ActionIcon37, { variant: "subtle", color: "red", onClick: () => handleDelete(index), size: "lg" }, /* @__PURE__ */ React296.createElement(IconTrash10, { size: 16 }))), /* @__PURE__ */ React296.createElement(BaseTextArea, { placeholder: "Value", value: row.value, onChange: (e) => handleValueChange(index, e.currentTarget.value), minRows: 1, maxRows: 8 }))), /* @__PURE__ */ React296.createElement(Button55, { variant: "subtle", leftSection: /* @__PURE__ */ React296.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] = useState136(false);
-  const [isRepositioning, setIsRepositioning] = useState136(false);
-  const [coverPosition, setCoverPosition] = useState136(() => editor?.getPageMetadata?.()?.coverPosition ?? 50);
-  const coverFileInputRef = useRef29(null);
-  const logoFileInputRef = useRef29(null);
+  const [isHovering, setIsHovering] = useState137(false);
+  const [isRepositioning, setIsRepositioning] = useState137(false);
+  const [coverPosition, setCoverPosition] = useState137(() => editor?.getPageMetadata?.()?.coverPosition ?? 50);
+  const coverFileInputRef = useRef30(null);
+  const logoFileInputRef = useRef30(null);
   const [opened, { open, close }] = useDisclosure7(false);
-  const [metadata, setMetadata] = useState136(() => editor?.getPageMetadata?.() || null);
-  const settingsPanelContent = useMemo122(() => editor ? /* @__PURE__ */ React296.createElement(FlowSettingsPanel, { editor }) : null, [editor]);
+  const [metadata, setMetadata] = useState137(() => editor?.getPageMetadata?.() || null);
+  const settingsPanelContent = useMemo123(() => editor ? /* @__PURE__ */ React297.createElement(FlowSettingsPanel, { editor }) : null, [editor]);
   const { open: openSettings } = usePanel("flow-settings-panel", settingsPanelContent);
-  useEffect110(() => {
+  useEffect111(() => {
     if (!editor?._metadataManager) {
       return;
     }
@@ -32595,8 +32897,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
     return null;
   }
   if (!hasCover) {
-    return /* @__PURE__ */ React296.createElement(
-      Box62,
+    return /* @__PURE__ */ React297.createElement(
+      Box63,
       {
         style: {
           position: "relative",
@@ -32607,8 +32909,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         onMouseEnter: () => editable && setIsHovering(true),
         onMouseLeave: () => editable && setIsHovering(false)
       },
-      /* @__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,
+      /* @__PURE__ */ React297.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "relative", minHeight: "inherit" } }, /* @__PURE__ */ React297.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }), /* @__PURE__ */ React297.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") }), logoSrc && /* @__PURE__ */ React297.createElement(
+        Box63,
         {
           style: {
             position: "relative",
@@ -32620,8 +32922,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             zIndex: 11
           }
         },
-        /* @__PURE__ */ React296.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }),
-        editable && /* @__PURE__ */ React296.createElement(
+        /* @__PURE__ */ React297.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }),
+        editable && /* @__PURE__ */ React297.createElement(
           BaseIconPicker,
           {
             opened,
@@ -32631,8 +32933,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             onUploadClick: () => logoFileInputRef.current?.click(),
             onRemove: handleRemoveLogo
           },
-          /* @__PURE__ */ React296.createElement(
-            Box62,
+          /* @__PURE__ */ React297.createElement(
+            Box63,
             {
               onClick: open,
               style: {
@@ -32644,7 +32946,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             }
           )
         )
-      ), editable && (isHovering || opened) && /* @__PURE__ */ React296.createElement(Group109, { gap: 4, style: { position: "absolute", bottom: hasLogo ? -18 : 0, left: 0, zIndex: 10 } }, !logoSrc && /* @__PURE__ */ React296.createElement(
+      ), editable && (isHovering || opened) && /* @__PURE__ */ React297.createElement(Group109, { gap: 4, style: { position: "absolute", bottom: hasLogo ? -18 : 0, left: 0, zIndex: 10 } }, !logoSrc && /* @__PURE__ */ React297.createElement(
         BaseIconPicker,
         {
           opened,
@@ -32653,12 +32955,12 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           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")))
+        /* @__PURE__ */ React297.createElement(CoverImageButton, { onClick: open, icon: /* @__PURE__ */ React297.createElement(IconMoodSmile, { size: 14 }) }, "Add icon")
+      ), /* @__PURE__ */ React297.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click(), icon: /* @__PURE__ */ React297.createElement(IconPhoto4, { size: 14 }) }, "Add cover"), /* @__PURE__ */ React297.createElement(CoverImageButton, { onClick: openSettings, icon: /* @__PURE__ */ React297.createElement(IconSettings22, { size: 14 }) }, "Details")))
     );
   }
-  return /* @__PURE__ */ React296.createElement(
-    Box62,
+  return /* @__PURE__ */ React297.createElement(
+    Box63,
     {
       style: {
         position: "relative",
@@ -32685,7 +32987,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         }
       }
     },
-    /* @__PURE__ */ React296.createElement(
+    /* @__PURE__ */ React297.createElement(
       "img",
       {
         src: coverUrl,
@@ -32703,7 +33005,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         }
       }
     ),
-    editable && isHovering && /* @__PURE__ */ React296.createElement(
+    editable && isHovering && /* @__PURE__ */ React297.createElement(
       Group109,
       {
         gap: "xs",
@@ -32714,8 +33016,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           zIndex: 10
         }
       },
-      /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click(), icon: /* @__PURE__ */ React296.createElement(IconRefresh5, { size: 14 }) }, "Change cover"),
-      /* @__PURE__ */ React296.createElement(
+      /* @__PURE__ */ React297.createElement(CoverImageButton, { onClick: () => coverFileInputRef.current?.click(), icon: /* @__PURE__ */ React297.createElement(IconRefresh5, { size: 14 }) }, "Change cover"),
+      /* @__PURE__ */ React297.createElement(
         CoverImageButton,
         {
           onClick: () => {
@@ -32725,14 +33027,14 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             setIsRepositioning(!isRepositioning);
           },
           isActive: isRepositioning,
-          icon: /* @__PURE__ */ React296.createElement(IconArrowsMove, { size: 14 })
+          icon: /* @__PURE__ */ React297.createElement(IconArrowsMove, { size: 14 })
         },
         isRepositioning ? "Done" : "Reposition"
       ),
-      /* @__PURE__ */ React296.createElement(CoverImageButton, { onClick: handleRemoveCover, icon: /* @__PURE__ */ React296.createElement(IconTrash11, { size: 14 }) }, "Remove")
+      /* @__PURE__ */ React297.createElement(CoverImageButton, { onClick: handleRemoveCover, icon: /* @__PURE__ */ React297.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,
+    /* @__PURE__ */ React297.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "absolute", bottom: 0, left: 0, right: 0, height: "70px" } }, /* @__PURE__ */ React297.createElement(
+      Box63,
       {
         style: {
           position: "absolute",
@@ -32743,7 +33045,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           zIndex: 11
         }
       },
-      logoSrc ? /* @__PURE__ */ React296.createElement(React296.Fragment, null, /* @__PURE__ */ React296.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }), editable && /* @__PURE__ */ React296.createElement(
+      logoSrc ? /* @__PURE__ */ React297.createElement(React297.Fragment, null, /* @__PURE__ */ React297.createElement(PageIcon, { src: logoSrc, useCenter: true, iconSize: 64 }), editable && /* @__PURE__ */ React297.createElement(
         BaseIconPicker,
         {
           opened,
@@ -32753,8 +33055,8 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           onUploadClick: () => logoFileInputRef.current?.click(),
           onRemove: handleRemoveLogo
         },
-        /* @__PURE__ */ React296.createElement(
-          Box62,
+        /* @__PURE__ */ React297.createElement(
+          Box63,
           {
             onClick: open,
             style: {
@@ -32765,7 +33067,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
             }
           }
         )
-      )) : editable && isHovering && /* @__PURE__ */ React296.createElement(
+      )) : editable && isHovering && /* @__PURE__ */ React297.createElement(
         BaseIconPicker,
         {
           opened,
@@ -32774,11 +33076,11 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           onSelectIcon: (name) => handleSelectLogoIcon(name),
           onUploadClick: () => logoFileInputRef.current?.click()
         },
-        /* @__PURE__ */ React296.createElement(
+        /* @__PURE__ */ React297.createElement(
           CoverImageButton,
           {
             onClick: open,
-            icon: /* @__PURE__ */ React296.createElement(IconMoodSmile, { size: 14 }),
+            icon: /* @__PURE__ */ React297.createElement(IconMoodSmile, { size: 14 }),
             style: {
               position: "absolute",
               top: "50%",
@@ -32791,14 +33093,14 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         )
       )
     )),
-    /* @__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") })
+    /* @__PURE__ */ React297.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }),
+    /* @__PURE__ */ React297.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") })
   );
 }
 
 // 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";
+import React298, { useState as useState138, useEffect as useEffect112, useRef as useRef31, useCallback as useCallback111 } from "react";
+import { Box as Box64 } from "@mantine/core";
 var DEFAULT_TITLE = "New page";
 function isUserTitle(name) {
   if (!name) return "";
@@ -32813,11 +33115,11 @@ function cleanEmptyEditable(el) {
   }
 }
 function PageTitle({ editor, editable }) {
-  const [title, setTitle] = useState137("");
-  const [hasIcon, setHasIcon] = useState137(false);
-  const titleRef = useRef30(null);
-  const isComposing = useRef30(false);
-  useEffect111(() => {
+  const [title, setTitle] = useState138("");
+  const [hasIcon, setHasIcon] = useState138(false);
+  const titleRef = useRef31(null);
+  const isComposing = useRef31(false);
+  useEffect112(() => {
     if (!editor?._metadataManager) return;
     const metadata = editor._metadataManager.getMetadata();
     const initial = isUserTitle(metadata?.title);
@@ -32837,12 +33139,12 @@ function PageTitle({ editor, editable }) {
     });
     return unsubscribe;
   }, [editor]);
-  useEffect111(() => {
+  useEffect112(() => {
     if (titleRef.current && title && !titleRef.current.textContent) {
       titleRef.current.textContent = title;
     }
   }, [title]);
-  const saveTitle = useCallback110(
+  const saveTitle = useCallback111(
     async (newTitle) => {
       const trimmed = newTitle.trim();
       const toSave = trimmed || DEFAULT_TITLE;
@@ -32858,19 +33160,19 @@ function PageTitle({ editor, editable }) {
     },
     [editor]
   );
-  const handleInput = useCallback110(() => {
+  const handleInput = useCallback111(() => {
     if (titleRef.current) {
       cleanEmptyEditable(titleRef.current);
       setTitle(titleRef.current.textContent || "");
     }
   }, []);
-  const handleBlur = useCallback110(() => {
+  const handleBlur = useCallback111(() => {
     if (titleRef.current) {
       cleanEmptyEditable(titleRef.current);
       saveTitle(titleRef.current.textContent || "");
     }
   }, [saveTitle]);
-  const handleKeyDown = useCallback110(
+  const handleKeyDown = useCallback111(
     (e) => {
       if (isComposing.current) return;
       if (e.key === "Enter" || e.key === "ArrowDown") {
@@ -32881,9 +33183,10 @@ function PageTitle({ editor, editable }) {
     },
     [editor, saveTitle]
   );
-  useEffect111(() => {
+  useEffect112(() => {
     const handleEditorKeyDown = (e) => {
       if (e.key !== "ArrowUp" || !titleRef.current) return;
+      if (document.getElementById("bn-suggestion-menu")) return;
       try {
         const pos = editor.getTextCursorPosition?.();
         if (pos && !pos.prevBlock) {
@@ -32904,13 +33207,13 @@ function PageTitle({ editor, editable }) {
       container?.removeEventListener("keydown", handleEditorKeyDown, true);
     };
   }, [editor]);
-  const handlePaste = useCallback110((e) => {
+  const handlePaste = useCallback111((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,
+  return /* @__PURE__ */ React298.createElement(Box64, { maw: 900, mx: "auto", w: "100%" }, /* @__PURE__ */ React298.createElement(
+    Box64,
     {
       ref: titleRef,
       component: "div",
@@ -32966,8 +33269,8 @@ if (typeof document !== "undefined") {
 }
 
 // src/mantine/components/ExternalDropZone.tsx
-import React298, { useCallback as useCallback111, useEffect as useEffect112, useRef as useRef31, useState as useState138 } from "react";
-import { Box as Box64 } from "@mantine/core";
+import React299, { useCallback as useCallback112, useEffect as useEffect113, useRef as useRef32, useState as useState139 } from "react";
+import { Box as Box65 } from "@mantine/core";
 var SCROLL_ZONE_SIZE = 80;
 var SCROLL_SPEED = 12;
 var ExternalDropZone = ({
@@ -32979,20 +33282,20 @@ var ExternalDropZone = ({
   onPlacementCancel,
   children
 }) => {
-  const containerRef = useRef31(null);
-  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 = useCallback111(() => {
+  const containerRef = useRef32(null);
+  const [isValidDrag, setIsValidDrag] = useState139(false);
+  const [isHoveringInPlacementMode, setIsHoveringInPlacementMode] = useState139(false);
+  const [indicatorStyle, setIndicatorStyle] = useState139({});
+  const dropPositionRef = useRef32(null);
+  const scrollAnimationRef = useRef32(null);
+  const scrollDirectionRef = useRef32(null);
+  const scrollContainerRef = useRef32(null);
+  const getBlockElements = useCallback112(() => {
     if (!containerRef.current) return [];
     const blocks = containerRef.current.querySelectorAll('[data-node-type="blockContainer"]');
     return Array.from(blocks);
   }, []);
-  const getScrollContainer = useCallback111(() => {
+  const getScrollContainer = useCallback112(() => {
     if (scrollContainerRef.current) return scrollContainerRef.current;
     let element = containerRef.current;
     while (element) {
@@ -33007,7 +33310,7 @@ var ExternalDropZone = ({
     scrollContainerRef.current = window;
     return window;
   }, []);
-  const performScroll = useCallback111(() => {
+  const performScroll = useCallback112(() => {
     const container = getScrollContainer();
     const direction = scrollDirectionRef.current;
     if (!direction) {
@@ -33022,7 +33325,7 @@ var ExternalDropZone = ({
     }
     scrollAnimationRef.current = requestAnimationFrame(performScroll);
   }, [getScrollContainer]);
-  const startAutoScroll = useCallback111(
+  const startAutoScroll = useCallback112(
     (direction) => {
       if (scrollDirectionRef.current === direction) return;
       scrollDirectionRef.current = direction;
@@ -33032,14 +33335,14 @@ var ExternalDropZone = ({
     },
     [performScroll]
   );
-  const stopAutoScroll = useCallback111(() => {
+  const stopAutoScroll = useCallback112(() => {
     scrollDirectionRef.current = null;
     if (scrollAnimationRef.current) {
       cancelAnimationFrame(scrollAnimationRef.current);
       scrollAnimationRef.current = null;
     }
   }, []);
-  const checkAutoScroll = useCallback111(
+  const checkAutoScroll = useCallback112(
     (clientY) => {
       const container = getScrollContainer();
       let containerTop;
@@ -33062,7 +33365,7 @@ var ExternalDropZone = ({
     },
     [getScrollContainer, startAutoScroll, stopAutoScroll]
   );
-  const findDropPosition = useCallback111(
+  const findDropPosition = useCallback112(
     (clientY) => {
       const blocks = getBlockElements();
       if (blocks.length === 0 || !editor?.document) return null;
@@ -33095,7 +33398,7 @@ var ExternalDropZone = ({
     },
     [getBlockElements, editor]
   );
-  const handleDragOver = useCallback111(
+  const handleDragOver = useCallback112(
     (e) => {
       if (!e.dataTransfer.types.includes(acceptedType)) return;
       e.preventDefault();
@@ -33118,7 +33421,7 @@ var ExternalDropZone = ({
     },
     [acceptedType, findDropPosition, checkAutoScroll]
   );
-  const handleDragLeave = useCallback111(
+  const handleDragLeave = useCallback112(
     (e) => {
       if (containerRef.current && !containerRef.current.contains(e.relatedTarget)) {
         setIsValidDrag(false);
@@ -33128,7 +33431,7 @@ var ExternalDropZone = ({
     },
     [stopAutoScroll]
   );
-  const handleDrop = useCallback111(
+  const handleDrop = useCallback112(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -33142,7 +33445,7 @@ var ExternalDropZone = ({
     },
     [onDrop, stopAutoScroll]
   );
-  useEffect112(() => {
+  useEffect113(() => {
     const handleGlobalDragEnd = () => {
       setIsValidDrag(false);
       dropPositionRef.current = null;
@@ -33151,7 +33454,7 @@ var ExternalDropZone = ({
     window.addEventListener("dragend", handleGlobalDragEnd);
     return () => window.removeEventListener("dragend", handleGlobalDragEnd);
   }, [stopAutoScroll]);
-  const handleOverlayMouseMove = useCallback111(
+  const handleOverlayMouseMove = useCallback112(
     (e) => {
       setIsHoveringInPlacementMode(true);
       checkAutoScroll(e.clientY);
@@ -33170,12 +33473,12 @@ var ExternalDropZone = ({
     },
     [findDropPosition, checkAutoScroll]
   );
-  const handleOverlayMouseLeave = useCallback111(() => {
+  const handleOverlayMouseLeave = useCallback112(() => {
     setIsHoveringInPlacementMode(false);
     dropPositionRef.current = null;
     stopAutoScroll();
   }, [stopAutoScroll]);
-  const handleOverlayClick = useCallback111(
+  const handleOverlayClick = useCallback112(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -33189,7 +33492,7 @@ var ExternalDropZone = ({
     },
     [onDrop, stopAutoScroll]
   );
-  const handleOverlayWheel = useCallback111(
+  const handleOverlayWheel = useCallback112(
     (e) => {
       const container = getScrollContainer();
       if (container === window) {
@@ -33200,7 +33503,7 @@ var ExternalDropZone = ({
     },
     [getScrollContainer]
   );
-  useEffect112(() => {
+  useEffect113(() => {
     if (!isPlacementMode) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -33223,13 +33526,13 @@ var ExternalDropZone = ({
       document.removeEventListener("click", handleGlobalClick, true);
     };
   }, [isPlacementMode, onPlacementCancel]);
-  useEffect112(() => {
+  useEffect113(() => {
     if (!isPlacementMode) {
       setIsHoveringInPlacementMode(false);
       dropPositionRef.current = null;
     }
   }, [isPlacementMode]);
-  useEffect112(() => {
+  useEffect113(() => {
     const isActive = isValidDrag || isPlacementMode && isHoveringInPlacementMode;
     if (isActive) {
       document.body.classList.add("external-artifact-drag-active");
@@ -33240,19 +33543,19 @@ var ExternalDropZone = ({
       document.body.classList.remove("external-artifact-drag-active");
     };
   }, [isValidDrag, isPlacementMode, isHoveringInPlacementMode]);
-  useEffect112(() => {
+  useEffect113(() => {
     return () => {
       if (scrollAnimationRef.current) {
         cancelAnimationFrame(scrollAnimationRef.current);
       }
     };
   }, []);
-  const indicatorWithPosition = dropIndicator && React298.isValidElement(dropIndicator) ? React298.cloneElement(dropIndicator, {
+  const indicatorWithPosition = dropIndicator && React299.isValidElement(dropIndicator) ? React299.cloneElement(dropIndicator, {
     indicatorTop: typeof indicatorStyle.top === "number" ? indicatorStyle.top : void 0
   }) : dropIndicator;
   const shouldShowIndicator = isValidDrag || isPlacementMode && isHoveringInPlacementMode;
-  return /* @__PURE__ */ React298.createElement(
-    Box64,
+  return /* @__PURE__ */ React299.createElement(
+    Box65,
     {
       ref: containerRef,
       style: {
@@ -33267,8 +33570,8 @@ var ExternalDropZone = ({
       "data-placement-mode": isPlacementMode ? "true" : void 0
     },
     children,
-    isPlacementMode && /* @__PURE__ */ React298.createElement(
-      Box64,
+    isPlacementMode && /* @__PURE__ */ React299.createElement(
+      Box65,
       {
         style: {
           position: "absolute",
@@ -33287,11 +33590,29 @@ var ExternalDropZone = ({
         onWheel: handleOverlayWheel
       }
     ),
-    shouldShowIndicator && indicatorWithPosition && /* @__PURE__ */ React298.createElement(Box64, { style: { ...indicatorStyle, background: "none", border: "none", boxShadow: "none" } }, indicatorWithPosition)
+    shouldShowIndicator && indicatorWithPosition && /* @__PURE__ */ React299.createElement(Box65, { style: { ...indicatorStyle, background: "none", border: "none", boxShadow: "none" } }, indicatorWithPosition)
   );
 };
 
 // src/mantine/IxoEditor.tsx
+var DEFAULT_ICON_MAP = {
+  "Heading 1": icon(IconH1),
+  "Heading 2": icon(IconH2),
+  "Heading 3": icon(IconH3),
+  Quote: icon(IconBlockquote),
+  "Numbered List": icon(IconListNumbers),
+  "Bullet List": icon(IconList2),
+  "Check List": icon(IconListCheck),
+  Paragraph: icon(IconPilcrow),
+  "Code Block": icon(IconCode4),
+  Table: icon(IconTable2),
+  Image: icon(IconPhoto5),
+  Video: icon(IconVideo),
+  Audio: icon(IconVolume),
+  File: icon(IconFile5),
+  Emoji: icon(IconMoodSmile2),
+  "Page Break": icon(IconPageBreak)
+};
 function IxoEditorContent({
   editor,
   config,
@@ -33311,7 +33632,7 @@ function IxoEditorContent({
 }) {
   const { activePanel } = usePanelStore();
   const isPanelOpen = activePanel !== null;
-  const editorContent = /* @__PURE__ */ React299.createElement(
+  const editorContent = /* @__PURE__ */ React300.createElement(
     BlockNoteView,
     {
       editor,
@@ -33326,17 +33647,24 @@ function IxoEditorContent({
       onChange,
       onSelectionChange
     },
-    config.slashMenu && /* @__PURE__ */ React299.createElement(
+    config.slashMenu && /* @__PURE__ */ React300.createElement(
       SuggestionMenuController,
       {
         triggerCharacter: "/",
+        suggestionMenuComponent: CommandPalette,
         getItems: async (query) => {
           const customItems = getExtraSlashMenuItems(editor);
-          const allItems = [...customItems];
+          const defaultItems = getDefaultReactSlashMenuItems(editor).map((item) => ({
+            ...item,
+            icon: DEFAULT_ICON_MAP[item.title] ?? item.icon
+          }));
+          const allItems = [...defaultItems, ...customItems];
           allItems.sort((a, b) => {
             const groupA = a.group || "";
             const groupB = b.group || "";
-            return groupA.localeCompare(groupB);
+            const orderA = GROUP_ORDER[groupA] ?? 99;
+            const orderB = GROUP_ORDER[groupB] ?? 99;
+            return orderA - orderB;
           });
           return filterSuggestionItems(allItems, query);
         }
@@ -33344,7 +33672,7 @@ function IxoEditorContent({
     ),
     children
   );
-  return /* @__PURE__ */ React299.createElement("div", { style: { display: "flex", height: "100%", width: "100%", gap: 0 } }, /* @__PURE__ */ React299.createElement(
+  return /* @__PURE__ */ React300.createElement("div", { style: { display: "flex", height: "100%", width: "100%", gap: 0 } }, /* @__PURE__ */ React300.createElement(
     "div",
     {
       className: `ixo-editor ixo-editor--theme-${config.theme} ${className}`,
@@ -33353,9 +33681,9 @@ function IxoEditorContent({
         transition: "width 0.2s ease"
       }
     },
-    /* @__PURE__ */ React299.createElement(CoverImage, { coverImageUrl, logoUrl }),
-    /* @__PURE__ */ React299.createElement(PageTitle, { editor, editable: isEditable }),
-    (onExternalDrop || isPlacementMode) && isEditable ? /* @__PURE__ */ React299.createElement(
+    /* @__PURE__ */ React300.createElement(CoverImage, { coverImageUrl, logoUrl }),
+    /* @__PURE__ */ React300.createElement(PageTitle, { editor, editable: isEditable }),
+    (onExternalDrop || isPlacementMode) && isEditable ? /* @__PURE__ */ React300.createElement(
       ExternalDropZone,
       {
         editor,
@@ -33368,7 +33696,7 @@ function IxoEditorContent({
       },
       editorContent
     ) : editorContent
-  ), isPanelVisible && /* @__PURE__ */ React299.createElement(PanelContent, { theme: config.theme }));
+  ), isPanelVisible && /* @__PURE__ */ React300.createElement(PanelContent, { theme: config.theme }));
 }
 function IxoEditor({
   editor,
@@ -33409,7 +33737,7 @@ function IxoEditor({
     tableHandles: true
   };
   const isEditable = editable;
-  const editorContent = /* @__PURE__ */ React299.createElement(
+  const editorContent = /* @__PURE__ */ React300.createElement(
     BlocknoteProvider,
     {
       editor,
@@ -33424,7 +33752,7 @@ function IxoEditor({
       connectedUsers,
       awarenessInstance
     },
-    /* @__PURE__ */ React299.createElement(
+    /* @__PURE__ */ React300.createElement(
       IxoEditorContent,
       {
         isPanelVisible,
@@ -33446,13 +33774,13 @@ function IxoEditor({
     )
   );
   if (mantineTheme) {
-    return /* @__PURE__ */ React299.createElement(MantineProvider, { theme: mantineTheme }, editorContent);
+    return /* @__PURE__ */ React300.createElement(MantineProvider, { theme: mantineTheme }, editorContent);
   }
   return editorContent;
 }
 
 // src/mantine/components/DebugButton.tsx
-import React300 from "react";
+import React301 from "react";
 function DebugButton({ editor }) {
   const yMapToObject = (map) => {
     if (!map) return null;
@@ -33479,7 +33807,7 @@ function DebugButton({ editor }) {
     const json = JSON.stringify(dump, null, 2);
     console.log("Editor Debug Dump:\n" + json);
   };
-  return /* @__PURE__ */ React300.createElement(
+  return /* @__PURE__ */ React301.createElement(
     "button",
     {
       onClick: handleClick,
@@ -33505,7 +33833,7 @@ function DebugButton({ editor }) {
 }
 
 // src/mantine/components/PageHeader.tsx
-import React301, { useState as useState139, useRef as useRef32, useEffect as useEffect113 } from "react";
+import React302, { useState as useState140, useRef as useRef33, useEffect as useEffect114 } from "react";
 function PageHeader({
   title = "New page",
   icon: icon2,
@@ -33517,11 +33845,11 @@ function PageHeader({
   isFavorited = false,
   menuItems = []
 }) {
-  const [isMenuOpen, setIsMenuOpen] = useState139(false);
-  const [isPrivacyOpen, setIsPrivacyOpen] = useState139(false);
-  const menuRef = useRef32(null);
-  const privacyRef = useRef32(null);
-  useEffect113(() => {
+  const [isMenuOpen, setIsMenuOpen] = useState140(false);
+  const [isPrivacyOpen, setIsPrivacyOpen] = useState140(false);
+  const menuRef = useRef33(null);
+  const privacyRef = useRef33(null);
+  useEffect114(() => {
     function handleClickOutside(event) {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
         setIsMenuOpen(false);
@@ -33543,7 +33871,7 @@ function PageHeader({
       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(
+  return /* @__PURE__ */ React302.createElement("div", { style: styles.container }, /* @__PURE__ */ React302.createElement("div", { style: styles.leftSection }, /* @__PURE__ */ React302.createElement("span", { style: styles.icon }, icon2 || "\u{1F4C4}"), /* @__PURE__ */ React302.createElement("span", { style: styles.title }, title), /* @__PURE__ */ React302.createElement("div", { style: styles.privacyContainer, ref: privacyRef }, /* @__PURE__ */ React302.createElement("button", { style: styles.privacyBadge, onClick: () => onPrivacyChange && setIsPrivacyOpen(!isPrivacyOpen) }, /* @__PURE__ */ React302.createElement("span", { style: styles.lockIcon }, isPrivate ? "\u{1F512}" : "\u{1F310}"), /* @__PURE__ */ React302.createElement("span", null, isPrivate ? "Private" : "Public"), onPrivacyChange && /* @__PURE__ */ React302.createElement("span", { style: styles.chevron }, "\u25BE")), isPrivacyOpen && onPrivacyChange && /* @__PURE__ */ React302.createElement("div", { style: styles.dropdown }, /* @__PURE__ */ React302.createElement(
     "button",
     {
       style: {
@@ -33555,9 +33883,9 @@ function PageHeader({
         setIsPrivacyOpen(false);
       }
     },
-    /* @__PURE__ */ React301.createElement("span", { style: styles.menuItemIcon }, "\u{1F512}"),
-    /* @__PURE__ */ React301.createElement("span", null, "Private")
-  ), /* @__PURE__ */ React301.createElement(
+    /* @__PURE__ */ React302.createElement("span", { style: styles.menuItemIcon }, "\u{1F512}"),
+    /* @__PURE__ */ React302.createElement("span", null, "Private")
+  ), /* @__PURE__ */ React302.createElement(
     "button",
     {
       style: {
@@ -33569,9 +33897,9 @@ function PageHeader({
         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(
+    /* @__PURE__ */ React302.createElement("span", { style: styles.menuItemIcon }, "\u{1F310}"),
+    /* @__PURE__ */ React302.createElement("span", null, "Public")
+  )))), /* @__PURE__ */ React302.createElement("div", { style: styles.rightSection }, lastEdited && /* @__PURE__ */ React302.createElement("span", { style: styles.editedText }, lastEdited), onShare && /* @__PURE__ */ React302.createElement("button", { style: styles.shareButton, onClick: onShare }, "Share"), onFavorite && /* @__PURE__ */ React302.createElement("button", { style: styles.iconButton, onClick: onFavorite }, isFavorited ? "\u2605" : "\u2606"), menuItems.length > 0 && /* @__PURE__ */ React302.createElement("div", { style: styles.menuContainer, ref: menuRef }, /* @__PURE__ */ React302.createElement("button", { style: styles.menuButton, onClick: () => setIsMenuOpen(!isMenuOpen), "aria-label": "Menu" }, /* @__PURE__ */ React302.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor" }, /* @__PURE__ */ React302.createElement("circle", { cx: "3", cy: "8", r: "1.5" }), /* @__PURE__ */ React302.createElement("circle", { cx: "8", cy: "8", r: "1.5" }), /* @__PURE__ */ React302.createElement("circle", { cx: "13", cy: "8", r: "1.5" }))), isMenuOpen && /* @__PURE__ */ React302.createElement("div", { style: styles.dropdown }, menuItems.map((item, index) => /* @__PURE__ */ React302.createElement(React302.Fragment, { key: index }, item.divider && index > 0 && /* @__PURE__ */ React302.createElement("div", { style: styles.divider }), /* @__PURE__ */ React302.createElement(
     "button",
     {
       style: {
@@ -33581,8 +33909,8 @@ function PageHeader({
       onClick: () => handleMenuItemClick(item),
       disabled: item.disabled
     },
-    item.icon && /* @__PURE__ */ React301.createElement("span", { style: styles.menuItemIcon }, item.icon),
-    /* @__PURE__ */ React301.createElement("span", null, item.label)
+    item.icon && /* @__PURE__ */ React302.createElement("span", { style: styles.menuItemIcon }, item.icon),
+    /* @__PURE__ */ React302.createElement("span", null, item.label)
   )))))));
 }
 var styles = {
@@ -33719,15 +34047,15 @@ var styles = {
 };
 
 // src/mantine/components/EntitySigningSetup.tsx
-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 React303, { useState as useState141 } from "react";
+import { Modal as Modal3, Stack as Stack199, Text as Text174, 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] = useState140("");
-  const [confirmPin, setConfirmPin] = useState140("");
-  const [loading, setLoading] = useState140(false);
-  const [error, setError] = useState140(null);
-  const [success, setSuccess] = useState140(false);
+  const [pin, setPin] = useState141("");
+  const [confirmPin, setConfirmPin] = useState141("");
+  const [loading, setLoading] = useState141(false);
+  const [error, setError] = useState141(null);
+  const [success, setSuccess] = useState141(false);
   const handleSetup = async () => {
     if (pin.length < 4) {
       setError("PIN must be at least 4 characters");
@@ -33767,15 +34095,15 @@ var EntitySigningSetup = ({ opened, onClose, entityDid, entityName, onSetup }) =
       setSuccess(false);
     }
   };
-  return /* @__PURE__ */ React302.createElement(
+  return /* @__PURE__ */ React303.createElement(
     Modal3,
     {
       opened,
       onClose: handleClose,
-      title: /* @__PURE__ */ React302.createElement(Group110, { gap: "xs" }, /* @__PURE__ */ React302.createElement(IconKey2, { size: 20 }), /* @__PURE__ */ React302.createElement(Text173, { fw: 600 }, "Entity Signing Setup")),
+      title: /* @__PURE__ */ React303.createElement(Group110, { gap: "xs" }, /* @__PURE__ */ React303.createElement(IconKey2, { size: 20 }), /* @__PURE__ */ React303.createElement(Text174, { fw: 600 }, "Entity Signing Setup")),
       size: "md"
     },
-    /* @__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(
+    /* @__PURE__ */ React303.createElement(Stack199, { gap: "md" }, success ? /* @__PURE__ */ React303.createElement(Alert54, { color: "green", icon: /* @__PURE__ */ React303.createElement(IconCheck23, { size: 16 }) }, "Entity signing key set up successfully!") : /* @__PURE__ */ React303.createElement(React303.Fragment, null, /* @__PURE__ */ React303.createElement(Text174, { size: "sm", c: "dimmed" }, "Flow authorization requires a signing key for", " ", /* @__PURE__ */ React303.createElement(Text174, { span: true, fw: 500 }, entityName || entityDid), "."), /* @__PURE__ */ React303.createElement(Alert54, { color: "blue", variant: "light" }, /* @__PURE__ */ React303.createElement(Text174, { size: "sm" }, "This is a ", /* @__PURE__ */ React303.createElement("strong", null, "one-time setup"), " that allows flows to grant permissions without requiring wallet signatures for each delegation.")), /* @__PURE__ */ React303.createElement(Stack199, { gap: "xs" }, /* @__PURE__ */ React303.createElement(Text174, { size: "sm", fw: 500 }, "What happens:"), /* @__PURE__ */ React303.createElement(Text174, { size: "sm", c: "dimmed" }, "1. A new signing key is generated"), /* @__PURE__ */ React303.createElement(Text174, { size: "sm", c: "dimmed" }, "2. Key is registered on the entity's DID document (requires wallet)"), /* @__PURE__ */ React303.createElement(Text174, { size: "sm", c: "dimmed" }, "3. Key is stored encrypted in the entity's Matrix room")), /* @__PURE__ */ React303.createElement(
       TextInput8,
       {
         label: "Enter PIN to encrypt signing key",
@@ -33786,25 +34114,25 @@ var EntitySigningSetup = ({ opened, onClose, entityDid, entityName, onSetup }) =
         onChange: (e) => setPin(e.currentTarget.value),
         disabled: loading
       }
-    ), /* @__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"))))
+    ), /* @__PURE__ */ React303.createElement(TextInput8, { label: "Confirm PIN", type: "password", placeholder: "Confirm PIN", value: confirmPin, onChange: (e) => setConfirmPin(e.currentTarget.value), disabled: loading }), error && /* @__PURE__ */ React303.createElement(Alert54, { color: "red", icon: /* @__PURE__ */ React303.createElement(IconAlertCircle20, { size: 16 }) }, error), /* @__PURE__ */ React303.createElement(Group110, { justify: "flex-end", mt: "md" }, /* @__PURE__ */ React303.createElement(Button56, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React303.createElement(Button56, { onClick: handleSetup, loading, leftSection: /* @__PURE__ */ React303.createElement(IconKey2, { size: 16 }) }, "Setup Entity Signing"))))
   );
 };
 
 // src/mantine/components/FlowPermissionsPanel.tsx
-import React303, { useState as useState141, useEffect as useEffect114, useMemo as useMemo123 } 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 React304, { useState as useState142, useEffect as useEffect115, useMemo as useMemo124 } from "react";
+import { Stack as Stack200, Text as Text175, 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] = useState141([]);
-  const [loading, setLoading] = useState141(true);
-  const [revoking, setRevoking] = useState141(null);
-  const rootDelegation = useMemo123(() => {
+  const [delegations, setDelegations] = useState142([]);
+  const [loading, setLoading] = useState142(true);
+  const [revoking, setRevoking] = useState142(null);
+  const rootDelegation = useMemo124(() => {
     if (editor.getUcanService) {
       return editor.getUcanService()?.getRootDelegation() || null;
     }
     return null;
   }, [editor]);
-  useEffect114(() => {
+  useEffect115(() => {
     const loadDelegations = async () => {
       setLoading(true);
       let allDelegations = [];
@@ -33846,11 +34174,11 @@ var FlowPermissionsPanel = ({ editor, entityDid, entityName, onGrantPermission,
   const getIcon2 = (type) => {
     switch (type) {
       case "oracle":
-        return /* @__PURE__ */ React303.createElement(IconRobot4, { size: 16 });
+        return /* @__PURE__ */ React304.createElement(IconRobot4, { size: 16 });
       case "entity":
-        return /* @__PURE__ */ React303.createElement(IconBuilding2, { size: 16 });
+        return /* @__PURE__ */ React304.createElement(IconBuilding2, { size: 16 });
       default:
-        return /* @__PURE__ */ React303.createElement(IconUser14, { size: 16 });
+        return /* @__PURE__ */ React304.createElement(IconUser14, { size: 16 });
     }
   };
   const formatCapabilities = (caps) => {
@@ -33869,32 +34197,32 @@ var FlowPermissionsPanel = ({ editor, entityDid, entityName, onGrantPermission,
     if (date < /* @__PURE__ */ new Date()) return "Expired";
     return date.toLocaleDateString();
   };
-  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"));
+  return /* @__PURE__ */ React304.createElement(Stack200, { gap: "md" }, /* @__PURE__ */ React304.createElement(Stack200, { gap: "xs" }, /* @__PURE__ */ React304.createElement(Text175, { fw: 600, size: "sm" }, "Root Authority"), /* @__PURE__ */ React304.createElement(Paper18, { p: "sm", withBorder: true }, /* @__PURE__ */ React304.createElement(Group111, { gap: "xs" }, /* @__PURE__ */ React304.createElement(IconShieldCheck16, { size: 20, color: "var(--mantine-color-green-6)" }), /* @__PURE__ */ React304.createElement(Stack200, { gap: 2, style: { flex: 1 } }, /* @__PURE__ */ React304.createElement(Text175, { size: "sm", fw: 500 }, entityName || entityDid), /* @__PURE__ */ React304.createElement(Text175, { size: "xs", c: "dimmed" }, rootDelegation ? `Granted: ${new Date(rootDelegation.createdAt).toLocaleDateString()}` : "Root capability not set up")), /* @__PURE__ */ React304.createElement(Badge45, { color: "green", variant: "light" }, "Entity")))), /* @__PURE__ */ React304.createElement(Divider29, { label: "Delegated Permissions", labelPosition: "center" }), loading ? /* @__PURE__ */ React304.createElement(Group111, { justify: "center", py: "xl" }, /* @__PURE__ */ React304.createElement(Loader54, { size: "sm" })) : delegations.length === 0 ? /* @__PURE__ */ React304.createElement(Alert55, { color: "gray", variant: "light" }, /* @__PURE__ */ React304.createElement(Text175, { size: "sm" }, "No permissions have been granted yet.")) : /* @__PURE__ */ React304.createElement(Stack200, { gap: "xs" }, delegations.map(({ delegation, displayName, type }) => /* @__PURE__ */ React304.createElement(Paper18, { key: delegation.cid, p: "sm", withBorder: true }, /* @__PURE__ */ React304.createElement(Group111, { justify: "space-between" }, /* @__PURE__ */ React304.createElement(Group111, { gap: "xs" }, getIcon2(type), /* @__PURE__ */ React304.createElement(Stack200, { gap: 2 }, /* @__PURE__ */ React304.createElement(Text175, { size: "sm", fw: 500 }, displayName), /* @__PURE__ */ React304.createElement(Text175, { size: "xs", c: "dimmed" }, formatCapabilities(delegation.capabilities)), /* @__PURE__ */ React304.createElement(Group111, { gap: "xs" }, /* @__PURE__ */ React304.createElement(Text175, { size: "xs", c: "dimmed" }, "Expires: ", formatExpiration(delegation.expiration)), /* @__PURE__ */ React304.createElement(Text175, { size: "xs", c: "dimmed" }, "\u2022"), /* @__PURE__ */ React304.createElement(Text175, { size: "xs", c: "dimmed" }, "Granted by: ", delegation.issuerDid === entityDid ? "Entity" : delegation.issuerDid.slice(-8))))), /* @__PURE__ */ React304.createElement(ActionIcon38, { color: "red", variant: "subtle", onClick: () => handleRevoke(delegation.cid), loading: revoking === delegation.cid, disabled: !!revoking }, /* @__PURE__ */ React304.createElement(IconTrash12, { size: 16 })))))), /* @__PURE__ */ React304.createElement(Button57, { leftSection: /* @__PURE__ */ React304.createElement(IconPlus11, { size: 16 }), variant: "light", onClick: onGrantPermission }, "Grant Permission"));
 };
 
 // src/mantine/components/GrantPermissionModal.tsx
-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 React305, { useState as useState143, useCallback as useCallback113 } from "react";
+import { Modal as Modal4, Stack as Stack201, Text as Text176, 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] = 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 () => {
+  const [recipientType, setRecipientType] = useState143("user");
+  const [searchQuery, setSearchQuery] = useState143("");
+  const [searchResults, setSearchResults] = useState143([]);
+  const [searching, setSearching] = useState143(false);
+  const [selectedRecipient, setSelectedRecipient] = useState143(null);
+  const [manualDid, setManualDid] = useState143("");
+  const [scopeType, setScopeType] = useState143("full");
+  const [selectedBlocks, setSelectedBlocks] = useState143([]);
+  const [expirationEnabled, setExpirationEnabled] = useState143(false);
+  const [expirationDays, setExpirationDays] = useState143(30);
+  const [canDelegate, setCanDelegate] = useState143(false);
+  const [pin, setPin] = useState143("");
+  const [loading, setLoading] = useState143(false);
+  const [error, setError] = useState143(null);
+  const handleSearch = useCallback113(async () => {
     if (searchQuery.length < 2) return;
     setSearching(true);
     try {
@@ -33981,15 +34309,15 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
       resetForm();
     }
   };
-  return /* @__PURE__ */ React304.createElement(
+  return /* @__PURE__ */ React305.createElement(
     Modal4,
     {
       opened,
       onClose: handleClose,
-      title: /* @__PURE__ */ React304.createElement(Group112, { gap: "xs" }, /* @__PURE__ */ React304.createElement(IconShieldPlus4, { size: 20 }), /* @__PURE__ */ React304.createElement(Text175, { fw: 600 }, "Grant Permission")),
+      title: /* @__PURE__ */ React305.createElement(Group112, { gap: "xs" }, /* @__PURE__ */ React305.createElement(IconShieldPlus4, { size: 20 }), /* @__PURE__ */ React305.createElement(Text176, { fw: 600 }, "Grant Permission")),
       size: "lg"
     },
-    /* @__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(
+    /* @__PURE__ */ React305.createElement(Stack201, { gap: "md" }, /* @__PURE__ */ React305.createElement(Stack201, { gap: "xs" }, /* @__PURE__ */ React305.createElement(Text176, { size: "sm", fw: 500 }, "Recipient Type"), /* @__PURE__ */ React305.createElement(
       Radio5.Group,
       {
         value: recipientType,
@@ -33999,23 +34327,23 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
           setSearchResults([]);
         }
       },
-      /* @__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(
+      /* @__PURE__ */ React305.createElement(Group112, null, /* @__PURE__ */ React305.createElement(Radio5, { value: "user", label: "User" }), /* @__PURE__ */ React305.createElement(Radio5, { value: "oracle", label: "Oracle" }), /* @__PURE__ */ React305.createElement(Radio5, { value: "manual", label: "Enter DID" }))
+    )), recipientType !== "manual" ? /* @__PURE__ */ React305.createElement(Stack201, { gap: "xs" }, /* @__PURE__ */ React305.createElement(
       TextInput9,
       {
         placeholder: recipientType === "oracle" ? "Search oracles..." : "Search users...",
-        leftSection: /* @__PURE__ */ React304.createElement(IconSearch8, { size: 16 }),
-        rightSection: searching ? /* @__PURE__ */ React304.createElement(Loader55, { size: 14 }) : null,
+        leftSection: /* @__PURE__ */ React305.createElement(IconSearch8, { size: 16 }),
+        rightSection: searching ? /* @__PURE__ */ React305.createElement(Loader55, { size: 14 }) : null,
         value: searchQuery,
         onChange: (e) => setSearchQuery(e.currentTarget.value),
         onKeyDown: (e) => e.key === "Enter" && handleSearch()
       }
-    ), 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 ? (
+    ), selectedRecipient ? /* @__PURE__ */ React305.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React305.createElement(Group112, { justify: "space-between" }, /* @__PURE__ */ React305.createElement(Group112, { gap: "xs" }, recipientType === "oracle" ? /* @__PURE__ */ React305.createElement(IconRobot5, { size: 16 }) : /* @__PURE__ */ React305.createElement(IconUser15, { size: 16 }), /* @__PURE__ */ React305.createElement(Text176, { size: "sm" }, selectedRecipient.displayName), /* @__PURE__ */ React305.createElement(Badge46, { size: "xs", variant: "light" }, selectedRecipient.did.slice(-12))), /* @__PURE__ */ React305.createElement(ActionIcon39, { size: "sm", variant: "subtle", onClick: () => setSelectedRecipient(null) }, /* @__PURE__ */ React305.createElement(IconX14, { size: 14 })))) : searchResults.length > 0 ? /* @__PURE__ */ React305.createElement(Paper19, { p: "xs", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React305.createElement(Stack201, { gap: 4 }, searchResults.map((result) => /* @__PURE__ */ React305.createElement(Button58, { key: result.did, variant: "subtle", size: "sm", justify: "flex-start", onClick: () => setSelectedRecipient(result) }, result.displayName)))) : null) : /* @__PURE__ */ React305.createElement(TextInput9, { label: "Recipient DID", placeholder: "did:ixo:...", value: manualDid, onChange: (e) => setManualDid(e.currentTarget.value) }), /* @__PURE__ */ React305.createElement(Divider30, null), /* @__PURE__ */ React305.createElement(Stack201, { gap: "xs" }, /* @__PURE__ */ React305.createElement(Text176, { size: "sm", fw: 500 }, "Permission Scope"), singleBlockMode && fixedBlock ? (
       // Single block mode: show fixed block info
-      /* @__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."))
+      /* @__PURE__ */ React305.createElement(Paper19, { p: "sm", withBorder: true }, /* @__PURE__ */ React305.createElement(Group112, { gap: "xs" }, /* @__PURE__ */ React305.createElement(Badge46, { variant: "light", color: "blue" }, fixedBlock.type), /* @__PURE__ */ React305.createElement(Text176, { size: "sm" }, fixedBlock.name || `Block ${fixedBlock.id.slice(-8)}`)), /* @__PURE__ */ React305.createElement(Text176, { size: "xs", c: "dimmed", mt: "xs" }, "Permission will be granted to execute this specific block."))
     ) : (
       // Multi-block mode: show scope selection
-      /* @__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(
+      /* @__PURE__ */ React305.createElement(React305.Fragment, null, /* @__PURE__ */ React305.createElement(Radio5.Group, { value: scopeType, onChange: (v) => setScopeType(v) }, /* @__PURE__ */ React305.createElement(Stack201, { gap: "xs" }, /* @__PURE__ */ React305.createElement(Radio5, { value: "full", label: "Full flow access (can execute any block)" }), /* @__PURE__ */ React305.createElement(Radio5, { value: "blocks", label: "Specific blocks only" }))), scopeType === "blocks" && /* @__PURE__ */ React305.createElement(Paper19, { p: "sm", withBorder: true, style: { maxHeight: 150, overflow: "auto" } }, /* @__PURE__ */ React305.createElement(Stack201, { gap: "xs" }, blocks.map((block) => /* @__PURE__ */ React305.createElement(
         Checkbox13,
         {
           key: block.id,
@@ -34030,7 +34358,7 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
           }
         }
       )))))
-    )), /* @__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(
+    )), /* @__PURE__ */ React305.createElement(Divider30, null), /* @__PURE__ */ React305.createElement(Stack201, { gap: "xs" }, /* @__PURE__ */ React305.createElement(Checkbox13, { label: "Set expiration", checked: expirationEnabled, onChange: (e) => setExpirationEnabled(e.currentTarget.checked) }), expirationEnabled && /* @__PURE__ */ React305.createElement(NumberInput3, { label: "Expires in (days)", placeholder: "30", value: expirationDays, onChange: setExpirationDays, min: 1, max: 365 })), /* @__PURE__ */ React305.createElement(
       Checkbox13,
       {
         label: "Recipient can grant permissions to others",
@@ -34038,7 +34366,7 @@ var GrantPermissionModal = ({ opened, onClose, flowUri, blocks, targetBlockId, s
         checked: canDelegate,
         onChange: (e) => setCanDelegate(e.currentTarget.checked)
       }
-    ), /* @__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")))
+    ), /* @__PURE__ */ React305.createElement(Divider30, null), /* @__PURE__ */ React305.createElement(TextInput9, { label: "Enter your PIN to sign this delegation", type: "password", placeholder: "PIN", value: pin, onChange: (e) => setPin(e.currentTarget.value) }), error && /* @__PURE__ */ React305.createElement(Alert56, { color: "red" }, error), /* @__PURE__ */ React305.createElement(Group112, { justify: "flex-end" }, /* @__PURE__ */ React305.createElement(Button58, { variant: "subtle", onClick: handleClose, disabled: loading }, "Cancel"), /* @__PURE__ */ React305.createElement(Button58, { onClick: handleGrant, loading }, "Grant Permission")))
   );
 };
 
@@ -34152,4 +34480,4 @@ export {
   getExtraSlashMenuItems,
   useCreateIxoEditor
 };
-//# sourceMappingURL=chunk-ZCRLP7QH.mjs.map
+//# sourceMappingURL=chunk-T6RCHQV6.mjs.map