@rosettadash/web-components 0.1.0

package/src/wasm/wasm-media/rd-wasm-media.js

@@ -0,0 +1,269 @@
+import { buildEquirectExtractFilter, DEFAULT_EQUIRECT_FLAT_CROP, } from '@rosettadash/core';
+import { defineRosettaElement, readNumber, readString } from '../../lib/element-utils.js';
+import { applyShadowMount, ensureShadowBase, getShadowBase, loadShadowPairForTag } from '../../lib/shadow-base.js';
+import { loadTextResource } from '../../lib/shadow-resources.js';
+export const DB_WASM_MEDIA_TAG = 'rd-wasm-media';
+export class RdWasmMediaElement extends HTMLElement {
+    static tagName = DB_WASM_MEDIA_TAG;
+    ffmpeg = null;
+    inputFile = null;
+    cropRegion = null;
+    busy = false;
+    progress = 0;
+    error = null;
+    resourcesReady = null;
+    extractListener = null;
+    connectedCallback() {
+        if (!this.shadowRoot) {
+            this.attachShadow({ mode: 'open' });
+        }
+        this.resourcesReady = this.mountShadow();
+        void this.resourcesReady.then(() => this.paint());
+    }
+    disconnectedCallback() {
+        const root = this.shadowRoot;
+        const button = root?.querySelector('[data-role="extract"]');
+        if (button && this.extractListener) {
+            button.removeEventListener('click', this.extractListener);
+        }
+        this.extractListener = null;
+    }
+    setProperty(name, value) {
+        if (name === 'inputFile') {
+            if (value instanceof Blob) {
+                this.inputFile = value;
+            }
+            else if (value && typeof value === 'object' && 'file' in value) {
+                const file = value.file;
+                this.inputFile = file instanceof Blob ? file : null;
+            }
+            else {
+                this.inputFile = null;
+            }
+        }
+        else if (name === 'cropRegion' && value && typeof value === 'object') {
+            this.cropRegion = value;
+        }
+        else {
+            const attrMap = {
+                outputFormat: 'output-format',
+                extractionMode: 'extraction-mode',
+                cropX: 'crop-x',
+                cropY: 'crop-y',
+                cropWidth: 'crop-width',
+                cropHeight: 'crop-height',
+                outputWidth: 'output-width',
+                outputHeight: 'output-height',
+                horizontalFov: 'horizontal-fov',
+                showProgress: 'show-progress',
+            };
+            const attr = attrMap[name] ?? name;
+            if (value === null || value === undefined) {
+                this.removeAttribute(attr);
+            }
+            else {
+                this.setAttribute(attr, String(value));
+            }
+        }
+        if (this.resourcesReady) {
+            void this.resourcesReady.then(() => this.paint());
+        }
+    }
+    whenReady() {
+        return this.resourcesReady ?? Promise.resolve();
+    }
+    get label() {
+        return readString(this.getAttribute('label'), 'Media transcode');
+    }
+    get operation() {
+        return readString(this.getAttribute('operation'), 'transcode');
+    }
+    get extractionMode() {
+        const mode = readString(this.getAttribute('extraction-mode'), 'flat-crop');
+        return mode === 'rectilinear' ? 'rectilinear' : 'flat-crop';
+    }
+    get outputFormat() {
+        return readString(this.getAttribute('output-format'), 'mp4');
+    }
+    get showProgress() {
+        return this.getAttribute('show-progress') !== 'false';
+    }
+    get filterPreview() {
+        if (this.operation !== 'equirect-extract') {
+            return '';
+        }
+        const crop = this.resolveCrop();
+        return buildEquirectExtractFilter(this.extractionMode, {
+            ...crop,
+            yaw: readNumber(this.getAttribute('yaw'), 0),
+            pitch: readNumber(this.getAttribute('pitch'), 0),
+            horizontalFov: readNumber(this.getAttribute('horizontal-fov'), 90),
+        });
+    }
+    resolveCrop() {
+        return {
+            cropX: readNumber(this.cropRegion?.['cropX'] ?? this.getAttribute('crop-x'), DEFAULT_EQUIRECT_FLAT_CROP.cropX),
+            cropY: readNumber(this.cropRegion?.['cropY'] ?? this.getAttribute('crop-y'), DEFAULT_EQUIRECT_FLAT_CROP.cropY),
+            cropWidth: readNumber(this.cropRegion?.['cropWidth'] ?? this.getAttribute('crop-width'), DEFAULT_EQUIRECT_FLAT_CROP.cropWidth),
+            cropHeight: readNumber(this.cropRegion?.['cropHeight'] ?? this.getAttribute('crop-height'), DEFAULT_EQUIRECT_FLAT_CROP.cropHeight),
+            outputWidth: readNumber(this.cropRegion?.['outputWidth'] ?? this.getAttribute('output-width'), DEFAULT_EQUIRECT_FLAT_CROP.outputWidth),
+            outputHeight: readNumber(this.cropRegion?.['outputHeight'] ?? this.getAttribute('output-height'), DEFAULT_EQUIRECT_FLAT_CROP.outputHeight),
+        };
+    }
+    async mountShadow() {
+        const root = this.shadowRoot;
+        if (!root || root.querySelector('[data-ref="root"]')) {
+            return;
+        }
+        const pair = await loadShadowPairForTag(DB_WASM_MEDIA_TAG, './rd-wasm-media.html', './rd-wasm-media.css');
+        const panelCss = await loadTextResource('../../lib/panel.css', getShadowBase(DB_WASM_MEDIA_TAG));
+        applyShadowMount(root, { html: pair.html, css: `${panelCss}\n${pair.css}` });
+    }
+    paint() {
+        const root = this.shadowRoot;
+        if (!root) {
+            return;
+        }
+        const labelEl = root.querySelector('[data-ref="label"]');
+        const metaEl = root.querySelector('[data-ref="meta"]');
+        if (labelEl) {
+            labelEl.textContent = this.label;
+        }
+        if (metaEl) {
+            metaEl.textContent = `${this.operation} → ${this.outputFormat}`;
+        }
+        const filterEl = root.querySelector('[data-ref="filter"]');
+        if (this.filterPreview) {
+            filterEl.hidden = false;
+            filterEl.textContent = this.filterPreview;
+        }
+        else {
+            filterEl.hidden = true;
+        }
+        const progressEl = root.querySelector('[data-ref="progress"]');
+        const progressBar = root.querySelector('[data-ref="progress-bar"]');
+        if (this.showProgress && this.operation === 'equirect-extract') {
+            progressEl.hidden = false;
+            progressEl.setAttribute('aria-valuenow', String(this.progress));
+            progressBar.style.width = `${this.progress}%`;
+        }
+        else {
+            progressEl.hidden = true;
+        }
+        const actions = root.querySelector('[data-ref="actions"]');
+        if (actions) {
+            if (this.operation === 'equirect-extract') {
+                actions.innerHTML = `<button type="button" data-role="extract" ${this.busy || !this.inputFile ? 'disabled' : ''}>${this.busy ? 'Extracting…' : 'Extract subsection'}</button>`;
+            }
+            else {
+                actions.innerHTML =
+                    '<p class="wasm-media__hint">Set operation to equirect-extract and attach a video file.</p>';
+            }
+        }
+        const errorEl = root.querySelector('[data-ref="error"]');
+        if (this.error) {
+            errorEl.hidden = false;
+            errorEl.textContent = this.error;
+        }
+        else {
+            errorEl.hidden = true;
+        }
+        const button = root.querySelector('[data-role="extract"]');
+        if (button) {
+            if (this.extractListener) {
+                button.removeEventListener('click', this.extractListener);
+            }
+            this.extractListener = () => {
+                void this.runEquirectExtract();
+            };
+            button.addEventListener('click', this.extractListener);
+        }
+    }
+    async ensureFfmpeg() {
+        if (this.ffmpeg?.loaded) {
+            return this.ffmpeg;
+        }
+        let ffmpegModule;
+        let utilModule;
+        try {
+            ffmpegModule = (await import('@ffmpeg/ffmpeg'));
+            utilModule = (await import('@ffmpeg/util'));
+        }
+        catch {
+            throw new Error('Install @ffmpeg/ffmpeg and @ffmpeg/util to run equirect extract.');
+        }
+        const ffmpeg = new ffmpegModule.FFmpeg();
+        ffmpeg.on('progress', ({ progress }) => {
+            this.progress = Math.round(progress * 100);
+            this.dispatchEvent(new CustomEvent('progress', {
+                detail: { progress: this.progress },
+                bubbles: true,
+                composed: true,
+            }));
+            this.paint();
+        });
+        const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
+        await ffmpeg.load({
+            coreURL: await utilModule.toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
+            wasmURL: await utilModule.toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
+        });
+        this.ffmpeg = ffmpeg;
+        return ffmpeg;
+    }
+    async runEquirectExtract() {
+        if (!this.inputFile) {
+            this.error = 'Attach a video file before extracting.';
+            this.paint();
+            return;
+        }
+        this.busy = true;
+        this.error = null;
+        this.progress = 0;
+        this.paint();
+        try {
+            const ffmpeg = await this.ensureFfmpeg();
+            const utilModule = (await import('@ffmpeg/util'));
+            const inputName = 'input.mp4';
+            const outputName = `output.${this.outputFormat}`;
+            const crop = this.resolveCrop();
+            const filter = buildEquirectExtractFilter(this.extractionMode, {
+                ...crop,
+                yaw: readNumber(this.getAttribute('yaw'), 0),
+                pitch: readNumber(this.getAttribute('pitch'), 0),
+                horizontalFov: readNumber(this.getAttribute('horizontal-fov'), 90),
+            });
+            await ffmpeg.writeFile(inputName, await utilModule.fetchFile(this.inputFile));
+            await ffmpeg.exec(['-i', inputName, '-vf', filter, '-c:a', 'copy', outputName]);
+            const data = await ffmpeg.readFile(outputName);
+            const blob = new Blob([Uint8Array.from(data)], { type: `video/${this.outputFormat}` });
+            const metadata = {
+                filter,
+                outputWidth: crop.outputWidth,
+                outputHeight: crop.outputHeight,
+                format: this.outputFormat,
+            };
+            this.dispatchEvent(new CustomEvent('extract-complete', {
+                detail: { blob, metadata },
+                bubbles: true,
+                composed: true,
+            }));
+            this.dispatchEvent(new CustomEvent('metadata', {
+                detail: metadata,
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (nextError) {
+            this.error = nextError instanceof Error ? nextError.message : 'Extract failed';
+        }
+        finally {
+            this.busy = false;
+            this.paint();
+        }
+    }
+}
+export function registerRdWasmMedia() {
+    ensureShadowBase(DB_WASM_MEDIA_TAG);
+    defineRosettaElement(RdWasmMediaElement.tagName, RdWasmMediaElement);
+}
+//# sourceMappingURL=rd-wasm-media.js.map

package/src/wasm/wasm-media/rd-wasm-media.js.map

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

package/styles/catalog.css

@@ -0,0 +1,69 @@
+/**
+ * Opt-in light styles for catalog meta custom elements.
+ * Matches BEM blocks used inside CE shadow roots — framework wrappers reuse these class names.
+ */
+@import './tokens.css';
+
+.rd-palette-catalog,
+.rd-palette-group,
+.rd-component-spec,
+.rd-component-port,
+.rd-component-requirement,
+.rd-component-option {
+  font-family: var(--rd-font-family);
+  color: var(--rd-color-text);
+}
+
+.rd-catalog-item__jump {
+  align-self: flex-start;
+  margin-top: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--rd-color-border);
+  border-radius: 999px;
+  background: #fff;
+  font: inherit;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--rd-color-accent);
+  cursor: pointer;
+}
+
+.rd-catalog-guide__link {
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--rd-color-border);
+  border-radius: 999px;
+  background: #fff;
+  font: inherit;
+  font-size: 0.75rem;
+  color: var(--rd-color-accent);
+  cursor: pointer;
+}
+
+.rd-catalog-master {
+  display: grid;
+  gap: 2.5rem;
+  max-width: 80rem;
+}
+
+.rd-catalog-section-title {
+  margin: 0 0 0.75rem;
+  font-size: 1.25rem;
+}
+
+.rd-catalog-guide--master {
+  padding: 1rem 1.125rem;
+  border: 1px solid var(--rd-color-border);
+  border-radius: var(--rd-radius-md);
+}
+
+.rd-catalog-guide__title {
+  margin: 0;
+  font-size: 1.125rem;
+}
+
+.rd-catalog-guide__summary {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--rd-color-muted);
+}

package/styles/styles.css

@@ -0,0 +1,76 @@
+/**
+ * RosettaDash opt-in light theme.
+ * Import after tokens (or alone — this file includes token defaults).
+ *
+ * import '@rosettadash/web-components/styles.css'
+ *
+ * Does NOT reset body/html globally. Hosts keep full layout control.
+ */
+@import './tokens.css';
+@import './catalog.css';
+
+.rd-accordion {
+  border: 1px solid var(--rd-color-border);
+  border-radius: var(--rd-radius-md);
+  background: var(--rd-color-surface);
+  color: var(--rd-color-text);
+  font-family: var(--rd-font-family);
+  font-size: var(--rd-font-size);
+  line-height: var(--rd-line-height);
+}
+
+.rd-accordion__header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rd-space-sm);
+  padding: var(--rd-space-sm) var(--rd-space-md);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.rd-accordion__header:focus-visible {
+  outline: 2px solid var(--rd-color-accent);
+  outline-offset: -2px;
+}
+
+.rd-accordion__panel {
+  padding: 0 var(--rd-space-md) var(--rd-space-md);
+}
+
+.rd-accordion--open .rd-accordion__chevron {
+  transform: rotate(90deg);
+}
+
+.rd-link-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--rd-color-text);
+  font-family: var(--rd-font-family);
+  font-size: var(--rd-font-size);
+  line-height: var(--rd-line-height);
+}
+
+.rd-link-list__item + .rd-link-list__item {
+  margin-top: var(--rd-space-xs);
+}
+
+.rd-link-list--dense .rd-link-list__item + .rd-link-list__item {
+  margin-top: 0;
+}
+
+.rd-link-list__link {
+  color: var(--rd-color-accent);
+  text-decoration: none;
+}
+
+.rd-link-list__link:hover,
+.rd-link-list__link:focus-visible {
+  text-decoration: underline;
+}

package/styles/tokens.css

@@ -0,0 +1,19 @@
+/**
+ * RosettaDash public design tokens (`--rd-*`).
+ * Opt-in: import '@rosettadash/web-components/tokens.css'
+ */
+:root {
+  --rd-color-text: #1a1a1a;
+  --rd-color-muted: #5c5c5c;
+  --rd-color-surface: transparent;
+  --rd-color-border: #d0d0d0;
+  --rd-color-accent: #2563eb;
+  --rd-radius-sm: 0.25rem;
+  --rd-radius-md: 0.5rem;
+  --rd-space-xs: 0.25rem;
+  --rd-space-sm: 0.5rem;
+  --rd-space-md: 1rem;
+  --rd-font-size: 0.875rem;
+  --rd-line-height: 1.4;
+  --rd-font-family: system-ui, sans-serif;
+}