slidemind 0.3.19 → 0.4.0

package/src/builders/preset-eval.mjs

@@ -0,0 +1,244 @@
+// ECMA-376 preset geometry evaluator: the one place that knows what a
+// `prstGeom` looks like and where its connection sites are.
+//
+// `preset-definitions.json` (generated by scripts/convert-preset-definitions.mjs
+// from the POI/ECMA `presetShapeDefinitions.xml`) carries all 187 presets:
+// adjust defaults, guide formulas, path commands and the `cxnLst`. This module
+// binds the guides for one box and returns
+//
+//   - `paths`: per `<a:path>` the evaluated ops (shape-local px, arc angles in
+//     degrees — the add-in's `PathOp` shape) and the outline sampled into a
+//     polyline in slide space (arcs and Béziers flattened);
+//   - `sites`: the connection sites in slide space, in `cxnLst` order, so a
+//     site's array index IS the `stCxn`/`endCxn` idx PowerPoint glues to.
+//
+// Canonical in the CLI; the add-in carries a byte-identical mirror
+// (scripts/sync-transcription-runtime.mjs). Nothing here throws: an unknown
+// preset evaluates to no paths and no sites.
+
+import definitions from "./preset-definitions.json" with { type: "json" };
+
+const PRESETS = definitions.presets;
+
+/** Every preset the definitions carry — the full ECMA-376 set. */
+export const PRESET_NAMES = Object.keys(PRESETS);
+
+/** OOXML angle unit: 60000ths of a degree. */
+const DEG = 60000;
+const CIRCLE = 360 * DEG;
+
+// Flattening density: an arc gets one chord per ARC_STEP of sweep (never
+// fewer than 4), a Bézier BEZ_STEPS chords. Both keep the chord error well
+// under 0.5 px for any box a slide can hold.
+const ARC_STEP = Math.PI / 64;
+const BEZ_STEPS = 24;
+
+/** ECMA-376 §20.1.9.11 built-in guides, for a box whose top-left is the origin. */
+function builtin(name, w, h) {
+  switch (name) {
+    case "w": case "r": return w;
+    case "h": case "b": return h;
+    case "l": case "t": return 0;
+    case "hc": return w / 2;
+    case "vc": return h / 2;
+    case "ss": return Math.min(w, h);
+    case "ls": return Math.max(w, h);
+    case "3cd4": return 270 * DEG;
+    case "3cd8": return 135 * DEG;
+    case "5cd8": return 225 * DEG;
+    case "7cd8": return 315 * DEG;
+  }
+  const m = /^(wd|hd|ssd|cd)(\d+)$/.exec(name);
+  if (!m) return undefined;
+  const n = Number(m[2]);
+  if (n === 0) return 0;
+  return { wd: w, hd: h, ssd: Math.min(w, h), cd: CIRCLE }[m[1]] / n;
+}
+
+const toRad = (a) => (a / DEG) * Math.PI / 180;
+
+/**
+ * Guide scope for one box: adjusts first (the caller's `av` by name, else the
+ * definition's default), then `gdLst` in document order. An unknown name reads
+ * as 0 rather than throwing.
+ */
+function bindGuides(def, w, h, av = {}) {
+  const values = new Map();
+  const value = (token) => {
+    if (token === undefined || token === "") return 0;
+    const literal = Number(token);
+    if (Number.isFinite(literal)) return literal;
+    return values.get(token) ?? builtin(token, w, h) ?? 0;
+  };
+  const formula = (fmla) => {
+    const [op, a, b, c] = String(fmla).trim().split(/\s+/);
+    const x = value(a), y = value(b), z = value(c);
+    switch (op) {
+      case "*/": return z === 0 ? 0 : (x * y) / z;
+      case "+-": return x + y - z;
+      case "+/": return z === 0 ? 0 : (x + y) / z;
+      case "?:": return x > 0 ? y : z;
+      case "val": return x;
+      case "abs": return Math.abs(x);
+      case "sqrt": return Math.sqrt(x);
+      case "max": return Math.max(x, y);
+      case "min": return Math.min(x, y);
+      case "pin": return Math.max(x, Math.min(y, z));
+      case "mod": return Math.sqrt(x * x + y * y + z * z);
+      case "at2": return Math.atan2(y, x) * 180 / Math.PI * DEG;
+      case "sin": return x * Math.sin(toRad(y));
+      case "cos": return x * Math.cos(toRad(y));
+      case "tan": return x * Math.tan(toRad(y));
+      // The arctan here is a plain radian angle, not an OOXML one.
+      case "cat2": return x * Math.cos(Math.atan2(z, y));
+      case "sat2": return x * Math.sin(Math.atan2(z, y));
+      default: return 0;
+    }
+  };
+  // An adjust may be passed as a number (the OOXML value) or as a fmla string.
+  const adjust = (v) => (typeof v === "number" ? v : formula(v));
+  for (const [name, fmla] of def.av ?? []) values.set(name, name in av ? adjust(av[name]) : formula(fmla));
+  for (const [name, v] of Object.entries(av)) if (!values.has(name)) values.set(name, adjust(v));
+  for (const [name, fmla] of def.gd ?? []) values.set(name, formula(fmla));
+  return value;
+}
+
+/**
+ * `arcTo` angles are VISUAL angles on the ellipse (the direction from the
+ * centre); the ellipse is traced by its parametric angle. This maps one onto
+ * the other continuously, so a sweep past ±90° keeps its sign and length
+ * (Apache POI's ArcToCommand does the same).
+ */
+function parametric(theta, rx, ry) {
+  if (!(rx > 0 && ry > 0)) return theta;
+  const t = Math.atan2(rx * Math.sin(theta), ry * Math.cos(theta));
+  return t + 2 * Math.PI * Math.round((theta - t) / (2 * Math.PI));
+}
+
+/** Shape-local ops for one path, `PathOp`-shaped (arc angles in degrees). */
+function pathOps(path, value, w, h) {
+  const sx = path.w ? w / path.w : 1;
+  const sy = path.h ? h / path.h : 1;
+  const pt = (x, y) => ({ x: value(x) * sx, y: value(y) * sy });
+  return path.ops.map(([code, ...a]) => {
+    switch (code) {
+      case "m": return { op: "moveTo", ...pt(a[0], a[1]) };
+      case "l": return { op: "lnTo", ...pt(a[0], a[1]) };
+      case "c": return { op: "cubicBezTo", c1: pt(a[0], a[1]), c2: pt(a[2], a[3]), end: pt(a[4], a[5]) };
+      case "q": return { op: "quadBezTo", c: pt(a[0], a[1]), end: pt(a[2], a[3]) };
+      case "a": return { op: "arcTo", wR: value(a[0]) * sx, hR: value(a[1]) * sy, stAng: value(a[2]) / DEG, swAng: value(a[3]) / DEG };
+      default: return { op: "close" };
+    }
+  });
+}
+
+/** Flatten ops into polylines (one per moveTo), shape-local. */
+function flatten(ops) {
+  const lines = [];
+  let line = null;
+  let cur = { x: 0, y: 0 };
+  const push = (p) => {
+    if (!line) { line = { points: [{ ...cur }], closed: false }; lines.push(line); }
+    line.points.push(p);
+    cur = p;
+  };
+  for (const o of ops) {
+    if (o.op === "moveTo") {
+      cur = { x: o.x, y: o.y };
+      line = { points: [{ ...cur }], closed: false };
+      lines.push(line);
+    } else if (o.op === "lnTo") push({ x: o.x, y: o.y });
+    else if (o.op === "cubicBezTo" || o.op === "quadBezTo") {
+      const p0 = cur;
+      const cs = o.op === "cubicBezTo" ? [o.c1, o.c2] : [o.c];
+      for (let i = 1; i <= BEZ_STEPS; i++) {
+        const t = i / BEZ_STEPS, u = 1 - t;
+        const at = cs.length === 2
+          ? (k) => u * u * u * p0[k] + 3 * u * u * t * cs[0][k] + 3 * u * t * t * cs[1][k] + t * t * t * o.end[k]
+          : (k) => u * u * p0[k] + 2 * u * t * cs[0][k] + t * t * o.end[k];
+        push({ x: at("x"), y: at("y") });
+      }
+    } else if (o.op === "arcTo") {
+      const st = o.stAng * Math.PI / 180;
+      const t0 = parametric(st, o.wR, o.hR);
+      const t1 = parametric(st + o.swAng * Math.PI / 180, o.wR, o.hR);
+      const cx = cur.x - o.wR * Math.cos(t0);
+      const cy = cur.y - o.hR * Math.sin(t0);
+      const n = Math.max(4, Math.ceil(Math.abs(t1 - t0) / ARC_STEP));
+      for (let i = 1; i <= n; i++) {
+        const t = t0 + (t1 - t0) * i / n;
+        push({ x: cx + o.wR * Math.cos(t), y: cy + o.hR * Math.sin(t) });
+      }
+    } else if (o.op === "close" && line) {
+      line.closed = true;
+      const first = line.points[0];
+      cur = { ...first };
+      line = null;
+    }
+  }
+  return lines;
+}
+
+/**
+ * Local box point -> slide point. OOXML order: flip inside the box, rotate
+ * clockwise about the box centre, then offset. `rot` is in 60000ths of a degree.
+ */
+function transformer(w, h, { x = 0, y = 0, rot = 0, flipH = false, flipV = false } = {}) {
+  const a = toRad(rot), cos = Math.cos(a), sin = Math.sin(a);
+  const cx = w / 2, cy = h / 2;
+  const point = (p) => {
+    const dx = (flipH ? w - p.x : p.x) - cx;
+    const dy = (flipV ? h - p.y : p.y) - cy;
+    return { x: x + cx + dx * cos - dy * sin, y: y + cy + dx * sin + dy * cos };
+  };
+  // A site's outward angle: a flip mirrors it, rot turns it (degrees, 0 = +x, clockwise).
+  const angle = (deg) => {
+    let d = flipH ? 180 - deg : deg;
+    if (flipV) d = -d;
+    return ((d + rot / DEG) % 360 + 360) % 360;
+  };
+  return { point, angle };
+}
+
+/**
+ * Evaluate a preset for a `w` x `h` box.
+ *
+ *   av: adjust overrides by name — `{ adj1: 25000 }` (OOXML value) or a fmla
+ *       string (`"val 25000"`); anything omitted keeps the definition default.
+ *   xf: optional `{ x, y, rot, flipH, flipV }` placing the box on the slide;
+ *       `rot` in 60000ths of a degree. Without it the box sits at the origin.
+ *
+ * Returns `{ paths: [{ ops, polylines, fill, stroke }], sites: [{ idx, x, y, angle }] }`.
+ * `ops` stay box-local and untransformed; `polylines` and `sites` are placed by `xf`.
+ * A site's `angle` is the outward direction in degrees (0 = +x, 90 = +y/down).
+ */
+export function evalPreset(prst, w, h, av = {}, xf = {}) {
+  const def = Object.hasOwn(PRESETS, prst) ? PRESETS[prst] : null;
+  if (!def) return { paths: [], sites: [] };
+  const value = bindGuides(def, w, h, av ?? {});
+  const { point, angle } = transformer(w, h, xf ?? {});
+  const paths = def.paths.map((path) => {
+    const ops = pathOps(path, value, w, h);
+    const polylines = flatten(ops).map((l) => ({ points: l.points.map(point), closed: l.closed }));
+    return { ops, polylines, fill: path.fill !== false, stroke: path.stroke !== false };
+  });
+  const sites = (def.cxn ?? []).map(([ang, px, py], idx) => ({
+    idx,
+    ...point({ x: value(px), y: value(py) }),
+    angle: angle(value(ang) / DEG),
+  }));
+  return { paths, sites };
+}
+
+/** A preset's adjust handles and their defaults, `{ adj1: 50000, … }` in `av` order ({} for none or an unknown preset). */
+export function presetAdjusts(prst) {
+  const def = Object.hasOwn(PRESETS, prst) ? PRESETS[prst] : null;
+  if (!def) return {};
+  const value = bindGuides(def, 100, 100);
+  return Object.fromEntries((def.av ?? []).map(([name]) => [name, value(name)]));
+}
+
+/** The connection sites alone (same placement and indices as `evalPreset`). */
+export function presetSites(prst, w, h, av, xf) {
+  return evalPreset(prst, w, h, av, xf).sites;
+}

package/src/builders/preview.html

@@ -13,8 +13,12 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap" />
-  <link rel="stylesheet" href="./corporate-design.css" />
-  <link rel="stylesheet" href="./layouts.css" />
+  <!-- The page lives in <workspace>/preview/, the deck's own media in
+       <workspace>/assets/. One <base> keeps every "./assets/…" a slide author
+       writes resolving to the deck's assets dir, off disk and over the review
+       server alike. -->
+  <base href="../" />
+  <style id="design-system">__DESIGN_CSS__</style>
   <style>
     /* Compatibility aliases for decks/slides authored against the older
        statworx token names. New materialized bundles expose semantic tokens
@@ -40,6 +44,7 @@
        bundle's corporate-design.css carries; repeated here so a preview
        against an older bundle lays out like the render will. */
     [data-connector] { position: absolute; width: 0; height: 0; padding: 0; margin: 0; border-color: transparent; pointer-events: none; }
+    [data-sm-line] { border-color: transparent !important; background: none !important; pointer-events: none; }
     [data-sm-connector-overlay] { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: visible; pointer-events: none; z-index: 2147483000; }
   </style>
   <style>
@@ -197,6 +202,24 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    /* Small screens: the rail becomes a horizontal filmstrip along the bottom
+       so the slide keeps the full width; fit() reads the rail's live size. */
+    @media (max-width: 760px) {
+      :root { --deck-rail-w: 0px; }
+      .deck { inset: 0 0 var(--deck-rail-h, 112px) 0; }
+      .deck__rail {
+        top: auto;
+        right: 0;
+        width: 100%;
+        height: var(--deck-rail-h, 112px);
+        border-right: 0;
+        border-top: 1px solid var(--deck-chrome-border);
+      }
+      .deck__thumbs { display: flex; gap: 10px; padding: 10px 12px; overflow-x: auto; overflow-y: hidden; }
+      .deck__thumb { width: 132px; flex: none; margin: 0; }
+      .deck__thumb-preview, .deck__thumb-frame { width: 114px; height: 64px; }
+      .deck__nav { bottom: calc(var(--deck-rail-h, 112px) + 10px); }
+    }
     .deck__error {
       padding: 32px;
       color: #ff6b6b;
@@ -484,7 +507,13 @@ __RUNTIME_APPLIER__
       var Chart = window.SlidemindChart
         ? window.SlidemindChart.createComponent(React)
         : function () { return null; };
-      var slideScope = Object.assign({ Chart: Chart }, LAYOUTS);
+      // <Figure>: a drawn shape as a structural sketch, compiled to its exact
+      // outline by the add-in's figure runtime (the same module this CLI's
+      // transcriber expands sketches with), inlined with the chart scripts.
+      var Figure = window.SlidemindFigure
+        ? window.SlidemindFigure.createComponent(React)
+        : function () { return null; };
+      var slideScope = Object.assign({ Chart: Chart, Figure: Figure }, LAYOUTS);
 
       var slides = [];
       document.querySelectorAll('script[data-kind="slide"]').forEach(function (s) {
@@ -517,125 +546,20 @@ __RUNTIME_APPLIER__
 
       smInlineSvgAssets();
 
-      // Connector overlay — the preview's stand-in for the native connectors
-      // the render derives from every data-connector directive (the capture
-      // engine injects an equivalent SVG before its screenshot). Straight,
-      // elbow and arc routes, side pins, arrowheads, dash and colour follow
-      // the same rules as the exporter's connector-derive; the exporter's
-      // measured output at view-draft / in the .pptx stays the truth.
+      // Native line overlay — the preview's stand-in for the native lines the
+      // render exports from every data-connector / data-sm-line directive. The
+      // bundle's capture engine draws them with the exporter's own preset
+      // evaluator (drawLineDirectives), so the preview shows what PowerPoint
+      // draws; view-draft / the .pptx stay the truth.
       function smDrawConnectors(container) {
         if (!container) return;
-        var old = container.querySelector(":scope > svg[data-sm-connector-overlay]");
-        if (old) old.remove();
-        var dirs = container.querySelectorAll("[data-connector]");
-        if (!dirs.length) return;
-        var derive = window.SlidemindConnectorDerive;
-        if (!derive || typeof derive.resolveConnector !== "function") {
-          console.warn("connector overlay skipped: the bundle's capture engine exports no connector geometry — the connected add-in predates it; view-draft / build-pptx still derive the real connectors server-side");
+        var d = window.SlidemindConnectorDerive;
+        if (!d || typeof d.drawLineDirectives !== "function") {
+          console.warn("line overlay skipped: the bundle's capture engine has no drawLineDirectives — the connected add-in predates native lines; view-draft / build-pptx still export them");
           return;
         }
-        var cRect = container.getBoundingClientRect();
-        var scale = cRect.width / 1280 || 1;
-        var NS = "http://www.w3.org/2000/svg";
-        var svg = document.createElementNS(NS, "svg");
-        svg.setAttribute("data-sm-connector-overlay", "1");
-        svg.setAttribute("viewBox", "0 0 1280 720");
-        var defs = document.createElementNS(NS, "defs");
-        svg.appendChild(defs);
-        var rectOf = function (el) {
-          var r = el.getBoundingClientRect();
-          return { x: (r.left - cRect.left) / scale, y: (r.top - cRect.top) / scale, w: r.width / scale, h: r.height / scale };
-        };
-        var resolveRef = function (ref) {
-          if (!ref) return null;
-          try { return container.querySelector(ref.charAt(0) === "#" ? ref : "#" + ref); } catch (e) { return null; }
-        };
-        var sideOrNull = function (raw) {
-          var s = (raw || "").toLowerCase();
-          return (s === "top" || s === "bottom" || s === "left" || s === "right") ? s : null;
-        };
-        // Computed CSS colour ("rgb(a)(...)") → { hex, alpha } as the serialiser reports it.
-        var colorOf = function (css) {
-          var m = /rgba?(([^)]+))/.exec(css || "");
-          if (!m) return { hex: "000000", alpha: 1 };
-          var p = m[1].split(",").map(function (v) { return parseFloat(v); });
-          var hex = p.slice(0, 3).map(function (v) {
-            var h = Math.max(0, Math.min(255, Math.round(v))).toString(16);
-            return h.length < 2 ? "0" + h : h;
-          }).join("").toUpperCase();
-          return { hex: hex, alpha: p.length > 3 && isFinite(p[3]) ? p[3] : 1 };
-        };
-        dirs.forEach(function (el, idx) {
-          var fromEl = resolveRef(el.getAttribute("data-from"));
-          var toEl = resolveRef(el.getAttribute("data-to"));
-          var route = (el.getAttribute("data-route") || "straight").toLowerCase();
-          var centerEl = route === "arc" ? resolveRef(el.getAttribute("data-center")) : null;
-          var arrowRaw = (el.getAttribute("data-arrow") || "none").toLowerCase();
-          var cs = getComputedStyle(el);
-          var stroke = colorOf(cs.color);
-          // The same payload the serialiser hands the exporter; resolveConnector
-          // derives endpoints, route, bends, arc, and arrowhead size from it.
-          var r = derive.resolveConnector({
-            from: el.getAttribute("data-from") || "",
-            to: el.getAttribute("data-to") || "",
-            arrow: (arrowRaw === "start" || arrowRaw === "end" || arrowRaw === "both") ? arrowRaw : "none",
-            route: route,
-            fromSide: sideOrNull(el.getAttribute("data-from-side")),
-            toSide: sideOrNull(el.getAttribute("data-to-side")),
-            center: el.getAttribute("data-center") || null,
-            fromRect: fromEl ? rectOf(fromEl) : null,
-            toRect: toEl ? rectOf(toEl) : null,
-            centerRect: centerEl ? rectOf(centerEl) : null,
-            strokeHex: stroke.hex,
-            strokeAlpha: stroke.alpha,
-            strokeWidthPx: parseFloat(cs.borderTopWidth) || 0,
-            dashed: /dashed|dotted/.test(cs.borderTopStyle || ""),
-            missing: [],
-          });
-          if (!r) return;
-          var color = "#" + r.strokeHex;
-          var d;
-          if (r.arc) {
-            var large = Math.abs(r.arc.sweepDeg) > 180 ? 1 : 0;
-            var sweep = r.arc.sweepDeg > 0 ? 1 : 0;
-            d = "M" + r.start.x + " " + r.start.y + " A" + r.arc.r + " " + r.arc.r + " 0 " + large + " " + sweep + " " + r.end.x + " " + r.end.y;
-          } else {
-            d = r.points.map(function (p, i) { return (i ? "L" : "M") + p.x + " " + p.y; }).join(" ");
-          }
-          var path = document.createElementNS(NS, "path");
-          path.setAttribute("d", d);
-          path.setAttribute("fill", "none");
-          path.setAttribute("stroke", color);
-          path.setAttribute("stroke-opacity", String(r.strokeAlpha));
-          path.setAttribute("stroke-width", String(r.strokeWidthPx));
-          if (r.dashed) {
-            var dash = Math.max(4, r.strokeWidthPx * 3);
-            path.setAttribute("stroke-dasharray", dash + " " + dash);
-          }
-          if (r.arrowStart || r.arrowEnd) {
-            // Marker sized to the head PowerPoint renders (r.arrowheadPx).
-            var markerId = "sm-conn-arrow-" + idx;
-            var marker = document.createElementNS(NS, "marker");
-            marker.setAttribute("id", markerId);
-            marker.setAttribute("viewBox", "0 0 10 10");
-            marker.setAttribute("refX", "9");
-            marker.setAttribute("refY", "5");
-            marker.setAttribute("markerWidth", String(r.arrowheadPx));
-            marker.setAttribute("markerHeight", String(r.arrowheadPx));
-            marker.setAttribute("orient", "auto-start-reverse");
-            marker.setAttribute("markerUnits", "userSpaceOnUse");
-            var tri = document.createElementNS(NS, "path");
-            tri.setAttribute("d", "M0,0 L10,5 L0,10 z");
-            tri.setAttribute("fill", color);
-            tri.setAttribute("fill-opacity", String(r.strokeAlpha));
-            marker.appendChild(tri);
-            defs.appendChild(marker);
-            if (r.arrowStart) path.setAttribute("marker-start", "url(#" + markerId + ")");
-            if (r.arrowEnd) path.setAttribute("marker-end", "url(#" + markerId + ")");
-          }
-          svg.appendChild(path);
-        });
-        if (svg.childNodes.length > 1) container.appendChild(svg);
+        var r = d.drawLineDirectives(container);
+        r.refused.forEach(function (x) { console.warn("line " + (x.id || "(no id)") + ": " + x.message); });
       }
       function smScheduleConnectors(container) {
         requestAnimationFrame(function () { requestAnimationFrame(function () { smDrawConnectors(container); }); });
@@ -727,6 +651,7 @@ __RUNTIME_APPLIER__
             } else if (bottom > thumbs.scrollTop + thumbs.clientHeight) {
               thumbs.scrollTop = bottom - thumbs.clientHeight + 12;
             }
+            if (btn.scrollIntoView) btn.scrollIntoView({ block: "nearest", inline: "nearest" });
           }
         });
       }
@@ -764,9 +689,15 @@ __RUNTIME_APPLIER__
           stage.style.transform = "none";
           return;
         }
-        var railW = rail && getComputedStyle(rail).display !== "none" ? rail.offsetWidth : 0;
+        // The rail sits left (its width) or, on small screens, along the
+        // bottom (its height) — read whichever edge it occupies.
+        var railShown = rail && getComputedStyle(rail).display !== "none";
+        var railBottom = railShown && rail.offsetWidth >= window.innerWidth - 1;
+        var railW = railShown && !railBottom ? rail.offsetWidth : 0;
+        var railH = railBottom ? rail.offsetHeight : 0;
+        var chromeH = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--deck-chrome-h")) || 0;
         var sx = Math.max(1, window.innerWidth - railW) / 1280;
-        var sy = window.innerHeight / 720;
+        var sy = Math.max(1, window.innerHeight - railH - (railBottom ? chromeH : 0)) / 720;
         var s = Math.min(sx, sy) * (thumbMode ? 1 : 0.95);
         stage.style.transform = "scale(" + s + ")";
       }