@june-ai/june-ui 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [Unreleased] — DocumentEditor premium UI
+
+### Added
+- Document app bar: editable title, AI-draft badge, Save, **Download** menu (Word, PDF, HTML,
+  Markdown, plain text, copy to clipboard) and full-screen mode (Esc / ✕ to close).
+- Grouped ribbon with labels and More/Less: History · Format (bold, italic, underline, strike,
+  inline code, superscript, subscript) · Align · Lists (with indent/outdent) / Style (paragraph,
+  headings, quote, code block) · Font family · Font size · formatting marks (¶) · Document (page
+  break, divider, page/full-width layout, find & replace) · Color (text color, highlight) ·
+  Insert (link, image upload/URL, table grid picker) · Actions (clear formatting).
+- Contextual table tools (rows, columns, merge/split, header row, delete table).
+- Selection bubble menu, A4 page canvas with page boundaries, "Page X of Y", word count, zoom.
+- Find & replace (`Ctrl/Cmd+F`) with match highlighting, match case, replace and replace all.
+- Page break node (`Ctrl/Cmd+Enter`); DOCX/PDF/HTML exports start a new page there.
+- DOCX export now keeps text color, highlight, font family, font size, super/subscript and images.
+- New dependencies: `@tiptap/extension-text-style`, `-highlight`, `-image`, `-subscript`, `-superscript`.
+- Real pagination: blocks that do not fit move to the next A4 sheet, with a visible gap and page numbers.
+- `JuneUI`/`JuneRenderer` `onResponseChange(response, info)` (+ `responseChangeDelay`): user edits to a
+  document (body as Markdown, and title) are written back into the OpenUI program. The rewritten
+  program can be passed back as `response`; it is recognised as an echo, not a new AI version.
+- `updateDocumentInProgram`, `readDocumentFromProgram`, `rememberDocumentEcho`, `isDocumentEcho`.
+- Save appears next to Download as soon as the user edits, even without `onSave`.
+- Toolbar layout adapts to the editor's own width (container queries) instead of the window.
+
+### Compatibility
+- Props, callbacks (`onSave`, `onExport`, `onDocumentChange`, `onConflict`, …), the store, AI merge,
+  autosave, `Ctrl/Cmd+S` and the OpenUI `DocumentEditor(...)` signature are unchanged.
+
 ## [Unreleased] (planned 0.2.0)
 
 ### Added

package/dist/chunk-VFZI3SEL.js

@@ -0,0 +1,520 @@
+// src/components/document-editor/document-engine.ts
+import { Editor } from "@tiptap/core";
+
+// src/errors/errors.ts
+var JuneError = class _JuneError extends Error {
+  constructor(code, message, options = {}) {
+    super(message);
+    Object.setPrototypeOf(this, _JuneError.prototype);
+    this.name = "JuneError";
+    this.code = code;
+    this.details = options.details;
+    if (options.cause !== void 0) {
+      this.cause = options.cause;
+    }
+  }
+};
+function isJuneError(value) {
+  return value instanceof JuneError;
+}
+function toJuneError(error, fallbackCode, message) {
+  if (error instanceof JuneError) return error;
+  const text = message ?? (error instanceof Error ? error.message : String(error));
+  return new JuneError(fallbackCode, text, { cause: error });
+}
+
+// src/components/document-editor/document-extensions.ts
+import { Node, mergeAttributes } from "@tiptap/core";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import { TableKit } from "@tiptap/extension-table";
+import TextAlign from "@tiptap/extension-text-align";
+import { Color, FontFamily, FontSize, TextStyle } from "@tiptap/extension-text-style";
+import { Markdown } from "@tiptap/markdown";
+import StarterKit from "@tiptap/starter-kit";
+
+// src/components/document-editor/document-pagination.ts
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+var paginationKey = new PluginKey("juneDocPagination");
+var configs = /* @__PURE__ */ new WeakMap();
+var SPLITTABLE = /* @__PURE__ */ new Set(["bulletList", "orderedList", "listItem", "blockquote"]);
+function gapWidget(height) {
+  return () => {
+    const el = document.createElement("div");
+    el.className = "june-doc__page-gap";
+    el.contentEditable = "false";
+    el.setAttribute("aria-hidden", "true");
+    el.style.height = `${height}px`;
+    return el;
+  };
+}
+function build(doc, breaks) {
+  return DecorationSet.create(
+    doc,
+    breaks.map(
+      (b) => Decoration.widget(b.pos, gapWidget(b.height), {
+        side: -1,
+        ignoreSelection: true,
+        key: `jd-gap-${b.pos}-${Math.round(b.height)}`
+      })
+    )
+  );
+}
+function collectUnits(doc) {
+  const units = [];
+  const walk = (parent, start, inheritedBreak) => {
+    parent.forEach((child, offset, index) => {
+      const pos = start + offset;
+      const breakPos = index === 0 && inheritedBreak !== null ? inheritedBreak : pos;
+      if (SPLITTABLE.has(child.type.name) && child.childCount > 0) {
+        walk(child, pos + 1, breakPos);
+      } else {
+        units.push({ pos, breakPos, node: child });
+      }
+    });
+  };
+  walk(doc, 0, null);
+  return units;
+}
+function measure(view, cfg) {
+  const prose = view.dom;
+  const proseRect = prose.getBoundingClientRect();
+  const scale = prose.offsetWidth ? proseRect.width / prose.offsetWidth : 1;
+  if (!scale || !proseRect.width) return { breaks: [], pages: 1 };
+  const gaps = [...prose.querySelectorAll(".june-doc__page-gap")].map((g) => {
+    const r = g.getBoundingClientRect();
+    return { top: (r.top - proseRect.top) / scale, height: r.height / scale };
+  });
+  const gapsAbove = (y) => gaps.reduce((sum, g) => g.top <= y + 0.5 ? sum + g.height : sum, 0);
+  const contentH = Math.max(80, cfg.pageHeight - cfg.padTop - cfg.padBottom);
+  const stride = cfg.pageHeight + cfg.gap;
+  const breaks = /* @__PURE__ */ new Map();
+  let pageStart = 0;
+  let added = 0;
+  let force = false;
+  for (const unit of collectUnits(view.state.doc)) {
+    const el = view.nodeDOM(unit.pos);
+    if (!(el instanceof HTMLElement)) continue;
+    const r = el.getBoundingClientRect();
+    const rawTop = (r.top - proseRect.top) / scale;
+    const natural = rawTop - gapsAbove(rawTop);
+    const h = r.height / scale;
+    let top = natural + added;
+    let bottom = top + h;
+    const overflows = bottom > pageStart + contentH + 0.5 && top > pageStart + 1;
+    if (force || overflows) {
+      const target = pageStart + stride;
+      if (top < target) {
+        const spacer = target - top;
+        breaks.set(unit.breakPos, (breaks.get(unit.breakPos) ?? 0) + spacer);
+        added += spacer;
+        top = target;
+        bottom = top + h;
+      }
+      pageStart = target;
+      while (top >= pageStart + stride) pageStart += stride;
+      force = false;
+    }
+    while (bottom > pageStart + contentH + 0.5) pageStart += stride;
+    if (unit.node.type.name === "pageBreak") force = true;
+  }
+  const pages = Math.max(1, Math.round(pageStart / stride) + 1 + (force ? 1 : 0));
+  return {
+    breaks: [...breaks].map(([pos, height]) => ({ pos, height: Math.round(height * 10) / 10 })).sort((a, b) => a.pos - b.pos),
+    pages
+  };
+}
+var same = (a, b) => a.length === b.length && a.every((x, i) => x.pos === b[i].pos && Math.abs(x.height - b[i].height) < 1);
+var DocumentPagination = Extension.create({
+  name: "juneDocPagination",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: paginationKey,
+        state: {
+          init: () => ({ breaks: [], pages: 1, decorations: DecorationSet.empty, epoch: 0 }),
+          apply(tr, prev, _old, state) {
+            const meta = tr.getMeta(paginationKey);
+            if (meta?.remeasure) return { ...prev, epoch: prev.epoch + 1 };
+            if (meta?.breaks) {
+              return { ...prev, breaks: meta.breaks, pages: meta.pages ?? prev.pages, decorations: build(state.doc, meta.breaks) };
+            }
+            if (tr.docChanged) {
+              const breaks = prev.breaks.map((b) => ({ ...b, pos: tr.mapping.map(b.pos, -1) })).filter((b) => b.pos >= 0 && b.pos <= state.doc.content.size);
+              return { ...prev, breaks, decorations: prev.decorations.map(tr.mapping, tr.doc) };
+            }
+            return prev;
+          }
+        },
+        props: {
+          decorations: (state) => paginationKey.getState(state)?.decorations
+        },
+        view(view) {
+          let frame = null;
+          let rounds = 0;
+          const schedule = (reset) => {
+            if (reset) rounds = 0;
+            if (frame !== null || typeof window === "undefined") return;
+            const raf = window.requestAnimationFrame ?? ((cb) => window.setTimeout(() => cb(0), 16));
+            frame = raf(() => {
+              frame = null;
+              if (view.isDestroyed) return;
+              const cfg = configs.get(view);
+              const current = paginationKey.getState(view.state);
+              if (!current) return;
+              const next = cfg?.enabled ? measure(view, cfg) : { breaks: [], pages: 1 };
+              if (same(next.breaks, current.breaks) && next.pages === current.pages) return;
+              if (++rounds > 4) return;
+              view.dispatch(view.state.tr.setMeta(paginationKey, next).setMeta("addToHistory", false));
+            });
+          };
+          schedule(true);
+          return {
+            update(v, prevState) {
+              const pg = paginationKey.getState(v.state);
+              const prevPg = paginationKey.getState(prevState);
+              if (v.state.doc !== prevState.doc || pg?.epoch !== prevPg?.epoch) schedule(true);
+              else if (pg !== prevPg) schedule(false);
+            },
+            destroy() {
+              frame = null;
+            }
+          };
+        }
+      })
+    ];
+  }
+});
+function setPaginationConfig(editor, cfg) {
+  if (editor.isDestroyed) return;
+  const prev = configs.get(editor.view);
+  configs.set(editor.view, cfg);
+  if (!prev || prev.enabled !== cfg.enabled || prev.pageHeight !== cfg.pageHeight || prev.gap !== cfg.gap || prev.padTop !== cfg.padTop || prev.padBottom !== cfg.padBottom) {
+    remeasurePagination(editor);
+  }
+}
+function remeasurePagination(editor) {
+  if (editor.isDestroyed) return;
+  const s = paginationKey.getState(editor.state);
+  if (!s) return;
+  editor.view.dispatch(editor.state.tr.setMeta(paginationKey, { remeasure: true }).setMeta("addToHistory", false));
+}
+function getPageCount(editor) {
+  return editor && paginationKey.getState(editor.state)?.pages || 1;
+}
+
+// src/components/document-editor/document-search.ts
+import { Extension as Extension2 } from "@tiptap/core";
+import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
+import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "@tiptap/pm/view";
+var searchKey = new PluginKey2("juneDocSearch");
+function findMatches(doc, term, caseSensitive) {
+  if (!term) return [];
+  const needle = caseSensitive ? term : term.toLowerCase();
+  const out = [];
+  doc.descendants((node, pos) => {
+    if (!node.isTextblock) return true;
+    let text = "";
+    const map = [];
+    node.forEach((child, offset) => {
+      const start = pos + 1 + offset;
+      if (child.isText && child.text) {
+        for (let i = 0; i < child.text.length; i++) map.push(start + i);
+        text += child.text;
+      } else {
+        map.push(start);
+        text += "\uFFFC";
+      }
+    });
+    const hay = caseSensitive ? text : text.toLowerCase();
+    let idx = hay.indexOf(needle);
+    while (idx !== -1) {
+      out.push({ from: map[idx], to: map[idx + needle.length - 1] + 1 });
+      idx = hay.indexOf(needle, idx + needle.length);
+    }
+    return false;
+  });
+  return out;
+}
+function build2(doc, term, caseSensitive, current) {
+  const matches = findMatches(doc, term, caseSensitive);
+  const active = matches.length ? Math.min(Math.max(current, 0), matches.length - 1) : -1;
+  const decorations = DecorationSet2.create(
+    doc,
+    matches.map(
+      (m, i) => Decoration2.inline(m.from, m.to, {
+        class: i === active ? "june-doc__match june-doc__match--active" : "june-doc__match"
+      })
+    )
+  );
+  return { term, caseSensitive, current: active, matches, decorations };
+}
+var DocumentSearch = Extension2.create({
+  name: "juneDocSearch",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin2({
+        key: searchKey,
+        state: {
+          init: () => ({ term: "", caseSensitive: false, current: -1, matches: [], decorations: DecorationSet2.empty }),
+          apply(tr, prev, _old, state) {
+            const meta = tr.getMeta(searchKey);
+            if (!meta && !tr.docChanged) return prev;
+            if (!meta && !prev.term) return prev;
+            return build2(
+              state.doc,
+              meta?.term ?? prev.term,
+              meta?.caseSensitive ?? prev.caseSensitive,
+              meta?.current ?? prev.current
+            );
+          }
+        },
+        props: {
+          decorations: (state) => searchKey.getState(state)?.decorations
+        }
+      })
+    ];
+  }
+});
+function getSearchState(editor) {
+  return editor ? searchKey.getState(editor.state) : void 0;
+}
+function setSearch(editor, meta) {
+  editor.view.dispatch(editor.state.tr.setMeta(searchKey, meta));
+}
+function gotoMatch(editor, step) {
+  const s = getSearchState(editor);
+  if (!s || !s.matches.length) return;
+  const n = s.matches.length;
+  const current = s.current < 0 ? 0 : (s.current + step + n) % n;
+  setSearch(editor, { current });
+  const m = s.matches[current];
+  editor.chain().setTextSelection(m).scrollIntoView().run();
+}
+function replaceCurrent(editor, replacement) {
+  const s = getSearchState(editor);
+  if (!s || s.current < 0) return;
+  const m = s.matches[s.current];
+  editor.chain().command(({ tr }) => {
+    if (replacement) tr.insertText(replacement, m.from, m.to);
+    else tr.delete(m.from, m.to);
+    return true;
+  }).run();
+  gotoMatch(editor, 0);
+}
+function replaceAll(editor, replacement) {
+  const s = getSearchState(editor);
+  if (!s || !s.matches.length) return 0;
+  const matches = [...s.matches].reverse();
+  editor.chain().command(({ tr }) => {
+    for (const m of matches) {
+      if (replacement) tr.insertText(replacement, m.from, m.to);
+      else tr.delete(m.from, m.to);
+    }
+    return true;
+  }).run();
+  return matches.length;
+}
+
+// src/components/document-editor/document-extensions.ts
+var PageBreak = Node.create({
+  name: "pageBreak",
+  group: "block",
+  atom: true,
+  selectable: true,
+  parseHTML() {
+    return [{ tag: "div[data-page-break]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        "data-page-break": "true",
+        class: "june-doc__page-break",
+        style: "break-after: page; page-break-after: always;"
+      })
+    ];
+  },
+  // Markdown has no page break; a thematic break is the closest stable equivalent.
+  renderMarkdown: () => "---",
+  addCommands() {
+    return {
+      setPageBreak: () => ({ chain }) => chain().insertContent([{ type: this.name }, { type: "paragraph" }]).run()
+    };
+  },
+  addKeyboardShortcuts() {
+    return { "Mod-Enter": () => this.editor.commands.setPageBreak() };
+  }
+});
+function createDocumentExtensions() {
+  return [
+    StarterKit.configure({
+      heading: { levels: [1, 2, 3] },
+      // Tiptap v3 StarterKit already includes Link and Underline
+      link: { openOnClick: false, autolink: true, defaultProtocol: "https" }
+    }),
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    TableKit,
+    TextStyle,
+    Color,
+    FontFamily,
+    FontSize,
+    Highlight.configure({ multicolor: true }),
+    Subscript,
+    Superscript,
+    Image.configure({
+      inline: false,
+      allowBase64: true,
+      resize: { enabled: true, minWidth: 48, minHeight: 32, alwaysPreserveAspectRatio: true }
+    }),
+    PageBreak,
+    DocumentSearch,
+    DocumentPagination,
+    // inactive until the live editor sets a page geometry
+    Markdown
+  ];
+}
+
+// src/components/document-editor/document-utils.ts
+var emptyDoc = () => ({ type: "doc", content: [{ type: "paragraph" }] });
+function isDocJSON(value) {
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return v.type === "doc" && (v.content === void 0 || Array.isArray(v.content));
+}
+function looksLikeDocJSON(text) {
+  return /^\s*\{\s*"type"\s*:\s*"doc"/.test(text);
+}
+function tryParseDocJSON(text) {
+  try {
+    const value = JSON.parse(text);
+    return isDocJSON(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+var keyCache = /* @__PURE__ */ new WeakMap();
+function docKey(doc) {
+  let key = keyCache.get(doc);
+  if (key === void 0) {
+    key = JSON.stringify(doc);
+    keyCache.set(doc, key);
+  }
+  return key;
+}
+function plainText(node) {
+  const n = node;
+  if (typeof n.text === "string") return n.text;
+  return (n.content ?? []).map(plainText).join(" ");
+}
+function countWords(text) {
+  const trimmed = text.trim();
+  return trimmed ? trimmed.split(/\s+/).length : 0;
+}
+var wordCache = /* @__PURE__ */ new WeakMap();
+function wordCountOf(doc) {
+  let count = wordCache.get(doc);
+  if (count === void 0) {
+    count = countWords(plainText(doc));
+    wordCache.set(doc, count);
+  }
+  return count;
+}
+function slugify(value) {
+  return value.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+}
+function debounce(fn, wait) {
+  let timer = null;
+  const run = () => {
+    timer = null;
+    fn();
+  };
+  const debounced = (() => {
+    if (timer !== null) clearTimeout(timer);
+    timer = setTimeout(run, wait);
+  });
+  debounced.cancel = () => {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  debounced.flush = () => {
+    if (timer !== null) {
+      clearTimeout(timer);
+      run();
+    }
+  };
+  return debounced;
+}
+function sanitizeHref(input) {
+  const value = input.trim();
+  if (!value) return null;
+  if (/^(https?:|mailto:|tel:)/i.test(value)) return value;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(value)) return null;
+  if (value.startsWith("/") || value.startsWith("#")) return value;
+  return `https://${value}`;
+}
+
+// src/components/document-editor/document-engine.ts
+var scratch = null;
+function scratchEditor() {
+  if (!scratch || scratch.isDestroyed) {
+    scratch = new Editor({ extensions: createDocumentExtensions(), content: "" });
+  }
+  return scratch;
+}
+function parseDocumentContent(text) {
+  const editor = scratchEditor();
+  const trimmed = text.trim();
+  try {
+    if (looksLikeDocJSON(trimmed)) {
+      const json = tryParseDocJSON(trimmed);
+      if (!json) throw new Error("The document JSON could not be parsed");
+      editor.schema.nodeFromJSON(json).check();
+      editor.commands.setContent(json, { emitUpdate: false });
+    } else {
+      editor.commands.setContent(trimmed, { contentType: "markdown", emitUpdate: false });
+    }
+    return editor.getJSON();
+  } catch (error) {
+    throw toJuneError(error, "DOCUMENT_ERROR", "The document content is invalid");
+  }
+}
+function load(doc) {
+  const editor = scratchEditor();
+  editor.commands.setContent(doc, { emitUpdate: false });
+  return editor;
+}
+var docToHtml = (doc) => load(doc).getHTML();
+var docToMarkdown = (doc) => load(doc).getMarkdown();
+var docToText = (doc) => load(doc).getText({ blockSeparator: "\n\n" });
+
+export {
+  JuneError,
+  isJuneError,
+  toJuneError,
+  emptyDoc,
+  docKey,
+  wordCountOf,
+  slugify,
+  debounce,
+  sanitizeHref,
+  setPaginationConfig,
+  remeasurePagination,
+  getPageCount,
+  getSearchState,
+  setSearch,
+  gotoMatch,
+  replaceCurrent,
+  replaceAll,
+  createDocumentExtensions,
+  parseDocumentContent,
+  docToHtml,
+  docToMarkdown,
+  docToText
+};

package/dist/{document-engine-C6ILFMRP.js → document-engine-RKD5SLXR.js}

@@ -3,7 +3,7 @@ import {
   docToMarkdown,
   docToText,
   parseDocumentContent
-} from "./chunk-HFHRSNIL.js";
+} from "./chunk-VFZI3SEL.js";
 export {
   docToHtml,
   docToMarkdown,