@mario_hahn/jumpy-ui 0.14.0 → 0.14.2

package/README.md

@@ -1,5 +1,19 @@
 # @mario_hahn/jumpy-ui
 
+## Editor bundle boundary (0.14.1)
+
+Root imports remain compatible. `JumpTokenInput` is built in a separate chunk so
+ordinary components/themes do not retain Lexical in Next.js Webpack/Turbopack
+production initial scripts. Optional explicit import:
+
+```tsx
+import { JumpTokenInput, type JumpTokenInputValue } from '@mario_hahn/jumpy-ui/editor'
+```
+
+Both imports share the same theme/field contexts. CSS remains side-effectful.
+Keep consumer workarounds for #5 until the fixed npm version is verified;
+published 0.14.0 still has the defect.
+
 ## Button loading (0.10.0)
 
 `<JumpButton isLoading>Speichern</JumpButton>` keeps “Speichern” visible and adds a
@@ -369,6 +383,12 @@ import { JumpAppShell, JumpSideMenu, JumpSideMenuItem, JumpTabBar, JumpTabBarIte
 
 ## Token Packages
 
+Native consumers can download the verified
+[native-tokens-v0.14.0 release](https://github.com/mariohahn/jumpy-ui/releases/tag/native-tokens-v0.14.0)
+instead of using npm or a full checkout. The release includes the archive,
+SHA-256 and standalone installer. `NATIVE-TOKENS.md` in the repository documents
+Xcode local-package and Gradle source-set integration.
+
 The npm package ships generated Web token artifacts under `tokens/web` (CSS, JS,
 and JSON per preset). Native artifacts are maintained in the repository, outside
 the npm distribution starting with 0.14.0.

package/dist/{chunk-KDFNGI6Y.js → chunk-2XOYK2JS.js}

@@ -15947,7 +15947,7 @@ var providerStyles = `
    Explicit columns so a hidden menu button does not shift the title. */
 [data-jumpy-theme='true'] [data-jumpy-component='top-bar'][data-title-align='center'] {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
 }
 
 [data-jumpy-theme='true'] [data-jumpy-component='top-bar'][data-title-align='center'] > [data-jumpy-slot='top-bar-leading'] {

package/dist/chunk-NPUCW4NM.js

@@ -0,0 +1,365 @@
+import {
+  JumpField,
+  JumpyFieldContext
+} from "./chunk-SXBPGNRO.js";
+import {
+  JumpySpacing,
+  spacingValue,
+  useJumpyTheme
+} from "./chunk-2XOYK2JS.js";
+
+// editor.js
+import { useContext, useRef as useRef2, useState as useState2 } from "react";
+
+// token-input.js
+import { useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { $addUpdateTag, $createLineBreakNode, $createParagraphNode, $createTextNode, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isLineBreakNode, $isNodeSelection, $isRangeSelection, $isTextNode, $setSelection, CLEAR_HISTORY_COMMAND, COMMAND_PRIORITY_HIGH, COPY_COMMAND, CUT_COMMAND, DELETE_CHARACTER_COMMAND, DecoratorNode, HISTORY_PUSH_TAG, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, PASTE_COMMAND } from "lexical";
+import { $generateJSONFromSelectedNodes } from "@lexical/clipboard";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { jsx, jsxs } from "react/jsx-runtime";
+var clipboardType = "application/x-jumpy-token-input";
+function normalizeTokenInputValue(value, multiline = false) {
+  const result = [];
+  const ids = /* @__PURE__ */ new Set();
+  for (const part of value) {
+    if (part.type === "text") {
+      const text = multiline ? part.text.replace(/\r\n?/g, "\n") : part.text.replace(/[\r\n]+/g, " ");
+      if (!text) continue;
+      const previous = result[result.length - 1];
+      if (previous?.type === "text") previous.text += text;
+      else result.push({ type: "text", text });
+    } else if (part.type === "token") {
+      if (typeof part.id !== "string" || !part.id || ids.has(part.id) || typeof part.value !== "string" || typeof part.label !== "string" || !part.label) throw new Error("JumpTokenInput tokens require unique ids, string values and non-empty labels");
+      ids.add(part.id);
+      result.push({ type: "token", id: part.id, value: part.value, label: part.label });
+    } else throw new Error("Unknown JumpTokenInput value part");
+  }
+  return result;
+}
+function tokenInputText(value) {
+  return value.map((part) => part.type === "text" ? part.text : part.label).join("");
+}
+var JumpyTokenNode = class _JumpyTokenNode extends DecoratorNode {
+  static getType() {
+    return "jumpy-token";
+  }
+  static clone(node) {
+    return new _JumpyTokenNode(node.__token, node.__key);
+  }
+  static importJSON(json) {
+    return new _JumpyTokenNode(json.token);
+  }
+  constructor(token, key) {
+    super(key);
+    this.__token = { ...token };
+  }
+  exportJSON() {
+    return { ...super.exportJSON(), type: "jumpy-token", version: 1, token: { ...this.__token } };
+  }
+  getTextContent() {
+    return this.__token.label;
+  }
+  isInline() {
+    return true;
+  }
+  isKeyboardSelectable() {
+    return false;
+  }
+  createDOM() {
+    const element = document.createElement("span");
+    element.contentEditable = "false";
+    element.dataset.jumpyTokenId = this.__token.id;
+    element.style.display = "inline-block";
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  decorate(editor) {
+    return /* @__PURE__ */ jsx(TokenChip, { editor, nodeKey: this.__key, token: this.__token });
+  }
+};
+function TokenChip({ editor, nodeKey, token }) {
+  const theme = useJumpyTheme();
+  const [editable, setEditable] = useState(editor.isEditable());
+  useEffect(() => editor.registerEditableListener(setEditable), [editor]);
+  return /* @__PURE__ */ jsxs("span", { "data-jumpy-slot": "input-token", style: { display: "inline-flex", maxWidth: "100%", boxSizing: "border-box", alignItems: "center", verticalAlign: "baseline", borderRadius: theme.radius.small, border: `${theme.borderWidth.small}px solid var(--jumpy-color-feedback-info-border)`, paddingInline: theme.spacing.small3XS, gap: theme.spacing.small3XS, background: "var(--jumpy-color-feedback-info-surface)", color: "var(--jumpy-color-text-primary)", fontSize: theme.fontFamily.bodySmall.fontSize, lineHeight: "inherit", whiteSpace: "inherit" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { minWidth: 0 }, children: token.label }),
+    editable && /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, "aria-label": `Remove ${token.label}`, onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!editor.isEditable()) return;
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if (node) {
+          node.selectPrevious();
+          node.remove();
+        }
+      }, { tag: HISTORY_PUSH_TAG });
+      editor.focus();
+    }, style: { display: "inline-flex", alignItems: "center", appearance: "none", border: 0, padding: 0, background: "transparent", color: "inherit", font: "inherit", cursor: "pointer" }, children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", width: theme.fontFamily.bodySmall.fontSize, height: theme.fontFamily.bodySmall.fontSize, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5" }) }) })
+  ] });
+}
+function $readValue(multiline = false) {
+  const parts = [];
+  function visit(node) {
+    if (node instanceof JumpyTokenNode) parts.push({ ...node.__token });
+    else if ($isTextNode(node)) parts.push({ type: "text", text: node.getTextContent() });
+    else if ($isLineBreakNode(node)) parts.push({ type: "text", text: "\n" });
+    else if ($isElementNode(node)) node.getChildren().forEach(visit);
+  }
+  $getRoot().getChildren().forEach((node, index) => {
+    if (index > 0) parts.push({ type: "text", text: "\n" });
+    visit(node);
+  });
+  return normalizeTokenInputValue(parts, multiline);
+}
+function $nodes(parts) {
+  return parts.flatMap((part) => part.type === "token" ? [new JumpyTokenNode(part)] : part.text.split("\n").flatMap((text, index) => [
+    ...index > 0 ? [$createLineBreakNode()] : [],
+    ...text ? [$createTextNode(text)] : []
+  ]));
+}
+function $replaceValue(parts) {
+  $getRoot().clear().append($createParagraphNode().append(...$nodes(parts)));
+}
+function $adjacentToken(backward) {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection) || !selection.isCollapsed()) return null;
+  const { offset, type } = selection.anchor;
+  const node = selection.anchor.getNode();
+  if (type === "element" && $isElementNode(node)) return node.getChildAtIndex(offset - (backward ? 1 : 0));
+  if ($isTextNode(node) && (backward ? offset === 0 : offset === node.getTextContentSize())) return backward ? node.getPreviousSibling() : node.getNextSibling();
+  return null;
+}
+function EditorBehavior({ model, multiline, editable, editorRef, onValueChange, onChange, onClear }) {
+  const [editor] = useLexicalComposerContext();
+  const savedSelection = useRef(null);
+  const callbacks = useRef({ onValueChange, onChange, onClear });
+  callbacks.current = { onValueChange, onChange, onClear };
+  const previousMode = useRef(multiline);
+  useLayoutEffect(() => {
+    editor.setEditable(editable);
+  }, [editor, editable]);
+  useLayoutEffect(() => {
+    const current = editor.getEditorState().read(() => $readValue(multiline));
+    if (previousMode.current !== multiline || JSON.stringify(current) !== JSON.stringify(model)) {
+      savedSelection.current = null;
+      editor.update(() => {
+        $replaceValue(model);
+        $setSelection(null);
+      }, { tag: "jumpy-external-value" });
+      editor.dispatchCommand(CLEAR_HISTORY_COMMAND, void 0);
+    }
+    previousMode.current = multiline;
+  }, [editor, model, multiline]);
+  function insert(parts) {
+    if (!editor.isEditable()) return;
+    editor.update(() => {
+      const selection = savedSelection.current?.clone() || $getSelection();
+      if (selection) $setSelection(selection);
+      else $getRoot().selectEnd();
+      $getSelection()?.insertNodes($nodes(parts));
+    }, { tag: HISTORY_PUSH_TAG });
+    editor.focus();
+  }
+  useImperativeHandle(editorRef, () => ({
+    focus: () => editor.focus(),
+    insertText: (text) => insert(normalizeTokenInputValue([{ type: "text", text }], multiline)),
+    insertToken: (token) => {
+      const part = { ...token, type: "token", id: token.id || crypto.randomUUID() };
+      const current = editor.getEditorState().read(() => $readValue(multiline));
+      normalizeTokenInputValue([...current, part], multiline);
+      insert([part]);
+    },
+    removeToken: (id) => {
+      if (!editor.isEditable()) return;
+      editor.update(() => {
+        function remove(node) {
+          if (node instanceof JumpyTokenNode && node.__token.id === id) {
+            node.selectPrevious();
+            node.remove();
+          } else if ($isElementNode(node)) node.getChildren().forEach(remove);
+        }
+        remove($getRoot());
+      }, { tag: HISTORY_PUSH_TAG });
+    },
+    clear: () => {
+      if (!editor.isEditable()) return;
+      if (editor.getEditorState().read(() => $readValue(multiline).length) === 0) return;
+      editor.update(() => {
+        if (!$getSelection()) $getRoot().selectEnd();
+      }, { discrete: true });
+      editor.update(() => {
+        $replaceValue([]);
+        $getRoot().selectStart();
+      }, { tag: [HISTORY_PUSH_TAG, "jumpy-clear"] });
+      editor.focus();
+    }
+  }));
+  useEffect(() => {
+    let previous = JSON.stringify(editor.getEditorState().read(() => $readValue(multiline)));
+    const unregisterUpdate = editor.registerUpdateListener(({ editorState, tags }) => {
+      editorState.read(() => {
+        const selection = $getSelection();
+        if (selection) savedSelection.current = selection.clone();
+        const next = $readValue(multiline);
+        const json = JSON.stringify(next);
+        if (json === previous) return;
+        previous = json;
+        if (tags.has("jumpy-external-value")) return;
+        callbacks.current.onChange?.({ target: { value: tokenInputText(next) }, currentTarget: { value: tokenInputText(next) } });
+        callbacks.current.onValueChange(next);
+        if (tags.has("jumpy-clear")) callbacks.current.onClear?.();
+      });
+    });
+    const deleteToken = (event, backward) => {
+      if (!editor.isEditable() || editor.isComposing()) return false;
+      const selection = $getSelection();
+      if ($isNodeSelection(selection)) {
+        $addUpdateTag(HISTORY_PUSH_TAG);
+        event?.preventDefault();
+        for (const node2 of selection.getNodes()) {
+          node2.selectPrevious();
+          node2.remove();
+        }
+        return true;
+      }
+      const node = $adjacentToken(backward);
+      if (!(node instanceof JumpyTokenNode)) return false;
+      $addUpdateTag(HISTORY_PUSH_TAG);
+      event?.preventDefault();
+      node.selectPrevious();
+      node.remove();
+      return true;
+    };
+    const copy = (event, cut) => {
+      if (!event?.clipboardData || cut && !editor.isEditable()) return false;
+      const selection = $getSelection();
+      if (!selection || $isRangeSelection(selection) && selection.isCollapsed()) return false;
+      const { nodes } = $generateJSONFromSelectedNodes(editor, selection);
+      const parts = [];
+      const visit = (node) => {
+        if (node.type === "jumpy-token") parts.push(node.token);
+        else if (node.type === "text") parts.push({ type: "text", text: node.text });
+        else if (node.type === "linebreak") parts.push({ type: "text", text: "\n" });
+        else node.children?.forEach(visit);
+      };
+      nodes.forEach((node, index) => {
+        if (index > 0 && node.type === "paragraph") parts.push({ type: "text", text: "\n" });
+        visit(node);
+      });
+      event.preventDefault();
+      event.clipboardData.setData("text/plain", tokenInputText(parts));
+      event.clipboardData.setData(clipboardType, JSON.stringify(parts));
+      if (cut) {
+        $addUpdateTag(HISTORY_PUSH_TAG);
+        if ($isNodeSelection(selection)) for (const node of selection.getNodes()) node.remove();
+        else if ($isRangeSelection(selection)) selection.removeText();
+      }
+      return true;
+    };
+    const commands = [
+      editor.registerCommand(DELETE_CHARACTER_COMMAND, (backward) => deleteToken(null, backward), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(KEY_BACKSPACE_COMMAND, (event) => deleteToken(event, true), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(KEY_DELETE_COMMAND, (event) => deleteToken(event, false), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+        if (editor.isComposing()) return false;
+        event?.preventDefault();
+        if (editable && multiline && !event?.metaKey && !event?.ctrlKey) {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            $addUpdateTag(HISTORY_PUSH_TAG);
+            selection.insertLineBreak();
+          }
+        }
+        return true;
+      }, COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(COPY_COMMAND, (event) => copy(event, false), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(CUT_COMMAND, (event) => copy(event, true), COMMAND_PRIORITY_HIGH),
+      editor.registerCommand(PASTE_COMMAND, (event) => {
+        if (!event?.clipboardData || !editor.isEditable()) return false;
+        event.preventDefault();
+        $addUpdateTag(HISTORY_PUSH_TAG);
+        let parts;
+        try {
+          parts = normalizeTokenInputValue(JSON.parse(event.clipboardData.getData(clipboardType)).map((part) => part.type === "token" ? { ...part, id: crypto.randomUUID() } : part), multiline);
+        } catch {
+          parts = normalizeTokenInputValue([{ type: "text", text: event.clipboardData.getData("text/plain") }], multiline);
+        }
+        $getSelection()?.insertNodes($nodes(parts));
+        return true;
+      }, COMMAND_PRIORITY_HIGH)
+    ];
+    return () => {
+      unregisterUpdate();
+      commands.forEach((unregister) => unregister());
+    };
+  }, [editor, multiline, editable]);
+  return null;
+}
+function TokenEditor({ model, multiline = false, minRows = 3, maxRows, editorRef, onValueChange, onChange, onClear, onFocus, onBlur, fieldContext, value: _value, placeholder, disabled, readOnly, style, ...props }) {
+  const theme = useJumpyTheme();
+  const initialConfig = useMemo(() => ({ namespace: "JumpyTokenInput", nodes: [JumpyTokenNode], editable: !disabled && !readOnly, onError: (error) => {
+    throw error;
+  }, editorState: () => $replaceValue(model) }), []);
+  const offset = fieldContext?.hasLabel ? spacingValue(theme, JumpySpacing.large) : 0;
+  const lineHeight = theme.fontFamily.bodyMedium.fontSize * theme.fontFamily.bodyMedium.lineHeight;
+  return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", minWidth: 0, marginTop: offset }, children: [
+    /* @__PURE__ */ jsx(
+      PlainTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsx(ContentEditable, { ...props, onFocusCapture: (event) => {
+          props.onFocusCapture?.(event);
+          onFocus?.(event);
+        }, onBlurCapture: (event) => {
+          props.onBlurCapture?.(event);
+          onBlur?.(event);
+        }, "data-jumpy-component": "token-input", role: "textbox", "aria-multiline": multiline, "aria-readonly": readOnly || void 0, "aria-disabled": disabled || void 0, tabIndex: disabled ? -1 : 0, style: { width: "100%", minHeight: lineHeight * (multiline ? minRows : 1), maxHeight: multiline && maxRows !== void 0 ? lineHeight * maxRows : void 0, padding: 0, outline: 0, overflowX: "auto", overflowY: multiline ? "auto" : void 0, whiteSpace: multiline ? "pre-wrap" : "pre", overflowWrap: multiline ? "anywhere" : void 0, color: "var(--jumpy-cmp-base-input-value-color)", fontFamily: theme.fontFamily.familyBase, fontSize: theme.fontFamily.bodyMedium.fontSize, lineHeight: theme.fontFamily.bodyMedium.lineHeight, ...style } }),
+        placeholder: null,
+        ErrorBoundary: LexicalErrorBoundary
+      }
+    ),
+    model.length === 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { position: "absolute", top: 0, left: 0, pointerEvents: "none", color: "var(--jumpy-cmp-base-input-placeholder-color)", fontSize: theme.fontFamily.bodyMedium.fontSize, lineHeight: theme.fontFamily.bodyMedium.lineHeight }, children: placeholder }),
+    /* @__PURE__ */ jsx(HistoryPlugin, {}),
+    /* @__PURE__ */ jsx(EditorBehavior, { model, multiline, editable: !disabled && !readOnly, editorRef, onValueChange, onChange, onClear })
+  ] }) });
+}
+
+// editor.js
+import { jsx as jsx2 } from "react/jsx-runtime";
+function TokenEditorField(props) {
+  const fieldContext = useContext(JumpyFieldContext);
+  return /* @__PURE__ */ jsx2(TokenEditor, { ...props, fieldContext });
+}
+function JumpTokenInput({ ref, value, defaultValue = [], onChange, onTokenInsert, onTokenRemove, multiline = false, minRows = 3, maxRows, hideClearIcon = false, onClear, label, hint, status = "regular", error = false, disabled = false, readOnly = false, className = "", ...props }) {
+  const editorHandle = useRef2(null);
+  const [internalValue, setInternalValue] = useState2(() => normalizeTokenInputValue(defaultValue, multiline));
+  const [, refresh] = useState2(0);
+  if (multiline && (!Number.isInteger(minRows) || minRows < 1 || maxRows !== void 0 && (!Number.isInteger(maxRows) || maxRows < minRows))) throw new Error("JumpTokenInput requires minRows >= 1 and maxRows >= minRows");
+  const model = normalizeTokenInputValue(value === void 0 ? internalValue : value, multiline);
+  const change = (next) => {
+    if (disabled || readOnly) return;
+    if (value === void 0) setInternalValue(next);
+    else refresh((revision) => revision + 1);
+    onChange?.(next);
+    const previousTokens = model.filter((part) => part.type === "token");
+    const nextTokens = next.filter((part) => part.type === "token");
+    for (const token of nextTokens) if (!previousTokens.some((previous) => previous.id === token.id)) onTokenInsert?.(token);
+    for (const token of previousTokens) if (!nextTokens.some((current) => current.id === token.id)) onTokenRemove?.(token);
+  };
+  return /* @__PURE__ */ jsx2(JumpField, { label, hint, status, error, hideClearIcon, onClear: () => editorHandle.current?.clear(), className, children: /* @__PURE__ */ jsx2(TokenEditorField, { ...props, "data-jumpy-token-editor": true, editorRef: (handle) => {
+    editorHandle.current = handle;
+    if (typeof ref === "function") return ref(handle);
+    if (ref) ref.current = handle;
+  }, model, multiline, minRows, maxRows, value: tokenInputText(model), "data-has-value": model.length > 0, disabled, readOnly, onValueChange: change, onClear }) });
+}
+
+export {
+  JumpTokenInput
+};