@codee-sh/medusa-plugin-notification-emails 1.0.1 → 1.0.2

package/.medusa/server/src/admin/index.js

@@ -7,6 +7,7 @@ const reactQuery = require("@tanstack/react-query");
 const Medusa = require("@medusajs/js-sdk");
 const React = require("react");
 const icons = require("@medusajs/icons");
+const reactRouterDom = require("react-router-dom");
 const LexicalExtensionComposer = require("@lexical/react/LexicalExtensionComposer");
 const LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
 const lexical = require("lexical");
@@ -14,7 +15,6 @@ const richText = require("@lexical/rich-text");
 const history = require("@lexical/history");
 const LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
 const LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-const reactRouterDom = require("react-router-dom");
 require("@react-email/components");
 require("@react-email/render");
 const core = require("@dnd-kit/core");
@@ -446,1252 +446,563 @@ const OrderNotificationActivityWidget = ({
 adminSdk.defineWidgetConfig({
   zone: "order.details.after"
 });
-class VariableNode extends lexical.DecoratorNode {
-  static getType() {
-    return "variable";
-  }
-  static clone(node) {
-    return new VariableNode(node.__variableName, node.__key);
-  }
-  constructor(variableName, key) {
-    super(key);
-    this.__variableName = variableName;
-  }
-  createDOM() {
-    const span = document.createElement("span");
-    span.className = "variable-node";
-    return span;
-  }
-  updateDOM() {
-    return false;
-  }
-  exportDOM() {
-    const element = document.createElement("span");
-    element.textContent = `{{${this.__variableName}}}`;
-    element.className = "variable";
-    return { element };
-  }
-  static importJSON(serializedNode) {
-    return $createVariableNode(serializedNode.variableName);
-  }
-  exportJSON() {
-    return {
-      type: "variable",
-      version: 1,
-      variableName: this.__variableName
-    };
-  }
-  isInline() {
-    return true;
-  }
-  getVariableName() {
-    return this.__variableName;
-  }
-  getTextContent() {
-    return `{{${this.__variableName}}}`;
-  }
-  decorate() {
-    return /* @__PURE__ */ jsxRuntime.jsx(VariableComponent, { variableName: this.__variableName });
-  }
-}
-function $createVariableNode(variableName) {
-  return new VariableNode(variableName);
-}
-function VariableComponent({ variableName }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded text-xs font-mono bg-violet-100 text-violet-700 border border-violet-200",
-      contentEditable: false,
-      children: `{{${variableName}}}`
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n2) {
+    for (var e2 = 1; e2 < arguments.length; e2++) {
+      var t2 = arguments[e2];
+      for (var r in t2) ({}).hasOwnProperty.call(t2, r) && (n2[r] = t2[r]);
     }
-  );
+    return n2;
+  }, _extends.apply(null, arguments);
 }
-class DividerBlockNode extends lexical.DecoratorNode {
-  static getType() {
-    return "divider-block";
-  }
-  static clone(node) {
-    return new DividerBlockNode(node.__key);
-  }
-  constructor(key) {
-    super(key);
-  }
-  createDOM() {
-    const div = document.createElement("div");
-    div.className = "editor-divider";
-    div.setAttribute("data-lexical-decorator", "true");
-    div.setAttribute("contenteditable", "false");
-    return div;
-  }
-  updateDOM() {
-    return false;
-  }
-  exportDOM() {
-    const element = document.createElement("hr");
-    return { element };
-  }
-  static importJSON() {
-    return $createDividerBlockNode();
-  }
-  exportJSON() {
-    return {
-      type: "divider-block",
-      version: 1
-    };
-  }
-  isInline() {
-    return false;
-  }
-  decorate() {
-    return /* @__PURE__ */ jsxRuntime.jsx(DividerBlockComponent, { nodeKey: this.__key });
+function _objectWithoutPropertiesLoose(r, e2) {
+  if (null == r) return {};
+  var t2 = {};
+  for (var n2 in r) if ({}.hasOwnProperty.call(r, n2)) {
+    if (-1 !== e2.indexOf(n2)) continue;
+    t2[n2] = r[n2];
   }
+  return t2;
 }
-function $createDividerBlockNode() {
-  return new DividerBlockNode();
+var initialState$5 = {};
+var Context$6 = /* @__PURE__ */ React.createContext(initialState$5);
+var reducer$5 = (state, action) => _extends({}, state, action);
+var useShowToolsStore = () => {
+  return React.useContext(Context$6);
+};
+var DispatchShowTools = /* @__PURE__ */ React.createContext(() => {
+});
+DispatchShowTools.displayName = "JVR.DispatchShowTools";
+function useShowTools() {
+  return React.useReducer(reducer$5, initialState$5);
 }
-function DividerBlockComponent({ nodeKey }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: "editor-block py-4 cursor-pointer",
-      "data-block-key": nodeKey,
-      "data-block-type": "divider",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-muted mb-1 uppercase tracking-wide", children: "Divider" }),
-        /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t-2 border-ui-border-base" })
-      ]
-    }
-  );
+function useShowToolsDispatch() {
+  return React.useContext(DispatchShowTools);
 }
-class ButtonBlockNode extends lexical.DecoratorNode {
-  static getType() {
-    return "button-block";
-  }
-  static clone(node) {
-    return new ButtonBlockNode(node.__text, node.__url, node.__key);
-  }
-  constructor(text = "Kliknij", url = "#", key) {
-    super(key);
-    this.__text = text;
-    this.__url = url;
-  }
-  createDOM() {
-    const div = document.createElement("div");
-    div.className = "editor-button";
-    div.setAttribute("data-lexical-decorator", "true");
-    div.setAttribute("contenteditable", "false");
-    return div;
-  }
-  updateDOM() {
-    return false;
-  }
-  exportDOM() {
-    const element = document.createElement("a");
-    element.href = this.__url;
-    element.textContent = this.__text;
-    element.className = "button";
-    return { element };
-  }
-  static importJSON(serializedNode) {
-    return $createButtonBlockNode(serializedNode.text, serializedNode.url);
-  }
-  exportJSON() {
-    return {
-      type: "button-block",
-      version: 1,
-      text: this.__text,
-      url: this.__url
-    };
-  }
-  isInline() {
-    return false;
-  }
-  getText() {
-    return this.__text;
-  }
-  getUrl() {
-    return this.__url;
-  }
-  setText(text) {
-    const writable = this.getWritable();
-    writable.__text = text;
-  }
-  setUrl(url) {
-    const writable = this.getWritable();
-    writable.__url = url;
-  }
-  decorate() {
-    return /* @__PURE__ */ jsxRuntime.jsx(ButtonBlockComponent, { nodeKey: this.__key, text: this.__text, url: this.__url });
-  }
+var ShowTools = (_ref) => {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$6.Provider, {
+    value: initial,
+    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchShowTools.Provider, {
+      value: dispatch,
+      children
+    })
+  });
+};
+ShowTools.displayName = "JVR.ShowTools";
+var initialState$4 = {};
+var Context$5 = /* @__PURE__ */ React.createContext(initialState$4);
+var reducer$4 = (state, action) => _extends({}, state, action);
+var useExpandsStore = () => {
+  return React.useContext(Context$5);
+};
+var DispatchExpands = /* @__PURE__ */ React.createContext(() => {
+});
+DispatchExpands.displayName = "JVR.DispatchExpands";
+function useExpands() {
+  return React.useReducer(reducer$4, initialState$4);
 }
-function $createButtonBlockNode(text, url) {
-  return new ButtonBlockNode(text, url);
+function useExpandsDispatch() {
+  return React.useContext(DispatchExpands);
 }
-function ButtonBlockComponent({ nodeKey, text, url }) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [editText, setEditText] = React.useState(text);
-  const [editUrl, setEditUrl] = React.useState(url);
-  const handleSave = () => {
-    editor.update(() => {
-      const node = lexical.$getNodeByKey(nodeKey);
-      if (node) {
-        node.setText(editText);
-        node.setUrl(editUrl);
-      }
-    });
-    setIsEditing(false);
-  };
-  if (isEditing) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-block py-2", "data-block-key": nodeKey, "data-block-type": "button", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 border border-ui-border-interactive rounded-lg bg-ui-bg-subtle", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-muted mb-2 uppercase tracking-wide", children: "Button" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "text",
-            value: editText,
-            onChange: (e2) => setEditText(e2.target.value),
-            placeholder: "Tekst przycisku",
-            className: "w-full px-3 py-2 text-sm border border-ui-border-base rounded-lg"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "text",
-            value: editUrl,
-            onChange: (e2) => setEditUrl(e2.target.value),
-            placeholder: "URL (np. {{data.order.url}})",
-            className: "w-full px-3 py-2 text-sm border border-ui-border-base rounded-lg font-mono"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleSave,
-              className: "px-4 py-2 text-sm bg-ui-button-neutral text-ui-fg-on-color rounded-lg hover:bg-ui-button-neutral-hover",
-              children: "Zapisz"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => setIsEditing(false),
-              className: "px-4 py-2 text-sm border border-ui-border-base rounded-lg hover:bg-ui-bg-base-hover",
-              children: "Anuluj"
-            }
-          )
-        ] })
-      ] })
-    ] }) });
+var Expands = (_ref) => {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$5.Provider, {
+    value: initial,
+    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchExpands.Provider, {
+      value: dispatch,
+      children
+    })
+  });
+};
+Expands.displayName = "JVR.Expands";
+var initialState$3 = {
+  Str: {
+    as: "span",
+    "data-type": "string",
+    style: {
+      color: "var(--w-rjv-type-string-color, #cb4b16)"
+    },
+    className: "w-rjv-type",
+    children: "string"
+  },
+  Url: {
+    as: "a",
+    style: {
+      color: "var(--w-rjv-type-url-color, #0969da)"
+    },
+    "data-type": "url",
+    className: "w-rjv-type",
+    children: "url"
+  },
+  Undefined: {
+    style: {
+      color: "var(--w-rjv-type-undefined-color, #586e75)"
+    },
+    as: "span",
+    "data-type": "undefined",
+    className: "w-rjv-type",
+    children: "undefined"
+  },
+  Null: {
+    style: {
+      color: "var(--w-rjv-type-null-color, #d33682)"
+    },
+    as: "span",
+    "data-type": "null",
+    className: "w-rjv-type",
+    children: "null"
+  },
+  Map: {
+    style: {
+      color: "var(--w-rjv-type-map-color, #268bd2)",
+      marginRight: 3
+    },
+    as: "span",
+    "data-type": "map",
+    className: "w-rjv-type",
+    children: "Map"
+  },
+  Nan: {
+    style: {
+      color: "var(--w-rjv-type-nan-color, #859900)"
+    },
+    as: "span",
+    "data-type": "nan",
+    className: "w-rjv-type",
+    children: "NaN"
+  },
+  Bigint: {
+    style: {
+      color: "var(--w-rjv-type-bigint-color, #268bd2)"
+    },
+    as: "span",
+    "data-type": "bigint",
+    className: "w-rjv-type",
+    children: "bigint"
+  },
+  Int: {
+    style: {
+      color: "var(--w-rjv-type-int-color, #268bd2)"
+    },
+    as: "span",
+    "data-type": "int",
+    className: "w-rjv-type",
+    children: "int"
+  },
+  Set: {
+    style: {
+      color: "var(--w-rjv-type-set-color, #268bd2)",
+      marginRight: 3
+    },
+    as: "span",
+    "data-type": "set",
+    className: "w-rjv-type",
+    children: "Set"
+  },
+  Float: {
+    style: {
+      color: "var(--w-rjv-type-float-color, #859900)"
+    },
+    as: "span",
+    "data-type": "float",
+    className: "w-rjv-type",
+    children: "float"
+  },
+  True: {
+    style: {
+      color: "var(--w-rjv-type-boolean-color, #2aa198)"
+    },
+    as: "span",
+    "data-type": "bool",
+    className: "w-rjv-type",
+    children: "bool"
+  },
+  False: {
+    style: {
+      color: "var(--w-rjv-type-boolean-color, #2aa198)"
+    },
+    as: "span",
+    "data-type": "bool",
+    className: "w-rjv-type",
+    children: "bool"
+  },
+  Date: {
+    style: {
+      color: "var(--w-rjv-type-date-color, #268bd2)"
+    },
+    as: "span",
+    "data-type": "date",
+    className: "w-rjv-type",
+    children: "date"
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-block py-2 cursor-pointer", "data-block-key": nodeKey, "data-block-type": "button", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-muted mb-1 uppercase tracking-wide", children: "Button" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        onDoubleClick: () => setIsEditing(true),
-        className: "px-6 py-2 bg-violet-600 text-white rounded-lg font-medium hover:bg-violet-700 transition-colors cursor-pointer",
-        title: "Kliknij dwukrotnie aby edytować",
-        children: text
-      }
-    ) })
-  ] });
+};
+var Context$4 = /* @__PURE__ */ React.createContext(initialState$3);
+var reducer$3 = (state, action) => _extends({}, state, action);
+var useTypesStore = () => {
+  return React.useContext(Context$4);
+};
+var DispatchTypes = /* @__PURE__ */ React.createContext(() => {
+});
+DispatchTypes.displayName = "JVR.DispatchTypes";
+function useTypes() {
+  return React.useReducer(reducer$3, initialState$3);
 }
-function FloatingBlockToolbar({ hoveredBlock }) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const handleMoveUp = () => {
-    if (!hoveredBlock) return;
-    editor.update(() => {
-      const node = lexical.$getNodeByKey(hoveredBlock.key);
-      if (node) {
-        const prevSibling = node.getPreviousSibling();
-        if (prevSibling) {
-          prevSibling.insertBefore(node);
-        }
-      }
-    });
-  };
-  const handleMoveDown = () => {
-    if (!hoveredBlock) return;
-    editor.update(() => {
-      const node = lexical.$getNodeByKey(hoveredBlock.key);
-      if (node) {
-        const nextSibling = node.getNextSibling();
-        if (nextSibling) {
-          nextSibling.insertAfter(node);
-        }
-      }
-    });
-  };
-  const handleDelete = () => {
-    if (!hoveredBlock) return;
-    editor.update(() => {
-      const node = lexical.$getNodeByKey(hoveredBlock.key);
-      if (node) {
-        node.remove();
-      }
-    });
-  };
-  const isVisible = hoveredBlock && hoveredBlock.type !== "variable";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `pointer-events-auto absolute z-[100] transition-opacity duration-150 ${isVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
-      style: {
-        top: (hoveredBlock == null ? void 0 : hoveredBlock.top) ?? 0,
-        left: 8
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleMoveUp,
-            className: "w-6 h-6 flex items-center justify-center bg-ui-bg-base hover:bg-ui-bg-base-hover rounded text-ui-fg-muted border border-ui-border-base text-xs",
-            title: "Przesuń w górę",
-            children: "↑"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleMoveDown,
-            className: "w-6 h-6 flex items-center justify-center bg-ui-bg-base hover:bg-ui-bg-base-hover rounded text-ui-fg-muted border border-ui-border-base text-xs",
-            title: "Przesuń w dół",
-            children: "↓"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleDelete,
-            className: "w-6 h-6 flex items-center justify-center bg-ui-bg-base hover:bg-ui-bg-base-hover rounded text-ui-fg-muted hover:text-ui-fg-error border border-ui-border-base text-xs",
-            title: "Usuń",
-            children: "✕"
-          }
-        )
-      ] })
-    }
-  );
+function useTypesDispatch() {
+  return React.useContext(DispatchTypes);
 }
-function EditorInner({ children }) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [hoveredBlock, setHoveredBlock] = React.useState(null);
-  const containerRef = React.useRef(null);
-  React.useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const handleMouseMove = (e2) => {
-      const target = e2.target;
-      let blockElement = null;
-      let nodeKey = null;
-      let blockType = null;
-      const customBlock = target.closest(".editor-block");
-      if (customBlock) {
-        blockElement = customBlock;
-        nodeKey = customBlock.dataset.blockKey || null;
-        blockType = customBlock.dataset.blockType || null;
-      }
-      if (!blockElement) {
-        const paragraph = target.closest("p.editor-paragraph");
-        if (paragraph) {
-          blockElement = paragraph;
-          blockType = "paragraph";
-          editor.getEditorState().read(() => {
-            const root = lexical.$getRoot();
-            const children2 = root.getChildren();
-            for (const child of children2) {
-              const childElement = editor.getElementByKey(child.getKey());
-              if (childElement === paragraph) {
-                nodeKey = child.getKey();
-                break;
-              }
-            }
-          });
-        }
-      }
-      if (blockElement && nodeKey) {
-        const containerRect = container.getBoundingClientRect();
-        const blockRect = blockElement.getBoundingClientRect();
-        setHoveredBlock({
-          key: nodeKey,
-          top: blockRect.top - containerRect.top,
-          type: blockType || "unknown"
-        });
-      }
-    };
-    const handleMouseLeave = () => {
-      setHoveredBlock(null);
-    };
-    container.addEventListener("mousemove", handleMouseMove, { capture: true });
-    container.addEventListener("mouseleave", handleMouseLeave);
-    return () => {
-      container.removeEventListener("mousemove", handleMouseMove, { capture: true });
-      container.removeEventListener("mouseleave", handleMouseLeave);
-    };
-  }, [editor]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: "editor-inner relative pl-12 py-4 pr-4",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FloatingBlockToolbar, { hoveredBlock }),
-        children
-      ]
-    }
-  );
+function Types(_ref) {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$4.Provider, {
+    value: initial,
+    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchTypes.Provider, {
+      value: dispatch,
+      children
+    })
+  });
 }
-const AVAILABLE_VARIABLES = [
-  "data.order.id",
-  "data.order.display_id",
-  "data.order.email",
-  "data.order.total",
-  "data.customer.first_name",
-  "data.customer.last_name"
-];
-function ToolbarPlugin({
-  INSERT_PARAGRAPH_BLOCK_COMMAND: INSERT_PARAGRAPH_BLOCK_COMMAND2,
-  INSERT_DIVIDER_COMMAND: INSERT_DIVIDER_COMMAND2,
-  INSERT_BUTTON_COMMAND: INSERT_BUTTON_COMMAND2,
-  INSERT_VARIABLE_COMMAND: INSERT_VARIABLE_COMMAND2
-}) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [showVariables, setShowVariables] = React.useState(false);
-  const [showBlockMenu, setShowBlockMenu] = React.useState(false);
-  const lastActiveFieldRef = React.useRef(null);
-  const formatBold = () => {
-    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold");
-  };
-  const formatItalic = () => {
-    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic");
-  };
-  const captureActiveField = () => {
-    const activeElement = document.activeElement;
-    if (activeElement instanceof HTMLTextAreaElement || activeElement instanceof HTMLInputElement) {
-      lastActiveFieldRef.current = {
-        element: activeElement,
-        selectionStart: activeElement.selectionStart || 0,
-        selectionEnd: activeElement.selectionEnd || 0
-      };
+Types.displayName = "JVR.Types";
+var _excluded$a = ["style"];
+function TriangleArrow(props) {
+  var {
+    style
+  } = props, reset = _objectWithoutPropertiesLoose(props, _excluded$a);
+  var defaultStyle = _extends({
+    cursor: "pointer",
+    height: "1em",
+    width: "1em",
+    userSelect: "none",
+    display: "inline-flex"
+  }, style);
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", _extends({
+    viewBox: "0 0 24 24",
+    fill: "var(--w-rjv-arrow-color, currentColor)",
+    style: defaultStyle
+  }, reset, {
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+      d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+    })
+  }));
+}
+TriangleArrow.displayName = "JVR.TriangleArrow";
+var initialState$2 = {
+  Arrow: {
+    as: "span",
+    className: "w-rjv-arrow",
+    style: {
+      transform: "rotate(0deg)",
+      transition: "all 0.3s"
+    },
+    children: /* @__PURE__ */ jsxRuntime.jsx(TriangleArrow, {})
+  },
+  Colon: {
+    as: "span",
+    style: {
+      color: "var(--w-rjv-colon-color, var(--w-rjv-color))",
+      marginLeft: 0,
+      marginRight: 2
+    },
+    className: "w-rjv-colon",
+    children: ":"
+  },
+  Quote: {
+    as: "span",
+    style: {
+      color: "var(--w-rjv-quotes-color, #236a7c)"
+    },
+    className: "w-rjv-quotes",
+    children: '"'
+  },
+  ValueQuote: {
+    as: "span",
+    style: {
+      color: "var(--w-rjv-quotes-string-color, #cb4b16)"
+    },
+    className: "w-rjv-quotes",
+    children: '"'
+  },
+  BracketsLeft: {
+    as: "span",
+    style: {
+      color: "var(--w-rjv-brackets-color, #236a7c)"
+    },
+    className: "w-rjv-brackets-start",
+    children: "["
+  },
+  BracketsRight: {
+    as: "span",
+    style: {
+      color: "var(--w-rjv-brackets-color, #236a7c)"
+    },
+    className: "w-rjv-brackets-end",
+    children: "]"
+  },
+  BraceLeft: {
+    as: "span",
+    style: {
+      color: "var(--w-rjv-curlybraces-color, #236a7c)"
+    },
+    className: "w-rjv-curlybraces-start",
+    children: "{"
+  },
+  BraceRight: {
+    as: "span",
+    style: {
+      color: "var(--w-rjv-curlybraces-color, #236a7c)"
+    },
+    className: "w-rjv-curlybraces-end",
+    children: "}"
+  }
+};
+var Context$3 = /* @__PURE__ */ React.createContext(initialState$2);
+var reducer$2 = (state, action) => _extends({}, state, action);
+var useSymbolsStore = () => {
+  return React.useContext(Context$3);
+};
+var DispatchSymbols = /* @__PURE__ */ React.createContext(() => {
+});
+DispatchSymbols.displayName = "JVR.DispatchSymbols";
+function useSymbols() {
+  return React.useReducer(reducer$2, initialState$2);
+}
+function useSymbolsDispatch() {
+  return React.useContext(DispatchSymbols);
+}
+var Symbols = (_ref) => {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$3.Provider, {
+    value: initial,
+    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchSymbols.Provider, {
+      value: dispatch,
+      children
+    })
+  });
+};
+Symbols.displayName = "JVR.Symbols";
+var initialState$1 = {
+  Copied: {
+    className: "w-rjv-copied",
+    style: {
+      height: "1em",
+      width: "1em",
+      cursor: "pointer",
+      verticalAlign: "middle",
+      marginLeft: 5
     }
-  };
-  const insertVariable = (variable) => {
-    var _a;
-    const text = `{{${variable}}}`;
-    const lastField = lastActiveFieldRef.current;
-    if (lastField && document.body.contains(lastField.element)) {
-      const { element, selectionStart, selectionEnd } = lastField;
-      const currentValue = element.value;
-      const newValue = currentValue.slice(0, selectionStart) + text + currentValue.slice(selectionEnd);
-      const nativeInputValueSetter = (_a = Object.getOwnPropertyDescriptor(
-        element instanceof HTMLTextAreaElement ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype,
-        "value"
-      )) == null ? void 0 : _a.set;
-      nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(element, newValue);
-      element.dispatchEvent(new Event("input", { bubbles: true }));
-      setTimeout(() => {
-        element.focus();
-        element.setSelectionRange(selectionStart + text.length, selectionStart + text.length);
-      }, 0);
-      lastActiveFieldRef.current = null;
-    } else {
-      editor.dispatchCommand(INSERT_VARIABLE_COMMAND2, variable);
+  },
+  CountInfo: {
+    as: "span",
+    className: "w-rjv-object-size",
+    style: {
+      color: "var(--w-rjv-info-color, #0000004d)",
+      paddingLeft: 8,
+      fontStyle: "italic"
     }
-    setShowVariables(false);
-  };
-  const insertParagraph = () => {
-    editor.dispatchCommand(INSERT_PARAGRAPH_BLOCK_COMMAND2, void 0);
-    setShowBlockMenu(false);
-  };
-  const insertDivider = () => {
-    editor.dispatchCommand(INSERT_DIVIDER_COMMAND2, void 0);
-    setShowBlockMenu(false);
-  };
-  const insertButton = () => {
-    editor.dispatchCommand(INSERT_BUTTON_COMMAND2, void 0);
-    setShowBlockMenu(false);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 p-2 border-b border-ui-border-base bg-ui-bg-subtle sticky top-0 z-10", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setShowBlockMenu(!showBlockMenu),
-          className: "flex items-center gap-1 px-2 py-1 hover:bg-ui-bg-base-hover rounded text-sm",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, { className: "w-4 h-4" }),
-            "Blok"
-          ]
-        }
-      ),
-      showBlockMenu && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-full left-0 mt-1 bg-ui-bg-base border border-ui-border-base rounded shadow-lg z-20 min-w-[150px]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: insertParagraph,
-            className: "flex items-center gap-2 w-full text-left px-3 py-2 hover:bg-ui-bg-base-hover text-sm",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-fg-muted", children: "¶" }),
-              "Paragraph"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: insertDivider,
-            className: "flex items-center gap-2 w-full text-left px-3 py-2 hover:bg-ui-bg-base-hover text-sm",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-fg-muted", children: "―" }),
-              "Divider"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: insertButton,
-            className: "flex items-center gap-2 w-full text-left px-3 py-2 hover:bg-ui-bg-base-hover text-sm",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-fg-muted", children: "▢" }),
-              "Button"
-            ]
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px bg-ui-border-base mx-1" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: formatBold,
-        className: "px-2 py-1 hover:bg-ui-bg-base-hover rounded text-sm font-bold",
-        title: "Pogrubienie",
-        children: "B"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: formatItalic,
-        className: "px-2 py-1 hover:bg-ui-bg-base-hover rounded text-sm italic",
-        title: "Kursywa",
-        children: "I"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px bg-ui-border-base mx-1" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onMouseDown: captureActiveField,
-          onClick: () => setShowVariables(!showVariables),
-          className: "px-2 py-1 hover:bg-ui-bg-base-hover rounded text-sm font-mono",
-          title: "Wstaw zmienną",
-          children: "{{ }}"
-        }
-      ),
-      showVariables && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-full left-0 mt-1 bg-ui-bg-base border border-ui-border-base rounded shadow-lg z-20 min-w-[220px] max-h-48 overflow-auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1 text-xs text-ui-fg-muted border-b border-ui-border-base", children: "Dostępne zmienne" }),
-        AVAILABLE_VARIABLES.map((v) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => insertVariable(v),
-            className: "block w-full text-left px-3 py-2 hover:bg-ui-bg-base-hover text-sm font-mono",
-            children: `{{${v}}}`
-          },
-          v
-        ))
-      ] })
-    ] })
-  ] });
-}
-const INSERT_PARAGRAPH_BLOCK_COMMAND = lexical.createCommand("INSERT_PARAGRAPH_BLOCK");
-const INSERT_DIVIDER_COMMAND = lexical.createCommand("INSERT_DIVIDER");
-const INSERT_BUTTON_COMMAND = lexical.createCommand("INSERT_BUTTON");
-const INSERT_VARIABLE_COMMAND = lexical.createCommand("INSERT_VARIABLE");
-function registerBlockCommands(editor) {
-  const unregisterParagraph = editor.registerCommand(
-    INSERT_PARAGRAPH_BLOCK_COMMAND,
-    () => {
-      const paragraphNode = lexical.$createParagraphNode();
-      lexical.$insertNodes([paragraphNode]);
-      paragraphNode.select();
-      return true;
-    },
-    lexical.COMMAND_PRIORITY_LOW
-  );
-  const unregisterDivider = editor.registerCommand(
-    INSERT_DIVIDER_COMMAND,
-    () => {
-      const dividerNode = $createDividerBlockNode();
-      lexical.$insertNodes([dividerNode]);
-      return true;
-    },
-    lexical.COMMAND_PRIORITY_LOW
-  );
-  const unregisterButton = editor.registerCommand(
-    INSERT_BUTTON_COMMAND,
-    () => {
-      const buttonNode = $createButtonBlockNode();
-      lexical.$insertNodes([buttonNode]);
-      return true;
-    },
-    lexical.COMMAND_PRIORITY_LOW
-  );
-  const unregisterVariable = editor.registerCommand(
-    INSERT_VARIABLE_COMMAND,
-    (variableName) => {
-      const variableNode = $createVariableNode(variableName);
-      lexical.$insertNodes([variableNode]);
-      return true;
+  },
+  CountInfoExtra: {
+    as: "span",
+    className: "w-rjv-object-extra",
+    style: {
+      paddingLeft: 8
+    }
+  },
+  Ellipsis: {
+    as: "span",
+    style: {
+      cursor: "pointer",
+      color: "var(--w-rjv-ellipsis-color, #cb4b16)",
+      userSelect: "none"
     },
-    lexical.COMMAND_PRIORITY_LOW
-  );
-  return () => {
-    unregisterParagraph();
-    unregisterDivider();
-    unregisterButton();
-    unregisterVariable();
-  };
-}
-const BuilderBlocksExtension = lexical.defineExtension({
-  name: "@codee/builder-blocks",
-  nodes: () => [VariableNode, DividerBlockNode, ButtonBlockNode],
-  register: registerBlockCommands
-});
-const editorTheme = {
-  paragraph: "editor-paragraph mb-1",
-  text: {
-    bold: "font-bold",
-    italic: "italic",
-    underline: "underline"
+    className: "w-rjv-ellipsis",
+    children: "..."
+  },
+  Row: {
+    as: "div",
+    className: "w-rjv-line"
+  },
+  KeyName: {
+    as: "span",
+    className: "w-rjv-object-key"
   }
 };
-const BuilderEditorExtension = lexical.defineExtension({
-  name: "@codee/builder-editor",
-  namespace: "BuilderEditor",
-  theme: editorTheme,
-  dependencies: [
-    richText.RichTextExtension,
-    history.HistoryExtension,
-    BuilderBlocksExtension
-  ]
+var Context$2 = /* @__PURE__ */ React.createContext(initialState$1);
+var reducer$1 = (state, action) => _extends({}, state, action);
+var useSectionStore = () => {
+  return React.useContext(Context$2);
+};
+var DispatchSection = /* @__PURE__ */ React.createContext(() => {
 });
-const BuilderPage = () => {
-  const [output, setOutput] = React.useState("");
-  const handleChange = React.useCallback((editorState) => {
-    editorState.read(() => {
-      const json = editorState.toJSON();
-      setOutput(JSON.stringify(json, null, 2));
-    });
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", className: "mb-6", children: "Builder - Template Editor (Extensions API)" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: "mb-4 text-ui-fg-subtle", children: "Edytor" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          LexicalExtensionComposer.LexicalExtensionComposer,
-          {
-            extension: BuilderEditorExtension,
-            contentEditable: null,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-ui-border-base rounded-lg bg-white", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ToolbarPlugin,
-                {
-                  INSERT_PARAGRAPH_BLOCK_COMMAND,
-                  INSERT_DIVIDER_COMMAND,
-                  INSERT_BUTTON_COMMAND,
-                  INSERT_VARIABLE_COMMAND
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(EditorInner, { children: /* @__PURE__ */ jsxRuntime.jsx(LexicalContentEditable.ContentEditable, { className: "min-h-[400px] outline-none" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(LexicalOnChangePlugin.OnChangePlugin, { onChange: handleChange })
-            ] })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: "mb-4 text-ui-fg-subtle", children: "Output (Lexical State)" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-ui-border-base rounded-lg p-4 bg-ui-bg-subtle min-h-[400px] max-h-[600px] overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap", children: output || "..." }) })
-      ] })
-    ] })
-  ] });
-};
-const config$6 = adminSdk.defineRouteConfig({
-  label: "Builder - Lexical",
-  icon: icons.PuzzleSolid
-});
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function(n2) {
-    for (var e2 = 1; e2 < arguments.length; e2++) {
-      var t2 = arguments[e2];
-      for (var r in t2) ({}).hasOwnProperty.call(t2, r) && (n2[r] = t2[r]);
-    }
-    return n2;
-  }, _extends.apply(null, arguments);
-}
-function _objectWithoutPropertiesLoose(r, e2) {
-  if (null == r) return {};
-  var t2 = {};
-  for (var n2 in r) if ({}.hasOwnProperty.call(r, n2)) {
-    if (-1 !== e2.indexOf(n2)) continue;
-    t2[n2] = r[n2];
-  }
-  return t2;
-}
-var initialState$5 = {};
-var Context$6 = /* @__PURE__ */ React.createContext(initialState$5);
-var reducer$5 = (state, action) => _extends({}, state, action);
-var useShowToolsStore = () => {
-  return React.useContext(Context$6);
-};
-var DispatchShowTools = /* @__PURE__ */ React.createContext(() => {
-});
-DispatchShowTools.displayName = "JVR.DispatchShowTools";
-function useShowTools() {
-  return React.useReducer(reducer$5, initialState$5);
+DispatchSection.displayName = "JVR.DispatchSection";
+function useSection() {
+  return React.useReducer(reducer$1, initialState$1);
 }
-function useShowToolsDispatch() {
-  return React.useContext(DispatchShowTools);
+function useSectionDispatch() {
+  return React.useContext(DispatchSection);
 }
-var ShowTools = (_ref) => {
+var Section = (_ref) => {
   var {
     initial,
     dispatch,
     children
   } = _ref;
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$6.Provider, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$2.Provider, {
     value: initial,
-    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchShowTools.Provider, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchSection.Provider, {
       value: dispatch,
       children
     })
   });
 };
-ShowTools.displayName = "JVR.ShowTools";
-var initialState$4 = {};
-var Context$5 = /* @__PURE__ */ React.createContext(initialState$4);
-var reducer$4 = (state, action) => _extends({}, state, action);
-var useExpandsStore = () => {
-  return React.useContext(Context$5);
+Section.displayName = "JVR.Section";
+var initialState = {
+  objectSortKeys: false,
+  indentWidth: 15
 };
-var DispatchExpands = /* @__PURE__ */ React.createContext(() => {
+var Context$1 = /* @__PURE__ */ React.createContext(initialState);
+Context$1.displayName = "JVR.Context";
+var DispatchContext = /* @__PURE__ */ React.createContext(() => {
 });
-DispatchExpands.displayName = "JVR.DispatchExpands";
-function useExpands() {
-  return React.useReducer(reducer$4, initialState$4);
-}
-function useExpandsDispatch() {
-  return React.useContext(DispatchExpands);
+DispatchContext.displayName = "JVR.DispatchContext";
+function reducer(state, action) {
+  return _extends({}, state, action);
 }
-var Expands = (_ref) => {
+var useStore = () => {
+  return React.useContext(Context$1);
+};
+var Provider = (_ref) => {
   var {
-    initial,
-    dispatch,
-    children
+    children,
+    initialState: init,
+    initialTypes
   } = _ref;
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$5.Provider, {
-    value: initial,
-    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchExpands.Provider, {
+  var [state, dispatch] = React.useReducer(reducer, Object.assign({}, initialState, init));
+  var [showTools, showToolsDispatch] = useShowTools();
+  var [expands, expandsDispatch] = useExpands();
+  var [types, typesDispatch] = useTypes();
+  var [symbols, symbolsDispatch] = useSymbols();
+  var [section, sectionDispatch] = useSection();
+  React.useEffect(() => dispatch(_extends({}, init)), [init]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Context$1.Provider, {
+    value: state,
+    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchContext.Provider, {
       value: dispatch,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(ShowTools, {
+        initial: showTools,
+        dispatch: showToolsDispatch,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Expands, {
+          initial: expands,
+          dispatch: expandsDispatch,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Types, {
+            initial: _extends({}, types, initialTypes),
+            dispatch: typesDispatch,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Symbols, {
+              initial: symbols,
+              dispatch: symbolsDispatch,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Section, {
+                initial: section,
+                dispatch: sectionDispatch,
+                children
+              })
+            })
+          })
+        })
+      })
     })
   });
 };
-Expands.displayName = "JVR.Expands";
-var initialState$3 = {
-  Str: {
-    as: "span",
-    "data-type": "string",
-    style: {
-      color: "var(--w-rjv-type-string-color, #cb4b16)"
-    },
-    className: "w-rjv-type",
-    children: "string"
-  },
-  Url: {
-    as: "a",
-    style: {
-      color: "var(--w-rjv-type-url-color, #0969da)"
-    },
-    "data-type": "url",
-    className: "w-rjv-type",
-    children: "url"
-  },
-  Undefined: {
-    style: {
-      color: "var(--w-rjv-type-undefined-color, #586e75)"
-    },
-    as: "span",
-    "data-type": "undefined",
-    className: "w-rjv-type",
-    children: "undefined"
-  },
-  Null: {
-    style: {
-      color: "var(--w-rjv-type-null-color, #d33682)"
-    },
-    as: "span",
-    "data-type": "null",
-    className: "w-rjv-type",
-    children: "null"
-  },
-  Map: {
-    style: {
-      color: "var(--w-rjv-type-map-color, #268bd2)",
-      marginRight: 3
-    },
-    as: "span",
-    "data-type": "map",
-    className: "w-rjv-type",
-    children: "Map"
-  },
-  Nan: {
-    style: {
-      color: "var(--w-rjv-type-nan-color, #859900)"
-    },
-    as: "span",
-    "data-type": "nan",
-    className: "w-rjv-type",
-    children: "NaN"
-  },
-  Bigint: {
-    style: {
-      color: "var(--w-rjv-type-bigint-color, #268bd2)"
-    },
-    as: "span",
-    "data-type": "bigint",
-    className: "w-rjv-type",
-    children: "bigint"
-  },
-  Int: {
-    style: {
-      color: "var(--w-rjv-type-int-color, #268bd2)"
-    },
-    as: "span",
-    "data-type": "int",
-    className: "w-rjv-type",
-    children: "int"
-  },
-  Set: {
-    style: {
-      color: "var(--w-rjv-type-set-color, #268bd2)",
-      marginRight: 3
-    },
-    as: "span",
-    "data-type": "set",
-    className: "w-rjv-type",
-    children: "Set"
-  },
-  Float: {
-    style: {
-      color: "var(--w-rjv-type-float-color, #859900)"
-    },
-    as: "span",
-    "data-type": "float",
-    className: "w-rjv-type",
-    children: "float"
-  },
-  True: {
-    style: {
-      color: "var(--w-rjv-type-boolean-color, #2aa198)"
-    },
-    as: "span",
-    "data-type": "bool",
-    className: "w-rjv-type",
-    children: "bool"
-  },
-  False: {
-    style: {
-      color: "var(--w-rjv-type-boolean-color, #2aa198)"
-    },
-    as: "span",
-    "data-type": "bool",
-    className: "w-rjv-type",
-    children: "bool"
-  },
-  Date: {
-    style: {
-      color: "var(--w-rjv-type-date-color, #268bd2)"
-    },
-    as: "span",
-    "data-type": "date",
-    className: "w-rjv-type",
-    children: "date"
-  }
-};
-var Context$4 = /* @__PURE__ */ React.createContext(initialState$3);
-var reducer$3 = (state, action) => _extends({}, state, action);
-var useTypesStore = () => {
-  return React.useContext(Context$4);
-};
-var DispatchTypes = /* @__PURE__ */ React.createContext(() => {
-});
-DispatchTypes.displayName = "JVR.DispatchTypes";
-function useTypes() {
-  return React.useReducer(reducer$3, initialState$3);
-}
-function useTypesDispatch() {
-  return React.useContext(DispatchTypes);
+Provider.displayName = "JVR.Provider";
+function _objectDestructuringEmpty(t2) {
+  if (null == t2) throw new TypeError("Cannot destructure " + t2);
 }
-function Types(_ref) {
+var _excluded$9 = ["isNumber", "value", "parentValue", "keyName", "keys"], _excluded2$5 = ["as", "render"], _excluded3$1 = ["as", "render"], _excluded4$1 = ["as", "render"], _excluded5$1 = ["as", "style", "render"], _excluded6$1 = ["as", "render"], _excluded7$1 = ["as", "render"], _excluded8$1 = ["as", "render"], _excluded9$1 = ["as", "render"];
+var Quote$1 = (props) => {
   var {
-    initial,
-    dispatch,
-    children
-  } = _ref;
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$4.Provider, {
-    value: initial,
-    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchTypes.Provider, {
-      value: dispatch,
-      children
-    })
-  });
-}
-Types.displayName = "JVR.Types";
-var _excluded$a = ["style"];
-function TriangleArrow(props) {
+    Quote: Comp = {}
+  } = useSymbolsStore();
   var {
-    style
-  } = props, reset = _objectWithoutPropertiesLoose(props, _excluded$a);
-  var defaultStyle = _extends({
-    cursor: "pointer",
-    height: "1em",
-    width: "1em",
-    userSelect: "none",
-    display: "inline-flex"
-  }, style);
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", _extends({
-    viewBox: "0 0 24 24",
-    fill: "var(--w-rjv-arrow-color, currentColor)",
-    style: defaultStyle
-  }, reset, {
-    children: /* @__PURE__ */ jsxRuntime.jsx("path", {
-      d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
-    })
-  }));
-}
-TriangleArrow.displayName = "JVR.TriangleArrow";
-var initialState$2 = {
-  Arrow: {
-    as: "span",
-    className: "w-rjv-arrow",
-    style: {
-      transform: "rotate(0deg)",
-      transition: "all 0.3s"
-    },
-    children: /* @__PURE__ */ jsxRuntime.jsx(TriangleArrow, {})
-  },
-  Colon: {
-    as: "span",
-    style: {
-      color: "var(--w-rjv-colon-color, var(--w-rjv-color))",
-      marginLeft: 0,
-      marginRight: 2
-    },
-    className: "w-rjv-colon",
-    children: ":"
-  },
-  Quote: {
-    as: "span",
-    style: {
-      color: "var(--w-rjv-quotes-color, #236a7c)"
-    },
-    className: "w-rjv-quotes",
-    children: '"'
-  },
-  ValueQuote: {
-    as: "span",
-    style: {
-      color: "var(--w-rjv-quotes-string-color, #cb4b16)"
-    },
-    className: "w-rjv-quotes",
-    children: '"'
-  },
-  BracketsLeft: {
-    as: "span",
-    style: {
-      color: "var(--w-rjv-brackets-color, #236a7c)"
-    },
-    className: "w-rjv-brackets-start",
-    children: "["
-  },
-  BracketsRight: {
-    as: "span",
-    style: {
-      color: "var(--w-rjv-brackets-color, #236a7c)"
-    },
-    className: "w-rjv-brackets-end",
-    children: "]"
-  },
-  BraceLeft: {
-    as: "span",
-    style: {
-      color: "var(--w-rjv-curlybraces-color, #236a7c)"
-    },
-    className: "w-rjv-curlybraces-start",
-    children: "{"
-  },
-  BraceRight: {
-    as: "span",
-    style: {
-      color: "var(--w-rjv-curlybraces-color, #236a7c)"
-    },
-    className: "w-rjv-curlybraces-end",
-    children: "}"
+    isNumber,
+    value,
+    parentValue,
+    keyName,
+    keys
+  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$9);
+  if (isNumber) return null;
+  var {
+    as,
+    render
+  } = Comp, reset = _objectWithoutPropertiesLoose(Comp, _excluded2$5);
+  var Elm = as || "span";
+  var elmProps = _extends({}, other, reset);
+  if (typeof elmProps.children === "string") {
+    var trimmed = elmProps.children.trim();
+    elmProps.children = trimmed || void 0;
   }
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = render && typeof render === "function" && render(elmProps, result);
+  if (child) return child;
+  return /* @__PURE__ */ jsxRuntime.jsx(Elm, _extends({}, elmProps));
 };
-var Context$3 = /* @__PURE__ */ React.createContext(initialState$2);
-var reducer$2 = (state, action) => _extends({}, state, action);
-var useSymbolsStore = () => {
-  return React.useContext(Context$3);
+Quote$1.displayName = "JVR.Quote";
+var ValueQuote$1 = (props) => {
+  var {
+    ValueQuote: Comp = {}
+  } = useSymbolsStore();
+  var other = _extends({}, (_objectDestructuringEmpty(props), props));
+  var {
+    as,
+    render
+  } = Comp, reset = _objectWithoutPropertiesLoose(Comp, _excluded3$1);
+  var Elm = as || "span";
+  var elmProps = _extends({}, other, reset);
+  var child = render && typeof render === "function" && render(elmProps, {});
+  if (child) return child;
+  return /* @__PURE__ */ jsxRuntime.jsx(Elm, _extends({}, elmProps));
 };
-var DispatchSymbols = /* @__PURE__ */ React.createContext(() => {
-});
-DispatchSymbols.displayName = "JVR.DispatchSymbols";
-function useSymbols() {
-  return React.useReducer(reducer$2, initialState$2);
-}
-function useSymbolsDispatch() {
-  return React.useContext(DispatchSymbols);
-}
-var Symbols = (_ref) => {
+ValueQuote$1.displayName = "JVR.ValueQuote";
+var Colon$1 = (props) => {
   var {
-    initial,
-    dispatch,
-    children
-  } = _ref;
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$3.Provider, {
-    value: initial,
-    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchSymbols.Provider, {
-      value: dispatch,
-      children
-    })
+    value,
+    parentValue,
+    keyName,
+    keys
+  } = props;
+  var {
+    Colon: Comp = {}
+  } = useSymbolsStore();
+  var {
+    as,
+    render
+  } = Comp, reset = _objectWithoutPropertiesLoose(Comp, _excluded4$1);
+  var Elm = as || "span";
+  var child = render && typeof render === "function" && render(reset, {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
   });
-};
-Symbols.displayName = "JVR.Symbols";
-var initialState$1 = {
-  Copied: {
-    className: "w-rjv-copied",
-    style: {
-      height: "1em",
-      width: "1em",
-      cursor: "pointer",
-      verticalAlign: "middle",
-      marginLeft: 5
-    }
-  },
-  CountInfo: {
-    as: "span",
-    className: "w-rjv-object-size",
-    style: {
-      color: "var(--w-rjv-info-color, #0000004d)",
-      paddingLeft: 8,
-      fontStyle: "italic"
-    }
-  },
-  CountInfoExtra: {
-    as: "span",
-    className: "w-rjv-object-extra",
-    style: {
-      paddingLeft: 8
-    }
-  },
-  Ellipsis: {
-    as: "span",
-    style: {
-      cursor: "pointer",
-      color: "var(--w-rjv-ellipsis-color, #cb4b16)",
-      userSelect: "none"
-    },
-    className: "w-rjv-ellipsis",
-    children: "..."
-  },
-  Row: {
-    as: "div",
-    className: "w-rjv-line"
-  },
-  KeyName: {
-    as: "span",
-    className: "w-rjv-object-key"
-  }
-};
-var Context$2 = /* @__PURE__ */ React.createContext(initialState$1);
-var reducer$1 = (state, action) => _extends({}, state, action);
-var useSectionStore = () => {
-  return React.useContext(Context$2);
-};
-var DispatchSection = /* @__PURE__ */ React.createContext(() => {
-});
-DispatchSection.displayName = "JVR.DispatchSection";
-function useSection() {
-  return React.useReducer(reducer$1, initialState$1);
-}
-function useSectionDispatch() {
-  return React.useContext(DispatchSection);
-}
-var Section = (_ref) => {
-  var {
-    initial,
-    dispatch,
-    children
-  } = _ref;
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$2.Provider, {
-    value: initial,
-    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchSection.Provider, {
-      value: dispatch,
-      children
-    })
-  });
-};
-Section.displayName = "JVR.Section";
-var initialState = {
-  objectSortKeys: false,
-  indentWidth: 15
-};
-var Context$1 = /* @__PURE__ */ React.createContext(initialState);
-Context$1.displayName = "JVR.Context";
-var DispatchContext = /* @__PURE__ */ React.createContext(() => {
-});
-DispatchContext.displayName = "JVR.DispatchContext";
-function reducer(state, action) {
-  return _extends({}, state, action);
-}
-var useStore = () => {
-  return React.useContext(Context$1);
-};
-var Provider = (_ref) => {
-  var {
-    children,
-    initialState: init,
-    initialTypes
-  } = _ref;
-  var [state, dispatch] = React.useReducer(reducer, Object.assign({}, initialState, init));
-  var [showTools, showToolsDispatch] = useShowTools();
-  var [expands, expandsDispatch] = useExpands();
-  var [types, typesDispatch] = useTypes();
-  var [symbols, symbolsDispatch] = useSymbols();
-  var [section, sectionDispatch] = useSection();
-  React.useEffect(() => dispatch(_extends({}, init)), [init]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Context$1.Provider, {
-    value: state,
-    children: /* @__PURE__ */ jsxRuntime.jsx(DispatchContext.Provider, {
-      value: dispatch,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ShowTools, {
-        initial: showTools,
-        dispatch: showToolsDispatch,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Expands, {
-          initial: expands,
-          dispatch: expandsDispatch,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Types, {
-            initial: _extends({}, types, initialTypes),
-            dispatch: typesDispatch,
-            children: /* @__PURE__ */ jsxRuntime.jsx(Symbols, {
-              initial: symbols,
-              dispatch: symbolsDispatch,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Section, {
-                initial: section,
-                dispatch: sectionDispatch,
-                children
-              })
-            })
-          })
-        })
-      })
-    })
-  });
-};
-Provider.displayName = "JVR.Provider";
-function _objectDestructuringEmpty(t2) {
-  if (null == t2) throw new TypeError("Cannot destructure " + t2);
-}
-var _excluded$9 = ["isNumber", "value", "parentValue", "keyName", "keys"], _excluded2$5 = ["as", "render"], _excluded3$1 = ["as", "render"], _excluded4$1 = ["as", "render"], _excluded5$1 = ["as", "style", "render"], _excluded6$1 = ["as", "render"], _excluded7$1 = ["as", "render"], _excluded8$1 = ["as", "render"], _excluded9$1 = ["as", "render"];
-var Quote$1 = (props) => {
-  var {
-    Quote: Comp = {}
-  } = useSymbolsStore();
-  var {
-    isNumber,
-    value,
-    parentValue,
-    keyName,
-    keys
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded$9);
-  if (isNumber) return null;
-  var {
-    as,
-    render
-  } = Comp, reset = _objectWithoutPropertiesLoose(Comp, _excluded2$5);
-  var Elm = as || "span";
-  var elmProps = _extends({}, other, reset);
-  if (typeof elmProps.children === "string") {
-    var trimmed = elmProps.children.trim();
-    elmProps.children = trimmed || void 0;
-  }
-  var result = {
-    value,
-    parentValue,
-    keyName,
-    keys: keys || (keyName ? [keyName] : [])
-  };
-  var child = render && typeof render === "function" && render(elmProps, result);
-  if (child) return child;
-  return /* @__PURE__ */ jsxRuntime.jsx(Elm, _extends({}, elmProps));
-};
-Quote$1.displayName = "JVR.Quote";
-var ValueQuote$1 = (props) => {
-  var {
-    ValueQuote: Comp = {}
-  } = useSymbolsStore();
-  var other = _extends({}, (_objectDestructuringEmpty(props), props));
-  var {
-    as,
-    render
-  } = Comp, reset = _objectWithoutPropertiesLoose(Comp, _excluded3$1);
-  var Elm = as || "span";
-  var elmProps = _extends({}, other, reset);
-  var child = render && typeof render === "function" && render(elmProps, {});
-  if (child) return child;
-  return /* @__PURE__ */ jsxRuntime.jsx(Elm, _extends({}, elmProps));
-};
-ValueQuote$1.displayName = "JVR.ValueQuote";
-var Colon$1 = (props) => {
-  var {
-    value,
-    parentValue,
-    keyName,
-    keys
-  } = props;
-  var {
-    Colon: Comp = {}
-  } = useSymbolsStore();
-  var {
-    as,
-    render
-  } = Comp, reset = _objectWithoutPropertiesLoose(Comp, _excluded4$1);
-  var Elm = as || "span";
-  var child = render && typeof render === "function" && render(reset, {
-    value,
-    parentValue,
-    keyName,
-    keys: keys || (keyName ? [keyName] : [])
-  });
-  if (child) return child;
-  return /* @__PURE__ */ jsxRuntime.jsx(Elm, _extends({}, reset));
+  if (child) return child;
+  return /* @__PURE__ */ jsxRuntime.jsx(Elm, _extends({}, reset));
 };
 Colon$1.displayName = "JVR.Colon";
 var Arrow$1 = (props) => {
@@ -3500,249 +2811,938 @@ const JsonViewSection = ({
       /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.IconButton,
         {
-          size: "small",
-          variant: "transparent",
-          className: "text-ui-fg-muted hover:text-ui-fg-subtle",
-          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpRightOnBox, {})
+          size: "small",
+          variant: "transparent",
+          className: "text-ui-fg-muted hover:text-ui-fg-subtle",
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpRightOnBox, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { className: "bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-code-bg-base flex items-center justify-between px-6 py-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { className: "text-ui-contrast-fg-primary", children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactI18next.Trans,
+              {
+                i18nKey: "json.drawer.header",
+                count: numberOfKeys,
+                components: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "text-ui-fg-subtle"
+                    },
+                    "count-span"
+                  )
+                ]
+              }
+            ) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Description, { className: "sr-only", children: t2("json.drawer.description") })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Kbd, { className: "bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary", children: "esc" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.IconButton,
+              {
+                size: "small",
+                variant: "transparent",
+                className: "text-ui-contrast-fg-secondary hover:text-ui-contrast-fg-primary hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus-visible:bg-ui-contrast-bg-base-hover focus-visible:shadow-borders-interactive-with-active",
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMarkMini, {})
+              }
+            ) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Body, { className: "flex flex-1 flex-col overflow-hidden px-[5px] py-0 pb-[5px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-contrast-bg-subtle flex-1 overflow-auto rounded-b-[4px] rounded-t-lg p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+          React.Suspense,
+          {
+            fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full flex-col" }),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              JsonView,
+              {
+                value: data,
+                displayDataTypes: false,
+                style: {
+                  "--w-rjv-font-family": "Roboto Mono, monospace",
+                  "--w-rjv-line-color": "var(--contrast-border-base)",
+                  "--w-rjv-curlybraces-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-brackets-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-key-string": "var(--contrast-fg-primary)",
+                  "--w-rjv-info-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-type-string-color": "var(--tag-green-icon)",
+                  "--w-rjv-quotes-string-color": "var(--tag-green-icon)",
+                  "--w-rjv-type-boolean-color": "var(--tag-orange-icon)",
+                  "--w-rjv-type-int-color": "var(--tag-orange-icon)",
+                  "--w-rjv-type-float-color": "var(--tag-orange-icon)",
+                  "--w-rjv-type-bigint-color": "var(--tag-orange-icon)",
+                  "--w-rjv-key-number": "var(--contrast-fg-secondary)",
+                  "--w-rjv-arrow-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-copied-color": "var(--contrast-fg-secondary)",
+                  "--w-rjv-copied-success-color": "var(--contrast-fg-primary)",
+                  "--w-rjv-colon-color": "var(--contrast-fg-primary)",
+                  "--w-rjv-ellipsis-color": "var(--contrast-fg-secondary)"
+                },
+                collapsed: 1,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    JsonView.Quote,
+                    {
+                      render: () => /* @__PURE__ */ jsxRuntime.jsx("span", {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    JsonView.Null,
+                    {
+                      render: () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-tag-red-icon", children: "null" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    JsonView.Undefined,
+                    {
+                      render: () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-tag-blue-icon", children: "undefined" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    JsonView.CountInfo,
+                    {
+                      render: (_props, { value }) => {
+                        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-contrast-fg-secondary ml-2", children: t2("general.items", {
+                          count: Object.keys(
+                            value
+                          ).length
+                        }) });
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(JsonView.Arrow, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleDownMini, { className: "text-ui-contrast-fg-secondary -ml-[0.5px]" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(JsonView.Colon, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: ":" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    JsonView.Copied,
+                    {
+                      render: ({ style }, { value }) => {
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          Copied,
+                          {
+                            style,
+                            value
+                          }
+                        );
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) }) })
+      ] })
+    ] })
+  ] });
+};
+const Copied = ({ style, value }) => {
+  const [copied, setCopied] = React.useState(false);
+  const handler = (e2) => {
+    e2.stopPropagation();
+    setCopied(true);
+    if (typeof value === "string") {
+      navigator.clipboard.writeText(value);
+    } else {
+      const json = JSON.stringify(value, null, 2);
+      navigator.clipboard.writeText(json);
+    }
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
+  };
+  const styl = { whiteSpace: "nowrap", width: "20px" };
+  if (copied) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...style, ...styl }, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { className: "text-ui-contrast-fg-primary" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...style, ...styl }, onClick: handler, children: /* @__PURE__ */ jsxRuntime.jsx(icons.SquareTwoStack, { className: "text-ui-contrast-fg-secondary" }) });
+};
+const MetadataSection = ({
+  data,
+  onOpen
+}) => {
+  const { t: t2 } = reactI18next.useTranslation();
+  if (!data) {
+    return null;
+  }
+  if (!("metadata" in data)) {
+    return null;
+  }
+  const numberOfKeys = data.metadata ? Object.keys(data.metadata).length : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: t2("metadata.header") }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", rounded: "full", children: t2("metadata.numberOfKeys", {
+        count: numberOfKeys
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.IconButton,
+      {
+        size: "small",
+        variant: "transparent",
+        className: "text-ui-fg-muted hover:text-ui-fg-subtle",
+        onClick: onOpen,
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpRightOnBox, {})
+      }
+    )
+  ] });
+};
+const SingleColumnPage = ({
+  children,
+  widgets,
+  /**
+   * Data of the page which is passed to Widgets, JSON view, and Metadata view.
+   */
+  data,
+  /**
+   * Whether the page should render an outlet for children routes. Defaults to true.
+   */
+  hasOutlet = true,
+  /**
+   * Whether to show JSON view of the data. Defaults to false.
+   */
+  showJSON,
+  /**
+   * Whether to show metadata view of the data. Defaults to false.
+   */
+  showMetadata
+}) => {
+  const { before, after } = widgets;
+  const widgetProps = { data };
+  if (showJSON && !data) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(
+        "`showJSON` is true but no data is provided. To display JSON, provide data prop."
+      );
+    }
+    showJSON = false;
+  }
+  if (showMetadata && !data) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(
+        "`showMetadata` is true but no data is provided. To display metadata, provide data prop."
+      );
+    }
+    showMetadata = false;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-3", children: [
+    before.map((Component, i2) => {
+      return /* @__PURE__ */ React.createElement(Component, { ...widgetProps, key: i2 });
+    }),
+    children,
+    after.map((Component, i2) => {
+      return /* @__PURE__ */ React.createElement(Component, { ...widgetProps, key: i2 });
+    }),
+    showMetadata && /* @__PURE__ */ jsxRuntime.jsx(MetadataSection, { data }),
+    showJSON && /* @__PURE__ */ jsxRuntime.jsx(JsonViewSection, { data }),
+    hasOutlet && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
+  ] });
+};
+const ListPage$4 = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SingleColumnPage,
+    {
+      widgets: {
+        before: [],
+        after: []
+      },
+      children: "Notifications"
+    }
+  );
+};
+const config$6 = adminSdk.defineRouteConfig({
+  label: "Notifications"
+});
+class VariableNode extends lexical.DecoratorNode {
+  static getType() {
+    return "variable";
+  }
+  static clone(node) {
+    return new VariableNode(node.__variableName, node.__key);
+  }
+  constructor(variableName, key) {
+    super(key);
+    this.__variableName = variableName;
+  }
+  createDOM() {
+    const span = document.createElement("span");
+    span.className = "variable-node";
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const element = document.createElement("span");
+    element.textContent = `{{${this.__variableName}}}`;
+    element.className = "variable";
+    return { element };
+  }
+  static importJSON(serializedNode) {
+    return $createVariableNode(serializedNode.variableName);
+  }
+  exportJSON() {
+    return {
+      type: "variable",
+      version: 1,
+      variableName: this.__variableName
+    };
+  }
+  isInline() {
+    return true;
+  }
+  getVariableName() {
+    return this.__variableName;
+  }
+  getTextContent() {
+    return `{{${this.__variableName}}}`;
+  }
+  decorate() {
+    return /* @__PURE__ */ jsxRuntime.jsx(VariableComponent, { variableName: this.__variableName });
+  }
+}
+function $createVariableNode(variableName) {
+  return new VariableNode(variableName);
+}
+function VariableComponent({ variableName }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded text-xs font-mono bg-violet-100 text-violet-700 border border-violet-200",
+      contentEditable: false,
+      children: `{{${variableName}}}`
+    }
+  );
+}
+class DividerBlockNode extends lexical.DecoratorNode {
+  static getType() {
+    return "divider-block";
+  }
+  static clone(node) {
+    return new DividerBlockNode(node.__key);
+  }
+  constructor(key) {
+    super(key);
+  }
+  createDOM() {
+    const div = document.createElement("div");
+    div.className = "editor-divider";
+    div.setAttribute("data-lexical-decorator", "true");
+    div.setAttribute("contenteditable", "false");
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const element = document.createElement("hr");
+    return { element };
+  }
+  static importJSON() {
+    return $createDividerBlockNode();
+  }
+  exportJSON() {
+    return {
+      type: "divider-block",
+      version: 1
+    };
+  }
+  isInline() {
+    return false;
+  }
+  decorate() {
+    return /* @__PURE__ */ jsxRuntime.jsx(DividerBlockComponent, { nodeKey: this.__key });
+  }
+}
+function $createDividerBlockNode() {
+  return new DividerBlockNode();
+}
+function DividerBlockComponent({ nodeKey }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "editor-block py-4 cursor-pointer",
+      "data-block-key": nodeKey,
+      "data-block-type": "divider",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-muted mb-1 uppercase tracking-wide", children: "Divider" }),
+        /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t-2 border-ui-border-base" })
+      ]
+    }
+  );
+}
+class ButtonBlockNode extends lexical.DecoratorNode {
+  static getType() {
+    return "button-block";
+  }
+  static clone(node) {
+    return new ButtonBlockNode(node.__text, node.__url, node.__key);
+  }
+  constructor(text = "Kliknij", url = "#", key) {
+    super(key);
+    this.__text = text;
+    this.__url = url;
+  }
+  createDOM() {
+    const div = document.createElement("div");
+    div.className = "editor-button";
+    div.setAttribute("data-lexical-decorator", "true");
+    div.setAttribute("contenteditable", "false");
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const element = document.createElement("a");
+    element.href = this.__url;
+    element.textContent = this.__text;
+    element.className = "button";
+    return { element };
+  }
+  static importJSON(serializedNode) {
+    return $createButtonBlockNode(serializedNode.text, serializedNode.url);
+  }
+  exportJSON() {
+    return {
+      type: "button-block",
+      version: 1,
+      text: this.__text,
+      url: this.__url
+    };
+  }
+  isInline() {
+    return false;
+  }
+  getText() {
+    return this.__text;
+  }
+  getUrl() {
+    return this.__url;
+  }
+  setText(text) {
+    const writable = this.getWritable();
+    writable.__text = text;
+  }
+  setUrl(url) {
+    const writable = this.getWritable();
+    writable.__url = url;
+  }
+  decorate() {
+    return /* @__PURE__ */ jsxRuntime.jsx(ButtonBlockComponent, { nodeKey: this.__key, text: this.__text, url: this.__url });
+  }
+}
+function $createButtonBlockNode(text, url) {
+  return new ButtonBlockNode(text, url);
+}
+function ButtonBlockComponent({ nodeKey, text, url }) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editText, setEditText] = React.useState(text);
+  const [editUrl, setEditUrl] = React.useState(url);
+  const handleSave = () => {
+    editor.update(() => {
+      const node = lexical.$getNodeByKey(nodeKey);
+      if (node) {
+        node.setText(editText);
+        node.setUrl(editUrl);
+      }
+    });
+    setIsEditing(false);
+  };
+  if (isEditing) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-block py-2", "data-block-key": nodeKey, "data-block-type": "button", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 border border-ui-border-interactive rounded-lg bg-ui-bg-subtle", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-muted mb-2 uppercase tracking-wide", children: "Button" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: editText,
+            onChange: (e2) => setEditText(e2.target.value),
+            placeholder: "Tekst przycisku",
+            className: "w-full px-3 py-2 text-sm border border-ui-border-base rounded-lg"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: editUrl,
+            onChange: (e2) => setEditUrl(e2.target.value),
+            placeholder: "URL (np. {{data.order.url}})",
+            className: "w-full px-3 py-2 text-sm border border-ui-border-base rounded-lg font-mono"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleSave,
+              className: "px-4 py-2 text-sm bg-ui-button-neutral text-ui-fg-on-color rounded-lg hover:bg-ui-button-neutral-hover",
+              children: "Zapisz"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setIsEditing(false),
+              className: "px-4 py-2 text-sm border border-ui-border-base rounded-lg hover:bg-ui-bg-base-hover",
+              children: "Anuluj"
+            }
+          )
+        ] })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-block py-2 cursor-pointer", "data-block-key": nodeKey, "data-block-type": "button", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-ui-fg-muted mb-1 uppercase tracking-wide", children: "Button" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onDoubleClick: () => setIsEditing(true),
+        className: "px-6 py-2 bg-violet-600 text-white rounded-lg font-medium hover:bg-violet-700 transition-colors cursor-pointer",
+        title: "Kliknij dwukrotnie aby edytować",
+        children: text
+      }
+    ) })
+  ] });
+}
+function FloatingBlockToolbar({ hoveredBlock }) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const handleMoveUp = () => {
+    if (!hoveredBlock) return;
+    editor.update(() => {
+      const node = lexical.$getNodeByKey(hoveredBlock.key);
+      if (node) {
+        const prevSibling = node.getPreviousSibling();
+        if (prevSibling) {
+          prevSibling.insertBefore(node);
+        }
+      }
+    });
+  };
+  const handleMoveDown = () => {
+    if (!hoveredBlock) return;
+    editor.update(() => {
+      const node = lexical.$getNodeByKey(hoveredBlock.key);
+      if (node) {
+        const nextSibling = node.getNextSibling();
+        if (nextSibling) {
+          nextSibling.insertAfter(node);
+        }
+      }
+    });
+  };
+  const handleDelete = () => {
+    if (!hoveredBlock) return;
+    editor.update(() => {
+      const node = lexical.$getNodeByKey(hoveredBlock.key);
+      if (node) {
+        node.remove();
+      }
+    });
+  };
+  const isVisible = hoveredBlock && hoveredBlock.type !== "variable";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `pointer-events-auto absolute z-[100] transition-opacity duration-150 ${isVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
+      style: {
+        top: (hoveredBlock == null ? void 0 : hoveredBlock.top) ?? 0,
+        left: 8
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleMoveUp,
+            className: "w-6 h-6 flex items-center justify-center bg-ui-bg-base hover:bg-ui-bg-base-hover rounded text-ui-fg-muted border border-ui-border-base text-xs",
+            title: "Przesuń w górę",
+            children: "↑"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleMoveDown,
+            className: "w-6 h-6 flex items-center justify-center bg-ui-bg-base hover:bg-ui-bg-base-hover rounded text-ui-fg-muted border border-ui-border-base text-xs",
+            title: "Przesuń w dół",
+            children: "↓"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleDelete,
+            className: "w-6 h-6 flex items-center justify-center bg-ui-bg-base hover:bg-ui-bg-base-hover rounded text-ui-fg-muted hover:text-ui-fg-error border border-ui-border-base text-xs",
+            title: "Usuń",
+            children: "✕"
+          }
+        )
+      ] })
+    }
+  );
+}
+function EditorInner({ children }) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [hoveredBlock, setHoveredBlock] = React.useState(null);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const handleMouseMove = (e2) => {
+      const target = e2.target;
+      let blockElement = null;
+      let nodeKey = null;
+      let blockType = null;
+      const customBlock = target.closest(".editor-block");
+      if (customBlock) {
+        blockElement = customBlock;
+        nodeKey = customBlock.dataset.blockKey || null;
+        blockType = customBlock.dataset.blockType || null;
+      }
+      if (!blockElement) {
+        const paragraph = target.closest("p.editor-paragraph");
+        if (paragraph) {
+          blockElement = paragraph;
+          blockType = "paragraph";
+          editor.getEditorState().read(() => {
+            const root = lexical.$getRoot();
+            const children2 = root.getChildren();
+            for (const child of children2) {
+              const childElement = editor.getElementByKey(child.getKey());
+              if (childElement === paragraph) {
+                nodeKey = child.getKey();
+                break;
+              }
+            }
+          });
+        }
+      }
+      if (blockElement && nodeKey) {
+        const containerRect = container.getBoundingClientRect();
+        const blockRect = blockElement.getBoundingClientRect();
+        setHoveredBlock({
+          key: nodeKey,
+          top: blockRect.top - containerRect.top,
+          type: blockType || "unknown"
+        });
+      }
+    };
+    const handleMouseLeave = () => {
+      setHoveredBlock(null);
+    };
+    container.addEventListener("mousemove", handleMouseMove, { capture: true });
+    container.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      container.removeEventListener("mousemove", handleMouseMove, { capture: true });
+      container.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [editor]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "editor-inner relative pl-12 py-4 pr-4",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FloatingBlockToolbar, { hoveredBlock }),
+        children
+      ]
+    }
+  );
+}
+const AVAILABLE_VARIABLES = [
+  "data.order.id",
+  "data.order.display_id",
+  "data.order.email",
+  "data.order.total",
+  "data.customer.first_name",
+  "data.customer.last_name"
+];
+function ToolbarPlugin({
+  INSERT_PARAGRAPH_BLOCK_COMMAND: INSERT_PARAGRAPH_BLOCK_COMMAND2,
+  INSERT_DIVIDER_COMMAND: INSERT_DIVIDER_COMMAND2,
+  INSERT_BUTTON_COMMAND: INSERT_BUTTON_COMMAND2,
+  INSERT_VARIABLE_COMMAND: INSERT_VARIABLE_COMMAND2
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [showVariables, setShowVariables] = React.useState(false);
+  const [showBlockMenu, setShowBlockMenu] = React.useState(false);
+  const lastActiveFieldRef = React.useRef(null);
+  const formatBold = () => {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold");
+  };
+  const formatItalic = () => {
+    editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic");
+  };
+  const captureActiveField = () => {
+    const activeElement = document.activeElement;
+    if (activeElement instanceof HTMLTextAreaElement || activeElement instanceof HTMLInputElement) {
+      lastActiveFieldRef.current = {
+        element: activeElement,
+        selectionStart: activeElement.selectionStart || 0,
+        selectionEnd: activeElement.selectionEnd || 0
+      };
+    }
+  };
+  const insertVariable = (variable) => {
+    var _a;
+    const text = `{{${variable}}}`;
+    const lastField = lastActiveFieldRef.current;
+    if (lastField && document.body.contains(lastField.element)) {
+      const { element, selectionStart, selectionEnd } = lastField;
+      const currentValue = element.value;
+      const newValue = currentValue.slice(0, selectionStart) + text + currentValue.slice(selectionEnd);
+      const nativeInputValueSetter = (_a = Object.getOwnPropertyDescriptor(
+        element instanceof HTMLTextAreaElement ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype,
+        "value"
+      )) == null ? void 0 : _a.set;
+      nativeInputValueSetter == null ? void 0 : nativeInputValueSetter.call(element, newValue);
+      element.dispatchEvent(new Event("input", { bubbles: true }));
+      setTimeout(() => {
+        element.focus();
+        element.setSelectionRange(selectionStart + text.length, selectionStart + text.length);
+      }, 0);
+      lastActiveFieldRef.current = null;
+    } else {
+      editor.dispatchCommand(INSERT_VARIABLE_COMMAND2, variable);
+    }
+    setShowVariables(false);
+  };
+  const insertParagraph = () => {
+    editor.dispatchCommand(INSERT_PARAGRAPH_BLOCK_COMMAND2, void 0);
+    setShowBlockMenu(false);
+  };
+  const insertDivider = () => {
+    editor.dispatchCommand(INSERT_DIVIDER_COMMAND2, void 0);
+    setShowBlockMenu(false);
+  };
+  const insertButton = () => {
+    editor.dispatchCommand(INSERT_BUTTON_COMMAND2, void 0);
+    setShowBlockMenu(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 p-2 border-b border-ui-border-base bg-ui-bg-subtle sticky top-0 z-10", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowBlockMenu(!showBlockMenu),
+          className: "flex items-center gap-1 px-2 py-1 hover:bg-ui-bg-base-hover rounded text-sm",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, { className: "w-4 h-4" }),
+            "Blok"
+          ]
         }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { className: "bg-ui-contrast-bg-base text-ui-code-fg-subtle !shadow-elevation-commandbar overflow-hidden border border-none max-md:inset-x-2 max-md:max-w-[calc(100%-16px)]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-ui-code-bg-base flex items-center justify-between px-6 py-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { className: "text-ui-contrast-fg-primary", children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactI18next.Trans,
-              {
-                i18nKey: "json.drawer.header",
-                count: numberOfKeys,
-                components: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: "text-ui-fg-subtle"
-                    },
-                    "count-span"
-                  )
-                ]
-              }
-            ) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Description, { className: "sr-only", children: t2("json.drawer.description") })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Kbd, { className: "bg-ui-contrast-bg-subtle border-ui-contrast-border-base text-ui-contrast-fg-secondary", children: "esc" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.IconButton,
-              {
-                size: "small",
-                variant: "transparent",
-                className: "text-ui-contrast-fg-secondary hover:text-ui-contrast-fg-primary hover:bg-ui-contrast-bg-base-hover active:bg-ui-contrast-bg-base-pressed focus-visible:bg-ui-contrast-bg-base-hover focus-visible:shadow-borders-interactive-with-active",
-                children: /* @__PURE__ */ jsxRuntime.jsx(icons.XMarkMini, {})
-              }
-            ) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Body, { className: "flex flex-1 flex-col overflow-hidden px-[5px] py-0 pb-[5px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-ui-contrast-bg-subtle flex-1 overflow-auto rounded-b-[4px] rounded-t-lg p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-          React.Suspense,
+      ),
+      showBlockMenu && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-full left-0 mt-1 bg-ui-bg-base border border-ui-border-base rounded shadow-lg z-20 min-w-[150px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
           {
-            fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-full flex-col" }),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              JsonView,
-              {
-                value: data,
-                displayDataTypes: false,
-                style: {
-                  "--w-rjv-font-family": "Roboto Mono, monospace",
-                  "--w-rjv-line-color": "var(--contrast-border-base)",
-                  "--w-rjv-curlybraces-color": "var(--contrast-fg-secondary)",
-                  "--w-rjv-brackets-color": "var(--contrast-fg-secondary)",
-                  "--w-rjv-key-string": "var(--contrast-fg-primary)",
-                  "--w-rjv-info-color": "var(--contrast-fg-secondary)",
-                  "--w-rjv-type-string-color": "var(--tag-green-icon)",
-                  "--w-rjv-quotes-string-color": "var(--tag-green-icon)",
-                  "--w-rjv-type-boolean-color": "var(--tag-orange-icon)",
-                  "--w-rjv-type-int-color": "var(--tag-orange-icon)",
-                  "--w-rjv-type-float-color": "var(--tag-orange-icon)",
-                  "--w-rjv-type-bigint-color": "var(--tag-orange-icon)",
-                  "--w-rjv-key-number": "var(--contrast-fg-secondary)",
-                  "--w-rjv-arrow-color": "var(--contrast-fg-secondary)",
-                  "--w-rjv-copied-color": "var(--contrast-fg-secondary)",
-                  "--w-rjv-copied-success-color": "var(--contrast-fg-primary)",
-                  "--w-rjv-colon-color": "var(--contrast-fg-primary)",
-                  "--w-rjv-ellipsis-color": "var(--contrast-fg-secondary)"
-                },
-                collapsed: 1,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    JsonView.Quote,
-                    {
-                      render: () => /* @__PURE__ */ jsxRuntime.jsx("span", {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    JsonView.Null,
-                    {
-                      render: () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-tag-red-icon", children: "null" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    JsonView.Undefined,
-                    {
-                      render: () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-tag-blue-icon", children: "undefined" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    JsonView.CountInfo,
-                    {
-                      render: (_props, { value }) => {
-                        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-contrast-fg-secondary ml-2", children: t2("general.items", {
-                          count: Object.keys(
-                            value
-                          ).length
-                        }) });
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(JsonView.Arrow, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleDownMini, { className: "text-ui-contrast-fg-secondary -ml-[0.5px]" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(JsonView.Colon, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: ":" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    JsonView.Copied,
-                    {
-                      render: ({ style }, { value }) => {
-                        return /* @__PURE__ */ jsxRuntime.jsx(
-                          Copied,
-                          {
-                            style,
-                            value
-                          }
-                        );
-                      }
-                    }
-                  )
-                ]
-              }
-            )
+            type: "button",
+            onClick: insertParagraph,
+            className: "flex items-center gap-2 w-full text-left px-3 py-2 hover:bg-ui-bg-base-hover text-sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-fg-muted", children: "¶" }),
+              "Paragraph"
+            ]
           }
-        ) }) })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: insertDivider,
+            className: "flex items-center gap-2 w-full text-left px-3 py-2 hover:bg-ui-bg-base-hover text-sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-fg-muted", children: "―" }),
+              "Divider"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: insertButton,
+            className: "flex items-center gap-2 w-full text-left px-3 py-2 hover:bg-ui-bg-base-hover text-sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-fg-muted", children: "▢" }),
+              "Button"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px bg-ui-border-base mx-1" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: formatBold,
+        className: "px-2 py-1 hover:bg-ui-bg-base-hover rounded text-sm font-bold",
+        title: "Pogrubienie",
+        children: "B"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: formatItalic,
+        className: "px-2 py-1 hover:bg-ui-bg-base-hover rounded text-sm italic",
+        title: "Kursywa",
+        children: "I"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px bg-ui-border-base mx-1" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onMouseDown: captureActiveField,
+          onClick: () => setShowVariables(!showVariables),
+          className: "px-2 py-1 hover:bg-ui-bg-base-hover rounded text-sm font-mono",
+          title: "Wstaw zmienną",
+          children: "{{ }}"
+        }
+      ),
+      showVariables && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-full left-0 mt-1 bg-ui-bg-base border border-ui-border-base rounded shadow-lg z-20 min-w-[220px] max-h-48 overflow-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1 text-xs text-ui-fg-muted border-b border-ui-border-base", children: "Dostępne zmienne" }),
+        AVAILABLE_VARIABLES.map((v) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => insertVariable(v),
+            className: "block w-full text-left px-3 py-2 hover:bg-ui-bg-base-hover text-sm font-mono",
+            children: `{{${v}}}`
+          },
+          v
+        ))
       ] })
     ] })
   ] });
-};
-const Copied = ({ style, value }) => {
-  const [copied, setCopied] = React.useState(false);
-  const handler = (e2) => {
-    e2.stopPropagation();
-    setCopied(true);
-    if (typeof value === "string") {
-      navigator.clipboard.writeText(value);
-    } else {
-      const json = JSON.stringify(value, null, 2);
-      navigator.clipboard.writeText(json);
-    }
-    setTimeout(() => {
-      setCopied(false);
-    }, 2e3);
+}
+const INSERT_PARAGRAPH_BLOCK_COMMAND = lexical.createCommand("INSERT_PARAGRAPH_BLOCK");
+const INSERT_DIVIDER_COMMAND = lexical.createCommand("INSERT_DIVIDER");
+const INSERT_BUTTON_COMMAND = lexical.createCommand("INSERT_BUTTON");
+const INSERT_VARIABLE_COMMAND = lexical.createCommand("INSERT_VARIABLE");
+function registerBlockCommands(editor) {
+  const unregisterParagraph = editor.registerCommand(
+    INSERT_PARAGRAPH_BLOCK_COMMAND,
+    () => {
+      const paragraphNode = lexical.$createParagraphNode();
+      lexical.$insertNodes([paragraphNode]);
+      paragraphNode.select();
+      return true;
+    },
+    lexical.COMMAND_PRIORITY_LOW
+  );
+  const unregisterDivider = editor.registerCommand(
+    INSERT_DIVIDER_COMMAND,
+    () => {
+      const dividerNode = $createDividerBlockNode();
+      lexical.$insertNodes([dividerNode]);
+      return true;
+    },
+    lexical.COMMAND_PRIORITY_LOW
+  );
+  const unregisterButton = editor.registerCommand(
+    INSERT_BUTTON_COMMAND,
+    () => {
+      const buttonNode = $createButtonBlockNode();
+      lexical.$insertNodes([buttonNode]);
+      return true;
+    },
+    lexical.COMMAND_PRIORITY_LOW
+  );
+  const unregisterVariable = editor.registerCommand(
+    INSERT_VARIABLE_COMMAND,
+    (variableName) => {
+      const variableNode = $createVariableNode(variableName);
+      lexical.$insertNodes([variableNode]);
+      return true;
+    },
+    lexical.COMMAND_PRIORITY_LOW
+  );
+  return () => {
+    unregisterParagraph();
+    unregisterDivider();
+    unregisterButton();
+    unregisterVariable();
   };
-  const styl = { whiteSpace: "nowrap", width: "20px" };
-  if (copied) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...style, ...styl }, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { className: "text-ui-contrast-fg-primary" }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...style, ...styl }, onClick: handler, children: /* @__PURE__ */ jsxRuntime.jsx(icons.SquareTwoStack, { className: "text-ui-contrast-fg-secondary" }) });
-};
-const MetadataSection = ({
-  data,
-  onOpen
-}) => {
-  const { t: t2 } = reactI18next.useTranslation();
-  if (!data) {
-    return null;
-  }
-  if (!("metadata" in data)) {
-    return null;
+}
+const BuilderBlocksExtension = lexical.defineExtension({
+  name: "@codee/builder-blocks",
+  nodes: () => [VariableNode, DividerBlockNode, ButtonBlockNode],
+  register: registerBlockCommands
+});
+const editorTheme = {
+  paragraph: "editor-paragraph mb-1",
+  text: {
+    bold: "font-bold",
+    italic: "italic",
+    underline: "underline"
   }
-  const numberOfKeys = data.metadata ? Object.keys(data.metadata).length : 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: t2("metadata.header") }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", rounded: "full", children: t2("metadata.numberOfKeys", {
-        count: numberOfKeys
-      }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.IconButton,
-      {
-        size: "small",
-        variant: "transparent",
-        className: "text-ui-fg-muted hover:text-ui-fg-subtle",
-        onClick: onOpen,
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpRightOnBox, {})
-      }
-    )
-  ] });
 };
-const SingleColumnPage = ({
-  children,
-  widgets,
-  /**
-   * Data of the page which is passed to Widgets, JSON view, and Metadata view.
-   */
-  data,
-  /**
-   * Whether the page should render an outlet for children routes. Defaults to true.
-   */
-  hasOutlet = true,
-  /**
-   * Whether to show JSON view of the data. Defaults to false.
-   */
-  showJSON,
-  /**
-   * Whether to show metadata view of the data. Defaults to false.
-   */
-  showMetadata
-}) => {
-  const { before, after } = widgets;
-  const widgetProps = { data };
-  if (showJSON && !data) {
-    if (process.env.NODE_ENV === "development") {
-      console.warn(
-        "`showJSON` is true but no data is provided. To display JSON, provide data prop."
-      );
-    }
-    showJSON = false;
-  }
-  if (showMetadata && !data) {
-    if (process.env.NODE_ENV === "development") {
-      console.warn(
-        "`showMetadata` is true but no data is provided. To display metadata, provide data prop."
-      );
-    }
-    showMetadata = false;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-3", children: [
-    before.map((Component, i2) => {
-      return /* @__PURE__ */ React.createElement(Component, { ...widgetProps, key: i2 });
-    }),
-    children,
-    after.map((Component, i2) => {
-      return /* @__PURE__ */ React.createElement(Component, { ...widgetProps, key: i2 });
-    }),
-    showMetadata && /* @__PURE__ */ jsxRuntime.jsx(MetadataSection, { data }),
-    showJSON && /* @__PURE__ */ jsxRuntime.jsx(JsonViewSection, { data }),
-    hasOutlet && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {})
+const BuilderEditorExtension = lexical.defineExtension({
+  name: "@codee/builder-editor",
+  namespace: "BuilderEditor",
+  theme: editorTheme,
+  dependencies: [
+    richText.RichTextExtension,
+    history.HistoryExtension,
+    BuilderBlocksExtension
+  ]
+});
+const BuilderPage = () => {
+  const [output, setOutput] = React.useState("");
+  const handleChange = React.useCallback((editorState) => {
+    editorState.read(() => {
+      const json = editorState.toJSON();
+      setOutput(JSON.stringify(json, null, 2));
+    });
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", className: "mb-6", children: "Builder - Template Editor (Extensions API)" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: "mb-4 text-ui-fg-subtle", children: "Edytor" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LexicalExtensionComposer.LexicalExtensionComposer,
+          {
+            extension: BuilderEditorExtension,
+            contentEditable: null,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-ui-border-base rounded-lg bg-white", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ToolbarPlugin,
+                {
+                  INSERT_PARAGRAPH_BLOCK_COMMAND,
+                  INSERT_DIVIDER_COMMAND,
+                  INSERT_BUTTON_COMMAND,
+                  INSERT_VARIABLE_COMMAND
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(EditorInner, { children: /* @__PURE__ */ jsxRuntime.jsx(LexicalContentEditable.ContentEditable, { className: "min-h-[400px] outline-none" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(LexicalOnChangePlugin.OnChangePlugin, { onChange: handleChange })
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: "mb-4 text-ui-fg-subtle", children: "Output (Lexical State)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-ui-border-base rounded-lg p-4 bg-ui-bg-subtle min-h-[400px] max-h-[600px] overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs font-mono whitespace-pre-wrap", children: output || "..." }) })
+      ] })
+    ] })
   ] });
 };
-const ListPage$4 = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SingleColumnPage,
-    {
-      widgets: {
-        before: [],
-        after: []
-      },
-      children: "Notifications"
-    }
-  );
-};
 const config$5 = adminSdk.defineRouteConfig({
-  label: "Notifications"
+  label: "Builder - Lexical",
+  icon: icons.PuzzleSolid
 });
 const NotificationsFullList = () => {
   const [pagination, setPagination] = React.useState({
@@ -10313,22 +10313,6 @@ const ListPage$2 = () => {
 const config$3 = adminSdk.defineRouteConfig({
   label: "Templates"
 });
-const ListPage$1 = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SingleColumnPage,
-    {
-      widgets: {
-        before: [],
-        after: []
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(NotificationsFullList, {})
-    }
-  );
-};
-const config$2 = adminSdk.defineRouteConfig({
-  label: "List",
-  icon: icons.ListBullet
-});
 const useOrders = (params = {}, options) => {
   const {
     limit = 100,
@@ -11033,10 +11017,26 @@ const PreviewTemplatePage = () => {
     }
   );
 };
-const config$1 = adminSdk.defineRouteConfig({
+const config$2 = adminSdk.defineRouteConfig({
   label: "Preview Template",
   icon: icons.ChatBubbleLeftRight
 });
+const ListPage$1 = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SingleColumnPage,
+    {
+      widgets: {
+        before: [],
+        after: []
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(NotificationsFullList, {})
+    }
+  );
+};
+const config$1 = adminSdk.defineRouteConfig({
+  label: "List",
+  icon: icons.ListBullet
+});
 const useAvailableTemplates = (params, options) => {
   const {
     limit = 100,
@@ -20258,14 +20258,14 @@ const widgetModule = { widgets: [
 ] };
 const routeModule = {
   routes: [
-    {
-      Component: BuilderPage,
-      path: "/builder-lexical"
-    },
     {
       Component: ListPage$4,
       path: "/mpn"
     },
+    {
+      Component: BuilderPage,
+      path: "/builder-lexical"
+    },
     {
       Component: ListPage$3,
       path: "/mpn/notifications"
@@ -20274,14 +20274,14 @@ const routeModule = {
       Component: ListPage$2,
       path: "/mpn/templates"
     },
-    {
-      Component: ListPage$1,
-      path: "/mpn/notifications/list"
-    },
     {
       Component: PreviewTemplatePage,
       path: "/mpn/notifications/render"
     },
+    {
+      Component: ListPage$1,
+      path: "/mpn/notifications/list"
+    },
     {
       Component: ListPage,
       path: "/mpn/templates/:id/blocks"
@@ -20291,13 +20291,13 @@ const routeModule = {
 const menuItemModule = {
   menuItems: [
     {
-      label: config$6.label,
-      icon: config$6.icon,
+      label: config$5.label,
+      icon: config$5.icon,
       path: "/builder-lexical",
       nested: void 0
     },
     {
-      label: config$5.label,
+      label: config$6.label,
       icon: void 0,
       path: "/mpn",
       nested: void 0
@@ -20308,12 +20308,6 @@ const menuItemModule = {
       path: "/mpn/notifications",
       nested: void 0
     },
-    {
-      label: config$2.label,
-      icon: config$2.icon,
-      path: "/mpn/notifications/list",
-      nested: void 0
-    },
     {
       label: config$3.label,
       icon: void 0,
@@ -20323,6 +20317,12 @@ const menuItemModule = {
     {
       label: config$1.label,
       icon: config$1.icon,
+      path: "/mpn/notifications/list",
+      nested: void 0
+    },
+    {
+      label: config$2.label,
+      icon: config$2.icon,
       path: "/mpn/notifications/render",
       nested: void 0
     },