@rosettadash/web-components 0.1.0

package/browser/media.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../packages/core/src/lib/media/equirect-filter.ts", "../../../../packages/web-components/src/lib/element-utils.ts", "../../../../packages/web-components/src/lib/shadow-resources.ts", "../../../../packages/web-components/src/lib/shadow-base.ts", "../../../../packages/web-components/src/visual/media/video-source/rd-video-source.ts", "../../../../packages/web-components/src/visual/media/equirect-viewport/rd-equirect-viewport.ts", "../../../../packages/web-components/src/visual/media/index.ts"],
+  "sourcesContent": ["export interface EquirectFlatCropOptions {\n  cropX: number;\n  cropY: number;\n  cropWidth: number;\n  cropHeight: number;\n  outputWidth: number;\n  outputHeight: number;\n}\n\nexport interface EquirectRectilinearOptions {\n  yaw: number;\n  pitch: number;\n  roll?: number;\n  horizontalFov: number;\n  outputWidth: number;\n  outputHeight: number;\n}\n\n/** ffmpeg -vf filter for a rectangular crop on a flat 2:1 equirect frame, then scale. */\nexport function buildEquirectFlatCropFilter(options: EquirectFlatCropOptions): string {\n  const cropX = Math.max(0, Math.round(options.cropX));\n  const cropY = Math.max(0, Math.round(options.cropY));\n  const cropWidth = Math.max(2, Math.round(options.cropWidth));\n  const cropHeight = Math.max(2, Math.round(options.cropHeight));\n  const outputWidth = Math.max(2, Math.round(options.outputWidth));\n  const outputHeight = Math.max(2, Math.round(options.outputHeight));\n\n  return `crop=${cropWidth}:${cropHeight}:${cropX}:${cropY},scale=${outputWidth}:${outputHeight}`;\n}\n\n/** ffmpeg -vf filter for rectilinear reprojection from equirect source. */\nexport function buildEquirectRectilinearFilter(options: EquirectRectilinearOptions): string {\n  const yaw = Number(options.yaw) || 0;\n  const pitch = Number(options.pitch) || 0;\n  const roll = Number(options.roll ?? 0) || 0;\n  const horizontalFov = Math.max(1, Number(options.horizontalFov) || 90);\n  const outputWidth = Math.max(2, Math.round(options.outputWidth));\n  const outputHeight = Math.max(2, Math.round(options.outputHeight));\n\n  return [\n    `v360=input=equirect:output=rectilinear:yaw=${yaw}:pitch=${pitch}:roll=${roll}:d_fov=${horizontalFov}`,\n    `scale=${outputWidth}:${outputHeight}`,\n  ].join(',');\n}\n\nexport function buildEquirectExtractFilter(\n  mode: 'flat-crop' | 'rectilinear',\n  options: EquirectFlatCropOptions & Partial<EquirectRectilinearOptions>,\n): string {\n  if (mode === 'rectilinear') {\n    return buildEquirectRectilinearFilter({\n      yaw: options.yaw ?? 0,\n      pitch: options.pitch ?? 0,\n      roll: options.roll ?? 0,\n      horizontalFov: options.horizontalFov ?? 90,\n      outputWidth: options.outputWidth,\n      outputHeight: options.outputHeight,\n    });\n  }\n\n  return buildEquirectFlatCropFilter(options);\n}\n\n/** Default crop centered on a 4096\u00D72048 equirect frame. */\nexport const DEFAULT_EQUIRECT_SOURCE = { width: 4096, height: 2048 } as const;\n\nexport const DEFAULT_EQUIRECT_FLAT_CROP: EquirectFlatCropOptions = {\n  cropX: Math.floor((DEFAULT_EQUIRECT_SOURCE.width - 1080) / 2),\n  cropY: Math.floor((DEFAULT_EQUIRECT_SOURCE.height - 720) / 2),\n  cropWidth: 1080,\n  cropHeight: 720,\n  outputWidth: 720,\n  outputHeight: 480,\n};\n", "export interface DefineRosettaElementOptions {\n  extends?: keyof HTMLElementTagNameMap;\n}\n\nexport function defineRosettaElement(\n  tagName: string,\n  ctor: CustomElementConstructor,\n  options?: DefineRosettaElementOptions,\n): void {\n  if (customElements.get(tagName)) {\n    return;\n  }\n  if (options?.extends) {\n    customElements.define(tagName, ctor, { extends: options.extends });\n  } else {\n    customElements.define(tagName, ctor);\n  }\n}\n\nexport type DashRow = Record<string, string | number | boolean | null | undefined>;\n\nexport function readNumber(value: unknown, fallback: number): number {\n  const next = Number(value);\n  return Number.isFinite(next) ? next : fallback;\n}\n\nexport function readString(value: unknown, fallback: string): string {\n  return typeof value === 'string' ? value : fallback;\n}\n\nexport const BASE_STYLES = `\n:host {\n  display: block;\n  font-family: var(--rd-font-family, system-ui, sans-serif);\n  color: var(--rd-color-text, #1f2937);\n}\n.panel {\n  border: 1px solid var(--rd-color-border, #d9dee7);\n  border-radius: var(--rd-radius-md, 0.5rem);\n  padding: 0.75rem;\n}\n.panel__header {\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n.panel__header h3 {\n  margin: 0;\n  font-size: 0.9375rem;\n}\n.panel__meta {\n  font-size: 0.75rem;\n  color: var(--rd-color-muted, #6b7280);\n}\n`;\n", "const textCache = new Map<string, Promise<string>>();\n\n/** Load co-located `.html` / `.css` for shadow roots (browser fetch). */\nexport function loadTextResource(relativePath: string, baseUrl: string): Promise<string> {\n  const url = new URL(relativePath, baseUrl);\n  const cacheKey = url.href;\n  const cached = textCache.get(cacheKey);\n  if (cached) {\n    return cached;\n  }\n\n  const promise = (async () => {\n    const response = await fetch(url);\n    if (!response.ok) {\n      throw new Error(`Failed to load ${url.href}: ${response.status}`);\n    }\n    return response.text();\n  })();\n\n  textCache.set(cacheKey, promise);\n  return promise;\n}\n\nexport interface ShadowMountOptions {\n  html: string;\n  css: string;\n}\n\n/** Apply stylesheet + markup to an open shadow root. */\nexport function applyShadowMount(root: ShadowRoot, options: ShadowMountOptions): void {\n  root.innerHTML = '';\n  const style = document.createElement('style');\n  style.textContent = options.css;\n  root.appendChild(style);\n\n  const template = document.createElement('template');\n  template.innerHTML = options.html;\n  root.appendChild(template.content.cloneNode(true));\n}\n\n/** Load paired `.html` + `.css` next to the calling module. */\nexport async function loadShadowPair(\n  baseUrl: string,\n  htmlFile: string,\n  cssFile: string,\n): Promise<ShadowMountOptions> {\n  const [html, css] = await Promise.all([\n    loadTextResource(htmlFile, baseUrl),\n    loadTextResource(cssFile, baseUrl),\n  ]);\n  return { html, css };\n}\n", "import { loadTextResource, type ShadowMountOptions } from './shadow-resources.js';\n\n/** Co-located shadow asset directories relative to `packages/web-components/src/`. */\nexport const SHADOW_ELEMENT_DIRS: Record<string, string> = {\n  'rd-accordion': 'layout/accordion',\n  'rd-accordion-link-list': 'layout/accordion-link-list',\n  'rd-link-list': 'visual/link-list',\n  'rd-video-source': 'visual/media/video-source',\n  'rd-equirect-viewport': 'visual/media/equirect-viewport',\n  'rd-wasm-media': 'wasm/wasm-media',\n  'rd-component-name': 'catalog/component-name',\n};\n\nconst tagToBaseUrl = new Map<string, string>();\nlet packageSrcRoot: string | null = null;\n\n/** Ensure a module/file URL resolves to a directory URL (trailing `/`). */\nexport function normalizeDirectoryUrl(urlString: string): string {\n  const url = new URL(urlString);\n  const lastSegment = url.pathname.split('/').pop() ?? '';\n  if (/\\.[a-z0-9]+$/i.test(lastSegment)) {\n    url.pathname = url.pathname.replace(/\\/[^/]+$/, '/');\n  } else if (!url.pathname.endsWith('/')) {\n    url.pathname = `${url.pathname}/`;\n  }\n  return url.href.endsWith('/') ? url.href : `${url.href}/`;\n}\n\n/** Register co-located asset directory for a custom element tag. */\nexport function registerShadowBase(tag: string, baseUrl: string): void {\n  tagToBaseUrl.set(tag, normalizeDirectoryUrl(baseUrl));\n}\n\n/** Set package `src/` root (`file:` or `https:` URL ending in `/`). */\nexport function setShadowPackageSrcRoot(rootUrl: string): void {\n  packageSrcRoot = normalizeDirectoryUrl(rootUrl);\n}\n\n/** Resolve `packages/web-components/src/` from a module URL (Vite-safe). */\nexport function resolvePackageSrcRootFromModule(moduleUrl: string): string {\n  const marker = new URL('./register-shadow-bases.browser.js', moduleUrl);\n  return normalizeDirectoryUrl(new URL('./', marker).href);\n}\n\n/** Register all known shadow bases from {@link setShadowPackageSrcRoot}. */\nexport function registerAllShadowBases(): void {\n  if (!packageSrcRoot) {\n    throw new Error('setShadowPackageSrcRoot must be called before registerAllShadowBases');\n  }\n  for (const [tag, dir] of Object.entries(SHADOW_ELEMENT_DIRS)) {\n    registerShadowBase(tag, new URL(`./${dir}/`, packageSrcRoot).href);\n  }\n}\n\n/** Register one shadow base when package root is configured (browser entry or Jest setup). */\nexport function ensureShadowBase(tag: string): void {\n  if (tagToBaseUrl.has(tag)) {\n    return;\n  }\n  if (!packageSrcRoot) {\n    throw new Error(\n      `Shadow base not registered for ${tag}. Import '@rosettadash/web-components' once in app code, or add the web-components Jest setup in test config.`,\n    );\n  }\n  const dir = SHADOW_ELEMENT_DIRS[tag];\n  if (!dir) {\n    throw new Error(`Unknown shadow element tag: ${tag}`);\n  }\n  registerShadowBase(tag, new URL(`./${dir}/`, packageSrcRoot).href);\n}\n\n/** Resolve registered base URL for shadow asset loading. */\nexport function getShadowBase(tag: string): string {\n  const base = tagToBaseUrl.get(tag);\n  if (!base) {\n    throw new Error(`Shadow base not registered for ${tag}`);\n  }\n  return base;\n}\n\n/** Load paired `.html` + `.css` for a registered element tag. */\nexport async function loadShadowPairForTag(\n  tag: string,\n  htmlFile: string,\n  cssFile: string,\n): Promise<ShadowMountOptions> {\n  ensureShadowBase(tag);\n  const base = getShadowBase(tag);\n  const [html, css] = await Promise.all([\n    loadTextResource(htmlFile, base),\n    loadTextResource(cssFile, base),\n  ]);\n  return { html, css };\n}\n\nexport { applyShadowMount } from './shadow-resources.js';\n", "import { DEFAULT_EQUIRECT_SOURCE } from '@rosettadash/core';\nimport { defineRosettaElement, type DashRow, readNumber, readString } from '../../../lib/element-utils.js';\nimport { applyShadowMount, ensureShadowBase, loadShadowPairForTag } from '../../../lib/shadow-base.js';\n\nexport const DB_VIDEO_SOURCE_TAG = 'rd-video-source';\n\nexport class RdVideoSourceElement extends HTMLElement {\n  static readonly tagName = DB_VIDEO_SOURCE_TAG;\n\n  private inputEl: HTMLInputElement | null = null;\n  private resourcesReady: Promise<void> | null = null;\n  private changeListener: (() => void) | null = null;\n\n  connectedCallback(): void {\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    this.resourcesReady = this.mountShadow();\n    void this.resourcesReady.then(() => this.paint());\n  }\n\n  disconnectedCallback(): void {\n    if (this.inputEl && this.changeListener) {\n      this.inputEl.removeEventListener('change', this.changeListener);\n    }\n    this.changeListener = null;\n    this.inputEl = null;\n  }\n\n  setProperty(name: string, value: unknown): void {\n    (this as Record<string, unknown>)[name] = value;\n    if (this.resourcesReady) {\n      void this.resourcesReady.then(() => this.paint());\n    }\n  }\n\n  whenReady(): Promise<void> {\n    return this.resourcesReady ?? Promise.resolve();\n  }\n\n  get label(): string {\n    return readString(this.getAttribute('label'), 'Video source');\n  }\n\n  get accept(): string {\n    return readString(this.getAttribute('accept'), 'video/*');\n  }\n\n  get sourceWidth(): number {\n    return readNumber(this.getAttribute('source-width'), DEFAULT_EQUIRECT_SOURCE.width);\n  }\n\n  get sourceHeight(): number {\n    return readNumber(this.getAttribute('source-height'), DEFAULT_EQUIRECT_SOURCE.height);\n  }\n\n  private async mountShadow(): Promise<void> {\n    const root = this.shadowRoot;\n    if (!root || root.querySelector('.video-source')) {\n      return;\n    }\n    const pair = await loadShadowPairForTag(\n      DB_VIDEO_SOURCE_TAG,\n      './rd-video-source.html',\n      './rd-video-source.css',\n    );\n    applyShadowMount(root, pair);\n    this.inputEl = root.querySelector('[data-ref=\"input\"]');\n    this.changeListener = () => this.handleFileSelected();\n    this.inputEl?.addEventListener('change', this.changeListener);\n  }\n\n  private paint(): void {\n    const root = this.shadowRoot;\n    if (!root) {\n      return;\n    }\n\n    const labelEl = root.querySelector('[data-ref=\"label\"]');\n    const metaEl = root.querySelector('[data-ref=\"meta\"]');\n    if (labelEl) {\n      labelEl.textContent = this.label;\n    }\n    if (metaEl) {\n      metaEl.textContent = `${this.sourceWidth}\u00D7${this.sourceHeight}`;\n    }\n    const input = root.querySelector('[data-ref=\"input\"]') as HTMLInputElement | null;\n    if (input) {\n      input.accept = this.accept;\n    }\n  }\n\n  private handleFileSelected(): void {\n    const file = this.inputEl?.files?.[0];\n    if (!file) {\n      return;\n    }\n\n    const nameEl = this.shadowRoot?.querySelector('[data-ref=\"file-name\"]');\n    if (nameEl) {\n      nameEl.textContent = file.name;\n    }\n\n    const metadata: DashRow = {\n      name: file.name,\n      sourceWidth: this.sourceWidth,\n      sourceHeight: this.sourceHeight,\n      size: file.size,\n    };\n\n    this.dispatchEvent(\n      new CustomEvent('video-file', {\n        detail: { file, metadata },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.dispatchEvent(\n      new CustomEvent('metadata', {\n        detail: metadata,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n}\n\nexport function registerRdVideoSource(): void {\n  ensureShadowBase(DB_VIDEO_SOURCE_TAG);\n  defineRosettaElement(RdVideoSourceElement.tagName, RdVideoSourceElement);\n}\n", "import {\n  buildEquirectExtractFilter,\n  DEFAULT_EQUIRECT_FLAT_CROP,\n  DEFAULT_EQUIRECT_SOURCE,\n} from '@rosettadash/core';\nimport { defineRosettaElement, type DashRow, readNumber, readString } from '../../../lib/element-utils.js';\nimport { applyShadowMount, ensureShadowBase, getShadowBase, loadShadowPairForTag } from '../../../lib/shadow-base.js';\nimport { loadTextResource } from '../../../lib/shadow-resources.js';\n\nexport const DB_EQUIRECT_VIEWPORT_TAG = 'rd-equirect-viewport';\n\nexport type EquirectPreviewMode = 'flat-crop' | 'rectilinear';\n\nexport class RdEquirectViewportElement extends HTMLElement {\n  static readonly tagName = DB_EQUIRECT_VIEWPORT_TAG;\n\n  private resourcesReady: Promise<void> | null = null;\n\n  static get observedAttributes(): string[] {\n    return [\n      'label',\n      'preview-mode',\n      'source-width',\n      'source-height',\n      'crop-x',\n      'crop-y',\n      'crop-width',\n      'crop-height',\n      'output-width',\n      'output-height',\n      'yaw',\n      'pitch',\n      'horizontal-fov',\n    ];\n  }\n\n  connectedCallback(): void {\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    this.resourcesReady = this.mountShadow();\n    void this.resourcesReady.then(() => {\n      this.paint();\n      this.emitCropRegion();\n    });\n  }\n\n  attributeChangedCallback(): void {\n    if (this.shadowRoot && this.resourcesReady) {\n      void this.resourcesReady.then(() => {\n        this.paint();\n        this.emitCropRegion();\n      });\n    }\n  }\n\n  whenReady(): Promise<void> {\n    return this.resourcesReady ?? Promise.resolve();\n  }\n\n  setProperty(name: string, value: unknown): void {\n    const attrMap: Record<string, string> = {\n      previewMode: 'preview-mode',\n      sourceWidth: 'source-width',\n      sourceHeight: 'source-height',\n      cropX: 'crop-x',\n      cropY: 'crop-y',\n      cropWidth: 'crop-width',\n      cropHeight: 'crop-height',\n      outputWidth: 'output-width',\n      outputHeight: 'output-height',\n      horizontalFov: 'horizontal-fov',\n    };\n\n    const attr = attrMap[name] ?? name;\n    if (value === null || value === undefined) {\n      this.removeAttribute(attr);\n    } else {\n      this.setAttribute(attr, String(value));\n    }\n  }\n\n  get previewMode(): EquirectPreviewMode {\n    const mode = readString(this.getAttribute('preview-mode'), 'flat-crop');\n    return mode === 'rectilinear' ? 'rectilinear' : 'flat-crop';\n  }\n\n  get label(): string {\n    return readString(this.getAttribute('label'), 'Equirect viewport');\n  }\n\n  get cropRegion(): DashRow {\n    return {\n      cropX: this.cropX,\n      cropY: this.cropY,\n      cropWidth: this.cropWidth,\n      cropHeight: this.cropHeight,\n      outputWidth: this.outputWidth,\n      outputHeight: this.outputHeight,\n      yaw: this.yaw,\n      pitch: this.pitch,\n      horizontalFov: this.horizontalFov,\n      previewMode: this.previewMode,\n      filter: buildEquirectExtractFilter(this.previewMode, {\n        cropX: this.cropX,\n        cropY: this.cropY,\n        cropWidth: this.cropWidth,\n        cropHeight: this.cropHeight,\n        outputWidth: this.outputWidth,\n        outputHeight: this.outputHeight,\n        yaw: this.yaw,\n        pitch: this.pitch,\n        horizontalFov: this.horizontalFov,\n      }),\n    };\n  }\n\n  private get sourceWidth(): number {\n    return readNumber(this.getAttribute('source-width'), DEFAULT_EQUIRECT_SOURCE.width);\n  }\n\n  private get sourceHeight(): number {\n    return readNumber(this.getAttribute('source-height'), DEFAULT_EQUIRECT_SOURCE.height);\n  }\n\n  private get cropX(): number {\n    return readNumber(this.getAttribute('crop-x'), DEFAULT_EQUIRECT_FLAT_CROP.cropX);\n  }\n\n  private get cropY(): number {\n    return readNumber(this.getAttribute('crop-y'), DEFAULT_EQUIRECT_FLAT_CROP.cropY);\n  }\n\n  private get cropWidth(): number {\n    return readNumber(this.getAttribute('crop-width'), DEFAULT_EQUIRECT_FLAT_CROP.cropWidth);\n  }\n\n  private get cropHeight(): number {\n    return readNumber(this.getAttribute('crop-height'), DEFAULT_EQUIRECT_FLAT_CROP.cropHeight);\n  }\n\n  private get outputWidth(): number {\n    return readNumber(this.getAttribute('output-width'), DEFAULT_EQUIRECT_FLAT_CROP.outputWidth);\n  }\n\n  private get outputHeight(): number {\n    return readNumber(this.getAttribute('output-height'), DEFAULT_EQUIRECT_FLAT_CROP.outputHeight);\n  }\n\n  private get yaw(): number {\n    return readNumber(this.getAttribute('yaw'), 0);\n  }\n\n  private get pitch(): number {\n    return readNumber(this.getAttribute('pitch'), 0);\n  }\n\n  private get horizontalFov(): number {\n    return readNumber(this.getAttribute('horizontal-fov'), 90);\n  }\n\n  private async mountShadow(): Promise<void> {\n    const root = this.shadowRoot;\n    if (!root || root.querySelector('[data-ref=\"root\"]')) {\n      return;\n    }\n    const pair = await loadShadowPairForTag(\n      DB_EQUIRECT_VIEWPORT_TAG,\n      './rd-equirect-viewport.html',\n      './rd-equirect-viewport.css',\n    );\n    const panelCss = await loadTextResource('../../../lib/panel.css', getShadowBase(DB_EQUIRECT_VIEWPORT_TAG));\n    applyShadowMount(root, { html: pair.html, css: `${panelCss}\\n${pair.css}` });\n  }\n\n  private paint(): void {\n    const root = this.shadowRoot;\n    if (!root) {\n      return;\n    }\n\n    const cropLeftPct = (this.cropX / this.sourceWidth) * 100;\n    const cropTopPct = (this.cropY / this.sourceHeight) * 100;\n    const cropWidthPct = (this.cropWidth / this.sourceWidth) * 100;\n    const cropHeightPct = (this.cropHeight / this.sourceHeight) * 100;\n\n    const flatPreview = `\n      <div class=\"equirect-frame\" style=\"aspect-ratio: ${this.sourceWidth} / ${this.sourceHeight}\">\n        <div class=\"equirect-frame__crop\" style=\"left:${cropLeftPct}%;top:${cropTopPct}%;width:${cropWidthPct}%;height:${cropHeightPct}%\"></div>\n      </div>\n    `;\n\n    const rectilinearPreview = `\n      <div class=\"rectilinear-preview\">\n        <div class=\"rectilinear-preview__cone\" style=\"transform: rotateY(${this.yaw}deg) rotateX(${-this.pitch}deg)\"></div>\n        <dl class=\"rectilinear-preview__meta\">\n          <div><dt>Yaw</dt><dd>${this.yaw}\u00B0</dd></div>\n          <div><dt>Pitch</dt><dd>${this.pitch}\u00B0</dd></div>\n          <div><dt>FOV</dt><dd>${this.horizontalFov}\u00B0</dd></div>\n        </dl>\n      </div>\n    `;\n\n    const labelEl = root.querySelector('[data-ref=\"label\"]');\n    const modeEl = root.querySelector('[data-ref=\"mode\"]');\n    if (labelEl) {\n      labelEl.textContent = this.label;\n    }\n    if (modeEl) {\n      modeEl.textContent = this.previewMode === 'flat-crop' ? 'Flat crop' : 'Rectilinear';\n    }\n    const preview = root.querySelector('[data-ref=\"preview\"]');\n    if (preview) {\n      preview.innerHTML = this.previewMode === 'flat-crop' ? flatPreview : rectilinearPreview;\n    }\n    const filterEl = root.querySelector('[data-ref=\"filter\"]');\n    if (filterEl) {\n      filterEl.textContent = String(this.cropRegion['filter']);\n    }\n    const outputEl = root.querySelector('[data-ref=\"output\"]');\n    if (outputEl) {\n      outputEl.textContent = `Output ${this.outputWidth}\u00D7${this.outputHeight}`;\n    }\n  }\n\n  private emitCropRegion(): void {\n    this.dispatchEvent(\n      new CustomEvent('crop-region', {\n        detail: this.cropRegion,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n}\n\nexport function registerRdEquirectViewport(): void {\n  ensureShadowBase(DB_EQUIRECT_VIEWPORT_TAG);\n  defineRosettaElement(RdEquirectViewportElement.tagName, RdEquirectViewportElement);\n}\n", "export { RdVideoSourceElement, DB_VIDEO_SOURCE_TAG, registerRdVideoSource } from './video-source/index.js';\nexport {\n  RdEquirectViewportElement,\n  DB_EQUIRECT_VIEWPORT_TAG,\n  registerRdEquirectViewport,\n  type EquirectPreviewMode,\n} from './equirect-viewport/index.js';\n\nimport { registerRdEquirectViewport } from './equirect-viewport/index.js';\nimport { registerRdVideoSource } from './video-source/index.js';\n\nexport function registerRosettaDashMediaElements(): void {\n  registerRdVideoSource();\n  registerRdEquirectViewport();\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "@rosettadash/web-components",
+  "version": "0.1.0",
+  "description": "RosettaDash Web Components runtime — typed custom elements with optional tokens.css / styles.css. Storybook catalog: clone github.com/KevinEverywhere/rosettadash (port 6006).",
+  "author": "Kevin Ready <kevin@planetkevin.com>",
+  "type": "module",
+  "license": "MIT",
+  "private": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./layout/accordion": {
+      "types": "./src/layout/accordion/index.d.ts",
+      "import": "./src/layout/accordion/index.js",
+      "default": "./src/layout/accordion/index.js"
+    },
+    "./layout/accordion-link-list": {
+      "types": "./src/layout/accordion-link-list/index.d.ts",
+      "import": "./src/layout/accordion-link-list/index.js",
+      "default": "./src/layout/accordion-link-list/index.js"
+    },
+    "./visual/link-list": {
+      "types": "./src/visual/link-list/index.d.ts",
+      "import": "./src/visual/link-list/index.js",
+      "default": "./src/visual/link-list/index.js"
+    },
+    "./media": {
+      "types": "./src/visual/media/index.d.ts",
+      "import": "./src/visual/media/index.js",
+      "default": "./src/visual/media/index.js"
+    },
+    "./wasm": {
+      "types": "./src/wasm/index.d.ts",
+      "import": "./src/wasm/index.js",
+      "default": "./src/wasm/index.js"
+    },
+    "./catalog": {
+      "types": "./src/catalog/index.d.ts",
+      "import": "./src/catalog/index.js",
+      "default": "./src/catalog/index.js"
+    },
+    "./catalog/palette-catalog": {
+      "types": "./src/catalog/index.d.ts",
+      "import": "./src/catalog/index.js",
+      "default": "./src/catalog/index.js"
+    },
+    "./catalog/component-spec": {
+      "types": "./src/catalog/component-spec/index.d.ts",
+      "import": "./src/catalog/component-spec/index.js",
+      "default": "./src/catalog/component-spec/index.js"
+    },
+    "./visual/media/video-source": {
+      "types": "./src/visual/media/video-source/index.d.ts",
+      "import": "./src/visual/media/video-source/index.js",
+      "default": "./src/visual/media/video-source/index.js"
+    },
+    "./visual/media/equirect-viewport": {
+      "types": "./src/visual/media/equirect-viewport/index.d.ts",
+      "import": "./src/visual/media/equirect-viewport/index.js",
+      "default": "./src/visual/media/equirect-viewport/index.js"
+    },
+    "./browser/media": {
+      "import": "./browser/media.js",
+      "default": "./browser/media.js"
+    },
+    "./tokens.css": "./styles/tokens.css",
+    "./styles.css": "./styles/styles.css",
+    "./package.json": "./package.json",
+    "./layout/accordion/index": "./src/layout/accordion/index.js",
+    "./layout/accordion-link-list/index": "./src/layout/accordion-link-list/index.js",
+    "./visual/link-list/index": "./src/visual/link-list/index.js",
+    "./visual/media": "./src/visual/media/index.js",
+    "./visual/media/index": "./src/visual/media/index.js",
+    "./visual/media/video-source/index": "./src/visual/media/video-source/index.js",
+    "./visual/media/equirect-viewport/index": "./src/visual/media/equirect-viewport/index.js",
+    "./wasm/index": "./src/wasm/index.js",
+    "./catalog/index": "./src/catalog/index.js",
+    "./catalog/component-spec/index": "./src/catalog/component-spec/index.js"
+  },
+  "files": [
+    "src",
+    "styles",
+    "media",
+    "browser",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@ffmpeg/ffmpeg": ">=0.12.0",
+    "@ffmpeg/util": ">=0.12.0"
+  },
+  "peerDependenciesMeta": {
+    "@ffmpeg/ffmpeg": {
+      "optional": true
+    },
+    "@ffmpeg/util": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@rosettadash/core": "0.1.0",
+    "tslib": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KevinEverywhere/rosettadash.git",
+    "directory": "packages/web-components"
+  },
+  "homepage": "https://github.com/KevinEverywhere/rosettadash#component-examples-storybook",
+  "bugs": {
+    "url": "https://github.com/KevinEverywhere/rosettadash/issues"
+  },
+  "module": "./src/index.js"
+}

package/src/catalog/_shared/catalog-variant.d.ts

@@ -0,0 +1,5 @@
+/** Visual density / chrome for catalog meta elements — shared across runtimes via BEM modifiers. */
+export type CatalogVariant = 'default' | 'compact' | 'plain';
+export declare const CATALOG_VARIANTS: CatalogVariant[];
+export declare function readCatalogVariant(value: string | null, fallback?: CatalogVariant): CatalogVariant;
+export declare function applyCatalogVariant(el: HTMLElement, blockClass: string, variant: CatalogVariant): void;

package/src/catalog/_shared/catalog-variant.js

@@ -0,0 +1,19 @@
+export const CATALOG_VARIANTS = ['default', 'compact', 'plain'];
+export function readCatalogVariant(value, fallback = 'default') {
+    if (value === 'compact' || value === 'plain' || value === 'default') {
+        return value;
+    }
+    return fallback;
+}
+export function applyCatalogVariant(el, blockClass, variant) {
+    el.classList.add(blockClass);
+    for (const name of CATALOG_VARIANTS) {
+        if (name !== 'default') {
+            el.classList.remove(`${blockClass}--${name}`);
+        }
+    }
+    if (variant !== 'default') {
+        el.classList.add(`${blockClass}--${variant}`);
+    }
+}
+//# sourceMappingURL=catalog-variant.js.map

package/src/catalog/_shared/catalog-variant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-variant.js","sourceRoot":"","sources":["../../../../../../packages/web-components/src/catalog/_shared/catalog-variant.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAqB,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;AAElF,MAAM,UAAU,kBAAkB,CAAC,KAAoB,EAAE,WAA2B,SAAS;IAC3F,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACpE,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAAe,EAAE,UAAkB,EAAE,OAAuB;IAC9F,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAC7B,KAAK,MAAM,IAAI,IAAI,gBAAgB,EAAE,CAAC;QACpC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,UAAU,KAAK,IAAI,EAAE,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IACD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,UAAU,KAAK,OAAO,EAAE,CAAC,CAAC;IAChD,CAAC;AACH,CAAC"}

package/src/catalog/_shared/markup-shared.d.ts

@@ -0,0 +1,6 @@
+import { type CatalogVariant } from '../_shared/catalog-variant.js';
+/** Map taxonomy type to documented custom-element-style tag (rd-*). */
+export declare function taxonomyToRdTag(componentType: string): string;
+export declare function escapeHtml(value: string): string;
+export declare function readMarkupVariant(el: HTMLElement): CatalogVariant;
+export declare function applyMarkupVariant(el: HTMLElement, blockClass: string): void;

package/src/catalog/_shared/markup-shared.js

@@ -0,0 +1,21 @@
+import { applyCatalogVariant, readCatalogVariant } from '../_shared/catalog-variant.js';
+/** Map taxonomy type to documented custom-element-style tag (rd-*). */
+export function taxonomyToRdTag(componentType) {
+    const stripped = componentType.replace(/^(visual|domain|layout|logic|infra)\./, '');
+    const kebab = stripped.replace(/\./g, '-');
+    return `rd-${kebab}`;
+}
+export function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+export function readMarkupVariant(el) {
+    return readCatalogVariant(el.getAttribute('variant'));
+}
+export function applyMarkupVariant(el, blockClass) {
+    applyCatalogVariant(el, blockClass, readMarkupVariant(el));
+}
+//# sourceMappingURL=markup-shared.js.map

package/src/catalog/_shared/markup-shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markup-shared.js","sourceRoot":"","sources":["../../../../../../packages/web-components/src/catalog/_shared/markup-shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAuB,MAAM,+BAA+B,CAAC;AAE7G,uEAAuE;AACvE,MAAM,UAAU,eAAe,CAAC,aAAqB;IACnD,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,CAAC,uCAAuC,EAAE,EAAE,CAAC,CAAC;IACpF,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC3C,OAAO,MAAM,KAAK,EAAE,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,KAAa;IACtC,OAAO,KAAK;SACT,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC7B,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAAe;IAC/C,OAAO,kBAAkB,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;AACxD,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAe,EAAE,UAAkB;IACpE,mBAAmB,CAAC,EAAE,EAAE,UAAU,EAAE,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC;AAC7D,CAAC"}

package/src/catalog/component-attribute/index.d.ts

@@ -0,0 +1,2 @@
+export type { ComponentAttributeProps } from './rd-attribute.js';
+export { RD_ATTRIBUTE_TAG, RdAttributeElement, registerRdAttribute } from './rd-attribute.js';

package/src/catalog/component-attribute/index.js

@@ -0,0 +1,2 @@
+export { RD_ATTRIBUTE_TAG, RdAttributeElement, registerRdAttribute } from './rd-attribute.js';
+//# sourceMappingURL=index.js.map

package/src/catalog/component-attribute/index.js.map

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

package/src/catalog/component-attribute/rd-attribute.d.ts

@@ -0,0 +1,20 @@
+export declare const RD_ATTRIBUTE_TAG = "rd-attribute";
+/** One documented attribute on a component or subcomponent (`required` = black, `optional` = grey). */
+export interface ComponentAttributeProps {
+    name: string;
+    value?: string;
+    required?: boolean;
+    optional?: boolean;
+    /** When set, renders as output binding rather than rd-* property. */
+    output?: boolean;
+}
+export declare class RdAttributeElement extends HTMLElement {
+    static readonly tagName = "rd-attribute";
+    static get observedAttributes(): string[];
+    get attrName(): string;
+    get attrValue(): string;
+    get isOutput(): boolean;
+    get isRequired(): boolean;
+    get requirementClass(): 'required' | 'optional';
+}
+export declare function registerRdAttribute(): void;

package/src/catalog/component-attribute/rd-attribute.js

@@ -0,0 +1,27 @@
+import { defineRosettaElement, readString } from '../../lib/element-utils.js';
+export const RD_ATTRIBUTE_TAG = 'rd-attribute';
+export class RdAttributeElement extends HTMLElement {
+    static tagName = RD_ATTRIBUTE_TAG;
+    static get observedAttributes() {
+        return ['name', 'value', 'output'];
+    }
+    get attrName() {
+        return readString(this.getAttribute('name'), '');
+    }
+    get attrValue() {
+        return readString(this.getAttribute('value'), '');
+    }
+    get isOutput() {
+        return this.hasAttribute('output');
+    }
+    get isRequired() {
+        return this.hasAttribute('required');
+    }
+    get requirementClass() {
+        return this.hasAttribute('required') ? 'required' : 'optional';
+    }
+}
+export function registerRdAttribute() {
+    defineRosettaElement(RD_ATTRIBUTE_TAG, RdAttributeElement);
+}
+//# sourceMappingURL=rd-attribute.js.map

package/src/catalog/component-attribute/rd-attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rd-attribute.js","sourceRoot":"","sources":["../../../../../../packages/web-components/src/catalog/component-attribute/rd-attribute.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,CAAC,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAY/C,MAAM,OAAO,kBAAmB,SAAQ,WAAW;IACjD,MAAM,CAAU,OAAO,GAAG,gBAAgB,CAAC;IAE3C,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC;IACnD,CAAC;IAED,IAAI,SAAS;QACX,OAAO,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IACpD,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACvC,CAAC;IAED,IAAI,gBAAgB;QAClB,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;IACjE,CAAC;;AAGH,MAAM,UAAU,mBAAmB;IACjC,oBAAoB,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;AAC7D,CAAC"}

package/src/catalog/component-name/index.d.ts

@@ -0,0 +1,2 @@
+export type { BuildComponentMarkupOptions } from './rd-component-name.js';
+export { RD_COMPONENT_NAME_TAG, RdComponentNameElement, registerRdComponentName, createComponentNameElement, } from './rd-component-name.js';

package/src/catalog/component-name/index.js

@@ -0,0 +1,2 @@
+export { RD_COMPONENT_NAME_TAG, RdComponentNameElement, registerRdComponentName, createComponentNameElement, } from './rd-component-name.js';
+//# sourceMappingURL=index.js.map

package/src/catalog/component-name/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../packages/web-components/src/catalog/component-name/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,0BAA0B,GAC3B,MAAM,wBAAwB,CAAC"}

package/src/catalog/component-name/rd-component-name.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentDefinition } from '@rosettadash/core';
+export declare const RD_COMPONENT_NAME_TAG = "rd-component-name";
+export declare class RdComponentNameElement extends HTMLElement {
+    static readonly tagName = "rd-component-name";
+    private resourcesReady;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    whenReady(): Promise<void>;
+    get displayTag(): string;
+    get label(): string;
+    get description(): string;
+    private renderAttributeLine;
+    private renderSubcomponent;
+    private renderMarkupTree;
+    private hideMarkupChildren;
+    private mountShadow;
+    private paint;
+}
+export declare function registerRdComponentName(): void;
+export interface BuildComponentMarkupOptions {
+    dependencies?: string[];
+    assumptions?: string[];
+    /** Map dependency text to subcomponent tag hints */
+    subcomponents?: Array<{
+        tag: string;
+        bind?: string;
+        required?: boolean;
+        attributes?: Array<{
+            name: string;
+            value?: string;
+            required?: boolean;
+        }>;
+    }>;
+}
+/** Build declarative markup tree from registry definition — no HTML strings. */
+export declare function createComponentNameElement(definition: ComponentDefinition, options?: BuildComponentMarkupOptions & {
+    variant?: string;
+    navGroupId?: string;
+}): RdComponentNameElement;

package/src/catalog/component-name/rd-component-name.js

@@ -0,0 +1,219 @@
+import { defineRosettaElement, readString } from '../../lib/element-utils.js';
+import { applyShadowMount, ensureShadowBase, getShadowBase, loadShadowPairForTag } from '../../lib/shadow-base.js';
+import { loadTextResource } from '../../lib/shadow-resources.js';
+import { RD_ATTRIBUTE_TAG } from '../component-attribute/rd-attribute.js';
+import { escapeHtml, applyMarkupVariant, taxonomyToRdTag } from '../_shared/markup-shared.js';
+import { RD_SUBCOMPONENT_NAME_TAG } from '../subcomponent-name/rd-subcomponent-name.js';
+export const RD_COMPONENT_NAME_TAG = 'rd-component-name';
+export class RdComponentNameElement extends HTMLElement {
+    static tagName = RD_COMPONENT_NAME_TAG;
+    resourcesReady = null;
+    static get observedAttributes() {
+        return ['tag', 'label', 'description', 'component-type', 'variant', 'nav-group-id'];
+    }
+    connectedCallback() {
+        if (!this.shadowRoot) {
+            this.attachShadow({ mode: 'open' });
+        }
+        const nav = readString(this.getAttribute('nav-group-id'), '');
+        if (nav) {
+            this.setAttribute('data-nav-group', nav);
+        }
+        this.resourcesReady = this.mountShadow();
+        void this.resourcesReady.then(() => this.paint());
+    }
+    attributeChangedCallback() {
+        if (this.shadowRoot && this.resourcesReady) {
+            void this.resourcesReady.then(() => this.paint());
+        }
+    }
+    whenReady() {
+        return this.resourcesReady ?? Promise.resolve();
+    }
+    get displayTag() {
+        const explicit = readString(this.getAttribute('tag'), '');
+        if (explicit) {
+            return explicit.startsWith('rd-') ? explicit : `rd-${explicit}`;
+        }
+        const type = readString(this.getAttribute('component-type'), '');
+        return type ? taxonomyToRdTag(type) : 'rd-component';
+    }
+    get label() {
+        return readString(this.getAttribute('label'), '');
+    }
+    get description() {
+        return readString(this.getAttribute('description'), '');
+    }
+    renderAttributeLine(attr, indent) {
+        const reqClass = attr.requirementClass;
+        const flag = reqClass;
+        const prefix = attr.isOutput ? '' : 'rd-';
+        const name = escapeHtml(attr.attrName);
+        const value = attr.attrValue ? escapeHtml(attr.attrValue) : '';
+        const valuePart = value
+            ? `<span class="rd-markup-tree__punct">=</span><span class="rd-markup-tree__punct">"</span><span class="rd-markup-tree__attr--${reqClass}">${value}</span><span class="rd-markup-tree__punct">"</span>`
+            : '';
+        return `${indent}<span class="rd-markup-tree__attr--${reqClass}">${prefix}${name}</span>${valuePart} <span class="rd-markup-tree__flag rd-markup-tree__flag--${reqClass}">${flag}</span>`;
+    }
+    renderSubcomponent(sub, indent) {
+        const reqClass = sub.requirementClass;
+        const flag = reqClass;
+        const tag = escapeHtml(sub.subTag);
+        const attrs = sub.attributeElements;
+        const childSubs = [...sub.querySelectorAll(`:scope > ${RD_SUBCOMPONENT_NAME_TAG}`)];
+        if (attrs.length === 0 && childSubs.length === 0) {
+            const bind = sub.bindHint
+                ? ` <span class="rd-markup-tree__attr--${reqClass}">rd-bind="${escapeHtml(sub.bindHint)}"</span>`
+                : '';
+            return `${indent}<span class="rd-markup-tree__punct">&lt;</span><span class="rd-markup-tree__tag">${tag}</span>${bind} <span class="rd-markup-tree__flag rd-markup-tree__flag--${reqClass}">${flag}</span><span class="rd-markup-tree__punct"> /&gt;</span>`;
+        }
+        const innerIndent = `${indent}      `;
+        const attrLines = attrs.map((a) => this.renderAttributeLine(a, innerIndent)).join('\n');
+        const childLines = childSubs.map((c) => this.renderSubcomponent(c, `${indent}  `)).join('\n');
+        return `${indent}<span class="rd-markup-tree__punct">&lt;</span><span class="rd-markup-tree__tag">${tag}</span> <span class="rd-markup-tree__flag rd-markup-tree__flag--${reqClass}">${flag}</span><span class="rd-markup-tree__punct">&gt;</span>\n${attrLines}${childLines ? `\n${childLines}` : ''}\n${indent}<span class="rd-markup-tree__punct">&lt;/</span><span class="rd-markup-tree__tag">${tag}</span><span class="rd-markup-tree__punct">&gt;</span>`;
+    }
+    renderMarkupTree() {
+        const tag = escapeHtml(this.displayTag);
+        const rootAttrs = [...this.querySelectorAll(`:scope > ${RD_ATTRIBUTE_TAG}`)];
+        const rootSubs = [...this.querySelectorAll(`:scope > ${RD_SUBCOMPONENT_NAME_TAG}`)];
+        if (rootAttrs.length === 0 && rootSubs.length === 0) {
+            return `<span class="rd-markup-tree__punct">&lt;</span><span class="rd-markup-tree__tag">${tag}</span><span class="rd-markup-tree__punct"> /&gt;</span>`;
+        }
+        const openIndent = '      ';
+        const attrLines = rootAttrs.map((a) => this.renderAttributeLine(a, openIndent)).join('\n');
+        const subLines = rootSubs.map((s) => this.renderSubcomponent(s, '  ')).join('\n');
+        return `<span class="rd-markup-tree__punct">&lt;</span><span class="rd-markup-tree__tag">${tag}</span>\n${attrLines}\n<span class="rd-markup-tree__punct">&gt;</span>\n${subLines}\n<span class="rd-markup-tree__punct">&lt;/</span><span class="rd-markup-tree__tag">${tag}</span><span class="rd-markup-tree__punct">&gt;</span>`;
+    }
+    hideMarkupChildren() {
+        this.querySelectorAll(`${RD_ATTRIBUTE_TAG}, ${RD_SUBCOMPONENT_NAME_TAG}`).forEach((el) => {
+            el.hidden = true;
+        });
+    }
+    async mountShadow() {
+        const root = this.shadowRoot;
+        if (!root || root.querySelector('[data-ref="root"]')) {
+            return;
+        }
+        const pair = await loadShadowPairForTag(RD_COMPONENT_NAME_TAG, './rd-component-name.html', './rd-component-name.css');
+        const markupCss = await loadTextResource('../_shared/markup-tree.css', getShadowBase(RD_COMPONENT_NAME_TAG));
+        applyShadowMount(root, { html: pair.html, css: `${pair.css}\n${markupCss}` });
+    }
+    paint() {
+        const root = this.shadowRoot;
+        if (!root) {
+            return;
+        }
+        this.hideMarkupChildren();
+        const headerEl = root.querySelector('[data-ref="header"]');
+        if (headerEl) {
+            headerEl.innerHTML = this.label
+                ? `<header class="rd-component-name__header"><h3>${escapeHtml(this.label)}</h3>${this.description ? `<p>${escapeHtml(this.description)}</p>` : ''}</header>`
+                : '';
+        }
+        const tree = root.querySelector('[data-ref="tree"]');
+        if (tree) {
+            tree.innerHTML = this.renderMarkupTree();
+        }
+        applyMarkupVariant(this, 'rd-component-name');
+    }
+}
+export function registerRdComponentName() {
+    ensureShadowBase(RD_COMPONENT_NAME_TAG);
+    defineRosettaElement(RD_COMPONENT_NAME_TAG, RdComponentNameElement);
+}
+/** Build declarative markup tree from registry definition — no HTML strings. */
+export function createComponentNameElement(definition, options = {}) {
+    const el = document.createElement(RD_COMPONENT_NAME_TAG);
+    el.setAttribute('component-type', definition.type);
+    el.setAttribute('label', definition.label);
+    if (definition.description) {
+        el.setAttribute('description', definition.description);
+    }
+    if (options.variant) {
+        el.setAttribute('variant', options.variant);
+    }
+    if (options.navGroupId) {
+        el.setAttribute('nav-group-id', options.navGroupId);
+    }
+    for (const port of definition.inputs) {
+        const attr = document.createElement(RD_ATTRIBUTE_TAG);
+        attr.setAttribute('name', port.name);
+        attr.setAttribute('value', port.dataType);
+        if (port.required) {
+            attr.setAttribute('required', '');
+        }
+        else {
+            attr.setAttribute('optional', '');
+        }
+        el.appendChild(attr);
+    }
+    for (const port of definition.outputs) {
+        const attr = document.createElement(RD_ATTRIBUTE_TAG);
+        attr.setAttribute('name', port.name);
+        attr.setAttribute('value', port.dataType);
+        attr.setAttribute('output', '');
+        attr.setAttribute('optional', '');
+        el.appendChild(attr);
+    }
+    for (const property of definition.properties) {
+        const attr = document.createElement(RD_ATTRIBUTE_TAG);
+        attr.setAttribute('name', property.key);
+        if (property.default !== undefined) {
+            attr.setAttribute('value', String(property.default));
+        }
+        else if (property.type) {
+            attr.setAttribute('value', property.type);
+        }
+        if (property.required) {
+            attr.setAttribute('required', '');
+        }
+        else {
+            attr.setAttribute('optional', '');
+        }
+        el.appendChild(attr);
+    }
+    for (const sub of options.subcomponents ?? []) {
+        const subEl = document.createElement(RD_SUBCOMPONENT_NAME_TAG);
+        subEl.setAttribute('tag', sub.tag);
+        if (sub.bind) {
+            subEl.setAttribute('bind', sub.bind);
+        }
+        if (sub.required) {
+            subEl.setAttribute('required', '');
+        }
+        else {
+            subEl.setAttribute('optional', '');
+        }
+        for (const a of sub.attributes ?? []) {
+            const attr = document.createElement(RD_ATTRIBUTE_TAG);
+            attr.setAttribute('name', a.name);
+            if (a.value) {
+                attr.setAttribute('value', a.value);
+            }
+            if (a.required) {
+                attr.setAttribute('required', '');
+            }
+            else {
+                attr.setAttribute('optional', '');
+            }
+            subEl.appendChild(attr);
+        }
+        el.appendChild(subEl);
+    }
+    for (const dep of options.dependencies ?? []) {
+        const attr = document.createElement(RD_ATTRIBUTE_TAG);
+        attr.setAttribute('name', 'depends-on');
+        attr.setAttribute('value', dep);
+        attr.setAttribute('optional', '');
+        el.appendChild(attr);
+    }
+    for (const assumption of options.assumptions ?? []) {
+        const attr = document.createElement(RD_ATTRIBUTE_TAG);
+        attr.setAttribute('name', 'assume');
+        attr.setAttribute('value', assumption);
+        attr.setAttribute('optional', '');
+        el.appendChild(attr);
+    }
+    return el;
+}
+//# sourceMappingURL=rd-component-name.js.map