@tai42/studio-sdk 0.2.0

package/dist/components/checkbox.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `Checkbox` — a design-system wrapper over Radix Checkbox (role `checkbox`). An
+ * optional inline `label` renders a linked `<label>` so clicking the text toggles
+ * the box (buttons are labelable). When the box carries no visible label (a
+ * selection column in a table), pass `aria-label` so it still has an accessible
+ * name. Inside a `Field` the box picks up the field id + a11y wiring instead.
+ *
+ * Appearance is the `tai-checkbox` class: Radix stamps `data-state` on the root,
+ * and the stylesheet paints the checked and indeterminate grounds from it, so the
+ * mark shows for a controlled AND an uncontrolled box alike. The two filled
+ * states share that ground, so the MARK is what tells them apart: `CheckIcon` for
+ * checked, `MinusIcon` for indeterminate, both decorative behind the control's
+ * own name.
+ */
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { useId } from 'react';
+import { useFieldControl } from './field';
+import { CheckIcon, MinusIcon } from './icons';
+export function Checkbox({ checked, defaultChecked, onCheckedChange, disabled, label, 'aria-label': ariaLabel, name, value, }) {
+    const field = useFieldControl();
+    const generatedId = useId();
+    const id = field.id ?? generatedId;
+    const box = (_jsx(RadixCheckbox.Root, { id: id, className: "tai-checkbox", "aria-label": field.id === undefined && label === undefined ? ariaLabel : undefined, "aria-describedby": field['aria-describedby'], "aria-invalid": field['aria-invalid'], checked: checked, defaultChecked: defaultChecked, onCheckedChange: (next) => {
+            onCheckedChange?.(next === true);
+        }, disabled: disabled, name: name, value: value, children: _jsx(RadixCheckbox.Indicator, { "aria-hidden": "true", style: { display: 'flex' }, children: checked === 'indeterminate' ? _jsx(MinusIcon, {}) : _jsx(CheckIcon, {}) }) }));
+    if (label === undefined)
+        return box;
+    return (_jsxs("label", { htmlFor: id, className: "tai-choice", children: [box, _jsx("span", { children: label })] }));
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,aAAa,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyB/C,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,EACP,cAAc,EACd,eAAe,EACf,QAAQ,EACR,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,IAAI,EACJ,KAAK,GACS;IACd,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,WAAW,CAAC;IAEnC,MAAM,GAAG,GAAG,CACV,KAAC,aAAa,CAAC,IAAI,IACjB,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,cAAc,gBAIZ,KAAK,CAAC,EAAE,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,sBAC/D,KAAK,CAAC,kBAAkB,CAAC,kBAC7B,KAAK,CAAC,cAAc,CAAC,EACnC,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,CAAC,IAAI,EAAE,EAAE;YACxB,eAAe,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;QACnC,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,YAKZ,KAAC,aAAa,CAAC,SAAS,mBAAa,MAAM,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YACnE,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GACpC,GACP,CACtB,CAAC;IAEF,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,GAAG,CAAC;IACpC,OAAO,CACL,iBAAO,OAAO,EAAE,EAAE,EAAE,SAAS,EAAC,YAAY,aACvC,GAAG,EACJ,yBAAO,KAAK,GAAQ,IACd,CACT,CAAC;AACJ,CAAC"}

package/dist/components/code-block.d.ts

@@ -0,0 +1,7 @@
+export interface CodeBlockProps {
+    readonly code: string;
+    /** Optional language label, shown as a caption; purely informational. */
+    readonly language?: string;
+}
+export declare function CodeBlock({ code, language }: CodeBlockProps): import("react").JSX.Element;
+//# sourceMappingURL=code-block.d.ts.map

package/dist/components/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;AAKD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAa3D"}

package/dist/components/code-block.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `CodeBlock` — escaped, monospaced preformatted text for tool results and string
+ * payloads, on the design system's terminal ground (`tai-code-block`). The content
+ * is a React text child inside `<pre><code>`, so it is escaped by React and
+ * rendered verbatim; this component is NEVER an HTML sink (no
+ * `dangerouslySetInnerHTML`).
+ *
+ * The `<pre>` IS the scrolling box, so it carries the region attributes itself
+ * rather than sitting inside a `ScrollRegion` wrapper that would add a second
+ * scroller: a long line makes it a named keyboard target, a short one leaves it
+ * an ordinary block.
+ */
+import { useOverflowRegion } from './scroll-region';
+/** The region's name when no language caption supplies one. */
+const DEFAULT_LABEL = 'Code';
+export function CodeBlock({ code, language }) {
+    // No consumer ref: the measurement's own callback ref is the only thing that
+    // needs the `<pre>`, and this component publishes no `ref` prop.
+    const region = useOverflowRegion(undefined, language ?? DEFAULT_LABEL);
+    return (_jsxs("div", { className: "tai-stack tai-stack-2", children: [language !== undefined ? _jsx("span", { className: "tai-label", children: language }) : null, _jsx("pre", { className: "tai-code-block", ...region, children: _jsx("code", { children: code }) })] }));
+}
+//# sourceMappingURL=code-block.js.map

package/dist/components/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../src/components/code-block.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAQpD,+DAA+D;AAC/D,MAAM,aAAa,GAAG,MAAM,CAAC;AAE7B,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAkB;IAC1D,6EAA6E;IAC7E,iEAAiE;IACjE,MAAM,MAAM,GAAG,iBAAiB,CAAC,SAAS,EAAE,QAAQ,IAAI,aAAa,CAAC,CAAC;IAEvE,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACnC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,WAAW,YAAE,QAAQ,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC9E,cAAK,SAAS,EAAC,gBAAgB,KAAK,MAAM,YACxC,yBAAO,IAAI,GAAQ,GACf,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/completion-input.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `CompletionInput` — a text field wired to MCP `completion/complete`. As the
+ * human types, it asks the provided `fetchCompletions` (a thin wrapper over the
+ * MCP completions capability) for argument suggestions and renders them as a
+ * selectable list; picking one fills the field. A fetch failure clears the
+ * suggestions and surfaces through `onError` — never a silent swallow.
+ *
+ * The field is a `tai-input` and its popup wears the Select popup's classes
+ * (`tai-select-content` / `tai-select-item`), so a suggestion list and a select
+ * list are the same object to a reader.
+ *
+ * Reusable by any feature; the intended consumer is a `SchemaForm` string field
+ * that has a completion provider for its tool/prompt/resource argument.
+ */
+import type { ReactNode } from 'react';
+export interface CompletionInputProps {
+    readonly value: string;
+    readonly onChange: (value: string) => void;
+    /** Fetch argument completions for the current input value. */
+    readonly fetchCompletions: (value: string) => Promise<readonly string[]>;
+    /** Surfaced (not swallowed) when a completion fetch fails. */
+    readonly onError?: (error: unknown) => void;
+    readonly placeholder?: string;
+}
+/**
+ * A completion-backed text input. Suggestions refresh on every edit (a
+ * per-request sequence guard drops a stale response) and render as an ARIA
+ * listbox; selecting an option fills the field and clears the list.
+ */
+export declare function CompletionInput({ value, onChange, fetchCompletions, onError, placeholder, }: CompletionInputProps): ReactNode;
+//# sourceMappingURL=completion-input.d.ts.map

package/dist/components/completion-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"completion-input.d.ts","sourceRoot":"","sources":["../../src/components/completion-input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,8DAA8D;IAC9D,QAAQ,CAAC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,SAAS,MAAM,EAAE,CAAC,CAAC;IACzE,8DAA8D;IAC9D,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAcD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,WAAW,GACZ,EAAE,oBAAoB,GAAG,SAAS,CAoFlC"}

package/dist/components/completion-input.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { useFieldControl } from './field';
+const wrapStyle = { position: 'relative' };
+/**
+ * The popup sits directly under the field rather than against its top edge. It
+ * is a `<ul>`, so it also drops the marker a host without a CSS reset would draw.
+ */
+const listStyle = {
+    marginTop: 'var(--tai-space-1)',
+    marginBottom: 0,
+    listStyle: 'none',
+};
+/**
+ * A completion-backed text input. Suggestions refresh on every edit (a
+ * per-request sequence guard drops a stale response) and render as an ARIA
+ * listbox; selecting an option fills the field and clears the list.
+ */
+export function CompletionInput({ value, onChange, fetchCompletions, onError, placeholder, }) {
+    const field = useFieldControl();
+    const listboxId = useId();
+    const [suggestions, setSuggestions] = useState([]);
+    // The list is only shown while the human is typing. Selecting an option (a
+    // programmatic value change) closes it until the next keystroke, so the field
+    // does not immediately re-suggest against the value it just accepted.
+    const [open, setOpen] = useState(false);
+    const seq = useRef(0);
+    useEffect(() => {
+        const requestId = ++seq.current;
+        let cancelled = false;
+        fetchCompletions(value)
+            .then((values) => {
+            // Drop a stale response so a slow earlier request cannot overwrite a
+            // newer one's suggestions.
+            if (!cancelled && requestId === seq.current)
+                setSuggestions(values);
+        })
+            .catch((error) => {
+            if (cancelled || requestId !== seq.current)
+                return;
+            setSuggestions([]);
+            onError?.(error);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [value, fetchCompletions, onError]);
+    const select = (suggestion) => {
+        setOpen(false);
+        setSuggestions([]);
+        onChange(suggestion);
+    };
+    const showList = open && suggestions.length > 0;
+    return (_jsxs("div", { style: wrapStyle, children: [_jsx("input", { ...field, className: "tai-input", type: "text", role: "combobox", "aria-expanded": showList, "aria-controls": listboxId, "aria-autocomplete": "list", value: value, placeholder: placeholder, onChange: (event) => {
+                    setOpen(true);
+                    onChange(event.target.value);
+                } }), showList && (_jsx("ul", { id: listboxId, role: "listbox", className: "tai-select-content tai-select-viewport", style: listStyle, children: suggestions.map((suggestion) => (_jsx("li", { role: "presentation", children: _jsx("button", { type: "button", role: "option", "aria-selected": false, className: "tai-select-item", onClick: () => {
+                            select(suggestion);
+                        }, children: suggestion }) }, suggestion))) }))] }));
+}
+//# sourceMappingURL=completion-input.js.map

package/dist/components/completion-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"completion-input.js","sourceRoot":"","sources":["../../src/components/completion-input.tsx"],"names":[],"mappings":"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"}