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

package/dist/index.js

@@ -0,0 +1,836 @@
+import './chunk-DGUM43GV.js';
+import { MeshBuilder, Mesh, DynamicTexture, Vector4, StandardMaterial, Color3, Vector3 } from '@babylonjs/core';
+
+// 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 buildSurface(scene, name, surface, autoSize) {
+  const mat = new StandardMaterial(`${name}-mat`, scene);
+  mat.specularColor = new Color3(0.05, 0.05, 0.05);
+  if (surface.type === "color") {
+    mat.diffuseColor = Color3.FromHexString(surface.color);
+    mat.emissiveColor = Color3.FromHexString(surface.color).scale(0.15);
+    return { material: mat, 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 tex = new DynamicTexture(`${name}-tex`, { width: w * TEX_SCALE, height: h * TEX_SCALE }, scene, true);
+  tex.vScale = -1;
+  tex.vOffset = 1;
+  if (surface.type === "paint" && surface.transparent) {
+    tex.hasAlpha = true;
+  }
+  if (surface.type === "widget") {
+    tex.hasAlpha = true;
+  }
+  const ctx = tex.getContext();
+  ctx.scale(TEX_SCALE, TEX_SCALE);
+  if (surface.type === "paint") {
+    surface.paint(ctx, w, h);
+  } else {
+    paintWidget(ctx, surface.widget, w, h, surface.selected ?? false);
+  }
+  tex.update(false);
+  mat.diffuseTexture = tex;
+  mat.emissiveTexture = tex;
+  mat.emissiveColor = new Color3(0.6, 0.6, 0.6);
+  if (tex.hasAlpha) mat.useAlphaFromDiffuseTexture = true;
+  return { material: mat, texture: tex };
+}
+function createPanel(opts) {
+  const name = opts.name ?? "panel";
+  const m = MeshBuilder.CreatePlane(name, { width: opts.width, height: opts.height, sideOrientation: opts.sideOrientation }, opts.scene);
+  const { material } = buildSurface(opts.scene, name, opts.surface, {
+    worldWidth: opts.width,
+    worldHeight: opts.height
+  });
+  m.material = material;
+  return m;
+}
+function createBillboard(opts) {
+  const m = createPanel({ ...opts, name: opts.name ?? "billboard" });
+  if (opts.faceCamera) {
+    m.billboardMode = Mesh.BILLBOARDMODE_ALL;
+  }
+  return m;
+}
+var BOX_FACE_ORDER = ["front", "back", "right", "left", "top", "bottom"];
+function createBuilding(opts) {
+  const name = opts.name ?? "building";
+  if (opts.surface && !opts.faces) {
+    const box2 = MeshBuilder.CreateBox(name, { width: opts.width, height: opts.height, depth: opts.depth }, opts.scene);
+    const { material } = buildSurface(opts.scene, name, opts.surface, {
+      worldWidth: opts.width,
+      worldHeight: opts.height
+    });
+    box2.material = material;
+    return box2;
+  }
+  const faceW = 256;
+  const faceH = 256;
+  const atlasW = faceW * 3;
+  const atlasH = faceH * 2;
+  const tex = new DynamicTexture(`${name}-atlas`, { width: atlasW * TEX_SCALE, height: atlasH * TEX_SCALE }, opts.scene, true);
+  tex.vScale = -1;
+  tex.vOffset = 1;
+  const ctx = tex.getContext();
+  ctx.scale(TEX_SCALE, TEX_SCALE);
+  const faceUV = [];
+  BOX_FACE_ORDER.forEach((face, i) => {
+    const col = i % 3;
+    const row = Math.floor(i / 3);
+    const fx = col * faceW;
+    const fy = row * faceH;
+    const surface = opts.faces?.[face] ?? opts.surface ?? { type: "color", color: "#475569" };
+    ctx.save();
+    ctx.translate(fx, fy);
+    if (surface.type === "color") {
+      ctx.fillStyle = surface.color;
+      ctx.fillRect(0, 0, faceW, faceH);
+    } else if (surface.type === "paint") {
+      surface.paint(ctx, faceW, faceH);
+    } else {
+      paintWidget(ctx, surface.widget, faceW, faceH, surface.selected ?? false);
+    }
+    ctx.restore();
+    faceUV.push(new Vector4(fx / atlasW, 1 - (fy + faceH) / atlasH, (fx + faceW) / atlasW, 1 - fy / atlasH));
+  });
+  tex.update(false);
+  const mat = new StandardMaterial(`${name}-mat`, opts.scene);
+  mat.diffuseTexture = tex;
+  mat.emissiveTexture = tex;
+  mat.emissiveColor = new Color3(0.4, 0.4, 0.4);
+  mat.specularColor = new Color3(0.05, 0.05, 0.05);
+  const box = MeshBuilder.CreateBox(name, {
+    width: opts.width,
+    height: opts.height,
+    depth: opts.depth,
+    faceUV,
+    wrap: true
+  }, opts.scene);
+  box.material = mat;
+  return box;
+}
+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 name = opts.name ?? "cylinder";
+  const m = MeshBuilder.CreateCylinder(name, {
+    diameter: opts.radius * 2,
+    height: opts.height,
+    tessellation: opts.tessellation ?? 48
+  }, opts.scene);
+  const { material } = buildSurface(opts.scene, name, opts.surface, {
+    worldWidth: opts.radius * 2 * Math.PI,
+    worldHeight: opts.height
+  });
+  m.material = material;
+  return m;
+}
+function createCurvedPanel(opts) {
+  const name = opts.name ?? "curved-panel";
+  const radius = opts.width / opts.arc;
+  const tess = opts.tessellation ?? 48;
+  const fullCircleSegments = Math.max(8, Math.ceil(tess * (Math.PI * 2) / opts.arc));
+  const m = MeshBuilder.CreateCylinder(name, {
+    diameter: radius * 2,
+    height: opts.height,
+    tessellation: fullCircleSegments,
+    arc: opts.arc / (Math.PI * 2),
+    cap: Mesh.NO_CAP,
+    sideOrientation: Mesh.DOUBLESIDE
+  }, opts.scene);
+  const { material } = buildSurface(opts.scene, name, opts.surface, {
+    worldWidth: opts.width,
+    worldHeight: opts.height
+  });
+  m.material = material;
+  return m;
+}
+function createSphere(opts) {
+  const name = opts.name ?? "sphere";
+  const m = MeshBuilder.CreateSphere(name, { diameter: opts.diameter, segments: opts.segments ?? 32 }, opts.scene);
+  const { material } = buildSurface(opts.scene, name, opts.surface, {
+    worldWidth: opts.diameter * Math.PI,
+    worldHeight: opts.diameter * Math.PI / 2
+  });
+  m.material = material;
+  return m;
+}
+function createDisc(opts) {
+  const name = opts.name ?? "disc";
+  const m = MeshBuilder.CreateDisc(name, { radius: opts.radius, tessellation: opts.tessellation ?? 64 }, opts.scene);
+  const { material } = buildSurface(opts.scene, name, opts.surface, {
+    worldWidth: opts.radius * 2,
+    worldHeight: opts.radius * 2
+  });
+  m.material = material;
+  return m;
+}
+function createCard3D(opts) {
+  const name = opts.name ?? "card3d";
+  const depth = opts.depth ?? 0.06;
+  const edge = opts.edge ?? { type: "color", color: "#0b0f17" };
+  return createBuilding({
+    scene: opts.scene,
+    name,
+    width: opts.width,
+    height: opts.height,
+    depth,
+    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 Mesh(`${name}-root`, opts.scene);
+  const panel = createBillboard({
+    scene: opts.scene,
+    name: `${name}-panel`,
+    width: opts.width,
+    height: opts.height,
+    surface: opts.surface
+  });
+  panel.position = new Vector3(0, postHeight + opts.height / 2, 0);
+  panel.parent = root;
+  const post = MeshBuilder.CreateBox(`${name}-post`, {
+    width: postThickness,
+    height: postHeight,
+    depth: postThickness
+  }, opts.scene);
+  post.position = new Vector3(0, postHeight / 2, 0);
+  const postMat = new StandardMaterial(`${name}-post-mat`, opts.scene);
+  postMat.diffuseColor = Color3.FromHexString(postColor);
+  post.material = postMat;
+  post.parent = root;
+  return { root, panel, post };
+}
+function createMonitor(opts) {
+  const name = opts.name ?? "monitor";
+  const depth = opts.depth ?? 0.18;
+  const bezelColor = opts.bezel ?? "#0b0f17";
+  const root = new Mesh(`${name}-root`, opts.scene);
+  const body = MeshBuilder.CreateBox(`${name}-body`, {
+    width: opts.width,
+    height: opts.height,
+    depth
+  }, opts.scene);
+  const bodyMat = new StandardMaterial(`${name}-body-mat`, opts.scene);
+  bodyMat.diffuseColor = Color3.FromHexString(bezelColor);
+  bodyMat.specularColor = new Color3(0.08, 0.08, 0.08);
+  body.material = bodyMat;
+  body.parent = root;
+  const screenInset = 0.04;
+  const screenW = opts.width - screenInset * 2;
+  const screenH = opts.height - screenInset * 2;
+  const screen = createCard3D({
+    scene: opts.scene,
+    name: `${name}-screen`,
+    width: screenW,
+    height: screenH,
+    depth: 0.01,
+    front: opts.screen,
+    edge: { type: "color", color: bezelColor }
+  });
+  screen.position = new Vector3(0, 0, depth / 2 + 5e-3);
+  screen.parent = root;
+  let stand;
+  if (opts.standHeight && opts.standHeight > 0) {
+    stand = MeshBuilder.CreateBox(`${name}-stand`, {
+      width: opts.width * 0.3,
+      height: opts.standHeight,
+      depth: depth * 1.5
+    }, opts.scene);
+    stand.position = new Vector3(0, -opts.height / 2 - opts.standHeight / 2, 0);
+    stand.material = bodyMat;
+    stand.parent = root;
+  }
+  return { root, body, screen, stand };
+}
+function createDecal(opts) {
+  const name = opts.name ?? "decal";
+  const normal = opts.normal ?? new Vector3(0, 0, -1);
+  const size = new Vector3(opts.size.width, opts.size.height, opts.size.depth ?? 1);
+  const decal = MeshBuilder.CreateDecal(name, opts.target, {
+    position: opts.position,
+    normal,
+    size,
+    angle: opts.angle
+  });
+  const { material } = buildSurface(opts.scene, name, opts.surface, {
+    worldWidth: opts.size.width,
+    worldHeight: opts.size.height
+  });
+  if ("hasAlpha" in material) {
+    material.useAlphaFromDiffuseTexture = true;
+  }
+  decal.material = material;
+  return decal;
+}
+function createWidgetTexture(scene, name, widget, pixelWidth, pixelHeight, selected = false) {
+  const tex = new DynamicTexture(name, { width: pixelWidth * TEX_SCALE, height: pixelHeight * TEX_SCALE }, scene, true);
+  tex.vScale = -1;
+  tex.vOffset = 1;
+  tex.hasAlpha = true;
+  const ctx = tex.getContext();
+  ctx.scale(TEX_SCALE, TEX_SCALE);
+  paintWidget(ctx, widget, pixelWidth, pixelHeight, selected);
+  tex.update(false);
+  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, mesh, bounds, opts = {}) {
+  const scale = opts.scale ?? 1 / 120;
+  const origin = opts.origin ?? new 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;
+  mesh.position = new Vector3(origin.x + cx * scale, origin.y - cy * scale, origin.z);
+}
+function placeOnWall(node, mesh, 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);
+  mesh.position = new Vector3((cx - 0.5) * spreadX, centerY + (0.5 - cy) * spreadY, z);
+  mesh.rotation.y = 0;
+}
+function placeOnArc(node, mesh, 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;
+  mesh.position = new Vector3(Math.sin(angle) * radius, baseY + (0.5 - cy) * height, Math.cos(angle) * radius);
+  mesh.rotation.y = angle;
+}
+function lerpPath(waypoints, t) {
+  if (waypoints.length === 0) return { pos: new Vector3(0, 0, 0), tangent: new Vector3(0, 0, 1) };
+  if (waypoints.length === 1) return { pos: waypoints[0].clone(), tangent: new 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 = Vector3.Lerp(a, b, local);
+  const tangent = b.subtract(a).normalize();
+  return { pos, tangent };
+}
+function placeOnPath(node, mesh, 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);
+  mesh.position = pos;
+  if (faceForward) {
+    mesh.rotation.y = Math.atan2(tangent.x, tangent.z);
+  }
+}
+function placeOnSphere(node, mesh, bounds, opts = {}) {
+  const radius = opts.radius ?? 5;
+  const center = opts.center ?? new 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 r = radius;
+  const x = r * Math.cos(lat) * Math.sin(lon);
+  const y = r * Math.sin(lat);
+  const z = r * Math.cos(lat) * Math.cos(lon);
+  mesh.position = new Vector3(center.x + x, center.y + y, center.z + z);
+  mesh.rotation.y = lon;
+}
+
+// src/index.ts
+var WORLD_SCALE = 1 / 180;
+function createBabylonAdapter(deps) {
+  return {
+    render(spec, ctx) {
+      const { w, h } = deps.sizeFor(spec);
+      const tex = new DynamicTexture(`tex-${ctx.nodeId}`, { width: w * TEX_SCALE, height: h * TEX_SCALE }, deps.scene3D, true);
+      tex.hasAlpha = true;
+      tex.vScale = -1;
+      tex.vOffset = 1;
+      const c = tex.getContext();
+      c.scale(TEX_SCALE, TEX_SCALE);
+      paintWidget(c, spec, w, h, ctx.selected);
+      tex.update(false);
+      const mat = new StandardMaterial(`mat-${ctx.nodeId}`, deps.scene3D);
+      mat.diffuseTexture = tex;
+      mat.emissiveTexture = tex;
+      mat.emissiveColor = new Color3(1, 1, 1);
+      mat.disableLighting = false;
+      mat.useAlphaFromDiffuseTexture = true;
+      const plane = MeshBuilder.CreatePlane(`node-${ctx.nodeId}`, { width: w * WORLD_SCALE, height: h * WORLD_SCALE }, deps.scene3D);
+      plane.material = mat;
+      plane.metadata = { nodeId: ctx.nodeId, kind: spec.kind };
+      return plane;
+    }
+  };
+}
+function placeOnCylinder(node, mesh, 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;
+  mesh.position = new Vector3(Math.sin(angle) * radius, height, Math.cos(angle) * radius);
+  mesh.rotation = new Vector3(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, createBabylonAdapter, createBillboard, createBuilding, createCard3D, createCurvedPanel, createCylinder, createDecal, createDisc, createMonitor, createPanel, createPillar, createSign, createSphere, createWidgetTexture, paintWidget, placeOnArc, placeOnCylinder, placeOnGrid, placeOnPath, placeOnSphere, placeOnWall, sceneBounds };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map