@1agh/maude 0.42.0 → 0.44.0

package/apps/studio/input-router.tsx

@@ -330,6 +330,16 @@ export function isEditableTarget(t: EventTarget | null): boolean {
   const tag = el.tagName;
   if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
   if (el.isContentEditable) return true;
+  // Dogfood fix — `.isContentEditable` is a computed/inherited property whose
+  // handling of the `contenteditable="plaintext-only"` token (the value the
+  // element-text-edit system uses, canvas-shell.tsx) has had cross-engine/
+  // version inconsistencies. Check the raw attribute too so a tool-letter
+  // shortcut (R, T, N, …) can never fire while that editor has focus,
+  // regardless of whether isContentEditable correctly reflects it in a given
+  // runtime — this was the reported bug (typing "R" while editing in-canvas
+  // text switched to the Rectangle tool).
+  const raw = el.getAttribute?.('contenteditable');
+  if (raw === 'true' || raw === 'plaintext-only' || raw === '') return true;
   return false;
 }
 

package/apps/studio/inspect.ts

@@ -47,6 +47,19 @@ export interface SelectedElement {
    * degrade to canvas-wide — never trust the positional id when stale.
    */
   stale?: boolean;
+  /**
+   * feature-photo-editor (Task 14) — which photo-editing context this
+   * selection is (an artboard `<img>` vs. an annotation `ImageStroke`), and
+   * the resolved `assets/<sha8>.<ext>` source. Client-derived (dom-selection.ts
+   * re-reads the live DOM, including a `data-photo-asset` tag stamped after an
+   * edit bakes) — round-tripped here (not dropped like the OTHER client-only
+   * fields such as `authored`/`computed`/`attrs`) because, unlike those, there
+   * is no cheap way to re-derive it from a plain server-side restore: losing it
+   * silently drops the Inspector's Photo tab on every canvas switch / reconnect
+   * until a fresh click re-selects the element.
+   */
+  photoKind?: 'artboard-img' | 'annotation-image';
+  photoAsset?: string;
 }
 
 /**
@@ -240,6 +253,19 @@ export function createInspect(
       v,
       canvas_mtime: mtimeFor(file),
       ...(id ? { id, canvas: deriveCanvasSlug(file) } : {}),
+      ...(() => {
+        if (sel.photoKind !== 'artboard-img' && sel.photoKind !== 'annotation-image') return {};
+        // `photoAsset` traces back to client-derived DOM state (a
+        // `data-photo-asset` attribute inside the untrusted canvas iframe,
+        // DDR-054) — unlike the sibling `text` field it had no shape/length
+        // constraint before persisting to `_active.json` and broadcasting to
+        // every connected WS peer (security review finding). It's always a
+        // fixed-shape `assets/<sha8>.<ext>` reference, so an unshaped value
+        // is dropped outright rather than merely truncated.
+        const asset = String(sel.photoAsset || '');
+        if (!/^assets\/[0-9a-f]{8}\.[a-z0-9]+$/i.test(asset)) return {};
+        return { photoKind: sel.photoKind, photoAsset: asset };
+      })(),
     };
   }
 
@@ -366,6 +392,26 @@ const INSPECTOR_SCRIPT = `
     '@keyframes dc-activity-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }',
     '@keyframes dc-activity-wave { from { transform: translateY(-100%); } to { transform: translateY(100%); } }',
     '@media (prefers-reduced-motion: reduce) { html .dc-activity-rim { transition: none; } html .dc-activity-rim::after { animation: none; opacity: 0.55; } html .dc-activity-scan { display: none; } }',
+    /* feature-photo-editor — background-removal busy reveal. A data-photo-busy
+       attribute toggle on the real img/image element (set by canvas-lib.tsx's
+       PhotoPreviewBridge on a photo-busy postMessage from the shell), styled
+       here at the same single injection point as the .dc-activity-* agent-edit
+       chrome above — same "something is actively happening" rim + pulse
+       language. Deliberately NOT a floating tracked overlay: that's the exact
+       architecture DDR-161's addendum removed from the live-edit preview
+       (z-index/resize/hit-testing bugs) — an attribute on the element itself
+       moves for free with pan/zoom/resize, no separate rect sync needed.
+       Deliberately opacity-only (not a moving mask-position sweep, tried
+       first): the ML pass runs single-threaded WASM on the main thread
+       (confirmed live — env.wasm.numThreads falls back without
+       crossOriginIsolated), which blocks per-frame style/paint work for the
+       ENTIRE inference; a mask-position animation froze mid-sweep for that
+       whole window. opacity is one of the few properties browsers composite
+       off the main thread unconditionally, so the pulse keeps animating
+       exactly when the page is busiest — the one moment it needs to. */
+    'html [data-photo-busy] { outline: 2px solid var(--mdcc-activity, hsl(210 90% 58%)); outline-offset: 2px; animation: dc-photo-busy-pulse 1100ms ease-in-out infinite; will-change: opacity; }',
+    '@keyframes dc-photo-busy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }',
+    '@media (prefers-reduced-motion: reduce) { html [data-photo-busy] { animation: none; opacity: 0.75; } }',
     /* Phase 13.1 / DDR-077 — "holding last good render" toast, shown when an
        agent edit produced a broken intermediate (build/render error) and the
        canvas is held instead of flashing white. Amber = warn, distinct from the
@@ -482,7 +528,13 @@ const INSPECTOR_SCRIPT = `
       return;
     }
     if (e.shiftKey) {
-      var id = k === 'i' ? 'inspector' : k === 'm' ? 'comments' : k === 'e' ? 'export' : k === 'h' ? 'handoff' : null;
+      // ⌘⇧T (timeline) + ⌘⇧G (changes) were missing here, so with focus inside
+      // the canvas iframe they never reached the shell — opening the Timeline
+      // (and its Space/arrow transport, which needs the dock focused) silently
+      // stopped working after a canvas interaction moved focus into the iframe.
+      // ⌘⇧T is also the browser "reopen closed tab" chord, so the preventDefault
+      // below is doubly load-bearing.
+      var id = k === 'i' ? 'inspector' : k === 'm' ? 'comments' : k === 'e' ? 'export' : k === 'h' ? 'handoff' : k === 't' ? 'timeline' : k === 'g' ? 'changes' : null;
       if (id) {
         e.preventDefault();
         try { window.parent.postMessage({ dgn: 'shell-shortcut', id: id }, '*'); } catch (err) {}

package/apps/studio/media-commit-chain.ts

@@ -0,0 +1,119 @@
+/**
+ * @file       media-commit-chain.ts — serialized accumulator chain for
+ *             concurrent async media-intake commits.
+ * @scope      apps/studio/media-commit-chain.ts
+ * @purpose    Fixes the Phase-23 batch-drop data-loss bug: a Finder drop of
+ *             N files fires N independent async completions (image decode /
+ *             asset upload), each of which used to read a `strokesRef.current`
+ *             mirror and call `commitStrokes(before, after)` on its own.
+ *             `strokesRef` only catches up on the NEXT render, so two
+ *             completions landing before a render commit both compute
+ *             `before` from the same stale snapshot — the second commit's
+ *             `setStrokesState` overwrites the first's, silently dropping it.
+ *
+ *             This chain fixes it by threading the PREVIOUS link's resulting
+ *             array forward as the next link's `before` while links are
+ *             in flight (Promise-chained, mirroring `editApplyChainRef` /
+ *             `structuralWrite` in client/app.jsx). The subtle part is what
+ *             happens once the queue drains: a naive "go idle, trust a fresh
+ *             `getSnapshot()` again" reset raced in practice — `getSnapshot()`
+ *             (`strokesRef.current`) only catches up on React's NEXT render,
+ *             which can take longer than the handful of microtask ticks this
+ *             chain itself needs to settle a link, so a fast-idling chain
+ *             could hand the next link a `getSnapshot()` that hasn't caught
+ *             up yet — reproducing the same loss one level down (confirmed
+ *             empirically against a real dev server: see the Task 5 write-up).
+ *             Instead, every idle read is RECONCILED against `remembered`
+ *             (the last array this chain itself produced): for every id the
+ *             chain itself has ever touched, `remembered`'s value WINS
+ *             outright, even if the fresh snapshot also contains that id —
+ *             presence alone isn't enough, since fresh can hold a STALE
+ *             value for an id the chain already updated (see `reconcile()`
+ *             below and DDR-165). Only ids fresh has that the chain has
+ *             never touched get folded in from it, which is what still lets
+ *             an unrelated synchronous edit (pen/shape/drag, made while
+ *             idle) through.
+ *
+ *             Framework/DOM-free by design so the no-loss guarantee is
+ *             testable without React or a real image decode/upload — see
+ *             test/media-commit-chain.test.ts.
+ */
+
+export interface MediaCommitResult<T> {
+  /** The chain's new accumulator value — what the NEXT queued link builds on. */
+  after: readonly T[];
+  /**
+   * Override the `before` passed to `onCommit` (defaults to this link's
+   * accumulator `before`). Lets a caller exclude an ephemeral, never-
+   * separately-committed entry (e.g. an optimistic blob: preview) from the
+   * undo record while still folding it into the accumulator correctly.
+   */
+  commitBefore?: readonly T[];
+  label?: string;
+}
+
+export interface MediaCommitChain<T> {
+  /**
+   * Enqueue a synchronous mutation. `mutate` receives the current
+   * accumulated `before` (the previous link's `after` while a link is still
+   * in flight, or a reconciled `getSnapshot()` read once the queue has
+   * drained) and returns a result, or `null` to skip (no-op, `before` passes
+   * through unchanged). `onCommit` fires with `(before, after, label)` in
+   * strict queue order, once per non-null mutation.
+   */
+  enqueue(
+    mutate: (before: readonly T[]) => MediaCommitResult<T> | null,
+    onCommit: (before: readonly T[], after: readonly T[], label?: string) => void
+  ): Promise<readonly T[]>;
+}
+
+export function createMediaCommitChain<T>(
+  getSnapshot: () => readonly T[],
+  keyOf: (item: T) => string
+): MediaCommitChain<T> {
+  let pending: Promise<readonly T[]> | null = null;
+  // The last array this chain itself produced. Never cleared — only ever
+  // superseded by a fresh reconciled read once every id it carries shows up
+  // in `getSnapshot()` too (see reconcile()).
+  let remembered: readonly T[] | null = null;
+
+  function reconcile(): readonly T[] {
+    const fresh = getSnapshot();
+    if (!remembered) return fresh;
+    // Prefer `remembered`'s value for any id the CHAIN itself produced —
+    // not just fold in ids fresh is missing. `fresh` (getSnapshot) can
+    // contain a STALE value for an id the chain already swapped: e.g. an
+    // image stroke's optimistic (blob:) href is set via a separate, non-
+    // chain setState, and `fresh` catches up to THAT before it catches up
+    // to the chain's OWN later commit swapping it to the real href — same
+    // id, stale value. Checking "is the id present" (the previous version
+    // of this function) said "yes, already rendered" and used fresh's
+    // stale copy, silently reverting the swap — which then gets filtered
+    // out entirely as still-ephemeral at the persistence layer. `remembered`
+    // is always at least as fresh as anything the chain has itself
+    // touched, so it wins on overlap; anything fresh has that remembered
+    // doesn't (an external, non-chain edit made while idle) still comes
+    // through via the second spread.
+    const rememberedKeys = new Set(remembered.map(keyOf));
+    const notInRemembered = fresh.filter((item) => !rememberedKeys.has(keyOf(item)));
+    return [...remembered, ...notInRemembered];
+  }
+
+  const enqueue: MediaCommitChain<T>['enqueue'] = (mutate, onCommit) => {
+    const seed = pending ?? Promise.resolve(reconcile());
+    const link: Promise<readonly T[]> = seed.then((before) => {
+      const result = mutate(before);
+      if (!result) return before;
+      onCommit(result.commitBefore ?? before, result.after, result.label);
+      remembered = result.after;
+      return result.after;
+    });
+    pending = link;
+    void link.then(() => {
+      if (pending === link) pending = null;
+    });
+    return link;
+  };
+
+  return { enqueue };
+}

package/apps/studio/paths.ts

@@ -48,6 +48,26 @@ export const CLIENT_DIR: string = join(DEV_SERVER_ROOT, 'client');
 /** `<DEV_SERVER_ROOT>/dist/runtime/` — pre-built /_canvas-runtime/*.js bundles. */
 export const RUNTIME_BUNDLES_DIR: string = join(DIST_DIR, 'runtime');
 
+/**
+ * `<DEV_SERVER_ROOT>/stickers/` — bundled whiteboard sticker packs
+ * (feature-whiteboard-annotation-improvements, Phase 4). Ships with the
+ * `@1agh/maude` tarball (a subdir of `apps/studio`, already covered by the
+ * existing `files` entry — no separate packaging step). Resolved from
+ * DEV_SERVER_ROOT per DDR-045 — this is MAUDE's own bundled asset store, never
+ * the served project's.
+ */
+export const STICKERS_DIR: string = join(DEV_SERVER_ROOT, 'stickers');
+
+/**
+ * `<DEV_SERVER_ROOT>/media/` — bundled Maude-product media (the intro
+ * showreel, DDR-166 Phase 1 T2). Same shape as `STICKERS_DIR`: ships with the
+ * `@1agh/maude` tarball (a subdir of `apps/studio`, already covered by the
+ * existing `files` entry), resolved from DEV_SERVER_ROOT per DDR-045 — this is
+ * MAUDE's OWN asset store, never the served project's `.design/assets/`, so
+ * every user sees the same intro regardless of which project is open.
+ */
+export const MEDIA_DIR: string = join(DEV_SERVER_ROOT, 'media');
+
 /**
  * Absolute path to a bundled plugin's loadable tree (`commands/`, `agents/`,
  * `skills/`, `hooks/`, `.claude-plugin/plugin.json`), or `null` when this layout

package/apps/studio/photo/filters.ts

@@ -0,0 +1,285 @@
+/**
+ * @file       photo/filters.ts — pure photo-pipeline PLANNER (Stage B, Task 4)
+ * @scope      apps/studio/photo/filters.ts
+ * @purpose    Turn a `PhotoEdit` into an ordered, plain-data description of the
+ *             compositing stack — `planPhotoPipeline(edit) → PhotoPipelineStep[]`.
+ *             This is the deterministic, testable core: it decides WHAT filters/
+ *             overlays/masks apply and in WHAT order, without ever touching a GPU.
+ *
+ * @invariant  DEPENDENCY-FREE — like `schema.ts`, this file MUST NOT import
+ *             `pixi.js`. The pixi realization (constructing real
+ *             `PIXI.ColorMatrixFilter` / `NoiseFilter` / the duotone shader /
+ *             `TilingSprite` / `Graphics` mask objects) lives in `pipeline.ts`,
+ *             which is browser-only.
+ *
+ *             WHY the split (deviation from the plan's single
+ *             `buildFilterGraph(): PIXI.Filter[]`): pixi v8 eagerly compiles a
+ *             `GlProgram` in every filter's constructor, which calls
+ *             `document.createElement('canvas')` — so constructing a filter in a
+ *             headless `bun test` throws `ReferenceError: document is not
+ *             defined`. Returning plain-data STEP specs keeps the plan's stated
+ *             Task-4 validation ("assert filter count/order, not pixel output")
+ *             genuinely runnable, and mirrors how `draw/serialize.ts` produces a
+ *             browser-free description of a render. `pipeline.ts` re-exports a
+ *             `buildFilterGraph(edit)` that realizes these steps into pixi objects.
+ *
+ * @order      Fixed, load-bearing pipeline order (filters are NOT commutative) —
+ *             `PHOTO_PIPELINE_ORDER` from schema.ts:
+ *               adjustments → duotone → grain → pattern → mask
+ *             The adjustment SUB-order (within the single color-matrix step) is
+ *             also fixed: brightness → exposure → contrast → saturation → hue →
+ *             sepia → grayscale → invert (color-matrix ops compose, so order
+ *             changes the result). Both orders are asserted by the unit tests.
+ */
+
+import type {
+  MaskPreset,
+  PatternBlend,
+  PatternType,
+  PhotoAdjustments,
+  PhotoEdit,
+} from './schema.ts';
+import { PHOTO_PIPELINE_ORDER } from './schema.ts';
+
+// ── Step vocabulary (plain data — the realizer in pipeline.ts consumes these) ──
+
+/** One color-matrix operation, with a NORMALIZED value (see schema.ts ranges).
+ *  The realizer maps each op onto the corresponding pixi ColorMatrixFilter call. */
+export type AdjustOpKind =
+  | 'brightness'
+  | 'exposure'
+  | 'contrast'
+  | 'saturation'
+  | 'hue'
+  | 'sepia'
+  | 'grayscale'
+  | 'invert';
+
+export interface AdjustOp {
+  op: AdjustOpKind;
+  /** Normalized value straight from PhotoEdit.adjustments (−1…1, deg, or 0…1). */
+  value: number;
+}
+
+/** Adjustments compile to ONE color-matrix filter carrying an ordered op list. */
+export interface AdjustmentsStep {
+  stage: 'adjustments';
+  kind: 'colorMatrix';
+  ops: AdjustOp[];
+}
+
+export interface DuotoneStep {
+  stage: 'duotone';
+  kind: 'duotone';
+  /** `#rrggbb` shadow color. */
+  colorA: string;
+  /** `#rrggbb` highlight color. */
+  colorB: string;
+  /** 0…1 crossfade between original and full duotone. */
+  intensity: number;
+}
+
+export interface GrainStep {
+  stage: 'grain';
+  kind: 'noise';
+  amount: number;
+  size: number;
+}
+
+export interface PatternStep {
+  stage: 'pattern';
+  kind: 'pattern';
+  type: PatternType;
+  scale: number;
+  opacity: number;
+  blend: PatternBlend;
+  /** `#rrggbb` ink color for the pattern tile. */
+  color: string;
+}
+
+export interface MaskStep {
+  stage: 'mask';
+  kind: 'mask';
+  /** 'none' never reaches here — an unmasked edit omits the step entirely. */
+  preset: Exclude<MaskPreset, 'none'>;
+  strength: number;
+}
+
+export type PhotoPipelineStep = AdjustmentsStep | DuotoneStep | GrainStep | PatternStep | MaskStep;
+
+// ── Sensible visual defaults (used when a section is enabled but a field unset) ─
+
+const DUOTONE_DEFAULT_A = '#111111';
+const DUOTONE_DEFAULT_B = '#ffffff';
+const DUOTONE_DEFAULT_INTENSITY = 1;
+const GRAIN_DEFAULT_AMOUNT = 0.4;
+const GRAIN_DEFAULT_SIZE = 1;
+const PATTERN_DEFAULT_TYPE: PatternType = 'dots';
+const PATTERN_DEFAULT_SCALE = 1;
+const PATTERN_DEFAULT_OPACITY = 0.5;
+const PATTERN_DEFAULT_BLEND: PatternBlend = 'normal';
+const PATTERN_DEFAULT_COLOR = '#ffffff';
+const MASK_DEFAULT_STRENGTH = 0.6;
+
+const EPS = 1e-6;
+const isSet = (v: number | undefined, origin = 0): boolean =>
+  v != null && Math.abs(v - origin) > EPS;
+
+// Fixed adjustment sub-order. See @order above.
+const ADJUST_FIELD_ORDER: readonly AdjustOpKind[] = [
+  'brightness',
+  'exposure',
+  'contrast',
+  'saturation',
+  'hue',
+  'sepia',
+  'grayscale',
+  'invert',
+];
+
+function planAdjustments(a: PhotoAdjustments | undefined): AdjustmentsStep | null {
+  if (!a) return null;
+  const ops: AdjustOp[] = [];
+  for (const field of ADJUST_FIELD_ORDER) {
+    const v = a[field];
+    if (isSet(v)) ops.push({ op: field, value: v as number });
+  }
+  return ops.length ? { stage: 'adjustments', kind: 'colorMatrix', ops } : null;
+}
+
+/**
+ * The single source of truth for "what does this edit do." Returns the ordered
+ * list of pipeline steps — a neutral/empty edit returns `[]` (the compositor
+ * then skips pixi entirely, preserving the lazy-bundle guarantee). Steps always
+ * appear in `PHOTO_PIPELINE_ORDER`.
+ */
+export function planPhotoPipeline(edit: PhotoEdit | null | undefined): PhotoPipelineStep[] {
+  if (!edit) return [];
+  const byStage: Record<string, PhotoPipelineStep | null> = {
+    adjustments: planAdjustments(edit.adjustments),
+    duotone: null,
+    grain: null,
+    pattern: null,
+    mask: null,
+  };
+
+  const d = edit.duotone;
+  if (d?.enabled && (d.intensity ?? DUOTONE_DEFAULT_INTENSITY) > EPS) {
+    byStage.duotone = {
+      stage: 'duotone',
+      kind: 'duotone',
+      colorA: d.colorA ?? DUOTONE_DEFAULT_A,
+      colorB: d.colorB ?? DUOTONE_DEFAULT_B,
+      intensity: d.intensity ?? DUOTONE_DEFAULT_INTENSITY,
+    };
+  }
+
+  const g = edit.grain;
+  if (g?.enabled && (g.amount ?? GRAIN_DEFAULT_AMOUNT) > EPS) {
+    byStage.grain = {
+      stage: 'grain',
+      kind: 'noise',
+      amount: g.amount ?? GRAIN_DEFAULT_AMOUNT,
+      size: g.size ?? GRAIN_DEFAULT_SIZE,
+    };
+  }
+
+  const p = edit.pattern;
+  if (p?.enabled && (p.opacity ?? PATTERN_DEFAULT_OPACITY) > EPS) {
+    byStage.pattern = {
+      stage: 'pattern',
+      kind: 'pattern',
+      type: p.type ?? PATTERN_DEFAULT_TYPE,
+      scale: p.scale ?? PATTERN_DEFAULT_SCALE,
+      opacity: p.opacity ?? PATTERN_DEFAULT_OPACITY,
+      blend: p.blend ?? PATTERN_DEFAULT_BLEND,
+      color: p.color ?? PATTERN_DEFAULT_COLOR,
+    };
+  }
+
+  const m = edit.mask;
+  if (m?.preset && m.preset !== 'none' && (m.strength ?? MASK_DEFAULT_STRENGTH) > EPS) {
+    byStage.mask = {
+      stage: 'mask',
+      kind: 'mask',
+      preset: m.preset,
+      strength: m.strength ?? MASK_DEFAULT_STRENGTH,
+    };
+  }
+
+  // Emit in the canonical, fixed order.
+  const out: PhotoPipelineStep[] = [];
+  for (const stage of PHOTO_PIPELINE_ORDER) {
+    const step = byStage[stage];
+    if (step) out.push(step);
+  }
+  return out;
+}
+
+// ── Pure color helper (shared by the realizer + tests) ───────────────────────
+
+/**
+ * `#rrggbb` → normalized `[r, g, b]` in 0…1. Throws on malformed input (the
+ * validator in schema.ts already rejects bad colors before persistence, so this
+ * is a belt-and-braces guard for the realizer). Kept here (pure, no pixi) so the
+ * duotone realization and its tests share one parser.
+ */
+export function hexToRgb01(hex: string): [number, number, number] {
+  const m = /^#([0-9a-fA-F]{6})$/.exec(hex);
+  if (!m) throw new Error(`hexToRgb01: not a #rrggbb color: ${hex}`);
+  const int = Number.parseInt(m[1], 16);
+  return [((int >> 16) & 0xff) / 255, ((int >> 8) & 0xff) / 255, (int & 0xff) / 255];
+}
+
+// ── GLSL for the custom duotone filter (a string — no pixi dependency) ────────
+// Duotone is a per-pixel luminance → two-color gradient-map lerp, which a linear
+// `ColorMatrixFilter` affine transform cannot express, so it needs its own
+// fragment shader. `pipeline.ts` compiles these into a `PIXI.Filter` via
+// `GlProgram.from({ vertex, fragment })`. WebGL (GLSL ES 1.00-ish, pixi v8
+// high-precision) only — the Application is pinned to `preference: 'webgl'` so
+// the WebGPU program is unnecessary (and WKWebView WebGPU is partial — Task 25).
+
+export const DUOTONE_VERT_SOURCE = /* glsl */ `
+  in vec2 aPosition;
+  out vec2 vTextureCoord;
+
+  uniform vec4 uInputSize;
+  uniform vec4 uOutputFrame;
+  uniform vec4 uOutputTexture;
+
+  vec4 filterVertexPosition(void) {
+    vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
+    position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
+    position.y = position.y * (2.0 * uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
+    return vec4(position, 0.0, 1.0);
+  }
+
+  vec2 filterTextureCoord(void) {
+    return aPosition * (uOutputFrame.zw * uInputSize.zw);
+  }
+
+  void main(void) {
+    gl_Position = filterVertexPosition();
+    vTextureCoord = filterTextureCoord();
+  }
+`;
+
+export const DUOTONE_FRAG_SOURCE = /* glsl */ `
+  in vec2 vTextureCoord;
+  out vec4 finalColor;
+
+  uniform sampler2D uTexture;
+  uniform vec3 uColorA;     // shadow color (0..1)
+  uniform vec3 uColorB;     // highlight color (0..1)
+  uniform float uIntensity; // 0..1 crossfade with the original
+
+  void main(void) {
+    vec4 src = texture(uTexture, vTextureCoord);
+    // Rec. 601 luma over UN-premultiplied color.
+    vec3 rgb = src.a > 0.0 ? src.rgb / src.a : src.rgb;
+    float luma = dot(rgb, vec3(0.299, 0.587, 0.114));
+    vec3 duo = mix(uColorA, uColorB, luma);
+    vec3 outRgb = mix(rgb, duo, uIntensity);
+    finalColor = vec4(outRgb * src.a, src.a); // re-premultiply
+  }
+`;