@flamingo-stack/openframe-frontend-core 0.0.397-snapshot.20260710042522 → 0.0.397

package/dist/components/features/video-center-badge.d.ts

@@ -1,36 +0,0 @@
-/**
- * THE center media glyphs — the single visual identity for every play/unmute
- * affordance over video, across the whole project: a SOLID WHITE GLYPH
- * (`text-ods-text-primary`), NO background disc, with a soft drop-shadow for
- * legibility over arbitrary frames.
- *
- * Consumers:
- *   - <VideoBiteCard> resting/paused posters (md)
- *   - <YouTubeFacade> poster (lg)
- *   - <MediaCarousel> video thumbnails (sm)
- *   - <FilePlayer>'s unmute chip (VideoUnmuteGlyph, md)
- *   - MuxPlayer's native center pre-play button is stripped to the same bare
- *     white glyph via CSS (`mux-player::part(center play button)` in
- *     styles/app-globals.css) so full players match too.
- *
- * Glyph paths are media-chrome's own (filled triangle / filled volume-off) so
- * the replica and the real player chrome stay pixel-consistent.
- */
-import React from 'react';
-export type VideoCenterBadgeSize = 'sm' | 'md' | 'lg';
-export interface VideoPlayBadgeProps {
-    size?: VideoCenterBadgeSize;
-    className?: string;
-}
-/** Bare white play glyph (media-chrome's filled triangle). Decorative
- *  (`pointer-events-none`) — the host surface owns activation. */
-export declare function VideoPlayBadge({ size, className }: VideoPlayBadgeProps): React.ReactElement;
-export interface VideoUnmuteGlyphProps {
-    size?: VideoCenterBadgeSize;
-    className?: string;
-}
-/** Bare white muted-volume glyph (filled, material volume_off — the same
- *  family as media-chrome's mute icon). Rendered by FilePlayer's unmute
- *  button; exported here so play + unmute share one identity. */
-export declare function VideoUnmuteGlyph({ size, className }: VideoUnmuteGlyphProps): React.ReactElement;
-//# sourceMappingURL=video-center-badge.d.ts.map

package/dist/components/features/video-center-badge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"video-center-badge.d.ts","sourceRoot":"","sources":["../../../src/components/features/video-center-badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAWrD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;kEACkE;AAClE,wBAAgB,cAAc,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAWlG;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;iEAEiE;AACjE,wBAAgB,gBAAgB,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAYtG"}

package/dist/components/ui/crossfade-panels.d.ts

@@ -1,52 +0,0 @@
-/**
- * <CrossfadePanels> — THE keep-mounted tab-panel stack: every panel stays in
- * the DOM, stacked in the SAME grid cell, and switching is an opacity
- * crossfade. Use it under any tab control (TabNavigation, TabSelector, …)
- * whenever panels are content surfaces where height stability and a soft
- * switch matter (strips, media rails, dashboards-in-view).
- *
- * Invariants encoded HERE exactly once (so no consumer re-derives them):
- * - HEIGHT LOCK: grid items in one cell size the row to max(panel heights) —
- *   switching never shifts the page (no CLS), and surrounding layout treats
- *   the stack as one constant-height block.
- * - FADE-THEN-HIDE: `visibility` transitions alongside `opacity`; per the CSS
- *   transitions spec's special visibility interpolation the outgoing panel
- *   stays paintable until the fade completes, THEN becomes `hidden` — no
- *   pop-out, and the settled hidden panel is fully removed from paint.
- * - DEAD WHILE HIDDEN: `inert` + `aria-hidden` + `pointer-events-none` on
- *   inactive panels — no tab-stops, no screen-reader content, no hover/click
- *   leaks from the invisible layer (WCAG aria-hidden-focus).
- * - MOTION RESPECT: `prefers-reduced-motion` collapses the fade to an
- *   instant swap.
- * - The ACTIVE panel takes `z-[1]` so the incoming layer composites on top
- *   during the crossfade regardless of DOM order.
- *
- * This deliberately complements (not replaces) <TabContent>, which MOUNTS one
- * panel at a time — right for heavy admin surfaces that should unmount when
- * hidden. CrossfadePanels is for surfaces whose panels are cheap enough to
- * keep alive and whose switch must be seamless.
- *
- * NOTE for marquee/animated panel content: hidden panels stay mounted and
- * their animations keep running unless the content self-pauses. CardsStrip
- * panels are fine (its rAF gates on near-viewport + visibility), but a
- * consumer embedding heavier always-on content should pause it via its own
- * visibility signal.
- */
-import React from 'react';
-export interface CrossfadePanel {
-    id: string;
-    content: React.ReactNode;
-}
-export interface CrossfadePanelsProps {
-    /** Which panel is shown. Unknown id → all panels hidden (renders the
-     *  stack's reserved height, nothing visible). */
-    activeId: string | undefined;
-    panels: ReadonlyArray<CrossfadePanel>;
-    /** Crossfade duration in ms. Default 300. */
-    durationMs?: number;
-    className?: string;
-    /** Extra classes for every panel wrapper (e.g. `min-w-0` is built in). */
-    panelClassName?: string;
-}
-export declare function CrossfadePanels({ activeId, panels, durationMs, className, panelClassName, }: CrossfadePanelsProps): React.JSX.Element | null;
-//# sourceMappingURL=crossfade-panels.d.ts.map

package/dist/components/ui/crossfade-panels.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"crossfade-panels.d.ts","sourceRoot":"","sources":["../../../src/components/ui/crossfade-panels.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC;qDACiD;IACjD,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IACrC,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,UAAgB,EAChB,SAAS,EACT,cAAc,GACf,EAAE,oBAAoB,4BAwBtB"}

package/src/components/features/video-center-badge.tsx

@@ -1,76 +0,0 @@
-'use client'
-
-/**
- * THE center media glyphs — the single visual identity for every play/unmute
- * affordance over video, across the whole project: a SOLID WHITE GLYPH
- * (`text-ods-text-primary`), NO background disc, with a soft drop-shadow for
- * legibility over arbitrary frames.
- *
- * Consumers:
- *   - <VideoBiteCard> resting/paused posters (md)
- *   - <YouTubeFacade> poster (lg)
- *   - <MediaCarousel> video thumbnails (sm)
- *   - <FilePlayer>'s unmute chip (VideoUnmuteGlyph, md)
- *   - MuxPlayer's native center pre-play button is stripped to the same bare
- *     white glyph via CSS (`mux-player::part(center play button)` in
- *     styles/app-globals.css) so full players match too.
- *
- * Glyph paths are media-chrome's own (filled triangle / filled volume-off) so
- * the replica and the real player chrome stay pixel-consistent.
- */
-
-import React from 'react'
-import { cn } from '../../utils/cn'
-
-export type VideoCenterBadgeSize = 'sm' | 'md' | 'lg'
-
-const SIZES: Record<VideoCenterBadgeSize, number> = {
-  sm: 20, // gallery thumbnails
-  md: 56, // strip cards + unmute chip
-  lg: 64, // hero facades
-}
-
-/** Soft legibility shadow — NOT a background (per design: bare glyphs). */
-const GLYPH_SHADOW = 'drop-shadow(0 1px 4px rgba(0,0,0,0.5))'
-
-export interface VideoPlayBadgeProps {
-  size?: VideoCenterBadgeSize
-  className?: string
-}
-
-/** Bare white play glyph (media-chrome's filled triangle). Decorative
- *  (`pointer-events-none`) — the host surface owns activation. */
-export function VideoPlayBadge({ size = 'md', className }: VideoPlayBadgeProps): React.ReactElement {
-  return (
-    <div
-      className={cn('pointer-events-none flex items-center justify-center text-ods-text-primary transition-colors', className)}
-      style={{ filter: GLYPH_SHADOW }}
-    >
-      <svg aria-hidden viewBox="0 0 24 24" fill="currentColor" style={{ width: SIZES[size], height: SIZES[size] }}>
-        <path d="m6 21 15-9L6 3v18Z" />
-      </svg>
-    </div>
-  )
-}
-
-export interface VideoUnmuteGlyphProps {
-  size?: VideoCenterBadgeSize
-  className?: string
-}
-
-/** Bare white muted-volume glyph (filled, material volume_off — the same
- *  family as media-chrome's mute icon). Rendered by FilePlayer's unmute
- *  button; exported here so play + unmute share one identity. */
-export function VideoUnmuteGlyph({ size = 'md', className }: VideoUnmuteGlyphProps): React.ReactElement {
-  return (
-    <svg
-      aria-hidden
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      className={className}
-      style={{ width: SIZES[size], height: SIZES[size], filter: GLYPH_SHADOW }}
-    >
-      <path d="M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63Zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71ZM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3ZM12 4 9.91 6.09 12 8.18V4Z" />
-    </svg>
-  )
-}

package/src/components/ui/crossfade-panels.tsx

@@ -1,88 +0,0 @@
-'use client'
-
-/**
- * <CrossfadePanels> — THE keep-mounted tab-panel stack: every panel stays in
- * the DOM, stacked in the SAME grid cell, and switching is an opacity
- * crossfade. Use it under any tab control (TabNavigation, TabSelector, …)
- * whenever panels are content surfaces where height stability and a soft
- * switch matter (strips, media rails, dashboards-in-view).
- *
- * Invariants encoded HERE exactly once (so no consumer re-derives them):
- * - HEIGHT LOCK: grid items in one cell size the row to max(panel heights) —
- *   switching never shifts the page (no CLS), and surrounding layout treats
- *   the stack as one constant-height block.
- * - FADE-THEN-HIDE: `visibility` transitions alongside `opacity`; per the CSS
- *   transitions spec's special visibility interpolation the outgoing panel
- *   stays paintable until the fade completes, THEN becomes `hidden` — no
- *   pop-out, and the settled hidden panel is fully removed from paint.
- * - DEAD WHILE HIDDEN: `inert` + `aria-hidden` + `pointer-events-none` on
- *   inactive panels — no tab-stops, no screen-reader content, no hover/click
- *   leaks from the invisible layer (WCAG aria-hidden-focus).
- * - MOTION RESPECT: `prefers-reduced-motion` collapses the fade to an
- *   instant swap.
- * - The ACTIVE panel takes `z-[1]` so the incoming layer composites on top
- *   during the crossfade regardless of DOM order.
- *
- * This deliberately complements (not replaces) <TabContent>, which MOUNTS one
- * panel at a time — right for heavy admin surfaces that should unmount when
- * hidden. CrossfadePanels is for surfaces whose panels are cheap enough to
- * keep alive and whose switch must be seamless.
- *
- * NOTE for marquee/animated panel content: hidden panels stay mounted and
- * their animations keep running unless the content self-pauses. CardsStrip
- * panels are fine (its rAF gates on near-viewport + visibility), but a
- * consumer embedding heavier always-on content should pause it via its own
- * visibility signal.
- */
-
-import React from 'react'
-import { cn } from '../../utils/cn'
-
-export interface CrossfadePanel {
-  id: string
-  content: React.ReactNode
-}
-
-export interface CrossfadePanelsProps {
-  /** Which panel is shown. Unknown id → all panels hidden (renders the
-   *  stack's reserved height, nothing visible). */
-  activeId: string | undefined
-  panels: ReadonlyArray<CrossfadePanel>
-  /** Crossfade duration in ms. Default 300. */
-  durationMs?: number
-  className?: string
-  /** Extra classes for every panel wrapper (e.g. `min-w-0` is built in). */
-  panelClassName?: string
-}
-
-export function CrossfadePanels({
-  activeId,
-  panels,
-  durationMs = 300,
-  className,
-  panelClassName,
-}: CrossfadePanelsProps) {
-  if (panels.length === 0) return null
-  return (
-    <div className={cn('grid w-full', className)}>
-      {panels.map(p => {
-        const active = p.id === activeId
-        return (
-          <div
-            key={p.id}
-            className={cn(
-              'col-start-1 row-start-1 min-w-0 transition-[opacity,visibility] ease-out motion-reduce:transition-none',
-              active ? 'visible opacity-100 z-[1]' : 'invisible opacity-0 pointer-events-none',
-              panelClassName,
-            )}
-            style={{ transitionDuration: `${durationMs}ms` }}
-            aria-hidden={!active || undefined}
-            inert={!active || undefined}
-          >
-            {p.content}
-          </div>
-        )
-      })}
-    </div>
-  )
-}