@reportwright/viewer 0.12.1 → 0.13.0

package/dist/designer.js

@@ -13,16 +13,18 @@ import {
   setShadowStyles,
   t,
   uiFontCss
-} from "./chunk-NR2G4TMG.js";
+} from "./chunk-L6YEIVVD.js";
 import {
   customFonts,
-  fontStore,
   fontsBase,
+  loadFontStore,
   loadModelFonts,
   origin,
+  reportFetch,
   setAssetBase,
+  setFetchPolicy,
   setStandalone
-} from "./chunk-6TPZ7G74.js";
+} from "./chunk-CNDUJ7IV.js";
 import {
   BASE_STYLE,
   DEFAULT_THEME,
@@ -31,10 +33,10 @@ import {
   ITEMS,
   ODATA_DEFAULT_PAGES,
   ODATA_MAX_PAGES,
-  PAGE_SIZES,
   PALETTES,
   TEXT_STYLE_PROPS,
   THEME_COLORS,
+  TextMeasurer,
   XmlError,
   bestXmlRows,
   buildDataSets,
@@ -43,7 +45,7 @@ import {
   detectFields,
   evalValue,
   findItemNamed,
-  fromPt,
+  finishText,
   functionTable,
   isDynamic,
   isTablix,
@@ -52,31 +54,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
@@ -86,20 +86,20 @@ 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";
 import {
   __toESM
 } from "./chunk-OLLMACWA.js";
 
 // src/embed/designer.js
-var import_react22 = __toESM(require_react(), 1);
+var import_react23 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // src/importers/rdlx.js
@@ -6867,10 +6867,10 @@ function readReportFile(name2, text) {
 }
 
 // src/designer/Designer.jsx
-var import_react21 = __toESM(require_react(), 1);
+var import_react22 = __toESM(require_react(), 1);
 
 // src/designer/ui.jsx
-var import_react2 = __toESM(require_react(), 1);
+var import_react3 = __toESM(require_react(), 1);
 
 // src/designer/fieldCheck.js
 function exprParts(value) {
@@ -7004,13 +7004,9 @@ function useStore(api, selector = identity) {
   import_react.default.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
+var import_react2 = __toESM(require_react(), 1);
 
 // node_modules/immer/dist/immer.mjs
 var NOTHING = /* @__PURE__ */ Symbol.for("immer-nothing");
@@ -7859,6 +7855,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);
@@ -7884,9 +7891,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);
     });
@@ -7910,7 +7923,7 @@ function findItem(def, id) {
   });
   return hit;
 }
-var useDesigner = create((set2, get2) => ({
+var newDesignerStore = () => createStore((set2, get2) => ({
   id: null,
   def: null,
   saved: true,
@@ -8041,7 +8054,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 = (0, import_react2.createContext)(null);
+var activateStore = (store) => {
+  active = store;
+};
+var activeStore2 = () => active;
+var useDesignerStore = () => (0, import_react2.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;
 }
@@ -8089,7 +8113,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] });
@@ -8115,9 +8139,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 }))) {
@@ -8248,14 +8284,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();
@@ -8270,43 +8308,41 @@ async function copySelection() {
   return items.length;
 }
 var memClip = null;
-async function pasteItems(section = "body") {
-  let text = null;
-  try {
-    text = await navigator.clipboard.readText();
-  } catch {
-    text = memClip;
-  }
-  if (!text || !text.includes(CLIP)) text = memClip;
-  let data;
+var clipOf = (text) => {
   try {
-    data = JSON.parse(text);
+    const d = JSON.parse(text);
+    return d?.kind === CLIP && Array.isArray(d.items) ? d : null;
   } 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];
@@ -8506,6 +8542,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) {
@@ -8524,7 +8561,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++}`;
@@ -8591,6 +8628,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
 var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
@@ -8602,8 +8646,8 @@ function TextInput({ value, onChange, mono, invalid, className, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { className: `input${mono ? " mono" : ""}${invalid ? " invalid" : ""}${className ? ` ${className}` : ""}`, value: value ?? "", onChange: (e) => onChange(e.target.value), ...rest });
 }
 function NumberInput({ value, onChange, step = 0.5, min, ...rest }) {
-  const [draft, setDraft] = (0, import_react2.useState)(value ?? "");
-  (0, import_react2.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react3.useState)(value ?? "");
+  (0, import_react3.useEffect)(() => {
     setDraft(value ?? "");
   }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -8639,18 +8683,18 @@ function ColorInput({ value, onChange }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextInput, { value, onChange: (v) => onChange(v === "" ? void 0 : v), mono: true, placeholder: T("i_colorPh") })
   ] });
 }
-var FieldScope = (0, import_react2.createContext)(void 0);
+var FieldScope = (0, import_react3.createContext)(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 = (0, import_react2.useContext)(FieldScope);
+  const scope = (0, import_react3.useContext)(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__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "expr-row", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("button", { className: "fx", title: T("i_openExprEditor"), "aria-label": T("i_openExprEditor"), onClick: onOpen, type: "button", children: "fx" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "fx", title: T("i_openExprEditor"), "aria-label": `fx: ${T("i_openExprEditor")}`, onClick: onOpen, type: "button", children: "fx" })
     ] }),
     err && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "err", children: err }),
     issues.map((i2, k) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "warn", "data-testid": "field-warning", children: issueText(T, i2) }, k))
@@ -8670,14 +8714,19 @@ function Check({ label, checked, onChange }) {
   ] });
 }
 function Dialog({ title, children, onClose, footer, wide, className = "" }) {
-  (0, import_react2.useEffect)(() => {
+  const ref = (0, import_react3.useRef)(null);
+  (0, import_react3.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__ */ (0, import_jsx_runtime.jsx)("div", { className: "scrim", onPointerDown: (e) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "scrim", ref, onPointerDown: (e) => {
     if (e.target === e.currentTarget) onClose();
   }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dialog${wide ? " wide" : ""}${className ? ` ${className}` : ""}`, role: "dialog", "aria-modal": "true", "aria-label": title, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { children: title }),
@@ -8687,20 +8736,20 @@ function Dialog({ title, children, onClose, footer, wide, className = "" }) {
 }
 
 // src/embed/link.js
-var import_react3 = __toESM(require_react(), 1);
+var import_react4 = __toESM(require_react(), 1);
 function Link({ href, children, prefetch, replace: replace2, scroll, shallow, ...rest }) {
-  return (0, import_react3.createElement)("a", { href: typeof href === "string" ? href : String(href?.pathname || ""), ...rest }, children);
+  return (0, import_react4.createElement)("a", { href: typeof href === "string" ? href : String(href?.pathname || ""), ...rest }, children);
 }
 
 // src/designer/SvgHtml.jsx
-var import_react4 = __toESM(require_react(), 1);
+var import_react5 = __toESM(require_react(), 1);
 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
 function SvgHtml({ html, as: Tag2 = "span", ...rest }) {
-  const ref = (0, import_react4.useRef)(
+  const ref = (0, import_react5.useRef)(
     /** @type {HTMLElement|null} */
     null
   );
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     if (!ref.current) return;
     ref.current.innerHTML = deferStyleAttributes(html);
     applyStyleAttributes(ref.current);
@@ -8709,7 +8758,7 @@ function SvgHtml({ html, as: Tag2 = "span", ...rest }) {
 }
 
 // src/designer/Canvas.jsx
-var import_react7 = __toESM(require_react(), 1);
+var import_react8 = __toESM(require_react(), 1);
 
 // src/designer/tableGen.js
 var HEAD = { fontWeight: "bold", backgroundColor: "#f1f5f9", borderBottom: "0.75 solid #94a3b8" };
@@ -8841,24 +8890,28 @@ function instantPicks(fields, rows = []) {
 }
 
 // src/designer/Reuse.jsx
-var import_react6 = __toESM(require_react(), 1);
+var import_react7 = __toESM(require_react(), 1);
 
 // src/designer/Fonts.jsx
-var import_react5 = __toESM(require_react(), 1);
+var import_react6 = __toESM(require_react(), 1);
 var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
 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] = (0, import_react5.useState)(null);
-  const [family, setFamily] = (0, import_react5.useState)("");
-  const [weight, setWeight] = (0, import_react5.useState)("");
-  const [style, setStyle] = (0, import_react5.useState)("");
-  const [busy, setBusy] = (0, import_react5.useState)(false);
-  const [msg, setMsg] = (0, import_react5.useState)(null);
+  const [file, setFile] = (0, import_react6.useState)(null);
+  const [family, setFamily] = (0, import_react6.useState)("");
+  const [weight, setWeight] = (0, import_react6.useState)("");
+  const [style, setStyle] = (0, import_react6.useState)("");
+  const [busy, setBusy] = (0, import_react6.useState)(false);
+  const [msg, setMsg] = (0, import_react6.useState)(null);
   const upload = async () => {
     if (!file) return;
     setBusy(true);
@@ -8949,30 +9002,33 @@ 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);
-  (0, import_react6.useEffect)(() => {
-    fetchReused(id);
-  }, [id]);
+  (0, import_react7.useEffect)(() => {
+    fetchReused(id, false, api);
+  }, [id, api]);
   return d && !d.__error ? d : null;
 }
 var listCache = null;
 function ReportSelect({ value, onChange, exclude, ...rest }) {
-  const [list2, setList] = (0, import_react6.useState)(listCache || []);
-  (0, import_react6.useEffect)(() => {
+  const [list2, setList] = (0, import_react7.useState)(listCache || []);
+  (0, import_react7.useEffect)(() => {
     if (noServer()) return;
     fetch(`${server()}/api/reports`).then((r) => r.ok ? r.json() : []).then((l) => {
       listCache = Array.isArray(l) ? l : [];
@@ -9039,7 +9095,7 @@ function ThemeSection() {
   const id = useDesigner((s) => s.id);
   const families = useFontFamilies();
   const src = def.theme;
-  const [mode, setMode] = (0, import_react6.useState)(!src ? "own" : String(src).startsWith("=") ? "expr" : "report");
+  const [mode, setMode] = (0, import_react7.useState)(!src ? "own" : String(src).startsWith("=") ? "expr" : "report");
   const td = def.themeDef || {};
   const setTd = (fn3, key2) => apply((d) => {
     d.themeDef || (d.themeDef = {});
@@ -9058,7 +9114,7 @@ function ThemeSection() {
     else x.fonts[k][p] = v;
   }, `theme.font.${k}.${p}`);
   const consts = Object.entries(td.constants || {});
-  const [newConst, setNewConst] = (0, import_react6.useState)("");
+  const [newConst, setNewConst] = (0, import_react7.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cat", "data-testid": "theme", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CatHead, { children: T("theme") }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { label: T("themeSource"), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -9118,7 +9174,7 @@ function LayersPanel() {
   const T = useT2();
   const layers = useDesigner((s) => s.def.layers) || [];
   const readOnly2 = useDesigner((s) => s.readOnly);
-  const [name2, setName] = (0, import_react6.useState)("");
+  const [name2, setName] = (0, import_react7.useState)("");
   const set2 = (fn3, key2) => apply((d) => {
     d.layers || (d.layers = []);
     fn3(d.layers, d);
@@ -9273,7 +9329,7 @@ function PartsPanel() {
   const libs = useDesigner((s) => s.def.libraries) || [];
   const id = useDesigner((s) => s.id);
   const readOnly2 = useDesigner((s) => s.readOnly);
-  const [pick, setPick] = (0, import_react6.useState)("");
+  const [pick, setPick] = (0, import_react7.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "pane", "data-testid": "parts-panel", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h4", { children: [
       T("parts"),
@@ -9402,7 +9458,7 @@ function PublishPart({ item }) {
     if (v === void 0 || v === "") delete q2[k];
     else q2[k] = v;
   }, `part${i2}.q${j}.${k}`);
-  const [newProp, setNewProp] = (0, import_react6.useState)("");
+  const [newProp, setNewProp] = (0, import_react7.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cat", "data-testid": "publish-part", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CatHead, { children: T("reportPart") }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Check, { label: T("publishPart"), checked: !!p, onChange: (on) => set2((l) => {
@@ -9531,12 +9587,12 @@ function useDesignIssues() {
   const def = useDesigner((s) => s.def);
   const extents = useDesigner((s) => s.extents);
   const saveCheck = useDesigner((s) => s.saveCheck);
-  return (0, import_react7.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     const bands = sectionList(def).map((s) => ({ key: s.key, items: secOf(def, s.key)?.items || [], width: bodyWidth(def, s.key) }));
     return [...designIssues(def, bands, extents || {}), ...checkIssues(bands, [...validate(def).errors, ...saveCheck?.missing || []])];
   }, [def, extents, saveCheck]);
 }
-var IssueMap = (0, import_react7.createContext)(/* @__PURE__ */ new Map());
+var IssueMap = (0, import_react8.createContext)(/* @__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 });
@@ -9601,9 +9657,9 @@ 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 = (0, import_react7.useRef)(null);
-  const [fitW, setFitW] = (0, import_react7.useState)(0);
-  (0, import_react7.useEffect)(() => {
+  const scrollRef = (0, import_react8.useRef)(null);
+  const [fitW, setFitW] = (0, import_react8.useState)(0);
+  (0, import_react8.useEffect)(() => {
     if (zoom !== "fit" || !scrollRef.current) return;
     const el = scrollRef.current;
     const ro = new ResizeObserver(() => setFitW(el.clientWidth));
@@ -9611,10 +9667,10 @@ function Canvas() {
     return () => ro.disconnect();
   }, [zoom]);
   const scale = zoom === "fit" ? Math.max(0.3, Math.min(3, ((fitW || 900) - 80) / bw)) : zoom * PX;
-  const [drag, setDrag] = (0, import_react7.useState)(null);
+  const [drag, setDrag] = (0, import_react8.useState)(null);
   const T = useT2();
   const issues = useDesignIssues();
-  const byId = (0, import_react7.useMemo)(() => {
+  const byId = (0, import_react8.useMemo)(() => {
     const m = /* @__PURE__ */ new Map();
     for (const i2 of issues) m.set(i2.id, [...m.get(i2.id) || [], issueLine(T, i2)]);
     return m;
@@ -9695,9 +9751,9 @@ 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 = (0, import_react7.useRef)(null);
-  const [marquee, setMarquee] = (0, import_react7.useState)(null);
-  const [dropping, setDropping] = (0, import_react7.useState)(false);
+  const ref = (0, import_react8.useRef)(null);
+  const [marquee, setMarquee] = (0, import_react8.useState)(null);
+  const [dropping, setDropping] = (0, import_react8.useState)(false);
   const h = drag?.mode === "band" && drag.section === section ? drag.h : sec.height || 0;
   const DROP_ROOM = 96;
   const toPt3 = (e) => {
@@ -9871,8 +9927,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) {
@@ -9880,11 +9937,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) {
@@ -9957,8 +10034,8 @@ function AnyItem(props) {
   return layer?.locked ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "layer-locked", "data-locked": props.item.name, children: el }) : el;
 }
 function NestChildren({ item, scale, drag, setDrag, section }) {
-  const ref = (0, import_react7.useRef)(null);
-  const [over, setOver] = (0, import_react7.useState)(false);
+  const ref = (0, import_react8.useRef)(null);
+  const [over, setOver] = (0, import_react8.useState)(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) => {
     setOver(false);
@@ -10003,8 +10080,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 = (0, import_react7.useContext)(IssueMap).get(item.id);
+  const problems = (0, import_react8.useContext)(IssueMap).get(item.id);
   const onHandle = (dir) => (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -10063,6 +10141,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__ */ (0, import_jsx_runtime6.jsx)(NestBox, { item: { ...item, ...r }, scale }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ItemBody, { item: { ...item, ...r }, scale }),
         nest && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NestChildren, { item, scale, drag, setDrag, section }),
@@ -10080,8 +10159,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));
@@ -10092,7 +10171,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 = {
@@ -10134,20 +10213,21 @@ 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] = (0, import_react7.useState)(null);
+  const [svg, setSvg] = (0, import_react8.useState)(null);
   const { x, y, ...shape2 } = item;
   const key2 = JSON.stringify(shape2);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     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 });
@@ -10169,9 +10249,9 @@ function PartPreview({ item, scale }) {
   const p = (lib?.parts || []).find((q2) => q2.name === item.part);
   const src = p && findItemNamed(lib, p.item);
   const props = { ...Object.fromEntries((p?.properties || []).map((q2) => [q2.name, q2.default ?? null])), ...item.properties || {} };
-  const [svg, setSvg] = (0, import_react7.useState)(null);
+  const [svg, setSvg] = (0, import_react8.useState)(null);
   const key2 = JSON.stringify([src, props]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!src) return void 0;
     let alive = true;
     const t3 = setTimeout(() => {
@@ -10281,17 +10361,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] = (0, import_react7.useState)(null);
-  const [menu, setMenu] = (0, import_react7.useState)(null);
-  const problems = (0, import_react7.useContext)(IssueMap).get(item.id);
-  const tblRef = (0, import_react7.useRef)(null);
+  const [dropCell, setDropCell] = (0, import_react8.useState)(null);
+  const [menu, setMenu] = (0, import_react8.useState)(null);
+  const problems = (0, import_react8.useContext)(IssueMap).get(item.id);
+  const tblRef = (0, import_react8.useRef)(null);
   const chosen = sel.kind === "cell" && sel.id === item.id ? selCells(sel) : [];
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     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);
@@ -10304,6 +10385,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;
@@ -10379,7 +10461,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}`;
@@ -10387,7 +10469,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__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsxs)("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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "issue-tag", title: problems.join("\n"), "aria-label": problems.join(". "), children: "!" }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "grip", title: "Select or move the table", onPointerDown: onGrip, children: "⠿" }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "col-handles", "aria-label": T("ux_columns"), role: "group", children: widths2.map((w, ci) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -10517,13 +10599,13 @@ function TableView({ item, scale, drag, setDrag }) {
 }
 
 // src/designer/Inspector.jsx
-var import_react11 = __toESM(require_react(), 1);
+var import_react12 = __toESM(require_react(), 1);
 
 // src/designer/ExpressionEditor.jsx
-var import_react9 = __toESM(require_react(), 1);
+var import_react10 = __toESM(require_react(), 1);
 
 // src/designer/ExprCode.jsx
-var import_react8 = __toESM(require_react(), 1);
+var import_react9 = __toESM(require_react(), 1);
 
 // node_modules/@marijn/find-cluster-break/src/index.js
 var rangeFrom = [];
@@ -12267,8 +12349,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
@@ -13496,10 +13578,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);
@@ -13913,14 +13995,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;
@@ -15439,9 +15521,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);
@@ -15457,9 +15539,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) => {
@@ -15547,11 +15629,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) {
@@ -16781,7 +16863,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)
@@ -16789,8 +16871,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);
@@ -16802,7 +16884,7 @@ var TileUpdate = class {
               b.addBlockWidget(tile);
             } else {
               b.ensureLine(pendingLineAttrs);
-              b.addInlineWidget(tile, active, openStart);
+              b.addInlineWidget(tile, active2, openStart);
             }
           }
           pendingLineAttrs = null;
@@ -16812,7 +16894,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) {
@@ -16821,12 +16903,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)
@@ -18815,9 +18897,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) {
@@ -28860,7 +28942,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) => {
@@ -28875,7 +28957,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) {
@@ -28938,12 +29020,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;
@@ -28954,7 +29036,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);
@@ -28967,8 +29049,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;
   }
@@ -28978,7 +29060,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(
@@ -28989,17 +29071,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 */
@@ -29007,7 +29089,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;
@@ -29092,9 +29174,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;
@@ -29238,8 +29320,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 = [];
@@ -29256,9 +29338,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);
@@ -29303,19 +29385,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();
@@ -29348,26 +29430,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);
         }
@@ -29824,12 +29906,12 @@ var theme2 = EditorView.theme({
   "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { background: "var(--accent-soft)" }
 });
 var UNKNOWN = Decoration.mark({ class: "cm-unknown-field" });
-var ExprCode = (0, import_react8.forwardRef)(function ExprCode2({ value, onChange, fields, parameters, invalid, check }, ref) {
-  const host = (0, import_react8.useRef)(null);
-  const view = (0, import_react8.useRef)(null);
-  const latest2 = (0, import_react8.useRef)({ onChange, fields, parameters, check });
+var ExprCode = (0, import_react9.forwardRef)(function ExprCode2({ value, onChange, fields, parameters, invalid, check }, ref) {
+  const host = (0, import_react9.useRef)(null);
+  const view = (0, import_react9.useRef)(null);
+  const latest2 = (0, import_react9.useRef)({ onChange, fields, parameters, check });
   latest2.current = { onChange, fields, parameters, check };
-  (0, import_react8.useImperativeHandle)(ref, () => ({
+  (0, import_react9.useImperativeHandle)(ref, () => ({
     insert(text) {
       const v = view.current;
       if (!v) return;
@@ -29843,7 +29925,7 @@ var ExprCode = (0, import_react8.forwardRef)(function ExprCode2({ value, onChang
       view.current?.focus();
     }
   }));
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const complete = (ctx) => {
       const m = ctx.matchBefore(/(Fields|Parameters|Globals)\.\w*$/);
       if (m) {
@@ -29932,8 +30014,8 @@ var SNIPPETS = {
 function ExpressionEditor({ value, dataSet, onSave, onClose, title }) {
   const def = useDesigner((s) => s.def);
   const sample = useDesigner((s) => s.sample);
-  const [text, setText] = (0, import_react9.useState)(value ?? "");
-  const ta = (0, import_react9.useRef)(null);
+  const [text, setText] = (0, import_react10.useState)(value ?? "");
+  const ta = (0, import_react10.useRef)(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"));
@@ -29943,7 +30025,7 @@ function ExpressionEditor({ value, dataSet, onSave, onClose, title }) {
   const insert2 = (s) => ta.current?.insert(s);
   const err = checkValue(text);
   const issues = err ? [] : check(text);
-  const preview = (0, import_react9.useMemo)(() => {
+  const preview = (0, import_react10.useMemo)(() => {
     if (err || !sample?.dataSets) return null;
     const rows = sample.dataSets[dsName] || [];
     const params = Object.fromEntries((def.parameters || []).map((p) => [p.name, p.default ?? null]));
@@ -30016,7 +30098,7 @@ function ExpressionEditor({ value, dataSet, onSave, onClose, title }) {
 }
 
 // src/designer/CondFormat.jsx
-var import_react10 = __toESM(require_react(), 1);
+var import_react11 = __toESM(require_react(), 1);
 
 // src/designer/cfRules.js
 var CF_OPS = ["eq", "ne", "lt", "le", "gt", "ge", "between", "top", "bottom", "aboveAvg", "belowAvg", "contains", "startsWith", "empty", "notEmpty"];
@@ -30136,7 +30218,7 @@ function CondFormat({ title, cf: start, fields, thisValue, kind, custom, onApply
   const lang2 = useDesigner((s) => s.lang);
   const T = (k, v) => t(lang2, k, v);
   const blank = () => ({ field: thisValue ? void 0 : fields[0], op: "gt", value: "", format: kind === "chart" ? { backgroundColor: "#dc2626" } : { color: "#b42318", fontWeight: "bold" } });
-  const [cf, setCf] = (0, import_react10.useState)(() => JSON.parse(JSON.stringify(start || { mode: "first", rules: [blank()] })));
+  const [cf, setCf] = (0, import_react11.useState)(() => JSON.parse(JSON.stringify(start || { mode: "first", rules: [blank()] })));
   const rules = cf.rules || [];
   const setRule = (i2, patch) => setCf((c) => ({ ...c, rules: c.rules.map((r, j) => j === i2 ? { ...r, ...patch } : r) }));
   const setFmt = (i2, k, v) => setCf((c) => ({ ...c, rules: c.rules.map((r, j) => {
@@ -30227,7 +30309,7 @@ var catLabel = (tk, cat) => tk(`cat_${cat}`, cat);
 function Inspector() {
   const sel = useDesigner((s) => s.sel);
   const def = useDesigner((s) => s.def);
-  const [expr, setExpr] = (0, import_react11.useState)(null);
+  const [expr, setExpr] = (0, import_react12.useState)(null);
   const openExpr = (cfg) => setExpr(cfg);
   let body;
   if (sel.kind === "items" && sel.ids.length > 1) body = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Multi, { ids: sel.ids });
@@ -30242,13 +30324,13 @@ 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 = (0, import_react11.useRef)(null);
-  (0, import_react11.useLayoutEffect)(() => {
+  const ref = (0, import_react12.useRef)(null);
+  (0, import_react12.useLayoutEffect)(() => {
     const pane = ref.current?.closest(".dright");
     if (pane) pane.scrollTop = 0;
   }, [selKey]);
-  const [closed, setClosed] = (0, import_react11.useState)(() => /* @__PURE__ */ new Set());
-  (0, import_react11.useLayoutEffect)(() => {
+  const [closed, setClosed] = (0, import_react12.useState)(() => /* @__PURE__ */ new Set());
+  (0, import_react12.useLayoutEffect)(() => {
     for (const h of ref.current?.querySelectorAll(".cat > h5") || []) {
       const shut = closed.has(h.textContent);
       h.querySelector("button")?.setAttribute("aria-expanded", String(!shut));
@@ -30267,13 +30349,13 @@ function Inspector() {
     });
   };
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-testid": "inspector", ref, onClick: toggle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldScope.Provider, { value: scope, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.Fragment, { children: body }, selKey) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FieldScope.Provider, { value: scope, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.Fragment, { children: body }, selKey) }),
     expr && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ExpressionEditor, { ...expr, onClose: () => setExpr(null) })
   ] });
 }
-function Geo({ label, value, onChange }) {
+function Geo({ label, value, onChange, min }) {
   const unit = useDesigner((s) => s.unit);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Field, { label: `${label} (${unit})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(Field, { label: `${label} (${unit})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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();
@@ -30338,7 +30420,7 @@ function OverflowTarget({ value, onChange, self }) {
 }
 function ExprOr({ p, value, onChange, openExpr, dataSet, children }) {
   const T = useT3();
-  const [on, setOn] = (0, import_react11.useState)(isDynamic(value));
+  const [on, setOn] = (0, import_react12.useState)(isDynamic(value));
   const label = T(on ? "useFixed" : "useExpr");
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Field, { label: p.label, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "expr-row", children: [
     on ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ExprInput, { value, onChange: (v) => onChange(v || void 0), onOpen: () => openExpr({ value, dataSet, onSave: onChange, title: p.label }), placeholder: "=IIf(Fields.amount < 0, 'bold', 'normal')" }) : children,
@@ -30351,7 +30433,7 @@ function ExprOr({ p, value, onChange, openExpr, dataSet, children }) {
 function PaletteEditor({ label, value, onChange }) {
   const T = useT3();
   const custom = Array.isArray(value);
-  const [text, setText] = (0, import_react11.useState)(custom ? value.join(", ") : "");
+  const [text, setText] = (0, import_react12.useState)(custom ? value.join(", ") : "");
   const parse2 = (t3) => t3.split(/[\s,;]+/).map((x) => x.trim()).filter((x) => /^#[0-9a-f]{6}$/i.test(x));
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "grid", gap: 6 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Field, { label, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -30378,17 +30460,18 @@ function PaletteEditor({ label, value, onChange }) {
     custom && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", gap: 3, flexWrap: "wrap" }, "aria-hidden": "true", children: value.map((c, i2) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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] = (0, import_react11.useState)(reportList || []);
-  const listId = (0, import_react11.useState)(() => `reports-${Math.random().toString(36).slice(2, 8)}`)[0];
-  (0, import_react11.useEffect)(() => {
+  const [list2, setList] = (0, import_react12.useState)(() => reportLists.get(useDesigner.getState().embed?.server || "") || []);
+  const listId = (0, import_react12.useState)(() => `reports-${Math.random().toString(36).slice(2, 8)}`)[0];
+  (0, import_react12.useEffect)(() => {
     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(() => {
     });
   }, []);
@@ -30422,8 +30505,8 @@ function ItemProps({ item, section, openExpr }) {
   const tk = useTk();
   const def = useDesigner((s) => s.def);
   const spec = ITEMS[item.type];
-  const [nameErr, setNameErr] = (0, import_react11.useState)(null);
-  const [find2, setFind] = (0, import_react11.useState)("");
+  const [nameErr, setNameErr] = (0, import_react12.useState)(null);
+  const [find2, setFind] = (0, import_react12.useState)("");
   const q2 = find2.trim().toLowerCase();
   const hit = (p, type) => !q2 || propLabel(tk, p, type).toLowerCase().includes(q2) || p.key.toLowerCase().includes(q2);
   const props = (spec?.props || []).filter((p) => (!p.showIf || p.showIf(item)) && hit(p, item.type));
@@ -30475,8 +30558,8 @@ function ItemProps({ item, section, openExpr }) {
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Geo, { label: "X", value: item.x, onChange: (v) => setGeo("x", Math.max(0, v)) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Geo, { label: "Y", value: item.y, onChange: (v) => setGeo("y", Math.max(0, v)) }),
-        item.type !== "table" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Geo, { label: T("i_width"), value: item.w, onChange: (v) => setGeo("w", Math.max(0, v)) }),
-        item.type !== "table" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Geo, { label: T("i_height"), value: item.h, onChange: (v) => setGeo("h", Math.max(0, v)) }),
+        item.type !== "table" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(Field, { label: T("tableSize"), hint: T("tableSizeHint"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextInput, { value: `${round(item.w)} × ${round(item.h)} pt`, readOnly: true, "data-testid": "table-size" }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hint", children: (() => {
@@ -30567,7 +30650,7 @@ function PivotEditor({ item, openExpr }) {
   const def = useDesigner((s) => s.def);
   const fields = fieldsOf2(def, item.dataSet);
   const spec = normalizeMatrix(item);
-  const [pick, setPick] = (0, import_react11.useState)({ rowGroups: "", columnGroups: "", values: "" });
+  const [pick, setPick] = (0, import_react12.useState)({ rowGroups: "", columnGroups: "", values: "" });
   const edit = (fn3, key2) => updateItem(item.id, (it) => {
     if (!isTablix(it)) {
       const n = normalizeMatrix(it);
@@ -30646,7 +30729,17 @@ function PivotEditor({ item, openExpr }) {
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Field, { label: T("groupExpandLevels"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(Check, { label: T("pivotCollapsible"), checked: g.collapsible, onChange: (v) => setK(list2, i2, "collapsible", v) }),
+      (i2 < spec[list2].length - 1 || list2 === "rowGroups" && g.parent) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsx)(Check, { label: T("pivotStartCollapsed"), checked: g.initiallyCollapsed, onChange: (v) => setK(list2, i2, "initiallyCollapsed", v) }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-testid": `pivot-${list2}${i2}-action`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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__ */ (0, import_jsx_runtime10.jsx)("div", { "data-testid": `pivot-${list2}${i2}-total-action`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionEditor, { label: T("ux_totalAction"), value: g.totalAction, onChange: (v) => setK(list2, i2, "totalAction", v), openExpr, dataSet: item.dataSet }) })
@@ -30672,7 +30765,7 @@ function PivotEditor({ item, openExpr }) {
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Field, { label: T("pivotLabel"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextInput, { value: v.label || "", onChange: (x) => setK("values", i2, "label", x) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Field, { label: T("pivotFormat"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextInput, { value: v.format || "", onChange: (x) => setK("values", i2, "format", x), placeholder: "N0" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Field, { label: T("pivotShow"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Select, { value: v.show || "value", options: shows, onChange: (x) => setK("values", i2, "show", x === "value" ? void 0 : x) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Field, { label: T("pivotShow"), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Select, { value: v.show || "value", options: shows, onChange: (x) => edit((it) => setMatrixShow(it.values[i2], x), `${item.id}.values${i2}.show`) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-testid": `pivot-values${i2}-action`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ActionEditor, { label: T("ux_cellAction"), value: v.action, onChange: (x) => setK("values", i2, "action", x), openExpr, dataSet: item.dataSet }) }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Field, { label: T("cellBookmark"), children: exprField("values", i2, "bookmark", v.bookmark, T("cellBookmark")) })
@@ -30714,8 +30807,8 @@ function GroupsEditor({ table: table2, openExpr }) {
   const T = useT3();
   const def = useDesigner((s) => s.def);
   const fields = fieldsOf2(def, table2.dataSet);
-  const [pick, setPick] = (0, import_react11.useState)("");
-  const [drill, setDrill] = (0, import_react11.useState)(false);
+  const [pick, setPick] = (0, import_react12.useState)("");
+  const [drill, setDrill] = (0, import_react12.useState)(false);
   const setG = (i2, k, v) => updateItem(table2.id, (t3) => {
     if (v === void 0 || v === "" || v === false) delete t3.groups[i2][k];
     else t3.groups[i2][k] = v;
@@ -30957,7 +31050,7 @@ rimary" ? void 0 : v), "aria-label": `${T("overlayAxis")} ${i2 + 1}` }) }),
 }
 function CfButton({ label, title, target, at: at2, kind, fields, apply: apply2, testid }) {
   const T = useT3();
-  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [open, setOpen] = (0, import_react12.useState)(false);
   const n = target?.cf?.rules?.length || 0;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", className: "btn sm", onClick: () => setOpen(true), "data-testid": testid, children: [
@@ -31024,14 +31117,16 @@ function VisualEditor({ cell, setCell, openExpr, dataSet }) {
 }
 var reportParams = /* @__PURE__ */ new Map();
 function useReportParams(id) {
-  const [list2, setList] = (0, import_react11.useState)(() => reportParams.get(id) ?? null);
-  (0, import_react11.useEffect)(() => {
+  const srv = () => useDesigner.getState().embed?.server || "";
+  const [list2, setList] = (0, import_react12.useState)(() => reportParams.get(`${srv()} ${id}`) ?? null);
+  (0, import_react12.useEffect)(() => {
     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;
@@ -31044,7 +31139,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);
@@ -31058,7 +31153,7 @@ function useReportParams(id) {
 function ParamMap({ value, onChange, known, openExpr, dataSet, testid }) {
   const T = useT3();
   const map = value || {};
-  const [extra, setExtra] = (0, import_react11.useState)("");
+  const [extra, setExtra] = (0, import_react12.useState)("");
   const knownNames = new Set((known || []).map((p) => p.name));
   const names = [...(known || []).map((p) => p.name), ...Object.keys(map).filter((k) => !knownNames.has(k))];
   const set2 = (k, v, keep) => {
@@ -31477,7 +31572,7 @@ function ReportProps() {
   const T = useT3();
   const def = useDesigner((s) => s.def);
   const families = useFontFamilies();
-  const [fontsOpen, setFontsOpen] = (0, import_react11.useState)(false);
+  const [fontsOpen, setFontsOpen] = (0, import_react12.useState)(false);
   const set2 = (fn3, key2) => useDesigner.getState().apply(fn3, key2);
   const m = Array.isArray(def.page?.margins) ? def.page.margins : [36, 36, 36, 36];
   const base2 = def.styles?.base || {};
@@ -31556,7 +31651,7 @@ function ReportProps() {
 function ReportImages() {
   const T = useT3();
   const images = useDesigner((s) => s.def.images) || {};
-  const [err, setErr] = (0, import_react11.useState)(null);
+  const [err, setErr] = (0, import_react12.useState)(null);
   const set2 = (fn3) => useDesigner.getState().apply((d) => {
     d.images || (d.images = {});
     fn3(d.images);
@@ -31595,7 +31690,7 @@ function EmbeddedPicker({ item, onPick }) {
   const images = useDesigner((s) => s.def.images) || {};
   const names = Object.keys(images);
   const cur2 = /^embedded:(.+)$/.exec(String(item.src || ""))?.[1];
-  const [err, setErr] = (0, import_react11.useState)(null);
+  const [err, setErr] = (0, import_react12.useState)(null);
   const upload = async (files) => {
     setErr(null);
     const r = await uploadImages(files, T);
@@ -31680,7 +31775,7 @@ function NamedStyles() {
   const styleNames = useStyleNames();
   const def = useDesigner((s) => s.def);
   const named = def.styles?.named || {};
-  const [newName, setNewName] = (0, import_react11.useState)("");
+  const [newName, setNewName] = (0, import_react12.useState)("");
   const setS = (name2, k, v) => useDesigner.getState().apply((d) => {
     var _a2, _b;
     d.styles || (d.styles = {});
@@ -31715,7 +31810,7 @@ function NamedStyles() {
 }
 
 // src/designer/DataPanel.jsx
-var import_react14 = __toESM(require_react(), 1);
+var import_react15 = __toESM(require_react(), 1);
 
 // src/designer/explore.js
 var key = (k) => /^[A-Za-z_$][\w$]*$/.test(k) ? `.${k}` : `['${k}']`;
@@ -31751,7 +31846,7 @@ function bestRows(root) {
 }
 
 // src/designer/ODataEditor.jsx
-var import_react12 = __toESM(require_react(), 1);
+var import_react13 = __toESM(require_react(), 1);
 var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
 var OPS3 = ["eq", "ne", "gt", "ge", "lt", "le", "contains", "startswith", "endswith"];
 var OP_LABEL = { eq: "=", ne: "≠", gt: ">", ge: "≥", lt: "<", le: "≤" };
@@ -31766,7 +31861,7 @@ async function readMetadata(s) {
   return odataMetadata(await res.text());
 }
 function ODataEditor({ s, setS, T }) {
-  const [meta2, setMeta] = (0, import_react12.useState)(null);
+  const [meta2, setMeta] = (0, import_react13.useState)(null);
   const sets = meta2?.sets || [];
   const set2 = sets.find((x) => x.name === s.entitySet);
   const props = set2 ? set2.properties : (s.select || []).map((name2) => ({ name: name2, type: s.types?.[name2] || "" }));
@@ -31857,7 +31952,7 @@ function ODataEditor({ s, setS, T }) {
 }
 
 // src/designer/SqlBuilder.jsx
-var import_react13 = __toESM(require_react(), 1);
+var import_react14 = __toESM(require_react(), 1);
 
 // src/designer/sqlBuild.js
 var FILTER_OPS2 = ["=", "<>", "<", "<=", ">", ">=", "like", "in", "is null", "is not null"];
@@ -31930,8 +32025,8 @@ function normalizeSchema(body) {
   return tables;
 }
 function useSchema(connection) {
-  const [st, setSt] = (0, import_react13.useState)(() => schemas.has(connection) ? { tables: schemas.get(connection) } : { loading: !!connection });
-  (0, import_react13.useEffect)(() => {
+  const [st, setSt] = (0, import_react14.useState)(() => schemas.has(connection) ? { tables: schemas.get(connection) } : { loading: !!connection });
+  (0, import_react14.useEffect)(() => {
     if (!connection) {
       setSt({});
       return void 0;
@@ -31965,8 +32060,8 @@ function SqlBuilder({ s, setS, T, kind, onManual }) {
     const nb = { ...b, ...patch };
     setS({ ...s, builder: nb, query: buildSql(nb, kind) });
   };
-  const [find2, setFind] = (0, import_react13.useState)("");
-  const [preview, setPreview] = (0, import_react13.useState)(null);
+  const [find2, setFind] = (0, import_react14.useState)("");
+  const [preview, setPreview] = (0, import_react14.useState)(null);
   const sql = buildSql(b, kind);
   const tableOf2 = (name2) => (schema.tables || []).find((t3) => t3.name === name2);
   const colsOf = (alias) => tableOf2(b.tables.find((t3) => t3.alias === alias)?.name)?.columns || [];
@@ -31995,7 +32090,7 @@ function SqlBuilder({ s, setS, T, kind, onManual }) {
     if (from.t === to.t || b.joins.some((j) => j.from.t === from.t && j.from.c === from.c && j.to.t === to.t && j.to.c === to.c)) return;
     set2({ joins: [...b.joins, { type: "inner", from, to }] });
   };
-  const offered = (0, import_react13.useMemo)(() => b.tables.flatMap((t3) => suggestJoins(b, schema.tables, t3.alias)).filter((j, i2, a) => !b.joins.some((x) => x.from.t === j.from.t && x.from.c === j.from.c && x.to.t === j.to.t && x.to.c === j.to.c) && a.findIndex((y) => JSON.stringify(y) === JSON.stringify(j)) === i2), [b, schema.tables]);
+  const offered = (0, import_react14.useMemo)(() => b.tables.flatMap((t3) => suggestJoins(b, schema.tables, t3.alias)).filter((j, i2, a) => !b.joins.some((x) => x.from.t === j.from.t && x.from.c === j.from.c && x.to.t === j.to.t && x.to.c === j.to.c) && a.findIndex((y) => JSON.stringify(y) === JSON.stringify(j)) === i2), [b, schema.tables]);
   const runPreview = async () => {
     setPreview({ loading: true });
     try {
@@ -32158,7 +32253,7 @@ function SqlBuilder({ s, setS, T, kind, onManual }) {
   ] });
 }
 function JoinAdder({ allCols, split, onAdd, T }) {
-  const [a, setA] = (0, import_react13.useState)(""), [z, setZ] = (0, import_react13.useState)("");
+  const [a, setA] = (0, import_react14.useState)(""), [z, setZ] = (0, import_react14.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "qb-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Select, { value: a, allowEmpty: true, options: allCols, onChange: (v) => setA(v || ""), "aria-label": T("qb_joinFrom") }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "=" }),
@@ -32175,17 +32270,18 @@ function JoinAdder({ allCols, split, onAdd, T }) {
 var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
 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() {
@@ -32193,8 +32289,8 @@ function DataPanel() {
   const lang2 = useDesigner((s) => s.lang);
   const T = (k, v) => t(lang2, k, v);
   const sample = useDesigner((s) => s.sample);
-  const [dlg, setDlg] = (0, import_react14.useState)(null);
-  const [open, setOpen] = (0, import_react14.useState)(() => new Set((def.dataSets || []).map((d) => d.name)));
+  const [dlg, setDlg] = (0, import_react15.useState)(null);
+  const [open, setOpen] = (0, import_react15.useState)(() => new Set((def.dataSets || []).map((d) => d.name)));
   const toggle = (n) => setOpen((s) => {
     const x = new Set(s);
     x.has(n) ? x.delete(n) : x.add(n);
@@ -32343,10 +32439,10 @@ function ParamDialog({ index, onClose }) {
   const lang2 = useDesigner((s) => s.lang);
   const T = (k, v) => t(lang2, k, v);
   const orig = index != null ? def.parameters[index] : null;
-  const [p, setP] = (0, import_react14.useState)(orig || { name: "", type: "string", prompt: "", default: "", required: false });
-  const [columns, setColumns] = (0, import_react14.useState)(String(def.parameterLayout?.columns || 1));
-  const [live, setLive] = (0, import_react14.useState)(def.liveParameters !== false);
-  const [choicesText, setChoicesText] = (0, import_react14.useState)(() => (p.options || []).map(optionLine).join("\n"));
+  const [p, setP] = (0, import_react15.useState)(orig || { name: "", type: "string", prompt: "", default: "", required: false });
+  const [columns, setColumns] = (0, import_react15.useState)(String(def.parameterLayout?.columns || 1));
+  const [live, setLive] = (0, import_react15.useState)(def.liveParameters !== false);
+  const [choicesText, setChoicesText] = (0, import_react15.useState)(() => (p.options || []).map(optionLine).join("\n"));
   const fromFields = (def.dataSets?.find((d) => d.name === p.optionsFrom?.dataSet)?.fields || []).map((f) => f.name);
   const labelOpts = [...fromFields.map((f) => ({ value: `=Fields.${f}`, label: f })), ...p.optionsFrom?.label && !fromFields.some((f) => `=Fields.${f}` === p.optionsFrom.label) ? [{ value: p.optionsFrom.label, label: p.optionsFrom.label }] : []];
   const err = !NAME2.test(p.name) ? T("paramNameRule") : !uniqueIn(def.parameters, p.name, index) ? T("paramNameTaken") : p.optionsFrom && !p.optionsFrom.value ? T("ux_paramPickValueField") : null;
@@ -32493,7 +32589,7 @@ function SourceDialog({ index, onClose }) {
   const lang2 = useDesigner((s2) => s2.lang);
   const T = (k, v) => t(lang2, k, v);
   const orig = index != null ? def.dataSources[index] : null;
-  const [s, setS] = (0, import_react14.useState)(() => ({
+  const [s, setS] = (0, import_react15.useState)(() => ({
     name: "",
     type: "rest",
     method: "GET",
@@ -32557,11 +32653,11 @@ function SourceDialog({ index, onClose }) {
   if (!err && s.type === "sql" && !s.connection) err = "Pick a connection";
   if (!err && s.type === "sql" && s.procedure != null && !s.procedure) err = "Pick a stored procedure";
   if (!err && s.type === "sql" && s.procedure == null && !/^\s*(select|with)\b/i.test(s.query || "")) err = "Write a SELECT query";
-  const [conns, setConns] = (0, import_react14.useState)(null);
+  const [conns, setConns] = (0, import_react15.useState)(null);
   const procs = (conns || []).find((c) => c.name === s.connection)?.procs || [];
   const sqlKind = (conns || []).find((c) => c.name === s.connection)?.kind || "sqlite";
-  const [probe, setProbe] = (0, import_react14.useState)(null);
-  (0, import_react14.useEffect)(() => {
+  const [probe, setProbe] = (0, import_react15.useState)(null);
+  (0, import_react15.useEffect)(() => {
     if (s.type !== "sql" || conns) return;
     fetch("/api/data/sql/connections").then((r) => r.ok ? r.json() : []).then(setConns).catch(() => setConns([]));
   }, [s.type, conns]);
@@ -32754,13 +32850,13 @@ function DataSetDialog({ index, onClose, onSaved }) {
   const lang2 = useDesigner((s) => s.lang);
   const T = (k, v) => t(lang2, k, v);
   const orig = index != null ? def.dataSets[index] : null;
-  const [d, setD] = (0, import_react14.useState)(() => ({ name: "", source: def.dataSources?.[0]?.name, path: "$", fields: [], sort: [], ...orig ? JSON.parse(JSON.stringify(orig)) : {} }));
-  const [detect, setDetect] = (0, import_react14.useState)({ state: "idle" });
-  const [pathTyped, setPathTyped] = (0, import_react14.useState)(!!orig);
+  const [d, setD] = (0, import_react15.useState)(() => ({ name: "", source: def.dataSources?.[0]?.name, path: "$", fields: [], sort: [], ...orig ? JSON.parse(JSON.stringify(orig)) : {} }));
+  const [detect, setDetect] = (0, import_react15.useState)({ state: "idle" });
+  const [pathTyped, setPathTyped] = (0, import_react15.useState)(!!orig);
   const nested = !!d.relation;
   const parents = (def.dataSets || []).filter((x, i2) => i2 !== index && x.name !== d.name);
   const err = !NAME2.test(d.name) ? T("dsNameRule") : !uniqueIn(def.dataSets, d.name, index) ? T("dsNameTaken") : nested ? !d.relation.parent ? T("dsPickParent") : null : !d.source ? T("dsPickSource") : null;
-  const [explore, setExplore] = (0, import_react14.useState)(null);
+  const [explore, setExplore] = (0, import_react15.useState)(null);
   const loadSourceRaw = async (name2) => {
     const params = resolveParameters(useDesigner.getState().def, {});
     const src = useDesigner.getState().def.dataSources.find((s) => s.name === name2);
@@ -33010,7 +33106,7 @@ function DataSetDialog({ index, onClose, onSaved }) {
 }
 
 // src/designer/Outline.jsx
-var import_react15 = __toESM(require_react(), 1);
+var import_react16 = __toESM(require_react(), 1);
 var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
 var MIME = "application/x-pw-outline";
 function Outline() {
@@ -33019,11 +33115,32 @@ function Outline() {
   const lang2 = useDesigner((s) => s.lang);
   const readOnly2 = useDesigner((s) => s.readOnly);
   const T = (k, v) => t(lang2, k, v);
-  const [drop, setDrop] = (0, import_react15.useState)(null);
-  const [said, setSaid] = (0, import_react15.useState)("");
-  const dragged = (0, import_react15.useRef)(null);
-  const body = (0, import_react15.useRef)(null);
+  const [drop, setDrop] = (0, import_react16.useState)(null);
+  const [said, setSaid] = (0, import_react16.useState)("");
+  const [cur2, setCur] = (0, import_react16.useState)(null);
+  const dragged = (0, import_react16.useRef)(null);
+  const body = (0, import_react16.useRef)(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") {
@@ -33135,30 +33252,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__ */ (0, import_jsx_runtime14.jsxs)("li", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { role: "none", children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("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__ */ (0, import_jsx_runtime14.jsx)("span", { className: "grip", "aria-hidden": "true", children: "⠿" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ty", children: T(`item_${it.type}`) === `item_${it.type}` ? ITEMS[it.type]?.label || it.type : T(`item_${it.type}`) }),
         !readOnly2 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "act", style: { display: "inline-flex", gap: 2 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "tree", children: rows(it.items, it, depth + 1, section) })
+      NESTING.has(it.type) && (it.items || []).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "tree", role: "none", children: rows(it.items, it, depth + 1, section) })
     ] }, it.id);
   });
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "pane", "data-testid": "outline", children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h4", { children: T("outline") }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "pane-body", ref: body, children: [
-      sectionList(def).map(({ key: key2, label }) => {
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `outline-sec${drop?.band === key2 ? " drop-band" : ""}`, "data-outline-band": key2, ...bandDrop(key2), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: `linklike outline-band${sel.kind === "section" && sel.section === key2 ? " sel" : ""}`, onClick: () => useDesigner.getState().select({ kind: "section", section: key2 }), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("b", { children: label }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "tree", children: items.length ? rows(items, null, 1, key2) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { className: "subtle", children: T("outlineEmpty") }) })
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { role: "group", "aria-label": label, className: `outline-sec${drop?.band === key2 ? " drop-band" : ""}`, "data-outline-band": key2, ...bandDrop(key2), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime14.jsx)("b", { children: label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "tree", role: "none", children: items.length ? rows(items, null, 1, key2) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { className: "subtle", role: "none", children: T("outlineEmpty") }) })
         ] }, key2);
-      }),
+      }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "sr-only", id: "outline-nav", children: T("b9_outlineKeys") }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "hint", children: T("outlineHint") }),
       !readOnly2 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "hint", id: "outline-keys", children: T("outlineKeys") }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "sr-only", role: "status", "aria-live": "polite", children: said })
@@ -33167,7 +33286,7 @@ function Outline() {
 }
 
 // src/theme/ThemeToggle.jsx
-var import_react16 = __toESM(require_react(), 1);
+var import_react17 = __toESM(require_react(), 1);
 
 // src/theme/theme.js
 var THEME_KEY = "pw-theme";
@@ -33209,8 +33328,8 @@ function Icon2({ pref }) {
   ] });
 }
 function ThemeToggle({ className = "btn sm ghost icon" }) {
-  const [pref, setPref] = (0, import_react16.useState)("system");
-  (0, import_react16.useEffect)(() => {
+  const [pref, setPref] = (0, import_react17.useState)("system");
+  (0, import_react17.useEffect)(() => {
     setPref(readPreference());
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const onChange = () => {
@@ -33228,7 +33347,7 @@ function ThemeToggle({ className = "btn sm ghost icon" }) {
 }
 
 // src/designer/ChartWizard.jsx
-var import_react17 = __toESM(require_react(), 1);
+var import_react18 = __toESM(require_react(), 1);
 var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
 var TYPES = ["column", "bar", "line", "area", "pie", "donut", "scatter", "bubble", "radar", "funnel", "gauge", "treemap", "histogram", "boxplot", "waterfall", "gantt"];
 var PER_ROW = /* @__PURE__ */ new Set(["scatter", "bubble"]);
@@ -33344,14 +33463,14 @@ function ChartWizard() {
   const close = () => useDesigner.getState().setUi({ wizard: null });
   const lang2 = useDesigner((s) => s.lang);
   const tr = (k, v) => t(lang2, `cw_${k}`, v);
-  const [c, setC] = (0, import_react17.useState)(() => {
+  const [c, setC] = (0, import_react18.useState)(() => {
     if (editing) return configFromChart(editing);
     const score2 = (d) => ((d.fields || []).some((f) => f.type === "number") ? 1e6 : 0) + (sample?.dataSets?.[d.name]?.length || 0);
     const ds2 = [...def.dataSets || []].sort((a, b) => score2(b) - score2(a))[0];
     return { title: "", split: "", stacked: false, format: "N0", ...guess(ds2, sample?.dataSets?.[ds2?.name] || []) };
   });
   const set2 = (patch) => setC((x) => ({ ...x, ...patch, custom: false }));
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!sample?.dataSets && !sample?.loading) loadSample();
   }, []);
   const ds = (def.dataSets || []).find((d) => d.name === c.dataSet);
@@ -33362,7 +33481,7 @@ function ChartWizard() {
   const good = suggested(c, rows, fields);
   const dateCategory = fields.find((f) => f.name === c.category)?.type === "date";
   const monthish = fields.find((f) => f.name === c.category)?.type === "number" && /month/i.test(c.category) && rows.length > 0 && rows.every((r) => r[c.category] == null || Number.isInteger(r[c.category]) && r[c.category] >= 1 && r[c.category] <= 12);
-  const compact = (0, import_react17.useMemo)(() => {
+  const compact = (0, import_react18.useMemo)(() => {
     if (!c.value || c.agg === "Count" || c.format === "P1") return null;
     const per = /* @__PURE__ */ new Map();
     for (const r of rows) {
@@ -33378,14 +33497,14 @@ function ChartWizard() {
     const d = def.dataSets.find((x) => x.name === name2);
     setC((x) => ({ ...x, split: "", ...guess(d, sample?.dataSets?.[name2] || []) }));
   };
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (editing || !rows.length || c.touched) return;
     setC((x) => ({ ...x, ...guess(ds, rows), touched: true }));
   }, [rows.length]);
-  const [thumbs, setThumbs] = (0, import_react17.useState)({});
-  const [big, setBig] = (0, import_react17.useState)(null);
+  const [thumbs, setThumbs] = (0, import_react18.useState)({});
+  const [big, setBig] = (0, import_react18.useState)(null);
   const cfgKey = JSON.stringify({ ...c, touched: void 0 });
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!sample?.dataSets || !c.dataSet) return;
     let alive = true;
     const t3 = setTimeout(async () => {
@@ -33573,7 +33692,7 @@ function rawText(raw) {
 }
 
 // src/designer/TableWizard.jsx
-var import_react18 = __toESM(require_react(), 1);
+var import_react19 = __toESM(require_react(), 1);
 var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
 var LAYOUTS = [
   { id: "list", label: "List", when: "Every row, with totals" },
@@ -33586,12 +33705,13 @@ 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)));
-  const [c, setC] = (0, import_react18.useState)(() => ({ dataSet: wiz?.dataSet || def.dataSets?.[0]?.name, layout: wiz?.type === "matrix" ? "matrix" : "list", groupBy: "", fields: null, mRows: "", mCols: "", mValue: "" }));
+  const [c, setC] = (0, import_react19.useState)(() => ({ dataSet: wiz?.dataSet || def.dataSets?.[0]?.name, layout: wiz?.type === "matrix" ? "matrix" : "list", groupBy: "", fields: null, mRows: "", mCols: "", mValue: "" }));
   const set2 = (patch) => setC((x) => ({ ...x, ...patch }));
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!sample?.dataSets && !sample?.loading) loadSample();
   }, []);
   const ds = (def.dataSets || []).find((d) => d.name === c.dataSet);
@@ -33605,9 +33725,9 @@ function TableWizard() {
   const groupBy2 = c.groupBy || groupGuess;
   const mRows = c.mRows || groupBy2, mCols = c.mCols || text.find((f) => f.name !== mRows)?.name || "", mValue = c.mValue || nums[0]?.name || "";
   const itemFor = (layout, w) => layout === "matrix" ? mRows && mCols ? matrixFor(ds, { rows: mRows, columns: mCols, value: mValue, agg: mValue ? "Sum" : "Count", width: w, sample: rows, currency: def.currency }) : null : tableFor(ds, { layout, groupBy: groupBy2, width: w, rows, fields: chosen, currency: def.currency });
-  const [thumbs, setThumbs] = (0, import_react18.useState)({});
+  const [thumbs, setThumbs] = (0, import_react19.useState)({});
   const key2 = JSON.stringify([c, groupBy2, mRows, mCols, mValue, chosen]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!ds || !sample?.dataSets) return;
     let alive = true;
     const t3 = setTimeout(async () => {
@@ -33652,7 +33772,7 @@ function TableWizard() {
         /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("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__ */ (0, import_jsx_runtime17.jsx)("button", { className: "btn", onClick: close, children: "Cancel" }),
@@ -33665,7 +33785,7 @@ function TableWizard() {
         /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { className: "cw-side", "aria-label": "Data for the table", children: [
           /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Field, { label: "Data set", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(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__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hint", children: "Calling the API…" }),
-          noSourceKey(def) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hint", role: "status", "data-testid": "no-source", children: t(useDesigner.getState().lang, noSourceKey(def)) }),
+          noSourceKey(def) && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "hint", role: "status", "data-testid": "no-source", children: t(lang2, noSourceKey(def)) }),
           sample?.error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "err", children: sample.error }),
           c.layout !== "matrix" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
             c.layout !== "list" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Field, { label: "Group by", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Select, { value: groupBy2, options: text.map((f) => f.name), onChange: (v) => set2({ groupBy: v }) }) }),
@@ -33695,7 +33815,7 @@ function TableWizard() {
 }
 
 // src/designer/AskAi.jsx
-var import_react19 = __toESM(require_react(), 1);
+var import_react20 = __toESM(require_react(), 1);
 var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
 var trim = (v, n = 200) => Array.isArray(v) ? v.slice(0, n).map((x) => trim(x, n)) : v && typeof v === "object" ? Object.fromEntries(Object.entries(v).map(([k, x]) => [k, trim(x, n)])) : v;
 function changes(before, after) {
@@ -33711,9 +33831,9 @@ function changes(before, after) {
 function AskAi({ onClose }) {
   const def = useDesigner((s) => s.def);
   const sample = useDesigner((s) => s.sample);
-  const [prompt, setPrompt] = (0, import_react19.useState)("");
-  const [st, setSt] = (0, import_react19.useState)({ state: "idle" });
-  (0, import_react19.useEffect)(() => {
+  const [prompt, setPrompt] = (0, import_react20.useState)("");
+  const [st, setSt] = (0, import_react20.useState)({ state: "idle" });
+  (0, import_react20.useEffect)(() => {
     if (!sample?.dataSets && !sample?.loading) loadSample();
   }, []);
   const ask = async () => {
@@ -33727,7 +33847,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 };
@@ -33798,7 +33918,7 @@ function AskAi({ onClose }) {
 }
 
 // src/designer/PivotWizard.jsx
-var import_react20 = __toESM(require_react(), 1);
+var import_react21 = __toESM(require_react(), 1);
 var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
 var MIME_PF = "application/x-pw-pivot-field";
 var AGGS2 = ["Sum", "Avg", "Count", "Min", "Max"];
@@ -33830,9 +33950,9 @@ function Thumb({ item }) {
   const T = useT2();
   const def = useDesigner((s) => s.def);
   const sample = useDesigner((s) => s.sample);
-  const [svg, setSvg] = (0, import_react20.useState)(null);
+  const [svg, setSvg] = (0, import_react21.useState)(null);
   const key2 = JSON.stringify(item);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!item || !sample?.dataSets) return void 0;
     let alive = true;
     const t3 = setTimeout(() => {
@@ -33854,7 +33974,7 @@ function Thumb({ item }) {
 function useData(name2) {
   const def = useDesigner((s) => s.def);
   const sample = useDesigner((s) => s.sample);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!sample?.dataSets && !sample?.loading) loadSample();
   }, []);
   const ds = (def.dataSets || []).find((d) => d.name === name2);
@@ -33869,10 +33989,10 @@ function placeOf(w, def) {
 function PivotWizard() {
   const T = useT2();
   const w = useDesigner((s) => s.pivotWizard);
-  const [dsName, setDs] = (0, import_react20.useState)(() => w?.dataSet || useDesigner.getState().def.dataSets?.[0]?.name);
+  const [dsName, setDs] = (0, import_react21.useState)(() => w?.dataSet || useDesigner.getState().def.dataSets?.[0]?.name);
   const { def, ds, fields, rows } = useData(dsName);
-  const [lay, setLay] = (0, import_react20.useState)({ rows: [], columns: [], values: [] });
-  const [totals, setTotals] = (0, import_react20.useState)(true);
+  const [lay, setLay] = (0, import_react21.useState)({ rows: [], columns: [], values: [] });
+  const [totals, setTotals] = (0, import_react21.useState)(true);
   const close = () => useDesigner.getState().setUi({ pivotWizard: null });
   const width = Math.round(bodyWidth(def, w?.section || "body") - (w?.x || 0));
   const add = (zone2, f) => setLay((l) => {
@@ -33993,13 +34113,13 @@ function InstantVisuals() {
   const T = useT2();
   const w = useDesigner((s) => s.instantVisuals);
   const { def, ds, fields, rows } = useData(w?.dataSet);
-  const [picked, setPickedRaw] = (0, import_react20.useState)(() => instantPicks(ds?.fields || [], rows));
-  const [touched, setTouched] = (0, import_react20.useState)(false);
+  const [picked, setPickedRaw] = (0, import_react21.useState)(() => instantPicks(ds?.fields || [], rows));
+  const [touched, setTouched] = (0, import_react21.useState)(false);
   const setPicked = (fn3) => {
     setTouched(true);
     setPickedRaw(fn3);
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!touched) setPickedRaw(instantPicks(ds?.fields || [], rows));
   }, [rows.length, ds]);
   const close = () => useDesigner.getState().setUi({ instantVisuals: null });
@@ -34199,9 +34319,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);
   };
@@ -34250,12 +34371,15 @@ var TbGroup = ({ label, children }) => /* @__PURE__ */ (0, import_jsx_runtime20.
 ] });
 var QUICK = [["textbox", "text"], ["table", "table"], ["chart", "chart"], ["image", "image"]];
 function LeftRail({ T, readOnly: readOnly2, embed }) {
-  const body = (0, import_react21.useRef)(null);
-  const [at2, setAt] = (0, import_react21.useState)("tools");
+  const body = (0, import_react22.useRef)(null);
+  const [at2, setAt] = (0, import_react22.useState)("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 = () => {
@@ -34357,8 +34481,9 @@ var framed = () => {
   }
 };
 function useAutosave(id, T, lang2, user) {
-  const [offer, setOffer] = (0, import_react21.useState)(null);
-  (0, import_react21.useEffect)(() => {
+  const api = useDesignerStore();
+  const [offer, setOffer] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
     if (!id || user == null || framed()) return void 0;
     let store;
     try {
@@ -34368,10 +34493,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);
@@ -34380,7 +34505,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 () => {
@@ -34392,13 +34517,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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "draft-bar", role: "alert", "data-testid": "draft-offer", "data-stale": stale || void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: T(stale ? "ux_draftStale" : "ux_draftFound", { when }) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("button", { className: "btn sm", "data-testid": "draft-discard", onClick: () => {
@@ -34411,12 +34536,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__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "draft-bar", role: "alert", "data-testid": "save-conflict", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: T("ux_conflict") }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "btn sm", "data-testid": "conflict-mine", onClick: () => useDesigner.getState().save({ overwrite: true }), children: T("ux_conflictMine") }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "btn sm", "data-testid": "conflict-theirs", onClick: () => useDesigner.getState().takeTheirs(), children: T("ux_conflictTheirs") })
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "btn sm", "data-testid": "conflict-mine", onClick: () => api.getState().save({ overwrite: true }), children: T("ux_conflictMine") }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "btn sm", "data-testid": "conflict-theirs", onClick: () => api.getState().takeTheirs(), children: T("ux_conflictTheirs") })
   ] });
 }
 var AL = (d) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("svg", { width: "16", height: "14", viewBox: "0 0 16 14", "aria-hidden": "true", children: d });
@@ -34466,7 +34592,7 @@ var ALIGN2 = [
 ];
 function AlignBar({ T }) {
   const sel = useDesigner((s) => s.sel);
-  const [toPage, setToPage] = (0, import_react21.useState)(false);
+  const [toPage, setToPage] = (0, import_react22.useState)(false);
   if (sel.kind !== "items" || !sel.ids.length) return null;
   const n = sel.ids.length;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "align-bar", role: "toolbar", "aria-label": T("ux_alignBar"), "data-testid": "align-bar", children: [
@@ -34481,13 +34607,14 @@ function AlignBar({ T }) {
   ] });
 }
 function IssuesButton({ T }) {
+  const api = useDesignerStore();
   const issues = useDesignIssues();
-  const [open, setOpen] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [open, setOpen] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
     if (!issues.length) setOpen(false);
   }, [issues.length]);
-  const listRef = (0, import_react21.useRef)(null);
-  (0, import_react21.useLayoutEffect)(() => {
+  const listRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useLayoutEffect)(() => {
     const el = listRef.current;
     if (!el) return void 0;
     const place = () => {
@@ -34504,7 +34631,7 @@ function IssuesButton({ T }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "issues-wrap", children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "issues-list", "data-testid": "issues-list", ref: listRef, children: issues.map((i2, k) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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)) })
   ] });
 }
@@ -34528,9 +34655,10 @@ var SHORTCUTS = [
   ["?", "sc_help"]
 ];
 function HistoryDialog({ id, onClose, T, lang: lang2 }) {
-  const [list2, setList] = (0, import_react21.useState)(null);
-  const [err, setErr] = (0, import_react21.useState)(null);
-  (0, import_react21.useEffect)(() => {
+  const api = useDesignerStore();
+  const [list2, setList] = (0, import_react22.useState)(null);
+  const [err, setErr] = (0, import_react22.useState)(null);
+  (0, import_react22.useEffect)(() => {
     fetch(`/api/reports/${id}/versions`).then((r) => r.json()).then(setList).catch((e) => setErr(e.message));
   }, [id]);
   const restore = async (v) => {
@@ -34540,7 +34668,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__ */ (0, import_jsx_runtime20.jsxs)(Dialog, { title: T("versionHistory"), onClose, footer: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "btn", onClick: onClose, children: T("close") }), children: [
@@ -34562,18 +34690,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] = (0, import_react22.useState)(() => {
+    const s = storeIn || newDesignerStore();
+    activateStore(s);
+    return s;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DesignerStore.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(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 = (0, import_react22.useMemo)(() => {
+    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 = (0, import_react21.useRef)(false);
+  const ready = (0, import_react22.useRef)(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 = (0, import_react21.useRef)(null);
+  const rootRef = (0, import_react22.useRef)(null);
   const def = useDesigner((s) => s.def);
   const tab = useDesigner((s) => s.tab);
   const saved = useDesigner((s) => s.saved);
@@ -34583,23 +34741,23 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
   const snap = useDesigner((s) => s.snap);
   const unit = useDesigner((s) => s.unit);
   const fonts = useDesigner((s) => s.fonts);
-  const fontCss = (0, import_react21.useMemo)(() => fontFaceCss(allFontKeys(), fontsBase().replace(/\/$/, "")), [fonts]);
-  (0, import_react21.useEffect)(() => {
+  const fontCss = (0, import_react22.useMemo)(() => fontFaceCss(allFontKeys(), fontsBase().replace(/\/$/, "")), [fonts]);
+  (0, import_react22.useEffect)(() => {
     if (embed) declareDocumentStyles("pw-designer-fonts", fontCss);
   }, [embed, fontCss]);
-  (0, import_react21.useEffect)(() => {
-    customFonts().then((list2) => useDesigner.getState().setUi({ fonts: list2 }));
+  (0, import_react22.useEffect)(() => {
+    customFonts().then((list2) => api.getState().setUi({ fonts: list2 }));
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     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 [dialog, setDialog] = (0, import_react21.useState)(null);
-  const [showLeft, setShowLeft] = (0, import_react21.useState)(true);
-  const [showRight, setShowRight] = (0, import_react21.useState)(true);
+  const st = api.getState;
+  const [dialog, setDialog] = (0, import_react22.useState)(null);
+  const [showLeft, setShowLeft] = (0, import_react22.useState)(true);
+  const [showRight, setShowRight] = (0, import_react22.useState)(true);
   const selKind = useDesigner((s) => s.sel.kind);
   const wizard = useDesigner((s) => s.wizard);
   const tableWizard = useDesigner((s) => s.tableWizard);
@@ -34608,12 +34766,18 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
   const cells = useDesigner((s) => s.cells);
   const cellSize = useDesigner((s) => s.cellSize);
   const dataKey = useDesigner((s) => `${(s.def?.dataSources || []).map((x) => x.name)}|${(s.def?.dataSets || []).map((x) => x.name)}`);
-  (0, import_react21.useEffect)(() => {
-    loadSample();
+  (0, import_react22.useEffect)(() => {
+    loadSample(api);
   }, [dataKey]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
+    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();
@@ -34632,7 +34796,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();
@@ -34655,11 +34819,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();
@@ -34691,10 +34851,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]);
@@ -34713,17 +34887,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 = (0, import_react21.useRef)(null);
-  const [imported, setImported] = (0, import_react21.useState)(null);
+  const importInput = (0, import_react22.useRef)(null);
+  const [imported, setImported] = (0, import_react22.useState)(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 });
   };
@@ -34737,7 +34911,7 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "hint", children: T("loadingDesigner") })
   ] }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "designer", "data-testid": "designer", dir: dirOf(lang2), lang: lang2, ref: rootRef, "data-readonly": readOnly2 || void 0, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "designer", "data-testid": "designer", dir: dirOf(lang2), lang: lang2, ref: rootRef, "data-readonly": readOnly2 || void 0, ...activators, children: [
     !embed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("style", { children: fontCss }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("header", { className: "dtop dbar", children: [
       embed ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "brand", children: [
@@ -34844,7 +35018,7 @@ function Designer({ id, initial, rev = null, lang: langIn, embed = null, user =
       imported.warnings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { children: imported.warnings.map((w, i2) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("li", { children: w }, i2)) })
     ] }),
     dialog === "keys" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dialog, { title: T("shortcuts"), onClose: () => setDialog(null), footer: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "btn", onClick: () => setDialog(null), children: T("close") }), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "kbd-grid", children: SHORTCUTS.map(([k, d]) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_react21.Fragment, { children: [
+    import_react22.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "kbd", children: k }),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: T(d) })
     ] }, d)) }) }),
@@ -34926,6 +35100,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;
@@ -34979,6 +35154,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;
@@ -35317,7 +35493,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); }
@@ -35837,7 +36013,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}`);
@@ -35855,18 +36031,43 @@ function mountDesigner(target, opts = {}) {
   );
   box.style.height = opts.height || "760px";
   const root = (0, import_client.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((0, import_react22.createElement)(Designer, { id: opts.report, initial: definition, lang: opts.lang, embed })));
+  }).then(() => root.render((0, import_react23.createElement)(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 {