@livx.cc/bare-v3 0.1.0-alpha.34 → 0.1.0-alpha.35

package/README.md

@@ -17,7 +17,7 @@ The comparison UI needs the fixture server for example links. Model outputs repl
 
 Install the published alpha with `bun add @livx.cc/bare-v3@alpha`; use `bun pm pack` for an unpublished local build. Import CSS from `@livx.cc/bare-v3/css` or `/css/min`. Put `class="b3-root"` on html and set `data-b3-theme="dark"` explicitly for dark mode. Component references are exported under `/references/*.md`; start with `/references/start.md`. Place generic link defaults in `@layer bare.reset` so they do not override button/navigation colors. Unlayered consumer CSS overrides library layers: scope custom palette colors to each theme rather than applying light-only colors unconditionally to `:root`.
 
-`bun lab plan config.json` creates a seeded, capped development job plan. `bun lab prepare run.json` prepares one isolated workspace and manifest without invoking a model. The [visual playground](http://127.0.0.1:4313/fixtures/playground.html) demonstrates the current component contracts and shows the bare-v2 coverage audit. Composed apps include Signal (system performance), Elsewhere (local discovery/booking), Daylight (iOS/Android web studies), Relay, Gather setup and sign-in, Counter, Margin, Still, Fieldnotes, Interval, and the Forma project workspace. New components are an implemented subset, not full bare-v2 parity or a qualified release. Optional interactions are exported from `@livx.cc/bare-v3/ui`; call `mount(document)` once and use its returned cleanup on teardown.
+`bun lab plan config.json` creates a seeded, capped development job plan. `bun lab prepare run.json` prepares one isolated workspace and manifest without invoking a model. The [visual playground](http://127.0.0.1:4313/fixtures/playground.html) demonstrates the current component contracts and shows the bare-v2 coverage audit. Composed apps include Signal (system performance), Elsewhere (local discovery/booking), Daylight (iOS/Android web studies), Relay, Gather setup and sign-in, Counter, Margin, Still, Fieldnotes, Interval, and the Forma project workspace. New components are an implemented subset, not full bare-v2 parity or a qualified release. Optional interactions are exported from `@livx.cc/bare-v3/ui`; call `mount(document)` once and use its returned cleanup on teardown. Genuinely hard interactive widgets ship separately as light-DOM custom elements — currently `@livx.cc/bare-v3/elements/image-viewer` (`<b3-image-viewer>`); see `recipes/image-viewer.md` and the plain/React/Vue demos in `fixtures/elements/`. `bun scripts/verify-image-viewer.ts` drives those demos in real headless Chrome and asserts measured transforms.
 
 Playground previews accept shareable app/width links, for example [Signal at 390px](http://127.0.0.1:4313/fixtures/playground.html?demo=metrics&width=390#demos). The controls keep these query parameters in sync; unknown values fall back to the authored defaults. This is an iframe layout preview, not mobile-device qualification.
 

package/dist/elements/image-viewer.js

@@ -0,0 +1,516 @@
+// src/elements/image-viewer.js
+var FIT = 1.001;
+var DOUBLE_TAP_MS = 320;
+var DOUBLE_TAP_SLOP = 30;
+var CLICK_SWALLOW_MS = 350;
+var STYLE_ID = "b3-image-viewer-style";
+var STYLE = `
+.b3-image-viewer{position:relative;display:block;overflow:hidden;touch-action:pan-y;
+  background:var(--b3-color-canvas,#f6f5f0);color:var(--b3-color-text,#202923);
+  border-radius:var(--b3-radius,.75rem);-webkit-user-select:none;user-select:none;}
+.b3-image-viewer:focus-visible{outline:2px solid var(--b3-color-focus,#276bdd);outline-offset:2px;}
+.b3-image-viewer>img{display:block;max-width:100%;max-height:100%;margin:0 auto;
+  will-change:transform;-webkit-user-drag:none;}
+.b3-image-viewer[open]{position:fixed;inset:0;z-index:100;display:flex;align-items:center;
+  justify-content:center;border-radius:0;background:var(--b3-color-canvas,#f6f5f0);}
+.b3-image-viewer[open]>img{max-width:100vw;max-height:100vh;}
+.b3-image-viewer[data-b3-pannable]{cursor:grab;}
+.b3-image-viewer[data-b3-zoomed]{cursor:grabbing;}
+.b3-image-viewer>.b3-image-viewer-close,.b3-image-viewer>.b3-image-viewer-fit{position:absolute;
+  z-index:1;top:var(--b3-space,1rem);border:1px solid var(--b3-color-border,#d5dbd3);
+  border-radius:var(--b3-radius,.75rem);background:var(--b3-color-surface,#fff);
+  color:var(--b3-color-text,#202923);font:inherit;line-height:1;padding:.5rem .75rem;cursor:pointer;
+  min-height:44px;min-width:44px;}
+.b3-image-viewer>.b3-image-viewer-close{inset-inline-end:var(--b3-space,1rem);}
+.b3-image-viewer>.b3-image-viewer-fit{inset-inline-start:var(--b3-space,1rem);}
+`;
+function ensureStyle(document) {
+  if (document.getElementById(STYLE_ID))
+    return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = STYLE;
+  document.head.append(style);
+}
+
+class B3ImageViewer extends HTMLElement {
+  static observedAttributes = ["src", "alt", "max-scale", "open"];
+  #scale = 1;
+  #tx = 0;
+  #ty = 0;
+  #overflows = false;
+  #base = null;
+  #pointers = new Map;
+  #didGesture = false;
+  #gestureEndedAt = 0;
+  #lastTap = 0;
+  #lastTapX = 0;
+  #lastTapY = 0;
+  #upgraded = false;
+  #controller = null;
+  #observer = null;
+  #wired = new WeakSet;
+  #source = null;
+  get scale() {
+    return this.#scale;
+  }
+  get fitted() {
+    return this.#scale <= FIT;
+  }
+  get src() {
+    return this.#source ?? this.getAttribute("src");
+  }
+  set src(value) {
+    if (value && typeof value === "object") {
+      this.#source = value.src ?? value.default ?? String(value);
+    } else {
+      this.#source = null;
+      if (value == null)
+        this.removeAttribute("src");
+      else
+        this.setAttribute("src", value);
+    }
+    this.#syncImage();
+  }
+  get alt() {
+    return this.getAttribute("alt") ?? "";
+  }
+  set alt(value) {
+    this.setAttribute("alt", value ?? "");
+  }
+  get maxScale() {
+    const value = Number(this.getAttribute("max-scale"));
+    return value >= 1 ? value : 8;
+  }
+  set maxScale(value) {
+    this.setAttribute("max-scale", String(value));
+  }
+  get open() {
+    return this.hasAttribute("open");
+  }
+  set open(value) {
+    this.toggleAttribute("open", Boolean(value));
+  }
+  connectedCallback() {
+    if (this.#upgraded)
+      return;
+    this.#upgraded = true;
+    ensureStyle(this.ownerDocument);
+    this.classList.add("b3-image-viewer");
+    if (!this.hasAttribute("tabindex"))
+      this.tabIndex = 0;
+    if (!this.hasAttribute("role"))
+      this.setAttribute("role", "group");
+    this.#nameHost();
+    this.#syncImage();
+    this.#listen();
+    this.#observer = new MutationObserver(() => {
+      this.#ensureChrome();
+      this.#apply();
+    });
+    this.#observer.observe(this, { childList: true });
+    this.#ensureChrome();
+    this.#apply();
+  }
+  disconnectedCallback() {
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#observer?.disconnect();
+    this.#observer = null;
+    for (const id of this.#pointers.keys())
+      if (this.hasPointerCapture?.(id))
+        this.releasePointerCapture(id);
+    this.#pointers.clear();
+    this.#base = null;
+    this.#didGesture = false;
+    this.#upgraded = false;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next)
+      return;
+    if (name === "src") {
+      this.#syncImage();
+      this.reset();
+    }
+    if (name === "alt") {
+      const image = this.#content();
+      if (image)
+        image.alt = this.alt;
+      this.#nameHost();
+    }
+    if (name === "open") {
+      this.#ensureChrome();
+      this.reset();
+      if (this.open)
+        this.focus({ preventScroll: true });
+    }
+    if (name === "max-scale" && this.#scale > this.maxScale)
+      this.zoomTo(this.maxScale);
+  }
+  #content() {
+    return this.querySelector(":scope > img, :scope > svg, :scope > canvas");
+  }
+  #syncImage() {
+    let image = this.#content();
+    const source = this.src;
+    let created = false;
+    if (!image && source) {
+      image = this.ownerDocument.createElement("img");
+      created = true;
+      this.prepend(image);
+    }
+    if (!image)
+      return;
+    if (source && image.tagName === "IMG" && image.getAttribute("src") !== source)
+      image.setAttribute("src", source);
+    if (image.tagName === "IMG" && (created || this.hasAttribute("alt")))
+      image.alt = this.alt;
+    this.#nameHost();
+    if (image.tagName === "IMG")
+      this.#watch(image);
+  }
+  #nameHost() {
+    if (this.hasAttribute("aria-labelledby"))
+      return;
+    const name = this.getAttribute("alt");
+    if (name)
+      this.setAttribute("aria-label", name);
+    else if (!this.hasAttribute("aria-label"))
+      this.setAttribute("aria-label", "Zoomable image");
+  }
+  #watch(image) {
+    if (this.#wired.has(image))
+      return;
+    this.#wired.add(image);
+    image.addEventListener("load", () => {
+      this.removeAttribute("data-b3-error");
+      this.reset();
+    });
+    image.addEventListener("error", () => this.#fail(image));
+    if (image.complete && image.naturalWidth === 0 && image.getAttribute("src"))
+      setTimeout(() => {
+        if (image.isConnected && image.complete && image.naturalWidth === 0)
+          this.#fail(image);
+      }, 0);
+  }
+  #fail(image) {
+    if (this.hasAttribute("data-b3-error"))
+      return;
+    this.setAttribute("data-b3-error", "");
+    this.dispatchEvent(new CustomEvent("b3-error", {
+      bubbles: true,
+      composed: true,
+      detail: { src: image.getAttribute("src") ?? this.src ?? null }
+    }));
+  }
+  #ensureChrome() {
+    if (!this.open) {
+      for (const node of this.querySelectorAll(":scope > .b3-image-viewer-close"))
+        node.remove();
+      return;
+    }
+    if (this.querySelector(":scope > .b3-image-viewer-close"))
+      return;
+    const close = this.ownerDocument.createElement("button");
+    close.type = "button";
+    close.className = "b3-image-viewer-close";
+    close.setAttribute("aria-label", "Close");
+    close.textContent = "×";
+    close.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.requestClose();
+    });
+    close.addEventListener("pointerdown", (event) => event.stopPropagation());
+    this.append(close);
+  }
+  #measure() {
+    const element = this.#content();
+    if (!element)
+      return null;
+    const saved = element.style.transform;
+    element.style.transform = "none";
+    const viewport = this.getBoundingClientRect();
+    const content = element.getBoundingClientRect();
+    element.style.transform = saved;
+    this.#overflows = content.width > viewport.width + 1 || content.height > viewport.height + 1;
+    return {
+      element,
+      vw: viewport.width,
+      vh: viewport.height,
+      x: content.left - viewport.left,
+      y: content.top - viewport.top,
+      w: content.width,
+      h: content.height
+    };
+  }
+  #clamp(box) {
+    if (this.#scale <= FIT && !this.#overflows) {
+      this.#tx = 0;
+      this.#ty = 0;
+      return;
+    }
+    const w = box.w * this.#scale, h = box.h * this.#scale;
+    this.#tx = w <= box.vw ? (box.vw - w) / 2 - box.x : Math.min(-box.x, Math.max(-box.x - (w - box.vw), this.#tx));
+    this.#ty = h <= box.vh ? (box.vh - h) / 2 - box.y : Math.min(-box.y, Math.max(-box.y - (h - box.vh), this.#ty));
+  }
+  #apply(box) {
+    const element = box?.element ?? this.#content();
+    if (!element)
+      return;
+    const fitted = this.#scale <= FIT;
+    const pannable = !fitted || this.#overflows;
+    element.style.transformOrigin = "0 0";
+    element.style.transform = fitted && !this.#tx && !this.#ty ? "" : `translate(${this.#tx}px, ${this.#ty}px) scale(${this.#scale})`;
+    element.style.setProperty("--b3-zoom", this.#scale);
+    this.toggleAttribute("data-b3-zoomed", !fitted);
+    this.toggleAttribute("data-b3-pannable", pannable);
+    this.style.touchAction = pannable || this.open ? "none" : "pan-y";
+    const fit = this.querySelector(":scope > .b3-image-viewer-fit");
+    if (fit)
+      fit.hidden = fitted;
+  }
+  #zoomAbout(next, cx, cy, box = this.#measure()) {
+    if (!box)
+      return;
+    const before = this.#scale;
+    next = Math.max(1, Math.min(this.maxScale, next));
+    const ux = (cx - this.#tx) / this.#scale, uy = (cy - this.#ty) / this.#scale;
+    this.#tx = cx - ux * next;
+    this.#ty = cy - uy * next;
+    this.#scale = next;
+    this.#clamp(box);
+    this.#apply(box);
+    if (before !== this.#scale)
+      this.#emitZoom();
+  }
+  #emitZoom() {
+    this.dispatchEvent(new CustomEvent("b3-zoom", {
+      bubbles: true,
+      composed: true,
+      detail: { scale: this.#scale, fitted: this.fitted, src: this.src }
+    }));
+  }
+  reset() {
+    const changed = this.#scale !== 1;
+    this.#scale = 1;
+    this.#tx = 0;
+    this.#ty = 0;
+    const box = this.#measure();
+    if (box)
+      this.#clamp(box);
+    this.#apply(box);
+    if (changed)
+      this.#emitZoom();
+  }
+  zoomTo(next) {
+    const box = this.#measure();
+    if (box)
+      this.#zoomAbout(next, box.vw / 2, box.vh / 2, box);
+  }
+  requestClose() {
+    this.dispatchEvent(new CustomEvent("b3-close", { bubbles: true, composed: true, detail: { src: this.src } }));
+  }
+  #centroid() {
+    let x = 0, y = 0;
+    for (const point of this.#pointers.values()) {
+      x += point.x;
+      y += point.y;
+    }
+    return { x: x / this.#pointers.size, y: y / this.#pointers.size };
+  }
+  #spread() {
+    const [a, b] = [...this.#pointers.values()];
+    return Math.hypot(a.x - b.x, a.y - b.y);
+  }
+  #listen() {
+    this.#controller = new AbortController;
+    const options = { signal: this.#controller.signal };
+    const passive = { ...options, passive: false };
+    this.addEventListener("pointerdown", (event) => {
+      if (event.pointerType === "mouse" && event.button !== 0)
+        return;
+      if (!this.#content())
+        return;
+      this.#pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      this.#base = this.#measure();
+      if (this.#pointers.size > 1 || this.#scale > FIT || this.#overflows) {
+        this.setPointerCapture(event.pointerId);
+        event.preventDefault();
+      }
+    }, options);
+    this.addEventListener("pointermove", (event) => {
+      if (!this.#pointers.has(event.pointerId))
+        return;
+      const two = this.#pointers.size === 2;
+      if (!two && this.#scale <= FIT && !this.#overflows) {
+        this.#pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        return;
+      }
+      this.#base ??= this.#measure();
+      if (!this.#base)
+        return;
+      event.preventDefault();
+      const previousCentre = this.#centroid();
+      const previousSpread = two ? this.#spread() : 0;
+      this.#pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      const centre = this.#centroid();
+      const spread = two ? this.#spread() : 0;
+      const viewport = this.getBoundingClientRect();
+      const before = this.#scale;
+      const next = two && previousSpread > 0 ? Math.max(1, Math.min(this.maxScale, this.#scale * (spread / previousSpread))) : this.#scale;
+      const ux = (previousCentre.x - viewport.left - this.#tx) / this.#scale;
+      const uy = (previousCentre.y - viewport.top - this.#ty) / this.#scale;
+      this.#tx = centre.x - viewport.left - ux * next;
+      this.#ty = centre.y - viewport.top - uy * next;
+      this.#scale = next;
+      this.#clamp(this.#base);
+      this.#apply(this.#base);
+      this.#didGesture = true;
+      if (before !== this.#scale)
+        this.#emitZoom();
+    }, passive);
+    const release = (event) => {
+      if (!this.#pointers.delete(event.pointerId))
+        return;
+      if (this.hasPointerCapture?.(event.pointerId))
+        this.releasePointerCapture(event.pointerId);
+      if (this.#pointers.size) {
+        this.#base = this.#measure();
+        return;
+      }
+      this.#base = null;
+      if (this.#didGesture) {
+        this.#gestureEndedAt = performance.now();
+        this.#didGesture = false;
+        return;
+      }
+      if (event.type !== "pointerup")
+        return;
+      const now = performance.now();
+      const near = Math.hypot(event.clientX - this.#lastTapX, event.clientY - this.#lastTapY) < DOUBLE_TAP_SLOP;
+      if (now - this.#lastTap < DOUBLE_TAP_MS && near) {
+        this.#lastTap = 0;
+        const viewport = this.getBoundingClientRect();
+        this.#zoomAbout(this.#scale > FIT ? 1 : 2.5, event.clientX - viewport.left, event.clientY - viewport.top);
+        this.#gestureEndedAt = now;
+      } else {
+        this.#lastTap = now;
+        this.#lastTapX = event.clientX;
+        this.#lastTapY = event.clientY;
+      }
+    };
+    this.addEventListener("pointerup", release, options);
+    this.addEventListener("pointercancel", release, options);
+    this.addEventListener("click", (event) => {
+      if (event.target.closest?.(".b3-image-viewer-close, .b3-image-viewer-fit"))
+        return;
+      if (performance.now() - this.#gestureEndedAt < CLICK_SWALLOW_MS) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      if (this.open && this.fitted && event.target === this)
+        this.requestClose();
+    }, { ...options, capture: true });
+    this.addEventListener("wheel", (event) => {
+      const viewport = this.getBoundingClientRect();
+      if (event.ctrlKey) {
+        event.preventDefault();
+        this.#zoomAbout(this.#scale * Math.exp(-event.deltaY / 180), event.clientX - viewport.left, event.clientY - viewport.top);
+        return;
+      }
+      const box = this.#measure();
+      if (!box || box.h * this.#scale <= box.vh && !this.#overflows)
+        return;
+      const before = this.#ty;
+      this.#ty -= event.deltaY;
+      this.#clamp(box);
+      if (this.#ty === before)
+        return;
+      event.preventDefault();
+      this.#apply(box);
+    }, passive);
+    for (const type of ["gesturestart", "gesturechange", "gestureend"])
+      this.addEventListener(type, (event) => event.preventDefault(), passive);
+    this.addEventListener("keydown", (event) => {
+      if (event.metaKey || event.altKey)
+        return;
+      const step = event.shiftKey ? 80 : 40;
+      const pan = (dx, dy) => {
+        const box = this.#measure();
+        if (!box || this.fitted)
+          return false;
+        this.#tx += dx;
+        this.#ty += dy;
+        this.#clamp(box);
+        this.#apply(box);
+        return true;
+      };
+      switch (event.key) {
+        case "+":
+        case "=":
+          this.zoomTo(this.#scale * 1.5);
+          break;
+        case "-":
+        case "_":
+          this.zoomTo(this.#scale / 1.5);
+          break;
+        case "0":
+          this.reset();
+          break;
+        case "Enter":
+        case " ":
+          this.zoomTo(this.fitted ? 2.5 : 1);
+          break;
+        case "Escape":
+          if (!this.open)
+            return;
+          this.requestClose();
+          break;
+        case "ArrowLeft":
+          if (!pan(step, 0))
+            return;
+          break;
+        case "ArrowRight":
+          if (!pan(-step, 0))
+            return;
+          break;
+        case "ArrowUp":
+          if (!pan(0, step))
+            return;
+          break;
+        case "ArrowDown":
+          if (!pan(0, -step))
+            return;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+    }, options);
+    this.ownerDocument.defaultView.addEventListener("resize", () => {
+      const box = this.#measure();
+      if (box) {
+        this.#clamp(box);
+        this.#apply(box);
+      }
+    }, options);
+  }
+}
+var unused = B3ImageViewer;
+function define(name = "b3-image-viewer") {
+  const existing = customElements.get(name);
+  if (existing)
+    return existing;
+  const constructor = unused;
+  unused = class extends B3ImageViewer {
+  };
+  customElements.define(name, constructor);
+  return constructor;
+}
+define();
+export {
+  B3ImageViewer,
+  define
+};

package/dist/manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.0-alpha.34",
+  "version": "0.1.0-alpha.35",
   "cssSha256": "b75401967cdd0259eddaf99fb81b78c466d531451278410df3cb8b9e0978ae62",
   "classes": [
     "b3-accordion",
@@ -452,6 +452,7 @@
     "cross-screen.md",
     "editable-filtered-rows.md",
     "icons.md",
+    "image-viewer.md",
     "motion.md",
     "scroll-entry.md",
     "start.md"

package/dist/references/image-viewer.md

@@ -0,0 +1,66 @@
+# Image viewer element
+
+`<b3-image-viewer>` is an opt-in custom element for the one interaction markup and CSS cannot
+carry: pinch-zoom, pan and double-tap on an image. It is not part of `ui.js`; import it only on
+pages that need it.
+
+```html
+<link rel="stylesheet" href="@livx.cc/bare-v3/css">
+<script type="module" src="@livx.cc/bare-v3/elements/image-viewer"></script>
+
+<!-- Without the module this is just the <img>, at its natural size. -->
+<b3-image-viewer alt="Site plan" max-scale="8" style="height:320px">
+  <img src="/plan.png" alt="Site plan">
+</b3-image-viewer>
+```
+
+Light DOM, no shadow root: bare.css tokens, `data-b3-theme` and your own selectors all reach
+inside. Always author the `<img>` yourself — that child is the degraded experience.
+
+## API
+
+| Attribute | Meaning |
+| --- | --- |
+| `src` | Image source; also settable as a property when a framework hands you an object. |
+| `alt` | Forwarded to the image, and used as the host's accessible name. |
+| `max-scale` | Ceiling for zoom. Default `8`; a value below `1` is ignored. The floor is always fit. |
+| `open` | Presence renders a full-screen overlay with a close button. |
+
+Properties: `scale` and `fitted` (read-only), `src`, `alt`, `maxScale`, `open`.
+Methods: `reset()`, `zoomTo(scale)`, `requestClose()`.
+Events: `b3-zoom` (`detail: { scale, fitted, src }`), `b3-close`, and `b3-error`
+(`detail: { src }`) when the image fails to load. All are plain bubbling `CustomEvent`s, so they
+work without a framework wrapper. A failed image also sets `data-b3-error` on the host, so a
+fallback can be pure CSS.
+
+The host is `role="group"`, focusable, and named from `alt` (falling back to `Zoomable image`);
+pass your own `aria-label` or `aria-labelledby` to override. An image the element creates for you
+always gets an `alt`, empty when the host has none.
+
+### Another tag name
+
+`import { define } from '@livx.cc/bare-v3/elements/image-viewer'` and call `define('my-viewer')`.
+The default tag registers on import; each further name gets its own subclass, so naming is free.
+Styling follows the `b3-image-viewer` class the element adds to itself, not the tag, so a renamed
+viewer looks the same.
+
+The element never closes itself: `b3-close` is a request, and the owner removes `open`. That keeps
+the overlay's visibility wherever the app's state already lives.
+
+## Gestures
+
+Pinch to zoom around the fingers' midpoint, one finger to pan once there is somewhere to pan,
+double-tap to toggle fit and 2.5x, ctrl+wheel to zoom about the cursor, plain wheel to pan.
+Keyboard: `+`/`-` zoom, `0` refits, arrows pan, `Enter` toggles, `Escape` requests close.
+
+While fitted, `touch-action` stays `pan-y` so a one-finger drag still scrolls the page; it becomes
+`none` only once the image can actually move.
+
+## Frameworks
+
+Vue 3 binds and listens natively — `:src`, `:open="open || null"`, `@b3-zoom` — once
+`app.config.compilerOptions.isCustomElement` accepts the `b3-` prefix.
+
+React 18 has no custom-element property or event support. Attach listeners on a ref, and pass
+`open={isOpen ? '' : undefined}`: React 18 stringifies `open={false}` into `open="false"`, which is
+a *present* attribute and therefore an open overlay. React 19 removes both caveats.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.34",
+  "version": "0.1.0-alpha.35",
   "type": "module",
   "files": [
     "dist",
@@ -11,7 +11,8 @@
     "./css/min": "./dist/bare.min.css",
     "./manifest": "./dist/manifest.json",
     "./references/*": "./dist/references/*",
-    "./ui": "./dist/ui.js"
+    "./ui": "./dist/ui.js",
+    "./elements/image-viewer": "./dist/elements/image-viewer.js"
   },
   "scripts": {
     "build": "bun scripts/build.ts",