@felbrasil/dreamy 0.1.1 → 0.2.0

package/dist/chunks/{chunk-VZMBE5MV.js → chunk-5KZP6X65.js}

@@ -1,18 +1,160 @@
 "use client";
 
+// ../viewport/src/math/colors.ts
+import { Color, LinearSRGBColorSpace, Vector3 } from "three";
+var FIXED_COLORS = { tongue: 16021135, teeth: 16514042, black: 1118481 };
+var PALETTE_ORDER = ["primary", "secondary", "detail", "highlight", "eye", "pupil", "custom"];
+function hexOf(ref, palette) {
+  if (ref === "tongue" || ref === "teeth" || ref === "black") return FIXED_COLORS[ref];
+  return palette[ref] ?? 16711935;
+}
+function cssOf(ref, palette) {
+  return cssHex(hexOf(ref, palette));
+}
+var cssHex = (hex) => "#" + (hex & 16777215).toString(16).padStart(6, "0");
+function rawColor(hex, out = new Color()) {
+  return out.setRGB((hex >> 16 & 255) / 255, (hex >> 8 & 255) / 255, (hex & 255) / 255, LinearSRGBColorSpace);
+}
+var srgbToLinear = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+function linearVec(hex, out = new Vector3()) {
+  return out.set(srgbToLinear((hex >> 16 & 255) / 255), srgbToLinear((hex >> 8 & 255) / 255), srgbToLinear((hex & 255) / 255));
+}
+function linearColor(hex, out = new Color()) {
+  const v = linearVec(hex);
+  return out.setRGB(v.x, v.y, v.z, LinearSRGBColorSpace);
+}
+function rawVec(hex, out = new Vector3()) {
+  return out.set((hex >> 16 & 255) / 255, (hex >> 8 & 255) / 255, (hex & 255) / 255);
+}
+var paletteKey = (p) => PALETTE_ORDER.map((s) => p[s]).join(",");
+
+// ../viewport/src/math/pixel-palette.ts
+import { Color as Color2 } from "three";
+function paletteVariants(hex, black) {
+  const base = rawColor(hex);
+  const hsl = { h: 0, s: 0, l: 0 };
+  rgbToHsl(base.r, base.g, base.b, hsl);
+  const { h, s, l } = hsl;
+  if (l < 0.08 || hex === black) return { base, light: base.clone(), shade: base.clone() };
+  const toward = (from, to, k) => {
+    let d = to - from;
+    d -= Math.round(d);
+    return (from + d * k + 1) % 1;
+  };
+  const light = hslToRaw(toward(h, 0.12, 0.1), s * 0.92, Math.min(0.97, l + 0.16 + (1 - l) * 0.18));
+  const shade = hslToRaw(toward(h, 0.7, 0.12), Math.min(1, s * 1.05 + 0.04), l * 0.58);
+  const lum = (c) => 0.299 * c.r + 0.587 * c.g + 0.114 * c.b;
+  if (lum(light) < lum(base)) light.copy(base);
+  return { base, light, shade };
+}
+function rgbToHsl(r, g, b, out) {
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const l = (min + max) / 2;
+  let h = 0, s = 0;
+  if (min !== max) {
+    const d = max - min;
+    s = l <= 0.5 ? d / (max + min) : d / (2 - max - min);
+    if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h /= 6;
+  }
+  out.h = h;
+  out.s = s;
+  out.l = l;
+}
+function hslToRaw(h, s, l) {
+  const hue = (p2, q2, t) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+    if (t < 1 / 2) return q2;
+    if (t < 2 / 3) return p2 + (q2 - p2) * 6 * (2 / 3 - t);
+    return p2;
+  };
+  const c = new Color2();
+  if (s === 0) {
+    c.r = c.g = c.b = l;
+    return c;
+  }
+  const q = l <= 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
+  c.r = hue(p, q, h + 1 / 3);
+  c.g = hue(p, q, h);
+  c.b = hue(p, q, h - 1 / 3);
+  return c;
+}
+
+// ../viewport/src/math/sprite-roles.ts
+var SPRITE_SLOTS = [...PALETTE_ORDER, "tongue", "teeth"];
+var ROLE_TRANSPARENT = 0;
+var ROLE_INK = 1;
+var SPRITE_ROLE_COUNT = 2 + SPRITE_SLOTS.length * 3;
+var spriteRole = (slot, tone) => 2 + SPRITE_SLOTS.indexOf(slot) * 3 + tone;
+function roleSlot(role) {
+  if (role < 2 || role >= SPRITE_ROLE_COUNT) return void 0;
+  const k = role - 2;
+  return { slot: SPRITE_SLOTS[Math.floor(k / 3)], tone: k % 3 };
+}
+var toHex = (c) => Math.round(c.r * 255) << 16 | Math.round(c.g * 255) << 8 | Math.round(c.b * 255);
+function spriteColors(palette) {
+  const out = [0, FIXED_COLORS.black];
+  for (const slot of SPRITE_SLOTS) {
+    const hex = slot === "tongue" || slot === "teeth" ? FIXED_COLORS[slot] : palette[slot];
+    const v = paletteVariants(hex, FIXED_COLORS.black);
+    out.push(toHex(v.base), toHex(v.light), toHex(v.shade));
+  }
+  return out;
+}
+function decodeRoles(rgba, width, height) {
+  const roles = new Uint8Array(width * height);
+  let approximated = 0;
+  for (let y = 0; y < height; y++) {
+    const src = (height - 1 - y) * width * 4, dst = y * width;
+    for (let x = 0; x < width; x++) {
+      const role = rgba[src + x * 4];
+      roles[dst + x] = role < SPRITE_ROLE_COUNT ? role : ROLE_INK;
+      if (role && rgba[src + x * 4 + 1] > 127) approximated++;
+    }
+  }
+  return { roles, approximated };
+}
+function spriteAnchor(roles, width, height) {
+  let minX = width, maxX = -1, minY = height, maxY = -1;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      if (!roles[y * width + x]) continue;
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+  }
+  if (maxX < 0) return { footY: 0, centerX: 0, centerY: 0 };
+  return { footY: maxY, centerX: (minX + maxX) / 2, centerY: (minY + maxY) / 2 };
+}
+
 // ../viewport/src/scene/frame-camera.ts
-import { Vector3 } from "three";
+import { Quaternion as Q, Vector3 as Vector32 } from "three";
 var DEFAULT_PADDING = 0.03;
+function viewDirection(view, rotation) {
+  const front = new Vector32(0, 0, 1).applyQuaternion(new Q(rotation.x, rotation.y, rotation.z, rotation.w));
+  front.y = 0;
+  if (front.lengthSq() < 1e-8) front.set(0, 0, 1);
+  front.normalize();
+  const left = new Vector32(front.z, 0, -front.x);
+  const yaw = view.yaw * Math.PI / 180, pitch = Math.max(-89.9, Math.min(89.9, view.pitch)) * Math.PI / 180;
+  return front.multiplyScalar(Math.cos(yaw)).addScaledVector(left, Math.sin(yaw)).multiplyScalar(Math.cos(pitch)).add(new Vector32(0, Math.sin(pitch), 0)).normalize();
+}
 function basis(dir) {
   const forward = dir.clone().negate();
-  const right = new Vector3().crossVectors(forward, new Vector3(0, 1, 0));
+  const right = new Vector32().crossVectors(forward, new Vector32(0, 1, 0));
   if (right.lengthSq() < 1e-8) right.set(1, 0, 0);
   right.normalize();
-  return { right, up: new Vector3().crossVectors(right, forward).normalize() };
+  return { right, up: new Vector32().crossVectors(right, forward).normalize() };
 }
 function frameContain(stage, box, points, options = {}) {
   const { camera, orbit } = stage;
-  const dir = options.direction ? new Vector3(options.direction.x, options.direction.y, options.direction.z) : camera.position.clone().sub(orbit.target);
+  const dir = options.direction ? new Vector32(options.direction.x, options.direction.y, options.direction.z) : camera.position.clone().sub(orbit.target);
   if (dir.lengthSq() < 1e-10) dir.set(0, 0.35, 1);
   dir.normalize();
   const { right, up } = basis(dir);
@@ -20,10 +162,10 @@ function frameContain(stage, box, points, options = {}) {
   const aspect = options.aspect ?? 1;
   const keep = 1 - Math.min(0.5, Math.max(0, options.padding ?? DEFAULT_PADDING));
   const [areaH, areaV] = (tanH / tanV >= aspect ? [tanV * aspect, tanV] : [tanH, tanH / aspect]).map((t) => t * keep);
-  const center = box.getCenter(new Vector3());
+  const center = box.getCenter(new Vector32());
   let distance = 0;
   for (let i = 0; i < 8; i++) {
-    const c = new Vector3(i & 1 ? box.max.x : box.min.x, i & 2 ? box.max.y : box.min.y, i & 4 ? box.max.z : box.min.z).sub(center);
+    const c = new Vector32(i & 1 ? box.max.x : box.min.x, i & 2 ? box.max.y : box.min.y, i & 4 ? box.max.z : box.min.z).sub(center);
     const toward = c.dot(dir);
     distance = Math.max(distance, Math.abs(c.dot(right)) / areaH + toward, Math.abs(c.dot(up)) / areaV + toward);
   }
@@ -59,34 +201,6 @@ import { MOUSE, Raycaster as Raycaster2, TOUCH, Vector3 as Vector327 } from "thr
 // ../viewport/src/decals/decal-atlas.ts
 import { CanvasTexture, LinearFilter, SRGBColorSpace } from "three";
 
-// ../viewport/src/math/colors.ts
-import { Color, LinearSRGBColorSpace, Vector3 as Vector32 } from "three";
-var FIXED_COLORS = { tongue: 16021135, teeth: 16514042, black: 1118481 };
-var PALETTE_ORDER = ["primary", "secondary", "detail", "highlight", "eye", "pupil", "custom"];
-function hexOf(ref, palette) {
-  if (ref === "tongue" || ref === "teeth" || ref === "black") return FIXED_COLORS[ref];
-  return palette[ref] ?? 16711935;
-}
-function cssOf(ref, palette) {
-  return cssHex(hexOf(ref, palette));
-}
-var cssHex = (hex) => "#" + (hex & 16777215).toString(16).padStart(6, "0");
-function rawColor(hex, out = new Color()) {
-  return out.setRGB((hex >> 16 & 255) / 255, (hex >> 8 & 255) / 255, (hex & 255) / 255, LinearSRGBColorSpace);
-}
-var srgbToLinear = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-function linearVec(hex, out = new Vector32()) {
-  return out.set(srgbToLinear((hex >> 16 & 255) / 255), srgbToLinear((hex >> 8 & 255) / 255), srgbToLinear((hex & 255) / 255));
-}
-function linearColor(hex, out = new Color()) {
-  const v = linearVec(hex);
-  return out.setRGB(v.x, v.y, v.z, LinearSRGBColorSpace);
-}
-function rawVec(hex, out = new Vector32()) {
-  return out.set((hex >> 16 & 255) / 255, (hex >> 8 & 255) / 255, (hex & 255) / 255);
-}
-var paletteKey = (p) => PALETTE_ORDER.map((s) => p[s]).join(",");
-
 // ../viewport/src/decals/builtin-docs.ts
 var BUILTIN_DOCS = {
   u6: {
@@ -801,7 +915,7 @@ var DecalAtlas = class {
 };
 
 // ../viewport/src/decals/interior-thumbs.ts
-import { Color as Color2, DoubleSide, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, WebGLRenderer } from "three";
+import { Color as Color3, DoubleSide, Mesh, OrthographicCamera, PlaneGeometry, Scene, ShaderMaterial, WebGLRenderer } from "three";
 
 // ../viewport/src/decals/decal-glsl.ts
 var INTERIOR_GLSL = (
@@ -1111,7 +1225,7 @@ function renderInteriorThumbs(rooms) {
     r.setSize(S, S, false);
     const mat = new ShaderMaterial({
       side: DoubleSide,
-      uniforms: { uRoom: { value: 0 }, uDepth: { value: 1 }, uWall: { value: new Color2() }, uSeed: { value: 3 } },
+      uniforms: { uRoom: { value: 0 }, uDepth: { value: 1 }, uWall: { value: new Color3() }, uSeed: { value: 3 } },
       vertexShader: "varying vec2 vP; void main() { vP = position.xy; gl_Position = vec4(position.xy * 2.0, 0.0, 1.0); }",
       fragmentShader: `${INTERIOR_GLSL}
         varying vec2 vP; uniform float uRoom; uniform float uDepth; uniform vec3 uWall; uniform float uSeed;
@@ -1433,14 +1547,14 @@ function writeSegmentMatrices(bones, m, out) {
     const size = bones[i]?.size;
     const th = Math.max(0.02, fs.thick / Math.max(bindFs.thick, 1e-6) * (size?.thickness ?? 1));
     let sL;
-    let Q = rel;
+    let Q2 = rel;
     if (segChild >= 0) {
       const seg = new Vector35().setFromMatrixPosition(m.shownGlobal[segChild]).sub(sp);
       const L = seg.length();
       sL = bindLen > 1e-6 ? L / bindLen : 1;
       if (L > 1e-6) {
         const from = axis.clone().applyQuaternion(rel);
-        Q = new Quaternion2().setFromUnitVectors(from, seg.divideScalar(L)).multiply(rel);
+        Q2 = new Quaternion2().setFromUnitVectors(from, seg.divideScalar(L)).multiply(rel);
       }
     } else {
       sL = fs.along / Math.max(bindFs.along, 1e-6);
@@ -1465,7 +1579,7 @@ function writeSegmentMatrices(bones, m, out) {
       0,
       1
     );
-    mR.makeRotationFromQuaternion(Q).multiply(mS);
+    mR.makeRotationFromQuaternion(Q2).multiply(mS);
     mR.multiply(mT.makeTranslation(-H0.x, -H0.y, -H0.z));
     mR.premultiply(mT.makeTranslation(sp.x, sp.y, sp.z));
     mR.toArray(out, i * 16);
@@ -3859,7 +3973,7 @@ var SelectTool = class {
 };
 
 // ../viewport/src/interaction/selection-boxes.ts
-import { Box3Helper, Box3 as Box34, Color as Color3 } from "three";
+import { Box3Helper, Box3 as Box34, Color as Color4 } from "three";
 var SelectionBoxes = class {
   constructor(ctx, ui) {
     this.ctx = ctx;
@@ -3873,7 +3987,7 @@ var SelectionBoxes = class {
     const ids = s.mode === "assembly" && !this.ctx.locked() ? s.selection.objectIds : [];
     const groups = ids.map((id) => this.ctx.views.group(id)).filter((g) => !!g);
     while (this.helpers.length < groups.length) {
-      const h = new Box3Helper(new Box34(), new Color3(3718648));
+      const h = new Box3Helper(new Box34(), new Color4(3718648));
       this.ui.add(h);
       this.helpers.push(h);
     }
@@ -4531,10 +4645,13 @@ var MeshDriver = class {
     const key = req.key;
     const seq = ++this.seq;
     this.last.set(key, { seq, content: "", resolution: 0 });
+    this.inFlight++;
     this.evaluator.skinWeights(req).then((r) => {
       if (!this.disposed && this.last.get(key)?.seq === seq) done(r);
     }, (e) => {
       if (!this.disposed && !isAbort(e)) console.warn("skin weights failed", key, e);
+    }).finally(() => {
+      this.inFlight--;
     });
   }
   /** Forget a key (the object is gone): pending work is dropped. */
@@ -4750,10 +4867,10 @@ var SceneViews = class {
 };
 
 // ../viewport/src/rig/bone-viz.ts
-import { Box3 as Box37, BufferAttribute as BufferAttribute4, BufferGeometry as BufferGeometry7, Color as Color4, Group as Group6, LineBasicMaterial as LineBasicMaterial3, LineSegments as LineSegments2, Points, PointsMaterial, Sphere, Vector3 as Vector321 } from "three";
-var COL_RIG = new Color4("#34d399");
-var COL_POSE = new Color4("#60a5fa");
-var COL_SEL = new Color4("#fde047");
+import { Box3 as Box37, BufferAttribute as BufferAttribute4, BufferGeometry as BufferGeometry7, Color as Color5, Group as Group6, LineBasicMaterial as LineBasicMaterial3, LineSegments as LineSegments2, Points, PointsMaterial, Sphere, Vector3 as Vector321 } from "three";
+var COL_RIG = new Color5("#34d399");
+var COL_POSE = new Color5("#60a5fa");
+var COL_SEL = new Color5("#fde047");
 var BoneViz = class {
   root = new Group6();
   line;
@@ -4856,7 +4973,7 @@ import { Vector3 as Vector324 } from "three";
 import {
   ACESFilmicToneMapping,
   AmbientLight,
-  Color as Color5,
+  Color as Color6,
   DirectionalLight,
   FogExp2,
   Group as Group7,
@@ -4914,7 +5031,7 @@ function createStage(host, globals2) {
   renderer.domElement.style.touchAction = "none";
   host.appendChild(renderer.domElement);
   const scene = new Scene3();
-  scene.background = new Color5(SKY);
+  scene.background = new Color6(SKY);
   scene.fog = new FogExp2(SKY, 0.012);
   const camera = new PerspectiveCamera(50, (host.clientWidth || 1) / (host.clientHeight || 1), 0.1, 1e3);
   camera.position.copy(DEFAULT_CAMERA);
@@ -5062,63 +5179,9 @@ import {
   WebGLRenderTarget
 } from "three";
 
-// ../viewport/src/math/pixel-palette.ts
-import { Color as Color6 } from "three";
-function paletteVariants(hex, black) {
-  const base = rawColor(hex);
-  const hsl = { h: 0, s: 0, l: 0 };
-  rgbToHsl(base.r, base.g, base.b, hsl);
-  const { h, s, l } = hsl;
-  if (l < 0.08 || hex === black) return { base, light: base.clone(), shade: base.clone() };
-  const toward = (from, to, k) => {
-    let d = to - from;
-    d -= Math.round(d);
-    return (from + d * k + 1) % 1;
-  };
-  const light = hslToRaw(toward(h, 0.12, 0.1), s * 0.92, Math.min(0.97, l + 0.16 + (1 - l) * 0.18));
-  const shade = hslToRaw(toward(h, 0.7, 0.12), Math.min(1, s * 1.05 + 0.04), l * 0.58);
-  const lum = (c) => 0.299 * c.r + 0.587 * c.g + 0.114 * c.b;
-  if (lum(light) < lum(base)) light.copy(base);
-  return { base, light, shade };
-}
-function rgbToHsl(r, g, b, out) {
-  const max = Math.max(r, g, b), min = Math.min(r, g, b);
-  const l = (min + max) / 2;
-  let h = 0, s = 0;
-  if (min !== max) {
-    const d = max - min;
-    s = l <= 0.5 ? d / (max + min) : d / (2 - max - min);
-    if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
-    else if (max === g) h = (b - r) / d + 2;
-    else h = (r - g) / d + 4;
-    h /= 6;
-  }
-  out.h = h;
-  out.s = s;
-  out.l = l;
-}
-function hslToRaw(h, s, l) {
-  const hue = (p2, q2, t) => {
-    if (t < 0) t += 1;
-    if (t > 1) t -= 1;
-    if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
-    if (t < 1 / 2) return q2;
-    if (t < 2 / 3) return p2 + (q2 - p2) * 6 * (2 / 3 - t);
-    return p2;
-  };
-  const c = new Color6();
-  if (s === 0) {
-    c.r = c.g = c.b = l;
-    return c;
-  }
-  const q = l <= 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
-  c.r = hue(p, q, h + 1 / 3);
-  c.g = hue(p, q, h);
-  c.b = hue(p, q, h - 1 / 3);
-  return c;
-}
-
 // ../viewport/src/scene/resolve-frag.ts
+var TEETH_INDEX = 8;
+var APPROX_DISTANCE = "0.08";
 var RESOLVE_FRAG = (
   /* glsl */
   `
@@ -5144,6 +5207,7 @@ uniform float uTone1;
 uniform float uTone2;
 uniform float uDither;
 uniform float uGlossWhite;
+uniform float uIndexOut;
 varying vec2 vUv;
 
 // same curves three.js applies to a material's output on screen
@@ -5195,13 +5259,16 @@ bool outlineAt(vec2 p) {
     return false;
 }
 
-vec3 celShade(vec3 c, float gloss, vec2 p) {
+// The pixel-art choice for a lit pixel, as a sprite role: 1 ink, or 2 + palette index \xD7 3 + tone (0 base, 1 light,
+// 2 shade); a shiny surface's light tone is teeth-white (the teeth base role).
+float celRole(vec3 c, float gloss, vec2 p) {
     // Pixels from black decals or unlit black surfaces render directly as solid ink
-    if (max(c.r, max(c.g, c.b)) < 0.05) return uInk;
+    if (max(c.r, max(c.g, c.b)) < 0.05) return 1.0;
 
-    vec3 base = vec3(0.0), light = vec3(0.0), shade = vec3(0.0);
+    vec3 base = vec3(0.0);
     float bestScore = 1e9;
     float bestS = 1.0;
+    float bestI = 0.0;
     float cl = length(c) + 0.02;
     for (int i = 0; i < ${PIXEL_MAX_PALETTE}; i++) {
         if (i >= uPalCount) break;
@@ -5209,24 +5276,63 @@ vec3 celShade(vec3 c, float gloss, vec2 p) {
         float s = clamp(dot(c, P) / max(dot(P, P), 0.0001), 0.2, 4.0);
         float score = length(c - s * P) / cl + 0.12 * abs(log2(s / 1.25));
         if (score < bestScore) {
-            bestScore = score; bestS = s;
-            base = uPalBase[i]; light = uPalLight[i]; shade = uPalShade[i];
+            bestScore = score; bestS = s; bestI = float(i);
+            base = uPalBase[i];
         }
     }
 
     // Black from the palette stays flat: no teeth-white specular, no dithering, no stepping
-    if (length(base - uInk) < 0.05 || length(base) < 0.10) return uInk;
+    if (length(base - uInk) < 0.05 || length(base) < 0.10) return 1.0;
 
-    if (gloss > uGlossWhite) light = uTeeth;   // only shiny materials catch teeth-white light
     float tau = log2(bestS) + (bayer4(p) - 0.47) * uDither;
-    if (tau > uTone2) return light;
-    if (tau > uTone1) return base;
-    return shade;
+    if (tau > uTone2) return (gloss > uGlossWhite) ? ${2 + TEETH_INDEX * 3}.0 : 2.0 + bestI * 3.0 + 1.0;   // only shiny materials catch teeth-white light
+    if (tau > uTone1) return 2.0 + bestI * 3.0;
+    return 2.0 + bestI * 3.0 + 2.0;
+}
+
+vec3 roleColor(float role) {
+    if (role < 1.5) return uInk;
+    float k = role - 2.0;
+    float slot = floor(k / 3.0 + 0.001);
+    float tone = k - slot * 3.0;
+    vec3 col = uInk;
+    for (int i = 0; i < ${PIXEL_MAX_PALETTE}; i++) {
+        if (float(i) == slot) col = (tone < 0.5) ? uPalBase[i] : ((tone < 1.5) ? uPalLight[i] : uPalShade[i]);
+    }
+    return col;
+}
+
+vec3 celShade(vec3 c, float gloss, vec2 p) { return roleColor(celRole(c, gloss, p)); }
+
+// A flat (decal) color as the nearest role: x the role, y 1 when the match is not close (art outside the palette)
+vec2 nearestRole(vec3 c) {
+    if (max(c.r, max(c.g, c.b)) < 0.05) return vec2(1.0, 0.0);
+    float best = length(c - uInk), role = 1.0;
+    for (int i = 0; i < ${PIXEL_MAX_PALETTE}; i++) {
+        if (i >= uPalCount) break;
+        if (length(uPalBase[i] - uInk) < 0.05) continue;
+        float d0 = length(c - uPalBase[i]), d1 = length(c - uPalLight[i]), d2 = length(c - uPalShade[i]);
+        if (d0 < best) { best = d0; role = 2.0 + float(i) * 3.0; }
+        if (d1 < best) { best = d1; role = 2.0 + float(i) * 3.0 + 1.0; }
+        if (d2 < best) { best = d2; role = 2.0 + float(i) * 3.0 + 2.0; }
+    }
+    return vec2(role, best > ${APPROX_DISTANCE} ? 1.0 : 0.0);
 }
 
 void main() {
     vec2 p = floor(vUv * uSize);
     vec4 s = texture2D(tColor, (uPixel > 0.5) ? (p + 0.5) / uSize : vUv);
+    // Sprite bake: the role of each pixel in red (/ 255), "approximated" in green
+    if (uIndexOut > 0.5) {
+        vec2 r = vec2(0.0);
+        if (s.a > 0.05) {
+            if (s.a >= 0.45 && s.a <= 0.50) r = nearestRole(s.rgb);
+            else r = vec2(celRole(s.rgb, (s.a < 0.4) ? 0.0 : clamp((1.0 - s.a) * 2.0, 0.0, 1.0), p), 0.0);
+        }
+        if (outlineAt(p)) r = vec2(1.0, 0.0);
+        gl_FragColor = vec4(r.x / 255.0, r.y, 0.0, 1.0);
+        return;
+    }
     vec3 bg = uBg;
     if (uChecker > 0.5) {
         vec2 g = floor(gl_FragCoord.xy / (9.0 * uDpr));
@@ -5284,7 +5390,8 @@ var RenderPipeline = class {
         uTone1: { value: Math.log2(PIXEL_SHADE_BELOW) },
         uTone2: { value: Math.log2(PIXEL_LIGHT_ABOVE) },
         uDither: { value: PIXEL_DITHER },
-        uGlossWhite: { value: PIXEL_GLOSS_WHITE }
+        uGlossWhite: { value: PIXEL_GLOSS_WHITE },
+        uIndexOut: { value: 0 }
       },
       vertexShader: "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }",
       fragmentShader: RESOLVE_FRAG,
@@ -5304,6 +5411,8 @@ var RenderPipeline = class {
   quadCam = new OrthographicCamera2(-1, 1, 1, -1, 0, 1);
   paletteKey = "";
   size = new Vector24();
+  /** Sprite bakes: the world pass and the role target, kept apart from the view's target. */
+  bake = null;
   render(prefs, palette, keep, isolated) {
     const { renderer, scene, camera } = this.stage;
     const selOnly = prefs.renderSelectedOnly && !!keep && keep.length > 0;
@@ -5414,6 +5523,12 @@ var RenderPipeline = class {
       this.target.depthTexture?.dispose();
       this.target.dispose();
     }
+    this.target = this.worldTarget(w, h, pixel, smooth, half);
+    this.targetKey = key;
+    return this.target;
+  }
+  /** The offscreen world pass: linear, with "kind" in alpha, and a depth texture for pixel-art outlines. */
+  worldTarget(w, h, pixel, smooth, half) {
     const filter = smooth ? LinearFilter2 : NearestFilter2;
     const rt = new WebGLRenderTarget(w, h, {
       minFilter: filter,
@@ -5429,10 +5544,93 @@ var RenderPipeline = class {
     } else if (smooth) {
       rt.samples = 4;
     }
-    this.target = rt;
-    this.targetKey = key;
     return rt;
   }
+  /**
+   * A sprite bake: `keep` alone (lights stay, ground and helpers go) in pixel art into a `size`-square target, resolved
+   * to sprite roles instead of colors, read back as RGBA bytes (rows from the bottom). The camera must already be
+   * square. Nothing reaches the canvas.
+   */
+  renderSprite(size, palette, keep) {
+    const { renderer, scene, camera } = this.stage;
+    if (this.bake?.size !== size) {
+      this.disposeBake();
+      const r = this.stage.renderer;
+      const half = r.extensions.has("EXT_color_buffer_float") || r.extensions.has("EXT_color_buffer_half_float");
+      const roles2 = new WebGLRenderTarget(size, size, {
+        minFilter: NearestFilter2,
+        magFilter: NearestFilter2,
+        format: RGBAFormat2,
+        type: UnsignedByteType,
+        depthBuffer: false,
+        stencilBuffer: false
+      });
+      this.bake = { size, world: this.worldTarget(size, size, true, false, half), roles: roles2 };
+    }
+    const { world, roles } = this.bake;
+    const prev = {
+      tm: renderer.toneMapping,
+      bg: scene.background,
+      fog: scene.fog,
+      autoClear: renderer.autoClear,
+      clearColor: renderer.getClearColor(new Color7()),
+      clearAlpha: renderer.getClearAlpha()
+    };
+    const hidden = [];
+    const hide = (n) => {
+      if (n.visible) {
+        n.visible = false;
+        hidden.push(n);
+      }
+    };
+    const u = this.quadMat.uniforms;
+    try {
+      hide(this.stage.ui);
+      this.hideUnselected(keep, hide);
+      renderer.toneMapping = NoToneMapping;
+      scene.background = null;
+      scene.fog = null;
+      this.globals.uPixelOut.value = 1;
+      renderer.setRenderTarget(world);
+      renderer.setClearColor(0, 0);
+      renderer.autoClear = true;
+      renderer.render(scene, camera);
+      this.globals.uPixelOut.value = 0;
+      u.tColor.value = world.texture;
+      u.tDepth.value = world.depthTexture;
+      u.uSize.value.set(size, size);
+      u.uNear.value = camera.near;
+      u.uFar.value = camera.far;
+      u.uPixel.value = 1;
+      u.uChecker.value = 0;
+      u.uIndexOut.value = 1;
+      this.setPalette(palette, u);
+      renderer.setRenderTarget(roles);
+      renderer.render(this.quadScene, this.quadCam);
+      const out = new Uint8Array(size * size * 4);
+      renderer.readRenderTargetPixels(roles, 0, 0, size, size, out);
+      return out;
+    } finally {
+      u.uIndexOut.value = 0;
+      this.globals.uPixelOut.value = 0;
+      hidden.forEach((n) => {
+        n.visible = true;
+      });
+      renderer.setRenderTarget(null);
+      renderer.toneMapping = prev.tm;
+      renderer.autoClear = prev.autoClear;
+      renderer.setClearColor(prev.clearColor, prev.clearAlpha);
+      scene.background = prev.bg;
+      scene.fog = prev.fog;
+    }
+  }
+  disposeBake() {
+    if (!this.bake) return;
+    this.bake.world.depthTexture?.dispose();
+    this.bake.world.dispose();
+    this.bake.roles.dispose();
+    this.bake = null;
+  }
   setPalette(palette, u) {
     const hexes = [...PALETTE_ORDER.map((s) => palette[s]), FIXED_COLORS.tongue, FIXED_COLORS.teeth, FIXED_COLORS.black].slice(0, PIXEL_MAX_PALETTE);
     const key = paletteKey(palette);
@@ -5451,6 +5649,7 @@ var RenderPipeline = class {
     rawVec(FIXED_COLORS.black, u.uInk.value);
   }
   dispose() {
+    this.disposeBake();
     this.target?.depthTexture?.dispose();
     this.target?.dispose();
     this.quadMat.dispose();
@@ -5513,6 +5712,11 @@ function stressTestObjects(rnd = Math.random) {
 // ../viewport/src/create-viewport.ts
 var LOD_EVERY = 4;
 var LOD_CHANGES_PER_TICK = 8;
+var BAKE_SETTLED_CHECKS = 3;
+var BAKE_POLL_MS = 16;
+var BAKE_TIMEOUT_MS = 3e4;
+var BAKE_FOV = 25;
+var IDENTITY_Q = { x: 0, y: 0, z: 0, w: 1 };
 function createViewport({ evaluator }) {
   let creation = null;
   let session = null;
@@ -5525,6 +5729,7 @@ function createViewport({ evaluator }) {
   let lastDesigns = null;
   let levelsBase = 0;
   let stress = [];
+  const baking = /* @__PURE__ */ new Set();
   const driver = new MeshDriver(evaluator);
   const getAtlas = (palette) => atlas ??= new DecalAtlas(palette);
   const toast = (msg) => callbacks?.toast(msg);
@@ -5658,7 +5863,7 @@ function createViewport({ evaluator }) {
         const c = v.bounds.getCenter(new Vector327()).applyMatrix4(v.group.matrixWorld);
         const size = v.bounds.getSize(new Vector327());
         const px = projectedPx(Math.max(size.x, size.y, size.z) * v.group.matrixWorld.getMaxScaleOnAxis(), cam.position.distanceTo(c), cam.fov, h);
-        const want = lodWanted(mm.vctx.levels, px, v.resolution, v === scoped || sel.has(id));
+        const want = lodWanted(mm.vctx.levels, px, v.resolution, v === scoped || sel.has(id) || baking.has(id));
         if (want !== v.resolution) {
           v.setResolution(want);
           changes++;
@@ -5683,7 +5888,7 @@ function createViewport({ evaluator }) {
     const s = session, c = creation;
     const { stage } = mm;
     if (pendingFrame && pendingFrame.ids.every((id) => !mm.views.worldBounds([id]).isEmpty())) {
-      frameContain(stage, mm.views.worldBounds(pendingFrame.ids), mm.views.worldPoints(pendingFrame.ids), pendingFrame.options);
+      frameContain(stage, mm.views.worldBounds(pendingFrame.ids), mm.views.worldPoints(pendingFrame.ids), withView(pendingFrame.ids, pendingFrame.options));
       pendingFrame = null;
     }
     mm.vctx.globals.uTime.value = time * 1e-3;
@@ -5883,6 +6088,86 @@ function createViewport({ evaluator }) {
     c.getContext("2d").drawImage(src, 0, 0, c.width, c.height);
     return c.toDataURL("image/png");
   }
+  function withView(ids, options) {
+    if (!options.view) return options;
+    const facing = creation?.objects.find((o) => o.id === ids[0])?.transform.rotation ?? IDENTITY_Q;
+    const d = viewDirection(options.view, facing);
+    return { ...options, direction: { x: d.x, y: d.y, z: d.z } };
+  }
+  function sculptViewsOf(mm, ids) {
+    return ids.flatMap((id) => {
+      const v = mm.views.views.get(id)?.view;
+      return v instanceof RigView ? v.sculptViews() : v instanceof SculptView ? [v] : [];
+    });
+  }
+  function settled(mm, ids) {
+    const finest = mm.vctx.levels[0] ?? 36;
+    const started = performance.now();
+    return new Promise((resolve, reject) => {
+      let calm = 0;
+      const check = () => {
+        if (m !== mm) {
+          reject(new Error("The viewport was disposed during a bake."));
+          return;
+        }
+        const views = sculptViewsOf(mm, ids);
+        const ready = ids.every((id) => !mm.views.worldBounds([id]).isEmpty()) && driver.busy === 0 && views.every((v) => v.resolution === finest);
+        calm = ready ? calm + 1 : 0;
+        if (calm >= BAKE_SETTLED_CHECKS) {
+          resolve();
+          return;
+        }
+        if (performance.now() - started > BAKE_TIMEOUT_MS) {
+          const fine = views.filter((v) => v.resolution === finest).length;
+          reject(new Error(`The objects did not finish meshing in time for the bake (${driver.busy} requests in flight, ${fine} of ${views.length} parts at the finest level).`));
+          return;
+        }
+        setTimeout(check, BAKE_POLL_MS);
+      };
+      setTimeout(check, BAKE_POLL_MS);
+    });
+  }
+  async function bakeSprite(options) {
+    const mm = m;
+    if (!mm || !creation || !session) throw new Error("The viewport is not mounted.");
+    const ids = options.objectIds.filter((id) => mm.views.views.has(id));
+    if (!ids.length) throw new Error("There is nothing to bake.");
+    const size = Math.round(options.size);
+    if (!(size >= 16 && size <= 512)) throw new Error("A sprite is 16 to 512 pixels wide.");
+    ids.forEach((id) => baking.add(id));
+    try {
+      const finest = mm.vctx.levels[0] ?? 36;
+      for (const v of sculptViewsOf(mm, ids)) if (v.resolution !== finest) v.setResolution(finest);
+      await settled(mm, ids);
+      const c = creation;
+      if (!c) throw new Error("The viewport is not mounted.");
+      const { camera, orbit } = mm.stage;
+      const saved = { position: camera.position.clone(), target: orbit.target.clone(), aspect: camera.aspect, fov: camera.fov };
+      try {
+        camera.aspect = 1;
+        camera.fov = Math.min(60, Math.max(5, options.fov ?? BAKE_FOV));
+        camera.updateProjectionMatrix();
+        frameContain(mm.stage, mm.views.worldBounds(ids), mm.views.worldPoints(ids), withView(ids, { aspect: 1, padding: options.padding ?? 0.03, view: options.view }));
+        camera.updateMatrixWorld();
+        updateCameraSun(mm.stage, true);
+        for (const v of mm.views.allSculptViews()) v.updateLocalCamera(camera.position);
+        mm.vctx.atlas.flush();
+        const keep = ids.map((id) => mm.views.group(id)).filter((g) => !!g);
+        const { roles, approximated } = decodeRoles(mm.pipeline.renderSprite(size, c.palette, keep), size, size);
+        return { width: size, height: size, roles, colors: spriteColors(c.palette), anchor: spriteAnchor(roles, size, size), approximated };
+      } finally {
+        camera.aspect = saved.aspect;
+        camera.fov = saved.fov;
+        camera.updateProjectionMatrix();
+        camera.position.copy(saved.position);
+        orbit.target.copy(saved.target);
+        camera.lookAt(saved.target);
+        orbit.update();
+      }
+    } finally {
+      ids.forEach((id) => baking.delete(id));
+    }
+  }
   function dispose() {
     const mm = m;
     m = null;
@@ -5918,6 +6203,7 @@ function createViewport({ evaluator }) {
       return m?.views.contentBounds(objectId);
     },
     thumbnail,
+    bakeSprite,
     // Releases the canvas, GPU resources and pending meshes, but stays reusable: React StrictMode (and a
     // remounted page) mounts again after dispose. The evaluator's lifetime belongs to the app.
     dispose() {
@@ -5931,6 +6217,13 @@ function createViewport({ evaluator }) {
 }
 
 export {
+  SPRITE_SLOTS,
+  ROLE_TRANSPARENT,
+  ROLE_INK,
+  SPRITE_ROLE_COUNT,
+  spriteRole,
+  roleSlot,
+  spriteColors,
   createViewport
 };
-//# sourceMappingURL=chunk-VZMBE5MV.js.map
+//# sourceMappingURL=chunk-5KZP6X65.js.map