@code0-tech/pictor 0.3.0 → 0.4.0

package/dist/components/form/InputContentEditable.hook.js

@@ -0,0 +1,449 @@
+import { c as Y } from "../../_virtual/compiler-runtime.js";
+import Z from "react";
+const F = "input__token", K = "input__token--selected", q = "aria-data", O = "​", k = (t) => (t ?? "").split(O).join(""), D = (t) => !!t && t.nodeType === Node.TEXT_NODE && (t.textContent ?? "") === O, U = (t) => {
+  try {
+    return JSON.stringify(t);
+  } catch {
+    return JSON.stringify({
+      value: String(t ?? "")
+    });
+  }
+}, ee = (t) => {
+  if (!t) return null;
+  try {
+    return JSON.parse(t);
+  } catch {
+    return null;
+  }
+}, te = (t) => t == null ? "" : typeof t == "string" ? t : U(t), j = (t) => {
+  const e = (t.innerHTML ?? "").trim().toLowerCase();
+  (e === "<br>" || e === "<br/>" || e === "<br />") && (t.innerHTML = ""), t.childNodes.length === 1 && t.childNodes[0]?.tagName === "BR" && (t.innerHTML = "");
+}, C = (t) => t instanceof HTMLElement && t.classList.contains(F), ne = (t) => {
+  let e = t;
+  for (; e; ) {
+    if (C(e)) return !0;
+    e = e.parentNode;
+  }
+  return !1;
+}, re = (t) => {
+  if (t && typeof t == "object") {
+    const {
+      children: e,
+      __contentHtml: r,
+      ...n
+    } = t;
+    return n;
+  }
+  return {
+    value: t
+  };
+}, P = (t) => ee(t.getAttribute(q)) ?? {
+  value: t.textContent ?? ""
+}, oe = (t) => {
+  const e = document.createElement("span");
+  e.setAttribute("contenteditable", "false"), e.className = F;
+  const r = re(t);
+  e.setAttribute(q, U(r));
+  const n = r?.label ?? r?.value ?? "";
+  return e.textContent = String(n ?? ""), e.style.display = "inline-flex", e.style.alignItems = "center", e.style.verticalAlign = "middle", e.style.userSelect = "text", e.style.webkitUserSelect = "text", e;
+}, se = (t) => {
+  const e = window.getSelection();
+  if (e && e.rangeCount > 0) {
+    const o = e.getRangeAt(0);
+    if (t.contains(o.startContainer)) return o;
+  }
+  const r = document.createRange();
+  r.selectNodeContents(t), r.collapse(!1);
+  const n = window.getSelection();
+  return n?.removeAllRanges(), n?.addRange(r), r;
+}, ae = (t, e) => {
+  if (!t) return;
+  const r = window.getSelection();
+  if (!r || r.rangeCount === 0) return;
+  const n = r.getRangeAt(0);
+  if (!t.contains(n.startContainer)) return;
+  n.deleteContents();
+  const o = document.createTextNode(e);
+  n.insertNode(o);
+  const l = document.createRange();
+  l.setStartAfter(o), l.collapse(!0), r.removeAllRanges(), r.addRange(l);
+}, ce = (t) => {
+  if (!t) return [""];
+  const e = [], r = (n) => {
+    if (n.nodeType === Node.TEXT_NODE) {
+      const l = k(n.textContent ?? "");
+      l.length && e.push(l);
+      return;
+    }
+    if (n.nodeType !== Node.ELEMENT_NODE) return;
+    const o = n;
+    if (C(o)) {
+      e.push(P(o));
+      return;
+    }
+    Array.from(n.childNodes).forEach(r);
+  };
+  return Array.from(t.childNodes).forEach(r), e.length ? e.reduce((n, o) => (typeof o == "string" && typeof n[n.length - 1] == "string" ? n[n.length - 1] = `${n[n.length - 1]}${o}` : n.push(o), n), []) : [""];
+}, ie = (t) => t.map((e) => {
+  if (typeof e == "string") return e;
+  const r = e?.value ?? e;
+  return te(r);
+}).join(""), le = (t) => {
+  const {
+    children: e,
+    __contentHtml: r,
+    ...n
+  } = t;
+  return n;
+}, z = (t) => {
+  if (!t) return null;
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return null;
+  const r = e.getRangeAt(0);
+  if (!t.contains(r.startContainer)) return null;
+  const n = r.startContainer, o = r.startOffset;
+  let l = null;
+  n.nodeType === Node.ELEMENT_NODE && (l = n.childNodes[o] ?? null);
+  const m = document.createTreeWalker(t, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, {
+    acceptNode: (c) => c.nodeType === Node.TEXT_NODE ? ne(c) || (c.textContent ?? "") === O ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT : c.nodeType === Node.ELEMENT_NODE && C(c) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  });
+  let f = null, d = m.nextNode();
+  for (; d && !(l && d === l); ) {
+    if (d === n && d.nodeType === Node.TEXT_NODE) {
+      const c = d.textContent?.slice(0, o) ?? "", a = [...k(c).matchAll(/\S+/g)], s = a[a.length - 1];
+      if (s && s.index !== void 0) {
+        const N = s.index, p = N + s[0].length, h = document.createRange();
+        h.setStart(d, Math.min(N, c.length)), h.setEnd(d, Math.min(p, c.length)), f = {
+          token: s[0],
+          range: h
+        };
+      }
+      break;
+    }
+    if (C(d)) {
+      f = null, d = m.nextNode();
+      continue;
+    }
+    if (d.nodeType === Node.TEXT_NODE) {
+      const c = d.textContent ?? "", a = [...k(c).matchAll(/\S+/g)], s = a[a.length - 1];
+      if (s && s.index !== void 0) {
+        const N = s.index, p = N + s[0].length, h = document.createRange();
+        h.setStart(d, Math.min(N, c.length)), h.setEnd(d, Math.min(p, c.length)), f = {
+          token: s[0],
+          range: h
+        };
+      }
+    }
+    d = m.nextNode();
+  }
+  return f;
+}, de = (t) => {
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return null;
+  const r = e.getRangeAt(0);
+  if (!t.contains(r.startContainer) || !t.contains(r.endContainer)) return null;
+  const n = (f) => {
+    if (f.nodeType === Node.TEXT_NODE) return k(f.textContent ?? "").length;
+    if (f.nodeType === Node.ELEMENT_NODE) {
+      const d = f;
+      if (C(d)) {
+        const u = P(d);
+        return String(u?.value ?? "").length;
+      }
+      let c = 0;
+      return Array.from(f.childNodes).forEach((u) => c += n(u)), c;
+    }
+    return 0;
+  }, o = (f, d) => {
+    let c = 0;
+    const u = (a) => {
+      if (a === f) {
+        if (a.nodeType === Node.TEXT_NODE)
+          return c += k(a.textContent ?? "").slice(0, d).length, !0;
+        if (a.nodeType === Node.ELEMENT_NODE) {
+          const s = Array.from(a.childNodes), N = Math.max(0, Math.min(d, s.length));
+          for (let p = 0; p < N; p++) c += n(s[p]);
+          return !0;
+        }
+        return !0;
+      }
+      if (a.nodeType === Node.TEXT_NODE)
+        return c += k(a.textContent ?? "").length, !1;
+      if (a.nodeType === Node.ELEMENT_NODE) {
+        const s = a;
+        if (C(s)) {
+          const N = P(s);
+          return c += String(N?.value ?? "").length, !1;
+        }
+        for (const N of Array.from(a.childNodes))
+          if (u(N)) return !0;
+      }
+      return !1;
+    };
+    return u(t), c;
+  }, l = o(r.startContainer, r.startOffset), m = o(r.endContainer, r.endOffset);
+  return {
+    start: Math.min(l, m),
+    end: Math.max(l, m)
+  };
+}, ye = (t, e, r) => {
+  const n = (a) => Math.max(0, a), o = n(e), l = n(r), m = (a) => {
+    let s = a;
+    const N = (p) => {
+      if (p.nodeType === Node.TEXT_NODE) {
+        const h = p.textContent ?? "", y = k(h).length;
+        return s <= y ? {
+          node: p,
+          offset: Math.min(s, h.length)
+        } : (s -= y, null);
+      }
+      if (p.nodeType === Node.ELEMENT_NODE) {
+        const h = p;
+        if (C(h)) {
+          const y = P(h), x = String(y?.value ?? "").length, S = h.parentNode ?? t, w = Array.from(S.childNodes).indexOf(h);
+          return s <= 0 ? {
+            node: S,
+            offset: w
+          } : s < x ? {
+            node: S,
+            offset: w + 1
+          } : (s -= x, null);
+        }
+        for (const y of Array.from(p.childNodes)) {
+          const x = N(y);
+          if (x) return x;
+        }
+      }
+      return null;
+    };
+    return N(t) ?? {
+      node: t,
+      offset: t.childNodes.length
+    };
+  }, f = m(o), d = m(l), c = window.getSelection();
+  if (!c) return;
+  const u = document.createRange();
+  try {
+    u.setStart(f.node, f.offset), u.setEnd(d.node, d.offset);
+  } catch {
+    u.selectNodeContents(t), u.collapse(!1);
+  }
+  c.removeAllRanges(), c.addRange(u);
+}, ue = (t, e, r) => {
+  const n = window.getSelection();
+  if (!n || typeof n.modify != "function" || !t.contains(n.focusNode) || !t.contains(n.anchorNode)) return !1;
+  const o = r === "right" ? "forward" : "backward";
+  try {
+    return n.modify(e, o, "character"), D(n.focusNode) && n.modify(e, o, "character"), !0;
+  } catch {
+    return !1;
+  }
+}, fe = (t) => {
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return null;
+  const r = e.getRangeAt(0);
+  return !t.contains(r.startContainer) || !t.contains(r.endContainer) ? null : r;
+}, ge = (t) => {
+  const e = t.parentNode;
+  return e ? Array.from(e.childNodes).indexOf(t) : -1;
+}, he = (t) => {
+  const e = t.startContainer, r = t.startOffset;
+  if (e.nodeType === Node.ELEMENT_NODE) return {
+    parent: e,
+    index: r
+  };
+  if (e.nodeType === Node.TEXT_NODE) {
+    const n = e, o = n.textContent ?? "", l = ge(n);
+    return l < 0 || !n.parentNode ? null : o === O ? {
+      parent: n.parentNode,
+      index: l + (r > 0 ? 1 : 0)
+    } : r === 0 ? {
+      parent: n.parentNode,
+      index: l
+    } : r === o.length ? {
+      parent: n.parentNode,
+      index: l + 1
+    } : null;
+  }
+  return null;
+}, J = (t, e) => {
+  const r = window.getSelection();
+  if (!r) return;
+  const n = document.createRange();
+  n.setStart(t, e), n.collapse(!0), r.removeAllRanges(), r.addRange(n);
+}, W = (t, e) => {
+  const r = t.childNodes[e - 1];
+  r && D(r) && r.parentNode === t && t.removeChild(r);
+  const n = Math.max(0, Math.min(e, t.childNodes.length - 1)), o = t.childNodes[n + 1];
+  o && D(o) && o.parentNode === t && t.removeChild(o);
+}, Ne = (t, e) => {
+  const r = fe(t);
+  if (!r || !r.collapsed) return !1;
+  const n = he(r);
+  if (!n) return !1;
+  const o = n.parent, l = o.childNodes, m = (u) => {
+    let a = u;
+    for (; a > 0 && D(l[a - 1]); ) a--;
+    return a;
+  }, f = (u) => {
+    let a = u;
+    for (; a < l.length && D(l[a]); ) a++;
+    return a;
+  };
+  if (e === "backspace") {
+    const u = m(n.index), a = u > 0 ? l[u - 1] : null;
+    if (a && C(a)) {
+      if (a.parentNode !== o) return !1;
+      const s = u - 1;
+      return o.removeChild(a), W(o, s), J(o, Math.max(0, Math.min(s, o.childNodes.length))), !0;
+    }
+    return !1;
+  }
+  const d = f(n.index), c = l[d] ?? null;
+  if (c && C(c)) {
+    if (c.parentNode !== o) return !1;
+    const u = d;
+    return o.removeChild(c), W(o, u), J(o, Math.max(0, Math.min(u, o.childNodes.length))), !0;
+  }
+  return !1;
+}, $ = (t) => {
+  t.querySelectorAll(`.${F}`).forEach((n) => n.classList.remove(K));
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return;
+  const r = e.getRangeAt(0);
+  !t.contains(r.startContainer) || !t.contains(r.endContainer) || t.querySelectorAll(`.${F}`).forEach((n) => {
+    try {
+      r.intersectsNode(n) && n.classList.add(K);
+    } catch {
+    }
+  });
+}, xe = (t) => {
+  const e = Y.c(30), {
+    editorRef: r,
+    transformSyntax: n,
+    filterSuggestionsByLastToken: o,
+    onLastTokenChange: l,
+    onStateChange: m
+  } = t, f = o === void 0 ? !1 : o, [d, c] = Z.useState(""), u = Z.useRef(null);
+  let a;
+  e[0] !== f || e[1] !== l || e[2] !== m || e[3] !== n ? (a = (i) => {
+    if (!i)
+      return;
+    j(i);
+    const g = de(i);
+    u.current = g;
+    const T = ce(i), R = ie(T), A = T.filter(pe);
+    f && l?.(z(i)?.token ?? null);
+    let b = null;
+    n && (b = n(R, T)), $(i), m?.({
+      value: R,
+      tokens: A,
+      segments: b
+    });
+  }, e[0] = f, e[1] = l, e[2] = m, e[3] = n, e[4] = a) : a = e[4];
+  const s = a;
+  let N;
+  e[5] !== m || e[6] !== n ? (N = (i) => {
+    const g = [], T = i ?? "", R = n ? n(T, g) : null;
+    return m?.({
+      value: T,
+      tokens: [],
+      segments: R
+    }), c(""), T;
+  }, e[5] = m, e[6] = n, e[7] = N) : N = e[7];
+  const p = N;
+  let h;
+  e[8] !== r || e[9] !== f || e[10] !== s ? (h = (i) => {
+    const g = r.current;
+    if (!g)
+      return;
+    j(g), g.focus({
+      preventScroll: !0
+    });
+    const T = i.insertMode ?? "replace", A = (() => {
+      const E = document.createRange();
+      switch (T) {
+        case "append":
+          return E.selectNodeContents(g), E.collapse(!1), E;
+        case "prepend":
+          return E.selectNodeContents(g), E.collapse(!0), E;
+        case "replace":
+          return E.selectNodeContents(g), E;
+        default:
+          return se(g);
+      }
+    })(), b = le(i);
+    if (f && T !== "replace") {
+      const E = z(g);
+      E ? E.range.deleteContents() : A.deleteContents();
+    } else
+      A.deleteContents();
+    const v = oe(b), Q = document.createTextNode(O), H = document.createTextNode(O);
+    A.insertNode(Q), A.insertNode(v), v.parentNode?.insertBefore(H, v.nextSibling ?? null);
+    const B = window.getSelection(), I = document.createRange();
+    try {
+      I.setStart(H, 1);
+    } catch {
+      I.setStartAfter(v);
+    }
+    I.collapse(!0), B?.removeAllRanges(), B?.addRange(I), s(g);
+  }, e[8] = r, e[9] = f, e[10] = s, e[11] = h) : h = e[11];
+  const y = h;
+  let x;
+  e[12] !== r || e[13] !== s ? (x = (i) => {
+    i.preventDefault();
+    const g = i.clipboardData.getData("text/plain");
+    ae(r.current, g), s(r.current);
+  }, e[12] = r, e[13] = s, e[14] = x) : x = e[14];
+  const S = x;
+  let w;
+  e[15] !== r || e[16] !== s ? (w = (i) => {
+    s(r.current);
+  }, e[15] = r, e[16] = s, e[17] = w) : w = e[17];
+  const V = w, G = me;
+  let L;
+  e[18] !== r || e[19] !== s ? (L = (i) => {
+    const g = r.current;
+    if (!g || document.activeElement !== g)
+      return !1;
+    if ((i.key === "Backspace" || i.key === "Delete") && Ne(g, i.key === "Backspace" ? "backspace" : "delete"))
+      return i.preventDefault(), i.stopPropagation(), s(g), !0;
+    if (i.key === "ArrowLeft" || i.key === "ArrowRight") {
+      const T = i.key === "ArrowLeft" ? "left" : "right";
+      if (ue(g, i.shiftKey ? "extend" : "move", T))
+        return i.preventDefault(), i.stopPropagation(), $(g), !0;
+    }
+    return i.key === "Enter" ? (i.preventDefault(), !0) : !1;
+  }, e[18] = r, e[19] = s, e[20] = L) : L = e[20];
+  const X = L;
+  let M;
+  e[21] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (M = () => {
+    const i = u.current;
+    return u.current = null, i;
+  }, e[21] = M) : M = e[21];
+  let _;
+  return e[22] !== y || e[23] !== d || e[24] !== V || e[25] !== X || e[26] !== S || e[27] !== p || e[28] !== s ? (_ = {
+    editorHtml: d,
+    setEditorHtml: c,
+    initializeFromExternalValue: p,
+    updateEditorState: s,
+    takePendingSelection: M,
+    applySuggestionValueSyntax: y,
+    handlePaste: S,
+    handleChange: V,
+    handleKeyDownCapture: G,
+    handleKeyDown: X
+  }, e[22] = y, e[23] = d, e[24] = V, e[25] = X, e[26] = S, e[27] = p, e[28] = s, e[29] = _) : _ = e[29], _;
+};
+function pe(t) {
+  return typeof t != "string";
+}
+function me(t) {
+  (t.key === " " || t.code === "Space") && (t.stopPropagation(), t.nativeEvent?.stopImmediatePropagation?.());
+}
+export {
+  de as getSelectionOffsetsInValue,
+  ce as serializeEditorParts,
+  ye as setSelectionOffsetsInValue,
+  xe as useContentEditableController
+};

package/dist/components/form/InputDescription.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface InputDescriptionProps {
+    children: React.ReactNode | React.ReactElement;
+}
+export declare const InputDescription: React.FC<InputDescriptionProps>;

package/dist/components/form/InputDescription.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import { c as i } from "../../_virtual/compiler-runtime.js";
+const p = (s) => {
+  const t = i.c(2), {
+    children: r
+  } = s;
+  let o;
+  return t[0] !== r ? (o = /* @__PURE__ */ e("span", { className: "input__description", children: r }), t[0] = r, t[1] = o) : o = t[1], o;
+};
+export {
+  p as InputDescription
+};

package/dist/components/form/InputLabel.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface InputLabelProps {
+    children: React.ReactNode | React.ReactElement;
+}
+export declare const InputLabel: React.FC<InputLabelProps>;

package/dist/components/form/InputLabel.js

@@ -0,0 +1,12 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c as s } from "../../_virtual/compiler-runtime.js";
+const i = (o) => {
+  const t = s.c(2), {
+    children: l
+  } = o;
+  let e;
+  return t[0] !== l ? (e = /* @__PURE__ */ r("label", { className: "input__label", children: l }), t[0] = l, t[1] = e) : e = t[1], e;
+};
+export {
+  i as InputLabel
+};

package/dist/components/form/InputMessage.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface InputMessageProps {
+    children: string;
+}
+export declare const InputMessage: React.FC<InputMessageProps>;

package/dist/components/form/InputMessage.js

@@ -0,0 +1,18 @@
+import { jsx as c, jsxs as i } from "react/jsx-runtime";
+import { c as m } from "../../_virtual/compiler-runtime.js";
+import { IconExclamationCircle as n } from "@tabler/icons-react";
+const f = (r) => {
+  const e = m.c(3), {
+    children: o
+  } = r;
+  let s;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ c(n, { size: 16 }), e[0] = s) : s = e[0];
+  let t;
+  return e[1] !== o ? (t = /* @__PURE__ */ i("span", { className: "input__message", children: [
+    s,
+    o
+  ] }), e[1] = o, e[2] = t) : t = e[2], t;
+};
+export {
+  f as InputMessage
+};

package/dist/components/form/InputSuggestion.d.ts

@@ -0,0 +1,27 @@
+import { MenuContentProps } from '../menu/Menu';
+import { default as React, RefObject } from 'react';
+export interface InputSuggestion {
+    children: React.ReactNode;
+    value: any;
+    valueData?: any;
+    groupBy?: string;
+    insertMode?: "replace" | "append" | "prepend" | "insert";
+}
+export type InputSuggestionMenuContentProps = MenuContentProps & {
+    inputRef?: RefObject<HTMLInputElement>;
+};
+export interface InputSuggestionMenuContentItemsProps {
+    suggestions?: InputSuggestion[];
+    onSuggestionSelect?: (suggestion: InputSuggestion) => void;
+    inputRef?: RefObject<HTMLInputElement>;
+}
+export interface InputSuggestionMenuContentItemsHandle {
+    focusFirstItem: () => InputSuggestion | undefined;
+    focusLastItem: () => InputSuggestion | undefined;
+    highlightNextItem: () => InputSuggestion | undefined;
+    highlightPreviousItem: () => InputSuggestion | undefined;
+    selectActiveItem: () => InputSuggestion | undefined;
+    clearActiveItem: () => void;
+}
+export declare const InputSuggestionMenuContent: React.NamedExoticComponent<InputSuggestionMenuContentProps>;
+export declare const InputSuggestionMenuContentItems: React.NamedExoticComponent<InputSuggestionMenuContentItemsProps>;