howone 0.1.36 → 0.1.39

package/templates/vite/.howone/skills/web-shader-extractor/references/unicorn-studio.md

@@ -0,0 +1,387 @@
+# Unicorn Studio Adapter
+
+Use this adapter only after the target surface group has been attributed to a Unicorn Studio embed, remix, or runtime renderer.
+Public APIs and bundle details change.
+Verify keys, shader variable names, and initialization routes against the current target.
+
+Stability: volatile. Treat endpoint names, variable names, keys, shader templates, and build-specific mappings as hints until verified on the current target.
+
+Unicorn Studio is a no-code WebGL design tool. Observed runtimes use curtains.js-style multi-pass WebGL rendering and may load scene definitions from Firestore, GCS, or CDN embed data.
+
+## Adapter Interface
+
+- `detect(context)`: target surface is created by Unicorn runtime, target embed/project ID matches the canvas, or public definition maps to the target visual.
+- `preferredEvidence(context)`: published embed JSON or public remix/version definition, then target-bound runtime/source route.
+- `capture(context)`: scene/history data, compiled shaders or shader templates, layer graph, FBO chain, assets/fonts/textures, timing rules, output composite.
+- `replay(context)`: `SOURCE_REPLAY` from embed/version data when possible; `PIPELINE_REPLAY` if only compiled shaders and runtime graph are available.
+- `validationHints(context)`: element/child effect FBO chains, transparent `showBg=0`, frame-based `uTime`, glyph atlas compatibility, WebGL environment issues.
+- `fallback(context)`: dynamic bundle slice around target effects, then frame capture.
+
+## Recognition Signals
+
+- URL patterns such as `unicorn.studio/remix/{remixId}` or `unicorn.studio/edit/{designId}`
+- meta tags or runtime clues referencing Unicorn Studio
+- embed SDK paths such as `unicornStudio-*.js`
+- application bundle paths such as `index-*.js` or the current dynamic chunk graph
+- data attributes such as `data-us-project` or `data-us-project-src`
+
+## Data Acquisition Routes
+
+### Route 1: Firestore REST API
+
+Use this route for remix URLs when public Firestore access is available. Extract Firebase/public API config dynamically from the current frontend bundle.
+
+```bash
+# Example discovery pattern; validate against the current site.
+curl -s https://www.unicorn.studio/ | grep -oP 'apiKey:"[^"]+"' | head -1
+
+API_KEY="<extract dynamically from current public source>"
+PROJECT="unicorn-studio"
+
+# Step 1: Fetch remix metadata, including versionId, designId, and creator metadata.
+curl -s "https://firestore.googleapis.com/v1/projects/$PROJECT/databases/(default)/documents/remixes/{REMIX_ID}?key=$API_KEY"
+
+# Step 2: Fetch version data with layers, parameters, and texture references.
+curl -s "https://firestore.googleapis.com/v1/projects/$PROJECT/databases/(default)/documents/versions/{VERSION_ID}?key=$API_KEY"
+```
+
+### Route 2: GCS/CDN Embed Data
+
+```bash
+# Non-Pro projects observed in older samples.
+curl -s "https://storage.googleapis.com/unicornstudio-production/embeds/{DESIGN_ID}"
+
+# Pro projects observed in older samples.
+curl -s "https://assets.unicorn.studio/embeds/{DESIGN_ID}"
+```
+
+Embed JSON may look like `{ options: {...}, layers/history: [...], modules: [...] }` and may include `compiledFragmentShaders[]` and `compiledVertexShaders[]`.
+
+### Route 3: Inline Page JSON
+
+Unicorn Studio embeds may use `data-us-project` or `data-us-project-src` HTML attributes. The SDK `init()` path scans these attributes and loads the corresponding project.
+
+## Identify The Data Shape First
+
+Unicorn Studio data commonly appears in at least two shapes.
+
+### 1. Embed/export scene
+
+- Usually the final scene JSON passed to `addScene()`.
+- Often already includes `compiledFragmentShaders[]` and `compiledVertexShaders[]`.
+- Can often be replayed through the embed runtime.
+
+### 2. Editor/version history
+
+- Commonly from Firestore `versions/{id}` `history`.
+- Represents editor source layer data.
+- Do not pass it directly to `addScene()`.
+
+If `history` is misused as an embed scene, common symptoms include:
+
+- `Plane: No fragment shader provided, will use a default one`
+- `Plane: No vertex shader provided, will use a default one`
+- `No composite shader data for element`
+- the canvas exists but renders black or default layers only
+
+## Firestore Collections
+
+| Collection | Purpose | Key fields |
+|---|---|---|
+| `designs` | design metadata | creatorId, name, versionId, hasEmbed |
+| `versions` | core version data | history[], options |
+| `remixes` | remixable design metadata | designId, versionId, creatorId, thumbnail |
+
+Firestore REST wraps values as `{stringValue, integerValue, arrayValue, mapValue, ...}`. Parse recursively before implementation.
+
+Each `history` entry is usually one layer:
+
+```text
+layerType: "effect" | "text" | "image" | "model" | "shape"
+type:      effect type such as gradient, noiseFill, sdf_shape, glyphDither, bloomFast
+```
+
+Common layer parameters:
+
+- `pos`, `scale`, `speed`, `opacity`, `blendMode`
+- `trackMouse`, `trackAxes`, `mouseMomentum`
+- `parentLayer`: UUID or false
+- `breakpoints[]` for responsive behavior
+- `states` for appear, scroll, hover, and mousemove animation
+- `customFragmentShaders[]`, `customVertexShaders[]`; often empty when built-in effects are used
+
+## Initialization Strategy
+
+If the source is Firestore `version/history`, prefer the site's own initialization chain instead of forcing public embed APIs.
+
+Typical observed sequence:
+
+1. `unpackageHistory()` or `unpackVersion()`
+2. `createFontScript()`
+3. `createCurtains()`
+4. `handleItemPlanes()`
+5. `fullRedraw()`
+
+If the bundle contains a Remix/Preview component, trace that path before relying on UMD/SDK documentation.
+
+## Resource Localization
+
+- Download image, font, and texture resources locally when permitted.
+- Rewrite `history` `src` and `fontCSS.src` to local paths for local replay.
+- Normalize numeric-key maps into arrays when needed before writing local JSON.
+
+## Effect-Type Parameters
+
+| Effect | Key parameters |
+|---|---|
+| gradient | fill[], stops[], gradientType, gradientAngle, wrap |
+| noiseFill | noiseType, turbulence, color1, color2, colorPhase, chroma, direction |
+| sdf_shape | shape 0-22, refraction, extrude, smoothing, axis, animationDirection, lightPosition |
+| glyphDither | characters, glyphSet, scale, gamma, monochrome, sprite atlas texture |
+| bloomFast | amount, intensity, exposure, tint |
+
+## Shader Extraction
+
+Some embed SDKs do not contain GLSL shader code.
+Shader templates may live in the main application bundle or a dynamic chunk.
+They may be compiled into embed JSON through a processing pipeline.
+Use the current target's network and source evidence.
+
+### Shader Template Locations
+
+Observed older bundles used string literals identified by minified variables:
+
+```text
+Effect name       observed variable
+glyphDither       X$ fragment
+noiseFill         WY fragment
+sdf_shape         XY fragment
+gradient          eX fragment
+bloomFast         Hj fragment
+generic vertex    ye
+gradient vertex   ko
+composite frag    Uz
+composite vertex  Nz
+```
+
+Variable names change with builds. Search by semantic shader features rather than fixed names.
+
+### Template Variables
+
+Shader templates may include `${variable}` placeholders replaced at compile time:
+
+| Placeholder | Observed meaning |
+|---|---|
+| `${fe}` | mask-related uniform declarations |
+| `${Vt}` | layer blending helpers such as `applyLayerMix`, `applyLayerMixAlpha`, `applyLayerMixClip` |
+| `${gt}` | PCG hash / random helpers such as `pcg2d`, `randFibo` |
+| `${ht}` | blend mode helpers |
+| `${pe("var")}` | mask application plus `fragColor` output |
+| `${wf}` | BCC noise derivatives / OpenSimplex2S |
+| `${Aa}` | Perlin noise helpers |
+| `${yr}` | debanding dither |
+| `${cm}` | gradient color/stop uniform declarations |
+| `${xz}` | Gaussian weights for bloom blur |
+
+### Observed Compile Pipeline
+
+```text
+1. Fz(): replace uniform values with constants
+2. Dz(): handle gradient color counts and switch-case pruning
+3. Mz(): evaluate constant switches / dead code elimination
+4. Rz(): handle #ifelseopen / #ifelseclose blocks
+5. Iz(): remove unused functions
+6. Cz(): remove unused uniform declarations
+7. Bp(): strip comments and normalize whitespace
+```
+
+## Render Pipeline
+
+Replay must restore the pipeline, not only individual shaders.
+
+```text
+curtains.js-style WebGL2 renderer
+|- each effect layer = one Plane + independent FBO
+|- layers render linearly by renderOrder, each plane reading previous FBO as uTexture
+|- Element layers (shape/text/image) plus child effects form a render group:
+|  1. Element plane renders first -> FBO_elem
+|  2. Child effects render in effects[] order -> FBO_child1, FBO_child2, ...
+|  3. Composite plane alpha-blends child output back into the background scene
+|- standalone post effects with parentLayer=false process the global scene
+`- final plane outputs directly to canvas without an FBO
+```
+
+### Element + Child Effect FBO Chain
+
+Shape group example:
+
+```text
+FBO_before ----------------------------------------------------.
+                                                              |
+Shape plane -> FBO_shape                                      |
+    |                                                         |
+Child noiseFill -> FBO_noise (uBgTexture = FBO_shape)         |
+    |                                                         |
+Child sdf_shape -> FBO_sdf (uTexture = FBO_noise)             |
+    | showBg=0 means outside shape = vec4(0) transparent      |
+    |                                                         |
+Composite plane -> FBO_result                                |
+    uTexture = FBO_sdf                                       |
+    uBgTexture = FBO_before ---------------------------------'
+    output = alpha_blend(fg, bg) = fg + bg * (1.0 - fg.a)
+```
+
+### Child Effect Association
+
+```js
+// Element effects[] lists child-effect parentLayer UUIDs.
+shape.effects = ["e270a7cd-...", "fb591190-..."];
+
+// Each child effect references one parent element UUID.
+noiseFill.parentLayer = "e270a7cd-...";   // effects[0]
+sdf_shape.parentLayer = "fb591190-...";   // effects[1]
+
+// Embed runtime lookup pattern:
+getChildEffectItems() {
+    return this.effects.map(uuid =>
+        state.layers.find(l => l.parentLayer === uuid)
+    ).filter(Boolean);
+}
+```
+
+## Time Base
+
+Observed embed SDKs may use frame accumulation for `uTime`, not seconds:
+
+```js
+// In setEffectPlaneUniforms():
+t.uniforms.time.value += speed * 60 / this.fps;
+```
+
+At 60 fps, `uTime += speed` each frame. After one second, `uTime = speed * 60`.
+
+| Effect layer | speed | uTime after one second |
+|---|---:|---:|
+| noiseFill | 0.25 | 15 |
+| sdf_shape | 0.5 | 30 |
+| gradient | 0.25 | 15 |
+
+Replay must match the target time model:
+
+```js
+// Correct for frame-accumulation samples:
+uni1f(prog, 'uTime', elapsedSeconds * speed * 60);
+
+// Wrong for those samples:
+uni1f(prog, 'uTime', elapsedSeconds);
+```
+
+## `showBg`
+
+- `showBg=0`: ray miss outputs `vec4(0)`, fully transparent rather than opaque black.
+- `showBg=1`: ray miss samples `uTexture` / `uBgTexture`, showing background content.
+
+If `showBg=0` is incorrectly replayed as `vec4(0,0,0,1)`, composite alpha blending is blocked and the lower layer disappears. Ensure `alpha=0`.
+
+## Replay Strategy
+
+1. Simple 2D post effects such as `glyphDither` or `bloomFast`: native WebGL2 fullscreen quad can be suitable.
+2. Generative effects such as `noiseFill` or `gradient`: native WebGL2 can be suitable when facts are complete.
+3. 3D SDF such as `sdf_shape`: native WebGL2 raymarching can be suitable.
+4. Complex scenes: preserve a multi-pass FBO graph.
+5. Text layers: render text with Canvas2D and upload it as a WebGL texture.
+
+## Playwright Verification
+
+Headless Playwright may not have a usable WebGL environment. Treat these symptoms as environment issues before changing extraction logic:
+
+- `Renderer: WebGL context could not be created`
+- `0 canvas(es) found`
+- `Error creating Curtains instance`
+- black screenshot
+
+Try SwiftShader-backed validation when needed:
+
+```bash
+--use-angle=swiftshader
+--use-gl=angle
+--enable-unsafe-swiftshader
+--ignore-gpu-blocklist
+```
+
+Suggested validation order:
+
+1. Determine whether console output shows shader/runtime errors or WebGL context creation failure.
+2. Confirm that the DOM actually creates a `canvas`.
+3. Capture a SwiftShader screenshot.
+4. Compare composition against the source thumbnail or first viewport screenshot.
+
+## Glyph Atlas Generation
+
+Original glyph atlases may be base64 PNGs with cross-browser compatibility issues. Canvas2D generation can be more portable:
+
+```js
+function createGlyphAtlas(chars, size = 40) {
+  const canvas = document.createElement('canvas');
+  canvas.width = size * chars.length;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = '#fff';
+  ctx.font = `bold ${size * 0.8}px monospace`;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  for (let i = 0; i < chars.length; i++) {
+    ctx.fillText(chars[i], size * i + size / 2, size / 2);
+  }
+  return canvas;
+}
+```
+
+Upload the generated atlas with:
+
+```js
+gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas);
+```
+
+## Cloud Functions
+
+Observed endpoint base:
+
+```text
+https://us-central1-unicorn-studio.cloudfunctions.net/
+```
+
+Examples:
+
+- `publishEmbedTest`: publish/update embed; requires authentication
+- `getUserIdByUsername`: username to userId
+- `handleVideos`, `handleModels`, `handleImages`: asset handling
+- `generateImprovedMSDF`: MSDF text rendering
+- `generateDepthMap`: depth map generation
+- `copyRemixAssets`: remix asset copy
+
+Do not call authenticated endpoints unless the user has explicitly authorized the session and the action is within scope.
+
+## Example Extraction Skeleton
+
+```bash
+# 1. Extract remix ID from URL.
+REMIX_ID="QZxhNFb1X1OaUqaJLT9S"
+
+# 2. Fetch remix metadata.
+curl -s "https://firestore.googleapis.com/v1/projects/unicorn-studio/databases/(default)/documents/remixes/$REMIX_ID?key=$API_KEY" > remix.json
+
+# 3. Extract versionId.
+VERSION_ID=$(python3 -c "import json; print(json.load(open('remix.json'))['fields']['versionId']['stringValue'])")
+
+# 4. Fetch version data.
+curl -s "https://firestore.googleapis.com/v1/projects/unicorn-studio/databases/(default)/documents/versions/$VERSION_ID?key=$API_KEY" > version.json
+
+# 5. Recursively parse Firestore REST wrappers into layer and parameter data.
+
+# 6. Fetch the current target-bound app bundle or source slice and locate shader templates by effect type.
+
+# 7. Combine parameters and shader templates into the chosen replay route.
+```

package/templates/vite/.howone/skills/web-shader-extractor/scripts/fetch-rendered-dom.mjs

@@ -0,0 +1,178 @@
+#!/usr/bin/env node
+/**
+ * Optional inventory helper that uses an explicitly installed Playwright runtime
+ * to record DOM/canvas/network observations. It does not perform
+ * Surface Attribution, Target Lock, Replay Ready, or QA gates, and it does not
+ * install dependencies automatically.
+ *
+ * Usage:
+ *   node fetch-rendered-dom.mjs <URL> [outDir]
+ *
+ * Dependencies:
+ *   npm install playwright
+ *   npx playwright install chromium
+ *
+ * Inventory outputs to outDir (default ./web-shader-extractor-scout):
+ *   dom.html         - full rendered HTML
+ *   canvas-info.json - all canvas element metadata
+ *   webgl-info.json  - lightweight metadata for discovered canvases
+ *   console.log      - page console output
+ *   screenshot.png   - viewport screenshot
+ *   network.json     - runtime-loaded JS/resource/asset URLs
+ */
+
+import { writeFileSync, mkdirSync } from 'fs';
+import { join, resolve } from 'path';
+
+const url = process.argv[2];
+const outDir = resolve(process.argv[3] || 'web-shader-extractor-scout');
+
+if (!url) {
+  console.error('Usage: node fetch-rendered-dom.mjs <URL> [outDir]');
+  process.exit(1);
+}
+
+let chromium;
+try {
+  ({ chromium } = await import('playwright'));
+} catch (error) {
+  console.error('Playwright is not available. Install it explicitly before using this optional scout script:');
+  console.error('  npm install playwright');
+  console.error('  npx playwright install chromium');
+  console.error(`Original error: ${error.message}`);
+  process.exit(1);
+}
+
+mkdirSync(outDir, { recursive: true });
+
+const consoleLogs = [];
+const networkRequests = [];
+
+const browser = await chromium.launch({ headless: true });
+const context = await browser.newContext({
+  viewport: { width: 1920, height: 1080 },
+  deviceScaleFactor: 2,
+});
+const page = await context.newPage();
+
+// Capture console
+page.on('console', msg => {
+  consoleLogs.push(`[${msg.type()}] ${msg.text()}`);
+});
+
+// Capture network (JS, WASM, shader, media, image, and likely data files)
+page.on('response', async response => {
+  const reqUrl = response.url();
+  const type = response.headers()['content-type'] || '';
+  if (/\.(js|mjs|wasm|bin|glsl|frag|vert|svg|png|jpe?g|webp|avif|gif|mp4|webm|ktx2?)(\?|$)/i.test(reqUrl) || type.includes('javascript') || type.startsWith('image/') || type.startsWith('video/')) {
+    networkRequests.push({
+      url: reqUrl,
+      status: response.status(),
+      type: type.split(';')[0],
+      size: parseInt(response.headers()['content-length'] || '0'),
+    });
+  }
+});
+
+try {
+  console.log(`Navigating to ${url} ...`);
+  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+
+  // Wait for common renderer initialization.
+  await page.waitForTimeout(3000);
+
+  // 1. Full rendered DOM
+  const html = await page.content();
+  writeFileSync(join(outDir, 'dom.html'), html);
+  console.log(`dom.html - ${html.length} bytes`);
+
+  // 2. Surface info. This is inventory evidence, not target attribution.
+  const canvasInfo = await page.evaluate(() => {
+    return Array.from(document.querySelectorAll('canvas')).map((c, i) => {
+      const style = getComputedStyle(c);
+      const rect = c.getBoundingClientRect();
+      const parentStyle = c.parentElement ? getComputedStyle(c.parentElement) : null;
+      return {
+        index: i,
+        outerHTML: c.outerHTML.slice(0, 500),
+        width: c.width,
+        height: c.height,
+        clientWidth: c.clientWidth,
+        clientHeight: c.clientHeight,
+        boundingRect: {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+          top: rect.top,
+          left: rect.left,
+          right: rect.right,
+          bottom: rect.bottom,
+        },
+        dataEngine: c.dataset.engine || null,
+        dataRenderer: c.dataset.renderer || null,
+        id: c.id || null,
+        className: c.className || null,
+        parentTag: c.parentElement?.tagName || null,
+        parentClass: c.parentElement?.className?.slice(0, 100) || null,
+        style: {
+          display: style.display,
+          position: style.position,
+          opacity: style.opacity,
+          visibility: style.visibility,
+          pointerEvents: style.pointerEvents,
+          transform: style.transform,
+          zIndex: style.zIndex,
+          clipPath: style.clipPath,
+          maskImage: style.maskImage,
+          mixBlendMode: style.mixBlendMode,
+        },
+        parentStyle: parentStyle ? {
+          position: parentStyle.position,
+          overflow: parentStyle.overflow,
+          clipPath: parentStyle.clipPath,
+          maskImage: parentStyle.maskImage,
+          zIndex: parentStyle.zIndex,
+        } : null,
+      };
+    });
+  });
+  writeFileSync(join(outDir, 'canvas-info.json'), JSON.stringify(canvasInfo, null, 2));
+  console.log(`canvas-info.json - ${canvasInfo.length} canvas(es) found`);
+
+  // 3. Lightweight canvas metadata. Do not create new contexts here.
+  const webglInfo = await page.evaluate(() => {
+    const canvases = Array.from(document.querySelectorAll('canvas'));
+    if (!canvases.length) return { error: 'no canvas found', canvases: [] };
+    return {
+      found: true,
+      canvases: canvases.map((canvas, index) => ({
+        index,
+        width: canvas.width,
+        height: canvas.height,
+        dataEngine: canvas.dataset.engine || null,
+        dataRenderer: canvas.dataset.renderer || null,
+        id: canvas.id || null,
+        className: canvas.className || null,
+      })),
+    };
+  });
+  writeFileSync(join(outDir, 'webgl-info.json'), JSON.stringify(webglInfo, null, 2));
+  console.log(`webgl-info.json - ${JSON.stringify(webglInfo).slice(0, 100)}`);
+
+  // 4. Console logs
+  writeFileSync(join(outDir, 'console.log'), consoleLogs.join('\n'));
+  console.log(`console.log - ${consoleLogs.length} entries`);
+
+  // 5. Screenshot
+  await page.screenshot({ path: join(outDir, 'screenshot.png'), fullPage: false });
+  console.log(`screenshot.png - saved`);
+
+  // 6. Network requests
+  writeFileSync(join(outDir, 'network.json'), JSON.stringify(networkRequests, null, 2));
+  console.log(`network.json - ${networkRequests.length} JS/resource requests captured`);
+
+  console.log(`\nDone. Files saved to ${outDir}`);
+} finally {
+  await browser.close();
+}

package/templates/vite/.howone/skills/web-shader-extractor/scripts/scan-bundle.sh

@@ -0,0 +1,80 @@
+#!/bin/bash
+# Scan JS bundle slice(s) for WebGL/shader keywords and report hypotheses.
+# Usage: scan-bundle.sh <file1.js> [file2.js ...]
+# Output: keyword counts + tech stack hypotheses. These are not target-bound conclusions.
+
+set -eu
+
+if [ $# -eq 0 ]; then
+    echo "Usage: scan-bundle.sh <file1.js> [file2.js ...]"
+    echo "Scans JS files for WebGL/shader keywords and produces hypotheses."
+    exit 1
+fi
+
+FILES=("$@")
+
+echo "=== SHADER/WEBGL KEYWORD SCAN ==="
+echo ""
+
+# Core GLSL keywords
+echo "--- GLSL Keywords ---"
+for kw in "gl_FragColor" "gl_Position" "gl_PointSize" "gl_PointCoord" \
+          "precision" "uniform" "varying" "attribute" \
+          "FRAGMENT_SHADER" "VERTEX_SHADER" "createShader" \
+          "sampler2D" "texture2D" "smoothstep" "discard"; do
+    count=$(grep -o "$kw" "${FILES[@]}" 2>/dev/null | wc -l | tr -d ' ')
+    [ "$count" -gt 0 ] && printf "  %-25s %s\n" "$kw" "$count" || true
+done
+
+echo ""
+echo "--- WebGL/Canvas Keywords ---"
+for kw in "canvas" "webgl" "webgl2" "getContext" "shader" "glsl" \
+          "framebuffer" "renderbuffer" "drawArrays" "drawElements" \
+          "bufferData" "texImage2D" "POINTS"; do
+    count=$(grep -oi "$kw" "${FILES[@]}" 2>/dev/null | wc -l | tr -d ' ')
+    [ "$count" -gt 0 ] && printf "  %-25s %s\n" "$kw" "$count" || true
+done
+
+echo ""
+echo "--- Noise/Math Keywords ---"
+for kw in "snoise" "simplex" "perlin" "noise" "PoissonDisk" "Poisson"; do
+    count=$(grep -o "$kw" "${FILES[@]}" 2>/dev/null | wc -l | tr -d ' ')
+    [ "$count" -gt 0 ] && printf "  %-25s %s\n" "$kw" "$count" || true
+done
+
+echo ""
+echo "=== TECH STACK HYPOTHESES (NOT TARGET LOCK) ==="
+
+detect() {
+    local label="$1" pattern="$2"
+    local count
+    count=$(grep -oE "$pattern" "${FILES[@]}" 2>/dev/null | wc -l | tr -d ' ')
+    [ "$count" -gt 0 ] && printf "  %-25s %s hits (hypothesis)\n" "$label" "$count" || true
+}
+
+# Frameworks (patterns specific enough to avoid false positives)
+detect "Three.js"              "THREE\.|WebGLRenderer|ShaderMaterial|BufferGeometry|PerspectiveCamera|OrthographicCamera"
+detect "Three.js (minified)"   "setRenderTarget|DataTexture|setPixelRatio|setClearColor"
+detect "PixiJS"                "PIXI\.|pixi\.js|PixiJS"
+detect "Babylon.js"            "BABYLON\.|babylonjs"
+detect "Raw WebGL"             "gl\.bindBuffer|gl\.bindTexture|gl\.useProgram|gl\.attachShader|gl\.linkProgram"
+detect "Regl"                  "regl\(|regl\.frame|regl\.texture"
+detect "OGL"                   "ogl\.|ogl/"
+
+# Patterns. Generic RenderTarget hits are common post-processing evidence, not GPGPU.
+detect "GPGPU/simulation clues" "ping[-_.]?pong|GPUComputationRenderer|DataTexture|feedback|simulation|compute"
+detect "Particles"             "gl_PointSize|gl_PointCoord|PointSize|particl"
+detect "Post-processing"       "EffectComposer|RenderPass|ShaderPass|postprocess"
+detect "Ray marching"          "rayMarch|sdSphere|sdBox|sdRoundBox"
+detect "Instancing"            "InstancedMesh|InstancedBufferGeometry|instanceMatrix"
+
+echo ""
+echo "=== FILE SIZES ==="
+for f in "${FILES[@]}"; do
+    size=$(wc -c < "$f" | tr -d ' ')
+    echo "  $(basename "$f"): ${size} bytes"
+done
+
+echo ""
+echo "Reminder: bind any hypothesis to the target surface group before using it as implementation evidence."
+echo "GPGPU requires combined evidence such as feedback loops, ping-pong pairs, data-texture simulation, or compute-like update passes."

package/templates/vite/.howone/skills/web-shader-extractor/templates/extraction-report.md

@@ -0,0 +1,41 @@
+# Extraction Report
+
+## Source
+
+- URL:
+- Captured at:
+- Permission boundary:
+
+## Target Visual
+
+## Target Surface Group
+
+## Evidence Summary
+
+## Replay Route
+
+`SOURCE_REPLAY | PIPELINE_REPLAY | BEHAVIOR_REBUILD`
+
+## Captured Facts
+
+- Surface:
+- Runtime/backend:
+- Render graph:
+- Resources:
+- Timing:
+- Inputs:
+- Output/composite:
+
+## Baseline
+
+- Path: `capture-baseline/`
+- Status:
+
+## Editable Project
+
+- Path: `editable-project/`
+- Status:
+
+## Known Gaps
+
+## Deferred Work