@glissade/backend-dom 0.21.0-pre.1 → 0.21.0-pre.3

package/README.md

@@ -44,6 +44,14 @@ function frame(t) {
 }
 ```
 
+> **A node may stamp `data-node-id` on more than one element.** Identity is
+> stamped per emitted command, so a node's transform wrapper *and* its content
+> element (the `<svg>`/text `<div>`) both carry the id. Use `el.closest('[data-node-id]')`
+> for hit-testing (the editing contract — it resolves to the nearest tagged
+> element regardless); if you build a node→element MAP, `querySelectorAll('[data-node-id="x"]')`
+> returns more than one element per node, so dedupe by id (or key off the outer
+> wrapper).
+
 Then the DOM is your **interaction surface** while the scene graph stays the single
 source of truth — read identity, mutate the scene, never write the DOM back:
 
@@ -56,6 +64,36 @@ stage.addEventListener('click', (e) => {
 });
 ```
 
+> **One `emitWithIds()` feeds BOTH `setIds` and `render`.** The id stream is
+> positional by command index, so `setIds(...)` and `render(...)` must come from
+> the *same* emit — `setIds(emitWithIds(sceneA, …).ids)` then
+> `render(evaluate(sceneB, …))` silently mis-maps `data-node-id`. Always destructure
+> one call: `const { displayList, ids } = emitWithIds(scene, tl, t)`.
+
+## No-build (`<script src>`)
+
+The DOM tier ships as a separate **optional** IIFE, `glissade-dom.browser.js`, a
+second `<script>` loaded *after* the base bundle — it augments `window.glissade`
+with `DomBackend` + `emitWithIds` (the base playback bundle stays lean and
+`DomBackend`-free):
+
+```html
+<script src="https://unpkg.com/@glissade/browser/dist/glissade.browser.js"></script>
+<script src="https://unpkg.com/@glissade/browser/dist/glissade-dom.browser.js"></script>
+<script type="module">
+  const backend = new glissade.DomBackend(document.getElementById('stage'));
+  function frame(t) {
+    for (const m of movements) m.run(t);
+    const { displayList, ids } = glissade.emitWithIds(scene, EMPTY, t); // ONE emit
+    backend.setIds(ids);
+    backend.render(displayList);
+  }
+</script>
+```
+
+Load order is fail-loud: `glissade-dom.browser.js` throws a clear error if the
+base bundle is absent or a different version (never a cryptic `undefined`).
+
 ## What it maps
 
 | IR op | DOM/SVG |

package/dist/index.js

@@ -265,8 +265,8 @@ var DomBackend = class {
 					const o = this.#matchOrCreate(cursor, key, "fillText", () => {
 						const div = doc.createElement("div");
 						div.style.position = "absolute";
-						div.style.transform = "translateY(-0.8em)";
 						div.style.whiteSpace = "pre";
+						div.style.lineHeight = "1";
 						return {
 							op: "fillText",
 							el: div,
@@ -276,11 +276,15 @@ var DomBackend = class {
 					const div = o.el;
 					this.#setStyle(o, div, "left", `${cmd.x}px`);
 					this.#setStyle(o, div, "top", `${cmd.y}px`);
-					this.#setStyle(o, div, "font", fontString(cmd.font));
+					const ax = cmd.align === "center" ? "-50%" : cmd.align === "right" ? "-100%" : "0px";
+					this.#setStyle(o, div, "transform", `translate(${ax}, -0.8em)`);
+					this.#setStyle(o, div, "fontFamily", cmd.font.family);
+					this.#setStyle(o, div, "fontSize", `${cmd.font.size}px`);
+					this.#setStyle(o, div, "fontWeight", cmd.font.weight !== void 0 ? String(cmd.font.weight) : void 0);
+					this.#setStyle(o, div, "fontStyle", cmd.font.style !== void 0 ? cmd.font.style : void 0);
 					this.#setStyle(o, div, "fontVariationSettings", cmd.font.fontVariationSettings !== void 0 ? cmd.font.fontVariationSettings : void 0);
 					this.#setStyle(o, div, "color", this.#solid(cmd.paint));
 					this.#setAttr(div, o, "dataApprox", "data-approx", cmd.paint.kind !== "color" ? "true" : void 0);
-					this.#setStyle(o, div, "textAlign", cmd.align !== void 0 ? cmd.align : void 0);
 					this.#setText(div, o, cmd.text);
 					this.#stamp(o, div, id);
 					break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/backend-dom",
-  "version": "0.21.0-pre.1",
+  "version": "0.21.0-pre.3",
   "description": "glissade DOM render backend: DisplayList -> HTML/SVG elements. A preview / non-parity realtime tier (accessibility, selectable text, CSS-native embedding) — NOT a Skia-export twin.",
   "license": "Apache-2.0",
   "engines": {
@@ -18,8 +18,8 @@
     "dist"
   ],
   "dependencies": {
-    "@glissade/core": "0.21.0-pre.1",
-    "@glissade/scene": "0.21.0-pre.1"
+    "@glissade/core": "0.21.0-pre.3",
+    "@glissade/scene": "0.21.0-pre.3"
   },
   "repository": {
     "type": "git",