@june-ai/june-ui 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -16,6 +16,13 @@
 - 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,

package/dist/block-automount.js

@@ -0,0 +1,2 @@
+globalThis[Symbol.for("openui.devtools.autoMount")] = true;
+globalThis[Symbol.for("openui.devtools.blockedByJune")] = true;

package/dist/{chunk-CZE533PM.js → chunk-VFZI3SEL.js}

@@ -35,11 +35,183 @@ import { Color, FontFamily, FontSize, TextStyle } from "@tiptap/extension-text-s
 import { Markdown } from "@tiptap/markdown";
 import StarterKit from "@tiptap/starter-kit";
 
-// src/components/document-editor/document-search.ts
+// 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 searchKey = new PluginKey("juneDocSearch");
+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();
@@ -68,32 +240,32 @@ function findMatches(doc, term, caseSensitive) {
   });
   return out;
 }
-function build(doc, term, caseSensitive, current) {
+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 = DecorationSet.create(
+  const decorations = DecorationSet2.create(
     doc,
     matches.map(
-      (m, i) => Decoration.inline(m.from, m.to, {
+      (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 = Extension.create({
+var DocumentSearch = Extension2.create({
   name: "juneDocSearch",
   addProseMirrorPlugins() {
     return [
-      new Plugin({
+      new Plugin2({
         key: searchKey,
         state: {
-          init: () => ({ term: "", caseSensitive: false, current: -1, matches: [], decorations: DecorationSet.empty }),
+          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 build(
+            return build2(
               state.doc,
               meta?.term ?? prev.term,
               meta?.caseSensitive ?? prev.caseSensitive,
@@ -201,6 +373,8 @@ function createDocumentExtensions() {
     }),
     PageBreak,
     DocumentSearch,
+    DocumentPagination,
+    // inactive until the live editor sets a page geometry
     Markdown
   ];
 }
@@ -330,6 +504,9 @@ export {
   slugify,
   debounce,
   sanitizeHref,
+  setPaginationConfig,
+  remeasurePagination,
+  getPageCount,
   getSearchState,
   setSearch,
   gotoMatch,

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

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