@reportwright/viewer 0.12.1 → 0.13.0

package/dist/peer/designer.js

@@ -10,16 +10,18 @@ import {
   setShadowStyles,
   t,
   uiFontCss
-} from "./chunk-6I2EAAVN.js";
+} from "./chunk-2CD5COHN.js";
 import {
   customFonts,
-  fontStore,
   fontsBase,
+  loadFontStore,
   loadModelFonts,
   origin,
+  reportFetch,
   setAssetBase,
+  setFetchPolicy,
   setStandalone
-} from "./chunk-BQFI3DHK.js";
+} from "./chunk-MKY3SDXU.js";
 import {
   BASE_STYLE,
   DEFAULT_THEME,
@@ -28,10 +30,10 @@ import {
   ITEMS,
   ODATA_DEFAULT_PAGES,
   ODATA_MAX_PAGES,
-  PAGE_SIZES,
   PALETTES,
   TEXT_STYLE_PROPS,
   THEME_COLORS,
+  TextMeasurer,
   XmlError,
   bestXmlRows,
   buildDataSets,
@@ -40,7 +42,7 @@ import {
   detectFields,
   evalValue,
   findItemNamed,
-  fromPt,
+  finishText,
   functionTable,
   isDynamic,
   isTablix,
@@ -49,31 +51,29 @@ import {
   layoutItems,
   loadBarcodes,
   loadSources,
-  normBox,
   normalizeMatrix,
   odataMetadata,
   parseBorder,
   parseXml,
   render,
-  reportFetch,
-  resolvePage,
   resolveParameters,
-  setFetchPolicy,
   shiftItems,
   sourceRows,
   sourceUrl,
   stylePropsFor,
   themeContext,
-  toPt,
   toText,
   validate,
   withPartProps,
   xmlRowPaths
-} from "../chunk-VNOWPSE6.js";
+} from "../chunk-EK5CJY22.js";
 import {
-  TextMeasurer,
-  finishText
-} from "../chunk-ULKEEARQ.js";
+  PAGE_SIZES,
+  fromPt,
+  normBox,
+  resolvePage,
+  toPt
+} from "../chunk-BR5K6SBL.js";
 import "../chunk-72S6DETS.js";
 import {
   currencyOf
@@ -83,14 +83,14 @@ import {
   fontFaceCss,
   fontFamilyCss,
   pageToSvg
-} from "../chunk-M6AYND5G.js";
+} from "../chunk-UJL7C2AS.js";
 import {
   BUNDLED_FAMILIES,
   FONT_FAMILIES,
   allFontKeys,
   fallbackKeys,
   resolveFontKey
-} from "../chunk-Z7MKH66Z.js";
+} from "../chunk-QFLVVM3H.js";
 
 // src/embed/designer.js
 import { createElement as createElement2 } from "react";
@@ -6861,10 +6861,10 @@ function readReportFile(name2, text) {
 }
 
 // src/designer/Designer.jsx
-import { Fragment as Fragment13, useEffect as useEffect13, useLayoutEffect as useLayoutEffect3, useMemo as useMemo5, useRef as useRef7, useState as useState17 } from "react";
+import { Fragment as Fragment13, useEffect as useEffect13, useLayoutEffect as useLayoutEffect3, useMemo as useMemo5, useRef as useRef8, useState as useState17 } from "react";
 
 // src/designer/ui.jsx
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect, useRef, useState } from "react";
 
 // src/designer/fieldCheck.js
 function exprParts(value) {
@@ -6998,13 +6998,9 @@ function useStore(api, selector = identity) {
   React.useDebugValue(slice);
   return slice;
 }
-var createImpl = (createState) => {
-  const api = createStore(createState);
-  const useBoundStore = (selector) => useStore(api, selector);
-  Object.assign(useBoundStore, api);
-  return useBoundStore;
-};
-var create = ((createState) => createState ? createImpl(createState) : createImpl);
+
+// src/designer/store.js
+import { createContext, useContext } from "react";
 
 // node_modules/immer/dist/immer.mjs
 var NOTHING = /* @__PURE__ */ Symbol.for("immer-nothing");
@@ -7853,6 +7849,17 @@ function pageOf2(def, key2 = "body") {
   return resolvePage({ ...def.page || {}, ...sec?.page || {} });
 }
 var rid = () => Math.random().toString(36).slice(2, 10);
+function stableId(key2, taken) {
+  let h = 2166136261;
+  for (let i2 = 0; i2 < key2.length; i2++) {
+    h ^= key2.charCodeAt(i2);
+    h = Math.imul(h, 16777619);
+  }
+  let id = `i${(h >>> 0).toString(36)}`;
+  for (let k = 2; taken.has(id); k++) id = `i${(h >>> 0).toString(36)}_${k}`;
+  taken.add(id);
+  return id;
+}
 function walk(def, fn3) {
   const go = (list2, parent, section) => list2.forEach((it, i2) => {
     fn3(it, list2, i2, parent, section);
@@ -7878,9 +7885,15 @@ function normalize(def) {
       if (x && typeof x === "object") x.items || (x.items = []);
     }
     const used = allNames(d);
+    const ids = /* @__PURE__ */ new Set();
     walk(d, (it) => {
-      it.id || (it.id = rid());
+      if (it.id) ids.add(it.id);
+    });
+    const path = /* @__PURE__ */ new Map();
+    walk(d, (it, list2, i2, parent, section) => {
+      path.set(it, `${parent ? path.get(parent) : section}/${i2}`);
       if (!it.name) it.name = uniqueName(used, ITEMS[it.type]?.label.replace(/\s/g, "") || "Item");
+      it.id || (it.id = stableId(`${path.get(it)}/${it.name}`, ids));
       if (NESTING.has(it.type)) it.items || (it.items = []);
       if (it.type === "table" && Array.isArray(it.columns)) tableSync(it);
     });
@@ -7904,7 +7917,7 @@ function findItem(def, id) {
   });
   return hit;
 }
-var useDesigner = create((set2, get2) => ({
+var newDesignerStore = () => createStore((set2, get2) => ({
   id: null,
   def: null,
   saved: true,
@@ -8035,7 +8048,18 @@ var useDesigner = create((set2, get2) => ({
     set2({ rev: (res.headers.get("etag") || "").replace(/^W\/|"/g, "") || null, conflict: null });
   }
 }));
-var S = () => useDesigner.getState();
+var active = newDesignerStore();
+var DesignerStore = createContext(null);
+var activateStore = (store) => {
+  active = store;
+};
+var activeStore2 = () => active;
+var useDesignerStore = () => useContext(DesignerStore) || active;
+var useDesigner = (sel) => useStore(useDesignerStore(), sel);
+useDesigner.getState = () => active.getState();
+useDesigner.setState = (...a) => active.setState(...a);
+useDesigner.subscribe = (fn3) => active.subscribe(fn3);
+var S = () => active.getState();
 function bodyWidth(def, key2 = "body") {
   return pageOf2(def, key2).bodyWidth;
 }
@@ -8083,7 +8107,7 @@ function addItem(type, section, x, y, extra = {}, parentId = null) {
     } else {
       const sec = secOf(d, section);
       sec.items.push(it);
-      if (it.y + it.h > sec.height) sec.height = Math.ceil(it.y + it.h + (isBodyKey(section) ? 24 : 4));
+      if (it.y + it.h > (sec.height || 0)) sec.height = Math.ceil(it.y + it.h + (isBodyKey(section) ? 24 : 4));
     }
   });
   S().select({ kind: "items", ids: [id] });
@@ -8109,9 +8133,21 @@ function insertItem(type, section, x, y, extra = {}, parentId = null) {
 function updateItem(id, recipe, key2) {
   S().apply((d) => {
     const f = findItem(d, id);
-    if (f) recipe(f.item, d, f.section, f);
+    if (!f) return;
+    recipe(f.item, d, f.section, f);
+    minSize(f.item);
+    const nf = findItem(d, id);
+    if (nf) growToFit(d, nf);
   }, key2);
 }
+function minSize(it) {
+  for (const k of ["w", "h"]) if (typeof it[k] === "number" && !(it[k] >= 0)) it[k] = 0;
+  if (it.type === "line") {
+    if (it.w === 0 && it.h === 0) it.w = 1;
+    return;
+  }
+  for (const k of ["w", "h"]) if (typeof it[k] === "number" && it[k] < 1) it[k] = 1;
+}
 function moveItems(ids, dx, dy) {
   if (!dx && !dy) return;
   if (S().cells && wouldOverlap(S().def, ids, (it) => ({ x: it.x + dx, y: it.y + dy, w: it.w, h: it.h }))) {
@@ -8242,14 +8278,16 @@ function duplicateSelection() {
       const f = findItem(d, id);
       if (!f) continue;
       const copy = cloneWithIds(f.item, used);
-      copy.x += 8;
-      copy.y += 8;
+      copy.x += PASTE_OFFSET;
+      copy.y += PASTE_OFFSET;
+      growToFit(d, { ...f, item: copy });
       f.list.push(copy);
       newIds.push(copy.id);
     }
   });
   if (newIds.length) S().select({ kind: "items", ids: newIds });
 }
+var PASTE_OFFSET = 12;
 var CLIP = "pagewright/items@1";
 async function copySelection() {
   const { sel, def } = S();
@@ -8264,43 +8302,41 @@ async function copySelection() {
   return items.length;
 }
 var memClip = null;
-async function pasteItems(section = "body") {
-  let text = null;
+var clipOf = (text) => {
   try {
-    text = await navigator.clipboard.readText();
+    const d = JSON.parse(text);
+    return d?.kind === CLIP && Array.isArray(d.items) ? d : null;
   } catch {
-    text = memClip;
-  }
-  if (!text || !text.includes(CLIP)) text = memClip;
-  let data;
-  try {
-    data = JSON.parse(text);
-  } catch {
-    return 0;
+    return null;
   }
-  if (data?.kind !== CLIP || !Array.isArray(data.items)) return 0;
+};
+function pasteItems(section = "body", text = null) {
+  const st = active;
+  const data = clipOf(text) || clipOf(memClip);
+  if (!data) return 0;
   const ids = [];
-  S().apply((d) => {
+  st.getState().apply((d) => {
     const used = allNames(d);
     for (const it of data.items) {
       const c = cloneWithIds(it, used);
-      c.x += 12;
-      c.y += 12;
+      c.x += PASTE_OFFSET;
+      c.y += PASTE_OFFSET;
       if (c.type === "table" && !isBodyKey(section)) continue;
       secOf(d, section).items.push(c);
+      growToFit(d, { section, parent: null, item: c });
       ids.push(c.id);
     }
   });
-  if (ids.length) S().select({ kind: "items", ids });
+  if (ids.length) st.getState().select({ kind: "items", ids });
   return ids.length;
 }
-function rowsOf(t3, part, create2 = false) {
+function rowsOf(t3, part, create = false) {
   const m = /^g(\d+)([hf])$/.exec(part);
   const holder = m ? t3.groups?.[Number(m[1])] : t3;
   if (!holder) return null;
   const key2 = m ? m[2] === "h" ? "header" : "footer" : part;
   if (!holder[key2]) {
-    if (!create2) return [];
+    if (!create) return [];
     holder[key2] = [];
   }
   return holder[key2];
@@ -8500,6 +8536,7 @@ function tableRemoveGroup(id, level) {
 }
 var IMAGE_MAX = 10 * 1024 * 1024;
 async function uploadImages(files, T) {
+  const st = active;
   const names = [];
   let err = null;
   for (const f of files) {
@@ -8518,7 +8555,7 @@ async function uploadImages(files, T) {
       r.readAsDataURL(f);
     });
     const base2 = f.name.replace(/\.[^.]+$/, "").replace(/\W+/g, "_").replace(/^_+|_+$/g, "") || "image";
-    S().apply((d) => {
+    st.getState().apply((d) => {
       d.images || (d.images = {});
       let n = base2, k = 2;
       while (d.images[n]) n = `${base2}${k++}`;
@@ -8585,6 +8622,13 @@ function wouldOverlap(def, ids, rectOf2) {
   }
   return false;
 }
+function setMatrixShow(v, show) {
+  const pct = !!show && show !== "value";
+  if (pct) v.show = show;
+  else delete v.show;
+  if (pct && (!v.format || v.format === "N0")) v.format = "P1";
+  else if (!pct && v.format === "P1") v.format = "N0";
+}
 
 // src/designer/ui.jsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8633,18 +8677,18 @@ function ColorInput({ value, onChange }) {
     /* @__PURE__ */ jsx(TextInput, { value, onChange: (v) => onChange(v === "" ? void 0 : v), mono: true, placeholder: T("i_colorPh") })
   ] });
 }
-var FieldScope = createContext(void 0);
+var FieldScope = createContext2(void 0);
 var issueText = (T, i2) => i2.suggest ? T("ux_unknownFieldSuggest", { name: i2.name, suggest: i2.suggest }) : T("ux_unknownField", { name: i2.name });
 function ExprInput({ value, onChange, onOpen, placeholder: placeholder2 }) {
   const T = useT();
-  const scope = useContext(FieldScope);
+  const scope = useContext2(FieldScope);
   const dataSets = useDesigner((s) => s.def?.dataSets);
   const err = value ? checkValue(value) : null;
   const issues = !err && value && scope !== void 0 ? fieldIssues(value, dataSets, scope) : [];
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "expr-row", children: [
       /* @__PURE__ */ jsx(TextInput, { value, onChange, mono: true, invalid: !!err, className: issues.length ? "squiggle" : void 0, "aria-invalid": err || issues.length ? true : void 0, placeholder: placeholder2 || T("i_exprPh") }),
-      /* @__PURE__ */ jsx("button", { className: "fx", title: T("i_openExprEditor"), "aria-label": T("i_openExprEditor"), onClick: onOpen, type: "button", children: "fx" })
+      /* @__PURE__ */ jsx("button", { className: "fx", title: T("i_openExprEditor"), "aria-label": `fx: ${T("i_openExprEditor")}`, onClick: onOpen, type: "button", children: "fx" })
     ] }),
     err && /* @__PURE__ */ jsx("div", { className: "err", children: err }),
     issues.map((i2, k) => /* @__PURE__ */ jsx("div", { className: "warn", "data-testid": "field-warning", children: issueText(T, i2) }, k))
@@ -8664,14 +8708,19 @@ function Check({ label, checked, onChange }) {
   ] });
 }
 function Dialog({ title, children, onClose, footer, wide, className = "" }) {
+  const ref = useRef(null);
   useEffect(() => {
+    const inOther = (e) => {
+      const mine = ref.current?.closest(".designer");
+      return e.composedPath().some((n) => n !== mine && n?.classList?.contains("designer"));
+    };
     const k = (e) => {
-      if (e.key === "Escape" && !e.defaultPrevented) onClose();
+      if (e.key === "Escape" && !e.defaultPrevented && !inOther(e)) onClose();
     };
     window.addEventListener("keydown", k);
     return () => window.removeEventListener("keydown", k);
   }, [onClose]);
-  return /* @__PURE__ */ jsx("div", { className: "scrim", onPointerDown: (e) => {
+  return /* @__PURE__ */ jsx("div", { className: "scrim", ref, onPointerDown: (e) => {
     if (e.target === e.currentTarget) onClose();
   }, children: /* @__PURE__ */ jsxs("div", { className: `dialog${wide ? " wide" : ""}${className ? ` ${className}` : ""}`, role: "dialog", "aria-modal": "true", "aria-label": title, children: [
     /* @__PURE__ */ jsx("header", { children: title }),
@@ -8687,10 +8736,10 @@ function Link({ href, children, prefetch, replace: replace2, scroll, shallow, ..
 }
 
 // src/designer/SvgHtml.jsx
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useRef as useRef2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function SvgHtml({ html, as: Tag2 = "span", ...rest }) {
-  const ref = useRef(
+  const ref = useRef2(
     /** @type {HTMLElement|null} */
     null
   );
@@ -8703,7 +8752,7 @@ function SvgHtml({ html, as: Tag2 = "span", ...rest }) {
 }
 
 // src/designer/Canvas.jsx
-import { createContext as createContext2, useContext as useContext2, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState4 } from "react";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState4 } from "react";
 
 // src/designer/tableGen.js
 var HEAD = { fontWeight: "bold", backgroundColor: "#f1f5f9", borderBottom: "0.75 solid #94a3b8" };
@@ -8844,7 +8893,11 @@ function useFontFamilies() {
   const fonts = useDesigner((s) => s.fonts);
   return [...BUNDLED_FAMILIES, ...[...new Set(fonts.map((f) => f.family))].sort()];
 }
-var refresh = async () => useDesigner.getState().setUi({ fonts: await customFonts(true) });
+var refresh = async () => {
+  const api = activeStore2();
+  const fonts = await customFonts(true);
+  api.getState().setUi({ fonts });
+};
 function FontsDialog({ onClose }) {
   const fonts = useDesigner((s) => s.fonts);
   const [file, setFile] = useState2(null);
@@ -8943,24 +8996,27 @@ var apply = (fn3, key2) => S2().apply(fn3, key2);
 var server = () => S2().embed?.server || "";
 var noServer = () => !!S2().embed && !S2().embed.server;
 var pending = /* @__PURE__ */ new Map();
-function fetchReused(id, force = false) {
+function fetchReused(id, force = false, api = activeStore2()) {
   if (!id || typeof id !== "string" || id.startsWith("=")) return Promise.resolve(null);
-  if (!force && S2().reused[id]) return Promise.resolve(S2().reused[id]);
-  if (pending.has(id)) return pending.get(id);
-  if (noServer()) return Promise.resolve(null);
-  const p = fetch(`${server()}/api/reports/${encodeURIComponent(id)}`).then((r) => r.ok ? r.json() : { __error: `HTTP ${r.status}` }).catch((e) => ({ __error: e.message })).then((d) => {
-    pending.delete(id);
-    useDesigner.setState((s) => ({ reused: { ...s.reused, [id]: d } }));
+  const st = api.getState();
+  if (!force && st.reused[id]) return Promise.resolve(st.reused[id]);
+  const server2 = st.embed?.server || "", key2 = `${server2} ${id}`;
+  const keep = (d) => {
+    api.setState((s) => ({ reused: { ...s.reused, [id]: d } }));
     return d;
-  });
-  pending.set(id, p);
-  return p;
+  };
+  if (pending.has(key2)) return pending.get(key2).then(keep);
+  if (st.embed && !server2) return Promise.resolve(null);
+  const p = fetch(`${server2}/api/reports/${encodeURIComponent(id)}`).then((r) => r.ok ? r.json() : { __error: `HTTP ${r.status}` }).catch((e) => ({ __error: e.message })).finally(() => pending.delete(key2));
+  pending.set(key2, p);
+  return p.then(keep);
 }
 function useReused(id) {
+  const api = useDesignerStore();
   const d = useDesigner((s) => id ? s.reused[id] : void 0);
   useEffect2(() => {
-    fetchReused(id);
-  }, [id]);
+    fetchReused(id, false, api);
+  }, [id, api]);
   return d && !d.__error ? d : null;
 }
 var listCache = null;
@@ -9529,7 +9585,7 @@ function useDesignIssues() {
     return [...designIssues(def, bands, extents || {}), ...checkIssues(bands, [...validate(def).errors, ...saveCheck?.missing || []])];
   }, [def, extents, saveCheck]);
 }
-var IssueMap = createContext2(/* @__PURE__ */ new Map());
+var IssueMap = createContext3(/* @__PURE__ */ new Map());
 function issueLine(T, i2) {
   if (i2.kind === "overlap") return T("ux_issueOverlap", { name: i2.name, other: i2.other });
   if (i2.kind === "wide") return T("ux_issueWide", { name: i2.name, width: i2.width, room: i2.room });
@@ -9594,7 +9650,7 @@ function Canvas() {
   const bands = sectionList(def);
   const widths2 = Object.fromEntries(bands.map((s) => [s.key, bodyWidth(def, s.key)]));
   const bw = Math.max(...Object.values(widths2));
-  const scrollRef = useRef2(null);
+  const scrollRef = useRef3(null);
   const [fitW, setFitW] = useState4(0);
   useEffect3(() => {
     if (zoom !== "fit" || !scrollRef.current) return;
@@ -9688,7 +9744,7 @@ function Band({ section, label, scale, bw: bandW, drag, setDrag, phBox = null })
   const off = phBox || mb?.off || null;
   const contentList = useDesigner((s) => s.def.sections?.content);
   const bw = off?.w || bandW;
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const [marquee, setMarquee] = useState4(null);
   const [dropping, setDropping] = useState4(false);
   const h = drag?.mode === "band" && drag.section === section ? drag.h : sec.height || 0;
@@ -9864,8 +9920,9 @@ var alerted = 0;
 function alertOnce(msg) {
   if (Date.now() - alerted > 3e3) {
     alerted = Date.now();
-    useDesigner.setState({ saveError: msg });
-    setTimeout(() => useDesigner.setState({ saveError: null }), 3e3);
+    const api = activeStore2();
+    api.setState({ saveError: msg });
+    setTimeout(() => api.setState({ saveError: null }), 3e3);
   }
 }
 function fieldStyle(f) {
@@ -9873,11 +9930,31 @@ function fieldStyle(f) {
   const format = formatFor({ name: f.field, type: f.type }, (st.sample?.dataSets?.[f.dataSet] || []).slice(0, 200), { currency: st.def?.currency });
   return format ? { format } : {};
 }
+function useItemKeys(item) {
+  const T = useT2();
+  const type = T(`item_${item.type}`) === `item_${item.type}` ? ITEMS[item.type]?.label || item.type : T(`item_${item.type}`);
+  return {
+    tabIndex: 0,
+    role: "group",
+    "data-item-key": item.id,
+    "aria-label": T("b9_itemLabel", { type, name: item.name, x: round(item.x), y: round(item.y) }),
+    onKeyDown: (e) => {
+      if (e.target !== e.currentTarget || e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      e.stopPropagation();
+      const st = useDesigner.getState();
+      const cur2 = st.sel.kind === "items" ? st.sel.ids : [];
+      const ids = !e.shiftKey ? [item.id] : cur2.includes(item.id) ? cur2.filter((i2) => i2 !== item.id) : [...cur2, item.id];
+      st.select(ids.length ? { kind: "items", ids } : { kind: "report" });
+    }
+  };
+}
 function useItemDrag(item, scale, setDrag) {
   return (e) => {
     if (e.button !== 0) return;
     e.preventDefault();
     e.stopPropagation();
+    e.currentTarget.closest?.("[data-item-key]")?.focus({ preventScroll: true });
     const st = useDesigner.getState();
     let ids;
     if (e.shiftKey) {
@@ -9950,7 +10027,7 @@ function AnyItem(props) {
   return layer?.locked ? /* @__PURE__ */ jsx6("div", { className: "layer-locked", "data-locked": props.item.name, children: el }) : el;
 }
 function NestChildren({ item, scale, drag, setDrag, section }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const [over, setOver] = useState4(false);
   const accepts = (e) => e.dataTransfer.types.includes(MIME_TOOL) || e.dataTransfer.types.includes(MIME_FIELD) || e.dataTransfer.types.includes(MIME_PART);
   const onDrop = (e) => {
@@ -9996,8 +10073,9 @@ function ItemView({ item, scale, drag, setDrag, bw, nest, section }) {
   const selected = useDesigner((s) => s.sel.kind === "items" && s.sel.ids.includes(item.id));
   const single = useDesigner((s) => s.sel.kind === "items" && s.sel.ids.length === 1);
   const onDown = useItemDrag(item, scale, setDrag);
+  const keys = useItemKeys(item);
   const r = rectOf(item, drag);
-  const problems = useContext2(IssueMap).get(item.id);
+  const problems = useContext3(IssueMap).get(item.id);
   const onHandle = (dir) => (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -10056,6 +10134,7 @@ function ItemView({ item, scale, drag, setDrag, bw, nest, section }) {
       title: problems?.join("\n"),
       style: { left: r.x * scale, top: r.y * scale, width: Math.max(r.w * scale, 2), height: Math.max(r.h * scale, 2) },
       onPointerDown: onDown,
+      ...keys,
       children: [
         nest ? /* @__PURE__ */ jsx6(NestBox, { item: { ...item, ...r }, scale }) : /* @__PURE__ */ jsx6(ItemBody, { item: { ...item, ...r }, scale }),
         nest && /* @__PURE__ */ jsx6(NestChildren, { item, scale, drag, setDrag, section }),
@@ -10073,8 +10152,8 @@ function NestBox({ item, scale }) {
 }
 var LIVE = /* @__PURE__ */ new Set(["chart", "matrix", "barcode", "sparkline", "databar", "bullet", "iconset", "rangebar", "richtext"]);
 var measurer = null;
-async function paintItemSvg(shape2, def, sample) {
-  const store = fontStore();
+async function paintItemSvg(shape2, def, sample, api = activeStore2()) {
+  const store = await loadFontStore();
   await Promise.all([store.load(), customFonts()]);
   if (shape2.type === "barcode" || hasType(shape2.items, "barcode")) await loadBarcodes();
   measurer || (measurer = new TextMeasurer(store));
@@ -10085,7 +10164,7 @@ async function paintItemSvg(shape2, def, sample) {
   } catch {
   }
   const base2 = { fontFamily: "Inter", fontSize: 9, color: "#1f2937", padding: 2, lineHeight: 1.25, textAlign: "auto", verticalAlign: "top", ...def.styles?.base || {} };
-  const theme3 = themeContext(typeof def.theme === "string" && useDesigner.getState().reused[def.theme]?.themeDef || def.themeDef);
+  const theme3 = themeContext(typeof def.theme === "string" && api.getState().reused[def.theme]?.themeDef || def.themeDef);
   const ctxBase = { params, globals: { PageNumber: 1, TotalPages: 1, ExecutionTime: /* @__PURE__ */ new Date(), ReportName: def.name }, dataSets, fields: null, locale: def.locale, currency: def.currency, functions: functionTable(def), theme: theme3 };
   let seq = 0;
   const lc = {
@@ -10127,6 +10206,7 @@ async function paintItemSvg(shape2, def, sample) {
   return { html: pageToSvg({ items }, shape2.w, h, { background: false }), h, w };
 }
 function LivePreview({ item, scale }) {
+  const api = useDesignerStore();
   const sample = useDesigner((s) => s.sample);
   const def = useDesigner((s) => s.def);
   const [svg, setSvg] = useState4(null);
@@ -10136,11 +10216,11 @@ function LivePreview({ item, scale }) {
     let alive = true;
     const t3 = setTimeout(async () => {
       try {
-        const out = await paintItemSvg(shape2, def, sample);
+        const out = await paintItemSvg(shape2, def, sample, api);
         if (alive) {
           setSvg(out);
-          const ex2 = useDesigner.getState().extents || {};
-          if (Math.round(ex2[item.id]?.w || 0) !== Math.round(out.w)) useDesigner.setState({ extents: { ...ex2, [item.id]: { w: out.w } } });
+          const ex2 = api.getState().extents || {};
+          if (Math.round(ex2[item.id]?.w || 0) !== Math.round(out.w)) api.setState({ extents: { ...ex2, [item.id]: { w: out.w } } });
         }
       } catch (e) {
         if (alive) setSvg({ error: e.message });
@@ -10274,17 +10354,18 @@ function TableView({ item, scale, drag, setDrag }) {
   const readOnly2 = useDesigner((s) => s.readOnly);
   const tableSelected = sel.kind === "items" && sel.ids.includes(item.id);
   const onGrip = useItemDrag(item, scale, setDrag);
+  const keys = useItemKeys(item);
   const r = rectOf(item, drag);
   const widths2 = item.columns.map((c, i2) => drag?.mode === "col" && drag.id === item.id && drag.col === i2 ? drag.w : c.width);
   const [dropCell, setDropCell] = useState4(null);
   const [menu, setMenu] = useState4(null);
-  const problems = useContext2(IssueMap).get(item.id);
-  const tblRef = useRef2(null);
+  const problems = useContext3(IssueMap).get(item.id);
+  const tblRef = useRef3(null);
   const chosen = sel.kind === "cell" && sel.id === item.id ? selCells(sel) : [];
   useEffect3(() => {
     if (!menu) return void 0;
     const close = (e) => {
-      if (e.type === "keydown" ? e.key === "Escape" : !e.target.closest?.(".cell-menu")) setMenu(null);
+      if (e.type === "keydown" ? e.key === "Escape" : !e.composedPath().some((n) => n.classList?.contains("cell-menu"))) setMenu(null);
     };
     window.addEventListener("pointerdown", close, true);
     window.addEventListener("keydown", close);
@@ -10297,6 +10378,7 @@ function TableView({ item, scale, drag, setDrag }) {
     e.stopPropagation();
     if (e.button !== 0) return;
     e.preventDefault();
+    e.currentTarget.closest("[data-item-key]")?.focus({ preventScroll: true });
     const st = useDesigner.getState();
     const here = { part, row: ri, col: ci };
     const cur2 = st.sel.kind === "cell" && st.sel.id === item.id ? st.sel : null;
@@ -10372,7 +10454,7 @@ function TableView({ item, scale, drag, setDrag }) {
         const h = t3.header?.[t3.header.length - 1]?.cells?.[ci];
         if (h && (!h.value || /^Column \d+$/.test(h.value))) h.value = f.field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase());
         if (h && f.type === "number") h.style = { ...h.style || {}, textAlign: "right" };
-      } else if ((part === "footer" || /^g\d+f$/.test(part)) && f.type === "number") {
+      } else if ((part === "footer" || /^g\d+[hf]$/.test(part)) && f.type === "number") {
         cell.value = `=Sum(Fields.${f.field})`;
         cell.style = { ...cell.style || {}, ...fieldStyle(f) };
       } else cell.value = `=Fields.${f.field}`;
@@ -10380,7 +10462,7 @@ function TableView({ item, scale, drag, setDrag }) {
     useDesigner.getState().select({ kind: "cell", id: item.id, part, row: ri, col: ci });
   };
   let first = true;
-  return /* @__PURE__ */ jsxs4("div", { ref: tblRef, className: `tbl${tableSelected ? " sel" : ""}${problems ? " issue" : ""}`, "data-item": item.name, style: { left: r.x * scale, top: r.y * scale }, children: [
+  return /* @__PURE__ */ jsxs4("div", { ref: tblRef, className: `tbl${tableSelected ? " sel" : ""}${problems ? " issue" : ""}`, "data-item": item.name, style: { left: r.x * scale, top: r.y * scale }, ...keys, children: [
     problems && /* @__PURE__ */ jsx6("div", { className: "issue-tag", title: problems.join("\n"), "aria-label": problems.join(". "), children: "!" }),
     /* @__PURE__ */ jsx6("div", { className: "grip", title: "Select or move the table", onPointerDown: onGrip, children: "⠿" }),
     /* @__PURE__ */ jsx6("div", { className: "col-handles", "aria-label": T("ux_columns"), role: "group", children: widths2.map((w, ci) => /* @__PURE__ */ jsx6(
@@ -10510,13 +10592,13 @@ function TableView({ item, scale, drag, setDrag }) {
 }
 
 // src/designer/Inspector.jsx
-import { Fragment as Fragment5, useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState7 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState7 } from "react";
 
 // src/designer/ExpressionEditor.jsx
-import { useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
+import { useMemo as useMemo2, useRef as useRef5, useState as useState5 } from "react";
 
 // src/designer/ExprCode.jsx
-import { forwardRef, useEffect as useEffect4, useImperativeHandle, useRef as useRef3 } from "react";
+import { forwardRef, useEffect as useEffect4, useImperativeHandle, useRef as useRef4 } from "react";
 
 // node_modules/@marijn/find-cluster-break/src/index.js
 var rangeFrom = [];
@@ -12260,8 +12342,8 @@ var StateField = class _StateField {
   way it is initialized. Can be useful when you need to provide a
   non-default starting value for the field.
   */
-  init(create2) {
-    return [this, initField.of({ field: this, create: create2 })];
+  init(create) {
+    return [this, initField.of({ field: this, create })];
   }
   /**
   State field instances can be used as
@@ -13489,10 +13571,10 @@ var RangeSet = class _RangeSet {
     for (; ; ) {
       let curTo = Math.min(cursor.to, to);
       if (cursor.point) {
-        let active = cursor.activeForPoint(cursor.to);
-        let openCount = cursor.pointFrom < from ? active.length + 1 : cursor.point.startSide < 0 ? active.length : Math.min(active.length, openRanges);
-        iterator.point(pos, curTo, cursor.point, active, openCount, cursor.pointRank);
-        openRanges = Math.min(cursor.openEnd(curTo), active.length);
+        let active2 = cursor.activeForPoint(cursor.to);
+        let openCount = cursor.pointFrom < from ? active2.length + 1 : cursor.point.startSide < 0 ? active2.length : Math.min(active2.length, openRanges);
+        iterator.point(pos, curTo, cursor.point, active2, openCount, cursor.pointRank);
+        openRanges = Math.min(cursor.openEnd(curTo), active2.length);
       } else if (curTo > pos) {
         iterator.span(pos, curTo, cursor.active, openRanges);
         openRanges = cursor.openEnd(curTo);
@@ -13906,14 +13988,14 @@ var SpanCursor = class {
   activeForPoint(to) {
     if (!this.active.length)
       return this.active;
-    let active = [];
+    let active2 = [];
     for (let i2 = this.active.length - 1; i2 >= 0; i2--) {
       if (this.activeRank[i2] < this.pointRank)
         break;
       if (this.activeTo[i2] > to || this.activeTo[i2] == to && this.active[i2].endSide >= this.point.endSide)
-        active.push(this.active[i2]);
+        active2.push(this.active[i2]);
     }
-    return active.reverse();
+    return active2.reverse();
   }
   openEnd(to) {
     let open = 0;
@@ -15432,9 +15514,9 @@ var viewPlugin = /* @__PURE__ */ Facet.define({
   }
 });
 var ViewPlugin = class _ViewPlugin {
-  constructor(id, create2, domEventHandlers, domEventObservers, buildExtensions) {
+  constructor(id, create, domEventHandlers, domEventObservers, buildExtensions) {
     this.id = id;
-    this.create = create2;
+    this.create = create;
     this.domEventHandlers = domEventHandlers;
     this.domEventObservers = domEventObservers;
     this.baseExtensions = buildExtensions(this);
@@ -15450,9 +15532,9 @@ var ViewPlugin = class _ViewPlugin {
   Define a plugin from a constructor function that creates the
   plugin's value, given an editor view.
   */
-  static define(create2, spec) {
+  static define(create, spec) {
     const { eventHandlers, eventObservers, provide, decorations: deco } = spec || {};
-    return new _ViewPlugin(nextPluginID++, create2, eventHandlers, eventObservers, (plugin) => {
+    return new _ViewPlugin(nextPluginID++, create, eventHandlers, eventObservers, (plugin) => {
       let ext = [];
       if (deco)
         ext.push(decorations.of((view) => {
@@ -15540,11 +15622,11 @@ function getIsolatedRanges(view, line2) {
   RangeSet.spans(sets, line2.from, line2.to, {
     point() {
     },
-    span(fromDoc, toDoc, active, open) {
+    span(fromDoc, toDoc, active2, open) {
       let from = fromDoc - line2.from, to = toDoc - line2.from;
       let level = result;
-      for (let i2 = active.length - 1; i2 >= 0; i2--, open--) {
-        let direction = active[i2].spec.bidiIsolate, update;
+      for (let i2 = active2.length - 1; i2 >= 0; i2--, open--) {
+        let direction = active2[i2].spec.bidiIsolate, update;
         if (direction == null)
           direction = autoDirection(line2.text, from, to);
         if (open > 0 && level.length && (update = level[level.length - 1]).to == from && update.direction == direction) {
@@ -16774,7 +16856,7 @@ var TileUpdate = class {
     let pendingLineAttrs = null;
     let b = this.builder, markCount = -1;
     let openEnd = RangeSet.spans(this.decorations, from, to, {
-      point: (from2, to2, deco, active, openStart, index) => {
+      point: (from2, to2, deco, active2, openStart, index) => {
         if (deco instanceof PointDecoration) {
           if (this.disallowBlockEffectsFor[index]) {
             if (deco.block)
@@ -16782,8 +16864,8 @@ var TileUpdate = class {
             if (to2 > this.view.state.doc.lineAt(from2).to)
               throw new RangeError("Decorations that replace line breaks may not be specified via plugins");
           }
-          markCount = active.length;
-          if (openStart > active.length) {
+          markCount = active2.length;
+          if (openStart > active2.length) {
             b.continueWidget(to2 - from2);
           } else {
             let widget = deco.widget || (deco.block ? NullWidget.block : NullWidget.inline);
@@ -16795,7 +16877,7 @@ var TileUpdate = class {
               b.addBlockWidget(tile);
             } else {
               b.ensureLine(pendingLineAttrs);
-              b.addInlineWidget(tile, active, openStart);
+              b.addInlineWidget(tile, active2, openStart);
             }
           }
           pendingLineAttrs = null;
@@ -16805,7 +16887,7 @@ var TileUpdate = class {
         if (to2 > from2)
           this.text.skip(to2 - from2);
       },
-      span: (from2, to2, active, openStart) => {
+      span: (from2, to2, active2, openStart) => {
         for (let pos = from2; pos < to2; ) {
           let chars = this.text.next(Math.min(512, to2 - pos));
           if (chars == null) {
@@ -16814,12 +16896,12 @@ var TileUpdate = class {
             pos++;
           } else {
             b.ensureLine(pendingLineAttrs);
-            b.addText(chars, active, pos == from2 ? openStart : active.length);
+            b.addText(chars, active2, pos == from2 ? openStart : active2.length);
             pos += chars.length;
           }
           pendingLineAttrs = null;
         }
-        markCount = active.length;
+        markCount = active2.length;
       }
     });
     if (markCount > -1)
@@ -18808,9 +18890,9 @@ handlers.mousedown = (view, event) => {
     if (mustFocus)
       view.observer.ignore(() => {
         focusPreventScroll(view.contentDOM);
-        let active = view.root.activeElement;
-        if (active && !active.contains(view.contentDOM))
-          active.blur();
+        let active2 = view.root.activeElement;
+        if (active2 && !active2.contains(view.contentDOM))
+          active2.blur();
       });
     let mouseSel = view.inputState.mouseSelection;
     if (mouseSel) {
@@ -28853,7 +28935,7 @@ function scrollIntoView2(container2, element) {
 function score(option) {
   return (option.boost || 0) * 100 + (option.apply ? 10 : 0) + (option.info ? 5 : 0) + (option.type ? 1 : 0);
 }
-function sortOptions(active, state) {
+function sortOptions(active2, state) {
   let options = [];
   let sections = null, dynamicSectionScore = null;
   let addOption = (option) => {
@@ -28868,7 +28950,7 @@ function sortOptions(active, state) {
     }
   };
   let conf = state.facet(completionConfig);
-  for (let a of active)
+  for (let a of active2)
     if (a.hasResult()) {
       let getMatch = a.result.getMatch;
       if (a.result.filter === false) {
@@ -28931,12 +29013,12 @@ var CompletionDialog = class _CompletionDialog {
   setSelected(selected, id) {
     return selected == this.selected || selected >= this.options.length ? this : new _CompletionDialog(this.options, makeAttrs(id, selected), this.tooltip, this.timestamp, selected, this.disabled);
   }
-  static build(active, state, id, prev, conf, didSetActive) {
-    if (prev && !didSetActive && active.some((s) => s.isPending))
+  static build(active2, state, id, prev, conf, didSetActive) {
+    if (prev && !didSetActive && active2.some((s) => s.isPending))
       return prev.setDisabled();
-    let options = sortOptions(active, state);
+    let options = sortOptions(active2, state);
     if (!options.length)
-      return prev && active.some((a) => a.isPending) ? prev.setDisabled() : null;
+      return prev && active2.some((a) => a.isPending) ? prev.setDisabled() : null;
     let selected = state.facet(completionConfig).selectOnOpen ? 0 : -1;
     if (prev && prev.selected != selected && prev.selected != -1) {
       let selectedValue = prev.options[prev.selected].completion;
@@ -28947,7 +29029,7 @@ var CompletionDialog = class _CompletionDialog {
         }
     }
     return new _CompletionDialog(options, makeAttrs(id, selected), {
-      pos: active.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
+      pos: active2.reduce((a, b) => b.hasResult() ? Math.min(a, b.from) : a, 1e8),
       create: createTooltip,
       above: conf.aboveCursor
     }, prev ? prev.timestamp : Date.now(), selected, false);
@@ -28960,8 +29042,8 @@ var CompletionDialog = class _CompletionDialog {
   }
 };
 var CompletionState = class _CompletionState {
-  constructor(active, id, open) {
-    this.active = active;
+  constructor(active2, id, open) {
+    this.active = active2;
     this.id = id;
     this.open = open;
   }
@@ -28971,7 +29053,7 @@ var CompletionState = class _CompletionState {
   update(tr) {
     let { state } = tr, conf = state.facet(completionConfig);
     let sources = conf.override || state.languageDataAt("autocomplete", cur(state)).map(asSource);
-    let active = sources.map((source) => {
+    let active2 = sources.map((source) => {
       let value = this.active.find((s) => s.source == source) || new ActiveSource(
         source,
         this.active.some(
@@ -28982,17 +29064,17 @@ var CompletionState = class _CompletionState {
       );
       return value.update(tr, conf);
     });
-    if (active.length == this.active.length && active.every((a, i2) => a == this.active[i2]))
-      active = this.active;
+    if (active2.length == this.active.length && active2.every((a, i2) => a == this.active[i2]))
+      active2 = this.active;
     let open = this.open, didSet = tr.effects.some((e) => e.is(setActiveEffect));
     if (open && tr.docChanged)
       open = open.map(tr.changes);
-    if (tr.selection || active.some((a) => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) || !sameResults(active, this.active) || didSet)
-      open = CompletionDialog.build(active, state, this.id, open, conf, didSet);
-    else if (open && open.disabled && !active.some((a) => a.isPending))
+    if (tr.selection || active2.some((a) => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) || !sameResults(active2, this.active) || didSet)
+      open = CompletionDialog.build(active2, state, this.id, open, conf, didSet);
+    else if (open && open.disabled && !active2.some((a) => a.isPending))
       open = null;
-    if (!open && active.every((a) => !a.isPending) && active.some((a) => a.hasResult()))
-      active = active.map((a) => a.hasResult() ? new ActiveSource(
+    if (!open && active2.every((a) => !a.isPending) && active2.some((a) => a.hasResult()))
+      active2 = active2.map((a) => a.hasResult() ? new ActiveSource(
         a.source,
         0
         /* State.Inactive */
@@ -29000,7 +29082,7 @@ var CompletionState = class _CompletionState {
     for (let effect of tr.effects)
       if (effect.is(setSelectedEffect))
         open = open && open.setSelected(effect.value, this.id);
-    return active == this.active && open == this.open ? this : new _CompletionState(active, this.id, open);
+    return active2 == this.active && open == this.open ? this : new _CompletionState(active2, this.id, open);
   }
   get tooltip() {
     return this.open ? this.open.tooltip : null;
@@ -29085,9 +29167,9 @@ var ActiveSource = class _ActiveSource {
           /* State.Inactive */
         );
       else if (effect.is(setActiveEffect)) {
-        for (let active of effect.value)
-          if (active.source == value.source)
-            value = active;
+        for (let active2 of effect.value)
+          if (active2.source == value.source)
+            value = active2;
       }
     }
     return value;
@@ -29231,8 +29313,8 @@ var closeCompletion = (view) => {
   return true;
 };
 var RunningQuery = class {
-  constructor(active, context) {
-    this.active = active;
+  constructor(active2, context) {
+    this.active = active2;
     this.context = context;
     this.time = Date.now();
     this.updates = [];
@@ -29249,9 +29331,9 @@ var completionPlugin = /* @__PURE__ */ ViewPlugin.fromClass(class {
     this.debounceAccept = -1;
     this.pendingStart = false;
     this.composing = 0;
-    for (let active of view.state.field(completionState).active)
-      if (active.isPending)
-        this.startQuery(active);
+    for (let active2 of view.state.field(completionState).active)
+      if (active2.isPending)
+        this.startQuery(active2);
   }
   update(update) {
     let cState = update.state.field(completionState);
@@ -29296,19 +29378,19 @@ var completionPlugin = /* @__PURE__ */ ViewPlugin.fromClass(class {
     this.debounceUpdate = -1;
     this.pendingStart = false;
     let { state } = this.view, cState = state.field(completionState);
-    for (let active of cState.active) {
-      if (active.isPending && !this.running.some((r) => r.active.source == active.source))
-        this.startQuery(active);
+    for (let active2 of cState.active) {
+      if (active2.isPending && !this.running.some((r) => r.active.source == active2.source))
+        this.startQuery(active2);
     }
     if (this.running.length && cState.open && cState.open.disabled)
       this.debounceAccept = setTimeout(() => this.accept(), this.view.state.facet(completionConfig).updateSyncTime);
   }
-  startQuery(active) {
+  startQuery(active2) {
     let { state } = this.view, pos = cur(state);
-    let context = new CompletionContext(state, pos, active.explicit, this.view);
-    let pending2 = new RunningQuery(active, context);
+    let context = new CompletionContext(state, pos, active2.explicit, this.view);
+    let pending2 = new RunningQuery(active2, context);
     this.running.push(pending2);
-    Promise.resolve(active.source(context)).then((result) => {
+    Promise.resolve(active2.source(context)).then((result) => {
       if (!pending2.context.aborted) {
         pending2.done = result || null;
         this.scheduleAccept();
@@ -29341,26 +29423,26 @@ var completionPlugin = /* @__PURE__ */ ViewPlugin.fromClass(class {
       if (query.done) {
         let pos = cur(query.updates.length ? query.updates[0].startState : this.view.state);
         let limit = Math.min(pos, query.done.from + (query.active.explicit ? 0 : 1));
-        let active = new ActiveResult(query.active.source, query.active.explicit, limit, query.done, query.done.from, (_a2 = query.done.to) !== null && _a2 !== void 0 ? _a2 : pos);
+        let active2 = new ActiveResult(query.active.source, query.active.explicit, limit, query.done, query.done.from, (_a2 = query.done.to) !== null && _a2 !== void 0 ? _a2 : pos);
         for (let tr of query.updates)
-          active = active.update(tr, conf);
-        if (active.hasResult()) {
-          updated.push(active);
+          active2 = active2.update(tr, conf);
+        if (active2.hasResult()) {
+          updated.push(active2);
           continue;
         }
       }
       let current2 = cState.active.find((a) => a.source == query.active.source);
       if (current2 && current2.isPending) {
         if (query.done == null) {
-          let active = new ActiveSource(
+          let active2 = new ActiveSource(
             query.active.source,
             0
             /* State.Inactive */
           );
           for (let tr of query.updates)
-            active = active.update(tr, conf);
-          if (!active.isPending)
-            updated.push(active);
+            active2 = active2.update(tr, conf);
+          if (!active2.isPending)
+            updated.push(active2);
         } else {
           this.startQuery(current2);
         }
@@ -29818,9 +29900,9 @@ var theme2 = EditorView.theme({
 });
 var UNKNOWN = Decoration.mark({ class: "cm-unknown-field" });
 var ExprCode = forwardRef(function ExprCode2({ value, onChange, fields, parameters, invalid, check }, ref) {
-  const host = useRef3(null);
-  const view = useRef3(null);
-  const latest2 = useRef3({ onChange, fields, parameters, check });
+  const host = useRef4(null);
+  const view = useRef4(null);
+  const latest2 = useRef4({ onChange, fields, parameters, check });
   latest2.current = { onChange, fields, parameters, check };
   useImperativeHandle(ref, () => ({
     insert(text) {
@@ -29926,7 +30008,7 @@ function ExpressionEditor({ value, dataSet, onSave, onClose, title }) {
   const def = useDesigner((s) => s.def);
   const sample = useDesigner((s) => s.sample);
   const [text, setText] = useState5(value ?? "");
-  const ta = useRef4(null);
+  const ta = useRef5(null);
   const dsName = dataSet || def.dataSets?.[0]?.name;
   const ds = def.dataSets?.find((d) => d.name === dsName);
   const fields = fieldNames(ds).filter((n) => !(ds?.fields || []).some((f) => f.name === n && f.type === "object"));
@@ -30235,7 +30317,7 @@ function Inspector() {
   const one = sel.kind === "items" && sel.ids.length === 1 ? findItem(def, sel.ids[0])?.item : sel.kind === "cell" ? findItem(def, sel.id)?.item : null;
   const scope = one ? one.dataSet || def.dataSets?.[0]?.name || null : void 0;
   const selKey = sel.kind === "items" ? `i:${sel.ids.join(",")}` : sel.kind === "cell" ? `c:${sel.id}:${sel.part}:${sel.row}:${sel.col}:${sel.cells?.length || 0}` : `${sel.kind}:${sel.section || ""}`;
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   useLayoutEffect2(() => {
     const pane = ref.current?.closest(".dright");
     if (pane) pane.scrollTop = 0;
@@ -30264,9 +30346,9 @@ function Inspector() {
     expr && /* @__PURE__ */ jsx10(ExpressionEditor, { ...expr, onClose: () => setExpr(null) })
   ] });
 }
-function Geo({ label, value, onChange }) {
+function Geo({ label, value, onChange, min }) {
   const unit = useDesigner((s) => s.unit);
-  return /* @__PURE__ */ jsx10(Field, { label: `${label} (${unit})`, children: /* @__PURE__ */ jsx10(NumberInput, { value: round(fromPt(value ?? 0, unit) * 100) / 100, step: unit === "pt" ? 1 : unit === "in" ? 0.05 : 0.5, onChange: (v) => onChange(round(toPt(v, unit))) }) });
+  return /* @__PURE__ */ jsx10(Field, { label: `${label} (${unit})`, children: /* @__PURE__ */ jsx10(NumberInput, { value: round(fromPt(value ?? 0, unit) * 100) / 100, min: min == null ? void 0 : round(fromPt(min, unit) * 100) / 100, step: unit === "pt" ? 1 : unit === "in" ? 0.05 : 0.5, onChange: (v) => onChange(round(toPt(v, unit))) }) });
 }
 function PropEditor({ p: spec, value, onChange, openExpr, dataSet, item }) {
   const T = useT3();
@@ -30369,17 +30451,18 @@ function PaletteEditor({ label, value, onChange }) {
     custom && /* @__PURE__ */ jsx10("div", { style: { display: "flex", gap: 3, flexWrap: "wrap" }, "aria-hidden": "true", children: value.map((c, i2) => /* @__PURE__ */ jsx10("span", { style: { width: 14, height: 14, borderRadius: 3, background: c, border: "1px solid var(--line)" } }, i2)) })
   ] });
 }
-var reportList = null;
+var reportLists = /* @__PURE__ */ new Map();
 function ReportPicker({ value, onChange }) {
-  const [list2, setList] = useState7(reportList || []);
+  const [list2, setList] = useState7(() => reportLists.get(useDesigner.getState().embed?.server || "") || []);
   const listId = useState7(() => `reports-${Math.random().toString(36).slice(2, 8)}`)[0];
   useEffect5(() => {
     const embed = useDesigner.getState().embed;
-    if (reportList || embed && !embed.server) return;
     const server2 = embed?.server || "";
+    if (reportLists.has(server2) || embed && !embed.server) return;
     fetch(`${server2}/api/reports`).then((r) => r.ok ? r.json() : []).then((l) => {
-      reportList = Array.isArray(l) ? l : [];
-      setList(reportList);
+      const v = Array.isArray(l) ? l : [];
+      reportLists.set(server2, v);
+      setList(v);
     }).catch(() => {
     });
   }, []);
@@ -30465,8 +30548,8 @@ function ItemProps({ item, section, openExpr }) {
       /* @__PURE__ */ jsxs7("div", { className: "grid2", children: [
         /* @__PURE__ */ jsx10(Geo, { label: "X", value: item.x, onChange: (v) => setGeo("x", Math.max(0, v)) }),
         /* @__PURE__ */ jsx10(Geo, { label: "Y", value: item.y, onChange: (v) => setGeo("y", Math.max(0, v)) }),
-        item.type !== "table" && /* @__PURE__ */ jsx10(Geo, { label: T("i_width"), value: item.w, onChange: (v) => setGeo("w", Math.max(0, v)) }),
-        item.type !== "table" && /* @__PURE__ */ jsx10(Geo, { label: T("i_height"), value: item.h, onChange: (v) => setGeo("h", Math.max(0, v)) }),
+        item.type !== "table" && /* @__PURE__ */ jsx10(Geo, { label: T("i_width"), value: item.w, min: item.type === "line" ? 0 : 1, onChange: (v) => setGeo("w", Math.max(0, v)) }),
+        item.type !== "table" && /* @__PURE__ */ jsx10(Geo, { label: T("i_height"), value: item.h, min: item.type === "line" ? 0 : 1, onChange: (v) => setGeo("h", Math.max(0, v)) }),
         item.type === "table" && /* @__PURE__ */ jsx10(Field, { label: T("tableSize"), hint: T("tableSizeHint"), children: /* @__PURE__ */ jsx10(TextInput, { value: `${round(item.w)} × ${round(item.h)} pt`, readOnly: true, "data-testid": "table-size" }) })
       ] }),
       /* @__PURE__ */ jsx10("div", { className: "hint", children: (() => {
@@ -30636,7 +30719,17 @@ function PivotEditor({ item, openExpr }) {
           /* @__PURE__ */ jsx10(Field, { label: T("groupExpandLevels"), children: /* @__PURE__ */ jsx10(NumberInput, { value: g.expandLevels ?? "", step: 1, onChange: (v) => setK(list2, i2, "expandLevels", Number.isFinite(v) && v >= 0 ? Math.round(v) : void 0) }) })
         ] })
       ] }),
-      (i2 < spec[list2].length - 1 || list2 === "rowGroups" && g.parent) && /* @__PURE__ */ jsx10(Check, { label: T("pivotCollapsible"), checked: g.collapsible, onChange: (v) => setK(list2, i2, "collapsible", v) }),
+      (i2 < spec[list2].length - 1 || list2 === "rowGroups" && g.parent) && /* @__PURE__ */ jsx10(Check, { label: T("pivotCollapsible"), checked: g.collapsible, onChange: (v) => edit((it) => {
+        const o = it[list2][i2];
+        if (v) {
+          o.collapsible = true;
+          o.initiallyCollapsed = true;
+        } else {
+          delete o.collapsible;
+          delete o.initiallyCollapsed;
+        }
+      }, `${item.id}.${list2}${i2}.collapsible`) }),
+      " ",
       g.collapsible && /* @__PURE__ */ jsx10(Check, { label: T("pivotStartCollapsed"), checked: g.initiallyCollapsed, onChange: (v) => setK(list2, i2, "initiallyCollapsed", v) }),
       /* @__PURE__ */ jsx10("div", { "data-testid": `pivot-${list2}${i2}-action`, children: /* @__PURE__ */ jsx10(ActionEditor, { label: T("ux_headerAction"), value: g.action, onChange: (v) => setK(list2, i2, "action", v), openExpr, dataSet: item.dataSet }) }),
       g.total && g.total !== "none" && /* @__PURE__ */ jsx10("div", { "data-testid": `pivot-${list2}${i2}-total-action`, children: /* @__PURE__ */ jsx10(ActionEditor, { label: T("ux_totalAction"), value: g.totalAction, onChange: (v) => setK(list2, i2, "totalAction", v), openExpr, dataSet: item.dataSet }) })
@@ -30662,7 +30755,7 @@ function PivotEditor({ item, openExpr }) {
         /* @__PURE__ */ jsxs7("div", { className: "grid2", children: [
           /* @__PURE__ */ jsx10(Field, { label: T("pivotLabel"), children: /* @__PURE__ */ jsx10(TextInput, { value: v.label || "", onChange: (x) => setK("values", i2, "label", x) }) }),
           /* @__PURE__ */ jsx10(Field, { label: T("pivotFormat"), children: /* @__PURE__ */ jsx10(TextInput, { value: v.format || "", onChange: (x) => setK("values", i2, "format", x), placeholder: "N0" }) }),
-          /* @__PURE__ */ jsx10(Field, { label: T("pivotShow"), children: /* @__PURE__ */ jsx10(Select, { value: v.show || "value", options: shows, onChange: (x) => setK("values", i2, "show", x === "value" ? void 0 : x) }) })
+          /* @__PURE__ */ jsx10(Field, { label: T("pivotShow"), children: /* @__PURE__ */ jsx10(Select, { value: v.show || "value", options: shows, onChange: (x) => edit((it) => setMatrixShow(it.values[i2], x), `${item.id}.values${i2}.show`) }) })
         ] }),
         /* @__PURE__ */ jsx10("div", { "data-testid": `pivot-values${i2}-action`, children: /* @__PURE__ */ jsx10(ActionEditor, { label: T("ux_cellAction"), value: v.action, onChange: (x) => setK("values", i2, "action", x), openExpr, dataSet: item.dataSet }) }),
         /* @__PURE__ */ jsx10(Field, { label: T("cellBookmark"), children: exprField("values", i2, "bookmark", v.bookmark, T("cellBookmark")) })
@@ -31011,14 +31104,16 @@ function VisualEditor({ cell, setCell, openExpr, dataSet }) {
 }
 var reportParams = /* @__PURE__ */ new Map();
 function useReportParams(id) {
-  const [list2, setList] = useState7(() => reportParams.get(id) ?? null);
+  const srv = () => useDesigner.getState().embed?.server || "";
+  const [list2, setList] = useState7(() => reportParams.get(`${srv()} ${id}`) ?? null);
   useEffect5(() => {
     if (!id || isDynamic(id)) {
       setList(null);
       return;
     }
-    if (reportParams.has(id)) {
-      setList(reportParams.get(id));
+    const key2 = `${srv()} ${id}`;
+    if (reportParams.has(key2)) {
+      setList(reportParams.get(key2));
       return;
     }
     let alive = true;
@@ -31031,7 +31126,7 @@ function useReportParams(id) {
     fetch(`${server2}/api/reports/${encodeURIComponent(id)}`).then((r) => r.ok ? r.json() : null).then((r) => {
       const d = r?.definition || r;
       const ps = d && typeof d === "object" ? (d.parameters || []).map((p) => ({ name: p.name, required: !!p.required && p.default == null, prompt: p.prompt })) : null;
-      if (ps) reportParams.set(id, ps);
+      if (ps) reportParams.set(key2, ps);
       if (alive) setList(ps);
     }).catch(() => {
       if (alive) setList(null);
@@ -32159,17 +32254,18 @@ function JoinAdder({ allCols, split, onAdd, T }) {
 import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var NAME2 = /^[A-Za-z_][\w]*$/;
 var noSourceKey = (def) => (def?.dataSources || []).length ? null : "r4_noDataSource";
-async function loadSample() {
-  const { def } = useDesigner.getState();
-  useDesigner.setState({ sample: { loading: true } });
+async function loadSample(store) {
+  const api = store?.getState ? store : activeStore();
+  const { def } = api.getState();
+  api.setState({ sample: { loading: true } });
   try {
     const params = resolveParameters(def, {});
     const sources = await loadSources(def, { params, baseUrl: origin(), sqlPreview: true, fetch: reportFetch(origin(), void 0, { sqlPreview: true }) });
     const ctx = { params, globals: { ExecutionTime: /* @__PURE__ */ new Date() }, dataSets: {}, fields: null, locale: def.locale, currency: def.currency, functions: functionTable(def) };
     const dataSets = buildDataSets(def, sources, ctx);
-    useDesigner.setState({ sample: { dataSets, sources, at: Date.now() } });
+    api.setState({ sample: { dataSets, sources, at: Date.now() } });
   } catch (e) {
-    useDesigner.setState({ sample: { error: e.message } });
+    api.setState({ sample: { error: e.message } });
   }
 }
 function DataPanel() {
@@ -32990,7 +33086,7 @@ function DataSetDialog({ index, onClose, onSaved }) {
 }
 
 // src/designer/Outline.jsx
-import { useRef as useRef6, useState as useState11 } from "react";
+import { useRef as useRef7, useState as useState11 } from "react";
 import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var MIME = "application/x-pw-outline";
 function Outline() {
@@ -33001,9 +33097,30 @@ function Outline() {
   const T = (k, v) => t(lang2, k, v);
   const [drop, setDrop] = useState11(null);
   const [said, setSaid] = useState11("");
-  const dragged = useRef6(null);
-  const body = useRef6(null);
+  const [cur2, setCur] = useState11(null);
+  const dragged = useRef7(null);
+  const body = useRef7(null);
   const chosen = new Set(sel.kind === "items" ? sel.ids : sel.kind === "cell" ? [sel.id] : []);
+  const keys = sectionList(def).flatMap(({ key: key2 }) => {
+    const out = [`band:${key2}`];
+    const go = (l) => l.forEach((it) => {
+      out.push(it.id);
+      if (NESTING.has(it.type)) go(it.items || []);
+    });
+    go(secOf(def, key2)?.items || []);
+    return out;
+  });
+  const stop = keys.includes(cur2) ? cur2 : keys.find((k) => chosen.has(k) || sel.kind === "section" && k === `band:${sel.section}`) || keys[0];
+  const roving = (k) => ({ tabIndex: k === stop ? 0 : -1, onFocus: () => setCur(k) });
+  const nav2 = (e) => {
+    if (e.defaultPrevented || e.altKey || e.metaKey || e.ctrlKey || e.target.getAttribute("role") !== "option") return;
+    const all = [...e.currentTarget.querySelectorAll("[role=option]")];
+    const i2 = all.indexOf(e.target);
+    const j = e.key === "ArrowDown" ? i2 + 1 : e.key === "ArrowUp" ? i2 - 1 : e.key === "Home" ? 0 : e.key === "End" ? all.length - 1 : null;
+    if (j == null) return;
+    e.preventDefault();
+    all[Math.max(0, Math.min(all.length - 1, j))]?.focus();
+  };
   const pick = (e, id) => {
     const st = useDesigner.getState();
     if (e.shiftKey && st.sel.kind === "items") {
@@ -33115,30 +33232,32 @@ function Outline() {
   };
   const rows = (list2, parent, depth, section) => list2.map((it, i2) => {
     const mark = drop && drop.id != null && drop.id === it.id ? ` drop-${drop.where}` : "";
-    return /* @__PURE__ */ jsxs11("li", { children: [
+    return /* @__PURE__ */ jsxs11("li", { role: "none", children: [
       /* @__PURE__ */ jsxs11("div", { className: `trow outline-row${chosen.has(it.id) ? " sel" : ""}${mark}`, style: { paddingInlineStart: depth * 14 }, "data-outline": it.name, "data-outline-id": it.id, ...dragProps(it, i2, parent, section), children: [
         !readOnly2 && /* @__PURE__ */ jsx14("span", { className: "grip", "aria-hidden": "true", children: "⠿" }),
-        /* @__PURE__ */ jsx14("button", { type: "button", className: "linklike nm", onClick: (e) => pick(e, it.id), onKeyDown: (e) => onKey(e, it, list2, i2, parent), "aria-pressed": chosen.has(it.id), "aria-describedby": readOnly2 ? void 0 : "outline-keys", children: it.name }),
+        /* @__PURE__ */ jsx14("button", { type: "button", role: "option", className: "linklike nm", onClick: (e) => pick(e, it.id), onKeyDown: (e) => onKey(e, it, list2, i2, parent), "aria-selected": chosen.has(it.id), "aria-describedby": readOnly2 ? "outline-nav" : "outline-nav outline-keys", ...roving(it.id), children: it.name }),
         /* @__PURE__ */ jsx14("span", { className: "ty", children: T(`item_${it.type}`) === `item_${it.type}` ? ITEMS[it.type]?.label || it.type : T(`item_${it.type}`) }),
         !readOnly2 && /* @__PURE__ */ jsxs11("span", { className: "act", style: { display: "inline-flex", gap: 2 }, children: [
-          /* @__PURE__ */ jsx14("button", { type: "button", className: "btn sm ghost icon", disabled: i2 === 0, onClick: () => reorderItem(it.id, -1), title: T("outlineBackward"), "aria-label": `${T("outlineBackward")}: ${it.name}`, children: "↑" }),
-          /* @__PURE__ */ jsx14("button", { type: "button", className: "btn sm ghost icon", disabled: i2 === list2.length - 1, onClick: () => reorderItem(it.id, 1), title: T("outlineForward"), "aria-label": `${T("outlineForward")}: ${it.name}`, children: "↓" }),
-          parent && /* @__PURE__ */ jsx14("button", { type: "button", className: "btn sm ghost icon", onClick: () => moveOutOfParent(it.id), title: T("outlineMoveOut", { name: parent.name }), "aria-label": `${T("outlineMoveOut", { name: parent.name })}: ${it.name}`, children: "⇱" })
+          /* @__PURE__ */ jsx14("button", { type: "button", className: "btn sm ghost icon", tabIndex: -1, disabled: i2 === 0, onClick: () => reorderItem(it.id, -1), title: T("outlineBackward"), "aria-label": `${T("outlineBackward")}: ${it.name}`, children: "↑" }),
+          /* @__PURE__ */ jsx14("button", { type: "button", className: "btn sm ghost icon", tabIndex: -1, disabled: i2 === list2.length - 1, onClick: () => reorderItem(it.id, 1), title: T("outlineForward"), "aria-label": `${T("outlineForward")}: ${it.name}`, children: "↓" }),
+          parent && /* @__PURE__ */ jsx14("button", { type: "button", className: "btn sm ghost icon", tabIndex: -1, onClick: () => moveOutOfParent(it.id), title: T("outlineMoveOut", { name: parent.name }), "aria-label": `${T("outlineMoveOut", { name: parent.name })}: ${it.name}`, children: "⇱" })
         ] })
       ] }),
-      NESTING.has(it.type) && (it.items || []).length > 0 && /* @__PURE__ */ jsx14("ul", { className: "tree", children: rows(it.items, it, depth + 1, section) })
+      NESTING.has(it.type) && (it.items || []).length > 0 && /* @__PURE__ */ jsx14("ul", { className: "tree", role: "none", children: rows(it.items, it, depth + 1, section) })
     ] }, it.id);
   });
   return /* @__PURE__ */ jsxs11("div", { className: "pane", "data-testid": "outline", children: [
     /* @__PURE__ */ jsx14("h4", { children: T("outline") }),
     /* @__PURE__ */ jsxs11("div", { className: "pane-body", ref: body, children: [
-      sectionList(def).map(({ key: key2, label }) => {
+      /* @__PURE__ */ jsx14("div", { role: "listbox", "aria-label": T("outline"), "aria-multiselectable": "true", onKeyDown: nav2, children: sectionList(def).map(({ key: key2, label }) => {
         const items = secOf(def, key2)?.items || [];
-        return /* @__PURE__ */ jsxs11("div", { className: `outline-sec${drop?.band === key2 ? " drop-band" : ""}`, "data-outline-band": key2, ...bandDrop(key2), children: [
-          /* @__PURE__ */ jsx14("button", { type: "button", className: `linklike outline-band${sel.kind === "section" && sel.section === key2 ? " sel" : ""}`, onClick: () => useDesigner.getState().select({ kind: "section", section: key2 }), children: /* @__PURE__ */ jsx14("b", { children: label }) }),
-          /* @__PURE__ */ jsx14("ul", { className: "tree", children: items.length ? rows(items, null, 1, key2) : /* @__PURE__ */ jsx14("li", { className: "subtle", children: T("outlineEmpty") }) })
+        return /* @__PURE__ */ jsxs11("div", { role: "group", "aria-label": label, className: `outline-sec${drop?.band === key2 ? " drop-band" : ""}`, "data-outline-band": key2, ...bandDrop(key2), children: [
+          /* @__PURE__ */ jsx14("button", { type: "button", role: "option", "aria-selected": sel.kind === "section" && sel.section === key2, "aria-describedby": "outline-nav", className: `linklike outline-band${sel.kind === "section" && sel.section === key2 ? " sel" : ""}`, onClick: () => useDesigner.getState().select({ kind: "section", section: key2 }), ...roving(`band:${key2}`), children: /* @__PURE__ */ jsx14(
+          "b", { children: label }) }),
+          /* @__PURE__ */ jsx14("ul", { className: "tree", role: "none", children: items.length ? rows(items, null, 1, key2) : /* @__PURE__ */ jsx14("li", { className: "subtle", role: "none", children: T("outlineEmpty") }) })
         ] }, key2);
-      }),
+      }) }),
+      /* @__PURE__ */ jsx14("div", { className: "sr-only", id: "outline-nav", children: T("b9_outlineKeys") }),
       /* @__PURE__ */ jsx14("div", { className: "hint", children: T("outlineHint") }),
       !readOnly2 && /* @__PURE__ */ jsx14("div", { className: "hint", id: "outline-keys", children: T("outlineKeys") }),
       /* @__PURE__ */ jsx14("div", { className: "sr-only", role: "status", "aria-live": "polite", children: said })
@@ -33563,6 +33682,7 @@ function TableWizard() {
   const wiz = useDesigner((s) => s.tableWizard);
   const def = useDesigner((s) => s.def);
   const sample = useDesigner((s) => s.sample);
+  const lang2 = useDesigner((s) => s.lang);
   const close = () => useDesigner.getState().setUi({ tableWizard: null });
   const parent = wiz?.parentId ? findItem(def, wiz.parentId)?.item : null;
   const width = Math.max(120, Math.round((parent ? parent.w : bodyWidth(def, wiz?.section || "body")) - (wiz?.x || 0)));
@@ -33629,7 +33749,7 @@ function TableWizard() {
         /* @__PURE__ */ jsxs14("button", { className: "btn ghost", onClick: () => {
           useDesigner.getState().setUi({ tableWizard: null, pivotWizard: { section: wiz.section, x: wiz.x, y: wiz.y, parentId: wiz.parentId, dataSet: c.dataSet } });
         }, "data-testid": "open-pivot-wizard", children: [
-          t(useDesigner.getState().lang, "pivotWizard"),
+          t(lang2, "pivotWizard"),
           "…"
         ] }),
         /* @__PURE__ */ jsx17("button", { className: "btn", onClick: close, children: "Cancel" }),
@@ -33642,7 +33762,7 @@ function TableWizard() {
         /* @__PURE__ */ jsxs14("section", { className: "cw-side", "aria-label": "Data for the table", children: [
           /* @__PURE__ */ jsx17(Field, { label: "Data set", children: /* @__PURE__ */ jsx17(Select, { value: c.dataSet, options: (def.dataSets || []).map((d) => d.name), onChange: (v) => set2({ dataSet: v, fields: null, groupBy: "", mRows: "", mCols: "", mValue: "" }) }) }),
           sample?.loading && /* @__PURE__ */ jsx17("span", { className: "hint", children: "Calling the API…" }),
-          noSourceKey(def) && /* @__PURE__ */ jsx17("span", { className: "hint", role: "status", "data-testid": "no-source", children: t(useDesigner.getState().lang, noSourceKey(def)) }),
+          noSourceKey(def) && /* @__PURE__ */ jsx17("span", { className: "hint", role: "status", "data-testid": "no-source", children: t(lang2, noSourceKey(def)) }),
           sample?.error && /* @__PURE__ */ jsx17("span", { className: "err", children: sample.error }),
           c.layout !== "matrix" && /* @__PURE__ */ jsxs14(Fragment10, { children: [
             c.layout !== "list" && /* @__PURE__ */ jsx17(Field, { label: "Group by", children: /* @__PURE__ */ jsx17(Select, { value: groupBy2, options: text.map((f) => f.name), onChange: (v) => set2({ groupBy: v }) }) }),
@@ -33704,7 +33824,7 @@ function AskAi({ onClose }) {
       let preview = null;
       try {
         const params = resolveParameters(out.definition, {}, { lenient: true });
-        const model = await render(out.definition, { fontStore: fontStore(), parameters: params, sources: sources ? Object.fromEntries((out.definition.dataSources || []).map((s) => [s.name, sources[s.name] ?? (s.type === "json" ? s.data : [])])) : void 0, baseUrl: origin(), fetch: reportFetch(origin()) });
+        const model = await render(out.definition, { fontStore: await loadFontStore(), parameters: params, sources: sources ? Object.fromEntries((out.definition.dataSources || []).map((s) => [s.name, sources[s.name] ?? (s.type === "json" ? s.data : [])])) : void 0, baseUrl: origin(), fetch: reportFetch(origin()) });
         preview = { html: pageToSvg(model.pages[0], model.width, model.height), pages: model.pages.length };
       } catch (e) {
         preview = { error: e.message };
@@ -34176,9 +34296,10 @@ var TOOLS = [
   ] }) }
 ];
 function Toolbox({ T, hide = [] }) {
+  const api = useDesignerStore();
   const name2 = (type) => T(`item_${type}`) === `item_${type}` ? ITEMS[type].label : T(`item_${type}`);
   const add = (type) => {
-    const s = useDesigner.getState();
+    const s = api.getState();
     const at2 = insertSpot(s.def, s.sel);
     insertItem(type, at2.section, 0, at2.y, {}, at2.parentId);
   };
@@ -34227,12 +34348,15 @@ var TbGroup = ({ label, children }) => /* @__PURE__ */ jsxs17("div", { className
 ] });
 var QUICK = [["textbox", "text"], ["table", "table"], ["chart", "chart"], ["image", "image"]];
 function LeftRail({ T, readOnly: readOnly2, embed }) {
-  const body = useRef7(null);
+  const body = useRef8(null);
   const [at2, setAt] = useState17("tools");
   const tabs = [!readOnly2 && ["tools", "b2_toolbox", "tools"], embed?.panels?.data !== false && ["data", "b2_data", "data"], ["outline", "b2_outline", "outline"]].filter(Boolean);
   const go = (id) => {
     const el = body.current?.querySelector(`[data-rail="${id}"]`);
-    if (el) body.current.scrollTo({ top: el.offsetTop - body.current.offsetTop, behavior: "smooth" });
+    if (el) {
+      body.current.scrollTo({ top: el.offsetTop - body.current.offsetTop, behavior: "smooth" });
+      (el.querySelector('[role=listbox] [tabindex="0"]') || el.querySelector("button, input, select, textarea"))?.focus({ preventScroll: true });
+    }
     setAt(id);
   };
   const spy = () => {
@@ -34334,6 +34458,7 @@ var framed = () => {
   }
 };
 function useAutosave(id, T, lang2, user) {
+  const api = useDesignerStore();
   const [offer, setOffer] = useState17(null);
   useEffect13(() => {
     if (!id || user == null || framed()) return void 0;
@@ -34345,10 +34470,10 @@ function useAutosave(id, T, lang2, user) {
     }
     clearDrafts(store, user);
     const d = readDraft(store, user, id);
-    if (d && plain(mergeDraft(d.def, useDesigner.getState().def)) !== plain(useDesigner.getState().def)) setOffer(d);
+    if (d && plain(mergeDraft(d.def, api.getState().def)) !== plain(api.getState().def)) setOffer(d);
     else if (d) clearDraft(store, user, id);
     const keep = () => {
-      const s = useDesigner.getState();
+      const s = api.getState();
       if (!s.saved && !s.readOnly) writeDraft(store, user, id, s.def, Date.now(), s.rev || null);
     };
     const t3 = setInterval(keep, AUTOSAVE_MS);
@@ -34357,7 +34482,7 @@ function useAutosave(id, T, lang2, user) {
     };
     window.addEventListener("pagehide", keep);
     document.addEventListener("visibilitychange", hide);
-    const unsub = useDesigner.subscribe((s, prev) => {
+    const unsub = api.subscribe((s, prev) => {
       if (s.saved && !prev.saved) clearDraft(store, user, id);
     });
     return () => {
@@ -34369,13 +34494,13 @@ function useAutosave(id, T, lang2, user) {
   }, [id, user]);
   if (!offer) return null;
   const when = new Date(offer.at).toLocaleString(lang2 === "en" ? "en-IN" : lang2, { dateStyle: "medium", timeStyle: "short" });
-  const stale = staleDraft(offer, useDesigner.getState().rev);
+  const stale = staleDraft(offer, api.getState().rev);
   return /* @__PURE__ */ jsxs17("div", { className: "draft-bar", role: "alert", "data-testid": "draft-offer", "data-stale": stale || void 0, children: [
     /* @__PURE__ */ jsx20("span", { children: T(stale ? "ux_draftStale" : "ux_draftFound", { when }) }),
     /* @__PURE__ */ jsx20("button", { className: `btn sm${stale ? "" : " primary"}`, "data-testid": "draft-restore", onClick: () => {
-      const d = mergeDraft(offer.def, useDesigner.getState().def);
-      useDesigner.getState().apply(() => JSON.parse(JSON.stringify(d)));
-      useDesigner.getState().fixSelection();
+      const d = mergeDraft(offer.def, api.getState().def);
+      api.getState().apply(() => JSON.parse(JSON.stringify(d)));
+      api.getState().fixSelection();
       setOffer(null);
     }, children: T(stale ? "ux_draftRestoreAnyway" : "ux_draftRestore") }),
     /* @__PURE__ */ jsx20("button", { className: "btn sm", "data-testid": "draft-discard", onClick: () => {
@@ -34388,12 +34513,13 @@ function useAutosave(id, T, lang2, user) {
   ] });
 }
 function ConflictBar({ T }) {
+  const api = useDesignerStore();
   const conflict = useDesigner((s) => s.conflict);
   if (!conflict) return null;
   return /* @__PURE__ */ jsxs17("div", { className: "draft-bar", role: "alert", "data-testid": "save-conflict", children: [
     /* @__PURE__ */ jsx20("span", { children: T("ux_conflict") }),
-    /* @__PURE__ */ jsx20("button", { className: "btn sm", "data-testid": "conflict-mine", onClick: () => useDesigner.getState().save({ overwrite: true }), children: T("ux_conflictMine") }),
-    /* @__PURE__ */ jsx20("button", { className: "btn sm", "data-testid": "conflict-theirs", onClick: () => useDesigner.getState().takeTheirs(), children: T("ux_conflictTheirs") })
+    /* @__PURE__ */ jsx20("button", { className: "btn sm", "data-testid": "conflict-mine", onClick: () => api.getState().save({ overwrite: true }), children: T("ux_conflictMine") }),
+    /* @__PURE__ */ jsx20("button", { className: "btn sm", "data-testid": "conflict-theirs", onClick: () => api.getState().takeTheirs(), children: T("ux_conflictTheirs") })
   ] });
 }
 var AL = (d) => /* @__PURE__ */ jsx20("svg", { width: "16", height: "14", viewBox: "0 0 16 14", "aria-hidden": "true", children: d });
@@ -34458,12 +34584,13 @@ function AlignBar({ T }) {
   ] });
 }
 function IssuesButton({ T }) {
+  const api = useDesignerStore();
   const issues = useDesignIssues();
   const [open, setOpen] = useState17(false);
   useEffect13(() => {
     if (!issues.length) setOpen(false);
   }, [issues.length]);
-  const listRef = useRef7(null);
+  const listRef = useRef8(null);
   useLayoutEffect3(() => {
     const el = listRef.current;
     if (!el) return void 0;
@@ -34481,7 +34608,7 @@ function IssuesButton({ T }) {
   return /* @__PURE__ */ jsxs17("span", { className: "issues-wrap", children: [
     /* @__PURE__ */ jsx20("button", { type: "button", className: "btn sm issues-btn", "aria-expanded": open, onClick: () => setOpen((v) => !v), "data-testid": "issues", children: T("ux_issues", { n: issues.length }) }),
     open && /* @__PURE__ */ jsx20("ul", { className: "issues-list", "data-testid": "issues-list", ref: listRef, children: issues.map((i2, k) => /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20("button", { type: "button", className: "linklike", onClick: () => {
-      if (i2.id) useDesigner.getState().select({ kind: "items", ids: [i2.id] });
+      if (i2.id) api.getState().select({ kind: "items", ids: [i2.id] });
     }, children: issueLine(T, i2) }) }, k)) })
   ] });
 }
@@ -34505,6 +34632,7 @@ var SHORTCUTS = [
   ["?", "sc_help"]
 ];
 function HistoryDialog({ id, onClose, T, lang: lang2 }) {
+  const api = useDesignerStore();
   const [list2, setList] = useState17(null);
   const [err, setErr] = useState17(null);
   useEffect13(() => {
@@ -34517,7 +34645,7 @@ function HistoryDialog({ id, onClose, T, lang: lang2 }) {
       return;
     }
     const def = await res.json();
-    useDesigner.getState().init(id, def);
+    api.getState().init(id, def);
     onClose();
   };
   return /* @__PURE__ */ jsxs17(Dialog, { title: T("versionHistory"), onClose, footer: /* @__PURE__ */ jsx20("button", { className: "btn", onClick: onClose, children: T("close") }), children: [
@@ -34539,18 +34667,48 @@ function HistoryDialog({ id, onClose, T, lang: lang2 }) {
     ] }, v.version))
   ] });
 }
-function Designer({ id, initial, rev = null, lang: langIn, embed = null, user = null, ai = false }) {
+function Designer({ store: storeIn = null, ...props }) {
+  const [store] = useState17(() => {
+    const s = storeIn || newDesignerStore();
+    activateStore(s);
+    return s;
+  });
+  return /* @__PURE__ */ jsx20(DesignerStore.Provider, { value: store, children: /* @__PURE__ */ jsx20(DesignerIn, { ...props }) });
+}
+var ACTIVATE = [
+  "onPointerDownCapture",
+  "onMouseDownCapture",
+  "onKeyDownCapture",
+  "onFocusCapture",
+  "onClickCapture",
+  "onInputCapture",
+  "onChangeCapture",
+  "onDragStartCapture",
+  "onDragOverCapture",
+  "onDropCapture",
+  "onPasteCapture",
+  "onWheelCapture",
+  "onContextMenuCapture",
+  "onDoubleClickCapture",
+  "onSubmitCapture"
+];
+function DesignerIn({ id, initial, rev = null, lang: langIn, embed = null, user = null, ai = false }) {
+  const api = useDesignerStore();
+  const activators = useMemo5(() => {
+    const on = () => activateStore(api);
+    return Object.fromEntries(ACTIVATE.map((k) => [k, on]));
+  }, [api]);
   const lang2 = pickLang(langIn);
   const T = (k, v) => t(lang2, k, v);
   const q2 = lang2 === "en" ? "" : `?lang=${encodeURIComponent(lang2)}`;
-  const ready = useRef7(false);
+  const ready = useRef8(false);
   if (!ready.current && typeof window !== "undefined") {
-    useDesigner.getState().init(id, initial);
-    useDesigner.getState().setUi({ lang: lang2, embed, readOnly: !!embed?.readOnly, rev, conflict: null });
+    api.getState().init(id, initial);
+    api.getState().setUi({ lang: lang2, embed, readOnly: !!embed?.readOnly, rev, conflict: null });
     ready.current = true;
   }
   const readOnly2 = !!embed?.readOnly;
-  const rootRef = useRef7(null);
+  const rootRef = useRef8(null);
   const def = useDesigner((s) => s.def);
   const tab = useDesigner((s) => s.tab);
   const saved = useDesigner((s) => s.saved);
@@ -34565,15 +34723,15 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
     if (embed) declareDocumentStyles("pw-designer-fonts", fontCss);
   }, [embed, fontCss]);
   useEffect13(() => {
-    customFonts().then((list2) => useDesigner.getState().setUi({ fonts: list2 }));
+    customFonts().then((list2) => api.getState().setUi({ fonts: list2 }));
   }, []);
   useEffect13(() => {
     const z = savedZoom();
-    if (z != null) useDesigner.getState().setUi({ zoom: z });
+    if (z != null) api.getState().setUi({ zoom: z });
   }, []);
   const canUndo = useDesigner((s) => s.past.length > 0);
   const canRedo = useDesigner((s) => s.future.length > 0);
-  const st = useDesigner.getState;
+  const st = api.getState;
   const [dialog, setDialog] = useState17(null);
   const [showLeft, setShowLeft] = useState17(true);
   const [showRight, setShowRight] = useState17(true);
@@ -34586,11 +34744,17 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
   const cellSize = useDesigner((s) => s.cellSize);
   const dataKey = useDesigner((s) => `${(s.def?.dataSources || []).map((x) => x.name)}|${(s.def?.dataSets || []).map((x) => x.name)}`);
   useEffect13(() => {
-    loadSample();
+    loadSample(api);
   }, [dataKey]);
   useEffect13(() => {
+    let lastInside = false;
+    const inside = (e) => (e.composedPath?.() || []).includes(rootRef.current);
+    const onDown = (e) => {
+      lastInside = inside(e);
+    };
+    const ours = (e) => inside(e) || lastInside && (e.target === document.body || e.target === document.documentElement);
     const onKey = (e) => {
-      if (embed && !(e.composedPath?.() || []).includes(rootRef.current)) return;
+      if (embed && !ours(e)) return;
       const mod = e.metaKey || e.ctrlKey;
       if (mod && e.key.toLowerCase() === "s") {
         e.preventDefault();
@@ -34609,7 +34773,7 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
         st().save();
         return;
       }
-      if (isTyping(e) || st().tab !== "design") return;
+      if (isTyping(e) || st().tab !== "design" || e.defaultPrevented) return;
       if (mod && e.key.toLowerCase() === "z") {
         e.preventDefault();
         e.shiftKey ? st().redo() : st().undo();
@@ -34632,11 +34796,7 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
         }
         return;
       }
-      if (mod && e.key.toLowerCase() === "v") {
-        e.preventDefault();
-        pasteItems(st().sel.kind === "section" ? st().sel.section : "body");
-        return;
-      }
+      if (mod && e.key.toLowerCase() === "v") return;
       if (e.key === "Delete" || e.key === "Backspace") {
         if (st().sel.kind === "items") {
           e.preventDefault();
@@ -34668,10 +34828,24 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
         e.returnValue = "";
       }
     };
+    const onPaste = (e) => {
+      if (embed && !ours(e) || isTyping(e) || st().tab !== "design") return;
+      e.preventDefault();
+      if (!pasteItems(st().sel.kind === "section" ? st().sel.section : "body", e.clipboardData?.getData("text/plain"))) {
+        st().setUi({ saveError: t(lang2, "b9_nothingToPaste") });
+        setTimeout(() => st().setUi({ saveError: null }), 3e3);
+      }
+    };
     window.addEventListener("keydown", onKey);
+    window.addEventListener("paste", onPaste);
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("focusin", onDown, true);
     if (!embed) window.addEventListener("beforeunload", onLeave);
     return () => {
       window.removeEventListener("keydown", onKey);
+      window.removeEventListener("paste", onPaste);
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("focusin", onDown, true);
       window.removeEventListener("beforeunload", onLeave);
     };
   }, [st, embed]);
@@ -34690,17 +34864,17 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
     const d = await embed.onOpen();
     if (d && typeof d === "object") {
       st().init(id, d);
-      loadSample();
+      loadSample(api);
     }
   };
-  const importInput = useRef7(null);
+  const importInput = useRef8(null);
   const [imported, setImported] = useState17(null);
   const importFile = async (file) => {
     if (!file) return;
     const r = readReportFile(file.name, await file.text());
     if (r.definition) {
       st().init(id, r.definition);
-      loadSample();
+      loadSample(api);
     }
     setImported({ name: file.name, ok: !!r.definition, warnings: r.warnings || [], error: r.error });
   };
@@ -34714,7 +34888,7 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
     ] }),
     /* @__PURE__ */ jsx20("span", { className: "hint", children: T("loadingDesigner") })
   ] }) });
-  return /* @__PURE__ */ jsxs17("div", { className: "designer", "data-testid": "designer", dir: dirOf(lang2), lang: lang2, ref: rootRef, "data-readonly": readOnly2 || void 0, children: [
+  return /* @__PURE__ */ jsxs17("div", { className: "designer", "data-testid": "designer", dir: dirOf(lang2), lang: lang2, ref: rootRef, "data-readonly": readOnly2 || void 0, ...activators, children: [
     !embed && /* @__PURE__ */ jsx20("style", { children: fontCss }),
     /* @__PURE__ */ jsxs17("header", { className: "dtop dbar", children: [
       embed ? /* @__PURE__ */ jsxs17("span", { className: "brand", children: [
@@ -34902,6 +35076,7 @@ var CSS2 = true ? `/* Layout: a drafting table. Cool grey workspace, white paper
   --ink: #16202a;
   --muted: #5f6b77;
   --faint: #64717e;          /* 5:1 on panel (was #8e99a4, 2.9:1) */
+  --faint-desk: #5a6672;     /* small text on the desk: 4.85:1 on #e6eaee (--faint is 4.13:1 there) */
   --line-strong: #848f9b;    /* control borders, 3:1 */
   --accent: #0e7490;
   --accent-ink: #ffffff;
@@ -34955,6 +35130,7 @@ var CSS2 = true ? `/* Layout: a drafting table. Cool grey workspace, white paper
   --ink: #e6edf3;
   --muted: #a3afbb;
   --faint: #8693a0;
+  --faint-desk: #8693a0;
   --accent: #3cbfd4;
   --accent-ink: #03222a;
   --accent-soft: #123a44;
@@ -35293,7 +35469,7 @@ a.cell-name:hover { color: var(--accent); }
 .tbl .grip { position: absolute; left: -18px; top: -18px; width: 14px; height: 14px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; cursor: move; font-size: var(--fs-2xs); color: var(--muted); }
 .tbl.sel .grip { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
 .tbl .row { position: relative; display: flex; }
-.tbl .row-tag { position: absolute; left: -18px; width: 14px; display: grid; place-items: center; font: var(--fs-2xs) var(--mono); color: var(--faint); height: 100%; }
+.tbl .row-tag { position: absolute; left: -18px; width: 14px; display: grid; place-items: center; font: var(--fs-2xs) var(--mono); color: var(--faint-desk); height: 100%; }
 .tbl .cell { position: relative; overflow: hidden; display: flex; border-right: 1px dashed rgba(95,107,119,.3); border-bottom: 1px dashed rgba(95,107,119,.3); cursor: cell; }
 .tbl .cell:first-child { border-left: 1px dashed rgba(95,107,119,.3); }
 .tbl .row:first-child .cell { border-top: 1px dashed rgba(95,107,119,.3); }
@@ -35813,7 +35989,7 @@ input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-colo
 
 .pw-embed{display:block;font:var(--fw-regular) var(--fs-base)/var(--lh) var(--ui);color:var(--ink);background:var(--desk);border:1px solid var(--line);border-radius:8px;overflow:hidden}
 ` : "";
-var BLANK = { $schema: "pagewright/report@1", name: "New report", page: { size: "A4", margins: [36, 36, 36, 36] }, dataSources: [], dataSets: [], sections: { body: { items: [] } } };
+var BLANK = { $schema: "pagewright/report@1", name: "Untitled report", page: { size: "A4", margins: [36, 36, 36, 36] }, dataSources: [], dataSets: [], sections: { body: { items: [] } } };
 function mountDesigner(target, opts = {}) {
   const el = typeof target === "string" ? document.querySelector(target) : target;
   if (!el) throw new Error(`mountDesigner: no element for ${target}`);
@@ -35831,18 +36007,43 @@ function mountDesigner(target, opts = {}) {
   );
   box.style.height = opts.height || "760px";
   const root = createRoot(box);
+  const store = newDesignerStore();
   const embed = { onSave: opts.onSave, onOpen: opts.onOpen, readOnly: !!opts.readOnly, toolbox: opts.toolbox, panels: opts.panels, dataSourceTemplates: opts.dataSourceTemplates, server: server2 };
   const show = (definition) => loadLanguage(opts.lang).catch(() => {
-  }).then(() => root.render(createElement2(Designer, { id: opts.report, initial: definition, lang: opts.lang, embed })));
+  }).then(() => root.render(createElement2(Designer, { id: opts.report, initial: definition, lang: opts.lang, embed, store })));
   if (opts.definition || !opts.report) show(opts.definition || BLANK);
   else fetch(`${server2}/api/reports/${encodeURIComponent(opts.report)}`).then((r) => r.ok ? r.json() : r.json().then((j) => Promise.reject(new Error(j.error || `HTTP ${r.status}`)))).then(show).catch((e) => {
     box.innerHTML = `<div class="vmsg error">The report did not load: ${String(e.message).replace(/</g, "&lt;")}</div>`;
   });
+  const onLeave = (e) => {
+    e.preventDefault();
+    e.returnValue = "";
+  };
+  let dirty = false;
+  const unsub = store.subscribe((s) => {
+    if (!s.saved === dirty) return;
+    dirty = !s.saved;
+    if (opts.warnOnLeave !== false) {
+      if (dirty) window.addEventListener("beforeunload", onLeave);
+      else window.removeEventListener("beforeunload", onLeave);
+    }
+    try {
+      opts.onDirtyChange?.(dirty);
+    } catch (e) {
+      console.error(e);
+    }
+  });
   return {
-    unmount: () => root.unmount(),
+    unmount: () => {
+      unsub();
+      window.removeEventListener("beforeunload", onLeave);
+      root.unmount();
+    },
+    /** whether there are changes not saved yet */
+    isDirty: () => !store.getState().saved,
     /** the definition as it is now (a plain copy) */
-    getDefinition: () => JSON.parse(JSON.stringify(useDesigner.getState().def)),
-    save: () => useDesigner.getState().save()
+    getDefinition: () => JSON.parse(JSON.stringify(store.getState().def)),
+    save: () => store.getState().save()
   };
 }
 export {