luxen-ui 0.3.0 → 0.5.0

package/dist/elements/stories-viewer/stories-viewer.css

@@ -0,0 +1,337 @@
+:host {
+  --width: min(420px, 100vw);
+  --aspect-ratio: 9 / 16;
+  --progress-color: white;
+  --progress-bg: rgb(255 255 255 / 35%);
+  --progress-gap: 4px;
+  --show-duration: 200ms;
+  --hide-duration: 200ms;
+  /* Semi-transparent backdrop so the underlying page (e.g. a product page) stays visible behind the player, but with enough darkness to focus attention on the frame. Override with `--backdrop: …` or set to `oklch(0% 0 0 / 90%)` for an opaque blackout. */
+  --backdrop: var(--l-backdrop-strong);
+
+  display: contents;
+}
+
+dialog {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100dvh;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: white;
+  overflow: clip;
+
+  /* Center the frame at all times. `place-items` is on the base rule so it survives the close transition (only `display` and `opacity` are transitioned with `allow-discrete`; non-transitioned properties revert immediately when `[open]` is removed and would un-center the frame to top-left for one frame). */
+  place-items: center;
+
+  /* EXIT STATE */
+  opacity: 0;
+
+  transition-property: opacity, display, overlay;
+  transition-duration: var(--hide-duration);
+  transition-behavior: allow-discrete;
+
+  &::backdrop {
+    background: var(--backdrop);
+  }
+
+  /* OPEN STATE */
+  &[open] {
+    display: grid;
+    opacity: 1;
+    transition-duration: var(--show-duration);
+  }
+
+  /* BEFORE-OPEN STATE */
+  @starting-style {
+    &[open] {
+      opacity: 0;
+    }
+  }
+}
+
+.frame {
+  position: relative;
+  width: var(--width);
+  max-width: 100vw;
+  max-height: 100dvh;
+  aspect-ratio: var(--aspect-ratio);
+  background: black;
+  border-radius: 0.75rem;
+  overflow: clip;
+  isolation: isolate;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: pan-y;
+}
+
+@media (max-width: 480px) {
+  .frame {
+    width: 100vw;
+    height: 100dvh;
+    aspect-ratio: auto;
+    border-radius: 0;
+  }
+}
+
+.video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  background: black;
+}
+
+/* Loading spinner — centered over the video. Delayed fade-in so a fast buffer never visibly flashes the spinner. */
+.spinner {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  z-index: 1;
+  width: 2rem;
+  height: 2rem;
+  color: white;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.spinner[data-state='loading'] {
+  opacity: 1;
+  /* Only paint the spinner if loading actually exceeds 200ms. */
+  transition-delay: 200ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    transition: none;
+  }
+}
+
+.progress {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
+  z-index: 2;
+  display: flex;
+  gap: var(--progress-gap);
+  pointer-events: none;
+}
+
+.progress-segment {
+  flex: 1 1 0;
+  height: 2.5px;
+  border-radius: 999px;
+  background: var(--progress-bg);
+  overflow: clip;
+}
+
+.progress-fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--progress-color);
+  transform: scaleX(var(--p, 0));
+  transform-origin: left;
+  transition: transform 80ms linear;
+}
+
+.progress-segment[data-state='past'] .progress-fill {
+  transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-fill {
+    transition: none;
+  }
+  :host {
+    --show-duration: 0ms;
+    --hide-duration: 0ms;
+  }
+}
+
+/* Top-left header — story thumbnail + label (slot fallback) or consumer-supplied content. */
+.header {
+  position: absolute;
+  top: 1.25rem;
+  left: 0.75rem;
+  right: 4rem; /* leave room for the right-side action stack */
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+  pointer-events: none;
+}
+
+.header > ::slotted(*) {
+  pointer-events: auto;
+}
+
+.header-thumb {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+  pointer-events: auto;
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  pointer-events: auto;
+}
+
+.header-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.2;
+  color: white;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Top-right vertical action stack — close, play/pause, mute. */
+.actions {
+  position: absolute;
+  top: 1.25rem;
+  right: 0.75rem;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  /* 12px gap leaves room for the 6px hit-area extension on each adjacent button (see `.btn::before` below). */
+  gap: 0.75rem;
+  pointer-events: none;
+}
+
+.actions > ::slotted(*),
+.actions .btn {
+  pointer-events: auto;
+}
+
+.btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 25%);
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 150ms ease;
+
+  &:hover {
+    background: rgb(0 0 0 / 45%);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--progress-color);
+    outline-offset: 2px;
+  }
+
+  /* WCAG 2.1 SC 2.5.5 / RGAA 13.4 — 44×44 hit area without changing the visible 32×32 disc. The pseudo carries no paint, only hit testing. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -6px;
+  }
+}
+
+.btn-nav {
+  position: absolute;
+  z-index: 2;
+  width: 2.25rem;
+  height: 2.25rem;
+  font-size: 1.25rem;
+
+  /* Chevrons start at 36×36 — 4px each side reaches 44. */
+  &::before {
+    inset: -4px;
+  }
+}
+
+.btn-previous,
+.btn-next {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Desktop ≥ 768px: chevrons sit outside the frame, on the dim backdrop. */
+@media (min-width: 768px) {
+  .btn-previous {
+    left: calc(50% - var(--width) / 2 - 3rem);
+  }
+  .btn-next {
+    right: calc(50% - var(--width) / 2 - 3rem);
+  }
+}
+
+/* Mobile < 768px: hide chevrons entirely — tap zones drive nav. */
+@media (max-width: 767px) {
+  .btn-previous,
+  .btn-next {
+    display: none;
+  }
+}
+
+/*
+▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+ 🆃🅰🅿  zones (invisible click/tap targets — left = previous, rest = next)
+▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+*/
+
+.tap-zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+.tap-previous {
+  left: 0;
+  width: 30%;
+}
+
+.tap-next {
+  left: 30%;
+  right: 0;
+}
+
+.overlay {
+  position: absolute;
+  inset: auto 0 0 0;
+  z-index: 1;
+  padding: 1rem;
+  pointer-events: none;
+}
+
+.overlay > ::slotted(*) {
+  pointer-events: auto;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/elements/stories-viewer/stories-viewer.d.ts

@@ -0,0 +1,136 @@
+import { type CSSResultGroup, type PropertyValues } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+import type { LuxenStories } from '../stories/stories';
+import type { LuxenStory } from '../story/story';
+/**
+ * @summary Fullscreen modal that plays a sequence of `<l-story>` videos with an
+ * Instagram-style segmented progress bar, previous/next navigation, mute toggle,
+ * and auto-advance.
+ *
+ * Linked to one or more `<l-stories>` rows via matching `id` ↔ `for`. Open
+ * programmatically via `open()` or by clicking a thumbnail in a linked row.
+ *
+ * @slot cta - Default CTA overlay (e.g. shoppable card). Per-story `slot="cta"` inside `<l-story>` overrides this when that story is active.
+ * @slot header - Default header overlay (e.g. avatar + author). Per-story override available the same way.
+ * @slot close - Override the default close button.
+ *
+ * @csspart dialog - The native `<dialog>` element.
+ * @csspart frame - The aspect-ratio video frame.
+ * @csspart progress - The progress bar wrapper.
+ * @csspart progress-segment - A single progress segment.
+ * @csspart progress-fill - The fill element inside an active segment.
+ * @csspart video - The `<video>` element.
+ * @csspart overlay - The overlay wrapper that hosts CTA/header slots.
+ * @csspart header - The top-left header area (story thumbnail + label fallback, or consumer-supplied content via the `header` slot).
+ * @csspart header-label - The default story label inside the header.
+ * @csspart actions - The top-right vertical button stack (close, play/pause, mute).
+ * @csspart button-close - The close button.
+ * @csspart button-pause - The play/pause toggle.
+ * @csspart button-mute - The mute toggle.
+ * @csspart button-previous - The previous story button.
+ * @csspart button-next - The next story button.
+ * @csspart spinner - The loading spinner shown while the current video is buffering.
+ *
+ * @cssproperty --width - Frame width. Default `min(420px, 100vw)`.
+ * @cssproperty --progress-color - Active progress fill color. Default `white`.
+ * @cssproperty --progress-bg - Inactive progress segment background. Default `rgb(255 255 255 / 35%)`.
+ * @cssproperty --progress-gap - Gap between segments. Default `4px`.
+ * @cssproperty --show-duration - Open transition duration. Default `200ms`.
+ * @cssproperty --hide-duration - Close transition duration. Default `200ms`.
+ * @cssproperty --backdrop - Backdrop color. Default `var(--l-backdrop-strong)` — darker than `--l-backdrop` to focus attention on the immersive frame, but still translucent so the page stays perceptible.
+ *
+ * @event show - Fired when the viewer opens.
+ * @event after-show - Fired after the open transition completes.
+ * @event hide - Fired when the viewer is about to close. Cancelable.
+ * @event after-hide - Fired after the close transition completes.
+ * @event story-change - Fired when the active story changes. Detail: `{ index: number, story: LuxenStory }`.
+ * @event story-end - Fired when the active story finishes playback. Detail: `{ index: number }`.
+ * @event chapter-change - Fired when the active chapter (within a story) changes. Detail: `{ chapter: number, story: LuxenStory }`.
+ * @event mute-change - Fired when the mute state changes. Detail: `{ muted: boolean }`.
+ *
+ * @customElement l-stories-viewer
+ */
+export declare class LuxenStoriesViewer extends LuxenElement {
+    static styles: CSSResultGroup;
+    /** Whether the viewer is open. */
+    open: boolean;
+    /** Active story index (0-based). */
+    index: number;
+    /** Whether playback is muted. Defaults to `true` so autoplay always succeeds across browsers. The user can unmute via the dedicated button or the `m` keyboard shortcut. */
+    muted: boolean;
+    /** Loop the active story instead of advancing. */
+    loop: boolean;
+    /** Move to the next story when the current one ends; close after the last story. */
+    autoAdvance: boolean;
+    /** Close when the backdrop is clicked. */
+    lightDismiss: boolean;
+    /** Active chapter index within the current story. Reflected. */
+    chapter: number;
+    /** Internal: the playlist set by the source `<l-stories>`. */
+    stories: LuxenStory[];
+    /** Internal: the source `<l-stories>` element that opened the viewer. */
+    source: LuxenStories | null;
+    private _dialog;
+    private _video;
+    /** Tracks the underlying `<video>` paused state so the play/pause button stays in sync. */
+    private _paused;
+    /** True while the video is buffering / waiting for data. Drives the loading spinner. */
+    private _loading;
+    private _raf;
+    private _holdTimer;
+    private _pointerStart;
+    private _segments;
+    private _chapterStarts;
+    /** Tracks the URL we've already injected a prefetch hint for so we don't duplicate. */
+    private _prefetchedSrc;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): void;
+    private _onCancel;
+    private _onNativeClose;
+    private _onDialogClick;
+    private _onKeyDown;
+    private _onFramePointerDown;
+    private _onFramePointerUp;
+    private _refreshSegmentRefs;
+    private _resetSegmentFills;
+    private _loadCurrent;
+    /**
+     * Inject a `<link rel="preload" as="video">` for the next story once the
+     * current video crosses 50% playback. Idempotent: tracked by `_prefetchedSrc`,
+     * cleaned up on viewer close.
+     */
+    private _maybePrefetchNext;
+    /** Remove every prefetch hint we've injected. Called when the viewer closes. */
+    private _clearPrefetchHints;
+    private _applyChapterSeek;
+    private get _lastChapter();
+    private _syncSlots;
+    private _tick;
+    private _onEnded;
+    /** chapter-then-story navigation. */
+    private _advance;
+    /** Open the viewer at the given index with an explicit playlist. */
+    openAt(stories: LuxenStory[], index?: number, source?: LuxenStories | null): void;
+    close(): void;
+    /** Advance one chapter, or to the next story at the chapter boundary. */
+    next(): void;
+    /** Retreat one chapter, restart the current chapter past 1s in, or cross into the previous story. */
+    previous(): void;
+    /** Jump to the next story, skipping any remaining chapters in the current story. */
+    nextStory(): void;
+    /** Jump to the previous story regardless of current chapter. Lands on chapter 0 of the previous story. */
+    previousStory(): void;
+    play(): void;
+    pause(): void;
+    private _emitAfter;
+    private _restoreFocus;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-stories-viewer': LuxenStoriesViewer;
+    }
+}
+//# sourceMappingURL=stories-viewer.d.ts.map

package/dist/elements/stories-viewer/stories-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories-viewer.d.ts","sourceRoot":"","sources":["../../../src/html/elements/stories-viewer/stories-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAejD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBAAa,kBAAmB,SAAQ,YAAY;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,kCAAkC;IAElC,IAAI,UAAS;IAEb,oCAAoC;IAEpC,KAAK,SAAK;IAEV,4KAA4K;IAE5K,KAAK,UAAQ;IAEb,kDAAkD;IAElD,IAAI,UAAS;IAEb,oFAAoF;IAEpF,WAAW,UAAQ;IAEnB,0CAA0C;IAE1C,YAAY,UAAQ;IAEpB,gEAAgE;IAEhE,OAAO,SAAK;IAEZ,8DAA8D;IAC9D,OAAO,EAAE,UAAU,EAAE,CAAM;IAE3B,yEAAyE;IACzE,MAAM,EAAE,YAAY,GAAG,IAAI,CAAQ;IAElB,OAAO,CAAC,OAAO,CAAqB;IACrC,OAAO,CAAC,MAAM,CAAoB;IAElD,2FAA2F;IAClF,OAAO,CAAC,OAAO,CAAS;IAEjC,wFAAwF;IAC/E,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,aAAa,CAAoD;IACzE,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,cAAc,CAAiB;IACvC,uFAAuF;IACvF,OAAO,CAAC,cAAc,CAAuB;IAIpC,iBAAiB;IAKjB,oBAAoB;IAQpB,YAAY;IAoBZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAoC9C,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,UAAU,CAuBhB;IAIF,OAAO,CAAC,mBAAmB,CAKzB;IAEF,OAAO,CAAC,iBAAiB,CAkCvB;IAIF,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,YAAY;IA2BpB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAiB1B,gFAAgF;IAChF,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,iBAAiB;IAQzB,OAAO,KAAK,YAAY,GAEvB;IAMD,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,KAAK,CAiBX;IAEF,OAAO,CAAC,QAAQ;IAkBhB,qCAAqC;IACrC,OAAO,CAAC,QAAQ;IAmChB,oEAAoE;IACpE,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,KAAK,SAAI,EAAE,MAAM,GAAE,YAAY,GAAG,IAAW;IAO3E,KAAK;IAIL,yEAAyE;IACzE,IAAI;IAIJ,qGAAqG;IACrG,QAAQ;IAIR,oFAAoF;IACpF,SAAS;IAQT,0GAA0G;IAC1G,aAAa;IAMb,IAAI;IAKJ,KAAK;YAOS,UAAU;IAWxB,OAAO,CAAC,aAAa;IAOZ,MAAM;CA8LhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,kBAAkB,CAAC;KACxC;CACF"}