@velumo/renderer-dom 0.1.0-beta.0

package/dist/spatial-renderer.d.ts

@@ -0,0 +1,18 @@
+import type { CameraEasing, Scene } from "@velumo/core";
+import { type LayoutRendererElement, type LayoutRendererFactories } from "./layout-renderer.js";
+export interface SpatialWorldElements {
+    readonly viewport: LayoutRendererElement;
+    readonly world: LayoutRendererElement;
+}
+/**
+ * Build a clipping viewport + an inner world layer for a spatial scene.
+ * The world layer carries the scene's `layout` (the world canvas) and is the
+ * element the camera transform is applied to.
+ */
+export declare function renderSpatialWorld(scene: Scene, factories: LayoutRendererFactories): SpatialWorldElements;
+/**
+ * Set the CSS transition that animates the next camera move. A zero duration
+ * (e.g. reduced motion) disables the transition so the move is an instant cut.
+ */
+export declare function applyCameraTransition(world: LayoutRendererElement, durationMs: number, easing: CameraEasing, factories: LayoutRendererFactories): void;
+//# sourceMappingURL=spatial-renderer.d.ts.map

package/dist/spatial-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial-renderer.d.ts","sourceRoot":"","sources":["../src/spatial-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,uBAAuB,EAE7B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,qBAAqB,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,uBAAuB,GACjC,oBAAoB,CAwBtB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,qBAAqB,EAC5B,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,YAAY,EACpB,SAAS,EAAE,uBAAuB,GACjC,IAAI,CAMN"}

package/dist/spatial-renderer.js

@@ -0,0 +1,36 @@
+import { renderLayoutNode, } from "./layout-renderer.js";
+/**
+ * Build a clipping viewport + an inner world layer for a spatial scene.
+ * The world layer carries the scene's `layout` (the world canvas) and is the
+ * element the camera transform is applied to.
+ */
+export function renderSpatialWorld(scene, factories) {
+    const viewport = factories.createElement("div");
+    viewport.setAttribute("data-velumo-spatial", "viewport");
+    factories.setStyleProperty(viewport, "position", "absolute");
+    factories.setStyleProperty(viewport, "inset", "0");
+    factories.setStyleProperty(viewport, "overflow", "hidden");
+    const world = factories.createElement("div");
+    world.setAttribute("data-velumo-spatial", "world");
+    factories.setStyleProperty(world, "position", "absolute");
+    factories.setStyleProperty(world, "inset", "0");
+    // A flex column so a flowing canvas layout (flex: 1) fills the world; the
+    // canvas's percent-positioned items then map onto the full world box.
+    factories.setStyleProperty(world, "display", "flex");
+    factories.setStyleProperty(world, "flex-direction", "column");
+    factories.setStyleProperty(world, "transform-origin", "0 0");
+    factories.setStyleProperty(world, "will-change", "transform");
+    if (scene.layout !== undefined) {
+        world.appendChild(renderLayoutNode(scene.layout, factories));
+    }
+    viewport.appendChild(world);
+    return { viewport, world };
+}
+/**
+ * Set the CSS transition that animates the next camera move. A zero duration
+ * (e.g. reduced motion) disables the transition so the move is an instant cut.
+ */
+export function applyCameraTransition(world, durationMs, easing, factories) {
+    factories.setStyleProperty(world, "transition", durationMs <= 0 ? "none" : `transform ${durationMs}ms ${easing}`);
+}
+//# sourceMappingURL=spatial-renderer.js.map

package/dist/spatial-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spatial-renderer.js","sourceRoot":"","sources":["../src/spatial-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAGL,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAO9B;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAChC,KAAY,EACZ,SAAkC;IAElC,MAAM,QAAQ,GAAG,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,QAAQ,CAAC,YAAY,CAAC,qBAAqB,EAAE,UAAU,CAAC,CAAC;IACzD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;IAC7D,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;IACnD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAE3D,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7C,KAAK,CAAC,YAAY,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC;IACnD,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;IAC1D,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;IAChD,0EAA0E;IAC1E,sEAAsE;IACtE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IACrD,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CAAC;IAC9D,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAC7D,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;IAE9D,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC/B,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC;IAC/D,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AAC7B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CACnC,KAA4B,EAC5B,UAAkB,EAClB,MAAoB,EACpB,SAAkC;IAElC,SAAS,CAAC,gBAAgB,CACxB,KAAK,EACL,YAAY,EACZ,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,UAAU,MAAM,MAAM,EAAE,CACjE,CAAC;AACJ,CAAC"}

package/dist/theme-fonts.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeFontFace } from "@velumo/core";
+export declare function escapeCssString(value: string): string;
+/**
+ * Compile a theme's declared font faces into `@font-face` CSS — one block per
+ * face. Pure and DOM-free; the DOM renderer injects the result at mount.
+ */
+export declare function compileFontFaceCss(fonts: readonly ThemeFontFace[]): string;
+//# sourceMappingURL=theme-fonts.d.ts.map

package/dist/theme-fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-fonts.d.ts","sourceRoot":"","sources":["../src/theme-fonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAQlD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAErD;AA0DD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,GAAG,MAAM,CAE1E"}

package/dist/theme-fonts.js

@@ -0,0 +1,68 @@
+// Escape a value for safe interpolation inside a double-quoted CSS string
+// (a `"..."` literal, a `url("...")` descriptor, or a `[attr="..."]` selector
+// value). Backslash and double-quote are escaped; a literal newline becomes the
+// CSS `\A ` escape. `ThemeFontFace`/`Theme.id` are validated only as non-empty
+// strings, so a `"` in a family/source/id must not be able to break out of the
+// string (invalid CSS, a dropped @font-face, or a `querySelector` SyntaxError).
+export function escapeCssString(value) {
+    return value.replace(/[\\"]/g, "\\$&").replace(/\n/g, "\\A ");
+}
+// Resolve the `format()` hint for a face's `src` descriptor. An explicit
+// `format` wins; otherwise we sniff `woff2` from a `data:font/woff2` URI or a
+// `.woff2` path (ignoring any query suffix). For anything else we emit no
+// `format()` at all and let the browser sniff the bytes — keeping the contract
+// format-agnostic while defaulting correctly for the self-contained woff2
+// data-URIs the themes ship.
+function resolveFormat(face) {
+    if (face.format !== undefined) {
+        return face.format;
+    }
+    if (/^data:font\/woff2[;,]/.test(face.source)) {
+        return "woff2";
+    }
+    const pathOnly = face.source.split("?")[0];
+    if (/\.woff2$/i.test(pathOnly)) {
+        return "woff2";
+    }
+    return undefined;
+}
+// Compile one `ThemeFontFace` into a single `@font-face` block. The family is
+// always quoted; the source is a single combined descriptor; every optional
+// descriptor is emitted only when present (a string `weight` such as the
+// variable range "100 900" passes through verbatim).
+function compileFontFace(face) {
+    const format = resolveFormat(face);
+    // Always quote the url() so sources with spaces or other characters that are
+    // invalid in an unquoted url() token (e.g. "/fonts/Bebas Neue.woff2") still
+    // parse — a quoted data-URI is equally valid.
+    const url = `url("${escapeCssString(face.source)}")`;
+    const src = format === undefined ? url : `${url} format("${escapeCssString(format)}")`;
+    const lines = [
+        `  font-family: "${escapeCssString(face.family)}";`,
+        `  src: ${src};`,
+    ];
+    if (face.weight !== undefined) {
+        lines.push(`  font-weight: ${face.weight};`);
+    }
+    if (face.style !== undefined) {
+        lines.push(`  font-style: ${face.style};`);
+    }
+    if (face.display !== undefined) {
+        lines.push(`  font-display: ${face.display};`);
+    }
+    if (face.unicodeRange !== undefined) {
+        lines.push(`  unicode-range: ${face.unicodeRange};`);
+    }
+    if (face.stretch !== undefined) {
+        lines.push(`  font-stretch: ${face.stretch};`);
+    }
+    return `@font-face {\n${lines.join("\n")}\n}`;
+}
+/**
+ * Compile a theme's declared font faces into `@font-face` CSS — one block per
+ * face. Pure and DOM-free; the DOM renderer injects the result at mount.
+ */
+export function compileFontFaceCss(fonts) {
+    return fonts.map(compileFontFace).join("\n\n");
+}
+//# sourceMappingURL=theme-fonts.js.map

package/dist/theme-fonts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-fonts.js","sourceRoot":"","sources":["../src/theme-fonts.ts"],"names":[],"mappings":"AAEA,0EAA0E;AAC1E,8EAA8E;AAC9E,gFAAgF;AAChF,+EAA+E;AAC/E,+EAA+E;AAC/E,gFAAgF;AAChF,MAAM,UAAU,eAAe,CAAC,KAAa;IAC3C,OAAO,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAChE,CAAC;AAED,yEAAyE;AACzE,8EAA8E;AAC9E,0EAA0E;AAC1E,+EAA+E;AAC/E,0EAA0E;AAC1E,6BAA6B;AAC7B,SAAS,aAAa,CAAC,IAAmB;IACxC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IACD,IAAI,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QAC9C,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,IAAI,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC/B,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,8EAA8E;AAC9E,4EAA4E;AAC5E,yEAAyE;AACzE,qDAAqD;AACrD,SAAS,eAAe,CAAC,IAAmB;IAC1C,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IACnC,6EAA6E;IAC7E,4EAA4E;IAC5E,8CAA8C;IAC9C,MAAM,GAAG,GAAG,QAAQ,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;IACrD,MAAM,GAAG,GACP,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,YAAY,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC;IAE7E,MAAM,KAAK,GAAG;QACZ,mBAAmB,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;QACnD,UAAU,GAAG,GAAG;KACjB,CAAC;IACF,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAC9B,KAAK,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;IACD,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;QAC7B,KAAK,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IAC7C,CAAC;IACD,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QAC/B,KAAK,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACjD,CAAC;IACD,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;QACpC,KAAK,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;IACvD,CAAC;IACD,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QAC/B,KAAK,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACjD,CAAC;IAED,OAAO,iBAAiB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAChD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA+B;IAChE,OAAO,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACjD,CAAC"}

package/dist/theme-tokens.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeTokens } from "@velumo/core";
+export declare function tokensToCssProperties(tokens: ThemeTokens | undefined): Map<string, string>;
+//# sourceMappingURL=theme-tokens.d.ts.map

package/dist/theme-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-tokens.d.ts","sourceRoot":"","sources":["../src/theme-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,GAAG,SAAS,GAC9B,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAiBrB"}

package/dist/theme-tokens.js

@@ -0,0 +1,43 @@
+export function tokensToCssProperties(tokens) {
+    const properties = new Map();
+    if (tokens === undefined) {
+        return properties;
+    }
+    addStringRecord(properties, "color", tokens.colors);
+    addNestedTokenRecord(properties, "typography", tokens.typography);
+    addStringRecord(properties, "spacing", tokens.spacing);
+    addStringRecord(properties, "radius", tokens.radii);
+    addStringRecord(properties, "shadow", tokens.shadows);
+    addNestedTokenRecord(properties, "motion", tokens.motion);
+    addStringRecord(properties, "surface", tokens.surfaces);
+    addStringRecord(properties, "text", tokens.text);
+    return properties;
+}
+function addStringRecord(properties, family, tokens) {
+    if (tokens === undefined) {
+        return;
+    }
+    for (const [name, value] of Object.entries(tokens)) {
+        properties.set(`--velumo-${family}-${toKebabCase(name)}`, String(value));
+    }
+}
+function addNestedTokenRecord(properties, family, tokens) {
+    if (tokens === undefined) {
+        return;
+    }
+    for (const [name, values] of Object.entries(tokens)) {
+        for (const [field, value] of Object.entries(values)) {
+            if (typeof value !== "string" && typeof value !== "number") {
+                continue;
+            }
+            properties.set(`--velumo-${family}-${toKebabCase(name)}-${toKebabCase(field)}`, String(value));
+        }
+    }
+}
+function toKebabCase(value) {
+    return value
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .replace(/[_\s.]+/g, "-")
+        .toLowerCase();
+}
+//# sourceMappingURL=theme-tokens.js.map

package/dist/theme-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-tokens.js","sourceRoot":"","sources":["../src/theme-tokens.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,qBAAqB,CACnC,MAA+B;IAE/B,MAAM,UAAU,GAAG,IAAI,GAAG,EAAkB,CAAC;IAE7C,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,eAAe,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACpD,oBAAoB,CAAC,UAAU,EAAE,YAAY,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAClE,eAAe,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACvD,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IACpD,eAAe,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACtD,oBAAoB,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC1D,eAAe,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;IACxD,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IAEjD,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,SAAS,eAAe,CACtB,UAA+B,EAC/B,MAAc,EACd,MAAmD;IAEnD,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO;IACT,CAAC;IAED,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QACnD,UAAU,CAAC,GAAG,CAAC,YAAY,MAAM,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3E,CAAC;AACH,CAAC;AAED,SAAS,oBAAoB,CAC3B,UAA+B,EAC/B,MAAc,EACd,MAA0C;IAE1C,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO;IACT,CAAC;IAED,KAAK,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QACpD,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YACpD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC3D,SAAS;YACX,CAAC;YAED,UAAU,CAAC,GAAG,CACZ,YAAY,MAAM,IAAI,WAAW,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE,EAC/D,MAAM,CAAC,KAAK,CAAC,CACd,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAS,WAAW,CAAC,KAAa;IAChC,OAAO,KAAK;SACT,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC;SACtC,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC;SACxB,WAAW,EAAE,CAAC;AACnB,CAAC"}

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"fileNames":["../../../node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/typescript/lib/lib.es2015.d.ts","../../../node_modules/typescript/lib/lib.es2016.d.ts","../../../node_modules/typescript/lib/lib.es2017.d.ts","../../../node_modules/typescript/lib/lib.es2018.d.ts","../../../node_modules/typescript/lib/lib.es2019.d.ts","../../../node_modules/typescript/lib/lib.es2020.d.ts","../../../node_modules/typescript/lib/lib.es2021.d.ts","../../../node_modules/typescript/lib/lib.es2022.d.ts","../../../node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/typescript/lib/lib.dom.iterable.d.ts","../../../node_modules/typescript/lib/lib.dom.asynciterable.d.ts","../../../node_modules/typescript/lib/lib.webworker.importscripts.d.ts","../../../node_modules/typescript/lib/lib.scripthost.d.ts","../../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../../node_modules/typescript/lib/lib.es2016.intl.d.ts","../../../node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../../node_modules/typescript/lib/lib.es2017.date.d.ts","../../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2019.intl.d.ts","../../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../../node_modules/typescript/lib/lib.es2020.date.d.ts","../../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../../node_modules/typescript/lib/lib.es2020.number.d.ts","../../../node_modules/typescript/lib/lib.es2021.promise.d.ts","../../../node_modules/typescript/lib/lib.es2021.string.d.ts","../../../node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../../node_modules/typescript/lib/lib.es2021.intl.d.ts","../../../node_modules/typescript/lib/lib.es2022.array.d.ts","../../../node_modules/typescript/lib/lib.es2022.error.d.ts","../../../node_modules/typescript/lib/lib.es2022.intl.d.ts","../../../node_modules/typescript/lib/lib.es2022.object.d.ts","../../../node_modules/typescript/lib/lib.es2022.string.d.ts","../../../node_modules/typescript/lib/lib.es2022.regexp.d.ts","../../../node_modules/typescript/lib/lib.decorators.d.ts","../../../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../../node_modules/typescript/lib/lib.es2022.full.d.ts","../../core/dist/types.d.ts","../../core/dist/builders.d.ts","../../core/dist/manifest-schema.d.ts","../../core/dist/layout-validation.d.ts","../../core/dist/capabilities.d.ts","../../core/dist/validation.d.ts","../../core/dist/index.d.ts","../src/background-renderer.ts","../../runtime/dist/controller.d.ts","../../runtime/dist/hash.d.ts","../../runtime/dist/notes.d.ts","../../runtime/dist/registry.d.ts","../../runtime/dist/timeline.d.ts","../../runtime/dist/action-dispatcher.d.ts","../../runtime/dist/cue-dispatcher.d.ts","../../runtime/dist/camera.d.ts","../../runtime/dist/spatial.d.ts","../../runtime/dist/scene-player.d.ts","../../runtime/dist/theme-bundle.d.ts","../../runtime/dist/index.d.ts","../src/camera-adapter.ts","../src/default-theme.ts","../src/theme-fonts.ts","../src/theme-tokens.ts","../src/layout-renderer.ts","../src/html-sanitize.ts","../src/dom-renderer.ts","../src/spatial-renderer.ts","../src/slide-thumbnail.ts","../src/index.ts"],"fileIdsList":[[64],[64,65,66,67,68,69],[70],[83],[70,71,83,85,86,87,88,89],[84,85,86,87,88,90,91,92],[70,83,90],[70,88],[70,72,75],[76],[70,75,76,77],[72],[72,73,74,75,76,77,78,79,80,81,82],[70,72],[70,80],[70,76],[70,75]],"fileInfos":[{"version":"bcd24271a113971ba9eb71ff8cb01bc6b0f872a85c23fdbe5d93065b375933cd","affectsGlobalScope":true,"impliedFormat":1},{"version":"3f88bedbeb09c6f5a6645cb24c7c55f1aa22d19ae96c8e6959cbd8b85a707bc6","impliedFormat":1},{"version":"7fe93b39b810eadd916be8db880dd7f0f7012a5cc6ffb62de8f62a2117fa6f1f","impliedFormat":1},{"version":"bb0074cc08b84a2374af33d8bf044b80851ccc9e719a5e202eacf40db2c31600","impliedFormat":1},{"version":"1a7daebe4f45fb03d9ec53d60008fbf9ac45a697fdc89e4ce218bc94b94f94d6","impliedFormat":1},{"version":"f94b133a3cb14a288803be545ac2683e0d0ff6661bcd37e31aaaec54fc382aed","impliedFormat":1},{"version":"f59d0650799f8782fd74cf73c19223730c6d1b9198671b1c5b3a38e1188b5953","impliedFormat":1},{"version":"8a15b4607d9a499e2dbeed9ec0d3c0d7372c850b2d5f1fb259e8f6d41d468a84","impliedFormat":1},{"version":"26e0fe14baee4e127f4365d1ae0b276f400562e45e19e35fd2d4c296684715e6","impliedFormat":1},{"version":"d6b1eba8496bdd0eed6fc8a685768fe01b2da4a0388b5fe7df558290bffcf32f","affectsGlobalScope":true,"impliedFormat":1},{"version":"7f57fc4404ff020bc45b9c620aff2b40f700b95fe31164024c453a5e3c163c54","impliedFormat":1},{"version":"7f57fc4404ff020bc45b9c620aff2b40f700b95fe31164024c453a5e3c163c54","impliedFormat":1},{"version":"2a2de5b9459b3fc44decd9ce6100b72f1b002ef523126c1d3d8b2a4a63d74d78","affectsGlobalScope":true,"impliedFormat":1},{"version":"f13f4b465c99041e912db5c44129a94588e1aafee35a50eab51044833f50b4ee","affectsGlobalScope":true,"impliedFormat":1},{"version":"eadcffda2aa84802c73938e589b9e58248d74c59cb7fcbca6474e3435ac15504","affectsGlobalScope":true,"impliedFormat":1},{"version":"105ba8ff7ba746404fe1a2e189d1d3d2e0eb29a08c18dded791af02f29fb4711","affectsGlobalScope":true,"impliedFormat":1},{"version":"00343ca5b2e3d48fa5df1db6e32ea2a59afab09590274a6cccb1dbae82e60c7c","affectsGlobalScope":true,"impliedFormat":1},{"version":"ebd9f816d4002697cb2864bea1f0b70a103124e18a8cd9645eeccc09bdf80ab4","affectsGlobalScope":true,"impliedFormat":1},{"version":"2c1afac30a01772cd2a9a298a7ce7706b5892e447bb46bdbeef720f7b5da77ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"7b0225f483e4fa685625ebe43dd584bb7973bbd84e66a6ba7bbe175ee1048b4f","affectsGlobalScope":true,"impliedFormat":1},{"version":"c0a4b8ac6ce74679c1da2b3795296f5896e31c38e888469a8e0f99dc3305de60","affectsGlobalScope":true,"impliedFormat":1},{"version":"3084a7b5f569088e0146533a00830e206565de65cae2239509168b11434cd84f","affectsGlobalScope":true,"impliedFormat":1},{"version":"c5079c53f0f141a0698faa903e76cb41cd664e3efb01cc17a5c46ec2eb0bef42","affectsGlobalScope":true,"impliedFormat":1},{"version":"32cafbc484dea6b0ab62cf8473182bbcb23020d70845b406f80b7526f38ae862","affectsGlobalScope":true,"impliedFormat":1},{"version":"fca4cdcb6d6c5ef18a869003d02c9f0fd95df8cfaf6eb431cd3376bc034cad36","affectsGlobalScope":true,"impliedFormat":1},{"version":"b93ec88115de9a9dc1b602291b85baf825c85666bf25985cc5f698073892b467","affectsGlobalScope":true,"impliedFormat":1},{"version":"f5c06dcc3fe849fcb297c247865a161f995cc29de7aa823afdd75aaaddc1419b","affectsGlobalScope":true,"impliedFormat":1},{"version":"b77e16112127a4b169ef0b8c3a4d730edf459c5f25fe52d5e436a6919206c4d7","affectsGlobalScope":true,"impliedFormat":1},{"version":"fbffd9337146eff822c7c00acbb78b01ea7ea23987f6c961eba689349e744f8c","affectsGlobalScope":true,"impliedFormat":1},{"version":"a995c0e49b721312f74fdfb89e4ba29bd9824c770bbb4021d74d2bf560e4c6bd","affectsGlobalScope":true,"impliedFormat":1},{"version":"c7b3542146734342e440a84b213384bfa188835537ddbda50d30766f0593aff9","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce6180fa19b1cccd07ee7f7dbb9a367ac19c0ed160573e4686425060b6df7f57","affectsGlobalScope":true,"impliedFormat":1},{"version":"3f02e2476bccb9dbe21280d6090f0df17d2f66b74711489415a8aa4df73c9675","affectsGlobalScope":true,"impliedFormat":1},{"version":"45e3ab34c1c013c8ab2dc1ba4c80c780744b13b5676800ae2e3be27ae862c40c","affectsGlobalScope":true,"impliedFormat":1},{"version":"805c86f6cca8d7702a62a844856dbaa2a3fd2abef0536e65d48732441dde5b5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"e42e397f1a5a77994f0185fd1466520691456c772d06bf843e5084ceb879a0ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"f4c2b41f90c95b1c532ecc874bd3c111865793b23aebcc1c3cbbabcd5d76ffb0","affectsGlobalScope":true,"impliedFormat":1},{"version":"ab26191cfad5b66afa11b8bf935ef1cd88fabfcb28d30b2dfa6fad877d050332","affectsGlobalScope":true,"impliedFormat":1},{"version":"2088bc26531e38fb05eedac2951480db5309f6be3fa4a08d2221abb0f5b4200d","affectsGlobalScope":true,"impliedFormat":1},{"version":"cb9d366c425fea79716a8fb3af0d78e6b22ebbab3bd64d25063b42dc9f531c1e","affectsGlobalScope":true,"impliedFormat":1},{"version":"500934a8089c26d57ebdb688fc9757389bb6207a3c8f0674d68efa900d2abb34","affectsGlobalScope":true,"impliedFormat":1},{"version":"689da16f46e647cef0d64b0def88910e818a5877ca5379ede156ca3afb780ac3","affectsGlobalScope":true,"impliedFormat":1},{"version":"bc21cc8b6fee4f4c2440d08035b7ea3c06b3511314c8bab6bef7a92de58a2593","affectsGlobalScope":true,"impliedFormat":1},{"version":"7ca53d13d2957003abb47922a71866ba7cb2068f8d154877c596d63c359fed25","affectsGlobalScope":true,"impliedFormat":1},{"version":"54725f8c4df3d900cb4dac84b64689ce29548da0b4e9b7c2de61d41c79293611","affectsGlobalScope":true,"impliedFormat":1},{"version":"e5594bc3076ac29e6c1ebda77939bc4c8833de72f654b6e376862c0473199323","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f3eb332c2d73e729f3364fcc0c2b375e72a121e8157d25a82d67a138c83a95c","affectsGlobalScope":true,"impliedFormat":1},{"version":"6f4427f9642ce8d500970e4e69d1397f64072ab73b97e476b4002a646ac743b1","affectsGlobalScope":true,"impliedFormat":1},{"version":"48915f327cd1dea4d7bd358d9dc7732f58f9e1626a29cc0c05c8c692419d9bb7","affectsGlobalScope":true,"impliedFormat":1},{"version":"b7bf9377723203b5a6a4b920164df22d56a43f593269ba6ae1fdc97774b68855","affectsGlobalScope":true,"impliedFormat":1},{"version":"db9709688f82c9e5f65a119c64d835f906efe5f559d08b11642d56eb85b79357","affectsGlobalScope":true,"impliedFormat":1},{"version":"4b25b8c874acd1a4cf8444c3617e037d444d19080ac9f634b405583fd10ce1f7","affectsGlobalScope":true,"impliedFormat":1},{"version":"37be57d7c90cf1f8112ee2636a068d8fd181289f82b744160ec56a7dc158a9f5","affectsGlobalScope":true,"impliedFormat":1},{"version":"a917a49ac94cd26b754ab84e113369a75d1a47a710661d7cd25e961cc797065f","affectsGlobalScope":true,"impliedFormat":1},{"version":"6d3261badeb7843d157ef3e6f5d1427d0eeb0af0cf9df84a62cfd29fd47ac86e","affectsGlobalScope":true,"impliedFormat":1},{"version":"195daca651dde22f2167ac0d0a05e215308119a3100f5e6268e8317d05a92526","affectsGlobalScope":true,"impliedFormat":1},{"version":"8b11e4285cd2bb164a4dc09248bdec69e9842517db4ca47c1ba913011e44ff2f","affectsGlobalScope":true,"impliedFormat":1},{"version":"0508571a52475e245b02bc50fa1394065a0a3d05277fbf5120c3784b85651799","affectsGlobalScope":true,"impliedFormat":1},{"version":"8f9af488f510c3015af3cc8c267a9e9d96c4dd38a1fdff0e11dc5a544711415b","affectsGlobalScope":true,"impliedFormat":1},{"version":"fc611fea8d30ea72c6bbfb599c9b4d393ce22e2f5bfef2172534781e7d138104","affectsGlobalScope":true,"impliedFormat":1},{"version":"1ce14b81c5cc821994aa8ec1d42b220dd41b27fcc06373bce3958af7421b77d4","affectsGlobalScope":true,"impliedFormat":1},{"version":"b3a048b3e9302ef9a34ef4ebb9aecfb28b66abb3bce577206a79fee559c230da","affectsGlobalScope":true,"impliedFormat":1},{"version":"01a30f9e8582b369075c0808df71121e6855cb06fd8d3d39511d9ebb66405205","impliedFormat":1},{"version":"8877805003603477c63696f8af86eb14be659de3027a597617e7a95ca9250a92","impliedFormat":99},{"version":"a2c4bcfeeaf83801774f8c21daf4c18b15fd9da4469e222a6708a58d235bb286","impliedFormat":99},{"version":"163a1497b249fb8ac3eac7710af6df75222a21b20434ec35d4489c85f18a397b","impliedFormat":99},{"version":"b1d091ebe44dc4eb7ba1535c76bcbf15df97a0cde19fda1bbd34e1503df10e95","impliedFormat":99},{"version":"baeb0570658dce9269d3a5dabb44a1e6e11d8712f45750ca80885fd0e2dab38e","impliedFormat":99},{"version":"def8ed8b7980dbad419047252c19812799dbf761e797d624a9a030fb318a27ee","impliedFormat":99},{"version":"09451d1bdb65b1b10cafbccc4c762f9181609881ba078e4aabfbb7c6d4effe17","impliedFormat":99},{"version":"e45005cc06db25b30421a427992c3ef883f325c8ff6c535a19f3d61dffb9b9f8","signature":"c834f159d0003c143b3172ae59811831e7c879fdbf78e7b0916fb9bf94104e1d","impliedFormat":99},{"version":"4c26794e2a073e20bf40b3482be4f25fa4d6b83c8d4cdb7e3744d8401eef6c38","impliedFormat":99},{"version":"92692f5dcdd41d6cebb9785ebe83f6631e448d468c7e77f56c2fe6f8f32869ba","impliedFormat":99},{"version":"1093522585079cf706e859f4323d23832ef5b62b04805190bcba06614fc8bdcb","impliedFormat":99},{"version":"165426a72c724ac8b6c5068f64aeeedc976a31cddaf7bdb30689ca0e0e885885","impliedFormat":99},{"version":"9c6738ae625093663883e4694a79bd8d9c8ff79f0d0bb60b8d6e4ab39393b77d","impliedFormat":99},{"version":"f864cf8286ef0798ae6eb2808965e2038c10ffb940b196a3a6e6364fe534115f","impliedFormat":99},{"version":"d6628b767083fceffd23177e8c53e1348d372e5755c2880f8f2e958d7a6dbafc","impliedFormat":99},{"version":"efbeb4d5e4df969ce57b6fe98d6cabe2097cae2e0695b6ef85c77f7a8045e9a3","impliedFormat":99},{"version":"4bbc05996c36885d4da5e1d3b140fd16ee7121a4184843447a3bb47b240e3386","impliedFormat":99},{"version":"0eaeeda7b43eb04e6503115b59ea0fc0dcede7d39dc6651a1ae8ba94e5974b46","impliedFormat":99},{"version":"8cad53853f3c0a8f7391721d625259ba815e33c26139f59e08751fa38c326f6d","impliedFormat":99},{"version":"7af78eb71c547cc0353d89ca54074af736128b01e231ab5662e1300adc0e17fd","impliedFormat":99},{"version":"8e8a417f5c735daf3ed98f6f385c9a1a29621aafa4584585a9eb7ba9aa2427c1","signature":"d221c1f17ffdb4bb209ab9533130d22c6f21b1cb8f8758e1cba13cb7194c0375","impliedFormat":99},{"version":"9d039752c719e34eb6c17bb7a7097b64bef3b236e9115400d5fee73387539ae0","signature":"fb1ebc4fb7408c3ef53774de803cfee97617c4602781185bcc87328f51aa17b8","impliedFormat":99},{"version":"474ce5ebb195426ecac0615b8c910ec4544d943f0d793389e933aa222ff9d423","signature":"d219f87f9d815d0fc80d414bde030ecfd1e7541a8d71b439689ba5145a8fd955","impliedFormat":99},{"version":"1a7792835d2442ae21f2c7fd01b892b3e6ae2c10946e4f99a21bf544d2a5692d","signature":"f5d0694e7db04c81addef000c8e1fb6f18341838cf0f2753e524ca3638a44def","impliedFormat":99},{"version":"7d54554828e5fc0673e2c89c0812bc27c3ec5a8b9d94b94fd24365ea7a149d22","signature":"ec25a0af39f74d0b64582d2c34bea91543eead92be8062f2a9675e4f3b1c52f3","impliedFormat":99},{"version":"096184da346f706f01a3315a6d3092ead4da9db7df9eca791bb118278ce8f22f","signature":"5c52e72c52e831efd125e9c6613ce223a7e81c262daff75c2890b7077441cbb6","impliedFormat":99},{"version":"cbdc7ef2f01b573a8d64e03f2e7b19ee16a6e8ada20da1654346098cdadff416","signature":"f121785d51a6f6ebe163d59ceeccd2ed0fa62811ef2bd39e405684f1eac058e1","impliedFormat":99},{"version":"8eb0e224e2af55bea0c93e76bc760354c6e403ad0ada518c447a743da44eee12","signature":"461d01f33d05a7826205287bf877987dfca39782ee004bfb791ca4a4dcb5a7ea","impliedFormat":99},{"version":"0ce7d851462b7961437f6147751e841c45bf802c76fddf4067171562c0aa59ed","signature":"5f126e8aca2a001fffadcab7a51618a0774543fee0b11ded659010b1a50ceff4","impliedFormat":99},{"version":"c6643fc0f4b1860c08fdadd6b3e642c89724a56e728eed9a0bd53ccde732d8c1","signature":"9093aba9a516d3788b1fbd87a5bda507e36c51b1d11941b9ad5a13ee6d5b0f69","impliedFormat":99}],"root":[71,[84,93]],"options":{"composite":true,"declaration":true,"declarationMap":true,"module":199,"outDir":"./","rootDir":"../src","skipLibCheck":true,"sourceMap":true,"strict":true,"target":9,"tsBuildInfoFile":"./tsconfig.tsbuildinfo"},"referencedMap":[[65,1],[68,1],[70,2],[67,1],[69,1],[71,3],[84,4],[85,3],[90,5],[93,6],[92,7],[91,8],[86,3],[87,3],[77,9],[79,10],[72,3],[78,11],[73,12],[83,13],[74,14],[75,3],[81,15],[80,16],[82,17],[76,3]],"latestChangedDtsFile":"./background-renderer.d.ts","version":"6.0.3"}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@velumo/renderer-dom",
+  "version": "0.1.0-beta.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@velumo/core": "0.0.0",
+    "@velumo/runtime": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsc -b"
+  }
+}

package/src/background-renderer.ts

@@ -0,0 +1,77 @@
+import type { Background, BackgroundLayer, GradientStop } from "@velumo/core";
+
+export interface BackgroundRendererElement {
+  setAttribute(name: string, value: string): void;
+  appendChild(child: BackgroundRendererElement): void;
+  readonly style?: { setProperty(name: string, value: string): void };
+  textContent: string;
+  parentNode?: unknown;
+}
+
+export interface BackgroundRendererFactories {
+  createElement(tagName: string): BackgroundRendererElement;
+  setStyleProperty(
+    element: BackgroundRendererElement,
+    property: string,
+    value: string,
+  ): void;
+}
+
+function stopsToCss(stops: readonly GradientStop[]): string {
+  return stops
+    .map((stop) =>
+      stop.at === undefined ? stop.color : `${stop.color} ${stop.at}%`,
+    )
+    .join(", ");
+}
+
+function layerToGradientCss(layer: BackgroundLayer): string {
+  const stops = stopsToCss(layer.stops);
+  if (layer.type === "linear") {
+    return `linear-gradient(${layer.angle ?? 180}deg, ${stops})`;
+  }
+  const shape = layer.shape ?? "circle";
+  const x = layer.position?.x ?? 50;
+  const y = layer.position?.y ?? 50;
+  return `radial-gradient(${shape} at ${x}% ${y}%, ${stops})`;
+}
+
+export function renderBackground(
+  background: Background,
+  factories: BackgroundRendererFactories,
+): BackgroundRendererElement {
+  const container = factories.createElement("div");
+  container.setAttribute("data-velumo-background", "");
+  factories.setStyleProperty(container, "position", "absolute");
+  factories.setStyleProperty(container, "inset", "0");
+  factories.setStyleProperty(container, "z-index", "-1");
+
+  if (background.color !== undefined) {
+    factories.setStyleProperty(container, "background-color", background.color);
+  }
+
+  for (const layer of background.layers ?? []) {
+    const layerElement = factories.createElement("div");
+    layerElement.setAttribute("data-velumo-background-layer", "");
+    factories.setStyleProperty(layerElement, "position", "absolute");
+    factories.setStyleProperty(layerElement, "inset", "0");
+    factories.setStyleProperty(
+      layerElement,
+      "background",
+      layerToGradientCss(layer),
+    );
+    if (layer.opacity !== undefined) {
+      factories.setStyleProperty(
+        layerElement,
+        "opacity",
+        String(layer.opacity),
+      );
+    }
+    if (layer.blend !== undefined && layer.blend !== "normal") {
+      factories.setStyleProperty(layerElement, "mix-blend-mode", layer.blend);
+    }
+    container.appendChild(layerElement);
+  }
+
+  return container;
+}

package/src/camera-adapter.ts

@@ -0,0 +1,21 @@
+import type { ResolvedView } from "@velumo/runtime";
+
+export interface DomCameraRoot {
+  style: { transform: string };
+}
+
+/**
+ * Apply a percent-world camera view to the world layer.
+ *
+ * The world layer fills the viewport (width/height 100%) with
+ * `transform-origin: 0 0`, and its content is positioned in 0-100 percent.
+ * To center world point (x, y) at `zoom`, translate by (50 - zoom*x)% /
+ * (50 - zoom*y)% (percent of the layer's own box = the viewport) then scale.
+ */
+export function applyCameraToDomRoot(
+  root: DomCameraRoot,
+  view: ResolvedView,
+): void {
+  const { x, y, zoom } = view;
+  root.style.transform = `translate(${50 - zoom * x}%, ${50 - zoom * y}%) scale(${zoom})`;
+}