clay-server 3.8.1 → 4.0.0-beta.10

package/lib/public/modules/tool-renderer-chart.js

@@ -0,0 +1,158 @@
+// Truthful fixed-geometry charts for declarative Capsule UI.
+
+import { collectionView, valueAtPath } from './tool-ui-evaluator.js';
+
+var SVG_NS = "http://www.w3.org/2000/svg";
+
+function finiteNumber(value) {
+  var number = Number(value);
+  return Number.isFinite(number) ? number : 0;
+}
+
+function positiveNumber(value, fallback) {
+  var number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : fallback;
+}
+
+export function chartData(state, bind, props, item) {
+  var limit = Math.max(1, Math.min(50, Number(props.maxItems) || 50));
+  var rows = collectionView(valueAtPath(state, bind, item), { pageSize: limit });
+  return rows.map(function (row, index) {
+    var category = props.categoryKey ? valueAtPath(row, props.categoryKey, null) : index + 1;
+    return {
+      label: String(category === undefined || category === null ? "Item " + (index + 1) : category).slice(0, 200),
+      value: Math.max(0, finiteNumber(valueAtPath(row, props.valueKey, null))),
+    };
+  });
+}
+
+export function lineGeometry(data) {
+  var max = data.reduce(function (result, entry) { return Math.max(result, entry.value); }, 0) || 1;
+  return data.map(function (entry, index) {
+    return {
+      x: data.length === 1 ? 50 : index / (data.length - 1) * 100,
+      y: 40 - entry.value / max * 38,
+      label: entry.label,
+      value: entry.value,
+    };
+  });
+}
+
+export function donutGeometry(data) {
+  var limited = data.slice(0, 12);
+  var total = limited.reduce(function (sum, entry) { return sum + entry.value; }, 0);
+  var offset = 0;
+  return limited.map(function (entry, index) {
+    var percent = total > 0 ? entry.value / total * 100 : 0;
+    var segment = { percent: percent, offset: offset, color: index % 8, label: entry.label, value: entry.value };
+    offset += percent;
+    return segment;
+  });
+}
+
+function createSvg(className, viewBox) {
+  var svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", className);
+  svg.setAttribute("viewBox", viewBox);
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  return svg;
+}
+
+function appendAccessibleData(figure, data) {
+  var list = document.createElement("ul");
+  list.className = "tool-chart-data";
+  for (var i = 0; i < data.length; i++) {
+    var entry = document.createElement("li");
+    entry.textContent = data[i].label + ": " + data[i].value;
+    list.appendChild(entry);
+  }
+  figure.appendChild(list);
+}
+
+function renderBar(figure, data) {
+  var svg = createSvg("tool-chart-svg tool-chart-bar", "0 0 100 50");
+  var max = data.reduce(function (result, entry) { return Math.max(result, entry.value); }, 0) || 1;
+  var width = data.length ? Math.max(1, 90 / data.length) : 1;
+  for (var i = 0; i < data.length; i++) {
+    var height = data[i].value / max * 46;
+    var rect = document.createElementNS(SVG_NS, "rect");
+    rect.setAttribute("class", "tool-chart-bar-mark");
+    rect.setAttribute("x", String(5 + i * width));
+    rect.setAttribute("y", String(48 - height));
+    rect.setAttribute("width", String(Math.max(1, width - 2)));
+    rect.setAttribute("height", String(height));
+    svg.appendChild(rect);
+  }
+  figure.appendChild(svg);
+}
+
+function renderLine(figure, data) {
+  var geometry = lineGeometry(data);
+  var svg = createSvg("tool-chart-svg tool-chart-line", "0 0 100 40");
+  if (geometry.length) {
+    var polyline = document.createElementNS(SVG_NS, "polyline");
+    polyline.setAttribute("class", "tool-chart-line-path");
+    polyline.setAttribute("points", geometry.map(function (point) { return point.x.toFixed(2) + "," + point.y.toFixed(2); }).join(" "));
+    svg.appendChild(polyline);
+  }
+  for (var i = 0; i < geometry.length; i++) {
+    var point = document.createElementNS(SVG_NS, "circle");
+    point.setAttribute("class", "tool-chart-line-point");
+    point.setAttribute("cx", geometry[i].x.toFixed(2));
+    point.setAttribute("cy", geometry[i].y.toFixed(2));
+    point.setAttribute("r", "1.8");
+    svg.appendChild(point);
+  }
+  figure.appendChild(svg);
+}
+
+function renderDonut(figure, data) {
+  var segments = donutGeometry(data);
+  var svg = createSvg("tool-chart-svg tool-chart-donut", "0 0 42 42");
+  var track = document.createElementNS(SVG_NS, "circle");
+  track.setAttribute("class", "tool-chart-donut-track");
+  track.setAttribute("cx", "21"); track.setAttribute("cy", "21"); track.setAttribute("r", "15.9155");
+  svg.appendChild(track);
+  for (var i = 0; i < segments.length; i++) {
+    if (segments[i].percent <= 0) continue;
+    var circle = document.createElementNS(SVG_NS, "circle");
+    circle.setAttribute("class", "tool-chart-donut-segment tool-chart-color-" + segments[i].color);
+    circle.setAttribute("cx", "21"); circle.setAttribute("cy", "21"); circle.setAttribute("r", "15.9155");
+    circle.setAttribute("stroke-dasharray", segments[i].percent.toFixed(4) + " " + (100 - segments[i].percent).toFixed(4));
+    circle.setAttribute("stroke-dashoffset", String(-segments[i].offset.toFixed(4)));
+    svg.appendChild(circle);
+  }
+  figure.appendChild(svg);
+}
+
+export function renderChartNode(node, props, context) {
+  var figure = document.createElement("figure");
+  figure.className = "tool-chart tool-chart--" + props.kind;
+  figure.setAttribute("aria-label", String(props.label));
+  var caption = document.createElement("figcaption");
+  caption.textContent = String(props.label);
+  figure.appendChild(caption);
+  var data = chartData(context.state, node.bind, props, context.item);
+  if (props.kind === "donut") data = data.slice(0, 12);
+  if (props.kind === "metric") {
+    var metric = document.createElement("strong");
+    metric.className = "tool-chart-metric";
+    metric.textContent = data.length ? String(data[0].value) : "0";
+    figure.appendChild(metric);
+  } else if (props.kind === "progress") {
+    var maximum = positiveNumber(props.max, 1);
+    var current = Math.min(maximum, data.length ? data[0].value : 0);
+    var progress = document.createElement("progress");
+    progress.className = "tool-chart-progress";
+    progress.max = maximum;
+    progress.value = current;
+    progress.textContent = current + " of " + maximum;
+    figure.appendChild(progress);
+    data = [{ label: props.label, value: current }];
+  } else if (props.kind === "line") renderLine(figure, data);
+  else if (props.kind === "donut") renderDonut(figure, data);
+  else renderBar(figure, data);
+  appendAccessibleData(figure, data);
+  return figure;
+}

package/lib/public/modules/tool-renderer-semantics.js

@@ -0,0 +1,35 @@
+// Fixed class mapping for the validated Capsule UI semantic grammar.
+
+var TOKEN_KEYS = ["tone", "size", "emphasis", "gap", "variant", "align", "justify", "padding", "role"];
+var SAFE_TOKENS = /^[a-z]+(?:-[a-z]+)*$/;
+var TOKEN_VALUES = {
+  tone: ["neutral", "accent", "info", "success", "warning", "danger"],
+  size: ["xs", "sm", "md", "lg"], emphasis: ["subtle", "regular", "strong"],
+  gap: ["none", "xs", "sm", "md", "lg", "xl"],
+  variant: ["plain", "inset", "cards", "divided", "outlined", "raised", "callout", "output", "soft", "primary", "secondary", "ghost", "danger"],
+  align: ["start", "center", "end", "baseline", "stretch"], justify: ["start", "center", "end", "between"],
+  padding: ["none", "sm", "md", "lg"], role: ["body", "muted", "caption", "strong", "output", "display", "section"],
+};
+
+export function semanticClasses(base, props) {
+  var classes = [base];
+  props = props || {};
+  for (var i = 0; i < TOKEN_KEYS.length; i++) {
+    var key = TOKEN_KEYS[i];
+    var value = props[key];
+    if (typeof value === "string" && SAFE_TOKENS.test(value) && TOKEN_VALUES[key].indexOf(value) !== -1) classes.push(base + "--" + key + "-" + value);
+  }
+  if (props.wrap === true) classes.push(base + "--wrap");
+  return classes.join(" ");
+}
+
+export function appendToolIcon(element, name, label) {
+  if (!name) return null;
+  var icon = document.createElement("i");
+  icon.className = "tool-icon";
+  icon.setAttribute("data-lucide", name);
+  if (label) icon.setAttribute("aria-label", label);
+  else icon.setAttribute("aria-hidden", "true");
+  element.appendChild(icon);
+  return icon;
+}

package/lib/public/modules/tool-renderer.js

@@ -0,0 +1,464 @@
+// tool-renderer.js - Host-rendered declarative tool UI vocabulary.
+
+import { bindToolTextInput, isToolTextInputComposing } from './tool-input-composition.js';
+import { refreshIcons } from './icons.js';
+import { semanticClasses, appendToolIcon } from './tool-renderer-semantics.js';
+import { TOOL_LLM_ALIASES, getToolLlmConfiguration, requestAllToolLlmConfigurations, requestToolLlmConfiguration, subscribeToolLlmConfigurations } from './tool-llm-status.js';
+import { collectionView, evaluateCondition, normalizeColumns, normalizeOptions, resolveProps, resolveValue, valueAtPath } from './tool-ui-evaluator.js';
+import { renderAdvancedNode } from './tool-renderer-advanced.js';
+
+var catalogs = Object.create(null);
+var deferredRenders = new WeakMap();
+var renderDisposers = new WeakMap();
+var modelConfigurationRequested = new WeakSet();
+
+function resolveTemplate(value, state, item) {
+  return resolveValue(value, state, item);
+}
+
+function appendChildren(element, node, context) {
+  var children = node.children || [];
+  for (var i = 0; i < children.length; i++) {
+    var child = renderNode(children[i], context);
+    if (child) element.appendChild(child);
+  }
+}
+
+function registerControl(node, props, context) {
+  if (!node.id) return;
+  context.catalog[node.id] = {
+    type: node.type,
+    label: props.label || props.text || node.id,
+    bind: node.bind || null,
+    action: node.action || null,
+  };
+}
+
+function emitNodeAction(node, props, context, extra) {
+  if (!node.action) return;
+  var args = resolveTemplate(props.args || {}, context.state, context.item);
+  var keys = Object.keys(extra || {});
+  for (var i = 0; i < keys.length; i++) args[keys[i]] = extra[keys[i]];
+  if (node.id) args.controlId = node.id;
+  if (node.bind) args.bind = node.bind;
+  context.emit(node.action, args);
+}
+
+function resolvedBoolean(value, context) {
+  if (typeof value === "string") return !!resolveTemplate(value, context.state, context.item);
+  return value === true;
+}
+
+function appendFieldHeading(wrapper, node, props, control, context) {
+  if (props.label) {
+    var label = document.createElement("span");
+    label.className = "tool-field-label";
+    label.textContent = String(props.label);
+    wrapper.appendChild(label);
+  } else if (node.id) control.setAttribute("aria-label", node.id);
+  if (resolvedBoolean(props.required, context)) {
+    control.required = true;
+    control.setAttribute("aria-required", "true");
+  }
+  control.disabled = resolvedBoolean(props.disabled, context);
+  var descriptions = [];
+  if (props.hint) descriptions.push({ className: "tool-field-hint", text: props.hint });
+  if (props.error) {
+    descriptions.push({ className: "tool-field-error", text: props.error, alert: true });
+    control.setAttribute("aria-invalid", "true");
+  }
+  if (!descriptions.length) return false;
+  wrapper.appendChild(control);
+  var ids = [];
+  for (var i = 0; i < descriptions.length; i++) {
+    var copy = document.createElement("span");
+    copy.className = descriptions[i].className;
+    copy.textContent = String(descriptions[i].text);
+    copy.id = "tool-field-copy-" + context.toolId + "-" + context.hintIndex++;
+    if (descriptions[i].alert) copy.setAttribute("role", "alert");
+    ids.push(copy.id);
+    wrapper.appendChild(copy);
+  }
+  control.setAttribute("aria-describedby", ids.join(" "));
+  return true;
+}
+
+function renderInput(node, props, context) {
+  var wrapper = document.createElement("label");
+  wrapper.className = semanticClasses("tool-field", props);
+  var input = document.createElement(node.type === "textarea" ? "textarea" : "input");
+  input.className = "tool-input";
+  var inputTypes = ["text", "search", "email", "url", "number", "range", "date", "time", "datetime-local", "tel"];
+  if (node.type === "input") input.type = inputTypes.indexOf(props.inputType) === -1 ? "text" : props.inputType;
+  if (node.type === "textarea" && props.rows) input.rows = Math.max(2, Math.min(16, Number(props.rows) || 2));
+  if (props.placeholder) input.placeholder = String(props.placeholder);
+  var validation = props.validation || {};
+  if (validation.minLength !== undefined) input.minLength = validation.minLength;
+  if (validation.maxLength !== undefined) input.maxLength = validation.maxLength;
+  if (validation.min !== undefined) input.min = validation.min;
+  if (validation.max !== undefined) input.max = validation.max;
+  if (validation.step !== undefined) input.step = validation.step;
+  if (validation.pattern === "integer") input.pattern = "-?[0-9]+";
+  else if (validation.pattern === "decimal") input.pattern = "-?[0-9]+(?:\\.[0-9]+)?";
+  else if (validation.pattern === "email") input.type = "email";
+  else if (validation.pattern === "url") input.type = "url";
+  input.addEventListener("invalid", function () { if (validation.message && typeof input.setCustomValidity === "function") input.setCustomValidity(validation.message); });
+  input.addEventListener("input", function () { if (typeof input.setCustomValidity === "function") input.setCustomValidity(""); });
+  var value = valueAtPath(context.state, node.bind, context.item);
+  input.value = value === undefined || value === null ? "" : String(value);
+  if (node.id) input.dataset.toolControlId = node.id;
+  bindToolTextInput(input, function (value) {
+    var typedValue = (input.type === "number" || input.type === "range") && value !== "" && Number.isFinite(Number(value)) ? Number(value) : value;
+    emitNodeAction(node, props, context, { value: typedValue });
+  }, {
+    isAlive: function (boundInput) { return context.container.contains(boundInput); },
+    onCompositionEnd: function (settledInput) {
+      var pending = deferredRenders.get(context.container);
+      deferredRenders.delete(context.container);
+      if (!pending || !context.container.contains(settledInput) || node.action) return;
+      renderToolUiNow(pending.toolId, pending.uiTree, pending.state, pending.emit, pending.container);
+    },
+  });
+  if (!appendFieldHeading(wrapper, node, props, input, context)) wrapper.appendChild(input);
+  registerControl(node, props, context);
+  return wrapper;
+}
+
+function renderSelect(node, props, context) {
+  var wrapper = document.createElement("label");
+  wrapper.className = semanticClasses("tool-field", props);
+  var select = document.createElement("select");
+  select.className = "tool-select";
+  if (node.id) select.dataset.toolControlId = node.id;
+  var options = normalizeOptions(props.options);
+  for (var i = 0; i < options.length; i++) {
+    var option = document.createElement("option");
+    var optionValue = options[i].value;
+    var optionLabel = options[i].label;
+    option.value = String(optionValue);
+    option.textContent = String(optionLabel);
+    option.disabled = options[i].disabled;
+    select.appendChild(option);
+  }
+  var value = valueAtPath(context.state, node.bind, context.item);
+  if (value !== undefined && value !== null) select.value = String(value);
+  select.addEventListener("change", function () { emitNodeAction(node, props, context, { value: select.value }); });
+  if (!appendFieldHeading(wrapper, node, props, select, context)) wrapper.appendChild(select);
+  registerControl(node, props, context);
+  return wrapper;
+}
+
+function modelAliasLabel(alias) {
+  return alias.charAt(0).toUpperCase() + alias.slice(1);
+}
+
+function modelOptionLabel(alias, state) {
+  var prefix = modelAliasLabel(alias);
+  if (state.status === "ready" && state.vendorName && state.modelName) return prefix + " · " + state.vendorName + " · " + state.modelName;
+  if (state.status === "error") return prefix + " · Unavailable";
+  return prefix + " · Checking model…";
+}
+
+function renderModelSelect(node, props, context) {
+  var wrapper = document.createElement("div");
+  wrapper.className = "tool-model-select";
+  var field = document.createElement("label");
+  field.className = semanticClasses("tool-field", props);
+  var select = document.createElement("select");
+  select.className = "tool-select tool-model-select-control";
+  if (node.id) select.dataset.toolControlId = node.id;
+  var options = Object.create(null);
+  for (var i = 0; i < TOOL_LLM_ALIASES.length; i++) {
+    var alias = TOOL_LLM_ALIASES[i];
+    var option = document.createElement("option");
+    option.value = alias;
+    option.textContent = modelOptionLabel(alias, getToolLlmConfiguration(alias));
+    options[alias] = option;
+    select.appendChild(option);
+  }
+  var value = valueAtPath(context.state, node.bind, context.item);
+  select.value = TOOL_LLM_ALIASES.indexOf(value) !== -1 ? value : "fast";
+  select.addEventListener("change", function () {
+    emitNodeAction(node, props, context, { value: select.value });
+    updateAlias(select.value, getToolLlmConfiguration(select.value));
+  });
+  if (!appendFieldHeading(field, node, props, select, context)) field.appendChild(select);
+  wrapper.appendChild(field);
+  var feedback = document.createElement("span");
+  feedback.className = "tool-model-select-feedback hidden";
+  feedback.setAttribute("aria-live", "polite");
+  var retry = document.createElement("button");
+  retry.type = "button";
+  retry.className = "tool-model-select-retry hidden";
+  retry.textContent = "Retry";
+  retry.addEventListener("click", function () { requestToolLlmConfiguration(select.value); });
+  wrapper.appendChild(feedback);
+  wrapper.appendChild(retry);
+  function updateAlias(changedAlias, state) {
+    if (options[changedAlias]) options[changedAlias].textContent = modelOptionLabel(changedAlias, state);
+    var selectedState = getToolLlmConfiguration(select.value);
+    var failed = selectedState.status === "error";
+    feedback.textContent = failed ? selectedState.error || "This model is unavailable." : "";
+    feedback.classList.toggle("hidden", !failed);
+    retry.classList.toggle("hidden", !failed);
+  }
+  var unsubscribe = subscribeToolLlmConfigurations(updateAlias);
+  context.disposers.push(unsubscribe);
+  if (!modelConfigurationRequested.has(context.container)) {
+    modelConfigurationRequested.add(context.container);
+    requestAllToolLlmConfigurations();
+  }
+  registerControl(node, props, context);
+  return wrapper;
+}
+
+function renderCheckbox(node, props, context) {
+  var wrapper = document.createElement("label");
+  wrapper.className = semanticClasses("tool-checkbox-field", props);
+  var input = document.createElement("input");
+  input.type = "checkbox";
+  input.className = "tool-checkbox";
+  input.checked = !!valueAtPath(context.state, node.bind, context.item);
+  input.disabled = resolvedBoolean(props.disabled, context);
+  if (node.id) input.dataset.toolControlId = node.id;
+  input.addEventListener("change", function () { emitNodeAction(node, props, context, { value: input.checked }); });
+  wrapper.appendChild(input);
+  var copy = document.createElement("span");
+  copy.className = "tool-checkbox-copy";
+  var label = document.createElement("span");
+  label.className = "tool-field-label";
+  label.textContent = String(props.label || node.id || "Option");
+  copy.appendChild(label);
+  if (props.hint) {
+    var hint = document.createElement("span");
+    hint.className = "tool-field-hint";
+    hint.textContent = String(props.hint);
+    var hintId = "tool-hint-" + context.toolId + "-" + context.hintIndex++;
+    hint.id = hintId;
+    input.setAttribute("aria-describedby", hintId);
+    copy.appendChild(hint);
+  }
+  if (props.error) {
+    var error = document.createElement("span");
+    error.className = "tool-field-error";
+    error.textContent = String(props.error);
+    error.setAttribute("role", "alert");
+    var errorId = "tool-error-" + context.toolId + "-" + context.hintIndex++;
+    error.id = errorId;
+    var described = input.getAttribute("aria-describedby");
+    input.setAttribute("aria-describedby", described ? described + " " + errorId : errorId);
+    input.setAttribute("aria-invalid", "true");
+    copy.appendChild(error);
+  }
+  wrapper.appendChild(copy);
+  registerControl(node, props, context);
+  return wrapper;
+}
+
+function renderTable(node, props, context) {
+  var table = document.createElement("table");
+  table.className = "tool-table";
+  var columns = normalizeColumns(props.columns);
+  var head = document.createElement("thead");
+  var headRow = document.createElement("tr");
+  for (var i = 0; i < columns.length; i++) {
+    var th = document.createElement("th");
+    th.textContent = String(columns[i].label || columns[i].key || "");
+    headRow.appendChild(th);
+  }
+  head.appendChild(headRow);
+  table.appendChild(head);
+  var body = document.createElement("tbody");
+  var rows = collectionView(valueAtPath(context.state, node.bind, context.item), props);
+  for (var ri = 0; ri < rows.length; ri++) {
+    var tr = document.createElement("tr");
+    for (var ci = 0; ci < columns.length; ci++) {
+      var td = document.createElement("td");
+      var cell = valueAtPath(rows[ri], columns[ci].key, null);
+      td.textContent = cell === undefined || cell === null ? "" : String(cell);
+      tr.appendChild(td);
+    }
+    body.appendChild(tr);
+  }
+  table.appendChild(body);
+  return table;
+}
+
+function renderNode(node, context) {
+  if (node.when && !evaluateCondition(node.when, context.state, context.item)) return node.else ? renderNode(node.else, context) : null;
+  var props = resolveProps(node.props || {}, context.state, context.item);
+  var element;
+  var value;
+  if (node.type === "switch") {
+    var switchValue = valueAtPath(context.state, node.bind, context.item);
+    var switchChildren = node.children || [];
+    var fallback = null;
+    for (var si = 0; si < switchChildren.length; si++) {
+      if (switchChildren[si].props.default === true) fallback = switchChildren[si];
+      if (switchChildren[si].props.value === switchValue) return renderNode({ type: "stack", children: switchChildren[si].children || [] }, context);
+    }
+    return fallback ? renderNode({ type: "stack", children: fallback.children || [] }, context) : null;
+  }
+  if (["form", "tabs", "dialog", "menu", "pagination", "chart"].indexOf(node.type) !== -1) return renderAdvancedNode(node, props, context, renderNode);
+  if (["tab", "case", "menu-item"].indexOf(node.type) !== -1) return null;
+  if (node.type === "input" || node.type === "textarea") return renderInput(node, props, context);
+  if (node.type === "select") return renderSelect(node, props, context);
+  if (node.type === "model-select") return renderModelSelect(node, props, context);
+  if (node.type === "checkbox") return renderCheckbox(node, props, context);
+  if (node.type === "table") return renderTable(node, props, context);
+  if (node.type === "divider") {
+    element = document.createElement("hr");
+    element.className = "tool-divider";
+    return element;
+  }
+  if (node.type === "empty-state") {
+    value = valueAtPath(context.state, node.bind, context.item);
+    if (Array.isArray(value) && value.length > 0) return null;
+    element = document.createElement("div");
+    element.className = semanticClasses("tool-empty-state", props);
+    appendToolIcon(element, props.icon, null);
+    if (props.title) {
+      var emptyTitle = document.createElement("strong");
+      emptyTitle.className = "tool-empty-state-title";
+      emptyTitle.textContent = String(props.title);
+      element.appendChild(emptyTitle);
+    }
+    var emptyText = document.createElement("span");
+    emptyText.textContent = String(props.text || "Nothing here yet.");
+    element.appendChild(emptyText);
+    return element;
+  }
+  if (node.type === "list") {
+    element = document.createElement("ul");
+    element.className = semanticClasses("tool-list", props);
+    var items = collectionView(valueAtPath(context.state, node.bind, context.item), props);
+    for (var li = 0; li < items.length; li++) {
+      var listItem = document.createElement("li");
+      var itemContext = Object.assign({}, context, { item: items[li] });
+      if ((node.children || []).length) appendChildren(listItem, node, itemContext);
+      else listItem.textContent = String(items[li]);
+      element.appendChild(listItem);
+    }
+    return element;
+  }
+  if (node.type === "heading") {
+    var level = Math.max(1, Math.min(6, Number(props.level) || 2));
+    element = document.createElement("h" + level);
+    element.className = semanticClasses("tool-heading", props);
+  } else if (node.type === "text") {
+    element = document.createElement("span");
+    element.className = semanticClasses("tool-text", props);
+  } else if (node.type === "badge") {
+    element = document.createElement("span");
+    element.className = semanticClasses("tool-badge", props);
+  } else if (node.type === "button") {
+    element = document.createElement("button");
+    element.type = "button";
+    element.className = semanticClasses("tool-button", props);
+    element.disabled = resolvedBoolean(props.disabled, context);
+    if (props.accessibleLabel) element.setAttribute("aria-label", String(props.accessibleLabel));
+    element.dataset.toolControlId = node.id || "action-" + node.action + "-" + context.autoControlIndex++;
+    element.addEventListener("click", function () { emitNodeAction(node, props, context, {}); });
+    registerControl(node, props, context);
+  } else if (node.type === "icon") {
+    element = document.createElement("span");
+    element.className = semanticClasses("tool-icon-node", props);
+    appendToolIcon(element, props.icon, props.decorative ? null : props.label);
+  } else if (node.type === "callout") {
+    element = document.createElement("aside");
+    element.className = semanticClasses("tool-callout", props);
+    appendToolIcon(element, props.icon, null);
+    var calloutCopy = document.createElement("span");
+    calloutCopy.className = "tool-callout-copy";
+    if (props.title) {
+      var calloutTitle = document.createElement("strong");
+      calloutTitle.textContent = String(props.title);
+      calloutCopy.appendChild(calloutTitle);
+    }
+    if (props.text) {
+      var calloutText = document.createElement("span");
+      calloutText.textContent = String(props.text);
+      calloutCopy.appendChild(calloutText);
+    }
+    element.appendChild(calloutCopy);
+  } else {
+    element = document.createElement(node.type === "section" ? "section" : "div");
+    var base = node.type === "row" ? "tool-row" : node.type === "card" ? "tool-card" : node.type === "section" ? "tool-section" : "tool-stack";
+    element.className = semanticClasses(base, props);
+    if (node.type === "section" && props.accessibleLabel) element.setAttribute("aria-label", String(props.accessibleLabel));
+    if (node.type === "section" && props.label) {
+      var sectionLabel = document.createElement("span");
+      sectionLabel.className = "tool-section-label";
+      sectionLabel.textContent = String(props.label);
+      element.appendChild(sectionLabel);
+    }
+  }
+  if (node.id) element.dataset.toolControlId = node.id;
+  value = node.bind ? valueAtPath(context.state, node.bind, context.item) : props.text || props.label;
+  if (node.type === "button") {
+    if (props.icon && props.iconPosition !== "end") appendToolIcon(element, props.icon, null);
+    var buttonLabel = document.createElement("span");
+    buttonLabel.textContent = String(props.label || props.accessibleLabel || "Action");
+    element.appendChild(buttonLabel);
+    if (props.icon && props.iconPosition === "end") appendToolIcon(element, props.icon, null);
+  } else if (node.type === "badge") {
+    appendToolIcon(element, props.icon, null);
+    var badgeText = document.createElement("span");
+    badgeText.textContent = String(value === undefined || value === null ? "" : value);
+    element.appendChild(badgeText);
+  } else if (value !== undefined && value !== null && node.type !== "icon" && node.type !== "callout" && node.type !== "section") {
+    element.textContent = String(value);
+  }
+  appendChildren(element, node, context);
+  return element;
+}
+
+function renderToolUiNow(toolId, uiTree, state, emit, container) {
+  var active = document.activeElement;
+  var activeControlId = active && container.contains(active) ? active.dataset.toolControlId : null;
+  var selectionStart = activeControlId && typeof active.selectionStart === "number" ? active.selectionStart : null;
+  var selectionEnd = activeControlId && typeof active.selectionEnd === "number" ? active.selectionEnd : null;
+  var catalog = Object.create(null);
+  var previousDisposers = renderDisposers.get(container) || [];
+  for (var di = 0; di < previousDisposers.length; di++) previousDisposers[di]();
+  var disposers = [];
+  catalogs[toolId] = catalog;
+  container.innerHTML = "";
+  var node = renderNode(uiTree, { toolId: toolId, state: state || {}, item: null, emit: emit, catalog: catalog, container: container, hintIndex: 1, autoControlIndex: 1, disposers: disposers, activeControlId: activeControlId });
+  renderDisposers.set(container, disposers);
+  if (node) container.appendChild(node);
+  if (typeof requestAnimationFrame === "function" && typeof lucide !== "undefined") refreshIcons();
+  if (activeControlId) {
+    var controls = container.querySelectorAll("[data-tool-control-id]");
+    for (var i = 0; i < controls.length; i++) {
+      if (controls[i].dataset.toolControlId !== activeControlId) continue;
+      controls[i].focus({ preventScroll: true });
+      if (selectionStart !== null && typeof controls[i].setSelectionRange === "function") {
+        controls[i].setSelectionRange(selectionStart, selectionEnd);
+      }
+      break;
+    }
+  }
+}
+
+export function renderToolUi(toolId, uiTree, state, emit, container) {
+  var active = document.activeElement;
+  if (active && container.contains(active) && isToolTextInputComposing(active)) {
+    deferredRenders.set(container, { toolId: toolId, uiTree: uiTree, state: state, emit: emit, container: container });
+    return;
+  }
+  deferredRenders.delete(container);
+  renderToolUiNow(toolId, uiTree, state, emit, container);
+}
+
+export function disposeToolUi(container) {
+  var disposers = renderDisposers.get(container) || [];
+  for (var i = 0; i < disposers.length; i++) disposers[i]();
+  renderDisposers.delete(container);
+  modelConfigurationRequested.delete(container);
+  deferredRenders.delete(container);
+}
+
+export function getControlCatalog(toolId) {
+  return Object.assign({}, catalogs[toolId] || {});
+}