@slexkit/mcp 0.5.0 → 0.5.2

package/dist/data/llms-full.txt

@@ -1175,24 +1175,69 @@ Use `dist/custom-elements.json` for exact types and full descriptions. Use attri
 
 ---
 
-# Artifact Shared JSON Lab
+# Artifact Shared State Lab
 
 Source: site/content/examples/cross-doc-state-lab/en-US.md
 
-# Artifact Shared JSON Lab
+# Artifact Shared State Lab
 
-The input publishes a JSON string through `slex.shared`; a subscription reflects the artifact-local value without sharing DOM or module globals.
+Change the name, font size, or color in the control panel. The two independent panels below update through shared JSON.
+
+## Control panel
+
+```slex
+<slex-card title="Control panel">
+  <slex-grid columns="3">
+    <slex-input id="name" label="Display name" value="SlexKit"></slex-input>
+    <slex-slider id="size" label="Font size" min="12" max="30" value="18" unit="px"></slex-slider>
+    <slex-select id="color" label="Text color"><option value="blue">Blue</option><option value="green">Green</option><option value="orange">Orange</option></slex-select>
+  </slex-grid>
+</slex-card>
+<script type="module">
+  const get = id => slex.root.querySelector(`#${id}`);
+  const controls = ["name", "size", "color"].map(get);
+  const publish = () => slex.shared.set("profile", { name: get("name").value, size: Number(get("size").value), color: get("color").value });
+  controls.forEach(control => control.addEventListener("input", publish));
+  publish();
+  slex.onDispose(() => controls.forEach(control => control.removeEventListener("input", publish)));
+</script>
+```
+
+## Live preview
+
+This panel subscribes to the shared value.
 
 ```slex
-<slex-card title="Artifact Shared JSON Lab"><slex-input id="name" label="Shared name" value="SlexKit"></slex-input><slex-text id="mirror"></slex-text></slex-card>
+<slex-card title="Live preview"><slex-text id="message"></slex-text></slex-card>
 <script type="module">
-  const input = slex.root.querySelector("#name"); const mirror = slex.root.querySelector("#mirror");
-  const publish = () => slex.shared.set("name", input.value); const unsubscribe = slex.shared.subscribe("name", (value) => { mirror.text = String(value ?? ""); });
-  input.addEventListener("input", publish); publish(); slex.onDispose(() => { input.removeEventListener("input", publish); unsubscribe(); });
+  const message = slex.root.querySelector("#message");
+  const stop = slex.shared.subscribe("profile", profile => {
+    if (!profile) return;
+    message.text = String(profile.name);
+    message.size = Number(profile.size);
+    message.color = ({ blue: "#2563eb", green: "#15803d", orange: "#c2410c" })[profile.color] || "#2563eb";
+  });
+  slex.onDispose(stop);
 </script>
 ```
 
-The unsubscribe function and input listener are both released through `slex.onDispose` when this module scope is replaced.
+## Observer panel
+
+A second independent fence subscribes to the same JSON.
+
+```slex
+<slex-card title="Observer panel"><slex-grid columns="2"><slex-stat id="nameValue" label="Current name"></slex-stat><slex-stat id="sizeValue" label="Font size" unit="px"></slex-stat></slex-grid></slex-card>
+<script type="module">
+  const stop = slex.shared.subscribe("profile", profile => {
+    if (!profile) return;
+    slex.root.querySelector("#nameValue").value = String(profile.name);
+    slex.root.querySelector("#sizeValue").value = Number(profile.size);
+  });
+  slex.onDispose(stop);
+</script>
+```
+
+The fences share JSON only, not DOM nodes or JavaScript globals. Subscriptions and listeners are cleaned up on disposal.
 
 ---
 
@@ -1232,18 +1277,25 @@ Source: site/content/examples/baud-rate-calculator/en-US.md
 
 # Baud Rate Error Calculator
 
-Enter a peripheral clock and divider; the module computes baud rate and error against a 115200 target.
+Enter a peripheral clock, target baud rate, and integer divider. The module calculates the actual baud rate and error using 16× oversampling.
 
 ```slex
-<slex-card title="Baud Rate Error Calculator"><slex-grid columns="2"><slex-input id="clock" type="number" label="Peripheral clock" unit="MHz" value="48"></slex-input><slex-input id="divider" type="number" label="Divider" value="26"></slex-input></slex-grid><slex-stat id="result" label="Actual baud / error"></slex-stat></slex-card>
+<slex-card title="Baud Rate Error Calculator"><slex-grid columns="3"><slex-input id="clock" type="number" label="Peripheral clock" unit="MHz" value="48" min="0"></slex-input><slex-input id="divider" type="number" label="Divider" value="26" min="1" step="1"></slex-input><slex-input id="target" type="number" label="Target baud" value="115200" min="1"></slex-input></slex-grid><slex-stat id="result" label="Actual baud / error"></slex-stat></slex-card>
 <script type="module">
-  const clock = slex.root.querySelector("#clock"); const divider = slex.root.querySelector("#divider"); const result = slex.root.querySelector("#result");
-  const update = () => { const baud = Number(clock.value) * 1e6 / (16 * Number(divider.value)); const error = (baud / 115200 - 1) * 100; result.value = `${baud.toFixed(0)} / ${error.toFixed(2)}%`; };
-  clock.addEventListener("input", update); divider.addEventListener("input", update); update(); slex.onDispose(() => { clock.removeEventListener("input", update); divider.removeEventListener("input", update); });
+  const fields = ["clock", "divider", "target"].map(id => slex.root.querySelector(`#${id}`));
+  const result = slex.root.querySelector("#result");
+  const update = () => {
+    const [clock, divider, target] = fields.map(field => Number(field.value));
+    if (!(clock > 0 && target > 0 && Number.isInteger(divider) && divider > 0)) { result.value = "Enter valid parameters"; return; }
+    const baud = clock * 1e6 / (16 * divider);
+    result.value = `${baud.toFixed(0)} / ${((baud / target - 1) * 100).toFixed(2)}%`;
+  };
+  fields.forEach(field => field.addEventListener("input", update)); update();
+  slex.onDispose(() => fields.forEach(field => field.removeEventListener("input", update)));
 </script>
 ```
 
-Input values are read from live control properties, and the calculated baud/error values are written to the two stat elements.
+Input values are read from live control properties, and the calculated baud rate and error appear in one stat.
 
 ---
 
@@ -1253,13 +1305,40 @@ Source: site/content/examples/tabs-and-branching/en-US.md
 
 # Branching: Mode Selector
 
-A native select changes which result branch is visible using ordinary DOM state and events.
+Choose a length, weight, or temperature conversion. The input and result update with the selected mode.
 
 ```slex
-<section><h2>Branching: Mode Selector</h2><details open><summary>First section</summary><p>Unsupported compound widgets use semantic native HTML.</p></details><details><summary>Second section</summary><p>Interaction uses ordinary JavaScript and ARIA.</p></details></section>
+<slex-card title="Unit conversion">
+  <slex-select id="mode" label="Conversion mode"><option value="length">Centimeters → meters</option><option value="weight">Kilograms → pounds</option><option value="temperature">Celsius → Fahrenheit</option></slex-select>
+  <slex-input id="amount" type="number" label="Value (cm)" value="100"></slex-input>
+  <slex-stat id="result" label="Result"></slex-stat>
+  <slex-text id="description"></slex-text>
+</slex-card>
+<script type="module">
+  const mode = slex.root.querySelector("#mode");
+  const amount = slex.root.querySelector("#amount");
+  const result = slex.root.querySelector("#result");
+  const description = slex.root.querySelector("#description");
+  const modes = {
+    length: { label: "Value (cm)", description: "Divide centimeters by 100 to obtain meters.", convert: n => `${(n / 100).toFixed(2)} m` },
+    weight: { label: "Value (kg)", description: "Multiply kilograms by 2.20462 to obtain pounds.", convert: n => `${(n * 2.20462).toFixed(2)} lb` },
+    temperature: { label: "Value (°C)", description: "Multiply Celsius by 9/5, then add 32.", convert: n => `${(n * 9 / 5 + 32).toFixed(1)} °F` },
+  };
+  const update = () => {
+    const selected = modes[mode.value] || modes.length;
+    const number = amount.value === "" ? NaN : Number(amount.value);
+    amount.label = selected.label;
+    description.text = selected.description;
+    result.value = Number.isFinite(number) ? selected.convert(number) : "Enter a number";
+  };
+  mode.addEventListener("change", update);
+  amount.addEventListener("input", update);
+  update();
+  slex.onDispose(() => { mode.removeEventListener("change", update); amount.removeEventListener("input", update); });
+</script>
 ```
 
-All branches remain ordinary HTML controlled by a native event listener that is removed on disposal.
+Native events drive the mode and input value; listeners are removed when the document is disposed.
 
 ---
 
@@ -1269,18 +1348,37 @@ Source: site/content/examples/roi-estimator/en-US.md
 
 # Build vs Buy Decision
 
-Compare a one-time build cost with a recurring monthly vendor price over a chosen horizon.
+Compare feature fit, cost, delivery time, and vendor risk. The scores are illustrative.
 
 ```slex
-<slex-card title="Build vs Buy Decision"><slex-grid columns="3"><slex-input id="build" type="number" label="Build cost" value="120000"></slex-input><slex-input id="monthly" type="number" label="Buy per month" value="6500"></slex-input><slex-slider id="months" label="Horizon" unit="months" min="1" max="60" value="24"></slex-slider></slex-grid><slex-stat id="result" label="Lower-cost option"></slex-stat></slex-card>
+<slex-card title="Build vs Buy Decision">
+  <slex-select id="scope" label="Function role"><option value="core">Core business</option><option value="non-core">Supporting function</option></slex-select>
+  <slex-grid columns="2">
+    <slex-card title="Build"><slex-slider id="buildFit" label="Feature fit" min="0" max="100" step="5" value="60"></slex-slider><slex-slider id="buildCost" label="Cost score (lower is better)" min="0" max="100" step="5" value="80"></slex-slider><slex-slider id="buildTime" label="Time to launch (months)" min="1" max="12" value="6"></slex-slider></slex-card>
+    <slex-card title="Buy"><slex-slider id="buyFit" label="Feature fit" min="0" max="100" step="5" value="85"></slex-slider><slex-slider id="buyCost" label="Cost score (lower is better)" min="0" max="100" step="5" value="40"></slex-slider><slex-slider id="buyTime" label="Time to launch (months)" min="1" max="12" value="1"></slex-slider><slex-slider id="buyLock" label="Vendor lock-in risk" min="0" max="100" step="5" value="30"></slex-slider></slex-card>
+  </slex-grid>
+  <slex-grid columns="2"><slex-stat id="buildScore" label="Build score"></slex-stat><slex-stat id="buyScore" label="Buy score"></slex-stat></slex-grid>
+  <slex-text id="advice" label="Decision notes"></slex-text>
+</slex-card>
 <script type="module">
-  const fields = ["build", "monthly", "months"].map(id => slex.root.querySelector(`#${id}`)); const result = slex.root.querySelector("#result");
-  const update = () => { const [build, monthly, months] = fields.map(field => Number(field.value)); const buy = monthly * months; result.value = build <= buy ? `Build saves ${(buy - build).toLocaleString()}` : `Buy saves ${(build - buy).toLocaleString()}`; };
-  fields.forEach(field => field.addEventListener("input", update)); update(); slex.onDispose(() => fields.forEach(field => field.removeEventListener("input", update)));
+  const get = id => slex.root.querySelector(`#${id}`);
+  const ids = ["scope", "buildFit", "buildCost", "buildTime", "buyFit", "buyCost", "buyTime", "buyLock"];
+  const copy = {"close": "The scores are close; investigate both options further.", "buildWins": "Build scores higher", "buyWins": "Buy scores higher", "coreNote": "For core capabilities, also consider long-term control.", "noncoreNote": "For supporting capabilities, also consider maintenance cost."};
+  const update = () => {
+    const value = id => Number(get(id).value);
+    const timeScore = id => Math.max(0, 100 - value(id) * 10);
+    const build = (value("buildFit") + 100 - value("buildCost") + timeScore("buildTime")) / 3;
+    const buy = (value("buyFit") + 100 - value("buyCost") + timeScore("buyTime") - value("buyLock") * 0.5) / 3;
+    get("buildScore").value = build.toFixed(1); get("buyScore").value = buy.toFixed(1);
+    const verdict = Math.abs(build - buy) < 10 ? copy.close : build > buy ? copy.buildWins : copy.buyWins;
+    get("advice").text = `${verdict} ${get("scope").value === "core" ? copy.coreNote : copy.noncoreNote}`;
+  };
+  ids.forEach(id => get(id).addEventListener("input", update)); update();
+  slex.onDispose(() => ids.forEach(id => get(id).removeEventListener("input", update)));
 </script>
 ```
 
-The recommendation is derived locally from the four inputs, and listener cleanup follows the isolated module lifecycle.
+These adjustable example scores do not replace a real budget, procurement, or risk assessment.
 
 ---
 
@@ -1370,10 +1468,51 @@ Source: site/content/examples/project-dashboard/en-US.md
 The dashboard composes cards, grids, controls, and stats while one JavaScript update function coordinates the displayed project metrics.
 
 ```slex
-<slex-card title="Project Dashboard"><slex-grid columns="2"><slex-input id="left" label="Value A" value="10"></slex-input><slex-slider id="right" label="Value B" min="0" max="100" value="20"></slex-slider></slex-grid><slex-stat id="result" label="Result"></slex-stat></slex-card>
+<slex-section title="Sprint dashboard" subtitle="Adjust the inputs to explore progress, quality, and team load.">
+  <slex-grid columns="3">
+    <slex-card title="Sprint progress">
+      <slex-slider id="progress" label="Completion" value="72" min="0" max="100" unit="%"></slex-slider>
+      <slex-progress id="progressBar" label="Completion"></slex-progress>
+      <slex-select id="scope" label="Scope status"><option value="on-track">On track</option><option value="at-risk">At risk</option><option value="off-track">Off track</option></slex-select>
+      <slex-badge id="scopeBadge"></slex-badge>
+    </slex-card>
+    <slex-card title="Quality">
+      <slex-input id="bugs" type="number" min="0" label="Total defects" value="12"></slex-input>
+      <slex-input id="resolved" type="number" min="0" label="Resolved" value="9"></slex-input>
+      <slex-stat id="remaining" label="Remaining defects"></slex-stat>
+      <slex-progress id="fixRate" label="Resolution rate"></slex-progress>
+    </slex-card>
+    <slex-card title="Team health">
+      <slex-input id="workload" type="number" min="0" label="Workload" value="8"></slex-input>
+      <slex-input id="team" type="number" min="1" label="Team members" value="6"></slex-input>
+      <slex-stat id="load" label="Load index" unit="%"></slex-stat>
+      <slex-text id="note"></slex-text>
+    </slex-card>
+  </slex-grid>
+  <slex-card title="Task details"><slex-table id="tasks"></slex-table></slex-card>
+</slex-section>
 <script type="module">
-  const left = slex.root.querySelector("#left"); const right = slex.root.querySelector("#right"); const result = slex.root.querySelector("#result"); const update = () => { result.value = Number(left.value) + right.valueAsNumber; };
-  left.addEventListener("input", update); right.addEventListener("input", update); update(); slex.onDispose(() => { left.removeEventListener("input", update); right.removeEventListener("input", update); });
+  const get = id => slex.root.querySelector(`#${id}`);
+  const controls = ["progress", "scope", "bugs", "resolved", "workload", "team"].map(get);
+  const statuses = { "on-track": ["On track", "success"], "at-risk": ["At risk", "warning"], "off-track": ["Off track", "destructive"] };
+  const update = () => {
+    const bugs = Math.max(0, Number(get("bugs").value) || 0);
+    const resolved = Math.min(bugs, Math.max(0, Number(get("resolved").value) || 0));
+    const team = Math.max(1, Number(get("team").value) || 1);
+    const load = Math.min(100, Math.max(0, Number(get("workload").value) || 0) / team * 20);
+    const [label, tone] = statuses[get("scope").value] || statuses["on-track"];
+    get("progressBar").value = Number(get("progress").value);
+    get("scopeBadge").label = label; get("scopeBadge").tone = tone;
+    get("remaining").value = bugs - resolved;
+    get("fixRate").value = bugs ? resolved / bugs * 100 : 0;
+    get("load").value = load.toFixed(1);
+    get("note").text = load > 80 ? "Team load is high; consider redistributing work." : "Team load is within the healthy range.";
+  };
+  get("tasks").columns = ["Task", "Owner", "Status"];
+  get("tasks").rows = [["API refactor", "Alex", "Done"], ["UI components", "Lee", "In progress"], ["Integration tests", "Sam", "Review"]];
+  controls.forEach(control => control.addEventListener("input", update));
+  update();
+  slex.onDispose(() => controls.forEach(control => control.removeEventListener("input", update)));
 </script>
 ```
 
@@ -1390,12 +1529,126 @@ Source: site/content/examples/rc-low-pass-filter/en-US.md
 The cutoff calculation is ordinary JavaScript: \(f_c = 1 / (2\pi RC)\). Values are read from live custom-element properties.
 
 ```slex
-<slex-card title="RC Low-Pass Filter"><slex-grid columns="2"><slex-input id="resistance" type="number" label="Resistance" unit="kΩ" value="10"></slex-input><slex-input id="capacitance" type="number" label="Capacitance" unit="nF" value="100"></slex-input></slex-grid><slex-stat id="cutoff" label="Cutoff frequency" unit="Hz"></slex-stat></slex-card>
+<div class="rc-filter-demo">
+  <div id="inputs" class="rc-filter-grid">
+    <div class="rc-filter-field">
+      <slex-input id="r" label="Resistance R" type="engineering" value="10kΩ" placeholder="10kΩ"></slex-input>
+      <slex-slider id="rControl" label="R" value="10000" min="1000" max="100000" step="1000" unit="Ω"></slex-slider>
+    </div>
+    <div class="rc-filter-field">
+      <slex-input id="c" label="Capacitance C" type="engineering" value="100nF" placeholder="100nF"></slex-input>
+      <slex-slider id="cControl" label="C" value="100" min="10" max="1000" step="10" unit="nF"></slex-slider>
+    </div>
+    <div class="rc-filter-field">
+      <slex-input id="f" label="Input frequency f" type="engineering" value="1kHz" placeholder="1kHz"></slex-input>
+      <slex-slider id="fControl" label="f" value="1000" min="0" max="5000" step="10" unit="Hz"></slex-slider>
+    </div>
+    <div class="rc-filter-field">
+      <slex-input id="vin" label="Input amplitude Vin" type="engineering" value="1V" placeholder="1V"></slex-input>
+      <slex-slider id="vinControl" label="Vin" value="1" min="0" max="5" step="0.1" unit="V"></slex-slider>
+    </div>
+  </div>
+
+  <p id="inputHint" class="rc-filter-muted">Try 4.7kΩ, 220nF, 10kHz, and 500mV. value keeps the source text; number drives the calculation.</p>
+
+  <div id="outputs" class="rc-filter-grid">
+    <slex-stat id="tau" label="Time constant" unit="ms" animate-initial></slex-stat>
+    <slex-stat id="cutoff" label="Cutoff frequency" unit="Hz" animate-initial></slex-stat>
+    <slex-stat id="gain" label="Magnitude gain" animate-initial></slex-stat>
+    <slex-stat id="output" label="Output amplitude" unit="V" animate-initial></slex-stat>
+  </div>
+
+  <div id="formula" class="rc-filter-formula"></div>
+  <div class="rc-filter-actions">
+    <p id="status" class="rc-filter-muted"></p>
+    <slex-button id="reset" label="Reset" variant="secondary"></slex-button>
+  </div>
+</div>
+
+<style>
+  .rc-filter-demo { display: grid; gap: 1rem; min-width: 0; }
+  .rc-filter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
+  @media (min-width: 600px) { .rc-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+  .rc-filter-field { display: grid; align-content: start; gap: 1rem; min-width: 0; }
+  .rc-filter-formula { border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); padding: .625rem .75rem; font-family: var(--font-mono, monospace); font-weight: 600; line-height: 1.7; }
+  .rc-filter-muted { margin: 0; color: var(--muted-foreground); font-size: .875rem; line-height: 1.625; }
+  .rc-filter-actions { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; }
+  #status { flex: 1 1 24rem; min-width: 0; }
+  @media (max-width: 599px) {
+    .rc-filter-actions { flex-direction: column; align-items: stretch; }
+    #status { flex: 0 1 auto; }
+    #reset { width: 100%; }
+  }
+</style>
+
 <script type="module">
-  const r = slex.root.querySelector("#resistance"); const c = slex.root.querySelector("#capacitance"); const cutoff = slex.root.querySelector("#cutoff");
-  const update = () => { cutoff.value = (1 / (2 * Math.PI * Number(r.value) * 1e3 * Number(c.value) * 1e-9)).toFixed(1); };
-  r.addEventListener("input", update); c.addEventListener("input", update); update();
-  slex.onDispose(() => { r.removeEventListener("input", update); c.removeEventListener("input", update); });
+  const byId = (id) => slex.root.querySelector(`#${id}`);
+  const inputs = {
+    r: byId("r"),
+    c: byId("c"),
+    f: byId("f"),
+    vin: byId("vin"),
+  };
+  const sliders = {
+    r: byId("rControl"),
+    c: byId("cControl"),
+    f: byId("fControl"),
+    vin: byId("vinControl"),
+  };
+  const defaults = { r: "10kΩ", c: "100nF", f: "1kHz", vin: "1V" };
+  const units = { r: "Ω", c: "nF", f: "Hz", vin: "V" };
+  const sliderScale = { r: 1, c: 1e9, f: 1, vin: 1 };
+  const format = (value, digits) => Number.isFinite(value) ? value.toFixed(digits) : "Invalid";
+
+  const update = (origin) => {
+    const r = inputs.r.valueAsNumber;
+    const c = inputs.c.valueAsNumber;
+    const f = inputs.f.valueAsNumber;
+    const vin = inputs.vin.valueAsNumber;
+    const valid = [r, c, f, vin].every(Number.isFinite) && r > 0 && c > 0 && f >= 0 && vin >= 0;
+    const tau = valid ? r * c : NaN;
+    const cutoff = valid && tau > 0 ? 1 / (2 * Math.PI * tau) : NaN;
+    const gain = valid && cutoff > 0 ? 1 / Math.sqrt(1 + (f / cutoff) ** 2) : NaN;
+    const gainDb = Number.isFinite(gain) && gain > 0 ? 20 * Math.log10(gain) : NaN;
+    const output = Number.isFinite(gain) ? vin * gain : NaN;
+
+    if (origin !== "slider") {
+      for (const key of Object.keys(sliders)) {
+        const number = inputs[key].valueAsNumber;
+        if (Number.isFinite(number)) sliders[key].value = String(number * sliderScale[key]);
+      }
+    }
+
+    byId("tau").value = format(tau * 1000, 3);
+    byId("cutoff").value = format(cutoff, 2);
+    byId("gain").value = format(gain, 3);
+    byId("output").value = format(output, 3);
+    byId("formula").textContent = `|H(f)| = ${format(gain, 3)}, Gain = ${format(gainDb, 2)} dB`;
+    byId("status").textContent = valid
+      ? "Low frequencies pass through; higher frequencies are attenuated by the first-order RC network."
+      : "Check the engineering input format. R and C must be greater than 0; frequency and input amplitude cannot be negative.";
+  };
+
+  const onInput = () => update("input");
+  const sliderHandlers = Object.fromEntries(Object.keys(sliders).map((key) => [key, () => {
+    inputs[key].value = `${sliders[key].value}${units[key]}`;
+    update("slider");
+  }]));
+  const reset = () => {
+    for (const [key, value] of Object.entries(defaults)) inputs[key].value = value;
+    update("input");
+  };
+
+  Object.values(inputs).forEach((control) => control.addEventListener("input", onInput));
+  for (const [key, control] of Object.entries(sliders)) control.addEventListener("input", sliderHandlers[key]);
+  byId("reset").addEventListener("click", reset);
+  update("input");
+
+  slex.onDispose(() => {
+    Object.values(inputs).forEach((control) => control.removeEventListener("input", onInput));
+    for (const [key, control] of Object.entries(sliders)) control.removeEventListener("input", sliderHandlers[key]);
+    byId("reset").removeEventListener("click", reset);
+  });
 </script>
 ```
 
@@ -1412,31 +1665,27 @@ Source: site/content/examples/search-filter-table/en-US.md
 The search input filters an in-memory array and assigns the matching rows to the table's live `.rows` property.
 
 ```slex
-<slex-card title="Search and Filter Table"><slex-input id="query" label="Filter"></slex-input><slex-table id="results"></slex-table></slex-card>
+<slex-card title="Search and Filter Table"><slex-input id="query" label="Filter"></slex-input><slex-table id="results"></slex-table><div id="details"></div></slex-card>
 <script type="module">
   const rows = [{ name: "Ada", role: "Engineer" }, { name: "Lin", role: "Designer" }]; const query = slex.root.querySelector("#query"); const table = slex.root.querySelector("#results");
-  table.columns = [{ key: "name", label: "Name" }, { key: "role", label: "Role" }]; const update = () => { const needle = query.value.toLowerCase(); table.rows = rows.filter((row) => Object.values(row).some((value) => value.toLowerCase().includes(needle))); };
+  const details = slex.root.querySelector("#details");
+  table.columns = [{ key: "name", label: "Name" }, { key: "role", label: "Role" }];
+  const update = () => {
+    const needle = query.value.toLowerCase();
+    const matches = rows.filter((row) => Object.values(row).some((value) => value.toLowerCase().includes(needle)));
+    table.rows = matches;
+    details.replaceChildren(...matches.map((row) => {
+      const item = document.createElement("slex-collapsible");
+      item.setAttribute("trigger", `${row.name} — details`);
+      item.setAttribute("content", `Role: ${row.role}`);
+      return item;
+    }));
+  };
   query.addEventListener("input", update); update(); slex.onDispose(() => query.removeEventListener("input", update));
 </script>
 ```
 
-Table data is assigned as arrays through properties rather than encoded into HTML attributes, and text cells are not parsed as HTML.
-
----
-
-# Semantic Details Layout
-
-Source: site/content/examples/tech-selection-evaluator/en-US.md
-
-# Semantic Details Layout
-
-This fragment uses semantic native `<section>` and `<details>` elements for a compound disclosure layout that needs no custom component or script.
-
-```slex
-<section><h2>Semantic Details Layout</h2><details open><summary>First section</summary><p>Unsupported compound widgets use semantic native HTML.</p></details><details><summary>Second section</summary><p>Native disclosure behavior needs no custom script.</p></details></section>
-```
-
-Native disclosure behavior remains inside this fence's isolated document and requires no hidden JavaScript state.
+Table data is assigned as arrays through properties rather than encoded into HTML attributes. Expand a matching row's details below the table; text is not parsed as HTML.
 
 ---
 
@@ -1449,7 +1698,7 @@ Source: site/content/examples/salary-calculator/en-US.md
 Adjust the contribution rate to estimate the employee deduction and remaining pay.
 
 ```slex
-<slex-card title="Social Insurance Calculator"><slex-grid columns="2"><slex-input id="salary" type="number" label="Monthly salary" value="18000"></slex-input><slex-slider id="rate" label="Employee contribution" unit="%" min="0" max="30" value="10.5"></slex-slider></slex-grid><slex-grid columns="2"><slex-stat id="deduction" label="Deduction"></slex-stat><slex-stat id="remaining" label="Remaining before tax"></slex-stat></slex-grid></slex-card>
+<slex-card title="Social Insurance Calculator"><slex-grid columns="2"><slex-input id="salary" type="number" label="Monthly salary" value="18000"></slex-input><slex-slider id="rate" label="Employee contribution" unit="%" min="0" max="30" step="0.1" value="10.5"></slex-slider></slex-grid><slex-grid columns="2"><slex-stat id="deduction" label="Deduction"></slex-stat><slex-stat id="remaining" label="Remaining before tax"></slex-stat></slex-grid></slex-card>
 <script type="module">
   const salary = slex.root.querySelector("#salary"); const rate = slex.root.querySelector("#rate"); const deduction = slex.root.querySelector("#deduction"); const remaining = slex.root.querySelector("#remaining");
   const update = () => { const amount = Number(salary.value) * Number(rate.value) / 100; deduction.value = amount.toFixed(2); remaining.value = (Number(salary.value) - amount).toFixed(2); };
@@ -1512,6 +1761,48 @@ Source: `examples/streamdown`.
 
 ---
 
+# Technology Selection Evaluator
+
+Source: site/content/examples/tech-selection-evaluator/en-US.md
+
+# Technology Selection Evaluator
+
+Choose a set of example scores, then adjust each dimension for your team. The weighted result is an illustration, not an objective ranking of frameworks.
+
+```slex
+<slex-card title="Technology selection">
+  <slex-select id="technology" label="Technology"><option value="react">React</option><option value="vue">Vue</option><option value="svelte">Svelte</option><option value="angular">Angular</option></slex-select>
+  <slex-grid columns="2">
+    <slex-slider id="performance" label="Performance (30%)" value="85" min="0" max="100" step="5"></slex-slider>
+    <slex-slider id="ecosystem" label="Ecosystem (25%)" value="95" min="0" max="100" step="5"></slex-slider>
+    <slex-slider id="learning" label="Learning (20%)" value="70" min="0" max="100" step="5"></slex-slider>
+    <slex-slider id="maintenance" label="Maintenance (25%)" value="80" min="0" max="100" step="5"></slex-slider>
+  </slex-grid>
+  <slex-stat id="score" label="Weighted score" unit="points"></slex-stat>
+  <slex-text id="recommendation"></slex-text>
+</slex-card>
+<script type="module">
+  const get = id => slex.root.querySelector(`#${id}`);
+  const ids = ["performance", "ecosystem", "learning", "maintenance"];
+  const presets = { react: [85, 95, 70, 80], vue: [80, 85, 85, 85], svelte: [95, 70, 90, 90], angular: [80, 80, 60, 75] };
+  const update = () => {
+    const values = ids.map(id => Number(get(id).value));
+    const score = values[0] * 0.3 + values[1] * 0.25 + values[2] * 0.2 + values[3] * 0.25;
+    get("score").value = score.toFixed(1);
+    get("recommendation").text = score >= 85 ? "Example result: strongly recommended" : score >= 75 ? "Example result: recommended" : score >= 60 ? "Example result: worth considering" : "Example result: proceed with caution";
+  };
+  const choose = () => { (presets[get("technology").value] || presets.react).forEach((value, i) => { get(ids[i]).value = value; }); update(); };
+  get("technology").addEventListener("change", choose);
+  ids.forEach(id => get(id).addEventListener("input", update));
+  update();
+  slex.onDispose(() => { get("technology").removeEventListener("change", choose); ids.forEach(id => get(id).removeEventListener("input", update)); });
+</script>
+```
+
+The weights are 30%, 25%, 20%, and 25%. The local sample scores can be adjusted to match your own decision criteria.
+
+---
+
 # Tiptap Editor Integration
 
 Source: site/content/examples/tiptap-host/en-US.md
@@ -1550,11 +1841,16 @@ Source: site/content/examples/form-wizard-steps/en-US.md
 
 ToolHost renders trusted host-side form UI and resolves an explicit submitted or ignored structured result; it is separate from display-only `slex` execution.
 
-```slex
-<section><h2>ToolHost Form Question</h2><details open><summary>First section</summary><p>Unsupported compound widgets use semantic native HTML.</p></details><details><summary>Second section</summary><p>Interaction uses ordinary JavaScript and ARIA.</p></details></section>
+```js
+const handle = renderToolCall({
+  id: "project-form",
+  name: "fill-form",
+  arguments: { fields: [{ name: "name", label: "Project name", type: "text", required: true }] },
+}, container);
+const result = await handle.promise;
 ```
 
-Submission crosses ToolHost's explicit result boundary; arbitrary artifact code cannot impersonate this host workflow.
+The form below is rendered by ToolHost in the host. Submit or ignore it to see the returned structured result.
 
 ---
 
@@ -1567,17 +1863,18 @@ Source: site/content/examples/toolhost-demo/en-US.md
 ToolHost is a host-side tool-call renderer, not an authoring element inside a `slex` payload. The host selects a registered template from a trusted `function_call` name and passes only the call arguments to that template.
 
 ```js
-const output = await renderToolCall(container, {
+const handle = renderToolCall({
   name: "fill-form",
-  callId: item.call_id,
+  id: item.call_id,
   arguments: JSON.parse(item.arguments),
-});
+}, container);
+const output = await handle.promise;
 responsesInput.push({ type: "function_call_output", call_id: item.call_id, output: JSON.stringify(output) });
 ```
 
 ## Tool-call boundary
 
-When an agent emits a `function_call`, the browser host can render it as an inline ToolHost card. `renderToolCall()` resolves only after submit or ignore, then the host writes a `function_call_output` using the original call ID. This workflow does not execute a deployment or other domain action by itself.
+When an agent emits a `function_call`, the browser host can render it as an inline ToolHost card. The returned handle's promise resolves after submit or ignore, then the host writes a `function_call_output` using the original call ID. This workflow does not execute a deployment or other domain action by itself.
 
 ---
 
@@ -1593,13 +1890,13 @@ The module script implements \(V_{out} = V_{in} R_2 / (R_1 + R_2)\) with native
 <slex-card title="Voltage Divider Calculator"><slex-grid columns="3"><slex-input id="vin" type="number" label="Input voltage" value="12"></slex-input><slex-input id="r1" type="number" label="R1" unit="kΩ" value="10"></slex-input><slex-input id="r2" type="number" label="R2" unit="kΩ" value="20"></slex-input></slex-grid><slex-stat id="vout" label="Output voltage" unit="V"></slex-stat></slex-card>
 <script type="module">
   const fields = ["vin", "r1", "r2"].map(id => slex.root.querySelector(`#${id}`)); const vout = slex.root.querySelector("#vout");
-  const update = () => { const [vin, r1, r2] = fields.map(field => Number(field.value)); vout.value = (vin * r2 / (r1 + r2)).toFixed(2); };
+  const update = () => { const [vin, r1, r2] = fields.map(field => Number(field.value)); vout.value = fields.some(field => field.value === "") || !Number.isFinite(vin) || r1 < 0 || r2 < 0 || r1 + r2 <= 0 ? "—" : (vin * r2 / (r1 + r2)).toFixed(2); };
   fields.forEach(field => field.addEventListener("input", update)); update();
   slex.onDispose(() => fields.forEach(field => field.removeEventListener("input", update)));
 </script>
 ```
 
-The three engineering inputs drive one calculation function, which updates output voltage and load-error display properties.
+The three numeric inputs drive one calculation function, which updates the output voltage. Invalid resistor values display a dash.
 
 ---
 
@@ -1882,6 +2179,19 @@ Source: site/content/releases/changelog/en-US.md
 
 All notable changes to SlexKit.
 
+## v0.5.2 - Runtime rendering fixes
+
+### Fixed
+- Preserve explicit text, label, and content attributes when custom elements have no light DOM children.
+- Keep the sandbox's CSP hash in sync with the trusted component layout styles so isolated components render correctly without relaxing the policy.
+- Restore interactive website examples and build adapter demos from pinned local dependencies.
+- Keep grids and their cards aligned in embedded previews, preload sandbox styles, and reduce the documentation site's initial asset size.
+
+## @slexkit/assistant-ui v0.5.1
+
+### Fixed
+- Constrain `@assistant-ui/react-streamdown` to versions compatible with `@assistant-ui/react` 0.14 so a fresh npm install resolves its peer dependencies.
+
 ## v0.5.0 - HTML-first interactive documents
 
 ### Breaking changes

package/dist/data/llms.txt

@@ -1,6 +1,6 @@
 # SlexKit > Markdown-friendly reactive UI runtime for AI output
 
-Version: 0.5.0
+Version: 0.5.2
 
 ## Machine-readable documentation
 
@@ -29,7 +29,7 @@ Version: 0.5.0
 
 ### Examples
 
-- [Artifact Shared JSON Lab](/docs/examples/cross-doc-state-lab.md): Publish and subscribe to bounded JSON through artifact-local slex.shared without sharing DOM or module globals.
+- [Artifact Shared State Lab](/docs/examples/cross-doc-state-lab.md): Synchronize JSON state between three independent fences in the same artifact.
 - [assistant-ui Integration](/docs/examples/assistant-ui-host.md): assistant-ui adapter for rendering explicit slex fences inside Streamdown text message parts.
 - [Baud Rate Error Calculator](/docs/examples/baud-rate-calculator.md): Enter crystal frequency and target baud rate to calculate UART baud rate error percentage and judge communication reliability.
 - [Branching: Mode Selector](/docs/examples/tabs-and-branching.md): Use select to switch the mode state and render different inputs and results.
@@ -41,10 +41,10 @@ Version: 0.5.0
 - [Project Dashboard](/docs/examples/project-dashboard.md): Build an information dashboard with section + grid — covering Sprint progress, quality metrics, and team health with multi-card coordination.
 - [RC Low-Pass Filter](/docs/examples/rc-low-pass-filter.md): A frequency-selective circuit built with a resistor and capacitor — calculate cutoff frequency and gain attenuation at any frequency.
 - [Search and Filter Table](/docs/examples/search-filter-table.md): A search input filters table rows in real time and uses collapsible for row details.
-- [Semantic Details Layout](/docs/examples/tech-selection-evaluator.md): Use native section and details elements when no documented compound custom element matches the content.
 - [Social Insurance Calculator](/docs/examples/salary-calculator.md): Enter a salary and city to calculate China's social insurance breakdown — showing personal contributions, employer contributions, and take-home pay.
 - [Software Project Cost Estimator](/docs/examples/project-cost-estimator.md): Enter team size, development timeline, and per-person cost to calculate total project cost and monthly burn rate.
 - [Streamdown Integration](/docs/examples/streamdown-host.md): A React/Streamdown adapter that takes over explicit slex fences and leaves ordinary Markdown and code blocks to Streamdown.
+- [Technology Selection Evaluator](/docs/examples/tech-selection-evaluator.md): Compare example technology scores across performance, ecosystem, learning, and maintenance.
 - [Tiptap Editor Integration](/docs/examples/tiptap-host.md): A Tiptap CodeBlock adapter that previews explicit slex blocks while preserving ordinary code blocks and Markdown import/export.
 - [ToolHost Form Question](/docs/examples/form-wizard-steps.md): ToolHost renders a form card during a conversation, collects project fields, and submits structured results.
 - [ToolHost Tool Call UI](/docs/examples/toolhost-demo.md): Render a function_call as an inline tool card, then write the submitted result back as function_call_output.

package/dist/data/slexkit-ai-manifest.json

@@ -1,8 +1,8 @@
 {
   "name": "slexkit-ai-docs",
   "packageName": "slexkit",
-  "version": "0.5.0",
-  "generatedAt": "2026-11-10T17:23:19.682Z",
+  "version": "0.5.2",
+  "generatedAt": "2026-11-11T04:08:49.598Z",
   "authoring": {
     "sourceType": "html",
     "fenceLanguage": "slex",
@@ -12,14 +12,14 @@
     "llms.txt": {
       "path": "/llms.txt",
       "title": "llms.txt",
-      "summary": "Version: 0.5.0",
-      "hash": "02f8c273"
+      "summary": "Version: 0.5.2",
+      "hash": "797bc6d5"
     },
     "llms-full.txt": {
       "path": "/llms-full.txt",
       "title": "llms-full.txt",
       "summary": "Source: site/content/components/accordion/en-US.md",
-      "hash": "191d93a3"
+      "hash": "8b7cde2c"
     },
     "llms-components.txt": {
       "path": "/llms-components.txt",
@@ -386,13 +386,13 @@
     {
       "id": "examples/cross-doc-state-lab",
       "group": "Examples",
-      "title": "Artifact Shared JSON Lab",
-      "summary": "Publish and subscribe to bounded JSON through artifact-local slex.shared without sharing DOM or module globals.",
+      "title": "Artifact Shared State Lab",
+      "summary": "Synchronize JSON state between three independent fences in the same artifact.",
       "href": "/examples/cross-doc-state-lab",
       "rawHref": "/docs/examples/cross-doc-state-lab.md",
       "sourcePath": "site/content/examples/cross-doc-state-lab/en-US.md",
-      "body": "\n# Artifact Shared JSON Lab\n\nThe input publishes a JSON string through `slex.shared`; a subscription reflects the artifact-local value without sharing DOM or module globals.\n\n```slex\n<slex-card title=\"Artifact Shared JSON Lab\"><slex-input id=\"name\" label=\"Shared name\" value=\"SlexKit\"></slex-input><slex-text id=\"mirror\"></slex-text></slex-card>\n<script type=\"module\">\n  const input = slex.root.querySelector(\"#name\"); const mirror = slex.root.querySelector(\"#mirror\");\n  const publish = () => slex.shared.set(\"name\", input.value); const unsubscribe = slex.shared.subscribe(\"name\", (value) => { mirror.text = String(value ?? \"\"); });\n  input.addEventListener(\"input\", publish); publish(); slex.onDispose(() => { input.removeEventListener(\"input\", publish); unsubscribe(); });\n</script>\n```\n\nThe unsubscribe function and input listener are both released through `slex.onDispose` when this module scope is replaced.\n",
-      "hash": "b70938be"
+      "body": "# Artifact Shared State Lab\n\nChange the name, font size, or color in the control panel. The two independent panels below update through shared JSON.\n\n## Control panel\n\n```slex\n<slex-card title=\"Control panel\">\n  <slex-grid columns=\"3\">\n    <slex-input id=\"name\" label=\"Display name\" value=\"SlexKit\"></slex-input>\n    <slex-slider id=\"size\" label=\"Font size\" min=\"12\" max=\"30\" value=\"18\" unit=\"px\"></slex-slider>\n    <slex-select id=\"color\" label=\"Text color\"><option value=\"blue\">Blue</option><option value=\"green\">Green</option><option value=\"orange\">Orange</option></slex-select>\n  </slex-grid>\n</slex-card>\n<script type=\"module\">\n  const get = id => slex.root.querySelector(`#${id}`);\n  const controls = [\"name\", \"size\", \"color\"].map(get);\n  const publish = () => slex.shared.set(\"profile\", { name: get(\"name\").value, size: Number(get(\"size\").value), color: get(\"color\").value });\n  controls.forEach(control => control.addEventListener(\"input\", publish));\n  publish();\n  slex.onDispose(() => controls.forEach(control => control.removeEventListener(\"input\", publish)));\n</script>\n```\n\n## Live preview\n\nThis panel subscribes to the shared value.\n\n```slex\n<slex-card title=\"Live preview\"><slex-text id=\"message\"></slex-text></slex-card>\n<script type=\"module\">\n  const message = slex.root.querySelector(\"#message\");\n  const stop = slex.shared.subscribe(\"profile\", profile => {\n    if (!profile) return;\n    message.text = String(profile.name);\n    message.size = Number(profile.size);\n    message.color = ({ blue: \"#2563eb\", green: \"#15803d\", orange: \"#c2410c\" })[profile.color] || \"#2563eb\";\n  });\n  slex.onDispose(stop);\n</script>\n```\n\n## Observer panel\n\nA second independent fence subscribes to the same JSON.\n\n```slex\n<slex-card title=\"Observer panel\"><slex-grid columns=\"2\"><slex-stat id=\"nameValue\" label=\"Current name\"></slex-stat><slex-stat id=\"sizeValue\" label=\"Font size\" unit=\"px\"></slex-stat></slex-grid></slex-card>\n<script type=\"module\">\n  const stop = slex.shared.subscribe(\"profile\", profile => {\n    if (!profile) return;\n    slex.root.querySelector(\"#nameValue\").value = String(profile.name);\n    slex.root.querySelector(\"#sizeValue\").value = Number(profile.size);\n  });\n  slex.onDispose(stop);\n</script>\n```\n\nThe fences share JSON only, not DOM nodes or JavaScript globals. Subscriptions and listeners are cleaned up on disposal.\n",
+      "hash": "8da8e094"
     },
     {
       "id": "examples/assistant-ui-host",
@@ -413,8 +413,8 @@
       "href": "/examples/baud-rate-calculator",
       "rawHref": "/docs/examples/baud-rate-calculator.md",
       "sourcePath": "site/content/examples/baud-rate-calculator/en-US.md",
-      "body": "\n# Baud Rate Error Calculator\n\nEnter a peripheral clock and divider; the module computes baud rate and error against a 115200 target.\n\n```slex\n<slex-card title=\"Baud Rate Error Calculator\"><slex-grid columns=\"2\"><slex-input id=\"clock\" type=\"number\" label=\"Peripheral clock\" unit=\"MHz\" value=\"48\"></slex-input><slex-input id=\"divider\" type=\"number\" label=\"Divider\" value=\"26\"></slex-input></slex-grid><slex-stat id=\"result\" label=\"Actual baud / error\"></slex-stat></slex-card>\n<script type=\"module\">\n  const clock = slex.root.querySelector(\"#clock\"); const divider = slex.root.querySelector(\"#divider\"); const result = slex.root.querySelector(\"#result\");\n  const update = () => { const baud = Number(clock.value) * 1e6 / (16 * Number(divider.value)); const error = (baud / 115200 - 1) * 100; result.value = `${baud.toFixed(0)} / ${error.toFixed(2)}%`; };\n  clock.addEventListener(\"input\", update); divider.addEventListener(\"input\", update); update(); slex.onDispose(() => { clock.removeEventListener(\"input\", update); divider.removeEventListener(\"input\", update); });\n</script>\n```\n\nInput values are read from live control properties, and the calculated baud/error values are written to the two stat elements.\n",
-      "hash": "09f76849"
+      "body": "\n# Baud Rate Error Calculator\n\nEnter a peripheral clock, target baud rate, and integer divider. The module calculates the actual baud rate and error using 16× oversampling.\n\n```slex\n<slex-card title=\"Baud Rate Error Calculator\"><slex-grid columns=\"3\"><slex-input id=\"clock\" type=\"number\" label=\"Peripheral clock\" unit=\"MHz\" value=\"48\" min=\"0\"></slex-input><slex-input id=\"divider\" type=\"number\" label=\"Divider\" value=\"26\" min=\"1\" step=\"1\"></slex-input><slex-input id=\"target\" type=\"number\" label=\"Target baud\" value=\"115200\" min=\"1\"></slex-input></slex-grid><slex-stat id=\"result\" label=\"Actual baud / error\"></slex-stat></slex-card>\n<script type=\"module\">\n  const fields = [\"clock\", \"divider\", \"target\"].map(id => slex.root.querySelector(`#${id}`));\n  const result = slex.root.querySelector(\"#result\");\n  const update = () => {\n    const [clock, divider, target] = fields.map(field => Number(field.value));\n    if (!(clock > 0 && target > 0 && Number.isInteger(divider) && divider > 0)) { result.value = \"Enter valid parameters\"; return; }\n    const baud = clock * 1e6 / (16 * divider);\n    result.value = `${baud.toFixed(0)} / ${((baud / target - 1) * 100).toFixed(2)}%`;\n  };\n  fields.forEach(field => field.addEventListener(\"input\", update)); update();\n  slex.onDispose(() => fields.forEach(field => field.removeEventListener(\"input\", update)));\n</script>\n```\n\nInput values are read from live control properties, and the calculated baud rate and error appear in one stat.\n",
+      "hash": "7936ed13"
     },
     {
       "id": "examples/tabs-and-branching",
@@ -424,8 +424,8 @@
       "href": "/examples/tabs-and-branching",
       "rawHref": "/docs/examples/tabs-and-branching.md",
       "sourcePath": "site/content/examples/tabs-and-branching/en-US.md",
-      "body": "\n# Branching: Mode Selector\n\nA native select changes which result branch is visible using ordinary DOM state and events.\n\n```slex\n<section><h2>Branching: Mode Selector</h2><details open><summary>First section</summary><p>Unsupported compound widgets use semantic native HTML.</p></details><details><summary>Second section</summary><p>Interaction uses ordinary JavaScript and ARIA.</p></details></section>\n```\n\nAll branches remain ordinary HTML controlled by a native event listener that is removed on disposal.\n",
-      "hash": "8bdb8604"
+      "body": "\n# Branching: Mode Selector\n\nChoose a length, weight, or temperature conversion. The input and result update with the selected mode.\n\n```slex\n<slex-card title=\"Unit conversion\">\n  <slex-select id=\"mode\" label=\"Conversion mode\"><option value=\"length\">Centimeters → meters</option><option value=\"weight\">Kilograms → pounds</option><option value=\"temperature\">Celsius → Fahrenheit</option></slex-select>\n  <slex-input id=\"amount\" type=\"number\" label=\"Value (cm)\" value=\"100\"></slex-input>\n  <slex-stat id=\"result\" label=\"Result\"></slex-stat>\n  <slex-text id=\"description\"></slex-text>\n</slex-card>\n<script type=\"module\">\n  const mode = slex.root.querySelector(\"#mode\");\n  const amount = slex.root.querySelector(\"#amount\");\n  const result = slex.root.querySelector(\"#result\");\n  const description = slex.root.querySelector(\"#description\");\n  const modes = {\n    length: { label: \"Value (cm)\", description: \"Divide centimeters by 100 to obtain meters.\", convert: n => `${(n / 100).toFixed(2)} m` },\n    weight: { label: \"Value (kg)\", description: \"Multiply kilograms by 2.20462 to obtain pounds.\", convert: n => `${(n * 2.20462).toFixed(2)} lb` },\n    temperature: { label: \"Value (°C)\", description: \"Multiply Celsius by 9/5, then add 32.\", convert: n => `${(n * 9 / 5 + 32).toFixed(1)} °F` },\n  };\n  const update = () => {\n    const selected = modes[mode.value] || modes.length;\n    const number = amount.value === \"\" ? NaN : Number(amount.value);\n    amount.label = selected.label;\n    description.text = selected.description;\n    result.value = Number.isFinite(number) ? selected.convert(number) : \"Enter a number\";\n  };\n  mode.addEventListener(\"change\", update);\n  amount.addEventListener(\"input\", update);\n  update();\n  slex.onDispose(() => { mode.removeEventListener(\"change\", update); amount.removeEventListener(\"input\", update); });\n</script>\n```\n\nNative events drive the mode and input value; listeners are removed when the document is disposed.\n",
+      "hash": "8560ecdc"
     },
     {
       "id": "examples/roi-estimator",
@@ -435,8 +435,8 @@
       "href": "/examples/roi-estimator",
       "rawHref": "/docs/examples/roi-estimator.md",
       "sourcePath": "site/content/examples/roi-estimator/en-US.md",
-      "body": "\n# Build vs Buy Decision\n\nCompare a one-time build cost with a recurring monthly vendor price over a chosen horizon.\n\n```slex\n<slex-card title=\"Build vs Buy Decision\"><slex-grid columns=\"3\"><slex-input id=\"build\" type=\"number\" label=\"Build cost\" value=\"120000\"></slex-input><slex-input id=\"monthly\" type=\"number\" label=\"Buy per month\" value=\"6500\"></slex-input><slex-slider id=\"months\" label=\"Horizon\" unit=\"months\" min=\"1\" max=\"60\" value=\"24\"></slex-slider></slex-grid><slex-stat id=\"result\" label=\"Lower-cost option\"></slex-stat></slex-card>\n<script type=\"module\">\n  const fields = [\"build\", \"monthly\", \"months\"].map(id => slex.root.querySelector(`#${id}`)); const result = slex.root.querySelector(\"#result\");\n  const update = () => { const [build, monthly, months] = fields.map(field => Number(field.value)); const buy = monthly * months; result.value = build <= buy ? `Build saves ${(buy - build).toLocaleString()}` : `Buy saves ${(build - buy).toLocaleString()}`; };\n  fields.forEach(field => field.addEventListener(\"input\", update)); update(); slex.onDispose(() => fields.forEach(field => field.removeEventListener(\"input\", update)));\n</script>\n```\n\nThe recommendation is derived locally from the four inputs, and listener cleanup follows the isolated module lifecycle.\n",
-      "hash": "66bb949e"
+      "body": "\n# Build vs Buy Decision\n\nCompare feature fit, cost, delivery time, and vendor risk. The scores are illustrative.\n\n```slex\n<slex-card title=\"Build vs Buy Decision\">\n  <slex-select id=\"scope\" label=\"Function role\"><option value=\"core\">Core business</option><option value=\"non-core\">Supporting function</option></slex-select>\n  <slex-grid columns=\"2\">\n    <slex-card title=\"Build\"><slex-slider id=\"buildFit\" label=\"Feature fit\" min=\"0\" max=\"100\" step=\"5\" value=\"60\"></slex-slider><slex-slider id=\"buildCost\" label=\"Cost score (lower is better)\" min=\"0\" max=\"100\" step=\"5\" value=\"80\"></slex-slider><slex-slider id=\"buildTime\" label=\"Time to launch (months)\" min=\"1\" max=\"12\" value=\"6\"></slex-slider></slex-card>\n    <slex-card title=\"Buy\"><slex-slider id=\"buyFit\" label=\"Feature fit\" min=\"0\" max=\"100\" step=\"5\" value=\"85\"></slex-slider><slex-slider id=\"buyCost\" label=\"Cost score (lower is better)\" min=\"0\" max=\"100\" step=\"5\" value=\"40\"></slex-slider><slex-slider id=\"buyTime\" label=\"Time to launch (months)\" min=\"1\" max=\"12\" value=\"1\"></slex-slider><slex-slider id=\"buyLock\" label=\"Vendor lock-in risk\" min=\"0\" max=\"100\" step=\"5\" value=\"30\"></slex-slider></slex-card>\n  </slex-grid>\n  <slex-grid columns=\"2\"><slex-stat id=\"buildScore\" label=\"Build score\"></slex-stat><slex-stat id=\"buyScore\" label=\"Buy score\"></slex-stat></slex-grid>\n  <slex-text id=\"advice\" label=\"Decision notes\"></slex-text>\n</slex-card>\n<script type=\"module\">\n  const get = id => slex.root.querySelector(`#${id}`);\n  const ids = [\"scope\", \"buildFit\", \"buildCost\", \"buildTime\", \"buyFit\", \"buyCost\", \"buyTime\", \"buyLock\"];\n  const copy = {\"close\": \"The scores are close; investigate both options further.\", \"buildWins\": \"Build scores higher\", \"buyWins\": \"Buy scores higher\", \"coreNote\": \"For core capabilities, also consider long-term control.\", \"noncoreNote\": \"For supporting capabilities, also consider maintenance cost.\"};\n  const update = () => {\n    const value = id => Number(get(id).value);\n    const timeScore = id => Math.max(0, 100 - value(id) * 10);\n    const build = (value(\"buildFit\") + 100 - value(\"buildCost\") + timeScore(\"buildTime\")) / 3;\n    const buy = (value(\"buyFit\") + 100 - value(\"buyCost\") + timeScore(\"buyTime\") - value(\"buyLock\") * 0.5) / 3;\n    get(\"buildScore\").value = build.toFixed(1); get(\"buyScore\").value = buy.toFixed(1);\n    const verdict = Math.abs(build - buy) < 10 ? copy.close : build > buy ? copy.buildWins : copy.buyWins;\n    get(\"advice\").text = `${verdict} ${get(\"scope\").value === \"core\" ? copy.coreNote : copy.noncoreNote}`;\n  };\n  ids.forEach(id => get(id).addEventListener(\"input\", update)); update();\n  slex.onDispose(() => ids.forEach(id => get(id).removeEventListener(\"input\", update)));\n</script>\n```\n\nThese adjustable example scores do not replace a real budget, procurement, or risk assessment.\n",
+      "hash": "9ded7150"
     },
     {
       "id": "examples/first-interaction",
@@ -490,8 +490,8 @@
       "href": "/examples/project-dashboard",
       "rawHref": "/docs/examples/project-dashboard.md",
       "sourcePath": "site/content/examples/project-dashboard/en-US.md",
-      "body": "\n# Project Dashboard\n\nThe dashboard composes cards, grids, controls, and stats while one JavaScript update function coordinates the displayed project metrics.\n\n```slex\n<slex-card title=\"Project Dashboard\"><slex-grid columns=\"2\"><slex-input id=\"left\" label=\"Value A\" value=\"10\"></slex-input><slex-slider id=\"right\" label=\"Value B\" min=\"0\" max=\"100\" value=\"20\"></slex-slider></slex-grid><slex-stat id=\"result\" label=\"Result\"></slex-stat></slex-card>\n<script type=\"module\">\n  const left = slex.root.querySelector(\"#left\"); const right = slex.root.querySelector(\"#right\"); const result = slex.root.querySelector(\"#result\"); const update = () => { result.value = Number(left.value) + right.valueAsNumber; };\n  left.addEventListener(\"input\", update); right.addEventListener(\"input\", update); update(); slex.onDispose(() => { left.removeEventListener(\"input\", update); right.removeEventListener(\"input\", update); });\n</script>\n```\n\nThe values stay in component properties and ordinary JavaScript; no hidden namespace store or expression evaluator participates.\n",
-      "hash": "921bbca1"
+      "body": "\n# Project Dashboard\n\nThe dashboard composes cards, grids, controls, and stats while one JavaScript update function coordinates the displayed project metrics.\n\n```slex\n<slex-section title=\"Sprint dashboard\" subtitle=\"Adjust the inputs to explore progress, quality, and team load.\">\n  <slex-grid columns=\"3\">\n    <slex-card title=\"Sprint progress\">\n      <slex-slider id=\"progress\" label=\"Completion\" value=\"72\" min=\"0\" max=\"100\" unit=\"%\"></slex-slider>\n      <slex-progress id=\"progressBar\" label=\"Completion\"></slex-progress>\n      <slex-select id=\"scope\" label=\"Scope status\"><option value=\"on-track\">On track</option><option value=\"at-risk\">At risk</option><option value=\"off-track\">Off track</option></slex-select>\n      <slex-badge id=\"scopeBadge\"></slex-badge>\n    </slex-card>\n    <slex-card title=\"Quality\">\n      <slex-input id=\"bugs\" type=\"number\" min=\"0\" label=\"Total defects\" value=\"12\"></slex-input>\n      <slex-input id=\"resolved\" type=\"number\" min=\"0\" label=\"Resolved\" value=\"9\"></slex-input>\n      <slex-stat id=\"remaining\" label=\"Remaining defects\"></slex-stat>\n      <slex-progress id=\"fixRate\" label=\"Resolution rate\"></slex-progress>\n    </slex-card>\n    <slex-card title=\"Team health\">\n      <slex-input id=\"workload\" type=\"number\" min=\"0\" label=\"Workload\" value=\"8\"></slex-input>\n      <slex-input id=\"team\" type=\"number\" min=\"1\" label=\"Team members\" value=\"6\"></slex-input>\n      <slex-stat id=\"load\" label=\"Load index\" unit=\"%\"></slex-stat>\n      <slex-text id=\"note\"></slex-text>\n    </slex-card>\n  </slex-grid>\n  <slex-card title=\"Task details\"><slex-table id=\"tasks\"></slex-table></slex-card>\n</slex-section>\n<script type=\"module\">\n  const get = id => slex.root.querySelector(`#${id}`);\n  const controls = [\"progress\", \"scope\", \"bugs\", \"resolved\", \"workload\", \"team\"].map(get);\n  const statuses = { \"on-track\": [\"On track\", \"success\"], \"at-risk\": [\"At risk\", \"warning\"], \"off-track\": [\"Off track\", \"destructive\"] };\n  const update = () => {\n    const bugs = Math.max(0, Number(get(\"bugs\").value) || 0);\n    const resolved = Math.min(bugs, Math.max(0, Number(get(\"resolved\").value) || 0));\n    const team = Math.max(1, Number(get(\"team\").value) || 1);\n    const load = Math.min(100, Math.max(0, Number(get(\"workload\").value) || 0) / team * 20);\n    const [label, tone] = statuses[get(\"scope\").value] || statuses[\"on-track\"];\n    get(\"progressBar\").value = Number(get(\"progress\").value);\n    get(\"scopeBadge\").label = label; get(\"scopeBadge\").tone = tone;\n    get(\"remaining\").value = bugs - resolved;\n    get(\"fixRate\").value = bugs ? resolved / bugs * 100 : 0;\n    get(\"load\").value = load.toFixed(1);\n    get(\"note\").text = load > 80 ? \"Team load is high; consider redistributing work.\" : \"Team load is within the healthy range.\";\n  };\n  get(\"tasks\").columns = [\"Task\", \"Owner\", \"Status\"];\n  get(\"tasks\").rows = [[\"API refactor\", \"Alex\", \"Done\"], [\"UI components\", \"Lee\", \"In progress\"], [\"Integration tests\", \"Sam\", \"Review\"]];\n  controls.forEach(control => control.addEventListener(\"input\", update));\n  update();\n  slex.onDispose(() => controls.forEach(control => control.removeEventListener(\"input\", update)));\n</script>\n```\n\nThe values stay in component properties and ordinary JavaScript; no hidden namespace store or expression evaluator participates.\n",
+      "hash": "e129c4dd"
     },
     {
       "id": "examples/rc-low-pass-filter",
@@ -501,8 +501,8 @@
       "href": "/examples/rc-low-pass-filter",
       "rawHref": "/docs/examples/rc-low-pass-filter.md",
       "sourcePath": "site/content/examples/rc-low-pass-filter/en-US.md",
-      "body": "\n# RC Low-Pass Filter\n\nThe cutoff calculation is ordinary JavaScript: \\(f_c = 1 / (2\\pi RC)\\). Values are read from live custom-element properties.\n\n```slex\n<slex-card title=\"RC Low-Pass Filter\"><slex-grid columns=\"2\"><slex-input id=\"resistance\" type=\"number\" label=\"Resistance\" unit=\"kΩ\" value=\"10\"></slex-input><slex-input id=\"capacitance\" type=\"number\" label=\"Capacitance\" unit=\"nF\" value=\"100\"></slex-input></slex-grid><slex-stat id=\"cutoff\" label=\"Cutoff frequency\" unit=\"Hz\"></slex-stat></slex-card>\n<script type=\"module\">\n  const r = slex.root.querySelector(\"#resistance\"); const c = slex.root.querySelector(\"#capacitance\"); const cutoff = slex.root.querySelector(\"#cutoff\");\n  const update = () => { cutoff.value = (1 / (2 * Math.PI * Number(r.value) * 1e3 * Number(c.value) * 1e-9)).toFixed(1); };\n  r.addEventListener(\"input\", update); c.addEventListener(\"input\", update); update();\n  slex.onDispose(() => { r.removeEventListener(\"input\", update); c.removeEventListener(\"input\", update); });\n</script>\n```\n\nEngineering input values are parsed from the controls and the resulting cutoff/gain values are written as display properties.\n",
-      "hash": "22b2c279"
+      "body": "\n# RC Low-Pass Filter\n\nThe cutoff calculation is ordinary JavaScript: \\(f_c = 1 / (2\\pi RC)\\). Values are read from live custom-element properties.\n\n```slex\n<div class=\"rc-filter-demo\">\n  <div id=\"inputs\" class=\"rc-filter-grid\">\n    <div class=\"rc-filter-field\">\n      <slex-input id=\"r\" label=\"Resistance R\" type=\"engineering\" value=\"10kΩ\" placeholder=\"10kΩ\"></slex-input>\n      <slex-slider id=\"rControl\" label=\"R\" value=\"10000\" min=\"1000\" max=\"100000\" step=\"1000\" unit=\"Ω\"></slex-slider>\n    </div>\n    <div class=\"rc-filter-field\">\n      <slex-input id=\"c\" label=\"Capacitance C\" type=\"engineering\" value=\"100nF\" placeholder=\"100nF\"></slex-input>\n      <slex-slider id=\"cControl\" label=\"C\" value=\"100\" min=\"10\" max=\"1000\" step=\"10\" unit=\"nF\"></slex-slider>\n    </div>\n    <div class=\"rc-filter-field\">\n      <slex-input id=\"f\" label=\"Input frequency f\" type=\"engineering\" value=\"1kHz\" placeholder=\"1kHz\"></slex-input>\n      <slex-slider id=\"fControl\" label=\"f\" value=\"1000\" min=\"0\" max=\"5000\" step=\"10\" unit=\"Hz\"></slex-slider>\n    </div>\n    <div class=\"rc-filter-field\">\n      <slex-input id=\"vin\" label=\"Input amplitude Vin\" type=\"engineering\" value=\"1V\" placeholder=\"1V\"></slex-input>\n      <slex-slider id=\"vinControl\" label=\"Vin\" value=\"1\" min=\"0\" max=\"5\" step=\"0.1\" unit=\"V\"></slex-slider>\n    </div>\n  </div>\n\n  <p id=\"inputHint\" class=\"rc-filter-muted\">Try 4.7kΩ, 220nF, 10kHz, and 500mV. value keeps the source text; number drives the calculation.</p>\n\n  <div id=\"outputs\" class=\"rc-filter-grid\">\n    <slex-stat id=\"tau\" label=\"Time constant\" unit=\"ms\" animate-initial></slex-stat>\n    <slex-stat id=\"cutoff\" label=\"Cutoff frequency\" unit=\"Hz\" animate-initial></slex-stat>\n    <slex-stat id=\"gain\" label=\"Magnitude gain\" animate-initial></slex-stat>\n    <slex-stat id=\"output\" label=\"Output amplitude\" unit=\"V\" animate-initial></slex-stat>\n  </div>\n\n  <div id=\"formula\" class=\"rc-filter-formula\"></div>\n  <div class=\"rc-filter-actions\">\n    <p id=\"status\" class=\"rc-filter-muted\"></p>\n    <slex-button id=\"reset\" label=\"Reset\" variant=\"secondary\"></slex-button>\n  </div>\n</div>\n\n<style>\n  .rc-filter-demo { display: grid; gap: 1rem; min-width: 0; }\n  .rc-filter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }\n  @media (min-width: 600px) { .rc-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }\n  .rc-filter-field { display: grid; align-content: start; gap: 1rem; min-width: 0; }\n  .rc-filter-formula { border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); padding: .625rem .75rem; font-family: var(--font-mono, monospace); font-weight: 600; line-height: 1.7; }\n  .rc-filter-muted { margin: 0; color: var(--muted-foreground); font-size: .875rem; line-height: 1.625; }\n  .rc-filter-actions { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; }\n  #status { flex: 1 1 24rem; min-width: 0; }\n  @media (max-width: 599px) {\n    .rc-filter-actions { flex-direction: column; align-items: stretch; }\n    #status { flex: 0 1 auto; }\n    #reset { width: 100%; }\n  }\n</style>\n\n<script type=\"module\">\n  const byId = (id) => slex.root.querySelector(`#${id}`);\n  const inputs = {\n    r: byId(\"r\"),\n    c: byId(\"c\"),\n    f: byId(\"f\"),\n    vin: byId(\"vin\"),\n  };\n  const sliders = {\n    r: byId(\"rControl\"),\n    c: byId(\"cControl\"),\n    f: byId(\"fControl\"),\n    vin: byId(\"vinControl\"),\n  };\n  const defaults = { r: \"10kΩ\", c: \"100nF\", f: \"1kHz\", vin: \"1V\" };\n  const units = { r: \"Ω\", c: \"nF\", f: \"Hz\", vin: \"V\" };\n  const sliderScale = { r: 1, c: 1e9, f: 1, vin: 1 };\n  const format = (value, digits) => Number.isFinite(value) ? value.toFixed(digits) : \"Invalid\";\n\n  const update = (origin) => {\n    const r = inputs.r.valueAsNumber;\n    const c = inputs.c.valueAsNumber;\n    const f = inputs.f.valueAsNumber;\n    const vin = inputs.vin.valueAsNumber;\n    const valid = [r, c, f, vin].every(Number.isFinite) && r > 0 && c > 0 && f >= 0 && vin >= 0;\n    const tau = valid ? r * c : NaN;\n    const cutoff = valid && tau > 0 ? 1 / (2 * Math.PI * tau) : NaN;\n    const gain = valid && cutoff > 0 ? 1 / Math.sqrt(1 + (f / cutoff) ** 2) : NaN;\n    const gainDb = Number.isFinite(gain) && gain > 0 ? 20 * Math.log10(gain) : NaN;\n    const output = Number.isFinite(gain) ? vin * gain : NaN;\n\n    if (origin !== \"slider\") {\n      for (const key of Object.keys(sliders)) {\n        const number = inputs[key].valueAsNumber;\n        if (Number.isFinite(number)) sliders[key].value = String(number * sliderScale[key]);\n      }\n    }\n\n    byId(\"tau\").value = format(tau * 1000, 3);\n    byId(\"cutoff\").value = format(cutoff, 2);\n    byId(\"gain\").value = format(gain, 3);\n    byId(\"output\").value = format(output, 3);\n    byId(\"formula\").textContent = `|H(f)| = ${format(gain, 3)}, Gain = ${format(gainDb, 2)} dB`;\n    byId(\"status\").textContent = valid\n      ? \"Low frequencies pass through; higher frequencies are attenuated by the first-order RC network.\"\n      : \"Check the engineering input format. R and C must be greater than 0; frequency and input amplitude cannot be negative.\";\n  };\n\n  const onInput = () => update(\"input\");\n  const sliderHandlers = Object.fromEntries(Object.keys(sliders).map((key) => [key, () => {\n    inputs[key].value = `${sliders[key].value}${units[key]}`;\n    update(\"slider\");\n  }]));\n  const reset = () => {\n    for (const [key, value] of Object.entries(defaults)) inputs[key].value = value;\n    update(\"input\");\n  };\n\n  Object.values(inputs).forEach((control) => control.addEventListener(\"input\", onInput));\n  for (const [key, control] of Object.entries(sliders)) control.addEventListener(\"input\", sliderHandlers[key]);\n  byId(\"reset\").addEventListener(\"click\", reset);\n  update(\"input\");\n\n  slex.onDispose(() => {\n    Object.values(inputs).forEach((control) => control.removeEventListener(\"input\", onInput));\n    for (const [key, control] of Object.entries(sliders)) control.removeEventListener(\"input\", sliderHandlers[key]);\n    byId(\"reset\").removeEventListener(\"click\", reset);\n  });\n</script>\n```\n\nEngineering input values are parsed from the controls and the resulting cutoff/gain values are written as display properties.\n",
+      "hash": "293ef1d5"
     },
     {
       "id": "examples/search-filter-table",
@@ -512,19 +512,8 @@
       "href": "/examples/search-filter-table",
       "rawHref": "/docs/examples/search-filter-table.md",
       "sourcePath": "site/content/examples/search-filter-table/en-US.md",
-      "body": "\n# Search and Filter Table\n\nThe search input filters an in-memory array and assigns the matching rows to the table's live `.rows` property.\n\n```slex\n<slex-card title=\"Search and Filter Table\"><slex-input id=\"query\" label=\"Filter\"></slex-input><slex-table id=\"results\"></slex-table></slex-card>\n<script type=\"module\">\n  const rows = [{ name: \"Ada\", role: \"Engineer\" }, { name: \"Lin\", role: \"Designer\" }]; const query = slex.root.querySelector(\"#query\"); const table = slex.root.querySelector(\"#results\");\n  table.columns = [{ key: \"name\", label: \"Name\" }, { key: \"role\", label: \"Role\" }]; const update = () => { const needle = query.value.toLowerCase(); table.rows = rows.filter((row) => Object.values(row).some((value) => value.toLowerCase().includes(needle))); };\n  query.addEventListener(\"input\", update); update(); slex.onDispose(() => query.removeEventListener(\"input\", update));\n</script>\n```\n\nTable data is assigned as arrays through properties rather than encoded into HTML attributes, and text cells are not parsed as HTML.\n",
-      "hash": "e65383e0"
-    },
-    {
-      "id": "examples/tech-selection-evaluator",
-      "group": "Examples",
-      "title": "Semantic Details Layout",
-      "summary": "Use native section and details elements when no documented compound custom element matches the content.",
-      "href": "/examples/tech-selection-evaluator",
-      "rawHref": "/docs/examples/tech-selection-evaluator.md",
-      "sourcePath": "site/content/examples/tech-selection-evaluator/en-US.md",
-      "body": "\n# Semantic Details Layout\n\nThis fragment uses semantic native `<section>` and `<details>` elements for a compound disclosure layout that needs no custom component or script.\n\n```slex\n<section><h2>Semantic Details Layout</h2><details open><summary>First section</summary><p>Unsupported compound widgets use semantic native HTML.</p></details><details><summary>Second section</summary><p>Native disclosure behavior needs no custom script.</p></details></section>\n```\n\nNative disclosure behavior remains inside this fence's isolated document and requires no hidden JavaScript state.\n",
-      "hash": "cdb346cc"
+      "body": "\n# Search and Filter Table\n\nThe search input filters an in-memory array and assigns the matching rows to the table's live `.rows` property.\n\n```slex\n<slex-card title=\"Search and Filter Table\"><slex-input id=\"query\" label=\"Filter\"></slex-input><slex-table id=\"results\"></slex-table><div id=\"details\"></div></slex-card>\n<script type=\"module\">\n  const rows = [{ name: \"Ada\", role: \"Engineer\" }, { name: \"Lin\", role: \"Designer\" }]; const query = slex.root.querySelector(\"#query\"); const table = slex.root.querySelector(\"#results\");\n  const details = slex.root.querySelector(\"#details\");\n  table.columns = [{ key: \"name\", label: \"Name\" }, { key: \"role\", label: \"Role\" }];\n  const update = () => {\n    const needle = query.value.toLowerCase();\n    const matches = rows.filter((row) => Object.values(row).some((value) => value.toLowerCase().includes(needle)));\n    table.rows = matches;\n    details.replaceChildren(...matches.map((row) => {\n      const item = document.createElement(\"slex-collapsible\");\n      item.setAttribute(\"trigger\", `${row.name} — details`);\n      item.setAttribute(\"content\", `Role: ${row.role}`);\n      return item;\n    }));\n  };\n  query.addEventListener(\"input\", update); update(); slex.onDispose(() => query.removeEventListener(\"input\", update));\n</script>\n```\n\nTable data is assigned as arrays through properties rather than encoded into HTML attributes. Expand a matching row's details below the table; text is not parsed as HTML.\n",
+      "hash": "48b12231"
     },
     {
       "id": "examples/salary-calculator",
@@ -534,8 +523,8 @@
       "href": "/examples/salary-calculator",
       "rawHref": "/docs/examples/salary-calculator.md",
       "sourcePath": "site/content/examples/salary-calculator/en-US.md",
-      "body": "\n# Social Insurance Calculator\n\nAdjust the contribution rate to estimate the employee deduction and remaining pay.\n\n```slex\n<slex-card title=\"Social Insurance Calculator\"><slex-grid columns=\"2\"><slex-input id=\"salary\" type=\"number\" label=\"Monthly salary\" value=\"18000\"></slex-input><slex-slider id=\"rate\" label=\"Employee contribution\" unit=\"%\" min=\"0\" max=\"30\" value=\"10.5\"></slex-slider></slex-grid><slex-grid columns=\"2\"><slex-stat id=\"deduction\" label=\"Deduction\"></slex-stat><slex-stat id=\"remaining\" label=\"Remaining before tax\"></slex-stat></slex-grid></slex-card>\n<script type=\"module\">\n  const salary = slex.root.querySelector(\"#salary\"); const rate = slex.root.querySelector(\"#rate\"); const deduction = slex.root.querySelector(\"#deduction\"); const remaining = slex.root.querySelector(\"#remaining\");\n  const update = () => { const amount = Number(salary.value) * Number(rate.value) / 100; deduction.value = amount.toFixed(2); remaining.value = (Number(salary.value) - amount).toFixed(2); };\n  salary.addEventListener(\"input\", update); rate.addEventListener(\"input\", update); update(); slex.onDispose(() => { salary.removeEventListener(\"input\", update); rate.removeEventListener(\"input\", update); });\n</script>\n```\n\nThe salary and contribution rate remain live control values; recalculation updates only the displayed deduction and remainder.\n",
-      "hash": "99f370a7"
+      "body": "\n# Social Insurance Calculator\n\nAdjust the contribution rate to estimate the employee deduction and remaining pay.\n\n```slex\n<slex-card title=\"Social Insurance Calculator\"><slex-grid columns=\"2\"><slex-input id=\"salary\" type=\"number\" label=\"Monthly salary\" value=\"18000\"></slex-input><slex-slider id=\"rate\" label=\"Employee contribution\" unit=\"%\" min=\"0\" max=\"30\" step=\"0.1\" value=\"10.5\"></slex-slider></slex-grid><slex-grid columns=\"2\"><slex-stat id=\"deduction\" label=\"Deduction\"></slex-stat><slex-stat id=\"remaining\" label=\"Remaining before tax\"></slex-stat></slex-grid></slex-card>\n<script type=\"module\">\n  const salary = slex.root.querySelector(\"#salary\"); const rate = slex.root.querySelector(\"#rate\"); const deduction = slex.root.querySelector(\"#deduction\"); const remaining = slex.root.querySelector(\"#remaining\");\n  const update = () => { const amount = Number(salary.value) * Number(rate.value) / 100; deduction.value = amount.toFixed(2); remaining.value = (Number(salary.value) - amount).toFixed(2); };\n  salary.addEventListener(\"input\", update); rate.addEventListener(\"input\", update); update(); slex.onDispose(() => { salary.removeEventListener(\"input\", update); rate.removeEventListener(\"input\", update); });\n</script>\n```\n\nThe salary and contribution rate remain live control values; recalculation updates only the displayed deduction and remainder.\n",
+      "hash": "7d15f06b"
     },
     {
       "id": "examples/project-cost-estimator",
@@ -559,6 +548,17 @@
       "body": "\n# Streamdown Integration\n\nThe Streamdown renderer handles ordinary Markdown normally and sends only explicit `slex` fence strings to the isolated document host.\n\n```slex\n<slex-card title=\"Streamdown Integration\"><slex-grid columns=\"2\"><slex-input id=\"left\" label=\"Value A\" value=\"10\"></slex-input><slex-slider id=\"right\" label=\"Value B\" min=\"0\" max=\"100\" value=\"20\"></slex-slider></slex-grid><slex-stat id=\"result\" label=\"Result\"></slex-stat></slex-card>\n<script type=\"module\">\n  const left = slex.root.querySelector(\"#left\"); const right = slex.root.querySelector(\"#right\"); const result = slex.root.querySelector(\"#result\"); const update = () => { result.value = Number(left.value) + right.valueAsNumber; };\n  left.addEventListener(\"input\", update); right.addEventListener(\"input\", update); update(); slex.onDispose(() => { left.removeEventListener(\"input\", update); right.removeEventListener(\"input\", update); });\n</script>\n```\n\n## Host boundary\n\nThe adapter recognizes explicit `slex` fences and passes the raw HTML string to the same isolated document host. The host supplies stable artifact/block IDs, runtime/style URLs, and policy; the payload does not.\n\nThe adapter keeps stable artifact/block IDs and delegates preview versus commit decisions to the document host.\n\n`@slexkit/streamdown` recognizes explicit fences and forwards their HTML source to the isolated document host.\n\n<iframe class=\"slex-example-live-frame\" src=\"/adapter-demos/streamdown/?embed=1\" title=\"Streamdown HTML fence demo\"></iframe>\n\nSource: `examples/streamdown`.\n",
       "hash": "df557438"
     },
+    {
+      "id": "examples/tech-selection-evaluator",
+      "group": "Examples",
+      "title": "Technology Selection Evaluator",
+      "summary": "Compare example technology scores across performance, ecosystem, learning, and maintenance.",
+      "href": "/examples/tech-selection-evaluator",
+      "rawHref": "/docs/examples/tech-selection-evaluator.md",
+      "sourcePath": "site/content/examples/tech-selection-evaluator/en-US.md",
+      "body": "\n# Technology Selection Evaluator\n\nChoose a set of example scores, then adjust each dimension for your team. The weighted result is an illustration, not an objective ranking of frameworks.\n\n```slex\n<slex-card title=\"Technology selection\">\n  <slex-select id=\"technology\" label=\"Technology\"><option value=\"react\">React</option><option value=\"vue\">Vue</option><option value=\"svelte\">Svelte</option><option value=\"angular\">Angular</option></slex-select>\n  <slex-grid columns=\"2\">\n    <slex-slider id=\"performance\" label=\"Performance (30%)\" value=\"85\" min=\"0\" max=\"100\" step=\"5\"></slex-slider>\n    <slex-slider id=\"ecosystem\" label=\"Ecosystem (25%)\" value=\"95\" min=\"0\" max=\"100\" step=\"5\"></slex-slider>\n    <slex-slider id=\"learning\" label=\"Learning (20%)\" value=\"70\" min=\"0\" max=\"100\" step=\"5\"></slex-slider>\n    <slex-slider id=\"maintenance\" label=\"Maintenance (25%)\" value=\"80\" min=\"0\" max=\"100\" step=\"5\"></slex-slider>\n  </slex-grid>\n  <slex-stat id=\"score\" label=\"Weighted score\" unit=\"points\"></slex-stat>\n  <slex-text id=\"recommendation\"></slex-text>\n</slex-card>\n<script type=\"module\">\n  const get = id => slex.root.querySelector(`#${id}`);\n  const ids = [\"performance\", \"ecosystem\", \"learning\", \"maintenance\"];\n  const presets = { react: [85, 95, 70, 80], vue: [80, 85, 85, 85], svelte: [95, 70, 90, 90], angular: [80, 80, 60, 75] };\n  const update = () => {\n    const values = ids.map(id => Number(get(id).value));\n    const score = values[0] * 0.3 + values[1] * 0.25 + values[2] * 0.2 + values[3] * 0.25;\n    get(\"score\").value = score.toFixed(1);\n    get(\"recommendation\").text = score >= 85 ? \"Example result: strongly recommended\" : score >= 75 ? \"Example result: recommended\" : score >= 60 ? \"Example result: worth considering\" : \"Example result: proceed with caution\";\n  };\n  const choose = () => { (presets[get(\"technology\").value] || presets.react).forEach((value, i) => { get(ids[i]).value = value; }); update(); };\n  get(\"technology\").addEventListener(\"change\", choose);\n  ids.forEach(id => get(id).addEventListener(\"input\", update));\n  update();\n  slex.onDispose(() => { get(\"technology\").removeEventListener(\"change\", choose); ids.forEach(id => get(id).removeEventListener(\"input\", update)); });\n</script>\n```\n\nThe weights are 30%, 25%, 20%, and 25%. The local sample scores can be adjusted to match your own decision criteria.\n",
+      "hash": "46a04d79"
+    },
     {
       "id": "examples/tiptap-host",
       "group": "Examples",
@@ -578,8 +578,8 @@
       "href": "/examples/form-wizard-steps",
       "rawHref": "/docs/examples/form-wizard-steps.md",
       "sourcePath": "site/content/examples/form-wizard-steps/en-US.md",
-      "body": "\n# ToolHost Form Question\n\nToolHost renders trusted host-side form UI and resolves an explicit submitted or ignored structured result; it is separate from display-only `slex` execution.\n\n```slex\n<section><h2>ToolHost Form Question</h2><details open><summary>First section</summary><p>Unsupported compound widgets use semantic native HTML.</p></details><details><summary>Second section</summary><p>Interaction uses ordinary JavaScript and ARIA.</p></details></section>\n```\n\nSubmission crosses ToolHost's explicit result boundary; arbitrary artifact code cannot impersonate this host workflow.\n",
-      "hash": "14ff990b"
+      "body": "\n# ToolHost Form Question\n\nToolHost renders trusted host-side form UI and resolves an explicit submitted or ignored structured result; it is separate from display-only `slex` execution.\n\n```js\nconst handle = renderToolCall({\n  id: \"project-form\",\n  name: \"fill-form\",\n  arguments: { fields: [{ name: \"name\", label: \"Project name\", type: \"text\", required: true }] },\n}, container);\nconst result = await handle.promise;\n```\n\nThe form below is rendered by ToolHost in the host. Submit or ignore it to see the returned structured result.\n",
+      "hash": "1468ec61"
     },
     {
       "id": "examples/toolhost-demo",
@@ -589,8 +589,8 @@
       "href": "/examples/toolhost-demo",
       "rawHref": "/docs/examples/toolhost-demo.md",
       "sourcePath": "site/content/examples/toolhost-demo/en-US.md",
-      "body": "\n# ToolHost Tool Call UI\n\nToolHost is a host-side tool-call renderer, not an authoring element inside a `slex` payload. The host selects a registered template from a trusted `function_call` name and passes only the call arguments to that template.\n\n```js\nconst output = await renderToolCall(container, {\n  name: \"fill-form\",\n  callId: item.call_id,\n  arguments: JSON.parse(item.arguments),\n});\nresponsesInput.push({ type: \"function_call_output\", call_id: item.call_id, output: JSON.stringify(output) });\n```\n\n## Tool-call boundary\n\nWhen an agent emits a `function_call`, the browser host can render it as an inline ToolHost card. `renderToolCall()` resolves only after submit or ignore, then the host writes a `function_call_output` using the original call ID. This workflow does not execute a deployment or other domain action by itself.\n",
-      "hash": "d54f137c"
+      "body": "\n# ToolHost Tool Call UI\n\nToolHost is a host-side tool-call renderer, not an authoring element inside a `slex` payload. The host selects a registered template from a trusted `function_call` name and passes only the call arguments to that template.\n\n```js\nconst handle = renderToolCall({\n  name: \"fill-form\",\n  id: item.call_id,\n  arguments: JSON.parse(item.arguments),\n}, container);\nconst output = await handle.promise;\nresponsesInput.push({ type: \"function_call_output\", call_id: item.call_id, output: JSON.stringify(output) });\n```\n\n## Tool-call boundary\n\nWhen an agent emits a `function_call`, the browser host can render it as an inline ToolHost card. The returned handle's promise resolves after submit or ignore, then the host writes a `function_call_output` using the original call ID. This workflow does not execute a deployment or other domain action by itself.\n",
+      "hash": "409e4f3a"
     },
     {
       "id": "examples/voltage-divider",
@@ -600,8 +600,8 @@
       "href": "/examples/voltage-divider",
       "rawHref": "/docs/examples/voltage-divider.md",
       "sourcePath": "site/content/examples/voltage-divider/en-US.md",
-      "body": "\n# Voltage Divider Calculator\n\nThe module script implements \\(V_{out} = V_{in} R_2 / (R_1 + R_2)\\) with native `input` events.\n\n```slex\n<slex-card title=\"Voltage Divider Calculator\"><slex-grid columns=\"3\"><slex-input id=\"vin\" type=\"number\" label=\"Input voltage\" value=\"12\"></slex-input><slex-input id=\"r1\" type=\"number\" label=\"R1\" unit=\"kΩ\" value=\"10\"></slex-input><slex-input id=\"r2\" type=\"number\" label=\"R2\" unit=\"kΩ\" value=\"20\"></slex-input></slex-grid><slex-stat id=\"vout\" label=\"Output voltage\" unit=\"V\"></slex-stat></slex-card>\n<script type=\"module\">\n  const fields = [\"vin\", \"r1\", \"r2\"].map(id => slex.root.querySelector(`#${id}`)); const vout = slex.root.querySelector(\"#vout\");\n  const update = () => { const [vin, r1, r2] = fields.map(field => Number(field.value)); vout.value = (vin * r2 / (r1 + r2)).toFixed(2); };\n  fields.forEach(field => field.addEventListener(\"input\", update)); update();\n  slex.onDispose(() => fields.forEach(field => field.removeEventListener(\"input\", update)));\n</script>\n```\n\nThe three engineering inputs drive one calculation function, which updates output voltage and load-error display properties.\n",
-      "hash": "76df4033"
+      "body": "\n# Voltage Divider Calculator\n\nThe module script implements \\(V_{out} = V_{in} R_2 / (R_1 + R_2)\\) with native `input` events.\n\n```slex\n<slex-card title=\"Voltage Divider Calculator\"><slex-grid columns=\"3\"><slex-input id=\"vin\" type=\"number\" label=\"Input voltage\" value=\"12\"></slex-input><slex-input id=\"r1\" type=\"number\" label=\"R1\" unit=\"kΩ\" value=\"10\"></slex-input><slex-input id=\"r2\" type=\"number\" label=\"R2\" unit=\"kΩ\" value=\"20\"></slex-input></slex-grid><slex-stat id=\"vout\" label=\"Output voltage\" unit=\"V\"></slex-stat></slex-card>\n<script type=\"module\">\n  const fields = [\"vin\", \"r1\", \"r2\"].map(id => slex.root.querySelector(`#${id}`)); const vout = slex.root.querySelector(\"#vout\");\n  const update = () => { const [vin, r1, r2] = fields.map(field => Number(field.value)); vout.value = fields.some(field => field.value === \"\") || !Number.isFinite(vin) || r1 < 0 || r2 < 0 || r1 + r2 <= 0 ? \"—\" : (vin * r2 / (r1 + r2)).toFixed(2); };\n  fields.forEach(field => field.addEventListener(\"input\", update)); update();\n  slex.onDispose(() => fields.forEach(field => field.removeEventListener(\"input\", update)));\n</script>\n```\n\nThe three numeric inputs drive one calculation function, which updates the output voltage. Invalid resistor values display a dash.\n",
+      "hash": "ea8f9d0f"
     },
     {
       "id": "guides/ai-agents",
@@ -787,8 +787,8 @@
       "href": "/docs/releases/changelog",
       "rawHref": "/docs/releases/changelog.md",
       "sourcePath": "site/content/releases/changelog/en-US.md",
-      "body": "\n# Changelog\n\nAll notable changes to SlexKit.\n\n## v0.5.0 - HTML-first interactive documents\n\n### Breaking changes\n- `slex` fences now contain HTML fragments with standard JavaScript and `slex-*` Web Components. The former object-tree DSL, expression strings, and implicit namespace state are no longer supported.\n- Cross-fence state uses the explicit artifact-local `slex.shared` API. Hosts must configure an isolated runtime URL for generated content.\n\n### Added\n- A reusable Web Components entry, custom-element manifest, theme tokens, and updated Markdown, Streamdown, assistant-ui, Tiptap, and Obsidian integrations.\n- Static, non-executing source inspection and cross-browser, adapter, layout, and lifecycle conformance checks.\n\n### Changed\n- Metric cards adapt numeric precision to available width, preserve the original value, and align automatically in responsive rows.\n- Component documentation now describes the HTML contracts in English and Chinese.\n\n### Fixed\n- Frame initialization timeouts no longer leave artifact updates waiting indefinitely.\n- Long labels, native hidden elements, CSS zoom, and RTL numeric rendering now respect their layout and reading direction.\n\n### Validation status\n- The Obsidian desktop fix remains pending verification in the actual desktop application. Browser tests do not establish desktop compatibility.\n\n## v0.4.0 - Production adapters and ToolHost hardening\n\n### Added\n- `@slexkit/assistant-ui`: React assistant-ui adapter package with secure-frame defaults for `slex` code blocks.\n- Browser-openable Assistant UI host example and documentation pages for adapter integration.\n- Internal ToolHost `step` component for multi-step human-input flows inside one tool call.\n- Theme package coverage for base, per-component, and ToolHost/step CSS exports.\n\n### Changed\n- AI docs and standard artifacts now separate public components from ToolHost-only internals: `submit` and `step` remain renderable runtime components but are no longer counted in the public component catalog.\n- `smoke:release` now logs pack/install/smoke stages, validates packed tarballs through a temporary app, checks CLI conformance, and checks the MCP server before reporting success.\n- ToolHost demo and replay fixtures now use the same step/submit flow expected from production host integrations.\n\n### Fixed\n- Radio group list selection styling no longer uses `:has()` in shipped runtime or theme CSS.\n- Tiptap preview controls preserve focus across embedded SlexKit inputs, selects, and transient controls.\n- `step` and `submit` component docs now include synced SPEC examples and API tables.\n- Release smoke no longer hangs after successful MCP validation on Windows.\n## v0.3.4 - Production documentation polish\n\n### Changed\n- Reworked the documentation site shell labels, language menu, mobile navigation, and theme controls so localized pages no longer expose English-only UI chrome.\n- Polished guide, reference, component, example, package README, and AI-facing documentation copy to remove report-like wording and visible placeholder phrasing.\n- Localized generated Chinese component examples and API descriptions, including Formula props, through the component spec documentation pipeline.\n\n### Fixed\n- Chinese documentation no longer renders copied English UI phrases such as counter labels, ToolHost examples, Obsidian status text, or design-system tone labels.\n- Markdown documentation tests now guard against copied English skeleton headings, visible English-only list rows, double-question-mark replacement corruption, stale generated spec blocks, and previously fixed English UI phrase regressions.\n\n## v0.3.3 - Obsidian input control hardening\n\n### Fixed\n- Slider now renders its visual track outside the native range input while keeping the native input for interaction and accessibility, avoiding square thumb artifacts in Obsidian and other host themes.\n- Input fields with trailing units now reset host input chrome with scoped selectors so unit add-ons stay aligned with the text field in Obsidian dark themes.\n\n## v0.3.2 - Host CSS isolation and repeated layout hardening\n\n### Changed\n- `$for` rendering now uses comment anchors and direct child insertion instead of a wrapper element that depended on `display: contents`.\n- Site-only mobile navigation CSS moved out of the runtime base stylesheet and into the documentation site shell.\n- Component accessors now share one reactive effect across subscribers instead of creating duplicate subscriber fan-out work.\n\n### Fixed\n- Obsidian and other Markdown hosts no longer need to rewrite `$for` wrapper CSS to avoid `display: contents`, preserving grid and row layouts for repeated items.\n- Published runtime base CSS no longer leaks `#mobileNav` or `body[data-mobile-nav-open]` selectors into host pages.\n- Custom renderers that return no element no longer leave invalid `$for` slots behind during diffing or cleanup.\n\n## v0.3.1 - Host stability and control rendering hardening\n\n### Added\n- Runtime style safety tests that block broad `:has()` selectors, `clip-path`, and slider track regressions in shipped CSS.\n- Regression coverage for disabled Switch, Checkbox, and Radio state attributes.\n\n### Changed\n- CI now installs dependencies with `bun install --frozen-lockfile` and runs lint before tests.\n- Disabled Switch, Checkbox, and Radio styling now uses explicit `data-disabled` attributes instead of broad relational selectors.\n- Select and sr-only helper styles avoid `clip-path` for better host and Obsidian CSS compatibility.\n\n### Fixed\n- Slider thumb rendering artifacts caused by painting the range track on the native input box.\n- Input focus visibility after removing custom engineering steppers.\n- Home RC example input labels now use native Input component labels instead of separate text labels.\n- Stat cards no longer clip updated text during cross-document state examples.\n- Markdown calculator examples no longer render duplicate section labels.\n\n## v0.3.0 - Examples overhaul with component audit and i18n\n\n### Added\n- Example gallery: 17 high-quality examples organized by usage scenario (Getting Started, Calculators, Data Browsing, Dashboards, Config Wizards, Decision Support, Platform Features)\n- English translations for all 17 example pages\n- `toolhost-demo`: real `renderToolCall` API with chat-style conversation UI\n- Example rendering infrastructure: `site/routes/examples.js`, `site/pages/examples.slex.js`, `site/data/examples.js`\n- Content discovery: `site/data/content-discovery.js` with locale fallback and allowed-slug filtering\n- `site/data/content-discovery.js`: `discoverExampleMarkdown()` with per-locale discovery\n- SEO metadata for example pages\n- `examples/minimal-cdn/index.html`: zero-build CDN usage example\n- Formula component (`src/components/svelte/content/Formula.svelte`) with KaTeX rendering\n- `src/engine/capabilities.ts`: structured capability docs for AI agents\n- `src/engine/validation.ts`: SPEC contract validation for component specs\n- `src/engine/stdlib.ts`: standard library with `math.clamp`, `math.safeDivide`, and other utilities\n- `src/engine/sandbox-runner.ts`: sandbox runner for secure runtime\n- Component state eval context shadowing test suite (`component-state-shadowing.test.ts`)\n- Collapsible and Callout double-rendering regression tests\n- Slider component name shadowing regression test\n- Tests for content, playground, select, tabs, slider, disclosure, feedback, policy-api\n\n### Changed\n- Examples reduced from 64 to 17 high-quality examples, organized by user story\n- Example source locale: `zh-CN` (with `en-US` translations)\n- `renderChildren` (`helpers.ts`) now clears existing content when children are present\n- Switch component now accepts `checked`/`value` props for initialization consistency with Checkbox\n- Site UI: DocsShell, DocRail, router, shell improvements\n- Components: Input, Select, Tabs, Table, PlaygroundMarkdown refinements\n- CSS: theme-shadcn, text-input, docs-shell styling updates\n- MCP: enhanced with structured capability docs\n\n### Fixed\n- Eval context shadowing: component names `g` and `api` no longer overwrite reserved context keys\n- `renderChildren` double rendering in Collapsible and Callout\n- Voltage divider summary typo (\"输入输入电压\")\n- Salary calculator fallback numbers to match actual calculator output\n- Tabs-and-branching: title and length conversion mismatch\n- 4 pre-existing test failures (ai-docs, page-structure, theme, markdown-content)\n- Toolhost test: added setup import to fix `document is not defined`\n- Badge stretching in grid layout\n- Project-dashboard syntax error\n- Salary-calculator rate configuration\n\n### Removed\n- 47 low-quality/duplicate examples (reduced from 64 to 17)\n- Dead \"Fallback\" copywriting from all example files\n- Post-slex explanatory text from example files\n- Unused `DialogShell.svelte` component\n- Orphaned `test-if` example directory\n- Agent-generated `docs/compose` planning files\n- Temporary `screenshot-*.png` files\n\n## v0.2.0 - First public release\n\n### Added\n- `@slexkit/mcp`: AI Agent Model Context Protocol server with `slexkitDocs`, `slexkitExamples`, `slexkitValidate` tools\n- Protocol marker: `\"slex\": \"0.1\"` required on all Slex expressions and ToolHost templates\n- SPEC contract validation: component specs are now validated against the runtime contract\n- Version sync automation (`scripts/sync-version.ts`) and changelog sync (`scripts/sync-changelog.ts`)\n- AI documentation generation pipeline with structured LLM-friendly output\n- Static site export with SEO metadata engine (`site/data/seo.js`, `site/scripts/export-static.ts`)\n- Chinese documentation for all reference and guide pages\n- Enhanced component state management with lifecycle hooks (`onMount`, `onUnmount`, `onUpdate`)\n\n### Changed\n- Switch component migrated from `checked` to `enabled` state mode\n- Documentation: restructured site content, synced en-US with zh-CN, added reference section\n- Theme: refined select styling, dropdown shadows, footer and info tone polish\n- AI docs generation enhanced with Chinese/English locale awareness\n\n### Fixed\n- Component spec alignment with documentation across all 28 components\n- Site routing and code block highlighting\n- Introduction and quick-start guide wording for clarity\n- Broken links and factual errors in component and reference documentation\n\n## v0.1.9\n\n### Added\n- Icon manager with Phosphor icon system (`registerIcon`, `registerIcons`, `getIcon`, `loadIcon`)\n- Expanded icon support across labeled components (badge, button, callout, etc.)\n- Icon docs page with registration API reference\n\n### Fixed\n- Refined component interactions in static site export\n- Tabs indicator animation restored\n- Callout and toast icon placement in titles\n- Numeric value display formatting\n\n### Changed\n- Site docs shell refactored for static export\n- Site navigation and theme controls alignment\n- Slex naming standardized across codebase\n\n## v0.1.8\n\n### Added\n- CSP-hardened secure runtime sandbox with heartbeat watchdog\n- `mountSecureArtifact()` for isolated iframe rendering\n- `createSlexKitMarkdownRuntimeHost()` for Markdown-hosted SlexKit blocks\n- Streamdown React renderer (`@slexkit/streamdown`)\n- Obsidian plugin adapter (now released through `slexkit/obsidian-slexkit`)\n- Shadcn-compatible CSS theme (`@slexkit/theme-shadcn`)\n- Package boundary wrappers (`@slexkit/runtime`, `@slexkit/components-svelte`)\n- ToolHost with built-in templates: `confirm-action`, `choose-options`, `fill-form`\n\n### Changed\n- Component registration model: side-effect import registers all components\n- Styles reorganized into per-component CSS files\n- Build system: Bun.build with Svelte plugin, split ESM entries\n\n## v0.1.7\n\n### Added\n- `$for` list rendering with keyed reconciliation (delete / add-update-reorder / trim phases)\n- `$if` conditional rendering with enter/leave animation support\n- `$key` strategy: `$value`, property-based, or fallback to index\n- Component instance state modes: `value`, `checked`, `enabled`, `readable`, `none`\n- Lifecycle hooks: `g.onMount_<name>()`, `g.onUnmount_<name>()`, `g.onUpdate_<name>()`\n- Engineering number input with SI prefix parsing\n- Rich error diagnostics with line/column/excerpt display\n\n### Changed\n- Expression evaluation: `new Function()` compilation with reactive dependency tracking\n- Layout tree renderer now supports three rendering paths (normal, `$if`, `$for`)\n- `g` deep-merge preserves keys not present in the new state\n\n## v0.1.6 and earlier\n\n### Added\n- Reactive `g`/`layout` split with expression pipes (`$` read-pipes, `on*` write-pipes)\n- Custom fine-grained reactivity system (~280 lines, no external dependency)\n- Component registry with extensible renderer interface\n- Svelte 5 component adapter (creates stores from props, flushSync DOM)\n- `mount()`, `ingest()`, `boot()` entry points\n- 28 built-in Svelte components across 8 categories\n- `parseSlexSource()` DSL parser with `diagnoseSlexKitSource()` error reporting\n- Documentation site with interactive playground\n",
-      "hash": "48e4fd6e"
+      "body": "\n# Changelog\n\nAll notable changes to SlexKit.\n\n## v0.5.2 - Runtime rendering fixes\n\n### Fixed\n- Preserve explicit text, label, and content attributes when custom elements have no light DOM children.\n- Keep the sandbox's CSP hash in sync with the trusted component layout styles so isolated components render correctly without relaxing the policy.\n- Restore interactive website examples and build adapter demos from pinned local dependencies.\n- Keep grids and their cards aligned in embedded previews, preload sandbox styles, and reduce the documentation site's initial asset size.\n\n## @slexkit/assistant-ui v0.5.1\n\n### Fixed\n- Constrain `@assistant-ui/react-streamdown` to versions compatible with `@assistant-ui/react` 0.14 so a fresh npm install resolves its peer dependencies.\n\n## v0.5.0 - HTML-first interactive documents\n\n### Breaking changes\n- `slex` fences now contain HTML fragments with standard JavaScript and `slex-*` Web Components. The former object-tree DSL, expression strings, and implicit namespace state are no longer supported.\n- Cross-fence state uses the explicit artifact-local `slex.shared` API. Hosts must configure an isolated runtime URL for generated content.\n\n### Added\n- A reusable Web Components entry, custom-element manifest, theme tokens, and updated Markdown, Streamdown, assistant-ui, Tiptap, and Obsidian integrations.\n- Static, non-executing source inspection and cross-browser, adapter, layout, and lifecycle conformance checks.\n\n### Changed\n- Metric cards adapt numeric precision to available width, preserve the original value, and align automatically in responsive rows.\n- Component documentation now describes the HTML contracts in English and Chinese.\n\n### Fixed\n- Frame initialization timeouts no longer leave artifact updates waiting indefinitely.\n- Long labels, native hidden elements, CSS zoom, and RTL numeric rendering now respect their layout and reading direction.\n\n### Validation status\n- The Obsidian desktop fix remains pending verification in the actual desktop application. Browser tests do not establish desktop compatibility.\n\n## v0.4.0 - Production adapters and ToolHost hardening\n\n### Added\n- `@slexkit/assistant-ui`: React assistant-ui adapter package with secure-frame defaults for `slex` code blocks.\n- Browser-openable Assistant UI host example and documentation pages for adapter integration.\n- Internal ToolHost `step` component for multi-step human-input flows inside one tool call.\n- Theme package coverage for base, per-component, and ToolHost/step CSS exports.\n\n### Changed\n- AI docs and standard artifacts now separate public components from ToolHost-only internals: `submit` and `step` remain renderable runtime components but are no longer counted in the public component catalog.\n- `smoke:release` now logs pack/install/smoke stages, validates packed tarballs through a temporary app, checks CLI conformance, and checks the MCP server before reporting success.\n- ToolHost demo and replay fixtures now use the same step/submit flow expected from production host integrations.\n\n### Fixed\n- Radio group list selection styling no longer uses `:has()` in shipped runtime or theme CSS.\n- Tiptap preview controls preserve focus across embedded SlexKit inputs, selects, and transient controls.\n- `step` and `submit` component docs now include synced SPEC examples and API tables.\n- Release smoke no longer hangs after successful MCP validation on Windows.\n## v0.3.4 - Production documentation polish\n\n### Changed\n- Reworked the documentation site shell labels, language menu, mobile navigation, and theme controls so localized pages no longer expose English-only UI chrome.\n- Polished guide, reference, component, example, package README, and AI-facing documentation copy to remove report-like wording and visible placeholder phrasing.\n- Localized generated Chinese component examples and API descriptions, including Formula props, through the component spec documentation pipeline.\n\n### Fixed\n- Chinese documentation no longer renders copied English UI phrases such as counter labels, ToolHost examples, Obsidian status text, or design-system tone labels.\n- Markdown documentation tests now guard against copied English skeleton headings, visible English-only list rows, double-question-mark replacement corruption, stale generated spec blocks, and previously fixed English UI phrase regressions.\n\n## v0.3.3 - Obsidian input control hardening\n\n### Fixed\n- Slider now renders its visual track outside the native range input while keeping the native input for interaction and accessibility, avoiding square thumb artifacts in Obsidian and other host themes.\n- Input fields with trailing units now reset host input chrome with scoped selectors so unit add-ons stay aligned with the text field in Obsidian dark themes.\n\n## v0.3.2 - Host CSS isolation and repeated layout hardening\n\n### Changed\n- `$for` rendering now uses comment anchors and direct child insertion instead of a wrapper element that depended on `display: contents`.\n- Site-only mobile navigation CSS moved out of the runtime base stylesheet and into the documentation site shell.\n- Component accessors now share one reactive effect across subscribers instead of creating duplicate subscriber fan-out work.\n\n### Fixed\n- Obsidian and other Markdown hosts no longer need to rewrite `$for` wrapper CSS to avoid `display: contents`, preserving grid and row layouts for repeated items.\n- Published runtime base CSS no longer leaks `#mobileNav` or `body[data-mobile-nav-open]` selectors into host pages.\n- Custom renderers that return no element no longer leave invalid `$for` slots behind during diffing or cleanup.\n\n## v0.3.1 - Host stability and control rendering hardening\n\n### Added\n- Runtime style safety tests that block broad `:has()` selectors, `clip-path`, and slider track regressions in shipped CSS.\n- Regression coverage for disabled Switch, Checkbox, and Radio state attributes.\n\n### Changed\n- CI now installs dependencies with `bun install --frozen-lockfile` and runs lint before tests.\n- Disabled Switch, Checkbox, and Radio styling now uses explicit `data-disabled` attributes instead of broad relational selectors.\n- Select and sr-only helper styles avoid `clip-path` for better host and Obsidian CSS compatibility.\n\n### Fixed\n- Slider thumb rendering artifacts caused by painting the range track on the native input box.\n- Input focus visibility after removing custom engineering steppers.\n- Home RC example input labels now use native Input component labels instead of separate text labels.\n- Stat cards no longer clip updated text during cross-document state examples.\n- Markdown calculator examples no longer render duplicate section labels.\n\n## v0.3.0 - Examples overhaul with component audit and i18n\n\n### Added\n- Example gallery: 17 high-quality examples organized by usage scenario (Getting Started, Calculators, Data Browsing, Dashboards, Config Wizards, Decision Support, Platform Features)\n- English translations for all 17 example pages\n- `toolhost-demo`: real `renderToolCall` API with chat-style conversation UI\n- Example rendering infrastructure: `site/routes/examples.js`, `site/pages/examples.slex.js`, `site/data/examples.js`\n- Content discovery: `site/data/content-discovery.js` with locale fallback and allowed-slug filtering\n- `site/data/content-discovery.js`: `discoverExampleMarkdown()` with per-locale discovery\n- SEO metadata for example pages\n- `examples/minimal-cdn/index.html`: zero-build CDN usage example\n- Formula component (`src/components/svelte/content/Formula.svelte`) with KaTeX rendering\n- `src/engine/capabilities.ts`: structured capability docs for AI agents\n- `src/engine/validation.ts`: SPEC contract validation for component specs\n- `src/engine/stdlib.ts`: standard library with `math.clamp`, `math.safeDivide`, and other utilities\n- `src/engine/sandbox-runner.ts`: sandbox runner for secure runtime\n- Component state eval context shadowing test suite (`component-state-shadowing.test.ts`)\n- Collapsible and Callout double-rendering regression tests\n- Slider component name shadowing regression test\n- Tests for content, playground, select, tabs, slider, disclosure, feedback, policy-api\n\n### Changed\n- Examples reduced from 64 to 17 high-quality examples, organized by user story\n- Example source locale: `zh-CN` (with `en-US` translations)\n- `renderChildren` (`helpers.ts`) now clears existing content when children are present\n- Switch component now accepts `checked`/`value` props for initialization consistency with Checkbox\n- Site UI: DocsShell, DocRail, router, shell improvements\n- Components: Input, Select, Tabs, Table, PlaygroundMarkdown refinements\n- CSS: theme-shadcn, text-input, docs-shell styling updates\n- MCP: enhanced with structured capability docs\n\n### Fixed\n- Eval context shadowing: component names `g` and `api` no longer overwrite reserved context keys\n- `renderChildren` double rendering in Collapsible and Callout\n- Voltage divider summary typo (\"输入输入电压\")\n- Salary calculator fallback numbers to match actual calculator output\n- Tabs-and-branching: title and length conversion mismatch\n- 4 pre-existing test failures (ai-docs, page-structure, theme, markdown-content)\n- Toolhost test: added setup import to fix `document is not defined`\n- Badge stretching in grid layout\n- Project-dashboard syntax error\n- Salary-calculator rate configuration\n\n### Removed\n- 47 low-quality/duplicate examples (reduced from 64 to 17)\n- Dead \"Fallback\" copywriting from all example files\n- Post-slex explanatory text from example files\n- Unused `DialogShell.svelte` component\n- Orphaned `test-if` example directory\n- Agent-generated `docs/compose` planning files\n- Temporary `screenshot-*.png` files\n\n## v0.2.0 - First public release\n\n### Added\n- `@slexkit/mcp`: AI Agent Model Context Protocol server with `slexkitDocs`, `slexkitExamples`, `slexkitValidate` tools\n- Protocol marker: `\"slex\": \"0.1\"` required on all Slex expressions and ToolHost templates\n- SPEC contract validation: component specs are now validated against the runtime contract\n- Version sync automation (`scripts/sync-version.ts`) and changelog sync (`scripts/sync-changelog.ts`)\n- AI documentation generation pipeline with structured LLM-friendly output\n- Static site export with SEO metadata engine (`site/data/seo.js`, `site/scripts/export-static.ts`)\n- Chinese documentation for all reference and guide pages\n- Enhanced component state management with lifecycle hooks (`onMount`, `onUnmount`, `onUpdate`)\n\n### Changed\n- Switch component migrated from `checked` to `enabled` state mode\n- Documentation: restructured site content, synced en-US with zh-CN, added reference section\n- Theme: refined select styling, dropdown shadows, footer and info tone polish\n- AI docs generation enhanced with Chinese/English locale awareness\n\n### Fixed\n- Component spec alignment with documentation across all 28 components\n- Site routing and code block highlighting\n- Introduction and quick-start guide wording for clarity\n- Broken links and factual errors in component and reference documentation\n\n## v0.1.9\n\n### Added\n- Icon manager with Phosphor icon system (`registerIcon`, `registerIcons`, `getIcon`, `loadIcon`)\n- Expanded icon support across labeled components (badge, button, callout, etc.)\n- Icon docs page with registration API reference\n\n### Fixed\n- Refined component interactions in static site export\n- Tabs indicator animation restored\n- Callout and toast icon placement in titles\n- Numeric value display formatting\n\n### Changed\n- Site docs shell refactored for static export\n- Site navigation and theme controls alignment\n- Slex naming standardized across codebase\n\n## v0.1.8\n\n### Added\n- CSP-hardened secure runtime sandbox with heartbeat watchdog\n- `mountSecureArtifact()` for isolated iframe rendering\n- `createSlexKitMarkdownRuntimeHost()` for Markdown-hosted SlexKit blocks\n- Streamdown React renderer (`@slexkit/streamdown`)\n- Obsidian plugin adapter (now released through `slexkit/obsidian-slexkit`)\n- Shadcn-compatible CSS theme (`@slexkit/theme-shadcn`)\n- Package boundary wrappers (`@slexkit/runtime`, `@slexkit/components-svelte`)\n- ToolHost with built-in templates: `confirm-action`, `choose-options`, `fill-form`\n\n### Changed\n- Component registration model: side-effect import registers all components\n- Styles reorganized into per-component CSS files\n- Build system: Bun.build with Svelte plugin, split ESM entries\n\n## v0.1.7\n\n### Added\n- `$for` list rendering with keyed reconciliation (delete / add-update-reorder / trim phases)\n- `$if` conditional rendering with enter/leave animation support\n- `$key` strategy: `$value`, property-based, or fallback to index\n- Component instance state modes: `value`, `checked`, `enabled`, `readable`, `none`\n- Lifecycle hooks: `g.onMount_<name>()`, `g.onUnmount_<name>()`, `g.onUpdate_<name>()`\n- Engineering number input with SI prefix parsing\n- Rich error diagnostics with line/column/excerpt display\n\n### Changed\n- Expression evaluation: `new Function()` compilation with reactive dependency tracking\n- Layout tree renderer now supports three rendering paths (normal, `$if`, `$for`)\n- `g` deep-merge preserves keys not present in the new state\n\n## v0.1.6 and earlier\n\n### Added\n- Reactive `g`/`layout` split with expression pipes (`$` read-pipes, `on*` write-pipes)\n- Custom fine-grained reactivity system (~280 lines, no external dependency)\n- Component registry with extensible renderer interface\n- Svelte 5 component adapter (creates stores from props, flushSync DOM)\n- `mount()`, `ingest()`, `boot()` entry points\n- 28 built-in Svelte components across 8 categories\n- `parseSlexSource()` DSL parser with `diagnoseSlexKitSource()` error reporting\n- Documentation site with interactive playground\n",
+      "hash": "c3e7dffd"
     }
   ],
   "sandboxSdk": [
@@ -811,27 +811,27 @@
   "standardArtifacts": {
     "slex-html-profile.json": {
       "path": "/standard/slex-html-profile.json",
-      "hash": "bbed2001"
+      "hash": "1fafb887"
     },
     "slex-custom-elements.catalog.json": {
       "path": "/standard/slex-custom-elements.catalog.json",
-      "hash": "1d98a367"
+      "hash": "01741649"
     },
     "slex-sandbox-sdk.json": {
       "path": "/standard/slex-sandbox-sdk.json",
-      "hash": "70f6c720"
+      "hash": "1bec9fd2"
     },
     "slex-static-policy.json": {
       "path": "/standard/slex-static-policy.json",
-      "hash": "7df9bc24"
+      "hash": "95af5056"
     },
     "slex-html-conformance.json": {
       "path": "/standard/slex-html-conformance.json",
-      "hash": "837a84eb"
+      "hash": "70a5b4c5"
     },
     "slex-standard-manifest.json": {
       "path": "/standard/slex-standard-manifest.json",
-      "hash": "856dbc14"
+      "hash": "222a972d"
     }
   },
   "components": [
@@ -2308,26 +2308,26 @@
     "site/content/components/text/en-US.md": "6f1b8f1a",
     "site/content/components/toast/en-US.md": "036841f1",
     "site/content/components/step/en-US.md": "62cf9dd1",
-    "site/content/examples/cross-doc-state-lab/en-US.md": "b70938be",
+    "site/content/examples/cross-doc-state-lab/en-US.md": "8da8e094",
     "site/content/examples/assistant-ui-host/en-US.md": "a1ea2d4f",
-    "site/content/examples/baud-rate-calculator/en-US.md": "09f76849",
-    "site/content/examples/tabs-and-branching/en-US.md": "8bdb8604",
-    "site/content/examples/roi-estimator/en-US.md": "66bb949e",
+    "site/content/examples/baud-rate-calculator/en-US.md": "7936ed13",
+    "site/content/examples/tabs-and-branching/en-US.md": "8560ecdc",
+    "site/content/examples/roi-estimator/en-US.md": "9ded7150",
     "site/content/examples/first-interaction/en-US.md": "49dfb9cd",
     "site/content/examples/hello-slexkit/en-US.md": "e7030a35",
     "site/content/examples/network-policy-fetch-card/en-US.md": "b06165d4",
     "site/content/examples/multi-input-coordination/en-US.md": "97ea2d7c",
-    "site/content/examples/project-dashboard/en-US.md": "921bbca1",
-    "site/content/examples/rc-low-pass-filter/en-US.md": "22b2c279",
-    "site/content/examples/search-filter-table/en-US.md": "e65383e0",
-    "site/content/examples/tech-selection-evaluator/en-US.md": "cdb346cc",
-    "site/content/examples/salary-calculator/en-US.md": "99f370a7",
+    "site/content/examples/project-dashboard/en-US.md": "e129c4dd",
+    "site/content/examples/rc-low-pass-filter/en-US.md": "293ef1d5",
+    "site/content/examples/search-filter-table/en-US.md": "48b12231",
+    "site/content/examples/salary-calculator/en-US.md": "7d15f06b",
     "site/content/examples/project-cost-estimator/en-US.md": "a7d0f9d3",
     "site/content/examples/streamdown-host/en-US.md": "df557438",
+    "site/content/examples/tech-selection-evaluator/en-US.md": "46a04d79",
     "site/content/examples/tiptap-host/en-US.md": "7f3f6252",
-    "site/content/examples/form-wizard-steps/en-US.md": "14ff990b",
-    "site/content/examples/toolhost-demo/en-US.md": "d54f137c",
-    "site/content/examples/voltage-divider/en-US.md": "76df4033",
+    "site/content/examples/form-wizard-steps/en-US.md": "1468ec61",
+    "site/content/examples/toolhost-demo/en-US.md": "409e4f3a",
+    "site/content/examples/voltage-divider/en-US.md": "ea8f9d0f",
     "site/content/guides/ai-agents/en-US.md": "007375bf",
     "site/content/guides/design/en-US.md": "87db15d0",
     "site/content/guides/quick-start/en-US.md": "46119ea0",
@@ -2344,6 +2344,6 @@
     "site/content/reference/standard/en-US.md": "4e9b397d",
     "site/content/reference/usage/en-US.md": "29a421ce",
     "site/content/reference/toolhost/en-US.md": "0e58d865",
-    "site/content/releases/changelog/en-US.md": "48e4fd6e"
+    "site/content/releases/changelog/en-US.md": "c3e7dffd"
   }
 }

package/dist/data/standard/slex-custom-elements.catalog.json

@@ -1,7 +1,7 @@
 {
   "name": "slex-custom-elements-catalog",
   "packageName": "slexkit",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "schemaVersion": "2026-11-html",
   "generatedFrom": "src/web-components/definitions.ts",
   "defaultComponentCount": 28,

package/dist/data/standard/slex-html-conformance.json

@@ -1,7 +1,7 @@
 {
   "name": "slex-html-conformance",
   "packageName": "slexkit",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "schemaVersion": "2026-11-html",
   "profileVersion": "1",
   "fixtures": [

package/dist/data/standard/slex-html-profile.json

@@ -1,7 +1,7 @@
 {
   "name": "slex-html-profile",
   "packageName": "slexkit",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "schemaVersion": "2026-11-html",
   "profileVersion": "1",
   "fenceLanguage": "slex",

package/dist/data/standard/slex-sandbox-sdk.json

@@ -1,7 +1,7 @@
 {
   "name": "slex-sandbox-sdk",
   "packageName": "slexkit",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "global": "slex",
   "members": {
     "root": {

package/dist/data/standard/slex-standard-manifest.json

@@ -1,10 +1,10 @@
 {
   "name": "slex-standard-manifest",
   "packageName": "slexkit",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "schemaVersion": "2026-11-html",
   "profileVersion": "1",
-  "generatedAt": "2026-11-10T17:23:19.705Z",
+  "generatedAt": "2026-11-11T04:08:49.614Z",
   "positioning": "HTML-first interactive Markdown artifact",
   "compatibility": {
     "legacyObjectSource": false,
@@ -13,23 +13,23 @@
   "artifacts": {
     "slex-html-profile.json": {
       "path": "/standard/slex-html-profile.json",
-      "hash": "bbed2001"
+      "hash": "1fafb887"
     },
     "slex-custom-elements.catalog.json": {
       "path": "/standard/slex-custom-elements.catalog.json",
-      "hash": "1d98a367"
+      "hash": "01741649"
     },
     "slex-sandbox-sdk.json": {
       "path": "/standard/slex-sandbox-sdk.json",
-      "hash": "70f6c720"
+      "hash": "1bec9fd2"
     },
     "slex-static-policy.json": {
       "path": "/standard/slex-static-policy.json",
-      "hash": "7df9bc24"
+      "hash": "95af5056"
     },
     "slex-html-conformance.json": {
       "path": "/standard/slex-html-conformance.json",
-      "hash": "837a84eb"
+      "hash": "70a5b4c5"
     }
   }
 }

package/dist/data/standard/slex-static-policy.json

@@ -1,7 +1,7 @@
 {
   "name": "slex-static-policy",
   "packageName": "slexkit",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "inspectionExecutesSource": false,
   "rejected": [
     "external scripts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slexkit/mcp",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Read-only MCP server for SlexKit docs, components, and source validation.",
   "author": "SlexKit contributors",
   "type": "module",