clay-server 3.8.1 → 4.0.0-beta.10

package/lib/public/modules/tool-llm-status.js

@@ -0,0 +1,167 @@
+// Compact provider/model status for LLM-enabled Capsule surfaces.
+
+import { getWs } from './ws-ref.js';
+
+var surfaces = [];
+var requestCounter = 0;
+var activeRequests = Object.create(null);
+var states = Object.create(null);
+var subscribers = [];
+
+export var TOOL_LLM_ALIASES = Object.freeze(["fast", "standard", "deep"]);
+
+function safeAlias(alias) {
+  return alias === "fast" || alias === "deep" ? alias : "standard";
+}
+
+function isAlias(alias) {
+  return alias === "fast" || alias === "standard" || alias === "deep";
+}
+
+export function initialToolLlmAlias(manifest) {
+  return manifest && isAlias(manifest.modelAlias) ? manifest.modelAlias : null;
+}
+
+export function toolLlmDisplayValue(modelState) {
+  var ready = modelState && modelState.status === "ready" && modelState.vendorName && modelState.modelName;
+  return ready ? modelState.vendorName + " · " + modelState.modelName : "No model configured";
+}
+
+export function toolLlmShouldRetry(modelState) {
+  return !!modelState && modelState.status === "error";
+}
+
+function currentSurfaces() {
+  surfaces = surfaces.filter(function (surface) { return !!surface.root; });
+  return surfaces;
+}
+
+function notifyAlias(alias) {
+  var current = subscribers.slice();
+  for (var i = 0; i < current.length; i++) current[i](alias, getToolLlmConfiguration(alias));
+}
+
+export function getToolLlmConfiguration(alias) {
+  alias = safeAlias(alias);
+  return Object.assign({ status: "loading", vendorName: "", modelName: "", error: "" }, states[alias] || {});
+}
+
+export function subscribeToolLlmConfigurations(listener) {
+  subscribers.push(listener);
+  return function () {
+    var index = subscribers.indexOf(listener);
+    if (index !== -1) subscribers.splice(index, 1);
+  };
+}
+
+function renderSurface(surface) {
+  if (!surface.alias) {
+    surface.value.textContent = "Selected when Capsule runs";
+    surface.value.title = "The concrete model is selected when this Capsule requests an LLM capability.";
+    surface.error.classList.add("hidden");
+    surface.retry.classList.add("hidden");
+    return;
+  }
+  var state = states[surface.alias] || { status: "loading", vendorName: "", modelName: "", error: "" };
+  var ready = state.status === "ready" && state.vendorName && state.modelName;
+  surface.value.textContent = toolLlmDisplayValue(state);
+  surface.value.title = ready ? "Capsule " + surface.alias + " model: " + state.vendorName + " · " + state.modelName : "No configured Capsule model";
+  surface.error.textContent = state.error || "";
+  surface.error.classList.toggle("hidden", !state.error);
+  surface.retry.classList.toggle("hidden", !toolLlmShouldRetry(state));
+  surface.retry.disabled = false;
+  surface.retry.textContent = "Retry";
+}
+
+function renderAlias(alias) {
+  var current = currentSurfaces();
+  for (var i = 0; i < current.length; i++) {
+    if (current[i].alias === alias) renderSurface(current[i]);
+  }
+}
+
+export function requestToolLlmConfiguration(alias) {
+  alias = safeAlias(alias);
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    activeRequests[alias] = null;
+    states[alias] = { status: "error", vendorName: "", modelName: "", error: "Connect to Clay to check the Capsule model." };
+    renderAlias(alias);
+    notifyAlias(alias);
+    return;
+  }
+  requestCounter++;
+  activeRequests[alias] = "tool-llm-config-" + requestCounter;
+  states[alias] = { status: "loading", vendorName: "", modelName: "", error: "" };
+  renderAlias(alias);
+  notifyAlias(alias);
+  ws.send(JSON.stringify({ type: "tool_llm_config_get", requestId: activeRequests[alias], alias: alias }));
+}
+
+export function requestAllToolLlmConfigurations() {
+  for (var i = 0; i < TOOL_LLM_ALIASES.length; i++) requestToolLlmConfiguration(TOOL_LLM_ALIASES[i]);
+}
+
+export function handleToolLlmConfigState(msg) {
+  if (!isAlias(msg.alias)) return;
+  var alias = msg.alias;
+  if (msg.requestId && msg.requestId !== activeRequests[alias]) return;
+  activeRequests[alias] = null;
+  states[alias] = {
+    status: msg.status === "ready" ? "ready" : "error",
+    vendorName: msg.vendorName || msg.vendor || "",
+    modelName: msg.modelName || msg.model || "",
+    error: msg.error || "",
+  };
+  renderAlias(alias);
+  notifyAlias(alias);
+}
+
+export function createToolLlmStatus(alias) {
+  alias = isAlias(alias) ? alias : null;
+  var root = document.createElement("section");
+  root.className = "tool-llm-status";
+  root.setAttribute("aria-label", "Capsule model status");
+  var identity = document.createElement("div");
+  identity.className = "tool-llm-identity";
+  var label = document.createElement("span");
+  label.className = "tool-llm-label";
+  label.textContent = "Model";
+  var value = document.createElement("span");
+  value.className = "tool-llm-value";
+  value.setAttribute("aria-live", "polite");
+  identity.appendChild(label);
+  identity.appendChild(value);
+  var actions = document.createElement("div");
+  actions.className = "tool-llm-actions";
+  var retry = document.createElement("button");
+  retry.type = "button";
+  retry.className = "tool-llm-action hidden";
+  retry.addEventListener("click", function () {
+    if (surface.alias) requestToolLlmConfiguration(surface.alias);
+  });
+  var error = document.createElement("p");
+  error.className = "tool-llm-error hidden";
+  actions.appendChild(retry);
+  root.appendChild(identity);
+  root.appendChild(actions);
+  root.appendChild(error);
+  var surface = { root: root, alias: alias, value: value, retry: retry, error: error };
+  surfaces.push(surface);
+  renderSurface(surface);
+  if (alias) requestToolLlmConfiguration(alias);
+  return {
+    element: root,
+    setAlias: function (nextAlias) {
+      if (!isAlias(nextAlias)) return;
+      surface.alias = nextAlias;
+      renderSurface(surface);
+      requestToolLlmConfiguration(nextAlias);
+    },
+    dispose: function () {
+      surface.root = null;
+      var index = surfaces.indexOf(surface);
+      if (index !== -1) surfaces.splice(index, 1);
+    },
+  };
+}

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

@@ -23,7 +23,7 @@ var SESSION_TOOLS = [
   { id: "file-browser-btn",        icon: "folder-tree",    label: "File browser" },
   { id: "terminal-sidebar-btn",    icon: "square-terminal", label: "Terminal",        countId: "terminal-sidebar-count" },
   { id: "sticky-notes-sidebar-btn", icon: "sticky-note",   label: "Sticky Notes",    countId: "sticky-notes-sidebar-count" },
-  { id: "scheduler-btn",           icon: "calendar-clock", label: "Scheduled Tasks" },
+  { id: "project-logs-btn",        icon: "notebook-tabs",  label: "Logs",            countId: "project-logs-count" },
   { id: "loop-tool-btn",           icon: "repeat",         label: "Loop" },
   { id: "git-sidebar-btn",         icon: "git-branch",     label: "Git",             countId: "git-sidebar-count" },
   { id: "mcp-btn",                 icon: "cable",          label: "MCP Servers",     countId: "mcp-sidebar-count" },
@@ -34,7 +34,6 @@ var MATE_TOOLS = [
   { id: "mate-memory-btn",       icon: "brain",          label: "Memory",          countId: "mate-memory-count" },
   { id: "mate-knowledge-btn",    icon: "book-open",      label: "Knowledge",       countId: "mate-knowledge-count" },
   { id: "mate-sticky-notes-btn", icon: "sticky-note",    label: "Sticky Notes" },
-  { id: "mate-scheduler-btn",    icon: "calendar-clock", label: "Scheduled Tasks" },
   { id: "mate-debate-btn",       icon: "mic",            label: "Debate" },
   { id: "mate-mcp-btn",          icon: "cable",          label: "MCP Servers",     countId: "mate-mcp-sidebar-count" },
   { id: "mate-skills-btn",       icon: "puzzle",         label: "Skills" },
@@ -53,10 +52,75 @@ var PALETTES = {
   },
 };
 
+// Tools that were replaced in the session palette. A saved preference naming
+// the old id would otherwise silently drop out (its element no longer exists)
+// and the replacement would append to the end of the palette instead of
+// inheriting the slot the user had chosen.
+var LEGACY_SESSION_TOOL_IDS = {
+  "scheduler-btn": "project-logs-btn",
+};
+
 var _saveTimers = {};
 var _draggingEl = null;
 var _draggingPaletteName = null;
 
+function indexOfId(list, id) {
+  for (var i = 0; i < list.length; i++) {
+    if (list[i] === id) return i;
+  }
+  return -1;
+}
+
+// Rewrite a saved preference so a replaced tool keeps its slot.
+//
+// If the user already has an explicit preference for the replacement, that
+// choice wins and the legacy id is simply dropped: their position, and whether
+// they hid it, are never overridden. Otherwise the legacy id is replaced in
+// place, at the exact index it occupied, in whichever list it appeared in.
+//
+// Exported for tests; returns new arrays and never mutates the input.
+export function normalizeToolPreferences(name, prefs) {
+  var order = (prefs && prefs.order) || [];
+  var hidden = (prefs && prefs.hidden) || [];
+  var result = { order: order.slice(), hidden: hidden.slice(), migrated: false };
+  if (name !== "session") return result;
+
+  var legacyIds = Object.keys(LEGACY_SESSION_TOOL_IDS);
+  for (var i = 0; i < legacyIds.length; i++) {
+    var legacyId = legacyIds[i];
+    var replacementId = LEGACY_SESSION_TOOL_IDS[legacyId];
+    var inOrder = indexOfId(result.order, legacyId) !== -1;
+    var inHidden = indexOfId(result.hidden, legacyId) !== -1;
+    if (!inOrder && !inHidden) continue;
+
+    var explicit = indexOfId(result.order, replacementId) !== -1
+      || indexOfId(result.hidden, replacementId) !== -1;
+    result.order = rewriteList(result.order, legacyId, replacementId, explicit);
+    result.hidden = rewriteList(result.hidden, legacyId, replacementId, explicit);
+    result.migrated = true;
+  }
+  return result;
+}
+
+// Drop the legacy id when the replacement is already chosen explicitly;
+// otherwise swap it in place. Any duplicate of the replacement introduced by
+// the swap is removed, keeping the first occurrence.
+function rewriteList(list, legacyId, replacementId, dropLegacy) {
+  var out = [];
+  var seen = {};
+  for (var i = 0; i < list.length; i++) {
+    var id = list[i];
+    if (id === legacyId) {
+      if (dropLegacy) continue;
+      id = replacementId;
+    }
+    if (seen[id]) continue;
+    seen[id] = true;
+    out.push(id);
+  }
+  return out;
+}
+
 export function initToolPalettes() {
   for (var name in PALETTES) {
     buildPalette(name);
@@ -495,11 +559,13 @@ function applyPreferences(name, prefs) {
   var hiddenGrid = hiddenSection ? hiddenSection.querySelector('.tool-palette-hidden-grid') : null;
   if (!active || !hiddenGrid) return;
 
+  var normalized = normalizeToolPreferences(name, prefs);
+
   var hiddenSet = {};
-  var hiddenList = prefs.hidden || [];
+  var hiddenList = normalized.hidden;
   for (var i = 0; i < hiddenList.length; i++) hiddenSet[hiddenList[i]] = true;
 
-  var orderList = prefs.order || [];
+  var orderList = normalized.order;
   // Any tools not in the stored order are appended in registry order so
   // newly-added tools surface automatically for existing users.
   var placed = {};
@@ -525,6 +591,12 @@ function applyPreferences(name, prefs) {
       hiddenGrid.appendChild(hbtn);
     }
   }
+
+  // Write the rewritten preference back once, through the normal save path, so
+  // the migration survives reloads and reaches the user's other devices. The
+  // save reads the DOM this function just arranged, so it records exactly what
+  // is on screen.
+  if (normalized.migrated) queueSave(name);
 }
 
 function queueSave(name) {

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