@rosettadash/web-components 0.1.1 → 0.1.3

package/src/visual/input/textarea/rd-textarea-input.js

@@ -0,0 +1,34 @@
+import { defineRosettaElement } from '../../../lib/element-utils.js';
+import { RosettaAtomElement } from '../../../lib/rosetta-atom-element.js';
+export const RD_TEXTAREA_INPUT_TAG = 'rd-textarea-input';
+/** @rosettadash/web-components/visual/input/textarea — visual.input.textarea */
+export class RdTextareaInputElement extends RosettaAtomElement {
+    static tagName = RD_TEXTAREA_INPUT_TAG;
+    static get observedAttributes() {
+        return ["label", "placeholder", "rows", "value"];
+    }
+    buildMarkup() {
+        const label = this.readAttr('label');
+        const placeholder = this.readAttr('placeholder');
+        const value = this.readAttr('value');
+        const rows = this.readNumAttr('rows', 4);
+        return `
+      <section class="rd-input-textarea" data-testid="rd-input-textarea">
+        ${label ? `<span class="rd-field__label">${this.esc(label)}</span>` : ''}
+        <textarea class="rd-textarea" data-ref="input" rows="${rows}" placeholder="${this.esc(placeholder)}" aria-label="${this.esc(label || 'Textarea')}">${this.esc(value)}</textarea>
+        <div data-ref="slot"></div>
+      </section>`;
+    }
+    wireEvents() {
+        this.addEventListener('input', (event) => {
+            const target = event.target;
+            if (target instanceof HTMLInputElement && target.matches('[data-ref="input"]')) {
+                this.dispatchDetail('value-change', { value: target.value });
+            }
+        });
+    }
+}
+export function registerRdTextareaInput() {
+    defineRosettaElement(RD_TEXTAREA_INPUT_TAG, RdTextareaInputElement);
+}
+//# sourceMappingURL=rd-textarea-input.js.map

package/src/visual/input/textarea/rd-textarea-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rd-textarea-input.js","sourceRoot":"","sources":["../../../../../../../packages/web-components/src/visual/input/textarea/rd-textarea-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E,MAAM,CAAC,MAAM,qBAAqB,GAAG,mBAAmB,CAAC;AAazD,gFAAgF;AAChF,MAAM,OAAO,sBAAuB,SAAQ,kBAAkB;IAC5D,MAAM,CAAU,OAAO,GAAG,qBAAqB,CAAC;IAEhD,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,OAAO,EAAC,aAAa,EAAC,MAAM,EAAC,OAAO,CAAC,CAAC;IAChD,CAAC;IAES,WAAW;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACrC,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACrC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QACzC,OAAO;;UAED,KAAK,CAAC,CAAC,CAAC,iCAAiC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;+DACjB,IAAI,kBAAkB,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,iBAAiB,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;;iBAE3J,CAAC;IAChB,CAAC;IAEkB,UAAU;QAC3B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACvC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,IAAI,MAAM,YAAY,gBAAgB,IAAI,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;gBAC/E,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;;AAGH,MAAM,UAAU,uBAAuB;IACrC,oBAAoB,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,CAAC;AACtE,CAAC"}

package/src/visual/kpi/index.d.ts

@@ -0,0 +1,2 @@
+export type { KpiCardProps } from './rd-kpi-card.js';
+export { registerRdKpiCard, RD_KPI_CARD_TAG, RdKpiCardElement } from './rd-kpi-card.js';

package/src/visual/kpi/index.js

@@ -0,0 +1,2 @@
+export { registerRdKpiCard, RD_KPI_CARD_TAG, RdKpiCardElement } from './rd-kpi-card.js';
+//# sourceMappingURL=index.js.map

package/src/visual/kpi/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/web-components/src/visual/kpi/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC"}

package/src/visual/kpi/rd-kpi-card.d.ts

@@ -0,0 +1,18 @@
+import { RosettaAtomElement } from '../../lib/rosetta-atom-element.js';
+export declare const RD_KPI_CARD_TAG = "rd-kpi-card";
+export interface KpiCardProps {
+    title?: string;
+    value?: string | number;
+    delta?: string;
+    format?: 'number' | 'currency' | 'percent';
+    className?: string;
+    style?: Record<string, string>;
+    children?: unknown;
+}
+/** @rosettadash/web-components/visual/kpi — visual.kpi */
+export declare class RdKpiCardElement extends RosettaAtomElement {
+    static readonly tagName = "rd-kpi-card";
+    static get observedAttributes(): string[];
+    protected buildMarkup(): string;
+}
+export declare function registerRdKpiCard(): void;

package/src/visual/kpi/rd-kpi-card.js

@@ -0,0 +1,26 @@
+import { defineRosettaElement } from '../../lib/element-utils.js';
+import { RosettaAtomElement } from '../../lib/rosetta-atom-element.js';
+export const RD_KPI_CARD_TAG = 'rd-kpi-card';
+/** @rosettadash/web-components/visual/kpi — visual.kpi */
+export class RdKpiCardElement extends RosettaAtomElement {
+    static tagName = RD_KPI_CARD_TAG;
+    static get observedAttributes() {
+        return ["title", "value", "delta", "format"];
+    }
+    buildMarkup() {
+        const title = this.readAttr('title', 'Metric');
+        const value = this.readAttr('value', '—');
+        const delta = this.readAttr('delta');
+        return `
+      <article class="rd-kpi" data-testid="rd-kpi">
+        <span class="rd-kpi__title">${this.esc(title)}</span>
+        <span class="rd-kpi__value">${this.esc(value)}</span>
+        ${delta ? `<span class="rd-kpi__delta">${this.esc(delta)}</span>` : ''}
+        <div data-ref="slot"></div>
+      </article>`;
+    }
+}
+export function registerRdKpiCard() {
+    defineRosettaElement(RD_KPI_CARD_TAG, RdKpiCardElement);
+}
+//# sourceMappingURL=rd-kpi-card.js.map

package/src/visual/kpi/rd-kpi-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rd-kpi-card.js","sourceRoot":"","sources":["../../../../../../packages/web-components/src/visual/kpi/rd-kpi-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAEvE,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC;AAY7C,0DAA0D;AAC1D,MAAM,OAAO,gBAAiB,SAAQ,kBAAkB;IACtD,MAAM,CAAU,OAAO,GAAG,eAAe,CAAC;IAE1C,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC;IAES,WAAW;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC1C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACrC,OAAO;;sCAE2B,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;sCACf,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;UAC3C,KAAK,CAAC,CAAC,CAAC,+BAA+B,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;iBAE7D,CAAC;IAChB,CAAC;;AAGH,MAAM,UAAU,iBAAiB;IAC/B,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;AAC1D,CAAC"}

package/src/visual/media/index.d.ts

@@ -1,3 +1,5 @@
 export { RdVideoSourceElement, DB_VIDEO_SOURCE_TAG, registerRdVideoSource } from './video-source/index.js';
 export { RdEquirectViewportElement, DB_EQUIRECT_VIEWPORT_TAG, registerRdEquirectViewport, type EquirectPreviewMode, } from './equirect-viewport/index.js';
+export { RdYoutubeEmbedElement, DB_YOUTUBE_EMBED_TAG, registerRdYoutubeEmbed, type YoutubeEmbedProps, } from './youtube-embed/index.js';
+export { registerRdLiveCapture, RD_LIVE_CAPTURE_TAG, RdLiveCaptureElement } from './live-capture/index.js';
 export declare function registerRosettaDashMediaElements(): void;

package/src/visual/media/index.js

@@ -1,9 +1,15 @@
 export { RdVideoSourceElement, DB_VIDEO_SOURCE_TAG, registerRdVideoSource } from './video-source/index.js';
 export { RdEquirectViewportElement, DB_EQUIRECT_VIEWPORT_TAG, registerRdEquirectViewport, } from './equirect-viewport/index.js';
+export { RdYoutubeEmbedElement, DB_YOUTUBE_EMBED_TAG, registerRdYoutubeEmbed, } from './youtube-embed/index.js';
+export { registerRdLiveCapture, RD_LIVE_CAPTURE_TAG, RdLiveCaptureElement } from './live-capture/index.js';
 import { registerRdEquirectViewport } from './equirect-viewport/index.js';
+import { registerRdLiveCapture } from './live-capture/index.js';
 import { registerRdVideoSource } from './video-source/index.js';
+import { registerRdYoutubeEmbed } from './youtube-embed/index.js';
 export function registerRosettaDashMediaElements() {
     registerRdVideoSource();
     registerRdEquirectViewport();
+    registerRdYoutubeEmbed();
+    registerRdLiveCapture();
 }
 //# sourceMappingURL=index.js.map

package/src/visual/media/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/web-components/src/visual/media/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3G,OAAO,EACL,yBAAyB,EACzB,wBAAwB,EACxB,0BAA0B,GAE3B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,UAAU,gCAAgC;IAC9C,qBAAqB,EAAE,CAAC;IACxB,0BAA0B,EAAE,CAAC;AAC/B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/web-components/src/visual/media/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3G,OAAO,EACL,yBAAyB,EACzB,wBAAwB,EACxB,0BAA0B,GAE3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,qBAAqB,EACrB,oBAAoB,EACpB,sBAAsB,GAEvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAE3G,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,MAAM,UAAU,gCAAgC;IAC9C,qBAAqB,EAAE,CAAC;IACxB,0BAA0B,EAAE,CAAC;IAC7B,sBAAsB,EAAE,CAAC;IACzB,qBAAqB,EAAE,CAAC;AAC1B,CAAC"}

package/src/visual/media/live-capture/index.d.ts

@@ -0,0 +1,2 @@
+export type { LiveCaptureProps } from './rd-live-capture.js';
+export { registerRdLiveCapture, RD_LIVE_CAPTURE_TAG, RdLiveCaptureElement } from './rd-live-capture.js';

package/src/visual/media/live-capture/index.js

@@ -0,0 +1,2 @@
+export { registerRdLiveCapture, RD_LIVE_CAPTURE_TAG, RdLiveCaptureElement } from './rd-live-capture.js';
+//# sourceMappingURL=index.js.map

package/src/visual/media/live-capture/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/web-components/src/visual/media/live-capture/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

package/src/visual/media/live-capture/rd-live-capture.d.ts

@@ -0,0 +1,16 @@
+import { RosettaAtomElement } from '../../../lib/rosetta-atom-element.js';
+export declare const RD_LIVE_CAPTURE_TAG = "rd-live-capture";
+export interface LiveCaptureProps {
+    label?: string;
+    onStart?: () => void;
+    className?: string;
+    style?: Record<string, string>;
+    children?: unknown;
+}
+/** @rosettadash/web-components/visual/media/live-capture — visual.media.live-capture */
+export declare class RdLiveCaptureElement extends RosettaAtomElement {
+    static readonly tagName = "rd-live-capture";
+    static get observedAttributes(): string[];
+    protected buildMarkup(): string;
+}
+export declare function registerRdLiveCapture(): void;

package/src/visual/media/live-capture/rd-live-capture.js

@@ -0,0 +1,23 @@
+import { defineRosettaElement } from '../../../lib/element-utils.js';
+import { RosettaAtomElement } from '../../../lib/rosetta-atom-element.js';
+export const RD_LIVE_CAPTURE_TAG = 'rd-live-capture';
+/** @rosettadash/web-components/visual/media/live-capture — visual.media.live-capture */
+export class RdLiveCaptureElement extends RosettaAtomElement {
+    static tagName = RD_LIVE_CAPTURE_TAG;
+    static get observedAttributes() {
+        return ["label"];
+    }
+    buildMarkup() {
+        const label = this.readAttr('label', 'Live capture');
+        return `
+      <section class="rd-media-live-capture" data-testid="rd-media-live-capture">
+        <span class="rd-media__label">${this.esc(label)}</span>
+        <button type="button" class="rd-button" data-ref="start">Start camera</button>
+        <div data-ref="slot"></div>
+      </section>`;
+    }
+}
+export function registerRdLiveCapture() {
+    defineRosettaElement(RD_LIVE_CAPTURE_TAG, RdLiveCaptureElement);
+}
+//# sourceMappingURL=rd-live-capture.js.map

package/src/visual/media/live-capture/rd-live-capture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rd-live-capture.js","sourceRoot":"","sources":["../../../../../../../packages/web-components/src/visual/media/live-capture/rd-live-capture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E,MAAM,CAAC,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAUrD,wFAAwF;AACxF,MAAM,OAAO,oBAAqB,SAAQ,kBAAkB;IAC1D,MAAM,CAAU,OAAO,GAAG,mBAAmB,CAAC;IAE9C,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAES,WAAW;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QACrD,OAAO;;wCAE6B,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;;;iBAGtC,CAAC;IAChB,CAAC;;AAGH,MAAM,UAAU,qBAAqB;IACnC,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;AAClE,CAAC"}

package/src/visual/media/video-source/rd-video-source.d.ts

@@ -1,19 +1,24 @@
 export declare const DB_VIDEO_SOURCE_TAG = "rd-video-source";
 export declare class RdVideoSourceElement extends HTMLElement {
     static readonly tagName = "rd-video-source";
+    static get observedAttributes(): string[];
     private inputEl;
     private resourcesReady;
     private changeListener;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    attributeChangedCallback(): void;
     setProperty(name: string, value: unknown): void;
     whenReady(): Promise<void>;
     get label(): string;
     get accept(): string;
     get sourceWidth(): number;
     get sourceHeight(): number;
+    get presentation(): string;
+    get hint(): string;
     private mountShadow;
     private paint;
     private handleFileSelected;
+    private probeVideoDimensions;
 }
 export declare function registerRdVideoSource(): void;

package/src/visual/media/video-source/rd-video-source.js

@@ -4,6 +4,9 @@ import { applyShadowMount, ensureShadowBase, loadShadowPairForTag } from '../../
 export const DB_VIDEO_SOURCE_TAG = 'rd-video-source';
 export class RdVideoSourceElement extends HTMLElement {
     static tagName = DB_VIDEO_SOURCE_TAG;
+    static get observedAttributes() {
+        return ['label', 'accept', 'source-width', 'source-height', 'presentation', 'hint'];
+    }
     inputEl = null;
     resourcesReady = null;
     changeListener = null;
@@ -21,6 +24,11 @@ export class RdVideoSourceElement extends HTMLElement {
         this.changeListener = null;
         this.inputEl = null;
     }
+    attributeChangedCallback() {
+        if (this.resourcesReady) {
+            void this.resourcesReady.then(() => this.paint());
+        }
+    }
     setProperty(name, value) {
         this[name] = value;
         if (this.resourcesReady) {
@@ -42,6 +50,12 @@ export class RdVideoSourceElement extends HTMLElement {
     get sourceHeight() {
         return readNumber(this.getAttribute('source-height'), DEFAULT_EQUIRECT_SOURCE.height);
     }
+    get presentation() {
+        return readString(this.getAttribute('presentation'), 'default');
+    }
+    get hint() {
+        return readString(this.getAttribute('hint'), '');
+    }
     async mountShadow() {
         const root = this.shadowRoot;
         if (!root || root.querySelector('.video-source')) {
@@ -52,6 +66,7 @@ export class RdVideoSourceElement extends HTMLElement {
         this.inputEl = root.querySelector('[data-ref="input"]');
         this.changeListener = () => this.handleFileSelected();
         this.inputEl?.addEventListener('change', this.changeListener);
+        this.paint();
     }
     paint() {
         const root = this.shadowRoot;
@@ -60,11 +75,46 @@ export class RdVideoSourceElement extends HTMLElement {
         }
         const labelEl = root.querySelector('[data-ref="label"]');
         const metaEl = root.querySelector('[data-ref="meta"]');
+        const rootEl = root.querySelector('[data-ref="root"]');
+        const headerEl = root.querySelector('[data-ref="header"]');
+        const uploadEl = root.querySelector('[data-ref="upload"]');
+        const uploadDefaultEl = root.querySelector('[data-ref="upload-default"]');
+        const uploadAuthoringEl = root.querySelector('[data-ref="upload-authoring"]');
+        const uploadFrameEl = root.querySelector('[data-ref="upload-frame"]');
+        const nameEl = root.querySelector('[data-ref="file-name"]');
+        const hintEl = root.querySelector('[data-ref="hint"]');
+        const isAuthoringSource = this.presentation === 'authoring-source';
+        const isAuthoringFrame = this.presentation === 'authoring-frame';
+        const isAuthoring = isAuthoringSource || isAuthoringFrame;
+        rootEl?.classList.toggle('video-source--authoring', isAuthoringSource);
+        rootEl?.classList.toggle('video-source--authoring-frame', isAuthoringFrame);
+        if (headerEl instanceof HTMLElement) {
+            headerEl.hidden = isAuthoring;
+        }
+        if (nameEl instanceof HTMLElement) {
+            nameEl.hidden = isAuthoringFrame;
+        }
+        if (uploadEl instanceof HTMLElement) {
+            uploadEl.classList.toggle('video-source__upload--authoring', isAuthoringSource);
+            uploadEl.classList.toggle('video-source__upload--authoring-frame', isAuthoringFrame);
+        }
+        if (uploadDefaultEl instanceof HTMLElement) {
+            uploadDefaultEl.hidden = isAuthoring;
+        }
+        if (uploadAuthoringEl instanceof HTMLElement) {
+            uploadAuthoringEl.hidden = !isAuthoringSource;
+        }
+        if (uploadFrameEl instanceof HTMLElement) {
+            uploadFrameEl.hidden = !isAuthoringFrame;
+        }
+        if (hintEl) {
+            hintEl.textContent = this.hint;
+        }
         if (labelEl) {
             labelEl.textContent = this.label;
         }
         if (metaEl) {
-            metaEl.textContent = `${this.sourceWidth}×${this.sourceHeight}`;
+            metaEl.textContent = isAuthoring ? '' : `${this.sourceWidth}×${this.sourceHeight}`;
         }
         const input = root.querySelector('[data-ref="input"]');
         if (input) {
@@ -77,25 +127,58 @@ export class RdVideoSourceElement extends HTMLElement {
             return;
         }
         const nameEl = this.shadowRoot?.querySelector('[data-ref="file-name"]');
-        if (nameEl) {
+        if (nameEl && this.presentation !== 'authoring-frame') {
             nameEl.textContent = file.name;
         }
-        const metadata = {
-            name: file.name,
-            sourceWidth: this.sourceWidth,
-            sourceHeight: this.sourceHeight,
-            size: file.size,
-        };
-        this.dispatchEvent(new CustomEvent('video-file', {
-            detail: { file, metadata },
-            bubbles: true,
-            composed: true,
-        }));
-        this.dispatchEvent(new CustomEvent('metadata', {
-            detail: metadata,
-            bubbles: true,
-            composed: true,
-        }));
+        void this.probeVideoDimensions(file).then(({ width, height }) => {
+            if (width > 0 && height > 0) {
+                this.setAttribute('source-width', String(width));
+                this.setAttribute('source-height', String(height));
+                const metaEl = this.shadowRoot?.querySelector('[data-ref="meta"]');
+                const isAuthoring = this.presentation === 'authoring-source' || this.presentation === 'authoring-frame';
+                if (metaEl && !isAuthoring) {
+                    metaEl.textContent = `${width}×${height}`;
+                }
+                const nameElAfter = this.shadowRoot?.querySelector('[data-ref="file-name"]');
+                if (nameElAfter && this.presentation === 'authoring-source') {
+                    nameElAfter.textContent = `${file.name} (${width}×${height})`;
+                }
+            }
+            const metadata = {
+                name: file.name,
+                sourceWidth: width > 0 ? width : this.sourceWidth,
+                sourceHeight: height > 0 ? height : this.sourceHeight,
+                size: file.size,
+            };
+            this.dispatchEvent(new CustomEvent('video-file', {
+                detail: { file, metadata },
+                bubbles: true,
+                composed: true,
+            }));
+            this.dispatchEvent(new CustomEvent('metadata', {
+                detail: metadata,
+                bubbles: true,
+                composed: true,
+            }));
+        });
+    }
+    probeVideoDimensions(file) {
+        return new Promise((resolve) => {
+            const url = URL.createObjectURL(file);
+            const video = document.createElement('video');
+            video.preload = 'metadata';
+            video.onloadedmetadata = () => {
+                const width = video.videoWidth;
+                const height = video.videoHeight;
+                URL.revokeObjectURL(url);
+                resolve({ width, height });
+            };
+            video.onerror = () => {
+                URL.revokeObjectURL(url);
+                resolve({ width: 0, height: 0 });
+            };
+            video.src = url;
+        });
     }
 }
 export function registerRdVideoSource() {

package/src/visual/media/video-source/rd-video-source.js.map

@@ -1 +1 @@
-{"version":3,"file":"rd-video-source.js","sourceRoot":"","sources":["../../../../../../../packages/web-components/src/visual/media/video-source/rd-video-source.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"rd-video-source.js","sourceRoot":"","sources":["../../../../../../../packages/web-components/src/visual/media/video-source/rd-video-source.ts"],"names":[],"mappings":"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"}

package/src/visual/media/youtube-embed/index.d.ts

@@ -0,0 +1,3 @@
+export type { YoutubeEmbedProps } from './rd-youtube-embed.js';
+export { DB_YOUTUBE_EMBED_TAG, RdYoutubeEmbedElement, registerRdYoutubeEmbed, } from './rd-youtube-embed.js';
+export { buildYouTubeEmbedUrl, parseYouTubeVideoId } from './parse-youtube-id.js';

package/src/visual/media/youtube-embed/index.js

@@ -0,0 +1,3 @@
+export { DB_YOUTUBE_EMBED_TAG, RdYoutubeEmbedElement, registerRdYoutubeEmbed, } from './rd-youtube-embed.js';
+export { buildYouTubeEmbedUrl, parseYouTubeVideoId } from './parse-youtube-id.js';
+//# sourceMappingURL=index.js.map

package/src/visual/media/youtube-embed/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/web-components/src/visual/media/youtube-embed/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/src/visual/media/youtube-embed/parse-youtube-id.d.ts

@@ -0,0 +1,10 @@
+/** Extract an 11-char YouTube video id from a raw id or common URL forms. */
+export declare function parseYouTubeVideoId(input: string | null | undefined): string | null;
+export interface YouTubeEmbedParams {
+    start?: number;
+    autoplay?: boolean;
+    mute?: boolean;
+    controls?: boolean;
+}
+/** Privacy-enhanced embed URL (youtube-nocookie.com). */
+export declare function buildYouTubeEmbedUrl(videoId: string, params?: YouTubeEmbedParams): string;

package/src/visual/media/youtube-embed/parse-youtube-id.js

@@ -0,0 +1,56 @@
+/** Extract an 11-char YouTube video id from a raw id or common URL forms. */
+export function parseYouTubeVideoId(input) {
+    if (!input?.trim()) {
+        return null;
+    }
+    const trimmed = input.trim();
+    if (/^[a-zA-Z0-9_-]{11}$/.test(trimmed)) {
+        return trimmed;
+    }
+    try {
+        const url = new URL(trimmed);
+        const host = url.hostname.replace(/^www\./, '');
+        if (host === 'youtu.be') {
+            return url.pathname.slice(1).split('/')[0] || null;
+        }
+        if (host.includes('youtube.com') || host.includes('youtube-nocookie.com')) {
+            const fromQuery = url.searchParams.get('v');
+            if (fromQuery) {
+                return fromQuery;
+            }
+            const embedMatch = url.pathname.match(/\/embed\/([^/?]+)/);
+            if (embedMatch?.[1]) {
+                return embedMatch[1];
+            }
+            const shortsMatch = url.pathname.match(/\/shorts\/([^/?]+)/);
+            if (shortsMatch?.[1]) {
+                return shortsMatch[1];
+            }
+        }
+    }
+    catch {
+        return null;
+    }
+    return null;
+}
+/** Privacy-enhanced embed URL (youtube-nocookie.com). */
+export function buildYouTubeEmbedUrl(videoId, params = {}) {
+    const search = new URLSearchParams();
+    if (params.start != null && params.start > 0) {
+        search.set('start', String(Math.floor(params.start)));
+    }
+    if (params.autoplay) {
+        search.set('autoplay', '1');
+    }
+    if (params.mute) {
+        search.set('mute', '1');
+    }
+    if (params.controls === false) {
+        search.set('controls', '0');
+    }
+    search.set('rel', '0');
+    search.set('modestbranding', '1');
+    const query = search.toString();
+    return `https://www.youtube-nocookie.com/embed/${encodeURIComponent(videoId)}${query ? `?${query}` : ''}`;
+}
+//# sourceMappingURL=parse-youtube-id.js.map

package/src/visual/media/youtube-embed/parse-youtube-id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-youtube-id.js","sourceRoot":"","sources":["../../../../../../../packages/web-components/src/visual/media/youtube-embed/parse-youtube-id.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,MAAM,UAAU,mBAAmB,CAAC,KAAgC;IAClE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAC7B,IAAI,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QACxC,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,IAAI,CAAC;QACH,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;QAC7B,MAAM,IAAI,GAAG,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAEhD,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YACxB,OAAO,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;QACrD,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,CAAC;YAC1E,MAAM,SAAS,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAC5C,IAAI,SAAS,EAAE,CAAC;gBACd,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,MAAM,UAAU,GAAG,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;YAC3D,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBACpB,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC;YACvB,CAAC;YACD,MAAM,WAAW,GAAG,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;YAC7D,IAAI,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrB,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AASD,yDAAyD;AACzD,MAAM,UAAU,oBAAoB,CAClC,OAAe,EACf,SAA6B,EAAE;IAE/B,MAAM,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;IACrC,IAAI,MAAM,CAAC,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;QAC7C,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACxD,CAAC;IACD,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;QACpB,MAAM,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IAC9B,CAAC;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;QAChB,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,CAAC;IACD,IAAI,MAAM,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;QAC9B,MAAM,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IAC9B,CAAC;IACD,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACvB,MAAM,CAAC,GAAG,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC;IAElC,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;IAChC,OAAO,0CAA0C,kBAAkB,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC5G,CAAC"}

package/src/visual/media/youtube-embed/rd-youtube-embed.d.ts

@@ -0,0 +1,35 @@
+export declare const DB_YOUTUBE_EMBED_TAG = "rd-youtube-embed";
+/** Public props contract for visual/media/youtube-embed (all runtimes share this shape). */
+export interface YoutubeEmbedProps {
+    videoId?: string;
+    url?: string;
+    start?: number;
+    autoplay?: boolean;
+    mute?: boolean;
+    controls?: boolean;
+    title?: string;
+    className?: string;
+}
+export declare class RdYoutubeEmbedElement extends HTMLElement {
+    static readonly tagName = "rd-youtube-embed";
+    private resourcesReady;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    setProperty(name: string, value: unknown): void;
+    whenReady(): Promise<void>;
+    get videoId(): string;
+    set videoId(value: string);
+    get url(): string;
+    set url(value: string);
+    get start(): number;
+    get autoplay(): boolean;
+    get mute(): boolean;
+    get controls(): boolean;
+    get embedTitle(): string;
+    set embedTitle(value: string);
+    private mountShadow;
+    private resolveVideoId;
+    private paint;
+}
+export declare function registerRdYoutubeEmbed(): void;