slexkit 0.2.0 → 0.3.0

package/dist/runtime.js

@@ -513,6 +513,163 @@ function isEngineeringNumberResult(value) {
   return !!value && typeof value === "object" && "raw" in value && "number" in value && "valid" in value && "prefix" in value && "unit" in value && "normalized" in value;
 }
 
+// src/engine/stdlib.ts
+function toNumber(value) {
+  return Number(value);
+}
+function finiteNumber(value, fallback = 0) {
+  const parsed = toNumber(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+function digits(value, fallback) {
+  const parsed = Math.trunc(finiteNumber(value, fallback));
+  return Math.max(0, Math.min(20, parsed));
+}
+function finiteValues(values) {
+  if (!Array.isArray(values))
+    return [];
+  return values.map(toNumber).filter(Number.isFinite);
+}
+function formatFixed(value, digitCount = 2) {
+  const parsed = toNumber(value);
+  return Number.isFinite(parsed) ? parsed.toFixed(digitCount) : "NaN";
+}
+function locale(value) {
+  return typeof value === "string" && value.trim() ? value : "en-US";
+}
+function currencyCode(value) {
+  return typeof value === "string" && /^[A-Za-z]{3}$/.test(value) ? value.toUpperCase() : "USD";
+}
+function formatNumber(value, digitCount, localeName, notation, style, currency, minimumFractionDigits = 0) {
+  const parsed = toNumber(value);
+  if (!Number.isFinite(parsed))
+    return "NaN";
+  return new Intl.NumberFormat(localeName, {
+    maximumFractionDigits: digitCount,
+    minimumFractionDigits,
+    notation,
+    style,
+    currency
+  }).format(parsed);
+}
+function freezeDeep(value) {
+  for (const child of Object.values(value)) {
+    if (child && typeof child === "object")
+      freezeDeep(child);
+  }
+  return Object.freeze(value);
+}
+var slexkitStd = freezeDeep({
+  math: {
+    clamp(value, min, max) {
+      const lower = finiteNumber(min);
+      const upper = finiteNumber(max);
+      const parsed = finiteNumber(value);
+      return Math.min(Math.max(parsed, Math.min(lower, upper)), Math.max(lower, upper));
+    },
+    round(value, digitValue = 0) {
+      const factor = 10 ** digits(digitValue, 0);
+      return Math.round(finiteNumber(value) * factor) / factor;
+    },
+    safeDivide(numerator, denominator, fallback = 0) {
+      const divisor = toNumber(denominator);
+      if (!Number.isFinite(divisor) || divisor === 0)
+        return finiteNumber(fallback);
+      const quotient = toNumber(numerator) / divisor;
+      return Number.isFinite(quotient) ? quotient : finiteNumber(fallback);
+    },
+    percent(part, total, digitValue = 1) {
+      const ratio = slexkitStd.math.safeDivide(part, total, NaN) * 100;
+      return slexkitStd.math.round(ratio, digitValue);
+    },
+    lerp(start, end, t) {
+      const a = finiteNumber(start);
+      return a + (finiteNumber(end) - a) * finiteNumber(t);
+    }
+  },
+  stats: {
+    sum(values) {
+      return finiteValues(values).reduce((total, value) => total + value, 0);
+    },
+    mean(values) {
+      const numbers = finiteValues(values);
+      return numbers.length ? slexkitStd.stats.sum(numbers) / numbers.length : NaN;
+    },
+    min(values) {
+      const numbers = finiteValues(values);
+      return numbers.length ? Math.min(...numbers) : NaN;
+    },
+    max(values) {
+      const numbers = finiteValues(values);
+      return numbers.length ? Math.max(...numbers) : NaN;
+    },
+    median(values) {
+      const numbers = finiteValues(values).sort((a, b) => a - b);
+      if (!numbers.length)
+        return NaN;
+      const middle = Math.floor(numbers.length / 2);
+      return numbers.length % 2 ? numbers[middle] : (numbers[middle - 1] + numbers[middle]) / 2;
+    }
+  },
+  format: {
+    fixed(value, digitValue = 2) {
+      return formatFixed(value, digits(digitValue, 2));
+    },
+    number(value, digitValue = 0, localeName = "en-US") {
+      return formatNumber(value, digits(digitValue, 0), locale(localeName));
+    },
+    compact(value, digitValue = 1, localeName = "en-US") {
+      return formatNumber(value, digits(digitValue, 1), locale(localeName), "compact");
+    },
+    percent(ratio, digitValue = 1) {
+      return `${formatFixed(finiteNumber(ratio) * 100, digits(digitValue, 1))}%`;
+    },
+    currency(value, currency = "USD", localeName = "en-US") {
+      return formatNumber(value, 2, locale(localeName), undefined, "currency", currencyCode(currency), 2);
+    }
+  },
+  units: {
+    withUnit(value, unit, digitValue = 2) {
+      const suffix = typeof unit === "string" ? unit : String(unit ?? "");
+      return `${formatFixed(value, digits(digitValue, 2))}${suffix ? ` ${suffix}` : ""}`;
+    },
+    bytes(value, digitValue = 1) {
+      const units = ["B", "KB", "MB", "GB", "TB", "PB"];
+      let amount = Math.abs(finiteNumber(value));
+      let index = 0;
+      while (amount >= 1024 && index < units.length - 1) {
+        amount /= 1024;
+        index += 1;
+      }
+      const sign = finiteNumber(value) < 0 ? -1 : 1;
+      return `${formatFixed(amount * sign, digits(digitValue, 1))} ${units[index]}`;
+    },
+    duration(ms, digitValue = 1) {
+      const value = finiteNumber(ms);
+      const abs = Math.abs(value);
+      if (abs < 1000)
+        return `${formatFixed(value, 0)} ms`;
+      if (abs < 60000)
+        return `${formatFixed(value / 1000, digits(digitValue, 1))} s`;
+      if (abs < 3600000)
+        return `${formatFixed(value / 60000, digits(digitValue, 1))} min`;
+      return `${formatFixed(value / 3600000, digits(digitValue, 1))} h`;
+    },
+    si(value, unit = "", digitValue = 2) {
+      const units = ["", "k", "M", "G", "T", "P"];
+      let amount = Math.abs(finiteNumber(value));
+      let index = 0;
+      while (amount >= 1000 && index < units.length - 1) {
+        amount /= 1000;
+        index += 1;
+      }
+      const sign = finiteNumber(value) < 0 ? -1 : 1;
+      const suffix = typeof unit === "string" ? unit : String(unit ?? "");
+      return `${formatFixed(amount * sign, digits(digitValue, 2))} ${units[index]}${suffix}`.trim();
+    }
+  }
+});
+
 // src/engine/component-state.ts
 var IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
 var componentStateProxies = new WeakMap;
@@ -743,6 +900,20 @@ function warnDuplicateState(ns, name, currentType, currentPath, previous) {
     console.warn(`[SlexKit][${ns}] Component state '${name}' is used by multiple component types (${previous.type}, ${currentType}); the latest rendered type controls write behavior.`);
   }
 }
+function dynamicStateBinding(type, props) {
+  const mode = getComponentStateMode(type);
+  const value = mode === "checked" ? props.$checked ?? props.$value : mode === "enabled" ? props.$enabled : props.$value;
+  return typeof value === "string" ? value.trim() : undefined;
+}
+function isMirroredValueControlPair(previousType, currentType) {
+  return previousType === "input" && currentType === "slider" || previousType === "slider" && currentType === "input";
+}
+function shouldWarnDuplicateState(currentType, currentBinding, previous) {
+  if (currentBinding && previous.stateBinding === currentBinding && isMirroredValueControlPair(previous.type, currentType)) {
+    return false;
+  }
+  return true;
+}
 function warnForState(ns, name, path) {
   console.warn(`[SlexKit][${ns}] Component state '${name}' is used with $for at ${path}; repeated items share one namespace-level instance state.`);
 }
@@ -756,11 +927,15 @@ function prepareComponentStatesInner(layout, components, componentTypes, ns, see
     const props = val;
     const path = parentPath ? `${parentPath}.${key}` : key;
     if (name && isStatefulComponent(type)) {
+      const stateBinding = dynamicStateBinding(type, props);
       const previous = seen.get(name);
-      if (previous)
-        warnDuplicateState(ns, name, type, path, previous);
-      else
-        seen.set(name, { type, path });
+      if (previous) {
+        if (shouldWarnDuplicateState(type, stateBinding, previous)) {
+          warnDuplicateState(ns, name, type, path, previous);
+        }
+      } else {
+        seen.set(name, { type, path, stateBinding });
+      }
       if (props.$for && isWritableComponent(type))
         warnForState(ns, name, path);
       const state = ensureComponentState(name, type, components, componentTypes);
@@ -773,9 +948,15 @@ function prepareComponentStates(layout, components, componentTypes, ns) {
   prepareComponentStatesInner(layout, components, componentTypes, ns, new Map);
 }
 function buildComponentEvalContext(g, components, componentTypes, api, forCtx) {
-  const ctx = { g: createGProxy(g, components, componentTypes) };
+  const ctx = {
+    g: createGProxy(g, components, componentTypes),
+    std: slexkitStd
+  };
+  const gKeys = new Set(Object.keys(rawRecord(g)));
   for (const name of Object.keys(rawRecord(components))) {
-    if (IDENTIFIER.test(name)) {
+    if (name === "std" || name === "g" || name === "api")
+      continue;
+    if (IDENTIFIER.test(name) && !gKeys.has(name)) {
       ctx[name] = publicComponentState(name, components[name], componentTypes);
     }
   }
@@ -783,6 +964,8 @@ function buildComponentEvalContext(g, components, componentTypes, api, forCtx) {
     ctx.api = api;
   if (forCtx) {
     for (const k of Object.keys(forCtx)) {
+      if (k === "std")
+        continue;
       Object.defineProperty(ctx, k, {
         get: () => {
           const current = forCtx[k];
@@ -953,6 +1136,7 @@ function renderIfNode(fullKey, props, container, g, components, componentTypes,
           };
           currentEl = renderWithFallback(renderer, innerProps, name, {
             g,
+            std: slexkitStd,
             api,
             dir: options.dir,
             labels: options.labels,
@@ -1031,6 +1215,7 @@ function renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, re
     };
     el = renderWithFallback(renderer, innerProps, name, {
       g,
+      std: slexkitStd,
       api,
       dir: options.dir,
       labels: options.labels,
@@ -1180,6 +1365,7 @@ function renderNormalNode(fullKey, props, container, g, components, componentTyp
   };
   const el = renderWithFallback(renderer, nodeProps, name, {
     g,
+    std: slexkitStd,
     api,
     dir: options.dir,
     labels: options.labels,
@@ -1533,7 +1719,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.2.0";
+var SLEXKIT_VERSION = "0.3.0";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {
@@ -1573,6 +1759,9 @@ function currentOrigin() {
   return "http://localhost";
 }
 function resolveUrl(url) {
+  try {
+    return new URL(url);
+  } catch {}
   try {
     return new URL(url, currentOrigin());
   } catch {
@@ -2133,6 +2322,1324 @@ function createSecureRuntime(policy, hostAdapter) {
     }
   };
 }
+// src/components/spec-helpers.ts
+var SINCE = "0.1.0";
+function docs(type) {
+  return {
+    href: `/docs/components/${type}`,
+    anchors: {
+      api: `${type}-api-reference`,
+      examples: `${type}-canonical-example`
+    }
+  };
+}
+function isSlexExpression(value) {
+  return typeof value.namespace === "string" && typeof value.layout === "object" && value.layout !== null;
+}
+function example(type, propsOrSource, title = "Basic usage") {
+  return {
+    id: "basic",
+    title,
+    source: isSlexExpression(propsOrSource) ? {
+      slex: propsOrSource.slex ?? SLEX_PROTOCOL_VERSION,
+      ...propsOrSource
+    } : {
+      slex: SLEX_PROTOCOL_VERSION,
+      namespace: `spec_${type.replaceAll("-", "_")}_basic`,
+      layout: {
+        [`${type}:demo`]: propsOrSource
+      }
+    }
+  };
+}
+var semanticTones = ["info", "success", "warning", "danger", "muted"];
+var inputState = ["input", "slider", "select", "tabs", "radio-group"];
+var checkedState = ["checkbox"];
+var enabledState = ["switch"];
+var readableState = ["stat", "text", "progress", "badge", "callout", "code-block", "divider", "link", "table", "section"];
+function stateFor(type) {
+  if (inputState.includes(type))
+    return "value";
+  if (checkedState.includes(type))
+    return "checked";
+  if (enabledState.includes(type))
+    return "enabled";
+  if (readableState.includes(type))
+    return "readable";
+  return "none";
+}
+function component(spec) {
+  return {
+    status: "ready",
+    since: SINCE,
+    docs: docs(spec.type),
+    state: spec.state ?? stateFor(spec.type),
+    ...spec
+  };
+}
+var childContent = {
+  allowed: true,
+  description: "Nested component fields are rendered as child content in field order."
+};
+var noChildren = {
+  allowed: false,
+  description: "This component does not render nested child components."
+};
+
+// src/components/entries/accordion.spec.ts
+var accordionSpec = component({
+  type: "accordion",
+  category: "Disclosure",
+  title: "Accordion",
+  summary: "Expandable grouped panels.",
+  description: "Use accordion to reveal one or more sections from a compact list of panels.",
+  props: {
+    value: { type: "string | string[]", dynamic: true, description: "Current expanded item value; use an array when multiple is true." },
+    multiple: { type: "boolean", default: false, description: "Allow multiple items to be expanded at the same time." },
+    items: { type: "array", description: "Panel definitions with value, label, content, and optional icon." },
+    "items[].icon": { type: "string", description: "Icon name shown before an item trigger label." },
+    onchange: { type: "write-expression", description: "Write expression invoked when expanded items change." }
+  },
+  children: noChildren,
+  examples: [example("accordion", {
+    namespace: "doc_accordion_typical",
+    layout: {
+      "accordion:faq": {
+        multiple: true,
+        value: [
+          "install"
+        ],
+        items: [
+          {
+            value: "install",
+            label: "Install",
+            icon: "download-simple",
+            content: "Prepare dependencies."
+          },
+          {
+            value: "review",
+            label: "Review",
+            icon: "check-circle",
+            content: "Check the result."
+          },
+          {
+            value: "ship",
+            label: "Ship",
+            icon: "rocket-launch",
+            content: "Publish the change."
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/badge.spec.ts
+var badgeSpec = component({
+  type: "badge",
+  category: "Content",
+  title: "Badge",
+  summary: "Compact label for status or classification.",
+  description: "Use badge to annotate nearby content with a short semantic label.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Badge text." },
+    text: { type: "string", dynamic: true, description: "Alias for label." },
+    content: { type: "string", dynamic: true, description: "Alias for label." },
+    icon: { type: "string", description: "Icon name shown before the badge label." },
+    tone: { type: "string", values: semanticTones, default: "info", description: "Semantic tone applied to the badge." },
+    variant: { type: "string", values: semanticTones, description: "Alias for tone." }
+  },
+  children: noChildren,
+  examples: [example("badge", {
+    namespace: "doc_badge_typical",
+    layout: {
+      "row:badges": {
+        "badge:ready": {
+          label: "ready",
+          icon: "check-circle",
+          tone: "success"
+        },
+        "badge:pending": {
+          label: "pending",
+          tone: "warning"
+        },
+        "badge:info": {
+          label: "info",
+          tone: "info"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/button.spec.ts
+var buttonSpec = component({
+  type: "button",
+  category: "Action",
+  title: "Button",
+  summary: "Action trigger.",
+  description: "Use button for explicit actions in interactive SlexKit layouts.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Visible button text and accessible name." },
+    icon: { type: "string", description: "Icon name shown before the label." },
+    iconOnly: { type: "boolean", default: false, description: "Show only the icon while retaining label as the accessible name." },
+    variant: { type: "string", values: ["primary", "secondary", "danger", "ghost"], default: "primary", description: "Semantic action variant." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the action." },
+    href: { type: "string", dynamic: true, description: "Render the button surface as a link to this URL." },
+    target: { type: "string", description: "Link target used when href is present." },
+    title: { type: "string", dynamic: true, description: "Tooltip and accessible-label fallback." },
+    selected: { type: "boolean", dynamic: true, description: "Render the icon in its selected visual state." },
+    active: { type: "boolean", dynamic: true, description: "Render the icon in its active visual state." },
+    pressed: { type: "boolean", dynamic: true, description: "Expose pressed state and render the selected icon style." },
+    onclick: { type: "write-expression", description: "Write expression invoked when the button is clicked." }
+  },
+  children: noChildren,
+  examples: [example("button", {
+    namespace: "doc_button_typical",
+    layout: {
+      "row:actions": {
+        "button:save": {
+          label: "Save",
+          icon: "floppy-disk",
+          variant: "primary"
+        },
+        "button:cancel": {
+          label: "Cancel",
+          variant: "secondary"
+        },
+        "button:delete": {
+          label: "Delete",
+          variant: "danger"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/callout.spec.ts
+var calloutSpec = component({
+  type: "callout",
+  category: "Content",
+  title: "Callout",
+  summary: "Highlighted contextual message.",
+  description: "Use callout for notes, warnings, and other contextual blocks.",
+  props: {
+    title: { type: "string", dynamic: true, description: "Callout title." },
+    heading: { type: "string", dynamic: true, description: "Alias for title." },
+    label: { type: "string", dynamic: true, description: "Alias for title." },
+    icon: { type: "string", description: "Icon name shown before the title." },
+    text: { type: "string", dynamic: true, description: "Callout body text." },
+    message: { type: "string", dynamic: true, description: "Alias for text." },
+    content: { type: "string", dynamic: true, description: "Alias for text." },
+    tone: { type: "string", values: ["info", "success", "warning", "danger"], default: "info", description: "Semantic tone for the callout." }
+  },
+  children: childContent,
+  examples: [example("callout", {
+    namespace: "doc_callout_typical",
+    layout: {
+      "callout:notice": {
+        tone: "info",
+        title: "Notice",
+        icon: "info",
+        text: "Use callout for information that should stand out."
+      }
+    }
+  })]
+});
+
+// src/components/entries/card.spec.ts
+var cardSpec = component({
+  type: "card",
+  category: "Layout",
+  title: "Card",
+  summary: "Bordered grouping container.",
+  description: "Use card to group related content on a bounded surface.",
+  props: {
+    title: { type: "string", dynamic: true, description: "Card title." },
+    icon: { type: "string", description: "Icon name shown before the title." },
+    tone: { type: "string", values: semanticTones, description: "Optional semantic tone for the card surface." }
+  },
+  children: childContent,
+  examples: [example("card", {
+    namespace: "doc_card_typical",
+    layout: {
+      "card:metrics": {
+        title: "Metrics",
+        icon: "chart-bar",
+        "grid:items": {
+          columns: 2,
+          "stat:requests": {
+            label: "Requests",
+            value: "1.2k",
+            unit: "/min"
+          },
+          "stat:latency": {
+            label: "Latency",
+            value: "42",
+            unit: "ms"
+          }
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/checkbox.spec.ts
+var checkboxSpec = component({
+  type: "checkbox",
+  category: "Input",
+  title: "Checkbox",
+  summary: "Boolean checkbox input.",
+  description: "Use checkbox for binary choices that can be toggled independently.",
+  props: {
+    checked: { type: "boolean", default: false, dynamic: true, description: "Checked state." },
+    label: { type: "string", dynamic: true, description: "Checkbox label." },
+    icon: { type: "string", description: "Icon name shown before the visible label." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the checkbox." },
+    haptic: { type: "boolean", default: true, description: "Enable vibration feedback on supported devices." },
+    haptics: { type: "boolean", default: true, description: "Alias for haptic." },
+    onchange: { type: "write-expression", description: "Write expression invoked when checked state changes." }
+  },
+  children: noChildren,
+  examples: [example("checkbox", {
+    namespace: "doc_checkbox_typical",
+    layout: {
+      "checkbox:agree": {
+        checked: true,
+        label: "I agree",
+        icon: "handshake"
+      }
+    }
+  })]
+});
+
+// src/components/entries/code-block.spec.ts
+var codeBlockSpec = component({
+  type: "code-block",
+  category: "Content",
+  title: "Code Block",
+  summary: "Formatted code or log block.",
+  description: "Use code-block for static code samples, configuration snippets, and logs.",
+  props: {
+    code: { type: "string", dynamic: true, description: "Code text content." },
+    source: { type: "string", dynamic: true, description: "Alias for code." },
+    content: { type: "string", dynamic: true, description: "Alias for code." },
+    language: { type: "string", description: "Language label." },
+    title: { type: "string", description: "Code block title." },
+    icon: { type: "string", description: "Icon name shown before the title." },
+    lineNumbers: { type: "boolean", default: true, description: "Show line numbers." }
+  },
+  children: noChildren,
+  examples: [example("code-block", {
+    namespace: "doc_code_block_typical",
+    layout: {
+      "code-block:config": {
+        title: "Config",
+        icon: "code",
+        language: "js",
+        code: "export const enabled = true;"
+      }
+    }
+  })]
+});
+
+// src/components/entries/collapsible.spec.ts
+var collapsibleSpec = component({
+  type: "collapsible",
+  category: "Disclosure",
+  title: "Collapsible",
+  summary: "Single expandable region.",
+  description: "Use collapsible to show or hide one related content region.",
+  props: {
+    open: { type: "boolean", default: false, dynamic: true, description: "Expanded state." },
+    trigger: { type: "string", dynamic: true, description: "Trigger button text." },
+    icon: { type: "string", description: "Icon name shown before trigger text." },
+    content: { type: "string", dynamic: true, description: "Static body content." },
+    onchange: { type: "write-expression", description: "Write expression invoked when open state changes." }
+  },
+  children: childContent,
+  examples: [example("collapsible", {
+    namespace: "doc_collapsible_typical",
+    layout: {
+      "collapsible:more": {
+        open: true,
+        trigger: "Details",
+        icon: "caret-circle-down",
+        content: "This secondary content can be collapsed."
+      }
+    }
+  })]
+});
+
+// src/components/entries/column.spec.ts
+var columnSpec = component({
+  type: "column",
+  category: "Layout",
+  title: "Column",
+  summary: "Vertical layout container.",
+  description: "Use column to stack child components vertically in field order.",
+  props: {},
+  children: childContent,
+  examples: [example("column", {
+    namespace: "doc_column_typical",
+    layout: {
+      "column:form": {
+        "input:name": {
+          placeholder: "Name"
+        },
+        "input:email": {
+          placeholder: "Email"
+        },
+        "button:save": {
+          label: "Save"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/divider.spec.ts
+var dividerSpec = component({
+  type: "divider",
+  category: "Content",
+  title: "Divider",
+  summary: "Visual separator.",
+  description: "Use divider to separate related regions, optionally with a label.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Text shown in the divider." },
+    icon: { type: "string", description: "Icon name shown before the label." }
+  },
+  children: noChildren,
+  examples: [example("divider", {
+    namespace: "doc_divider_typical",
+    layout: {
+      "column:content": {
+        "text:top": {
+          text: "Above"
+        },
+        "divider:line": {
+          label: "Divider",
+          icon: "flag"
+        },
+        "text:bottom": {
+          text: "Below"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/formula.spec.ts
+var formulaSpec = component({
+  type: "formula",
+  category: "Display",
+  title: "Formula",
+  summary: "Reactive KaTeX formula display.",
+  description: "Use formula to render SlexKit state and computed values through KaTeX.",
+  props: {
+    tex: { type: "string", dynamic: true, description: "KaTeX source to render." },
+    formula: { type: "string", dynamic: true, description: "Alias for tex." },
+    value: { type: "string", dynamic: true, description: "Alias for tex." },
+    displayMode: { type: "boolean", default: true, description: "Render as display math when true; inline math when false." },
+    display: { type: "boolean", default: true, description: "Alias for displayMode." },
+    block: { type: "boolean", default: true, description: "Alias for displayMode." }
+  },
+  children: noChildren,
+  examples: [example("formula", {
+    namespace: "doc_formula_typical",
+    g: {
+      r: 1e4,
+      c: 100,
+      fc: 159.15
+    },
+    layout: {
+      "formula:cutoff": {
+        $tex: "'f_c = \\\\frac{1}{2\\\\pi RC} = ' + g.fc + '\\\\text{ Hz}'"
+      }
+    }
+  })]
+});
+
+// src/components/entries/grid.spec.ts
+var gridSpec = component({
+  type: "grid",
+  category: "Layout",
+  title: "Grid",
+  summary: "Responsive grid container.",
+  description: "Use grid to arrange child components in responsive columns.",
+  props: {
+    columns: { type: "number", default: 1, dynamic: true, description: "Base column count." },
+    smColumns: { type: "number", dynamic: true, description: "Column count at the small breakpoint." },
+    mdColumns: { type: "number", dynamic: true, description: "Column count at the medium breakpoint." },
+    lgColumns: { type: "number", dynamic: true, description: "Column count at the large breakpoint." },
+    xlColumns: { type: "number", dynamic: true, description: "Column count at the extra-large breakpoint." },
+    gap: { type: "string", dynamic: true, description: "Spacing between grid items." }
+  },
+  children: childContent,
+  examples: [example("grid", {
+    namespace: "doc_grid_typical",
+    layout: {
+      "grid:stats": {
+        columns: 1,
+        mdColumns: 3,
+        "stat:a": {
+          label: "Requests",
+          value: "1.2k"
+        },
+        "stat:b": {
+          label: "Success",
+          value: "98%"
+        },
+        "stat:c": {
+          label: "Errors",
+          value: "3"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/icon.spec.ts
+var iconSpec = component({
+  type: "icon",
+  category: "Component",
+  title: "Icon",
+  summary: "Shared icon field capability.",
+  description: "Icon is a shared field capability, not an independent icon component type.",
+  props: {
+    icon: { type: "string", description: "Icon name resolved through the global icon manager." },
+    iconOnly: { type: "boolean", description: "Render only the icon while retaining an accessible label where supported." },
+    "items[].icon": { type: "string", description: "Accordion item trigger icon." },
+    "options[].icon": { type: "string", description: "Select or radio option icon." },
+    "columns[].icon": { type: "string", description: "Table column header icon." },
+    "tabs[].icon": { type: "string", description: "Tab trigger icon." },
+    "tabs[].iconOnly": { type: "boolean", description: "Tab trigger icon-only mode." }
+  },
+  children: noChildren,
+  examples: [example("button", { label: "Settings", icon: "gear-six", iconOnly: true, variant: "ghost" }, "Icon field usage")]
+});
+
+// src/components/entries/input.spec.ts
+var inputSpec = component({
+  type: "input",
+  category: "Input",
+  title: "Input",
+  summary: "Text or engineering-value input.",
+  description: "Use input for editable text and engineering numeric values.",
+  props: {
+    value: { type: "string", dynamic: true, description: "Current input value." },
+    label: { type: "string", dynamic: true, description: "Input label." },
+    unit: { type: "string", dynamic: true, description: "Trailing unit text." },
+    description: { type: "string", dynamic: true, description: "Assistive description below the input." },
+    help: { type: "string", dynamic: true, description: "Alias for description." },
+    hint: { type: "string", dynamic: true, description: "Alias for description." },
+    error: { type: "string", dynamic: true, description: "Error text shown below the input and linked with aria-describedby." },
+    errorMessage: { type: "string", dynamic: true, description: "Alias for error." },
+    invalid: { type: "boolean", default: false, dynamic: true, description: "Mark the input as invalid with aria-invalid and error styling." },
+    placeholder: { type: "string", description: "Placeholder text for empty values." },
+    type: { type: "string", default: "text", description: "Input value kind; use engineering for parsed engineering values." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable editing." },
+    readonly: { type: "boolean", default: false, dynamic: true, description: "Make the input read-only." },
+    readOnly: { type: "boolean", default: false, dynamic: true, description: "Alias for readonly." },
+    required: { type: "boolean", default: false, dynamic: true, description: "Mark the input as required." },
+    id: { type: "string", description: "Native input id; defaults to a stable id derived from the component name." },
+    name: { type: "string", description: "Native input name attribute." },
+    min: { type: "string | number", dynamic: true, description: "Minimum value used by numeric input controls." },
+    max: { type: "string | number", dynamic: true, description: "Maximum value used by numeric input controls." },
+    step: { type: "string | number", dynamic: true, description: "Step size used by numeric input controls." },
+    controls: { type: "boolean", default: true, dynamic: true, description: "Show decrement and increment buttons for numeric inputs." },
+    onchange: { type: "write-expression", description: "Write expression invoked when the value changes." }
+  },
+  children: noChildren,
+  examples: [example("input", {
+    namespace: "doc_input_typical",
+    layout: {
+      "input:name": {
+        label: "Project",
+        value: "SlexKit",
+        placeholder: "Enter name",
+        description: "Visible labels keep form fields scannable."
+      }
+    }
+  })]
+});
+
+// src/components/entries/link.spec.ts
+var linkSpec = component({
+  type: "link",
+  category: "Content",
+  title: "Link",
+  summary: "Inline navigation link.",
+  description: "Use link to navigate to another page or resource.",
+  props: {
+    href: { type: "string", description: "Target URL." },
+    text: { type: "string", dynamic: true, description: "Visible link text." },
+    label: { type: "string", dynamic: true, description: "Alias for text." },
+    content: { type: "string", dynamic: true, description: "Alias for text." },
+    icon: { type: "string", description: "Icon name shown before link text." },
+    target: { type: "string", description: "Native link target attribute." },
+    variant: { type: "string", values: ["default", "muted"], default: "default", description: "Link visual variant." }
+  },
+  children: noChildren,
+  examples: [example("link", {
+    namespace: "doc_link_typical",
+    layout: {
+      "column:links": {
+        "link:docs": {
+          href: "/components",
+          icon: "arrow-square-out",
+          text: "View components"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/playground.spec.ts
+var playgroundSpec = component({
+  type: "playground",
+  category: "Tooling",
+  title: "Playground",
+  summary: "Interactive source preview.",
+  description: "Use playground in documentation surfaces to render editable SlexKit or Markdown examples.",
+  props: {
+    source: { type: "object | string", description: "SlexKit or Markdown source to preview." },
+    sourceType: { type: "string", values: ["slex", "markdown", "auto-markdown"], default: "slex", description: "Source parser mode." },
+    title: { type: "string", description: "Playground title." },
+    previewAlign: { type: "string", values: ["center", "start"], default: "center", description: "Vertical preview alignment in render mode." },
+    alignPreview: { type: "string", values: ["center", "start"], description: "Alias for previewAlign." },
+    previewPlacement: { type: "string", values: ["center", "start"], description: "Alias for previewAlign." },
+    previewMinHeight: { type: "string", description: "Minimum preview area height." },
+    previewMaxWidth: { type: "string", description: "Maximum preview content width." },
+    themeToggle: { type: "boolean", default: false, description: "Show the theme toggle action." },
+    showThemeToggle: { type: "boolean", default: false, description: "Alias for themeToggle." },
+    enableThemeToggle: { type: "boolean", default: false, description: "Alias for themeToggle." },
+    themeLabel: { type: "string", description: "Accessible label for the theme toggle action." },
+    themeToggleLabel: { type: "string", description: "Alias for themeLabel." },
+    sourceTypeLabel: { type: "string", description: "Accessible label for the source type selector." },
+    copyLabel: { type: "string", description: "Accessible label for the copy source action." },
+    openWebLabel: { type: "string", description: "Accessible label for opening the source in the standalone playground." },
+    webUrl: { type: "string", description: "Standalone playground URL used by the open action." },
+    playgroundUrl: { type: "string", description: "Alias for webUrl." }
+  },
+  children: noChildren,
+  examples: [example("playground", {
+    namespace: "doc_playground_typical",
+    layout: {
+      "playground:demo": {
+        title: "Stat Playground",
+        previewMinHeight: "180px",
+        source: {
+          namespace: "inner_stat_demo",
+          layout: {
+            "stat:value": {
+              label: "Requests",
+              value: "1.2k",
+              unit: "/min"
+            }
+          }
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/progress.spec.ts
+var progressSpec = component({
+  type: "progress",
+  category: "Feedback",
+  title: "Progress",
+  summary: "Progress bar.",
+  description: "Use progress to show completion as a percentage.",
+  props: {
+    value: { type: "number", default: 0, dynamic: true, description: "Progress percentage from 0 to 100." },
+    label: { type: "string", dynamic: true, description: "Progress label." },
+    icon: { type: "string", description: "Icon name shown before the label." },
+    indeterminate: { type: "boolean", default: false, dynamic: true, description: "Render an indeterminate progress state without aria-valuenow." }
+  },
+  children: noChildren,
+  examples: [example("progress", {
+    namespace: "doc_progress_typical",
+    layout: {
+      "progress:build": {
+        label: "Build progress",
+        icon: "gear-six",
+        value: 64
+      }
+    }
+  })]
+});
+
+// src/components/entries/radio-group.spec.ts
+var radioGroupSpec = component({
+  type: "radio-group",
+  category: "Input",
+  title: "Radio Group",
+  summary: "Single-choice option group.",
+  description: "Use radio-group for one-of-many choices.",
+  props: {
+    value: { type: "string", dynamic: true, description: "Current selected value." },
+    label: { type: "string", dynamic: true, description: "Group label." },
+    icon: { type: "string", description: "Icon name shown before the group label." },
+    options: { type: "array", description: "Options with label, value, and optional icon." },
+    "options[].icon": { type: "string", description: "Icon name shown before a single option label." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable every radio option in the group." },
+    orientation: { type: "string", values: ["vertical", "horizontal"], default: "vertical", description: "Radio option layout direction." },
+    haptic: { type: "boolean", default: true, description: "Enable vibration feedback on supported devices." },
+    haptics: { type: "boolean", default: true, description: "Alias for haptic." },
+    name: { type: "string", description: "Native radio group name shared by options." },
+    onchange: { type: "write-expression", description: "Write expression invoked when selection changes." }
+  },
+  children: noChildren,
+  examples: [example("radio-group", {
+    namespace: "doc_radio_group_typical",
+    layout: {
+      "radio-group:mode": {
+        label: "Mode",
+        icon: "sliders-horizontal",
+        value: "auto",
+        options: [
+          {
+            label: "Auto",
+            value: "auto",
+            icon: "sparkle"
+          },
+          {
+            label: "Manual",
+            value: "manual",
+            icon: "wrench"
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/row.spec.ts
+var rowSpec = component({
+  type: "row",
+  category: "Layout",
+  title: "Row",
+  summary: "Horizontal layout container.",
+  description: "Use row to place child components horizontally in field order.",
+  props: {
+    justify: { type: "string", values: ["start", "center", "end", "space-between", "space-around"], default: "start", description: "Main-axis distribution." },
+    align: { type: "string", values: ["start", "center", "end", "baseline", "stretch"], default: "center", description: "Cross-axis alignment." },
+    gap: { type: "string", dynamic: true, description: "Spacing between children." }
+  },
+  children: childContent,
+  examples: [example("row", {
+    namespace: "doc_row_typical",
+    layout: {
+      "row:toolbar": {
+        justify: "space-between",
+        "text:title": {
+          text: "Runtime status"
+        },
+        "button:refresh": {
+          label: "Refresh"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/section.spec.ts
+var sectionSpec = component({
+  type: "section",
+  category: "Content",
+  title: "Section",
+  summary: "Page section with optional heading chrome.",
+  description: "Use section to group page content with title, subtitle, and optional action link.",
+  props: {
+    title: { type: "string", dynamic: true, description: "Section title." },
+    icon: { type: "string", description: "Icon name shown before the title." },
+    eyebrow: { type: "string", dynamic: true, description: "Small label above the title." },
+    subtitle: { type: "string", dynamic: true, description: "Subtitle text below the title." },
+    actionLabel: { type: "string", dynamic: true, description: "Optional action link label." },
+    actionHref: { type: "string", description: "Optional action link target." }
+  },
+  children: childContent,
+  examples: [example("section", {
+    namespace: "doc_section_typical",
+    layout: {
+      "section:overview": {
+        eyebrow: "Dashboard",
+        title: "Runtime overview",
+        icon: "chart-bar",
+        subtitle: "This section groups the most important state.",
+        "stat:latency": {
+          label: "Latency",
+          value: "42",
+          unit: "ms"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/select.spec.ts
+var selectSpec = component({
+  type: "select",
+  category: "Input",
+  title: "Select",
+  summary: "Dropdown selection input.",
+  description: "Use select for compact single-choice selection from an option list.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Select label." },
+    icon: { type: "string", description: "Icon name shown before the top label." },
+    value: { type: "string", dynamic: true, description: "Current selected value." },
+    options: { type: "array", description: "Options with label, value, and optional icon." },
+    "options[].icon": { type: "string", description: "Icon name shown before an option label." },
+    placeholder: { type: "string", description: "Placeholder shown when no value is selected." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the select trigger and native select." },
+    required: { type: "boolean", default: false, dynamic: true, description: "Require a non-placeholder value in the native select." },
+    variant: { type: "string", values: ["default", "toolbar"], default: "default", description: "Select surface variant." },
+    onchange: { type: "write-expression", description: "Write expression invoked when selection changes." }
+  },
+  children: noChildren,
+  examples: [example("select", {
+    namespace: "doc_select_typical",
+    layout: {
+      "select:env": {
+        label: "Environment",
+        icon: "server",
+        value: "prod",
+        options: [
+          {
+            label: "Development",
+            value: "dev",
+            icon: "code"
+          },
+          {
+            label: "Production",
+            value: "prod",
+            icon: "rocket-launch"
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/slider.spec.ts
+var sliderSpec = component({
+  type: "slider",
+  category: "Input",
+  title: "Slider",
+  summary: "Numeric range input.",
+  description: "Use slider for bounded numeric adjustments such as volume, brightness, or thresholds.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Slider label." },
+    icon: { type: "string", description: "Icon name shown before the label." },
+    value: { type: "number", default: 0, dynamic: true, description: "Current numeric value." },
+    min: { type: "number", default: 0, dynamic: true, description: "Minimum value." },
+    max: { type: "number", default: 100, dynamic: true, description: "Maximum value." },
+    step: { type: "number", default: 1, dynamic: true, description: "Step interval." },
+    unit: { type: "string", dynamic: true, description: "Unit shown after the value." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the range input." },
+    orientation: { type: "string", values: ["horizontal", "vertical"], default: "horizontal", description: "Slider orientation metadata used for styling." },
+    haptic: { type: "boolean", default: true, description: "Enable vibration feedback on supported devices." },
+    haptics: { type: "boolean", default: true, description: "Alias for haptic." },
+    onchange: { type: "write-expression", description: "Write expression invoked when the value changes." }
+  },
+  children: noChildren,
+  examples: [example("slider", {
+    namespace: "doc_slider_typical",
+    layout: {
+      "slider:volume": {
+        label: "Volume",
+        icon: "speaker-high",
+        value: 42,
+        min: 0,
+        max: 100,
+        step: 1,
+        unit: "%"
+      }
+    }
+  })]
+});
+
+// src/components/entries/stat.spec.ts
+var statSpec = component({
+  type: "stat",
+  category: "Display",
+  title: "Stat",
+  summary: "Metric display.",
+  description: "Use stat to present a labeled metric value with optional unit and semantic tone.",
+  props: {
+    label: { type: "string", dynamic: true, description: "Metric label." },
+    icon: { type: "string", description: "Icon name shown before the label." },
+    value: { type: "string | number", dynamic: true, description: "Metric value." },
+    unit: { type: "string", dynamic: true, description: "Unit shown after the value." },
+    tone: { type: "string", values: semanticTones, description: "Optional semantic tone." },
+    animateInitial: { type: "boolean", default: false, description: "Animate the initial rendered value." }
+  },
+  children: noChildren,
+  examples: [example("stat", {
+    namespace: "doc_stat_typical",
+    layout: {
+      "grid:stats": {
+        columns: 2,
+        "stat:requests": {
+          label: "Requests",
+          icon: "activity",
+          value: "1.2k",
+          unit: "/min"
+        },
+        "stat:success": {
+          label: "Success",
+          icon: "check-circle",
+          value: "98.4",
+          unit: "%",
+          tone: "success"
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/submit.spec.ts
+var submitSpec = component({
+  type: "submit",
+  category: "Action",
+  title: "Submit",
+  summary: "ToolHost submit and ignore controls.",
+  description: "Use submit inside tool templates to return selected state fields to the host.",
+  props: {
+    submitLabel: { type: "string", default: "Submit", description: "Submit button text." },
+    ignoreLabel: { type: "string", default: "Ignore", description: "Ignore button text." },
+    returnKeys: { type: "string[]", description: "State field paths returned to ToolHost." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable submit action." }
+  },
+  children: noChildren,
+  examples: [example("submit", {
+    namespace: "doc_submit_typical",
+    layout: {
+      "column:tool": {
+        "input:title": {
+          value: "Release note",
+          placeholder: "Title"
+        },
+        "submit:done": {
+          submitLabel: "Submit",
+          ignoreLabel: "Ignore",
+          returnKeys: [
+            "title"
+          ]
+        }
+      }
+    }
+  })]
+});
+
+// src/components/entries/switch.spec.ts
+var switchSpec = component({
+  type: "switch",
+  category: "Input",
+  title: "Switch",
+  summary: "Boolean switch input.",
+  description: "Use switch for an on/off setting.",
+  props: {
+    enabled: { type: "boolean", default: false, dynamic: true, description: "Enabled state." },
+    label: { type: "string", dynamic: true, description: "Switch label." },
+    icon: { type: "string", description: "Icon name shown before the visible label." },
+    disabled: { type: "boolean", default: false, dynamic: true, description: "Disable the switch." },
+    haptic: { type: "boolean", default: true, description: "Enable vibration feedback on supported devices." },
+    haptics: { type: "boolean", default: true, description: "Alias for haptic." },
+    onchange: { type: "write-expression", description: "Write expression invoked when enabled state changes." }
+  },
+  children: noChildren,
+  examples: [example("switch", {
+    namespace: "doc_switch_typical",
+    layout: {
+      "switch:feature": {
+        enabled: true,
+        label: "Enable sync",
+        icon: "arrows-clockwise"
+      }
+    }
+  })]
+});
+
+// src/components/entries/table.spec.ts
+var tableSpec = component({
+  type: "table",
+  category: "Data",
+  title: "Table",
+  summary: "Simple data table.",
+  description: "Use table to render rows of keyed data against a column definition.",
+  props: {
+    columns: { type: "array", description: "Column definitions with key, label, and optional icon." },
+    "columns[].icon": { type: "string", description: "Icon name shown before a column label." },
+    rows: { type: "array", description: "Row data objects keyed by column key." },
+    items: { type: "array", description: "Alias for rows." }
+  },
+  children: noChildren,
+  examples: [example("table", {
+    namespace: "doc_table_typical",
+    layout: {
+      "table:routes": {
+        columns: [
+          {
+            key: "name",
+            label: "Name",
+            icon: "text-t"
+          },
+          {
+            key: "status",
+            label: "Status",
+            icon: "check-circle"
+          }
+        ],
+        rows: [
+          {
+            name: "Parse",
+            status: "ready"
+          },
+          {
+            name: "Publish",
+            status: "pending"
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/tabs.spec.ts
+var tabsSpec = component({
+  type: "tabs",
+  category: "Navigation",
+  title: "Tabs",
+  summary: "Tabbed view switcher.",
+  description: "Use tabs to switch between named content panels.",
+  props: {
+    value: { type: "string", dynamic: true, description: "Current active tab value." },
+    tabs: { type: "array", description: "Tab definitions with value, label, content, icon, and iconOnly." },
+    "tabs[].icon": { type: "string", description: "Icon name shown before a tab trigger label." },
+    "tabs[].iconOnly": { type: "boolean", description: "Show only the tab icon while retaining label as accessible text." },
+    orientation: { type: "string", values: ["horizontal", "vertical"], default: "horizontal", description: "Tab list orientation." },
+    onchange: { type: "write-expression", description: "Write expression invoked when the active tab changes." }
+  },
+  children: noChildren,
+  examples: [example("tabs", {
+    namespace: "doc_tabs_typical",
+    layout: {
+      "tabs:main": {
+        value: "overview",
+        tabs: [
+          {
+            value: "overview",
+            label: "Overview"
+          },
+          {
+            value: "settings",
+            label: "Settings"
+          }
+        ]
+      }
+    }
+  })]
+});
+
+// src/components/entries/text.spec.ts
+var textSpec = component({
+  type: "text",
+  category: "Display",
+  title: "Text",
+  summary: "Plain text display.",
+  description: "Use text for short static or dynamic copy inside SlexKit layouts.",
+  props: {
+    text: { type: "string", dynamic: true, description: "Displayed text." },
+    content: { type: "string", dynamic: true, description: "Alias for text." },
+    label: { type: "string", dynamic: true, description: "Alias for text." },
+    variant: { type: "string", values: ["default", "muted"], default: "default", description: "Text visual variant." },
+    class: { type: "string", description: "Additional host-controlled CSS class." }
+  },
+  children: noChildren,
+  examples: [example("text", {
+    namespace: "doc_text_typical",
+    layout: {
+      "text:status": {
+        text: "System is healthy"
+      }
+    }
+  })]
+});
+
+// src/components/entries/toast.spec.ts
+var toastSpec = component({
+  type: "toast",
+  category: "Feedback",
+  title: "Toast",
+  summary: "Transient notification.",
+  description: "Use toast to show an inline notification with semantic status.",
+  props: {
+    title: { type: "string", dynamic: true, description: "Toast title." },
+    heading: { type: "string", dynamic: true, description: "Alias for title." },
+    label: { type: "string", dynamic: true, description: "Alias for title." },
+    icon: { type: "string", description: "Icon name shown at the left of the toast." },
+    description: { type: "string", dynamic: true, description: "Toast body text." },
+    text: { type: "string", dynamic: true, description: "Alias for description." },
+    message: { type: "string", dynamic: true, description: "Alias for description." },
+    content: { type: "string", dynamic: true, description: "Alias for description." },
+    type: { type: "string", values: ["info", "success", "warning", "danger"], default: "info", description: "Semantic notification type." },
+    tone: { type: "string", values: ["info", "success", "warning", "danger"], default: "info", description: "Alias for type." },
+    duration: { type: "number", description: "Auto-hide delay in milliseconds." },
+    dismissable: { type: "boolean", default: true, description: "Show a close button." },
+    dismissible: { type: "boolean", default: true, description: "Alias for dismissable." },
+    closeLabel: { type: "string", default: "Close notification", description: "Accessible close button label." },
+    closeAriaLabel: { type: "string", description: "Alias for closeLabel." }
+  },
+  children: noChildren,
+  examples: [example("toast", {
+    namespace: "doc_toast_typical",
+    layout: {
+      "toast:saved": {
+        type: "success",
+        title: "Saved",
+        icon: "check-circle",
+        description: "Changes have been written."
+      }
+    }
+  })]
+});
+
+// src/components/entries/specs.ts
+var componentSpecs = [
+  accordionSpec,
+  badgeSpec,
+  buttonSpec,
+  calloutSpec,
+  cardSpec,
+  checkboxSpec,
+  codeBlockSpec,
+  collapsibleSpec,
+  columnSpec,
+  dividerSpec,
+  formulaSpec,
+  gridSpec,
+  iconSpec,
+  inputSpec,
+  linkSpec,
+  playgroundSpec,
+  progressSpec,
+  radioGroupSpec,
+  rowSpec,
+  sectionSpec,
+  selectSpec,
+  sliderSpec,
+  statSpec,
+  submitSpec,
+  switchSpec,
+  tableSpec,
+  tabsSpec,
+  textSpec,
+  toastSpec
+];
+
+// src/components/spec-registry.ts
+var publicComponentTypes = componentSpecs.map((spec) => spec.type);
+var componentSpecByType = new Map(componentSpecs.map((spec) => [spec.type, spec]));
+
+// src/engine/capabilities.ts
+var slexkitStdlibDocs = [
+  {
+    name: "math",
+    summary: "Small numeric helpers for common interactive calculations.",
+    functions: [
+      { name: "std.math.clamp", signature: "clamp(value, min, max)", summary: "Clamp a number into a range.", pure: true, example: "std.math.clamp(g.score, 0, 100)" },
+      { name: "std.math.round", signature: "round(value, digits = 0)", summary: "Round with a fixed number of decimal digits.", pure: true, example: "std.math.round(g.latency, 1)" },
+      { name: "std.math.safeDivide", signature: "safeDivide(numerator, denominator, fallback = 0)", summary: "Divide with a fallback for zero or invalid denominators.", pure: true, example: "std.math.safeDivide(g.used, g.total, 0)" },
+      { name: "std.math.percent", signature: "percent(part, total, digits = 1)", summary: "Return part / total as a percentage number.", pure: true, example: "std.math.percent(g.done, g.total, 1)" },
+      { name: "std.math.lerp", signature: "lerp(start, end, t)", summary: "Linear interpolation.", pure: true, example: "std.math.lerp(0, 100, g.progress)" }
+    ]
+  },
+  {
+    name: "stats",
+    summary: "Finite-number aggregations for arrays.",
+    functions: [
+      { name: "std.stats.sum", signature: "sum(values)", summary: "Sum finite numeric values. Empty arrays return 0.", pure: true, example: "std.stats.sum(g.samples)" },
+      { name: "std.stats.mean", signature: "mean(values)", summary: "Average finite numeric values. Empty arrays return NaN.", pure: true, example: "std.stats.mean(g.samples)" },
+      { name: "std.stats.min", signature: "min(values)", summary: "Minimum finite numeric value. Empty arrays return NaN.", pure: true, example: "std.stats.min(g.samples)" },
+      { name: "std.stats.max", signature: "max(values)", summary: "Maximum finite numeric value. Empty arrays return NaN.", pure: true, example: "std.stats.max(g.samples)" },
+      { name: "std.stats.median", signature: "median(values)", summary: "Median finite numeric value. Empty arrays return NaN.", pure: true, example: "std.stats.median(g.samples)" }
+    ]
+  },
+  {
+    name: "format",
+    summary: "Deterministic display formatting with en-US defaults.",
+    functions: [
+      { name: "std.format.fixed", signature: "fixed(value, digits = 2)", summary: "Format a number with fixed decimal places.", pure: true, example: "std.format.fixed(g.voltage, 3)" },
+      { name: "std.format.number", signature: "number(value, digits = 0, locale = 'en-US')", summary: "Locale number formatting.", pure: true, example: "std.format.number(g.requests)" },
+      { name: "std.format.compact", signature: "compact(value, digits = 1, locale = 'en-US')", summary: "Compact number formatting.", pure: true, example: "std.format.compact(g.users)" },
+      { name: "std.format.percent", signature: "percent(ratio, digits = 1)", summary: "Format a ratio as a percentage string.", pure: true, example: "std.format.percent(g.done / g.total, 1)" },
+      { name: "std.format.currency", signature: "currency(value, currency = 'USD', locale = 'en-US')", summary: "Format a currency value.", pure: true, example: "std.format.currency(g.revenue, 'USD')" }
+    ]
+  },
+  {
+    name: "units",
+    summary: "Small unit display helpers for common dashboards.",
+    functions: [
+      { name: "std.units.withUnit", signature: "withUnit(value, unit, digits = 2)", summary: "Format a value with a unit suffix.", pure: true, example: "std.units.withUnit(g.power, 'W', 1)" },
+      { name: "std.units.bytes", signature: "bytes(value, digits = 1)", summary: "Format bytes as B, KB, MB, GB, TB, or PB.", pure: true, example: "std.units.bytes(g.payloadBytes)" },
+      { name: "std.units.duration", signature: "duration(ms, digits = 1)", summary: "Format milliseconds as ms, s, min, or h.", pure: true, example: "std.units.duration(g.elapsedMs)" },
+      { name: "std.units.si", signature: "si(value, unit = '', digits = 2)", summary: "Format with SI prefixes.", pure: true, example: "std.units.si(g.frequency, 'Hz', 2)" }
+    ]
+  }
+];
+var slexkitRuntimeCapabilities = [
+  { name: "api.get", policy: "network", signature: "get(url, options)", summary: "Policy-gated GET request.", example: "await api.get('https://api.example.com/status')", secureDefault: "denied", forbidden: ["fetch(url)", "XMLHttpRequest", "WebSocket"] },
+  { name: "api.post", policy: "network", signature: "post(url, body, options)", summary: "Policy-gated POST request.", example: "await api.post('https://api.example.com/items', { ok: true })", secureDefault: "denied", forbidden: ["fetch(url)", "XMLHttpRequest", "WebSocket"] },
+  { name: "api.fetch", policy: "network", signature: "fetch(url, options)", summary: "Policy-gated GET or POST request.", example: "await api.fetch(url, { method: 'GET' })", secureDefault: "denied", forbidden: ["fetch(url)", "XMLHttpRequest", "WebSocket"] },
+  { name: "api.setTimeout", policy: "timer", signature: "setTimeout(fn, ms)", summary: "Policy-gated timeout.", example: "api.setTimeout(function () { g.ready = true; }, 500)", secureDefault: "denied", forbidden: ["setTimeout(fn, ms)"] },
+  { name: "api.clearTimeout", policy: "timer", signature: "clearTimeout(id)", summary: "Clear a policy-gated timeout.", example: "api.clearTimeout(g.timeoutId)", secureDefault: "denied" },
+  { name: "api.setInterval", policy: "timer", signature: "setInterval(fn, ms)", summary: "Policy-gated interval.", example: "api.setInterval(function () { g.ticks += 1; }, 1000)", secureDefault: "denied", forbidden: ["setInterval(fn, ms)"] },
+  { name: "api.clearInterval", policy: "timer", signature: "clearInterval(id)", summary: "Clear a policy-gated interval.", example: "api.clearInterval(g.intervalId)", secureDefault: "denied" },
+  { name: "api.raf", policy: "animation", signature: "raf(fn)", summary: "Policy-gated animation frame.", example: "api.raf(function (time) { g.time = time; })", secureDefault: "denied", forbidden: ["requestAnimationFrame(fn)"] },
+  { name: "api.cancelRaf", policy: "animation", signature: "cancelRaf(id)", summary: "Cancel a policy-gated animation frame.", example: "api.cancelRaf(g.rafId)", secureDefault: "denied" },
+  { name: "api.createCanvas", policy: "canvas", signature: "createCanvas(width, height)", summary: "Create a policy-counted canvas.", example: "var canvas = api.createCanvas(320, 180)", secureDefault: "denied" },
+  { name: "api.getCanvasContext", policy: "canvas", signature: "getCanvasContext(canvas, contextId, options)", summary: "Get a policy-checked canvas context.", example: "var ctx = api.getCanvasContext(canvas, '2d')", secureDefault: "denied" },
+  { name: "api.onDispose", policy: "lifecycle", signature: "onDispose(fn)", summary: "Register runtime cleanup.", example: "api.onDispose(function () { g.closed = true; })", secureDefault: "available" },
+  { name: "api.now", policy: "lifecycle", signature: "now()", summary: "Runtime clock.", example: "api.now()", secureDefault: "available" },
+  { name: "api.isTimeoutError", policy: "diagnostics", signature: "isTimeoutError(error)", summary: "Check timeout errors.", example: "api.isTimeoutError(error)", secureDefault: "available" },
+  { name: "api.isNetworkError", policy: "diagnostics", signature: "isNetworkError(error)", summary: "Check network errors.", example: "api.isNetworkError(error)", secureDefault: "available" },
+  { name: "api.isPolicyError", policy: "diagnostics", signature: "isPolicyError(error)", summary: "Check policy errors.", example: "api.isPolicyError(error)", secureDefault: "available" },
+  { name: "api.errorMessage", policy: "diagnostics", signature: "errorMessage(error)", summary: "Extract a displayable error message.", example: "api.errorMessage(error)", secureDefault: "available" }
+];
+var slexkitStdlibFunctionNames = slexkitStdlibDocs.flatMap((namespace) => namespace.functions.map((fn) => fn.name));
+var slexkitRuntimeCapabilityNames = slexkitRuntimeCapabilities.map((capability) => capability.name);
+
+// src/engine/validation.ts
+var componentSpecByType2 = new Map(componentSpecs.map((spec) => [spec.type, spec]));
+var stdlibFunctions = new Set(slexkitStdlibFunctionNames);
+var stdlibNamespaces = new Set(slexkitStdlibFunctionNames.map((name) => name.split(".").slice(0, 2).join(".")));
+var apiMembers = new Set(slexkitRuntimeCapabilityNames);
+var directiveProps = new Set(["$if", "$for", "$key"]);
+var nativeSecureCapabilities = [
+  { value: "fetch", pattern: /(?<!\.)\bfetch\s*\(/ },
+  { value: "XMLHttpRequest", pattern: /\bXMLHttpRequest\b/ },
+  { value: "WebSocket", pattern: /\bWebSocket\b/ },
+  { value: "setTimeout", pattern: /(?<!\.)\bsetTimeout\s*\(/ },
+  { value: "requestAnimationFrame", pattern: /(?<!\.)\brequestAnimationFrame\s*\(/ }
+];
+function collectMemberUsage(source, root) {
+  const matches = source.matchAll(new RegExp(`\\b${root}\\.([A-Za-z_$][\\w$]*)(?:\\.([A-Za-z_$][\\w$]*))?`, "g"));
+  const found = new Set;
+  for (const match of matches) {
+    found.add([root, match[1], match[2]].filter(Boolean).join("."));
+  }
+  return [...found].sort();
+}
+function componentKeyType(key) {
+  const colon = key.indexOf(":");
+  return colon > 0 ? key.slice(0, colon) : null;
+}
+function isKnownProp(type, key) {
+  if (directiveProps.has(key) || key.startsWith("on"))
+    return true;
+  const spec = componentSpecByType2.get(type);
+  if (!spec)
+    return true;
+  const propName = key.startsWith("$") ? key.slice(1) : key;
+  return propName in spec.props;
+}
+function walkComponents(value, warnings, usage, path = "") {
+  if (!value || typeof value !== "object")
+    return;
+  for (const [key, child] of Object.entries(value)) {
+    const childPath = path ? `${path}.${key}` : key;
+    const type = componentKeyType(key);
+    if (type) {
+      usage.add(type);
+      const spec = componentSpecByType2.get(type);
+      if (!spec) {
+        warnings.push({
+          code: "unknown_component",
+          message: `Unknown SlexKit component '${type}'.`,
+          path: childPath,
+          value: type
+        });
+      }
+      if (child && typeof child === "object") {
+        for (const propName of Object.keys(child)) {
+          if (componentKeyType(propName))
+            continue;
+          if (!isKnownProp(type, propName)) {
+            warnings.push({
+              code: "unknown_prop",
+              message: `Unknown prop '${propName}' on component '${type}'.`,
+              path: `${childPath}.${propName}`,
+              value: propName
+            });
+          }
+        }
+      }
+    }
+    walkComponents(child, warnings, usage, childPath);
+  }
+}
+function sourceWarnings(source, mode) {
+  const warnings = [];
+  const stdlibUsage = collectMemberUsage(source, "std");
+  const apiUsage = collectMemberUsage(source, "api");
+  for (const name of stdlibUsage) {
+    if (stdlibFunctions.has(name) || stdlibNamespaces.has(name))
+      continue;
+    warnings.push({
+      code: "unknown_std_member",
+      message: `Unknown SlexKit stdlib member '${name}'.`,
+      value: name
+    });
+  }
+  for (const name of apiUsage) {
+    if (apiMembers.has(name))
+      continue;
+    warnings.push({
+      code: "unknown_api_member",
+      message: `Unknown SlexKit runtime API member '${name}'.`,
+      value: name
+    });
+  }
+  if (mode === "secure") {
+    for (const capability of nativeSecureCapabilities) {
+      if (capability.pattern.test(source)) {
+        warnings.push({
+          code: "native_secure_capability",
+          message: `Native '${capability.value}' is not supported in secure mode. Use policy-gated api.* instead.`,
+          value: capability.value
+        });
+      }
+    }
+  }
+  return { warnings, stdlibUsage, apiUsage };
+}
+function validateSlexSource(source, options = {}) {
+  const mode = options.mode ?? "trusted";
+  const parsed = parseSlexSource(source);
+  const usage = new Set;
+  const { warnings, stdlibUsage, apiUsage } = sourceWarnings(source, mode);
+  if (!parsed.ok) {
+    return {
+      ok: false,
+      diagnostic: parsed.diagnostic,
+      warnings,
+      componentUsage: [],
+      stdlibUsage,
+      apiUsage
+    };
+  }
+  walkComponents(parsed.value, warnings, usage);
+  return {
+    ok: true,
+    value: parsed.value,
+    warnings,
+    componentUsage: [...usage].sort(),
+    stdlibUsage,
+    apiUsage
+  };
+}
 // src/engine/markdown-runtime.ts
 var DEFAULT_POLICY = {};
 function isRecord(value) {
@@ -2258,7 +3765,7 @@ function createSlexKitMarkdownRuntimeHost(initialOptions = {}) {
       const __target = { slex: "0.1", namespace: __artifactPrefix + "default", g: {}, layout: {} };
       const __layouts = [];
       for (const __entry of __sources) {
-        const __script = __entry.kind === "json" ? JSON.parse(__entry.source) : (0, eval)(__entry.source);
+        const __script = __entry.kind === "json" ? JSON.parse(__entry.source) : (0, eval)("(" + __entry.source + ")");
         if (!__isRecord(__script)) continue;
         if ("slex" in __script) __target.slex = String(__script.slex || "0.1");
         if ("namespace" in __script) __target.namespace = __artifactPrefix + String(__script.namespace || "default");
@@ -2696,14 +4203,20 @@ function createSecureFrameTarget(input, container, mountOptions) {
   iframe.title = options.title ?? "SlexKit secure artifact";
   iframe.setAttribute("data-slexkit-secure-frame", "true");
   iframe.setAttribute("referrerpolicy", "no-referrer");
+  iframe.style.display = "block";
+  iframe.style.width = "100%";
+  iframe.style.border = "0";
+  iframe.style.background = "transparent";
   const runtimeUrl = options.runtimeUrl ?? options.runnerUrl ?? defaultRuntimeUrl;
   if (runtimeUrl) {
     const resolvedRuntimeUrl = resolveRuntimeUrl(runtimeUrl);
+    const styleUrl = options.styleUrl === false ? "" : options.styleUrl ?? defaultSecureFrameStyleUrl(resolvedRuntimeUrl);
+    const resolvedStyleUrl = styleUrl ? resolveRuntimeUrl(styleUrl) : undefined;
     assertSandboxCloneable(input);
     iframe.setAttribute("sandbox", secureSandboxAttribute(options));
     container.replaceChildren(iframe);
     const bridge = createSandboxBridge(input, container, iframe, mountOptions);
-    iframe.srcdoc = secureRunnerSrcdoc(resolvedRuntimeUrl);
+    iframe.srcdoc = secureRunnerSrcdoc(resolvedRuntimeUrl, resolvedStyleUrl);
     return bridge;
   }
   if (frame) {
@@ -2763,23 +4276,38 @@ function cspSourceForRuntime(runtimeUrl) {
     return "'self'";
   }
 }
+function defaultSecureFrameStyleUrl(runtimeUrl) {
+  try {
+    const url = new URL(runtimeUrl);
+    if (url.protocol === "blob:" || url.protocol === "data:")
+      return "";
+    url.pathname = url.pathname.replace(/[^/]+$/, "slexkit.css");
+    url.search = "";
+    url.hash = "";
+    return url.href;
+  } catch {
+    return "";
+  }
+}
 function escapeHtmlAttribute(value) {
   return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function secureRunnerSrcdoc(runtimeUrl) {
+function secureRunnerSrcdoc(runtimeUrl, styleUrl) {
   const nonce = randomToken(12);
+  const styleSource = styleUrl ? ` ${cspSourceForRuntime(styleUrl)}` : "";
   const csp = [
     "default-src 'none'",
     `script-src 'nonce-${nonce}' 'unsafe-eval' ${cspSourceForRuntime(runtimeUrl)}`,
     "connect-src 'none'",
     "img-src data: blob:",
-    "style-src 'unsafe-inline'",
+    `style-src 'unsafe-inline'${styleSource}`,
     "font-src data:",
     "form-action 'none'",
     "base-uri 'none'"
   ].join("; ");
   const style = "html,body{margin:0;min-height:100%;overflow:hidden;}#slexkit-secure-root{min-height:100%;}";
-  return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="${escapeHtmlAttribute(csp)}"><style>${style}</style></head><body><div id="slexkit-secure-root"></div><script type="module" nonce="${nonce}">import { startSlexKitSandboxRunner } from ${JSON.stringify(runtimeUrl)}; startSlexKitSandboxRunner();</script></body></html>`;
+  const stylesheet = styleUrl ? `<link rel="stylesheet" href="${escapeHtmlAttribute(styleUrl)}">` : "";
+  return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="${escapeHtmlAttribute(csp)}">${stylesheet}<style>${style}</style></head><body><div id="slexkit-secure-root"></div><script type="module" nonce="${nonce}">import { startSlexKitSandboxRunner } from ${JSON.stringify(runtimeUrl)}; startSlexKitSandboxRunner();</script></body></html>`;
 }
 function secureFrameLoadTimeout(options) {
   const frame = options.frame;
@@ -3031,11 +4559,21 @@ function createSandboxBridge(input, container, iframe, options) {
     if (data.type === "slot-size" && data.id === id && data.token === token && typeof data.slotId === "string") {
       const slot = artifactSlots.find((item) => item.id === data.slotId);
       if (slot && typeof data.height === "number" && Number.isFinite(data.height)) {
-        slot.container.style.minHeight = `${Math.max(0, Math.ceil(data.height))}px`;
+        const height = Math.max(0, Math.ceil(data.height));
+        slot.container.style.minHeight = `${height}px`;
+        if (artifactSlots.length === 1) {
+          iframe.style.height = `${Math.max(1, height)}px`;
+        }
         requestArtifactSlotSync();
       }
       return;
     }
+    if (data.type === "frame-size" && data.id === id && data.token === token) {
+      if (artifactSlots.length <= 1 && typeof data.height === "number" && Number.isFinite(data.height)) {
+        iframe.style.height = `${Math.max(1, Math.ceil(data.height))}px`;
+      }
+      return;
+    }
     if (data.type === "error" && (!data.id || data.id === id) && (!data.token || data.token === token)) {
       const error = data;
       failLoad(ready ? "mounted" : "ready", typeof error.error?.message === "string" ? error.error.message : undefined);
@@ -3452,6 +4990,7 @@ function startSlexKitSandboxRunner() {
   let activeId;
   let activeToken;
   let heartbeatTimer;
+  let rootResizeObserver;
   let slotResizeObserver;
   function clearHeartbeat() {
     if (heartbeatTimer === undefined)
@@ -3477,6 +5016,8 @@ function startSlexKitSandboxRunner() {
     if (id && activeId && id !== activeId)
       return;
     clearHeartbeat();
+    rootResizeObserver?.disconnect();
+    rootResizeObserver = undefined;
     slotResizeObserver?.disconnect();
     slotResizeObserver = undefined;
     cleanup?.();
@@ -3510,6 +5051,36 @@ function startSlexKitSandboxRunner() {
       height
     });
   }
+  function reportFrameSize() {
+    if (!activeId || !activeToken)
+      return;
+    const root = frameRoot();
+    const rootRect = root.getBoundingClientRect();
+    let contentBottom = rootRect.height;
+    for (const child of root.querySelectorAll("*")) {
+      const rect = child.getBoundingClientRect();
+      contentBottom = Math.max(contentBottom, rect.bottom - rootRect.top);
+    }
+    const height = Math.max(root.scrollHeight, root.getBoundingClientRect().height, contentBottom, document.body?.scrollHeight ?? 0, document.documentElement?.scrollHeight ?? 0, 1);
+    post({
+      channel: "slexkit-secure",
+      type: "frame-size",
+      id: activeId,
+      token: activeToken,
+      height
+    });
+  }
+  function observeFrameSize() {
+    rootResizeObserver?.disconnect();
+    rootResizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => reportFrameSize()) : undefined;
+    const root = frameRoot();
+    rootResizeObserver?.observe(root);
+    for (const child of root.children) {
+      rootResizeObserver?.observe(child);
+    }
+    reportFrameSize();
+    schedulingSnapshot.requestAnimationFrame?.(() => reportFrameSize());
+  }
   function applySlotRects(slots) {
     const root = frameRoot();
     const multiSlot = slots.length > 1;
@@ -3566,6 +5137,7 @@ function startSlexKitSandboxRunner() {
       api: runtime.api
     });
     startHeartbeat(message.policy, message.id, message.token);
+    observeFrameSize();
     post({
       channel: "slexkit-secure",
       type: "mounted",
@@ -3645,6 +5217,7 @@ var formatSlexKitDiagnosticApi = formatSlexKitDiagnostic;
 var mountSecureArtifactApi = mountSecureArtifact;
 var parseSlexSourceApi = parseSlexSource;
 var parseSlexKitDslApi = parseSlexKitDsl;
+var validateSlexSourceApi = validateSlexSource;
 var createSecureRuntimeApi = createSecureRuntime;
 var SlexKitRuntimeErrorApi = SlexKitRuntimeError;
 var getSlexKitRuntimeUrlApi = getSlexKitRuntimeUrl;
@@ -3652,12 +5225,15 @@ var setSlexKitRuntimeUrlApi = setSlexKitRuntimeUrl;
 var createSlexKitMarkdownRuntimeHostApi = createSlexKitMarkdownRuntimeHost;
 var getSlexKitMarkdownRuntimeHostApi = getSlexKitMarkdownRuntimeHost;
 var installSlexKitMarkdownRuntimeHostApi = installSlexKitMarkdownRuntimeHost;
+var slexkitStdApi = slexkitStd;
 var attachComponentDisposerApi = attachComponentDisposer;
 var configureComponentScopeApi = configureComponentScope;
 var startSlexKitSandboxRunnerApi = startSlexKitSandboxRunner;
 var getSlexKitInfoApi = getSlexKitInfo;
 export {
+  validateSlexSourceApi as validateSlexSource,
   startSlexKitSandboxRunnerApi as startSlexKitSandboxRunner,
+  slexkitStdApi as slexkitStd,
   setSlexKitRuntimeUrlApi as setSlexKitRuntimeUrl,
   registerApi as register,
   parseSlexSourceApi as parseSlexSource,