@anton-gustafsson/snapshot-core 0.0.2

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './snapshot-nav-list';
+export * from './snapshot-service';
+export * from './snapshot-storage';

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './snapshot-nav-list';
+export * from './snapshot-service';
+export * from './snapshot-storage';

package/dist/snapshot-nav-list.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+import type { SnapshotService } from './snapshot-service';
+export interface NavItem {
+    id: string;
+    label: string;
+    icon?: string;
+    route?: string;
+}
+export type SnapshotNavListVariant = 'list' | 'icon-only';
+/**
+ * Visual identity: a contact sheet. Every tile is a "frame" — numbered like a strip
+ * of negatives — because that's literally what a snapshot thumbnail is. All colors
+ * come from CSS custom properties (themeable) with sensible fallbacks derived from
+ * `currentColor`, so an unstyled host still looks intentional.
+ */
+export declare class SnapshotNavList extends LitElement {
+    static styles: import("lit").CSSResult;
+    items: NavItem[];
+    variant: SnapshotNavListVariant;
+    /** icon-only tile overlay: tint behind the title so it stays legible over any image. */
+    overlayTint: 'dark' | 'light' | 'none';
+    /** overlay tint strength, 0-1 */
+    overlayOpacity: number;
+    /** backdrop blur behind the title, in px */
+    overlayBlur: number;
+    /** icon-only only: 'bottom' is the caption strip (default), 'center' pins the frame number to the corner and centers a larger title. */
+    labelPosition: 'bottom' | 'center';
+    /** Defaults to the shared singleton — set your own instance (e.g. a namespaced or custom-storage SnapshotService) per <snapshot-nav-list> if needed. */
+    snapshotService: SnapshotService;
+    private thumbs;
+    private loadingIds;
+    /** In-flight dedup guard, separate from `loadingIds` (which is only for spinner display) so a repeat `loadThumb` call for an id already being fetched is a no-op. */
+    private fetchingIds;
+    private unsubscribe?;
+    private subscribeToService;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    updated(changed: Map<string, unknown>): void;
+    private loadThumb;
+    private get overlayStyle();
+    private select;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'snapshot-nav-list': SnapshotNavList;
+    }
+}

package/dist/snapshot-nav-list.js

@@ -0,0 +1,415 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { snapshotService as defaultSnapshotService } from './snapshot-service';
+/**
+ * Visual identity: a contact sheet. Every tile is a "frame" — numbered like a strip
+ * of negatives — because that's literally what a snapshot thumbnail is. All colors
+ * come from CSS custom properties (themeable) with sensible fallbacks derived from
+ * `currentColor`, so an unstyled host still looks intentional.
+ */
+export class SnapshotNavList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.variant = 'icon-only';
+        /** icon-only tile overlay: tint behind the title so it stays legible over any image. */
+        this.overlayTint = 'dark';
+        /** overlay tint strength, 0-1 */
+        this.overlayOpacity = 0.35;
+        /** backdrop blur behind the title, in px */
+        this.overlayBlur = 0;
+        /** icon-only only: 'bottom' is the caption strip (default), 'center' pins the frame number to the corner and centers a larger title. */
+        this.labelPosition = 'bottom';
+        /** Defaults to the shared singleton — set your own instance (e.g. a namespaced or custom-storage SnapshotService) per <snapshot-nav-list> if needed. */
+        this.snapshotService = defaultSnapshotService;
+        this.thumbs = new Map();
+        this.loadingIds = new Set();
+        /** In-flight dedup guard, separate from `loadingIds` (which is only for spinner display) so a repeat `loadThumb` call for an id already being fetched is a no-op. */
+        this.fetchingIds = new Set();
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      font-family: var(--snapshot-nav-list-font, inherit);
+      --frame-accent: var(--snapshot-nav-list-accent, #ff5a1f);
+    }
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--snapshot-nav-list-gap, 0.3rem);
+      counter-reset: frame;
+    }
+    li {
+      counter-increment: frame;
+      display: flex;
+      align-items: center;
+      gap: 0.7rem;
+      cursor: pointer;
+      padding: 0.45rem 0.55rem;
+      border-radius: var(--snapshot-nav-list-radius, 10px);
+    }
+    li:hover,
+    li:focus-visible {
+      background: color-mix(in srgb, currentColor 7%, transparent);
+      outline: none;
+    }
+    li:focus-visible .thumb-wrap {
+      outline: 2px solid var(--frame-accent);
+      outline-offset: 2px;
+    }
+
+    .thumb-wrap {
+      position: relative;
+      width: 160px;
+      height: 100px;
+      border-radius: var(--snapshot-nav-list-radius-sm, 7px);
+      flex-shrink: 0;
+      overflow: hidden;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
+    }
+    /* signature: registration-mark corners, like a photo mount */
+    .thumb-wrap::before,
+    .thumb-wrap::after {
+      content: '';
+      position: absolute;
+      width: 9px;
+      height: 9px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.15s ease;
+      z-index: 2;
+    }
+    .thumb-wrap::before {
+      top: 4px;
+      left: 4px;
+      border-top: 2px solid var(--frame-accent);
+      border-left: 2px solid var(--frame-accent);
+    }
+    .thumb-wrap::after {
+      bottom: 4px;
+      right: 4px;
+      border-bottom: 2px solid var(--frame-accent);
+      border-right: 2px solid var(--frame-accent);
+    }
+    li:hover .thumb-wrap::before,
+    li:hover .thumb-wrap::after,
+    li:focus-visible .thumb-wrap::before,
+    li:focus-visible .thumb-wrap::after {
+      opacity: 1;
+    }
+
+    .thumb {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    img.thumb {
+      object-fit: cover;
+      object-position: center;
+      background: transparent;
+    }
+    /* unexposed frame: fine diagonal hatch instead of a generic gradient blob */
+    .thumb-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: color-mix(in srgb, currentColor 7%, transparent);
+      background-image: repeating-linear-gradient(
+        135deg,
+        color-mix(in srgb, currentColor 16%, transparent) 0px,
+        color-mix(in srgb, currentColor 16%, transparent) 1.5px,
+        transparent 1.5px,
+        transparent 7px
+      );
+    }
+    .icon-lg {
+      font-size: 1.6rem;
+      opacity: 0.4;
+    }
+    .thumb-loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: color-mix(in srgb, currentColor 5%, transparent);
+    }
+    .spinner {
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      border: 2px solid color-mix(in srgb, currentColor 18%, transparent);
+      border-top-color: var(--frame-accent);
+      animation: snapshot-nav-list-spin 0.8s linear infinite;
+    }
+    @keyframes snapshot-nav-list-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation-duration: 2.4s;
+      }
+    }
+
+    /* tint/blur controls apply only to the image, via this scrim layered on top of it */
+    .image-overlay {
+      position: absolute;
+      inset: 0;
+      background: var(--overlay-bg, transparent);
+      backdrop-filter: blur(var(--overlay-blur, 0px));
+      -webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
+      pointer-events: none;
+    }
+    /* the overlay exists so icon-only's overlaid title stays legible — list
+       variant shows the label beside the thumb, not on top of it, so the
+       tint has nothing to do there. */
+    :host(:not([variant='icon-only'])) .image-overlay {
+      display: none;
+    }
+
+    .meta {
+      display: flex;
+      flex-direction: column;
+      gap: 0.15rem;
+      min-width: 0;
+    }
+    .frame-number {
+      font-family: var(--snapshot-nav-list-mono-font, ui-monospace, 'SF Mono', Menlo, monospace);
+      font-size: 0.65rem;
+      letter-spacing: 0.04em;
+      color: color-mix(in srgb, currentColor 55%, transparent);
+    }
+    .frame-number::before {
+      content: 'F' counter(frame, decimal-leading-zero);
+    }
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: inherit;
+      font-weight: 500;
+    }
+
+    /* list: a compact thumb reads better in a narrow sidebar than the grid's 160x100 */
+    :host([variant='list']) .thumb-wrap {
+      width: 108px;
+      height: 68px;
+    }
+
+    /* icon-only: contact-sheet grid, caption strip pinned to the bottom of each frame */
+    :host([variant='icon-only']) ul {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 0.6rem;
+    }
+    :host([variant='icon-only']) li {
+      position: relative;
+      width: var(--snapshot-nav-list-tile-width, 160px);
+      height: var(--snapshot-nav-list-tile-height, 100px);
+      padding: 0;
+      overflow: hidden;
+    }
+    :host([variant='icon-only']) .thumb-wrap {
+      width: 100%;
+      height: 100%;
+      border-radius: var(--snapshot-nav-list-radius, 10px);
+    }
+    :host([variant='icon-only']) .meta {
+      position: absolute;
+      inset: auto 0 0 0;
+      flex-direction: row;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 0.4rem;
+      padding: 0.4rem 0.5rem;
+      color: var(--overlay-text, #fff);
+    }
+    :host([variant='icon-only']) .label {
+      white-space: normal;
+    }
+    :host([variant='icon-only']) .frame-number {
+      color: color-mix(in srgb, currentColor 70%, transparent);
+      flex-shrink: 0;
+    }
+
+    /* label-position="center": frame number pinned to the corner, title big and centered */
+    :host([variant='icon-only'][label-position='center']) .meta {
+      inset: 0;
+      align-items: center;
+      justify-content: center;
+      padding: 0.6rem;
+    }
+    :host([variant='icon-only'][label-position='center']) .frame-number {
+      position: absolute;
+      top: 0.6rem;
+      left: 0.6rem;
+    }
+    :host([variant='icon-only'][label-position='center']) .label {
+      font-size: 1.15rem;
+      font-weight: 600;
+      text-align: center;
+    }
+  `; }
+    subscribeToService() {
+        this.unsubscribe?.();
+        this.unsubscribe = this.snapshotService.subscribe((id, url) => {
+            // Ignore captures for ids this list isn't showing — the service is
+            // often a shared singleton, so without this guard `thumbs` would grow
+            // forever with urls for every snapshot captured anywhere on the page,
+            // not just this list's own items.
+            if (!this.items.some((item) => item.id === id))
+                return;
+            if (url === null) {
+                this.thumbs.delete(id);
+            }
+            else {
+                this.thumbs.set(id, url);
+            }
+            this.requestUpdate();
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // No initial loadThumb() loop needed here — Lit always calls updated()
+        // with every reactive property (including `items`) marked changed after
+        // the first render, so the branch below covers it.
+        this.subscribeToService();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unsubscribe?.();
+    }
+    // Runs before render, so mutating `loadingIds` here lands in the *current*
+    // update instead of triggering Lit's "update scheduled from updated()"
+    // warning that came from doing this same flip inside updated().
+    willUpdate(changed) {
+        if (changed.has('items')) {
+            const ids = new Set(this.items.map((item) => item.id));
+            for (const id of this.thumbs.keys()) {
+                if (!ids.has(id))
+                    this.thumbs.delete(id);
+            }
+            for (const item of this.items) {
+                if (!this.thumbs.has(item.id) && !this.fetchingIds.has(item.id)) {
+                    this.loadingIds.add(item.id);
+                }
+            }
+        }
+    }
+    updated(changed) {
+        if (changed.has('snapshotService')) {
+            this.subscribeToService();
+        }
+        if (changed.has('items')) {
+            this.items.forEach((item) => this.loadThumb(item.id));
+        }
+    }
+    async loadThumb(id) {
+        if (this.thumbs.has(id) || this.fetchingIds.has(id))
+            return;
+        this.fetchingIds.add(id);
+        try {
+            const url = await this.snapshotService.get(id);
+            if (url)
+                this.thumbs.set(id, url);
+        }
+        catch (err) {
+            console.error(`snapshot-nav-list: failed to load thumbnail for "${id}"`, err);
+        }
+        finally {
+            this.fetchingIds.delete(id);
+            this.loadingIds.delete(id);
+            this.requestUpdate();
+        }
+    }
+    get overlayStyle() {
+        const blur = `${this.overlayBlur}px`;
+        if (this.overlayTint === 'none') {
+            return { '--overlay-bg': 'transparent', '--overlay-text': 'inherit', '--overlay-blur': blur };
+        }
+        const tintColor = this.overlayTint === 'light' ? '#fff' : '#000';
+        const bg = `color-mix(in srgb, ${tintColor} ${Math.round(this.overlayOpacity * 100)}%, transparent)`;
+        const text = this.overlayTint === 'light' ? '#111' : '#fff';
+        return { '--overlay-bg': bg, '--overlay-text': text, '--overlay-blur': blur };
+    }
+    select(item) {
+        this.dispatchEvent(new CustomEvent('nav-select', {
+            detail: { id: item.id, route: item.route },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const overlayStyle = this.overlayStyle;
+        return html `
+      <ul role="listbox">
+        ${this.items.map((item) => html `
+            <li
+              role="option"
+              aria-label=${item.label}
+              tabindex="0"
+              @click=${() => this.select(item)}
+              @keydown=${(e) => e.key === 'Enter' && this.select(item)}
+            >
+              <div class="thumb-wrap" part="frame">
+                ${this.thumbs.has(item.id)
+            ? html `<img class="thumb" part="thumb" src=${this.thumbs.get(item.id)} alt="" />`
+            : this.loadingIds.has(item.id)
+                ? html `<div class="thumb thumb-loading" part="thumb" aria-hidden="true">
+                        <span class="spinner" part="spinner"></span>
+                      </div>`
+                : html `<div class="thumb thumb-placeholder" part="thumb" aria-hidden="true">
+                        <span class="icon-lg">${item.icon ?? ''}</span>
+                      </div>`}
+                <div class="image-overlay" part="overlay" style=${styleMap(overlayStyle)}></div>
+              </div>
+              <div class="meta" part="meta">
+                <span class="frame-number" part="frame-number" aria-hidden="true"></span>
+                <span class="label" part="label">${item.label}</span>
+              </div>
+            </li>
+          `)}
+      </ul>
+    `;
+    }
+}
+__decorate([
+    property({ type: Array })
+], SnapshotNavList.prototype, "items", void 0);
+__decorate([
+    property({ reflect: true })
+], SnapshotNavList.prototype, "variant", void 0);
+__decorate([
+    property({ attribute: 'overlay-tint' })
+], SnapshotNavList.prototype, "overlayTint", void 0);
+__decorate([
+    property({ type: Number, attribute: 'overlay-opacity' })
+], SnapshotNavList.prototype, "overlayOpacity", void 0);
+__decorate([
+    property({ type: Number, attribute: 'overlay-blur' })
+], SnapshotNavList.prototype, "overlayBlur", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'label-position' })
+], SnapshotNavList.prototype, "labelPosition", void 0);
+__decorate([
+    property({ attribute: false })
+], SnapshotNavList.prototype, "snapshotService", void 0);
+__decorate([
+    state()
+], SnapshotNavList.prototype, "thumbs", void 0);
+__decorate([
+    state()
+], SnapshotNavList.prototype, "loadingIds", void 0);
+if (!customElements.get('snapshot-nav-list')) {
+    customElements.define('snapshot-nav-list', SnapshotNavList);
+}

package/dist/snapshot-service.d.ts

@@ -0,0 +1,52 @@
+import type { SnapshotStorage } from './snapshot-storage';
+export interface SnapshotServiceConfig {
+    /** Provide your own backend-backed implementation to persist across devices. */
+    storage?: SnapshotStorage;
+    /** html2canvas render scale. Lower = smaller/faster thumbnails. */
+    scale?: number;
+    /**
+     * Prepended to every id before it reaches storage (and to the cross-tab
+     * broadcast channel name). Namespaces multiple SnapshotService instances —
+     * or multiple apps on the same origin — sharing one storage backend so
+     * their keys and live-update notifications can't collide.
+     */
+    keyPrefix?: string;
+}
+/** `url` is null when the id was removed rather than (re)captured. */
+type Listener = (id: string, url: string | null) => void;
+export declare class SnapshotService {
+    private storage;
+    private scale;
+    private keyPrefix;
+    private channel;
+    private listeners;
+    constructor(config?: SnapshotServiceConfig);
+    /** Capture works on any element — a snapshot-nav-list item is one convention, not a requirement. */
+    capture(el: HTMLElement, id: string): Promise<string>;
+    get(id: string): Promise<string | null>;
+    /** Deletes a stored snapshot and notifies subscribers (this tab and others) that `id` is gone. */
+    remove(id: string): Promise<void>;
+    /**
+     * Announces a URL for `id` to subscribers (this tab and others) without
+     * touching storage. For a storage layer that resolves a fresher value
+     * asynchronously after `get()` already returned a cached one — e.g. a fast
+     * local cache in front of a slower authoritative database — call this once
+     * the slow read settles so any mounted <snapshot-nav-list> updates live.
+     */
+    publish(id: string, url: string): void;
+    /**
+     * Tells subscribers to drop their locally cached thumbnail for `id` and
+     * treat it as not-yet-loaded — without deleting anything from storage.
+     * Unlike `remove()`, the data is still there; the next `get()` will fetch
+     * it again. Useful when the underlying data changed out from under the
+     * cache (or, for a demo, to replay a loading state on demand).
+     */
+    invalidate(id: string): void;
+    subscribe(cb: Listener): () => boolean;
+    /** Releases the cross-tab BroadcastChannel. Call when this instance (a non-default, namespaced one) is no longer needed. */
+    close(): void;
+    private notify;
+}
+/** Default singleton (IndexedDB-backed). Replace with your own SnapshotService({ storage }) if you need a real backend. */
+export declare const snapshotService: SnapshotService;
+export {};

package/dist/snapshot-service.js

@@ -0,0 +1,128 @@
+import html2canvas from 'html2canvas';
+import { IndexedDbSnapshotStorage } from './snapshot-storage';
+const CONTENT_PADDING = 16;
+// Tracks keyPrefixes already claimed by a live SnapshotService instance, so
+// two instances that both forget to set one (or pick the same one) get a
+// loud warning instead of silently colliding on the same broadcast channel
+// and storage keys.
+const activeKeyPrefixes = new Set();
+/** So a container much bigger than its content (e.g. a full-page canvas with one small widget) doesn't capture as mostly empty space — crop to the actual children's bounding box, padded, instead of the whole element. */
+function getContentBounds(el) {
+    const full = { x: 0, y: 0, width: el.clientWidth, height: el.clientHeight };
+    // Ignore children that don't actually occupy visible space (display:none, or
+    // otherwise zero-size) — otherwise a single hidden sibling collapses the
+    // whole crop back to `full`, defeating the point of this function.
+    const children = Array.from(el.children).filter((child) => (child.offsetWidth > 0 || child.offsetHeight > 0) &&
+        getComputedStyle(child).display !== 'none');
+    if (children.length === 0)
+        return full;
+    // el.clientWidth/clientHeight are content-box (border excluded), but
+    // getBoundingClientRect() is border-box — offset by clientLeft/clientTop
+    // (the border width) so child positions line up with `full`'s coordinate
+    // space instead of drifting by the border width on a bordered container.
+    const elRect = el.getBoundingClientRect();
+    const originX = elRect.left + el.clientLeft;
+    const originY = elRect.top + el.clientTop;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const child of children) {
+        const r = child.getBoundingClientRect();
+        minX = Math.min(minX, r.left - originX);
+        minY = Math.min(minY, r.top - originY);
+        maxX = Math.max(maxX, r.right - originX);
+        maxY = Math.max(maxY, r.bottom - originY);
+    }
+    const x = Math.max(0, minX - CONTENT_PADDING);
+    const y = Math.max(0, minY - CONTENT_PADDING);
+    const width = Math.min(full.width - x, maxX - minX + CONTENT_PADDING * 2);
+    const height = Math.min(full.height - y, maxY - minY + CONTENT_PADDING * 2);
+    if (width <= 0 || height <= 0)
+        return full;
+    return { x, y, width, height };
+}
+export class SnapshotService {
+    constructor(config = {}) {
+        this.listeners = new Set();
+        this.storage = config.storage ?? new IndexedDbSnapshotStorage();
+        this.scale = config.scale ?? 0.4;
+        this.keyPrefix = config.keyPrefix ?? '';
+        if (activeKeyPrefixes.has(this.keyPrefix)) {
+            console.warn(`SnapshotService: another instance already uses keyPrefix "${this.keyPrefix}" — ` +
+                'their storage keys and cross-tab notifications will collide. Give each instance its own keyPrefix.');
+        }
+        activeKeyPrefixes.add(this.keyPrefix);
+        this.channel = new BroadcastChannel(`nav-snapshots:${this.keyPrefix}`);
+        this.channel.onmessage = (e) => {
+            const { id, url } = e.data;
+            this.listeners.forEach((l) => l(id, url));
+        };
+    }
+    /** Capture works on any element — a snapshot-nav-list item is one convention, not a requirement. */
+    async capture(el, id) {
+        const crop = getContentBounds(el);
+        const canvas = await html2canvas(el, {
+            scale: this.scale,
+            logging: false,
+            useCORS: true,
+            x: crop.x,
+            y: crop.y,
+            width: crop.width,
+            height: crop.height,
+        });
+        const blob = await new Promise((resolve, reject) => canvas.toBlob((b) => b
+            ? resolve(b)
+            : reject(new Error('SnapshotService: canvas.toBlob() returned null — the captured element likely contains tainted (cross-origin, no CORS headers) content, or has zero size.')), 'image/png'));
+        const url = await this.storage.save(this.keyPrefix + id, blob);
+        this.notify(id, url);
+        return url;
+    }
+    get(id) {
+        return this.storage.load(this.keyPrefix + id);
+    }
+    /** Deletes a stored snapshot and notifies subscribers (this tab and others) that `id` is gone. */
+    async remove(id) {
+        await this.storage.remove?.(this.keyPrefix + id);
+        this.notify(id, null);
+    }
+    /**
+     * Announces a URL for `id` to subscribers (this tab and others) without
+     * touching storage. For a storage layer that resolves a fresher value
+     * asynchronously after `get()` already returned a cached one — e.g. a fast
+     * local cache in front of a slower authoritative database — call this once
+     * the slow read settles so any mounted <snapshot-nav-list> updates live.
+     */
+    publish(id, url) {
+        this.notify(id, url);
+    }
+    /**
+     * Tells subscribers to drop their locally cached thumbnail for `id` and
+     * treat it as not-yet-loaded — without deleting anything from storage.
+     * Unlike `remove()`, the data is still there; the next `get()` will fetch
+     * it again. Useful when the underlying data changed out from under the
+     * cache (or, for a demo, to replay a loading state on demand).
+     */
+    invalidate(id) {
+        this.notify(id, null);
+    }
+    subscribe(cb) {
+        this.listeners.add(cb);
+        return () => this.listeners.delete(cb);
+    }
+    /** Releases the cross-tab BroadcastChannel. Call when this instance (a non-default, namespaced one) is no longer needed. */
+    close() {
+        this.channel.close();
+        this.listeners.clear();
+        activeKeyPrefixes.delete(this.keyPrefix);
+    }
+    // BroadcastChannel never delivers a message back to its own sender, so
+    // same-tab listeners have to be notified directly alongside the cross-tab
+    // post — kept as one method so `capture()` and `remove()` can't drift.
+    notify(id, url) {
+        this.channel.postMessage({ id, url });
+        this.listeners.forEach((l) => l(id, url));
+    }
+}
+/** Default singleton (IndexedDB-backed). Replace with your own SnapshotService({ storage }) if you need a real backend. */
+export const snapshotService = new SnapshotService();

package/dist/snapshot-storage.d.ts

@@ -0,0 +1,22 @@
+export interface SnapshotStorage {
+    save(id: string, blob: Blob): Promise<string>;
+    load(id: string): Promise<string | null>;
+    remove?(id: string): Promise<void>;
+}
+/**
+ * Default storage: browser-local IndexedDB. Does NOT sync across devices.
+ *
+ * Blobs are stored natively (IndexedDB supports them directly) instead of
+ * base64-encoding into a data URL — that would cost ~33% extra storage and
+ * an encode/decode pass on every save/render. Displayable URLs are minted
+ * via `URL.createObjectURL`, cached per id so a re-capture of the same id
+ * revokes its old URL instead of leaking one per capture.
+ */
+export declare class IndexedDbSnapshotStorage implements SnapshotStorage {
+    private objectUrls;
+    save(id: string, blob: Blob): Promise<string>;
+    load(id: string): Promise<string | null>;
+    remove(id: string): Promise<void>;
+    private mintObjectUrl;
+    private revoke;
+}

package/dist/snapshot-storage.js

@@ -0,0 +1,43 @@
+import { get, set, del } from 'idb-keyval';
+/**
+ * Default storage: browser-local IndexedDB. Does NOT sync across devices.
+ *
+ * Blobs are stored natively (IndexedDB supports them directly) instead of
+ * base64-encoding into a data URL — that would cost ~33% extra storage and
+ * an encode/decode pass on every save/render. Displayable URLs are minted
+ * via `URL.createObjectURL`, cached per id so a re-capture of the same id
+ * revokes its old URL instead of leaking one per capture.
+ */
+export class IndexedDbSnapshotStorage {
+    constructor() {
+        this.objectUrls = new Map();
+    }
+    async save(id, blob) {
+        await set(`snapshot:${id}`, blob);
+        return this.mintObjectUrl(id, blob);
+    }
+    async load(id) {
+        const cached = this.objectUrls.get(id);
+        if (cached)
+            return cached;
+        const blob = await get(`snapshot:${id}`);
+        return blob ? this.mintObjectUrl(id, blob) : null;
+    }
+    async remove(id) {
+        this.revoke(id);
+        await del(`snapshot:${id}`);
+    }
+    mintObjectUrl(id, blob) {
+        this.revoke(id);
+        const url = URL.createObjectURL(blob);
+        this.objectUrls.set(id, url);
+        return url;
+    }
+    revoke(id) {
+        const existing = this.objectUrls.get(id);
+        if (existing) {
+            URL.revokeObjectURL(existing);
+            this.objectUrls.delete(id);
+        }
+    }
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@anton-gustafsson/snapshot-core",
+  "version": "0.0.2",
+  "description": "A pluggable snapshot service that turns any DOM element into a stored, shareable image, plus an optional <snapshot-nav-list> web component to display them.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/anton-gustafsson/snapshot.git",
+    "directory": "packages/core"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "lit": "^3.2.0",
+    "html2canvas": "^1.4.1",
+    "idb-keyval": "^6.2.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.0"
+  }
+}