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

materialsdb/gui/static/app.js

@@ -0,0 +1,451 @@
+const TOKEN = window.MATERIALSDB_TOKEN;
+const $ = (id) => document.getElementById(id);
+const selected = new Set();
+const esc = (value) => String(value ?? "").replace(/[&<>"']/g, (ch) =>
+  ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[ch]));
+
+const USAGE_LABELS = {
+  en: { wall: "Wall", roof: "Roof", floor: "Floor", door: "Door" },
+  fr: { wall: "Mur", roof: "Toit", floor: "Plancher", door: "Porte" },
+  de: { wall: "Wand", roof: "Dach", floor: "Boden", door: "T\u00fcr" },
+};
+
+const isEmbed = new URLSearchParams(location.search).has("embed");
+let allMaterials = [];
+let lang = "en";
+if (isEmbed) {
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelector(".top-tabs")?.remove();
+    const sp = document.getElementById("settings-panel");
+    if (sp) sp.remove();
+  });
+}
+let sortKey = "company";
+let sortAsc = true;
+const facetSelections = { company: new Set(), category: new Set(), type: new Set(), usage: new Set() };
+const detailCache = new Map();
+const expanded = new Set();
+const layerSelections = new Map();   // materialId -> Set(sourceLayerGuid); absent = whole material
+let lastSelectedId = null;
+if (isEmbed) {
+  const _buildItems = () => {
+    const items = [];
+    const seen = new Set();
+    for (const id of selected) {
+      seen.add(id);
+      const layerSet = layerSelections.get(id);
+      if (layerSet && layerSet.size) {
+        for (const lguid of layerSet) {
+          const det = detailCache.get(id);
+          const layerDetail = det?.layers?.find((l) => l.id === lguid);
+          const thick = layerDetail ? Number(layerDetail.thick) : 0;
+          items.push({ material_id: id, thickness_m: thick ? thick / 1000 : 0.2 });
+        }
+      } else {
+        items.push({ material_id: id });
+      }
+    }
+    for (const [id, layerSet] of layerSelections) {
+      if (seen.has(id) || !layerSet.size) continue;
+      for (const lguid of layerSet) {
+        const det = detailCache.get(id);
+        const layerDetail = det?.layers?.find((l) => l.id === lguid);
+        const thick = layerDetail ? Number(layerDetail.thick) : 0;
+        items.push({ material_id: id, thickness_m: thick ? thick / 1000 : 0.2 });
+      }
+    }
+    return items;
+  };
+  const _notifyParent = () => {
+    try { parent.postMessage({ type: "picker-selection", items: _buildItems() }, "*"); } catch {}
+  };
+  const _origAdd = selected.add.bind(selected); selected.add = (v) => { const r = _origAdd(v); _notifyParent(); return r; };
+  const _origDelete = selected.delete.bind(selected); selected.delete = (v) => { const r = _origDelete(v); _notifyParent(); return r; };
+  const _origClear = selected.clear.bind(selected); selected.clear = () => { const r = _origClear(); _notifyParent(); return r; };
+  const _origLSet = layerSelections.set.bind(layerSelections); layerSelections.set = (k, v) => { const r = _origLSet(k, v); _notifyParent(); return r; };
+  const _origLDel = layerSelections.delete.bind(layerSelections); layerSelections.delete = (k) => { const r = _origLDel(k); _notifyParent(); return r; };
+  const _origLClear = layerSelections.clear.bind(layerSelections); layerSelections.clear = () => { const r = _origLClear(); _notifyParent(); return r; };
+}
+const COLUMNS = [
+  { key: "display_name", label: "name" },
+  { key: "company", label: "company", facet: true },
+  { key: "category", label: "category", facet: true },
+  { key: "type", label: "type", facet: true },
+  { key: "lambda", label: "\u03bb W/mK" },
+  { key: "thick", label: "thick mm" },
+  { key: "usage", label: "usage", facet: true },
+];
+
+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);
+}
+
+function usageWords(m) {
+  const labels = USAGE_LABELS[lang] || USAGE_LABELS.en;
+  return Object.entries(m.usage).filter(([, v]) => v).map(([k]) => labels[k] || k);
+}
+
+async function getDetail(id) {
+  if (!detailCache.has(id)) detailCache.set(id, await api(`/api/materials/${id}`));
+  return detailCache.get(id);
+}
+
+async function loadMaterials() {
+  try {
+    const cfg = await api("/api/config");
+    lang = cfg.lang || lang;
+    const langEl = document.getElementById("lang");
+    if (langEl) langEl.value = lang;
+    const countryEl = document.getElementById("country");
+    if (countryEl && cfg.country) countryEl.value = cfg.country;
+    document.documentElement.lang = lang;
+  } catch {}
+  const params = new URLSearchParams();
+  params.set("lang", lang);
+  const { materials } = await api(`/api/materials?${params}`);
+  allMaterials = materials;
+  renderHeader();
+  applyModel();
+}
+
+function facetValues(key) {
+  if (key === "usage") return Object.keys(USAGE_LABELS.en);
+  return [...new Set(allMaterials.map((m) => String(m[key] ?? "")))].sort();
+}
+
+function numericComparator(key, dir) {
+  const numeric = (m) => m[key === "lambda" ? "lambda_min" : "thick_min"];
+  return (a, b) => {
+    const va = numeric(a);
+    const vb = numeric(b);
+    const aNull = va === null || va === undefined;
+    const bNull = vb === null || vb === undefined;
+    if (aNull || bNull) return aNull && bNull ? 0 : (aNull ? 1 : -1);   // null metrics stay last
+    return dir * (va - vb);
+  };
+}
+
+function renderHeader() {
+  const headerRow = $("header-row");
+  headerRow.innerHTML = `<th></th>` + COLUMNS.map((col) => {
+    const arrow = sortKey === col.key ? (sortAsc ? " \u2191" : " \u2193") : "";
+    const chevron = col.facet ? ` <span class="chevron" data-facet="${col.key}">\u25be</span>` : "";
+    return `<th data-sort="${col.key}" style="cursor:pointer">${esc(col.label)}${arrow}${chevron}</th>`;
+  }).join("");
+  headerRow.querySelectorAll("th[data-sort]").forEach((th) => {
+    th.addEventListener("click", (event) => {
+      if (event.target.classList.contains("chevron")) return;
+      const key = th.dataset.sort;
+      const numericCol = key === "lambda" || key === "thick";
+      if (sortKey === key && numericCol) {
+        sortAsc = !sortAsc;
+        allMaterials.sort(numericComparator(key, sortAsc ? 1 : -1));   // sign factor: nulls stay last
+      } else if (sortKey === key) { sortAsc = !sortAsc; allMaterials.reverse(); }
+      else {
+        sortKey = key;
+        sortAsc = true;
+        allMaterials.sort(numericCol ? numericComparator(key, 1)
+          : (a, b) => String(a[key] ?? "").localeCompare(String(b[key] ?? "")));
+      }
+      renderHeader();
+      applyModel();
+    });
+  });
+  headerRow.querySelectorAll(".chevron").forEach((el) => {
+    el.addEventListener("click", (event) => {
+      event.stopPropagation();
+      toggleFacetDropdown(el.dataset.facet, el);
+    });
+  });
+}
+
+function matchesFacets(m) {
+  const usageActive = (k) => m.usage[k];
+  for (const [facet, chosen] of Object.entries(facetSelections)) {
+    if (!chosen.size) continue;
+    if (facet === "usage") {
+      if (![...chosen].some((k) => usageActive(k))) return false;
+    } else if (!chosen.has(String(m[facet] ?? ""))) {
+      return false;
+    }
+  }
+  return true;
+}
+
+let renderGeneration = 0;
+
+async function applyModel() {
+  const generation = ++renderGeneration;
+  const needle = $("text").value.trim().toLowerCase();
+  const rowsEl = $("rows");
+  const matching = [];
+  for (const m of allMaterials) {
+    if (!matchesFacets(m)) continue;
+    if (needle && !(m.display_name.toLowerCase().includes(needle) ||
+        m.company.toLowerCase().includes(needle) || m.category.toLowerCase().includes(needle))) continue;
+    matching.push(m);
+  }
+  let details;
+  try {
+    details = new Map(await Promise.all([...expanded].map(async (id) => [id, await getDetail(id)])));
+  } catch (err) {
+    if (generation !== renderGeneration) return;
+    setStatus(`detail load failed: ${err.message}`);
+    return;
+  }
+  if (generation !== renderGeneration) return; // a newer render superseded this one
+  rowsEl.innerHTML = "";
+  let visible = 0;
+  for (const m of matching) {
+    visible += 1;
+    const tr = document.createElement("tr");
+    tr.dataset.id = m.id;
+    const usage = usageWords(m).map(esc).join(" ");
+    const pickCell = m.type === "simple"
+      ? `<td><span class="expander" data-id="${esc(m.id)}" style="cursor:pointer">${expanded.has(m.id) ? "\u25be" : "\u25b8"}</span>` +
+        `<input type="checkbox" title="checked = pick whole material (all layers); untick to choose layers below"></td>`
+      : `<td><input type="checkbox" title="pick whole material"></td>`;
+    tr.innerHTML = pickCell +
+      `<td>${esc(m.display_name)}</td><td>${esc(m.company)}</td><td>${esc(m.category)}</td><td>${esc(m.type)}</td>` +
+      `<td>${esc(fmt([m.lambda_min, m.lambda_max]))}</td><td>${esc(fmt([m.thick_min, m.thick_max], 0))}</td>` +
+      `<td>${usage}</td>`;
+    const [checkbox] = tr.getElementsByTagName("input");
+    checkbox.onchange = () => {
+      if (checkbox.checked) layerSelections.delete(m.id);   // parent checked = all layers
+      checkbox.checked ? selected.add(m.id) : selected.delete(m.id);
+      document.querySelectorAll(`tr.layerrow[data-parent="${m.id}"] input[data-layer]`)
+        .forEach((el) => { el.checked = false; });
+    };
+    const expander = tr.querySelector(".expander");
+    if (expander) expander.addEventListener("click", (event) => {
+      event.stopPropagation();
+      toggleExpand(tr, m);
+    });
+    tr.addEventListener("click", (event) => {
+      if (event.target.tagName === "INPUT") return;
+      document.querySelectorAll("tr.selected").forEach((el) => el.classList.remove("selected"));
+      tr.classList.add("selected");
+      showDetail(m.id);
+    });
+    rowsEl.appendChild(tr);
+    if (expanded.has(m.id) && details.has(m.id)) {
+      tr.insertAdjacentHTML("afterend", layerRowsHtml(m, details.get(m.id)));
+    }
+  }
+  if (!visible) rowsEl.innerHTML = `<tr><td colspan="8" style="color:#888">no materials match</td></tr>`;
+  rowsEl.querySelectorAll("input[data-layer]").forEach((input) => bindLayerCheckbox(input));
+  setStatus(`${visible} materials`);
+}
+
+function toggleExpand(tr, m) {
+  if (expanded.has(m.id)) { expanded.delete(m.id); }
+  else { expanded.add(m.id); }
+  applyModel();   // rerender includes child rows below
+}
+
+function layerRowsHtml(m, detail) {
+  return detail.layers.map((layer) => {
+    const chosen = (layerSelections.get(m.id) || new Set()).has(layer.id);
+    return `<tr class="layerrow" data-parent="${esc(m.id)}">` +
+      `<td><input type="checkbox" data-layer="${esc(layer.id)}" data-material="${esc(m.id)}"` +
+      ` title="pick only this layer"${chosen ? " checked" : ""}></td>` +
+      `<td colspan="7">\u251c ${esc(String(layer.id).slice(0, 8))}\u2026 · ${fmt(layer.thick, 0)} mm · \u03bb ${esc(fmt(layer.lambda_value))}</td></tr>`;
+  }).join("");
+}
+
+function bindLayerCheckbox(input) {
+  input.addEventListener("change", () => {
+    const materialId = input.dataset.material;
+    const set = layerSelections.get(materialId) || new Set();
+    input.checked ? set.add(input.dataset.layer) : set.delete(input.dataset.layer);
+    layerSelections.set(materialId, set);
+  });
+}
+
+function toggleFacetDropdown(facetKey, anchor) {
+  const existing = document.querySelector(".facet");
+  if (existing) { existing.remove(); return; }
+  const box = document.createElement("div");
+  box.className = "facet";
+  const values = facetValues(facetKey).map((value) => {
+    const count = allMaterials.filter((m) =>
+      facetKey === "usage" ? m.usage[value] : String(m[facetKey] ?? "") === value).length;
+    const checked = facetSelections[facetKey].has(value);
+    const label = facetKey === "usage" ? ((USAGE_LABELS[lang] || USAGE_LABELS.en)[value] || value) : value;
+    return `<label><input type="checkbox" data-value="${esc(value)}"${checked ? " checked" : ""}> ${esc(label)} (${count})</label>`;
+  }).join("");
+  box.innerHTML = `<div class="label">${esc(facetKey)}</div>${values}` +
+    `<div style="margin-top:.3rem"><button class="mock-button" data-clear>clear</button></div>`;
+  anchor.parentElement.appendChild(box);
+  box.addEventListener("change", (event) => {
+    const input = event.target;
+    if (input.dataset.value === undefined) return;
+    input.checked ? facetSelections[facetKey].add(input.dataset.value)
+                  : facetSelections[facetKey].delete(input.dataset.value);
+    applyModel();
+  });
+  box.querySelector("[data-clear]").onclick = () => { facetSelections[facetKey].clear(); box.remove(); applyModel(); };
+}
+
+document.addEventListener("click", (event) => {
+  if (!event.target.closest(".facet") && !event.target.classList.contains("chevron")) {
+    document.querySelector(".facet")?.remove();
+  }
+});
+
+async function showDetail(id) {
+  const m = await api(`/api/materials/${id}`);
+  lastSelectedId = id;
+  $("preview").style.display = "inline-block";
+  const nameLines = Object.entries(m.names)
+    .map(([code, value]) => `${esc(code || "(no lang)")}: ${esc(value)}`).join("<br>");
+  const description = Object.entries(m.descriptions)
+    .map(([code, value]) => `${esc(code || "(no lang)")}: ${esc(value)}`).join("<br>");
+  const groups = [
+    ["names", nameLines], ["descriptions", description],
+    ["company", esc(`${m.company} (${m.company_id})`)], ["category", esc(m.category)], ["type", esc(m.type)],
+    ["\u03bb W/mK", fmt([m.lambda_min, m.lambda_max])], ["thickness mm", fmt([m.thick_min, m.thick_max], 0)],
+    ["U-value", fmt(m.u_value_without)], ["consref", esc(m.consref)], ["design usage", esc(m.designusage)],
+    ["id", esc(m.id)],
+  ];
+  $("detail").innerHTML = groups.filter(([, v]) => v !== null && v !== undefined && v !== "")
+    .map(([k, v]) => `<dt>${esc(k)}</dt><dd>${v}</dd>`).join("");
+}
+
+function openDrawer(detail) {
+  const m = detail;
+  const drawer = $("drawer");
+  drawer.style.display = "block";
+  let inner;
+  if (m.type === "simple" && detail.layers.length) {
+    const total = detail.layers.reduce((sum, l) => sum + (l.thick || 0), 0) || 1;
+    const bars = detail.layers.map((layer) => {
+      const flex = (layer.thick || 0) / total;
+      const chosen = (layerSelections.get(m.id) || new Set()).has(layer.id);
+      return `<div style="flex:${flex};background:#eef;display:flex;align-items:center;justify-content:center;font-size:.75rem">` +
+        `${esc(String(layer.id).slice(0, 8))}\u2026<br>${fmt(layer.thick, 0)} mm<br>` +
+        `<input type="checkbox" data-layer="${esc(layer.id)}" data-material="${esc(m.id)}"${chosen ? " checked" : ""}></div>`;
+    }).join("");
+    inner = `<b>STACK PREVIEW \u2014 ${esc(m.display_name)}</b>` +
+      `<div style="float:right"><button id="close-drawer">close</button></div>` +
+      `<div class="stackbar">${bars}</div>` +
+      `<label style="display:inline"><input type="checkbox" id="all-layers"> pick whole material (all layers)</label>`;
+  } else if (m.type === "btk") {
+    inner = `<b>VARIATIONS \u2014 ${esc(m.display_name)}</b>` +
+      `<div style="float:right"><button id="close-drawer">close</button></div><ul>` +
+      detail.variations.map((v) => `<li>${fmt(v.thick, 0)} mm \u00b7 U ${esc(fmt(v.u_value_without))}</li>`).join("") + `</ul>`;
+  } else {
+    inner = `<b>CONSTRUCTION</b>` +
+      `<div style="float:right"><button id="close-drawer">close</button></div>` +
+      `<div>consref: ${esc(m.consref || "")} \u00b7 designusage: ${esc(m.designusage || "")}</div>` +
+      `<div style="color:#777">assembly composition lives outside this schema record</div>`;
+  }
+  drawer.innerHTML = inner;
+  drawer.querySelector("#close-drawer")?.addEventListener("click", () => (drawer.style.display = "none"));
+  drawer.querySelector("#all-layers")?.addEventListener("change", (event) => {
+    if (event.target.checked) { layerSelections.delete(m.id); applyModel(); }
+  });
+  drawer.querySelectorAll("input[data-layer]").forEach((input) => bindLayerCheckbox(input));
+}
+
+async function pickIds(action) {
+  const items = PickerCore.collectItems(selected, layerSelections);
+  if (!items.length) return setStatus("select at least one material or layer");
+  if (action === "export") {
+    const blob = await api("/api/export", { method: "POST", body: JSON.stringify({ items }) });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url; link.download = "materialsdb_export.ifc"; link.click();
+    URL.revokeObjectURL(url);
+  } else if (action === "pick") {
+    const result = await api("/api/pick", { method: "POST",
+      body: JSON.stringify({ items, replace: $("replace").checked }) });
+    setStatus(`appended ${result.added}, missing ${result.missing.length}`);
+  }
+}
+
+async function openSession() {
+  const path = prompt("path to existing .ifc to append into:");
+  if (!path) return;
+  const result = await api("/api/session/open", { method: "POST", body: JSON.stringify({ path }) });
+  setStatus(`session open: ${result.path}`);
+}
+
+async function saveSession() {
+  const path = prompt("save as (blank = original path):");
+  const result = await api("/api/session/save", { method: "POST", body: path ? JSON.stringify({ path }) : "{}" });
+  setStatus(`saved ${result.saved}`);
+}
+
+async function sendToBonsai() {
+  const items = PickerCore.collectItems(selected, layerSelections);
+  if (!items.length) return setStatus("select at least one material or layer");
+  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_materials", items }),
+  });
+  PickerCore.flash(setStatus, () => $("status").textContent, `sent to ${bonsaiTarget.label() || "?"}: ${result.summary}`);
+}
+
+function setStatus(text) { $("status").textContent = text; return text; }
+
+$("export").onclick = () => pickIds("export").catch((err) => setStatus(err.message));
+$("pick").onclick = () => pickIds("pick").catch((err) => setStatus(err.message));
+$("open").onclick = () => openSession().catch((err) => setStatus(err.message));
+$("save").onclick = () => saveSession().catch((err) => setStatus(err.message));
+$("refresh").onclick = async () => {
+  const report = await api("/api/refresh", { method: "POST", body: "{}" });
+  setStatus(`cache refreshed: ${report.existing} unchanged, ${report.updated.length} updated`);
+};
+$("send-bonsai").onclick = () => sendToBonsai().catch((err) => setStatus(err.message));
+const bonsaiTarget = PickerCore.startTargetPoll(api, $("bonsai-target"), $("send-bonsai"));
+
+let debounceTimer;
+$("text").addEventListener("input", () => {
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(applyModel, 250);
+});
+
+$("lang").addEventListener("change", async () => {
+  lang = $("lang").value;
+  await api("/api/config", { method: "POST", body: JSON.stringify({ lang }) });
+  detailCache.clear();
+  await loadMaterials();
+});
+
+$("country").addEventListener("change", async () => {
+  await api("/api/config", { method: "POST", body: JSON.stringify({ country: $("country").value }) });
+  detailCache.clear();
+  await loadMaterials();
+});
+
+$("preview").onclick = async () => {
+  if (!lastSelectedId) return setStatus("select a material first");
+  openDrawer(await getDetail(lastSelectedId));
+};
+
+document.getElementById("settings-tab").addEventListener("click", (e) => {
+  e.preventDefault();
+  const p = document.getElementById("settings-panel");
+  p.style.display = p.style.display === "none" ? "block" : "none";
+});
+
+loadMaterials();

materialsdb/gui/static/constructions.html

@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>materialsdb constructions</title>
+<style>
+ body { font-family: sans-serif; margin: 1rem; }
+ .top-tabs { display:flex; gap:.5rem; margin-bottom:.75rem; border-bottom:2px solid #ccc; }
+ .top-tabs a { padding:.4rem .9rem; text-decoration:none; color:#333; border-bottom:2px solid transparent; margin-bottom:-2px; }
+ .top-tabs a.active { border-bottom-color:#06c; font-weight:bold; color:#06c; }
+ table { border-collapse: collapse; margin-top: .5rem; }
+ th, td { border: 1px solid #ccc; padding: .25rem .5rem; text-align: left; }
+ input, select { margin-right: .5rem; }
+ button { margin: .5rem .25rem 0 0; }
+ dl dt { font-weight: bold; margin-top: .4rem; }
+ dl dd { margin: 0 0 .3rem 0; }
+ #status { color: #06c; min-height: 1.2em; }
+ .stackbar { display: flex; height: 46px; border: 1px solid #999; margin: .3rem 0; }
+ .stackbar-seg { display: flex; align-items: center; justify-content: center;
+                 font-size: .72rem; text-align: center; border-right: 1px solid #fff; overflow: hidden; }
+ .rs-chip { font-size: .75rem; background: #eef; padding: .1rem .5rem; border-radius: 4px; }
+ tr.rsrow td { background: #f4f4f8; font-style: italic; }
+ .warn { color: #b60; font-weight: bold; cursor: help; }
+ .label { font-size: .7rem; text-transform: uppercase; color: #666; margin-top: .4rem; }
+ .section-toggle { cursor: pointer; user-select: none; font-size: .75rem; font-weight: bold;
+                   text-transform: uppercase; letter-spacing: .03em; color: #666; margin: .45rem 0 .25rem; }
+ .section-toggle:hover { color: #06c; }
+ .chev { display: inline-block; width: 1em; }
+</style>
+</head>
+<body>
+<nav class="top-tabs"><a href="/">Materials</a><a href="/constructions.html" class="active">Constructions</a><a href="#" id="settings-tab">Settings</a></nav>
+<div id="settings-panel" style="display:none;padding:.5rem;border:1px solid #ccc;margin-bottom:.5rem">
+  <label>Language <select id="lang"><option value="en">en</option><option value="fr">fr</option><option value="de">de</option></select></label>
+  <label>Country <select id="country"><option value="CH">CH</option><option value="FR">FR</option></select></label>
+</div>
+<div style="display:flex;gap:1rem;margin:1rem;height:calc(100vh - 2rem)">
+ <div id="saved" style="width:15rem;border-right:1px solid #ccc;padding-right:.6rem;overflow:auto">
+  <h3 class="section-toggle" data-section="saved">Saved <span class="chev">▾</span></h3>
+  <div id="section-saved">
+   <ul id="saved-list" style="list-style:none;padding:0"></ul>
+   <button id="new">new</button><button id="delete">delete</button>
+  </div>
+  <hr>
+  <h4 class="section-toggle" data-section="mdb">Materialsdb (read-only) <span class="chev">▾</span></h4>
+  <div id="section-mdb">
+   <input id="mdb-search" placeholder="search…" style="width:95%">
+   <select id="mdb-company" style="width:95%;margin-top:.25rem"><option value="">all companies</option></select>
+   <ul id="mdb-list" style="list-style:none;padding:0;font-size:.85rem"></ul>
+  </div>
+  <hr>
+  <h4 class="section-toggle" data-section="incoming">Incoming from model <span id="incoming-count" style="color:#888;font-size:.8rem"></span> <span class="chev">▾</span></h4>
+  <div id="section-incoming">
+   <ul id="incoming-list" style="list-style:none;padding:0;font-size:.85rem"></ul>
+  </div>
+  </div>
+  <div id="editor" style="flex:2;display:flex;flex-direction:column">
+   <div id="readonly-ui" style="display:none"></div>
+   <div id="composer-ui" style="display:flex;flex-direction:column;flex:1">
+   <div>
+    <input id="name" placeholder="construction name">
+    <select id="design-usage">
+     <option value="">generic</option>
+     <option value="consDesignForWall">wall</option>
+     <option value="consDesignForRoof">roof</option>
+     <option value="consDesignForFloor">floor</option>
+    </select>
+    <button id="add-layer">add layer</button>
+   </div>
+   <div id="preview" style="margin-top:.5rem"></div>
+   <table><thead><tr>
+     <th>#</th><th>material</th><th>thickness mm</th><th>lambda</th><th>r m2K/W</th><th></th>
+   </tr></thead><tbody id="layers"></tbody></table>
+   <div style="margin-top:.35rem">
+    <button data-move="up">↑ up</button><button data-move="down">↓ down</button>
+    <button id="reverse">↕ reverse</button>
+    <button data-action="remove">remove selected</button>
+   </div>
+   </div>
+  </div>
+ <div id="ucard" style="width:16rem;border-left:1px solid #ccc;padding-left:.6rem">
+  <h3>U-value</h3>
+  <select id="preset"><option>ISO6946</option><option>SIA180</option></select>
+  <div id="u-display" style="font-size:1.6rem">-</div>
+  <div id="formula-line"
+       title="U [W/m²K]: thermal transmittance of the construction&#10;Rsi [m²K/W]: interior surface resistance (from the selected preset)&#10;dᵢ [m]: thickness of layer i&#10;λᵢ [W/(m·K)]: thermal conductivity of layer i&#10;Rse [m²K/W]: exterior surface resistance (from the selected preset)&#10;Layers without a lambda value are excluded and listed as warnings."
+       style="font-size:.72rem;color:#555;cursor:help;margin-top:.2rem">
+   U = 1/(Rsi + Σ dᵢ/λᵢ + Rse)
+  </div>
+
+  <div class="label" style="margin-top:.3rem">LAYERS</div>
+  <dl id="contributions"></dl>
+  <div id="warnings" style="color:#b60"></div>
+  <hr>
+  <button id="save">save</button>
+  <button id="export-ifc">export .ifc</button>
+  <button id="append-session">append to session</button>
+  <button id="send-bonsai" disabled>send to:</button>
+  <select id="bonsai-target" style="display:none"></select>
+  <p id="status"></p>
+ </div>
+</div>
+<script>window.MATERIALSDB_TOKEN = "__TOKEN__";</script>
+<script src="/picker-core.js"></script>
+<script src="/app-constructions.js"></script>
+</body>
+</html>

materialsdb/gui/static/index.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>materialsdb picker</title>
+<style>
+ body { font-family: sans-serif; margin: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; }
+ .top-tabs { display:flex; gap:.5rem; width:100%; margin-bottom:.5rem; border-bottom:2px solid #ccc; }
+ .top-tabs a { padding:.4rem .9rem; text-decoration:none; color:#333; border-bottom:2px solid transparent; margin-bottom:-2px; }
+ .top-tabs a.active { border-bottom-color:#06c; font-weight:bold; color:#06c; }
+ #left { flex: 3; } #right { flex: 2; }
+ table { border-collapse: collapse; width: 100%; }
+ th, td { border: 1px solid #ccc; padding: .25rem .5rem; text-align: left; cursor: pointer; }
+ tr.selected { background: #eef; }
+ aside { position: sticky; top: 1rem; }
+ dl dt { font-weight: bold; margin-top: .4rem; }
+ label { display: block; margin-top: .5rem; }
+ input, select { margin-right: .5rem; }
+ button { margin: .5rem .25rem 0 0; }
+ #status { color: #06c; min-height: 1.2em; }
+ .facet { position:absolute; background:#fff; border:1px solid #999; padding:.35rem; z-index:5; max-height:14rem; overflow:auto; }
+ thead th { position: relative; }
+ tr.layerrow td { padding-left: 2rem; color: #555; background: #fafcff; }
+ #drawer { border-top: 2px solid #99c; padding: .5rem; background: #fdfdff; }
+ .stackbar { display: flex; height: 44px; border: 1px solid #999; margin: .3rem 0; }
+</style>
+</head>
+<body>
+<nav class="top-tabs"><a href="/" class="active">Materials</a><a href="/constructions.html">Constructions</a><a href="#" id="settings-tab">Settings</a></nav>
+<div id="settings-panel" style="display:none;width:100%;padding:.5rem;border:1px solid #ccc;margin-bottom:.5rem">
+  <label>Language <select id="lang"><option value="en">en</option><option value="fr">fr</option><option value="de">de</option></select></label>
+  <label>Country <select id="country"><option value="CH">CH</option><option value="FR">FR</option></select></label>
+</div>
+<div id="left">
+ <div>
+   <input id="text" placeholder="live search…" style="min-width:16rem">
+  <button id="export">export .ifc</button>
+  <button id="open">open session…</button>
+  <button id="pick">append selected</button>
+  <label style="display:inline">replace <input type="checkbox" id="replace"></label>
+  <button id="save">save session</button>
+  <button id="refresh">refresh cache</button>
+  <button id="send-bonsai" disabled>send to:</button>
+  <select id="bonsai-target" style="display:none"></select>
+ </div>
+ <p id="status"></p>
+ <table><thead><tr id="header-row"></tr></thead>
+ <tbody id="rows"></tbody></table>
+</div>
+<aside id="right"><h3>detail <button id="preview" style="display:none;float:right">preview stack</button></h3><dl id="detail"></dl></aside>
+<div id="drawer" style="display:none;flex-basis:100%"></div>
+<script>window.MATERIALSDB_TOKEN = "__TOKEN__";</script>
+<script src="/picker-core.js"></script>
+<script src="/app.js"></script>
+</body>
+</html>