react-native-webrtc-kaleidoscope 2.1.1 → 2.2.1

package/dist/web-driver/effects/composite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composite.d.ts","sourceRoot":"","sources":["../../../web-driver/effects/composite.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAiZ5D,KAAK,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC,CAAC,CAAC;AAGvE,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,OAAQ,MAAM,YAAY,UAAU,KAAG,IAEnE,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,QAAO,IAErC,CAAC;AASF,eAAO,MAAM,aAAa,WAAY,aAAa,CAAC,iBAAiB,CAAC,KAAG,cAgRxE,CAAC","sourcesContent":["// Web composite compositor: render a painter's stack of layers into one frame.\n//\n// This is the LAYERED path (distinct from the serial single-effect chain in\n// index.web.ts). A composite is one stage: layer 0 is the opaque base, later layers\n// blend over it in array order. Each layer is `{ shader, target?, blend? }`:\n//   - shader 'image'  : a still texture (cover-fit), premultiplied.\n//   - shader 'direct' : passthrough of its channel. On 'subject' that is the\n//     masked camera person; on 'background' it is the raw camera fullscreen.\n//   - shader 'blur'   : a camera-sampling separable gaussian (its `sigma` uniform).\n//   - a generative shader (e.g. 'godrays') : render its frag with `uniforms`.\n//   - target defaults to 'background' (fullscreen); 'subject' stencils to the mask.\n//\n// Two pixel sources: camera-sampling layers ('direct', 'blur') read the live\n// frame; content-generating layers ('image', generative) make their own pixels.\n// `target` decides the stencil for either: a 'background' layer draws fullscreen;\n// a 'subject' layer is multiplied by the mask alpha so it shows only over the\n// segmented person. Direct/subject takes a one-pass fast path (cam x mask); every\n// other subject layer renders to a scratch texture and a masked-composite pass\n// stencils it. The mask edge is the shared mask() tuning, so the demo sliders\n// drive composites.\n\nimport type { KaleidoscopeLayer } from '../../src/kaleidoscope.preset-book.types';\nimport type { FrameTransform } from '../insertable-streams';\nimport { getLatestMask, loadSegmenter, requestMaskIfIdle } from '../segmenter';\nimport {\n  COMPOSITE_BLUR_FRAG_SRC,\n  COMPOSITE_CAMERA_FRAG_SRC,\n  COMPOSITE_IMAGE_FRAG_SRC,\n  COMPOSITE_MASKED_FRAG_SRC,\n  COMPOSITE_SUBJECT_FRAG_SRC,\n  PASSTHROUGH_VERT_SRC,\n} from '../shaders';\nimport { maskSmoothstepRange, tuning } from '../tuning';\nimport { LAYER_SHADER_SOURCES } from './layer-shaders';\n\n// The compositor primitives are single-sourced from catalog/shaders/_shared via\n// build:shaders, imported above: COMPOSITE_IMAGE_FRAG_SRC (cover-fit; also reused\n// for scratch blits, at cover scale or 1,1 for a 1:1 blit), COMPOSITE_SUBJECT_FRAG_SRC (the masked camera\n// person), COMPOSITE_MASKED_FRAG_SRC (stencil any layer to the subject), plus\n// COMPOSITE_CAMERA_FRAG_SRC and COMPOSITE_BLUR_FRAG_SRC. iOS carries one extra\n// blit variant (composite-blit) for its texture-origin parity; web reuses the\n// image shader for its blit.\n\ntype Uniform = number | readonly number[];\n\nconst compileShader = (gl: WebGL2RenderingContext, type: number, source: string): WebGLShader => {\n  const shader = gl.createShader(type);\n  if (!shader) throw new Error('kaleidoscope: gl.createShader returned null');\n  gl.shaderSource(shader, source);\n  gl.compileShader(shader);\n  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n    const log = gl.getShaderInfoLog(shader) ?? '(no info log)';\n    gl.deleteShader(shader);\n    throw new Error(`kaleidoscope: composite shader compile failed: ${log}\\n---\\n${source}`);\n  }\n  return shader;\n};\n\nconst linkProgram = (\n  gl: WebGL2RenderingContext,\n  vertSrc: string,\n  fragSrc: string,\n): WebGLProgram => {\n  const vs = compileShader(gl, gl.VERTEX_SHADER, vertSrc);\n  const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragSrc);\n  const prog = gl.createProgram();\n  if (!prog) throw new Error('kaleidoscope: gl.createProgram returned null');\n  gl.attachShader(prog, vs);\n  gl.attachShader(prog, fs);\n  gl.linkProgram(prog);\n  gl.deleteShader(vs);\n  gl.deleteShader(fs);\n  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {\n    const log = gl.getProgramInfoLog(prog) ?? '(no info log)';\n    gl.deleteProgram(prog);\n    throw new Error(`kaleidoscope: composite program link failed: ${log}`);\n  }\n  return prog;\n};\n\nconst bindUniform = (\n  gl: WebGL2RenderingContext,\n  loc: WebGLUniformLocation | null,\n  value: Uniform,\n): void => {\n  if (loc == null) return;\n  if (typeof value === 'number') gl.uniform1f(loc, value);\n  else if (value.length === 2) gl.uniform2fv(loc, new Float32Array(value));\n  else if (value.length === 3) gl.uniform3fv(loc, new Float32Array(value));\n  else if (value.length === 4) gl.uniform4fv(loc, new Float32Array(value));\n  // An even length > 4 is a vec2 array (a polygon: flat [x0,y0, ...]).\n  else if (value.length % 2 === 0) gl.uniform2fv(loc, new Float32Array(value));\n};\n\nconst createTexture = (gl: WebGL2RenderingContext): WebGLTexture => {\n  const tex = gl.createTexture();\n  if (!tex) throw new Error('kaleidoscope: gl.createTexture returned null');\n  gl.bindTexture(gl.TEXTURE_2D, tex);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n  return tex;\n};\n\ntype Fbo = { tex: WebGLTexture; fbo: WebGLFramebuffer };\n\n// A render target sized to the frame: an RGBA texture with a framebuffer bound to\n// it, for the blur ping-pong and the subject-stencil scratch.\nconst createFbo = (gl: WebGL2RenderingContext, width: number, height: number): Fbo => {\n  const tex = createTexture(gl);\n  gl.bindTexture(gl.TEXTURE_2D, tex);\n  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);\n  const fbo = gl.createFramebuffer();\n  if (!fbo) throw new Error('kaleidoscope: gl.createFramebuffer returned null');\n  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);\n  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);\n  gl.bindFramebuffer(gl.FRAMEBUFFER, null);\n  return { tex, fbo };\n};\n\nconst uploadTexture = (\n  gl: WebGL2RenderingContext,\n  tex: WebGLTexture,\n  source: TexImageSource,\n  flipY: boolean,\n): void => {\n  gl.bindTexture(gl.TEXTURE_2D, tex);\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);\n  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);\n  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n};\n\n// --- image loading (cached per source URL) ---------------------------------\n\ntype LoadedImage = { canvas: OffscreenCanvas; width: number; height: number };\n\nconst imageCache = new Map<string, Promise<LoadedImage>>();\n\nconst loadImage = (source: string): Promise<LoadedImage> => {\n  const cached = imageCache.get(source);\n  if (cached) return cached;\n  const promise = (async (): Promise<LoadedImage> => {\n    const res = await fetch(source);\n    if (!res.ok) {\n      throw new Error(`kaleidoscope: composite image fetch failed (${res.status}) for ${source}`);\n    }\n    const blob = await res.blob();\n    const bitmap = await createImageBitmap(blob);\n    // Capture dimensions BEFORE close(): closing an ImageBitmap zeroes its\n    // width/height, and reading them after produced a 0x0 size that made the\n    // cover-fit UV scale NaN and smeared the texture.\n    const width = bitmap.width;\n    const height = bitmap.height;\n    // Stage onto a 2D canvas so UNPACK_FLIP_Y_WEBGL applies on upload (it is a\n    // no-op on ImageBitmap sources).\n    const canvas = new OffscreenCanvas(width, height);\n    const ctx = canvas.getContext('2d');\n    if (!ctx) throw new Error('kaleidoscope: composite image 2D context unavailable');\n    ctx.drawImage(bitmap, 0, 0);\n    bitmap.close();\n    return { canvas, width, height };\n  })();\n  imageCache.set(source, promise);\n  return promise;\n};\n\n// --- per-composite GL state (one composite active at a time) -----------------------\n\ntype ShaderLayerGpu = {\n  prog: WebGLProgram;\n  uTime: WebGLUniformLocation | null;\n  uResolution: WebGLUniformLocation | null;\n  uniforms: Map<string, WebGLUniformLocation | null>;\n};\n\ntype CameraGpu = {\n  prog: WebGLProgram;\n  uCamera: WebGLUniformLocation | null;\n  tex: WebGLTexture;\n};\n\ntype DirectSubjectGpu = {\n  prog: WebGLProgram;\n  uCamera: WebGLUniformLocation | null;\n  uMask: WebGLUniformLocation | null;\n  uMaskUvScale: WebGLUniformLocation | null;\n  uMaskUvOffset: WebGLUniformLocation | null;\n  uMaskLo: WebGLUniformLocation | null;\n  uMaskHi: WebGLUniformLocation | null;\n};\n\ntype BlurGpu = {\n  prog: WebGLProgram;\n  uTex: WebGLUniformLocation | null;\n  uDir: WebGLUniformLocation | null;\n  uSigma: WebGLUniformLocation | null;\n};\n\ntype MaskedGpu = {\n  prog: WebGLProgram;\n  uTex: WebGLUniformLocation | null;\n  uMask: WebGLUniformLocation | null;\n  uMaskUvScale: WebGLUniformLocation | null;\n  uMaskUvOffset: WebGLUniformLocation | null;\n  uMaskLo: WebGLUniformLocation | null;\n  uMaskHi: WebGLUniformLocation | null;\n};\n\ntype GpuState = {\n  gl: WebGL2RenderingContext;\n  canvas: OffscreenCanvas;\n  width: number;\n  height: number;\n  blit: {\n    prog: WebGLProgram;\n    uTex: WebGLUniformLocation | null;\n    uCoverScale: WebGLUniformLocation | null;\n  };\n  imageTextures: Map<string, { tex: WebGLTexture; width: number; height: number }>;\n  shaderPrograms: Map<string, ShaderLayerGpu>;\n  // Camera-sampling support: staged camera + its passthrough program. Present\n  // when any 'direct' or 'blur' layer is in the stack.\n  camera: CameraGpu | null;\n  // The segmentation mask texture. Present when any layer targets the subject.\n  maskTex: WebGLTexture | null;\n  // direct/subject one-pass fast path (cam x mask).\n  directSubject: DirectSubjectGpu | null;\n  // Separable blur program. Present when any 'blur' layer is in the stack.\n  blur: BlurGpu | null;\n  // Masked-composite (stencil any rendered layer to the subject). Present when a\n  // non-direct subject layer is in the stack.\n  masked: MaskedGpu | null;\n  // Scratch render targets: scratchA holds a layer's rendered content (and the\n  // blur's horizontal pass); scratchB holds the blur's vertical pass.\n  scratchA: Fbo | null;\n  scratchB: Fbo | null;\n  // Identity of the layer set this state was built for. Switching composites at the\n  // same resolution must rebuild (different shaders/targets, different programs).\n  layersSig: string;\n};\n\nlet state: GpuState | null = null;\n\nconst layersSignature = (layers: ReadonlyArray<KaleidoscopeLayer>): string =>\n  layers.map((l) => `${l.id}:${l.shader}:${l.target ?? 'background'}`).join('|');\n\nconst disposeState = (s: GpuState): void => {\n  const { gl } = s;\n  gl.deleteProgram(s.blit.prog);\n  for (const p of s.shaderPrograms.values()) gl.deleteProgram(p.prog);\n  for (const t of s.imageTextures.values()) gl.deleteTexture(t.tex);\n  if (s.camera) {\n    gl.deleteProgram(s.camera.prog);\n    gl.deleteTexture(s.camera.tex);\n  }\n  if (s.maskTex) gl.deleteTexture(s.maskTex);\n  if (s.directSubject) gl.deleteProgram(s.directSubject.prog);\n  if (s.blur) gl.deleteProgram(s.blur.prog);\n  if (s.masked) gl.deleteProgram(s.masked.prog);\n  for (const f of [s.scratchA, s.scratchB]) {\n    if (f) {\n      gl.deleteFramebuffer(f.fbo);\n      gl.deleteTexture(f.tex);\n    }\n  }\n};\n\n// Camera frame staged here for both texture upload (flipY actually applies on a\n// canvas source) and as the segmenter input.\nlet inputCanvas2D: OffscreenCanvas | null = null;\nlet inputCtx2D: OffscreenCanvasRenderingContext2D | null = null;\n\nconst ensureInputCanvas = (width: number, height: number): OffscreenCanvasRenderingContext2D => {\n  if (!inputCanvas2D || inputCanvas2D.width !== width || inputCanvas2D.height !== height) {\n    inputCanvas2D = new OffscreenCanvas(width, height);\n    inputCtx2D = inputCanvas2D.getContext('2d');\n    if (!inputCtx2D) throw new Error('kaleidoscope: composite input 2D context unavailable');\n  }\n  return inputCtx2D as OffscreenCanvasRenderingContext2D;\n};\n\nconst isCameraSampler = (shader: string): boolean => shader === 'direct' || shader === 'blur';\n\nconst ensureState = (\n  width: number,\n  height: number,\n  layers: ReadonlyArray<KaleidoscopeLayer>,\n): GpuState => {\n  const sig = layersSignature(layers);\n  if (state && state.width === width && state.height === height && state.layersSig === sig) {\n    return state;\n  }\n  const prevCanvas = state?.canvas;\n  if (state) disposeState(state);\n  const canvas = prevCanvas ?? new OffscreenCanvas(width, height);\n  canvas.width = width;\n  canvas.height = height;\n  const gl = canvas.getContext('webgl2');\n  if (!gl)\n    throw new Error('kaleidoscope: WebGL2 not available; composites require a WebGL2 browser');\n\n  const needsCamera = layers.some((l) => isCameraSampler(l.shader));\n  const needsMask = layers.some((l) => l.target === 'subject');\n  const hasDirectSubject = layers.some((l) => l.shader === 'direct' && l.target === 'subject');\n  const hasGenericSubject = layers.some((l) => l.shader !== 'direct' && l.target === 'subject');\n  const hasBlur = layers.some((l) => l.shader === 'blur');\n\n  const blitProg = linkProgram(gl, PASSTHROUGH_VERT_SRC, COMPOSITE_IMAGE_FRAG_SRC);\n\n  const shaderPrograms = new Map<string, ShaderLayerGpu>();\n  for (const layer of layers) {\n    // Generative layers only: 'image'/'direct' carry no uniforms, and 'blur' has\n    // a sigma uniform but is not a generative frag (it runs the blur program).\n    if (!(layer.shader in LAYER_SHADER_SOURCES) || shaderPrograms.has(layer.shader)) continue;\n    if (!('uniforms' in layer)) continue;\n    const src = LAYER_SHADER_SOURCES[layer.shader];\n    if (!src) throw new Error(`kaleidoscope: unknown composite layer shader '${layer.shader}'`);\n    const prog = linkProgram(gl, PASSTHROUGH_VERT_SRC, src);\n    const uniforms = new Map<string, WebGLUniformLocation | null>();\n    for (const name of Object.keys(layer.uniforms)) {\n      uniforms.set(name, gl.getUniformLocation(prog, name));\n    }\n    shaderPrograms.set(layer.shader, {\n      prog,\n      uTime: gl.getUniformLocation(prog, 'uTime'),\n      uResolution: gl.getUniformLocation(prog, 'uResolution'),\n      uniforms,\n    });\n  }\n\n  let camera: CameraGpu | null = null;\n  if (needsCamera) {\n    const prog = linkProgram(gl, PASSTHROUGH_VERT_SRC, COMPOSITE_CAMERA_FRAG_SRC);\n    camera = { prog, uCamera: gl.getUniformLocation(prog, 'uCamera'), tex: createTexture(gl) };\n  }\n\n  const maskTex = needsMask ? createTexture(gl) : null;\n\n  let directSubject: DirectSubjectGpu | null = null;\n  if (hasDirectSubject) {\n    const prog = linkProgram(gl, PASSTHROUGH_VERT_SRC, COMPOSITE_SUBJECT_FRAG_SRC);\n    directSubject = {\n      prog,\n      uCamera: gl.getUniformLocation(prog, 'uCamera'),\n      uMask: gl.getUniformLocation(prog, 'uMask'),\n      uMaskUvScale: gl.getUniformLocation(prog, 'uMaskUvScale'),\n      uMaskUvOffset: gl.getUniformLocation(prog, 'uMaskUvOffset'),\n      uMaskLo: gl.getUniformLocation(prog, 'uMaskLo'),\n      uMaskHi: gl.getUniformLocation(prog, 'uMaskHi'),\n    };\n  }\n\n  let blur: BlurGpu | null = null;\n  if (hasBlur) {\n    const prog = linkProgram(gl, PASSTHROUGH_VERT_SRC, COMPOSITE_BLUR_FRAG_SRC);\n    blur = {\n      prog,\n      uTex: gl.getUniformLocation(prog, 'uTex'),\n      uDir: gl.getUniformLocation(prog, 'uDir'),\n      uSigma: gl.getUniformLocation(prog, 'uSigma'),\n    };\n  }\n\n  let masked: MaskedGpu | null = null;\n  if (hasGenericSubject) {\n    const prog = linkProgram(gl, PASSTHROUGH_VERT_SRC, COMPOSITE_MASKED_FRAG_SRC);\n    masked = {\n      prog,\n      uTex: gl.getUniformLocation(prog, 'uTex'),\n      uMask: gl.getUniformLocation(prog, 'uMask'),\n      uMaskUvScale: gl.getUniformLocation(prog, 'uMaskUvScale'),\n      uMaskUvOffset: gl.getUniformLocation(prog, 'uMaskUvOffset'),\n      uMaskLo: gl.getUniformLocation(prog, 'uMaskLo'),\n      uMaskHi: gl.getUniformLocation(prog, 'uMaskHi'),\n    };\n  }\n\n  // scratchA: any subject layer that renders content, or the blur horizontal\n  // pass. scratchB: the blur vertical pass result.\n  const scratchA = hasGenericSubject || hasBlur ? createFbo(gl, width, height) : null;\n  const scratchB = hasBlur ? createFbo(gl, width, height) : null;\n\n  state = {\n    gl,\n    canvas,\n    width,\n    height,\n    blit: {\n      prog: blitProg,\n      uTex: gl.getUniformLocation(blitProg, 'uTex'),\n      uCoverScale: gl.getUniformLocation(blitProg, 'uCoverScale'),\n    },\n    imageTextures: new Map(),\n    shaderPrograms,\n    camera,\n    maskTex,\n    directSubject,\n    blur,\n    masked,\n    scratchA,\n    scratchB,\n    layersSig: sig,\n  };\n  return state;\n};\n\nconst coverScale = (outW: number, outH: number, imgW: number, imgH: number): [number, number] => {\n  const outAspect = outW / outH;\n  const imgAspect = imgW / imgH;\n  // Zoom in on the dimension that would otherwise letterbox (cover/center-crop).\n  return outAspect > imgAspect ? [1, imgAspect / outAspect] : [outAspect / imgAspect, 1];\n};\n\n// Live tuning channel: per-layer-id uniform overrides the running compositor\n// merges over a layer's baked uniforms each frame, with no pipeline rebuild\n// (mirrors the mask() tuning). The kaleidoscope verb pushes here so a slider drag\n// updates the composite smoothly. Keyed by layer id (unique within a composite), so a\n// patch addresses exactly one layer even when two layers share a shader.\n//\n// These are INTERNAL: the kaleidoscope verb absorbs them (controls.ts injects\n// setLayerUniforms via the web facade). They are not part of the public surface,\n// but stay exported so the facade and controls can drive them.\ntype UniformMap = Readonly<Record<string, number | readonly number[]>>;\nconst layerUniformOverrides: Record<string, UniformMap> = {};\n\n/** Override a layer's uniforms (by layer id) in the running composite; merges. */\nexport const setLayerUniforms = (id: string, uniforms: UniformMap): void => {\n  layerUniformOverrides[id] = { ...layerUniformOverrides[id], ...uniforms };\n};\n\n/** Drop a layer's override (by layer id), reverting to its baked uniforms. */\nconst clearLayerUniforms = (id: string): void => {\n  delete layerUniformOverrides[id];\n};\n\n/**\n * Drop EVERY layer override. A preset switch calls this so a reused layer id\n * (e.g. 'blur', shared by the low/medium/high blur presets) reverts to the new\n * preset's baked uniforms instead of carrying a stale slider override across.\n */\nexport const resetLayerUniforms = (): void => {\n  for (const id of Object.keys(layerUniformOverrides)) delete layerUniformOverrides[id];\n};\n\nconst mergedUniforms = (\n  layer: Extract<KaleidoscopeLayer, { uniforms: UniformMap }>,\n): UniformMap => {\n  const override = layerUniformOverrides[layer.id];\n  return override ? { ...layer.uniforms, ...override } : layer.uniforms;\n};\n\nexport const makeComposite = (layers: ReadonlyArray<KaleidoscopeLayer>): FrameTransform => {\n  // A preset switch builds a fresh composite; drop any live overrides whose layer id\n  // is not in this stack so a reused id (e.g. 'you') can't carry a stale override\n  // from the previous preset into this one.\n  const ids = new Set(layers.map((l) => l.id));\n  for (const id of Object.keys(layerUniformOverrides)) {\n    if (!ids.has(id)) clearLayerUniforms(id);\n  }\n  const imageSources = layers.filter(\n    (l): l is Extract<KaleidoscopeLayer, { shader: 'image' }> => l.shader === 'image',\n  );\n  const needsSegmentation = layers.some((l) => l.target === 'subject');\n  const needsCamera = layers.some((l) => isCameraSampler(l.shader));\n\n  return async (frame) => {\n    const w = frame.displayWidth;\n    const h = frame.displayHeight;\n\n    // Ensure all image layers are decoded before the first composite.\n    const loaded = await Promise.all(imageSources.map((l) => loadImage(l.source)));\n    if (needsSegmentation) await loadSegmenter();\n\n    const s = ensureState(w, h, layers);\n    const { gl, canvas, blit, imageTextures, shaderPrograms } = s;\n\n    // Upload any image textures not yet on the GPU for this state.\n    for (let i = 0; i < imageSources.length; i++) {\n      const layer = imageSources[i];\n      const img = loaded[i];\n      if (!layer || !img) continue;\n      const src = layer.source;\n      if (imageTextures.has(src)) continue;\n      const tex = createTexture(gl);\n      uploadTexture(gl, tex, img.canvas as unknown as TexImageSource, true);\n      imageTextures.set(src, { tex, width: img.width, height: img.height });\n    }\n\n    // Stage the camera frame: needed for any camera-sampling layer and as the\n    // segmenter input. Upload to the shared camera texture; kick segmentation and\n    // upload the mask when a subject layer is present.\n    let subjectReady = false;\n    if (needsCamera || needsSegmentation) {\n      const inputCtx = ensureInputCanvas(w, h);\n      inputCtx.drawImage(frame, 0, 0, w, h);\n      const inputSource = inputCanvas2D as unknown as CanvasImageSource;\n      if (needsCamera && s.camera) {\n        uploadTexture(gl, s.camera.tex, inputSource as unknown as TexImageSource, true);\n      }\n      if (needsSegmentation && s.maskTex) {\n        requestMaskIfIdle(inputSource);\n        const results = getLatestMask();\n        if (results) {\n          uploadTexture(\n            gl,\n            s.maskTex,\n            results.segmentationMask as unknown as TexImageSource,\n            false,\n          );\n          subjectReady = true;\n        }\n      }\n    }\n\n    const now = performance.now() / 1000;\n    const [maskLo, maskHi] = maskSmoothstepRange(tuning.maskHardness, tuning.maskThreshold);\n\n    // Bind a mask sampler on texture unit 1 for the subject programs (V-flipped in\n    // the sampler, matching the single-effect composite path).\n    const bindMask = (\n      uMask: WebGLUniformLocation | null,\n      uScale: WebGLUniformLocation | null,\n      uOffset: WebGLUniformLocation | null,\n      uLo: WebGLUniformLocation | null,\n      uHi: WebGLUniformLocation | null,\n    ): void => {\n      gl.activeTexture(gl.TEXTURE1);\n      gl.bindTexture(gl.TEXTURE_2D, s.maskTex);\n      gl.uniform1i(uMask, 1);\n      gl.uniform2f(uScale, 1, -1);\n      gl.uniform2f(uOffset, 0, 1);\n      gl.uniform1f(uLo, maskLo);\n      gl.uniform1f(uHi, maskHi);\n    };\n\n    const drawQuad = (): void => gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n\n    // Render a layer's content into scratchA (blend off, cleared), returning the\n    // texture that holds it. Blur is special: it runs the separable passes\n    // (camera -> scratchA -> scratchB) and returns scratchB.\n    const renderContentToScratch = (layer: KaleidoscopeLayer): WebGLTexture | null => {\n      gl.disable(gl.BLEND);\n      if (layer.shader === 'blur') {\n        if (!s.blur || !s.camera || !s.scratchA || !s.scratchB) return null;\n        // Read through mergedUniforms so a live slider edit (setLayerUniforms)\n        // reaches the blur pass, exactly like the generative layers below.\n        const sigmaVal = mergedUniforms(layer).sigma;\n        const sigma = typeof sigmaVal === 'number' ? sigmaVal : 4;\n        // biome-ignore lint/correctness/useHookAtTopLevel: gl.useProgram is a WebGL call, not a React hook.\n        gl.useProgram(s.blur.prog);\n        gl.uniform1f(s.blur.uSigma, sigma);\n        // Horizontal pass: camera -> scratchA.\n        gl.bindFramebuffer(gl.FRAMEBUFFER, s.scratchA.fbo);\n        gl.viewport(0, 0, w, h);\n        gl.activeTexture(gl.TEXTURE0);\n        gl.bindTexture(gl.TEXTURE_2D, s.camera.tex);\n        gl.uniform1i(s.blur.uTex, 0);\n        gl.uniform2f(s.blur.uDir, 1 / w, 0);\n        drawQuad();\n        // Vertical pass: scratchA -> scratchB.\n        gl.bindFramebuffer(gl.FRAMEBUFFER, s.scratchB.fbo);\n        gl.viewport(0, 0, w, h);\n        gl.activeTexture(gl.TEXTURE0);\n        gl.bindTexture(gl.TEXTURE_2D, s.scratchA.tex);\n        gl.uniform1i(s.blur.uTex, 0);\n        gl.uniform2f(s.blur.uDir, 0, 1 / h);\n        drawQuad();\n        return s.scratchB.tex;\n      }\n      if (!s.scratchA) return null;\n      gl.bindFramebuffer(gl.FRAMEBUFFER, s.scratchA.fbo);\n      gl.viewport(0, 0, w, h);\n      gl.clearColor(0, 0, 0, 0);\n      gl.clear(gl.COLOR_BUFFER_BIT);\n      if (layer.shader === 'image') {\n        const img = imageTextures.get(layer.source);\n        if (!img) return null;\n        // biome-ignore lint/correctness/useHookAtTopLevel: gl.useProgram is a WebGL call, not a React hook.\n        gl.useProgram(blit.prog);\n        gl.activeTexture(gl.TEXTURE0);\n        gl.bindTexture(gl.TEXTURE_2D, img.tex);\n        gl.uniform1i(blit.uTex, 0);\n        const [sx, sy] = coverScale(w, h, img.width, img.height);\n        gl.uniform2f(blit.uCoverScale, sx, sy);\n        drawQuad();\n        return s.scratchA.tex;\n      }\n      // Generative.\n      const prog = shaderPrograms.get(layer.shader);\n      if (!prog || !('uniforms' in layer)) return null;\n      // biome-ignore lint/correctness/useHookAtTopLevel: gl.useProgram is a WebGL call, not a React hook.\n      gl.useProgram(prog.prog);\n      gl.uniform1f(prog.uTime, now);\n      gl.uniform2f(prog.uResolution, w, h);\n      for (const [name, value] of Object.entries(mergedUniforms(layer))) {\n        bindUniform(gl, prog.uniforms.get(name) ?? null, value);\n      }\n      drawQuad();\n      return s.scratchA.tex;\n    };\n\n    gl.disable(gl.DEPTH_TEST);\n\n    for (let i = 0; i < layers.length; i++) {\n      const layer = layers[i];\n      if (!layer) continue;\n      const target = layer.target ?? 'background';\n      const isBase = i === 0;\n\n      const setOutputBlend = (): void => {\n        gl.bindFramebuffer(gl.FRAMEBUFFER, null);\n        gl.viewport(0, 0, w, h);\n        if (isBase) {\n          gl.disable(gl.BLEND);\n        } else if (layer.blend === 'additive') {\n          gl.enable(gl.BLEND);\n          gl.blendFunc(gl.ONE, gl.ONE); // premultiplied additive\n        } else {\n          gl.enable(gl.BLEND);\n          gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // premultiplied \"over\"\n        }\n      };\n\n      if (target === 'subject') {\n        // Subject layers need the mask; skip until it warms up.\n        if (!s.maskTex || !subjectReady) continue;\n        if (layer.shader === 'direct') {\n          // One-pass fast path: cam x mask.\n          if (!s.directSubject || !s.camera) continue;\n          setOutputBlend();\n          // biome-ignore lint/correctness/useHookAtTopLevel: gl.useProgram is a WebGL call, not a React hook.\n          gl.useProgram(s.directSubject.prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, s.camera.tex);\n          gl.uniform1i(s.directSubject.uCamera, 0);\n          bindMask(\n            s.directSubject.uMask,\n            s.directSubject.uMaskUvScale,\n            s.directSubject.uMaskUvOffset,\n            s.directSubject.uMaskLo,\n            s.directSubject.uMaskHi,\n          );\n          drawQuad();\n        } else {\n          // Render the layer content to a scratch, then stencil it through the mask.\n          if (!s.masked) continue;\n          const contentTex = renderContentToScratch(layer);\n          if (!contentTex) continue;\n          setOutputBlend();\n          // biome-ignore lint/correctness/useHookAtTopLevel: gl.useProgram is a WebGL call, not a React hook.\n          gl.useProgram(s.masked.prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, contentTex);\n          gl.uniform1i(s.masked.uTex, 0);\n          bindMask(\n            s.masked.uMask,\n            s.masked.uMaskUvScale,\n            s.masked.uMaskUvOffset,\n            s.masked.uMaskLo,\n            s.masked.uMaskHi,\n          );\n          drawQuad();\n        }\n        continue;\n      }\n\n      // Background layers draw fullscreen.\n      if (layer.shader === 'image') {\n        const img = imageTextures.get(layer.source);\n        if (!img) continue;\n        setOutputBlend();\n        // biome-ignore lint/correctness/useHookAtTopLevel: gl.useProgram is a WebGL call, not a React hook.\n        gl.useProgram(blit.prog);\n        gl.activeTexture(gl.TEXTURE0);\n        gl.bindTexture(gl.TEXTURE_2D, img.tex);\n        gl.uniform1i(blit.uTex, 0);\n        const [sx, sy] = coverScale(w, h, img.width, img.height);\n        gl.uniform2f(blit.uCoverScale, sx, sy);\n        drawQuad();\n      } else if (layer.shader === 'direct') {\n        // Raw camera fullscreen.\n        if (!s.camera) continue;\n        setOutputBlend();\n        // biome-ignore lint/correctness/useHookAtTopLevel: gl.useProgram is a WebGL call, not a React hook.\n        gl.useProgram(s.camera.prog);\n        gl.activeTexture(gl.TEXTURE0);\n        gl.bindTexture(gl.TEXTURE_2D, s.camera.tex);\n        gl.uniform1i(s.camera.uCamera, 0);\n        drawQuad();\n      } else if (layer.shader === 'blur') {\n        const contentTex = renderContentToScratch(layer);\n        if (!contentTex) continue;\n        setOutputBlend();\n        // biome-ignore lint/correctness/useHookAtTopLevel: gl.useProgram is a WebGL call, not a React hook.\n        gl.useProgram(blit.prog);\n        gl.activeTexture(gl.TEXTURE0);\n        gl.bindTexture(gl.TEXTURE_2D, contentTex);\n        gl.uniform1i(blit.uTex, 0);\n        gl.uniform2f(blit.uCoverScale, 1, 1);\n        drawQuad();\n      } else {\n        // Generative background.\n        const prog = shaderPrograms.get(layer.shader);\n        if (!prog || !('uniforms' in layer)) continue;\n        setOutputBlend();\n        // biome-ignore lint/correctness/useHookAtTopLevel: gl.useProgram is a WebGL call, not a React hook.\n        gl.useProgram(prog.prog);\n        gl.uniform1f(prog.uTime, now);\n        gl.uniform2f(prog.uResolution, w, h);\n        for (const [name, value] of Object.entries(mergedUniforms(layer))) {\n          bindUniform(gl, prog.uniforms.get(name) ?? null, value);\n        }\n        drawQuad();\n      }\n    }\n\n    const out = new VideoFrame(canvas as unknown as CanvasImageSource, {\n      timestamp: frame.timestamp,\n      ...(frame.duration != null ? { duration: frame.duration } : {}),\n    });\n    frame.close();\n    return out;\n  };\n};\n"]}
+{"version":3,"file":"composite.d.ts","sourceRoot":"","sources":["../../../web-driver/effects/composite.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAiZ5D,KAAK,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC,CAAC,CAAC;AAGvE,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,OAAQ,MAAM,YAAY,UAAU,KAAG,IAEnE,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,QAAO,IAErC,CAAC;AASF,eAAO,MAAM,aAAa,WAAY,aAAa,CAAC,iBAAiB,CAAC,KAAG,cAgRxE,CAAC"}

package/dist/web-driver/effects/layer-shaders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layer-shaders.d.ts","sourceRoot":"","sources":["../../../web-driver/effects/layer-shaders.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["// Generative layer-shader sources for the web composite compositor, keyed by the\n// shader name the compositor dispatches on. Single-sourced from the canonical\n// `shaders/<name>.frag` via `bun run build:shaders`, which emits the name ->\n// source registry. The compositor reads this directly, so adding a generative to\n// GENERATIVE_SHADERS registers it on web with no edit here.\nexport { SHADER_SOURCES as LAYER_SHADER_SOURCES } from '../shaders.generated';\n"]}
+{"version":3,"file":"layer-shaders.d.ts","sourceRoot":"","sources":["../../../web-driver/effects/layer-shaders.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/web-driver/effects/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../web-driver/effects/transform.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAO,MAAM,aAAa,OAAQ,aAAa,KAAG,cAmDjD,CAAC","sourcesContent":["// Web transform effects: pure geometric reorientations of the frame (axis\n// flips and 90-degree rotations). Each draws the incoming VideoFrame to an\n// OffscreenCanvas with the matching 2D transform, then re-encodes the canvas as\n// a new VideoFrame preserving timestamp and duration.\n//\n// On web the frame is already in display space, so a flip on the canvas X axis\n// is a flip on the screen's horizontal axis with no rotation correction. These\n// are therefore the platform-reference behavior for the demo's calibration\n// toggles; the native pipelines have to correct for the landscape camera\n// buffer's rotation to land on the same on-screen result.\n//\n// makeTransform closes over its own canvas (one per pipeline stage) so two\n// stacked transform stages never fight over a shared scratch buffer.\n\nimport type { TransformName } from '../../src/kaleidoscope/effect.types';\nimport type { FrameTransform } from '../insertable-streams';\n\nexport const makeTransform = (op: TransformName): FrameTransform => {\n  let canvas: OffscreenCanvas | null = null;\n  let ctx: OffscreenCanvasRenderingContext2D | null = null;\n\n  const ensureCanvas = (width: number, height: number): OffscreenCanvasRenderingContext2D => {\n    if (!canvas || canvas.width !== width || canvas.height !== height) {\n      canvas = new OffscreenCanvas(width, height);\n      ctx = canvas.getContext('2d');\n      if (!ctx) {\n        throw new Error('kaleidoscope: OffscreenCanvas 2D context unavailable');\n      }\n    }\n    return ctx as OffscreenCanvasRenderingContext2D;\n  };\n\n  return async (frame) => {\n    const w = frame.displayWidth;\n    const h = frame.displayHeight;\n    // 90-degree rotations swap the output dimensions.\n    const rotated = op === 'rotate-cw' || op === 'rotate-ccw';\n    const c = ensureCanvas(rotated ? h : w, rotated ? w : h);\n\n    c.save();\n    switch (op) {\n      case 'flip-x':\n        // Mirror about the vertical centerline: x -> w - x.\n        c.setTransform(-1, 0, 0, 1, w, 0);\n        break;\n      case 'flip-y':\n        // Mirror about the horizontal centerline: y -> h - y.\n        c.setTransform(1, 0, 0, -1, 0, h);\n        break;\n      case 'rotate-cw':\n        // 90 deg clockwise into the h x w canvas.\n        c.setTransform(0, 1, -1, 0, h, 0);\n        break;\n      case 'rotate-ccw':\n        // 90 deg counter-clockwise into the h x w canvas.\n        c.setTransform(0, -1, 1, 0, 0, w);\n        break;\n    }\n    c.drawImage(frame, 0, 0, w, h);\n    c.restore();\n\n    const out = new VideoFrame(canvas as unknown as CanvasImageSource, {\n      timestamp: frame.timestamp,\n      ...(frame.duration != null ? { duration: frame.duration } : {}),\n    });\n    frame.close();\n    return out;\n  };\n};\n"]}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../web-driver/effects/transform.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAO,MAAM,aAAa,OAAQ,aAAa,KAAG,cAmDjD,CAAC"}

package/dist/web-driver/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../web-driver/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["// The web driver's public surface: the JS/WebGL rendering engine, a root-level\n// peer of android/ and ios/ (the three effect drivers; see PATTERNS.md). This\n// barrel is the contract the runtime web entry (src/index.web.ts) consumes; the\n// driver's internals (the segmenter, the generated shader sources, the per-layer\n// shader map) stay private to this folder. Only the composite/transform builders,\n// the Insertable-Streams stage applier, and the mutable tuning state cross the\n// boundary.\n\nexport { makeComposite, resetLayerUniforms, setLayerUniforms } from './effects/composite';\nexport { makeTransform } from './effects/transform';\nexport type { DisposablePipeline, FrameTransform } from './insertable-streams';\nexport { applyEffectToTrack } from './insertable-streams';\nexport { tuning } from './tuning';\n"]}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../web-driver/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC1F,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/web-driver/insertable-streams.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"insertable-streams.d.ts","sourceRoot":"","sources":["../../web-driver/insertable-streams.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;AAIxE,OAAO,CAAC,MAAM,CAAC,CAAC;IACd,UAAU,6BAA6B;QACrC,KAAK,EAAE,gBAAgB,CAAC;QACxB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IACD,UAAU,yBAAyB;QACjC,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;KAC/C;IACD,IAAI,yBAAyB,EAAE;QAC7B,SAAS,EAAE,yBAAyB,CAAC;QACrC,KAAK,IAAI,EAAE,6BAA6B,GAAG,yBAAyB,CAAC;KACtE,CAAC;IAEF,UAAU,6BAA6B;QACrC,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;KACzB;IACD,UAAU,yBAA0B,SAAQ,gBAAgB;QAC1D,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;KAC/C;IACD,IAAI,yBAAyB,EAAE;QAC7B,SAAS,EAAE,yBAAyB,CAAC;QACrC,KAAK,IAAI,EAAE,6BAA6B,GAAG,yBAAyB,CAAC;KACtE,CAAC;CACH;AAMD;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,UACtB,gBAAgB,aACZ,cAAc,KACxB,kBAuDF,CAAC","sourcesContent":["// Insertable-Streams pipeline factory. Wires\n//   MediaStreamTrackProcessor → TransformStream(transform) → MediaStreamTrackGenerator\n// and returns the generator track. Caller hands the new track to a `<video>`\n// element for preview, or to `RTCRtpSender.replaceTrack(...)` for a peer connection.\n//\n// Spec: https://www.w3.org/TR/mediacapture-transform/\n// Browsers: Chrome / Edge ship it. Safari and Firefox do not as of 2026-05;\n// we capability-check at call time and throw a typed error.\n\nexport type FrameTransform = (frame: VideoFrame) => Promise<VideoFrame>;\n\n// Insertable-Streams APIs are not yet in TypeScript's lib.dom.d.ts.\n// Local ambient declarations until they land upstream.\ndeclare global {\n  interface MediaStreamTrackProcessorInit {\n    track: MediaStreamTrack;\n    maxBufferSize?: number;\n  }\n  interface MediaStreamTrackProcessor {\n    readonly readable: ReadableStream<VideoFrame>;\n  }\n  var MediaStreamTrackProcessor: {\n    prototype: MediaStreamTrackProcessor;\n    new (init: MediaStreamTrackProcessorInit): MediaStreamTrackProcessor;\n  };\n\n  interface MediaStreamTrackGeneratorInit {\n    kind: 'video' | 'audio';\n  }\n  interface MediaStreamTrackGenerator extends MediaStreamTrack {\n    readonly writable: WritableStream<VideoFrame>;\n  }\n  var MediaStreamTrackGenerator: {\n    prototype: MediaStreamTrackGenerator;\n    new (init: MediaStreamTrackGeneratorInit): MediaStreamTrackGenerator;\n  };\n}\n\nconst hasInsertableStreams = (): boolean =>\n  typeof globalThis.MediaStreamTrackProcessor !== 'undefined' &&\n  typeof globalThis.MediaStreamTrackGenerator !== 'undefined';\n\n/**\n * A running Insertable-Streams stage. `track` is the generator track carrying\n * transformed frames; `dispose` aborts the pipe and stops the generator so the\n * stage can be torn down (e.g. on a LiveKit camera flip) without leaking the\n * generator and its pull on the source track.\n */\nexport type DisposablePipeline = {\n  track: MediaStreamTrack;\n  dispose: () => void;\n};\n\nexport const applyEffectToTrack = (\n  track: MediaStreamTrack,\n  transform: FrameTransform,\n): DisposablePipeline => {\n  if (!hasInsertableStreams()) {\n    throw new Error(\n      'kaleidoscope: this browser lacks MediaStreamTrackProcessor / MediaStreamTrackGenerator (Insertable Streams). Effects require Chrome or Edge.',\n    );\n  }\n\n  const processor = new MediaStreamTrackProcessor({ track });\n  const generator = new MediaStreamTrackGenerator({ kind: 'video' });\n\n  const transformer = new TransformStream<VideoFrame, VideoFrame>({\n    async transform(frame, controller) {\n      try {\n        const out = await transform(frame);\n        controller.enqueue(out);\n      } catch (err) {\n        try {\n          frame.close();\n        } catch {\n          // already closed\n        }\n        controller.error(err);\n      }\n    },\n  });\n\n  // Abort signal lets `dispose()` cancel the pipe: aborting cancels the\n  // readable (which stops the processor pulling from the source) and errors the\n  // writable, ending the generator.\n  const abort = new AbortController();\n  processor.readable\n    .pipeThrough(transformer)\n    .pipeTo(generator.writable, { signal: abort.signal })\n    .catch((err) => {\n      // Pipeline aborts when the source track ends, is replaced, or dispose()\n      // is called; not an error.\n      if (err?.name !== 'AbortError') {\n        console.error('kaleidoscope: pipeline error', err);\n      }\n    });\n\n  const dispose = (): void => {\n    try {\n      abort.abort();\n    } catch {\n      // already aborted\n    }\n    try {\n      generator.stop();\n    } catch {\n      // already stopped\n    }\n  };\n\n  return { track: generator, dispose };\n};\n"]}
+{"version":3,"file":"insertable-streams.d.ts","sourceRoot":"","sources":["../../web-driver/insertable-streams.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;AAIxE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,6BAA6B;QACrC,KAAK,EAAE,gBAAgB,CAAC;QACxB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IACD,UAAU,yBAAyB;QACjC,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;KAC/C;IACD,IAAI,yBAAyB,EAAE;QAC7B,SAAS,EAAE,yBAAyB,CAAC;QACrC,KAAK,IAAI,EAAE,6BAA6B,GAAG,yBAAyB,CAAC;KACtE,CAAC;IAEF,UAAU,6BAA6B;QACrC,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;KACzB;IACD,UAAU,yBAA0B,SAAQ,gBAAgB;QAC1D,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;KAC/C;IACD,IAAI,yBAAyB,EAAE;QAC7B,SAAS,EAAE,yBAAyB,CAAC;QACrC,KAAK,IAAI,EAAE,6BAA6B,GAAG,yBAAyB,CAAC;KACtE,CAAC;CACH;AAMD;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,gBAAgB,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,UACtB,gBAAgB,aACZ,cAAc,KACxB,kBAuDF,CAAC"}

package/dist/web-driver/segmenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmenter.d.ts","sourceRoot":"","sources":["../../web-driver/segmenter.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,iBAAiB,CAAC;IACzB,gBAAgB,EAAE,iBAAiB,CAAC;CACrC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,UAAU,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,GAAG,IAAI,CAAC;IACnD,IAAI,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,iBAAiB,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACxB,CAAC;AAuCF,eAAO,MAAM,aAAa,QAAO,OAAO,CAAC,SAAS,CAsBjD,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,aAAa,QAAO,gBAAgB,GAAG,IAAqB,CAAC;AAE1E;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UAAW,iBAAiB,KAAG,IAU5D,CAAC","sourcesContent":["// MediaPipe Selfie Segmentation loader. Single shared instance across every\n// web effect that needs a person mask (blur, a subject-masked layer, future\n// procedural backgrounds). The script is loaded once from a CDN; the\n// segmenter instance is cached for the lifetime of the page.\n//\n// CDN-loaded rather than bundled because @mediapipe/selfie_segmentation\n// ships a WASM blob and asset graph that does not play nicely with Metro;\n// we listed the npm package as an optionalDependency for typing only.\n\nconst CDN_BASE = 'https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation';\n\nexport type SegmenterResults = {\n  image: CanvasImageSource;\n  segmentationMask: CanvasImageSource;\n};\n\ntype SegmenterOptions = { selfieMode?: boolean; modelSelection?: number };\n\nexport type Segmenter = {\n  initialize(): Promise<void>;\n  setOptions(opts: SegmenterOptions): void;\n  onResults(cb: (r: SegmenterResults) => void): void;\n  send(input: { image: CanvasImageSource }): Promise<void>;\n  close(): Promise<void>;\n};\n\ntype SegmenterCtor = new (config: { locateFile: (file: string) => string }) => Segmenter;\n\nlet segmenterPromise: Promise<Segmenter> | null = null;\n\n// Decoupled mask source (mirrors Android Mask.kt / iOS Segmenter.swift): the\n// render path reads the most recent mask without ever awaiting a fresh one, and\n// a single in-flight segmentation refreshes it. `onResults` is registered once,\n// at load, below.\nlet latestResults: SegmenterResults | null = null;\nlet inFlight = false;\nlet activeSegmenter: Segmenter | null = null;\n\nconst loadScript = (src: string): Promise<void> =>\n  new Promise((resolve, reject) => {\n    const existing = document.querySelector(`script[src=\"${src}\"]`);\n    if (existing) {\n      if (existing.getAttribute('data-loaded') === 'true') {\n        resolve();\n        return;\n      }\n      existing.addEventListener('load', () => resolve(), { once: true });\n      existing.addEventListener('error', () => reject(new Error(`failed to load ${src}`)), {\n        once: true,\n      });\n      return;\n    }\n    const script = document.createElement('script');\n    script.src = src;\n    script.crossOrigin = 'anonymous';\n    script.addEventListener('load', () => {\n      script.setAttribute('data-loaded', 'true');\n      resolve();\n    });\n    script.addEventListener('error', () => reject(new Error(`failed to load ${src}`)));\n    document.head.appendChild(script);\n  });\n\nexport const loadSegmenter = (): Promise<Segmenter> => {\n  if (segmenterPromise) return segmenterPromise;\n  segmenterPromise = (async () => {\n    await loadScript(`${CDN_BASE}/selfie_segmentation.js`);\n    const SegCtor = (globalThis as unknown as { SelfieSegmentation?: SegmenterCtor })\n      .SelfieSegmentation;\n    if (!SegCtor) {\n      throw new Error(\n        'kaleidoscope: MediaPipe Selfie Segmentation script loaded but SelfieSegmentation global is missing',\n      );\n    }\n    const seg = new SegCtor({ locateFile: (file) => `${CDN_BASE}/${file}` });\n    seg.setOptions({ modelSelection: 1, selfieMode: false });\n    await seg.initialize();\n    // Register once; every completed segmentation updates the cache.\n    seg.onResults((r) => {\n      latestResults = r;\n    });\n    activeSegmenter = seg;\n    return seg;\n  })();\n  return segmenterPromise;\n};\n\n/** Most recent completed mask, or null before the first result. Non-blocking. */\nexport const getLatestMask = (): SegmenterResults | null => latestResults;\n\n/**\n * Kick a new segmentation if none is in flight; returns immediately. The result\n * lands in `getLatestMask()` via the `onResults` handler registered at load.\n * No-op until the segmenter has finished loading. `inFlight` clears when `send`\n * settles, so a failed call cannot wedge the pipeline.\n */\nexport const requestMaskIfIdle = (image: CanvasImageSource): void => {\n  const seg = activeSegmenter;\n  if (!seg || inFlight) return;\n  inFlight = true;\n  seg\n    .send({ image })\n    .catch(() => {})\n    .finally(() => {\n      inFlight = false;\n    });\n};\n"]}
+{"version":3,"file":"segmenter.d.ts","sourceRoot":"","sources":["../../web-driver/segmenter.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,iBAAiB,CAAC;IACzB,gBAAgB,EAAE,iBAAiB,CAAC;CACrC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,UAAU,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,IAAI,GAAG,IAAI,CAAC;IACnD,IAAI,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,iBAAiB,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACxB,CAAC;AAuCF,eAAO,MAAM,aAAa,QAAO,OAAO,CAAC,SAAS,CAsBjD,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,aAAa,QAAO,gBAAgB,GAAG,IAAqB,CAAC;AAE1E;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UAAW,iBAAiB,KAAG,IAU5D,CAAC"}

package/dist/web-driver/shaders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shaders.d.ts","sourceRoot":"","sources":["../../web-driver/shaders.ts"],"names":[],"mappings":"AAiBA,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACxB,yBAAyB,EACzB,0BAA0B,EAC1B,oBAAoB,GACrB,MAAM,qBAAqB,CAAC","sourcesContent":["// Web GLSL entry point. The shader source is generated from the canonical\n// `shaders/*.frag` / `*.vert` by `bun run build:shaders` into\n// `./shaders.generated`; this module re-exports it so web effect code imports\n// from one stable path. Do not hand-edit the generated file.\n//\n// The compositor folds every effect into one layered stage (see\n// web-driver/effects/composite.ts). The shared sources the runtime imports from here:\n//   - PASSTHROUGH_VERT_SRC: full-screen quad via gl_VertexID (no VAO/VBO);\n//     caller does gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4).\n//   - COMPOSITE_CAMERA_FRAG_SRC: the camera/direct layer (canonical\n//     shaders/_shared/composite-camera.frag).\n//   - COMPOSITE_BLUR_FRAG_SRC: the camera-sampling blur layer (canonical\n//     shaders/blur/composite-blur.frag).\n//   - COMPOSITE_IMAGE_FRAG_SRC: cover-fit image layer, also the scratch blit\n//     (canonical shaders/_shared/composite-image.frag).\n//   - COMPOSITE_SUBJECT_FRAG_SRC / COMPOSITE_MASKED_FRAG_SRC: the masked person\n//     and the masked-scratch stencil (canonical shaders/_shared/composite-*.frag).\nexport {\n  COMPOSITE_BLUR_FRAG_SRC,\n  COMPOSITE_CAMERA_FRAG_SRC,\n  COMPOSITE_IMAGE_FRAG_SRC,\n  COMPOSITE_MASKED_FRAG_SRC,\n  COMPOSITE_SUBJECT_FRAG_SRC,\n  PASSTHROUGH_VERT_SRC,\n} from './shaders.generated';\n"]}
+{"version":3,"file":"shaders.d.ts","sourceRoot":"","sources":["../../web-driver/shaders.ts"],"names":[],"mappings":"AAiBA,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EACzB,wBAAwB,EACxB,yBAAyB,EACzB,0BAA0B,EAC1B,oBAAoB,GACrB,MAAM,qBAAqB,CAAC"}

package/dist/web-driver/shaders.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shaders.generated.d.ts","sourceRoot":"","sources":["../../web-driver/shaders.generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,0NAQhC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oLAQrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6oBAwBnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,2QAWpC,CAAC;AAEF,eAAO,MAAM,0BAA0B,kgBAiBtC,CAAC;AAEF,eAAO,MAAM,yBAAyB,2eAiBrC,CAAC;AAEF,eAAO,MAAM,eAAe,q6CAkC3B,CAAC;AAEF,eAAO,MAAM,eAAe,klGAuG3B,CAAC;AAEF,eAAO,MAAM,eAAe,iwJAiI3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,u1EAyE5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,kmDAoD9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,+vJAiIjC,CAAC;AAEF,eAAO,MAAM,6BAA6B,ssHA4GzC,CAAC;AAEF,eAAO,MAAM,8BAA8B,qrTA2O1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,wiPAsMpC,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUlD,CAAC","sourcesContent":["// @generated by scripts/build-shaders.ts from shaders/. DO NOT EDIT.\n// Run `bun run build:shaders` to regenerate.\n\nexport const PASSTHROUGH_VERT_SRC = `#version 300 es\nprecision highp float;\nout highp vec2 vUv;\nvoid main() {\n  vec2 p = vec2(float((gl_VertexID & 1) << 1), float(gl_VertexID & 2));\n  vUv = p * 0.5;\n  gl_Position = vec4(p - 1.0, 0.0, 1.0);\n}\n`;\n\nexport const COMPOSITE_CAMERA_FRAG_SRC = `#version 300 es\nprecision highp float;\nuniform sampler2D uCamera;\nin highp vec2 vUv;\nout vec4 oColor;\nvoid main() {\n  oColor = vec4(texture(uCamera, vUv).rgb, 1.0);\n}\n`;\n\nexport const COMPOSITE_BLUR_FRAG_SRC = `#version 300 es\nprecision highp float;\nuniform sampler2D uTex;\nuniform vec2 uDir;\nuniform float uSigma;\nin highp vec2 vUv;\nout vec4 oColor;\nvoid main() {\n  float s2 = 2.0 * uSigma * uSigma;\n  float w[7];\n  float sum = 0.0;\n  for (int i = 0; i < 7; i++) {\n    w[i] = exp(-(float(i) * float(i)) / s2);\n    sum += (i == 0) ? w[i] : 2.0 * w[i];\n  }\n  float spread = uSigma * 0.25;\n  vec4 acc = texture(uTex, vUv) * (w[0] / sum);\n  for (int i = 1; i < 7; i++) {\n    vec2 off = uDir * float(i) * spread;\n    acc += texture(uTex, vUv + off) * (w[i] / sum);\n    acc += texture(uTex, vUv - off) * (w[i] / sum);\n  }\n  oColor = acc;\n}\n`;\n\nexport const COMPOSITE_IMAGE_FRAG_SRC = `#version 300 es\nprecision highp float;\nuniform sampler2D uTex;\nuniform vec2 uCoverScale;\nin highp vec2 vUv;\nout vec4 oColor;\nvoid main() {\n  vec2 uv = (vUv - 0.5) * uCoverScale + 0.5;\n  vec4 c = texture(uTex, uv);\n  oColor = vec4(c.rgb * c.a, c.a);\n}\n`;\n\nexport const COMPOSITE_SUBJECT_FRAG_SRC = `#version 300 es\nprecision highp float;\nuniform sampler2D uCamera;\nuniform sampler2D uMask;\nuniform vec2 uMaskUvScale;\nuniform vec2 uMaskUvOffset;\nuniform float uMaskLo;\nuniform float uMaskHi;\nin highp vec2 vUv;\nout vec4 oColor;\nvoid main() {\n  vec3 cam = texture(uCamera, vUv).rgb;\n  float raw = texture(uMask, vUv * uMaskUvScale + uMaskUvOffset).r;\n  float safeHi = max(uMaskHi, uMaskLo + 0.001);\n  float a = clamp(smoothstep(uMaskLo, safeHi, raw), 0.0, 1.0);\n  oColor = vec4(cam * a, a);\n}\n`;\n\nexport const COMPOSITE_MASKED_FRAG_SRC = `#version 300 es\nprecision highp float;\nuniform sampler2D uTex;\nuniform sampler2D uMask;\nuniform vec2 uMaskUvScale;\nuniform vec2 uMaskUvOffset;\nuniform float uMaskLo;\nuniform float uMaskHi;\nin highp vec2 vUv;\nout vec4 oColor;\nvoid main() {\n  vec4 c = texture(uTex, vUv);\n  float raw = texture(uMask, vUv * uMaskUvScale + uMaskUvOffset).r;\n  float safeHi = max(uMaskHi, uMaskLo + 0.001);\n  float a = clamp(smoothstep(uMaskLo, safeHi, raw), 0.0, 1.0);\n  oColor = c * a;\n}\n`;\n\nexport const PLASMA_FRAG_SRC = `#version 300 es\nprecision highp float;\n\nuniform float uTime;       // seconds, monotonically increasing; range [0, inf)\nuniform vec2 uResolution;  // framebuffer size in pixels; both components > 0\nuniform vec3 uColorA;      // first palette color, linear-ish RGB in [0, 1]\nuniform vec3 uColorB;      // second palette color, linear-ish RGB in [0, 1]\nuniform float uSpeed;      // animation rate multiplier; 0 freezes the field\nuniform float uScale;      // spatial frequency; higher = more, tighter cells\n\nin highp vec2 vUv;\nout vec4 oColor;\n\nvoid main() {\n  // Aspect-correct, screen-centered coordinates (matches nebula.frag): divide\n  // by the height so uScale reads the same regardless of aspect ratio.\n  vec2 fragCoord = vUv * uResolution;\n  vec2 uv = (fragCoord - 0.5 * uResolution) / uResolution.y;\n\n  float t = uTime * uSpeed;\n\n  // Classic demoscene plasma: a few sines of position and time. The radial\n  // term (length(uv)) gives the field an organic, non-grid-aligned drift.\n  float v = sin(uv.x * uScale + t);\n  v += sin(uv.y * uScale + t * 0.8);\n  v += sin((uv.x + uv.y) * uScale * 0.7 + t * 1.3);\n  v += sin(length(uv) * uScale * 1.2 - t);\n\n  // v ranges roughly [-4, 4]; fold through sin to a smooth [0, 1] mix factor.\n  float mixT = 0.5 + 0.5 * sin(v);\n\n  // Opaque procedural background; the person is composited over it downstream.\n  oColor = vec4(mix(uColorA, uColorB, mixT), 1.0);\n}\n`;\n\nexport const CLOUDS_FRAG_SRC = `#version 300 es\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform vec3 uSkyLowColor;\nuniform vec3 uSkyHighColor;\nuniform vec3 uCloudLightColor;\nuniform vec3 uCloudDarkColor;\nuniform float uExposure;\nuniform float uStepSize;\nuniform float uCloudSpeed;\nuniform float uCloudScale;\nuniform float uDensity;\nuniform float uCoverage;\nuniform float uSoftness;\n\nin highp vec2 vUv;\nout vec4 oColor;\n\n// STEPS must stay a compile-time constant (GLSL ES loop bound).\n#define STEPS 48\n\nfloat hash(vec3 p) {\n    p = fract(p * 0.3183099 + 0.1);\n    p *= 17.0;\n    return fract(p.x * p.y * p.z * (p.x + p.y + p.z));\n}\n\nfloat rand(vec2 p) {\n    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);\n}\n\nfloat noise(vec3 p) {\n    vec3 i = floor(p);\n    vec3 f = fract(p);\n    f = f * f * (3.0 - 2.0 * f);\n    return mix(\n        mix(\n            mix(hash(i + vec3(0,0,0)), hash(i + vec3(1,0,0)), f.x),\n            mix(hash(i + vec3(0,1,0)), hash(i + vec3(1,1,0)), f.x),\n            f.y),\n        mix(\n            mix(hash(i + vec3(0,0,1)), hash(i + vec3(1,0,1)), f.x),\n            mix(hash(i + vec3(0,1,1)), hash(i + vec3(1,1,1)), f.x),\n            f.y),\n        f.z);\n}\n\nfloat fbm(vec3 p) {\n    float v = 0.0;\n    float a = 0.5;\n    for (int i = 0; i < 5; i++) {\n        v += a * noise(p);\n        p *= 2.03;\n        a *= 0.5;\n    }\n    return v;\n}\n\nfloat cloudDensity(vec3 p) {\n    p += vec3(uTime * uCloudSpeed, 0.0, uTime * uCloudSpeed * 0.35);\n    // Outside the slab the height mask is 0, so the sample is 0; bail before fbm.\n    if (p.y <= 0.0 || p.y >= 3.0) return 0.0;\n    float n = fbm(p * uCloudScale);\n    float bottom = smoothstep(0.0, 0.7, p.y);\n    float top = smoothstep(3.0, 1.2, p.y);\n    float heightMask = bottom * top;\n    float cloud = smoothstep(uCoverage, uCoverage + uSoftness, n);\n    return cloud * heightMask;\n}\n\nvoid main() {\n    vec2 fragCoord = vUv * uResolution;\n    vec2 uv = (fragCoord - 0.5 * uResolution) / uResolution.y;\n    vec3 ro = vec3(0.0, 1.2, -4.0);\n    vec3 rd = normalize(vec3(uv, 1.5));\n    float skyGradient = clamp(rd.y * 0.5 + 0.5, 0.0, 1.0);\n    vec3 skyColor = mix(uSkyLowColor, uSkyHighColor, skyGradient);\n    vec3 accum = vec3(0.0);\n    float alpha = 0.0;\n    float t = rand(fragCoord) * uStepSize;\n    for (int i = 0; i < STEPS; i++) {\n        vec3 p = ro + rd * t;\n        // The slab is crossed monotonically in t; once past it, all samples are 0.\n        if (rd.y > 0.0 && p.y >= 3.0) break;\n        if (rd.y < 0.0 && p.y <= 0.0) break;\n        float d = cloudDensity(p);\n        if (d > 0.01) {\n            float light = smoothstep(0.4, 2.8, p.y);\n            vec3 sampleColor = mix(uCloudDarkColor, uCloudLightColor, light);\n            float a = d * uDensity;\n            accum += (1.0 - alpha) * sampleColor * a;\n            alpha += (1.0 - alpha) * a;\n        }\n        t += uStepSize;\n        if (alpha > 0.95) break;\n    }\n    vec3 color = mix(skyColor, accum, alpha);\n    color *= uExposure;\n    color = pow(color, vec3(0.9));\n    oColor = vec4(color, 1.0);\n}\n`;\n\nexport const NEBULA_FRAG_SRC = `#version 300 es\nprecision highp float;\n\nuniform float uTime;          // seconds, monotonically increasing; range [0, inf)\nuniform vec2 uResolution;     // framebuffer size in pixels; both components > 0\nuniform vec3 uColor;          // overall tint / color grade; [1,1,1] = untinted\nuniform float uBrightness;    // final glow multiplier; 1.0 = stock\nuniform float uSpeed;         // drift + rotation rate; 1.0 = stock, 0 freezes\nuniform float uTwinkleSpeed;  // star color-cycle rate; 1.0 = stock\nuniform float uScale;         // starfield zoom / density; >1 = more, smaller stars\nuniform float uStarGlow;      // star-core size; 1.0 = stock\n\nin highp vec2 vUv;\nout vec4 oColor;\n\nconst float PI = 3.14159265;\nconst float MIN_DIVIDE = 64.0;\nconst float MAX_DIVIDE = 0.01;\n// Number of stacked starfield layers. Compile-time constant so the layer\n// loop has a fixed integer bound (cross-compile-safe; no float loop counter).\nconst int STARFIELD_LAYERS_COUNT = 12;\n\nmat2 Rotate(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nfloat Star(vec2 uv, float flaresize, float rotAngle, float randomN) {\n  float d = length(uv);\n  // Star core. Guard the division: length(uv) can be exactly 0 at a cell\n  // center, which yields inf/NaN under Metal. max(d, 1e-4) caps the core\n  // brightness without visibly changing the look (the concentric\n  // smoothstep fade below already clamps it).\n  float starcore = 0.05 * uStarGlow / max(d, 1e-4);\n  uv *= Rotate(-2.0 * PI * rotAngle);\n  float flareMax = 1.0;\n\n  // flares\n  float starflares = max(0.0, flareMax - abs(uv.x * uv.y * 3000.0));\n  starcore += starflares * flaresize;\n  uv *= Rotate(PI * 0.25);\n  starflares = max(0.0, flareMax - abs(uv.x * uv.y * 3000.0));\n  starcore += starflares * 0.3 * flaresize;\n  // light can't go forever, fade it concentrically.\n  starcore *= smoothstep(1.0, 0.05, d);\n  return starcore;\n}\n\nfloat PseudoRandomizer(vec2 p) {\n  // not really random, but it looks random.\n  p = fract(p * vec2(123.45, 345.67));\n  p += dot(p, p + 45.32);\n  return fract(p.x * p.y);\n}\n\nvec3 StarFieldLayer(vec2 uv, float rotAngle) {\n  vec3 col = vec3(0.0);\n\n  vec2 gv = fract(uv) - 0.5;\n  vec2 id = floor(uv);\n\n  float deltaTimeTwinkle = uTime * 0.35 * uTwinkleSpeed;\n\n  // sweep the 8 neighbors plus the home cell so stars are not clipped at\n  // cell borders. Constant 3x3 bounds.\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 offset = vec2(float(x), float(y));\n\n      float randomN = PseudoRandomizer(id + offset); // 0..1\n      float randoX = randomN - 0.5;\n      float randoY = fract(randomN * 45.0) - 0.5;\n      vec2 randomPosition = gv - offset - vec2(randoX, randoY);\n      // fract trick: random sizes\n      float size = fract(randomN * 1356.33);\n      float flareSwitch = smoothstep(0.9, 1.0, size);\n      float star = Star(randomPosition, flareSwitch, rotAngle, randomN);\n\n      // fract trick: random colors\n      float randomStarColorSeed = fract(randomN * 2150.0) * (3.0 * PI) * deltaTimeTwinkle;\n      vec3 color = sin(vec3(0.7, 0.3, 0.9) * randomStarColorSeed);\n\n      // compress\n      color = color * (0.4 * sin(deltaTimeTwinkle)) + 0.6;\n      // filter\n      color = color * vec3(1.0, 0.1, 0.9 + size);\n      float dimByDensity = 15.0 / float(STARFIELD_LAYERS_COUNT);\n      col += star * size * color * dimByDensity;\n    }\n  }\n\n  return col;\n}\n\nvoid main() {\n  // ShaderToy fragCoord, reconstructed from vUv (see header).\n  vec2 fragCoord = vUv * uResolution;\n\n  // Normalized pixel coordinates centered at screen middle.\n  vec2 uv = (fragCoord - 0.5 * uResolution.xy) / uResolution.y;\n\n  float deltaTime = uTime * 0.01 * uSpeed;\n\n  vec3 col = vec3(0.0);\n\n  float rotAngle = deltaTime * 0.09;\n\n  // Layer accumulation. Integer-counted loop replacing the original\n  // \\`for (float i = 0.0; i < 1.0; i += 1.0/COUNT)\\`. With n in [0, COUNT),\n  // i = n/COUNT reproduces the exact same {0, 1/N, 2/N, ...} sequence and\n  // the same iteration count, so visual output is unchanged; only the loop\n  // form is cross-compile-safe.\n  for (int n = 0; n < STARFIELD_LAYERS_COUNT; n++) {\n    float i = float(n) / float(STARFIELD_LAYERS_COUNT);\n    float layerDepth = fract(i + deltaTime);\n    float layerScale = mix(MIN_DIVIDE, MAX_DIVIDE, layerDepth);\n    float layerFader = layerDepth * smoothstep(0.1, 1.1, layerDepth);\n    float layerOffset = i * (3430.0 + fract(i));\n    mat2 layerRot = Rotate(rotAngle * i * -10.0);\n    uv *= layerRot;\n    vec2 starfieldUv = uv * layerScale * uScale + layerOffset;\n    col += StarFieldLayer(starfieldUv, rotAngle) * layerFader;\n  }\n\n  // Glow + color grade, then opaque procedural background.\n  col *= uBrightness * uColor;\n  oColor = vec4(col, 1.0);\n}\n`;\n\nexport const GODRAYS_FRAG_SRC = `#version 300 es\nprecision highp float;\n\nuniform float uTime;          // seconds, monotonically increasing\nuniform vec2 uResolution;     // framebuffer size in pixels\nuniform vec3 uLightColor;     // ray tint (linear-ish RGB, 0..1)\nuniform float uRayCount;      // number of ray bands\nuniform float uRaySpeed;      // drift speed\nuniform float uRayIntensity;  // overall brightness / additive strength\nuniform float uRaySoftness;   // edge falloff exponent (higher = crisper shafts)\nuniform float uTopGlow;       // extra glow concentrated near the top\nuniform float uFadeDistance;  // vertical falloff from the top\nuniform float uWobbleAmount;  // horizontal wobble magnitude\nuniform float uWobbleSpeed;   // wobble animation speed\n\nin highp vec2 vUv;\nout vec4 oColor;\n\nfloat hash(float n) {\n    return fract(sin(n) * 43758.5453123);\n}\n\nfloat noise(vec2 p) {\n    vec2 i = floor(p);\n    vec2 f = fract(p);\n\n    f = f * f * (3.0 - 2.0 * f);\n\n    float a = hash(i.x + i.y * 57.0);\n    float b = hash(i.x + 1.0 + i.y * 57.0);\n    float c = hash(i.x + (i.y + 1.0) * 57.0);\n    float d = hash(i.x + 1.0 + (i.y + 1.0) * 57.0);\n\n    return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\n}\n\nvoid main() {\n    // vUv is already 0..1 with bottom-left origin; this is the Shadertoy \\`uv\\`.\n    vec2 uv = vUv;\n\n    float aspect = uResolution.x / uResolution.y;\n    vec2 p = uv;\n    p.x = (p.x - 0.5) * aspect + 0.5;\n\n    float t = uTime;\n    float fromTop = 1.0 - uv.y;\n\n    float verticalFade = exp(-fromTop * uFadeDistance);\n    float topGlow = exp(-fromTop * 8.0) * uTopGlow;\n\n    float wobble =\n        (noise(vec2(uv.y * 3.0, t * uWobbleSpeed)) - 0.5) * uWobbleAmount;\n\n    float rayCoord = (p.x + wobble) * uRayCount;\n\n    float raysA = sin(rayCoord + t * uRaySpeed);\n    float raysB = sin(rayCoord * 1.73 - t * uRaySpeed * 0.7);\n\n    float rays = raysA * 0.65 + raysB * 0.35;\n    rays = rays * 0.5 + 0.5;\n    rays = pow(rays, uRaySoftness);\n\n    float shimmer = noise(vec2(uv.x * 10.0, uv.y * 4.0 - t * 0.3));\n    rays *= mix(0.75, 1.25, shimmer);\n\n    float alpha = rays * verticalFade * uRayIntensity;\n    alpha += topGlow * uRayIntensity;\n    alpha = clamp(alpha, 0.0, 1.0);\n\n    // Premultiplied additive output: rgb already scaled by alpha.\n    vec3 rayColor = uLightColor * alpha;\n    oColor = vec4(rayColor, alpha);\n}\n`;\n\nexport const FIREFLIES_FRAG_SRC = `#version 300 es\nprecision highp float;\n\nuniform float uTime;\nuniform vec2 uResolution;\nuniform float uGlowSize;\nuniform float uDotSize;\nuniform float uSpeed;\nuniform float uTwinkle;\nuniform vec3 uColor;\n\nin highp vec2 vUv;\nout vec4 oColor;\n\n#define FIREFLY_COUNT 36\n\nfloat hash(float n) {\n    return fract(sin(n) * 43758.5453123);\n}\n\nvec2 fireflyPos(float id, float t) {\n    vec2 base = vec2(hash(id * 12.7), hash(id * 31.3));\n    float a = hash(id * 5.1) * 6.28318;\n    float b = hash(id * 9.7) * 6.28318;\n    vec2 drift = vec2(sin(t * uSpeed + a), cos(t * uSpeed * 0.73 + b)) * 0.12;\n    return fract(base + drift);\n}\n\nvoid main() {\n    vec2 uv = vUv;\n    vec2 p = uv;\n    p.x *= uResolution.x / uResolution.y;\n    vec3 color = vec3(0.0);\n    float alpha = 0.0;\n    for (int i = 0; i < FIREFLY_COUNT; i++) {\n        float id = float(i);\n        vec2 pos = fireflyPos(id, uTime);\n        pos.x *= uResolution.x / uResolution.y;\n        float d = length(p - pos);\n        float phase = hash(id * 17.1) * 6.28318;\n        float pulse = 0.5 + 0.5 * sin(uTime * uTwinkle + phase);\n        pulse = pulse * pulse * sqrt(pulse);  // pow(pulse, 2.5): a non-integer pow is ~2 transcendentals on mobile; this is 1 sqrt + 2 muls\n        float glow = exp(-d * d / (uGlowSize * uGlowSize));\n        float core = smoothstep(uDotSize, 0.0, d);\n        float intensity = pulse * (glow * 0.55 + core * 1.4);\n        color += uColor * intensity;\n        alpha += intensity * 0.55;\n    }\n    alpha = clamp(alpha, 0.0, 1.0);\n    color = clamp(color, 0.0, 1.0);\n    oColor = vec4(color, alpha);\n}\n`;\n\nexport const SIMIANLIGHTS_FRAG_SRC = `#version 300 es\nprecision highp float;\n\nuniform float uTime;          // seconds, monotonically increasing; range [0, inf)\nuniform vec2 uResolution;     // framebuffer size in pixels; both components > 0\nuniform vec3 uColor;          // overall tint / color grade; [1,1,1] = untinted\nuniform float uBrightness;    // final glow multiplier; 1.0 = stock\nuniform float uSpeed;         // drift + rotation rate; 1.0 = stock, 0 freezes\nuniform float uTwinkleSpeed;  // star color-cycle rate; 1.0 = stock\nuniform float uScale;         // starfield zoom / density; >1 = more, smaller stars\nuniform float uStarGlow;      // star-core size; 1.0 = stock\n\nin highp vec2 vUv;\nout vec4 oColor;\n\nconst float PI = 3.14159265;\nconst float MIN_DIVIDE = 3.0;\nconst float MAX_DIVIDE = 0.01;\n// Number of stacked starfield layers. Compile-time constant so the layer\n// loop has a fixed integer bound (cross-compile-safe; no float loop counter).\nconst int STARFIELD_LAYERS_COUNT = 4;\n\nmat2 Rotate(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nfloat Star(vec2 uv, float flaresize, float rotAngle, float randomN) {\n  float d = length(uv);\n  // Star core. Guard the division: length(uv) can be exactly 0 at a cell\n  // center, which yields inf/NaN under Metal. max(d, 1e-4) caps the core\n  // brightness without visibly changing the look (the concentric\n  // smoothstep fade below already clamps it).\n  float starcore = 0.09 * uStarGlow / max(d, 1e-4);\n  uv *= Rotate(-2.0 * PI * rotAngle);\n  float flareMax = 1.0;\n\n  // flares\n  float starflares = max(0.0, flareMax - abs(uv.x * uv.y * 3000.0));\n  starcore += starflares * flaresize;\n  uv *= Rotate(PI * 0.25);\n  starflares = max(0.0, flareMax - abs(uv.x * uv.y * 3000.0));\n  starcore += starflares * 0.3 * flaresize;\n  // light can't go forever, fade it concentrically.\n  starcore *= smoothstep(1.0, 0.05, d);\n  return starcore;\n}\n\nfloat PseudoRandomizer(vec2 p) {\n  // not really random, but it looks random.\n  p = fract(p * vec2(123.45, 345.67));\n  p += dot(p, p + 45.32);\n  return fract(p.x * p.y);\n}\n\nvec3 StarFieldLayer(vec2 uv, float rotAngle) {\n  vec3 col = vec3(0.0);\n\n  vec2 gv = fract(uv) - 0.5;\n  vec2 id = floor(uv);\n\n  float deltaTimeTwinkle = uTime * 0.35 * uTwinkleSpeed;\n\n  // sweep the 8 neighbors plus the home cell so stars are not clipped at\n  // cell borders. Constant 3x3 bounds.\n  for (int y = -1; y <= 1; y++) {\n    for (int x = -1; x <= 1; x++) {\n      vec2 offset = vec2(float(x), float(y));\n\n      float randomN = PseudoRandomizer(id + offset); // 0..1\n      float randoX = randomN - 0.5;\n      float randoY = fract(randomN * 45.0) - 0.5;\n      vec2 randomPosition = gv - offset - vec2(randoX, randoY);\n      // fract trick: random sizes\n      float size = fract(randomN * 1356.33);\n      float flareSwitch = smoothstep(0.9, 1.0, size);\n      float star = Star(randomPosition, flareSwitch, rotAngle, randomN);\n\n      // fract trick: random colors\n      float randomStarColorSeed = fract(randomN * 2150.0) * (3.0 * PI) * deltaTimeTwinkle;\n      vec3 color = sin(vec3(0.7, 0.3, 0.9) * randomStarColorSeed);\n\n      // compress\n      color = color * (0.4 * sin(deltaTimeTwinkle)) + 0.6;\n      // filter\n      color = color * vec3(1.0, 0.1, 0.9 + size);\n      float dimByDensity = 15.0 / float(STARFIELD_LAYERS_COUNT);\n      col += star * size * color * dimByDensity;\n    }\n  }\n\n  return col;\n}\n\nvoid main() {\n  // ShaderToy fragCoord, reconstructed from vUv (see header).\n  vec2 fragCoord = vUv * uResolution;\n\n  // Normalized pixel coordinates centered at screen middle.\n  vec2 uv = (fragCoord - 0.5 * uResolution.xy) / uResolution.y;\n\n  float deltaTime = uTime * 0.01 * uSpeed;\n\n  vec3 col = vec3(0.0);\n\n  float rotAngle = deltaTime * 0.09;\n\n  // Layer accumulation. Integer-counted loop replacing the original\n  // \\`for (float i = 0.0; i < 1.0; i += 1.0/COUNT)\\`. With n in [0, COUNT),\n  // i = n/COUNT reproduces the exact same {0, 1/N, 2/N, ...} sequence and\n  // the same iteration count, so visual output is unchanged; only the loop\n  // form is cross-compile-safe.\n  for (int n = 0; n < STARFIELD_LAYERS_COUNT; n++) {\n    float i = float(n) / float(STARFIELD_LAYERS_COUNT);\n    float layerDepth = fract(i + deltaTime);\n    float layerScale = mix(MIN_DIVIDE, MAX_DIVIDE, layerDepth);\n    float layerFader = layerDepth * smoothstep(0.1, 1.1, layerDepth);\n    float layerOffset = i * (3430.0 + fract(i));\n    mat2 layerRot = Rotate(rotAngle * i * -10.0);\n    uv *= layerRot;\n    vec2 starfieldUv = uv * layerScale * uScale + layerOffset;\n    col += StarFieldLayer(starfieldUv, rotAngle) * layerFader;\n  }\n\n  // Glow + color grade, then opaque procedural background.\n  col *= uBrightness * uColor;\n  oColor = vec4(col, 1.0);\n}\n`;\n\nexport const ANAMORPHIC_LENSFLARE_FRAG_SRC = `#version 300 es\nprecision highp float;\n\nuniform float uTime;          // seconds, monotonically increasing; range [0, inf)\nuniform float uFlareX;        // flare X position, 0..1 (drifts slowly around this)\nuniform float uFlareY;        // flare Y position, 0..1 (0 = bottom)\nuniform float uIntensity;     // overall brightness multiplier\nuniform float uStreakLength;  // horizontal streak reach; higher = longer\nuniform float uStreakWidth;   // main streak vertical tightness; higher = thinner\nuniform float uGhostStrength; // optical-ghost strength along the flare axis\nuniform vec3 uWarmColor;      // core / warm streak tint\nuniform vec3 uBlueColor;      // halo / wide-streak tint\nuniform vec3 uPinkColor;      // secondary streak / ghost tint\n\nin highp vec2 vUv;\nout vec4 oColor;\n\nfloat softOrb(vec2 uv, vec2 center, float radius) {\n  float d = length(uv - center);\n  float q = d / radius;  // pow(q, 2.0) -> q*q; spirv-opt does not strength-reduce it\n  return exp(-q * q);\n}\n\nfloat softStreak(vec2 uv, vec2 center, float width, float length) {\n  float yFalloff = exp(-abs(uv.y - center.y) * width);\n  float xFalloff = exp(-abs(uv.x - center.x) * length);\n  return yFalloff * xFalloff;\n}\n\nvoid main() {\n  // ShaderToy uv = fragCoord / iResolution; identical to vUv here.\n  vec2 uv = vUv;\n\n  // Slow horizontal drift.\n  float horizontalDrift = sin(uTime * 0.18) * 0.10;\n  vec2 flarePos = vec2(uFlareX + horizontalDrift, uFlareY);\n\n  vec3 col = vec3(0.0);\n  float alpha = 0.0;\n\n  // Main source.\n  float core = softOrb(uv, flarePos, 0.022);\n  float bloom = softOrb(uv, flarePos, 0.095);\n  float outerHalo = softOrb(uv, flarePos, 0.28);\n\n  col += vec3(1.0) * core * 1.8;\n  col += uWarmColor * bloom * 0.95;\n  col += uBlueColor * outerHalo * 0.16;\n\n  alpha += core * 0.45;\n  alpha += bloom * 0.22;\n  alpha += outerHalo * 0.045;\n\n  // Moving streak intensity.\n  float sweepGlow = 0.85 + 0.15 * sin(uTime * 0.7 + uv.x * 8.0);\n\n  // Main + wide anamorphic streaks.\n  float mainStreak = softStreak(uv, flarePos, uStreakWidth, uStreakLength);\n  float wideStreak = softStreak(uv, flarePos, 70.0, uStreakLength * 0.65);\n\n  col += uWarmColor * mainStreak * 1.15 * sweepGlow;\n  col += uBlueColor * wideStreak * 0.26 * sweepGlow;\n\n  alpha += mainStreak * 0.18;\n  alpha += wideStreak * 0.055;\n\n  // Secondary colored streaks.\n  float upperLine = softStreak(uv, flarePos + vec2(0.0, 0.012), 260.0, uStreakLength * 0.7);\n  float lowerLine = softStreak(uv, flarePos - vec2(0.0, 0.010), 240.0, uStreakLength * 0.8);\n\n  col += uBlueColor * upperLine * 0.22;\n  col += uPinkColor * lowerLine * 0.16;\n\n  alpha += (upperLine + lowerLine) * 0.035;\n\n  // Optical ghosts along the line from the flare through screen center.\n  vec2 center = vec2(0.5);\n  vec2 axis = center - flarePos;\n\n  vec2 ghost1 = flarePos + axis * 0.45;\n  vec2 ghost2 = flarePos + axis * 0.85;\n  vec2 ghost3 = flarePos + axis * 1.28;\n  vec2 ghost4 = flarePos - axis * 0.35;\n\n  float g1 = softOrb(uv, ghost1, 0.070);\n  float g2 = softOrb(uv, ghost2, 0.115);\n  float g3 = softOrb(uv, ghost3, 0.055);\n  float g4 = softOrb(uv, ghost4, 0.095);\n\n  col += uPinkColor * g1 * 0.18 * uGhostStrength;\n  col += uBlueColor * g2 * 0.15 * uGhostStrength;\n  col += uWarmColor * g3 * 0.22 * uGhostStrength;\n  col += uBlueColor * g4 * 0.10 * uGhostStrength;\n\n  alpha += g1 * 0.040 * uGhostStrength;\n  alpha += g2 * 0.035 * uGhostStrength;\n  alpha += g3 * 0.050 * uGhostStrength;\n  alpha += g4 * 0.030 * uGhostStrength;\n\n  // Tiny shimmer to keep it alive.\n  float shimmer = 0.97 + 0.03 * sin(uTime * 2.1);\n\n  col *= uIntensity * shimmer;\n  alpha *= uIntensity * shimmer;\n\n  alpha = clamp(alpha, 0.0, 1.0);\n  oColor = vec4(col, alpha);\n}\n`;\n\nexport const LIGHT_BEAMS_AND_MOTES_FRAG_SRC = `#version 300 es\nprecision highp float;\n\nuniform float uTime;          // seconds, monotonically increasing; range [0, inf)\nuniform float uSpeed;         // animation rate; 1.0 = stock, 0 freezes the field\nuniform float uBeamSoftness;  // beam polygon edge softness\nuniform float uOverlayAlpha;  // overall overlay opacity, applied to final alpha\n\n// Per-beam: a row-major quad (TL, TR, BL, BR; y-up), a color, a fill strength\n// (absolute), and an on/off flag. A disabled beam's quadMask + sins do not execute\n// at all (the flag is uniform, so the branch is coherent across every fragment) --\n// that is how you stop paying for beams you are not using.\nuniform vec2 uBeam1Poly[4];\nuniform vec3 uBeam1Color;\nuniform float uBeam1Alpha;\nuniform float uBeam1On;\nuniform vec2 uBeam2Poly[4];\nuniform vec3 uBeam2Color;\nuniform float uBeam2Alpha;\nuniform float uBeam2On;\nuniform vec2 uBeam3Poly[4];\nuniform vec3 uBeam3Color;\nuniform float uBeam3Alpha;\nuniform float uBeam3On;\n\nuniform float uMoteAlpha;     // mote brightness (absolute)\nuniform float uGlowSize;      // mote glow radius, in mote-size multiples\nuniform float uMoteCount;     // active motes (<= MOTE_COUNT); a coherent break trims the loop\n\nin highp vec2 vUv;\nout vec4 oColor;\n\n// ---------- Mote controls (internal constants) ----------\n#define MOTE_COUNT        128   // loop bound: compile-time constant, not a uniform\n#define DRIFT_SPEED       0.060\n#define FALL_SPEED        0.012\n#define SWIRL_AMOUNT      0.065\n#define TURBULENCE        0.030\n#define MOTE_SIZE_MIN     0.0013\n#define MOTE_SIZE_MAX     0.0048\n\nfloat hash1(float n) {\n    return fract(sin(n) * 43758.5453123);\n}\n\nvec2 hash2(float n) {\n    return vec2(hash1(n + 11.17), hash1(n + 47.83));\n}\n\nfloat softMote(vec2 uv, vec2 center, float radius) {\n    float d = length(uv - center);\n    float q = d / radius;  // pow(q, 2.0) -> q*q; spirv-opt does not strength-reduce it\n    return exp(-q * q);\n}\n\n// Soft convex quad mask, winding-AGNOSTIC: the corners are user-draggable, so the\n// perimeter can wind either way. A point is inside when it is on the same side of\n// all four edges, whichever side that is; product the positive-side smoothsteps and\n// the negative-side ones and keep the larger.\nfloat quadMask(vec2 p, vec2 a, vec2 b, vec2 c, vec2 d, float softness) {\n    vec2 e0 = b - a;\n    vec2 e1 = c - b;\n    vec2 e2 = d - c;\n    vec2 e3 = a - d;\n    float s0 = e0.x * (p.y - a.y) - e0.y * (p.x - a.x);\n    float s1 = e1.x * (p.y - b.y) - e1.y * (p.x - b.x);\n    float s2 = e2.x * (p.y - c.y) - e2.y * (p.x - c.x);\n    float s3 = e3.x * (p.y - d.y) - e3.y * (p.x - d.x);\n    float inNeg =\n        smoothstep(-softness, softness, -s0) *\n        smoothstep(-softness, softness, -s1) *\n        smoothstep(-softness, softness, -s2) *\n        smoothstep(-softness, softness, -s3);\n    float inPos =\n        smoothstep(-softness, softness, s0) *\n        smoothstep(-softness, softness, s1) *\n        smoothstep(-softness, softness, s2) *\n        smoothstep(-softness, softness, s3);\n    return max(inNeg, inPos);\n}\n\n// Subtle animated variation inside each beam.\nfloat beamTexture(vec2 uv, float seed) {\n    float t = uTime * uSpeed;\n    float broadBands = 0.55 + 0.45 * sin(uv.x * 7.0 + uv.y * 4.0 + t * 0.06 + seed);\n    float fineBands = 0.75 + 0.25 * sin(uv.x * 23.0 - uv.y * 11.0 + t * 0.11 + seed * 2.7);\n    return mix(0.65, 1.0, broadBands * fineBands);\n}\n\n// Geometric coverage of one row-major beam quad at uv (mask * texture, 0..~1), with\n// the row-major -> perimeter reorder folded in. Independent of the beam's alpha.\nfloat beamShape(vec2 uv, vec2 poly[4], float seed) {\n    return quadMask(uv, poly[0], poly[1], poly[3], poly[2], uBeamSoftness) * beamTexture(uv, seed);\n}\n\n// Evaluate the three beams once. Returns the GEOMETRIC coverage sum (used to gate +\n// brighten motes and to drive the haze, so per-beam alpha never dims the motes);\n// writes \\`color\\` (the geometry-weighted beam hue, for fill and motes) and \\`litSum\\`\n// (the alpha-weighted amount, the actual fill brightness/opacity).\nfloat evalBeams(vec2 uv, out vec3 color, out float litSum) {\n    float a1 = 0.0;\n    float a2 = 0.0;\n    float a3 = 0.0;\n    if (uBeam1On > 0.5) a1 = beamShape(uv, uBeam1Poly, 1.0);\n    if (uBeam2On > 0.5) a2 = beamShape(uv, uBeam2Poly, 8.0);\n    if (uBeam3On > 0.5) a3 = beamShape(uv, uBeam3Poly, 14.0);\n\n    float geomSum = a1 + a2 + a3;\n    color = (uBeam1Color * a1 + uBeam2Color * a2 + uBeam3Color * a3) / max(geomSum, 0.0001);\n    litSum = a1 * uBeam1Alpha + a2 * uBeam2Alpha + a3 * uBeam3Alpha;\n    return geomSum;\n}\n\n// Accumulate the dust motes for ALL on beams in ONE loop. Each mote is round-\n// robined to an on beam (mote n -> the (n mod nActive)-th on beam) and spawned in\n// THAT beam's (u,v) space: every mote lands in a beam, takes the beam's color, and\n// gets a cheap (u,v) edge falloff -- no screen-space scatter to cull, no per-mote\n// quadMask. n and nActive are uniform across fragments, so the beam pick is\n// COHERENT (same for every pixel), not a divergent per-pixel branch. Motes drift\n// ALONG the beam (fall in v, swirl in u) and wrap, fading at the boundaries so the\n// wrap is never a visible pop. Total mote count is uMoteCount regardless of how\n// many beams are on -- the on beams share the budget.\nvoid addMotes(vec2 uv, inout vec3 col, inout float alpha) {\n    float nActive = uBeam1On + uBeam2On + uBeam3On;  // on-flags are 0/1\n    if (nActive < 0.5) return;                        // no beams -> no motes\n\n    // Motes may spill past the polygon edge by ~softness so the soft fringe is\n    // populated; the (u,v) falloff dims them there.\n    float fuzz = clamp(uBeamSoftness * 2.0, 0.03, 0.35);\n    float slot = 0.0;  // round-robin cursor over the on beams (a wrapped counter, no per-mote mod)\n\n    for (int n = 0; n < MOTE_COUNT; n++) {\n        if (float(n) >= uMoteCount) break;  // runtime-tunable mote count (coherent break)\n        float seed = float(n) * 91.73;\n\n        // Round-robin: this mote goes to the slot-th on beam. Walk the beams,\n        // counting on ones; the slot-th match wins.\n        float picked = 0.0;\n        vec2 tl = vec2(0.0);\n        vec2 tr = vec2(0.0);\n        vec2 bl = vec2(0.0);\n        vec2 br = vec2(0.0);\n        vec3 color = vec3(0.0);\n        if (uBeam1On > 0.5) {\n            if (abs(picked - slot) < 0.5) {\n                tl = uBeam1Poly[0]; tr = uBeam1Poly[1]; bl = uBeam1Poly[2]; br = uBeam1Poly[3];\n                color = uBeam1Color;\n            }\n            picked += 1.0;\n        }\n        if (uBeam2On > 0.5) {\n            if (abs(picked - slot) < 0.5) {\n                tl = uBeam2Poly[0]; tr = uBeam2Poly[1]; bl = uBeam2Poly[2]; br = uBeam2Poly[3];\n                color = uBeam2Color;\n            }\n            picked += 1.0;\n        }\n        if (uBeam3On > 0.5) {\n            if (abs(picked - slot) < 0.5) {\n                tl = uBeam3Poly[0]; tr = uBeam3Poly[1]; bl = uBeam3Poly[2]; br = uBeam3Poly[3];\n                color = uBeam3Color;\n            }\n            picked += 1.0;\n        }\n\n        float depth = hash1(seed + 3.0);\n        float size = mix(MOTE_SIZE_MIN, MOTE_SIZE_MAX, depth);\n        float speed = mix(0.45, 1.35, hash1(seed + 5.0));\n        float t = uTime * uSpeed * speed;\n\n        // (u,v) in beam space; drift = swirl in u, fall in v. fract wraps within\n        // the beam, so a mote that falls out the spread end reappears at the source.\n        vec2 g = hash2(seed);\n        g.x += sin(t * DRIFT_SPEED * 1.7 + seed) * SWIRL_AMOUNT;\n        g.x += sin(t * DRIFT_SPEED * 3.9 + seed * 0.41) * TURBULENCE;\n        g.y += uTime * uSpeed * FALL_SPEED * speed * 6.0;\n        g.y += sin(t * DRIFT_SPEED * 2.4 + seed * 0.37) * SWIRL_AMOUNT * 0.55;\n        g = fract(g);\n\n        // Expand to [-fuzz, 1+fuzz] so motes populate the soft fringe, then map\n        // bilinearly onto the quad.\n        vec2 q = g * (1.0 + 2.0 * fuzz) - fuzz;\n        vec2 pos = mix(mix(tl, tr, q.x), mix(bl, br, q.x), q.y);\n\n        // Cheap soft-edge falloff in (u,v), replacing the per-mote quadMask.\n        float edge =\n            smoothstep(0.0, fuzz, q.x) * smoothstep(0.0, fuzz, 1.0 - q.x) *\n            smoothstep(0.0, fuzz, q.y) * smoothstep(0.0, fuzz, 1.0 - q.y);\n\n        float mote = softMote(uv, pos, size);\n        float core = softMote(uv, pos, size * 0.42);\n        float glow = softMote(uv, pos, size * uGlowSize);\n\n        float shimmer =\n            0.72 + 0.28 * sin(uTime * uSpeed * mix(0.22, 0.95, hash1(seed + 9.0)) + seed);\n        float strength = mix(0.15, 1.0, depth) * shimmer * edge * uMoteAlpha;\n\n        col += color * glow * strength * 0.12;\n        col += color * mote * strength * 0.36;\n        col += vec3(1.0) * core * strength * 0.10;\n\n        alpha += glow * strength * 0.030;\n        alpha += mote * strength * 0.105;\n        alpha += core * strength * 0.110;\n\n        slot += 1.0;\n        if (slot >= nActive) slot = 0.0;  // wrap the round-robin cursor\n    }\n}\n\nvoid main() {\n    // vUv is already 0..1 with bottom-left origin; this is the Shadertoy uv.\n    vec2 uv = vUv;\n\n    vec3 col = vec3(0.0);\n    float alpha = 0.0;\n\n    vec3 beamColor;\n    float litSum;\n    float cover = evalBeams(uv, beamColor, litSum);\n\n    col += beamColor * litSum;       // litSum carries each beam's per-beam alpha\n    alpha += litSum * 0.45;\n\n    // One loop; each mote is round-robined into an on beam and spawned there.\n    addMotes(uv, col, alpha);\n\n    float haze =\n        cover * cover * (0.6 + 0.4 * sin(uv.x * 8.0 + uv.y * 5.0 + uTime * uSpeed * 0.08));\n    col += beamColor * haze * 0.018;\n    alpha += haze * 0.010;\n\n    alpha = clamp(alpha * uOverlayAlpha, 0.0, 1.0);\n    oColor = vec4(col, alpha);\n}\n`;\n\nexport const CORPORATE_BLOBS_FRAG_SRC = `#version 300 es\nprecision highp float;\n\nuniform float uTime;          // seconds, monotonically increasing; range [0, inf)\nuniform vec2 uResolution;     // framebuffer size in pixels; both components > 0\nuniform vec3 uColor;          // overall tint / color grade; [1,1,1] = stock colors\nuniform float uGlobalAlpha;   // overall blob opacity; stock 0.58\nuniform float uScale;         // global blob size multiplier; stock 2.55\nuniform float uEdgePull;      // pushes blobs outward from center; stock 0.32\nuniform float uCenterClear;   // radius around center that repels blobs; stock 0.42\nuniform float uMotionAmount;  // positional drift magnitude; 1.0 = stock, 0 = still\nuniform float uMotionSpeed;   // drift + morph rate; 1.0 = stock, 0 freezes motion\nuniform float uEdgeSoftness;  // blob edge falloff; stock 0.024\n// Per-blob base colors, multiplied by uColor at output. Defaults (the stock\n// brand palette) live in CORPORATE_BLOBS_CONTROLS.\nuniform vec3 uBlobColor1;     // stock: light blue\nuniform vec3 uBlobColor2;     // stock: dark green\nuniform vec3 uBlobColor3;     // stock: yellow\nuniform vec3 uBlobColor4;     // stock: orange\nuniform vec3 uBlobColor5;     // stock: light green\nuniform vec3 uBlobColor6;     // stock: magenta\nuniform vec3 uBlobColor7;     // stock: brown\nuniform vec3 uBlobColor8;     // stock: dark blue\n\nin highp vec2 vUv;\nout vec4 oColor;\n\n// BLOB_COUNT must stay a compile-time constant (GLSL ES loop bound).\n#define BLOB_COUNT            8\n\n// Internal animation constants (not tunable; keep the look coherent).\n#define CENTER_CLEAR_PUSH     0.34\n#define SCALE_PULSE_AMOUNT    0.10\n#define SCALE_PULSE_SPEED     0.42\n#define ROTATION_SWAY_AMOUNT  0.12\n#define ROTATION_SWAY_SPEED   0.11\n#define SHAPE_MORPH_SPEED     1.00\n\nstruct Blob {\n    vec2 pos;\n    float scale;\n    float opacity;\n    float speed;\n    float drift;\n    float rotation;\n    float variant;\n    vec3 color;\n};\n\nBlob getBlob(float i) {\n    if (i < 0.5) return Blob(vec2(-1.18, -0.55), 0.62, 0.48, 0.22, 0.14, 0.10, 0.0, uBlobColor1);\n    if (i < 1.5) return Blob(vec2( 1.12, -0.35), 0.66, 0.40, 0.18, 0.13, 1.00, 1.0, uBlobColor2);\n    if (i < 2.5) return Blob(vec2( 0.95,  0.88), 0.58, 0.44, 0.20, 0.14, 2.20, 2.0, uBlobColor3);\n    if (i < 3.5) return Blob(vec2(-0.98,  0.82), 0.56, 0.38, 0.16, 0.12, 0.70, 3.0, uBlobColor4);\n    if (i < 4.5) return Blob(vec2( 1.28,  0.28), 0.50, 0.34, 0.24, 0.11, 1.80, 4.0, uBlobColor5);\n    if (i < 5.5) return Blob(vec2(-0.25, -1.12), 0.54, 0.36, 0.19, 0.11, 2.60, 5.0, uBlobColor6);\n    if (i < 6.5) return Blob(vec2(-1.30,  0.10), 0.48, 0.30, 0.17, 0.12, 0.40, 6.0, uBlobColor7);\n    return             Blob(vec2( 0.28,  1.18), 0.52, 0.30, 0.14, 0.10, 0.90, 7.0, uBlobColor8);\n}\n\nmat2 rotate2d(float a) {\n    float s = sin(a);\n    float c = cos(a);\n    return mat2(c, -s, s, c);\n}\n\nfloat variantRadius(float angle, float variant, float phase) {\n    float r = 1.0;\n\n    if (variant < 0.5) {\n        r += 0.115 * sin(angle * 2.0 + 0.20 + phase * 0.20);\n        r += 0.075 * sin(angle * 3.0 - 1.10 - phase * 0.13);\n        r += 0.035 * sin(angle * 5.0 + 2.00 + phase * 0.09);\n    } else if (variant < 1.5) {\n        r += 0.090 * sin(angle * 2.0 - 0.80 + phase * 0.18);\n        r += 0.105 * sin(angle * 3.0 + 0.70 - phase * 0.10);\n        r += 0.030 * sin(angle * 6.0 - 1.50 + phase * 0.08);\n    } else if (variant < 2.5) {\n        r += 0.130 * sin(angle * 2.0 + 1.10 + phase * 0.16);\n        r += 0.060 * sin(angle * 4.0 - 0.30 - phase * 0.12);\n        r += 0.045 * sin(angle * 5.0 + 2.80 + phase * 0.07);\n    } else if (variant < 3.5) {\n        r += 0.080 * sin(angle * 2.0 + 2.30 + phase * 0.14);\n        r += 0.120 * sin(angle * 3.0 - 0.40 - phase * 0.11);\n        r += 0.040 * sin(angle * 7.0 + 1.10 + phase * 0.06);\n    } else if (variant < 4.5) {\n        r += 0.035 * sin(angle * 2.0 + 0.10 + phase * 0.12);\n        r += 0.030 * sin(angle * 3.0 + 1.80 - phase * 0.09);\n        r += 0.020 * sin(angle * 5.0 - 0.90 + phase * 0.05);\n    } else if (variant < 5.5) {\n        r += 0.145 * sin(angle * 2.0 - 1.30 + phase * 0.17);\n        r += 0.070 * sin(angle * 3.0 + 2.40 - phase * 0.11);\n        r += 0.035 * sin(angle * 5.0 + 0.20 + phase * 0.08);\n    } else if (variant < 6.5) {\n        r += 0.045 * sin(angle * 2.0 + 1.70 + phase * 0.10);\n        r += 0.035 * sin(angle * 4.0 - 2.10 - phase * 0.08);\n        r += 0.025 * sin(angle * 6.0 + 0.50 + phase * 0.05);\n    } else {\n        r += 0.170 * sin(angle * 2.0 + 2.80 + phase * 0.20);\n        r += 0.090 * sin(angle * 3.0 - 1.90 - phase * 0.15);\n        r += 0.055 * sin(angle * 5.0 + 0.80 + phase * 0.09);\n    }\n\n    return r;\n}\n\nvec2 applyCenterRepulsor(vec2 center) {\n    float d = length(center);\n    vec2 dir = normalize(center + vec2(0.0001, 0.0001));\n\n    center += dir * uEdgePull;\n\n    float centerInfluence = 1.0 - smoothstep(uCenterClear, uCenterClear + 0.35, d);\n    center += dir * centerInfluence * CENTER_CLEAR_PUSH;\n\n    return center;\n}\n\nfloat animatedScale(float baseScale, float blobIndex, float blobSpeed) {\n    float localPhase =\n        uTime * SCALE_PULSE_SPEED * (0.65 + blobSpeed * 1.35) +\n        blobIndex * 2.731;\n\n    float pulseA = sin(localPhase);\n    float pulseB = sin(localPhase * 0.47 + blobIndex * 5.13) * 0.45;\n\n    float scaleMultiplier = 1.0 + (pulseA + pulseB) * SCALE_PULSE_AMOUNT;\n\n    return baseScale * max(0.05, scaleMultiplier);\n}\n\nfloat blobMask(vec2 p, vec2 center, Blob b, float phase, float liveScale) {\n    vec2 q = p - center;\n\n    vec2 squash = vec2(\n        1.0 + 0.14 * sin(b.variant * 1.91),\n        1.0 + 0.14 * cos(b.variant * 2.37)\n    );\n\n    float rotationSway =\n        sin(uTime * ROTATION_SWAY_SPEED * (0.6 + b.speed) + b.variant * 3.0) *\n        ROTATION_SWAY_AMOUNT;\n\n    q = rotate2d(b.rotation + rotationSway) * q;\n    q /= squash;\n\n    float angle = atan(q.y, q.x);\n    float dist = length(q);\n\n    float r = liveScale * uScale * 0.5 * variantRadius(angle, b.variant, phase);\n\n    return 1.0 - smoothstep(r, r + uEdgeSoftness, dist);\n}\n\nvoid main() {\n    vec2 uv = vUv;\n\n    vec2 p = uv * 2.0 - 1.0;\n    p.x *= uResolution.x / uResolution.y;\n\n    vec3 blobCol = vec3(0.0);\n    float blobAlpha = 0.0;\n\n    // Integer-counted loop over a compile-time bound; i is reconstructed as\n    // float(n), so the per-blob lookups and phases match the prototype.\n    for (int n = 0; n < BLOB_COUNT; n++) {\n        float i = float(n);\n        Blob b = getBlob(i);\n\n        float phase =\n            uTime * b.speed * uMotionSpeed * SHAPE_MORPH_SPEED +\n            i * 4.137;\n\n        vec2 center = b.pos;\n\n        center.x += sin(phase * 0.41 + i * 1.70) * b.drift * uMotionAmount;\n        center.x += sin(phase * 0.19 + i * 3.10) * b.drift * uMotionAmount * 0.45;\n        center.y += cos(phase * 0.33 + i * 2.30) * b.drift * uMotionAmount * 0.75;\n        center.y += sin(phase * 0.17 + i * 4.40) * b.drift * uMotionAmount * 0.35;\n\n        center = applyCenterRepulsor(center);\n\n        float liveScale = animatedScale(b.scale, i, b.speed);\n        float mask = blobMask(p, center, b, phase, liveScale);\n\n        float inner = pow(mask, 1.35);\n        float rim = mask * (1.0 - smoothstep(0.45, 1.0, mask));\n\n        vec3 gelColor = b.color * inner + b.color * rim * 0.18;\n        float a = mask * b.opacity * uGlobalAlpha;\n\n        blobCol += gelColor * a * (1.0 - blobAlpha);\n        blobAlpha += a * (1.0 - blobAlpha);\n    }\n\n    // Premultiplied output; tint grades the (premultiplied) color, not alpha.\n    oColor = vec4(blobCol * uColor, blobAlpha);\n}\n`;\n\n// Generative background shaders, by name. The generic shader processor and the\n// dispatch iterate this; adding a generative .frag adds an entry here.\nexport const SHADER_SOURCES: Readonly<Record<string, string>> = {\n  'plasma': PLASMA_FRAG_SRC,\n  'clouds': CLOUDS_FRAG_SRC,\n  'nebula': NEBULA_FRAG_SRC,\n  'godrays': GODRAYS_FRAG_SRC,\n  'fireflies': FIREFLIES_FRAG_SRC,\n  'simianlights': SIMIANLIGHTS_FRAG_SRC,\n  'anamorphic-lensflare': ANAMORPHIC_LENSFLARE_FRAG_SRC,\n  'light-beams-and-motes': LIGHT_BEAMS_AND_MOTES_FRAG_SRC,\n  'corporate-blobs': CORPORATE_BLOBS_FRAG_SRC,\n} as const;\n"]}
+{"version":3,"file":"shaders.generated.d.ts","sourceRoot":"","sources":["../../web-driver/shaders.generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,0NAQhC,CAAC;AAEF,eAAO,MAAM,yBAAyB,oLAQrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6oBAwBnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,2QAWpC,CAAC;AAEF,eAAO,MAAM,0BAA0B,kgBAiBtC,CAAC;AAEF,eAAO,MAAM,yBAAyB,2eAiBrC,CAAC;AAEF,eAAO,MAAM,eAAe,q6CAkC3B,CAAC;AAEF,eAAO,MAAM,eAAe,klGAuG3B,CAAC;AAEF,eAAO,MAAM,eAAe,iwJAiI3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,u1EAyE5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,kmDAoD9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,+vJAiIjC,CAAC;AAEF,eAAO,MAAM,6BAA6B,ssHA4GzC,CAAC;AAEF,eAAO,MAAM,8BAA8B,qrTA2O1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,wiPAsMpC,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUlD,CAAC"}

package/dist/web-driver/tuning.d.ts

@@ -1,3 +1,4 @@
+import type { MaskInput } from '../src/kaleidoscope/types';
 declare class EffectTuningState {
     blurSigma: number;
     maskHardness: number;
@@ -12,6 +13,19 @@ declare class EffectTuningState {
     reset(): void;
 }
 export declare const tuning: EffectTuningState;
+/**
+ * Write the segmentation mask edge (`hardness`, `threshold`) that every
+ * running composite reads each frame. This is the processor-path twin of the
+ * `mask` verb on a `bindKaleidoscope` binding: the mask edge is page-shared
+ * state (one value every kaleidoscope pipeline on the page reads), so a write
+ * here reaches every active pipeline on the next frame with no rebuild.
+ * Values clamp to the `mask` verb's ranges (hardness 0..1, threshold
+ * 0.05..0.95).
+ *
+ * Module-level rather than per-instance because that is the true scope today;
+ * a per-pipeline mask would be a different (future) API, not this one.
+ */
+export declare const setMaskTuning: (mask: MaskInput) => void;
 /**
  * Derive a smoothstep (lo, hi) range from a hardness factor in [0, 1] and
  * a threshold in [0.05, 0.95]. Matches `MaskTuning.smoothstepRange` on the

package/dist/web-driver/tuning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tuning.d.ts","sourceRoot":"","sources":["../../web-driver/tuning.ts"],"names":[],"mappings":"AAWA,cAAM,iBAAiB;IACrB,SAAS,SAAK;IACd,YAAY,SAAO;IACnB,aAAa,SAAO;IAGpB,2BAA2B,SAAO;IAClC,WAAW,UAAS;IAEpB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAEhC;IAED,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAEnC;IAED,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAEpC;IAED,8BAA8B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAElD;IAED,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAEnC;IAED,KAAK,IAAI,IAAI,CAMZ;CACF;AAED,eAAO,MAAM,MAAM,mBAA0B,CAAC;AAE9C;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,aACpB,MAAM,aACL,MAAM,KAChB,SAAS,CAAC,MAAM,EAAE,MAAM,CAK1B,CAAC","sourcesContent":["// Mutable runtime state for the web GLSL effects. Mirrors\n// android/.../EffectTuning.kt and ios/.../EffectTuning.swift.\n//\n// There are no global set* exports anymore; the mask edge (hardness/threshold)\n// is written here through the setMask closure that `bindKaleidoscope`\n// (src/index.web.ts) wires up, and the composite compositor in\n// `web-driver/effects/*.ts` reads it when uploading uniforms. Writes take effect on\n// the next frame.\n\nconst clamp = (value: number, lo: number, hi: number): number => Math.min(Math.max(value, lo), hi);\n\nclass EffectTuningState {\n  blurSigma = 5;\n  maskHardness = 0.5;\n  maskThreshold = 0.5;\n  // Native-only knobs stored here for cross-platform API parity; the web\n  // MediaPipe pipeline does not currently consume them.\n  segmentationTargetShortSide = 384;\n  debugTiming = false;\n\n  setBlurSigma(value: number): void {\n    this.blurSigma = clamp(value, 0.5, 7);\n  }\n\n  setMaskHardness(value: number): void {\n    this.maskHardness = clamp(value, 0, 1);\n  }\n\n  setMaskThreshold(value: number): void {\n    this.maskThreshold = clamp(value, 0.05, 0.95);\n  }\n\n  setSegmentationTargetShortSide(value: number): void {\n    this.segmentationTargetShortSide = clamp(value, 128, 1080);\n  }\n\n  setDebugTiming(value: boolean): void {\n    this.debugTiming = value;\n  }\n\n  reset(): void {\n    this.blurSigma = 5;\n    this.maskHardness = 0.5;\n    this.maskThreshold = 0.5;\n    this.segmentationTargetShortSide = 384;\n    this.debugTiming = false;\n  }\n}\n\nexport const tuning = new EffectTuningState();\n\n/**\n * Derive a smoothstep (lo, hi) range from a hardness factor in [0, 1] and\n * a threshold in [0.05, 0.95]. Matches `MaskTuning.smoothstepRange` on the\n * Android side; keep in sync.\n *\n * hardness controls width: 0 = soft halo (wide transition), 1 = near-step.\n * threshold controls the center: 0.5 = neutral, higher = reject low-\n * confidence pixels (rejects chair-edge regions), lower = more inclusive.\n */\nexport const maskSmoothstepRange = (\n  hardness: number,\n  threshold: number,\n): readonly [number, number] => {\n  const clampedHardness = clamp(hardness, 0, 1);\n  const clampedThreshold = clamp(threshold, 0.05, 0.95);\n  const width = 0.6 * (1 - clampedHardness) + 0.02;\n  return [clampedThreshold - width * 0.5, clampedThreshold + width * 0.5] as const;\n};\n"]}
+{"version":3,"file":"tuning.d.ts","sourceRoot":"","sources":["../../web-driver/tuning.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI3D,cAAM,iBAAiB;IACrB,SAAS,SAAK;IACd,YAAY,SAAO;IACnB,aAAa,SAAO;IAGpB,2BAA2B,SAAO;IAClC,WAAW,UAAS;IAEpB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAEhC;IAED,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAEnC;IAED,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAEpC;IAED,8BAA8B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAElD;IAED,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAEnC;IAED,KAAK,IAAI,IAAI,CAMZ;CACF;AAED,eAAO,MAAM,MAAM,mBAA0B,CAAC;AAE9C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,SAAU,SAAS,KAAG,IAG/C,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,aACpB,MAAM,aACL,MAAM,KAChB,SAAS,CAAC,MAAM,EAAE,MAAM,CAK1B,CAAC"}

package/dist/web-driver/tuning.js

@@ -2,13 +2,14 @@
 // Mutable runtime state for the web GLSL effects. Mirrors
 // android/.../EffectTuning.kt and ios/.../EffectTuning.swift.
 //
-// There are no global set* exports anymore; the mask edge (hardness/threshold)
-// is written here through the setMask closure that `bindKaleidoscope`
-// (src/index.web.ts) wires up, and the composite compositor in
-// `web-driver/effects/*.ts` reads it when uploading uniforms. Writes take effect on
-// the next frame.
+// The mask edge (hardness/threshold) is written here through exactly two
+// doors: the setMask closure that `bindKaleidoscope` (src/index.web.ts) wires
+// up, and `setMaskTuning` below (re-exported by the `/livekit` subpath for the
+// processor path, where LiveKit owns the sender and there is no binding). The
+// composite compositor in `web-driver/effects/*.ts` reads it when uploading
+// uniforms. Writes take effect on the next frame.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.maskSmoothstepRange = exports.tuning = void 0;
+exports.maskSmoothstepRange = exports.setMaskTuning = exports.tuning = void 0;
 const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
 class EffectTuningState {
     blurSigma = 5;
@@ -42,6 +43,23 @@ class EffectTuningState {
     }
 }
 exports.tuning = new EffectTuningState();
+/**
+ * Write the segmentation mask edge (`hardness`, `threshold`) that every
+ * running composite reads each frame. This is the processor-path twin of the
+ * `mask` verb on a `bindKaleidoscope` binding: the mask edge is page-shared
+ * state (one value every kaleidoscope pipeline on the page reads), so a write
+ * here reaches every active pipeline on the next frame with no rebuild.
+ * Values clamp to the `mask` verb's ranges (hardness 0..1, threshold
+ * 0.05..0.95).
+ *
+ * Module-level rather than per-instance because that is the true scope today;
+ * a per-pipeline mask would be a different (future) API, not this one.
+ */
+const setMaskTuning = (mask) => {
+    exports.tuning.setMaskHardness(mask.hardness);
+    exports.tuning.setMaskThreshold(mask.threshold);
+};
+exports.setMaskTuning = setMaskTuning;
 /**
  * Derive a smoothstep (lo, hi) range from a hardness factor in [0, 1] and
  * a threshold in [0.05, 0.95]. Matches `MaskTuning.smoothstepRange` on the

package/dist/web-driver/tuning.js.map

@@ -1 +1 @@
-{"version":3,"file":"tuning.js","sourceRoot":"","sources":["../../web-driver/tuning.ts"],"names":[],"mappings":";AAAA,0DAA0D;AAC1D,8DAA8D;AAC9D,EAAE;AACF,+EAA+E;AAC/E,sEAAsE;AACtE,+DAA+D;AAC/D,oFAAoF;AACpF,kBAAkB;;;AAElB,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,EAAU,EAAE,EAAU,EAAU,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AAEnG,MAAM,iBAAiB;IACrB,SAAS,GAAG,CAAC,CAAC;IACd,YAAY,GAAG,GAAG,CAAC;IACnB,aAAa,GAAG,GAAG,CAAC;IACpB,uEAAuE;IACvE,sDAAsD;IACtD,2BAA2B,GAAG,GAAG,CAAC;IAClC,WAAW,GAAG,KAAK,CAAC;IAEpB,YAAY,CAAC,KAAa;QACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,eAAe,CAAC,KAAa;QAC3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,gBAAgB,CAAC,KAAa;QAC5B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC;IAED,8BAA8B,CAAC,KAAa;QAC1C,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IAC7D,CAAC;IAED,cAAc,CAAC,KAAc;QAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,KAAK;QACH,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;QACzB,IAAI,CAAC,2BAA2B,GAAG,GAAG,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;CACF;AAEY,QAAA,MAAM,GAAG,IAAI,iBAAiB,EAAE,CAAC;AAE9C;;;;;;;;GAQG;AACI,MAAM,mBAAmB,GAAG,CACjC,QAAgB,EAChB,SAAiB,EACU,EAAE;IAC7B,MAAM,eAAe,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9C,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACtD,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,GAAG,IAAI,CAAC;IACjD,OAAO,CAAC,gBAAgB,GAAG,KAAK,GAAG,GAAG,EAAE,gBAAgB,GAAG,KAAK,GAAG,GAAG,CAAU,CAAC;AACnF,CAAC,CAAC;AARW,QAAA,mBAAmB,GAAnB,mBAAmB,CAQ9B","sourcesContent":["// Mutable runtime state for the web GLSL effects. Mirrors\n// android/.../EffectTuning.kt and ios/.../EffectTuning.swift.\n//\n// There are no global set* exports anymore; the mask edge (hardness/threshold)\n// is written here through the setMask closure that `bindKaleidoscope`\n// (src/index.web.ts) wires up, and the composite compositor in\n// `web-driver/effects/*.ts` reads it when uploading uniforms. Writes take effect on\n// the next frame.\n\nconst clamp = (value: number, lo: number, hi: number): number => Math.min(Math.max(value, lo), hi);\n\nclass EffectTuningState {\n  blurSigma = 5;\n  maskHardness = 0.5;\n  maskThreshold = 0.5;\n  // Native-only knobs stored here for cross-platform API parity; the web\n  // MediaPipe pipeline does not currently consume them.\n  segmentationTargetShortSide = 384;\n  debugTiming = false;\n\n  setBlurSigma(value: number): void {\n    this.blurSigma = clamp(value, 0.5, 7);\n  }\n\n  setMaskHardness(value: number): void {\n    this.maskHardness = clamp(value, 0, 1);\n  }\n\n  setMaskThreshold(value: number): void {\n    this.maskThreshold = clamp(value, 0.05, 0.95);\n  }\n\n  setSegmentationTargetShortSide(value: number): void {\n    this.segmentationTargetShortSide = clamp(value, 128, 1080);\n  }\n\n  setDebugTiming(value: boolean): void {\n    this.debugTiming = value;\n  }\n\n  reset(): void {\n    this.blurSigma = 5;\n    this.maskHardness = 0.5;\n    this.maskThreshold = 0.5;\n    this.segmentationTargetShortSide = 384;\n    this.debugTiming = false;\n  }\n}\n\nexport const tuning = new EffectTuningState();\n\n/**\n * Derive a smoothstep (lo, hi) range from a hardness factor in [0, 1] and\n * a threshold in [0.05, 0.95]. Matches `MaskTuning.smoothstepRange` on the\n * Android side; keep in sync.\n *\n * hardness controls width: 0 = soft halo (wide transition), 1 = near-step.\n * threshold controls the center: 0.5 = neutral, higher = reject low-\n * confidence pixels (rejects chair-edge regions), lower = more inclusive.\n */\nexport const maskSmoothstepRange = (\n  hardness: number,\n  threshold: number,\n): readonly [number, number] => {\n  const clampedHardness = clamp(hardness, 0, 1);\n  const clampedThreshold = clamp(threshold, 0.05, 0.95);\n  const width = 0.6 * (1 - clampedHardness) + 0.02;\n  return [clampedThreshold - width * 0.5, clampedThreshold + width * 0.5] as const;\n};\n"]}
+{"version":3,"file":"tuning.js","sourceRoot":"","sources":["../../web-driver/tuning.ts"],"names":[],"mappings":";AAAA,0DAA0D;AAC1D,8DAA8D;AAC9D,EAAE;AACF,yEAAyE;AACzE,8EAA8E;AAC9E,+EAA+E;AAC/E,8EAA8E;AAC9E,4EAA4E;AAC5E,kDAAkD;;;AAIlD,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,EAAU,EAAE,EAAU,EAAU,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AAEnG,MAAM,iBAAiB;IACrB,SAAS,GAAG,CAAC,CAAC;IACd,YAAY,GAAG,GAAG,CAAC;IACnB,aAAa,GAAG,GAAG,CAAC;IACpB,uEAAuE;IACvE,sDAAsD;IACtD,2BAA2B,GAAG,GAAG,CAAC;IAClC,WAAW,GAAG,KAAK,CAAC;IAEpB,YAAY,CAAC,KAAa;QACxB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,eAAe,CAAC,KAAa;QAC3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,gBAAgB,CAAC,KAAa;QAC5B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC;IAED,8BAA8B,CAAC,KAAa;QAC1C,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IAC7D,CAAC;IAED,cAAc,CAAC,KAAc;QAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,KAAK;QACH,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;QACzB,IAAI,CAAC,2BAA2B,GAAG,GAAG,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;CACF;AAEY,QAAA,MAAM,GAAG,IAAI,iBAAiB,EAAE,CAAC;AAE9C;;;;;;;;;;;GAWG;AACI,MAAM,aAAa,GAAG,CAAC,IAAe,EAAQ,EAAE;IACrD,QAAA,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,QAAA,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAC1C,CAAC,CAAC;AAHW,QAAA,aAAa,GAAb,aAAa,CAGxB;AAEF;;;;;;;;GAQG;AACI,MAAM,mBAAmB,GAAG,CACjC,QAAgB,EAChB,SAAiB,EACU,EAAE;IAC7B,MAAM,eAAe,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9C,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACtD,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,GAAG,IAAI,CAAC;IACjD,OAAO,CAAC,gBAAgB,GAAG,KAAK,GAAG,GAAG,EAAE,gBAAgB,GAAG,KAAK,GAAG,GAAG,CAAU,CAAC;AACnF,CAAC,CAAC;AARW,QAAA,mBAAmB,GAAnB,mBAAmB,CAQ9B","sourcesContent":["// Mutable runtime state for the web GLSL effects. Mirrors\n// android/.../EffectTuning.kt and ios/.../EffectTuning.swift.\n//\n// The mask edge (hardness/threshold) is written here through exactly two\n// doors: the setMask closure that `bindKaleidoscope` (src/index.web.ts) wires\n// up, and `setMaskTuning` below (re-exported by the `/livekit` subpath for the\n// processor path, where LiveKit owns the sender and there is no binding). The\n// composite compositor in `web-driver/effects/*.ts` reads it when uploading\n// uniforms. Writes take effect on the next frame.\n\nimport type { MaskInput } from '../src/kaleidoscope/types';\n\nconst clamp = (value: number, lo: number, hi: number): number => Math.min(Math.max(value, lo), hi);\n\nclass EffectTuningState {\n  blurSigma = 5;\n  maskHardness = 0.5;\n  maskThreshold = 0.5;\n  // Native-only knobs stored here for cross-platform API parity; the web\n  // MediaPipe pipeline does not currently consume them.\n  segmentationTargetShortSide = 384;\n  debugTiming = false;\n\n  setBlurSigma(value: number): void {\n    this.blurSigma = clamp(value, 0.5, 7);\n  }\n\n  setMaskHardness(value: number): void {\n    this.maskHardness = clamp(value, 0, 1);\n  }\n\n  setMaskThreshold(value: number): void {\n    this.maskThreshold = clamp(value, 0.05, 0.95);\n  }\n\n  setSegmentationTargetShortSide(value: number): void {\n    this.segmentationTargetShortSide = clamp(value, 128, 1080);\n  }\n\n  setDebugTiming(value: boolean): void {\n    this.debugTiming = value;\n  }\n\n  reset(): void {\n    this.blurSigma = 5;\n    this.maskHardness = 0.5;\n    this.maskThreshold = 0.5;\n    this.segmentationTargetShortSide = 384;\n    this.debugTiming = false;\n  }\n}\n\nexport const tuning = new EffectTuningState();\n\n/**\n * Write the segmentation mask edge (`hardness`, `threshold`) that every\n * running composite reads each frame. This is the processor-path twin of the\n * `mask` verb on a `bindKaleidoscope` binding: the mask edge is page-shared\n * state (one value every kaleidoscope pipeline on the page reads), so a write\n * here reaches every active pipeline on the next frame with no rebuild.\n * Values clamp to the `mask` verb's ranges (hardness 0..1, threshold\n * 0.05..0.95).\n *\n * Module-level rather than per-instance because that is the true scope today;\n * a per-pipeline mask would be a different (future) API, not this one.\n */\nexport const setMaskTuning = (mask: MaskInput): void => {\n  tuning.setMaskHardness(mask.hardness);\n  tuning.setMaskThreshold(mask.threshold);\n};\n\n/**\n * Derive a smoothstep (lo, hi) range from a hardness factor in [0, 1] and\n * a threshold in [0.05, 0.95]. Matches `MaskTuning.smoothstepRange` on the\n * Android side; keep in sync.\n *\n * hardness controls width: 0 = soft halo (wide transition), 1 = near-step.\n * threshold controls the center: 0.5 = neutral, higher = reject low-\n * confidence pixels (rejects chair-edge regions), lower = more inclusive.\n */\nexport const maskSmoothstepRange = (\n  hardness: number,\n  threshold: number,\n): readonly [number, number] => {\n  const clampedHardness = clamp(hardness, 0, 1);\n  const clampedThreshold = clamp(threshold, 0.05, 0.95);\n  const width = 0.6 * (1 - clampedHardness) + 0.02;\n  return [clampedThreshold - width * 0.5, clampedThreshold + width * 0.5] as const;\n};\n"]}