wuic-framework-lib 1.5.0 → 1.7.1

package/fesm2022/{wuic-framework-lib-scene3d-shader-effect-CQLWkuh1.mjs → wuic-framework-lib-scene3d-shader-effect-DjHyCAFK.mjs}

@@ -2,6 +2,25 @@ import * as THREE from 'three';
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
 
+/** Estensioni accettate dall'import (allineate all'allowlist upload backend, F4). */
+const SCENE3D_ASSET_EXTENSIONS = {
+    '.gltf': 'gltf',
+    '.glb': 'glb',
+    '.obj': 'obj',
+    '.fbx': 'fbx',
+    '.stl': 'stl',
+    '.dae': 'dae',
+};
+/** Risolve il formato asset da un filename, o null se l'estensione non e' supportata. */
+function resolveAssetFormat(fileName) {
+    const dot = fileName.lastIndexOf('.');
+    if (dot < 0) {
+        return null;
+    }
+    const ext = fileName.slice(dot).toLowerCase();
+    return SCENE3D_ASSET_EXTENSIONS[ext] ?? null;
+}
+
 /**
  * Physics (iter2) — wrapper Rapier per il Scene3D designer/viewer.
  *
@@ -245,7 +264,7 @@ function serializeScene(root) {
     // subito dopo, mantenendo la scena runtime intatta.
     const detached = [];
     root.traverse((obj) => {
-        if (obj !== root && obj.userData && obj.userData[WUIC_TRANSIENT_FLAG] === true && obj.parent) {
+        if (obj !== root && obj.userData?.[WUIC_TRANSIENT_FLAG] === true && obj.parent) {
             detached.push({ parent: obj.parent, child: obj });
         }
     });
@@ -264,7 +283,7 @@ function serializeScene(root) {
     }
     const bindings = {};
     root.traverse((obj) => {
-        if (obj.userData && obj.userData[WUIC_TRANSIENT_FLAG] === true) {
+        if (obj.userData?.[WUIC_TRANSIENT_FLAG] === true) {
             return;
         }
         const binding = obj.userData ? obj.userData[WUIC_BINDING_KEY] : undefined;
@@ -320,7 +339,8 @@ const WUIC_CAROUSEL_BASE = 'wuicCarouselBase';
 const WUIC_CAROUSEL_ARROW = 'wuicCarouselArrow';
 function defaultCarouselConfig() {
     return {
-        visible: 3, radius: 8, slotAngleDeg: 22, itemY: 0.9,
+        visible: 3, radius: 8, slotAngleDeg: 22, itemY: 0.9, meshYOffset: 0,
+        meshRotX: 0, meshRotY: 0, meshRotZ: 0,
         focusScale: 1.35, sideScale: 0.75,
         showBase: true, baseColor: '#3b4252', baseSize: 0.66,
         baseMetalness: 0.15, baseRoughness: 0.4, baseClearcoat: 0.85,
@@ -370,9 +390,17 @@ function arrangeCarousel(items, cfg, s) {
     const halfMax = Math.max(1e-6, (visible - 1) / 2);
     const radius = Math.max(0.5, n$1(cfg.radius, 8));
     const step = THREE.MathUtils.degToRad(n$1(cfg.slotAngleDeg, 22));
-    const itemY = n$1(cfg.itemY, 0.9);
+    // itemY + meshYOffset: l'offset sposta SOLO i mesh su/giu' rispetto al disco
+    // (il disco/base in buildCarouselDecor usa itemY "puro", quindi resta fermo).
+    const itemY = n$1(cfg.itemY, 0.9) + n$1(cfg.meshYOffset, 0);
     const focus = n$1(cfg.focusScale, 1.35);
     const side = n$1(cfg.sideScale, 0.75);
+    // Rotazione base utente (gradi->rad) composta col coverflow via quaternione.
+    const rx = THREE.MathUtils.degToRad(n$1(cfg.meshRotX, 0));
+    const ry = THREE.MathUtils.degToRad(n$1(cfg.meshRotY, 0));
+    const rz = THREE.MathUtils.degToRad(n$1(cfg.meshRotZ, 0));
+    const hasUserRot = rx !== 0 || ry !== 0 || rz !== 0;
+    const userQuat = new THREE.Quaternion().setFromEuler(new THREE.Euler(rx, ry, rz));
     for (let i = 0; i < items.length; i++) {
         const it = items[i];
         const slot = i - s;
@@ -384,7 +412,14 @@ function arrangeCarousel(items, cfg, s) {
         const a = slot * step;
         // Arco: centro in (0,itemY,0); i lati curvano verso -Z (lontano dalla camera).
         it.position.set(Math.sin(a) * radius, itemY, Math.cos(a) * radius - radius);
-        it.rotation.set(0, -a, 0); // ruota verso il fronte (effetto coverflow)
+        // Coverflow (Y verso il fronte) composto con la rotazione base utente:
+        // coverflow * user -> il modello ruota di user, poi l'item si orienta al fronte.
+        if (hasUserRot) {
+            it.quaternion.setFromEuler(new THREE.Euler(0, -a, 0)).multiply(userQuat);
+        }
+        else {
+            it.rotation.set(0, -a, 0);
+        }
         const t = Math.min(Math.abs(slot) / halfMax, 1);
         it.scale.setScalar(Math.max(0.01, focus + (side - focus) * t));
     }
@@ -990,7 +1025,7 @@ function buildSurface(group, rows, cfg, route, deps) {
     if (!cfg.rowColumn || !cfg.colColumn || !cfg.valueColumn || rows.length === 0) {
         return 0;
     }
-    const uniq = (col) => Array.from(new Set(rows.map((r) => String(deps.unwrap(r[col]) ?? '')))).sort();
+    const uniq = (col) => Array.from(new Set(rows.map((r) => String(deps.unwrap(r[col]) ?? '')))).sort((a, b) => a.localeCompare(b));
     const rlabels = uniq(cfg.rowColumn);
     const clabels = uniq(cfg.colColumn);
     const vals = rows.map((r) => n(deps.unwrap(r[cfg.valueColumn])));
@@ -1275,7 +1310,7 @@ function buildWarehouse(group, rows, cfg, route, deps) {
     if (!cfg.aisleColumn || !cfg.shelfColumn || rows.length === 0) {
         return 0;
     }
-    const uniq = (col) => Array.from(new Set(rows.map((r) => String(deps.unwrap(r[col]) ?? '')))).sort();
+    const uniq = (col) => Array.from(new Set(rows.map((r) => String(deps.unwrap(r[col]) ?? '')))).sort((a, b) => a.localeCompare(b));
     const aisles = uniq(cfg.aisleColumn);
     const shelves = uniq(cfg.shelfColumn);
     const qtys = rows.map((r) => n(deps.unwrap(r[cfg.qtyColumn])));
@@ -1320,7 +1355,7 @@ function buildWarehouse(group, rows, cfg, route, deps) {
 // Kanban 3D, Calendar-wall, Stacked bars
 // ===========================================================================
 function uniqSorted(rows, col, deps) {
-    return Array.from(new Set(rows.map((r) => String(deps.unwrap(r[col]) ?? '')))).sort();
+    return Array.from(new Set(rows.map((r) => String(deps.unwrap(r[col]) ?? '')))).sort((a, b) => a.localeCompare(b));
 }
 function defaultKanbanConfig() { return { statusColumn: '', labelColumn: '', cardWidth: 2, showLabels: true }; }
 /** Kanban: una colonna per stato; card impilate (una per record). */
@@ -1369,7 +1404,7 @@ function buildCalendar(group, rows, cfg, route, deps) {
     if (!cfg.dateColumn || rows.length === 0) {
         return 0;
     }
-    const items = rows.map((r) => ({ rec: r, d: new Date(String(deps.unwrap(r[cfg.dateColumn]))), v: cfg.valueColumn ? n(deps.unwrap(r[cfg.valueColumn])) : 1 })).filter((x) => !isNaN(x.d.getTime()));
+    const items = rows.map((r) => ({ rec: r, d: new Date(String(deps.unwrap(r[cfg.dateColumn]))), v: cfg.valueColumn ? n(deps.unwrap(r[cfg.valueColumn])) : 1 })).filter((x) => !Number.isNaN(Number(x.d.getTime())));
     if (items.length === 0) {
         return 0;
     }
@@ -1480,11 +1515,53 @@ const helvetikerFont = { "glyphs": { "ο": { "x_min": 0, "x_max": 712, "ha": 815
 const WUIC_MESH_REPEATER_KEY = 'wuicMeshRepeater';
 /** Nome della mesh figlia generata (per riconoscerle e ripulirle). */
 const WUIC_REPEATER_CHILD = 'wuicRepeaterItem';
+/** userData key: record (unwrappato) bindato alla mesh figlia, per i callback
+ *  di interazione (click/dblclick/rightclick). Transient, non serializzato. */
+const WUIC_REPEATER_RECORD = 'wuicRepeaterRecord';
 /** Nome del placeholder mostrato quando il repeater non è ancora bindato. */
 const WUIC_REPEATER_PLACEHOLDER = 'wuicRepeaterPlaceholder';
 function defaultRepeaterTextureApply() {
     return { sourceKind: 'auto', wrap: 'stretch', repeatX: 1, repeatY: 1, textBg: '#334155', textFg: '#ffffff' };
 }
+/**
+ * Normalizza un asset 3D importato (glTF/OBJ/STL, unità native arbitrarie) a una
+ * dimensione ~1 unità WUIC, centrato su x/z e con la BASE appoggiata a y=0:
+ * avvolge l'oggetto in due Group, centra l'inner sul suo bounding box (asse Y
+ * ancorato al fondo) e scala l'inner a `1/maxDim`.
+ * Necessario perché nel repeater/carousel modelli con scale native diverse
+ * (es. Avocado ~5cm vs BoomBox ~50cm) apparirebbero enormemente disomogenei.
+ * L'ancoraggio della base (non il centro) evita che, aumentando lo scale, il
+ * modello affondi nel disco del carousel: cresce verso l'alto, la base resta ferma.
+ */
+function normalizeAssetToUnit(obj) {
+    try {
+        const box = new THREE.Box3().setFromObject(obj);
+        if (box.isEmpty()) {
+            return obj;
+        }
+        const size = box.getSize(new THREE.Vector3());
+        const center = box.getCenter(new THREE.Vector3());
+        const maxDim = Math.max(size.x, size.y, size.z) || 1;
+        // Centra x/z, ancora la base (box.min.y) a y=0: lo scale del carousel cresce
+        // verso l'alto senza spingere il modello sotto il piano del disco.
+        obj.position.set(-center.x, -box.min.y, -center.z);
+        // Nesting a DUE livelli: l'INNER porta la normalizzazione (1/maxDim), che va
+        // PROTETTA — il carousel (arrangeCarousel `it.scale.setScalar`) e il layout
+        // data-driven (fm.scale) fanno `scale.setScalar` sul nodo TOP e altrimenti
+        // sovrascriverebbero la normalizzazione, riportando il modello alla dimensione
+        // nativa (tiny/disomogeneo). L'OUTER resta a scala 1 e assorbe lo scale del
+        // repeater/carousel: dimensione finale = scaleCarousel x (1/maxDim) x modello.
+        const inner = new THREE.Group();
+        inner.add(obj);
+        inner.scale.setScalar(1 / maxDim);
+        const outer = new THREE.Group();
+        outer.add(inner);
+        return outer;
+    }
+    catch {
+        return obj;
+    }
+}
 /** Direzioni di default (tutte positive = comportamento storico). */
 function defaultRepeaterAxisDir() { return { x: 1, y: 1, z: 1 }; }
 /** Config di default per un repeater appena droppato (route vuota = placeholder). */
@@ -1537,7 +1614,7 @@ function buildUploadSrc(col, route, pkName, record, rawValue, app, unwrap) {
     }
     let pk = unwrap(record ? record[pkName] : null);
     if (pk && typeof pk === 'object' && 'value' in pk) {
-        pk = pk.value;
+        pk = (pk).value;
     }
     const pkStr = pk == null ? '' : String(pk);
     if (col.isDBUpload) {
@@ -1634,7 +1711,7 @@ function remap(v, inMin, inMax, outMin, outMax) {
  * Rigenera le mesh figlie del repeater dai record. Pura rispetto al three:
  * usa solo le factory/parser passati in `deps`.
  */
-function regenerateRepeater(group, config, rows, deps) {
+async function regenerateRepeater(group, config, rows, deps) {
     clearRepeaterChildren(group);
     if (!config.route || !Array.isArray(rows) || rows.length === 0) {
         if (!config.route) {
@@ -1689,21 +1766,67 @@ function regenerateRepeater(group, config, rows, deps) {
     // il loop da arrangeCarousel/buildCarouselDecor, non dal layout per-item.
     const isCarousel = config.layout?.mode === 'carousel';
     const created = [];
+    // Mesh ASSET per-record: pre-carica (dedup + cache) gli asset distinti PRIMA del
+    // loop sincrono, poi ogni record clona il template. Fallback a primitiva se il
+    // load fallisce o la colonna e' vuota. (Il loop resta sync: gli await stanno qui.)
+    const assetCol = (config.meshSource?.mode === 'asset' && config.meshSource.column) ? config.meshSource.column : '';
+    const assetTemplates = new Map();
+    if (assetCol && deps.loadAsset && deps.resolveAssetSrc) {
+        const urls = new Set();
+        for (const record of limited) {
+            const raw = String(deps.unwrap(record[assetCol]) ?? '').trim();
+            if (!raw) {
+                continue;
+            }
+            const url = deps.resolveAssetSrc(record, raw);
+            if (url) {
+                urls.add(url);
+            }
+        }
+        await Promise.all([...urls].map(async (u) => {
+            try {
+                const tpl = await deps.loadAsset(u);
+                if (tpl) {
+                    assetTemplates.set(u, tpl);
+                }
+            }
+            catch { /* skip: fallback primitiva */ }
+        }));
+    }
     let generated = 0;
     limited.forEach((record, i) => {
-        // Tipo mesh: fisso oppure dalla colonna del record (fallback box).
-        let type = 'box';
-        if (config.meshSource?.mode === 'column' && config.meshSource.column) {
-            const raw = String(deps.unwrap(record[config.meshSource.column]) ?? '').trim();
-            type = raw || 'box';
-        }
-        else if (config.meshSource?.type) {
-            type = config.meshSource.type;
-        }
-        // Testo 3D: contenuto dalla colonna `text` del record (canvas -> plane).
-        const mesh = (type === 'text3d' && deps.createTextMesh)
-            ? deps.createTextMesh(String(deps.unwrap(record[fm.text || '']) ?? ''))
-            : (deps.createMesh(type) || deps.createMesh('box'));
+        let mesh;
+        if (assetCol && deps.resolveAssetSrc) {
+            // Mesh dall'asset della colonna (clone del template pre-caricato).
+            const raw = String(deps.unwrap(record[assetCol]) ?? '').trim();
+            const url = raw ? deps.resolveAssetSrc(record, raw) : '';
+            const tpl = url ? assetTemplates.get(url) : undefined;
+            mesh = tpl ? tpl.clone(true) : (deps.createMesh('box') || undefined);
+            // Texture per-record su asset: clona i material del clone per non "sporcare"
+            // gli altri (i clone condividono i material del template).
+            if (mesh && fm.texture) {
+                mesh.traverse((o) => {
+                    if (o.isMesh && o.material) {
+                        o.material = Array.isArray(o.material) ? o.material.map((m) => m.clone()) : o.material.clone();
+                    }
+                });
+            }
+        }
+        else {
+            // Tipo mesh: fisso oppure dalla colonna del record (fallback box).
+            let type = 'box';
+            if (config.meshSource?.mode === 'column' && config.meshSource.column) {
+                const raw = String(deps.unwrap(record[config.meshSource.column]) ?? '').trim();
+                type = raw || 'box';
+            }
+            else if (config.meshSource?.type) {
+                type = config.meshSource.type;
+            }
+            // Testo 3D: contenuto dalla colonna `text` del record (canvas -> plane).
+            mesh = (type === 'text3d' && deps.createTextMesh)
+                ? deps.createTextMesh(String(deps.unwrap(record[fm.text || '']) ?? ''))
+                : (deps.createMesh(type) || deps.createMesh('box') || undefined);
+        }
         if (!mesh) {
             return;
         }
@@ -1748,6 +1871,14 @@ function regenerateRepeater(group, config, rows, deps) {
         mesh.name = WUIC_REPEATER_CHILD;
         mesh.userData[WUIC_TRANSIENT_FLAG] = true;
         mesh.userData[WUIC_BINDING_KEY] = { route: config.route, recordId: deps.resolveRecordId(record) };
+        // Record unwrappato sull'item, per i callback di interazione (ctx.record).
+        {
+            const plain = {};
+            for (const k of Object.keys(record || {})) {
+                plain[k] = deps.unwrap(record[k]);
+            }
+            mesh.userData[WUIC_REPEATER_RECORD] = plain;
+        }
         deps.applyShadow(mesh);
         group.add(mesh);
         created.push(mesh);
@@ -1770,7 +1901,13 @@ function axisVec(axes, vals, dir) {
     const v = new THREE.Vector3(0, 0, 0);
     for (let i = 0; i < axes.length && i < vals.length; i++) {
         const a = axes[i];
-        const s = (a === 'x' ? dir?.x : a === 'y' ? dir?.y : dir?.z);
+        let s = dir?.z;
+        if (a === 'x') {
+            s = dir?.x;
+        }
+        else if (a === 'y') {
+            s = dir?.y;
+        }
         const val = vals[i] * (s === -1 ? -1 : 1);
         if (a === 'x') {
             v.x = val;
@@ -1875,9 +2012,16 @@ function applyRepeaterTextureTo(mesh, value, opts, cache, loadTexture, onReady)
     if (!matAny || !('map' in matAny)) {
         return;
     }
-    const kind = opts.sourceKind === 'text' ? 'text'
-        : opts.sourceKind === 'image' ? 'image'
-            : (looksLikeImageRef(value) ? 'image' : 'text');
+    let kind;
+    if (opts.sourceKind === 'text') {
+        kind = 'text';
+    }
+    else if (opts.sourceKind === 'image') {
+        kind = 'image';
+    }
+    else {
+        kind = looksLikeImageRef(value) ? 'image' : 'text';
+    }
     const key = `${kind}|${value}|${opts.textBg}|${opts.textFg}|${opts.wrap}|${opts.repeatX}|${opts.repeatY}`;
     let tex = cache.get(key);
     if (!tex) {
@@ -1931,6 +2075,442 @@ function makeTextSpriteMesh(text) {
     }
 }
 
+/**
+ * Helper per i callback di interazione del Mesh Repeater (click/dblclick/rightclick).
+ *
+ * - `runRepeaterCallback(js, ctx)`: esegue il corpo JS dell'app-builder con `ctx`
+ *   (record, event, mesh, scene, camera, THREE, wuic). Sandbox = `new Function`:
+ *   e' codice dell'admin che costruisce l'app (stesso modello di
+ *   validation/suggest callback), non input utente.
+ * - `showItemPopup(opts, deps)`: mostra un popup "campi a sinistra + mesh a destra".
+ *   `opts.mode`: 1|'overlay' = overlay HTML con preview 3D live; 2|'panel3d' =
+ *   pannello 3D dentro la scena (billboard verso la camera). `opts.fields`: nomi
+ *   dei campi del record da mostrare (default: primi campi). `opts.width`/`opts.height`:
+ *   dimensione popup (number=px, string='50%'|'420px'; solo overlay). `opts.panelBg`:
+ *   colore sfondo pannello. `opts.swap`: inverte i lati (mesh sx, campi dx).
+ *   `opts.maximizable`: pulsante "ingrandisci" oltre alla chiusura (solo overlay).
+ *   `opts.verticalPosition` ('top'|'center'|'bottom') / `opts.horizontalPosition`
+ *   ('left'|'center'|'right'): ancoraggio del popup nel viewport (solo overlay).
+ *   `opts.autorotateMesh`: false = rotazione col mouse invece dell'auto-rotazione
+ *   dell'anteprima (solo overlay).
+ */
+// ── Stato singleton (un popup alla volta) ────────────────────────────────
+let overlayEl = null;
+let overlayRAF = 0;
+let overlayRenderer = null;
+let panel3d = null;
+let panelDeps = null;
+/** Esegue il callback JS con `ctx`. Errori loggati, mai propagati (non rompe il render). */
+function runRepeaterCallback(js, ctx) {
+    const src = (js || '').trim();
+    if (!src) {
+        return;
+    }
+    try {
+        // eslint-disable-next-line no-new-func
+        const fn = new Function('ctx', 'record', 'wuic', 'THREE', src);
+        fn(ctx, ctx.record, ctx.wuic, THREE);
+    }
+    catch (e) {
+        console.error('[Scene3D] callback repeater fallito', e);
+    }
+}
+/** Chiude qualunque popup aperto (overlay + panel3d). */
+function closeItemPopup() {
+    if (overlayRAF) {
+        cancelAnimationFrame(overlayRAF);
+        overlayRAF = 0;
+    }
+    if (overlayRenderer) {
+        try {
+            overlayRenderer.dispose();
+        }
+        catch { /* noop */ }
+        overlayRenderer = null;
+    }
+    if (overlayEl?.parentElement) {
+        overlayEl.parentElement.removeChild(overlayEl);
+    }
+    overlayEl = null;
+    if (panel3d?.parent) {
+        panel3d.parent.remove(panel3d);
+    }
+    if (panel3d) {
+        disposeObject(panel3d);
+    }
+    panel3d = null;
+    if (panelDeps?.onFrame) {
+        panelDeps.onFrame(null);
+    }
+    panelDeps = null;
+}
+/** Dispatcher per modalita'. */
+function showItemPopup(opts, deps) {
+    closeItemPopup();
+    const mode = (opts.mode === 2 || opts.mode === 'panel3d') ? 'panel3d' : 'overlay';
+    if (mode === 'panel3d') {
+        showPanel3d(opts, deps);
+    }
+    else {
+        showOverlay(opts, deps);
+    }
+}
+// ── util: righe campi (label:value) dal record ───────────────────────────
+function fieldRows(opts) {
+    const rec = opts.record || {};
+    const names = (opts.fields?.length) ? opts.fields : Object.keys(rec).slice(0, 8);
+    return names.map((n) => ({ label: String(n), value: fmt(rec[n]) }));
+}
+function fmt(v) {
+    if (v == null) {
+        return '';
+    }
+    if (typeof v === 'object' && 'value' in v) {
+        v = (v).value;
+    }
+    if (typeof v === 'number') {
+        return String(v);
+    }
+    return String(v);
+}
+/** Dimensione CSS: number → px, string → as-is ('50%', '420px'). */
+function dim(v) {
+    return typeof v === 'number' ? `${v}px` : String(v);
+}
+/**
+ * Rotazione manuale di `target` trascinando il mouse su `host` (orbit-like, come
+ * nel designer): drag orizzontale → yaw, verticale → pitch (clampato a ±90°).
+ * I listener globali vivono solo durante il drag; il `pointerdown` resta su
+ * `host`, che viene rimosso dal DOM alla chiusura del popup (nessun leak).
+ */
+function enableDragRotate(host, target) {
+    host.style.cursor = 'grab';
+    let dragging = false, px = 0, py = 0;
+    const onMove = (e) => {
+        if (!dragging) {
+            return;
+        }
+        const dx = e.clientX - px, dy = e.clientY - py;
+        px = e.clientX;
+        py = e.clientY;
+        target.rotation.y += dx * 0.01;
+        target.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, target.rotation.x + dy * 0.01));
+    };
+    const onUp = () => {
+        dragging = false;
+        host.style.cursor = 'grab';
+        globalThis.removeEventListener('pointermove', onMove);
+        globalThis.removeEventListener('pointerup', onUp);
+    };
+    host.addEventListener('pointerdown', (e) => {
+        dragging = true;
+        px = e.clientX;
+        py = e.clientY;
+        host.style.cursor = 'grabbing';
+        globalThis.addEventListener('pointermove', onMove);
+        globalThis.addEventListener('pointerup', onUp);
+        e.preventDefault();
+    });
+}
+/**
+ * Zoom col mouse-wheel sull'anteprima: dolly della camera lungo il suo asse
+ * verso l'origine (dove sta il mesh), con distanza clampata. `passive:false` +
+ * preventDefault per non scrollare la pagina sotto.
+ */
+function enableWheelZoom(host, camera) {
+    host.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        const factor = e.deltaY > 0 ? 1.1 : 0.9;
+        const dist = Math.max(1.2, Math.min(12, camera.position.length() * factor));
+        camera.position.normalize().multiplyScalar(dist);
+        camera.lookAt(0, 0, 0);
+    }, { passive: false });
+}
+// ── util: clone del mesh normalizzato per il preview (centra + scala a ~1.6) ──
+function fitClone(mesh) {
+    const clone = mesh.clone(true);
+    clone.position.set(0, 0, 0);
+    clone.rotation.set(0, 0, 0);
+    clone.scale.set(1, 1, 1);
+    const box = new THREE.Box3().setFromObject(clone);
+    if (!box.isEmpty()) {
+        const size = box.getSize(new THREE.Vector3());
+        const center = box.getCenter(new THREE.Vector3());
+        const maxDim = Math.max(size.x, size.y, size.z) || 1;
+        const wrap = new THREE.Group();
+        clone.position.sub(center);
+        wrap.add(clone);
+        wrap.scale.setScalar(1.6 / maxDim);
+        return wrap;
+    }
+    return clone;
+}
+// ── Modalita' 1: overlay HTML + preview 3D live ──────────────────────────
+function showOverlay(opts, deps) {
+    const host = deps.canvas.parentElement || document.body;
+    if (getComputedStyle(host).position === 'static') {
+        host.style.position = 'relative';
+    }
+    const bg = opts.panelBg || 'rgba(20,24,33,0.94)';
+    const el = document.createElement('div');
+    el.className = 'wuic-scene3d-item-popup';
+    const css = [
+        'position:absolute', 'z-index:30',
+        'display:flex', 'gap:14px', 'padding:14px 16px',
+        `background:${bg}`, 'color:#e5e9f0',
+        'border:1px solid rgba(255,255,255,0.12)', 'border-radius:10px',
+        'box-shadow:0 8px 30px rgba(0,0,0,0.45)', 'backdrop-filter:blur(4px)',
+        'font:13px/1.5 system-ui,Segoe UI,sans-serif', 'box-sizing:border-box'
+    ];
+    // Dimensioni: number → px, string → CSS ('50%','420px'). Default: auto (max 520px).
+    css.push(opts.width != null ? `width:${dim(opts.width)}` : 'max-width:520px');
+    if (opts.height != null) {
+        css.push(`height:${dim(opts.height)}`);
+    }
+    el.style.cssText = css.join(';');
+    // Ancoraggio nel viewport: vertical/horizontalPosition → offset 16px + transform
+    // di centratura sull'asse richiesto. `place()` e' riusato dal ripristino maximize.
+    const vpos = opts.verticalPosition || 'top';
+    const hpos = opts.horizontalPosition || 'right';
+    const place = () => {
+        el.style.top = el.style.right = el.style.bottom = el.style.left = '';
+        const tx = [];
+        if (hpos === 'left') {
+            el.style.left = '16px';
+        }
+        else if (hpos === 'center') {
+            el.style.left = '50%';
+            tx.push('translateX(-50%)');
+        }
+        else {
+            el.style.right = '16px';
+        }
+        if (vpos === 'bottom') {
+            el.style.bottom = '16px';
+        }
+        else if (vpos === 'center') {
+            el.style.top = '50%';
+            tx.push('translateY(-50%)');
+        }
+        else {
+            el.style.top = '16px';
+        }
+        el.style.transform = tx.join(' ');
+    };
+    place();
+    // campi (colonna testo)
+    const left = document.createElement('div');
+    left.style.cssText = 'min-width:150px;max-width:280px;display:flex;flex-direction:column;gap:2px;overflow:auto';
+    if (opts.title) {
+        const t = document.createElement('div');
+        t.textContent = opts.title;
+        t.style.cssText = 'font-weight:700;font-size:14px;margin-bottom:6px;color:#9db4ff';
+        left.appendChild(t);
+    }
+    for (const r of fieldRows(opts)) {
+        const row = document.createElement('div');
+        row.style.cssText = 'display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,0.06);padding:2px 0';
+        const lab = document.createElement('span');
+        lab.textContent = r.label;
+        lab.style.cssText = 'opacity:0.65';
+        const val = document.createElement('span');
+        val.textContent = r.value;
+        val.style.cssText = 'font-weight:600;text-align:right;word-break:break-word';
+        row.appendChild(lab);
+        row.appendChild(val);
+        left.appendChild(row);
+    }
+    // preview 3D live: riempie lo spazio (min 200px, cresce col popup/maximize).
+    const right = document.createElement('div');
+    right.style.cssText = 'position:relative;flex:1 1 auto;min-width:200px;min-height:200px;align-self:stretch;border-radius:8px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#2a3140,#141821)';
+    // controlli (maximize opzionale + chiusura), sempre in alto a destra del popup
+    const controls = document.createElement('div');
+    controls.style.cssText = 'position:absolute;top:6px;right:8px;z-index:2;display:flex;gap:2px';
+    const btnCss = 'background:transparent;border:none;color:#e5e9f0;line-height:1;cursor:pointer;opacity:0.8;padding:0 4px';
+    const close = document.createElement('button');
+    close.textContent = '×';
+    close.setAttribute('aria-label', 'Close');
+    close.style.cssText = btnCss + ';font-size:20px';
+    close.onclick = () => closeItemPopup();
+    // ordine lati: default campi→mesh; swap → mesh→campi.
+    if (opts.swap) {
+        el.appendChild(right);
+        el.appendChild(left);
+    }
+    else {
+        el.appendChild(left);
+        el.appendChild(right);
+    }
+    // mini renderer 3D (canvas al 100% del box: la size effettiva la da' resizePreview)
+    const r = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    r.setPixelRatio(Math.min(2, window.devicePixelRatio || 1));
+    r.domElement.style.cssText = 'width:100%;height:100%;display:block';
+    right.appendChild(r.domElement);
+    overlayRenderer = r;
+    const ms = new THREE.Scene();
+    ms.add(new THREE.AmbientLight(0xffffff, 0.85));
+    const dl = new THREE.DirectionalLight(0xffffff, 1.25);
+    dl.position.set(2, 3, 2.5);
+    ms.add(dl);
+    const mc = new THREE.PerspectiveCamera(42, 1, 0.01, 100);
+    mc.position.set(0, 0.25, 3.1);
+    mc.lookAt(0, 0, 0);
+    enableWheelZoom(right, mc); // zoom con la rotella (sempre attivo)
+    const resizePreview = () => {
+        const w = Math.max(1, right.clientWidth), h = Math.max(1, right.clientHeight);
+        r.setSize(w, h, false);
+        mc.aspect = w / h;
+        mc.updateProjectionMatrix();
+    };
+    // maximize: il popup riempie l'host; il ripristino torna a size/posizione base.
+    if (opts.maximizable) {
+        let maximized = false;
+        const maxBtn = document.createElement('button');
+        maxBtn.textContent = '⤢';
+        maxBtn.setAttribute('aria-label', 'Maximize');
+        maxBtn.style.cssText = btnCss + ';font-size:16px';
+        maxBtn.onclick = () => {
+            maximized = !maximized;
+            if (maximized) {
+                el.style.transform = '';
+                el.style.top = el.style.right = el.style.bottom = el.style.left = '8px';
+                el.style.width = 'auto';
+                el.style.height = 'auto';
+                el.style.maxWidth = 'none';
+                maxBtn.textContent = '⤡';
+            }
+            else {
+                el.style.width = opts.width != null ? dim(opts.width) : '';
+                el.style.height = opts.height != null ? dim(opts.height) : '';
+                el.style.maxWidth = opts.width != null ? 'none' : '520px';
+                place();
+                maxBtn.textContent = '⤢';
+            }
+            resizePreview();
+        };
+        controls.appendChild(maxBtn);
+    }
+    controls.appendChild(close);
+    el.appendChild(controls);
+    host.appendChild(el);
+    overlayEl = el;
+    resizePreview(); // prima misura dopo il layout (clientWidth valorizzato)
+    const spin = new THREE.Group();
+    if (opts.mesh) {
+        spin.add(fitClone(opts.mesh));
+    }
+    ms.add(spin);
+    // Auto-rotazione (default) oppure rotazione manuale col mouse (drag) come nel designer.
+    const autorotate = opts.autorotateMesh !== false;
+    if (!autorotate) {
+        enableDragRotate(right, spin);
+    }
+    const loop = () => {
+        if (autorotate) {
+            spin.rotation.y += 0.012;
+        }
+        r.render(ms, mc);
+        overlayRAF = requestAnimationFrame(loop);
+    };
+    loop();
+}
+// ── Modalita' 2: pannello 3D nella scena (billboard verso la camera) ─────
+function showPanel3d(opts, deps) {
+    const group = new THREE.Group();
+    group.name = 'wuicItemPopupPanel';
+    group.userData['wuicTransient'] = true;
+    // pannello campi (canvas texture)
+    const rows = fieldRows(opts);
+    const cw = 512, ch = 512;
+    const cvs = document.createElement('canvas');
+    cvs.width = cw;
+    cvs.height = ch;
+    const g = cvs.getContext('2d');
+    g.fillStyle = opts.panelBg || 'rgba(20,24,33,0.95)';
+    roundRect(g, 0, 0, cw, ch, 24);
+    g.fill();
+    g.fillStyle = '#9db4ff';
+    g.font = 'bold 34px system-ui,sans-serif';
+    let y = 64;
+    if (opts.title) {
+        g.fillText(opts.title, 32, y);
+        y += 20;
+    }
+    g.font = '26px system-ui,sans-serif';
+    for (const rr of rows) {
+        y += 48;
+        g.fillStyle = 'rgba(229,233,240,0.62)';
+        g.fillText(rr.label, 32, y);
+        g.fillStyle = '#e5e9f0';
+        g.font = 'bold 26px system-ui,sans-serif';
+        g.fillText(rr.value.slice(0, 22), 32, y + 30);
+        g.font = '26px system-ui,sans-serif';
+        y += 30;
+        if (y > ch - 60) {
+            break;
+        }
+    }
+    const tex = new THREE.CanvasTexture(cvs);
+    tex.colorSpace = THREE.SRGBColorSpace;
+    const panel = new THREE.Mesh(new THREE.PlaneGeometry(2.2, 2.2), new THREE.MeshBasicMaterial({ map: tex, transparent: true, depthTest: false }));
+    // swap → campi a destra, mesh a sinistra (default: campi sx, mesh dx).
+    const panelX = opts.swap ? 1.4 : -1.4;
+    const meshX = opts.swap ? -1.3 : 1.3;
+    panel.position.set(panelX, 0, 0);
+    panel.renderOrder = 999;
+    group.add(panel);
+    // mesh sul lato opposto ai campi
+    if (opts.mesh) {
+        const c = fitClone(opts.mesh);
+        c.position.set(meshX, 0, 0);
+        c.scale.multiplyScalar(1.4);
+        group.add(c);
+    }
+    // posiziona davanti alla camera + billboard
+    positionInFrontOfCamera(group, deps.camera, 6);
+    deps.scene.add(group);
+    panel3d = group;
+    panelDeps = deps;
+    if (deps.onFrame) {
+        deps.onFrame(() => { group.quaternion.copy(deps.camera.quaternion); });
+    }
+}
+function positionInFrontOfCamera(obj, camera, dist) {
+    const dir = new THREE.Vector3();
+    camera.getWorldDirection(dir);
+    const pos = new THREE.Vector3();
+    camera.getWorldPosition(pos);
+    obj.position.copy(pos).add(dir.multiplyScalar(dist));
+    obj.quaternion.copy(camera.quaternion);
+}
+function roundRect(g, x, y, w, h, r) {
+    g.beginPath();
+    g.moveTo(x + r, y);
+    g.arcTo(x + w, y, x + w, y + h, r);
+    g.arcTo(x + w, y + h, x, y + h, r);
+    g.arcTo(x, y + h, x, y, r);
+    g.arcTo(x, y, x + w, y, r);
+    g.closePath();
+}
+function disposeObject(obj) {
+    obj.traverse((o) => {
+        if (o.geometry) {
+            try {
+                o.geometry.dispose();
+            }
+            catch { /* noop */ }
+        }
+        const m = o.material;
+        if (m) {
+            (Array.isArray(m) ? m : [m]).forEach((mm) => { try {
+                mm.map?.dispose?.();
+                mm.dispose?.();
+            }
+            catch { /* noop */ } });
+        }
+    });
+}
+
 /**
  * Factory del renderer di scena — WebGL (default, percorso storico) o WebGPU
  * (opt-in, iter WebGPU/node-materials).
@@ -2196,8 +2776,8 @@ function buildEffectNodeMaterial(effect, webgpu) {
         material.opacityNode = float(opacity);
         material.transparent = true;
     }
-    material.wuicShaderEffect = true;
-    material.wuicShaderEffectNode = true;
+    (material).wuicShaderEffect = true;
+    (material).wuicShaderEffectNode = true;
     return material;
 }
 /**
@@ -2223,5 +2803,5 @@ function swapNodeEffectMaterialsForSerialization(root) {
     };
 }
 
-export { defaultRepeaterTextureApply as A, regenerateRepeater as B, CarouselController as C, getPhysicsDef as D, createPhysicsWorld as E, WUIC_PHYSICS_KEY as F, WUIC_OBJECT_TYPE_KEY as G, carouselArrowDir as H, WUIC_BINDING_KEY as I, swapNodeEffectMaterialsForSerialization as J, serializeScene as K, deserializeScene as L, SCENE3D_SHADER_EFFECT_DEFAULT as S, WUIC_TRANSIENT_FLAG as W, defaultRepeaterAxisDir as a, defaultCarouselConfig as b, defaultChartConfig as c, defaultMeshRepeaterConfig as d, defaultSurfaceConfig as e, defaultGaugeConfig as f, defaultGraphConfig as g, defaultMapConfig as h, isWebGpuSupported as i, defaultWarehouseConfig as j, defaultKanbanConfig as k, defaultCalendarConfig as l, defaultStackedConfig as m, createScene3dRenderer as n, WUIC_SHADER_EFFECT_KEY as o, makeTextSpriteMesh as p, WUIC_MESH_REPEATER_KEY as q, addRepeaterPlaceholder as r, parseShaderEffect as s, SCENE3D_SHADER_EFFECT_SCHEMA as t, buildEffectNodeMaterial as u, buildEffectShaderMaterial as v, getMeshRepeaterConfig as w, WUIC_REPEATER_CHILD as x, buildUploadTextureResolver as y, applyRepeaterTextureTo as z };
-//# sourceMappingURL=wuic-framework-lib-scene3d-shader-effect-CQLWkuh1.mjs.map
+export { buildUploadTextureResolver as A, applyRepeaterTextureTo as B, CarouselController as C, defaultRepeaterTextureApply as D, regenerateRepeater as E, getPhysicsDef as F, createPhysicsWorld as G, WUIC_PHYSICS_KEY as H, WUIC_OBJECT_TYPE_KEY as I, carouselArrowDir as J, WUIC_REPEATER_RECORD as K, runRepeaterCallback as L, closeItemPopup as M, showItemPopup as N, WUIC_BINDING_KEY as O, swapNodeEffectMaterialsForSerialization as P, serializeScene as Q, deserializeScene as R, SCENE3D_SHADER_EFFECT_DEFAULT as S, WUIC_TRANSIENT_FLAG as W, defaultRepeaterAxisDir as a, defaultCarouselConfig as b, defaultChartConfig as c, defaultMeshRepeaterConfig as d, defaultSurfaceConfig as e, defaultGaugeConfig as f, defaultGraphConfig as g, defaultMapConfig as h, isWebGpuSupported as i, defaultWarehouseConfig as j, defaultKanbanConfig as k, defaultCalendarConfig as l, defaultStackedConfig as m, createScene3dRenderer as n, WUIC_SHADER_EFFECT_KEY as o, makeTextSpriteMesh as p, WUIC_MESH_REPEATER_KEY as q, addRepeaterPlaceholder as r, resolveAssetFormat as s, parseShaderEffect as t, SCENE3D_SHADER_EFFECT_SCHEMA as u, buildEffectNodeMaterial as v, buildEffectShaderMaterial as w, getMeshRepeaterConfig as x, WUIC_REPEATER_CHILD as y, normalizeAssetToUnit as z };
+//# sourceMappingURL=wuic-framework-lib-scene3d-shader-effect-DjHyCAFK.mjs.map