@teaflask/assistant 0.0.0 → 0.6.0

package/LICENSE

@@ -0,0 +1,105 @@
+# Functional Source License, Version 1.1, ALv2 Future License
+
+## Abbreviation
+
+FSL-1.1-ALv2
+
+## Notice
+
+Copyright 2026 Teaflask
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the Apache License, Version 2.0 that is effective on the second anniversary of
+the date we make the Software available. On or after that date, you may use the
+Software under the Apache License, Version 2.0, in which case the following
+will apply:
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License.
+
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.

package/README.md

@@ -1,3 +1,165 @@
-# @teaflask/assistant
+<div align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/teaflask/assistant/main/images/logo-dark.svg">
+    <img src="https://raw.githubusercontent.com/teaflask/assistant/main/images/logo.svg" width="56" alt="Teaflask logo">
+  </picture>
+  <h1>Teaflask Assistant</h1>
+  <p>An AI agent that works inside your product, in one component.</p>
+  <p>
+    <a href="https://docs.teaflask.com/getting-started">Get started</a> ·
+    <a href="https://docs.teaflask.com">Docs</a> ·
+    <a href="https://app.teaflask.com/">Dashboard</a> ·
+    <a href="https://github.com/teaflask/assistant/issues">Issues</a>
+  </p>
+  <p>
+    <a href="https://www.npmjs.com/package/@teaflask/assistant"><img src="https://img.shields.io/npm/v/@teaflask/assistant?color=111" alt="npm version"></a>
+    <a href="https://github.com/teaflask/assistant/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@teaflask/assistant?color=111" alt="License: FSL-1.1-ALv2"></a>
+  </p>
+</div>
 
-Name reservation. The real package — the teaflask embedded assistant — is coming.
+<table>
+  <tr>
+    <td width="50%" valign="top">
+      <img src="https://raw.githubusercontent.com/teaflask/assistant/main/images/surface-widget.png" alt="Corner widget">
+      <p align="center"><sub>Corner widget</sub></p>
+    </td>
+    <td width="50%" valign="top">
+      <img src="https://raw.githubusercontent.com/teaflask/assistant/main/images/surface-sidebar.png" alt="Sidebar">
+      <p align="center"><sub>Sidebar</sub></p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <img src="https://raw.githubusercontent.com/teaflask/assistant/main/images/surface-palette.png" alt="⌘K palette">
+      <p align="center"><sub>⌘K palette</sub></p>
+    </td>
+    <td width="50%" valign="top">
+      <img src="https://raw.githubusercontent.com/teaflask/assistant/main/images/surface-page.png" alt="Full page">
+      <p align="center"><sub>Full page</sub></p>
+    </td>
+  </tr>
+</table>
+
+[Teaflask](https://teaflask.com) gives your product an AI agent that understands how it works and gets things done for your users. `@teaflask/assistant` is the part your users see: drop it into your app and Teaflask hosts everything behind it. Your app keeps its own business logic, authentication and permissions.
+
+**React**
+
+```tsx
+import "@teaflask/assistant/styles.css";
+import { TeaflaskAssistant } from "@teaflask/assistant";
+
+<TeaflaskAssistant publishableKey="pk_live_…" />;
+```
+
+**Any other stack**, with a script tag
+
+```html
+<script
+  type="module"
+  src="https://app.teaflask.com/assistant/v1/assistant.js"
+></script>
+<teaflask-assistant publishable-key="pk_live_…"></teaflask-assistant>
+```
+
+## What your agent can do
+
+- **Take actions.** It calls your API on the user's behalf, with the user's own session. You set every action to Allow, Ask or Deny.
+- **Follow your workflows.** Write a procedure once, like how refunds work or when to escalate, and the agent follows it.
+- **Guide users around your app.** It takes people to the right page and highlights what to click.
+- **Fill in forms.** It fills the fields; the user reviews and submits.
+- **Hand off long-running work.** It sends complex, multi-step jobs to background sub-agents and picks up their results.
+- **Answer from your docs.** It answers from the documentation you release, so what it tells users matches your product.
+- **Remember.** It keeps facts across conversations, for your whole organization or for each user.
+
+You choose which of these each agent gets. [How Teaflask works →](https://docs.teaflask.com/fundamentals)
+
+## Batteries included
+
+Everything you'd otherwise build by hand to put an agent in front of your users:
+
+- Real-time streaming that resumes mid-sentence after a dropped connection
+- Durable runs that pick up mid-step after a crash, a deploy, or an approval that takes days
+- Approvals right in the conversation, before an action runs
+- Live progress for actions and sub-agents
+- [Tool views](https://docs.teaflask.com/tool-views): show a result as your own component, like an order card instead of JSON
+- Four [surfaces](https://docs.teaflask.com/surfaces) for one conversation: a corner widget, a sidebar, a ⌘K command palette, and a full-page assistant
+- A polished default design in light and dark, restyled with [theme tokens](https://docs.teaflask.com/appearance) and isolated from your CSS
+- Docs that stay true: every claim checked against your code, and a fix proposed when the code moves
+- [Skills](https://docs.teaflask.com/skills), [memory](https://docs.teaflask.com/memory), and a [sandboxed workspace](https://docs.teaflask.com/workspace) the agent can use
+- The model of your choice, on your own provider key or your user's own plan
+- Conversation history across devices, file attachments, and markdown with code highlighting
+- Anonymous visitors or [signed-in users](https://docs.teaflask.com/identity)
+- Every conversation, action and approval recorded for review
+- Keyboard-complete, screen-reader friendly, and respects reduced motion
+- A React component, a script tag for any other stack, or a headless entry point for your own UI
+
+<table>
+  <tr>
+    <td width="50%" valign="top">
+      <img src="https://raw.githubusercontent.com/teaflask/assistant/main/images/tool-view.png" alt="Tool views: your own components, right in the conversation">
+      <p align="center"><sub>Tool views: your own components, right in the conversation</sub></p>
+    </td>
+    <td width="50%" valign="top">
+      <img src="https://raw.githubusercontent.com/teaflask/assistant/main/images/sub-agents.png" alt="Sub-agents work in parallel. Open one to watch it live">
+      <p align="center"><sub>Sub-agents work in parallel. Open one to watch it live</sub></p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <img src="https://raw.githubusercontent.com/teaflask/assistant/main/images/approval.png" alt="An approval before anything changes">
+      <p align="center"><sub>An approval before anything changes</sub></p>
+    </td>
+    <td width="50%" valign="top">
+      <img src="https://raw.githubusercontent.com/teaflask/assistant/main/images/form-fill.png" alt="It fills in your forms and points at what to press">
+      <p align="center"><sub>It fills in your forms and points at what to press</sub></p>
+    </td>
+  </tr>
+</table>
+
+## Getting started
+
+You need a Teaflask agent and its publishable key. The [getting started guide](https://docs.teaflask.com/getting-started) takes you from connecting your codebase to a published agent. Then add the assistant to your app, once, in the layout that wraps every page.
+
+### React
+
+```sh
+npm install @teaflask/assistant
+```
+
+```tsx
+import "@teaflask/assistant/styles.css";
+import { TeaflaskAssistant } from "@teaflask/assistant";
+
+<TeaflaskAssistant publishableKey="pk_live_…" />;
+```
+
+### Any other stack
+
+Rails, Django, Laravel, Vue, WordPress or plain HTML: add the script tag before `</body>`. React is bundled inside, so your page doesn't need it.
+
+```html
+<script
+  type="module"
+  src="https://app.teaflask.com/assistant/v1/assistant.js"
+></script>
+<teaflask-assistant publishable-key="pk_live_…"></teaflask-assistant>
+```
+
+Next, [connect actions to your API](https://docs.teaflask.com/adapters), [identify signed-in users](https://docs.teaflask.com/identity), and run through the [production checklist](https://docs.teaflask.com/production-checklist).
+
+## Learn more
+
+- [How Teaflask works](https://docs.teaflask.com/fundamentals)
+- [How it connects to your app](https://docs.teaflask.com/architecture)
+- [Grounding and control](https://docs.teaflask.com/grounding)
+- [Install](https://docs.teaflask.com/install)
+- [Assistant UI](https://docs.teaflask.com/assistant-ui)
+- [Trust](https://docs.teaflask.com/trust)
+
+Requires `react` and `react-dom` 18.3 or 19, and `use-stick-to-bottom` (npm installs peers for you; the script tag needs none of them). The package is pre-1.0: a breaking change bumps the minor version, and the [changelog](https://github.com/teaflask/assistant/blob/main/CHANGELOG.md) lists what changed in every release. You can inspect the published code on [npm](https://www.npmjs.com/package/@teaflask/assistant?activeTab=code) or [unpkg](https://unpkg.com/@teaflask/assistant/).
+
+## License
+
+[Functional Source License, Version 1.1, ALv2 Future License](https://github.com/teaflask/assistant/blob/main/LICENSE) (FSL-1.1-ALv2). You can use it in your own product. You can't use it to build a competing product or service. Every release becomes Apache-2.0 two years after it ships.
+
+Report security issues to [security@teaflask.com](mailto:security@teaflask.com); see [SECURITY.md](https://github.com/teaflask/assistant/blob/main/SECURITY.md).

package/dist/activity.d.ts

@@ -0,0 +1,5 @@
+export { TeaflaskAssistantProvider, type TeaflaskAssistantAnonymousProps, type TeaflaskAssistantIdentityProps, type TeaflaskAssistantProviderBaseProps, type TeaflaskAssistantProviderProps, } from "./components/teaflask-assistant-provider.js";
+export { useAssistantActivity } from "./components/use-assistant-activity.js";
+export type { AssistantActivityResult, AssistantActivitySnapshot, } from "./core/activity.js";
+export type { PendingDecisionGap } from "./core/pending-decision-gap.js";
+export { AssistantCompanion, type AssistantCompanionProps, } from "./components/assistant-companion.js";

package/dist/activity.js

@@ -0,0 +1,3 @@
+export { TeaflaskAssistantProvider, } from "./components/teaflask-assistant-provider.js";
+export { useAssistantActivity } from "./components/use-assistant-activity.js";
+export { AssistantCompanion, } from "./components/assistant-companion.js";

package/dist/affordances/highlight.d.ts

@@ -0,0 +1,3 @@
+import type { LayoutProbe } from "../reader/layout-probe.js";
+export declare const HIGHLIGHT_DWELL_MS = 4000;
+export declare function spotlightElement(element: Element, probe: LayoutProbe): void;

package/dist/affordances/highlight.js

@@ -0,0 +1,67 @@
+export const HIGHLIGHT_DWELL_MS = 4_000;
+const FADE_MS = 300;
+const RING_INSET_PX = 4;
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+let _activeSpotlight = null;
+export function spotlightElement(element, probe) {
+    _activeSpotlight?.dismiss();
+    _scrollIntoViewRespectingMotion(element);
+    const ring = _ringElement();
+    document.body.appendChild(ring);
+    const track = () => {
+        _placeRingAround(ring, element, probe);
+    };
+    track();
+    window.addEventListener("scroll", track, { capture: true, passive: true });
+    window.addEventListener("resize", track);
+    const dismiss = _dismisserOf(ring, track);
+    _activeSpotlight = { ring, dismiss };
+    window.setTimeout(dismiss, HIGHLIGHT_DWELL_MS);
+}
+function _dismisserOf(ring, track) {
+    let dismissed = false;
+    return () => {
+        if (dismissed) {
+            return;
+        }
+        dismissed = true;
+        window.removeEventListener("scroll", track, { capture: true });
+        window.removeEventListener("resize", track);
+        if (_activeSpotlight?.ring === ring) {
+            _activeSpotlight = null;
+        }
+        ring.dataset.tfHighlightLeaving = "true";
+        window.setTimeout(() => {
+            ring.remove();
+        }, FADE_MS);
+    };
+}
+function _ringElement() {
+    const ring = document.createElement("div");
+    ring.setAttribute("data-tf-assistant", "");
+    ring.className = "tf-highlight-ring";
+    ring.setAttribute("aria-hidden", "true");
+    return ring;
+}
+function _placeRingAround(ring, element, probe) {
+    const rect = probe.rectOf(element);
+    ring.style.top = `${String(rect.top - RING_INSET_PX)}px`;
+    ring.style.left = `${String(rect.left - RING_INSET_PX)}px`;
+    ring.style.width = `${String(rect.width + 2 * RING_INSET_PX)}px`;
+    ring.style.height = `${String(rect.height + 2 * RING_INSET_PX)}px`;
+}
+function _scrollIntoViewRespectingMotion(element) {
+    if (typeof element.scrollIntoView !== "function") {
+        return;
+    }
+    element.scrollIntoView({
+        block: "center",
+        inline: "nearest",
+        behavior: _reducedMotionIsOn() ? "auto" : "smooth",
+    });
+}
+function _reducedMotionIsOn() {
+    return ((typeof window.matchMedia === "function" &&
+        window.matchMedia(REDUCED_MOTION_QUERY).matches) ||
+        document.body.closest('[data-reduce-motion="true"]') !== null);
+}

package/dist/affordances/prefill.d.ts

@@ -0,0 +1,14 @@
+export interface PrefillField {
+    refId: string;
+    value: string;
+}
+interface RefusedFieldReport {
+    ref_id: string;
+    reason: string;
+}
+export interface PrefillReport {
+    filled: string[];
+    refused: RefusedFieldReport[];
+}
+export declare function prefilledFieldsReport(fields: PrefillField[]): PrefillReport;
+export {};

package/dist/affordances/prefill.js

@@ -0,0 +1,151 @@
+import { theFieldHoldsASecret } from "../reader/redaction.js";
+import { resolvedElementOfRef } from "../reader/snapshot.js";
+import { isContentEditableElement } from "../reader/roles.js";
+const SECRET_FIELD_REASON = "This field holds a secret (a password or payment detail) — the user " +
+    "must type it themselves.";
+const FILE_FIELD_REASON = "File pickers cannot be filled by the assistant — the user must choose " +
+    "the file themselves.";
+const INERT_FIELD_REASON = "This field is disabled or read-only and cannot take a value right now.";
+const NOT_FILLABLE_REASON = "This element is not a fillable form field — take a fresh read and " +
+    "pick a textbox, dropdown, checkbox, or editor ref.";
+const CHECKBOX_VALUE_REASON = 'A checkbox takes "true" or "false", nothing else.';
+const RADIO_VALUE_REASON = 'A radio button can only be selected — pass "true" on the option to ' +
+    "select instead.";
+const NO_MATCHING_OPTION_REASON = "No option in this dropdown matches that value — read the page to see " +
+    "the options it offers.";
+const VALUE_DID_NOT_LAND_REASON = "The page's own scripts rejected this value — it did not stay in the " +
+    "field.";
+const EDITOR_UNAVAILABLE_REASON = "This editor cannot be filled on this page — tell the user what to " +
+    "type instead.";
+export function prefilledFieldsReport(fields) {
+    const report = { filled: [], refused: [] };
+    for (const field of fields) {
+        const refusal = _filledFieldRefusalOf(field);
+        if (refusal === null) {
+            report.filled.push(field.refId);
+        }
+        else {
+            report.refused.push({ ref_id: field.refId, reason: refusal });
+        }
+    }
+    return report;
+}
+function _filledFieldRefusalOf(field) {
+    const resolved = resolvedElementOfRef(field.refId);
+    if (resolved.error !== null) {
+        return resolved.error;
+    }
+    const element = resolved.element;
+    if (element instanceof HTMLInputElement) {
+        return _inputRefusalOf(element, field.value);
+    }
+    if (element instanceof HTMLTextAreaElement) {
+        return _textAreaRefusalOf(element, field.value);
+    }
+    if (element instanceof HTMLSelectElement) {
+        return _selectRefusalOf(element, field.value);
+    }
+    if (isContentEditableElement(element)) {
+        return _editorRefusalOf(element, field.value);
+    }
+    return NOT_FILLABLE_REASON;
+}
+const _NOT_A_FIELD_INPUT_TYPES = new Set([
+    "hidden",
+    "submit",
+    "button",
+    "reset",
+    "image",
+]);
+function _inputRefusalOf(input, value) {
+    if (input.type === "password" || theFieldHoldsASecret(input)) {
+        return SECRET_FIELD_REASON;
+    }
+    if (input.type === "file") {
+        return FILE_FIELD_REASON;
+    }
+    if (_NOT_A_FIELD_INPUT_TYPES.has(input.type)) {
+        return NOT_FILLABLE_REASON;
+    }
+    if (input.disabled || input.readOnly) {
+        return INERT_FIELD_REASON;
+    }
+    if (input.type === "checkbox" || input.type === "radio") {
+        return _checkedRefusalOf(input, value);
+    }
+    _setThroughThePrototype(input, value);
+    _announceTheEdit(input);
+    return input.value === value ? null : VALUE_DID_NOT_LAND_REASON;
+}
+function _checkedRefusalOf(input, value) {
+    if (value !== "true" && value !== "false") {
+        return CHECKBOX_VALUE_REASON;
+    }
+    if (input.type === "radio" && value === "false") {
+        return RADIO_VALUE_REASON;
+    }
+    const desired = value === "true";
+    if (input.checked !== desired) {
+        input.click();
+    }
+    return input.checked === desired ? null : VALUE_DID_NOT_LAND_REASON;
+}
+function _textAreaRefusalOf(textArea, value) {
+    if (theFieldHoldsASecret(textArea)) {
+        return SECRET_FIELD_REASON;
+    }
+    if (textArea.disabled || textArea.readOnly) {
+        return INERT_FIELD_REASON;
+    }
+    _setThroughThePrototype(textArea, value);
+    _announceTheEdit(textArea);
+    return textArea.value === value ? null : VALUE_DID_NOT_LAND_REASON;
+}
+function _selectRefusalOf(select, value) {
+    if (select.disabled) {
+        return INERT_FIELD_REASON;
+    }
+    const option = _optionMatching(select, value);
+    if (option === null) {
+        return NO_MATCHING_OPTION_REASON;
+    }
+    _setThroughThePrototype(select, option.value);
+    _announceTheEdit(select);
+    return select.value === option.value ? null : VALUE_DID_NOT_LAND_REASON;
+}
+function _optionMatching(select, value) {
+    const options = Array.from(select.options);
+    return (options.find((option) => option.value === value) ??
+        options.find((option) => option.label.trim() === value.trim()) ??
+        null);
+}
+function _editorRefusalOf(element, value) {
+    if (!(element instanceof HTMLElement)) {
+        return EDITOR_UNAVAILABLE_REASON;
+    }
+    if (typeof document.execCommand !== "function") {
+        return EDITOR_UNAVAILABLE_REASON;
+    }
+    element.focus();
+    const selection = window.getSelection();
+    if (selection === null) {
+        return EDITOR_UNAVAILABLE_REASON;
+    }
+    selection.selectAllChildren(element);
+    document.execCommand("insertText", false, value);
+    const landed = element.textContent.includes(value);
+    return landed ? null : VALUE_DID_NOT_LAND_REASON;
+}
+function _setThroughThePrototype(control, value) {
+    const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(control), "value");
+    if (descriptor?.set !== undefined) {
+        descriptor.set.call(control, value);
+    }
+    else {
+        control.value = value;
+    }
+}
+function _announceTheEdit(control) {
+    control.dispatchEvent(new Event("input", { bubbles: true }));
+    control.dispatchEvent(new Event("change", { bubbles: true }));
+}

package/dist/appearance/theme.d.ts

@@ -0,0 +1,31 @@
+export type AssistantThemeMode = "light" | "dark" | "auto";
+export interface AssistantThemeTokens {
+    background?: string;
+    foreground?: string;
+    card?: string;
+    cardForeground?: string;
+    popover?: string;
+    popoverForeground?: string;
+    primary?: string;
+    primaryForeground?: string;
+    secondary?: string;
+    secondaryForeground?: string;
+    muted?: string;
+    mutedForeground?: string;
+    accent?: string;
+    accentForeground?: string;
+    destructive?: string;
+    border?: string;
+    input?: string;
+    ring?: string;
+    radius?: string | number;
+    fontSans?: string;
+    colorScheme?: string;
+}
+export type AssistantThemeDarkTokens = Omit<AssistantThemeTokens, "radius" | "fontSans" | "colorScheme">;
+export interface AssistantTheme extends AssistantThemeTokens {
+    dark?: AssistantThemeDarkTokens;
+}
+export declare const THEME_TOKEN_KEYS: readonly (keyof AssistantThemeTokens)[];
+export declare const DARK_THEME_TOKEN_KEYS: readonly (keyof AssistantThemeDarkTokens)[];
+export declare function themeToStyleVars(theme: AssistantTheme): Record<string, string>;

package/dist/appearance/theme.js

@@ -0,0 +1,46 @@
+export const THEME_TOKEN_KEYS = [
+    "background",
+    "foreground",
+    "card",
+    "cardForeground",
+    "popover",
+    "popoverForeground",
+    "primary",
+    "primaryForeground",
+    "secondary",
+    "secondaryForeground",
+    "muted",
+    "mutedForeground",
+    "accent",
+    "accentForeground",
+    "destructive",
+    "border",
+    "input",
+    "ring",
+    "radius",
+    "fontSans",
+    "colorScheme",
+];
+export const DARK_THEME_TOKEN_KEYS = THEME_TOKEN_KEYS.filter((key) => key !== "radius" && key !== "fontSans" && key !== "colorScheme");
+export function themeToStyleVars(theme) {
+    const vars = {};
+    for (const key of THEME_TOKEN_KEYS) {
+        const value = theme[key];
+        if (value !== undefined) {
+            vars[`--tf-${_cssNameOf(key)}`] = _cssValueOf(value);
+        }
+    }
+    for (const key of DARK_THEME_TOKEN_KEYS) {
+        const value = theme.dark?.[key];
+        if (value !== undefined) {
+            vars[`--_tf-dark-${_cssNameOf(key)}`] = _cssValueOf(value);
+        }
+    }
+    return vars;
+}
+function _cssNameOf(key) {
+    return key.replace(/[A-Z]/g, (upper) => `-${upper.toLowerCase()}`);
+}
+function _cssValueOf(value) {
+    return typeof value === "number" ? `${String(value)}px` : value;
+}

package/dist/components/activity-rail.d.ts

@@ -0,0 +1,12 @@
+import type { ApprovalCardModel } from "../core/approval-inbox.js";
+import { type RunFoldRow } from "../core/run-folds.js";
+import type { ToolRowSlot } from "./message-list-slots.js";
+export declare function ActivityRail({ fold, cards, turnLive, inCurrentTurn, identityToken, decisionSurfacesInShelf, toolRow, }: {
+    fold: RunFoldRow;
+    cards: readonly ApprovalCardModel[];
+    turnLive: boolean;
+    inCurrentTurn: boolean;
+    identityToken: string;
+    decisionSurfacesInShelf: boolean;
+    toolRow?: ToolRowSlot;
+}): import("react").JSX.Element;