python-materialsdb 0.0.2__py3-none-any.whl → 0.2.0__py3-none-any.whl

materialsdb/gui/static/app-constructions.js

@@ -0,0 +1,639 @@
+const TOKEN = window.MATERIALSDB_TOKEN;
+const $ = (id) => document.getElementById(id);
+const esc = (value) => String(value ?? "").replace(/[&<>"']/g, (ch) =>
+  ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[ch]));
+
+let layers = [];          // [{material_id, thickness_m, display_name?, lambda_value?, choices_mm?, anyThickness?}]
+let selectedRow = -1;
+let lastResult = null;
+let currentPreset = "ISO6946";
+
+async function api(path, options = {}) {
+  const response = await fetch(path, {
+    ...options,
+    headers: { "Content-Type": "application/json", "X-MaterialsDB-Token": TOKEN },
+  });
+  const type = response.headers.get("Content-Type") || "";
+  if (!response.ok) {
+    const message = type.includes("json") ? (await response.json()).error : response.statusText;
+    throw new Error(message);
+  }
+  return type.includes("json") ? response.json() : response.blob();
+}
+
+function fmt(range, digits = 3) {
+  if (range === null || range === undefined) return "";
+  return Array.isArray(range)
+    ? `${Number(range[0]).toFixed(digits)} - ${Number(range[1]).toFixed(digits)}`
+    : Number(range).toFixed(digits);
+}
+
+/* ---------- thickness cell: free input + manufacturer dropdown + warning ---------- */
+
+function thicknessCellHtml(layer, index) {
+  const mm = Math.round(layer.thickness_m * 1000 * 1000) / 1000;
+  const choices = layer.material_id ? layer.choices_mm || [] : [];
+  let control;
+  if (choices.length > 1) {
+    const options = choices.map((c) =>
+      `<option value="${c}"${Math.abs(c - mm) < 1e-6 ? " selected" : ""}>${c} mm</option>`).join("");
+    const customSelected = !choices.some((c) => Math.abs(c - mm) < 1e-6);
+    control = `<select data-role="choice" data-index="${index}" style="max-width:7rem">
+        ${customSelected ? `<option value="" selected>custom</option>` : ""}${options}</select>
+      <input type="text" inputmode="decimal" data-role="thick" data-index="${index}"
+             value="${mm}" style="width:4.5rem" title="thickness in mm">`;
+  } else {
+    control = `<input type="text" inputmode="decimal" data-role="thick" data-index="${index}"
+             value="${mm}" style="width:4.5rem" title="thickness in mm">`;
+  }
+  const warned = choices.length > 0 && !layer.anyThickness &&
+                 !choices.some((c) => Math.abs(c - mm) < 1e-6);
+  return `${control} mm` +
+    (warned ? ` <span class="warn" title="the manufacturer does not offer this thickness">\u26a0</span>` : "");
+}
+
+function bindThicknessControls() {
+  $("layers").querySelectorAll("select[data-role=choice]").forEach((select) => {
+    select.addEventListener("change", () => {
+      const index = Number(select.dataset.index);
+      if (select.value !== "") {
+        layers[index].thickness_m = Number(select.value) / 1000;
+        renderLayers();
+        refreshU();
+      }
+    });
+  });
+  $("layers").querySelectorAll("input[data-role=thick]").forEach((input) => {
+    input.addEventListener("change", () => {
+      const index = Number(input.dataset.index);
+      const mm = Number(input.value.replace(",", "."));
+      if (!mm || mm <= 0) { setStatus("thickness must be > 0"); input.focus(); return; }
+      layers[index].thickness_m = mm / 1000;
+      renderLayers();
+      refreshU();
+    });
+  });
+}
+
+async function fetchLayerChoices(materialId) {
+  const detail = await api(`/api/materials/${encodeURIComponent(materialId)}`);
+  const raw = (detail.layers || []).map((l) => l.thick).filter((t) => t !== null && t !== undefined);
+  const anyThickness = raw.some((t) => Number(t) === 0);
+  const choices = [...new Set(raw.filter((t) => Number(t) > 0).map(Number))].sort((a, b) => a - b);
+  // category / own color for preview coloring
+  const category = detail.category || detail.group || "Others";
+  const ownColor = detail.color ?? detail.information?.color ?? null;
+  return { choices_mm: choices, anyThickness, category, ownColor, display_name: detail.display_name || detail.names?.[""] || "" };
+}
+
+/* ---------- scaled stack preview + Rsi/Rse boundaries ---------- */
+
+function renderPreview() {
+  const drawer = $("preview");
+  if (!drawer) return;
+  const labels = i18nLabels();
+  const total = layers.reduce((sum, l) => sum + l.thickness_m, 0);
+  let inner = "";
+  const rsiKnown = lastResult ? lastResult.rsi : null;
+  const rseKnown = lastResult ? lastResult.rse : null;
+  inner += layers.map((layer, index) => {
+    const flex = total ? (layer.thickness_m / total) * 100 : 0;
+    const name = layer.display_name || (layer.material_id ? layer.material_id.slice(0, 8) : (layer.placeholder?.name || "(model material)"));
+    const bg = (typeof PickerCore !== "undefined"
+      ? PickerCore.categoryColorStyle(layer.category || "Others", layer.ownColor)
+      : "#eef");
+    return `<div class="stackbar-seg" style="flex:${flex};background:${bg};border-right:2px solid #fff" title="${esc(name)} \u2014 ${esc(fmt(layer.thickness_m * 1000, 0))} mm">` +
+      `${esc(String(index + 1))}<br>${fmt(layer.thickness_m * 1000, 0)} mm</div>`;
+  }).join("");
+  drawer.innerHTML =
+    `<span class="rs-chip">${esc(labels.exterior)} \u00b7 Rse = ${rseKnown ?? "?"}</span>` +
+    `<div class="stackbar">${inner || "<i style='color:#888'>no layers</i>"}</div>` +
+    `<span class="rs-chip">${esc(labels.interior)} \u00b7 Rsi = ${rsiKnown ?? "?"}</span>`;
+}
+
+function i18nLabels() {
+  const lang = (document.documentElement.lang || "en").slice(0, 2);
+  const dict = {
+    en: { interior: "Interior", exterior: "Exterior", formula: "How U is computed",
+          warnOffered: "manufacturer does not offer this thickness" },
+    fr: { interior: "Int\u00e9rieur", exterior: "Ext\u00e9rieur", formula: "Calcul du U",
+          warnOffered: "\u00e9paisseur non propos\u00e9e par le fabricant" },
+    de: { interior: "Innen", exterior: "Au\u00dfen", formula: "U-Berechnung",
+          warnOffered: "Dicke vom Hersteller nicht angeboten" },
+  };
+  return dict[lang] || dict.en;
+}
+
+/* ---------- table rendering ---------- */
+
+function renderLayers() {
+  const tbody = $("layers");
+  const rows = layers.map((layer, index) => {
+    const selectedAttr = index === selectedRow ? ' style="background:#eef"' : "";
+    const catColor = typeof PickerCore !== "undefined"
+      ? PickerCore.categoryColorStyle(layer.category || "Others", layer.ownColor)
+      : "#fff";
+    const isPlaceholder = !layer.material_id && layer.placeholder;
+    const nameCell = isPlaceholder
+      ? `${esc(layer.placeholder.name || "(model material)")} <span style="color:#888;font-size:.8rem">model material</span>`
+      : esc(layer.display_name || layer.material_id);
+    return `<tr data-index="${index}"${selectedAttr} style="cursor:pointer;border-left:4px solid ${catColor}">` +
+      `<td>${index + 1}</td><td data-role="name">${nameCell}</td>` +
+      `<td>${thicknessCellHtml(layer, index)}</td>` +
+      `<td data-role="lambda">${esc(layer.lambda_value ?? (isPlaceholder ? layer.placeholder.lambda_value ?? "" : ""))}</td><td data-role="r">${esc(fmtR(layer, index))}</td><td></td></tr>`;
+  }).join("");
+  tbody.innerHTML = rsBoundaryRow("exterior") + rows + rsBoundaryRow("interior");
+  bindThicknessControls();
+  tbody.querySelectorAll("tr[data-index]").forEach((tr) => {
+    tr.addEventListener("click", (event) => {
+      if (event.target.tagName === "INPUT" || event.target.tagName === "SELECT") return;
+      selectedRow = Number(tr.dataset.index);
+      renderLayers();
+    });
+  });
+}
+
+function rsBoundaryRow(which) {
+  const presetName = $("preset").value;
+  const values = lastResult ? [lastResult.rsi, lastResult.rse] : null;
+  const label = i18nLabels()[which];
+  const value = which === "interior"
+    ? (values ? values[0] : RESISTANCE_DISPLAY[presetName]?.rsi)
+    : (values ? values[1] : RESISTANCE_DISPLAY[presetName]?.rse);
+  return `<tr class="rsrow"><td colspan="2">${esc(label)}</td>` +
+    `<td colspan="3">R${which === "interior" ? "si" : "se"} = ${value ?? "?"} m\u00b2K/W</td><td></td></tr>`;
+}
+
+const RESISTANCE_DISPLAY = {
+  ISO6946: { rsi: 0.13, rse: 0.04 },
+  SIA180: { rsi: 0.13, rse: 0.04 },
+};
+
+function fmtR(layer, index) {
+  if (!lastResult) return "";
+  const c = lastResult.contributions.find((x) =>
+    x.layer_index != null ? x.layer_index === index : x.material_id === layer.material_id);
+  return c ? c.r.toFixed(3) : "";
+}
+
+function renderContributions() {
+  if (!lastResult) { $("u-display").textContent = "-"; $("contributions").innerHTML = ""; $("warnings").textContent = ""; }
+  else if (lastResult.u === null) {
+    $("u-display").textContent = "?";
+    $("warnings").textContent = "layers without lambda or invalid thickness excluded: " + lastResult.missing_lambda_ids.length;
+  } else {
+    $("u-display").textContent = lastResult.u.toFixed(3) + " W/m2K";
+    $("warnings").textContent = lastResult.missing_lambda_ids.length ? `warning: ${lastResult.missing_lambda_ids.length} layer(s) without lambda excluded` : "";
+  }
+  $("contributions").innerHTML = (lastResult ? lastResult.contributions : []).map((c) =>
+    `<dt>${esc(c.name || (c.material_id ? c.material_id.slice(0, 8) : "(model material)"))} \u2014 ${c.d_m.toFixed(3)} m</dt><dd>R = ${c.r.toFixed(3)}</dd>`).join("");
+}
+
+async function refreshU() {
+  if (!layers.length) { lastResult = null; renderContributions(); renderPreview(); return; }
+  const body = {
+    construction: {
+      name: $("name").value || "draft",
+      design_usage: $("design-usage").value || null,
+      layers: layers.map((l) => ({
+        material_id: l.material_id,
+        thickness_m: l.thickness_m,
+        ...(l.placeholder ? { placeholder: { name: l.placeholder.name, lambda_value: l.placeholder.lambda_value } } : {}),
+      })),
+    },
+    preset: $("preset").value,
+  };
+  currentPreset = $("preset").value;
+  try {
+    lastResult = await api("/api/u_value", { method: "POST", body: JSON.stringify(body) });
+    lastResult.contributions.forEach((c) => {
+      // contributions carry their original layer position; placeholder rows all
+      // share material_id null, so index matching is the only safe hydration
+      const rows = c.layer_index != null
+        ? [layers[c.layer_index]].filter(Boolean)
+        : layers.filter((l) => l.material_id === c.material_id);
+      rows.forEach((row) => {
+        row.display_name = c.name || row.display_name;
+        row.lambda_value = c.lambda_value;
+      });
+    });
+  } catch (err) { setStatus(err.message); }
+  renderLayers();
+  renderContributions();
+  renderPreview();
+}
+
+/* ---------- layer choices after add ---------- */
+
+async function attachLayerChoices(layer) {
+  try {
+    Object.assign(layer, await fetchLayerChoices(layer.material_id));
+  } catch { /* choices are optional */ }
+  renderLayers();
+}
+
+/* ---------- saved + materialsdb lists ---------- */
+
+async function initConfig() {
+  try {
+    const cfg = await api("/api/config");
+    const langEl = document.getElementById("lang");
+    const countryEl = document.getElementById("country");
+    if (langEl && cfg.lang) { langEl.value = cfg.lang; document.documentElement.lang = cfg.lang; }
+    if (countryEl && cfg.country) countryEl.value = cfg.country;
+  } catch {}
+}
+
+async function loadList() {
+  const { constructions } = await api("/api/constructions");
+  $("saved-list").innerHTML = constructions.map((name) =>
+    `<li><a href="#" data-name="${esc(name)}">${esc(name)}</a></li>`).join("") ||
+    `<li style="color:#777;font-size:.8rem">none saved yet.<br>Create one with <b>new</b> + <b>add layer</b>, or duplicate a materialsdb construction below.</li>`;
+  $("saved-list").querySelectorAll("a").forEach((a) => a.addEventListener("click", async (event) => {
+    event.preventDefault();
+    const construction = await api(`/api/constructions/${encodeURIComponent(a.dataset.name)}`);
+    loadEditable(construction);
+  }));
+  await loadMaterialsdbConstructions();
+}
+
+let incoming = [];
+
+/* --- collapsible panel sections (persisted; a new model push fronts the
+ * incoming section by collapsing the other two) --- */
+const SECTION_KEYS = ["saved", "incoming", "mdb"];
+let sectionState = { saved: true, incoming: true, mdb: true };
+try {
+  Object.assign(sectionState, JSON.parse(localStorage.getItem("materialsdb.sections") || "{}"));
+} catch {}
+
+function applySections() {
+  for (const key of SECTION_KEYS) {
+    const container = $(`section-${key}`);
+    if (container) container.style.display = sectionState[key] ? "" : "none";
+    const chev = document.querySelector(`.section-toggle[data-section="${key}"] .chev`);
+    if (chev) chev.textContent = sectionState[key] ? "▾" : "▸";
+  }
+}
+
+function toggleSection(key) {
+  sectionState[key] = !sectionState[key];
+  try {
+    localStorage.setItem("materialsdb.sections", JSON.stringify(sectionState));
+  } catch {}
+  applySections();
+}
+
+document.querySelectorAll(".section-toggle").forEach((header) =>
+  header.addEventListener("click", () => toggleSection(header.dataset.section)));
+applySections();
+
+async function refreshIncoming() {
+  try {
+    incoming = (await api("/api/composer/incoming")).incoming;
+  } catch {
+    incoming = [];
+  }
+  const grew = lastIncomingLength !== null && incoming.length > lastIncomingLength;
+  lastIncomingLength = incoming.length;
+  if (grew) {
+    sectionState.saved = false;
+    sectionState.mdb = false;
+    sectionState.incoming = true;
+    try {
+      localStorage.setItem("materialsdb.sections", JSON.stringify(sectionState));
+    } catch {}
+    applySections();
+  }
+  const count = $("incoming-count");
+  if (count) count.textContent = incoming.length ? `(${incoming.length})` : "";
+  const box = $("incoming-list");
+  box.innerHTML = incoming.length
+    ? incoming.map((construction, index) =>
+        `<li><a href="#" data-index="${index}">${esc(construction.name)}</a> ` +
+        `<span style="color:#888">· ${construction.layers.length} layer(s)` +
+        `${construction.layers.some((l) => l.placeholder) ? " · has model materials" : ""}</span></li>`).join("")
+    : `<li style="color:#777;font-size:.8rem">nothing incoming from the model</li>`;
+  box.querySelectorAll("a").forEach((a) => a.addEventListener("click", async (event) => {
+    event.preventDefault();
+    const result = await api("/api/composer/incoming/consume", {
+      method: "POST",
+      body: JSON.stringify({ index: Number(a.dataset.index) }),
+    });
+    loadEditable(result.construction);
+    setStatus(`editing copy of ${result.construction.name} — save to keep, send to: to push back`);
+    refreshIncoming();
+  }));
+  if (grew) {
+    const header = document.querySelector('.section-toggle[data-section="incoming"]');
+    if (header && header.scrollIntoView) header.scrollIntoView({ block: "nearest" });
+  }
+}
+
+let lastIncomingLength = null;
+setInterval(refreshIncoming, 2000);
+refreshIncoming();
+
+let materialsdbConstructions = [];
+
+async function loadMaterialsdbConstructions() {
+  const { materials } = await api("/api/materials?type=construction");
+  materialsdbConstructions = materials;
+
+  const companySelect = $("mdb-company");
+  const companies = [...new Set(materials.map((m) => m.company))].sort();
+  companySelect.innerHTML = `<option value="">all companies</option>` +
+    companies.map((c) => `<option value="${esc(c)}">${esc(c)}</option>`).join("");
+
+  const renderMdbList = () => {
+    const needle = $("mdb-search").value.trim().toLowerCase();
+    const company = companySelect.value;
+    const visible = materialsdbConstructions.filter((m) =>
+      (!company || m.company === company) &&
+      (!needle || m.display_name.toLowerCase().includes(needle)));
+    $("mdb-list").innerHTML = visible.map((m) =>
+      `<li><a href="#" data-id="${esc(m.id)}">${esc(m.display_name)}</a> ` +
+      `<span style="color:#888">· ${esc(m.company)}</span></li>`).join("") ||
+      "<li><i>no match</i></li>";
+    $("mdb-list").querySelectorAll("a").forEach((a) => a.addEventListener("click", async (event) => {
+      event.preventDefault();
+      showLegacy(a.dataset.id);
+    }));
+  };
+
+  $("mdb-search").addEventListener("input", () => clearTimeout(setTimeout(renderMdbList, 200)) || undefined);
+  let searchTimer;
+  $("mdb-search").addEventListener("input", () => { clearTimeout(searchTimer); searchTimer = setTimeout(renderMdbList, 200); });
+  companySelect.addEventListener("change", renderMdbList);
+  renderMdbList();
+}
+
+let legacyState = null;   // {payload, variantIndex}
+
+async function showLegacy(materialId) {
+  const payload = await api(`/api/constructions/legacy/${encodeURIComponent(materialId)}`);
+  legacyState = { payload, materialId, variantIndex: 0 };
+  $("composer-ui").style.display = "none";
+  const view = $("readonly-ui");
+  view.style.display = "block";
+  const entry = materialsdbConstructions.find((m) => m.id === materialId);
+  const chips = payload.variants.map((v, index) =>
+    `<button class="variant-chip" data-variant="${index}" style="background:${index === 0 ? "#eef" : ""}">` +
+    `variant ${index + 1}${v.layers.length ? ` (${v.layers.length} layers)` : ""}</button>`).join("");
+  view.innerHTML =
+    `<div><button id="back-composer">← back to composer</button>` +
+    ` <h3 style="display:inline;margin-left:.5rem">${esc(entry ? entry.display_name : materialId)}` +
+    ` <span class="warn" title="this content is a non-spec vendor string; display is best-effort">non-spec vendor data</span></h3></div>` +
+    `<div style="margin:.3rem 0">consref: <b>${esc(payload.consref) || "-"}</b> · designusage: <b>${esc(payload.designusage) || "-"}</b></div>` +
+    `<div id="variant-chips">${chips}</div>` +
+    `<div id="variant-body" style="margin-top:.4rem"></div>` +
+    `<details style="margin-top:.4rem"><summary>raw vendor string</summary>` +
+    `<pre style="white-space:pre-wrap">${esc(payload.raw)}</pre></details>` +
+    `<button id="copy-legacy" style="margin-top:.5rem">create editable copy</button>`;
+  view.querySelector("#back-composer").onclick = hideLegacy;
+  view.querySelector("#variant-chips").addEventListener("click", (event) => {
+    if (event.target.dataset.variant === undefined) return;
+    legacyState.variantIndex = Number(event.target.dataset.variant);
+    view.querySelectorAll(".variant-chip").forEach((chip) =>
+      chip.style.background = chip.dataset.variant === String(legacyState.variantIndex) ? "#eef" : "");
+    renderLegacyVariant();
+  });
+  view.querySelector("#copy-legacy").onclick = () => {
+    copyLegacyToComposer(materialId, payload);
+    hideLegacy();
+  };
+  renderLegacyVariant();
+  setStatus("materialsdb construction loaded (read-only)");
+}
+
+function hideLegacy() {
+  $("readonly-ui").style.display = "none";
+  $("composer-ui").style.display = "flex";
+}
+
+function renderLegacyVariant() {
+  const { payload, variantIndex } = legacyState;
+  const entry = materialsdbConstructions.find((m) => m.id === legacyState.materialId);
+  const variant = payload.variants[variantIndex];
+  const rows = variant.layers.map((l, li) => {
+    const flag = l.resolvable ? "" : ' <span class="warn" title="guid not found in the local index">⚠ unresolved</span>';
+    return `<tr><td>${li + 1}</td><td>${esc(l.name || l.guid.slice(0, 8))}${flag}</td>` +
+      `<td>${fmt(l.thickness_m * 1000, 0)} mm</td><td>${esc(fmt(l.lambda_value))}</td></tr>`;
+  }).join("");
+  const uLine = variant.u !== null && variant.u !== undefined ? `${variant.u.toFixed(3)} W/m²K` : "n/a";
+  $("variant-body").innerHTML =
+    `<table><thead><tr><th>#</th><th>material</th><th>thickness</th><th>λ W/mK</th></tr></thead><tbody>${rows}</tbody></table>` +
+    `<p style="margin-top:.4rem"><b>U = ${uLine}</b>${variant.unresolved_count ? ` · ${variant.unresolved_count} unresolvable guid(s) excluded from the sum` : ""}</p>` +
+    (entry && entry.company ? `<p style="color:#777">producer: ${esc(entry.company)}</p>` : "");
+}
+
+async function copyLegacyToComposer(materialId, payload) {
+  const variant = payload.variants.find((v) => v.layers.every((l) => l.resolvable)) || payload.variants[0];
+  layers = variant.layers
+    .filter((l) => l.resolvable)
+    .map((l) => ({ material_id: l.guid, thickness_m: l.thickness_m }));
+  selectedRow = -1;
+  $("name").value = entry_name(materialId) || materialId.slice(0, 8);
+  const usageMap = { consDesignForWall: "consDesignForWall", consDesignForRoof: "consDesignForRoof", consDesignForFloor: "consDesignForFloor" };
+  $("design-usage").value = usageMap[payload.designusage] || "";
+  await Promise.all(layers.map(attachLayerChoices));
+  await refreshU();
+  setStatus("editable copy created \u2014 adjust and save under your own name");
+}
+
+function entry_name(materialId) {
+  const entry = materialsdbConstructions.find((m) => m.id === materialId);
+  return entry ? entry.display_name : null;
+}
+
+function loadEditable(construction) {
+  $("name").value = construction.name;
+  $("design-usage").value = construction.design_usage || "";
+  layers = construction.layers.map((l) => ({ ...l }));
+  selectedRow = -1; lastResult = null;
+  layerChoicesInitAll();
+}
+
+async function layerChoicesInitAll() {
+  await Promise.all(layers.map(async (layer) => {
+    if (!layer.material_id) return;
+    try {
+      Object.assign(layer, await fetchLayerChoices(layer.material_id));
+    } catch {
+      /* choices optional; id may be absent from the local store */
+    }
+  }));
+  await refreshU();
+}
+
+function setStatus(text) { $("status").textContent = text; return text; }
+
+$("new").onclick = () => { layers = []; selectedRow = -1; lastResult = null; $("name").value = ""; renderLayers(); renderContributions(); renderPreview(); };
+$("delete").onclick = async () => {
+  const name = $("name").value; if (!name) return setStatus("nothing loaded");
+  await api(`/api/constructions/${encodeURIComponent(name)}`, { method: "DELETE" });
+  setStatus(`deleted ${name}`); loadList(); $("new").onclick();
+};
+$("add-layer").onclick = () => openChooser(addLayerFromChooser);
+
+async function addLayerFromChooser(picked) {
+  const items = Array.isArray(picked) ? picked : [{ material_id: picked }];
+  let added = 0;
+  for (const it of items) {
+    const thicknessHint = it.thickness_m;
+    if (thicknessHint == null) {
+      if (layers.some((l) => l.material_id === it.material_id)) {
+        // whole-material already present — skip duplicate
+        continue;
+      }
+    } else {
+      if (layers.some((l) => l.material_id === it.material_id && Math.abs(l.thickness_m - thicknessHint) < 1e-9)) continue;
+    }
+    const layer = { material_id: it.material_id, thickness_m: thicknessHint != null ? thicknessHint : 0.2 };
+    layers.push(layer);
+    selectedRow = layers.length - 1;
+    added++;
+    renderLayers();
+    await attachLayerChoices(layer);
+    if (thicknessHint == null && !layer.anyThickness && layer.choices_mm && layer.choices_mm.length) {
+      layer.thickness_m = layer.choices_mm[0] / 1000;
+    }
+    renderLayers();
+  }
+  if (added) await refreshU();
+  else if (items.length) setStatus("selected materials already in construction");
+}
+document.querySelector("[data-move=up]").onclick = () => {
+  if (selectedRow > 0) { [layers[selectedRow - 1], layers[selectedRow]] = [layers[selectedRow], layers[selectedRow - 1]]; selectedRow -= 1; renderLayers(); refreshU(); }
+};
+document.querySelector("[data-move=down]").onclick = () => {
+  if (selectedRow > -1 && selectedRow < layers.length - 1) { [layers[selectedRow + 1], layers[selectedRow]] = [layers[selectedRow], layers[selectedRow + 1]]; selectedRow += 1; renderLayers(); refreshU(); }
+};
+document.querySelector("[data-action=remove]").onclick = () => {
+  if (selectedRow > -1) { layers.splice(selectedRow, 1); selectedRow = -1; renderLayers(); refreshU(); }
+};
+$("reverse").onclick = () => {
+  if (!layers.length) return;
+  layers.reverse();
+  if (selectedRow !== -1) selectedRow = layers.length - 1 - selectedRow;
+  renderLayers(); refreshU();
+};
+document.getElementById("settings-tab").addEventListener("click", (e) => {
+  e.preventDefault();
+  const p = document.getElementById("settings-panel");
+  p.style.display = p.style.display === "none" ? "block" : "none";
+});
+$("preset").onchange = () => { refreshU(); };
+$("design-usage").onchange = refreshU;
+$("save").onclick = async () => {
+  const name = $("name").value.trim(); if (!name) return setStatus("name required");
+  if (!layers.length) return setStatus("add at least one layer");
+  await api(`/api/constructions/${encodeURIComponent(name)}`, { method: "POST",
+    body: JSON.stringify({ name, design_usage: $("design-usage").value || null,
+      layers: layers.map((l) => ({
+        material_id: l.material_id,
+        thickness_m: l.thickness_m,
+        ...(l.placeholder ? { placeholder: { name: l.placeholder.name, lambda_value: l.placeholder.lambda_value } } : {}),
+      })) }) });
+  setStatus(`saved ${name} (overwrites same-name construction)`); loadList();
+};
+
+const bonsaiTarget = PickerCore.startTargetPoll(api, $("bonsai-target"), $("send-bonsai"));
+
+$("send-bonsai").onclick = async () => {
+  if (!layers.length) return setStatus("add at least one layer");
+  if (!$("name").value.trim()) return setStatus("name the construction before sending");
+  const client_id = bonsaiTarget.current();
+  if (!client_id) return setStatus("no Bonsai listener connected");
+  const result = await api("/api/listener/send", {
+    method: "POST",
+    body: JSON.stringify({
+      client_id,
+      action: "add_construction",
+      construction: {
+        name: $("name").value.trim(),
+        design_usage: $("design-usage").value || null,
+        layers: layers.map((l) => ({
+          material_id: l.material_id,
+          thickness_m: l.thickness_m,
+          ...(l.placeholder ? { placeholder: { name: l.placeholder.name, lambda_value: l.placeholder.lambda_value } } : {}),
+        })),
+      },
+    }),
+  });
+  PickerCore.flash(setStatus, () => $("status").textContent, `sent to ${bonsaiTarget.label() || "?"}: ${result.summary}`);
+};
+$("export-ifc").onclick = async () => {
+  try {
+    const name = $("name").value.trim(); if (!name || !layers.length) return setStatus("nothing to export");
+    const blob = await api("/api/export-construction", { method: "POST",
+      body: JSON.stringify({ construction: { name, design_usage: $("design-usage").value || null,
+        layers: layers.map((l) => ({
+          material_id: l.material_id,
+          thickness_m: l.thickness_m,
+          ...(l.placeholder ? { placeholder: { name: l.placeholder.name, lambda_value: l.placeholder.lambda_value } } : {}),
+        })) } }) });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a"); link.href = url; link.download = `${name}.ifc`; link.click();
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    setStatus(err.message);
+  }
+};
+$("append-session").onclick = async () => {
+  try {
+    if (!$("name").value || !layers.length) return setStatus("nothing to append");
+    const result = await api("/api/append-construction", { method: "POST",
+      body: JSON.stringify({ construction: { name: $("name").value,
+        design_usage: $("design-usage").value || null,
+        layers: layers.map((l) => ({
+          material_id: l.material_id,
+          thickness_m: l.thickness_m,
+          ...(l.placeholder ? { placeholder: { name: l.placeholder.name, lambda_value: l.placeholder.lambda_value } } : {}),
+        })) } }),
+      });
+    setStatus(`appended layer set (${result.layer_count} layers)`);
+  } catch (err) {
+    setStatus(err.message);
+  }
+};
+initConfig().then(() => loadList().then(() => { renderLayers(); renderContributions(); renderPreview(); }));
+document.getElementById("lang")?.addEventListener("change", async () => {
+  await api("/api/config", { method: "POST", body: JSON.stringify({ lang: $("lang").value }) });
+  document.documentElement.lang = $("lang").value;
+});
+document.getElementById("country")?.addEventListener("change", async () => {
+  await api("/api/config", { method: "POST", body: JSON.stringify({ country: $("country").value }) });
+});
+
+/* --- chooser: embedded full picker via iframe --- */
+function openChooser(onPick) {
+  const overlay = document.createElement("div");
+  overlay.id = "chooser";
+  overlay.style.cssText = "position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:1000";
+  overlay.innerHTML = `<div style="background:#fff;width:85%;height:85%;display:flex;flex-direction:column;border-radius:6px;overflow:hidden">` +
+    `<div style="display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem;border-bottom:1px solid #ccc"><b>Select materials</b>` +
+    `<div><button id="chooser-add" disabled>Add selected (0)</button><button id="chooser-close" style="margin-left:.4rem">close</button></div></div>` +
+    `<iframe src="/?embed=1" style="flex:1;border:none;width:100%"></iframe></div>`;
+  document.body.appendChild(overlay);
+  const close = () => { window.removeEventListener("message", onMessage); overlay.remove(); };
+  overlay.querySelector("#chooser-close").onclick = close;
+  overlay.addEventListener("click", (event) => { if (event.target === overlay) close(); });
+
+  let pending = [];
+  function onMessage(event) {
+    if (event.data && event.data.type === "picker-selection") {
+      pending = event.data.items || [];
+      const btn = overlay.querySelector("#chooser-add");
+      btn.textContent = `Add selected (${pending.length})`;
+      btn.disabled = pending.length === 0;
+    }
+  }
+  window.addEventListener("message", onMessage);
+  overlay.querySelector("#chooser-add").onclick = () => {
+    if (!pending.length) return;
+    const copy = [...pending];
+    close();
+    onPick(copy);
+  };
+}