feat(carousel): mp-carousel web component + ng/react/vue wrappers + no-JS SSR

[PieterjanDeClippel]

Migrates the carousel to the cross-framework WC + per-framework wrappers model, and makes it fully usable with JavaScript disabled.

What's in this branch

• @mintplayer/web-components/swiper-core — a framework-agnostic SwipeEngine (gesture math, direction-lock, index/wraparound state machine, keyboard), DOM/animation delegated to a host.
• mp-carousel Lit web component on swiper-core — slide/fade/none, horizontal/vertical, indicators, auto-advance + play/pause, swipe, keyboard, reduced-motion. Slides are projected children (any content, not just images).
• Angular / React / Vue wrappers over the same element.
• Demo pages across the three demo apps.

No-JavaScript / SSR tier

The carousel stays usable with scripting off, mirroring the configured mode:

• slide/none → native scroll-snap strip
• fade → in-shadow radio + indicator-label crossfade

Both gated by :host(:not(:defined)), so the SwipeEngine cleanly takes over on upgrade.

Delivery (duplication-minimized):

• One carousel.styles.scss feeds both tiers — the client adopts it via static styles, the DSD inlines the same .cssText.
• New framework-agnostic @mintplayer/web-components/carousel/ssr: buildMpCarouselDsd (a pure string builder — no lit-ssr at request time, so it runs safely inside @angular/ssr with no Domino clash) + injectMpCarouselDsd, called by all three SSR servers alongside injectMpShellDsd. The only count-dependent CSS (per-index :checked fade rules) is generated in the builder.
• Wrappers supply slide-count (the builder can't count slotted children) and reflect animation/orientation/aria-label as attributes so the builder can size the DSD. The React wrapper is hand-rolled rather than @lit/react createComponent, because createComponent sets known props as client-only properties (absent from SSR HTML); React 19 serializes the hand-rolled attributes into SSR markup.
• createRenderRoot is destructive and adopts styles itself — the DSD is the no-JS tier and is intentionally non-hydratable.

Hydrated-path fixes

• Horizontal track align-items: flex-start — no more stretched images; the viewport height tracks the active slide (height changes after the slide animation completes).
• A ResizeObserver per slide re-measures once images load.
• The active fade slide stays in-flow (position: relative) so the carousel doesn't collapse to its controls in a shrink-to-fit container.
• createRenderRoot adopts styles so the element is styled under the @lit-labs/ssr-client hydrate shim (React/Vue).

Demos

• bs-select (animation, orientation) + bs-checkbox (indicators) — no raw <input>/<select>.
• A server-rendered "Without JavaScript" section (a fade + a slide example).
• Vue wrapper now forwards $attrs (it was silently dropping style/class).

Verification

• nx build of mintplayer-web-components + all three wrapper libs ✅
• nx test mintplayer-web-components — 773 passed ✅
• New Playwright javaScriptEnabled:false specs (carousel-nojs.spec.ts) in all three e2e apps — fade dots crossfade via pure CSS, slide degrades to a scroll-snap strip. Green on Vue + React.
• JS path verified live on Angular/React/Vue (styles, height, navigation, 0 console errors).

🤖 Generated with Claude Code

[gemini-code-assist]

Code Review

This pull request migrates the carousel component to a framework-agnostic Lit web component (<mp-carousel>) powered by a new core swipe engine (SwipeEngine), with corresponding wrappers for Angular, React, and Vue. It also introduces server-side rendering (SSR) support via Declarative Shadow DOM (DSD) to ensure the carousel remains functional with JavaScript disabled. The code review identified several critical issues: the web component needs to handle reconnection lifecycle events properly by re-initializing the swipe engine and re-registering event listeners, the SSR regex parser needs to be hardened against attributes containing > characters to prevent malformed HTML, and the Vue wrapper's slide-counting logic requires an array guard to prevent runtime TypeError crashes.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Remove the readonly modifier from the engine property. Since the carousel needs to be fully re-initialized upon reconnection in connectedCallback to prevent frozen state/broken gestures, the engine property must be mutable.

Suggested change

	private readonly engine: SwipeEngine;
	private engine: SwipeEngine;

[gemini-code-assist]

Upon element disconnection and reconnection, firstUpdated() does not run again. This causes several critical issues: the SwipeEngine remains permanently destroyed (frozen state), the ResizeObserver is never re-observed, and the touch event listeners on this.trackEl are never re-registered. Re-initialize the engine, re-register event listeners, and re-observe the slides when reconnecting (i.e., when this.hasUpdated is true).

  override connectedCallback(): void {
    super.connectedCallback();
    this.reducedMotionQuery = window.matchMedia?.('(prefers-reduced-motion: reduce)') ?? null;
    this.reducedMotionQuery?.addEventListener('change', this.onReducedMotionChange);

    if (this.hasUpdated) {
      this.trackEl?.addEventListener('touchstart', this.onTouchStart, { passive: true });
      this.trackEl?.addEventListener('touchmove', this.onTouchMove, { passive: false });
      this.trackEl?.addEventListener('touchend', this.onTouchEnd, { passive: false });

      this.engine = new SwipeEngine(
        this,
        {
          onIndexChange: (i) => this.handleIndexChange(i),
          onAnimationStart: () => {
            this.isAnimating = true;
            this.dispatchEvent(new CustomEvent('animation-start', { bubbles: true, composed: true }));
          },
          onAnimationEnd: () => {
            this.isAnimating = false;
            this.dispatchEvent(new CustomEvent('animation-end', { bubbles: true, composed: true }));
            this.requestUpdate();
          },
        },
        this.readConfig(),
      );
      this.refreshSlides();
      this.engine.markReady();
      this.restartAutoAdvance();
    }
  }

[gemini-code-assist]

The OPEN_TAG regular expression uses [^>]* to match attributes. If any attribute (such as aria-label or style) contains a > character (e.g., aria-label="Next >"), the regex will prematurely terminate at that character, splitting the tag and rendering malformed HTML on the page. Use a more robust regex that correctly handles single and double quotes within attributes.

Suggested change

	const OPEN_TAG = /<mp-carousel\b([^>]*)>(?!\s*<template\b[^>]*shadowrootmode)/g;
	const OPEN_TAG = /<mp-carousel\b((?:[^>"']|"[^"]*"|'[^']*')*)>(?!\s*<template\b[^>]*shadowrootmode)/g;

[gemini-code-assist]

If vnodes is not an array (for example, if a fragment contains only a single text node or is empty, where v.children can be a string or undefined), calling .reduce() on it will throw a runtime TypeError and crash the component. Guard the reduction by ensuring vnodes is a valid array.

function countSlides(vnodes: VNode[] | undefined): number {
  if (!Array.isArray(vnodes)) return 0;
  return vnodes.reduce((n, v) => {
    if (v.type === Fragment) return n + countSlides(v.children as VNode[]);
    if (v.type === Comment || v.type === Text) return n;
    return n + 1;
  }, 0);
}