@squinch/core 0.1.0

package/dist/packs/sanitize.js

@@ -0,0 +1,127 @@
+// Pack SVGs are third-party content that ends up inside the SPA, VSCode webviews
+// and committed files — so every asset is sanitized at load with an allowlist.
+// Anything not explicitly permitted is dropped.
+import { XMLParser, XMLBuilder } from "fast-xml-parser";
+const ELEMENTS = new Set([
+    "svg", "g", "defs", "symbol", "use", "title", "desc",
+    "path", "rect", "circle", "ellipse", "line", "polyline", "polygon",
+    "linearGradient", "radialGradient", "stop", "clipPath", "mask", "pattern",
+    "text", "tspan",
+]);
+const ATTRS = new Set([
+    "d", "fill", "stroke", "opacity", "transform", "viewBox",
+    "x", "y", "width", "height", "cx", "cy", "r", "rx", "ry",
+    "x1", "y1", "x2", "y2", "points", "offset",
+    "fill-rule", "clip-rule", "fill-opacity", "stroke-opacity",
+    "stroke-width", "stroke-linecap", "stroke-linejoin", "stroke-dasharray",
+    "stop-color", "stop-opacity", "gradientUnits", "gradientTransform",
+    "spreadMethod", "clipPathUnits", "maskUnits", "patternUnits",
+    "id", "clip-path", "mask", "filter", "font-size", "font-family",
+    "text-anchor", "dominant-baseline",
+]);
+/** Attribute values that reference document ids as `url(#foo)`. */
+const REF_ATTRS = new Set(["clip-path", "mask", "filter", "fill", "stroke"]);
+/** Attributes whose value is a bare `#id` fragment rather than a colour.
+ *
+ *  `href`/`xlink:href` are the only SVG attributes shaped that way, and ATTRS
+ *  drops both today — so in practice nothing here fires. It stays an explicit
+ *  allowlist because the alternative (rewrite any value starting with `#`,
+ *  minus a denylist of known colour attributes) is what shipped, and it was
+ *  wrong: `stop-color="#5ea0ef"` is a hex colour, not a reference to an element
+ *  named `5ea0ef`. Namespacing it produced `#pack-5ea0ef`, an invalid colour
+ *  that paints black — which is every gradient in a pack of 597 gradient
+ *  icons, rendered as black blobs. A denylist can only ever be as complete as
+ *  the last pack to expose it. */
+const BARE_REF_ATTRS = new Set(["href", "xlink:href"]);
+const parser = new XMLParser({
+    ignoreAttributes: false,
+    attributeNamePrefix: "@",
+    preserveOrder: true,
+    allowBooleanAttributes: true,
+    trimValues: false,
+});
+const builder = new XMLBuilder({
+    ignoreAttributes: false,
+    attributeNamePrefix: "@",
+    preserveOrder: true,
+    suppressEmptyNode: true,
+});
+/**
+ * Strip everything not on the allowlist and namespace internal ids so several
+ * icons can coexist in one document. Does not alter geometry or colour — the
+ * asset itself must stay byte-faithful (CC-BY-ND).
+ */
+export function sanitizeIcon(svg, idPrefix) {
+    const tree = parser.parse(svg);
+    const root = findElement(tree, "svg");
+    if (!root)
+        throw new Error("pack asset has no <svg> root");
+    const viewBox = String(attrOf(root, "viewBox") ?? "0 0 80 80");
+    const clean = (nodes) => {
+        const out = [];
+        for (const node of nodes) {
+            const tag = Object.keys(node).find((k) => k !== ":@" && k !== "#text");
+            if (tag === undefined) {
+                if (typeof node["#text"] === "string" && node["#text"].trim())
+                    out.push(node);
+                continue;
+            }
+            if (!ELEMENTS.has(tag))
+                continue; // drops script, foreignObject, image, …
+            const attrs = node[":@"] ?? {};
+            const kept = {};
+            for (const [rawName, value] of Object.entries(attrs)) {
+                const name = rawName.replace(/^@/, "");
+                if (!ATTRS.has(name))
+                    continue; // drops on*, xlink:href, style, class, …
+                let v = String(value);
+                if (name === "id")
+                    v = `${idPrefix}-${v}`;
+                else if (REF_ATTRS.has(name) && v.includes("url(#"))
+                    v = v.replace(/url\(#([^)]+)\)/g, (_m, id) => `url(#${idPrefix}-${id})`);
+                else if (BARE_REF_ATTRS.has(name) && v.startsWith("#"))
+                    v = `#${idPrefix}-${v.slice(1)}`;
+                kept[`@${name}`] = v;
+            }
+            const children = node[tag];
+            out.push({ [tag]: Array.isArray(children) ? clean(children) : children, ":@": kept });
+        }
+        return out;
+    };
+    // The root <svg>'s presentation attributes are *inherited* by everything
+    // inside it, and the body gets lifted out of that root into a <symbol> — so
+    // dropping them silently restyles the artwork. Stroke-only sets are where it
+    // shows: Lucide puts `fill="none" stroke="currentColor" stroke-width="2"` on
+    // the root and nothing on the paths, so without this the shapes fall back to
+    // the SVG defaults — filled black, unstroked — and every icon renders as a
+    // solid blob. Hoist them onto a wrapping <g> so inheritance survives the move.
+    //
+    // Only inheritable paint/stroke/text properties: geometry (`width`, `x`,
+    // `viewBox`) describes the root viewport, not its children, and carrying it
+    // down would move the artwork.
+    const INHERITED = [
+        "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin",
+        "stroke-dasharray", "stroke-opacity", "fill-opacity", "fill-rule",
+        "clip-rule", "opacity", "font-size", "font-family", "text-anchor",
+        "dominant-baseline",
+    ];
+    const inherited = {};
+    for (const name of INHERITED) {
+        const v = attrOf(root, name);
+        if (v !== undefined && v !== null)
+            inherited[`@${name}`] = String(v);
+    }
+    const children = clean(root.svg);
+    const body = builder.build(Object.keys(inherited).length ? [{ g: children, ":@": inherited }] : children);
+    return { body, viewBox };
+}
+function findElement(nodes, tag) {
+    for (const node of nodes) {
+        if (node[tag])
+            return node;
+    }
+    return undefined;
+}
+function attrOf(node, name) {
+    return node[":@"]?.[`@${name}`];
+}

package/dist/packs/sysGlyphs.d.ts

@@ -0,0 +1,2 @@
+export declare const SYS_GLYPH_ART: Record<string, Record<string, string>>;
+export declare const SYS_GLYPH_VIEWBOX = "0 0 24 24";

package/dist/packs/sysGlyphs.js

@@ -0,0 +1,21 @@
+// First-party glyph artwork for the `builtin` pseudo-pack: `person` and `box`,
+// drawn as 24×24 monoline strokes with round caps/joins. Both paint with
+// currentColor so themes tint them natively — muted on card badges, plate-text
+// white on icon plates, ink in sketch.
+//
+// These two stay compiled into core because they are language sugar, not an icon
+// choice: `person x "…"` and `= box` desugar to them, so they must resolve with
+// nothing installed. The far larger `sys/*` set moved out to @squinch/pack-sys
+// (Lucide, ISC) — 142 icons is more than belongs in an isomorphic bundle, and
+// vendoring gives one coherent hand instead of one person's.
+const S = `fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"`;
+const F = `fill="currentColor" stroke="none"`;
+const g = (inner) => `<g ${S}>${inner}</g>`;
+export const SYS_GLYPH_ART = {
+    builtin: {
+        person: g(`<circle cx="12" cy="8" r="3.75"/><path d="M5 20c0-4.1 3.1-6.5 7-6.5s7 2.4 7 6.5"/>`),
+        box: g(`<path d="M12 3.5 20 7.75v8.5L12 20.5 4 16.25v-8.5Z"/>` +
+            `<path d="M4 7.75 12 12l8-4.25"/><path d="M12 12v8.5"/>`),
+    },
+};
+export const SYS_GLYPH_VIEWBOX = "0 0 24 24";

package/dist/render/adaptive.d.ts

@@ -0,0 +1,13 @@
+export declare class AdaptivePairError extends Error {
+}
+/**
+ * Fold a light and a dark render of the same diagram into one file.
+ *
+ * Both must be the same drawing — same geometry, same text, same icons —
+ * differing only in colour. That holds for themes sharing a font (light/dark,
+ * sketch/sketch-dark) because nothing in the render path branches on the theme
+ * beyond its palette and its sketch settings. It does *not* hold across fonts,
+ * since type metrics drive layout, so a mismatched pair is rejected rather
+ * than quietly emitting a file whose dark half is misaligned.
+ */
+export declare function mergeAdaptive(light: string, dark: string): string;

package/dist/render/adaptive.js

@@ -0,0 +1,112 @@
+// One SVG that carries both palettes and picks one with `prefers-color-scheme`.
+//
+// Why merge two renders instead of emitting CSS variables from the emitters:
+// the artwork in an icon pack is verbatim third-party SVG (AWS ships CC-BY-ND),
+// and it shares hex values with the theme — `#FFFFFF` appears in both a light
+// card surface and inside the icons, unchanged between themes. A search and
+// replace over the colour literals would silently recolour someone else's
+// trademark. Rendering the pair and walking their attributes in lockstep tells
+// us *positionally* which values are theme-driven: the ones that moved.
+//
+// The dark palette rides in a `<style>` media query rather than replacing the
+// attributes, so the file degrades to exactly today's output. A renderer with
+// no CSS support at all — resvg, which is what PNG export uses — still reads
+// the presentation attributes and draws the light theme correctly. Nothing
+// executes: this is a stylesheet, not script, so the no-JS contract holds.
+const ATTR = /([a-zA-Z_][\w:.-]*)="([^"]*)"/g;
+const TAG = /<[a-zA-Z]/g;
+function attrs(svg) {
+    // Tag starts, so each attribute can be attributed to its element. Both
+    // strings come straight from our own emitter, which never puts a `<` inside
+    // an attribute value, so a scan is enough — no parser needed.
+    const tags = [];
+    for (const m of svg.matchAll(TAG))
+        tags.push(m.index);
+    const out = [];
+    let ti = 0;
+    for (const m of svg.matchAll(ATTR)) {
+        const at = m.index + m[1].length + 2;
+        while (ti + 1 < tags.length && tags[ti + 1] < m.index)
+            ti++;
+        out.push({ name: m[1], value: m[2], at, tag: tags[ti] });
+    }
+    return out;
+}
+/** Colour-bearing properties. A differing `d` or `x` would mean the geometry
+ *  moved, which is a bug in the pairing rather than something to style. */
+const COLOUR = new Set(["fill", "stroke", "stop-color", "color", "flood-color"]);
+export class AdaptivePairError extends Error {
+}
+/**
+ * Fold a light and a dark render of the same diagram into one file.
+ *
+ * Both must be the same drawing — same geometry, same text, same icons —
+ * differing only in colour. That holds for themes sharing a font (light/dark,
+ * sketch/sketch-dark) because nothing in the render path branches on the theme
+ * beyond its palette and its sketch settings. It does *not* hold across fonts,
+ * since type metrics drive layout, so a mismatched pair is rejected rather
+ * than quietly emitting a file whose dark half is misaligned.
+ */
+export function mergeAdaptive(light, dark) {
+    const la = attrs(light);
+    const da = attrs(dark);
+    const skeleton = (s) => s.replace(/="[^"]*"/g, '=""');
+    if (la.length !== da.length || skeleton(light) !== skeleton(dark))
+        throw new AdaptivePairError("the two themes did not draw the same diagram, so they cannot share one file — " +
+            "an adaptive pair must differ only in colour (check they use the same font)");
+    // Distinct (property, light, dark) triples become one CSS rule each; the
+    // class name is the triple's index in sorted order, so the output is a pure
+    // function of the input and stays byte-identical across runs.
+    const triples = new Map();
+    const hits = [];
+    for (let i = 0; i < la.length; i++) {
+        if (la[i].value === da[i].value)
+            continue;
+        const { name } = la[i];
+        if (!COLOUR.has(name))
+            throw new AdaptivePairError(`the two themes disagree on \`${name}\`, which is geometry rather than colour — ` +
+                "an adaptive pair must differ only in colour");
+        const key = `${name}|${la[i].value}|${da[i].value}`;
+        triples.set(key, { prop: name, dark: da[i].value });
+        hits.push({ tag: la[i].tag, key });
+    }
+    if (!triples.size)
+        return light; // identical palettes: nothing to adapt
+    const order = [...triples.keys()].sort();
+    const cls = new Map(order.map((k, i) => [k, `sq-t${i}`]));
+    // Group by element: one element can have both a themed fill and a themed
+    // stroke, and it needs both classes.
+    const byTag = new Map();
+    for (const h of hits) {
+        const name = cls.get(h.key);
+        const list = byTag.get(h.tag) ?? [];
+        if (!list.includes(name))
+            list.push(name);
+        byTag.set(h.tag, list);
+    }
+    // Rewrite back-to-front so earlier offsets stay valid.
+    let out = light;
+    for (const [tag, names] of [...byTag].sort((a, b) => b[0] - a[0])) {
+        const close = out.indexOf(">", tag);
+        const head = out.slice(tag, close);
+        // `class="sq-flow"` already exists on animated edges — extend it, never
+        // replace it, or the flow animation stops.
+        const existing = /\sclass="([^"]*)"/.exec(head);
+        if (existing)
+            out =
+                out.slice(0, tag + existing.index) +
+                    ` class="${existing[1]} ${names.join(" ")}"` +
+                    out.slice(tag + existing.index + existing[0].length);
+        else {
+            const nameEnd = tag + 1 + /^[a-zA-Z][\w:.-]*/.exec(out.slice(tag + 1))[0].length;
+            out = out.slice(0, nameEnd) + ` class="${names.join(" ")}"` + out.slice(nameEnd);
+        }
+    }
+    const rules = order
+        .map((k) => `.${cls.get(k)}{${triples.get(k).prop}:${triples.get(k).dark}}`)
+        .join("");
+    const style = `<style>@media (prefers-color-scheme: dark){${rules}}</style>`;
+    // After the opening tag, alongside the font faces.
+    const rootEnd = out.indexOf(">") + 1;
+    return out.slice(0, rootEnd) + "\n" + style + out.slice(rootEnd);
+}

package/dist/render/html/runtime.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/render/html/runtime.generated.d.ts

@@ -0,0 +1 @@
+export declare const RUNTIME_JS = "\"use strict\";(()=>{var Q={ms:460,ease:\"cubic-bezier(.32,.72,0,1)\"},X={ms:240,ease:\"cubic-bezier(.4,0,.2,1)\"},K=e=>({x:e.x+e.w/2,y:e.y+e.h/2}),Y=(e,n,i)=>Math.min(i,Math.max(n,e)),Z=(e,n)=>Y(Math.min(e.w/n.w,e.h/n.h),1.15,3.2);function U(e){let{view:n,ghostBox:i,liveBox:a,anchor:p,dir:o}=e,{ms:l,ease:d}=p?Q:X;if(!p)return{ms:l,ease:d,gOrigin:\"50% 50%\",lOrigin:\"50% 50%\",gEnd:\"scale(.97)\",lStart:\"scale(1.03)\"};let f=Z(n,p),T=1+(f-1)*.62,E=K(p),h=K(n),y=h.x-E.x,w=h.y-E.y,x=o===\"in\",g=x?E:h,k=x?h:E;return{ms:l,ease:d,gOrigin:`${g.x-i.x}px ${g.y-i.y}px`,lOrigin:`${k.x-a.x}px ${k.y-a.y}px`,gEnd:x?`translate(${y}px, ${w}px) scale(${f})`:`translate(${-y}px, ${-w}px) scale(${1/f})`,lStart:x?`translate(${-y}px, ${-w}px) scale(${1/T})`:`translate(${y}px, ${w}px) scale(${T})`}}function W(e,n){if(n){if(!e)return n.split(\".\")[0];if(!(n===e||!n.startsWith(`${e}.`)))return`${e}.${n.slice(e.length+1).split(\".\")[0]}`}}function ee(e){if(!e)return[];let n=e.split(\".\");return n.map((i,a)=>n.slice(0,a+1).join(\".\"))}function O(e,n,i){return e.find(a=>a.scope===i&&a.name!==n)}function _(e,n,i){let a=e.find(d=>d.name===n)?.scope,p=e.find(d=>d.name===i)?.scope,o=W(a,p);if(o)return{dir:\"in\",anchor:o};let l=W(p,a);return l?{dir:\"out\",anchor:l}:{dir:\"in\"}}function te(e,n){let i=[],a=e.find(o=>!o.scope);if(a&&i.push({label:\"landscape\",view:a.name}),!n)return i;let p=n.split(\".\");for(let[o,l]of ee(n).entries())i.push({label:p[o],view:e.find(d=>d.scope===l)?.name});return i}function S(e,n,i){return[...te(e,i)].reverse().find(a=>a.view&&a.view!==n)?.view}var L=e=>document.querySelector(e);function j(){let e=JSON.parse(L(\"#sq-data\").textContent||\"{}\"),n=L(\"#sq-live\"),i=L(\"#sq-ghost\"),a=L(\"#sq-stage\"),p=()=>matchMedia(\"(prefers-reduced-motion: reduce)\").matches,o=e.entry,l=e.themes[0],d=0,f=!1;if(e.themes.length>1&&matchMedia(\"(prefers-color-scheme: dark)\").matches){let t=e.themes.find(s=>s.includes(\"dark\"));t&&(l=t)}let T=`${e.entry}|${e.themes[0]}`,E=n.firstElementChild?.cloneNode(!0)??null,h=(t,s,c=0)=>{let r=c?`${t}|${s}|${c}`:`${t}|${s}`;if(r===T)return E?.cloneNode(!0)??null;let u=document.querySelector(`template[data-key=\"${CSS.escape(r)}\"]`);return u?u.content.cloneNode(!0):null},y=t=>e.views.find(s=>s.name===t)?.scope,w=t=>{let s=t.getBoundingClientRect(),c=a.getBoundingClientRect();return{x:s.left-c.left,y:s.top-c.top,w:s.width,h:s.height}};function x(){document.title=e.views.find(r=>r.name===o)?.title??document.title;let t=document.querySelector(\"#sq-tabs\");if(t){t.replaceChildren();for(let r of e.views){let u=document.createElement(\"button\");u.type=\"button\",u.className=r.name===o?\"on\":\"\",u.textContent=r.name,u.title=r.title??r.name,u.onclick=()=>g(r.name),t.append(u)}t.querySelector(\".on\")?.scrollIntoView?.({block:\"nearest\",inline:\"nearest\"})}for(let r of n.querySelectorAll(\"[data-path]\")){let u=r.getAttribute(\"data-path\");r.classList.toggle(\"sq-zoom\",!!(u&&O(e.views,o,u)))}let s=document.querySelector(\"#sq-step\"),c=e.flows[o]??0;s&&(s.textContent=f&&c?`${d||1} / ${c}`:\"\")}function g(t,s=!1){if(!t||t===o)return;let c=f&&e.flows[t]?s?e.flows[t]:1:0,r=h(t,l,c);if(!r)return;d=c;let{dir:u,anchor:v}=_(e.views,o,t),C=w(n),H=n.firstElementChild;if(p()||!H){n.replaceChildren(r),o=t,x();return}i.replaceChildren(H.cloneNode(!0)),i.style.cssText=`position:absolute;left:${C.x}px;top:${C.y}px;width:${C.w}px;height:${C.h}px;z-index:1;pointer-events:none`,n.replaceChildren(r),o=t,x();let G=w(n),P=v?(u===\"in\"?i:n).querySelector(`[data-path=\"${CSS.escape(v)}\"]`):null,m=U({view:{x:0,y:0,w:a.clientWidth,h:a.clientHeight},ghostBox:C,liveBox:G,anchor:P?w(P):void 0,dir:u}),b=i.style,$=n.style;b.transition=\"none\",b.transformOrigin=m.gOrigin,b.transform=\"none\",b.opacity=\"1\",$.transition=\"none\",$.transformOrigin=m.lOrigin,$.transform=m.lStart,$.opacity=\"0\",n.offsetHeight,b.transition=`transform ${m.ms}ms ${m.ease}, opacity ${Math.round(m.ms*.55)}ms ${m.ease}`,$.transition=`transform ${m.ms}ms ${m.ease}, opacity ${Math.round(m.ms*.6)}ms ${m.ease} ${Math.round(m.ms*.25)}ms`,b.transform=m.gEnd,b.opacity=\"0\",$.transform=\"none\",$.opacity=\"1\";let I=!1,q=0,R=()=>{I||(I=!0,cancelAnimationFrame(q),i.replaceChildren(),i.removeAttribute(\"style\"),n.removeAttribute(\"style\"))},z=()=>{getComputedStyle(n).transform===\"none\"?R():q=requestAnimationFrame(z)};q=requestAnimationFrame(z),setTimeout(R,m.ms+1e3)}function k(t){let s=t===l?null:h(o,t,d);s&&(l=t,document.documentElement.dataset.theme=t,n.replaceChildren(s))}function M(t){let s=e.flows[o]??0,c=d+t;if(s&&c>=1&&c<=s){let v=h(o,l,c);v&&(d=c,n.replaceChildren(v),x());return}let r=e.views.findIndex(v=>v.name===o),u=e.views[r+t];u&&g(u.name,t<0)}n.addEventListener(\"click\",t=>{let c=t.target.closest?.(\"[data-path]\")?.getAttribute(\"data-path\");if(c){let r=O(e.views,o,c);if(r)return g(r.name)}if(!c){let r=S(e.views,o,y(o));r&&g(r)}});let A=document.querySelector(\"#sq-theme\");A&&(A.onclick=()=>k(e.themes[(e.themes.indexOf(l)+1)%e.themes.length]));function B(t){if(t!==f){if(f=t,document.body.classList.toggle(\"presenting\",t),t){if(document.documentElement.requestFullscreen?.().catch(()=>{}),(e.flows[o]??0)&&!d){let c=h(o,l,1);c&&(d=1,n.replaceChildren(c))}}else if(document.fullscreenElement&&document.exitFullscreen?.().catch(()=>{}),d){let s=h(o,l,0);s&&(d=0,n.replaceChildren(s))}x()}}let N,V=()=>{document.body.classList.remove(\"idle\"),clearTimeout(N),f&&(N=setTimeout(()=>document.body.classList.add(\"idle\"),3500))};addEventListener(\"mousemove\",V),addEventListener(\"keydown\",V);let J=()=>k(e.themes[(e.themes.indexOf(l)+1)%e.themes.length]);addEventListener(\"keydown\",t=>{if(!(t.metaKey||t.ctrlKey||t.altKey))switch(t.key){case\"ArrowRight\":case\"PageDown\":case\" \":case\"Enter\":t.preventDefault(),M(1);break;case\"ArrowLeft\":case\"PageUp\":t.preventDefault(),M(-1);break;case\"ArrowUp\":case\"Backspace\":{let s=S(e.views,o,y(o));s&&(t.preventDefault(),g(s));break}case\"Home\":t.preventDefault(),g(e.views[0].name);break;case\"End\":t.preventDefault(),g(e.views[e.views.length-1].name,!0);break;case\"Escape\":f&&(t.preventDefault(),B(!1));break;case\"p\":case\"P\":B(!f);break;case\"f\":case\"F\":document.fullscreenElement?document.exitFullscreen?.().catch(()=>{}):document.documentElement.requestFullscreen?.().catch(()=>{});break;case\"t\":case\"T\":e.themes.length>1&&J();break}}),addEventListener(\"fullscreenchange\",()=>{!document.fullscreenElement&&f&&B(!1)});let D=document.querySelector(\"#sq-present\");D&&(D.onclick=()=>B(!f));let F=()=>{let t=decodeURIComponent(location.hash.slice(1));t&&t!==o&&e.views.some(s=>s.name===t)&&g(t)};if(addEventListener(\"hashchange\",F),document.documentElement.dataset.theme=l,l!==e.themes[0]){let t=h(o,l);t&&n.replaceChildren(t)}x(),F()}document.readyState===\"loading\"?addEventListener(\"DOMContentLoaded\",j):j();})();";

package/dist/render/html/runtime.generated.js

@@ -0,0 +1,6 @@
+// GENERATED by scripts/gen-html-runtime.ts from src/render/html/runtime.ts —
+// do not edit. Committed so that rendering never runs a bundler and the
+// output cannot drift with an esbuild upgrade; CI re-runs the generator and
+// diffs. It bundles view/dive.ts and view/navigate.ts, which is what makes
+// "the export moves exactly like the playground" true by construction.
+export const RUNTIME_JS = "\"use strict\";(()=>{var Q={ms:460,ease:\"cubic-bezier(.32,.72,0,1)\"},X={ms:240,ease:\"cubic-bezier(.4,0,.2,1)\"},K=e=>({x:e.x+e.w/2,y:e.y+e.h/2}),Y=(e,n,i)=>Math.min(i,Math.max(n,e)),Z=(e,n)=>Y(Math.min(e.w/n.w,e.h/n.h),1.15,3.2);function U(e){let{view:n,ghostBox:i,liveBox:a,anchor:p,dir:o}=e,{ms:l,ease:d}=p?Q:X;if(!p)return{ms:l,ease:d,gOrigin:\"50% 50%\",lOrigin:\"50% 50%\",gEnd:\"scale(.97)\",lStart:\"scale(1.03)\"};let f=Z(n,p),T=1+(f-1)*.62,E=K(p),h=K(n),y=h.x-E.x,w=h.y-E.y,x=o===\"in\",g=x?E:h,k=x?h:E;return{ms:l,ease:d,gOrigin:`${g.x-i.x}px ${g.y-i.y}px`,lOrigin:`${k.x-a.x}px ${k.y-a.y}px`,gEnd:x?`translate(${y}px, ${w}px) scale(${f})`:`translate(${-y}px, ${-w}px) scale(${1/f})`,lStart:x?`translate(${-y}px, ${-w}px) scale(${1/T})`:`translate(${y}px, ${w}px) scale(${T})`}}function W(e,n){if(n){if(!e)return n.split(\".\")[0];if(!(n===e||!n.startsWith(`${e}.`)))return`${e}.${n.slice(e.length+1).split(\".\")[0]}`}}function ee(e){if(!e)return[];let n=e.split(\".\");return n.map((i,a)=>n.slice(0,a+1).join(\".\"))}function O(e,n,i){return e.find(a=>a.scope===i&&a.name!==n)}function _(e,n,i){let a=e.find(d=>d.name===n)?.scope,p=e.find(d=>d.name===i)?.scope,o=W(a,p);if(o)return{dir:\"in\",anchor:o};let l=W(p,a);return l?{dir:\"out\",anchor:l}:{dir:\"in\"}}function te(e,n){let i=[],a=e.find(o=>!o.scope);if(a&&i.push({label:\"landscape\",view:a.name}),!n)return i;let p=n.split(\".\");for(let[o,l]of ee(n).entries())i.push({label:p[o],view:e.find(d=>d.scope===l)?.name});return i}function S(e,n,i){return[...te(e,i)].reverse().find(a=>a.view&&a.view!==n)?.view}var L=e=>document.querySelector(e);function j(){let e=JSON.parse(L(\"#sq-data\").textContent||\"{}\"),n=L(\"#sq-live\"),i=L(\"#sq-ghost\"),a=L(\"#sq-stage\"),p=()=>matchMedia(\"(prefers-reduced-motion: reduce)\").matches,o=e.entry,l=e.themes[0],d=0,f=!1;if(e.themes.length>1&&matchMedia(\"(prefers-color-scheme: dark)\").matches){let t=e.themes.find(s=>s.includes(\"dark\"));t&&(l=t)}let T=`${e.entry}|${e.themes[0]}`,E=n.firstElementChild?.cloneNode(!0)??null,h=(t,s,c=0)=>{let r=c?`${t}|${s}|${c}`:`${t}|${s}`;if(r===T)return E?.cloneNode(!0)??null;let u=document.querySelector(`template[data-key=\"${CSS.escape(r)}\"]`);return u?u.content.cloneNode(!0):null},y=t=>e.views.find(s=>s.name===t)?.scope,w=t=>{let s=t.getBoundingClientRect(),c=a.getBoundingClientRect();return{x:s.left-c.left,y:s.top-c.top,w:s.width,h:s.height}};function x(){document.title=e.views.find(r=>r.name===o)?.title??document.title;let t=document.querySelector(\"#sq-tabs\");if(t){t.replaceChildren();for(let r of e.views){let u=document.createElement(\"button\");u.type=\"button\",u.className=r.name===o?\"on\":\"\",u.textContent=r.name,u.title=r.title??r.name,u.onclick=()=>g(r.name),t.append(u)}t.querySelector(\".on\")?.scrollIntoView?.({block:\"nearest\",inline:\"nearest\"})}for(let r of n.querySelectorAll(\"[data-path]\")){let u=r.getAttribute(\"data-path\");r.classList.toggle(\"sq-zoom\",!!(u&&O(e.views,o,u)))}let s=document.querySelector(\"#sq-step\"),c=e.flows[o]??0;s&&(s.textContent=f&&c?`${d||1} / ${c}`:\"\")}function g(t,s=!1){if(!t||t===o)return;let c=f&&e.flows[t]?s?e.flows[t]:1:0,r=h(t,l,c);if(!r)return;d=c;let{dir:u,anchor:v}=_(e.views,o,t),C=w(n),H=n.firstElementChild;if(p()||!H){n.replaceChildren(r),o=t,x();return}i.replaceChildren(H.cloneNode(!0)),i.style.cssText=`position:absolute;left:${C.x}px;top:${C.y}px;width:${C.w}px;height:${C.h}px;z-index:1;pointer-events:none`,n.replaceChildren(r),o=t,x();let G=w(n),P=v?(u===\"in\"?i:n).querySelector(`[data-path=\"${CSS.escape(v)}\"]`):null,m=U({view:{x:0,y:0,w:a.clientWidth,h:a.clientHeight},ghostBox:C,liveBox:G,anchor:P?w(P):void 0,dir:u}),b=i.style,$=n.style;b.transition=\"none\",b.transformOrigin=m.gOrigin,b.transform=\"none\",b.opacity=\"1\",$.transition=\"none\",$.transformOrigin=m.lOrigin,$.transform=m.lStart,$.opacity=\"0\",n.offsetHeight,b.transition=`transform ${m.ms}ms ${m.ease}, opacity ${Math.round(m.ms*.55)}ms ${m.ease}`,$.transition=`transform ${m.ms}ms ${m.ease}, opacity ${Math.round(m.ms*.6)}ms ${m.ease} ${Math.round(m.ms*.25)}ms`,b.transform=m.gEnd,b.opacity=\"0\",$.transform=\"none\",$.opacity=\"1\";let I=!1,q=0,R=()=>{I||(I=!0,cancelAnimationFrame(q),i.replaceChildren(),i.removeAttribute(\"style\"),n.removeAttribute(\"style\"))},z=()=>{getComputedStyle(n).transform===\"none\"?R():q=requestAnimationFrame(z)};q=requestAnimationFrame(z),setTimeout(R,m.ms+1e3)}function k(t){let s=t===l?null:h(o,t,d);s&&(l=t,document.documentElement.dataset.theme=t,n.replaceChildren(s))}function M(t){let s=e.flows[o]??0,c=d+t;if(s&&c>=1&&c<=s){let v=h(o,l,c);v&&(d=c,n.replaceChildren(v),x());return}let r=e.views.findIndex(v=>v.name===o),u=e.views[r+t];u&&g(u.name,t<0)}n.addEventListener(\"click\",t=>{let c=t.target.closest?.(\"[data-path]\")?.getAttribute(\"data-path\");if(c){let r=O(e.views,o,c);if(r)return g(r.name)}if(!c){let r=S(e.views,o,y(o));r&&g(r)}});let A=document.querySelector(\"#sq-theme\");A&&(A.onclick=()=>k(e.themes[(e.themes.indexOf(l)+1)%e.themes.length]));function B(t){if(t!==f){if(f=t,document.body.classList.toggle(\"presenting\",t),t){if(document.documentElement.requestFullscreen?.().catch(()=>{}),(e.flows[o]??0)&&!d){let c=h(o,l,1);c&&(d=1,n.replaceChildren(c))}}else if(document.fullscreenElement&&document.exitFullscreen?.().catch(()=>{}),d){let s=h(o,l,0);s&&(d=0,n.replaceChildren(s))}x()}}let N,V=()=>{document.body.classList.remove(\"idle\"),clearTimeout(N),f&&(N=setTimeout(()=>document.body.classList.add(\"idle\"),3500))};addEventListener(\"mousemove\",V),addEventListener(\"keydown\",V);let J=()=>k(e.themes[(e.themes.indexOf(l)+1)%e.themes.length]);addEventListener(\"keydown\",t=>{if(!(t.metaKey||t.ctrlKey||t.altKey))switch(t.key){case\"ArrowRight\":case\"PageDown\":case\" \":case\"Enter\":t.preventDefault(),M(1);break;case\"ArrowLeft\":case\"PageUp\":t.preventDefault(),M(-1);break;case\"ArrowUp\":case\"Backspace\":{let s=S(e.views,o,y(o));s&&(t.preventDefault(),g(s));break}case\"Home\":t.preventDefault(),g(e.views[0].name);break;case\"End\":t.preventDefault(),g(e.views[e.views.length-1].name,!0);break;case\"Escape\":f&&(t.preventDefault(),B(!1));break;case\"p\":case\"P\":B(!f);break;case\"f\":case\"F\":document.fullscreenElement?document.exitFullscreen?.().catch(()=>{}):document.documentElement.requestFullscreen?.().catch(()=>{});break;case\"t\":case\"T\":e.themes.length>1&&J();break}}),addEventListener(\"fullscreenchange\",()=>{!document.fullscreenElement&&f&&B(!1)});let D=document.querySelector(\"#sq-present\");D&&(D.onclick=()=>B(!f));let F=()=>{let t=decodeURIComponent(location.hash.slice(1));t&&t!==o&&e.views.some(s=>s.name===t)&&g(t)};if(addEventListener(\"hashchange\",F),document.documentElement.dataset.theme=l,l!==e.themes[0]){let t=h(o,l);t&&n.replaceChildren(t)}x(),F()}document.readyState===\"loading\"?addEventListener(\"DOMContentLoaded\",j):j();})();";