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

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

@@ -1,40 +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. Accent color appears ONLY while the
- * icon's own control is hovered (hosts pass `group-hover:text-ods-accent`;
- * mux-player controls get the same via `::part(button):hover` in
- * styles/app-globals.css).
- *
- * Glyphs come from THE icon system — never inline SVG paths here:
- * PlayFilledIcon / VolumeOffFilledIcon (components/icons — the FILLED
- * media-chrome-matching glyphs, so custom affordances are pixel-identical to
- * MuxPlayer's native center button on real players).
- *
- * 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
- *     glyph language via CSS (see styles/app-globals.css).
- */
-import React from 'react';
-export type VideoCenterBadgeSize = 'sm' | 'md' | 'lg';
-export interface VideoPlayBadgeProps {
-    size?: VideoCenterBadgeSize;
-    className?: string;
-}
-/** Bare play glyph (the icon system's PlayIcon). 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 muted-volume glyph (the icon system's VolumeOffFilledIcon). 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;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,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,CASlG;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;gBAEgB;AAChB,wBAAgB,gBAAgB,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,GAAG,KAAK,CAAC,YAAY,CAStG"}

package/dist/components/icons/play-filled-icon.d.ts

@@ -1,15 +0,0 @@
-import type { SVGProps } from "react";
-export interface PlayFilledIconProps extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
-    className?: string;
-    size?: number;
-    color?: string;
-}
-/**
- * Solid play triangle — the SAME glyph media-chrome/MuxPlayer renders in its
- * native center play button, so custom video affordances (strip cards,
- * facades, carousels) stay pixel-consistent with real player chrome.
- * Hand-maintained (not in the Figma-generated set, which has only the
- * outline `PlayIcon`).
- */
-export declare function PlayFilledIcon({ className, size, color, ...props }: PlayFilledIconProps): import("react").JSX.Element;
-//# sourceMappingURL=play-filled-icon.d.ts.map

package/dist/components/icons/play-filled-icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"play-filled-icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/play-filled-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAc,EACd,IAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,mBAAmB,+BAcrB"}

package/dist/components/icons/volume-off-filled-icon.d.ts

@@ -1,14 +0,0 @@
-import type { SVGProps } from "react";
-export interface VolumeOffFilledIconProps extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
-    className?: string;
-    size?: number;
-    color?: string;
-}
-/**
- * Solid muted-volume glyph (speaker + slash) — the filled companion to
- * `PlayFilledIcon`, matching media-chrome's icon family so video unmute
- * affordances read identically to real player chrome. Hand-maintained (the
- * Figma-generated set has only outline volume icons).
- */
-export declare function VolumeOffFilledIcon({ className, size, color, ...props }: VolumeOffFilledIconProps): import("react").JSX.Element;
-//# sourceMappingURL=volume-off-filled-icon.d.ts.map

package/dist/components/icons/volume-off-filled-icon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"volume-off-filled-icon.d.ts","sourceRoot":"","sources":["../../../src/components/icons/volume-off-filled-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAc,EACd,IAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAiB1B"}

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,77 +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. Accent color appears ONLY while the
- * icon's own control is hovered (hosts pass `group-hover:text-ods-accent`;
- * mux-player controls get the same via `::part(button):hover` in
- * styles/app-globals.css).
- *
- * Glyphs come from THE icon system — never inline SVG paths here:
- * PlayFilledIcon / VolumeOffFilledIcon (components/icons — the FILLED
- * media-chrome-matching glyphs, so custom affordances are pixel-identical to
- * MuxPlayer's native center button on real players).
- *
- * 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
- *     glyph language via CSS (see styles/app-globals.css).
- */
-
-import React from 'react'
-import { PlayFilledIcon } from '../icons/play-filled-icon'
-import { VolumeOffFilledIcon } from '../icons/volume-off-filled-icon'
-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 play glyph (the icon system's PlayIcon). 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 }}
-    >
-      <PlayFilledIcon size={SIZES[size]} color="currentColor" />
-    </div>
-  )
-}
-
-export interface VideoUnmuteGlyphProps {
-  size?: VideoCenterBadgeSize
-  className?: string
-}
-
-/** Bare muted-volume glyph (the icon system's VolumeOffFilledIcon). Rendered
- *  by FilePlayer's unmute button; exported here so play + unmute share one
- *  identity. */
-export function VideoUnmuteGlyph({ size = 'md', className }: VideoUnmuteGlyphProps): React.ReactElement {
-  return (
-    <VolumeOffFilledIcon
-      size={SIZES[size]}
-      color="currentColor"
-      className={className}
-      style={{ filter: GLYPH_SHADOW }}
-    />
-  )
-}

package/src/components/icons/play-filled-icon.tsx

@@ -1,36 +0,0 @@
-import type { SVGProps } from "react";
-
-export interface PlayFilledIconProps
-  extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
-  className?: string;
-  size?: number;
-  color?: string;
-}
-
-/**
- * Solid play triangle — the SAME glyph media-chrome/MuxPlayer renders in its
- * native center play button, so custom video affordances (strip cards,
- * facades, carousels) stay pixel-consistent with real player chrome.
- * Hand-maintained (not in the Figma-generated set, which has only the
- * outline `PlayIcon`).
- */
-export function PlayFilledIcon({
-  className = "",
-  size = 24,
-  color = "currentColor",
-  ...props
-}: PlayFilledIconProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      fill="none"
-      viewBox="0 0 24 24"
-      className={className}
-      {...props}
-    >
-      <path fill={color} d="m6 21 15-9L6 3v18Z" />
-    </svg>
-  );
-}

package/src/components/icons/volume-off-filled-icon.tsx

@@ -1,38 +0,0 @@
-import type { SVGProps } from "react";
-
-export interface VolumeOffFilledIconProps
-  extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
-  className?: string;
-  size?: number;
-  color?: string;
-}
-
-/**
- * Solid muted-volume glyph (speaker + slash) — the filled companion to
- * `PlayFilledIcon`, matching media-chrome's icon family so video unmute
- * affordances read identically to real player chrome. Hand-maintained (the
- * Figma-generated set has only outline volume icons).
- */
-export function VolumeOffFilledIcon({
-  className = "",
-  size = 24,
-  color = "currentColor",
-  ...props
-}: VolumeOffFilledIconProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      fill="none"
-      viewBox="0 0 24 24"
-      className={className}
-      {...props}
-    >
-      <path
-        fill={color}
-        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>
-  )
-}