llm-testrunner-components 1.2.4 → 1.3.1

package/README.md

@@ -44,7 +44,7 @@ import { defineCustomElements } from "llm-testrunner-components/loader";
 defineCustomElements();
 ```
 
-**Step 2 — Use the component and connect your LLM.** The runner fires an `llmRequest` event whenever it needs a response. You call your API, then either `resolve(responseText)` or `reject(error)`.
+**Step 2 — Use the component and connect your LLM.** The runner fires an `llmRequest` event whenever it needs a response. You call your API, then either `resolve({ text, metadata? })` or `reject(error)`.
 
 ```tsx
 import { useRef } from "react";
@@ -56,7 +56,7 @@ function App() {
   const handleLlmRequest = async (e) => {
     try {
       const response = await yourLLMApi(e.detail.prompt);
-      e.detail.resolve(response);
+      e.detail.resolve({ text: response });
     } catch (err) {
       e.detail.reject(err);
     }
@@ -98,7 +98,7 @@ Load the loader and define the custom elements, then listen for `llmRequest` and
   runner.addEventListener("llmRequest", async (e) => {
     try {
       const response = await yourLLMFetch(e.detail.prompt);
-      e.detail.resolve(response);
+      e.detail.resolve({ text: response });
     } catch (err) {
       e.detail.reject(err);
     }
@@ -113,7 +113,7 @@ Load the loader and define the custom elements, then listen for `llmRequest` and
 The library **never** sends requests to an LLM. You do. When a test runs, the component emits an `llmRequest` event with:
 
 - `prompt` — the question text for this test case  
-- `resolve(responseText)` — call this with the model’s reply (string)  
+- `resolve({ text, metadata? })` — call this with the model’s reply payload  
 - `reject(error)` — call this if the request fails  
 
 How you get the response is up to you: REST, SDK, or local inference. Same pattern for OpenAI, Gemini, Claude, or any other provider.
@@ -169,12 +169,13 @@ When you pass `initialTestCases`, use an array of objects with `type`, `label`,
 | `useSave` | `use-save` | `boolean` | `false` | Show Save button and emit `save` events. |
 | `initialTestCases` | — | `TestCase[]` | `undefined` | Preload test cases. See [types](#types) below. |
 | `defaultExpectedOutcomeSchema` | — | `ExpectedOutcomeSchema` | built-in | Schema for new test cases (field types and labels). |
+| `evaluationSourceExtractors` | — | `EvaluationSourceExtractors` | `undefined` | Registry of named extractors used by per-field `evaluationSource: { type: 'custom', extractorId }`. |
 
 ### Events
 
 | Event | Payload | Description |
 |-------|---------|-------------|
-| `llmRequest` | `{ prompt, resolve, reject }` | Runner needs an LLM response. Call `resolve(responseText)` or `reject(error)`. |
+| `llmRequest` | `{ prompt, resolve, reject }` | Runner needs an LLM response. Call `resolve({ text, metadata? })` or `reject(error)`. |
 | `save` | `{ timestamp, testCases }` | User clicked Save (only when `useSave` is true). Persist then call `resetSavingState()`. |
 
 ### Methods
@@ -182,6 +183,7 @@ When you pass `initialTestCases`, use an array of objects with `type`, `label`,
 | Method | Description |
 |--------|-------------|
 | `resetSavingState()` | Call after you finish persisting a save so the Save button leaves loading state. Use a ref in React. |
+| `getTestCases()` | Returns the current in-memory test cases from the runner as `Promise<TestCase[]>`. |
 
 ### Types
 
@@ -191,6 +193,8 @@ Import from `llm-testrunner-components/react/types`:
 import type {
   TestCase,
   LLMRequestPayload,
+  ModelResponsePayload,
+  EvaluationSourceExtractors,
   SavePayload,
   ExpectedOutcomeSchema,
   ExpectedOutcomeField,

package/dist/cjs/{app-chips_5.cjs.entry.js → app-chips_4.cjs.entry.js}

@@ -1,15 +1,14 @@
 'use strict';
 
-var index$1 = require('./index-CgmLNwZO.js');
-var index = require('./index.cjs.js');
+var index = require('./index-CgmLNwZO.js');
 
 const appChipsCss = () => `.app-chips{margin-bottom:var(--spacing-4)}.app-chips__label{display:block;margin-bottom:var(--spacing-2);font-weight:var(--font-weight-medium);color:var(--foreground);font-size:var(--font-size-sm)}.app-chips__container{display:flex;flex-wrap:wrap;gap:var(--spacing-2);align-items:center}.app-chips__chip{display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);background:var(--accent);border:var(--border-width) solid var(--border)}.app-chips__chip:not(:has(a)){background:var(--info);color:var(--info-foreground);border:none;border-radius:var(--radius-2xl)}.app-chips__link{color:var(--info);text-decoration:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app-chips__link:hover{text-decoration:underline}.app-chips__remove{background:none;border:none;cursor:pointer;font-size:var(--font-size-xs);padding:0;width:var(--spacing-4);height:var(--spacing-4);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--muted-foreground);opacity:var(--opacity-muted)}.app-chips__chip:not(:has(a)) .app-chips__remove{color:var(--info-foreground);opacity:var(--opacity-hover)}.app-chips__remove:hover{opacity:1;background:var(--muted)}.app-chips__chip:not(:has(a)) .app-chips__remove:hover{background:rgba(255, 255, 255, 0.2)}.app-chips__input{border:var(--border-width) solid var(--input);border-radius:var(--radius-md);padding:var(--spacing-2);font-size:var(--font-size-xs);outline:none;min-width:120px;background:var(--background);color:var(--foreground)}.app-chips__input:focus{border-color:var(--ring);box-shadow:0 0 0 2px rgba(59, 130, 246, 0.1)}`;
 
 const AppChips = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.addChip = index$1.createEvent(this, "addChip");
-        this.removeChip = index$1.createEvent(this, "removeChip");
+        index.registerInstance(this, hostRef);
+        this.addChip = index.createEvent(this, "addChip");
+        this.removeChip = index.createEvent(this, "removeChip");
     }
     value = [];
     config;
@@ -40,7 +39,7 @@ const AppChips = class {
             name: c.name,
             autocomplete: c.autocomplete,
         };
-        return (index$1.h("div", { key: 'fb7d4d5444e9c9ac33c56aec88e3e10ed103c8be', class: "app-chips" }, c.label && (index$1.h("label", { key: '2d0041b3a137fecddef2273eac3792b5e8de27ab', class: "app-chips__label", htmlFor: c.name }, c.label)), index$1.h("div", { key: 'f73b1105e567b233626073e05b9da712689e7b12', class: "app-chips__container" }, this.value.map((chip) => (index$1.h("span", { class: "app-chips__chip", key: chip }, c.type === 'url' ? (index$1.h("a", { href: chip, target: "_blank", rel: "noopener noreferrer", class: "app-chips__link" }, chip)) : (chip), index$1.h("button", { class: "app-chips__remove", type: "button", onClick: () => this.emitRemoveChip(chip) }, "\u00D7")))), index$1.h("input", { key: '7676ff95531b34d10cbf9402e72a723e7e123e0e', class: "app-chips__input", type: c.type || 'text', ...allowedAttrs, onKeyDown: (e) => {
+        return (index.h("div", { key: 'fb7d4d5444e9c9ac33c56aec88e3e10ed103c8be', class: "app-chips" }, c.label && (index.h("label", { key: '2d0041b3a137fecddef2273eac3792b5e8de27ab', class: "app-chips__label", htmlFor: c.name }, c.label)), index.h("div", { key: 'f73b1105e567b233626073e05b9da712689e7b12', class: "app-chips__container" }, this.value.map((chip) => (index.h("span", { class: "app-chips__chip", key: chip }, c.type === 'url' ? (index.h("a", { href: chip, target: "_blank", rel: "noopener noreferrer", class: "app-chips__link" }, chip)) : (chip), index.h("button", { class: "app-chips__remove", type: "button", onClick: () => this.emitRemoveChip(chip) }, "\u00D7")))), index.h("input", { key: '7676ff95531b34d10cbf9402e72a723e7e123e0e', class: "app-chips__input", type: c.type || 'text', ...allowedAttrs, onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     const input = e.target;
                     const val = input.value.trim();
@@ -62,8 +61,8 @@ const appSelectCss = () => `.app-select{margin-bottom:var(--spacing-4)}.app-sele
 
 const AppSelect = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.valueChange = index$1.createEvent(this, "valueChange");
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
     }
     value;
     config;
@@ -79,23 +78,23 @@ const AppSelect = class {
             placeholder: c.placeholder,
             autocomplete: c.autocomplete,
         };
-        return (index$1.h("div", { key: '968f0fffe1eff976ac7e00f02db6fb84aa529de4', class: "app-select" }, c.label && (index$1.h("label", { key: 'dac02d2335754ff5d6ce6ba1df5777f8b019cfae', class: "app-select__label", htmlFor: c.name }, c.label)), index$1.h("div", { key: 'c92698199479bbdde1cfd559d69fc97e54d2862a' }, index$1.h("select", { key: '6e9b27b034d057921f52fbd12653c5ef1b6af1bc', ...allowedAttrs, class: "app-select__select", onInput: (e) => {
+        return (index.h("div", { key: '968f0fffe1eff976ac7e00f02db6fb84aa529de4', class: "app-select" }, c.label && (index.h("label", { key: 'dac02d2335754ff5d6ce6ba1df5777f8b019cfae', class: "app-select__label", htmlFor: c.name }, c.label)), index.h("div", { key: 'c92698199479bbdde1cfd559d69fc97e54d2862a' }, index.h("select", { key: '6e9b27b034d057921f52fbd12653c5ef1b6af1bc', ...allowedAttrs, class: "app-select__select", onInput: (e) => {
                 const raw = e.target.value;
                 const matched = c.optionList.find(opt => String(opt) === raw);
                 this.valueChange.emit({
                     value: matched !== undefined ? matched : raw,
                 });
-            } }, c.optionList?.map(option => (index$1.h("option", { value: String(option), key: String(option), selected: this.value === option }, String(option))))))));
+            } }, c.optionList?.map(option => (index.h("option", { value: String(option), key: String(option), selected: this.value === option }, String(option))))))));
     }
 };
 AppSelect.style = appSelectCss();
 
-const appTextareaCss = () => `.textarea-wrapper{margin-bottom:var(--spacing-4)}.textarea-label{display:block;margin-bottom:var(--spacing-2);font-weight:var(--font-weight-medium);color:var(--foreground);font-size:var(--font-size-sm)}.textarea-element{width:95%;box-sizing:border-box;padding:var(--spacing-3);border:2px solid var(--input);border-radius:var(--radius);font-size:var(--font-size-sm);resize:vertical;outline:none;transition:border-color 0.2s ease;font-family:inherit;background:var(--background);color:var(--foreground)}.textarea-element:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1)}.textarea-wrapper--read-only .textarea-label{color:var(--muted-foreground)}.textarea-element:read-only{background:var(--muted);color:var(--muted-foreground);border-color:var(--border);cursor:not-allowed;resize:none}.textarea-element:read-only:focus{border-color:var(--border);box-shadow:none}.help-text{margin-top:var(--spacing-1);font-size:var(--font-size-xs);color:var(--muted-foreground, #6b7280);line-height:1.4}`;
+const appTextareaCss = () => `.textarea-wrapper{margin-bottom:var(--spacing-4)}.textarea-label{display:block;margin-bottom:var(--spacing-2);font-weight:var(--font-weight-medium);color:var(--foreground);font-size:var(--font-size-sm)}.textarea-element{width:95%;box-sizing:border-box;padding:var(--spacing-3);border:2px solid var(--input);border-radius:var(--radius);font-size:var(--font-size-sm);resize:vertical;outline:none;transition:border-color 0.2s ease;font-family:inherit;background:var(--background);color:var(--foreground)}.textarea-element:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1)}.textarea-wrapper--read-only .textarea-label{color:var(--muted-foreground)}.textarea-element:read-only{background:var(--muted);color:var(--muted-foreground);border-color:var(--border);cursor:default;resize:vertical}.textarea-element:read-only:focus{border-color:var(--border);box-shadow:none}.help-text{margin-top:var(--spacing-1);font-size:var(--font-size-xs);color:var(--muted-foreground, #6b7280);line-height:1.4}`;
 
 const AppTextarea = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.valueChange = index$1.createEvent(this, "valueChange");
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
     }
     value;
     config;
@@ -118,15 +117,15 @@ const AppTextarea = class {
             name: c.name,
             autocomplete: c.autocomplete,
         };
-        return (index$1.h("div", { key: 'f0749b1f2badf8434272da9fb37b354b42ba988b', class: {
+        return (index.h("div", { key: 'f0749b1f2badf8434272da9fb37b354b42ba988b', class: {
                 'textarea-wrapper': true,
                 'textarea-wrapper--read-only': !!c.readOnly,
-            } }, c.label && (index$1.h("label", { key: '3448c838bcf9e962df005eae8fc313d216497c35', class: "textarea-label", htmlFor: c.name }, c.label)), index$1.h("textarea", { key: 'b4ee67a24fa71b0fa042625f943b0e226a6d14b7', ...allowedAttrs, class: "textarea-element", value: this.value, onInput: this.handleChange }), c.helpText && index$1.h("p", { key: 'fb6263c32e6cc5e36dbc77344c31487d63d51a1c', class: "help-text" }, c.helpText)));
+            } }, c.label && (index.h("label", { key: '3448c838bcf9e962df005eae8fc313d216497c35', class: "textarea-label", htmlFor: c.name }, c.label)), index.h("textarea", { key: 'b4ee67a24fa71b0fa042625f943b0e226a6d14b7', ...allowedAttrs, class: "textarea-element", value: this.value, onInput: this.handleChange }), c.helpText && index.h("p", { key: 'fb6263c32e6cc5e36dbc77344c31487d63d51a1c', class: "help-text" }, c.helpText)));
     }
 };
 AppTextarea.style = appTextareaCss();
 
-const chatHistoryCss = () => `.chat-history{display:flex;flex-direction:column;gap:var(--spacing-3);margin-top:var(--spacing-4)}.chat-history__toggle-row{display:flex;align-items:center}.chat-history__switch{position:relative;display:inline-flex;align-items:center;gap:var(--spacing-3);cursor:pointer;user-select:none}.chat-history__switch-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.chat-history__switch-ui{position:relative;flex-shrink:0;width:2.75rem;height:1.5rem;border-radius:var(--radius-full);background:var(--muted);border:var(--border-width) solid var(--border);transition:background 0.15s ease,     border-color 0.15s ease}@media (prefers-reduced-motion: reduce){.chat-history__switch-ui,.chat-history__switch-thumb{transition:none}}.chat-history__switch-thumb{position:absolute;top:2px;left:2px;width:calc(1.5rem - 6px);height:calc(1.5rem - 6px);border-radius:var(--radius-full);background:var(--background);box-shadow:var(--shadow-sm);transition:transform 0.15s ease}.chat-history__switch-input:checked+.chat-history__switch-ui{background:var(--primary);border-color:var(--primary)}.chat-history__switch-input:checked+.chat-history__switch-ui .chat-history__switch-thumb{transform:translateX(calc(2.75rem - (1.5rem - 6px) - 4px))}.chat-history__switch-input:focus-visible+.chat-history__switch-ui{outline:2px solid var(--ring);outline-offset:2px}.chat-history__switch-text{font-size:var(--font-size-sm, 0.875rem);color:var(--foreground)}.chat-history__textarea{width:100%;box-sizing:border-box;padding:var(--spacing-2) var(--spacing-3);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);font:inherit;resize:vertical;min-height:9rem;background:var(--background)}.chat-history__textarea:focus-visible{outline:2px solid var(--ring);outline-offset:2px}`;
+const chatHistoryCss = () => `.chat-history{display:flex;flex-direction:column;gap:var(--spacing-3);margin-top:var(--spacing-4)}.chat-history__toggle-row{display:flex;align-items:center}.chat-history__switch{position:relative;display:inline-flex;align-items:center;gap:var(--spacing-3);cursor:pointer;user-select:none}.chat-history__switch-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.chat-history__switch-ui{position:relative;flex-shrink:0;display:flex;align-items:center;padding:0px 4px;width:2.75rem;height:1.5rem;border-radius:var(--radius-full);background:var(--muted);border:var(--border-width) solid var(--border);transition:background 0.15s ease,     border-color 0.15s ease}@media (prefers-reduced-motion: reduce){.chat-history__switch-ui,.chat-history__switch-thumb{transition:none}}.chat-history__switch-thumb{display:inline-block;width:calc(1.5rem - 6px);height:calc(1.5rem - 6px);border-radius:var(--radius-full);background:var(--background);box-shadow:var(--shadow-sm);transition:transform 0.15s ease}.chat-history__switch-input:checked+.chat-history__switch-ui{background:var(--primary);border-color:var(--primary)}.chat-history__switch-input:checked+.chat-history__switch-ui .chat-history__switch-thumb{transform:translateX(calc(2.75rem - (1.5rem - 6px)))}.chat-history__switch-input:focus-visible+.chat-history__switch-ui{outline:2px solid var(--ring);outline-offset:2px}.chat-history__switch-text{font-size:var(--font-size-sm, 0.875rem);color:var(--foreground)}.chat-history__textarea{width:100%;box-sizing:border-box;padding:var(--spacing-2) var(--spacing-3);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);font:inherit;resize:vertical;min-height:9rem;background:var(--background)}.chat-history__textarea:focus-visible{outline:2px solid var(--ring);outline-offset:2px}`;
 
 const CHAT_HISTORY_PLACEHOLDER = `[
   {"role": "user", "content": "How do I import a saved suite?"},
@@ -134,8 +133,8 @@ const CHAT_HISTORY_PLACEHOLDER = `[
 ]`;
 const ChatHistory = class {
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.chatHistoryChange = index$1.createEvent(this, "chatHistoryChange");
+        index.registerInstance(this, hostRef);
+        this.chatHistoryChange = index.createEvent(this, "chatHistoryChange");
     }
     chatHistoryEnabled = false;
     chatHistoryValue = '';
@@ -152,16 +151,15 @@ const ChatHistory = class {
         this.emit({ enabled: this.chatHistoryEnabled, value });
     };
     render() {
-        return (index$1.h("div", { key: 'f444a4b5bd9b48df151cad67b54bef54116d11b3', class: "chat-history" }, index$1.h("div", { key: '7216d764fb905ac5e8e33209d9586525e59fa218', class: "chat-history__toggle-row" }, index$1.h("label", { key: 'd5d092c323b48543c96525d449bcb03dcaf5113b', class: "chat-history__switch" }, index$1.h("input", { key: '5104ce460686434156454fc1dfd3685ba0e0968c', type: "checkbox", class: "chat-history__switch-input", checked: this.chatHistoryEnabled, onInput: this.onToggle }), index$1.h("span", { key: 'fa2e51bce0d6ff2d3bf133383e1ce940521097b0', class: "chat-history__switch-ui", "aria-hidden": "true" }, index$1.h("span", { key: 'e0d897ca166623ece09834b44b5baa12605cb9f3', class: "chat-history__switch-thumb" })), index$1.h("span", { key: 'e769678fde5d670e634d7a8e905ef09ce936f440', class: "chat-history__switch-text" }, "Chat history"))), this.chatHistoryEnabled ? (index$1.h("textarea", { class: "chat-history__textarea", value: this.chatHistoryValue, rows: 8, placeholder: CHAT_HISTORY_PLACEHOLDER, "aria-label": "Chat history", onInput: this.onTextInput })) : null));
+        return (index.h("div", { key: 'f444a4b5bd9b48df151cad67b54bef54116d11b3', class: "chat-history" }, index.h("div", { key: '7216d764fb905ac5e8e33209d9586525e59fa218', class: "chat-history__toggle-row" }, index.h("label", { key: 'd5d092c323b48543c96525d449bcb03dcaf5113b', class: "chat-history__switch" }, index.h("input", { key: '5104ce460686434156454fc1dfd3685ba0e0968c', type: "checkbox", class: "chat-history__switch-input", checked: this.chatHistoryEnabled, onInput: this.onToggle }), index.h("span", { key: 'fa2e51bce0d6ff2d3bf133383e1ce940521097b0', class: "chat-history__switch-ui", "aria-hidden": "true" }, index.h("span", { key: 'e0d897ca166623ece09834b44b5baa12605cb9f3', class: "chat-history__switch-thumb" })), index.h("span", { key: 'e769678fde5d670e634d7a8e905ef09ce936f440', class: "chat-history__switch-text" }, "Chat history"))), this.chatHistoryEnabled ? (index.h("textarea", { class: "chat-history__textarea", value: this.chatHistoryValue, rows: 8, placeholder: CHAT_HISTORY_PLACEHOLDER, "aria-label": "Chat history", onInput: this.onTextInput })) : null));
     }
 };
 ChatHistory.style = chatHistoryCss();
 
-exports.llm_test_runner = index.LLMTestRunner;
 exports.app_chips = AppChips;
 exports.app_select = AppSelect;
 exports.app_textarea = AppTextarea;
 exports.chat_history = ChatHistory;
-//# sourceMappingURL=app-chips.app-select.app-textarea.chat-history.llm-test-runner.entry.cjs.js.map
+//# sourceMappingURL=app-chips.app-select.app-textarea.chat-history.entry.cjs.js.map
 
-//# sourceMappingURL=app-chips_5.cjs.entry.js.map
+//# sourceMappingURL=app-chips_4.cjs.entry.js.map

package/dist/cjs/app-chips_4.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"app-chips_4.cjs.entry.js","mappings":"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","names":["h"],"sources":["src/lib/form/components/app-chips.css?tag=app-chips&encapsulation=shadow","src/lib/form/components/app-chips.tsx","src/lib/form/components/app-select.css?tag=app-select&encapsulation=shadow","src/lib/form/components/app-select.tsx","src/lib/form/components/app-textarea.css?tag=app-textarea&encapsulation=shadow","src/lib/form/components/app-textarea.tsx","src/components/llm-test-runner/test-cases/chat-history.css?tag=chat-history&encapsulation=shadow","src/components/llm-test-runner/test-cases/chat-history.tsx"],"sourcesContent":[".app-chips {\n  margin-bottom: var(--spacing-4);\n}\n\n.app-chips__label {\n  display: block;\n  margin-bottom: var(--spacing-2);\n  font-weight: var(--font-weight-medium);\n  color: var(--foreground);\n  font-size: var(--font-size-sm);\n}\n\n.app-chips__container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-2);\n  align-items: center;\n}\n\n.app-chips__chip {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-2);\n  padding: var(--spacing-1) var(--spacing-2);\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  border-radius: var(--radius-md);\n  background: var(--accent);\n  border: var(--border-width) solid var(--border);\n}\n\n/* Keyword-style chip override (non-URL chips) */\n.app-chips__chip:not(:has(a)) {\n  background: var(--info);\n  color: var(--info-foreground);\n  border: none;\n  border-radius: var(--radius-2xl);\n}\n\n.app-chips__link {\n  color: var(--info);\n  text-decoration: none;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.app-chips__link:hover {\n  text-decoration: underline;\n}\n\n.app-chips__remove {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: var(--font-size-xs);\n  padding: 0;\n  width: var(--spacing-4);\n  height: var(--spacing-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-full);\n  color: var(--muted-foreground);\n  opacity: var(--opacity-muted);\n}\n\n.app-chips__chip:not(:has(a)) .app-chips__remove {\n  color: var(--info-foreground);\n  opacity: var(--opacity-hover);\n}\n\n.app-chips__remove:hover {\n  opacity: 1;\n  background: var(--muted);\n}\n\n.app-chips__chip:not(:has(a)) .app-chips__remove:hover {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n.app-chips__input {\n  border: var(--border-width) solid var(--input);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-2);\n  font-size: var(--font-size-xs);\n  outline: none;\n  min-width: 120px;\n  background: var(--background);\n  color: var(--foreground);\n}\n\n.app-chips__input:focus {\n  border-color: var(--ring);\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ChipsConfig } from '../schema';\n\n@Component({\n  tag: 'app-chips',\n  styleUrl: 'app-chips.css',\n  shadow: true,\n})\nexport class AppChips {\n  @Prop() value: string[] = [];\n  @Prop() config: ChipsConfig;\n\n  @Event() addChip: EventEmitter<{ value: string }>;\n\n  @Event() removeChip: EventEmitter<{ value: string }>;\n\n  private emitAddChip(val: string) {\n    this.addChip.emit({\n      value: val,\n    });\n  }\n\n  private emitRemoveChip(value: string) {\n    this.removeChip.emit({\n      value,\n    });\n  }\n\n  private hasDuplicateChip(value: string): boolean {\n    const normalized = value.trim().toLowerCase();\n    return this.value.some(chip => chip.trim().toLowerCase() === normalized);\n  }\n\n  render() {\n    const c = this.config;\n\n    const allowedAttrs = {\n      placeholder: c.placeholder,\n      required: c.required,\n      disabled: c.disabled,\n      readOnly: c.readOnly,\n      id: c.name,\n      name: c.name,\n      autocomplete: c.autocomplete,\n    };\n\n    return (\n      <div class=\"app-chips\">\n        {c.label && (\n          <label class=\"app-chips__label\" htmlFor={c.name}>\n            {c.label}\n          </label>\n        )}\n\n        <div class=\"app-chips__container\">\n          {this.value.map((chip) => (\n            <span class=\"app-chips__chip\" key={chip}>\n              {c.type === 'url' ? (\n                <a\n                  href={chip}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  class=\"app-chips__link\"\n                >\n                  {chip}\n                </a>\n              ) : (\n                chip\n              )}\n\n              <button\n                class=\"app-chips__remove\"\n                type=\"button\"\n                onClick={() => this.emitRemoveChip(chip)}\n              >\n                ×\n              </button>\n            </span>\n          ))}\n\n          <input\n            class=\"app-chips__input\"\n            type={c.type || 'text'}\n            {...allowedAttrs}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (e.key === 'Enter') {\n                const input = e.target as HTMLInputElement;\n                const val = input.value.trim();\n                if (!val) return;\n                if (this.hasDuplicateChip(val)) {\n                  input.value = '';\n                  return;\n                }\n\n                this.emitAddChip(val);\n                input.value = '';\n              }\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n",".app-select {\n  margin-bottom: var(--spacing-4);\n}\n\n.app-select__label {\n  display: block;\n  margin-bottom: var(--spacing-2);\n  font-weight: var(--font-weight-medium);\n  color: var(--foreground);\n  font-size: var(--font-size-sm);\n}\n\n.app-select__select {\n  border: var(--border-width) solid var(--input);\n  border-radius: var(--radius-md);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  padding: var(--spacing-1) var(--spacing-2);\n  outline: none;\n  background: var(--background);\n  width: 145px;\n  color: var(--foreground);\n}\n\n.app-select__select:focus {\n  border-color: var(--ring);\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { SelectConfig } from '../schema';\n\n@Component({\n  tag: 'app-select',\n  styleUrl: 'app-select.css',\n  shadow: true,\n})\nexport class AppSelect {\n  @Prop() value: string;\n  @Prop() config: SelectConfig;\n  @Event() valueChange: EventEmitter<{ value: string }>;\n\n  render() {\n    const c = this.config;\n    const allowedAttrs = {\n      id: c.name,\n      name: c.name,\n      disabled: c.disabled,\n      required: c.required,\n      readOnly: c.readOnly,\n      placeholder: c.placeholder,\n      autocomplete: c.autocomplete,\n    };\n    return (\n      <div class=\"app-select\">\n        {c.label && (\n          <label class=\"app-select__label\" htmlFor={c.name}>\n            {c.label}\n          </label>\n        )}\n\n        <div>\n          <select\n            {...allowedAttrs}\n            class=\"app-select__select\"\n            onInput={(e: Event) => {\n              const raw = (e.target as HTMLSelectElement).value;\n              const matched = c.optionList.find(opt => String(opt) === raw);\n              this.valueChange.emit({\n                value: matched !== undefined ? matched : raw,\n              });\n            }}\n          >\n            {c.optionList?.map(option => (\n              <option\n                value={String(option)}\n                key={String(option)}\n                selected={this.value === option}\n              >\n                {String(option)}\n              </option>\n            ))}\n          </select>\n        </div>\n      </div>\n    );\n  }\n}\n",".textarea-wrapper {\n  margin-bottom: var(--spacing-4);\n}\n\n.textarea-label {\n  display: block;\n  margin-bottom: var(--spacing-2);\n  font-weight: var(--font-weight-medium);\n  color: var(--foreground);\n  font-size: var(--font-size-sm);\n}\n\n.textarea-element {\n  width: 95%;\n  box-sizing: border-box;\n  padding: var(--spacing-3);\n  border: 2px solid var(--input);\n  border-radius: var(--radius);\n  font-size: var(--font-size-sm);\n  resize: vertical;\n  outline: none;\n  transition: border-color 0.2s ease;\n  font-family: inherit;\n  background: var(--background);\n  color: var(--foreground);\n}\n\n.textarea-element:focus {\n  border-color: var(--ring);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.textarea-wrapper--read-only .textarea-label {\n  color: var(--muted-foreground);\n}\n\n.textarea-element:read-only {\n  background: var(--muted);\n  color: var(--muted-foreground);\n  border-color: var(--border);\n  cursor: default;\n  resize: vertical;\n}\n\n.textarea-element:read-only:focus {\n  border-color: var(--border);\n  box-shadow: none;\n}\n\n.help-text {\n  margin-top: var(--spacing-1);\n  font-size: var(--font-size-xs);\n  color: var(--muted-foreground, #6b7280);\n  line-height: 1.4;\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { TextAreaConfig } from '../schema';\n\n@Component({\n  tag: 'app-textarea',\n  styleUrl: 'app-textarea.css',\n  shadow: true,\n})\nexport class AppTextarea {\n  @Prop() value: string;\n  @Prop() config: TextAreaConfig;\n\n  @Event() valueChange: EventEmitter<{ value: string }>;\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLTextAreaElement;\n\n    this.valueChange.emit({\n      value: target.value,\n    });\n  };\n\n  render() {\n    const c = this.config;\n\n    const allowedAttrs = {\n      placeholder: c.placeholder,\n      required: c.required,\n      disabled: c.disabled,\n      readOnly: c.readOnly,\n      rows: c.rows,\n      id: c.name,\n      name: c.name,\n      autocomplete: c.autocomplete,\n    };\n\n    return (\n      <div\n        class={{\n          'textarea-wrapper': true,\n          'textarea-wrapper--read-only': !!c.readOnly,\n        }}\n      >\n        {c.label && (\n          <label class=\"textarea-label\" htmlFor={c.name}>\n            {c.label}\n          </label>\n        )}\n\n        <textarea\n          {...allowedAttrs}\n          class=\"textarea-element\"\n          value={this.value}\n          onInput={this.handleChange}\n        ></textarea>\n\n        {c.helpText && <p class=\"help-text\">{c.helpText}</p>}\n      </div>\n    );\n  }\n}\n",".chat-history {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-3);\n  margin-top: var(--spacing-4);\n}\n\n.chat-history__toggle-row {\n  display: flex;\n  align-items: center;\n}\n\n.chat-history__switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-3);\n  cursor: pointer;\n  user-select: none;\n}\n\n.chat-history__switch-input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.chat-history__switch-ui {\n  position: relative;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  padding: 0px 4px;\n  width: 2.75rem;\n  height: 1.5rem;\n  border-radius: var(--radius-full);\n  background: var(--muted);\n  border: var(--border-width) solid var(--border);\n  transition:\n    background 0.15s ease,\n    border-color 0.15s ease;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chat-history__switch-ui,\n  .chat-history__switch-thumb {\n    transition: none;\n  }\n}\n\n.chat-history__switch-thumb {\n  display: inline-block;\n  width: calc(1.5rem - 6px);\n  height: calc(1.5rem - 6px);\n  border-radius: var(--radius-full);\n  background: var(--background);\n  box-shadow: var(--shadow-sm);\n  transition: transform 0.15s ease;\n}\n\n.chat-history__switch-input:checked + .chat-history__switch-ui {\n  background: var(--primary);\n  border-color: var(--primary);\n}\n\n.chat-history__switch-input:checked + .chat-history__switch-ui .chat-history__switch-thumb {\n  transform: translateX(calc(2.75rem - (1.5rem - 6px)));\n}\n\n.chat-history__switch-input:focus-visible + .chat-history__switch-ui {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n.chat-history__switch-text {\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--foreground);\n}\n\n.chat-history__textarea {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--spacing-2) var(--spacing-3);\n  border: var(--border-width) solid var(--border);\n  border-radius: var(--radius-md);\n  font: inherit;\n  resize: vertical;\n  min-height: 9rem;\n  background: var(--background);\n}\n\n.chat-history__textarea:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\n\nconst CHAT_HISTORY_PLACEHOLDER = `[\n  {\"role\": \"user\", \"content\": \"How do I import a saved suite?\"},\n  {\"role\": \"model\", \"content\": \"Use Import and pick the JSON from Export suite.\"}\n]`;\n\nexport type ChatHistoryChangeDetail = {\n  enabled: boolean;\n  value: string;\n};\n\n@Component({\n  tag: 'chat-history',\n  styleUrl: 'chat-history.css',\n  shadow: true,\n})\nexport class ChatHistory {\n  @Prop() chatHistoryEnabled = false;\n  @Prop() chatHistoryValue = '';\n\n  @Event({ bubbles: true, composed: true })\n  chatHistoryChange: EventEmitter<ChatHistoryChangeDetail>;\n\n  private emit(detail: ChatHistoryChangeDetail) {\n    this.chatHistoryChange.emit(detail);\n  }\n\n  private onToggle = (e: Event) => {\n    const checked = (e.target as HTMLInputElement).checked;\n    this.emit({ enabled: checked, value: this.chatHistoryValue });\n  };\n\n  private onTextInput = (e: Event) => {\n    const value = (e.target as HTMLTextAreaElement).value;\n    this.emit({ enabled: this.chatHistoryEnabled, value });\n  };\n\n  render() {\n    return (\n      <div class=\"chat-history\">\n        <div class=\"chat-history__toggle-row\">\n          <label class=\"chat-history__switch\">\n            <input\n              type=\"checkbox\"\n              class=\"chat-history__switch-input\"\n              checked={this.chatHistoryEnabled}\n              onInput={this.onToggle}\n            />\n            <span class=\"chat-history__switch-ui\" aria-hidden=\"true\">\n              <span class=\"chat-history__switch-thumb\" />\n            </span>\n            <span class=\"chat-history__switch-text\">Chat history</span>\n          </label>\n        </div>\n        {this.chatHistoryEnabled ? (\n          <textarea\n            class=\"chat-history__textarea\"\n            value={this.chatHistoryValue}\n            rows={8}\n            placeholder={CHAT_HISTORY_PLACEHOLDER}\n            aria-label=\"Chat history\"\n            onInput={this.onTextInput}\n          />\n        ) : null}\n      </div>\n    );\n  }\n}\n"],"version":3}