@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/app-rail/app-rail.styles.js

@@ -6,10 +6,10 @@ export const styles = css `
        can retheme any of them without a raw literal leaking into the public
        API (same rationale as lyra-dialog's --lyra-dialog-overlay-color and
        lyra-widget's --lyra-widget-overlay-color). */
-    --lyra-app-rail-width: 15rem;
-    --lyra-app-rail-icon-width: 4rem;
-    --lyra-app-rail-mobile-width: 18rem;
-    --lyra-app-rail-overlay-color: rgb(0 0 0 / 0.5);
+    --lyra-app-rail-width: var(--lyra-size-15rem);
+    --lyra-app-rail-icon-width: var(--lyra-size-4rem);
+    --lyra-app-rail-mobile-width: var(--lyra-size-18rem);
+    --lyra-app-rail-overlay-color: var(--lyra-color-overlay);
   }
 
   [part='toggle'] {
@@ -18,7 +18,7 @@ export const styles = css `
     justify-content: center;
     min-inline-size: var(--lyra-icon-button-size);
     min-block-size: var(--lyra-icon-button-size);
-    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: var(--lyra-color-text);
@@ -27,6 +27,9 @@ export const styles = css `
   :host([mode='mobile']) [part='toggle'] {
     display: inline-flex;
   }
+  :host([hide-toggle][mode='mobile']) [part='toggle'] {
+    display: none;
+  }
   [part='toggle']:hover {
     background: var(--lyra-color-brand-quiet);
     color: var(--lyra-color-brand);
@@ -39,7 +42,7 @@ export const styles = css `
   [part='backdrop'] {
     position: fixed;
     inset: 0;
-    z-index: var(--lyra-overlay-stack-index, 1000);
+    z-index: var(--lyra-overlay-stack-index, var(--lyra-layer-modal));
     background: var(--lyra-app-rail-overlay-color);
   }
 
@@ -51,28 +54,59 @@ export const styles = css `
      part attribute switches between the two names per render, so the two
      rulesets below are always mutually exclusive on it. */
   [part='base'] {
+    position: relative; /* anchors [part="resizer"] */
     display: flex;
     flex-direction: column;
     inline-size: var(--lyra-app-rail-width);
     block-size: 100%;
-    border-inline-end: 1px solid var(--lyra-color-border);
+    border-inline-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     background: var(--lyra-color-surface);
+    padding-block-end: var(--lyra-safe-area-bottom);
     overflow-y: auto;
     transition: inline-size var(--lyra-transition-base);
   }
   :host([mode='icon-only']) [part='base'] {
     inline-size: var(--lyra-app-rail-icon-width);
   }
+  :host([dragging]) [part='base'] {
+    transition: none;
+  }
+
+  [part='resizer'] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: calc(var(--lyra-size-3px) * -0.5);
+    inline-size: var(--lyra-size-3px);
+    background: transparent;
+    cursor: col-resize;
+    touch-action: none;
+  }
+  /* Transparent hit-slop: widens the draggable/tappable box along the resize axis only, without
+     changing the resizer's visible 3px width -- mirrors lyra-split's own [part="divider"]::before. */
+  [part='resizer']::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline: var(--lyra-size-neg-6px);
+  }
+  [part='resizer']:hover {
+    background: var(--lyra-color-brand);
+  }
+  [part='resizer']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
 
   [part='panel'] {
     position: fixed;
     inset-block: 0;
     inset-inline-start: 0;
-    z-index: calc(var(--lyra-overlay-stack-index, 1000) + 1);
+    z-index: calc(var(--lyra-overlay-stack-index, var(--lyra-layer-modal)) + 1);
     display: flex;
     flex-direction: column;
     inline-size: min(var(--lyra-app-rail-mobile-width), 85vw);
     background: var(--lyra-color-surface);
+    padding-block-end: var(--lyra-safe-area-bottom);
     box-shadow: var(--lyra-shadow);
     overflow-y: auto;
     transform: translateX(-100%);
@@ -92,14 +126,14 @@ export const styles = css `
 
   [part='header'] {
     padding: var(--lyra-space-m);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='header'][hidden] {
     display: none;
   }
   [part='footer'] {
     padding: var(--lyra-space-m);
-    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;
@@ -126,3 +160,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=app-rail.styles.js.map

package/dist/components/app-rail/app-rail.styles.js.map

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

package/dist/components/attachment-chip/attachment-chip.class.d.ts

@@ -0,0 +1,157 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type AttachmentChipStatus = 'pending' | 'uploading' | 'error' | 'done';
+export interface AttachmentChipIdDetail {
+    id: string;
+}
+/**
+ * `512` -> `"512 B"`; `2415919` -> `"2.3 MB"`. Whole bytes never get a
+ * decimal (there's no meaningful fraction of a byte); every unit past that
+ * gets exactly one decimal place. Returns `""` for a negative/non-finite
+ * input so a missing/unknown size renders nothing instead of `"NaN B"`.
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * `<lyra-attachment-chip>` — a compact chip representing one file queued for
+ * (or already part of) a chat message: a composer's pre-send attachment
+ * tray, or a sent message's `attachments` slot (see `<lyra-chat-message>`).
+ *
+ * Two independent ways to populate it, matching the two points in a message's
+ * lifecycle this is used at:
+ *  - Set `file` to a real `File` (fresh from a picker/drop) — `name`, `size`,
+ *    `mime-type` and the image thumbnail are all auto-derived from it.
+ *  - Set the plain `name`/`size`/`mime-type`/`thumbnail-src` props instead,
+ *    for reconstructing a chip from server-persisted attachment metadata
+ *    (e.g. after a page reload, when no real `File` object exists any more).
+ *
+ * `file` always wins when both are present — see each accessor's own doc.
+ * The image thumbnail for a real `File` is a cached `URL.createObjectURL()`
+ * blob URL, created in the update lifecycle immediately before the thumbnail
+ * renders and revoked automatically once `file`
+ * changes away from the object it was created for, and on disconnect — this
+ * component never leaks a blob URL.
+ *
+ * Identifying *which* attachment a `lyra-remove`/`lyra-retry` event is about:
+ * this deliberately reuses the platform's own `id`/`id` attribute (every
+ * element already has one; there's no need to shadow it with a second,
+ * differently-named Lit property, unlike e.g. `<lyra-tool-call-chip>`'s
+ * `call-id` which identifies a *call*, a concept distinct from the chip
+ * element itself). Set `id="..."` when you have a stable server-side
+ * attachment id. When `id` is left unset and `file` is set, a stable id is
+ * derived from `` `${file.name}:${file.size}:${file.lastModified}` `` — stable
+ * across re-renders of the *same* `File` object without requiring the
+ * consumer to invent one. When neither is available, a generated internal id
+ * is used as a last resort so the event always has *some* id.
+ *
+ * i18n/locale: every translatable word rendered by this component is
+ * override-able via a dedicated property — `removeLabel`/`retryLabel`
+ * (the verb prefixed to the remove/retry buttons' `aria-label`, keeping the
+ * `displayName` interpolation), and `uploadingLabel`/`uploadFailedLabel` (the
+ * verb/phrase used in the visible `status-text`, keeping the live percentage
+ * interpolation for `uploadingLabel`). All four default to today's exact
+ * hardcoded English text (`'Remove'`, `'Retry'`, `'Uploading'`, `'Upload
+ * failed'`), so leaving them unset changes nothing. These are plain
+ * properties, not slots — this component still exposes no slots.
+ *
+ * @customElement lyra-attachment-chip
+ * @event lyra-remove - The user activated the remove (×) button. `detail: { id }`. Only rendered while `removable`.
+ * @event lyra-retry - The user activated the retry button. `detail: { id }`. Only rendered while `status="error"`.
+ * @csspart base - The chip's root container.
+ * @csspart thumbnail - The leading image thumbnail / generic file glyph.
+ * @csspart meta - Wrapper around `name` and `size`.
+ * @csspart name - The filename (ellipsis-truncated via CSS; the untruncated name is always available via the native `title` tooltip).
+ * @csspart size - The human-readable formatted file size. Hidden when no size is known.
+ * @csspart status-text - The visible text twin of the status accent color — carries the state in text, not just color. Empty/hidden for `pending`/`done`. Gets `role="alert"` for `status="error"` only, so a screen-reader user not already focused on the chip still hears an upload failure; the ticking `'uploading'` readout deliberately stays out of the accessibility tree the same way `<lyra-generation-status>`'s per-second elapsed/token readout does — a live region re-announcing every progress tick would be noise, not information, while a one-shot failure is exactly the kind of infrequent, actionable transition a live region exists for.
+ * @csspart progress - The numeric upload progress bar (`role="progressbar"`), shown only while `status="uploading"` and `progress` is a meaningful (>0) number.
+ * @csspart progress-fill - The filled portion of `progress`.
+ * @csspart spinner - The indeterminate upload spinner, shown instead of `progress` while `status="uploading"` and `progress` is unset/0.
+ * @csspart retry-button - The retry affordance, only rendered while `status="error"`.
+ * @csspart remove-button - The remove (×) affordance, only rendered while `removable`.
+ */
+export declare class LyraAttachmentChip extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** A real `File`, e.g. fresh from `<lyra-file-input>`'s `lyra-files` event.
+     *  When set, `name`/`size`/`mime-type`/the image thumbnail are all derived
+     *  from it, taking precedence over the independent props below. */
+    file?: File;
+    /** Filename, used only while `file` is unset. */
+    name: string;
+    /** File size in bytes, used only while `file` is unset. */
+    size: number;
+    /** MIME type, used only while `file` is unset. */
+    mimeType: string;
+    /** Thumbnail image URL, used only while `file` is unset (a real `File`'s
+     *  thumbnail always comes from a generated object URL instead — see the
+     *  class doc). Unlike the other independent props this one has no
+     *  `file`-derived equivalent to defer to for a non-image file; it's simply
+     *  rendered whenever present. */
+    thumbnailSrc: string;
+    /** Lifecycle state — drives the accent tint and which of `progress`/`spinner`/`retry-button` renders. */
+    status: AttachmentChipStatus;
+    /** Upload completion, 0-100. Only meaningful while `status="uploading"`;
+     *  a value of 0 (the default) or `NaN` falls back to the indeterminate spinner. */
+    progress: number;
+    /** Shows the remove (×) button. */
+    removable: boolean;
+    /** Renders a smaller, borderless pill presentation instead of the default bordered/chrome-heavy
+     *  chip -- for a consumer that wants an icon-only-adjacent, compact attachment affordance (e.g.
+     *  a composer's pending-attachment tray) without hand-tuning several `::part()` custom
+     *  properties individually. `false` (the default) is visually identical to today. */
+    compact: boolean;
+    /** When both this and `compact` are set, hides `[part=meta]` (the filename/size text) entirely
+     *  for an image-mime attachment, leaving only the thumbnail -- for a consumer wanting a
+     *  thumbnail-only density purely through props, with no consumer-side CSS. Has no effect for a
+     *  non-image chip (there is no thumbnail to fall back to showing on its own) or when `compact` is
+     *  unset. `false` (the default) reproduces today's exact output. */
+    thumbnailOnly: boolean;
+    /** Verb used in the remove button's `aria-label`, interpolated as
+     *  `` `${removeLabel} ${displayName}` `` -- override for i18n/locale.
+     *  Defaults to `'Remove'`, reproducing today's exact `"Remove ${displayName}"`
+     *  text byte-for-byte. */
+    removeLabel: string;
+    /** Verb used in the retry button's `aria-label`, interpolated as
+     *  `` `${retryLabel} ${displayName}` `` -- override for i18n/locale.
+     *  Defaults to `'Retry'`, reproducing today's exact `"Retry ${displayName}"`
+     *  text byte-for-byte. */
+    retryLabel: string;
+    /** Verb used in the visible uploading status text -- rendered as
+     *  `` `${uploadingLabel} ${percent}%` `` once progress is a meaningful
+     *  number, else `` `${uploadingLabel}…` ``. Override for i18n/locale.
+     *  Defaults to `'Uploading'`, reproducing today's exact `"Uploading N%"`/
+     *  `"Uploading…"` text byte-for-byte. */
+    uploadingLabel: string;
+    /** Visible status text shown for `status="error"`. Override for
+     *  i18n/locale. Defaults to `'Upload failed'`, reproducing today's exact
+     *  text byte-for-byte. */
+    uploadFailedLabel: string;
+    /** Override for the empty-name fallback shown (and used as the `title` tooltip) when neither
+     *  `file` nor `name` supply a filename -- for i18n/locale. Defaults to `'Untitled file'`,
+     *  reproducing today's exact hardcoded text byte-for-byte. */
+    untitledLabel: string;
+    private objectUrl?;
+    private objectUrlFile?;
+    private readonly fallbackId;
+    private get effectiveName();
+    private get effectiveSize();
+    private get effectiveMimeType();
+    private get resolvedId();
+    private get hasNumericProgress();
+    private get clampedProgress();
+    /** Returns (creating or reusing as needed) the object URL for `file`'s
+     * image thumbnail. Called from the update lifecycle, never from `render()`,
+     * so rendering stays a pure projection of already-prepared state. */
+    private ensureObjectUrl;
+    private revokeObjectUrl;
+    protected willUpdate(): void;
+    disconnectedCallback(): void;
+    private onRemoveClick;
+    private onRetryClick;
+    private renderThumbnail;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-attachment-chip': LyraAttachmentChip;
+    }
+}
+//# sourceMappingURL=attachment-chip.class.d.ts.map

package/dist/components/attachment-chip/attachment-chip.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-chip.class.d.ts","sourceRoot":"","sources":["../../../src/components/attachment-chip/attachment-chip.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAEtF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9E,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;CACZ;AAqDD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAUpD;AA0BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBAAa,kBAAmB,SAAQ,WAAW;IACjD,MAAM,CAAC,MAAM,iCAAgC;IAE7C;;uEAEmE;IACnC,IAAI,CAAC,EAAE,IAAI,CAAC;IAE5C,iDAAiD;IACrC,IAAI,SAAM;IAEtB,2DAA2D;IAC/B,IAAI,SAAK;IAErC,kDAAkD;IACZ,QAAQ,SAAM;IAEpD;;;;qCAIiC;IACS,YAAY,SAAM;IAE5D,yGAAyG;IAC5E,MAAM,EAAE,oBAAoB,CAAa;IAEtE;uFACmF;IACvD,QAAQ,SAAK;IAEzC,mCAAmC;IACS,SAAS,UAAQ;IAE7D;;;yFAGqF;IACzC,OAAO,UAAS;IAE5D;;;;wEAIoE;IACK,aAAa,UAAS;IAE/F;;;8BAG0B;IACe,WAAW,SAAY;IAEhE;;;8BAG0B;IACc,UAAU,SAAW;IAE7D;;;;6CAIyC;IACG,cAAc,SAAe;IAEzE;;8BAE0B;IACsB,iBAAiB,SAAmB;IAEpF;;kEAE8D;IACnB,aAAa,SAAmB;IAO3E,OAAO,CAAC,SAAS,CAAC,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAC,CAAO;IAI7B,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA6B;IAExD,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,UAAU,GAIrB;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED;;yEAEqE;IACrE,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAMvB,SAAS,CAAC,UAAU,IAAI,IAAI,CAO3B;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAED,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,eAAe;IAavB,MAAM,IAAI,cAAc,CAoDvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}