clay-server 3.8.1 → 4.0.0-beta.2

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

@@ -0,0 +1,285 @@
+// Host-owned advanced controls for the safe Capsule UI vocabulary.
+
+import { collectionView, normalizeOptions, resolveProps, resolveValue, valueAtPath } from './tool-ui-evaluator.js';
+import { renderChartNode } from './tool-renderer-chart.js';
+
+var dialogOpeners = new WeakMap();
+
+function nextGroupToken(context, prefix, authoredId) {
+  if (authoredId) return authoredId;
+  if (!Number.isInteger(context.autoControlIndex) || context.autoControlIndex < 1) context.autoControlIndex = 1;
+  return prefix + "-" + context.autoControlIndex++;
+}
+
+function emit(node, props, context, extra) {
+  var args = Object.assign({}, resolveValue(props.args || {}, context.state, context.item), extra || {});
+  if (node.id) args.controlId = node.id;
+  context.emit(node.action, args);
+}
+
+function appendRenderedChildren(target, children, context, renderNode) {
+  for (var i = 0; i < children.length; i++) {
+    var rendered = renderNode(children[i], context);
+    if (rendered) target.appendChild(rendered);
+  }
+}
+
+function renderForm(node, props, context, renderNode) {
+  var form = document.createElement("form");
+  form.className = "tool-form";
+  if (props.label) form.setAttribute("aria-label", String(props.label));
+  appendRenderedChildren(form, node.children || [], context, renderNode);
+  var error = document.createElement("div");
+  error.className = "tool-form-error hidden";
+  error.setAttribute("role", "alert");
+  form.appendChild(error);
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    var invalid = form.querySelector(":invalid");
+    if (invalid) {
+      error.textContent = invalid.validationMessage || "Check the highlighted fields.";
+      error.classList.remove("hidden");
+      invalid.focus();
+      return;
+    }
+    error.classList.add("hidden");
+    emit(node, props, context, {});
+  });
+  var submit = document.createElement("button");
+  submit.type = "submit";
+  submit.className = "tool-button tool-button--variant-primary";
+  submit.dataset.toolControlId = node.id || "form-submit-" + context.autoControlIndex++;
+  submit.textContent = String(props.submitLabel || "Submit");
+  form.appendChild(submit);
+  return form;
+}
+
+function renderTabs(node, props, context, renderNode) {
+  var wrapper = document.createElement("div");
+  wrapper.className = "tool-tabs";
+  var list = document.createElement("div");
+  list.className = "tool-tab-list";
+  list.setAttribute("role", "tablist");
+  list.setAttribute("aria-label", String(props.label || "Sections"));
+  var panels = document.createElement("div");
+  var selected = valueAtPath(context.state, node.bind, context.item);
+  var groupToken = nextGroupToken(context, "tabs", node.id);
+  var children = node.children || [];
+  var dynamic = props.options ? normalizeOptions(props.options) : null;
+  var tabs = dynamic ? dynamic.map(function (option) { return { props: option, children: [] }; }) : children;
+  var buttons = [];
+  for (var i = 0; i < tabs.length; i++) {
+    var tab = tabs[i];
+    var tabProps = resolveProps(tab.props || {}, context.state, context.item);
+    var active = selected === tabProps.value || (selected === undefined && i === 0);
+    var button = document.createElement("button");
+    button.type = "button";
+    button.className = "tool-tab";
+    button.textContent = String(tabProps.label);
+    button.setAttribute("role", "tab");
+    button.setAttribute("aria-selected", active ? "true" : "false");
+    button.tabIndex = active ? 0 : -1;
+    button.disabled = tabProps.disabled === true;
+    var panelId = "tool-tab-panel-" + context.toolId + "-" + groupToken + "-" + i;
+    var tabId = "tool-tab-" + context.toolId + "-" + groupToken + "-" + i;
+    button.id = tabId;
+    button.setAttribute("aria-controls", panelId);
+    button.dataset.tabIndex = String(i);
+    button.addEventListener("click", function (event) {
+      var index = Number(event.currentTarget.dataset.tabIndex);
+      emit(node, props, context, { value: resolveProps(tabs[index].props || {}, context.state, context.item).value });
+    });
+    buttons.push(button);
+    list.appendChild(button);
+    if (active) {
+      var panel = document.createElement("div");
+      panel.id = panelId;
+      panel.className = "tool-tab-panel";
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", tabId);
+      appendRenderedChildren(panel, tab.children || [], context, renderNode);
+      panels.appendChild(panel);
+    }
+  }
+  list.addEventListener("keydown", function (event) {
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].indexOf(event.key) === -1) return;
+    event.preventDefault();
+    var enabled = buttons.filter(function (button) { return !button.disabled; });
+    if (!enabled.length) return;
+    var index = enabled.indexOf(document.activeElement);
+    var next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + enabled.length) % enabled.length;
+    enabled[next].focus();
+  });
+  wrapper.appendChild(list);
+  wrapper.appendChild(panels);
+  return wrapper;
+}
+
+function renderDialog(node, props, context, renderNode) {
+  var placeholder = document.createElement("span");
+  var dialogToken = nextGroupToken(context, "dialog", node.id);
+  if (props.open !== true) {
+    var openerId = dialogOpeners.get(context.container);
+    dialogOpeners.delete(context.container);
+    var returnTimer = openerId ? setTimeout(function () {
+      var controls = context.container.querySelectorAll("[data-tool-control-id]");
+      for (var i = 0; i < controls.length; i++) if (controls[i].dataset.toolControlId === openerId) controls[i].focus({ preventScroll: true });
+    }, 0) : null;
+    if (returnTimer) context.disposers.push(function () { clearTimeout(returnTimer); });
+    return placeholder;
+  }
+  if (context.activeControlId) dialogOpeners.set(context.container, context.activeControlId);
+  var overlay = document.createElement("div");
+  overlay.className = "tool-dialog-overlay";
+  var dialog = document.createElement("section");
+  dialog.className = "tool-dialog";
+  dialog.setAttribute("role", "dialog");
+  dialog.setAttribute("aria-modal", "true");
+  var title = document.createElement("h3");
+  var titleId = "tool-dialog-title-" + context.toolId + "-" + dialogToken;
+  title.id = titleId;
+  title.className = "tool-dialog-title";
+  title.textContent = String(props.label);
+  dialog.appendChild(title);
+  dialog.setAttribute("aria-labelledby", titleId);
+  if (props.description) {
+    var description = document.createElement("p");
+    var descriptionId = "tool-dialog-description-" + context.toolId + "-" + dialogToken;
+    description.id = descriptionId;
+    description.className = "tool-dialog-description";
+    description.textContent = String(props.description);
+    dialog.appendChild(description);
+    dialog.setAttribute("aria-describedby", descriptionId);
+  }
+  var close = document.createElement("button");
+  close.type = "button";
+  close.className = "tool-dialog-close";
+  close.textContent = "Close";
+  close.setAttribute("aria-label", "Close " + String(props.label));
+  close.addEventListener("click", function () { context.emit(props.closeAction, {}); });
+  dialog.appendChild(close);
+  appendRenderedChildren(dialog, node.children || [], context, renderNode);
+  overlay.appendChild(dialog);
+  overlay.addEventListener("mousedown", function (event) { if (event.target === overlay) context.emit(props.closeAction, {}); });
+  overlay.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") { event.preventDefault(); context.emit(props.closeAction, {}); return; }
+    if (event.key !== "Tab") return;
+    var focusable = dialog.querySelectorAll("button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex='-1'])");
+    if (!focusable.length) return;
+    var first = focusable[0];
+    var last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
+    else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+  });
+  var focusTimer = setTimeout(function () { if (context.container.contains(overlay)) close.focus(); }, 0);
+  context.disposers.push(function () { clearTimeout(focusTimer); });
+  return overlay;
+}
+
+function renderMenu(node, props, context) {
+  var wrapper = document.createElement("div");
+  wrapper.className = "tool-menu";
+  var trigger = document.createElement("button");
+  trigger.type = "button";
+  trigger.className = "tool-button tool-button--variant-ghost";
+  trigger.dataset.toolControlId = node.id || "menu-trigger-" + context.autoControlIndex++;
+  trigger.textContent = String(props.triggerLabel || props.label);
+  trigger.setAttribute("aria-haspopup", "menu");
+  trigger.setAttribute("aria-expanded", "false");
+  var menu = document.createElement("div");
+  menu.className = "tool-menu-popup hidden";
+  menu.setAttribute("role", "menu");
+  menu.setAttribute("aria-label", String(props.label));
+  var dynamic = props.options ? normalizeOptions(props.options) : null;
+  var items = dynamic ? dynamic.map(function (option) { return { action: node.action, props: { label: option.label, disabled: option.disabled, args: { value: option.value } } }; }) : node.children || [];
+  for (var i = 0; i < items.length; i++) {
+    var item = document.createElement("button");
+    item.type = "button";
+    item.className = "tool-menu-item";
+    item.setAttribute("role", "menuitem");
+    var itemProps = resolveProps(items[i].props || {}, context.state, context.item);
+    item.textContent = String(itemProps.label);
+    item.disabled = itemProps.disabled === true;
+    item.dataset.menuIndex = String(i);
+    item.addEventListener("click", function (event) {
+      var selected = items[Number(event.currentTarget.dataset.menuIndex)];
+      closeMenu(true);
+      emit(selected, resolveProps(selected.props || {}, context.state, context.item), context, {});
+    });
+    menu.appendChild(item);
+  }
+  function closeMenu(focus) { menu.classList.add("hidden"); trigger.setAttribute("aria-expanded", "false"); if (focus) trigger.focus(); }
+  function openMenu() { menu.classList.remove("hidden"); trigger.setAttribute("aria-expanded", "true"); var first = menu.querySelector("[role='menuitem']:not(:disabled)"); if (first) first.focus(); }
+  trigger.addEventListener("click", function () { if (menu.classList.contains("hidden")) openMenu(); else closeMenu(false); });
+  trigger.addEventListener("keydown", function (event) { if (event.key === "ArrowDown") { event.preventDefault(); openMenu(); } });
+  menu.addEventListener("keydown", function (event) {
+    var controls = Array.prototype.slice.call(menu.querySelectorAll("[role='menuitem']:not(:disabled)"));
+    if (event.key === "Escape") { event.preventDefault(); closeMenu(true); return; }
+    if (["ArrowDown", "ArrowUp", "Home", "End"].indexOf(event.key) === -1) return;
+    event.preventDefault();
+    if (!controls.length) return;
+    var current = controls.indexOf(document.activeElement);
+    var next = event.key === "Home" ? 0 : event.key === "End" ? controls.length - 1 : (current + (event.key === "ArrowDown" ? 1 : -1) + controls.length) % controls.length;
+    controls[next].focus();
+  });
+  var outside = function (event) { if (!wrapper.contains(event.target)) closeMenu(false); };
+  document.addEventListener("mousedown", outside);
+  context.disposers.push(function () { document.removeEventListener("mousedown", outside); });
+  wrapper.appendChild(trigger);
+  wrapper.appendChild(menu);
+  return wrapper;
+}
+
+function renderPagination(node, props, context) {
+  var nav = document.createElement("nav");
+  nav.className = "tool-pagination";
+  nav.setAttribute("aria-label", String(props.label || "Pagination"));
+  var page = Math.max(1, Number(valueAtPath(context.state, node.bind, context.item)) || 1);
+  var total = Math.max(0, Number(props.total) || 0);
+  var pageSize = Math.max(1, Math.min(100, Number(props.pageSize) || 20));
+  var pages = Math.max(1, Math.ceil(total / pageSize));
+  function appendPageButton(target, label, current) {
+    var button = document.createElement("button");
+    button.type = "button";
+    button.className = "tool-button tool-button--variant-ghost";
+    button.textContent = label;
+    button.disabled = target < 1 || target > pages;
+    if (current) button.setAttribute("aria-current", "page");
+    button.addEventListener("click", function () { context.emit(props.pageAction, { value: target, pageSize: pageSize }); });
+    nav.appendChild(button);
+  }
+  appendPageButton(page - 1, "Previous", false);
+  var first = Math.max(1, Math.min(pages - 4, page - 2));
+  var last = Math.min(pages, first + 4);
+  for (var pi = first; pi <= last; pi++) appendPageButton(pi, String(pi), pi === page);
+  var status = document.createElement("span");
+  status.textContent = "Page " + Math.min(page, pages) + " of " + pages;
+  status.setAttribute("aria-live", "polite");
+  nav.appendChild(status);
+  appendPageButton(page + 1, "Next", false);
+  if (Array.isArray(props.pageSizes) && props.pageSizeAction) {
+    var size = document.createElement("select");
+    size.className = "tool-select tool-pagination-size";
+    size.setAttribute("aria-label", "Items per page");
+    props.pageSizes.slice(0, 10).forEach(function (value) {
+      var option = document.createElement("option");
+      option.value = String(value);
+      option.textContent = String(value) + " per page";
+      option.selected = value === pageSize;
+      size.appendChild(option);
+    });
+    size.addEventListener("change", function () { context.emit(props.pageSizeAction, { value: Number(size.value) }); });
+    nav.appendChild(size);
+  }
+  return nav;
+}
+
+export function renderAdvancedNode(node, props, context, renderNode) {
+  if (node.type === "form") return renderForm(node, props, context, renderNode);
+  if (node.type === "tabs") return renderTabs(node, props, context, renderNode);
+  if (node.type === "dialog") return renderDialog(node, props, context, renderNode);
+  if (node.type === "menu") return renderMenu(node, props, context);
+  if (node.type === "pagination") return renderPagination(node, props, context);
+  if (node.type === "chart") return renderChartNode(node, props, context);
+  return null;
+}

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;
+}