@particle-academy/fancy-3d-three 0.1.0

package/dist/index.js

@@ -0,0 +1,744 @@
+import * as THREE from 'three';
+import { DecalGeometry } from 'three/examples/jsm/geometries/DecalGeometry.js';
+
+// src/index.ts
+
+// src/painters.ts
+var TEX_SCALE = 2;
+function unitOf(_w, h) {
+  return h / 240;
+}
+function paintCardBg(ctx, w, h, selected) {
+  const u = unitOf(w, h);
+  ctx.fillStyle = "#0f172a";
+  roundRect(ctx, 0, 0, w, h, 14 * u);
+  ctx.fill();
+  ctx.strokeStyle = selected ? "#6366f1" : "#1e293b";
+  ctx.lineWidth = (selected ? 4 : 2) * u;
+  ctx.stroke();
+}
+function roundRect(ctx, x, y, w, h, r) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
+function paintLabel(ctx, text, x, y) {
+  ctx.fillStyle = "#94a3b8";
+  ctx.font = "600 22px ui-sans-serif, system-ui, sans-serif";
+  ctx.textBaseline = "top";
+  ctx.fillText(text.toUpperCase(), x, y);
+}
+function paintSparkline(ctx, values, x, y, w, h, variant, color) {
+  const max = Math.max(...values, 1);
+  const min = Math.min(...values, 0);
+  const range = max - min || 1;
+  const step = w / Math.max(values.length - 1, 1);
+  if (variant === "bar") {
+    const bw = w / values.length - 4;
+    ctx.fillStyle = color;
+    values.forEach((v, i) => {
+      const bh = (v - min) / range * h;
+      ctx.fillRect(x + i * (bw + 4), y + h - bh, bw, Math.max(bh, 1));
+    });
+    return;
+  }
+  ctx.beginPath();
+  values.forEach((v, i) => {
+    const px = x + i * step;
+    const py = y + h - (v - min) / range * h;
+    if (i === 0) ctx.moveTo(px, py);
+    else ctx.lineTo(px, py);
+  });
+  if (variant === "area") {
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x, y + h);
+    ctx.closePath();
+    ctx.fillStyle = color + "44";
+    ctx.fill();
+    ctx.beginPath();
+    values.forEach((v, i) => {
+      const px = x + i * step;
+      const py = y + h - (v - min) / range * h;
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    });
+  }
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 3;
+  ctx.stroke();
+}
+function paintWidget(ctx, spec, w, h, selected) {
+  paintCardBg(ctx, w, h, selected);
+  const pad = 20;
+  switch (spec.kind) {
+    case "kpi": {
+      paintLabel(ctx, spec.label, pad, pad);
+      ctx.fillStyle = "#f1f5f9";
+      ctx.font = "700 56px ui-sans-serif, system-ui, sans-serif";
+      ctx.fillText(spec.value, pad, pad + 32);
+      if (spec.delta) {
+        ctx.fillStyle = spec.trend === "up" ? "#10b981" : spec.trend === "down" ? "#f43f5e" : "#94a3b8";
+        ctx.font = "600 22px ui-sans-serif, system-ui, sans-serif";
+        ctx.fillText(spec.delta, pad, pad + 92);
+      }
+      break;
+    }
+    case "chart": {
+      paintLabel(ctx, spec.title, pad, pad);
+      paintSparkline(ctx, spec.series, pad, pad + 36, w - pad * 2, h - pad * 2 - 36, spec.variant, spec.color ?? "#6366f1");
+      break;
+    }
+    case "kanban": {
+      const colW = (w - pad * 2 - (spec.columns.length - 1) * 10) / spec.columns.length;
+      spec.columns.forEach((col, i) => {
+        const cx = pad + i * (colW + 10);
+        ctx.fillStyle = "#1e293b";
+        roundRect(ctx, cx, pad, colW, h - pad * 2, 8);
+        ctx.fill();
+        paintLabel(ctx, col.title, cx + 8, pad + 10);
+        col.cards.forEach((c, j) => {
+          ctx.fillStyle = "#0f172a";
+          roundRect(ctx, cx + 8, pad + 44 + j * 38, colW - 16, 30, 6);
+          ctx.fill();
+          ctx.fillStyle = "#cbd5e1";
+          ctx.font = "500 20px ui-sans-serif, system-ui, sans-serif";
+          ctx.fillText(c, cx + 16, pad + 50 + j * 38);
+        });
+      });
+      break;
+    }
+    case "table": {
+      paintLabel(ctx, spec.title, pad, pad);
+      ctx.fillStyle = "#94a3b8";
+      ctx.font = "600 18px ui-sans-serif, system-ui, sans-serif";
+      const colW = (w - pad * 2) / spec.columns.length;
+      spec.columns.forEach((c, i) => ctx.fillText(c, pad + i * colW, pad + 38));
+      ctx.fillStyle = "#cbd5e1";
+      ctx.font = "400 18px ui-sans-serif, system-ui, sans-serif";
+      spec.rows.forEach((row, ri) => {
+        row.forEach((cell, ci) => ctx.fillText(String(cell), pad + ci * colW, pad + 70 + ri * 28));
+      });
+      break;
+    }
+    case "profile": {
+      ctx.fillStyle = "#6366f1";
+      ctx.beginPath();
+      ctx.arc(pad + 30, pad + 30, 28, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.fillStyle = "#fff";
+      ctx.font = "700 24px ui-sans-serif, system-ui, sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText(spec.initials, pad + 30, pad + 22);
+      ctx.textAlign = "left";
+      ctx.fillStyle = "#f1f5f9";
+      ctx.font = "600 24px ui-sans-serif, system-ui, sans-serif";
+      ctx.fillText(spec.name, pad + 76, pad + 12);
+      ctx.fillStyle = "#94a3b8";
+      ctx.font = "400 20px ui-sans-serif, system-ui, sans-serif";
+      ctx.fillText(spec.role, pad + 76, pad + 40);
+      if (spec.status) {
+        ctx.fillStyle = spec.status === "online" ? "#10b981" : spec.status === "away" ? "#f59e0b" : "#64748b";
+        ctx.beginPath();
+        ctx.arc(pad + 50, pad + 50, 6, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      break;
+    }
+    case "callout": {
+      const tone = spec.tone === "danger" ? "#f43f5e" : spec.tone === "warning" ? "#f59e0b" : spec.tone === "success" ? "#10b981" : "#3b82f6";
+      ctx.fillStyle = tone + "22";
+      roundRect(ctx, 4, 4, w - 8, h - 8, 12);
+      ctx.fill();
+      ctx.fillStyle = tone;
+      ctx.fillRect(12, 12, 4, h - 24);
+      ctx.fillStyle = "#f1f5f9";
+      ctx.font = "600 22px ui-sans-serif, system-ui, sans-serif";
+      ctx.fillText(spec.title, 28, pad);
+      ctx.fillStyle = "#cbd5e1";
+      ctx.font = "400 18px ui-sans-serif, system-ui, sans-serif";
+      wrapText(ctx, spec.body, 28, pad + 32, w - 40, 22);
+      break;
+    }
+    case "form": {
+      paintLabel(ctx, spec.title, pad, pad);
+      spec.fields.forEach((f, i) => {
+        const y = pad + 40 + i * 44;
+        ctx.fillStyle = "#cbd5e1";
+        ctx.font = "500 18px ui-sans-serif, system-ui, sans-serif";
+        ctx.fillText(f.label, pad, y);
+        ctx.fillStyle = "#1e293b";
+        roundRect(ctx, w - pad - 100, y - 4, 100, 28, 6);
+        ctx.fill();
+        if (f.type === "switch") {
+          ctx.fillStyle = "#6366f1";
+          roundRect(ctx, w - pad - 60, y - 4, 60, 28, 14);
+          ctx.fill();
+          ctx.fillStyle = "#fff";
+          ctx.beginPath();
+          ctx.arc(w - pad - 18, y + 10, 10, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      });
+      break;
+    }
+    case "action": {
+      paintLabel(ctx, spec.title, pad, pad);
+      let bx = pad;
+      const by = pad + 40;
+      spec.buttons.forEach((b) => {
+        const tw = ctx.measureText(b.label).width + 24;
+        ctx.fillStyle = b.variant === "primary" ? "#6366f1" : b.variant === "ghost" ? "transparent" : "#1e293b";
+        if (b.variant !== "ghost") {
+          roundRect(ctx, bx, by, tw, 36, 8);
+          ctx.fill();
+        }
+        ctx.fillStyle = b.variant === "primary" ? "#fff" : "#cbd5e1";
+        ctx.font = "600 18px ui-sans-serif, system-ui, sans-serif";
+        ctx.fillText(b.label, bx + 12, by + 9);
+        bx += tw + 8;
+      });
+      break;
+    }
+    case "timeline": {
+      paintLabel(ctx, spec.title, pad, pad);
+      spec.events.forEach((e, i) => {
+        const y = pad + 40 + i * 32;
+        ctx.fillStyle = "#6366f1";
+        ctx.beginPath();
+        ctx.arc(pad + 4, y + 10, 4, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.strokeStyle = "#1e293b";
+        if (i < spec.events.length - 1) {
+          ctx.beginPath();
+          ctx.moveTo(pad + 4, y + 14);
+          ctx.lineTo(pad + 4, y + 32);
+          ctx.stroke();
+        }
+        ctx.fillStyle = "#94a3b8";
+        ctx.font = "500 14px ui-monospace, monospace";
+        ctx.fillText(e.at, pad + 16, y);
+        ctx.fillStyle = "#cbd5e1";
+        ctx.font = "400 18px ui-sans-serif, system-ui, sans-serif";
+        ctx.fillText(e.label, pad + 60, y);
+      });
+      break;
+    }
+    case "code": {
+      paintLabel(ctx, spec.title, pad, pad);
+      ctx.fillStyle = "#020617";
+      roundRect(ctx, pad, pad + 36, w - pad * 2, h - pad * 2 - 36, 8);
+      ctx.fill();
+      ctx.fillStyle = "#a5b4fc";
+      ctx.font = "400 16px ui-monospace, monospace";
+      const lines = spec.code.split("\n");
+      lines.forEach((ln, i) => ctx.fillText(ln, pad + 14, pad + 56 + i * 22));
+      break;
+    }
+    case "image": {
+      ctx.fillStyle = "#1e293b";
+      roundRect(ctx, pad, pad, w - pad * 2, h - pad * 2, 8);
+      ctx.fill();
+      ctx.fillStyle = "#64748b";
+      ctx.font = "400 18px ui-sans-serif, system-ui, sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText(spec.alt, w / 2, h / 2);
+      ctx.textAlign = "left";
+      break;
+    }
+    case "text": {
+      ctx.fillStyle = "#f1f5f9";
+      ctx.font = "700 26px ui-sans-serif, system-ui, sans-serif";
+      ctx.fillText(spec.heading, pad, pad);
+      ctx.fillStyle = "#cbd5e1";
+      ctx.font = "400 18px ui-sans-serif, system-ui, sans-serif";
+      wrapText(ctx, spec.body, pad, pad + 38, w - pad * 2, 22);
+      break;
+    }
+    case "screen": {
+      const bezel = spec.bezel ?? "#0b0f17";
+      const t = spec.bezelThickness ?? 14;
+      const on = spec.on ?? true;
+      const brightness = spec.brightness ?? (on ? 1 : 0.06);
+      const bg = spec.background ?? "#020617";
+      ctx.fillStyle = bezel;
+      roundRect(ctx, 0, 0, w, h, 18);
+      ctx.fill();
+      const sx = t;
+      const sy = t;
+      const sw = w - t * 2;
+      const sh = h - t * 2;
+      ctx.save();
+      ctx.fillStyle = bg;
+      roundRect(ctx, sx, sy, sw, sh, 8);
+      ctx.fill();
+      ctx.beginPath();
+      roundRect(ctx, sx, sy, sw, sh, 8);
+      ctx.clip();
+      ctx.translate(sx, sy);
+      ctx.globalAlpha = brightness;
+      const c = spec.content;
+      if (c.type === "label") {
+        ctx.fillStyle = "#e2e8f0";
+        ctx.font = "700 32px ui-sans-serif, system-ui, sans-serif";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(c.title, sw / 2, sh / 2 - (c.subtitle ? 16 : 0));
+        if (c.subtitle) {
+          ctx.fillStyle = "#94a3b8";
+          ctx.font = "400 18px ui-sans-serif, system-ui, sans-serif";
+          ctx.fillText(c.subtitle, sw / 2, sh / 2 + 18);
+        }
+        ctx.textAlign = "left";
+        ctx.textBaseline = "alphabetic";
+      } else if (c.type === "paint") {
+        c.paint(ctx, sw, sh);
+      } else if (c.type === "image") {
+        ctx.fillStyle = "#475569";
+        ctx.font = "500 16px ui-sans-serif, system-ui, sans-serif";
+        ctx.textAlign = "center";
+        ctx.fillText(c.alt ?? "image", sw / 2, sh / 2);
+        ctx.textAlign = "left";
+      }
+      ctx.globalAlpha = 1;
+      ctx.restore();
+      ctx.fillStyle = on ? "#10b981" : "#475569";
+      ctx.beginPath();
+      ctx.arc(w - t - 6, h - t - 6, 4, 0, Math.PI * 2);
+      ctx.fill();
+      const grad = ctx.createLinearGradient(sx, sy, sx, sy + sh);
+      grad.addColorStop(0, "rgba(255,255,255,0.08)");
+      grad.addColorStop(0.4, "rgba(255,255,255,0)");
+      ctx.fillStyle = grad;
+      ctx.beginPath();
+      roundRect(ctx, sx, sy, sw, sh, 8);
+      ctx.fill();
+      break;
+    }
+    case "demoPage": {
+      const u = unitOf(w, h);
+      const padX = w * 0.06;
+      const headerH = h * 0.22;
+      const titleY = headerH + h * 0.12;
+      const titleSize = h * 0.16;
+      const descY = titleY + titleSize * 0.6;
+      const descSize = h * 0.072;
+      const descLine = descSize * 1.4;
+      const chipSize = h * 0.052;
+      const pathSize = h * 0.052;
+      const ctaSize = h * 0.075;
+      const ctaH = ctaSize * 2;
+      ctx.fillStyle = spec.accent;
+      roundRect(ctx, 0, 0, w, headerH, 14 * u);
+      ctx.fill();
+      ctx.fillRect(0, headerH - 14 * u, w, 14 * u);
+      ctx.fillStyle = "rgba(255,255,255,0.22)";
+      const chipText = spec.category.toUpperCase();
+      ctx.font = `700 ${chipSize}px ui-sans-serif, system-ui, sans-serif`;
+      ctx.textBaseline = "top";
+      const chipPad = chipSize * 0.7;
+      const chipW = ctx.measureText(chipText).width + chipPad * 2;
+      const chipH = chipSize * 1.85;
+      const chipY = (headerH - chipH) / 2;
+      roundRect(ctx, padX, chipY, chipW, chipH, chipH / 2);
+      ctx.fill();
+      ctx.fillStyle = "#fff";
+      ctx.fillText(chipText, padX + chipPad, chipY + (chipH - chipSize) / 2);
+      ctx.fillStyle = "rgba(255,255,255,0.9)";
+      ctx.font = `500 ${pathSize}px ui-monospace, monospace`;
+      const pathW = ctx.measureText(spec.path).width;
+      ctx.fillText(spec.path, w - padX - pathW, chipY + (chipH - chipSize) / 2);
+      ctx.fillStyle = "#f8fafc";
+      ctx.font = `800 ${titleSize}px ui-sans-serif, system-ui, sans-serif`;
+      ctx.fillText(spec.name, padX, titleY);
+      ctx.fillStyle = "#94a3b8";
+      ctx.font = `400 ${descSize}px ui-sans-serif, system-ui, sans-serif`;
+      const ctaY = h - padX - ctaH;
+      wrapText(ctx, spec.description, padX, descY, w - padX * 2, descLine, ctaY - descLine);
+      ctx.fillStyle = spec.accent;
+      const ctaText = "Open demo \u2192";
+      ctx.font = `600 ${ctaSize}px ui-sans-serif, system-ui, sans-serif`;
+      const ctaTextPad = ctaSize * 0.9;
+      const ctaW = ctx.measureText(ctaText).width + ctaTextPad * 2;
+      roundRect(ctx, padX, ctaY, ctaW, ctaH, ctaH * 0.25);
+      ctx.fill();
+      ctx.fillStyle = "#0f172a";
+      ctx.fillText(ctaText, padX + ctaTextPad, ctaY + (ctaH - ctaSize) / 2);
+      ctx.textBaseline = "alphabetic";
+      break;
+    }
+  }
+}
+function wrapText(ctx, text, x, y, maxW, lineH, maxY) {
+  const words = text.split(" ");
+  let line = "";
+  let yy = y;
+  for (const word of words) {
+    const test = line ? `${line} ${word}` : word;
+    if (ctx.measureText(test).width > maxW && line) {
+      if (maxY !== void 0 && yy > maxY) return;
+      ctx.fillText(line, x, yy);
+      line = word;
+      yy += lineH;
+    } else {
+      line = test;
+    }
+  }
+  if (line && (maxY === void 0 || yy <= maxY)) ctx.fillText(line, x, yy);
+}
+var DEFAULT_DENSITY = 120;
+var MAX_TEXTURE_AXIS = 1024;
+function autoPixelSize(worldWidth, worldHeight, density = DEFAULT_DENSITY) {
+  let w = Math.max(96, Math.round(worldWidth * density));
+  let h = Math.max(96, Math.round(worldHeight * density));
+  const scale = Math.min(1, MAX_TEXTURE_AXIS / Math.max(w, h));
+  if (scale < 1) {
+    w = Math.round(w * scale);
+    h = Math.round(h * scale);
+  }
+  return { w, h };
+}
+function canvasTexture(w, h, draw) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(w * TEX_SCALE));
+  canvas.height = Math.max(1, Math.round(h * TEX_SCALE));
+  const ctx = canvas.getContext("2d");
+  ctx.scale(TEX_SCALE, TEX_SCALE);
+  draw(ctx);
+  const tex = new THREE.CanvasTexture(canvas);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 4;
+  tex.needsUpdate = true;
+  return tex;
+}
+function buildSurface(surface, autoSize) {
+  if (surface.type === "color") {
+    const color = new THREE.Color(surface.color);
+    const material2 = new THREE.MeshStandardMaterial({
+      color,
+      emissive: color.clone().multiplyScalar(0.15),
+      roughness: 0.7,
+      metalness: 0
+    });
+    return { material: material2, texture: null };
+  }
+  let w = surface.pixelWidth;
+  let h = surface.pixelHeight;
+  if ((w == null || h == null) && autoSize) {
+    const auto = autoPixelSize(autoSize.worldWidth, autoSize.worldHeight);
+    w = w ?? auto.w;
+    h = h ?? auto.h;
+  }
+  w = w ?? 512;
+  h = h ?? 512;
+  const transparent = surface.type === "widget" || surface.type === "paint" && !!surface.transparent;
+  const texture = canvasTexture(w, h, (ctx) => {
+    if (surface.type === "paint") surface.paint(ctx, w, h);
+    else paintWidget(ctx, surface.widget, w, h, surface.selected ?? false);
+  });
+  const material = new THREE.MeshBasicMaterial({ map: texture, transparent, toneMapped: false });
+  return { material, texture };
+}
+function attach(obj, scene) {
+  if (scene) scene.add(obj);
+  return obj;
+}
+function createPanel(opts) {
+  const geo = new THREE.PlaneGeometry(opts.width, opts.height);
+  const { material } = buildSurface(opts.surface, { worldWidth: opts.width, worldHeight: opts.height });
+  if (opts.doubleSided) material.side = THREE.DoubleSide;
+  const mesh = new THREE.Mesh(geo, material);
+  mesh.name = opts.name ?? "panel";
+  return attach(mesh, opts.scene);
+}
+function createBillboard(opts) {
+  const m = createPanel({ ...opts, scene: void 0, name: opts.name ?? "billboard" });
+  if (opts.faceCamera) m.userData.faceCamera = true;
+  return attach(m, opts.scene);
+}
+var THREE_FACE_ORDER = ["right", "left", "top", "bottom", "front", "back"];
+function createBuilding(opts) {
+  const geo = new THREE.BoxGeometry(opts.width, opts.height, opts.depth);
+  if (opts.surface && !opts.faces) {
+    const { material } = buildSurface(opts.surface, { worldWidth: opts.width, worldHeight: opts.height });
+    const mesh2 = new THREE.Mesh(geo, material);
+    mesh2.name = opts.name ?? "building";
+    return attach(mesh2, opts.scene);
+  }
+  const materials = THREE_FACE_ORDER.map((face) => {
+    const surface = opts.faces?.[face] ?? opts.surface ?? { type: "color", color: "#475569" };
+    const isSide = face === "front" || face === "back";
+    return buildSurface(surface, { worldWidth: isSide ? opts.width : opts.depth, worldHeight: opts.height }).material;
+  });
+  const mesh = new THREE.Mesh(geo, materials);
+  mesh.name = opts.name ?? "building";
+  return attach(mesh, opts.scene);
+}
+function createPillar(opts) {
+  return createBuilding({
+    scene: opts.scene,
+    name: opts.name ?? "pillar",
+    width: opts.thickness,
+    depth: opts.thickness,
+    height: opts.height,
+    surface: opts.surface
+  });
+}
+function createCylinder(opts) {
+  const geo = new THREE.CylinderGeometry(opts.radius, opts.radius, opts.height, opts.tessellation ?? 48, 1, false);
+  const { material } = buildSurface(opts.surface, { worldWidth: opts.radius * 2 * Math.PI, worldHeight: opts.height });
+  const mesh = new THREE.Mesh(geo, material);
+  mesh.name = opts.name ?? "cylinder";
+  return attach(mesh, opts.scene);
+}
+function createCurvedPanel(opts) {
+  const radius = opts.width / opts.arc;
+  const segments = Math.max(8, opts.tessellation ?? 48);
+  const geo = new THREE.CylinderGeometry(
+    radius,
+    radius,
+    opts.height,
+    segments,
+    1,
+    true,
+    Math.PI / 2 - opts.arc / 2,
+    opts.arc
+  );
+  const { material } = buildSurface(opts.surface, { worldWidth: opts.width, worldHeight: opts.height });
+  material.side = THREE.DoubleSide;
+  const mesh = new THREE.Mesh(geo, material);
+  mesh.name = opts.name ?? "curved-panel";
+  return attach(mesh, opts.scene);
+}
+function createSphere(opts) {
+  const geo = new THREE.SphereGeometry(opts.diameter / 2, opts.segments ?? 32, opts.segments ?? 32);
+  const { material } = buildSurface(opts.surface, { worldWidth: opts.diameter * Math.PI, worldHeight: opts.diameter * Math.PI / 2 });
+  const mesh = new THREE.Mesh(geo, material);
+  mesh.name = opts.name ?? "sphere";
+  return attach(mesh, opts.scene);
+}
+function createDisc(opts) {
+  const geo = new THREE.CircleGeometry(opts.radius, opts.tessellation ?? 64);
+  const { material } = buildSurface(opts.surface, { worldWidth: opts.radius * 2, worldHeight: opts.radius * 2 });
+  const mesh = new THREE.Mesh(geo, material);
+  mesh.name = opts.name ?? "disc";
+  return attach(mesh, opts.scene);
+}
+function createCard3D(opts) {
+  const edge = opts.edge ?? { type: "color", color: "#0b0f17" };
+  return createBuilding({
+    scene: opts.scene,
+    name: opts.name ?? "card3d",
+    width: opts.width,
+    height: opts.height,
+    depth: opts.depth ?? 0.06,
+    faces: { front: opts.front, back: edge, top: edge, bottom: edge, left: edge, right: edge }
+  });
+}
+function createSign(opts) {
+  const name = opts.name ?? "sign";
+  const postHeight = opts.postHeight ?? 1.4;
+  const postThickness = opts.postThickness ?? 0.12;
+  const postColor = opts.postColor ?? "#1f2937";
+  const root = new THREE.Group();
+  root.name = `${name}-root`;
+  const panel = createBillboard({ name: `${name}-panel`, width: opts.width, height: opts.height, surface: opts.surface });
+  panel.position.set(0, postHeight + opts.height / 2, 0);
+  root.add(panel);
+  const post = new THREE.Mesh(
+    new THREE.BoxGeometry(postThickness, postHeight, postThickness),
+    new THREE.MeshStandardMaterial({ color: new THREE.Color(postColor), roughness: 0.6 })
+  );
+  post.name = `${name}-post`;
+  post.position.set(0, postHeight / 2, 0);
+  root.add(post);
+  attach(root, opts.scene);
+  return { root, panel, post };
+}
+function createMonitor(opts) {
+  const name = opts.name ?? "monitor";
+  const depth = opts.depth ?? 0.18;
+  const bezelColor = new THREE.Color(opts.bezel ?? "#0b0f17");
+  const bodyMat = new THREE.MeshStandardMaterial({ color: bezelColor, roughness: 0.5, metalness: 0.1 });
+  const root = new THREE.Group();
+  root.name = `${name}-root`;
+  const body = new THREE.Mesh(new THREE.BoxGeometry(opts.width, opts.height, depth), bodyMat);
+  body.name = `${name}-body`;
+  root.add(body);
+  const screenInset = 0.04;
+  const screen = createPanel({
+    name: `${name}-screen`,
+    width: opts.width - screenInset * 2,
+    height: opts.height - screenInset * 2,
+    surface: opts.screen
+  });
+  screen.position.set(0, 0, depth / 2 + 5e-3);
+  root.add(screen);
+  let stand;
+  if (opts.standHeight && opts.standHeight > 0) {
+    stand = new THREE.Mesh(new THREE.BoxGeometry(opts.width * 0.3, opts.standHeight, depth * 1.5), bodyMat);
+    stand.name = `${name}-stand`;
+    stand.position.set(0, -opts.height / 2 - opts.standHeight / 2, 0);
+    root.add(stand);
+  }
+  attach(root, opts.scene);
+  return { root, body, screen, stand };
+}
+function createDecal(opts) {
+  const name = opts.name ?? "decal";
+  const normal = (opts.normal ?? new THREE.Vector3(0, 0, -1)).clone().normalize();
+  const quat = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 0, 1), normal);
+  if (opts.angle) quat.multiply(new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 0, 1), opts.angle));
+  const orientation = new THREE.Euler().setFromQuaternion(quat);
+  const size = new THREE.Vector3(opts.size.width, opts.size.height, opts.size.depth ?? 1);
+  const geo = new DecalGeometry(opts.target, opts.position, orientation, size);
+  const { material } = buildSurface(opts.surface, { worldWidth: opts.size.width, worldHeight: opts.size.height });
+  material.transparent = true;
+  material.polygonOffset = true;
+  material.polygonOffsetFactor = -4;
+  material.depthWrite = false;
+  const mesh = new THREE.Mesh(geo, material);
+  mesh.name = name;
+  return attach(mesh, opts.scene);
+}
+function createWidgetTexture(name, widget, pixelWidth, pixelHeight, selected = false) {
+  const tex = canvasTexture(pixelWidth, pixelHeight, (ctx) => paintWidget(ctx, widget, pixelWidth, pixelHeight, selected));
+  tex.name = name;
+  return tex;
+}
+function sizeOf(node) {
+  return { w: node.size?.w ?? 200, h: node.size?.h ?? 120 };
+}
+function normalizedCenter(node, bounds) {
+  const { w, h } = sizeOf(node);
+  const cx = (node.position.x + w / 2 - bounds.minX) / Math.max(1, bounds.maxX - bounds.minX);
+  const cy = (node.position.y + h / 2 - bounds.minY) / Math.max(1, bounds.maxY - bounds.minY);
+  return { cx, cy };
+}
+function placeOnGrid(node, obj, bounds, opts = {}) {
+  const scale = opts.scale ?? 1 / 120;
+  const origin = opts.origin ?? new THREE.Vector3(0, 0, 0);
+  const { w, h } = sizeOf(node);
+  const cx = node.position.x + w / 2 - (bounds.minX + bounds.maxX) / 2;
+  const cy = node.position.y + h / 2 - (bounds.minY + bounds.maxY) / 2;
+  obj.position.set(origin.x + cx * scale, origin.y - cy * scale, origin.z);
+}
+function placeOnWall(node, obj, bounds, opts = {}) {
+  const spreadX = opts.spreadX ?? 10;
+  const spreadY = opts.spreadY ?? 4;
+  const centerY = opts.centerY ?? 1.5;
+  const z = opts.z ?? 0;
+  const { cx, cy } = normalizedCenter(node, bounds);
+  obj.position.set((cx - 0.5) * spreadX, centerY + (0.5 - cy) * spreadY, z);
+  obj.rotation.y = 0;
+}
+function placeOnArc(node, obj, bounds, opts = {}) {
+  const radius = opts.radius ?? 6;
+  const arc = opts.arc ?? Math.PI * 0.9;
+  const height = opts.height ?? 6;
+  const baseY = opts.baseY ?? 0;
+  const { cx, cy } = normalizedCenter(node, bounds);
+  const angle = (cx - 0.5) * arc;
+  obj.position.set(Math.sin(angle) * radius, baseY + (0.5 - cy) * height, Math.cos(angle) * radius);
+  obj.rotation.y = angle;
+}
+function lerpPath(waypoints, t) {
+  if (waypoints.length === 0) return { pos: new THREE.Vector3(0, 0, 0), tangent: new THREE.Vector3(0, 0, 1) };
+  if (waypoints.length === 1) return { pos: waypoints[0].clone(), tangent: new THREE.Vector3(0, 0, 1) };
+  const segments = waypoints.length - 1;
+  const scaled = Math.max(0, Math.min(1, t)) * segments;
+  const i = Math.min(segments - 1, Math.floor(scaled));
+  const local = scaled - i;
+  const a = waypoints[i];
+  const b = waypoints[i + 1];
+  const pos = a.clone().lerp(b, local);
+  const tangent = b.clone().sub(a).normalize();
+  return { pos, tangent };
+}
+function placeOnPath(node, obj, bounds, opts) {
+  const faceForward = opts.faceForward ?? true;
+  let t;
+  if (opts.byIndex) {
+    const total = opts.nodeCount ?? Math.max(1, bounds.maxX - bounds.minX);
+    const idx = node.position.x;
+    t = total > 1 ? idx / (total - 1) : 0.5;
+  } else {
+    const { cx } = normalizedCenter(node, bounds);
+    t = cx;
+  }
+  const { pos, tangent } = lerpPath(opts.waypoints, t);
+  obj.position.copy(pos);
+  if (faceForward) obj.rotation.y = Math.atan2(tangent.x, tangent.z);
+}
+function placeOnSphere(node, obj, bounds, opts = {}) {
+  const radius = opts.radius ?? 5;
+  const center = opts.center ?? new THREE.Vector3(0, 0, 0);
+  const latSpan = opts.latSpan ?? Math.PI * 0.7;
+  const lonSpan = opts.lonSpan ?? Math.PI * 2;
+  const { cx, cy } = normalizedCenter(node, bounds);
+  const lon = (cx - 0.5) * lonSpan;
+  const lat = (0.5 - cy) * latSpan;
+  const x = radius * Math.cos(lat) * Math.sin(lon);
+  const y = radius * Math.sin(lat);
+  const z = radius * Math.cos(lat) * Math.cos(lon);
+  obj.position.set(center.x + x, center.y + y, center.z + z);
+  obj.rotation.y = lon;
+}
+
+// src/index.ts
+var WORLD_SCALE = 1 / 180;
+function createThreeAdapter(deps) {
+  return {
+    render(spec, ctx) {
+      const { w, h } = deps.sizeFor(spec);
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.max(1, Math.round(w * TEX_SCALE));
+      canvas.height = Math.max(1, Math.round(h * TEX_SCALE));
+      const c = canvas.getContext("2d");
+      c.scale(TEX_SCALE, TEX_SCALE);
+      paintWidget(c, spec, w, h, ctx.selected);
+      const tex = new THREE.CanvasTexture(canvas);
+      tex.colorSpace = THREE.SRGBColorSpace;
+      tex.anisotropy = 4;
+      tex.needsUpdate = true;
+      const mat = new THREE.MeshBasicMaterial({ map: tex, transparent: true, toneMapped: false });
+      const geo = new THREE.PlaneGeometry(w * WORLD_SCALE, h * WORLD_SCALE);
+      const plane = new THREE.Mesh(geo, mat);
+      plane.name = `node-${ctx.nodeId}`;
+      plane.userData = { nodeId: ctx.nodeId, kind: spec.kind };
+      deps.scene3D.add(plane);
+      return plane;
+    }
+  };
+}
+function placeOnCylinder(node, obj, bounds, opts = {}) {
+  const radius = opts.radius ?? 6;
+  const arc = opts.arc ?? Math.PI * 0.9;
+  const rangeX = bounds.maxX - bounds.minX || 1;
+  const rangeY = bounds.maxY - bounds.minY || 1;
+  const cx = (node.position.x + (node.size?.w ?? 200) / 2 - bounds.minX) / rangeX;
+  const cy = (node.position.y + (node.size?.h ?? 120) / 2 - bounds.minY) / rangeY;
+  const angle = (cx - 0.5) * arc;
+  const height = (0.5 - cy) * 6;
+  obj.position.set(Math.sin(angle) * radius, height, Math.cos(angle) * radius);
+  obj.rotation.set(0, angle, 0);
+}
+function sceneBounds(scene) {
+  const xs = scene.nodes.map((n) => n.position.x);
+  const ys = scene.nodes.map((n) => n.position.y);
+  const xe = scene.nodes.map((n) => n.position.x + (n.size?.w ?? 200));
+  const ye = scene.nodes.map((n) => n.position.y + (n.size?.h ?? 120));
+  return {
+    minX: Math.min(...xs),
+    maxX: Math.max(...xe),
+    minY: Math.min(...ys),
+    maxY: Math.max(...ye)
+  };
+}
+
+export { TEX_SCALE, createBillboard, createBuilding, createCard3D, createCurvedPanel, createCylinder, createDecal, createDisc, createMonitor, createPanel, createPillar, createSign, createSphere, createThreeAdapter, createWidgetTexture, paintWidget, placeOnArc, placeOnCylinder, placeOnGrid, placeOnPath, placeOnSphere, placeOnWall, sceneBounds };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map