@code0-tech/pictor 0.5.0 → 0.5.1

package/dist/components/editor/Editor.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { Code0Component } from '../../utils';
 import { ValidationProps } from '../form';
 import { Extension } from '@uiw/react-codemirror';
-import { StreamLanguage } from '@codemirror/language';
+import { StreamLanguage, TagStyle } from '@codemirror/language';
 import { CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
 export type EditorTokenizer = (content: string) => string | null;
@@ -24,6 +24,8 @@ export interface EditorInputProps extends Omit<Code0Component<HTMLDivElement>, '
     readonly?: boolean;
     showTooltips?: boolean;
     showValidation?: boolean;
+    formatter?: (value: string) => Promise<string>;
     basicSetup?: BasicSetupOptions;
+    tokenStyles?: TagStyle[];
 }
 export declare const Editor: React.FC<EditorInputProps>;

package/dist/components/editor/Editor.js

@@ -1,337 +1,325 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import m, { isValidElement as ce } from "react";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import m, { isValidElement as me } from "react";
 import { createPortal as K } from "react-dom";
 import "../../utils/contextStore.js";
-import { hashToColor as b, mergeCode0Props as ue } from "../../utils/utils.js";
-import de, { Prec as _, keymap as J, ViewPlugin as me, RangeSetBuilder as he, Decoration as F, EditorView as fe, WidgetType as ge } from "@uiw/react-codemirror";
-import { json as pe, jsonParseLinter as ye } from "@codemirror/lang-json";
+import { hashToColor as w, mergeCode0Props as he } from "../../utils/utils.js";
+import fe, { Prec as _, keymap as J, ViewPlugin as ge, RangeSetBuilder as pe, Decoration as F, EditorView as ye, WidgetType as be } from "@uiw/react-codemirror";
+import { json as ve, jsonParseLinter as Se } from "@codemirror/lang-json";
 import { syntaxTree as L } from "@codemirror/language";
-import { linter as be } from "@codemirror/lint";
-import ve from "../../node_modules/prettier/standalone.js";
-import we from "../../node_modules/prettier/plugins/babel.js";
-import Se from "../../node_modules/prettier/plugins/estree.js";
-import { createTheme as Ce } from "@uiw/codemirror-themes";
-import { tags as v, getStyleTags as Te } from "../../node_modules/@lezer/highlight/dist/index.js";
+import { linter as we } from "@codemirror/lint";
+import Ce from "../../node_modules/prettier/standalone.js";
+import Te from "../../node_modules/prettier/plugins/babel.js";
+import xe from "../../node_modules/prettier/plugins/estree.js";
+import { createTheme as Ae } from "@uiw/codemirror-themes";
+import { getStyleTags as ke, tags as C } from "../../node_modules/@lezer/highlight/dist/index.js";
 import '../../assets/components/editor/Editor.styles.css';/* empty css                   */
-import { Badge as y } from "../badge/Badge.js";
-import { IconExclamationCircle as Ae, IconAlertTriangle as xe, IconAlertSquareRounded as ke, IconInfoCircle as Ee, IconSpace as ze, IconArrowBarToRight as Pe, IconCornerDownLeft as je } from "@tabler/icons-react";
+import { Badge as b } from "../badge/Badge.js";
+import { IconExclamationCircle as ze, IconAlertTriangle as je, IconAlertSquareRounded as Pe, IconInfoCircle as Ee, IconSpace as Ve, IconArrowBarToRight as Ne, IconCornerDownLeft as Ie } from "@tabler/icons-react";
 import { Text as a } from "../text/Text.js";
-import { Flex as k } from "../flex/Flex.js";
-import { Tooltip as E, TooltipTrigger as z, TooltipPortal as P, TooltipContent as j, TooltipArrow as V } from "../tooltip/Tooltip.js";
-import { ScrollArea as Ve, ScrollAreaViewport as Ne, ScrollAreaScrollbar as G, ScrollAreaThumb as Q } from "../scroll-area/ScrollArea.js";
-import { autocompletion as Ie, acceptCompletion as Re, startCompletion as N } from "@codemirror/autocomplete";
-function Be(i, r, h) {
-  return (r = Me(r)) in i ? Object.defineProperty(i, r, { value: h, enumerable: !0, configurable: !0, writable: !0 }) : i[r] = h, i;
+import { Flex as x } from "../flex/Flex.js";
+import { Tooltip as A, TooltipTrigger as k, TooltipPortal as z, TooltipContent as j, TooltipArrow as P } from "../tooltip/Tooltip.js";
+import { ScrollArea as Re, ScrollAreaViewport as Me, ScrollAreaScrollbar as G, ScrollAreaThumb as Q } from "../scroll-area/ScrollArea.js";
+import { autocompletion as Be, acceptCompletion as Fe, startCompletion as E } from "@codemirror/autocomplete";
+function Oe(i, t, f) {
+  return (t = qe(t)) in i ? Object.defineProperty(i, t, { value: f, enumerable: !0, configurable: !0, writable: !0 }) : i[t] = f, i;
 }
-function Me(i) {
-  var r = qe(i, "string");
-  return typeof r == "symbol" ? r : r + "";
+function qe(i) {
+  var t = We(i, "string");
+  return typeof t == "symbol" ? t : t + "";
 }
-function qe(i, r) {
+function We(i, t) {
   if (typeof i != "object" || !i) return i;
-  var h = i[Symbol.toPrimitive];
-  if (h !== void 0) {
-    var g = h.call(i, r);
-    if (typeof g != "object") return g;
+  var f = i[Symbol.toPrimitive];
+  if (f !== void 0) {
+    var p = f.call(i, t);
+    if (typeof p != "object") return p;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (r === "string" ? String : Number)(i);
+  return (t === "string" ? String : Number)(i);
 }
-class X extends ge {
-  constructor(r, h) {
-    super(), this.type = r, this.rawValue = h;
+class X extends be {
+  constructor(t, f) {
+    super(), this.type = t, this.rawValue = f;
   }
   toDOM() {
-    const r = document.createElement("span");
-    return r.className = "cm-react-anchor", r.dataset.type = this.type, r.dataset.value = this.rawValue, r.contentEditable = "false", r.style.pointerEvents = "none", r.style.verticalAlign = "middle", r.style.display = "inline-block", r;
+    const t = document.createElement("span");
+    return t.className = "cm-react-anchor", t.dataset.type = this.type, t.dataset.value = this.rawValue, t.contentEditable = "false", t.style.pointerEvents = "none", t.style.verticalAlign = "middle", t.style.display = "inline-block", t;
   }
   ignoreEvent() {
     return !0;
   }
-  eq(r) {
-    return r.type === this.type && r.rawValue === this.rawValue;
+  eq(t) {
+    return t.type === this.type && t.rawValue === this.rawValue;
   }
 }
-const Fe = Ce({
-  theme: "light",
-  settings: {
-    background: "transparent",
-    backgroundImage: "",
-    foreground: "rgba(255,255,255, 0.75)",
-    caret: "gray",
-    selection: "rgba(112,179,255,0.25)",
-    selectionMatch: "rgba(112,179,255,0.1)",
-    fontSize: "0.8rem",
-    gutterBackground: "transparent",
-    gutterForeground: "rgba(255,255,255, 0.5)",
-    gutterBorder: "transparent",
-    gutterActiveForeground: "rgba(255,255,255, 1)",
-    lineHighlight: "rgba(255,255,255, 0.1)"
-  },
-  styles: [{
-    tag: v.squareBracket,
-    color: b("squareBracket")
-  }, {
-    tag: v.bracket,
-    color: b("bracket")
-  }, {
-    tag: v.string,
-    color: b("Text")
-  }, {
-    tag: v.bool,
-    color: b("Boolean")
-  }, {
-    tag: v.number,
-    color: b("Number")
-  }]
-}), Oe = (i) => ce(i) || typeof i == "string" || typeof i == "number" || Array.isArray(i), at = (i) => {
+const De = (i) => me(i) || typeof i == "string" || typeof i == "number" || Array.isArray(i), ur = (i) => {
   const {
-    language: r,
-    tokenizer: h,
-    tokenHighlights: g,
-    suggestions: w,
-    onChange: O,
-    extensions: W = [],
-    initialValue: S,
-    formValidation: Y,
-    disabled: I,
-    showTooltips: Z = !0,
-    showValidation: $ = !0,
-    readonly: U,
-    basicSetup: ee,
+    language: t,
+    tokenizer: f,
+    tokenHighlights: p,
+    tokenStyles: O = [],
+    suggestions: V,
+    onChange: q,
+    extensions: Y = [],
+    formatter: W,
+    initialValue: v,
+    formValidation: Z,
+    disabled: N,
+    showTooltips: $ = !0,
+    showValidation: U = !0,
+    readonly: ee,
+    basicSetup: re,
     customSuggestionComponent: D = !1,
     ...te
-  } = i, [re, R] = m.useState(""), B = m.useRef(null), [oe, ne] = m.useState(/* @__PURE__ */ new Map()), [c, ie] = m.useState([]), [f, p] = m.useState(null), C = m.useRef(null);
-  r === "json" && m.useEffect(() => {
+  } = i, [oe, I] = m.useState(), R = m.useRef(null), [ne, ie] = m.useState(/* @__PURE__ */ new Map()), [u, se] = m.useState([]), [T, le] = m.useState(null), [g, y] = m.useState(null), H = m.useRef(null);
+  m.useEffect(() => {
     (async () => {
       try {
-        const e = await ve.format(JSON.stringify(S) ?? "", {
-          parser: r,
-          plugins: [we, Se],
+        const e = W ? await W(v) : t === "json" ? await Ce.format(JSON.stringify(v), {
+          parser: "json",
+          plugins: [Te, xe],
           printWidth: 1
-        });
-        R(e);
+        }) : v;
+        I(e);
       } catch {
-        R(JSON.stringify(S) ?? "");
+        I(t == "json" ? JSON.stringify(v) : v);
       }
     })();
-  }, [S]);
-  const se = m.useMemo(() => {
-    const e = [...W];
-    if (w) {
-      const o = (l) => {
-        const u = w(l);
-        if (u && Oe(u)) {
-          const d = l.view?.coordsAtPos(l.pos);
-          return d && p({
-            component: u,
+  }, []);
+  const ae = m.useMemo(() => {
+    const e = [...Y];
+    if (V) {
+      const n = (o) => {
+        const c = V(o);
+        if (c && De(c)) {
+          const l = o.view?.coordsAtPos(o.pos);
+          return l && y({
+            component: c,
             position: {
-              top: d.bottom,
-              left: d.left
+              top: l.bottom,
+              left: l.left
             }
           }), null;
         }
-        return p(null), u;
+        return y(null), c;
       };
-      e.push(Ie({
+      e.push(Be({
         ...D ? {
-          override: [o]
+          override: [n]
         } : {
-          override: [w]
+          override: [V]
         }
       })), e.push(_.highest(J.of([{
         key: "Tab",
-        run: Re
+        run: Fe
       }]))), D && e.push(_.highest(J.of([{
         key: "ArrowUp",
-        run: (l) => (f || N(l), !0)
+        run: (o) => (g || E(o), !0)
       }, {
         key: "ArrowDown",
-        run: (l) => f ? (B?.current?.querySelector("[tabindex]")?.focus(), !0) : (N(l), !0)
+        run: (o) => g ? (R?.current?.querySelector("[tabindex]")?.focus(), !0) : (E(o), !0)
       }])));
     }
-    r === "json" ? (e.push(pe()), e.push(be(ye(), {
-      markerFilter: (o) => (ie(o), [])
-    }))) : r && e.push(r);
-    const n = me.fromClass(class {
-      constructor(o) {
-        Be(this, "decorations", void 0), this.decorations = this.build(o);
+    t === "json" ? (e.push(ve()), e.push(we(Se(), {
+      markerFilter: (n) => (se(n), [])
+    }))) : t && e.push(t);
+    const d = ge.fromClass(class {
+      constructor(n) {
+        Oe(this, "decorations", void 0), this.decorations = this.build(n);
       }
-      update(o) {
-        (o.docChanged || o.viewportChanged) && (this.decorations = this.build(o.view));
+      update(n) {
+        (n.docChanged || n.viewportChanged) && (this.decorations = this.build(n.view));
       }
-      build(o) {
-        const l = new he(), u = Object.keys(g || {});
-        return L(o.state).iterate({
-          enter: (d) => {
-            const A = o.state.doc.sliceString(d.from, d.to);
-            if (A.includes(`
+      build(n) {
+        const o = new pe(), c = Object.keys(p || {});
+        return L(n.state).iterate({
+          enter: (l) => {
+            const h = n.state.doc.sliceString(l.from, l.to);
+            if (h.includes(`
 `)) return;
-            const q = h?.(A), ae = Te(d)?.tags.map((x) => "name" in x ? x.name : void 0), H = u.find((x) => ae?.includes(x));
-            H && !q ? l.add(d.from, d.to, F.replace({
-              widget: new X(H, A),
+            const M = f?.(h), de = ke(l)?.tags.map((S) => "name" in S ? S.name : void 0), B = c.find((S) => de?.includes(S));
+            B && !M ? p?.[B]({
+              content: h
+            }) && o.add(l.from, l.to, F.replace({
+              widget: new X(B, h),
               point: !0
-            })) : q && l.add(d.from, d.to, F.replace({
-              widget: new X(q, A),
+            })) : M && o.add(l.from, l.to, F.replace({
+              widget: new X(M, h),
               point: !0
             }));
           }
-        }), l.finish();
+        }), o.finish();
       }
     }, {
-      decorations: (o) => o.decorations
+      decorations: (n) => n.decorations
     });
-    return e.push(n), e.push(fe.atomicRanges.of((o) => o.plugin(n)?.decorations || F.none)), e;
-  }, [r, h, g, W, w, B.current]), [T, le] = m.useState(null), M = m.useCallback((e) => {
+    return e.push(d), e.push(ye.atomicRanges.of((n) => n.plugin(d)?.decorations || F.none)), e;
+  }, [R]), ce = m.useCallback((e) => {
     if (e.docChanged || e.viewportChanged || e.selectionSet) {
       if (e.view) {
         const {
-          from: n,
-          to: o
+          from: o,
+          to: c
         } = e.state?.selection?.main ?? {
           from: 0,
           to: 0
         };
         let l = 0;
         L(e.state).iterate({
-          from: n,
-          to: o,
-          enter: (u) => {
-            u.from >= n && u.to <= o && l++;
+          from: o,
+          to: c,
+          enter: (h) => {
+            h.from >= o && h.to <= c && l++;
           }
-        }), e.selectionSet && l < 2 ? (n === o && n !== T?.from ? p(null) : n === o && n === T?.from && n != 0 ? p((u) => u) : n === o && n === T?.from && n == 0 && p(null), N(e.view)) : e.selectionSet && l >= 2 && p(null), le({
-          from: n,
-          to: o
+        }), e.selectionSet && l < 2 ? (o === c && o !== T?.from ? y(null) : o === c && o === T?.from && o != 0 ? y((h) => h) : o === c && o === T?.from && o == 0 && y(null), E(e.view)) : e.selectionSet && l >= 2 && y(null), le({
+          from: o,
+          to: c
         });
-      } else e.selectionSet && (p(null), N(e.view));
-      window.requestAnimationFrame(() => {
-        const n = C.current?.querySelectorAll(".cm-react-anchor"), o = /* @__PURE__ */ new Map();
-        n?.forEach((l) => {
-          o.set(l, {
-            type: l.dataset.type,
-            value: l.dataset.value
-          });
-        }), ne(o);
-      });
-    }
-  }, [T]);
-  return m.useEffect(() => {
-    if (C.current) {
-      const e = window.setTimeout(() => {
-        const n = new CustomEvent("scroll");
-        C.current?.dispatchEvent(n), M({
-          docChanged: !0,
-          viewportChanged: !0,
-          selectionSet: !1
+      } else e.selectionSet && (y(null), E(e.view));
+      const d = H.current?.querySelectorAll(".cm-react-anchor"), n = /* @__PURE__ */ new Map();
+      d?.forEach((o) => {
+        n.set(o, {
+          type: o.dataset.type,
+          value: o.dataset.value
         });
-      }, 50);
-      return () => clearTimeout(e);
+      }), ie(n);
     }
-    return () => {
-    };
-  }, [M]), /* @__PURE__ */ s(Ve, { h: "100%", type: "scroll", children: [
-    $ && /* @__PURE__ */ t("div", { className: "editor__diagnostics", children: /* @__PURE__ */ s(k, { style: {
+  }, [T]), ue = m.useMemo(() => Ae({
+    theme: "light",
+    settings: {
+      background: "transparent",
+      backgroundImage: "",
+      foreground: "rgba(255,255,255, 0.75)",
+      caret: "gray",
+      selection: "rgba(112,179,255,0.25)",
+      selectionMatch: "rgba(112,179,255,0.1)",
+      fontSize: "0.8rem",
+      gutterBackground: "transparent",
+      gutterForeground: "rgba(255,255,255, 0.5)",
+      gutterBorder: "transparent",
+      gutterActiveForeground: "rgba(255,255,255, 1)",
+      lineHighlight: "rgba(255,255,255, 0.1)"
+    },
+    styles: [{
+      tag: C.squareBracket,
+      color: w("squareBracket")
+    }, {
+      tag: C.bracket,
+      color: w("bracket")
+    }, {
+      tag: C.string,
+      color: w("Text")
+    }, {
+      tag: C.bool,
+      color: w("Boolean")
+    }, {
+      tag: C.number,
+      color: w("Number")
+    }, ...O]
+  }), [O]);
+  return /* @__PURE__ */ s(Re, { h: "100%", type: "scroll", children: [
+    U && /* @__PURE__ */ r("div", { className: "editor__diagnostics", children: /* @__PURE__ */ s(x, { style: {
       gap: "0.35rem",
       textWrap: "nowrap"
     }, align: "center", children: [
-      c.filter((e) => e.severity == "error").length > 0 ? /* @__PURE__ */ s(E, { children: [
-        /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ s(y, { color: "red", children: [
-          /* @__PURE__ */ t(Ae, { size: 13 }),
-          /* @__PURE__ */ t(a, { children: c.filter((e) => e.severity == "error").length })
+      u.filter((e) => e.severity == "error").length > 0 ? /* @__PURE__ */ s(A, { children: [
+        /* @__PURE__ */ r(k, { asChild: !0, children: /* @__PURE__ */ s(b, { color: "red", children: [
+          /* @__PURE__ */ r(ze, { size: 13 }),
+          /* @__PURE__ */ r(a, { children: u.filter((e) => e.severity == "error").length })
         ] }) }),
-        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
-          /* @__PURE__ */ t(V, {}),
-          c.filter((e) => e.severity == "error").map((e) => /* @__PURE__ */ t(a, { size: "xs", children: e.message }, e.message))
+        /* @__PURE__ */ r(z, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
+          /* @__PURE__ */ r(P, {}),
+          u.filter((e) => e.severity == "error").map((e) => /* @__PURE__ */ r(a, { size: "xs", children: e.message }, e.message))
         ] }) })
       ] }) : null,
-      c.filter((e) => e.severity == "warning").length > 0 ? /* @__PURE__ */ s(E, { children: [
-        /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ s(y, { color: "orange", children: [
-          /* @__PURE__ */ t(xe, { size: 13 }),
-          /* @__PURE__ */ t(a, { children: c.filter((e) => e.severity == "warning").length })
+      u.filter((e) => e.severity == "warning").length > 0 ? /* @__PURE__ */ s(A, { children: [
+        /* @__PURE__ */ r(k, { asChild: !0, children: /* @__PURE__ */ s(b, { color: "orange", children: [
+          /* @__PURE__ */ r(je, { size: 13 }),
+          /* @__PURE__ */ r(a, { children: u.filter((e) => e.severity == "warning").length })
         ] }) }),
-        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
-          /* @__PURE__ */ t(V, {}),
-          c.filter((e) => e.severity == "warning").map((e) => /* @__PURE__ */ t(a, { size: "xs", children: e.message }, e.message))
+        /* @__PURE__ */ r(z, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
+          /* @__PURE__ */ r(P, {}),
+          u.filter((e) => e.severity == "warning").map((e) => /* @__PURE__ */ r(a, { size: "xs", children: e.message }, e.message))
         ] }) })
       ] }) : null,
-      c.filter((e) => e.severity == "info").length > 0 ? /* @__PURE__ */ s(E, { children: [
-        /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ s(y, { color: "#9ca3af", children: [
-          /* @__PURE__ */ t(ke, { size: 13 }),
-          /* @__PURE__ */ t(a, { children: c.filter((e) => e.severity == "info").length })
+      u.filter((e) => e.severity == "info").length > 0 ? /* @__PURE__ */ s(A, { children: [
+        /* @__PURE__ */ r(k, { asChild: !0, children: /* @__PURE__ */ s(b, { color: "#9ca3af", children: [
+          /* @__PURE__ */ r(Pe, { size: 13 }),
+          /* @__PURE__ */ r(a, { children: u.filter((e) => e.severity == "info").length })
         ] }) }),
-        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
-          /* @__PURE__ */ t(V, {}),
-          c.filter((e) => e.severity == "info").map((e) => /* @__PURE__ */ t(a, { size: "xs", children: e.message }, e.message))
+        /* @__PURE__ */ r(z, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
+          /* @__PURE__ */ r(P, {}),
+          u.filter((e) => e.severity == "info").map((e) => /* @__PURE__ */ r(a, { size: "xs", children: e.message }, e.message))
         ] }) })
       ] }) : null,
-      c.filter((e) => e.severity == "hint").length > 0 ? /* @__PURE__ */ s(E, { children: [
-        /* @__PURE__ */ t(z, { asChild: !0, children: /* @__PURE__ */ s(y, { color: "#3b82f6", children: [
-          /* @__PURE__ */ t(Ee, { size: 13 }),
-          /* @__PURE__ */ t(a, { children: c.filter((e) => e.severity == "hint").length })
+      u.filter((e) => e.severity == "hint").length > 0 ? /* @__PURE__ */ s(A, { children: [
+        /* @__PURE__ */ r(k, { asChild: !0, children: /* @__PURE__ */ s(b, { color: "#3b82f6", children: [
+          /* @__PURE__ */ r(Ee, { size: 13 }),
+          /* @__PURE__ */ r(a, { children: u.filter((e) => e.severity == "hint").length })
         ] }) }),
-        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
-          /* @__PURE__ */ t(V, {}),
-          c.filter((e) => e.severity == "hint").map((e) => /* @__PURE__ */ t(a, { size: "xs", children: e.message }, e.message))
+        /* @__PURE__ */ r(z, { children: /* @__PURE__ */ s(j, { side: "bottom", children: [
+          /* @__PURE__ */ r(P, {}),
+          u.filter((e) => e.severity == "hint").map((e) => /* @__PURE__ */ r(a, { size: "xs", children: e.message }, e.message))
         ] }) })
       ] }) : null
     ] }) }),
-    Z && /* @__PURE__ */ t("div", { className: "editor__tools", children: /* @__PURE__ */ s(k, { style: {
+    $ && /* @__PURE__ */ r("div", { className: "editor__tools", children: /* @__PURE__ */ s(x, { style: {
       gap: "0.35rem",
       textWrap: "nowrap"
     }, align: "center", children: [
-      /* @__PURE__ */ s(k, { style: {
+      /* @__PURE__ */ s(x, { style: {
         gap: "0.35rem"
       }, align: "center", children: [
-        /* @__PURE__ */ s(y, { color: "secondary", border: !0, children: [
-          /* @__PURE__ */ t(a, { children: navigator !== void 0 && /Mac/.test(navigator.userAgent) ? "⌃" : "strg" }),
-          /* @__PURE__ */ t(a, { children: "+" }),
-          /* @__PURE__ */ t(ze, { size: 13 })
+        /* @__PURE__ */ s(b, { color: "secondary", border: !0, children: [
+          /* @__PURE__ */ r(a, { children: navigator !== void 0 && /Mac/.test(navigator.userAgent) ? "⌃" : "strg" }),
+          /* @__PURE__ */ r(a, { children: "+" }),
+          /* @__PURE__ */ r(Ve, { size: 13 })
         ] }),
-        /* @__PURE__ */ t(a, { children: "to show" })
+        /* @__PURE__ */ r(a, { children: "to show" })
       ] }),
-      /* @__PURE__ */ t(a, { children: "and" }),
-      /* @__PURE__ */ s(k, { style: {
+      /* @__PURE__ */ r(a, { children: "and" }),
+      /* @__PURE__ */ s(x, { style: {
         gap: "0.35rem"
       }, align: "center", children: [
-        /* @__PURE__ */ s(y, { color: "secondary", border: !0, children: [
-          /* @__PURE__ */ t(Pe, { size: 13 }),
-          /* @__PURE__ */ t(a, { children: "or" }),
-          /* @__PURE__ */ t(je, { size: 13 })
+        /* @__PURE__ */ s(b, { color: "secondary", border: !0, children: [
+          /* @__PURE__ */ r(Ne, { size: 13 }),
+          /* @__PURE__ */ r(a, { children: "or" }),
+          /* @__PURE__ */ r(Ie, { size: 13 })
         ] }),
-        /* @__PURE__ */ t(a, { children: "to select" })
+        /* @__PURE__ */ r(a, { children: "to select" })
       ] }),
-      /* @__PURE__ */ t(a, { children: "suggestions" })
+      /* @__PURE__ */ r(a, { children: "suggestions" })
     ] }) }),
-    /* @__PURE__ */ t(Ne, { asChild: !0, children: /* @__PURE__ */ s("div", { ref: C, ...ue("editor", te), children: [
-      /* @__PURE__ */ t(de, { width: "100%", height: "100%", value: r === "json" ? re : S, theme: Fe, readOnly: I || U, editable: !I, extensions: se, "aria-disabled": I, className: "editor__control", onChange: (e) => {
-        if (R(e), r === "json")
+    /* @__PURE__ */ r(Me, { asChild: !0, children: /* @__PURE__ */ s("div", { ref: H, ...he("editor", te), children: [
+      /* @__PURE__ */ r(fe, { width: "100%", height: "100%", value: oe, theme: ue, readOnly: N || ee, editable: !N, extensions: ae, "aria-disabled": N, className: "editor__control", onChange: (e) => {
+        if (I(e), t === "json")
           try {
-            const n = JSON.parse(e);
-            O?.(n), Y?.setValue(n);
+            const d = JSON.parse(e);
+            q?.(d), Z?.setValue(d);
           } catch {
           }
         else
-          O?.(e);
-      }, onUpdate: M, basicSetup: ee }),
-      g && Array.from(oe.entries()).map(([e, n]) => {
-        const o = g[n.type];
-        return o ? K(/* @__PURE__ */ t("div", { style: {
+          q?.(e);
+      }, onUpdate: ce, basicSetup: re }),
+      p && Array.from(ne.entries()).map(([e, d]) => {
+        const n = p[d.type];
+        return n ? K(/* @__PURE__ */ r("div", { style: {
           display: "contents"
-        }, children: o({
-          content: n.value
-        }) }, e.outerHTML + n.value), e) : null;
+        }, children: n({
+          content: d.value
+        }) }, e.outerHTML + d.value), e) : null;
       }),
-      f && K(/* @__PURE__ */ t("div", { ref: B, style: {
+      g && K(/* @__PURE__ */ r("div", { ref: R, style: {
         position: "fixed",
-        top: f.position.top,
-        left: f.position.left,
+        top: g.position.top,
+        left: g.position.left,
         zIndex: 9999
-      }, children: f.component }, f.position.top + "-" + f.position.left), document.body)
+      }, children: g.component }, g.position.top + "-" + g.position.left), document.body)
     ] }) }),
-    /* @__PURE__ */ t(G, { orientation: "vertical", children: /* @__PURE__ */ t(Q, {}) }),
-    /* @__PURE__ */ t(G, { orientation: "horizontal", children: /* @__PURE__ */ t(Q, {}) })
+    /* @__PURE__ */ r(G, { orientation: "vertical", children: /* @__PURE__ */ r(Q, {}) }),
+    /* @__PURE__ */ r(G, { orientation: "horizontal", children: /* @__PURE__ */ r(Q, {}) })
   ] });
 };
 export {
-  at as Editor
+  ur as Editor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {
@@ -56,9 +56,9 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@uiw/codemirror-themes": "^4.25.8",
+    "@uiw/codemirror-themes": "^4.25.9",
     "@uiw/react-codemirror": "^4.25.8",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^5.2.0",
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "@xyflow/react": "^12.10.1",
@@ -76,7 +76,7 @@
     "playwright": "1.58.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-resizable-panels": "^4.7.2",
+    "react-resizable-panels": "^4.7.6",
     "react-zoom-pan-pinch": "^3.7.0",
     "rimraf": "^6.1.3",
     "sass": "^1.98.0",