@rosettadash/web-components 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Ready <kevin@planetkevin.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+# `@rosettadash/web-components`
+
+Default RosettaDash UI runtime (Web Components).
+
+**Author:** Kevin Ready \<kevin@planetkevin.com\>
+
+## Install
+
+```bash
+npm install @rosettadash/web-components
+```
+
+> Unscoped [`rosettadash`](https://www.npmjs.com/package/rosettadash) is the **product monorepo**, not this package. See [consumer install](../../docs/39-npm-consumer-install.md).
+
+## Import shape
+
+```ts
+import {
+  registerRdAccordion,
+  type AccordionProps,
+} from '@rosettadash/web-components/layout/accordion';
+
+registerRdAccordion();
+```
+
+```html
+<rd-accordion title="Resources"></rd-accordion>
+```
+
+### Recipes (DAS-94)
+
+```ts
+import { registerRdLinkList } from '@rosettadash/web-components/visual/link-list';
+import {
+  registerRdAccordionLinkList,
+  AccordionLinkList,
+} from '@rosettadash/web-components/layout/accordion-link-list';
+
+registerRdLinkList();
+registerRdAccordionLinkList();
+
+AccordionLinkList({
+  title: 'Resources',
+  items: [{ label: 'Docs', href: '/docs' }],
+});
+```
+
+```html
+<!-- Composition -->
+<rd-accordion title="Resources">
+  <rd-link-list items='[{"label":"Docs","href":"/docs"}]'></rd-link-list>
+</rd-accordion>
+
+<!-- Or the recipe helper element -->
+<rd-accordion-link-list
+  title="Resources"
+  items='[{"label":"Docs","href":"/docs"}]'
+></rd-accordion-link-list>
+```
+
+### Media (ffmp3Console / DAS-83)
+
+```ts
+import { registerRosettaDashMediaElements } from '@rosettadash/web-components/media';
+
+registerRosettaDashMediaElements();
+```
+
+```html
+<rd-video-source></rd-video-source>
+<rd-equirect-viewport preview-mode="rectilinear" yaw="0" pitch="0" horizontal-fov="90"></rd-equirect-viewport>
+```
+
+Events: `video-file`, `crop-region`. Filter math: `@rosettadash/core` (`buildEquirectExtractFilter`).
+
+Same `<group>/…/<component>` paths are used on `@rosettadash/react`, `@rosettadash/angular`, `@rosettadash/vue`, and `@rosettadash/svelte`.
+
+## Styles (opt-in)
+
+```ts
+import '@rosettadash/web-components/tokens.css';
+import '@rosettadash/web-components/styles.css';
+```
+
+Tokens use the `--rd-*` prefix. Components work without these imports (minimal defaults in shadow CSS).
+
+## Storybook
+
+Interactive component catalogs ship with the **RosettaDash GitHub repo** (not this npm tarball). Clone [KevinEverywhere/rosettadash](https://github.com/KevinEverywhere/rosettadash), then:
+
+```bash
+npm install
+npm run storybook:web-components   # port 6006 — primary catalog
+```
+
+Sidebar: **Getting Started** (Start here, Component count, Styling modes) · **Catalog / Components** · **Catalog / Meta components**. Framework catalogs on ports 6007–6010 (`npm run storybook:react`, etc.). Details: [Storybook component catalog](https://github.com/KevinEverywhere/rosettadash/blob/development/docs/38-storybook-component-catalog.md).
+
+## Build / pack
+
+```bash
+nx build web-components
+npm pack ./dist/packages/web-components --dry-run
+```

package/browser/media.js

@@ -0,0 +1,484 @@
+// packages/core/src/lib/media/equirect-filter.ts
+function buildEquirectFlatCropFilter(options) {
+  const cropX = Math.max(0, Math.round(options.cropX));
+  const cropY = Math.max(0, Math.round(options.cropY));
+  const cropWidth = Math.max(2, Math.round(options.cropWidth));
+  const cropHeight = Math.max(2, Math.round(options.cropHeight));
+  const outputWidth = Math.max(2, Math.round(options.outputWidth));
+  const outputHeight = Math.max(2, Math.round(options.outputHeight));
+  return `crop=${cropWidth}:${cropHeight}:${cropX}:${cropY},scale=${outputWidth}:${outputHeight}`;
+}
+function buildEquirectRectilinearFilter(options) {
+  const yaw = Number(options.yaw) || 0;
+  const pitch = Number(options.pitch) || 0;
+  const roll = Number(options.roll ?? 0) || 0;
+  const horizontalFov = Math.max(1, Number(options.horizontalFov) || 90);
+  const outputWidth = Math.max(2, Math.round(options.outputWidth));
+  const outputHeight = Math.max(2, Math.round(options.outputHeight));
+  return [
+    `v360=input=equirect:output=rectilinear:yaw=${yaw}:pitch=${pitch}:roll=${roll}:d_fov=${horizontalFov}`,
+    `scale=${outputWidth}:${outputHeight}`
+  ].join(",");
+}
+function buildEquirectExtractFilter(mode, options) {
+  if (mode === "rectilinear") {
+    return buildEquirectRectilinearFilter({
+      yaw: options.yaw ?? 0,
+      pitch: options.pitch ?? 0,
+      roll: options.roll ?? 0,
+      horizontalFov: options.horizontalFov ?? 90,
+      outputWidth: options.outputWidth,
+      outputHeight: options.outputHeight
+    });
+  }
+  return buildEquirectFlatCropFilter(options);
+}
+var DEFAULT_EQUIRECT_SOURCE = { width: 4096, height: 2048 };
+var DEFAULT_EQUIRECT_FLAT_CROP = {
+  cropX: Math.floor((DEFAULT_EQUIRECT_SOURCE.width - 1080) / 2),
+  cropY: Math.floor((DEFAULT_EQUIRECT_SOURCE.height - 720) / 2),
+  cropWidth: 1080,
+  cropHeight: 720,
+  outputWidth: 720,
+  outputHeight: 480
+};
+
+// packages/web-components/src/lib/element-utils.ts
+function defineRosettaElement(tagName, ctor, options) {
+  if (customElements.get(tagName)) {
+    return;
+  }
+  if (options?.extends) {
+    customElements.define(tagName, ctor, { extends: options.extends });
+  } else {
+    customElements.define(tagName, ctor);
+  }
+}
+function readNumber(value, fallback) {
+  const next = Number(value);
+  return Number.isFinite(next) ? next : fallback;
+}
+function readString(value, fallback) {
+  return typeof value === "string" ? value : fallback;
+}
+
+// packages/web-components/src/lib/shadow-resources.ts
+var textCache = /* @__PURE__ */ new Map();
+function loadTextResource(relativePath, baseUrl) {
+  const url = new URL(relativePath, baseUrl);
+  const cacheKey = url.href;
+  const cached = textCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+  const promise = (async () => {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Failed to load ${url.href}: ${response.status}`);
+    }
+    return response.text();
+  })();
+  textCache.set(cacheKey, promise);
+  return promise;
+}
+function applyShadowMount(root, options) {
+  root.innerHTML = "";
+  const style = document.createElement("style");
+  style.textContent = options.css;
+  root.appendChild(style);
+  const template = document.createElement("template");
+  template.innerHTML = options.html;
+  root.appendChild(template.content.cloneNode(true));
+}
+
+// packages/web-components/src/lib/shadow-base.ts
+var SHADOW_ELEMENT_DIRS = {
+  "rd-accordion": "layout/accordion",
+  "rd-accordion-link-list": "layout/accordion-link-list",
+  "rd-link-list": "visual/link-list",
+  "rd-video-source": "visual/media/video-source",
+  "rd-equirect-viewport": "visual/media/equirect-viewport",
+  "rd-wasm-media": "wasm/wasm-media",
+  "rd-component-name": "catalog/component-name"
+};
+var tagToBaseUrl = /* @__PURE__ */ new Map();
+var packageSrcRoot = null;
+function normalizeDirectoryUrl(urlString) {
+  const url = new URL(urlString);
+  const lastSegment = url.pathname.split("/").pop() ?? "";
+  if (/\.[a-z0-9]+$/i.test(lastSegment)) {
+    url.pathname = url.pathname.replace(/\/[^/]+$/, "/");
+  } else if (!url.pathname.endsWith("/")) {
+    url.pathname = `${url.pathname}/`;
+  }
+  return url.href.endsWith("/") ? url.href : `${url.href}/`;
+}
+function registerShadowBase(tag, baseUrl) {
+  tagToBaseUrl.set(tag, normalizeDirectoryUrl(baseUrl));
+}
+function ensureShadowBase(tag) {
+  if (tagToBaseUrl.has(tag)) {
+    return;
+  }
+  if (!packageSrcRoot) {
+    throw new Error(
+      `Shadow base not registered for ${tag}. Import '@rosettadash/web-components' once in app code, or add the web-components Jest setup in test config.`
+    );
+  }
+  const dir = SHADOW_ELEMENT_DIRS[tag];
+  if (!dir) {
+    throw new Error(`Unknown shadow element tag: ${tag}`);
+  }
+  registerShadowBase(tag, new URL(`./${dir}/`, packageSrcRoot).href);
+}
+function getShadowBase(tag) {
+  const base = tagToBaseUrl.get(tag);
+  if (!base) {
+    throw new Error(`Shadow base not registered for ${tag}`);
+  }
+  return base;
+}
+async function loadShadowPairForTag(tag, htmlFile, cssFile) {
+  ensureShadowBase(tag);
+  const base = getShadowBase(tag);
+  const [html, css] = await Promise.all([
+    loadTextResource(htmlFile, base),
+    loadTextResource(cssFile, base)
+  ]);
+  return { html, css };
+}
+
+// packages/web-components/src/visual/media/video-source/rd-video-source.ts
+var DB_VIDEO_SOURCE_TAG = "rd-video-source";
+var RdVideoSourceElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.inputEl = null;
+    this.resourcesReady = null;
+    this.changeListener = null;
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    this.resourcesReady = this.mountShadow();
+    void this.resourcesReady.then(() => this.paint());
+  }
+  disconnectedCallback() {
+    if (this.inputEl && this.changeListener) {
+      this.inputEl.removeEventListener("change", this.changeListener);
+    }
+    this.changeListener = null;
+    this.inputEl = null;
+  }
+  setProperty(name, value) {
+    this[name] = value;
+    if (this.resourcesReady) {
+      void this.resourcesReady.then(() => this.paint());
+    }
+  }
+  whenReady() {
+    return this.resourcesReady ?? Promise.resolve();
+  }
+  get label() {
+    return readString(this.getAttribute("label"), "Video source");
+  }
+  get accept() {
+    return readString(this.getAttribute("accept"), "video/*");
+  }
+  get sourceWidth() {
+    return readNumber(this.getAttribute("source-width"), DEFAULT_EQUIRECT_SOURCE.width);
+  }
+  get sourceHeight() {
+    return readNumber(this.getAttribute("source-height"), DEFAULT_EQUIRECT_SOURCE.height);
+  }
+  async mountShadow() {
+    const root = this.shadowRoot;
+    if (!root || root.querySelector(".video-source")) {
+      return;
+    }
+    const pair = await loadShadowPairForTag(
+      DB_VIDEO_SOURCE_TAG,
+      "./rd-video-source.html",
+      "./rd-video-source.css"
+    );
+    applyShadowMount(root, pair);
+    this.inputEl = root.querySelector('[data-ref="input"]');
+    this.changeListener = () => this.handleFileSelected();
+    this.inputEl?.addEventListener("change", this.changeListener);
+  }
+  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.sourceWidth}\xD7${this.sourceHeight}`;
+    }
+    const input = root.querySelector('[data-ref="input"]');
+    if (input) {
+      input.accept = this.accept;
+    }
+  }
+  handleFileSelected() {
+    const file = this.inputEl?.files?.[0];
+    if (!file) {
+      return;
+    }
+    const nameEl = this.shadowRoot?.querySelector('[data-ref="file-name"]');
+    if (nameEl) {
+      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
+      })
+    );
+  }
+};
+RdVideoSourceElement.tagName = DB_VIDEO_SOURCE_TAG;
+function registerRdVideoSource() {
+  ensureShadowBase(DB_VIDEO_SOURCE_TAG);
+  defineRosettaElement(RdVideoSourceElement.tagName, RdVideoSourceElement);
+}
+
+// packages/web-components/src/visual/media/equirect-viewport/rd-equirect-viewport.ts
+var DB_EQUIRECT_VIEWPORT_TAG = "rd-equirect-viewport";
+var RdEquirectViewportElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this.resourcesReady = null;
+  }
+  static get observedAttributes() {
+    return [
+      "label",
+      "preview-mode",
+      "source-width",
+      "source-height",
+      "crop-x",
+      "crop-y",
+      "crop-width",
+      "crop-height",
+      "output-width",
+      "output-height",
+      "yaw",
+      "pitch",
+      "horizontal-fov"
+    ];
+  }
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    this.resourcesReady = this.mountShadow();
+    void this.resourcesReady.then(() => {
+      this.paint();
+      this.emitCropRegion();
+    });
+  }
+  attributeChangedCallback() {
+    if (this.shadowRoot && this.resourcesReady) {
+      void this.resourcesReady.then(() => {
+        this.paint();
+        this.emitCropRegion();
+      });
+    }
+  }
+  whenReady() {
+    return this.resourcesReady ?? Promise.resolve();
+  }
+  setProperty(name, value) {
+    const attrMap = {
+      previewMode: "preview-mode",
+      sourceWidth: "source-width",
+      sourceHeight: "source-height",
+      cropX: "crop-x",
+      cropY: "crop-y",
+      cropWidth: "crop-width",
+      cropHeight: "crop-height",
+      outputWidth: "output-width",
+      outputHeight: "output-height",
+      horizontalFov: "horizontal-fov"
+    };
+    const attr = attrMap[name] ?? name;
+    if (value === null || value === void 0) {
+      this.removeAttribute(attr);
+    } else {
+      this.setAttribute(attr, String(value));
+    }
+  }
+  get previewMode() {
+    const mode = readString(this.getAttribute("preview-mode"), "flat-crop");
+    return mode === "rectilinear" ? "rectilinear" : "flat-crop";
+  }
+  get label() {
+    return readString(this.getAttribute("label"), "Equirect viewport");
+  }
+  get cropRegion() {
+    return {
+      cropX: this.cropX,
+      cropY: this.cropY,
+      cropWidth: this.cropWidth,
+      cropHeight: this.cropHeight,
+      outputWidth: this.outputWidth,
+      outputHeight: this.outputHeight,
+      yaw: this.yaw,
+      pitch: this.pitch,
+      horizontalFov: this.horizontalFov,
+      previewMode: this.previewMode,
+      filter: buildEquirectExtractFilter(this.previewMode, {
+        cropX: this.cropX,
+        cropY: this.cropY,
+        cropWidth: this.cropWidth,
+        cropHeight: this.cropHeight,
+        outputWidth: this.outputWidth,
+        outputHeight: this.outputHeight,
+        yaw: this.yaw,
+        pitch: this.pitch,
+        horizontalFov: this.horizontalFov
+      })
+    };
+  }
+  get sourceWidth() {
+    return readNumber(this.getAttribute("source-width"), DEFAULT_EQUIRECT_SOURCE.width);
+  }
+  get sourceHeight() {
+    return readNumber(this.getAttribute("source-height"), DEFAULT_EQUIRECT_SOURCE.height);
+  }
+  get cropX() {
+    return readNumber(this.getAttribute("crop-x"), DEFAULT_EQUIRECT_FLAT_CROP.cropX);
+  }
+  get cropY() {
+    return readNumber(this.getAttribute("crop-y"), DEFAULT_EQUIRECT_FLAT_CROP.cropY);
+  }
+  get cropWidth() {
+    return readNumber(this.getAttribute("crop-width"), DEFAULT_EQUIRECT_FLAT_CROP.cropWidth);
+  }
+  get cropHeight() {
+    return readNumber(this.getAttribute("crop-height"), DEFAULT_EQUIRECT_FLAT_CROP.cropHeight);
+  }
+  get outputWidth() {
+    return readNumber(this.getAttribute("output-width"), DEFAULT_EQUIRECT_FLAT_CROP.outputWidth);
+  }
+  get outputHeight() {
+    return readNumber(this.getAttribute("output-height"), DEFAULT_EQUIRECT_FLAT_CROP.outputHeight);
+  }
+  get yaw() {
+    return readNumber(this.getAttribute("yaw"), 0);
+  }
+  get pitch() {
+    return readNumber(this.getAttribute("pitch"), 0);
+  }
+  get horizontalFov() {
+    return readNumber(this.getAttribute("horizontal-fov"), 90);
+  }
+  async mountShadow() {
+    const root = this.shadowRoot;
+    if (!root || root.querySelector('[data-ref="root"]')) {
+      return;
+    }
+    const pair = await loadShadowPairForTag(
+      DB_EQUIRECT_VIEWPORT_TAG,
+      "./rd-equirect-viewport.html",
+      "./rd-equirect-viewport.css"
+    );
+    const panelCss = await loadTextResource("../../../lib/panel.css", getShadowBase(DB_EQUIRECT_VIEWPORT_TAG));
+    applyShadowMount(root, { html: pair.html, css: `${panelCss}
+${pair.css}` });
+  }
+  paint() {
+    const root = this.shadowRoot;
+    if (!root) {
+      return;
+    }
+    const cropLeftPct = this.cropX / this.sourceWidth * 100;
+    const cropTopPct = this.cropY / this.sourceHeight * 100;
+    const cropWidthPct = this.cropWidth / this.sourceWidth * 100;
+    const cropHeightPct = this.cropHeight / this.sourceHeight * 100;
+    const flatPreview = `
+      <div class="equirect-frame" style="aspect-ratio: ${this.sourceWidth} / ${this.sourceHeight}">
+        <div class="equirect-frame__crop" style="left:${cropLeftPct}%;top:${cropTopPct}%;width:${cropWidthPct}%;height:${cropHeightPct}%"></div>
+      </div>
+    `;
+    const rectilinearPreview = `
+      <div class="rectilinear-preview">
+        <div class="rectilinear-preview__cone" style="transform: rotateY(${this.yaw}deg) rotateX(${-this.pitch}deg)"></div>
+        <dl class="rectilinear-preview__meta">
+          <div><dt>Yaw</dt><dd>${this.yaw}\xB0</dd></div>
+          <div><dt>Pitch</dt><dd>${this.pitch}\xB0</dd></div>
+          <div><dt>FOV</dt><dd>${this.horizontalFov}\xB0</dd></div>
+        </dl>
+      </div>
+    `;
+    const labelEl = root.querySelector('[data-ref="label"]');
+    const modeEl = root.querySelector('[data-ref="mode"]');
+    if (labelEl) {
+      labelEl.textContent = this.label;
+    }
+    if (modeEl) {
+      modeEl.textContent = this.previewMode === "flat-crop" ? "Flat crop" : "Rectilinear";
+    }
+    const preview = root.querySelector('[data-ref="preview"]');
+    if (preview) {
+      preview.innerHTML = this.previewMode === "flat-crop" ? flatPreview : rectilinearPreview;
+    }
+    const filterEl = root.querySelector('[data-ref="filter"]');
+    if (filterEl) {
+      filterEl.textContent = String(this.cropRegion["filter"]);
+    }
+    const outputEl = root.querySelector('[data-ref="output"]');
+    if (outputEl) {
+      outputEl.textContent = `Output ${this.outputWidth}\xD7${this.outputHeight}`;
+    }
+  }
+  emitCropRegion() {
+    this.dispatchEvent(
+      new CustomEvent("crop-region", {
+        detail: this.cropRegion,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+RdEquirectViewportElement.tagName = DB_EQUIRECT_VIEWPORT_TAG;
+function registerRdEquirectViewport() {
+  ensureShadowBase(DB_EQUIRECT_VIEWPORT_TAG);
+  defineRosettaElement(RdEquirectViewportElement.tagName, RdEquirectViewportElement);
+}
+
+// packages/web-components/src/visual/media/index.ts
+function registerRosettaDashMediaElements() {
+  registerRdVideoSource();
+  registerRdEquirectViewport();
+}
+export {
+  DB_EQUIRECT_VIEWPORT_TAG,
+  DB_VIDEO_SOURCE_TAG,
+  RdEquirectViewportElement,
+  RdVideoSourceElement,
+  registerRdEquirectViewport,
+  registerRdVideoSource,
+  registerRosettaDashMediaElements
+};
+//# sourceMappingURL=media.js.map