@telefonica/mistica 16.64.0-beta.1 → 16.65.0

package/src/video.tsx

@@ -72,6 +72,15 @@ type VideoSourceWithType = {
     type?: string; // video/webm, video/mp4...
 };
 
+export type VideoTrack = {
+    src: string;
+    kind: 'subtitles' | 'captions';
+    /** https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag */
+    srcLang: string;
+    label?: string;
+    default?: boolean;
+};
+
 export type VideoSource =
     | string
     | ReadonlyArray<string>
@@ -103,6 +112,8 @@ export type VideoProps = {
     onPause?: () => void;
     onLoad?: () => void;
     poster?: string;
+    /** text track elements for subtitles and captions */
+    tracks?: ReadonlyArray<VideoTrack>;
     children?: void;
     /** defaults to none */
     preload?: 'none' | 'metadata' | 'auto';
@@ -116,6 +127,12 @@ export interface VideoElement extends HTMLDivElement {
     /** Stops the video and shows the poster image (if available) */
     stop: () => void;
     setCurrentTime: (time: number) => void;
+    /**
+     * Sets the display mode of a track by its index.
+     * - 'showing': track is visible
+     * - 'disabled': track is inactive
+     */
+    setTrackMode: (index: number, mode: 'showing' | 'disabled') => void;
 }
 
 const Video = React.forwardRef<VideoElement, VideoProps>(
@@ -123,6 +140,7 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
         {
             src,
             poster,
+            tracks,
             autoPlay = 'when-loaded',
             muted = true,
             loop = true,
@@ -210,6 +228,7 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                 disableRemotePlayback
                 muted={muted}
                 loop={loop}
+                crossOrigin={tracks?.length ? 'anonymous' : undefined}
                 className={classNames(styles.video, mediaStyles.defaultBorderRadius)}
                 preload={preload}
                 onError={handleError}
@@ -242,6 +261,16 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                 {sources.map(({src, type}, index) => (
                     <source key={index} src={src} type={type} />
                 ))}
+                {tracks?.map(({src, kind, srcLang, label, default: isDefault}, index) => (
+                    <track
+                        key={index}
+                        src={src}
+                        kind={kind}
+                        srcLang={srcLang}
+                        label={label}
+                        default={isDefault}
+                    />
+                ))}
             </video>
         );
 
@@ -326,6 +355,13 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                                     dispatch('stop');
                                 }
                             };
+                            containerElement.setTrackMode = (index: number, mode: 'showing' | 'disabled') => {
+                                const trackElements = videoRef.current?.querySelectorAll('track');
+                                const trackElement = trackElements?.[index] as HTMLTrackElement | undefined;
+                                if (trackElement?.track) {
+                                    trackElement.track.mode = mode;
+                                }
+                            };
                         }
 
                         if (typeof ref === 'function') {

package/doc/agents/figma-verifier.md

@@ -1,49 +0,0 @@
-# Figma verifier
-
-Audit a just-completed Figma implementation. Compare the running app against the Figma design visually and
-structurally, then report drift. Re-read [../figma-mcp.md](../figma-mcp.md) for the prime directive and skill
-rules before starting.
-
-## Tasks
-
-1. **Fetch the Figma screenshot** via `mcp__plugin_figma_figma__get_screenshot` for the entry node.
-   `get_metadata` gives the frame's viewport dimensions.
-
-2. **Render the implementation**:
-
-   - Start the dev server in the background, piping output to a log file.
-   - Wait for it to start.
-   - Screenshot via Playwright CLI:
-
-     ```bash
-     npx -y playwright@1.60.0 screenshot \
-       --viewport-size=<width>,<height> \
-       --full-page \
-       <url> \
-       /tmp/verifier-actual.png
-     ```
-
-     Use the Figma frame's dimensions. For responsive designs, repeat per breakpoint.
-
-3. **Compare visually**: open `/tmp/verifier-actual.png` and compare against the Figma screenshot. Catalog
-   drift in: layout, spacing, typography (weight/size/line- height — compare letter forms), colors, assets
-   (missing / wrong), and component primitive choice.
-
-4. **Structural / rule check**:
-
-   - Re-drill every composite component with `get_design_context({ disableCodeConnect: true })` and compare
-     props against the drilled-in DOM.
-   - Read each implementation file. Flag: hex literals or raw `var(--...)`, manual `font-size` /
-     `font-family`, composite props that don't match the non-CodeConnect DOM, spacing values absent from the
-     DOM, mismatched semantic structure (`Stack` vs `Inline`, flat vs nested), native HTML where a Mistica
-     primitive exists, wrong/missing skin/font/body-background for the file's brand.
-
-5. **Report**. One summary line (`clean` or `N issues found, M blocking`), then a bullet list ordered by
-   severity. Each issue:
-
-   - `[VISUAL]` or `[RULE]` prefix
-   - Figma node id (or screenshot region) + what the design specifies
-   - File:line (for `[RULE]`) or screenshot region (for `[VISUAL]`)
-   - What's wrong + proposed fix
-
-   Only flag drift and rule violations — no architectural rewrites or "improvements".