@bikdotai/bik-component-library 0.0.823 → 0.0.824

package/dist/esm/editor/BikEditor.js

@@ -1,113 +1,123 @@
-import { jsxs as rt, jsx as U } from "react/jsx-runtime";
-import { getMarkRange as st } from "../node_modules/@tiptap/core/dist/index.js";
-import { useEditor as it, EditorContent as ct } from "@tiptap/react";
-import { forwardRef as at, useRef as a, useEffect as lt, useImperativeHandle as ut } from "react";
-import { BikEditorShell as dt } from "./BikEditor.styles.js";
-import { DEFAULT_FORMAT_STATE as N } from "./BikEditor.types.js";
-import { buildSectionedContent as j, normalizeHtml as i, extractActiveFormats as W, extractContent as $, extractBodyContent as mt, extractSectionContent as gt, findSectionEndPos as J, findSectionStartPos as ft, setSectionContentInEditor as S, insertInlineHtml as ht } from "./BikEditor.utils.js";
-import { buildExtensions as pt } from "./extensions/buildExtensions.js";
-import { LinkBubbleMenu as Ct } from "./floating/LinkBubbleMenu.js";
-function St(g) {
-  return Object.entries(g).map(
-    ([h, f]) => `${h.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`)}:${f}`
+import { jsxs as g, jsx as h } from "react/jsx-runtime";
+import { getMarkRange as St } from "../node_modules/@tiptap/core/dist/index.js";
+import { useEditor as kt, EditorContent as yt } from "@tiptap/react";
+import { forwardRef as Bt, useState as G, useRef as a, useEffect as bt, useImperativeHandle as xt } from "react";
+import { BodyCaption as K } from "../components/TypographyStyle.js";
+import { BikEditorShell as vt, BikJsonHeader as At, BikJsonError as Tt } from "./BikEditor.styles.js";
+import { DEFAULT_FORMAT_STATE as X } from "./BikEditor.types.js";
+import { buildJsonCodeBlockHtml as Et, buildSectionedContent as Y, normalizeHtml as i, extractActiveFormats as tt, extractContent as et, parseJson as p, getCodeBlockText as d, extractBodyContent as Rt, extractSectionContent as It, setCodeBlockText as b, findSectionEndPos as nt, findSectionStartPos as Mt, setSectionContentInEditor as T, insertInlineHtml as Lt } from "./BikEditor.utils.js";
+import { buildExtensions as Ot } from "./extensions/buildExtensions.js";
+import { LinkBubbleMenu as Jt } from "./floating/LinkBubbleMenu.js";
+import Ft from "../icons/BIK AI specific/WandSparkles.js";
+import Nt from "../icons/Actions/Formatting/Copy.js";
+function jt(y) {
+  return Object.entries(y).map(
+    ([x, S]) => `${x.replace(/([A-Z])/g, (k) => `-${k.toLowerCase()}`)}:${S}`
   ).join(";");
 }
-const kt = (g, h) => {
+const zt = (y, x) => {
   const {
-    initialContent: f,
-    sections: m,
-    features: k,
-    disabled: _,
-    maxCharacters: y,
-    shortcuts: Q,
-    sendShortcut: V,
+    initialContent: S,
+    sections: k,
+    features: B,
+    disabled: ot,
+    maxCharacters: E,
+    shortcuts: rt,
+    sendShortcut: st,
     mentions: l,
-    slashCommands: d,
-    link: Z,
-    onPaste: G,
-    onReady: x,
-    onChange: B,
-    onSend: p,
-    onFocus: A,
-    onBlur: b,
-    onSelectionChange: R,
-    minHeight: K,
-    maxHeight: X,
-    style: Y,
-    className: tt,
-    editorClassName: I,
-    editorStyle: E
-  } = g, et = m?.length ? j(
-    i(f ?? ""),
-    m.map((t) => ({ ...t, content: i(t.content) }))
-  ) : i(f ?? ""), C = a([]), v = a(!1), T = a(x);
-  T.current = x;
-  const L = a(B);
-  L.current = B;
-  const F = a(R);
-  F.current = R;
-  const M = a(N), O = a(A);
-  O.current = A;
-  const z = a(b);
-  z.current = b;
-  const w = a(p);
-  w.current = p;
-  const H = a(l?.agents ?? []);
-  H.current = l?.agents ?? [];
-  const P = a(l?.teams ?? []);
-  P.current = l?.teams ?? [];
-  const D = a(d?.items ?? []);
-  D.current = d?.items ?? [];
-  const o = it({
-    extensions: pt({
-      features: k,
-      placeholder: g.placeholder,
-      maxCharacters: y,
-      hasSections: (m?.length ?? 0) > 0,
+    slashCommands: C,
+    link: it,
+    onPaste: ct,
+    onReady: R,
+    onChange: I,
+    onSend: v,
+    onFocus: M,
+    onBlur: L,
+    onSelectionChange: O,
+    minHeight: at,
+    maxHeight: lt,
+    style: dt,
+    className: ut,
+    editorClassName: J,
+    editorStyle: F,
+    renderJsonError: N
+  } = y, m = !!B?.jsonMode, [u, j] = G(null), [mt, z] = G(!1), ft = m ? Et(S ?? "") : k?.length ? Y(
+    i(S ?? ""),
+    k.map((t) => ({ ...t, content: i(t.content) }))
+  ) : i(S ?? ""), A = a([]), H = a(!1), w = a(R);
+  w.current = R;
+  const P = a(I);
+  P.current = I;
+  const D = a(O);
+  D.current = O;
+  const q = a(X), U = a(M);
+  U.current = M;
+  const W = a(L);
+  W.current = L;
+  const $ = a(v);
+  $.current = v;
+  const V = a(l?.agents ?? []);
+  V.current = l?.agents ?? [];
+  const _ = a(l?.teams ?? []);
+  _.current = l?.teams ?? [];
+  const Q = a(C?.items ?? []);
+  Q.current = C?.items ?? [];
+  const n = kt({
+    extensions: Ot({
+      features: B,
+      placeholder: y.placeholder,
+      maxCharacters: E,
+      hasSections: (k?.length ?? 0) > 0,
       mentions: {
-        agents: l ? H : void 0,
-        teams: l ? P : void 0
+        agents: l ? V : void 0,
+        teams: l ? _ : void 0
       },
-      slashCommands: d ? D : void 0,
-      onPaste: G,
-      onSend: p ? (t) => w.current?.(t) : void 0,
-      sendShortcut: V,
-      shortcuts: Q,
+      slashCommands: C ? Q : void 0,
+      onPaste: ct,
+      onSend: v ? (t) => $.current?.(t) : void 0,
+      sendShortcut: st,
+      shortcuts: rt,
       onMentionSelected: l?.onSelect,
-      onSlashCommandSelected: d?.onSelect,
+      onSlashCommandSelected: C?.onSelect,
       renderMentionItem: l?.renderItem,
       renderMentionDropdown: l?.renderDropdown,
       removeMentionTriggerOnDismiss: l?.removeTriggerOnDismiss,
-      renderSlashCommandItem: d?.renderItem,
-      renderSlashCommandDropdown: d?.renderDropdown
+      renderSlashCommandItem: C?.renderItem,
+      renderSlashCommandDropdown: C?.renderDropdown
     }),
-    content: et,
-    editable: !_,
+    content: ft,
+    editable: !ot,
     immediatelyRender: !1,
     // SSR-safe — NEVER remove this
     editorProps: {
       attributes: {
-        ...I ? { class: I } : {},
-        ...E ? { style: St(E) } : {}
+        ...J ? { class: J } : {},
+        ...F ? { style: jt(F) } : {}
       }
     },
     onUpdate: ({ editor: t }) => {
-      L.current?.($(t));
+      if (P.current?.(et(t)), m) {
+        const e = p(d(t));
+        j(e.valid ? null : e);
+      }
     },
     onTransaction: ({ editor: t }) => {
-      const e = W(t), n = M.current;
-      (n.bold !== e.bold || n.italic !== e.italic || n.underline !== e.underline || n.strike !== e.strike || n.bulletList !== e.bulletList || n.orderedList !== e.orderedList || n.blockquote !== e.blockquote || n.codeBlock !== e.codeBlock || n.superscript !== e.superscript || n.subscript !== e.subscript || n.textAlign !== e.textAlign || n.fontFamily !== e.fontFamily || n.fontSize !== e.fontSize || n.color !== e.color || n.highlight !== e.highlight || n.link?.href !== e.link?.href) && (M.current = e, F.current?.(e));
+      const e = tt(t), o = q.current;
+      (o.bold !== e.bold || o.italic !== e.italic || o.underline !== e.underline || o.strike !== e.strike || o.bulletList !== e.bulletList || o.orderedList !== e.orderedList || o.blockquote !== e.blockquote || o.codeBlock !== e.codeBlock || o.superscript !== e.superscript || o.subscript !== e.subscript || o.textAlign !== e.textAlign || o.fontFamily !== e.fontFamily || o.fontSize !== e.fontSize || o.color !== e.color || o.highlight !== e.highlight || o.link?.href !== e.link?.href) && (q.current = e, D.current?.(e));
     },
-    onFocus: () => O.current?.(),
-    onBlur: () => z.current?.()
+    onFocus: () => U.current?.(),
+    onBlur: () => W.current?.()
   });
   function s(t) {
-    o ? t(o) : C.current.push(t);
+    n ? t(n) : A.current.push(t);
   }
-  return lt(() => {
-    o && (C.current.length > 0 && C.current.splice(0).forEach((e) => e(o)), v.current || (v.current = !0, T.current?.()));
-  }, [o]), ut(
-    h,
+  bt(() => {
+    if (n && (A.current.length > 0 && A.current.splice(0).forEach((e) => e(n)), H.current || (H.current = !0, w.current?.()), m)) {
+      const t = p(d(n));
+      j(t.valid ? null : t);
+    }
+  }, [n, m]), xt(
+    x,
     () => ({
       // ── Focus ────────────────────────────────────────────────────────
       focus: (t) => s((e) => e.commands.focus(t)),
@@ -116,29 +126,29 @@ const kt = (g, h) => {
       clearContent: () => s((t) => t.commands.clearContent(!0)),
       setContent: (t) => {
         const e = i(t);
-        s((n) => n.commands.setContent(e, { emitUpdate: !0 }));
+        s((o) => o.commands.setContent(e, { emitUpdate: !0 }));
       },
       insertContent: (t) => {
         const e = i(t);
-        s((n) => n.commands.insertContent(e));
+        s((o) => o.commands.insertContent(e));
       },
       insertInlineContent: (t) => {
-        s((e) => ht(e, t));
+        s((e) => Lt(e, t));
       },
       insertAtStart: (t) => {
         const e = i(t);
-        s((n) => n.commands.insertContentAt(1, e));
+        s((o) => o.commands.insertContentAt(1, e));
       },
       insertBlock: (t) => {
         const e = i(t);
         s(
-          (n) => n.commands.insertContentAt(n.state.doc.content.size, e)
+          (o) => o.commands.insertContentAt(o.state.doc.content.size, e)
         );
       },
       appendInline: (t) => {
         const e = i(t);
         s(
-          (n) => n.commands.insertContentAt(n.state.doc.content.size - 1, e)
+          (o) => o.commands.insertContentAt(o.state.doc.content.size - 1, e)
         );
       },
       // Backwards-compatible aliases
@@ -148,171 +158,227 @@ const kt = (g, h) => {
       appendContent(t) {
         this.appendInline(t);
       },
-      getContent: () => o ? $(o) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
-      getJSON: () => o?.getJSON() ?? null,
+      getContent: () => n ? et(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getJSON: () => n?.getJSON() ?? null,
       getMentions: () => {
         const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
-        return o ? (o.state.doc.descendants((n) => {
-          n.type.name === "mentionAgent" && n.attrs.id != null ? t.add(String(n.attrs.id)) : n.type.name === "mentionTeam" && n.attrs.id != null && e.add(String(n.attrs.id));
+        return n ? (n.state.doc.descendants((o) => {
+          o.type.name === "mentionAgent" && o.attrs.id != null ? t.add(String(o.attrs.id)) : o.type.name === "mentionTeam" && o.attrs.id != null && e.add(String(o.attrs.id));
         }), { agentIds: Array.from(t), teamIds: Array.from(e) }) : { agentIds: [], teamIds: [] };
       },
       // ── Selection ────────────────────────────────────────────────────
       getCursorPosition: () => {
-        if (!o) return { from: 0, to: 0 };
-        const { from: t, to: e } = o.state.selection;
+        if (!n) return { from: 0, to: 0 };
+        const { from: t, to: e } = n.state.selection;
         return { from: t, to: e };
       },
       insertAtPosition: (t, e) => {
-        const n = i(e);
-        s((r) => r.commands.insertContentAt(t, n));
+        const o = i(e);
+        s((r) => r.commands.insertContentAt(t, o));
       },
       getSelectedText: () => {
-        if (!o) return "";
-        const { state: t } = o, { from: e, to: n, empty: r } = t.selection;
+        if (!n) return "";
+        const { state: t } = n, { from: e, to: o, empty: r } = t.selection;
         if (!r)
-          return t.doc.textBetween(e, n, " ");
+          return t.doc.textBetween(e, o, " ");
         const c = t.schema.marks.link;
         if (c) {
-          const u = st(t.doc.resolve(e), c);
-          if (u)
-            return t.doc.textBetween(u.from, u.to, " ");
+          const f = St(t.doc.resolve(e), c);
+          if (f)
+            return t.doc.textBetween(f.from, f.to, " ");
         }
         return "";
       },
       // ── Character count ───────────────────────────────────────────────
       getCharacterCount: () => ({
-        count: o?.storage.characterCount?.characters?.() ?? o?.getText().length ?? 0,
-        limit: y ?? null
+        count: n?.storage.characterCount?.characters?.() ?? n?.getText().length ?? 0,
+        limit: E ?? null
       }),
       // ── Sections ─────────────────────────────────────────────────────
-      getSectionContent: (t) => o ? gt(o, t) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getSectionContent: (t) => n ? It(n, t) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       setSectionContent: (t, e) => {
-        const n = i(e);
-        s((r) => S(r, t, n));
+        const o = i(e);
+        s((r) => T(r, t, o));
       },
       focusSection: (t) => {
         s((e) => {
           if (t === "body") {
             let r = e.state.doc.content.size - 1;
-            e.state.doc.descendants((c, u) => (c.type.name === "sectionDivider" && r === e.state.doc.content.size - 1 && (r = u - 1), r === e.state.doc.content.size - 1)), r < 1 && (r = 1), e.chain().focus().setTextSelection(r).run();
+            e.state.doc.descendants((c, f) => (c.type.name === "sectionDivider" && r === e.state.doc.content.size - 1 && (r = f - 1), r === e.state.doc.content.size - 1)), r < 1 && (r = 1), e.chain().focus().setTextSelection(r).run();
             return;
           }
-          let n = -1;
+          let o = -1;
           e.state.doc.descendants((r, c) => {
-            if (n !== -1) return !1;
-            r.type.name === "sectionDivider" && r.attrs.sectionId === t && (n = c + r.nodeSize + 1);
-          }), n !== -1 && e.chain().focus().setTextSelection(n).run();
+            if (o !== -1) return !1;
+            r.type.name === "sectionDivider" && r.attrs.sectionId === t && (o = c + r.nodeSize + 1);
+          }), o !== -1 && e.chain().focus().setTextSelection(o).run();
         });
       },
       clearSection: (t) => {
-        s((e) => S(e, t, "<p></p>"));
+        s((e) => T(e, t, "<p></p>"));
       },
       // ── Convenience body shorthands ───────────────────────────────────
-      getBodyContent: () => o ? mt(o) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getBodyContent: () => n ? Rt(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       setBodyContent: (t) => {
         const e = i(t);
-        s((n) => S(n, "body", e));
+        s((o) => T(o, "body", e));
       },
       setBodyAndSections: (t, e) => {
-        const n = j(
+        const o = Y(
           i(t),
           e.map((r) => ({
             id: r.id,
             content: i(r.content)
           }))
         );
-        s((r) => r.commands.setContent(n, { emitUpdate: !0 }));
+        s((r) => r.commands.setContent(o, { emitUpdate: !0 }));
       },
       appendBodyContent: (t) => {
         const e = i(t);
-        s((n) => {
-          const r = J(n, "body");
-          n.commands.insertContentAt(r - 1, e, {
+        s((o) => {
+          const r = nt(o, "body");
+          o.commands.insertContentAt(r - 1, e, {
             parseOptions: { preserveWhitespace: !0 }
           });
         });
       },
       insertAtSectionStart: (t, e) => {
-        const n = i(e);
+        const o = i(e);
         s((r) => {
-          const c = ft(r, t);
-          c !== -1 && r.commands.insertContentAt(c, n, {
+          const c = Mt(r, t);
+          c !== -1 && r.commands.insertContentAt(c, o, {
             parseOptions: { preserveWhitespace: !0 }
           });
         });
       },
       insertAtSectionEnd: (t, e) => {
-        const n = i(e);
+        const o = i(e);
         s((r) => {
-          const c = J(r, t);
-          r.commands.insertContentAt(c, n, {
+          const c = nt(r, t);
+          r.commands.insertContentAt(c, o, {
             parseOptions: { preserveWhitespace: !0 }
           });
         });
       },
       // ── Formats & actions ─────────────────────────────────────────────
-      getActiveFormats: () => o ? W(o) : N,
+      getActiveFormats: () => n ? tt(n) : X,
       actions: {
-        toggleBold: () => o?.chain().focus().toggleBold().run(),
-        toggleItalic: () => o?.chain().focus().toggleItalic().run(),
-        toggleUnderline: () => o?.chain().focus().toggleUnderline().run(),
-        toggleStrike: () => o?.chain().focus().toggleStrike().run(),
-        toggleBulletList: () => o?.chain().focus().toggleBulletList().run(),
-        toggleOrderedList: () => o?.chain().focus().toggleOrderedList().run(),
-        toggleBlockquote: () => o?.chain().focus().toggleBlockquote().run(),
-        toggleCodeBlock: () => o?.chain().focus().toggleCodeBlock().run(),
-        setTextAlign: (t) => o?.chain().focus().setTextAlign(t).run(),
-        setFontFamily: (t) => o?.chain().focus().setFontFamily(t).run(),
-        setFontSize: (t) => o?.chain().focus().setFontSize(t).run(),
-        setColor: (t) => o?.chain().focus().setColor(t).run(),
-        setHighlight: (t) => o?.chain().focus().toggleHighlight({ color: t }).run(),
-        unsetColor: () => o?.chain().focus().unsetColor().run(),
-        unsetHighlight: () => o?.chain().focus().unsetHighlight().run(),
+        toggleBold: () => n?.chain().focus().toggleBold().run(),
+        toggleItalic: () => n?.chain().focus().toggleItalic().run(),
+        toggleUnderline: () => n?.chain().focus().toggleUnderline().run(),
+        toggleStrike: () => n?.chain().focus().toggleStrike().run(),
+        toggleBulletList: () => n?.chain().focus().toggleBulletList().run(),
+        toggleOrderedList: () => n?.chain().focus().toggleOrderedList().run(),
+        toggleBlockquote: () => n?.chain().focus().toggleBlockquote().run(),
+        toggleCodeBlock: () => n?.chain().focus().toggleCodeBlock().run(),
+        setTextAlign: (t) => n?.chain().focus().setTextAlign(t).run(),
+        setFontFamily: (t) => n?.chain().focus().setFontFamily(t).run(),
+        setFontSize: (t) => n?.chain().focus().setFontSize(t).run(),
+        setColor: (t) => n?.chain().focus().setColor(t).run(),
+        setHighlight: (t) => n?.chain().focus().toggleHighlight({ color: t }).run(),
+        unsetColor: () => n?.chain().focus().unsetColor().run(),
+        unsetHighlight: () => n?.chain().focus().unsetHighlight().run(),
         setLink: (t, e) => {
-          o && (e !== void 0 ? o.chain().focus().extendMarkRange("link").command(({ tr: n, state: r }) => {
-            const { from: c, to: u } = n.selection, q = r.schema.marks.link;
-            if (!q) return !1;
-            const nt = r.schema.text(e, [
-              q.create({ href: t })
-            ]), ot = r.schema.text(" ");
-            return n.replaceWith(c, u, [nt, ot]), !0;
-          }).run() : o.chain().focus().extendMarkRange("link").setLink({ href: t }).insertContent(" ").run());
+          n && (e !== void 0 ? n.chain().focus().extendMarkRange("link").command(({ tr: o, state: r }) => {
+            const { from: c, to: f } = o.selection, Z = r.schema.marks.link;
+            if (!Z) return !1;
+            const pt = r.schema.text(e, [
+              Z.create({ href: t })
+            ]), Ct = r.schema.text(" ");
+            return o.replaceWith(c, f, [pt, Ct]), !0;
+          }).run() : n.chain().focus().extendMarkRange("link").setLink({ href: t }).insertContent(" ").run());
         },
-        updateLink: (t) => o?.chain().focus().extendMarkRange("link").setLink({ href: t }).run(),
-        removeLink: () => o?.chain().focus().extendMarkRange("link").unsetLink().run(),
-        insertEmoji: (t) => o?.chain().focus().insertContent(t).run(),
-        insertVariable: (t) => o?.chain().focus().insertContent(`{{${t}}}`).run(),
-        insertHtml: (t) => o?.commands.insertContent(i(t)),
-        undo: () => o?.chain().focus().undo().run(),
-        redo: () => o?.chain().focus().redo().run(),
-        canUndo: () => o?.can().undo() ?? !1,
-        canRedo: () => o?.can().redo() ?? !1,
-        toggleSuperscript: () => o?.chain().focus().toggleSuperscript().run(),
-        toggleSubscript: () => o?.chain().focus().toggleSubscript().run(),
-        insertImage: (t) => o?.chain().focus().setImage({ src: t }).run()
-      }
+        updateLink: (t) => n?.chain().focus().extendMarkRange("link").setLink({ href: t }).run(),
+        removeLink: () => n?.chain().focus().extendMarkRange("link").unsetLink().run(),
+        insertEmoji: (t) => n?.chain().focus().insertContent(t).run(),
+        insertVariable: (t) => n?.chain().focus().insertContent(`{{${t}}}`).run(),
+        insertHtml: (t) => n?.commands.insertContent(i(t)),
+        undo: () => n?.chain().focus().undo().run(),
+        redo: () => n?.chain().focus().redo().run(),
+        canUndo: () => n?.can().undo() ?? !1,
+        canRedo: () => n?.can().redo() ?? !1,
+        toggleSuperscript: () => n?.chain().focus().toggleSuperscript().run(),
+        toggleSubscript: () => n?.chain().focus().toggleSubscript().run(),
+        insertImage: (t) => n?.chain().focus().setImage({ src: t }).run()
+      },
+      // ── JSON body ─────────────────────────────────────────────────────
+      json: B?.jsonMode ? {
+        getText: () => n ? d(n) : "",
+        setText: (t) => s((e) => b(e, t)),
+        parse: () => p(n ? d(n) : ""),
+        isValid: () => p(n ? d(n) : "").valid,
+        format: (t = 2) => s((e) => {
+          const { valid: o, value: r } = p(d(e));
+          !o || r === null || b(e, JSON.stringify(r, null, t));
+        }),
+        minify: () => s((t) => {
+          const { valid: e, value: o } = p(d(t));
+          !e || o === null || b(t, JSON.stringify(o));
+        })
+      } : void 0
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [o]
-  ), o ? /* @__PURE__ */ rt(
-    dt,
+    [n]
+  );
+  const gt = () => {
+    if (!n) return;
+    const { valid: t, value: e } = p(d(n));
+    !t || e === null || b(n, JSON.stringify(e, null, 2));
+  }, ht = () => {
+    n && (navigator.clipboard?.writeText(d(n)), z(!0), setTimeout(() => z(!1), 1500));
+  };
+  return n ? /* @__PURE__ */ g(
+    vt,
     {
-      minHeight: K,
-      maxHeight: X,
-      tightParagraphs: !k?.richPaste,
-      style: Y,
-      className: tt,
+      minHeight: at,
+      maxHeight: lt,
+      tightParagraphs: !B?.richPaste,
+      jsonMode: m,
+      style: dt,
+      className: ut,
       children: [
-        /* @__PURE__ */ U(ct, { editor: o }),
-        /* @__PURE__ */ U(Ct, { editor: o, renderLinkTooltip: Z?.renderTooltip })
+        m && /* @__PURE__ */ g(At, { children: [
+          /* @__PURE__ */ h("span", { className: "bik-json-header-label", children: "JSON" }),
+          /* @__PURE__ */ g("div", { className: "bik-json-header-actions", children: [
+            /* @__PURE__ */ g(
+              "button",
+              {
+                type: "button",
+                onClick: gt,
+                disabled: !!u,
+                title: "Format JSON",
+                children: [
+                  /* @__PURE__ */ h(Ft, { size: 16 }),
+                  /* @__PURE__ */ h(K, { children: "Beautify" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ g("button", { type: "button", onClick: ht, title: "Copy JSON", children: [
+              /* @__PURE__ */ h(Nt, { size: 16 }),
+              mt && /* @__PURE__ */ h(K, { children: "Copied" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ h(yt, { editor: n }),
+        /* @__PURE__ */ h(Jt, { editor: n, renderLinkTooltip: it?.renderTooltip }),
+        m && u ? N ? N(u) : /* @__PURE__ */ g(Tt, { children: [
+          u.line != null && /* @__PURE__ */ g("strong", { children: [
+            "Line ",
+            u.line,
+            u.column != null ? `, column ${u.column}` : "",
+            ":",
+            " "
+          ] }),
+          u.error
+        ] }) : null
       ]
     }
   ) : null;
-}, yt = at(
-  kt
+}, Ht = Bt(
+  zt
 );
-yt.displayName = "BikEditor";
+Ht.displayName = "BikEditor";
 export {
-  yt as BikEditor
+  Ht as BikEditor
 };
 //# sourceMappingURL=BikEditor.js.map