@hypit/caption-fine 0.0.0-stage → 0.1.0

package/dist/style.js

@@ -0,0 +1,340 @@
+import { sealCaptionStyle } from "@hypit/hypit/caption";
+import { assertFontArtifactRef } from "@hypit/hypit/media";
+import { canonicalStringify } from "@hypit/hypit/protocol";
+import { fineCaptionOneShotMotions, fineCaptionEditableDefaults, fineCaptionOptionalRecipeProperties, fineCaptionRequiredRecipeProperties, } from "./recipe.js";
+export const FINE_CAPTION_FAMILY = "@hypit/caption-fine@1";
+const ALLOWED_PROPERTIES = new Set([
+    ...fineCaptionRequiredRecipeProperties,
+    ...fineCaptionOptionalRecipeProperties,
+]);
+function required(value, name) {
+    if (!Object.hasOwn(value.properties, name))
+        throw new Error(`Fine Caption Recipe requires ${name}`);
+    return value.properties[name];
+}
+function number(value, name, fallback) {
+    const property = Object.hasOwn(value.properties, name) ? value.properties[name] : fallback;
+    if (typeof property !== "number" || !Number.isFinite(property)) {
+        throw new Error(`Fine Caption Recipe ${name} must be a number`);
+    }
+    return property;
+}
+function integer(value, name, fallback) {
+    const property = number(value, name, fallback);
+    if (!Number.isSafeInteger(property))
+        throw new Error(`Fine Caption Recipe ${name} must be an integer`);
+    return property;
+}
+function string(value, name, fallback) {
+    const property = Object.hasOwn(value.properties, name) ? value.properties[name] : fallback;
+    if (typeof property !== "string" || !property.trim()) {
+        throw new Error(`Fine Caption Recipe ${name} must be a string`);
+    }
+    return property.trim();
+}
+function choice(value, name, choices, fallback) {
+    const property = string(value, name, fallback);
+    if (!choices.includes(property))
+        throw new Error(`Fine Caption Recipe ${name} is invalid`);
+    return property;
+}
+function color(value, name, fallback) {
+    const property = string(value, name, fallback);
+    if (!/^#[0-9a-f]{6}(?:[0-9a-f]{2})?$/iu.test(property)) {
+        throw new Error(`Fine Caption Recipe ${name} must be an RGB or RGBA hex color`);
+    }
+    return property;
+}
+function padding(value) {
+    const parts = value.trim().split(/\s+/u).map(Number);
+    if ((parts.length !== 1 && parts.length !== 2) || parts.some((item) => !Number.isFinite(item) || item < 0)) {
+        throw new Error("Fine Caption Recipe padding must contain one or two non-negative pixel numbers");
+    }
+    return { y: parts[0], x: parts[1] ?? parts[0] };
+}
+function optionalGradient(recipe, prefix, base) {
+    const fromName = `${prefix}gradient-from`;
+    const toName = `${prefix}gradient-to`;
+    const hasFrom = Object.hasOwn(recipe.properties, fromName);
+    const hasTo = Object.hasOwn(recipe.properties, toName);
+    const hasAngle = Object.hasOwn(recipe.properties, `${prefix}gradient-angle`);
+    if (!hasFrom && !hasTo && !hasAngle)
+        return prefix === "active-" ? undefined : base;
+    if (!hasFrom || !hasTo) {
+        throw new Error(`Fine Caption Recipe ${prefix}gradient requires both from and to colors`);
+    }
+    return {
+        from: color(recipe, fromName),
+        to: color(recipe, toName),
+        angleDeg: number(recipe, `${prefix}gradient-angle`, base?.angleDeg ?? 90),
+    };
+}
+function glyphPaint(recipe, prefix, base) {
+    const fallback = (key) => base?.[key];
+    const baseShadow = fallback("shadow");
+    const baseGlow = fallback("glow");
+    const baseStroke = fallback("stroke");
+    const baseLongShadow = fallback("longShadow");
+    const gradient = optionalGradient(recipe, prefix, base?.gradient);
+    return {
+        fill: color(recipe, `${prefix}fill`, prefix === "active-" ? "#FFD54A" : base?.fill),
+        ...(gradient === undefined ? {} : { gradient }),
+        opacity: number(recipe, `${prefix}opacity`, base?.opacity ?? fineCaptionEditableDefaults.opacity),
+        stroke: {
+            color: color(recipe, `${prefix}stroke-color`, baseStroke?.color ?? "#000000"),
+            widthPx: number(recipe, `${prefix}stroke-width`, baseStroke?.widthPx ?? fineCaptionEditableDefaults["stroke-width"]),
+        },
+        shadow: {
+            color: color(recipe, `${prefix}shadow-color`, baseShadow?.color ?? "#000000"),
+            opacity: number(recipe, `${prefix}shadow-opacity`, baseShadow?.opacity ?? fineCaptionEditableDefaults["shadow-opacity"]),
+            offsetXPx: number(recipe, `${prefix}shadow-x`, baseShadow?.offsetXPx ?? 0),
+            offsetYPx: number(recipe, `${prefix}shadow-y`, baseShadow?.offsetYPx ?? 0),
+            blurPx: number(recipe, `${prefix}shadow-blur`, baseShadow?.blurPx ?? 0),
+            spreadPx: number(recipe, `${prefix}shadow-spread`, baseShadow?.spreadPx ?? 0),
+        },
+        longShadow: {
+            color: color(recipe, `${prefix}long-shadow-color`, baseLongShadow?.color ?? "#000000"),
+            opacity: number(recipe, `${prefix}long-shadow-opacity`, baseLongShadow?.opacity ?? 0),
+            distancePx: number(recipe, `${prefix}long-shadow-distance`, baseLongShadow?.distancePx ?? 0),
+            angleDeg: number(recipe, `${prefix}long-shadow-angle`, baseLongShadow?.angleDeg ?? 45),
+        },
+        glow: {
+            color: color(recipe, `${prefix}glow-color`, baseGlow?.color ?? "#FFFFFF"),
+            opacity: number(recipe, `${prefix}glow-opacity`, baseGlow?.opacity ?? fineCaptionEditableDefaults["glow-opacity"]),
+            blurPx: number(recipe, `${prefix}glow-blur`, baseGlow?.blurPx ?? 0),
+            spreadPx: number(recipe, `${prefix}glow-spread`, baseGlow?.spreadPx ?? 0),
+        },
+    };
+}
+function assertColor(value, label) {
+    if (!/^#[0-9a-f]{6}(?:[0-9a-f]{2})?$/iu.test(value))
+        throw new Error(`${label} is invalid`);
+}
+function assertOpacity(value, label) {
+    if (!Number.isFinite(value) || value < 0 || value > 1)
+        throw new Error(`${label} must be between 0 and 1`);
+}
+function assertPaint(value, label) {
+    assertColor(value.fill, `${label} fill`);
+    assertOpacity(value.opacity, `${label} opacity`);
+    assertColor(value.stroke.color, `${label} stroke color`);
+    assertColor(value.shadow.color, `${label} shadow color`);
+    assertColor(value.longShadow.color, `${label} long shadow color`);
+    assertColor(value.glow.color, `${label} glow color`);
+    assertOpacity(value.shadow.opacity, `${label} shadow opacity`);
+    assertOpacity(value.longShadow.opacity, `${label} long shadow opacity`);
+    assertOpacity(value.glow.opacity, `${label} glow opacity`);
+    for (const [name, metric] of [
+        ["stroke width", value.stroke.widthPx], ["shadow blur", value.shadow.blurPx],
+        ["long shadow distance", value.longShadow.distancePx], ["glow blur", value.glow.blurPx],
+        ["glow spread", value.glow.spreadPx],
+    ]) {
+        if (!Number.isFinite(metric) || metric < 0)
+            throw new Error(`${label} ${name} is invalid`);
+    }
+    if (!Number.isFinite(value.shadow.offsetXPx) || !Number.isFinite(value.shadow.offsetYPx)
+        || !Number.isFinite(value.shadow.spreadPx)) {
+        throw new Error(`${label} shadow offset is invalid`);
+    }
+    if (!Number.isFinite(value.longShadow.angleDeg))
+        throw new Error(`${label} long shadow angle is invalid`);
+    if (value.gradient !== undefined) {
+        assertColor(value.gradient.from, `${label} gradient from`);
+        assertColor(value.gradient.to, `${label} gradient to`);
+        if (!Number.isFinite(value.gradient.angleDeg))
+            throw new Error(`${label} gradient angle is invalid`);
+    }
+}
+export function fineCaptionParameters(recipe, exactFonts) {
+    for (const name of fineCaptionRequiredRecipeProperties)
+        required(recipe, name);
+    const unknown = Object.keys(recipe.properties).filter((name) => !ALLOWED_PROPERTIES.has(name));
+    if (unknown.length > 0)
+        throw new Error(`Fine Caption Recipe contains unknown property ${unknown[0]}`);
+    const pad = padding(string(recipe, "padding"));
+    const activeBoxPadding = padding(string(recipe, "active-box-padding", "0"));
+    const fontSizePx = number(recipe, "size");
+    const basePaint = glyphPaint(recipe, "");
+    const cueEnter = choice(recipe, "cue-enter", fineCaptionOneShotMotions, "none");
+    const parameters = {
+        stackingOrder: integer(recipe, "stack-order"),
+        placement: {
+            x: number(recipe, "x"),
+            y: number(recipe, "y"),
+            width: number(recipe, "width"),
+            ...(Object.hasOwn(recipe.properties, "height") ? { height: number(recipe, "height") } : {}),
+            anchorX: choice(recipe, "anchor-x", ["left", "center", "right"], "left"),
+            anchorY: choice(recipe, "anchor-y", ["top", "center", "bottom"], "top"),
+        },
+        layout: {
+            textAlign: choice(recipe, "align", ["left", "center", "right"]),
+            blockAlign: choice(recipe, "block-align", ["start", "center", "end"], "center"),
+            direction: choice(recipe, "direction", ["ltr", "rtl"], "ltr"),
+            inlineSize: choice(recipe, "inline-size", ["hug", "fixed"], "hug"),
+            wrap: choice(recipe, "wrap", ["word", "grapheme"], "word"),
+            ...(Object.hasOwn(recipe.properties, "max-lines") ? { maxLines: integer(recipe, "max-lines") } : {}),
+            ...(Object.hasOwn(recipe.properties, "max-words-per-line")
+                ? { maxWordsPerLine: integer(recipe, "max-words-per-line") } : {}),
+            lineHeight: number(recipe, "line-height"),
+            letterSpacingPx: number(recipe, "letter-spacing", 0),
+            wordGapPx: number(recipe, "word-gap", fontSizePx * 0.25),
+        },
+        typography: {
+            fontSizePx,
+            kerning: choice(recipe, "kerning", ["auto", "normal", "none"], "auto"),
+            variantCaps: choice(recipe, "caps", ["normal", "small-caps", "all-small-caps"], "normal"),
+            textTransform: choice(recipe, "text-transform", ["none", "uppercase", "lowercase", "capitalize"], "none"),
+            exactFonts: [...exactFonts],
+        },
+        basePaint,
+        activePaint: glyphPaint(recipe, "active-", basePaint),
+        underline: {
+            mode: choice(recipe, "underline", ["off", "always"], fineCaptionEditableDefaults["underline"]),
+            color: color(recipe, "underline-color", basePaint.fill),
+            thicknessPx: number(recipe, "underline-thickness", 2),
+            offsetPx: number(recipe, "underline-offset", 4),
+        },
+        activeUnderline: {
+            mode: choice(recipe, "active-underline", ["off", "current", "trail"], fineCaptionEditableDefaults["active-underline"]),
+            color: color(recipe, "active-underline-color", "#FFD54A"),
+            thicknessPx: number(recipe, "active-underline-thickness", 3),
+            offsetPx: number(recipe, "active-underline-offset", 4),
+        },
+        cueBox: {
+            background: color(recipe, "background"),
+            borderColor: color(recipe, "border-color", "#00000000"),
+            borderWidthPx: number(recipe, "border-width", 0),
+            paddingXPx: pad.x,
+            paddingYPx: pad.y,
+            radiusPx: number(recipe, "radius"),
+            shadow: {
+                color: color(recipe, "cue-shadow-color", "#000000"),
+                opacity: number(recipe, "cue-shadow-opacity", 0),
+                offsetXPx: number(recipe, "cue-shadow-x", 0),
+                offsetYPx: number(recipe, "cue-shadow-y", 0),
+                blurPx: number(recipe, "cue-shadow-blur", 0),
+                spreadPx: number(recipe, "cue-shadow-spread", 0),
+            },
+        },
+        karaoke: {
+            mode: choice(recipe, "karaoke", ["off", "current", "trail"], fineCaptionEditableDefaults["karaoke"]),
+            transition: choice(recipe, "karaoke-transition", ["step", "wipe"], fineCaptionEditableDefaults["karaoke-transition"]),
+        },
+        activeBox: {
+            mode: choice(recipe, "active-box", ["off", "current", "trail"], fineCaptionEditableDefaults["active-box"]),
+            continuity: choice(recipe, "active-box-continuity", ["isolated", "joined"], "isolated"),
+            background: color(recipe, "active-box-background", "#FFD54A"),
+            borderColor: color(recipe, "active-box-border-color", "#00000000"),
+            borderWidthPx: number(recipe, "active-box-border-width", 0),
+            paddingXPx: activeBoxPadding.x,
+            paddingYPx: activeBoxPadding.y,
+            radiusPx: number(recipe, "active-box-radius", 8),
+            enter: choice(recipe, "active-box-enter", fineCaptionOneShotMotions, "none"),
+            exit: choice(recipe, "active-box-exit", fineCaptionOneShotMotions, "none"),
+            transitionFrames: integer(recipe, "active-box-transition-frames", 0),
+        },
+        motion: {
+            cueEnter,
+            cueExit: choice(recipe, "cue-exit", fineCaptionOneShotMotions, "none"),
+            cueEnterFrames: integer(recipe, "cue-enter-frames", 0),
+            cueExitFrames: integer(recipe, "cue-exit-frames", 0),
+            ...(Object.hasOwn(recipe.properties, "cue-enter-start-scale")
+                ? { cueEnterStartScale: number(recipe, "cue-enter-start-scale") } : {}),
+            atomEnter: choice(recipe, "atom-enter", fineCaptionOneShotMotions, "none"),
+            atomEnterFrames: integer(recipe, "atom-enter-frames", 0),
+            atomExit: choice(recipe, "atom-exit", fineCaptionOneShotMotions, "none"),
+            atomExitFrames: integer(recipe, "atom-exit-frames", 0),
+            atomReveal: choice(recipe, "atom-reveal", ["all", "on-start", "typewriter"], "all"),
+            activeResponse: choice(recipe, "active-response", fineCaptionOneShotMotions, "none"),
+            activeResponseFrames: integer(recipe, "active-response-frames", 6),
+            activeScale: number(recipe, "active-scale", 1.08),
+            slideDistancePx: number(recipe, "slide-distance", 24),
+            loop: choice(recipe, "loop", ["none", "shake", "wobble", "glow-pulse", "breathe", "float", "pulse", "flicker"], "none"),
+            loopTarget: choice(recipe, "loop-target", ["cue", "active-atom"], "cue"),
+            loopPeriodFrames: integer(recipe, "loop-period-frames", 12),
+            loopIntensity: number(recipe, "loop-intensity", 1),
+        },
+        timing: {
+            leadFrames: integer(recipe, "lead-frames", 0),
+            tailFrames: integer(recipe, "tail-frames", 0),
+            handoff: choice(recipe, "handoff", ["cut", "overlap"], "cut"),
+        },
+    };
+    assertFineCaptionParameters(parameters);
+    return parameters;
+}
+export function assertFineCaptionParameters(value) {
+    if (!Number.isSafeInteger(value.stackingOrder) || value.stackingOrder < 0) {
+        throw new Error("Fine Caption stacking order is invalid");
+    }
+    const nonNegative = [
+        value.placement.x, value.placement.y, value.placement.width, value.typography.fontSizePx,
+        value.layout.lineHeight, value.layout.wordGapPx, value.cueBox.paddingXPx,
+        value.cueBox.paddingYPx, value.cueBox.radiusPx, value.cueBox.borderWidthPx,
+        value.underline.thicknessPx, value.underline.offsetPx, value.activeUnderline.thicknessPx,
+        value.activeUnderline.offsetPx, value.activeBox.borderWidthPx, value.activeBox.paddingXPx,
+        value.activeBox.paddingYPx, value.activeBox.radiusPx, value.activeBox.transitionFrames,
+        value.motion.cueEnterFrames, value.motion.cueExitFrames, value.motion.atomEnterFrames, value.motion.atomExitFrames,
+        value.motion.activeResponseFrames,
+        value.motion.slideDistancePx, value.motion.loopPeriodFrames, value.motion.loopIntensity,
+        value.timing.leadFrames, value.timing.tailFrames,
+        value.cueBox.shadow.blurPx,
+    ];
+    if (nonNegative.some((item) => !Number.isFinite(item) || item < 0)
+        || value.placement.x > 1 || value.placement.y > 1 || value.placement.width <= 0 || value.placement.width > 1
+        || (value.placement.height !== undefined && (!Number.isFinite(value.placement.height) || value.placement.height <= 0 || value.placement.height > 1))
+        || value.typography.fontSizePx <= 0 || value.layout.lineHeight <= 0
+        || !Number.isSafeInteger(value.motion.cueEnterFrames) || !Number.isSafeInteger(value.motion.cueExitFrames)
+        || !Number.isSafeInteger(value.motion.atomEnterFrames) || !Number.isSafeInteger(value.motion.atomExitFrames)
+        || !Number.isSafeInteger(value.motion.loopPeriodFrames)
+        || !Number.isSafeInteger(value.motion.activeResponseFrames)
+        || !Number.isSafeInteger(value.activeBox.transitionFrames) || value.motion.loopPeriodFrames <= 0
+        || !Number.isSafeInteger(value.timing.leadFrames) || !Number.isSafeInteger(value.timing.tailFrames)
+        || (value.layout.maxLines !== undefined && (!Number.isSafeInteger(value.layout.maxLines) || value.layout.maxLines <= 0))
+        || (value.layout.maxWordsPerLine !== undefined && (!Number.isSafeInteger(value.layout.maxWordsPerLine) || value.layout.maxWordsPerLine <= 0))
+        || (value.motion.cueEnterStartScale !== undefined
+            && (!Number.isFinite(value.motion.cueEnterStartScale) || value.motion.cueEnterStartScale < 0))
+        || value.motion.activeScale <= 0
+        || !Number.isFinite(value.motion.activeScale) || !Number.isFinite(value.layout.letterSpacingPx)) {
+        throw new Error("Fine Caption parameters contain invalid numeric bounds");
+    }
+    if (value.motion.cueEnter === "none"
+        && value.motion.cueEnterStartScale !== undefined) {
+        throw new Error("Fine Caption Cue entrance modifiers require a Cue entrance motion");
+    }
+    if (value.typography.exactFonts.length === 0)
+        throw new Error("Fine Caption exact Font stack is empty");
+    const faces = new Set();
+    for (const [index, font] of value.typography.exactFonts.entries()) {
+        assertFontArtifactRef(font, `Fine Caption exact Font ${index + 1}`);
+        const identity = canonicalStringify(font);
+        if (faces.has(identity))
+            throw new Error("Fine Caption exact Font stack contains a duplicate face");
+        faces.add(identity);
+    }
+    if (value.layout.maxLines !== undefined && value.layout.maxWordsPerLine === undefined) {
+        throw new Error("Fine Caption max-lines requires max-words-per-line so its rows are structural");
+    }
+    assertColor(value.cueBox.background, "Fine Caption background");
+    assertColor(value.cueBox.borderColor, "Fine Caption border color");
+    assertColor(value.cueBox.shadow.color, "Fine Caption Cue shadow color");
+    assertOpacity(value.cueBox.shadow.opacity, "Fine Caption Cue shadow opacity");
+    if (![value.cueBox.shadow.offsetXPx, value.cueBox.shadow.offsetYPx, value.cueBox.shadow.spreadPx]
+        .every(Number.isFinite))
+        throw new Error("Fine Caption Cue shadow contains an invalid metric");
+    assertColor(value.underline.color, "Fine Caption underline color");
+    assertColor(value.activeUnderline.color, "Fine Caption active underline color");
+    assertColor(value.activeBox.background, "Fine Caption active box background");
+    assertColor(value.activeBox.borderColor, "Fine Caption active box border color");
+    assertPaint(value.basePaint, "Fine Caption base Paint");
+    assertPaint(value.activePaint, "Fine Caption active Paint");
+}
+export function fineCaptionStyle(id, recipe, exactFonts) {
+    return sealCaptionStyle({
+        id,
+        rendering: {
+            family: FINE_CAPTION_FAMILY,
+            parameters: fineCaptionParameters(recipe, exactFonts),
+        },
+    });
+}

package/dist/surface.d.ts

@@ -0,0 +1,3 @@
+import type { StructuredSurfaceHandler } from "@hypit/hypit/markup";
+export declare const decodeFineCaptionStyleSurface: StructuredSurfaceHandler;
+export declare const decodeFineCaptionTrackSurface: StructuredSurfaceHandler;

package/dist/surface.js

@@ -0,0 +1,171 @@
+import { captionProducers, captionTypes } from "@hypit/hypit/caption";
+import { assertFontArtifactRef, assertFontStackRef, mediaTypes } from "@hypit/hypit/media";
+import { timelineTypes } from "@hypit/hypit/timeline";
+import { regionEvidenceTypes } from "@hypit/hypit/region-evidence";
+import { spatialTypes } from "@hypit/hypit/spatial";
+import { recipeType } from "@hypit/hypit/recipe";
+import { sealGraphFragment } from "@hypit/hypit/author";
+import { assertEmptyElement, optionalTextAttribute } from "@hypit/hypit/markup";
+import { resolveTemporalContext, resolveTemporalWindowReference, temporalWindowAttributeNames } from "@hypit/hypit/temporal/markup";
+import { temporalTypes } from "@hypit/hypit/temporal";
+import { compositionTypes } from "@hypit/hypit/composition";
+import { captionFineProducers, captionFineTypes } from "./manifest.js";
+const input = (name) => ({ kind: "fragment-input", name });
+const operation = (id) => ({ kind: "fragment-operation", operation: id });
+import { fineCaptionStyle } from "./style.js";
+function sameType(left, right) {
+    return left.module.name === right.module.name && left.module.version === right.module.version && left.name === right.name;
+}
+function attributes(element, required, optional = []) {
+    const actual = Object.keys(element.attributes);
+    const allowed = new Set([...required, ...optional]);
+    if (required.some((name) => element.attributes[name] === undefined) || actual.some((name) => !allowed.has(name))) {
+        const suffix = optional.length === 0 ? "" : `, with optional ${optional.join(", ")}`;
+        throw new Error(`${element.name} requires ${required.join(", ")}${suffix}`);
+    }
+}
+function stringAttribute(element, name) {
+    const value = element.attributes[name];
+    if (typeof value !== "string" || !value.trim())
+        throw new Error(`${element.name}.${name} must be a non-empty string`);
+    return value.trim();
+}
+function reference(element, name, expected, resolveReference) {
+    const raw = element.attributes[name];
+    if (typeof raw !== "object" || raw.kind !== "reference") {
+        throw new Error(`${element.name}.${name} must be a whole-value reference`);
+    }
+    const value = resolveReference(raw.path);
+    if (value === undefined)
+        throw new Error(`${element.name}.${name} cannot resolve ${raw.path}`);
+    if (!sameType(value.type, expected))
+        throw new Error(`${element.name}.${name} has the wrong type`);
+    return value;
+}
+function inline(referenceValue, subject) {
+    if (referenceValue.record?.value.kind !== "inline")
+        throw new Error(`${subject} must reference an authored inline Record`);
+    return referenceValue.record.value.value;
+}
+function localName(name) {
+    const colon = name.lastIndexOf(":");
+    return colon < 0 ? name : name.slice(colon + 1);
+}
+function exactFonts(element, resolveReference) {
+    const result = [];
+    const primary = element.attributes.font;
+    if (primary === undefined)
+        throw new Error(`${element.name} requires font`);
+    if (typeof primary !== "object" || primary.kind !== "reference") {
+        throw new Error(`${element.name}.font must be a whole-value reference`);
+    }
+    const resolved = resolveReference(primary.path);
+    if (resolved === undefined)
+        throw new Error(`${element.name}.font cannot resolve ${primary.path}`);
+    if (sameType(resolved.type, mediaTypes.fontArtifact)) {
+        result.push(inline(resolved, `${element.name}.font`));
+    }
+    else if (sameType(resolved.type, mediaTypes.fontStack)) {
+        const stack = inline(resolved, `${element.name}.font`);
+        assertFontStackRef(stack, `${element.name}.font`);
+        result.push(...stack.faces);
+    }
+    else {
+        throw new Error(`${element.name}.font has the wrong type`);
+    }
+    for (const child of element.children) {
+        if (child.kind === "text") {
+            if (child.value.trim())
+                throw new Error(`${element.name} accepts only Fallback children`);
+            continue;
+        }
+        if (localName(child.name) !== "Fallback")
+            throw new Error(`${element.name} accepts only Fallback children`);
+        attributes(child, ["font"]);
+        if (child.children.some((nested) => nested.kind === "element" || nested.value.trim())) {
+            throw new Error(`${child.name} does not accept children`);
+        }
+        result.push(inline(reference(child, "font", mediaTypes.fontArtifact, resolveReference), `${child.name}.font`));
+    }
+    for (const [index, font] of result.entries())
+        assertFontArtifactRef(font, `${element.name}.font.${index + 1}`);
+    return result;
+}
+export const decodeFineCaptionStyleSurface = ({ element, resolveReference }) => {
+    attributes(element, ["id", "recipe", "font"]);
+    const id = stringAttribute(element, "id");
+    const recipe = inline(reference(element, "recipe", recipeType, resolveReference), `${element.name}.recipe`);
+    const style = fineCaptionStyle(id, recipe, exactFonts(element, resolveReference));
+    return {
+        records: [{ id, type: captionTypes.style, value: { kind: "inline", value: style }, range: element.range }],
+        components: [],
+        fragments: [],
+    };
+};
+export const decodeFineCaptionTrackSurface = ({ element, resolveReference }) => {
+    attributes(element, ["id", "document", "timing", "timeline", "within"], ["regions"]);
+    const id = stringAttribute(element, "id");
+    const document = reference(element, "document", captionTypes.document, resolveReference);
+    const timing = reference(element, "timing", captionTypes.timing, resolveReference);
+    const within = reference(element, "within", spatialTypes.frame, resolveReference);
+    const context = resolveTemporalContext({ element, resolveReference });
+    const regions = element.attributes.regions === undefined ? undefined : reference(element, "regions", regionEvidenceTypes.evidence, resolveReference);
+    const records = [{ id: `${id}.header`, type: captionTypes.header,
+            value: { kind: "inline", value: { id } }, range: element.range }];
+    const components = [];
+    const fragments = [];
+    const inputs = [{ name: "document", type: captionTypes.document }, { name: "timing", type: captionTypes.timing }, { name: "timeline", type: timelineTypes.timeline }, { name: "within", type: spatialTypes.frame }, { name: "header", type: captionTypes.header }];
+    const bindings = { document: document.ref, timing: timing.ref, timeline: context.timeline.ref, within: within.ref, header: { kind: "record", id: `${id}.header` } };
+    const operations = [{ id: "create", producer: captionProducers.create,
+            inputs: { document: input("document"), header: input("header") }, result: { kind: "output", name: "program" } }];
+    let previous = "create", index = 0;
+    for (const child of element.children) {
+        if (child.kind === "text") {
+            if (child.value.trim())
+                throw new Error("Caption accepts Use children.");
+            continue;
+        }
+        if (localName(child.name) !== "Use")
+            throw new Error("Caption accepts Use children.");
+        attributes(child, ["style"], ["id", "role", ...temporalWindowAttributeNames]);
+        assertEmptyElement(child);
+        index += 1;
+        const useId = optionalTextAttribute(child, "id") ?? `${id}.use.${index}`;
+        const window = child.attributes.during === undefined
+            ? undefined
+            : resolveTemporalWindowReference({ element: child, resolveReference });
+        const style = reference(child, "style", captionTypes.style, resolveReference);
+        const role = optionalTextAttribute(child, "role");
+        const filterId = `${useId}.filter`;
+        records.push({ id: filterId, type: captionTypes.filter, value: { kind: "inline", value: {
+                    id: useId, ...(role === undefined ? {} : { role }),
+                } }, range: child.range });
+        const key = `use-${index}`;
+        inputs.push(...(window === undefined ? [] : [{ name: `${key}-window`, type: temporalTypes.window }]), { name: `${key}-style`, type: captionTypes.style }, { name: `${key}-filter`, type: captionTypes.filter });
+        if (window !== undefined)
+            bindings[`${key}-window`] = window.ref;
+        bindings[`${key}-style`] = style.ref;
+        bindings[`${key}-filter`] = { kind: "record", id: filterId };
+        operations.push({ id: key, producer: window === undefined ? captionProducers.appendUnbounded : captionProducers.append,
+            inputs: { program: operation(previous), ...(window === undefined ? {} : { window: input(`${key}-window`) }),
+                style: input(`${key}-style`), filter: input(`${key}-filter`) }, result: { kind: "output", name: "program" } });
+        previous = key;
+    }
+    operations.push({ id: "schedule", producer: captionFineProducers.schedule,
+        inputs: { timing: input("timing"), document: input("document"), program: operation(previous) }, result: { kind: "output", name: "schedule" } });
+    if (regions !== undefined) {
+        inputs.push({ name: "regions", type: regionEvidenceTypes.evidence });
+        bindings.regions = regions.ref;
+    }
+    operations.push({ id: "render", producer: regions === undefined ? captionFineProducers.render : captionFineProducers.renderWithRegions,
+        inputs: { schedule: operation("schedule"), document: input("document"), timeline: input("timeline"), within: input("within"), program: operation(previous), ...(regions === undefined ? {} : { regions: input("regions") }) }, result: { kind: "output", name: "track" } });
+    const collector = sealGraphFragment({ inputs, operations, exports: [
+            { name: "program", type: captionTypes.program, root: operation(previous) },
+            { name: "schedule", type: captionFineTypes.schedule, root: operation("schedule") },
+            { name: "visual", type: compositionTypes.visualTrack, root: operation("render") },
+        ] });
+    fragments.push(collector);
+    components.push({ id, fragment: collector.id, inputs: bindings,
+        outputs: { program: `${id}.program`, schedule: `${id}.schedule`, visual: `${id}.visual` }, range: element.range });
+    return { records, components, fragments, exports: [`${id}.program`, `${id}.schedule`, `${id}.visual`] };
+};