@slexkit/mcp 0.3.3 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,295 +1,3 @@
1
- # SlexKit ToolHost for LLMs
2
-
3
- ToolHost is the structured-input path for confirmations, choices, and forms. Do not use it for ordinary display-only UI.
4
-
5
- ## ToolHost
6
-
7
- Raw Markdown: /docs/reference/toolhost.md
8
-
9
- ---
10
- title: ToolHost
11
- category: Reference
12
- status: ready
13
- order: 70
14
- summary: "Structured user-input UI for confirmations, choices, forms, templates, and submit boundaries."
15
- slexkitRenderMode: component
16
- ---
17
-
18
1
  # ToolHost
19
2
 
20
- ToolHost bridges AI tool calls to interactive UI. Instead of the AI executing tools server-side, ToolHost renders a structured input form in the browser and returns the user's response as a `ToolResult`.
21
-
22
- ## Concepts
23
-
24
- When an AI model emits a tool call (e.g., `confirm-action`, `fill-form`), ToolHost compiles it into a standard `SlexExpression` and mounts it using the core runtime. The mounted UI has a **submit boundary** (`submit:actions` component) that settles a Promise with the user's input.
25
-
26
- ToolHost is **separate from display-oriented `slex` fences**. Display components render information; ToolHost components collect structured user input and return it programmatically.
27
-
28
- ## Public API
29
-
30
- ### `renderToolCall(call, container) → ToolRenderHandle`
31
-
32
- Compiles a tool call into a SlexExpression, mounts it, and returns a handle.
33
-
34
- ```ts
35
- function renderToolCall(call: ToolCall, container: HTMLElement): ToolRenderHandle;
36
- ```
37
-
38
- ```ts
39
- type ToolRenderHandle = {
40
- promise: Promise<ToolResult>; // Resolves when user submits or ignores
41
- dispose: () => void; // Clean up the rendered UI
42
- };
43
-
44
- type ToolResult =
45
- | { toolCallId?: string; toolName: string; status: "submitted"; value: Record<string, unknown> }
46
- | { toolCallId?: string; toolName: string; status: "ignored"; value: null };
47
- ```
48
-
49
- **Usage:**
50
-
51
- ```js
52
- import { renderToolCall } from "slexkit";
53
-
54
- const handle = renderToolCall(
55
- {
56
- id: "call_001",
57
- name: "confirm-action",
58
- arguments: {
59
- title: "Delete file?",
60
- description: "This action cannot be undone.",
61
- confirmLabel: "Delete",
62
- requireReason: true,
63
- },
64
- },
65
- document.getElementById("tool-container"),
66
- );
67
-
68
- handle.promise.then((result) => {
69
- console.log(result.status); // "submitted" or "ignored"
70
- console.log(result.value); // { confirmed: true, reason: "Obsolete file" }
71
- handle.dispose();
72
- });
73
- ```
74
-
75
- ### `registerToolTemplate(name, compiler)`
76
-
77
- Register a custom tool template. The compiler function receives the tool arguments and returns a `SlexExpression`.
78
-
79
- ```ts
80
- function registerToolTemplate(name: string, compiler: ToolTemplateCompiler): void;
81
-
82
- type ToolTemplateCompiler<TArgs = Record<string, unknown>> = (
83
- args: TArgs,
84
- runtime: ToolRuntime,
85
- call: ToolCall,
86
- ) => SlexExpression;
87
-
88
- type ToolRuntime = {
89
- submit: (value: Record<string, unknown>) => void;
90
- ignore: () => void;
91
- };
92
- ```
93
-
94
- ## Built-in templates
95
-
96
- ### `confirm-action`
97
-
98
- Yes/no confirmation dialog. Supports an optional reason field.
99
-
100
- **Arguments (`ConfirmActionArguments`):**
101
-
102
- | Field | Type | Default | Description |
103
- |-------|------|---------|-------------|
104
- | `title` | `string` | `"Confirm action"` | Dialog title |
105
- | `description` | `string` | — | Optional explanation text |
106
- | `confirmLabel` | `string` | `"Confirm"` | Submit button label |
107
- | `ignoreLabel` | `string` | `"Ignore"` | Cancel button label |
108
- | `requireReason` | `boolean` | `false` | Show a reason text input |
109
- | `reasonLabel` | `string` | `"Reason"` | Label for the reason input |
110
- | `reasonPlaceholder` | `string` | `"Add a reason"` | Placeholder for the reason input |
111
-
112
- **Result value:**
113
-
114
- | Key | Type | Description |
115
- |-----|------|-------------|
116
- | `confirmed` | `boolean` | Always `true` when submitted |
117
- | `reason` | `string` | User's reason text (only if `requireReason: true`) |
118
-
119
- **Example:**
120
-
121
- ```js
122
- renderToolCall({
123
- name: "confirm-action",
124
- arguments: {
125
- title: "Delete project?",
126
- description: "This will permanently delete all files.",
127
- confirmLabel: "Delete",
128
- requireReason: true,
129
- },
130
- }, container);
131
- ```
132
-
133
- ### `choose-options` / `option-list`
134
-
135
- Single or multi-select option list. `option-list` is an alias for `choose-options` — behavior is identical.
136
-
137
- **Arguments (`ChooseOptionsArguments` / `OptionListArguments`):**
138
-
139
- | Field | Type | Default | Description |
140
- |-------|------|---------|-------------|
141
- | `title` | `string` | `"Choose options"` | Dialog title |
142
- | `description` | `string` | — | Optional explanation text |
143
- | `options` / `items` | `OptionListItem[]` | `[]` | List of selectable items |
144
- | `multiple` | `boolean` | `true` | Allow multiple selection |
145
- | `selected` | `string[]` | auto | Pre-selected item IDs |
146
- | `minSelected` | `number` | `0` | Minimum required selections |
147
- | `maxSelected` | `number` | `Infinity` | Maximum allowed selections |
148
- | `submitLabel` | `string` | `"Submit"` | Submit button label |
149
- | `ignoreLabel` | `string` | `"Ignore"` | Cancel button label |
150
-
151
- **OptionListItem:**
152
-
153
- | Field | Type | Description |
154
- |-------|------|-------------|
155
- | `label` | `string` | Display text (required) |
156
- | `id` | `string` | Unique identifier (defaults to `value` or index) |
157
- | `value` | `string` | Submitted value (defaults to `id`) |
158
- | `description` | `string` | Secondary text shown after label |
159
- | `selected` | `boolean` | Pre-selected state |
160
- | `disabled` | `boolean` | Disabled state |
161
-
162
- **Rendering:**
163
- - When `multiple: true` (default): renders **checkboxes**
164
- - When `multiple: false`: renders a **radio group**
165
-
166
- **Result value:**
167
-
168
- | Key | Type | Description |
169
- |-----|------|-------------|
170
- | `selected` | `string[]` | IDs of selected items |
171
-
172
- **Example:**
173
-
174
- ```js
175
- renderToolCall({
176
- name: "choose-options",
177
- arguments: {
178
- title: "Select dependencies",
179
- options: [
180
- { id: "react", label: "React", description: "UI library" },
181
- { id: "vue", label: "Vue", description: "Progressive framework" },
182
- { id: "svelte", label: "Svelte", description: "Compiled framework", selected: true },
183
- ],
184
- multiple: true,
185
- minSelected: 1,
186
- maxSelected: 2,
187
- },
188
- }, container);
189
- ```
190
-
191
- ### `fill-form`
192
-
193
- Multi-field form with various field types.
194
-
195
- **Arguments (`FillFormArguments`):**
196
-
197
- | Field | Type | Default | Description |
198
- |-------|------|---------|-------------|
199
- | `title` | `string` | `"Fill form"` | Form title |
200
- | `description` | `string` | — | Optional explanation text |
201
- | `fields` | `FormField[]` | `[]` | Form field definitions |
202
- | `values` | `Record<string, unknown>` | — | Initial field values |
203
- | `submitLabel` | `string` | `"Submit"` | Submit button label |
204
- | `ignoreLabel` | `string` | `"Ignore"` | Cancel button label |
205
-
206
- **FormField:**
207
-
208
- | Field | Type | Default | Description |
209
- |-------|------|---------|-------------|
210
- | `name` | `string` | (required) | Field name (used as key in result value) |
211
- | `type` | `FormFieldType` | `"text"` | Field type |
212
- | `label` | `string` | `name` | Display label |
213
- | `description` | `string` | — | Help text below the field |
214
- | `placeholder` | `string` | — | Input placeholder |
215
- | `required` | `boolean` | `false` | Require non-empty value to submit |
216
- | `disabled` | `boolean` | `false` | Disable the field |
217
- | `value` | `unknown` | — | Initial value |
218
- | `options` | `Array<{label, value}>` | — | Options for `select` type |
219
-
220
- **FormFieldType:**
221
-
222
- | Type | Renders | Description |
223
- |------|---------|-------------|
224
- | `text` | `<input>` | Free-form text |
225
- | `number` | `<input type="number">` | Numeric input, value is `number \| null` |
226
- | `engineering` | `<input>` with SI prefix parsing | Accepts values like `"10kΩ"`, `"100nF"`, `"1.5MegHz"`. Parsed with `parseEngineeringNumber()`. State includes `raw`, `number`, `valid`, `prefix`, `unit`, `normalized` |
227
- | `select` | `<select>` | Dropdown from `options` array |
228
- | `checkbox` | Checkbox | Boolean toggle |
229
- | `switch` | Switch toggle | Boolean toggle (switch style) |
230
-
231
- **Result value:**
232
-
233
- An object with a key for each field name, containing the submitted value. For `engineering` fields, the raw input string is submitted. For `checkbox`/`switch` fields, a boolean is submitted. For `number` fields, a number or `null` is submitted.
234
-
235
- **Example:**
236
-
237
- ```js
238
- renderToolCall({
239
- name: "fill-form",
240
- arguments: {
241
- title: "New project",
242
- fields: [
243
- { name: "name", type: "text", label: "Project name", required: true },
244
- { name: "framework", type: "select", label: "Framework", options: [
245
- { label: "React", value: "react" },
246
- { label: "Svelte", value: "svelte" },
247
- ]},
248
- { name: "resistance", type: "engineering", label: "Target resistance", placeholder: "e.g. 10kΩ" },
249
- { name: "typescript", type: "checkbox", label: "Use TypeScript", value: true },
250
- ],
251
- },
252
- }, container);
253
- ```
254
-
255
- ## Writing a custom template
256
-
257
- Implement the `ToolTemplateCompiler` function and register it:
258
-
259
- ```js
260
- import { registerToolTemplate, renderToolCall } from "slexkit";
261
-
262
- registerToolTemplate("greet-user", (args, runtime, call) => ({
263
- namespace: `tool_greet_${Date.now()}`,
264
- g: {
265
- __slexkitTool: runtime,
266
- name: args.name || "World",
267
- },
268
- layout: {
269
- "card:tool": {
270
- title: "Greeting",
271
- "text:message": { "$content": "'Hello, ' + g.name + '!'" },
272
- "submit:actions": {
273
- returnKeys: ["name"],
274
- submitLabel: args.submitLabel || "OK",
275
- ignoreLabel: args.ignoreLabel || "Cancel",
276
- },
277
- },
278
- },
279
- }));
280
-
281
- renderToolCall(
282
- { name: "greet-user", arguments: { name: "Alice" } },
283
- container,
284
- );
285
- ```
286
-
287
- ### Key patterns
288
-
289
- 1. **`__slexkitTool`** — Set `g.__slexkitTool = runtime` to give expressions access to `submit()` and `ignore()`
290
- 2. **`submit:actions`** — Always include a `submit:actions` component as the completion boundary. Set `returnKeys` to the property names that should be included in the result value
291
- 3. **`canSubmit`** — Add a `g.canSubmit()` method to control the submit button's disabled state
292
- 4. **Unique namespace** — Use a timestamp-based namespace to avoid collisions with other tool calls
293
- 5. **Validation** — Implement validation logic in `g` methods and wire `$disabled` on the submit button
294
-
295
- ---
3
+ ToolHost renders structured tool requests such as confirmation, option selection, and form filling. It is a host-controlled workflow and remains separate from ordinary display-oriented `slex` HTML. Tool results cross an explicit submit/ignore boundary; do not imitate tool submission with arbitrary artifact code.
@@ -1,90 +1,101 @@
1
1
  # SlexKit > Markdown-friendly reactive UI runtime for AI output
2
2
 
3
- ## LLM Documentation Files
3
+ Version: 0.5.0
4
4
 
5
- - [Full documentation](/llms-full.txt): all canonical English docs pages in one text file.
6
- - [Component reference](/llms-components.txt): component docs index plus generated props/state reference.
7
- - [Runtime docs](/llms-runtime.txt): runtime, host integration, and secure rendering docs.
8
- - [Capabilities](/llms-capabilities.txt): expression context, `std.*` standard library, and policy-gated `api.*`.
9
- - [ToolHost docs](/llms-toolhost.txt): structured user-input UI docs.
10
- - [Authoring rules](/llms-authoring.txt): concise rules for Markdown `slex` fences.
11
- - [AI manifest](/slexkit-ai-manifest.json): structured page, component, and hash metadata.
5
+ ## Machine-readable documentation
12
6
 
13
- SlexKit raw docs are Markdown (`.md`) with explicit `slex` fences. The interactive layer is the fenced `slex` source inside each Markdown page.
14
-
15
- Version: 0.3.3
16
-
17
- ## Table of Contents
7
+ - [Complete documentation](/llms-full.txt)
8
+ - [Custom-element catalog and examples](/llms-components.txt)
9
+ - [Runtime reference](/llms-runtime.txt)
10
+ - [Sandbox SDK and capabilities](/llms-capabilities.txt)
11
+ - [ToolHost reference](/llms-toolhost.txt)
12
+ - [HTML authoring rules](/llms-authoring.txt)
13
+ - [AI documentation manifest](/slexkit-ai-manifest.json)
14
+ - [Standard manifest](/standard/slex-standard-manifest.json)
15
+ - [HTML profile](/standard/slex-html-profile.json)
16
+ - [Custom-element catalog](/standard/slex-custom-elements.catalog.json)
17
+ - [Sandbox SDK](/standard/slex-sandbox-sdk.json)
18
+ - [Static policy](/standard/slex-static-policy.json)
19
+ - [HTML conformance fixtures](/standard/slex-html-conformance.json)
18
20
 
19
21
  ### Guides
20
- - [README](/README.md): Root package overview and installation matrix.
21
- - [SlexKit Introduction](/docs/guides/intro.md): What SlexKit is and where it fits.
22
- - [Quick Start](/docs/guides/quick-start.md): Install SlexKit and render a first Markdown-friendly Slex source.
23
- - [Integration](/docs/guides/integration.md): React/Streamdown and Obsidian host plugins for explicit Slex fences.
24
- - [Design Guidelines](/docs/guides/design.md): Design and authoring guidelines for SlexKit components and docs.
25
- - [Secure Runtime Setup](/docs/guides/security-runtime.md): Decision and setup guide for rendering untrusted or agent-generated Slex source.
22
+
26
23
  - [AI / Agents](/docs/guides/ai-agents.md): LLM docs, MCP server, skills, and authoring rules for SlexKit agents.
24
+ - [Design Philosophy](/docs/guides/design.md): Design principles for live Markdown, components, and agent-generated UI.
25
+ - [Getting Started](/docs/guides/quick-start.md): Install SlexKit, mount a first fragment, and keep readable Markdown fallback.
26
+ - [Integration](/docs/guides/integration.md): Connect SlexKit to assistant-ui, Streamdown, Tiptap, Obsidian, or a custom Markdown renderer.
27
+ - [Secure Runtime Setup](/docs/guides/security-runtime.md): Run unreviewed user input, third-party Markdown, or agent output in the isolated HTML document host.
28
+ - [SlexKit Introduction](/docs/guides/intro.md): Markdown-friendly reactive UI runtime for explicit slex fences.
27
29
 
28
30
  ### Examples
29
- - [你的第一个 SlexKit 卡片](/zh-CN/examples/hello-slexkit.md): 零交互、纯展示的静态卡片,展示 SlexKit 声明式 DSL 的渲染效果。
30
- - [第一个交互:滑块操控数据](/zh-CN/examples/first-interaction.md): 在 SlexKit 卡片引入 g 对象和第一个滑块交互,体验响应式数据绑定。
31
- - [多输入协同:两个滑块联动](/zh-CN/examples/multi-input-coordination.md): 两个 slider 相互影响,引入 g 方法、formula 组件和条件渲染。
32
- - [分支与切换:模式选择器](/zh-CN/examples/tabs-and-branching.md): 用 select 实现场景切换,展示 UI = f(state) 的分支渲染模式。
33
- - [五险一金计算器](/zh-CN/examples/salary-calculator.md): 输入工资基数和城市,计算五险一金明细,显示个人缴纳、单位缴纳和总计。
34
- - [软件项目成本估算器](/zh-CN/examples/project-cost-estimator.md): 输入团队规模、开发周期和人员成本,计算项目总成本和人均成本。
35
- - [分压器计算器](/zh-CN/examples/voltage-divider.md): 输入电压和两个电阻值,计算分压输出,并评估负载效应带来的误差。
36
- - [RC 低通滤波器](/zh-CN/examples/rc-low-pass-filter.md): 用电阻和电容搭建的频率选择电路,计算截止频率和任意频率下的增益衰减。
37
- - [波特率误差计算器](/zh-CN/examples/baud-rate-calculator.md): 输入晶振频率和目标波特率,计算 UART 波特率误差百分比,判断通信可靠性。
38
- - [搜索与过滤表格](/zh-CN/examples/search-filter-table.md): 搜索输入框实时过滤表格行,点击行展开详情,展示 input + 动态 table + collapsible 组合。
39
- - [项目仪表盘](/zh-CN/examples/project-dashboard.md): 用 section + grid 搭建信息仪表盘,覆盖 Sprint 进度、质量指标和团队健康度的多卡片联动。
40
- - [ToolHost 表单提问](/zh-CN/examples/form-wizard-steps.md): AI 对话过程中突然需要收集用户信息,弹出表单卡片等待用户提交,提交后显示结果。
41
- - [技术选型评估](/zh-CN/examples/tech-selection-evaluator.md): 评估不同技术方案的优劣,通过跨 fence 联动实现参数选择、评分分析和结论推荐。
42
- - [ToolHost 对话演示](/zh-CN/examples/toolhost-demo.md): 展示 SlexKit 的 ToolHost 能力:在 AI 对话流中内嵌交互式表单,收集用户输入后返回结构化 ToolResult。
43
- - [自建还是外购决策](/zh-CN/examples/roi-estimator.md): 自建还是外购决策矩阵——功能覆盖、成本对比、时间线、风险四维度评估,自动推荐方案。
44
- - [跨文档状态实验室](/zh-CN/examples/cross-doc-state-lab.md): 展示 SlexKit 最独特的跨 fence 状态共享——文档不同位置的多块 slex 代码共享同一个响应式 g 对象。
45
- - [JSONPlaceholder 网络请求实验台](/zh-CN/examples/network-policy-fetch-card.md): 用 JSONPlaceholder 演示 secure runtime 如何把用户触发的网络请求交给 host policy 审核和代理。
31
+
32
+ - [Artifact Shared JSON Lab](/docs/examples/cross-doc-state-lab.md): Publish and subscribe to bounded JSON through artifact-local slex.shared without sharing DOM or module globals.
33
+ - [assistant-ui Integration](/docs/examples/assistant-ui-host.md): assistant-ui adapter for rendering explicit slex fences inside Streamdown text message parts.
34
+ - [Baud Rate Error Calculator](/docs/examples/baud-rate-calculator.md): Enter crystal frequency and target baud rate to calculate UART baud rate error percentage and judge communication reliability.
35
+ - [Branching: Mode Selector](/docs/examples/tabs-and-branching.md): Use select to switch the mode state and render different inputs and results.
36
+ - [Build vs Buy Decision](/docs/examples/roi-estimator.md): A build-vs-buy decision matrix — four-dimension evaluation across feature coverage, cost, timeline, and risk with automatic recommendation.
37
+ - [First Interaction: Button Counter](/docs/examples/first-interaction.md): A button updates a stat through native click handling and live component properties.
38
+ - [First SlexKit Card](/docs/examples/hello-slexkit.md): A static card with text and badge custom elements; no script is required.
39
+ - [JSONPlaceholder Network Request Lab](/docs/examples/network-policy-fetch-card.md): Uses JSONPlaceholder to demonstrate how the secure runtime delegates user-triggered network requests to host policy for review and proxying.
40
+ - [Multi-Input Coordination](/docs/examples/multi-input-coordination.md): An input and slider feed one JavaScript calculation through native input events.
41
+ - [Project Dashboard](/docs/examples/project-dashboard.md): Build an information dashboard with section + grid — covering Sprint progress, quality metrics, and team health with multi-card coordination.
42
+ - [RC Low-Pass Filter](/docs/examples/rc-low-pass-filter.md): A frequency-selective circuit built with a resistor and capacitor — calculate cutoff frequency and gain attenuation at any frequency.
43
+ - [Search and Filter Table](/docs/examples/search-filter-table.md): A search input filters table rows in real time and uses collapsible for row details.
44
+ - [Semantic Details Layout](/docs/examples/tech-selection-evaluator.md): Use native section and details elements when no documented compound custom element matches the content.
45
+ - [Social Insurance Calculator](/docs/examples/salary-calculator.md): Enter a salary and city to calculate China's social insurance breakdown — showing personal contributions, employer contributions, and take-home pay.
46
+ - [Software Project Cost Estimator](/docs/examples/project-cost-estimator.md): Enter team size, development timeline, and per-person cost to calculate total project cost and monthly burn rate.
47
+ - [Streamdown Integration](/docs/examples/streamdown-host.md): A React/Streamdown adapter that takes over explicit slex fences and leaves ordinary Markdown and code blocks to Streamdown.
48
+ - [Tiptap Editor Integration](/docs/examples/tiptap-host.md): A Tiptap CodeBlock adapter that previews explicit slex blocks while preserving ordinary code blocks and Markdown import/export.
49
+ - [ToolHost Form Question](/docs/examples/form-wizard-steps.md): ToolHost renders a form card during a conversation, collects project fields, and submits structured results.
50
+ - [ToolHost Tool Call UI](/docs/examples/toolhost-demo.md): Render a function_call as an inline tool card, then write the submitted result back as function_call_output.
51
+ - [Voltage Divider Calculator](/docs/examples/voltage-divider.md): Enter input voltage and two resistor values to calculate divider output voltage and evaluate load effect error.
46
52
 
47
53
  ### Components
48
- - [Accordion](/docs/components/accordion.md): Expandable grouped panels.
54
+
55
+ - [Accordion](/docs/components/accordion.md): Multi-panel collapse for FAQs or grouped details.
49
56
  - [Badge](/docs/components/badge.md): Compact label for status or classification.
50
- - [Button](/docs/components/button.md): Action trigger.
51
- - [Callout](/docs/components/callout.md): Highlighted contextual message.
52
- - [Card](/docs/components/card.md): Bordered grouping container.
53
- - [Checkbox](/docs/components/checkbox.md): Boolean checkbox input.
54
- - [Code Block](/docs/components/code-block.md): Formatted code or log block.
55
- - [Collapsible](/docs/components/collapsible.md): Single expandable region.
56
- - [Column](/docs/components/column.md): Vertical layout container.
57
- - [Divider](/docs/components/divider.md): Visual separator.
57
+ - [Button](/docs/components/button.md): Action trigger button.
58
+ - [Callout](/docs/components/callout.md): Highlighted contextual message for notes, warnings, and tips.
59
+ - [Card](/docs/components/card.md): Grouping container for related content.
60
+ - [Checkbox](/docs/components/checkbox.md): Boolean checkbox for confirmations and multi-select.
61
+ - [Code Block](/docs/components/code-block.md): Code or configuration snippet display.
62
+ - [Collapsible](/docs/components/collapsible.md): Single expandable content area.
63
+ - [Column](/docs/components/column.md): Vertical layout container for forms, text, and control groups.
64
+ - [Divider](/docs/components/divider.md): Separator line, optionally with label.
58
65
  - [Formula](/docs/components/formula.md): Reactive KaTeX formula display.
59
- - [Grid](/docs/components/grid.md): Responsive grid container.
60
- - [Icon](/docs/components/icon.md): Shared icon field capability.
61
- - [Input](/docs/components/input.md): Text or engineering-value input.
62
- - [Link](/docs/components/link.md): Inline navigation link.
63
- - [Playground](/docs/components/playground.md): Interactive source preview.
66
+ - [Grid](/docs/components/grid.md): Responsive equal-width grid for sibling cards, metrics, and field groups.
67
+ - [Icon](/docs/components/icon.md): Shared icon field capability used by all icon-supporting components.
68
+ - [Input](/docs/components/input.md): Single-line text or engineering value input.
69
+ - [Link](/docs/components/link.md): Navigation or lightweight jump action.
70
+ - [Playground](/docs/components/playground.md): Optional HTML editor and isolated preview registered explicitly from slexkit/tooling.
64
71
  - [Progress](/docs/components/progress.md): Progress bar.
65
- - [Radio Group](/docs/components/radio-group.md): Single-choice option group.
66
- - [Row](/docs/components/row.md): Horizontal layout container.
67
- - [Section](/docs/components/section.md): Page section with optional heading chrome.
68
- - [Select](/docs/components/select.md): Dropdown selection input.
72
+ - [Radio Group](/docs/components/radio-group.md): Mutually exclusive radio selection.
73
+ - [Row](/docs/components/row.md): Horizontal layout container for toolbars, status lines, and button groups.
74
+ - [Section](/docs/components/section.md): Page section with title, subtitle, optional action, and content area.
75
+ - [Select](/docs/components/select.md): Single-select dropdown.
69
76
  - [Slider](/docs/components/slider.md): Numeric range input.
70
- - [Stat](/docs/components/stat.md): Metric display.
71
- - [Submit](/docs/components/submit.md): ToolHost submit and ignore controls.
72
- - [Switch](/docs/components/switch.md): Boolean switch input.
73
- - [Table](/docs/components/table.md): Simple data table.
77
+ - [Stat](/docs/components/stat.md): Metric display with label, value, unit, and semantic tone.
78
+ - [Submit](/docs/components/submit.md): ToolHost-only submit action that returns current selection or form values to the host.
79
+ - [Switch](/docs/components/switch.md): Boolean toggle input for instant settings.
80
+ - [Table](/docs/components/table.md): Structured table with columns and rows.
74
81
  - [Tabs](/docs/components/tabs.md): Tabbed view switcher.
75
- - [Text](/docs/components/text.md): Plain text display.
76
- - [Toast](/docs/components/toast.md): Transient notification.
82
+ - [Text](/docs/components/text.md): Short text output for status, description, and results.
83
+ - [Toast](/docs/components/toast.md): Transient notification with semantic type.
84
+ - [ToolHost Step](/docs/components/step.md): ToolHost-only step page for collecting multiple human inputs inside one function call.
77
85
 
78
86
  ### Reference
79
- - [Slex Specification](/docs/reference/spec.md): Public Slex expression envelope, component keys, props, directives, and lifecycle.
80
- - [Slex Usage Reference](/docs/reference/usage.md): Slex source structure, props, directives, events, theming, custom components, and ToolHost boundaries.
81
- - [Runtime Model](/docs/reference/runtime.md): Mounting, ingestion, boot, namespace store, lifecycle, and runtime APIs.
82
- - [Host Integration](/docs/reference/integration.md): Markdown renderers, Streamdown, Obsidian, custom hosts, and artifact lifecycle.
83
- - [Security Runtime](/docs/reference/security.md): Threat model, sandbox iframe, postMessage bridge, policy, and fail-closed behavior.
84
- - [Package Boundaries](/docs/reference/packages.md): Package relationships, installation matrix, and packaging strategy.
85
- - [ToolHost](/docs/reference/toolhost.md): Tool call rendering, built-in templates, custom templates, and submit boundaries.
86
- - [Icon System](/docs/reference/icons.md): Phosphor icons, custom icon registration, Iconify fallback, and API reference.
87
- - [Design Rationale](/docs/reference/rationale.md): Why SlexKit uses object literals, expressions, explicit fences, and secure/trusted modes.
87
+
88
+ - [Design Rationale](/docs/reference/rationale.md): Why SlexKit uses standards-based HTML/JavaScript with an isolated document lifecycle.
89
+ - [Host Integration](/docs/reference/integration.md): HTML document host integration for Streamdown, assistant-ui, Tiptap, note hosts, and custom adapters.
90
+ - [Icon System](/docs/reference/icons.md): Phosphor icons, custom icon registration, Iconify fallback, and component icon usage.
91
+ - [Packages](/docs/reference/packages.md): SlexKit npm package roles, install combinations, publish contents, and release checks.
92
+ - [Runtime Model](/docs/reference/runtime.md): HTML mounting, artifact updates, isolated lifecycle hooks, snapshots, shared JSON state, and static inspection.
93
+ - [Security Runtime Contract](/docs/reference/security.md): Threat model, sandbox iframe deployment, host policy, postMessage bridge, and fail-closed behavior.
94
+ - [Slex HTML Profile html-1](/docs/reference/spec.md): HTML source profile, sandbox SDK, update identity, lifecycle, and static inspection contract.
95
+ - [Slex Standard Artifacts](/docs/reference/standard.md): Generated metadata for the html-1 profile, custom elements, sandbox SDK, static policy, conformance fixtures, and hashes.
96
+ - [Slex Usage Reference](/docs/reference/usage.md): HTML source structure, attributes, live properties, native events, slots, theming, and lifecycle hooks.
97
+ - [ToolHost](/docs/reference/toolhost.md): Structured user-input UI for confirmations, choices, forms, and templates.
88
98
 
89
99
  ### Releases
100
+
90
101
  - [Changelog](/docs/releases/changelog.md): Release notes and notable changes for SlexKit.