bireactive 0.2.0

package/dist/web/md-marker.js

@@ -0,0 +1,39 @@
+// Prose-linking element for plain (non-math) text — same wiring as <md-tex sym="...">.
+import { effect } from "../core/index.js";
+import { getMarker as getGlobalMarker, highlightTint, hover } from "../tex/index.js";
+function resolveMarker(id, forId) {
+    if (forId) {
+        const el = document.getElementById(forId);
+        return el?.getMarker?.(id);
+    }
+    return getGlobalMarker(id);
+}
+export class MdMarker extends HTMLElement {
+    #disposers = [];
+    connectedCallback() {
+        const id = this.getAttribute("sym");
+        if (!id)
+            return;
+        const forId = this.getAttribute("for");
+        const m = resolveMarker(id, forId);
+        if (!m)
+            return;
+        this.style.borderRadius = "2px";
+        this.style.transition = "background-color 120ms ease-out";
+        this.style.cursor = "default";
+        this.#disposers.push(hover(this, m), effect(() => {
+            this.style.color = m.color.value ?? "";
+        }), effect(() => {
+            const color = m.color.value;
+            this.style.backgroundColor = m.active.value && color ? highlightTint(color) : "";
+        }));
+    }
+    disconnectedCallback() {
+        for (const d of this.#disposers)
+            d();
+        this.#disposers.length = 0;
+    }
+    static define() {
+        customElements.define("md-marker", this);
+    }
+}

package/dist/web/md-tex.d.ts

@@ -0,0 +1,6 @@
+export declare class MdTex extends HTMLElement {
+    #private;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static define(): void;
+}

package/dist/web/md-tex.js

@@ -0,0 +1,61 @@
+// Inline math custom element with optional prose-linking via `for`/`sym`.
+import { effect } from "../core/index.js";
+import { getMarker as getGlobalMarker, highlightTint, hover, renderToMathML, } from "../tex/index.js";
+const SYM_RE = /\\sym\{([^}]+)\}\{([^}]*)\}/g;
+const symClass = (id) => `bireactive-sym-${id.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
+function resolveMarker(id, forId) {
+    if (forId) {
+        const el = document.getElementById(forId);
+        return el?.getMarker?.(id);
+    }
+    return getGlobalMarker(id);
+}
+export class MdTex extends HTMLElement {
+    #disposers = [];
+    connectedCallback() {
+        const singleId = this.getAttribute("sym");
+        const forId = this.getAttribute("for");
+        const src = this.textContent?.trim() ?? "";
+        if (singleId) {
+            this.innerHTML = renderToMathML(src);
+            const m = resolveMarker(singleId, forId);
+            if (m)
+                this.#wire(this, m);
+            return;
+        }
+        // Full expression — pre-process \sym{id}{content}
+        const symIds = new Map(); // cssClass → registryId
+        const processedSrc = src.replace(SYM_RE, (_, id, content) => {
+            const cls = symClass(id);
+            symIds.set(cls, id);
+            return `\\class{${cls}}{${content}}`;
+        });
+        this.innerHTML = renderToMathML(processedSrc);
+        for (const [cls, id] of symIds) {
+            const m = resolveMarker(id, forId);
+            if (!m)
+                continue;
+            for (const el of this.querySelectorAll(`.${cls}`))
+                this.#wire(el, m);
+        }
+    }
+    #wire(el, m) {
+        el.style.borderRadius = "2px";
+        el.style.transition = "background-color 120ms ease-out";
+        el.style.cursor = "default";
+        this.#disposers.push(hover(el, m), effect(() => {
+            el.style.color = m.color.value ?? "";
+        }), effect(() => {
+            const color = m.color.value;
+            el.style.backgroundColor = m.active.value && color ? highlightTint(color) : "";
+        }));
+    }
+    disconnectedCallback() {
+        for (const d of this.#disposers)
+            d();
+        this.#disposers.length = 0;
+    }
+    static define() {
+        customElements.define("md-tex", this);
+    }
+}

package/dist/web/raf.d.ts

@@ -0,0 +1,6 @@
+/** Drive `anim.step(dt)` on every animation frame. Caps `dt` at 32 ms
+ *  so a backgrounded tab doesn't deliver one giant frame on resume.
+ *  Returns a disposer. */
+export declare function attachRaf(anim: {
+    step(dt: number): void;
+}): () => void;

package/dist/web/raf.js

@@ -0,0 +1,24 @@
+// requestAnimationFrame adapter for the engine. Lives in `web/`
+// because it depends on the browser; core is renderer-agnostic.
+/** Drive `anim.step(dt)` on every animation frame. Caps `dt` at 32 ms
+ *  so a backgrounded tab doesn't deliver one giant frame on resume.
+ *  Returns a disposer. */
+export function attachRaf(anim) {
+    if (typeof requestAnimationFrame !== "function")
+        return () => { };
+    const FRAME_CAP_MS = 32;
+    let rafId = 0, last = 0;
+    const tick = (now) => {
+        rafId = requestAnimationFrame(tick);
+        const dt = last ? Math.min(now - last, FRAME_CAP_MS) / 1000 : 0;
+        last = now;
+        anim.step(dt);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => {
+        if (rafId)
+            cancelAnimationFrame(rafId);
+        rafId = 0;
+        last = 0;
+    };
+}

package/dist/web/viewport.d.ts

@@ -0,0 +1,7 @@
+import { type Cell } from "../core/index.js";
+interface Viewport {
+    w: number;
+    h: number;
+}
+export declare function viewport(): Cell<Viewport>;
+export {};

package/dist/web/viewport.js

@@ -0,0 +1,13 @@
+// Shared viewport signal — one lazy resize listener, re-emits on resize.
+import { cell } from "../core/index.js";
+let cached;
+export function viewport() {
+    if (cached)
+        return cached;
+    const sig = cell({ w: window.innerWidth, h: window.innerHeight });
+    window.addEventListener("resize", () => {
+        sig.value = { w: window.innerWidth, h: window.innerHeight };
+    });
+    cached = sig;
+    return sig;
+}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "bireactive",
+  "version": "0.2.0",
+  "description": "Bi-directional reactive programming.",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "publishConfig": {
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      }
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite --host",
+    "site": "vite-node site/build.ts && vite build && vite-node site/build.ts",
+    "preview": "vite preview",
+    "prebuild": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json --resolve-full-paths",
+    "test": "vitest --config vitest.config.ts run",
+    "test:watch": "vitest --config vitest.config.ts",
+    "bench": "node --expose-gc node_modules/.bin/vite-node",
+    "typecheck": "tsc --noEmit --pretty",
+    "fmt": "biome check --write .",
+    "prepublishOnly": "npm test && npm run build"
+  },
+  "dependencies": {
+    "prism-esm": "^1.29.0-fix.6",
+    "temml": "^0.13.3"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.15",
+    "@preact/signals-core": "^1.14.2",
+    "@types/node": "^22.0.0",
+    "alien-signals": "^3.2.1",
+    "fast-check": "^4.8.0",
+    "gray-matter": "^4.0.3",
+    "marked": "^12.0.0",
+    "marked-footnote": "^1.4.0",
+    "mitata": "^1.0.34",
+    "reactive-framework-test-suite": "^0.0.2",
+    "tsc-alias": "^1.8.17",
+    "typescript": "^6.0.3",
+    "vite": "^7.3.3",
+    "vite-node": "^5.3.0",
+    "vitest": "^4.1.7"
+  },
+  "keywords": [
+    "bireactive",
+    "reactive",
+    "signals",
+    "svg",
+    "animation",
+    "diagrams",
+    "constraints",
+    "propagators"
+  ],
+  "author": "Orion Reed",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.19"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OrionReed/bireactive.git"
+  },
+  "homepage": "https://github.com/OrionReed/bireactive",
+  "bugs": "https://github.com/OrionReed/bireactive/issues"
+}