@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/tool-approval-dialog/tool-approval-dialog.d.ts

@@ -1,131 +1,3 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-import '../json-viewer/json-viewer.js';
-/**
- * Reason the dialog was dismissed, forwarded as the `lyra-close` event detail
- * -- mirrors `<lyra-dialog>`'s own `DialogCloseReason` shape. `'escape'`/
- * `'backdrop'` come from the dialog's own built-in dismiss triggers,
- * `'approve'`/`'deny'` from the built-in action buttons (fired in addition
- * to, and immediately after, their own dedicated `lyra-approve`/`lyra-deny`
- * event -- see the class doc), and any other string is whatever a caller
- * passes to `close()` directly.
- */
-export type ToolApprovalDialogCloseReason = 'escape' | 'backdrop' | 'approve' | 'deny' | 'api' | string;
-/**
- * `<lyra-tool-approval-dialog>` — a human-in-the-loop gate: presents one
- * proposed tool/function call (`toolName` + `args`) and blocks an agent from
- * executing it until a person explicitly approves or denies it, with an
- * optional inline "edit the arguments before approving" step.
- *
- * This renders its own dialog panel rather than nesting a `<lyra-dialog>` in
- * its shadow template. Shared overlay infrastructure coordinates stacking,
- * focus trapping, Escape/backdrop dismissal, and focus return with every
- * other overlay in the same document.
- *
- * Approve/Deny/Edit are built-in chrome (not a `footer` slot a consumer must
- * assemble) — this component's interaction shape is fixed enough (there is
- * exactly one correct set of actions for "approve this call") that requiring
- * every consumer to re-build it would just be boilerplate. A `footer` slot is
- * still offered for *supplementary* content a consumer wants alongside those
- * buttons (e.g. a "remember this choice for this tool" checkbox) — its
- * content renders to the start of the action row, before Deny/Edit/Approve.
- *
- * Editing: while `editable`, an Edit button swaps the read-only
- * `<lyra-json-viewer>` for a plain `<textarea>` pre-filled with
- * `JSON.stringify(args, null, 2)`. Every keystroke is re-validated with
- * `JSON.parse` — the Approve button is `disabled` for as long as the current
- * textarea content fails to parse, so a malformed edit can never be silently
- * approved as either the broken text or a stale copy of the original args.
- * The same button relabels to "Cancel" while editing; clicking it discards
- * the draft entirely and returns to the read-only view of the *original*
- * `args` — there is no separate "save" step independent of Approve itself.
- * Both `editing` and any in-progress draft reset back to the read-only view
- * every time the dialog transitions from closed to open, so a reused
- * instance never leaks one proposal's half-finished edit into the next.
- * `editable` flipping to `false` mid-edit does the same (see `willUpdate()`)
- * and, if the textarea it unmounts still held focus, `updated()` refocuses
- * Deny so the focus trap keeps engaging instead of silently letting focus
- * fall through to the document.
- *
- * Initial focus deliberately does *not* land on Approve:
- * approving a tool call is a consequential, potentially irreversible action,
- * so a user who opens this dialog and reflexively presses Enter/Space before
- * reading anything should deny, not approve. Deny gets the initial focus
- * instead — the same "focus the safe action" convention a native destructive-
- * confirmation dialog (delete, discard, etc.) typically follows for its own
- * Cancel button — rather than the inert dialog panel, which would need an
- * extra Tab press before *any* action is reachable at all.
- *
- * @customElement lyra-tool-approval-dialog
- * @slot footer - Optional supplementary content (e.g. a "remember this
- * choice" checkbox), rendered before the built-in Deny/Edit/Approve buttons.
- * @event lyra-approve - The call was approved. `detail: { args }` — the
- * current, already-parsed arguments object: the original `args` prop, or (if
- * an edit was in progress) the user's edited-and-validated version. Always
- * followed by `lyra-close` with reason `'approve'`.
- * @event lyra-deny - The call was denied (no detail). Always followed by
- * `lyra-close` with reason `'deny'`.
- * @event lyra-close - `detail: ToolApprovalDialogCloseReason`. Fired exactly
- * once per dismissal — via Escape, a backdrop click, the Approve/Deny
- * buttons, or a `close()` call — so there is one consistent "this dialog is
- * now closed" signal regardless of which path triggered it.
- * @csspart backdrop - The full-viewport scrim behind the panel.
- * @csspart panel - The dialog panel itself (`role="dialog"` while open).
- * @csspart header - The wrapper around the heading.
- * @csspart tool-name - The `toolName` text within the heading.
- * @csspart body - The wrapper around the args view/editor.
- * @csspart args-view - The read-only `<lyra-json-viewer>` shown while not editing.
- * @csspart args-editor - The raw-JSON `<textarea>` shown while editing.
- * @csspart error - The inline "invalid JSON" message, shown only while editing with unparseable content.
- * @csspart footer - The action row wrapping the `footer` slot and the built-in buttons.
- * @csspart deny-button - The built-in Deny button.
- * @csspart edit-button - The built-in Edit/Cancel toggle button (only rendered while `editable`).
- * @csspart approve-button - The built-in Approve button — `disabled` while an in-progress edit is invalid JSON.
- */
-export declare class LyraToolApprovalDialog extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
-    open: boolean;
-    /** The proposed tool/function's name, e.g. `web_search`. Drives the heading and the dialog's accessible name. */
-    toolName: string;
-    /** The proposed call's arguments — any JSON-serializable value, rendered via `<lyra-json-viewer>` (or, while editing, stringified into the textarea). */
-    args: unknown;
-    /** Whether an "Edit" affordance is offered at all. When `false`, `args` is always shown read-only and can never be changed before approval. */
-    editable: boolean;
-    private editing;
-    /** The textarea's current raw text while editing — deliberately independent of `args` until Approve is pressed, so a malformed in-progress edit never overwrites it. */
-    private draftText;
-    /** `JSON.parse` failure message for `draftText`, or `''` while it parses cleanly. Empty string (not `undefined`) so it can drive `?hidden` directly. */
-    private draftError;
-    private releaseScrollLock?;
-    private overlay?;
-    private readonly titleId;
-    private readonly errorId;
-    protected willUpdate(changed: PropertyValues): void;
-    protected updated(changed: PropertyValues): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private activateOverlay;
-    /**
-     * Close the dialog and return focus to whatever had it before the dialog
-     * opened. `reason` is forwarded as the `lyra-close` detail — built-in
-     * triggers pass `'escape'`/`'backdrop'`/`'approve'`/`'deny'`; a consumer's
-     * own close affordance (e.g. a footer-slotted button) should call this
-     * directly with its own reason string, so every dismissal path funnels
-     * through the same event instead of the consumer having to also toggle
-     * `open` itself.
-     */
-    close(reason?: ToolApprovalDialogCloseReason): void;
-    private onBackdropClick;
-    private stringifyArgs;
-    private toggleEdit;
-    private onDraftInput;
-    private onApprove;
-    private onDeny;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-tool-approval-dialog': LyraToolApprovalDialog;
-    }
-}
+export * from './tool-approval-dialog.class.js';
+import "../json-viewer/json-viewer.js";
+//# sourceMappingURL=tool-approval-dialog.d.ts.map

package/dist/components/tool-approval-dialog/tool-approval-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-approval-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/tool-approval-dialog/tool-approval-dialog.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAGhD,OAAO,+BAA+B,CAAC"}

package/dist/components/tool-approval-dialog/tool-approval-dialog.js

@@ -1,329 +1,6 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
-import { activateOverlay } from '../../internal/overlay-manager.js';
+export * from './tool-approval-dialog.class.js';
+import { LyraToolApprovalDialog } from './tool-approval-dialog.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { lockScroll } from '../../internal/scroll-lock.js';
-import { nextId } from '../../internal/a11y.js';
-import { styles } from './tool-approval-dialog.styles.js';
-import '../json-viewer/json-viewer.js';
-/**
- * `<lyra-tool-approval-dialog>` — a human-in-the-loop gate: presents one
- * proposed tool/function call (`toolName` + `args`) and blocks an agent from
- * executing it until a person explicitly approves or denies it, with an
- * optional inline "edit the arguments before approving" step.
- *
- * This renders its own dialog panel rather than nesting a `<lyra-dialog>` in
- * its shadow template. Shared overlay infrastructure coordinates stacking,
- * focus trapping, Escape/backdrop dismissal, and focus return with every
- * other overlay in the same document.
- *
- * Approve/Deny/Edit are built-in chrome (not a `footer` slot a consumer must
- * assemble) — this component's interaction shape is fixed enough (there is
- * exactly one correct set of actions for "approve this call") that requiring
- * every consumer to re-build it would just be boilerplate. A `footer` slot is
- * still offered for *supplementary* content a consumer wants alongside those
- * buttons (e.g. a "remember this choice for this tool" checkbox) — its
- * content renders to the start of the action row, before Deny/Edit/Approve.
- *
- * Editing: while `editable`, an Edit button swaps the read-only
- * `<lyra-json-viewer>` for a plain `<textarea>` pre-filled with
- * `JSON.stringify(args, null, 2)`. Every keystroke is re-validated with
- * `JSON.parse` — the Approve button is `disabled` for as long as the current
- * textarea content fails to parse, so a malformed edit can never be silently
- * approved as either the broken text or a stale copy of the original args.
- * The same button relabels to "Cancel" while editing; clicking it discards
- * the draft entirely and returns to the read-only view of the *original*
- * `args` — there is no separate "save" step independent of Approve itself.
- * Both `editing` and any in-progress draft reset back to the read-only view
- * every time the dialog transitions from closed to open, so a reused
- * instance never leaks one proposal's half-finished edit into the next.
- * `editable` flipping to `false` mid-edit does the same (see `willUpdate()`)
- * and, if the textarea it unmounts still held focus, `updated()` refocuses
- * Deny so the focus trap keeps engaging instead of silently letting focus
- * fall through to the document.
- *
- * Initial focus deliberately does *not* land on Approve:
- * approving a tool call is a consequential, potentially irreversible action,
- * so a user who opens this dialog and reflexively presses Enter/Space before
- * reading anything should deny, not approve. Deny gets the initial focus
- * instead — the same "focus the safe action" convention a native destructive-
- * confirmation dialog (delete, discard, etc.) typically follows for its own
- * Cancel button — rather than the inert dialog panel, which would need an
- * extra Tab press before *any* action is reachable at all.
- *
- * @customElement lyra-tool-approval-dialog
- * @slot footer - Optional supplementary content (e.g. a "remember this
- * choice" checkbox), rendered before the built-in Deny/Edit/Approve buttons.
- * @event lyra-approve - The call was approved. `detail: { args }` — the
- * current, already-parsed arguments object: the original `args` prop, or (if
- * an edit was in progress) the user's edited-and-validated version. Always
- * followed by `lyra-close` with reason `'approve'`.
- * @event lyra-deny - The call was denied (no detail). Always followed by
- * `lyra-close` with reason `'deny'`.
- * @event lyra-close - `detail: ToolApprovalDialogCloseReason`. Fired exactly
- * once per dismissal — via Escape, a backdrop click, the Approve/Deny
- * buttons, or a `close()` call — so there is one consistent "this dialog is
- * now closed" signal regardless of which path triggered it.
- * @csspart backdrop - The full-viewport scrim behind the panel.
- * @csspart panel - The dialog panel itself (`role="dialog"` while open).
- * @csspart header - The wrapper around the heading.
- * @csspart tool-name - The `toolName` text within the heading.
- * @csspart body - The wrapper around the args view/editor.
- * @csspart args-view - The read-only `<lyra-json-viewer>` shown while not editing.
- * @csspart args-editor - The raw-JSON `<textarea>` shown while editing.
- * @csspart error - The inline "invalid JSON" message, shown only while editing with unparseable content.
- * @csspart footer - The action row wrapping the `footer` slot and the built-in buttons.
- * @csspart deny-button - The built-in Deny button.
- * @csspart edit-button - The built-in Edit/Cancel toggle button (only rendered while `editable`).
- * @csspart approve-button - The built-in Approve button — `disabled` while an in-progress edit is invalid JSON.
- */
-export class LyraToolApprovalDialog extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
-        this.open = false;
-        /** The proposed tool/function's name, e.g. `web_search`. Drives the heading and the dialog's accessible name. */
-        this.toolName = '';
-        /** The proposed call's arguments — any JSON-serializable value, rendered via `<lyra-json-viewer>` (or, while editing, stringified into the textarea). */
-        this.args = {};
-        /** Whether an "Edit" affordance is offered at all. When `false`, `args` is always shown read-only and can never be changed before approval. */
-        this.editable = true;
-        this.editing = false;
-        /** The textarea's current raw text while editing — deliberately independent of `args` until Approve is pressed, so a malformed in-progress edit never overwrites it. */
-        this.draftText = '';
-        /** `JSON.parse` failure message for `draftText`, or `''` while it parses cleanly. Empty string (not `undefined`) so it can drive `?hidden` directly. */
-        this.draftError = '';
-        this.titleId = nextId('tool-approval-dialog-title');
-        this.errorId = nextId('tool-approval-dialog-error');
-        this.onBackdropClick = () => {
-            this.overlay?.dismissBackdrop();
-        };
-        this.toggleEdit = () => {
-            if (this.editing) {
-                this.editing = false;
-                this.draftText = '';
-                this.draftError = '';
-            }
-            else {
-                this.editing = true;
-                this.draftText = this.stringifyArgs();
-                this.draftError = '';
-            }
-        };
-        this.onDraftInput = (e) => {
-            const value = e.target.value;
-            this.draftText = value;
-            try {
-                JSON.parse(value);
-                this.draftError = '';
-            }
-            catch (err) {
-                this.draftError = err instanceof Error ? err.message : 'Invalid JSON.';
-            }
-        };
-        this.onApprove = () => {
-            let currentArgs = this.args;
-            if (this.editing) {
-                // The Approve button is disabled whenever draftError is non-empty, so
-                // this should always succeed -- the try/catch is defense-in-depth
-                // against a state desync rather than an expected path.
-                try {
-                    currentArgs = JSON.parse(this.draftText);
-                }
-                catch {
-                    return;
-                }
-            }
-            this.emit('lyra-approve', { args: currentArgs });
-            this.close('approve');
-        };
-        this.onDeny = () => {
-            this.emit('lyra-deny');
-            this.close('deny');
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    willUpdate(changed) {
-        if (changed.has('open')) {
-            if (this.open) {
-                this.releaseScrollLock ??= lockScroll(this.ownerDocument);
-                this.activateOverlay();
-                // Every open starts fresh in the read-only view -- a reused instance
-                // must never carry a half-finished edit (or its error state) over
-                // from whatever the previous proposal was.
-                this.editing = false;
-                this.draftText = '';
-                this.draftError = '';
-            }
-            else {
-                this.releaseScrollLock?.();
-                this.releaseScrollLock = undefined;
-                this.overlay?.deactivate();
-                this.overlay = undefined;
-            }
-        }
-        // A consumer flipping editable off mid-edit (e.g. a policy change
-        // pushed while this dialog happens to be open) must not leave an
-        // unreachable edit UI on screen with no Edit/Cancel button left to
-        // dismiss it.
-        if (changed.has('editable') && !this.editable && this.editing) {
-            this.editing = false;
-            this.draftText = '';
-            this.draftError = '';
-        }
-    }
-    // Runs after render (not willUpdate) so [part="panel"]/[part="deny-button"]
-    // have already landed in the DOM before the focus calls below can rely on
-    // them -- mirrors lyra-dialog's identical ordering rationale.
-    updated(changed) {
-        if (changed.has('open') && this.open) {
-            this.overlay?.focusInitial();
-            return;
-        }
-        if (changed.has('editing')) {
-            if (this.editing) {
-                // Entering edit mode is a deliberate request to start typing --
-                // steering focus into the textarea beats leaving it on the Edit
-                // button the click already left it on.
-                this.shadowRoot?.querySelector('[part="args-editor"]')?.focus();
-            }
-            else if (this.open && !this.shadowRoot?.activeElement) {
-                // Reached when editing was turned off some way other than clicking
-                // Cancel (e.g. `editable` flipping to false while the textarea held
-                // focus, in willUpdate above) -- the textarea that held focus was
-                // just unmounted without anything else claiming it, which would
-                // otherwise drop focus to <body> and silently stop the Tab trap
-                // from engaging. Refocus a stable target inside the panel instead.
-                this.shadowRoot?.querySelector('[part="deny-button"]')?.focus();
-            }
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.hasUpdated && this.open) {
-            this.releaseScrollLock ??= lockScroll(this.ownerDocument);
-            this.activateOverlay();
-            queueMicrotask(() => this.overlay?.focusInitial());
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.releaseScrollLock?.();
-        this.releaseScrollLock = undefined;
-        this.overlay?.suspend();
-    }
-    activateOverlay() {
-        if (this.overlay?.isActive()) {
-            this.overlay.resume();
-            return;
-        }
-        this.overlay = activateOverlay({
-            host: this,
-            panel: () => this.shadowRoot?.querySelector('[part="panel"]') ?? null,
-            onEscape: () => this.close('escape'),
-            onBackdrop: () => this.close('backdrop'),
-            preferredInitialFocus: () => this.shadowRoot?.querySelector('[part="deny-button"]') ?? null,
-        });
-    }
-    /**
-     * Close the dialog and return focus to whatever had it before the dialog
-     * opened. `reason` is forwarded as the `lyra-close` detail — built-in
-     * triggers pass `'escape'`/`'backdrop'`/`'approve'`/`'deny'`; a consumer's
-     * own close affordance (e.g. a footer-slotted button) should call this
-     * directly with its own reason string, so every dismissal path funnels
-     * through the same event instead of the consumer having to also toggle
-     * `open` itself.
-     */
-    close(reason = 'api') {
-        if (!this.open)
-            return;
-        this.open = false;
-        this.emit('lyra-close', reason);
-    }
-    stringifyArgs() {
-        try {
-            // JSON.stringify(undefined, ...) returns the *value* undefined, not a
-            // string -- the ?? covers that alongside the try/catch's circular-
-            // reference case, so the textarea always opens with real text.
-            return JSON.stringify(this.args, null, 2) ?? 'null';
-        }
-        catch {
-            return 'null';
-        }
-    }
-    render() {
-        const hasError = this.editing && this.draftError.length > 0;
-        return html `
-      <div part="backdrop" @click=${this.onBackdropClick}></div>
-      <div
-        part="panel"
-        role=${this.open ? 'dialog' : nothing}
-        aria-modal=${this.open ? 'true' : nothing}
-        aria-labelledby=${this.titleId}
-        tabindex="-1"
-      >
-        <div part="header">
-          <h2 id=${this.titleId}>Approve <span part="tool-name">${this.toolName || 'tool'}</span> call?</h2>
-        </div>
-        <div part="body">
-          ${this.editing
-            ? html `
-                <textarea
-                  part="args-editor"
-                  spellcheck="false"
-                  autocomplete="off"
-                  aria-label="Tool call arguments (JSON)"
-                  aria-invalid=${hasError ? 'true' : 'false'}
-                  aria-describedby=${hasError ? this.errorId : nothing}
-                  .value=${this.draftText}
-                  @input=${this.onDraftInput}
-                ></textarea>
-                <p part="error" id=${this.errorId} role="alert" ?hidden=${!hasError}>${this.draftError}</p>
-              `
-            : html `<lyra-json-viewer part="args-view" .data=${this.args}></lyra-json-viewer>`}
-        </div>
-        <div part="footer">
-          <slot name="footer"></slot>
-          <button part="deny-button" type="button" @click=${this.onDeny}>Deny</button>
-          ${this.editable
-            ? html `<button part="edit-button" type="button" @click=${this.toggleEdit}>
-                ${this.editing ? 'Cancel' : 'Edit'}
-              </button>`
-            : nothing}
-          <button part="approve-button" type="button" ?disabled=${hasError} @click=${this.onApprove}>
-            Approve
-          </button>
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraToolApprovalDialog.prototype, "open", void 0);
-__decorate([
-    property({ attribute: 'tool-name' })
-], LyraToolApprovalDialog.prototype, "toolName", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraToolApprovalDialog.prototype, "args", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraToolApprovalDialog.prototype, "editable", void 0);
-__decorate([
-    state()
-], LyraToolApprovalDialog.prototype, "editing", void 0);
-__decorate([
-    state()
-], LyraToolApprovalDialog.prototype, "draftText", void 0);
-__decorate([
-    state()
-], LyraToolApprovalDialog.prototype, "draftError", void 0);
+import "../json-viewer/json-viewer.js";
 defineElement('tool-approval-dialog', LyraToolApprovalDialog);
+//# sourceMappingURL=tool-approval-dialog.js.map

package/dist/components/tool-approval-dialog/tool-approval-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-approval-dialog.js","sourceRoot":"","sources":["../../../src/components/tool-approval-dialog/tool-approval-dialog.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,+BAA+B,CAAC;AACvC,aAAa,CAAC,sBAAsB,EAAE,sBAAsB,CAAC,CAAC"}

package/dist/components/tool-approval-dialog/tool-approval-dialog.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=tool-approval-dialog.styles.d.ts.map

package/dist/components/tool-approval-dialog/tool-approval-dialog.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-approval-dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tool-approval-dialog/tool-approval-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiKlB,CAAC"}

package/dist/components/tool-approval-dialog/tool-approval-dialog.styles.js

@@ -6,20 +6,23 @@ export const styles = css `
        --wa-*-overlay token exists in the design system to resolve through,
        same rationale as lyra-dialog's --lyra-dialog-overlay-color and
        lyra-tool-select-dialog's --lyra-tool-select-dialog-overlay-color). */
-    --lyra-tool-approval-dialog-overlay-color: rgb(0 0 0 / 0.5);
+    --lyra-tool-approval-dialog-overlay-color: var(--lyra-color-overlay);
     /* Contained here (rather than a bare font-family literal on the
        textarea) so a host page can retheme it -- same rationale as
        lyra-json-viewer's --lyra-json-viewer-font; raw args are code, not
        prose, so the editor gets the same monospace treatment as that
        viewer's own tree rendering. */
-    --lyra-tool-approval-dialog-mono-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --lyra-tool-approval-dialog-mono-font: var(--lyra-font-mono);
     display: none;
     position: fixed;
     inset: 0;
-    z-index: var(--lyra-overlay-stack-index, 1000);
+    z-index: var(--lyra-overlay-stack-index, var(--lyra-layer-modal));
     align-items: center;
     justify-content: center;
-    padding: var(--lyra-space-l);
+    padding-block-start: max(var(--lyra-space-l), var(--lyra-safe-area-top));
+    padding-block-end: max(var(--lyra-space-l), var(--lyra-safe-area-bottom));
+    padding-inline-start: max(var(--lyra-space-l), var(--lyra-safe-area-inline-start));
+    padding-inline-end: max(var(--lyra-space-l), var(--lyra-safe-area-inline-end));
   }
   :host([open]) {
     display: flex;
@@ -33,10 +36,10 @@ export const styles = css `
     position: relative;
     display: flex;
     flex-direction: column;
-    inline-size: min(32rem, 100%);
-    max-block-size: min(36rem, 100%);
+    inline-size: min(var(--lyra-size-32rem), 100%);
+    max-block-size: min(var(--lyra-size-36rem), 100%);
     background: var(--lyra-color-surface);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
     overflow: hidden;
@@ -46,12 +49,12 @@ export const styles = css `
   }
   [part='header'] h2 {
     margin: 0;
-    font-size: 1.0625rem;
-    font-weight: 600;
+    font-size: var(--lyra-size-1-0625rem);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   [part='tool-name'] {
     font-family: var(--lyra-tool-approval-dialog-mono-font);
-    font-weight: 700;
+    font-weight: var(--lyra-font-weight-bold);
     color: var(--lyra-color-brand);
     word-break: break-word;
   }
@@ -76,17 +79,17 @@ export const styles = css `
   }
   [part='args-editor'] {
     flex: 1 1 auto;
-    min-block-size: 10rem;
+    min-block-size: var(--lyra-size-10rem);
     box-sizing: border-box;
     resize: vertical;
     padding: var(--lyra-space-s) var(--lyra-space-m);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     color: inherit;
     font-family: var(--lyra-tool-approval-dialog-mono-font);
-    font-size: 0.8125rem;
-    line-height: 1.5;
+    font-size: var(--lyra-font-size-sm);
+    line-height: var(--lyra-line-height-normal);
   }
   [part='args-editor']:focus-visible {
     outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
@@ -97,7 +100,7 @@ export const styles = css `
   }
   [part='error'] {
     margin: 0;
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-danger);
   }
   [part='error'][hidden] {
@@ -110,7 +113,7 @@ export const styles = css `
     justify-content: flex-end;
     gap: var(--lyra-space-s);
     padding: var(--lyra-space-m) var(--lyra-space-l);
-    border-block-start: 1px solid var(--lyra-color-border);
+    border-block-start: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='footer'] ::slotted(*) {
     /* Any consumer-supplied footer content sits ahead of the built-in
@@ -124,11 +127,11 @@ export const styles = css `
   [part='edit-button'],
   [part='approve-button'] {
     font: inherit;
-    font-size: 0.875rem;
+    font-size: var(--lyra-font-size-md-sm);
     padding: var(--lyra-space-xs) var(--lyra-space-m);
     border-radius: var(--lyra-radius);
     cursor: pointer;
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='deny-button'],
   [part='edit-button'] {
@@ -158,3 +161,4 @@ export const styles = css `
     outline-offset: var(--lyra-focus-ring-offset);
   }
 `;
+//# sourceMappingURL=tool-approval-dialog.styles.js.map

package/dist/components/tool-approval-dialog/tool-approval-dialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-approval-dialog.styles.js","sourceRoot":"","sources":["../../../src/components/tool-approval-dialog/tool-approval-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKxB,CAAC"}