@wodira/browser 0.3.0 → 1.0.0

package/dist/ui/index-xdhg885t.js

@@ -0,0 +1,997 @@
+// src/ui/shirt-sponsors/render/auction-model.ts
+var leader2 = (slot) => slot.bids.find((bid) => bid.status === "leading");
+var minimumBid2 = (slot) => {
+  const current = leader2(slot);
+  return current ? current.amount + slot.increment : slot.startingPrice;
+};
+var hasPaidBids2 = (campaign) => campaign.slots.some((slot) => slot.bids.length > 0);
+function reserveBid2(campaign, slotId, buyer, amount, now) {
+  if (!campaign.published || now >= campaign.closesAt)
+    throw new Error("La subasta está cerrada.");
+  const slot = campaign.slots.find((item) => item.id === slotId);
+  if (!slot)
+    throw new Error("Selecciona un espacio.");
+  if (!buyer.trim())
+    throw new Error("Escribe el nombre del anunciante.");
+  if (slot.lock && slot.lock.expiresAt > now)
+    throw new Error("Hay un pago en curso.");
+  if (leader2(slot)?.buyer === buyer.trim())
+    throw new Error("Ya lideras este espacio.");
+  if (!Number.isSafeInteger(amount) || amount < minimumBid2(slot))
+    throw new Error("La puja no alcanza el mínimo.");
+  return {
+    ...campaign,
+    slots: campaign.slots.map((item) => item.id === slotId ? { ...item, lock: { buyer: buyer.trim(), amount, expiresAt: now + 5 * 60000 } } : item)
+  };
+}
+function settleBid2(campaign, slotId, outcome, now, id) {
+  const slot = campaign.slots.find((item) => item.id === slotId);
+  if (!slot?.lock)
+    throw new Error("No hay un pago pendiente.");
+  if (slot.lock.expiresAt <= now)
+    throw new Error("El turno ha caducado. Un cobro tardío se devolvería.");
+  const paid = outcome === "paid";
+  const late = paid && campaign.closesAt - now <= 2 * 60000;
+  const closesAt = late ? Math.min(Math.max(campaign.closesAt, now + 2 * 60000), campaign.originalClose + 10 * 60000) : campaign.closesAt;
+  const bid = {
+    id,
+    buyer: slot.lock.buyer,
+    amount: slot.lock.amount,
+    paidAt: now,
+    status: "leading",
+    views: 0,
+    opens: 0,
+    clicks: 0
+  };
+  return {
+    ...campaign,
+    closesAt,
+    slots: campaign.slots.map((item) => item.id === slotId ? {
+      ...item,
+      lock: undefined,
+      bids: paid ? [...item.bids.map((old) => ({ ...old, status: "refunded" })), bid] : item.bids
+    } : item)
+  };
+}
+function demoCampaign2(now) {
+  const closesAt = now + 24 * 60 * 60000;
+  return {
+    title: "Carrera híbrida · Demo",
+    front: "/images/sponsor-studio/white-race-shirt-front-v1.png",
+    back: "/images/sponsor-studio/white-race-shirt-back-v1.png",
+    quantity: 500,
+    closesAt,
+    originalClose: closesAt,
+    published: false,
+    slots: [
+      {
+        id: "chest",
+        name: "Pecho principal",
+        side: "front",
+        x: 32,
+        y: 29,
+        width: 36,
+        height: 18,
+        printWidth: 24,
+        printHeight: 12,
+        startingPrice: 1e4,
+        increment: 1000,
+        bids: []
+      },
+      {
+        id: "back",
+        name: "Espalda",
+        side: "back",
+        x: 30,
+        y: 29,
+        width: 40,
+        height: 24,
+        printWidth: 28,
+        printHeight: 18,
+        startingPrice: 15000,
+        increment: 1000,
+        bids: []
+      }
+    ]
+  };
+}
+
+// src/ui/shirt-sponsors/render/shirt-3d-renderer.ts
+import * as THREE3 from "three";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+
+// src/ui/shirt-sponsors/render/shirt-cloth-motion.ts
+import * as THREE from "three";
+var clamp = (value, limit) => Math.max(-limit, Math.min(limit, value));
+
+class ShirtClothMotion2 {
+  yaw = { offset: 0, velocity: 0 };
+  pitch = { offset: 0, velocity: 0 };
+  flutter = { offset: 0, velocity: 0 };
+  turn(yaw, pitch) {
+    if (!Number.isFinite(yaw) || !Number.isFinite(pitch))
+      return;
+    this.yaw.velocity = clamp(this.yaw.velocity - clamp(yaw, 1) * 5.5, 9);
+    this.pitch.velocity = clamp(this.pitch.velocity - clamp(pitch, 1) * 4, 7);
+    this.flutter.velocity = clamp(this.flutter.velocity + Math.min(Math.hypot(yaw, pitch), 1) * 3, 6);
+  }
+  advance(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0 || seconds > 0.25) {
+      this.reset();
+      return false;
+    }
+    let remaining = seconds;
+    while (remaining > 0) {
+      const dt = Math.min(remaining, 1 / 120);
+      this.integrate(this.yaw, dt, 75, 9, 0.34);
+      this.integrate(this.pitch, dt, 90, 10, 0.24);
+      this.integrate(this.flutter, dt, 220, 8, 0.22);
+      remaining -= dt;
+    }
+    const active = [this.yaw, this.pitch, this.flutter].some((spring) => Math.abs(spring.offset) > 0.0001 || Math.abs(spring.velocity) > 0.001);
+    if (!active)
+      this.reset();
+    return active;
+  }
+  reset() {
+    for (const spring of [this.yaw, this.pitch, this.flutter]) {
+      spring.offset = 0;
+      spring.velocity = 0;
+    }
+  }
+  integrate(spring, dt, stiffness, damping, limit) {
+    spring.velocity += (-stiffness * spring.offset - damping * spring.velocity) * dt;
+    spring.offset += spring.velocity * dt;
+    if (Math.abs(spring.offset) > limit) {
+      spring.offset = clamp(spring.offset, limit);
+      spring.velocity = 0;
+    }
+  }
+}
+
+class ShirtClothMesh2 {
+  geometry;
+  rest;
+  restNormals;
+  normalCorrections;
+  weights;
+  ripples;
+  height;
+  deformed = false;
+  constructor(geometry) {
+    this.geometry = geometry;
+    const positions = geometry.getAttribute("position");
+    if (!geometry.getAttribute("normal"))
+      geometry.computeVertexNormals();
+    const normals = geometry.getAttribute("normal");
+    this.rest = new Float32Array(positions.count * 3);
+    this.restNormals = new Float32Array(normals.count * 3);
+    this.normalCorrections = new Float32Array(normals.count * 3);
+    this.weights = new Float32Array(positions.count);
+    this.ripples = new Float32Array(positions.count);
+    geometry.computeBoundingBox();
+    geometry.computeBoundingSphere();
+    const bounds = geometry.boundingBox;
+    this.height = Math.max(bounds.max.y - bounds.min.y, 0.001);
+    const halfWidth = Math.max(Math.abs(bounds.min.x), Math.abs(bounds.max.x), 0.001);
+    for (let i = 0;i < positions.count; i++) {
+      const x = positions.getX(i), y = positions.getY(i), z = positions.getZ(i);
+      this.rest.set([x, y, z], i * 3);
+      this.restNormals.set([normals.getX(i), normals.getY(i), normals.getZ(i)], i * 3);
+      const drop = (bounds.max.y - y) / this.height;
+      const hem = THREE.MathUtils.smoothstep(drop, 0.25, 1);
+      const sleeve = THREE.MathUtils.smoothstep(Math.abs(x) / halfWidth, 0.58, 1) * THREE.MathUtils.smoothstep(drop, 0.06, 0.28);
+      this.weights[i] = Math.max(hem * hem, sleeve * 0.8);
+      this.ripples[i] = Math.sin(x / halfWidth * 8 + drop * 5) * (hem ** 3 + sleeve * 0.7);
+    }
+    geometry.computeVertexNormals();
+    for (let i = 0;i < normals.count; i++) {
+      this.normalCorrections[i * 3] = this.restNormals[i * 3] - normals.getX(i);
+      this.normalCorrections[i * 3 + 1] = this.restNormals[i * 3 + 1] - normals.getY(i);
+      this.normalCorrections[i * 3 + 2] = this.restNormals[i * 3 + 2] - normals.getZ(i);
+      normals.setXYZ(i, this.restNormals[i * 3], this.restNormals[i * 3 + 1], this.restNormals[i * 3 + 2]);
+    }
+    geometry.boundingBox.expandByScalar(this.height * 0.35);
+    geometry.boundingSphere.radius += this.height * 0.35;
+    if (positions instanceof THREE.BufferAttribute)
+      positions.setUsage(THREE.DynamicDrawUsage);
+    if (normals instanceof THREE.BufferAttribute)
+      normals.setUsage(THREE.DynamicDrawUsage);
+  }
+  apply(motion) {
+    const positions = this.geometry.getAttribute("position");
+    for (let i = 0;i < positions.count; i++) {
+      const x = this.rest[i * 3], y = this.rest[i * 3 + 1], z = this.rest[i * 3 + 2];
+      const weight = this.weights[i];
+      const twist = motion.yaw.offset * weight;
+      const cos = Math.cos(twist), sin = Math.sin(twist);
+      const ripple = motion.flutter.offset * this.height * 0.13 * this.ripples[i];
+      positions.setXYZ(i, x * cos + z * sin + motion.yaw.offset * this.height * 0.12 * weight, y + Math.abs(twist) * this.height * 0.025 * weight + ripple * 0.25, z * cos - x * sin + motion.pitch.offset * this.height * 0.4 * weight + ripple);
+    }
+    positions.needsUpdate = true;
+    this.geometry.computeVertexNormals();
+    const normals = this.geometry.getAttribute("normal");
+    for (let i = 0;i < normals.count; i++) {
+      const x = normals.getX(i) + this.normalCorrections[i * 3];
+      const y = normals.getY(i) + this.normalCorrections[i * 3 + 1];
+      const z = normals.getZ(i) + this.normalCorrections[i * 3 + 2];
+      const length = Math.hypot(x, y, z) || 1;
+      normals.setXYZ(i, x / length, y / length, z / length);
+    }
+    this.deformed = true;
+  }
+  restore() {
+    if (!this.deformed)
+      return;
+    const positions = this.geometry.getAttribute("position");
+    const normals = this.geometry.getAttribute("normal");
+    for (let i = 0;i < positions.count; i++) {
+      positions.setXYZ(i, this.rest[i * 3], this.rest[i * 3 + 1], this.rest[i * 3 + 2]);
+      normals.setXYZ(i, this.restNormals[i * 3], this.restNormals[i * 3 + 1], this.restNormals[i * 3 + 2]);
+    }
+    positions.needsUpdate = normals.needsUpdate = true;
+    this.deformed = false;
+  }
+}
+
+// src/ui/shirt-sponsors/render/shirt-artwork-projection.ts
+import * as THREE2 from "three";
+
+// src/ui/shirt-sponsors/render/shirt-silhouette.ts
+function shirtArmhole2(spans) {
+  const radius = Math.max(1, Math.round(spans.length * 0.02));
+  let best = 0;
+  let row = Math.round(spans.length * 0.42);
+  for (let i = Math.round(spans.length * 0.22);i < spans.length * 0.6; i++) {
+    const above = spans[Math.max(0, i - radius)];
+    const below = spans[Math.min(spans.length - 1, i + radius)];
+    const reduction = above.right - above.left - (below.right - below.left);
+    if (reduction > best) {
+      best = reduction;
+      row = i;
+    }
+  }
+  return row / (spans.length - 1);
+}
+function mapShirtHeight2(y, fromArmhole, toArmhole) {
+  return y <= fromArmhole ? y / fromArmhole * toArmhole : toArmhole + (y - fromArmhole) / (1 - fromArmhole) * (1 - toArmhole);
+}
+
+// src/ui/shirt-sponsors/render/shirt-artwork.ts
+function paintShirtArtwork2(context, artwork, images, width, height, silhouette = []) {
+  context.clearRect(0, 0, width * 2, height);
+  for (const [index, side] of ["front", "back"].entries()) {
+    const layer = artwork?.[side];
+    const image = layer && images.get(layer.url);
+    if (!layer || !image?.complete || !image.naturalWidth)
+      continue;
+    const scale = Math.min(width / image.naturalWidth, height / image.naturalHeight) * layer.scale;
+    const w = image.naturalWidth * scale;
+    const h = image.naturalHeight * scale;
+    context.save();
+    context.beginPath();
+    context.rect(index * width, 0, width, height);
+    context.clip();
+    if (layer.photo && silhouette.length) {
+      context.translate(index * width + width / 2 + layer.x * width / 100, height / 2 + layer.y * height / 100);
+      context.scale(layer.scale, layer.scale);
+      const armhole = shirtArmhole2(silhouette);
+      const torso = silhouette[Math.round(silhouette.length * 0.58)];
+      for (let row = 0;row < silhouette.length; row++) {
+        const span = silhouette[row];
+        const left = side === "front" ? span.left : 1 - span.right;
+        const right = side === "front" ? span.right : 1 - span.left;
+        const y = row / silhouette.length;
+        const torsoLeft = side === "front" ? torso.left : 1 - torso.right;
+        const torsoRight = side === "front" ? torso.right : 1 - torso.left;
+        const strips = [
+          [0, 0.25, left, torsoLeft],
+          [0.25, 0.5, torsoLeft, torsoRight],
+          [0.75, 0.25, torsoRight, right]
+        ];
+        for (const [sx, sw, from, to] of strips) {
+          if (to <= from)
+            continue;
+          context.drawImage(image, sx * image.naturalWidth, mapShirtHeight2(y, armhole, 0.42) * (image.naturalHeight - 1), sw * image.naturalWidth, image.naturalHeight / silhouette.length, (from - 0.5) * width - 2, (y - 0.5) * height, (to - from) * width + 4, height / silhouette.length + 1);
+        }
+      }
+      context.restore();
+      continue;
+    }
+    context.drawImage(image, index * width + (width - w) / 2 + layer.x * width / 100, (height - h) / 2 + layer.y * height / 100, w, h);
+    context.restore();
+  }
+}
+
+// src/ui/shirt-sponsors/render/shirt-artwork-projection.ts
+class ShirtArtworkProjection2 {
+  silhouette = [];
+  canvas = document.createElement("canvas");
+  texture = new THREE2.CanvasTexture(this.canvas);
+  uniforms = {
+    wodiraArtworkMap: { value: this.texture },
+    wodiraArtworkEnabled: { value: false },
+    wodiraFrontFabricColor: { value: new THREE2.Color },
+    wodiraBackFabricColor: { value: new THREE2.Color }
+  };
+  constructor(model) {
+    model.updateMatrixWorld(true);
+    const inverseRoot = model.matrixWorld.clone().invert();
+    const bounds = new THREE2.Box3;
+    const meshes = [];
+    model.traverse((object) => {
+      if (!(object instanceof THREE2.Mesh))
+        return;
+      const attribute = object.geometry.getAttribute("position");
+      const transform = inverseRoot.clone().multiply(object.matrixWorld);
+      if (!object.geometry.hasAttribute("normal"))
+        object.geometry.computeVertexNormals();
+      const normals = object.geometry.getAttribute("normal");
+      const normalTransform = new THREE2.Matrix3().getNormalMatrix(transform);
+      const facing = Array.from({ length: normals.count }, (_, index) => new THREE2.Vector3().fromBufferAttribute(normals, index).applyNormalMatrix(normalTransform).z);
+      const positions = Array.from({ length: attribute.count }, (_, index) => {
+        const point = new THREE2.Vector3().fromBufferAttribute(attribute, index).applyMatrix4(transform);
+        bounds.expandByPoint(point);
+        return point;
+      });
+      meshes.push({ mesh: object, positions, facing });
+    });
+    const size = bounds.getSize(new THREE2.Vector3);
+    const resolution = 512;
+    this.silhouette = Array.from({ length: resolution }, () => ({ left: 1, right: 0 }));
+    for (const { mesh, positions } of meshes) {
+      const indices = mesh.geometry.index;
+      const count = indices?.count ?? positions.length;
+      for (let i = 0;i < count; i += 3) {
+        const triangle = [0, 1, 2].map((j) => positions[indices ? indices.getX(i + j) : i + j]);
+        for (let edge = 0;edge < 3; edge++) {
+          const a = triangle[edge];
+          const b = triangle[(edge + 1) % 3];
+          const ay = (bounds.max.y - a.y) / size.y * resolution;
+          const by = (bounds.max.y - b.y) / size.y * resolution;
+          if (Math.abs(by - ay) < 0.00001)
+            continue;
+          const start = Math.max(0, Math.ceil(Math.min(ay, by) - 0.5));
+          const end = Math.min(resolution - 1, Math.floor(Math.max(ay, by) - 0.5));
+          for (let row = start;row <= end; row++) {
+            const t = (row + 0.5 - ay) / (by - ay);
+            const x = (a.x + (b.x - a.x) * t - bounds.min.x) / size.x;
+            const span = this.silhouette[row];
+            span.left = Math.min(span.left, x);
+            span.right = Math.max(span.right, x);
+          }
+        }
+      }
+    }
+    for (let row = 0;row < resolution; row++) {
+      if (this.silhouette[row].right <= this.silhouette[row].left)
+        this.silhouette[row] = { ...this.silhouette[row - 1] ?? { left: 0, right: 1 } };
+    }
+    this.canvas.width = 2048;
+    this.canvas.height = Math.min(2048, Math.max(1, Math.round(1024 * size.y / size.x)));
+    this.texture.colorSpace = THREE2.SRGBColorSpace;
+    this.texture.flipY = false;
+    this.texture.generateMipmaps = false;
+    this.texture.minFilter = THREE2.LinearFilter;
+    for (const { mesh, positions, facing } of meshes) {
+      const uv = new Float32Array(positions.length * 3);
+      positions.forEach((point, index) => {
+        uv[index * 3] = (point.x - bounds.min.x) / size.x;
+        uv[index * 3 + 1] = (bounds.max.y - point.y) / size.y;
+        uv[index * 3 + 2] = facing[index];
+      });
+      mesh.geometry.setAttribute("wodiraArtworkUv", new THREE2.BufferAttribute(uv, 3));
+      for (const material of Array.isArray(mesh.material) ? mesh.material : [mesh.material]) {
+        if (!(material instanceof THREE2.MeshStandardMaterial))
+          continue;
+        material.onBeforeCompile = (shader) => {
+          Object.assign(shader.uniforms, this.uniforms);
+          shader.vertexShader = shader.vertexShader.replace("#include <common>", `#include <common>
+              attribute vec3 wodiraArtworkUv;
+              varying vec3 vWodiraArtworkUv;`).replace("#include <begin_vertex>", `#include <begin_vertex>
+              vWodiraArtworkUv = wodiraArtworkUv;`);
+          shader.fragmentShader = shader.fragmentShader.replace("#include <common>", `#include <common>
+              uniform sampler2D wodiraArtworkMap;
+              uniform bool wodiraArtworkEnabled;
+              uniform vec3 wodiraFrontFabricColor;
+              uniform vec3 wodiraBackFabricColor;
+              varying vec3 vWodiraArtworkUv;`).replace("#include <map_fragment>", `
+              // The authored atlas partitions sleeves per triangle. Continue the torso
+              // print across that seam instead of clipping it to a jagged UV island.
+              bool front = vWodiraArtworkUv.z >= 0.0;
+              float torsoU = front ? vWodiraArtworkUv.x * 0.25 : 0.5 - vWodiraArtworkUv.x * 0.25;
+              torsoU = front ? clamp(torsoU, 0.00025, 0.24975) : clamp(torsoU, 0.25025, 0.49975);
+              vec4 sponsorColor = texture2D(map, vMapUv);
+              if (vMapUv.x >= 0.5) {
+                vec4 torsoColor = texture2D(map, vec2(torsoU, vWodiraArtworkUv.y));
+                // Sleeve artwork takes priority where its pixels are opaque.
+                float alpha = sponsorColor.a + torsoColor.a * (1.0 - sponsorColor.a);
+                vec3 color = sponsorColor.rgb * sponsorColor.a
+                  + torsoColor.rgb * torsoColor.a * (1.0 - sponsorColor.a);
+                sponsorColor = vec4(color / max(alpha, 0.00001), alpha);
+              }
+              vec3 fabricColor = front ? wodiraFrontFabricColor : wodiraBackFabricColor;
+              vec3 clothColor = fabricColor;
+              if (wodiraArtworkEnabled) {
+                // Mirror the back's horizontal axis so lettering reads from behind.
+                float u = vWodiraArtworkUv.z >= 0.0
+                  ? clamp(vWodiraArtworkUv.x * 0.5, 0.00025, 0.49975)
+                  : clamp(1.0 - vWodiraArtworkUv.x * 0.5, 0.50025, 0.99975);
+                vec4 printColor = texture2D(wodiraArtworkMap, vec2(u, vWodiraArtworkUv.y));
+                clothColor = mix(fabricColor, printColor.rgb, printColor.a);
+              }
+              diffuseColor.rgb *= mix(clothColor, sponsorColor.rgb, sponsorColor.a);
+            `);
+          shader.fragmentShader = shader.fragmentShader.replace("#include <lights_physical_fragment>", `#include <lights_physical_fragment>
+            #ifdef USE_SHEEN
+              if (wodiraArtworkEnabled) material.sheenColor = 0.3 * mix(diffuseColor.rgb, vec3(1.0), 0.35);
+            #endif`);
+        };
+        material.customProgramCacheKey = () => "wodira-artwork-continuous-sponsors-v3";
+        material.needsUpdate = true;
+      }
+    }
+  }
+  update(artwork, images, dye) {
+    this.uniforms.wodiraArtworkEnabled.value = !!(artwork?.front || artwork?.back);
+    const front = artwork?.front?.fabricColor;
+    const back = artwork?.back?.fabricColor;
+    this.uniforms.wodiraFrontFabricColor.value.copy(front || back ? new THREE2.Color(front ?? back) : dye);
+    this.uniforms.wodiraBackFabricColor.value.copy(back || front ? new THREE2.Color(back ?? front) : dye);
+    const context = this.canvas.getContext("2d");
+    if (context)
+      paintShirtArtwork2(context, artwork, images, this.canvas.width / 2, this.canvas.height, this.silhouette);
+    this.texture.needsUpdate = true;
+  }
+  dispose() {
+    this.texture.dispose();
+  }
+}
+
+// src/ui/shirt-sponsors/render/shirt-3d-renderer.ts
+var defaultShirt3dPalette2 = {
+  slot: "#e32397",
+  slotPreview: "#ff1593",
+  slotText: "#ffffff",
+  priceLeading: "#e40086",
+  price: "#101632",
+  reserved: "#c9c5d3",
+  selected: "#101632"
+};
+var SHIRT_MODEL_PATH2 = "/images/sponsor-studio/white-shirt-realistic-v1.glb?v=7";
+
+class Shirt3dRenderer2 {
+  canvas;
+  fail;
+  recovering;
+  renderer;
+  scene = new THREE3.Scene;
+  camera = new THREE3.OrthographicCamera(-1, 1, 1.12, -1.12, 0.1, 20);
+  model;
+  observer;
+  disposed = false;
+  loadController = new AbortController;
+  contextUnavailable = false;
+  recoveryTimer;
+  firstFrame;
+  frame = 0;
+  textureDirty = false;
+  atlas = document.createElement("canvas");
+  texture = new THREE3.CanvasTexture(this.atlas);
+  fabricTexture = this.createFabricTexture();
+  fabricMaterials = [];
+  images = new Map;
+  slots = [];
+  rotation = 0;
+  tilt = 0;
+  side = "front";
+  viewSurface;
+  rotating = false;
+  zoom = 1;
+  shirtColor = "#ffffff";
+  showBidPrices = false;
+  artwork = null;
+  artworkProjection;
+  priceFormatter;
+  palette;
+  selectedSlotId = null;
+  modelUrl;
+  raycaster = new THREE3.Raycaster;
+  cloth = new ShirtClothMotion2;
+  clothMeshes = [];
+  clothActive = false;
+  lastFrameTime = 0;
+  reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+  constructor(canvas, fail, recovering = () => {}, options = {}) {
+    this.canvas = canvas;
+    this.fail = fail;
+    this.recovering = recovering;
+    this.modelUrl = new URL(options.modelUrl ?? SHIRT_MODEL_PATH2, document.baseURI);
+    this.palette = { ...defaultShirt3dPalette2, ...options.palette };
+    this.priceFormatter = this.createPriceFormatter(options.locale);
+    this.atlas.width = 2048;
+    this.atlas.height = 574;
+    this.texture.generateMipmaps = false;
+    this.texture.minFilter = THREE3.LinearFilter;
+    this.texture.colorSpace = THREE3.SRGBColorSpace;
+    this.texture.flipY = false;
+    this.renderer = new THREE3.WebGLRenderer({ canvas, alpha: true, antialias: true });
+    this.renderer.debug.onShaderError = () => {
+      throw new Error("Shirt material shader unavailable");
+    };
+    this.renderer.toneMapping = THREE3.ACESFilmicToneMapping;
+    this.renderer.toneMappingExposure = 1;
+    this.renderer.setPixelRatio(Math.min(devicePixelRatio, matchMedia("(pointer: coarse)").matches ? 1.5 : 2));
+    this.fabricTexture.anisotropy = Math.min(4, this.renderer.capabilities.getMaxAnisotropy());
+    this.camera.position.z = 5;
+    this.scene.add(new THREE3.HemisphereLight(16777215, 7827851, 2.3));
+    const key = new THREE3.DirectionalLight(16777215, 2.2);
+    key.position.set(-3, 4, 5);
+    this.scene.add(key);
+    const back = new THREE3.DirectionalLight(16777215, 1.6);
+    back.position.set(3, 2, -4);
+    this.scene.add(back);
+    this.observer = new ResizeObserver(() => {
+      if (this.disposed || this.contextUnavailable)
+        return;
+      try {
+        const rect = canvas.getBoundingClientRect();
+        this.renderer.setSize(rect.width, rect.height, false);
+        this.render();
+      } catch {
+        this.fail();
+      }
+    });
+    this.observer.observe(canvas);
+    canvas.addEventListener("webglcontextlost", this.contextLost);
+    canvas.addEventListener("webglcontextrestored", this.contextRestored);
+    this.reducedMotion.addEventListener("change", this.resetCloth);
+    document.addEventListener("visibilitychange", this.resetCloth);
+  }
+  async load() {
+    const url = this.modelUrl;
+    const response = await fetch(url, { signal: this.loadController.signal });
+    if (!response.ok)
+      throw new Error(`Shirt model request failed (${response.status})`);
+    const data = await response.arrayBuffer();
+    this.loadController.signal.throwIfAborted();
+    const gltf = await new GLTFLoader().parseAsync(data, new URL(".", url).href);
+    if (this.disposed) {
+      this.disposeModel(gltf.scene);
+      return;
+    }
+    this.model = gltf.scene;
+    this.model.traverse((object) => {
+      if (!(object instanceof THREE3.Mesh))
+        return;
+      this.clothMeshes.push(new ShirtClothMesh2(object.geometry));
+      const materials = Array.isArray(object.material) ? object.material : [object.material];
+      for (const material of materials) {
+        if (!(material instanceof THREE3.MeshStandardMaterial))
+          continue;
+        material.color.set(16777215);
+        material.side = THREE3.DoubleSide;
+        material.metalness = 0;
+        material.roughness = 1;
+        material.roughnessMap = this.fabricTexture;
+        material.bumpMap = this.fabricTexture;
+        material.bumpScale = 0.0012;
+        material.map = this.texture;
+        if (material instanceof THREE3.MeshPhysicalMaterial) {
+          material.sheen = 0.3;
+          material.sheenColorMap = null;
+          material.sheenRoughness = 1;
+          material.specularIntensity = 0.3;
+          material.clearcoat = 0;
+          this.fabricMaterials.push(material);
+        }
+      }
+    });
+    this.scene.add(this.model);
+    this.paint();
+    await new Promise((resolve, reject) => {
+      this.firstFrame = { resolve, reject };
+      this.render();
+    });
+  }
+  update(slots, side, rotating, color = "#ffffff", showBidPrices = false, artwork = null, viewSurface) {
+    this.slots = slots;
+    if (side !== this.side || viewSurface !== this.viewSurface) {
+      this.viewSurface = viewSurface;
+      this.resetView();
+    }
+    this.side = side;
+    this.rotating = rotating;
+    this.shirtColor = color;
+    this.showBidPrices = showBidPrices;
+    this.artwork = artwork;
+    const urls = new Set([
+      ...slots.map((slot) => slot.isReserved ? slot.reservedLogo : leader2(slot)?.logo),
+      artwork?.front?.url,
+      artwork?.back?.url
+    ].filter((url) => !!url));
+    for (const [url, image] of this.images)
+      if (!urls.has(url)) {
+        image.onload = null;
+        this.images.delete(url);
+      }
+    for (const url of urls)
+      if (!this.images.has(url)) {
+        const image = new Image;
+        if (/^https?:\/\//i.test(url))
+          image.crossOrigin = "anonymous";
+        this.images.set(url, image);
+        image.onload = () => {
+          if (!this.disposed) {
+            this.paint();
+            this.render();
+          }
+        };
+        image.src = url;
+      }
+    this.paint();
+    this.render();
+  }
+  async snapshot(side = "front") {
+    return this.capture(side, "image/png");
+  }
+  async productionSnapshot(view) {
+    return this.capture(view, "image/webp");
+  }
+  async capture(view, mimeType) {
+    if (!this.model || this.disposed || this.contextUnavailable)
+      throw new Error("Shirt renderer unavailable");
+    await Promise.all([...this.images.values()].map((image) => image.decode()));
+    if (this.disposed || !this.model || this.contextUnavailable)
+      throw new Error("Shirt renderer unavailable");
+    this.resetCloth();
+    this.paintNow();
+    const rotation = this.model.rotation.clone();
+    const zoom = this.camera.zoom;
+    try {
+      this.model.rotation.set(view === "top" ? Math.PI / 2 : 0, view === "back" ? Math.PI : view === "left" ? Math.PI / 2 : view === "right" ? -Math.PI / 2 : 0, 0);
+      this.camera.zoom = 1;
+      this.camera.updateProjectionMatrix();
+      this.renderer.render(this.scene, this.camera);
+      const preview = document.createElement("canvas");
+      preview.width = 640;
+      preview.height = Math.round(640 * this.renderer.domElement.height / this.renderer.domElement.width);
+      const context = preview.getContext("2d");
+      if (!context)
+        throw new Error("Canvas unavailable");
+      if (mimeType === "image/webp") {
+        context.fillStyle = "#ffffff";
+        context.fillRect(0, 0, preview.width, preview.height);
+      }
+      context.drawImage(this.renderer.domElement, 0, 0, preview.width, preview.height);
+      return await new Promise((resolve, reject) => preview.toBlob((blob) => blob ? resolve(blob) : reject(new Error("Preview encoding failed")), mimeType, mimeType === "image/webp" ? 0.82 : undefined));
+    } finally {
+      this.model.rotation.copy(rotation);
+      this.camera.zoom = zoom;
+      this.camera.updateProjectionMatrix();
+      this.render();
+    }
+  }
+  setSelectedSlot(id) {
+    if (id === this.selectedSlotId)
+      return;
+    this.selectedSlotId = id;
+    this.paint();
+    this.render();
+  }
+  setAppearance(options) {
+    if (options.palette)
+      this.palette = { ...defaultShirt3dPalette2, ...options.palette };
+    if (options.locale !== undefined)
+      this.priceFormatter = this.createPriceFormatter(options.locale);
+    this.paint();
+    this.render();
+  }
+  createPriceFormatter(locale) {
+    const options = { style: "currency", currency: "EUR", maximumFractionDigits: 0 };
+    try {
+      return new Intl.NumberFormat(locale || document.documentElement.lang || "es-ES", options);
+    } catch {
+      return new Intl.NumberFormat("es-ES", options);
+    }
+  }
+  rotate(dx, dy) {
+    if (!Number.isFinite(dx) || !Number.isFinite(dy))
+      return;
+    const previousTilt = this.tilt;
+    this.rotation += dx * 0.01;
+    this.tilt = Math.max(-0.7, Math.min(0.7, this.tilt + dy * 0.008));
+    if (!this.reducedMotion.matches && !document.hidden && (dx || this.tilt !== previousTilt)) {
+      this.cloth.turn(dx * 0.01, this.tilt - previousTilt);
+      this.clothActive = true;
+    }
+    this.render();
+  }
+  zoomBy(delta) {
+    this.zoom = Math.max(0.7, Math.min(1.8, this.zoom + delta));
+    this.render();
+  }
+  resetView() {
+    this.rotation = this.viewSurface === "left-sleeve" ? Math.PI / 2 : this.viewSurface === "right-sleeve" ? -Math.PI / 2 : 0;
+    this.tilt = 0;
+    this.zoom = 1;
+    this.resetCloth();
+  }
+  surface(clientX, clientY) {
+    if (!this.model)
+      return;
+    const bounds = this.canvas.getBoundingClientRect();
+    this.raycaster.setFromCamera(new THREE3.Vector2((clientX - bounds.left) / bounds.width * 2 - 1, -((clientY - bounds.top) / bounds.height) * 2 + 1), this.camera);
+    const hit = this.raycaster.intersectObject(this.model, true).find((item) => item.uv);
+    if (!hit?.uv)
+      return;
+    const column = Math.min(3, Math.floor(hit.uv.x * 4));
+    let torso;
+    if (column >= 2 && hit.object instanceof THREE3.Mesh && hit.face) {
+      const geometry = hit.object.geometry;
+      const projection = geometry.getAttribute("wodiraArtworkUv");
+      const positions = geometry.getAttribute("position");
+      if (projection) {
+        const { a, b, c } = hit.face;
+        const weights = THREE3.Triangle.getBarycoord(hit.object.worldToLocal(hit.point.clone()), new THREE3.Vector3().fromBufferAttribute(positions, a), new THREE3.Vector3().fromBufferAttribute(positions, b), new THREE3.Vector3().fromBufferAttribute(positions, c), new THREE3.Vector3);
+        if (weights) {
+          const uv = new THREE3.Vector3().addScaledVector(new THREE3.Vector3().fromBufferAttribute(projection, a), weights.x).addScaledVector(new THREE3.Vector3().fromBufferAttribute(projection, b), weights.y).addScaledVector(new THREE3.Vector3().fromBufferAttribute(projection, c), weights.z);
+          torso = {
+            side: uv.z >= 0 ? "front" : "back",
+            surface: undefined,
+            x: (uv.z >= 0 ? uv.x : 1 - uv.x) * 100,
+            y: uv.y * 100
+          };
+        }
+      }
+    }
+    return {
+      torso,
+      side: column === 1 ? "back" : "front",
+      surface: column === 2 ? "left-sleeve" : column === 3 ? "right-sleeve" : undefined,
+      x: (hit.uv.x * 4 - column) * 100,
+      y: hit.uv.y * 100
+    };
+  }
+  pick(clientX, clientY) {
+    const point = this.surface(clientX, clientY);
+    if (!point)
+      return;
+    for (const candidate of [point, point.torso]) {
+      if (!candidate)
+        continue;
+      const slot = this.slots.find((slot) => candidate.side === slot.side && candidate.surface === slot.surface && candidate.x >= slot.x && candidate.x <= slot.x + slot.width && candidate.y >= slot.y && candidate.y <= slot.y + slot.height);
+      if (slot)
+        return slot;
+    }
+    return;
+  }
+  paint() {
+    this.textureDirty = true;
+  }
+  paintNow() {
+    const ctx = this.atlas.getContext("2d");
+    if (!ctx)
+      return;
+    ctx.setTransform(this.atlas.width / 4000, 0, 0, this.atlas.height / 1120, 0, 0);
+    const dye = new THREE3.Color(this.shirtColor).lerp(new THREE3.Color(16777215), 0.004);
+    if (this.model && !this.artworkProjection) {
+      this.resetCloth();
+      this.artworkProjection = new ShirtArtworkProjection2(this.model);
+    }
+    this.artworkProjection?.update(this.artwork, this.images, dye);
+    for (const material of this.fabricMaterials) {
+      material.sheenColor.copy(dye).lerp(new THREE3.Color(16777215), 0.35);
+    }
+    ctx.clearRect(0, 0, 4000, 1120);
+    for (const slot of this.slots) {
+      const x = (slot.surface === "left-sleeve" ? 2000 : slot.surface === "right-sleeve" ? 3000 : slot.side === "back" ? 1000 : 0) + slot.x * 10, y = slot.y * 11.2, w = slot.width * 10, h = slot.height * 11.2;
+      ctx.save();
+      if (slot.surface === "left-sleeve") {
+        ctx.translate(2 * x + w, 0);
+        ctx.scale(-1, 1);
+      }
+      const currentBid = leader2(slot);
+      const logo = slot.isReserved ? slot.reservedLogo : currentBid?.logo;
+      const image = logo ? this.images.get(logo) : undefined;
+      if (image?.complete && image.naturalWidth) {
+        const scale = Math.min(w / image.naturalWidth, h / image.naturalHeight);
+        const iw = image.naturalWidth * scale, ih = image.naturalHeight * scale;
+        ctx.drawImage(image, x + (w - iw) / 2, y + (h - ih) / 2, iw, ih);
+      } else if (this.rotating) {
+        ctx.fillStyle = slot.isReserved ? this.palette.reserved : slot.id === "drawing-preview" ? this.palette.slotPreview : this.palette.slot;
+        ctx.fillRect(x, y, w, h);
+        ctx.strokeStyle = this.palette.slotText;
+        ctx.lineWidth = 5;
+        ctx.strokeRect(x, y, w, h);
+        ctx.fillStyle = this.palette.slotText;
+        ctx.font = "bold 24px sans-serif";
+        ctx.textBaseline = "middle";
+        ctx.textAlign = "center";
+        ctx.fillText(slot.name, x + w / 2, y + h * (this.showBidPrices ? 0.36 : 0.5), w - 10);
+      }
+      if (slot.id === this.selectedSlotId) {
+        ctx.strokeStyle = this.palette.selected;
+        ctx.lineWidth = 12;
+        ctx.strokeRect(x - 6, y - 6, w + 12, h + 12);
+      }
+      if (this.showBidPrices && !slot.isReserved && slot.id !== "drawing-preview") {
+        this.paintBidPrice(ctx, x, y, w, h, slot.bidPrice ?? currentBid?.amount ?? slot.startingPrice, !!currentBid);
+      }
+      ctx.restore();
+    }
+    this.texture.needsUpdate = true;
+  }
+  paintBidPrice(ctx, x, y, width, height, amount, hasBid) {
+    if (!Number.isFinite(amount) || amount <= 0)
+      return;
+    const label = this.priceFormatter.format(amount);
+    const badgeHeight = Math.min(56, height * 0.43);
+    const fontSize = Math.min(46, badgeHeight * 0.82);
+    ctx.save();
+    ctx.font = `700 ${fontSize}px sans-serif`;
+    const badgeWidth = Math.min(width - 12, ctx.measureText(label).width + 26);
+    const badgeX = x + (width - badgeWidth) / 2;
+    const badgeY = y + height - badgeHeight - 8;
+    ctx.beginPath();
+    ctx.roundRect(badgeX, badgeY, badgeWidth, badgeHeight, Math.min(15, badgeHeight / 3));
+    ctx.fillStyle = hasBid ? this.palette.priceLeading : this.palette.price;
+    ctx.shadowColor = "rgba(16, 22, 50, 0.3)";
+    ctx.shadowBlur = 10;
+    ctx.shadowOffsetY = 3;
+    ctx.fill();
+    ctx.shadowColor = "transparent";
+    ctx.strokeStyle = this.palette.slotText;
+    ctx.lineWidth = 3;
+    ctx.stroke();
+    ctx.fillStyle = this.palette.slotText;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(label, x + width / 2, badgeY + badgeHeight / 2, badgeWidth - 14);
+    ctx.restore();
+  }
+  render() {
+    if (this.disposed || this.contextUnavailable)
+      return;
+    if (this.frame)
+      return;
+    if (!this.lastFrameTime)
+      this.lastFrameTime = performance.now();
+    this.frame = requestAnimationFrame((time) => {
+      this.frame = 0;
+      if (this.disposed || this.contextUnavailable)
+        return;
+      try {
+        const elapsed = Math.max(0, (time - this.lastFrameTime) / 1000);
+        this.lastFrameTime = time;
+        if (this.clothActive) {
+          this.clothActive = this.cloth.advance(elapsed);
+          for (const mesh of this.clothMeshes) {
+            if (this.clothActive)
+              mesh.apply(this.cloth);
+            else
+              mesh.restore();
+          }
+        }
+        if (this.textureDirty) {
+          this.paintNow();
+          this.textureDirty = false;
+        }
+        if (this.model)
+          this.model.rotation.set(this.tilt, (this.side === "back" ? Math.PI : 0) + this.rotation, 0);
+        this.camera.zoom = this.zoom;
+        this.camera.updateProjectionMatrix();
+        this.renderer.render(this.scene, this.camera);
+        if (this.renderer.getContext().isContextLost())
+          return;
+        if (this.model && this.canvas.clientWidth > 0 && this.canvas.clientHeight > 0) {
+          this.firstFrame?.resolve();
+          this.firstFrame = undefined;
+          clearTimeout(this.recoveryTimer);
+          this.recovering(false);
+        }
+        if (this.clothActive)
+          this.render();
+        else
+          this.lastFrameTime = 0;
+      } catch {
+        this.fail();
+      }
+    });
+  }
+  resetCloth = () => {
+    this.cloth.reset();
+    this.clothActive = false;
+    this.lastFrameTime = this.frame ? performance.now() : 0;
+    for (const mesh of this.clothMeshes)
+      mesh.restore();
+    this.render();
+  };
+  createFabricTexture() {
+    const size = 128;
+    const data = new Uint8Array(size * size * 4);
+    for (let y = 0;y < size; y++)
+      for (let x = 0;x < size; x++) {
+        const row = y / 16 * Math.PI * 2;
+        const column = x / 16 * Math.PI * 2;
+        const yarn = Math.sin(column + Math.sin(row) * 0.65) * Math.cos(row);
+        const fibre = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+        const grain = (fibre - Math.floor(fibre) - 0.5) * 10;
+        const offset = (y * size + x) * 4;
+        data[offset] = Math.round(128 + yarn * 35 + grain);
+        data[offset + 1] = Math.round(237 + yarn * 10 + grain * 0.3);
+        data[offset + 2] = 0;
+        data[offset + 3] = 255;
+      }
+    const texture = new THREE3.DataTexture(data, size, size, THREE3.RGBAFormat);
+    texture.wrapS = texture.wrapT = THREE3.RepeatWrapping;
+    texture.repeat.set(64, 20);
+    texture.generateMipmaps = true;
+    texture.minFilter = THREE3.LinearMipmapLinearFilter;
+    texture.magFilter = THREE3.LinearFilter;
+    texture.needsUpdate = true;
+    return texture;
+  }
+  contextLost = (event) => {
+    event.preventDefault();
+    if (this.disposed)
+      return;
+    this.contextUnavailable = true;
+    cancelAnimationFrame(this.frame);
+    this.frame = 0;
+    this.recovering(true);
+    clearTimeout(this.recoveryTimer);
+    this.recoveryTimer = setTimeout(() => this.fail(), 8000);
+  };
+  contextRestored = () => {
+    if (this.disposed)
+      return;
+    this.contextUnavailable = false;
+    try {
+      const rect = this.canvas.getBoundingClientRect();
+      this.renderer.setSize(rect.width, rect.height, false);
+      this.paint();
+      this.resetCloth();
+    } catch {
+      this.fail();
+    }
+  };
+  disposeModel(model) {
+    model.traverse((object) => {
+      if (!(object instanceof THREE3.Mesh))
+        return;
+      object.geometry.dispose();
+      for (const material of Array.isArray(object.material) ? object.material : [object.material])
+        material.dispose();
+    });
+  }
+  dispose() {
+    if (this.disposed)
+      return;
+    this.disposed = true;
+    this.loadController.abort();
+    clearTimeout(this.recoveryTimer);
+    this.firstFrame?.reject(new Error("Shirt renderer disposed"));
+    this.firstFrame = undefined;
+    cancelAnimationFrame(this.frame);
+    this.observer.disconnect();
+    this.canvas.removeEventListener("webglcontextlost", this.contextLost);
+    this.canvas.removeEventListener("webglcontextrestored", this.contextRestored);
+    this.reducedMotion.removeEventListener("change", this.resetCloth);
+    document.removeEventListener("visibilitychange", this.resetCloth);
+    this.clothMeshes = [];
+    for (const image of this.images.values())
+      image.onload = null;
+    this.images.clear();
+    this.texture.dispose();
+    this.artworkProjection?.dispose();
+    this.fabricTexture.dispose();
+    this.fabricMaterials = [];
+    if (this.model)
+      this.disposeModel(this.model);
+    this.renderer.dispose();
+    this.renderer.forceContextLoss();
+  }
+}
+
+export { leader2, minimumBid2, hasPaidBids2, reserveBid2, settleBid2, demoCampaign2, ShirtClothMotion2, ShirtClothMesh2, shirtArmhole2, mapShirtHeight2, paintShirtArtwork2, ShirtArtworkProjection2, defaultShirt3dPalette2, SHIRT_MODEL_PATH2, Shirt3dRenderer2 };