@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/dialog/dialog.js

@@ -1,288 +1,5 @@
-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';
+export * from './dialog.class.js';
+import { LyraDialog } from './dialog.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { lockScroll } from '../../internal/scroll-lock.js';
-import { activateOverlay } from '../../internal/overlay-manager.js';
-import { nextId, srOnly } from '../../internal/a11y.js';
-import { closeIcon } from '../../internal/icons.js';
-import { styles } from './dialog.styles.js';
-const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
-/**
- * `<lyra-dialog>` — a general-purpose modal/overlay. `role="dialog"`,
- * focus-trapped while open, dismissible via Escape or a backdrop click, and
- * scroll-locks the document for as long as it's open. Chrome stays minimal by
- * default — no built-in title bar or close button; a consumer supplies a
- * heading and any close affordance itself via the default/`footer` slots.
- * `heading`/`closable` are an opt-in convenience for the common case where
- * hand-building that chrome isn't worth it (see below).
- *
- * Accessible name / visible header, in priority order:
- * 1. If a heading element (`h1`–`h6` or `[role="heading"]`) is a *direct
- *    child* (not inside `slot="footer"`), its text content becomes
- *    `aria-label` on the panel — unchanged, and takes priority over `heading`
- *    below so an existing consumer that already slots its own heading keeps
- *    rendering it exactly as before.
- * 2. Otherwise, when `heading` is set, a visible header row (`part="header"`)
- *    renders containing that text (`part="heading"`), which becomes the
- *    `aria-labelledby` target.
- * 3. Otherwise, when `label` is set, an invisible (`.sr-only`, exposed as the
- *    `label` part) element carrying that text is rendered inside the panel
- *    and `aria-labelledby` points at it instead.
- * Only one of cases 2/3 ever renders at a time, so exactly one element ever
- * claims `aria-labelledby`. `label` itself never renders visible chrome on
- * its own — `::part(label)` can be restyled to make the sr-only text visible,
- * or `heading` can be set instead, if a consumer wants visible chrome without
- * slotting a real heading element.
- *
- * The slotted-heading case deliberately uses `aria-label` (a copied string)
- * rather than `aria-labelledby` pointing at the heading's `id`: the heading is
- * *light-DOM* content while `[part="panel"]` lives in this element's
- * *shadow* tree, and an ID-reference attribute can't resolve across that
- * boundary (verified against axe's `aria-dialog-name` rule) — unlike the
- * `heading`/`label`-prop cases above, where the target element is rendered
- * inside the same shadow root it labels, so `aria-labelledby` there is safe.
- *
- * `closable` renders a close (X) button in the header row (creating one, with
- * no heading text, if `heading` is unset) that closes the dialog via the same
- * `close()` path as Escape/backdrop-dismiss, with reason `'close-button'`.
- *
- * Stacking: opening one `<lyra-dialog>` while another is already open (e.g. a
- * `confirm()` launched from within an already-open dialog) is supported --
- * Escape and the Tab focus trap only ever act on the topmost open dialog, so
- * dialogs beneath it stay open and untouched until the one on top closes.
- *
- * @customElement lyra-dialog
- * @slot - The dialog body.
- * @slot footer - Action buttons, rendered in a bottom row.
- * @event lyra-dialog-close - `detail: DialogCloseReason`. Fired whenever the
- *   dialog is dismissed via Escape, a backdrop click, the built-in close
- *   button (`closable`), a `close()` call, or (with reason `'unmount'`)
- *   removal from the DOM by anything else while still open.
- * @csspart backdrop - The full-viewport scrim behind the panel.
- * @csspart panel - The dialog panel itself (`role="dialog"` while open). Its
- *   max-inline-size is controlled by the `--lyra-dialog-max-width` custom
- *   property (default `32rem`).
- * @csspart header - The header row, rendered when `heading` is set (and no
- *   heading is slotted) and/or `closable` is `true`.
- * @csspart heading - The visible `heading`-text element inside `header`,
- *   rendered only when `heading` is set and no heading is slotted.
- * @csspart close-button - The built-in close button, rendered inside `header`
- *   only when `closable` is `true`.
- * @csspart label - The invisible `label`-text element used for
- *   `aria-labelledby` when no heading is slotted and `heading` is unset.
- * @csspart body - The wrapper around the default slot.
- * @csspart footer - The wrapper around the `footer` slot.
- */
-export class LyraDialog 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;
-        /** Accessible name used when no heading is slotted — see the class doc for the full fallback order. */
-        this.label = '';
-        /** Renders a built-in close (X) button in the header row (creating one,
-         *  with no heading text, if `heading` is unset), wired to the same
-         *  `close()` path Escape/backdrop-dismiss already use, with reason
-         *  `'close-button'`. */
-        this.closable = false;
-        this.hasFooterSlot = false;
-        this.srLabelId = nextId('dialog-label');
-        this.headingId = nextId('dialog-heading');
-        this.onDefaultSlotChange = () => {
-            this.detectHeading();
-        };
-        this.onFooterSlotChange = (e) => {
-            this.hasFooterSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onBackdropClick = () => {
-            this.overlay?.dismissBackdrop();
-        };
-        this.onCloseButtonClick = () => {
-            this.close('close-button');
-        };
-    }
-    static { this.styles = [LyraElement.styles, srOnly, styles]; }
-    willUpdate(changed) {
-        if (!this.hasUpdated) {
-            this.hasFooterSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'footer');
-            this.detectHeading();
-        }
-        if (changed.has('open')) {
-            if (this.open) {
-                this.activateOverlay();
-            }
-            else {
-                this.deactivateOverlay();
-            }
-        }
-    }
-    // Runs after render so the manager can resolve the panel and its composed
-    // focus targets, including controls projected through either slot.
-    updated(changed) {
-        if (changed.has('open') && this.open) {
-            this.overlay?.focusInitial();
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // A reconnect (e.g. a drag-and-drop reparent keeping this same element
-        // instance) fires disconnectedCallback then connectedCallback
-        // synchronously with no update in between, so willUpdate never reruns to
-        // notice `open` is still true -- restore the scroll lock/trap it dropped.
-        if (this.hasUpdated && this.open) {
-            if (this.overlay?.isActive()) {
-                this.overlay.resume();
-                this.releaseScrollLock ??= lockScroll(this.ownerDocument);
-            }
-            else {
-                this.activateOverlay();
-            }
-            queueMicrotask(() => this.overlay?.focusInitial());
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.releaseScrollLock?.();
-        this.releaseScrollLock = undefined;
-        this.overlay?.suspend();
-        if (this.open) {
-            // A reparent (drag-and-drop moving this same element instance to a new
-            // parent) fires disconnectedCallback immediately followed by a
-            // synchronous connectedCallback, with no turn of the event loop in
-            // between -- deferring this check a microtask lets that case
-            // short-circuit here once isConnected is true again, so only a genuine
-            // removal (the element still disconnected once microtasks flush) ever
-            // reaches the assignment below. Without this, removing an open dialog
-            // any way other than its own close() (a consumer's own DOM cleanup, a
-            // parent re-render that drops it, etc.) never fires
-            // `lyra-dialog-close`, so e.g. confirm()'s returned promise hangs forever.
-            queueMicrotask(() => {
-                if (!this.isConnected && this.open) {
-                    this.open = false;
-                    this.emit('lyra-dialog-close', 'unmount');
-                }
-            });
-        }
-    }
-    // Only direct children are scanned -- a heading nested several layers deep
-    // (or inside a slotted custom element's own shadow root) is left to the
-    // consumer to label explicitly via `label` instead. Same depth limit
-    // lyra-widget applies to its own actions-slot presence check. Recomputed
-    // only on slot assignment changes, not on every render -- a consumer that
-    // mutates an already-slotted heading's textContent in place (rather than
-    // replacing the node) won't retroactively update aria-label; set `label`
-    // instead for a title that needs to change live.
-    detectHeading() {
-        const heading = Array.from(this.children).find((el) => el.getAttribute('slot') !== 'footer' && el.matches(HEADING_SELECTOR));
-        this.headingText = heading?.textContent?.trim() || undefined;
-    }
-    /**
-     * Close the dialog and return focus to whatever had it before the dialog
-     * opened. `reason` is forwarded as the `lyra-dialog-close` detail --
-     * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
-     * consumer's own close affordance (e.g. a footer Cancel 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-dialog-close', reason);
-    }
-    activateOverlay() {
-        if (this.overlay?.isActive())
-            return;
-        this.releaseScrollLock ??= lockScroll(this.ownerDocument);
-        this.overlay = activateOverlay({
-            host: this,
-            panel: () => this.shadowRoot?.querySelector('[part="panel"]') ?? null,
-            onEscape: () => this.close('escape'),
-            onBackdrop: () => this.close('backdrop'),
-        });
-    }
-    deactivateOverlay() {
-        this.releaseScrollLock?.();
-        this.releaseScrollLock = undefined;
-        this.overlay?.deactivate();
-        this.overlay = undefined;
-    }
-    render() {
-        // Priority order (see class doc): a slotted heading always wins; only
-        // when there isn't one does `heading` get a turn, then `label`'s
-        // sr-only fallback -- never more than one of the two below claims
-        // aria-labelledby for the same panel.
-        const useHeadingProp = !this.headingText && !!this.heading;
-        const useSrLabel = !this.headingText && !useHeadingProp && this.label.length > 0;
-        const showHeader = useHeadingProp || this.closable;
-        return html `
-      <div part="backdrop" @click=${this.onBackdropClick}></div>
-      <div
-        part="panel"
-        role=${this.open ? 'dialog' : nothing}
-        aria-modal=${this.open ? 'true' : nothing}
-        aria-label=${this.headingText ?? nothing}
-        aria-labelledby=${useHeadingProp ? this.headingId : useSrLabel ? this.srLabelId : nothing}
-        tabindex="-1"
-      >
-        ${useSrLabel
-            ? html `<span id=${this.srLabelId} part="label" class="sr-only">${this.label}</span>`
-            : nothing}
-        ${showHeader
-            ? html `
-              <div part="header">
-                ${useHeadingProp
-                ? html `<span id=${this.headingId} part="heading">${this.heading}</span>`
-                : nothing}
-                ${this.closable
-                ? html `
-                      <button
-                        part="close-button"
-                        type="button"
-                        aria-label="Close"
-                        @click=${this.onCloseButtonClick}
-                      >
-                        ${closeIcon()}
-                      </button>
-                    `
-                : nothing}
-              </div>
-            `
-            : nothing}
-        <div part="body">
-          <slot @slotchange=${this.onDefaultSlotChange}></slot>
-        </div>
-        <div part="footer" ?hidden=${!this.hasFooterSlot}>
-          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraDialog.prototype, "open", void 0);
-__decorate([
-    property()
-], LyraDialog.prototype, "label", void 0);
-__decorate([
-    property()
-], LyraDialog.prototype, "heading", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'closable' })
-], LyraDialog.prototype, "closable", void 0);
-__decorate([
-    state()
-], LyraDialog.prototype, "hasFooterSlot", void 0);
-__decorate([
-    state()
-], LyraDialog.prototype, "headingText", void 0);
 defineElement('dialog', LyraDialog);
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/dialog/dialog.styles.d.ts

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

package/dist/components/dialog/dialog.styles.d.ts.map

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

package/dist/components/dialog/dialog.styles.js

@@ -5,14 +5,17 @@ export const styles = css `
        without a raw literal leaking into the public API (no shared
        --wa-*-overlay token exists in the design system to resolve through,
        same rationale as lyra-widget's --lyra-widget-overlay-color). */
-    --lyra-dialog-overlay-color: rgb(0 0 0 / 0.5);
+    --lyra-dialog-overlay-color: var(--lyra-color-overlay);
     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;
@@ -26,13 +29,20 @@ export const styles = css `
     position: relative;
     display: flex;
     flex-direction: column;
+    /* --lyra-dialog-width is an assertive width (unset/auto by default -- the panel shrink-wraps to
+       content, unchanged) capped by the same max-inline-size below and by the viewport. */
+    inline-size: var(--lyra-dialog-width, auto);
     /* --lyra-dialog-max-width lets a consumer widen/narrow the panel per
        instance (e.g. inline on the host) without overriding the whole rule --
-       same convention as lyra-media-card's --lyra-media-card-max-height. */
-    max-inline-size: min(var(--lyra-dialog-max-width, 32rem), 100%);
+       same convention as lyra-media-card's --lyra-media-card-max-height. When
+       --lyra-dialog-width is set but --lyra-dialog-max-width is left at its
+       default, the cap falls back to the requested width itself (not the
+       32rem default) so an assertive width isn't silently clipped by the
+       old shrink-to-fit cap -- the viewport (100%) is still a hard limit. */
+    max-inline-size: min(var(--lyra-dialog-max-width, var(--lyra-dialog-width, var(--lyra-size-32rem))), 100%);
     max-block-size: 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: auto;
@@ -42,13 +52,13 @@ export const styles = css `
     align-items: center;
     gap: var(--lyra-space-s);
     padding: var(--lyra-space-m) var(--lyra-space-l);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='heading'] {
     flex: 1 1 auto;
     min-inline-size: 0;
     margin: 0;
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -88,9 +98,10 @@ 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'][hidden] {
     display: none;
   }
 `;
+//# sourceMappingURL=dialog.styles.js.map

package/dist/components/dialog/dialog.styles.js.map

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

package/dist/components/diff-view/diff-line-diff.d.ts

@@ -0,0 +1,13 @@
+export interface DiffOp {
+    type: 'equal' | 'add' | 'remove';
+    text: string;
+}
+/**
+ * A real line-level diff via the classic O(n*m) longest-common-subsequence dynamic program --
+ * not a lexical/syntax-highlighting pass, and not "every removed line then every added line."
+ * Fine for the typical size of a tool-call/transcript diff this component targets; a full Myers
+ * implementation would be asymptotically faster on very large inputs but isn't needed to fix the
+ * filed defect (alignment), only to make it correct.
+ */
+export declare function computeLineDiff(oldLines: string[], newLines: string[]): DiffOp[];
+//# sourceMappingURL=diff-line-diff.d.ts.map

package/dist/components/diff-view/diff-line-diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-line-diff.d.ts","sourceRoot":"","sources":["../../../src/components/diff-view/diff-line-diff.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACjC,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAkChF"}

package/dist/components/diff-view/diff-line-diff.js

@@ -0,0 +1,45 @@
+/**
+ * A real line-level diff via the classic O(n*m) longest-common-subsequence dynamic program --
+ * not a lexical/syntax-highlighting pass, and not "every removed line then every added line."
+ * Fine for the typical size of a tool-call/transcript diff this component targets; a full Myers
+ * implementation would be asymptotically faster on very large inputs but isn't needed to fix the
+ * filed defect (alignment), only to make it correct.
+ */
+export function computeLineDiff(oldLines, newLines) {
+    const m = oldLines.length;
+    const n = newLines.length;
+    const lcs = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+    for (let i = m - 1; i >= 0; i--) {
+        for (let j = n - 1; j >= 0; j--) {
+            lcs[i][j] = oldLines[i] === newLines[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+        }
+    }
+    const ops = [];
+    let i = 0;
+    let j = 0;
+    while (i < m && j < n) {
+        if (oldLines[i] === newLines[j]) {
+            ops.push({ type: 'equal', text: oldLines[i] });
+            i++;
+            j++;
+        }
+        else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+            ops.push({ type: 'remove', text: oldLines[i] });
+            i++;
+        }
+        else {
+            ops.push({ type: 'add', text: newLines[j] });
+            j++;
+        }
+    }
+    while (i < m) {
+        ops.push({ type: 'remove', text: oldLines[i] });
+        i++;
+    }
+    while (j < n) {
+        ops.push({ type: 'add', text: newLines[j] });
+        j++;
+    }
+    return ops;
+}
+//# sourceMappingURL=diff-line-diff.js.map

package/dist/components/diff-view/diff-line-diff.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-line-diff.js","sourceRoot":"","sources":["../../../src/components/diff-view/diff-line-diff.ts"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,QAAkB,EAAE,QAAkB;IACpE,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;IAC1B,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;IAC1B,MAAM,GAAG,GAAe,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,KAAK,CAAS,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9F,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAChC,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAChC,GAAG,CAAC,CAAC,CAAE,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAE,CAAC,CAAC,GAAG,CAAC,CAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAE,CAAC,CAAC,CAAE,EAAE,GAAG,CAAC,CAAC,CAAE,CAAC,CAAC,GAAG,CAAC,CAAE,CAAC,CAAC;QAClH,CAAC;IACH,CAAC;IACD,MAAM,GAAG,GAAa,EAAE,CAAC;IACzB,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QACtB,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;YAChC,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC;YAChD,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;QACN,CAAC;aAAM,IAAI,GAAG,CAAC,CAAC,GAAG,CAAC,CAAE,CAAC,CAAC,CAAE,IAAI,GAAG,CAAC,CAAC,CAAE,CAAC,CAAC,GAAG,CAAC,CAAE,EAAE,CAAC;YAC9C,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC;YACjD,CAAC,EAAE,CAAC;QACN,CAAC;aAAM,CAAC;YACN,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC;YAC9C,CAAC,EAAE,CAAC;QACN,CAAC;IACH,CAAC;IACD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QACb,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC;QACjD,CAAC,EAAE,CAAC;IACN,CAAC;IACD,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;QACb,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAE,EAAE,CAAC,CAAC;QAC9C,CAAC,EAAE,CAAC;IACN,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/components/diff-view/diff-view.class.d.ts

@@ -0,0 +1,40 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface LyraDiffViewEventMap {
+    'lyra-copy': CustomEvent<{
+        text: string;
+    }>;
+}
+/**
+ * `<lyra-diff-view>` — a real two-string line diff (Myers/LCS-style alignment), rendered as
+ * interleaved unified-diff output -- not diff-flavored syntax highlighting over an
+ * already-formatted string (`lyra-code-block`'s `language="diff"` only lexically colors a string
+ * the consumer already unified-diffed; it has no two-string-compare entry point). First-party
+ * invention (no Web Awesome equivalent).
+ *
+ * @customElement lyra-diff-view
+ * @event lyra-copy - Fired on copy-button activation. `detail: { text: string }` (the full
+ *   unified-diff text, regardless of whether the clipboard write actually succeeded).
+ * @csspart base - The root wrapper.
+ * @csspart line - A single line. Carries `data-type="equal"|"add"|"remove"`.
+ * @csspart copy-button - The copy affordance, only rendered while `copyable`.
+ */
+export declare class LyraDiffView extends LyraElement<LyraDiffViewEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** The "before" text. Default `''` renders an all-additions diff of `newText`. */
+    oldText: string;
+    /** The "after" text. Default `''` renders an all-removals diff of `oldText`. */
+    newText: string;
+    /** Shows a copy-to-clipboard button for the full unified-diff text. `false` (the default)
+     *  renders no button. */
+    copyable: boolean;
+    private get unifiedText();
+    private onCopyClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-diff-view': LyraDiffView;
+    }
+}
+//# sourceMappingURL=diff-view.class.d.ts.map

package/dist/components/diff-view/diff-view.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-view.class.d.ts","sourceRoot":"","sources":["../../../src/components/diff-view/diff-view.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC5C;AAED;;;;;;;;;;;;;GAaG;AACH,qBAAa,YAAa,SAAQ,WAAW,CAAC,oBAAoB,CAAC;IACjE,MAAM,CAAC,MAAM,iCAAgC;IAE7C,kFAAkF;IAClD,OAAO,SAAM;IAE7C,gFAAgF;IAChD,OAAO,SAAM;IAE7C;6BACyB;IACI,QAAQ,UAAS;IAE9C,OAAO,KAAK,WAAW,GAItB;IAED,OAAO,CAAC,WAAW,CAMjB;IAEF,MAAM,IAAI,cAAc,CAcvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/diff-view/diff-view.class.js

@@ -0,0 +1,73 @@
+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 } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { computeLineDiff } from './diff-line-diff.js';
+import { styles } from './diff-view.styles.js';
+/**
+ * `<lyra-diff-view>` — a real two-string line diff (Myers/LCS-style alignment), rendered as
+ * interleaved unified-diff output -- not diff-flavored syntax highlighting over an
+ * already-formatted string (`lyra-code-block`'s `language="diff"` only lexically colors a string
+ * the consumer already unified-diffed; it has no two-string-compare entry point). First-party
+ * invention (no Web Awesome equivalent).
+ *
+ * @customElement lyra-diff-view
+ * @event lyra-copy - Fired on copy-button activation. `detail: { text: string }` (the full
+ *   unified-diff text, regardless of whether the clipboard write actually succeeded).
+ * @csspart base - The root wrapper.
+ * @csspart line - A single line. Carries `data-type="equal"|"add"|"remove"`.
+ * @csspart copy-button - The copy affordance, only rendered while `copyable`.
+ */
+export class LyraDiffView extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The "before" text. Default `''` renders an all-additions diff of `newText`. */
+        this.oldText = '';
+        /** The "after" text. Default `''` renders an all-removals diff of `oldText`. */
+        this.newText = '';
+        /** Shows a copy-to-clipboard button for the full unified-diff text. `false` (the default)
+         *  renders no button. */
+        this.copyable = false;
+        this.onCopyClick = () => {
+            const text = this.unifiedText;
+            navigator.clipboard?.writeText(text).catch(() => {
+                // best-effort -- lyra-copy still fires with the intended text regardless
+            });
+            this.emit('lyra-copy', { text });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get unifiedText() {
+        return computeLineDiff(this.oldText.split('\n'), this.newText.split('\n'))
+            .map((op) => `${op.type === 'add' ? '+' : op.type === 'remove' ? '-' : ' '} ${op.text}`)
+            .join('\n');
+    }
+    render() {
+        const ops = computeLineDiff(this.oldText.split('\n'), this.newText.split('\n'));
+        return html `
+      <div part="base">
+        ${this.copyable
+            ? html `<button part="copy-button" type="button" aria-label=${`${this.localize('copy')} diff`} @click=${this.onCopyClick}>
+              ${this.localize('copy')}
+            </button>`
+            : nothing}
+        <pre>${ops.map((op) => html `<div part="line" data-type=${op.type}>${op.type === 'add' ? '+' : op.type === 'remove' ? '-' : ' '} ${op.text}</div>`)}</pre>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraDiffView.prototype, "oldText", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraDiffView.prototype, "newText", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraDiffView.prototype, "copyable", void 0);
+//# sourceMappingURL=diff-view.class.js.map

package/dist/components/diff-view/diff-view.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-view.class.js","sourceRoot":"","sources":["../../../src/components/diff-view/diff-view.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAM/C;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAiC;IAAnE;;QAGE,kFAAkF;QAClD,YAAO,GAAG,EAAE,CAAC;QAE7C,gFAAgF;QAChD,YAAO,GAAG,EAAE,CAAC;QAE7C;iCACyB;QACI,aAAQ,GAAG,KAAK,CAAC;QAQtC,gBAAW,GAAG,GAAS,EAAE;YAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;YAC9B,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;gBAC9C,yEAAyE;YAC3E,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,IAAI,CAAmB,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;QACrD,CAAC,CAAC;IAiBJ,CAAC;aAzCQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAY7C,IAAY,WAAW;QACrB,OAAO,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;aACvE,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;aACvF,IAAI,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAUD,MAAM;QACJ,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAChF,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,uDAAuD,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,WAAW,IAAI,CAAC,WAAW;gBACjH,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;sBACf;YACZ,CAAC,CAAC,OAAO;eACJ,GAAG,CAAC,GAAG,CACZ,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA,8BAA8B,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,QAAQ,CACnI;;KAEJ,CAAC;IACJ,CAAC;CACF;AAtCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAAc;AAGb;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CAAc;AAIhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAkB"}

package/dist/components/diff-view/diff-view.d.ts

@@ -0,0 +1,2 @@
+export * from './diff-view.class.js';
+//# sourceMappingURL=diff-view.d.ts.map

package/dist/components/diff-view/diff-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-view.d.ts","sourceRoot":"","sources":["../../../src/components/diff-view/diff-view.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/diff-view/diff-view.js

@@ -0,0 +1,5 @@
+export * from './diff-view.class.js';
+import { LyraDiffView } from './diff-view.class.js';
+import { defineElement } from '../../internal/prefix.js';
+defineElement('diff-view', LyraDiffView);
+//# sourceMappingURL=diff-view.js.map

package/dist/components/diff-view/diff-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-view.js","sourceRoot":"","sources":["../../../src/components/diff-view/diff-view.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC"}

package/dist/components/diff-view/diff-view.styles.d.ts

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

package/dist/components/diff-view/diff-view.styles.d.ts.map

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

package/dist/components/diff-view/diff-view.styles.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    --lyra-diff-view-font: var(--lyra-font-mono);
+  }
+  [part='base'] {
+    position: relative;
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    overflow: auto;
+  }
+  pre {
+    margin: 0;
+    padding: var(--lyra-space-s);
+    font-family: var(--lyra-diff-view-font);
+    font-size: var(--lyra-font-size-sm);
+    line-height: var(--lyra-line-height-snug);
+  }
+  [part='line'] {
+    white-space: pre-wrap;
+  }
+  [part='line'][data-type='add'] {
+    background: var(--lyra-color-success-quiet);
+    color: var(--lyra-color-success);
+  }
+  [part='line'][data-type='remove'] {
+    background: var(--lyra-color-danger-quiet);
+    color: var(--lyra-color-danger);
+  }
+  [part='copy-button'] {
+    position: absolute;
+    inset-block-start: var(--lyra-space-xs);
+    inset-inline-end: var(--lyra-space-xs);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    font-size: var(--lyra-font-size-xs);
+    padding: var(--lyra-size-0-125rem) var(--lyra-space-s);
+    cursor: pointer;
+  }
+  [part='copy-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+`;
+//# sourceMappingURL=diff-view.styles.js.map