@nldd/design-system 0.8.49 → 0.8.51

package/dist/components/content/image/lqip-encoder-element.js

@@ -0,0 +1,240 @@
+/**
+ * Storybook UI element wrapping `encodeLqip()` in a file-picker. Kept in a
+ * separate module from the pure encoder so consumers importing just the
+ * functions (e.g. a Node build pipeline) don't accidentally register the
+ * `nldd-lqip-encoder` custom element into their registry.
+ *
+ * Intentionally NOT exported from `src/components/index.ts` — this is a
+ * developer tool, not a design-system component.
+ */
+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 { customElement, property, state } from 'lit/decorators.js';
+import { encodeLqip } from './lqip-encoder.js';
+import './image.js';
+/* --------------------------------------------------------------------- *
+ *  i18n
+ * --------------------------------------------------------------------- */
+export const nlddLqipEncoderTranslations = {
+    'components.lqip-encoder.upload-label': 'Kies een afbeelding',
+    'components.lqip-encoder.file-prefix-text': 'Bestand:',
+    'components.lqip-encoder.copy-instruction-text': 'Kopieer deze waarde naar je lqip attribuut:',
+    'components.lqip-encoder.preview-heading-text': 'Visuele controle:',
+    'components.lqip-encoder.preview-lqip-label': 'LQIP placeholder',
+    'components.lqip-encoder.preview-image-label': 'Originele afbeelding',
+};
+/* --------------------------------------------------------------------- *
+ *  Element
+ * --------------------------------------------------------------------- */
+let NLDDLqipEncoder = class NLDDLqipEncoder extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.translations = {};
+        this._lqip = null;
+        this._imageUrl = '';
+        this._filename = '';
+        this._aspectRatio = '16/9';
+        this._error = '';
+        this._handleFileChange = async (e) => {
+            const input = e.target;
+            const file = input.files?.[0];
+            if (!file)
+                return;
+            this._error = '';
+            try {
+                // Free the previous object URL before allocating a new one.
+                if (this._imageUrl)
+                    URL.revokeObjectURL(this._imageUrl);
+                this._imageUrl = URL.createObjectURL(file);
+                this._filename = file.name;
+                // Decode once to read dimensions for the comparison preview, then
+                // reuse the bitmap for the actual encode so the file isn't decoded
+                // twice. We pass an ImageBitmap (not the File) so encodeLqip treats
+                // it as caller-owned and won't close it — hence the try/finally
+                // here closes it ourselves, including when encodeLqip throws.
+                const bitmap = await createImageBitmap(file);
+                try {
+                    this._aspectRatio = `${bitmap.width}/${bitmap.height}`;
+                    this._lqip = await encodeLqip(bitmap);
+                }
+                finally {
+                    bitmap.close();
+                }
+            }
+            catch (err) {
+                this._error = err instanceof Error ? err.message : String(err);
+                this._lqip = null;
+            }
+        };
+    }
+    _t(key) {
+        return this.translations[key] ?? nlddLqipEncoderTranslations[key];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._imageUrl)
+            URL.revokeObjectURL(this._imageUrl);
+    }
+    render() {
+        return html `
+			<div>
+				<label class="encoder__upload-label">
+					${this._t('components.lqip-encoder.upload-label')}
+					<input class="encoder__upload-input"
+						type="file"
+						accept="image/*"
+						@change=${this._handleFileChange}
+					>
+				</label>
+			</div>
+			${this._error ? html `<div class="encoder__error" role="alert">${this._error}</div>` : ''}
+			${this._lqip !== null ? html `
+				<div class="encoder__result">
+					<div>${this._t('components.lqip-encoder.file-prefix-text')} <strong>${this._filename}</strong></div>
+					<div>${this._t('components.lqip-encoder.copy-instruction-text')}</div>
+					<div class="encoder__code">lqip="${this._lqip}"</div>
+				</div>
+				<div class="encoder__preview">
+					<div>${this._t('components.lqip-encoder.preview-heading-text')}</div>
+					<div class="encoder__preview-pair">
+						<div class="encoder__preview-item">
+							<nldd-image
+								alt=${this._t('components.lqip-encoder.preview-lqip-label')}
+								aspect-ratio=${this._aspectRatio}
+								lqip=${this._lqip}
+							></nldd-image>
+							<span class="encoder__preview-item-label">${this._t('components.lqip-encoder.preview-lqip-label')}</span>
+						</div>
+						<div class="encoder__preview-item">
+							<nldd-image
+								src=${this._imageUrl}
+								alt=${this._filename}
+								aspect-ratio=${this._aspectRatio}
+								lqip=${this._lqip}
+							></nldd-image>
+							<span class="encoder__preview-item-label">${this._t('components.lqip-encoder.preview-image-label')}</span>
+						</div>
+					</div>
+				</div>
+			` : ''}
+		`;
+    }
+};
+NLDDLqipEncoder.styles = css `
+		:host {
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			gap: var(--primitives-space-16);
+			padding: var(--primitives-space-16);
+			border: var(--primitives-border-width-thin) solid var(--semantics-content-secondary-color);
+			border-radius: var(--primitives-corner-radius-md);
+			background-color: var(--semantics-surfaces-background-color);
+			color: var(--semantics-content-color);
+			font: var(--primitives-font-body-md-regular-snug);
+		}
+
+		.encoder__upload-label {
+			display: inline-block;
+			padding: var(--primitives-space-8) var(--primitives-space-16);
+			border-radius: var(--primitives-corner-radius-md);
+			background-color: var(--semantics-buttons-accent-filled-background-color);
+			color: var(--semantics-buttons-accent-filled-content-color);
+			cursor: pointer;
+			font: var(--primitives-font-body-md-regular-snug);
+		}
+
+		/* The native <input type="file"> is visually hidden but still focusable;
+		   reflect its focus state on the surrounding label so keyboard users
+		   see where focus is. Same focus-ring tokens the rest of the design
+		   system uses on buttons. */
+		.encoder__upload-label:focus-within {
+			outline: var(--semantics-focus-ring-outline);
+			outline-offset: var(--semantics-focus-ring-outline-offset);
+			box-shadow: var(--semantics-focus-ring-box-shadow);
+		}
+
+		.encoder__upload-input {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			overflow: hidden;
+			clip-path: inset(50%);
+			white-space: nowrap;
+		}
+
+		.encoder__result {
+			display: flex;
+			flex-direction: column;
+			gap: var(--primitives-space-8);
+		}
+
+		.encoder__code {
+			padding: var(--primitives-space-8) var(--primitives-space-12);
+			border-radius: var(--primitives-corner-radius-sm);
+			background-color: var(--semantics-surfaces-tinted-background-color);
+			font: var(--primitives-font-monospace-sm-regular-snug);
+			user-select: all;
+			word-break: break-all;
+		}
+
+		.encoder__preview {
+			display: flex;
+			flex-direction: column;
+			gap: var(--primitives-space-8);
+		}
+
+		.encoder__preview-pair {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: var(--primitives-space-16);
+			max-width: calc(var(--primitives-area-480) * 2 + var(--primitives-space-16));
+		}
+
+		.encoder__preview-item {
+			display: flex;
+			flex-direction: column;
+			gap: var(--primitives-space-4);
+			min-width: 0;
+		}
+
+		.encoder__preview-item-label {
+			font: var(--primitives-font-body-sm-regular-tight);
+			color: var(--semantics-content-secondary-color);
+		}
+
+		.encoder__error {
+			color: var(--semantics-content-color);
+			background-color: var(--components-banner-critical-background-color);
+			padding: var(--primitives-space-8) var(--primitives-space-12);
+			border-radius: var(--primitives-corner-radius-sm);
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], NLDDLqipEncoder.prototype, "translations", void 0);
+__decorate([
+    state()
+], NLDDLqipEncoder.prototype, "_lqip", void 0);
+__decorate([
+    state()
+], NLDDLqipEncoder.prototype, "_imageUrl", void 0);
+__decorate([
+    state()
+], NLDDLqipEncoder.prototype, "_filename", void 0);
+__decorate([
+    state()
+], NLDDLqipEncoder.prototype, "_aspectRatio", void 0);
+__decorate([
+    state()
+], NLDDLqipEncoder.prototype, "_error", void 0);
+NLDDLqipEncoder = __decorate([
+    customElement('nldd-lqip-encoder')
+], NLDDLqipEncoder);
+export { NLDDLqipEncoder };
+//# sourceMappingURL=lqip-encoder-element.js.map

package/dist/components/content/image/lqip-encoder-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lqip-encoder-element.js","sourceRoot":"","sources":["../../../../src/components/content/image/lqip-encoder-element.ts"],"names":[],"mappings":"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"}

package/dist/components/content/image/lqip-encoder.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Encoder for the CSS-only multi-color LQIP technique used by nldd-image.
+ *
+ * Takes an image (File, ImageBitmap, or HTMLImageElement) and returns the
+ * comma-separated string the `lqip` attribute expects:
+ *
+ *   "base,c1,c2,c3,c4,c5,c6"
+ *
+ * — seven 0-255 bytes, each packing an 8-bit Oklab triplet (2 bits L,
+ * 3 bits a, 3 bits b). The first byte is the base color shown behind /
+ * outside the cell gradients; the other six are per-cell colors laid out
+ * row-major in a 3×2 grid (c1 top-left, c6 bottom-right).
+ *
+ * Inspired by Lean Rada's CSS-only LQIP technique
+ * (https://leanrada.com/notes/css-only-lqip/) but intentionally
+ * incompatible with his wire format: his 20-bit packed integer carries
+ * only grayscale per cell, whereas this 56-bit CSV carries one quantized
+ * Oklab color per cell so multi-hue subjects survive the placeholder.
+ * Decoder lives in image.styles.ts and renders 7 background layers
+ * (6 radial-gradient cells + base) natively, no JS / blend modes.
+ *
+ * This module is intentionally pure — no Lit imports, no custom-element
+ * registration side effects. Consumers (Node build pipelines, Workers,
+ * tests) can import just the encoder without dragging in the Storybook
+ * UI. The file-picker UI lives in `lqip-encoder-element.ts` and registers
+ * `<nldd-lqip-encoder>` separately.
+ */
+/**
+ * Pure LQIP encoder. Operates on a raw RGBA pixel buffer (no DOM, no Node
+ * APIs) so the same function can be called from a browser, a Node script,
+ * a Worker, or any other runtime.
+ *
+ * Returns a comma-separated string `"base,c1,c2,c3,c4,c5,c6"` where each
+ * value is an integer 0-255 packing 2 bits L + 3 bits a + 3 bits b. The
+ * `nldd-image` component parses this string into seven CSS variables; its
+ * decoder turns each one back into an `oklab()` color.
+ *
+ * Buffer layout matches ImageData.data: 4 bytes per pixel in RGBA, row-major.
+ *
+ * Algorithm:
+ *   1. Per cell: linear-light average → Oklab → findOklabBits → packed byte.
+ *   2. Base: histogram-dominant linear-RGB → Oklab → findOklabBits → packed
+ *      byte. The base shows through cell-gradient transparent edges and
+ *      sets the placeholder's overall mood; the cells carry the per-zone
+ *      hue variation.
+ */
+export declare function encodePixelDataToLqip(data: Uint8ClampedArray | Uint8Array, width: number, height: number): string;
+/**
+ * Browser-friendly wrapper around `encodePixelDataToLqip`. Accepts a File
+ * (e.g. from <input type="file">), an HTMLImageElement, or an ImageBitmap;
+ * decodes it to pixels via the Canvas API; and forwards to the pure encoder.
+ *
+ * When passing an HTMLImageElement loaded from a different origin, set
+ * `img.crossOrigin = 'anonymous'` BEFORE assigning `src` — otherwise the
+ * underlying canvas read taints and throws a SecurityError. Files and
+ * same-origin ImageBitmaps are unaffected.
+ */
+export declare function encodeLqip(source: File | HTMLImageElement | ImageBitmap): Promise<string>;
+//# sourceMappingURL=lqip-encoder.d.ts.map

package/dist/components/content/image/lqip-encoder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lqip-encoder.d.ts","sourceRoot":"","sources":["../../../../src/components/content/image/lqip-encoder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAiLH;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,qBAAqB,CACpC,IAAI,EAAE,iBAAiB,GAAG,UAAU,EACpC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,GACZ,MAAM,CAoCR;AAED;;;;;;;;;GASG;AACH,wBAAsB,UAAU,CAAC,MAAM,EAAE,IAAI,GAAG,gBAAgB,GAAG,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,CAuB/F"}

package/dist/components/content/image/lqip-encoder.js

@@ -0,0 +1,279 @@
+/**
+ * Encoder for the CSS-only multi-color LQIP technique used by nldd-image.
+ *
+ * Takes an image (File, ImageBitmap, or HTMLImageElement) and returns the
+ * comma-separated string the `lqip` attribute expects:
+ *
+ *   "base,c1,c2,c3,c4,c5,c6"
+ *
+ * — seven 0-255 bytes, each packing an 8-bit Oklab triplet (2 bits L,
+ * 3 bits a, 3 bits b). The first byte is the base color shown behind /
+ * outside the cell gradients; the other six are per-cell colors laid out
+ * row-major in a 3×2 grid (c1 top-left, c6 bottom-right).
+ *
+ * Inspired by Lean Rada's CSS-only LQIP technique
+ * (https://leanrada.com/notes/css-only-lqip/) but intentionally
+ * incompatible with his wire format: his 20-bit packed integer carries
+ * only grayscale per cell, whereas this 56-bit CSV carries one quantized
+ * Oklab color per cell so multi-hue subjects survive the placeholder.
+ * Decoder lives in image.styles.ts and renders 7 background layers
+ * (6 radial-gradient cells + base) natively, no JS / blend modes.
+ *
+ * This module is intentionally pure — no Lit imports, no custom-element
+ * registration side effects. Consumers (Node build pipelines, Workers,
+ * tests) can import just the encoder without dragging in the Storybook
+ * UI. The file-picker UI lives in `lqip-encoder-element.ts` and registers
+ * `<nldd-lqip-encoder>` separately.
+ */
+/* --------------------------------------------------------------------- *
+ *  Encoder
+ *
+ *  Extends Lean Rada's CSS-only LQIP technique with per-cell color.
+ *  Lean's original format packs 6 × 2-bit grayscale cells + 1 × 8-bit
+ *  Oklab base color into 20 bits, then uses CSS blend modes to fake
+ *  multi-color from a grayscale payload. The cells can only modulate
+ *  the base's lightness — there is no actual hue variation across the
+ *  placeholder, so a photo with blue sky + warm lights collapses to "a
+ *  bit darker / a bit lighter than that one dominant blue".
+ *
+ *  This encoder gives every cell its own 8-bit Oklab triplet (2 bits L,
+ *  3 bits a, 3 bits b) — the same resolution Lean uses for his single
+ *  global base — plus an 8-bit base color for pixels outside the cell
+ *  gradients. Total payload: 7 × 8 = 56 bits, serialised as a
+ *  comma-separated string "base,c1,c2,c3,c4,c5,c6" (each int 0-255).
+ *
+ *  Trade-off: wire-incompatible with Lean's reference tool. In exchange
+ *  the CSS decoder is simpler (no blend modes), and the placeholder
+ *  carries genuine multi-hue information.
+ *
+ *  Key implementation choices:
+ *
+ *   1. Per cell: linear-light average → Oklab → findOklabBits. Same
+ *      brute-force scaled-Euclidean quantizer used for the base, applied
+ *      6 more times.
+ *
+ *   2. Base color: histogram-dominant Oklab bucket → findOklabBits.
+ *      The base shows through cell-gradient edges and outside the
+ *      gradient radii, so it sets the "overall mood" of the placeholder.
+ *
+ *   3. Linear-light averaging via a 256-entry LUT keeps per-cell mean
+ *      color photonically correct.
+ *
+ *  Pure entry point: `encodePixelDataToLqip(data, width, height)` →
+ *  string. Async `encodeLqip(source)` is a browser wrapper that gets
+ *  pixels via canvas getImageData. Node users can build their own
+ *  wrapper using sharp / pngjs / etc.
+ * --------------------------------------------------------------------- */
+/** sRGB byte (0-255) → linear-light (0-1) lookup table. Precomputed because
+ *  large images run this hundreds of thousands of times. */
+const SRGB_TO_LINEAR_LUT = new Float32Array(256);
+for (let i = 0; i < 256; i++) {
+    const n = i / 255;
+    SRGB_TO_LINEAR_LUT[i] = n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+}
+/** Linear-light RGB triplet (0-1 per channel) → Oklab. Same constants as the
+ *  spec, but skips the sRGB→linear step since the input is already linear. */
+function linearRgbToOklab(rl, gl, bl) {
+    const l = 0.4122214708 * rl + 0.5363325363 * gl + 0.0514459929 * bl;
+    const m = 0.2119034982 * rl + 0.6806995451 * gl + 0.1073969566 * bl;
+    const s = 0.0883024619 * rl + 0.2817188376 * gl + 0.6299787005 * bl;
+    const l_ = Math.cbrt(l), m_ = Math.cbrt(m), s_ = Math.cbrt(s);
+    return {
+        L: 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_,
+        a: 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_,
+        b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_,
+    };
+}
+function clamp(v, lo, hi) {
+    return Math.max(lo, Math.min(hi, v));
+}
+/** Decode an 8-bit color triplet (2 + 3 + 3 bits) back to the Oklab L/a/b
+ *  values the CSS decoder will reconstruct. Used by the brute-force quantizer
+ *  to evaluate candidates and by the cell encoder for the cell's own bits.
+ *
+ *  Per-byte L/a/b decoding matches Lean Rada's reference implementation
+ *  exactly — the same formulas produce the same colors. The overall wire
+ *  format is NOT interchangeable though: Lean packs 6 grayscale cells + a
+ *  single base color into one 20-bit integer; we ship 7 independent bytes
+ *  in a CSV string. So an individual byte can be decoded with either
+ *  decoder, but the LQIP attribute strings can't be swapped between tools. */
+function bitsToLab(ll, aaa, bbb) {
+    return {
+        L: (ll / 0b11) * 0.6 + 0.2,
+        a: (aaa / 0b1000) * 0.7 - 0.35,
+        b: ((bbb + 1) / 0b1000) * 0.7 - 0.35,
+    };
+}
+/** Find the 2 + 3 + 3 bit Oklab triplet whose decoded color is visually
+ *  closest to the target. Brute-forces all 256 combinations because the
+ *  search space is tiny and round-to-nearest under-performs near the
+ *  quantization boundaries.
+ *
+ *  Distance is *scaled* Euclidean: a/b are divided by sqrt(chroma) before
+ *  comparison so that vivid targets aren't crushed in favour of nearby
+ *  lower-chroma buckets that happen to have a smaller raw delta. Matches
+ *  Lean's reference implementation. */
+function findOklabBits(targetL, targetA, targetB) {
+    const targetChroma = Math.hypot(targetA, targetB);
+    const scaledTargetA = targetA / (1e-6 + Math.pow(targetChroma, 0.5));
+    const scaledTargetB = targetB / (1e-6 + Math.pow(targetChroma, 0.5));
+    let bestBits = [0, 0, 0];
+    let bestDifference = Infinity;
+    for (let lli = 0; lli <= 0b11; lli++) {
+        for (let aaai = 0; aaai <= 0b111; aaai++) {
+            for (let bbbi = 0; bbbi <= 0b111; bbbi++) {
+                const { L, a, b } = bitsToLab(lli, aaai, bbbi);
+                const chroma = Math.hypot(a, b);
+                const scaledA = a / (1e-6 + Math.pow(chroma, 0.5));
+                const scaledB = b / (1e-6 + Math.pow(chroma, 0.5));
+                const difference = Math.hypot(L - targetL, scaledA - scaledTargetA, scaledB - scaledTargetB);
+                if (difference < bestDifference) {
+                    bestDifference = difference;
+                    bestBits = [lli, aaai, bbbi];
+                }
+            }
+        }
+    }
+    return { ll: bestBits[0], aaa: bestBits[1], bbb: bestBits[2] };
+}
+/** Find the dominant color in the image by histogram bucketing in Oklab
+ *  space. Quantises every pixel into an 8×8×8 grid (512 buckets), then
+ *  returns the linear-RGB mean of the most-populated bucket.
+ *
+ *  Using "dominant" instead of "average" is what makes the placeholder pick
+ *  up the subject's color (sky blue, foliage green, the pier's amber
+ *  lights) rather than collapsing foreground and background into a muddy
+ *  midpoint. The bucket grid resolution is intentionally coarse so that
+ *  perceptually-similar tones share a bucket — fine quantization would
+ *  scatter near-identical pixels across many tiny buckets and lose the
+ *  dominance signal we want. */
+function findDominantColor(data, width, height) {
+    const L_BUCKETS = 8, A_BUCKETS = 8, B_BUCKETS = 8;
+    const TOTAL = L_BUCKETS * A_BUCKETS * B_BUCKETS;
+    const counts = new Uint32Array(TOTAL);
+    const sumR = new Float64Array(TOTAL);
+    const sumG = new Float64Array(TOTAL);
+    const sumB = new Float64Array(TOTAL);
+    const pixelCount = width * height;
+    for (let p = 0; p < pixelCount; p++) {
+        const i = p * 4;
+        const rl = SRGB_TO_LINEAR_LUT[data[i]];
+        const gl = SRGB_TO_LINEAR_LUT[data[i + 1]];
+        const bl = SRGB_TO_LINEAR_LUT[data[i + 2]];
+        const { L, a, b } = linearRgbToOklab(rl, gl, bl);
+        // L is roughly [0, 1]; a/b for sRGB stay roughly within [-0.4, 0.4].
+        const li = clamp(Math.floor(L * L_BUCKETS), 0, L_BUCKETS - 1);
+        const ai = clamp(Math.floor((a + 0.4) / 0.8 * A_BUCKETS), 0, A_BUCKETS - 1);
+        const bi = clamp(Math.floor((b + 0.4) / 0.8 * B_BUCKETS), 0, B_BUCKETS - 1);
+        const idx = li * A_BUCKETS * B_BUCKETS + ai * B_BUCKETS + bi;
+        counts[idx]++;
+        sumR[idx] += rl;
+        sumG[idx] += gl;
+        sumB[idx] += bl;
+    }
+    let bestIdx = 0, bestCount = 0;
+    for (let i = 0; i < TOTAL; i++) {
+        if (counts[i] > bestCount) {
+            bestCount = counts[i];
+            bestIdx = i;
+        }
+    }
+    const n = counts[bestIdx];
+    return { rl: sumR[bestIdx] / n, gl: sumG[bestIdx] / n, bl: sumB[bestIdx] / n };
+}
+/** Pack a quantized Oklab triplet into a single byte: 2 bits L (high), 3 bits
+ *  a, 3 bits b (low). Matches the format Lean uses for his global base
+ *  color, so the CSS decoder for each cell uses the same math as Lean's
+ *  base decoder — just one byte at a time, seven times. */
+function packLab(ll, aaa, bbb) {
+    return (ll << 6) | (aaa << 3) | bbb;
+}
+/**
+ * Pure LQIP encoder. Operates on a raw RGBA pixel buffer (no DOM, no Node
+ * APIs) so the same function can be called from a browser, a Node script,
+ * a Worker, or any other runtime.
+ *
+ * Returns a comma-separated string `"base,c1,c2,c3,c4,c5,c6"` where each
+ * value is an integer 0-255 packing 2 bits L + 3 bits a + 3 bits b. The
+ * `nldd-image` component parses this string into seven CSS variables; its
+ * decoder turns each one back into an `oklab()` color.
+ *
+ * Buffer layout matches ImageData.data: 4 bytes per pixel in RGBA, row-major.
+ *
+ * Algorithm:
+ *   1. Per cell: linear-light average → Oklab → findOklabBits → packed byte.
+ *   2. Base: histogram-dominant linear-RGB → Oklab → findOklabBits → packed
+ *      byte. The base shows through cell-gradient transparent edges and
+ *      sets the placeholder's overall mood; the cells carry the per-zone
+ *      hue variation.
+ */
+export function encodePixelDataToLqip(data, width, height) {
+    if (width < 3 || height < 2) {
+        throw new Error(`encodePixelDataToLqip: image must be at least 3×2, got ${width}×${height}`);
+    }
+    // Per-cell quantized Oklab bytes.
+    const cellBytes = [];
+    for (let cellRow = 0; cellRow < 2; cellRow++) {
+        const yStart = Math.floor(cellRow * height / 2);
+        const yEnd = Math.floor((cellRow + 1) * height / 2);
+        for (let cellCol = 0; cellCol < 3; cellCol++) {
+            const xStart = Math.floor(cellCol * width / 3);
+            const xEnd = Math.floor((cellCol + 1) * width / 3);
+            let cellR = 0, cellG = 0, cellB = 0, cellCount = 0;
+            for (let y = yStart; y < yEnd; y++) {
+                for (let x = xStart; x < xEnd; x++) {
+                    const i = (y * width + x) * 4;
+                    cellR += SRGB_TO_LINEAR_LUT[data[i]];
+                    cellG += SRGB_TO_LINEAR_LUT[data[i + 1]];
+                    cellB += SRGB_TO_LINEAR_LUT[data[i + 2]];
+                    cellCount++;
+                }
+            }
+            const { L, a, b } = linearRgbToOklab(cellR / cellCount, cellG / cellCount, cellB / cellCount);
+            const { ll, aaa, bbb } = findOklabBits(L, a, b);
+            cellBytes.push(packLab(ll, aaa, bbb));
+        }
+    }
+    // Base: dominant Oklab bucket → quantized byte.
+    const dom = findDominantColor(data, width, height);
+    const domLab = linearRgbToOklab(dom.rl, dom.gl, dom.bl);
+    const base = findOklabBits(domLab.L, domLab.a, domLab.b);
+    const baseByte = packLab(base.ll, base.aaa, base.bbb);
+    return [baseByte, ...cellBytes].join(',');
+}
+/**
+ * Browser-friendly wrapper around `encodePixelDataToLqip`. Accepts a File
+ * (e.g. from <input type="file">), an HTMLImageElement, or an ImageBitmap;
+ * decodes it to pixels via the Canvas API; and forwards to the pure encoder.
+ *
+ * When passing an HTMLImageElement loaded from a different origin, set
+ * `img.crossOrigin = 'anonymous'` BEFORE assigning `src` — otherwise the
+ * underlying canvas read taints and throws a SecurityError. Files and
+ * same-origin ImageBitmaps are unaffected.
+ */
+export async function encodeLqip(source) {
+    // When we create the bitmap from a File / HTMLImageElement we own its
+    // lifecycle and must close it. When the caller passes an ImageBitmap they
+    // own it (the Storybook encoder element, for one, reuses + closes its own),
+    // so we leave that case untouched.
+    const ownsBitmap = source instanceof File || source instanceof HTMLImageElement;
+    const bitmap = ownsBitmap ? await createImageBitmap(source) : source;
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            throw new Error('encodeLqip: could not acquire a 2D canvas context');
+        ctx.drawImage(bitmap, 0, 0);
+        const { data } = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+        return encodePixelDataToLqip(data, bitmap.width, bitmap.height);
+    }
+    finally {
+        // Close only the bitmap we allocated; never the caller's. Runs on the
+        // success path and on a thrown SecurityError / context failure.
+        if (ownsBitmap)
+            bitmap.close();
+    }
+}
+//# sourceMappingURL=lqip-encoder.js.map

package/dist/components/content/image/lqip-encoder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lqip-encoder.js","sourceRoot":"","sources":["../../../../src/components/content/image/lqip-encoder.ts"],"names":[],"mappings":"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"}

package/dist/components/content/rich-text/rich-text.d.ts

@@ -9,13 +9,22 @@
  *
  * @attr {string}  spacing  - Spacing between elements: 'flat' | 'tight' | 'snug' (default) | 'loose'
  * @attr {boolean} centered - Centers the main column inside the container; without it, content is left-aligned
+ * @attr {object}  translations - Override translation keys; unset keys fall back to Dutch
  */
 import { LitElement } from 'lit';
+import type { NLDDRichTextTranslations } from './rich-text.i18n.js';
 type Spacing = 'flat' | 'tight' | 'snug' | 'loose';
 export declare class NLDDRichText extends LitElement {
     spacing: Spacing;
     centered: boolean;
+    translations: Partial<NLDDRichTextTranslations>;
+    _t(key: keyof NLDDRichTextTranslations): string;
+    private _mutationObserver?;
+    private _resizeObserver?;
     createRenderRoot(): this;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _syncTables;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/content/rich-text/rich-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD,qBACa,YAAa,SAAQ,UAAU;IAE3C,OAAO,EAAE,OAAO,CAAU;IAG1B,QAAQ,UAAS;IAER,gBAAgB;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD"}
+{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAEpE,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAInD,qBACa,YAAa,SAAQ,UAAU;IAE3C,OAAO,EAAE,OAAO,CAAU;IAG1B,QAAQ,UAAS;IAGjB,YAAY,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAM;IAE9C,EAAE,CAAC,GAAG,EAAE,MAAM,wBAAwB,GAAG,MAAM;IAItD,OAAO,CAAC,iBAAiB,CAAC,CAAmB;IAC7C,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEhC,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAezB,oBAAoB,IAAI,IAAI;IAQrC,OAAO,CAAC,WAAW;CA+BnB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD"}

package/dist/components/content/rich-text/rich-text.i18n.d.ts

@@ -0,0 +1,5 @@
+export declare const nlddRichTextTranslations: {
+    'components.rich-text.table-scroll-label': string;
+};
+export type NLDDRichTextTranslations = typeof nlddRichTextTranslations;
+//# sourceMappingURL=rich-text.i18n.d.ts.map

package/dist/components/content/rich-text/rich-text.i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text.i18n.d.ts","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB;;CAEpC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,OAAO,wBAAwB,CAAC"}

package/dist/components/content/rich-text/rich-text.i18n.js

@@ -0,0 +1,4 @@
+export const nlddRichTextTranslations = {
+    'components.rich-text.table-scroll-label': 'Scrollbare tabel',
+};
+//# sourceMappingURL=rich-text.i18n.js.map

package/dist/components/content/rich-text/rich-text.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text.i18n.js","sourceRoot":"","sources":["../../../../src/components/content/rich-text/rich-text.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACvC,yCAAyC,EAAE,kBAAkB;CAC7D,CAAC"}