shaderfont 0.0.0-stage → 0.5.3

package/src/material-core.js

@@ -0,0 +1,161 @@
+import { clamp } from "./core.js";
+import { SHADER_PRESETS } from "./presets.js";
+
+export const MATERIAL_NOISE_SIZE = 32;
+export const MAX_MATERIAL_PIXELS = 65_536;
+const ids = new Map(SHADER_PRESETS.map(preset => [preset.name, preset.id]));
+const fract = value => value - Math.floor(value);
+function smooth(a, b, value) {
+  const t = clamp((value - a) / (b - a), 0, 1);
+  return t * t * (3 - 2 * t);
+}
+
+export function materialDimensions(width, height, resolution = 0.5) {
+  const w = Math.max(1, width), h = Math.max(1, height);
+  const ratio = Math.min(resolution, 512 / w, 256 / h, Math.sqrt(MAX_MATERIAL_PIXELS / (w * h)));
+  return { width: Math.max(1, Math.floor(w * ratio)), height: Math.max(1, Math.floor(h * ratio)) };
+}
+
+export function createMaterialNoise() {
+  const noise = new Uint8Array(MATERIAL_NOISE_SIZE ** 2);
+  for (let i = 0; i < noise.length; i++) {
+    let n = Math.imul(i ^ 0x68bc21eb, 0x27d4eb2d);
+    n ^= n >>> 15;
+    n = Math.imul(n, 0x85ebca6b);
+    n ^= n >>> 13;
+    noise[i] = n >>> 24;
+  }
+  return noise;
+}
+
+function noiseAt(data, u, v) {
+  const size = MATERIAL_NOISE_SIZE;
+  const x = fract(u) * size, y = fract(v) * size;
+  const ix = Math.floor(x), iy = Math.floor(y);
+  const fx = smooth(0, 1, fract(x)), fy = smooth(0, 1, fract(y));
+  const a = data[iy * size + ix] / 255;
+  const b = data[iy * size + (ix + 1) % size] / 255;
+  const c = data[((iy + 1) % size) * size + ix] / 255;
+  const d = data[((iy + 1) % size) * size + (ix + 1) % size] / 255;
+  return (a + (b - a) * fx) * (1 - fy) + (c + (d - c) * fx) * fy;
+}
+
+function signalAt(id, u, v, time, scale, aspect, noise) {
+  const x = u * aspect * 3 / scale, y = v * 3 / scale;
+  if (id === 2) {
+    const n = noiseAt(noise, x * 0.08 + time * 0.012, y * 0.08 - time * 0.023);
+    return n * 0.7 + noiseAt(noise, x * 0.19 + n * 0.04, y * 0.19 + time * 0.035) * 0.3;
+  }
+  if (id === 3) return 0.5 + (Math.sin(x * 2.2 + time) + Math.sin(y * 3.4 - time * 0.7)
+    + Math.sin((x + y) * 1.8 + Math.cos(time * 0.6) * 2)) / 6;
+  if (id === 4) {
+    const curtain = Math.sin(x * 2.8 + time * 0.35 + noiseAt(noise, x * 0.04, time * 0.01) * 3);
+    return 0.15 + Math.exp(-Math.abs(y - 1.5 - curtain * 0.7) * 2.1) * 0.7
+      + noiseAt(noise, x * 0.13 + time * 0.01, y * 0.06) * 0.15;
+  }
+  if (id === 5) {
+    const fx = fract(x * 2), fy = fract(y * 2);
+    const edge = Math.min(fx, 1 - fx, fy, 1 - fy);
+    const grid = 1 - smooth(0.01, 0.07, edge);
+    const pulse = 0.5 + 0.5 * Math.sin(x * 3.4 + y * 5.8 - time * 2);
+    return 0.28 + grid * 0.42 + pulse * 0.3;
+  }
+  if (id === 6) {
+    const n = noiseAt(noise, x * 0.055, y * 0.08 + time * 0.07);
+    const detail = noiseAt(noise, x * 0.12 + n * 0.05, y * 0.16 + time * 0.12);
+    return clamp(v * 0.6 + 0.3 + (n * 0.7 + detail * 0.3 - 0.5) * 1.5, 0, 1);
+  }
+  if (id === 7) return 0.5 + Math.sin(x * 2.1 + Math.sin(y * 2.8 + time) * 0.75 + time) * 0.22
+    + Math.sin(y * 4 - x * 0.6 - time * 0.8) * 0.18;
+  throw new RangeError("A procedural shader preset is required");
+}
+
+/** Mirrors the GLSL color kernel; text clipping remains the browser's job. */
+export function renderMaterialPixels(width, height, settings, output, noise = createMaterialNoise()) {
+  const id = ids.get(settings.shader);
+  if (!id || id < 2) throw new RangeError("A procedural shader preset is required");
+  if (output.length !== width * height * 4) throw new RangeError("Material output size does not match the surface");
+  const band = 0.08 + settings.softness * 0.4;
+  const time = settings.time * settings.speed;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const signal = clamp(signalAt(id, (x + 0.5) / width, (y + 0.5) / height,
+        time, settings.scale, settings.aspect, noise), 0, 1);
+      const ramp = smooth(0.5 - band, 0.5 + band, signal);
+      const first = ramp < 0.5 ? 0 : 1, second = first + 1;
+      const weight = ramp < 0.5 ? ramp * 2 : ramp * 2 - 1;
+      const brightness = 0.3 + 0.7 * signal;
+      const index = (y * width + x) * 4;
+      for (let c = 0; c < 3; c++) {
+        output[index + c] = Math.round((settings.colors[first][c] * (1 - weight)
+          + settings.colors[second][c] * weight) * brightness * 255);
+      }
+      output[index + 3] = 255;
+    }
+  }
+  return output;
+}
+
+export const MATERIAL_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+precision highp int;
+uniform highp sampler2D u_noise;
+uniform vec2 u_resolution;
+uniform float u_aspect;
+uniform float u_time;
+uniform float u_scale;
+uniform float u_softness;
+uniform int u_preset;
+uniform vec3 u_primary;
+uniform vec3 u_secondary;
+uniform vec3 u_accent;
+out vec4 fragColor;
+float noiseAt(vec2 uv) {
+  vec2 p = fract(uv) * 32.0;
+  ivec2 cell = ivec2(floor(p));
+  vec2 f = fract(p); f = f * f * (3.0 - 2.0 * f);
+  float a = texelFetch(u_noise, cell, 0).r;
+  float b = texelFetch(u_noise, ivec2((cell.x + 1) % 32, cell.y), 0).r;
+  float c = texelFetch(u_noise, ivec2(cell.x, (cell.y + 1) % 32), 0).r;
+  float d = texelFetch(u_noise, ivec2((cell.x + 1) % 32, (cell.y + 1) % 32), 0).r;
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+float signalAt(vec2 uv) {
+  float x = uv.x * u_aspect * 3.0 / u_scale;
+  float y = uv.y * 3.0 / u_scale;
+  float t = u_time;
+  if (u_preset == 2) {
+    float n = noiseAt(vec2(x * .08 + t * .012, y * .08 - t * .023));
+    return n * .7 + noiseAt(vec2(x * .19 + n * .04, y * .19 + t * .035)) * .3;
+  }
+  if (u_preset == 3) return .5 + (sin(x * 2.2 + t) + sin(y * 3.4 - t * .7)
+    + sin((x + y) * 1.8 + cos(t * .6) * 2.0)) / 6.0;
+  if (u_preset == 4) {
+    float curtain = sin(x * 2.8 + t * .35 + noiseAt(vec2(x * .04, t * .01)) * 3.0);
+    return .15 + exp(-abs(y - 1.5 - curtain * .7) * 2.1) * .7
+      + noiseAt(vec2(x * .13 + t * .01, y * .06)) * .15;
+  }
+  if (u_preset == 5) {
+    vec2 cell = fract(vec2(x, y) * 2.0);
+    float edge = min(min(cell.x, 1.0-cell.x), min(cell.y, 1.0-cell.y));
+    float grid = 1.0 - smoothstep(.01, .07, edge);
+    float pulse = .5 + .5 * sin(x * 3.4 + y * 5.8 - t * 2.0);
+    return .28 + grid * .42 + pulse * .3;
+  }
+  if (u_preset == 6) {
+    float n = noiseAt(vec2(x * .055, y * .08 + t * .07));
+    float detail = noiseAt(vec2(x * .12 + n * .05, y * .16 + t * .12));
+    return clamp(uv.y * .6 + .3 + (n * .7 + detail * .3 - .5) * 1.5, 0.0, 1.0);
+  }
+  return .5 + sin(x * 2.1 + sin(y * 2.8 + t) * .75 + t) * .22
+    + sin(y * 4.0 - x * .6 - t * .8) * .18;
+}
+void main() {
+  vec2 uv = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y) / u_resolution;
+  float signal = clamp(signalAt(uv), 0.0, 1.0);
+  float band = .08 + u_softness * .4;
+  float ramp = smoothstep(.5 - band, .5 + band, signal);
+  vec3 color = ramp < .5 ? mix(u_primary, u_secondary, ramp * 2.0)
+    : mix(u_secondary, u_accent, ramp * 2.0 - 1.0);
+  fragColor = vec4(color * (.3 + .7 * signal), 1.0);
+}`;

package/src/material-renderer.js

@@ -0,0 +1,52 @@
+import { createMaterialNoise, MATERIAL_NOISE_SIZE, MATERIAL_FRAGMENT_SHADER, renderMaterialPixels } from "./material-core.js";
+import { SHADER_PRESETS } from "./presets.js";
+import { createWebGLSurface, exportSurface, rendererError } from "./webgl-surface.js";
+
+export function createMaterialRenderer(kind, width, height, onContextLost) {
+  const noise = createMaterialNoise();
+  if (kind === "canvas2d") {
+    const canvas = document.createElement("canvas");
+    canvas.width = width; canvas.height = height;
+    const context = canvas.getContext("2d", { alpha: false });
+    if (!context) throw rendererError("CANVAS2D_UNAVAILABLE", "A Canvas 2D context is unavailable");
+    const image = context.createImageData(width, height);
+    return {
+      kind, canvas,
+      render(settings) {
+        renderMaterialPixels(width, height, settings, image.data, noise);
+        context.putImageData(image, 0, 0);
+        return exportSurface(canvas);
+      },
+      dispose() { canvas.width = canvas.height = 0; }
+    };
+  }
+  if (kind !== "webgl") throw rendererError("INVALID_RENDERER", `Unknown renderer: ${kind}`);
+  const surface = createWebGLSurface(width, height, MATERIAL_FRAGMENT_SHADER, onContextLost);
+  const { gl } = surface;
+  try {
+    surface.texture();
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, MATERIAL_NOISE_SIZE, MATERIAL_NOISE_SIZE, 0, gl.RED, gl.UNSIGNED_BYTE, noise);
+    if (gl.getError() !== gl.NO_ERROR) throw rendererError("WEBGL_TEXTURE_FAILED", "Material noise could not be uploaded");
+    gl.uniform1i(surface.uniform("u_noise"), 0);
+    gl.uniform2f(surface.uniform("u_resolution"), width, height);
+    const uniforms = Object.fromEntries(["aspect", "time", "scale", "softness", "preset", "primary", "secondary", "accent"]
+      .map(name => [name, surface.uniform(`u_${name}`)]));
+    return {
+      kind, canvas: surface.canvas, dispose: surface.dispose,
+      render(settings) {
+        const preset = SHADER_PRESETS.find(preset => preset.name === settings.shader);
+        if (!preset || preset.id < 2) throw rendererError("INVALID_MATERIAL", "A procedural material is required");
+        gl.uniform1i(uniforms.preset, preset.id);
+        gl.uniform1f(uniforms.aspect, settings.aspect);
+        gl.uniform1f(uniforms.time, settings.time * settings.speed);
+        gl.uniform1f(uniforms.scale, settings.scale);
+        gl.uniform1f(uniforms.softness, settings.softness);
+        for (const [index, name] of ["primary", "secondary", "accent"].entries()) gl.uniform3fv(uniforms[name], settings.colors[index]);
+        return surface.draw();
+      }
+    };
+  } catch (error) {
+    surface.dispose();
+    throw error;
+  }
+}

package/src/options.d.ts

@@ -0,0 +1,28 @@
+export type ShaderFontOptions = {
+  shader: 'none' | 'hologram' | 'noise' | 'plasma' | 'aurora' | 'cyber' | 'flame' | 'waves';
+  renderer: 'canvas2d' | 'webgl';
+  speed: number;
+  scale: number;
+  resolution: number;
+  softness: number;
+  dragEffect: 'none' | 'dissolve' | 'move' | 'shake' | 'elastic';
+  revealEffect: 'none' | 'burn';
+  revealMs: number;
+  revealIntervalMs: number;
+  primary: string;
+  secondary: string;
+  accent: string;
+  flow: 'reading' | 'ltr' | 'rtl' | 'random';
+  roughness: number;
+  dissolveMs: number;
+  restoreMs: number;
+};
+export const SHADER_FONT_DEFAULTS: Readonly<ShaderFontOptions>;
+export const SHADER_FONT_PALETTES: ReadonlyArray<Readonly<{
+  name: 'light' | 'dark'; label: string; primary: string; secondary: string; accent: string;
+}>>;
+export const SHADER_PRESETS: ReadonlyArray<Readonly<{ name: ShaderFontOptions['shader']; label: string; id: number }>>;
+export function parseShaderFontOptions(input?: unknown):
+  | { ok: true; value: ShaderFontOptions }
+  | { ok: false; error: string };
+export function shaderFontAttributes(options: ShaderFontOptions): Record<string, string>;

package/src/options.js

@@ -0,0 +1,75 @@
+import { SHADER_PRESETS } from "./presets.js";
+export { SHADER_PRESETS } from "./presets.js";
+
+/** Background choice is explicit; never guess a consumer's surrounding CSS. */
+export const SHADER_FONT_PALETTES = Object.freeze([
+  Object.freeze({ name: "light", label: "밝은 배경", primary: "#075985", secondary: "#9f1239", accent: "#5b21b6" }),
+  Object.freeze({ name: "dark", label: "어두운 배경", primary: "#69efff", secondary: "#ff946a", accent: "#fff4bd" })
+]);
+
+/** Persisted options contain values, never CSS expressions or arbitrary HTML. */
+export const SHADER_FONT_DEFAULTS = Object.freeze({
+  shader: "hologram",
+  renderer: "canvas2d",
+  speed: 1,
+  scale: 1,
+  resolution: 0.5,
+  softness: 0.35,
+  dragEffect: "dissolve",
+  revealEffect: "none",
+  revealMs: 1800,
+  revealIntervalMs: 5000,
+  primary: SHADER_FONT_PALETTES[0].primary,
+  secondary: SHADER_FONT_PALETTES[0].secondary,
+  accent: SHADER_FONT_PALETTES[0].accent,
+  flow: "reading",
+  roughness: 0.26,
+  dissolveMs: 2400,
+  restoreMs: 1800
+});
+
+const choices = {
+  shader: SHADER_PRESETS.map(preset => preset.name),
+  renderer: ["canvas2d", "webgl"],
+  dragEffect: ["none", "dissolve", "move", "shake", "elastic"],
+  revealEffect: ["none", "burn"],
+  flow: ["reading", "ltr", "rtl", "random"]
+};
+const numericLimits = {
+  roughness: [0, 0.48], dissolveMs: [200, 10000], restoreMs: [100, 10000],
+  speed: [0, 4], scale: [0.25, 4], resolution: [0.25, 1], softness: [0, 1],
+  revealMs: [200, 10000], revealIntervalMs: [0, 60000]
+};
+const attributeNames = {
+  dragEffect: "drag-effect", dissolveMs: "dissolve-ms", restoreMs: "restore-ms",
+  revealEffect: "reveal-effect", revealMs: "reveal-ms", revealIntervalMs: "reveal-interval-ms"
+};
+
+export function parseShaderFontOptions(input = {}) {
+  if (!input || typeof input !== "object" || Array.isArray(input)) {
+    return { ok: false, error: "OPTIONS_MUST_BE_AN_OBJECT" };
+  }
+  const value = {};
+  for (const [key, fallback] of Object.entries(SHADER_FONT_DEFAULTS)) {
+    const option = input[key] === undefined || input[key] === null ? fallback : input[key];
+    if (choices[key] && !choices[key].includes(option)) return { ok: false, error: `INVALID_${key}` };
+    if (["primary", "secondary", "accent"].includes(key)
+        && (typeof option !== "string" || !/^#[0-9a-f]{6}$/i.test(option))) {
+      return { ok: false, error: `INVALID_${key}` };
+    }
+    if (numericLimits[key]) {
+      const [minimum, maximum] = numericLimits[key];
+      if (typeof option !== "number" || !Number.isFinite(option) || option < minimum || option > maximum) {
+        return { ok: false, error: `INVALID_${key}` };
+      }
+    }
+    value[key] = option;
+  }
+  return { ok: true, value };
+}
+
+/** Input is the value of a successful parseShaderFontOptions result. */
+export function shaderFontAttributes(options) {
+  return Object.fromEntries(Object.keys(SHADER_FONT_DEFAULTS)
+    .map(key => [attributeNames[key] ?? key, String(options[key])]));
+}

package/src/paint-layout.js

@@ -0,0 +1,24 @@
+/** CSS slices one unbroken decoration strip across native inline fragments. */
+export function createPaintLayout(bounds, fragments, inline, direction = "ltr") {
+  const boxes = (inline ? fragments : [bounds]).filter(rect => rect.width > 0 && rect.height > 0);
+  const width = inline ? boxes.reduce((sum, rect) => sum + rect.width, 0) : bounds.width;
+  const height = inline ? boxes.reduce((maximum, rect) => Math.max(maximum, rect.height), 0) : bounds.height;
+  let offset = 0;
+  return { width, height, fragments: boxes.map(rect => {
+    const x = inline && direction === "rtl" ? width - offset - rect.width : offset;
+    if (inline) offset += rect.width;
+    return { left: rect.left, top: rect.top, width: rect.width, height: rect.height, x };
+  }) };
+}
+
+/** Preserve only intersections with actual selection rectangles, never a whole-host guess. */
+export function projectSelectionRects(layout, rects) {
+  return rects.flatMap(rect => layout.fragments.map(fragment => {
+    const left = Math.max(rect.left, fragment.left);
+    const top = Math.max(rect.top, fragment.top);
+    const right = Math.min(rect.right, fragment.left + fragment.width);
+    const bottom = Math.min(rect.bottom, fragment.top + fragment.height);
+    return { x: fragment.x + left - fragment.left, y: top - fragment.top,
+      width: right - left, height: bottom - top };
+  }).filter(region => region.width > 0.25 && region.height > 0.25));
+}

package/src/presets.js

@@ -0,0 +1,19 @@
+export const ShaderPreset = Object.freeze({
+  NONE: "none", HOLOGRAM: "hologram", NOISE: "noise", PLASMA: "plasma",
+  AURORA: "aurora", CYBER: "cyber", FLAME: "flame", WAVES: "waves"
+});
+
+export const SHADER_PRESETS = Object.freeze([
+  { name: "none", label: "없음 (일반 글자)", id: 0 },
+  { name: "hologram", label: "홀로그램", id: 1 },
+  { name: "noise", label: "노이즈", id: 2 },
+  { name: "plasma", label: "플라즈마", id: 3 },
+  { name: "aurora", label: "오로라", id: 4 },
+  { name: "cyber", label: "사이버", id: 5 },
+  { name: "flame", label: "불꽃", id: 6 },
+  { name: "waves", label: "물결", id: 7 }
+].map(Object.freeze));
+
+export function isProceduralShader(name) {
+  return SHADER_PRESETS.some(preset => preset.name === name && preset.id >= 2);
+}

package/src/reveal-core.js

@@ -0,0 +1,69 @@
+import { clamp, createErosionField } from "./core.js";
+
+/** intervalMs is fully-visible waiting time; zero means a single reveal. */
+export function revealSample(elapsedMs, durationMs, intervalMs) {
+  if (![elapsedMs, durationMs, intervalMs].every(Number.isFinite)
+      || elapsedMs < 0 || durationMs <= 0 || intervalMs < 0) {
+    throw new RangeError("Reveal timing must be finite and nonnegative with a positive duration");
+  }
+  if (intervalMs === 0 && elapsedMs >= durationMs) {
+    return { phase: "complete", progress: 1, remainingMs: 0 };
+  }
+  const cycle = durationMs + intervalMs;
+  const local = intervalMs === 0 ? elapsedMs : elapsedMs % cycle;
+  if (local >= durationMs) return { phase: "holding", progress: 1, remainingMs: cycle - local };
+  return { phase: "burning", progress: local / durationMs, remainingMs: durationMs - local };
+}
+
+export function createRevealField(width, height, seed) {
+  return { width, height, thresholds: createErosionField(width, height, { seed }), feather: 0.012, edge: 0.085 };
+}
+
+function smooth(value) {
+  const t = clamp(value, 0, 1);
+  return t * t * (3 - 2 * t);
+}
+
+/** Stable noise reveals more pixels as progress grows; only the frontier glows. */
+export function renderRevealPixels(field, progress, edgeOnly, output) {
+  const { thresholds, feather, edge } = field;
+  if (!Number.isFinite(progress)) throw new RangeError("Reveal progress must be finite");
+  const threshold = clamp(progress, 0, 1) * (1 + 2 * feather) - feather;
+  for (let index = 0; index < thresholds.length; index++) {
+    const distance = threshold - thresholds[index];
+    const coverage = progress <= 0 ? 0 : progress >= 1 ? 1 : smooth((distance + feather) / (2 * feather));
+    const heat = 1 - smooth(Math.max(0, distance) / edge);
+    const glow = edgeOnly && progress > 0 && progress < 1 ? coverage * heat : 0;
+    const offset = index * 4;
+    output[offset] = 255;
+    output[offset + 1] = edgeOnly ? Math.round(64 + 180 * heat) : 255;
+    output[offset + 2] = edgeOnly ? Math.round(12 + 175 * heat * heat) : 255;
+    output[offset + 3] = Math.round((edgeOnly ? glow : coverage) * 255);
+  }
+  return output;
+}
+
+export const REVEAL_FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+precision highp int;
+uniform highp sampler2D u_field;
+uniform int u_height;
+uniform float u_progress;
+uniform float u_feather;
+uniform float u_edge;
+uniform bool u_edge_only;
+out vec4 fragColor;
+void main() {
+  ivec2 pixel = ivec2(int(gl_FragCoord.x), u_height - 1 - int(gl_FragCoord.y));
+  float noise = texelFetch(u_field, pixel, 0).r;
+  float threshold = clamp(u_progress, 0.0, 1.0) * (1.0 + 2.0 * u_feather) - u_feather;
+  float distance = threshold - noise;
+  float coverage = u_progress <= 0.0 ? 0.0 : u_progress >= 1.0 ? 1.0
+    : smoothstep(-u_feather, u_feather, distance);
+  float heat = 1.0 - smoothstep(0.0, u_edge, max(0.0, distance));
+  float glow = u_progress > 0.0 && u_progress < 1.0 ? coverage * heat : 0.0;
+  fragColor = u_edge_only ? vec4(1.0, (64.0 + 180.0 * heat) / 255.0,
+    (12.0 + 175.0 * heat * heat) / 255.0, glow) : vec4(1.0, 1.0, 1.0, coverage);
+  // Match ImageData's byte quantization before exporting translucent PNG edges.
+  fragColor = floor(fragColor * 255.0 + 0.5) / 255.0;
+}`;

package/src/reveal-renderer.js

@@ -0,0 +1,64 @@
+import { REVEAL_FRAGMENT_SHADER, renderRevealPixels } from "./reveal-core.js";
+import { createWebGLSurface, exportSurface, rendererError } from "./webgl-surface.js";
+
+function canvasReveal(width, height) {
+  const canvas = document.createElement("canvas");
+  canvas.width = width; canvas.height = height;
+  const context = canvas.getContext("2d", { alpha: true });
+  if (!context) throw rendererError("CANVAS2D_UNAVAILABLE", "A Canvas 2D context is unavailable");
+  const image = context.createImageData(width, height);
+  function paint(field, progress, edgeOnly) {
+    renderRevealPixels(field, progress, edgeOnly, image.data);
+    context.putImageData(image, 0, 0);
+    return exportSurface(canvas);
+  }
+  return {
+    kind: "canvas2d", canvas,
+    render(field, progress) {
+      return { mask: paint(field, progress, false), edge: paint(field, progress, true) };
+    },
+    dispose() { canvas.width = canvas.height = 0; }
+  };
+}
+
+function webglReveal(width, height, onContextLost) {
+  const surface = createWebGLSurface(width, height, REVEAL_FRAGMENT_SHADER, onContextLost);
+  const { gl } = surface;
+  let uploadedField = null;
+  try {
+    surface.texture();
+    gl.uniform1i(surface.uniform("u_field"), 0);
+    gl.uniform1i(surface.uniform("u_height"), height);
+    const progressUniform = surface.uniform("u_progress");
+    const featherUniform = surface.uniform("u_feather");
+    const edgeUniform = surface.uniform("u_edge");
+    const edgeOnlyUniform = surface.uniform("u_edge_only");
+    function paint(edgeOnly) {
+      gl.uniform1i(edgeOnlyUniform, edgeOnly ? 1 : 0);
+      return surface.draw();
+    }
+    return {
+      kind: "webgl", canvas: surface.canvas, dispose: surface.dispose,
+      render(field, progress) {
+        if (uploadedField !== field) {
+          gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, width, height, 0, gl.RED, gl.FLOAT, field.thresholds);
+          if (gl.getError() !== gl.NO_ERROR) throw rendererError("WEBGL_TEXTURE_FAILED", "The reveal field could not be uploaded");
+          uploadedField = field;
+        }
+        gl.uniform1f(progressUniform, progress);
+        gl.uniform1f(featherUniform, field.feather);
+        gl.uniform1f(edgeUniform, field.edge);
+        return { mask: paint(false), edge: paint(true) };
+      }
+    };
+  } catch (error) {
+    surface.dispose();
+    throw error;
+  }
+}
+
+export function createRevealRenderer(kind, width, height, onContextLost) {
+  if (kind === "webgl") return webglReveal(width, height, onContextLost);
+  if (kind === "canvas2d") return canvasReveal(width, height);
+  throw rendererError("INVALID_RENDERER", `Unknown reveal renderer: ${kind}`);
+}

package/src/selection-gesture.js

@@ -0,0 +1,64 @@
+const documents = new WeakMap();
+const DRAG_THRESHOLD = 5;
+const capture = { capture: true };
+
+function selectionBounds(document) {
+  const selection = document.getSelection();
+  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return null;
+  const range = selection.getRangeAt(0);
+  return [range.startContainer, range.startOffset, range.endContainer, range.endOffset];
+}
+
+/** One capture-phase tracker per document, not one global listener per font. */
+export function observeSelectionDrag(document, onFinished) {
+  let tracker = documents.get(document);
+  if (!tracker) {
+    const listeners = new Set();
+    let pointer = null;
+    function getDrag() {
+      if (!pointer?.moved) return null;
+      const current = selectionBounds(document);
+      if (!current || pointer.selection?.every((value, index) => value === current[index])) return null;
+      return Object.freeze({ pointerId: pointer.id, startX: pointer.x, startY: pointer.y });
+    }
+    function down(event) {
+      if (event.button !== 0 || event.isPrimary === false) return;
+      pointer = { id: event.pointerId, x: event.clientX, y: event.clientY, moved: false, selection: selectionBounds(document) };
+    }
+    function move(event) {
+      if (pointer?.id !== event.pointerId) return;
+      pointer.moved ||= Math.hypot(event.clientX - pointer.x, event.clientY - pointer.y) >= DRAG_THRESHOLD;
+    }
+    function end(event) {
+      if (pointer?.id !== event.pointerId) return;
+      const drag = event.type === "pointerup" ? getDrag() : null;
+      pointer = null;
+      if (drag) for (const listener of listeners) listener(drag);
+    }
+    function blur() { pointer = null; }
+    const events = [["pointerdown", down], ["pointermove", move], ["pointerup", end], ["pointercancel", end]];
+    for (const [name, listener] of events) document.addEventListener(name, listener, capture);
+    document.defaultView?.addEventListener("blur", blur);
+    tracker = {
+      listeners, getDrag,
+      dispose() {
+        pointer = null;
+        for (const [name, listener] of events) document.removeEventListener(name, listener, capture);
+        document.defaultView?.removeEventListener("blur", blur);
+        documents.delete(document);
+      }
+    };
+    documents.set(document, tracker);
+  }
+  tracker.listeners.add(onFinished);
+  let disposed = false;
+  return {
+    getDrag: tracker.getDrag,
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      tracker.listeners.delete(onFinished);
+      if (tracker.listeners.size === 0) tracker.dispose();
+    }
+  };
+}

package/src/selection-indicator.js

@@ -0,0 +1,73 @@
+/** Native Range owns selection. This empty, non-interactive layer is never masked with glyphs. */
+export function createSelectionIndicator(owner, readRects, onError) {
+  let layer = null;
+  let frame = 0;
+  let previous = "";
+  const scrollOptions = { capture: true, passive: true };
+
+  function clear() {
+    if (frame) cancelAnimationFrame(frame);
+    frame = 0;
+    layer?.remove();
+    layer = null;
+    previous = "";
+    window.removeEventListener("scroll", schedule, scrollOptions);
+    window.removeEventListener("resize", schedule);
+  }
+
+  function schedule() {
+    if (frame) return;
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      try { update(readRects()); }
+      catch (error) { clear(); onError(error); }
+    });
+  }
+
+  function update(rects) {
+    const clip = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
+    let level = 1;
+    for (let parent = owner.parentElement; parent; parent = parent.parentElement) {
+      const computed = getComputedStyle(parent);
+      const z = Number.parseInt(computed.zIndex, 10);
+      if (Number.isFinite(z)) level = Math.max(level, z + 1);
+      if (![computed.overflowX, computed.overflowY].some(value => /^(hidden|clip|auto|scroll)$/.test(value))) continue;
+      const bounds = parent.getBoundingClientRect();
+      if (/^(hidden|clip|auto|scroll)$/.test(computed.overflowX)) {
+        clip.left = Math.max(clip.left, bounds.left);
+        clip.right = Math.min(clip.right, bounds.right);
+      }
+      if (/^(hidden|clip|auto|scroll)$/.test(computed.overflowY)) {
+        clip.top = Math.max(clip.top, bounds.top);
+        clip.bottom = Math.min(clip.bottom, bounds.bottom);
+      }
+    }
+    const visible = (rects ?? []).flatMap(rect => {
+      if (![rect.left, rect.top, rect.right, rect.bottom].every(Number.isFinite)) return [];
+      const left = Math.max(clip.left, rect.left), top = Math.max(clip.top, rect.top);
+      const right = Math.min(clip.right, rect.right), bottom = Math.min(clip.bottom, rect.bottom);
+      return right > left && bottom > top ? [{ left, top, width: right - left, height: bottom - top }] : [];
+    });
+    if (visible.length === 0) { clear(); return; }
+    const signature = JSON.stringify({ visible, level });
+    if (signature === previous) return;
+    previous = signature;
+    if (!layer) {
+      layer = document.createElement("div");
+      layer.className = "shaderfont-selection-indicator";
+      layer.setAttribute("aria-hidden", "true");
+      document.body.append(layer);
+      window.addEventListener("scroll", schedule, scrollOptions);
+      window.addEventListener("resize", schedule, { passive: true });
+    }
+    layer.style.zIndex = String(level);
+    layer.replaceChildren(...visible.map(rect => {
+      const fragment = document.createElement("span");
+      fragment.dataset.selectionRect = "true";
+      for (const [name, value] of Object.entries(rect)) fragment.style[name] = `${value}px`;
+      return fragment;
+    }));
+  }
+
+  return { update, clear };
+}

package/src/selection-range.js

@@ -0,0 +1,17 @@
+/** Selection stays native; each font reads only the intersecting text Range. */
+export function selectionWithin(element, document) {
+  const selection = document.getSelection();
+  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return null;
+  if (!selection.anchorNode || !selection.focusNode) return null;
+  const source = selection.getRangeAt(0);
+  if (element.contains(selection.anchorNode) && element.contains(selection.focusNode)) {
+    return { selection, range: source };
+  }
+  if (!source.intersectsNode(element)) return null;
+  const local = source.cloneRange();
+  local.selectNodeContents(element);
+  if (source.compareBoundaryPoints(0, local) > 0) local.setStart(source.startContainer, source.startOffset);
+  if (source.compareBoundaryPoints(2, local) < 0) local.setEnd(source.endContainer, source.endOffset);
+  if (local.collapsed || local.toString().length === 0) return null;
+  return { selection, range: local };
+}