@aethervtt/shard-audio-editor 0.0.0-stage → 0.2.0

package/dist/schema.js

@@ -0,0 +1,155 @@
+import {
+  AudioCollection,
+  AudioEvent,
+  AudioMixer,
+  AudioParameters,
+  AudioSnapshot,
+  MusicProgram
+} from "@aethervtt/shard-audio";
+import {
+  ShardError
+} from "@aethervtt/shard-core";
+const audioEditorTypes = [
+  AudioEvent,
+  AudioParameters,
+  AudioCollection,
+  AudioMixer,
+  AudioSnapshot,
+  MusicProgram
+];
+function getAudioEditorSchema(type) {
+  return audioEditorTypes.find((schema) => schema.name === type);
+}
+function editorError(code, message, path, cause) {
+  return new ShardError(`audio-editor/${code}`, message, {
+    path,
+    cause,
+    hint: "Check the selected document and host capabilities, then try again."
+  });
+}
+function asEditorError(error) {
+  return error instanceof ShardError ? error : editorError("invalid-document", String(error), void 0, error);
+}
+function clone(value) {
+  return structuredClone(value);
+}
+function equal(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+function merge(base, overrides) {
+  const out = clone(base);
+  for (const key of Object.keys(overrides)) {
+    if (key === "__proto__" || key === "constructor" || key === "prototype") continue;
+    const value = overrides[key];
+    const previous = out[key];
+    out[key] = value && typeof value === "object" && !Array.isArray(value) && previous && typeof previous === "object" && !Array.isArray(previous) ? merge(previous, value) : clone(value);
+  }
+  return out;
+}
+function knownFields(fields, value) {
+  const out = {};
+  for (const key of Object.keys(fields)) {
+    if (Object.hasOwn(value, key)) out[key] = knownField(fields[key], value[key]);
+  }
+  return out;
+}
+function knownField(field, value) {
+  if (field.kind === "struct" && field.fields && value && typeof value === "object" && !Array.isArray(value))
+    return knownFields(field.fields, value);
+  if (field.kind === "list" && field.item && Array.isArray(value))
+    return value.map((item) => knownField(field.item, item));
+  return value;
+}
+function audioDocumentReferences(fields, value, prefix = "") {
+  const refs = [];
+  for (const key of Object.keys(fields))
+    collectReference(fields[key], value[key], `${prefix}/${key}`, refs);
+  return refs;
+}
+function collectReference(field, value, path, refs) {
+  if (!value) return;
+  if (field.kind === "handle" && typeof value === "object" && !Array.isArray(value)) {
+    const id = value.guid ?? value.path;
+    if (typeof id === "string") refs.push({ id, type: field.assetType, path });
+  } else if (field.kind === "struct" && field.fields && typeof value === "object" && !Array.isArray(value)) {
+    refs.push(...audioDocumentReferences(field.fields, value, path));
+  } else if (field.kind === "list" && field.item && Array.isArray(value)) {
+    value.forEach((item, index) => {
+      collectReference(field.item, item, `${path}/${index}`, refs);
+    });
+  }
+}
+async function materializeAudioDocument(document, documents, signal, chain = []) {
+  if (chain.includes(document.id) || chain.length >= 32)
+    throw editorError(
+      "invalid-document",
+      "Document inheritance contains a cycle or exceeds 32 levels.",
+      "/$extends"
+    );
+  const schema = getAudioEditorSchema(document.type);
+  if (!schema || (document.schemaVersion ?? 1) > schema.version)
+    throw editorError("unsupported-schema", `Unsupported document schema ${document.type}.`);
+  let value = clone(document.value);
+  if (value.$extends !== void 0) {
+    if (typeof value.$extends !== "string")
+      throw editorError("invalid-document", "$extends must be a host document ID.", "/$extends");
+    const parent = await documents.read(value.$extends, signal);
+    if (parent.type !== document.type)
+      throw editorError("invalid-document", "Inherited document type does not match.", "/$extends");
+    const inherited = await materializeAudioDocument(parent, documents, signal, [
+      ...chain,
+      document.id
+    ]);
+    value = merge(inherited.value, value);
+    delete value.$extends;
+  }
+  const known = knownFields(schema.fields, value);
+  const normalized = schema.serialize(schema.deserialize(known));
+  return { ...document, value: normalized };
+}
+async function validateAudioDocument(document, documents, assets, signal) {
+  try {
+    const effective = await materializeAudioDocument(document, documents, signal);
+    const schema = getAudioEditorSchema(document.type);
+    const errors = schema.importer.check?.(effective.value, () => void 0) ?? [];
+    const references = audioDocumentReferences(schema.fields, effective.value);
+    for (const ref of references) {
+      try {
+        const asset = await assets.get(ref.id, signal);
+        if (asset.type !== ref.type)
+          errors.push(
+            editorError(
+              "invalid-document",
+              `Expected ${ref.type}, received ${asset.type}.`,
+              ref.path
+            )
+          );
+      } catch (cause) {
+        errors.push(
+          editorError(
+            "asset-unavailable",
+            `The host cannot resolve asset ${ref.id}.`,
+            ref.path,
+            cause
+          )
+        );
+      }
+    }
+    return { effective, errors };
+  } catch (error) {
+    return { errors: [asEditorError(error)] };
+  }
+}
+export {
+  asEditorError,
+  audioDocumentReferences,
+  audioEditorTypes,
+  clone,
+  editorError,
+  equal,
+  getAudioEditorSchema,
+  knownFields,
+  materializeAudioDocument,
+  merge,
+  validateAudioDocument
+};

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+/** Scoped, host-overridable tokens. No stylesheet is installed until a view is mounted. */
+export declare const audioEditorStyles = "\n:host {\n  display:block; min-width:0; min-height:0; height:100%;\n  --ae-background:#15191c; --ae-surface:#1d2327; --ae-input:#111619;\n  --ae-text:#e5ecef; --ae-muted:#9aaab2; --ae-border:#344148;\n  --ae-accent:#7ce2c3; --ae-danger:#ff9ca5; --ae-radius:10px;\n  --ae-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;\n  --ae-space:10px; --ae-control-height:32px; --ae-on-accent:#102d25;\n  --ae-hover:#293339; --ae-subtle:#232d32; --ae-track:#7ce2c3;\n  color:var(--ae-text); font:12px/1.5 var(--ae-font); color-scheme:dark;\n  -webkit-font-smoothing:antialiased;\n}\n:host([data-theme=\"light\"]) {\n  --ae-background:#f3f6f7; --ae-surface:#fff; --ae-input:#f8fafb;\n  --ae-text:#203039; --ae-muted:#556b77; --ae-border:#cbd5db;\n  --ae-accent:#08765c; --ae-danger:#b22e43; --ae-on-accent:#fff;\n  --ae-hover:#e7edef; --ae-subtle:#e9eff1; --ae-track:#08765c; color-scheme:light;\n}\n* { box-sizing:border-box }\n[hidden] { display:none!important }\n.editor { container-type:inline-size; display:flex; flex-direction:column; height:100%; min-height:160px; min-width:0; background:var(--ae-background); overflow:hidden; border:1px solid var(--ae-border); border-radius:var(--ae-radius) }\n.toolbar,.tabs,.actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ae-space) }\n.toolbar { padding:14px 16px; gap:8px; border-bottom:1px solid var(--ae-border); background:var(--ae-surface); flex-shrink:0 }\n.document-identity { display:flex; align-items:center; gap:10px; flex:1 1 150px; min-width:0; margin-inline-end:8px }\n.document-mark { width:32px; height:32px; display:grid; place-items:center; color:var(--ae-accent); background:color-mix(in srgb,var(--ae-accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--ae-accent) 22%,transparent); border-radius:8px; flex-shrink:0 }\n.document-text { min-width:0 }\n.document-kind,.eyebrow { display:block; font-size:9px; font-weight:650; letter-spacing:.13em; text-transform:uppercase; color:var(--ae-muted) }\n.title { display:block; font-size:13px; font-weight:650; overflow-wrap:anywhere; letter-spacing:-.01em }\n.document-identity[data-dirty=true] .title::after { content:' \u2022'; color:var(--ae-accent) }\n.toolbar button { flex-shrink:0 }\n.toolbar button[data-command=Undo],.toolbar button[data-command=Redo] { padding-inline:7px; background:transparent; border-color:transparent; color:var(--ae-muted) }\n.toolbar button[data-command=Play] { background:var(--ae-accent); border-color:var(--ae-accent); color:var(--ae-on-accent); font-weight:700; padding-inline:14px }\n.toolbar button[data-command=Play]:hover:not(:disabled) { filter:brightness(1.08) }\n.toolbar button[data-command=Stop] { background:transparent }\n.tabs { padding:0 12px; gap:0; border-bottom:1px solid var(--ae-border); flex-shrink:0; background:var(--ae-surface) }\n.tabs button { flex:1 1 auto; border:0; border-radius:0; background:transparent; color:var(--ae-muted); padding:12px 8px; position:relative; font-weight:550; min-height:44px }\n.tabs button .icon { width:15px; height:15px }\n.tabs button[aria-selected=true] { color:var(--ae-accent); background:color-mix(in srgb,var(--ae-accent) 6%,transparent) }\n.tabs button[aria-selected=true]::after { content:''; position:absolute; bottom:0; inset-inline:12px; height:2px; background:var(--ae-accent); border-radius:2px }\n.body { overflow:auto; flex:1; min-height:0; padding:20px; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--ae-border) transparent }\n.panel { min-width:0 }\nh2,h3,p { margin:0 0 var(--ae-space) }\nh2 { font-size:18px; font-weight:650; letter-spacing:-.03em } h3 { font-size:13px; font-weight:650 }\nbutton,input,select,textarea { font:inherit; color:inherit; max-width:100%; min-width:0 }\nbutton,select,input,textarea { border:1px solid var(--ae-border); border-radius:5px; background:var(--ae-input); padding:6px 9px }\nbutton,select,input:not([type=checkbox]) { min-height:var(--ae-control-height) }\nbutton { display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; white-space:normal; overflow-wrap:anywhere; line-height:1.35; transition:background-color .12s,border-color .12s }\nbutton:hover:not(:disabled) { background:var(--ae-hover); border-color:color-mix(in srgb,var(--ae-muted) 65%,var(--ae-border)) }\nbutton:active:not(:disabled) { background:var(--ae-subtle) }\nbutton:disabled { cursor:default; opacity:.42 }\nbutton.primary { border-color:var(--ae-accent); color:var(--ae-accent) }\nbutton[data-intent=danger] { color:var(--ae-muted); background:transparent; border-color:transparent }\nbutton[data-intent=danger]:hover:not(:disabled) { color:var(--ae-danger); background:color-mix(in srgb,var(--ae-danger) 8%,transparent) }\nbutton[data-intent=add] { color:var(--ae-accent); border-style:dashed; background:transparent; margin-top:6px }\n:focus-visible { outline:2px solid var(--ae-accent); outline-offset:3px }\n.icon { display:block; width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round }\ninput[type=checkbox] { width:17px; height:17px; accent-color:var(--ae-accent) }\ninput[type=range] { width:100%; accent-color:var(--ae-accent); padding:0; background:transparent; border:0; cursor:pointer }\ninput[type=number] { font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px }\ntextarea { width:100%; min-height:110px; resize:vertical; font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace }\nlabel,.field { display:flex; flex-direction:column; gap:5px; min-width:0 }\n.field { margin:10px 0 }\n.field .field { margin:0 }\n.field-label { color:var(--ae-muted); font-size:11px; overflow-wrap:anywhere }\n.field input,.field select { width:100% }\n.field input[type=checkbox] { width:17px }\n.field>button { align-self:flex-start; min-height:24px; font-size:10px; padding:3px 6px }\n.authoring-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start }\n.overview,.inspector { min-width:0 }\n.overview-heading { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:22px }\n.overview-heading .eyebrow { color:var(--ae-accent); margin-bottom:4px }\n.overview-heading p { color:var(--ae-muted); margin:0; max-width:48ch; font-size:11px }\n.overview-heading h2 { margin-bottom:5px }\n.overview-count { color:var(--ae-muted); white-space:nowrap; font:10px/1.5 ui-monospace,monospace; padding-top:5px }\n.inspector { padding:16px; background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:8px }\n.inspector-heading { padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid var(--ae-border) }\n.inspector-heading h3 { margin:2px 0 0; font-size:13px }\n.properties { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:0 16px; align-items:start }\n.properties>details { grid-column:1/-1 }\n.field-inline { display:flex; flex-wrap:wrap; align-items:center; gap:6px }\n.field-inline>* { flex:1 1 70px }\n.field-inline button { flex:0 1 auto }\n.hint,.status { color:var(--ae-muted); font-size:11px; overflow-wrap:anywhere }\n.status { padding:9px 14px; border-top:1px solid var(--ae-border); flex-shrink:0; background:var(--ae-surface); font-size:10px; line-height:1.6 }\n.status[data-state=playing] { border-top-color:color-mix(in srgb,var(--ae-accent) 55%,var(--ae-border)) }\n.error { color:var(--ae-danger); white-space:pre-wrap; overflow-wrap:anywhere }\n.notice { padding:12px; border:1px solid var(--ae-border); border-radius:6px; margin-bottom:var(--ae-space); background:var(--ae-surface) }\ndetails { margin:14px 0; border:0; border-top:1px solid var(--ae-border); padding:12px 0 0; min-width:0 }\ndetails details { margin:8px 0; border:0; padding:6px 0 6px 10px; border-inline-start:2px solid var(--ae-border) }\nsummary { cursor:pointer; overflow-wrap:anywhere; font-weight:600; min-height:26px; font-size:11px; color:var(--ae-text) }\nsummary::marker { color:var(--ae-muted); font-size:10px }\nsummary:hover { color:var(--ae-accent) }\n.list-item { padding:10px 0; border-bottom:1px solid var(--ae-border); min-width:0 }\n.list-item:last-child { border:0 }\n.item-title { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px }\n.item-title span { overflow-wrap:anywhere; flex:1; font-weight:600 }\n.item-title button { padding:3px 5px; min-height:24px; font-size:10px }\n.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:var(--ae-space) }\n.card { padding:14px; border:1px solid var(--ae-border); border-radius:7px; background:var(--ae-surface); min-width:0; margin-bottom:10px }\n.mixer-strips { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(124px,1fr); overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:var(--ae-border) transparent; gap:8px; margin-bottom:20px }\n.mixer-strip { background:var(--ae-surface); border:1px solid var(--ae-border); border-top:3px solid var(--ae-track); border-radius:6px; padding:14px 10px; min-width:0; text-align:center }\n.mixer-strip:nth-child(3n+2),.wave-lane:nth-child(3n+2) { --ae-track:#ab9ef0 }\n.mixer-strip:nth-child(3n+3),.wave-lane:nth-child(3n+3) { --ae-track:#e8b97b }\n:host([data-theme=light]) .mixer-strip:nth-child(3n+2),:host([data-theme=light]) .wave-lane:nth-child(3n+2) { --ae-track:#7059b5 }\n:host([data-theme=light]) .mixer-strip:nth-child(3n+3),:host([data-theme=light]) .wave-lane:nth-child(3n+3) { --ae-track:#936424 }\n.mixer-strip h3 { margin:0 0 3px; font-size:13px; overflow-wrap:anywhere }\n.bus-route { color:var(--ae-muted); font-size:10px; display:block; margin-bottom:12px }\n.fader-row { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding-block:8px }\n.fader-row input[type=range] { writing-mode:vertical-lr; direction:rtl; width:24px; height:144px; min-height:0; accent-color:var(--ae-track) }\n.fader-row input[type=number] { width:70px; text-align:center }\n.fader-row>.hint { margin-top:-6px; font-size:9px; text-transform:uppercase }\n.meter-caption { display:block; font-size:9px; line-height:1.4; margin-top:5px; min-height:14px }\n.event-waves { display:grid; gap:12px; margin-bottom:20px }\n.wave-lane { position:relative; min-width:0; background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:7px; overflow:hidden }\n.track-header { display:flex; gap:10px; align-items:center; padding:12px; border-bottom:1px solid var(--ae-border) }\n.track-number { font:10px ui-monospace,monospace; color:var(--ae-track); background:color-mix(in srgb,var(--ae-track) 10%,transparent); padding:5px 6px; border-radius:4px }\n.track-name { flex:1; min-width:0; font-size:12px; font-weight:600; overflow-wrap:anywhere }\n.track-name { justify-content:flex-start; padding:0; min-height:24px; background:transparent; border-color:transparent; text-align:start }\n.track-header .badge { color:var(--ae-track) }\n.wave-lane canvas { height:90px; border-radius:0; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--ae-subtle) 25%),var(--ae-input) }\n.track-meta { display:flex; flex-wrap:wrap; gap:6px 14px; padding:9px 12px; color:var(--ae-muted); font:10px/1.5 ui-monospace,monospace; border-top:1px solid var(--ae-border) }\n.track-meta span:last-child { margin-inline-start:auto; color:var(--ae-track) }\n.timing-ruler { display:flex; justify-content:space-between; color:var(--ae-muted); font:10px ui-monospace,monospace; margin-bottom:10px }\n.timing-row { margin-bottom:12px }\n.timing-track { position:relative; height:12px; margin-top:4px; background:var(--ae-input); border-radius:3px }\n.timing-mark { position:absolute; height:100%; background:var(--ae-accent); border-radius:3px; max-width:100% }\n.timing-mark[data-source-length=true] { transform:translateX(-50%); border-radius:50% }\n.wave-placeholder { display:grid; place-items:center; min-height:90px; color:var(--ae-muted); font-size:11px; background:var(--ae-input) }\n.catalog { max-height:440px; overflow:auto; position:relative; margin-block:16px; border:1px solid var(--ae-border); border-radius:7px; scrollbar-width:thin; scrollbar-color:var(--ae-border) transparent }\n.catalog-row { display:flex; align-items:center; gap:10px; min-height:64px; height:64px; padding:8px 12px; overflow:hidden; border-bottom:1px solid var(--ae-border); background:var(--ae-surface) }\n.catalog-row:last-child { border-bottom:0 }\n.catalog-row:hover { background:var(--ae-hover) }\n.catalog-row[data-selected=true] { background:color-mix(in srgb,var(--ae-accent) 8%,var(--ae-surface)); box-shadow:inset 3px 0 var(--ae-accent) }\n.catalog-symbol { color:var(--ae-accent); background:var(--ae-subtle); padding:8px; border-radius:6px; flex-shrink:0 }\n.catalog-row button { flex:1; justify-content:flex-start; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:transparent; border-color:transparent; padding:4px; font-weight:550 }\n.badge { display:inline-block; color:var(--ae-muted); background:var(--ae-subtle); border-radius:4px; padding:3px 6px; font-size:9px; font-weight:500; white-space:nowrap }\ncanvas { display:block; width:100%; height:80px; background:var(--ae-input); border-radius:6px }\nmeter { display:block; width:100%; height:7px; accent-color:var(--ae-track); border:0; border-radius:3px; overflow:hidden; background:var(--ae-input) }\nmeter::-webkit-meter-bar { background:var(--ae-input); border:0; border-radius:3px; height:7px }\nmeter::-webkit-meter-optimum-value { background:var(--ae-track) }\nmeter::-moz-meter-bar { background:var(--ae-track) }\npre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; font:10px/1.7 ui-monospace,monospace; padding:12px; background:var(--ae-input); border-radius:6px }\n.empty { padding:28px 12px; color:var(--ae-muted); text-align:center }\n.music-section { border-inline-start:3px solid var(--ae-accent) }\n.music-section:nth-of-type(2n) { border-inline-start-color:#ab9ef0 }\n.music-section h3 { font-size:14px; letter-spacing:-.02em }\n.music-section .hint { padding:8px 0; margin:0; border-bottom:1px solid var(--ae-border); font-family:ui-monospace,monospace; font-size:10px }\n.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }\n@container (min-width:760px) {\n  .authoring-layout { grid-template-columns:minmax(0,1fr) 280px; gap:24px }\n  .inspector { align-self:start }\n  .overview { position:sticky; top:0 }\n}\n@container (max-width:540px) {\n  .toolbar { padding:12px; gap:6px }\n  .document-identity { flex-basis:100%; margin:0 0 5px }\n  .toolbar button { flex:1 1 auto; padding-inline:8px }\n  .toolbar button[data-command=Undo],.toolbar button[data-command=Redo],.toolbar button[data-command=Stop] { flex:0 0 auto; padding-inline:6px }\n  .toolbar button[data-command=Stop] { width:32px }\n  .toolbar button[data-command=Undo] .button-label,.toolbar button[data-command=Redo] .button-label,.toolbar button[data-command=Stop] .button-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }\n  .tabs { padding:0 6px }\n  .tabs button { flex:1 1 30%; padding:9px 5px; font-size:10px; min-height:36px; gap:5px }\n  .tabs button .icon { width:13px; height:13px }\n  .body { padding:14px }\n  .authoring-layout { gap:20px }\n  .overview-heading { margin-bottom:16px }\n  .overview-heading h2 { font-size:17px }\n  .overview-count { display:none }\n  .inspector { padding:12px }\n  .mixer-strips { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:minmax(0,1fr); gap:8px; overflow:visible }\n  .mixer-strip { text-align:start; padding:12px; border-top:1px solid var(--ae-border); border-inline-start:3px solid var(--ae-track) }\n  .mixer-strip h3 { font-size:12px }\n  .bus-route { margin-bottom:6px }\n  .fader-row { flex-direction:row; padding-block:2px; gap:8px }\n  .fader-row input[type=range] { writing-mode:horizontal-tb; direction:ltr; width:100%; height:26px; flex:1; min-width:40px }\n  .fader-row input[type=number] { width:58px; flex:0 0 58px }\n  .fader-row>.hint { margin:0; font-size:9px }\n  .meter-caption { font-size:9px }\n  .catalog-row { padding-inline:8px; gap:6px }\n  .catalog-symbol { padding:6px }\n  .catalog-row .badge { font-size:8px; padding:3px 4px }\n  .field-inline { align-items:stretch }\n  .track-header { padding:10px }\n  .track-meta { padding:8px 10px; gap:5px 8px; font-size:9px }\n  .status { padding:8px 12px; font-size:9px }\n}\n@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important } }\n@media (forced-colors:active) { button,input,select,details,.card,.mixer-strip,.wave-lane { border:1px solid ButtonText } .icon { stroke:ButtonText } }\n";

package/dist/styles.js

@@ -0,0 +1,192 @@
+const audioEditorStyles = `
+:host {
+  display:block; min-width:0; min-height:0; height:100%;
+  --ae-background:#15191c; --ae-surface:#1d2327; --ae-input:#111619;
+  --ae-text:#e5ecef; --ae-muted:#9aaab2; --ae-border:#344148;
+  --ae-accent:#7ce2c3; --ae-danger:#ff9ca5; --ae-radius:10px;
+  --ae-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
+  --ae-space:10px; --ae-control-height:32px; --ae-on-accent:#102d25;
+  --ae-hover:#293339; --ae-subtle:#232d32; --ae-track:#7ce2c3;
+  color:var(--ae-text); font:12px/1.5 var(--ae-font); color-scheme:dark;
+  -webkit-font-smoothing:antialiased;
+}
+:host([data-theme="light"]) {
+  --ae-background:#f3f6f7; --ae-surface:#fff; --ae-input:#f8fafb;
+  --ae-text:#203039; --ae-muted:#556b77; --ae-border:#cbd5db;
+  --ae-accent:#08765c; --ae-danger:#b22e43; --ae-on-accent:#fff;
+  --ae-hover:#e7edef; --ae-subtle:#e9eff1; --ae-track:#08765c; color-scheme:light;
+}
+* { box-sizing:border-box }
+[hidden] { display:none!important }
+.editor { container-type:inline-size; display:flex; flex-direction:column; height:100%; min-height:160px; min-width:0; background:var(--ae-background); overflow:hidden; border:1px solid var(--ae-border); border-radius:var(--ae-radius) }
+.toolbar,.tabs,.actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--ae-space) }
+.toolbar { padding:14px 16px; gap:8px; border-bottom:1px solid var(--ae-border); background:var(--ae-surface); flex-shrink:0 }
+.document-identity { display:flex; align-items:center; gap:10px; flex:1 1 150px; min-width:0; margin-inline-end:8px }
+.document-mark { width:32px; height:32px; display:grid; place-items:center; color:var(--ae-accent); background:color-mix(in srgb,var(--ae-accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--ae-accent) 22%,transparent); border-radius:8px; flex-shrink:0 }
+.document-text { min-width:0 }
+.document-kind,.eyebrow { display:block; font-size:9px; font-weight:650; letter-spacing:.13em; text-transform:uppercase; color:var(--ae-muted) }
+.title { display:block; font-size:13px; font-weight:650; overflow-wrap:anywhere; letter-spacing:-.01em }
+.document-identity[data-dirty=true] .title::after { content:' \u2022'; color:var(--ae-accent) }
+.toolbar button { flex-shrink:0 }
+.toolbar button[data-command=Undo],.toolbar button[data-command=Redo] { padding-inline:7px; background:transparent; border-color:transparent; color:var(--ae-muted) }
+.toolbar button[data-command=Play] { background:var(--ae-accent); border-color:var(--ae-accent); color:var(--ae-on-accent); font-weight:700; padding-inline:14px }
+.toolbar button[data-command=Play]:hover:not(:disabled) { filter:brightness(1.08) }
+.toolbar button[data-command=Stop] { background:transparent }
+.tabs { padding:0 12px; gap:0; border-bottom:1px solid var(--ae-border); flex-shrink:0; background:var(--ae-surface) }
+.tabs button { flex:1 1 auto; border:0; border-radius:0; background:transparent; color:var(--ae-muted); padding:12px 8px; position:relative; font-weight:550; min-height:44px }
+.tabs button .icon { width:15px; height:15px }
+.tabs button[aria-selected=true] { color:var(--ae-accent); background:color-mix(in srgb,var(--ae-accent) 6%,transparent) }
+.tabs button[aria-selected=true]::after { content:''; position:absolute; bottom:0; inset-inline:12px; height:2px; background:var(--ae-accent); border-radius:2px }
+.body { overflow:auto; flex:1; min-height:0; padding:20px; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--ae-border) transparent }
+.panel { min-width:0 }
+h2,h3,p { margin:0 0 var(--ae-space) }
+h2 { font-size:18px; font-weight:650; letter-spacing:-.03em } h3 { font-size:13px; font-weight:650 }
+button,input,select,textarea { font:inherit; color:inherit; max-width:100%; min-width:0 }
+button,select,input,textarea { border:1px solid var(--ae-border); border-radius:5px; background:var(--ae-input); padding:6px 9px }
+button,select,input:not([type=checkbox]) { min-height:var(--ae-control-height) }
+button { display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; white-space:normal; overflow-wrap:anywhere; line-height:1.35; transition:background-color .12s,border-color .12s }
+button:hover:not(:disabled) { background:var(--ae-hover); border-color:color-mix(in srgb,var(--ae-muted) 65%,var(--ae-border)) }
+button:active:not(:disabled) { background:var(--ae-subtle) }
+button:disabled { cursor:default; opacity:.42 }
+button.primary { border-color:var(--ae-accent); color:var(--ae-accent) }
+button[data-intent=danger] { color:var(--ae-muted); background:transparent; border-color:transparent }
+button[data-intent=danger]:hover:not(:disabled) { color:var(--ae-danger); background:color-mix(in srgb,var(--ae-danger) 8%,transparent) }
+button[data-intent=add] { color:var(--ae-accent); border-style:dashed; background:transparent; margin-top:6px }
+:focus-visible { outline:2px solid var(--ae-accent); outline-offset:3px }
+.icon { display:block; width:16px; height:16px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round }
+input[type=checkbox] { width:17px; height:17px; accent-color:var(--ae-accent) }
+input[type=range] { width:100%; accent-color:var(--ae-accent); padding:0; background:transparent; border:0; cursor:pointer }
+input[type=number] { font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px }
+textarea { width:100%; min-height:110px; resize:vertical; font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace }
+label,.field { display:flex; flex-direction:column; gap:5px; min-width:0 }
+.field { margin:10px 0 }
+.field .field { margin:0 }
+.field-label { color:var(--ae-muted); font-size:11px; overflow-wrap:anywhere }
+.field input,.field select { width:100% }
+.field input[type=checkbox] { width:17px }
+.field>button { align-self:flex-start; min-height:24px; font-size:10px; padding:3px 6px }
+.authoring-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start }
+.overview,.inspector { min-width:0 }
+.overview-heading { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:22px }
+.overview-heading .eyebrow { color:var(--ae-accent); margin-bottom:4px }
+.overview-heading p { color:var(--ae-muted); margin:0; max-width:48ch; font-size:11px }
+.overview-heading h2 { margin-bottom:5px }
+.overview-count { color:var(--ae-muted); white-space:nowrap; font:10px/1.5 ui-monospace,monospace; padding-top:5px }
+.inspector { padding:16px; background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:8px }
+.inspector-heading { padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid var(--ae-border) }
+.inspector-heading h3 { margin:2px 0 0; font-size:13px }
+.properties { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:0 16px; align-items:start }
+.properties>details { grid-column:1/-1 }
+.field-inline { display:flex; flex-wrap:wrap; align-items:center; gap:6px }
+.field-inline>* { flex:1 1 70px }
+.field-inline button { flex:0 1 auto }
+.hint,.status { color:var(--ae-muted); font-size:11px; overflow-wrap:anywhere }
+.status { padding:9px 14px; border-top:1px solid var(--ae-border); flex-shrink:0; background:var(--ae-surface); font-size:10px; line-height:1.6 }
+.status[data-state=playing] { border-top-color:color-mix(in srgb,var(--ae-accent) 55%,var(--ae-border)) }
+.error { color:var(--ae-danger); white-space:pre-wrap; overflow-wrap:anywhere }
+.notice { padding:12px; border:1px solid var(--ae-border); border-radius:6px; margin-bottom:var(--ae-space); background:var(--ae-surface) }
+details { margin:14px 0; border:0; border-top:1px solid var(--ae-border); padding:12px 0 0; min-width:0 }
+details details { margin:8px 0; border:0; padding:6px 0 6px 10px; border-inline-start:2px solid var(--ae-border) }
+summary { cursor:pointer; overflow-wrap:anywhere; font-weight:600; min-height:26px; font-size:11px; color:var(--ae-text) }
+summary::marker { color:var(--ae-muted); font-size:10px }
+summary:hover { color:var(--ae-accent) }
+.list-item { padding:10px 0; border-bottom:1px solid var(--ae-border); min-width:0 }
+.list-item:last-child { border:0 }
+.item-title { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:4px }
+.item-title span { overflow-wrap:anywhere; flex:1; font-weight:600 }
+.item-title button { padding:3px 5px; min-height:24px; font-size:10px }
+.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:var(--ae-space) }
+.card { padding:14px; border:1px solid var(--ae-border); border-radius:7px; background:var(--ae-surface); min-width:0; margin-bottom:10px }
+.mixer-strips { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(124px,1fr); overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:var(--ae-border) transparent; gap:8px; margin-bottom:20px }
+.mixer-strip { background:var(--ae-surface); border:1px solid var(--ae-border); border-top:3px solid var(--ae-track); border-radius:6px; padding:14px 10px; min-width:0; text-align:center }
+.mixer-strip:nth-child(3n+2),.wave-lane:nth-child(3n+2) { --ae-track:#ab9ef0 }
+.mixer-strip:nth-child(3n+3),.wave-lane:nth-child(3n+3) { --ae-track:#e8b97b }
+:host([data-theme=light]) .mixer-strip:nth-child(3n+2),:host([data-theme=light]) .wave-lane:nth-child(3n+2) { --ae-track:#7059b5 }
+:host([data-theme=light]) .mixer-strip:nth-child(3n+3),:host([data-theme=light]) .wave-lane:nth-child(3n+3) { --ae-track:#936424 }
+.mixer-strip h3 { margin:0 0 3px; font-size:13px; overflow-wrap:anywhere }
+.bus-route { color:var(--ae-muted); font-size:10px; display:block; margin-bottom:12px }
+.fader-row { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding-block:8px }
+.fader-row input[type=range] { writing-mode:vertical-lr; direction:rtl; width:24px; height:144px; min-height:0; accent-color:var(--ae-track) }
+.fader-row input[type=number] { width:70px; text-align:center }
+.fader-row>.hint { margin-top:-6px; font-size:9px; text-transform:uppercase }
+.meter-caption { display:block; font-size:9px; line-height:1.4; margin-top:5px; min-height:14px }
+.event-waves { display:grid; gap:12px; margin-bottom:20px }
+.wave-lane { position:relative; min-width:0; background:var(--ae-surface); border:1px solid var(--ae-border); border-radius:7px; overflow:hidden }
+.track-header { display:flex; gap:10px; align-items:center; padding:12px; border-bottom:1px solid var(--ae-border) }
+.track-number { font:10px ui-monospace,monospace; color:var(--ae-track); background:color-mix(in srgb,var(--ae-track) 10%,transparent); padding:5px 6px; border-radius:4px }
+.track-name { flex:1; min-width:0; font-size:12px; font-weight:600; overflow-wrap:anywhere }
+.track-name { justify-content:flex-start; padding:0; min-height:24px; background:transparent; border-color:transparent; text-align:start }
+.track-header .badge { color:var(--ae-track) }
+.wave-lane canvas { height:90px; border-radius:0; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--ae-subtle) 25%),var(--ae-input) }
+.track-meta { display:flex; flex-wrap:wrap; gap:6px 14px; padding:9px 12px; color:var(--ae-muted); font:10px/1.5 ui-monospace,monospace; border-top:1px solid var(--ae-border) }
+.track-meta span:last-child { margin-inline-start:auto; color:var(--ae-track) }
+.timing-ruler { display:flex; justify-content:space-between; color:var(--ae-muted); font:10px ui-monospace,monospace; margin-bottom:10px }
+.timing-row { margin-bottom:12px }
+.timing-track { position:relative; height:12px; margin-top:4px; background:var(--ae-input); border-radius:3px }
+.timing-mark { position:absolute; height:100%; background:var(--ae-accent); border-radius:3px; max-width:100% }
+.timing-mark[data-source-length=true] { transform:translateX(-50%); border-radius:50% }
+.wave-placeholder { display:grid; place-items:center; min-height:90px; color:var(--ae-muted); font-size:11px; background:var(--ae-input) }
+.catalog { max-height:440px; overflow:auto; position:relative; margin-block:16px; border:1px solid var(--ae-border); border-radius:7px; scrollbar-width:thin; scrollbar-color:var(--ae-border) transparent }
+.catalog-row { display:flex; align-items:center; gap:10px; min-height:64px; height:64px; padding:8px 12px; overflow:hidden; border-bottom:1px solid var(--ae-border); background:var(--ae-surface) }
+.catalog-row:last-child { border-bottom:0 }
+.catalog-row:hover { background:var(--ae-hover) }
+.catalog-row[data-selected=true] { background:color-mix(in srgb,var(--ae-accent) 8%,var(--ae-surface)); box-shadow:inset 3px 0 var(--ae-accent) }
+.catalog-symbol { color:var(--ae-accent); background:var(--ae-subtle); padding:8px; border-radius:6px; flex-shrink:0 }
+.catalog-row button { flex:1; justify-content:flex-start; text-align:start; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:transparent; border-color:transparent; padding:4px; font-weight:550 }
+.badge { display:inline-block; color:var(--ae-muted); background:var(--ae-subtle); border-radius:4px; padding:3px 6px; font-size:9px; font-weight:500; white-space:nowrap }
+canvas { display:block; width:100%; height:80px; background:var(--ae-input); border-radius:6px }
+meter { display:block; width:100%; height:7px; accent-color:var(--ae-track); border:0; border-radius:3px; overflow:hidden; background:var(--ae-input) }
+meter::-webkit-meter-bar { background:var(--ae-input); border:0; border-radius:3px; height:7px }
+meter::-webkit-meter-optimum-value { background:var(--ae-track) }
+meter::-moz-meter-bar { background:var(--ae-track) }
+pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow:auto; font:10px/1.7 ui-monospace,monospace; padding:12px; background:var(--ae-input); border-radius:6px }
+.empty { padding:28px 12px; color:var(--ae-muted); text-align:center }
+.music-section { border-inline-start:3px solid var(--ae-accent) }
+.music-section:nth-of-type(2n) { border-inline-start-color:#ab9ef0 }
+.music-section h3 { font-size:14px; letter-spacing:-.02em }
+.music-section .hint { padding:8px 0; margin:0; border-bottom:1px solid var(--ae-border); font-family:ui-monospace,monospace; font-size:10px }
+.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
+@container (min-width:760px) {
+  .authoring-layout { grid-template-columns:minmax(0,1fr) 280px; gap:24px }
+  .inspector { align-self:start }
+  .overview { position:sticky; top:0 }
+}
+@container (max-width:540px) {
+  .toolbar { padding:12px; gap:6px }
+  .document-identity { flex-basis:100%; margin:0 0 5px }
+  .toolbar button { flex:1 1 auto; padding-inline:8px }
+  .toolbar button[data-command=Undo],.toolbar button[data-command=Redo],.toolbar button[data-command=Stop] { flex:0 0 auto; padding-inline:6px }
+  .toolbar button[data-command=Stop] { width:32px }
+  .toolbar button[data-command=Undo] .button-label,.toolbar button[data-command=Redo] .button-label,.toolbar button[data-command=Stop] .button-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
+  .tabs { padding:0 6px }
+  .tabs button { flex:1 1 30%; padding:9px 5px; font-size:10px; min-height:36px; gap:5px }
+  .tabs button .icon { width:13px; height:13px }
+  .body { padding:14px }
+  .authoring-layout { gap:20px }
+  .overview-heading { margin-bottom:16px }
+  .overview-heading h2 { font-size:17px }
+  .overview-count { display:none }
+  .inspector { padding:12px }
+  .mixer-strips { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:minmax(0,1fr); gap:8px; overflow:visible }
+  .mixer-strip { text-align:start; padding:12px; border-top:1px solid var(--ae-border); border-inline-start:3px solid var(--ae-track) }
+  .mixer-strip h3 { font-size:12px }
+  .bus-route { margin-bottom:6px }
+  .fader-row { flex-direction:row; padding-block:2px; gap:8px }
+  .fader-row input[type=range] { writing-mode:horizontal-tb; direction:ltr; width:100%; height:26px; flex:1; min-width:40px }
+  .fader-row input[type=number] { width:58px; flex:0 0 58px }
+  .fader-row>.hint { margin:0; font-size:9px }
+  .meter-caption { font-size:9px }
+  .catalog-row { padding-inline:8px; gap:6px }
+  .catalog-symbol { padding:6px }
+  .catalog-row .badge { font-size:8px; padding:3px 4px }
+  .field-inline { align-items:stretch }
+  .track-header { padding:10px }
+  .track-meta { padding:8px 10px; gap:5px 8px; font-size:9px }
+  .status { padding:8px 12px; font-size:9px }
+}
+@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important } }
+@media (forced-colors:active) { button,input,select,details,.card,.mixer-strip,.wave-lane { border:1px solid ButtonText } .icon { stroke:ButtonText } }
+`;
+export {
+  audioEditorStyles
+};

package/dist/types.d.ts

@@ -0,0 +1,113 @@
+import type { ComponentDef, JsonObject, JsonValue, ShardError } from '@aethervtt/shard-core';
+/** IDs and revisions are opaque host values. They are never interpreted as URLs or paths. */
+export interface AudioDocument {
+    id: string;
+    name: string;
+    type: string;
+    revision: string;
+    schemaVersion?: number;
+    value: JsonObject;
+    sourceText?: string;
+}
+export interface AudioDocumentChange {
+    document: AudioDocument;
+    expectedRevision: string | null;
+}
+export interface AudioDocumentStore {
+    readonly scope: string;
+    readonly atomic?: boolean;
+    read(id: string, signal?: AbortSignal): Promise<AudioDocument>;
+    commit?(changes: readonly AudioDocumentChange[], signal?: AbortSignal): Promise<AudioDocument[]>;
+    subscribe?(listener: (ids: readonly string[]) => void): () => void;
+}
+export interface AudioAssetEntry {
+    id: string;
+    name: string;
+    type: string;
+    revision: string;
+    duration?: number;
+    sampleRate?: number;
+    channels?: number;
+    bytes?: number;
+}
+export interface AudioAssetQuery {
+    search?: string;
+    type?: string;
+    cursor?: string;
+    limit?: number;
+    signal?: AbortSignal;
+}
+export interface AudioAssetPage {
+    items: AudioAssetEntry[];
+    nextCursor?: string;
+    total?: number;
+}
+export interface AudioAssetContent {
+    bytes?: Uint8Array;
+    url?: string;
+    mime?: string;
+    /** Host-authorized import settings; identity remains the catalog ID. */
+    settings?: {
+        mode?: 'decoded' | 'stream';
+        normalize?: boolean;
+        loopStart?: number;
+        loopEnd?: number;
+    };
+    release?(): void;
+}
+export interface AudioAssetCatalog {
+    readonly scope: string;
+    list(query: AudioAssetQuery): Promise<AudioAssetPage>;
+    get(id: string, signal?: AbortSignal): Promise<AudioAssetEntry>;
+    resolve(id: string, signal?: AbortSignal): Promise<AudioAssetContent>;
+    pick?(type: string, signal?: AbortSignal): Promise<string | undefined>;
+    subscribe?(listener: (ids: readonly string[]) => void): () => void;
+}
+export interface AudioWaveform {
+    peaks: Float32Array;
+    duration: number;
+    sampleRate: number;
+}
+export interface AudioPreviewAdapter {
+    readonly mode: 'audition' | 'attached';
+    readonly target?: string;
+    readonly capabilities: Readonly<Record<string, boolean>>;
+    play(document: AudioDocument, signal?: AbortSignal): Promise<unknown>;
+    stop(): void | Promise<void>;
+    inspect(): unknown | Promise<unknown>;
+    command?(name: string, params: Record<string, unknown>): unknown | Promise<unknown>;
+    waveform?(id: string, bins: number, signal?: AbortSignal): Promise<AudioWaveform>;
+    export?(document: AudioDocument, plan: JsonObject, signal?: AbortSignal): Promise<unknown>;
+    dispose(): void | Promise<void>;
+}
+export interface AudioEditorState {
+    document?: AudioDocument;
+    /** Resolved inherited values plus schema defaults, for display only. */
+    effective?: JsonObject;
+    schema?: ComponentDef;
+    dirty: boolean;
+    readOnly: boolean;
+    loading: boolean;
+    saving: boolean;
+    conflict?: AudioDocument;
+    diagnostics: ShardError[];
+    canUndo: boolean;
+    canRedo: boolean;
+    historyEvicted: number;
+    previewState: 'idle' | 'preparing' | 'playing' | 'failed';
+    previewResult?: unknown;
+    /** Document that owns the current preview result, independent of editor selection. */
+    previewDocumentId?: string;
+}
+export interface AudioEditorOptions {
+    documents: AudioDocumentStore;
+    assets: AudioAssetCatalog;
+    preview?: AudioPreviewAdapter;
+    historyLimit?: number;
+    historyBytes?: number;
+}
+export interface AudioEditorEdit {
+    path: string;
+    value?: JsonValue;
+    remove?: boolean;
+}

package/dist/waveform.d.ts

@@ -0,0 +1,16 @@
+import type { AudioAssetCatalog, AudioWaveform } from './types.js';
+export type AudioWaveformDecoder = (bytes: Uint8Array, signal?: AbortSignal) => Promise<{
+    channels: readonly Float32Array[];
+    sampleRate: number;
+}>;
+/** Metadata listing never calls this cache. A requested waveform owns only its envelope. */
+export declare function createAudioWaveformCache(assets: AudioAssetCatalog, options?: {
+    maxBytes?: number;
+    decode?: AudioWaveformDecoder;
+}): {
+    readonly bytes: number;
+    readonly count: number;
+    clear: () => void;
+    get(id: string, bins: number, signal?: AbortSignal, channel?: number): Promise<AudioWaveform>;
+    dispose(): void;
+};