@hypit/caption-fine 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,26 @@
+# Open Source License
+
+Hypit is licensed under a modified version of the Apache License 2.0, with the following additional conditions:
+
+1. Hypit may be utilized commercially for your own organization's purposes, including as a rendering or generation backend for applications your organization operates for itself, and as internal tooling within an enterprise. Should any of the conditions below be met, a commercial license must be obtained from the producer:
+
+a. Multi-tenant service: Unless explicitly authorized by Hypit.AI in writing, you may not use the Hypit source code, or any derivative work of it, to operate a multi-tenant environment, or to offer Hypit's functionality to third parties as a hosted, managed, or software-as-a-service offering.
+    - Tenant Definition: Within the context of Hypit, one tenant corresponds to one workspace — the isolated set of projects, artifacts, credentials, and configuration belonging to a single party. Operating an environment in which two or more parties outside your own organization hold separate workspaces constitutes a multi-tenant service, whether or not a fee is charged.
+
+b. Commercial redistribution: Unless explicitly authorized by Hypit.AI in writing, you may not sell, license for a fee, or otherwise supply for commercial gain Hypit or any derivative work of it, whether standalone or as a component of, or bundled with, any product, application, package, or device provided to third parties.
+    - Forking, modifying, and publishing the source code of Hypit or a derivative work is permitted, provided the result is made available under the terms of this same license and is not supplied for commercial gain.
+
+    - Permitted without a commercial license under clauses (a) and (b): obtaining Hypit and running it yourself on your own infrastructure; using it for your own organization's work, including commercial work and work performed for your clients; and single-tenant deployments operated by and for one organization.
+
+c. LOGO and copyright information: In the process of using Hypit, you may not remove or modify the name, LOGO, or copyright information presented in the Hypit command-line interface, its generated run reports and manifests, or any user-facing surface derived from them. This restriction is inapplicable to uses of Hypit that do not surface these components to a user.
+
+2. As a contributor, you should agree that:
+
+a. The producer can adjust the open-source agreement to be more strict or relaxed as deemed necessary.
+b. Your contributed code may be used for commercial purposes, including but not limited to its cloud business operations.
+
+3. Ownership of output: The producer claims no rights in the content you create with Hypit. Videos, audio, images, manifests, and any other artifacts produced through your use of Hypit belong to you, and this license imposes no conditions on their use — including commercial use. Note that content generated by way of third-party model or service providers may additionally be subject to the terms of those providers.
+
+Apart from the specific conditions mentioned above, all other rights and restrictions follow the Apache License 2.0. Detailed information about the Apache License 2.0 can be found at http://www.apache.org/licenses/LICENSE-2.0.
+
+© 2026 Hypit.AI

package/README.md

@@ -1,3 +1,155 @@
-# Temporary Holding Version
+# `@hypit/caption-fine`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The fine-grained, uniform-flow Caption family. Recipes control placement, typography, Paint,
+active-word treatment and motion. It renders authored Cues whose tokens all obey the same layout,
+type, Paint and motion rules. Spoken time and token order may change the state of that rule; a token
+does not carry a private visual role.
+
+```xml
+<caption-fine:Style id="primary" recipe={recipes.caption.primary} font={caption-font}/>
+
+<caption-fine:Caption id="captions-track" document={story.caption} timing={story-captions}
+  timeline={speech.timeline} within={vertical.bounds}>
+    <caption-fine:Use style={primary}/>
+  </caption-fine:Caption>
+```
+
+An optional Region Evidence supplies a moving placement point when the user's reference
+visibly uses head-following Caption or the user asks for that treatment. Ordinary Caption uses the
+Style's placement without regions. Region Evidence is authored numeric input mapped from available picture
+evidence to the composition that consumes it; it is not a face-tracking request:
+
+```xml
+<import as="region" from="@hypit/region-evidence@1"/>
+<region:Evidence id="heads" within={vertical.bounds} timeline={speech.timeline}
+  recipe={tracking.heads.default}/>
+<caption-fine:Caption id="captions-track" document={story.caption} timing={story-captions}
+  timeline={speech.timeline} within={vertical.bounds} regions={heads}>
+    <caption-fine:Use style={primary}/>
+  </caption-fine:Caption>
+```
+
+With `regions`, every Cue must carry one Script Role. When Region Evidence contains a measured region for that
+Role and Frame, Fine places the Cue at the region's top center. When that Role has a series but
+the current Frame is `null`, the Cue is not rendered: absence of evidence never becomes a guessed
+position. A Role with no evidence series uses the Style's authored `x` and `y`, so unrelated speakers remain
+ordinary fixed captions. The Style still owns its width and anchors, so `anchor-x: center;
+anchor-y: bottom` puts the Caption immediately above a measured region. The Timeline is finished
+external evidence: Fine does not detect people, associate identities, smooth motion, interpolate
+missing Frames or invoke a Provider. Without `regions`, the ordinary Recipe `x` and `y` behavior is
+unchanged.
+
+This keeps placement inspectable and editable. If a tracked face needs padding or an above-head anchor,
+transform the measured numbers while authoring Region Evidence, then give Caption the result. Do
+not hide that transformation in a Provider or ask the Build to rediscover the face.
+
+One SVS Recipe freezes three public dimensions:
+
+- **Where**: Region position, anchors, extent, block/inline alignment, wrapping and line limits.
+- **How**: the exact font stack, typography, base/active glyph Paint, Cue box and decoration.
+- **When**: the visible lead/tail envelope, handoff, Cue/Atom motion, reveal, Karaoke and loops.
+
+An upstream adapter supplies absolute Caption Unit timing. Fine then joins the document's authored
+Cues to that complete timing and produces an explicit visible Schedule. It never splits or merges a
+Cue. Lead and tail never change the source times used by Karaoke. Later Uses mask earlier
+presentation, including Hidden. The final visibility is clipped to the winning Use Window while the
+original Cue envelope and animations are preserved.
+
+The Fine Schedule preserves the CaptionTiming's Timeline and document identities. It contains no
+Narrative identity. The renderer rejects any mismatched Timeline or document. Studio may expose
+lead, tail and handoff as ordinary parameter edits, but Cue rectangles remain read-only timing facts.
+
+Script segments, turns and `||` organize complete Cues. Timed Uses select presentation without
+changing that grouping. Fine applies uniform rules to the words of a Cue. A caption whose Cue contains structural roles or
+relationships—such as an independently arranged oversized keyword and supporting phrase—can use
+a new project Caption family. Reuse the common [Caption content, timed Uses and timing](../caption/README.md),
+and implement the new schedule and rendering behavior in that package. This is ordinary component
+authorship; different colors or fonts alone can remain Fine Style choices.
+
+```svs
+caption.primary {
+  stack-order: 70;
+  x: 0.5; y: 0.9; width: 0.84; height: 0.22;
+  anchor-x: center; anchor-y: bottom;
+  align: center; block-align: end; inline-size: fixed;
+  wrap: word;
+  size: 58; line-height: 1; fill: #FFFFFF;
+  background: #00000000; padding: "0"; radius: 0;
+  karaoke: current; active-fill: #FFD54A;
+  cue-enter: spring; cue-enter-frames: 4;
+  cue-enter-start-scale: 0.75;
+  cue-exit: none;
+  lead-frames: 4; tail-frames: 4; handoff: cut;
+}
+```
+
+## Language, spacing and line layout
+
+The same Caption pipeline serves authored text across writing systems. Script emits lexical words
+and individual Han characters as Display Words; punctuation stays with its display word. Fine uses
+those units for timing and active Paint, while authored Cues remain complete reading phrases.
+Dual Text retains its complete alignment unit even when it displays or speaks several words.
+
+`<组件化|>` authors the same unit as `<组件化|组件化>` without repeating the speech. Fine's `step`
+karaoke, active underline and active box treat that unit together using its first-to-last speech
+interval. Ordinary Chinese characters around it retain their own activation times. This is an
+explicit authored group, not a renderer-selected segmentation, and does not introduce a new Cue.
+The underlying character anchors remain available to other Timeline consumers. `wipe` and
+`typewriter` still animate inside the complete unit over its interval when deliberately selected.
+
+`word-gap` sizes the separators authored in `CaptionDisplayWord.separatorBefore`. A numeric or
+writing-system boundary does not create a space: `3D` and `3개월` stay joined, while `是的 就是这样`
+keeps its space. Base text, active text, underlines and joined boxes consume the same boundaries.
+For `active-box: trail; active-box-continuity: joined`, Fine measures the complete stationary Cue,
+including the inactive suffix, and joins its painted line rectangles. An over-wide word's internal
+lines are included. Padding and borders extend beyond those rectangles without changing text flow;
+overlapping line backgrounds share one outline and paint translucent color once. Cue motion then
+moves text and decoration together.
+
+This decoration uses the HtmlProgram's local `HtmlVisual` extension, owned by Fine. Its
+measurement copy uses the same exact-font text and available width, is removed synchronously after
+measurement, and is recomputed when a frame is sought (including after fonts finish loading). It
+adds no layout records to Script, Caption, Timeline or Runtime. Other backends must support the
+selected program format explicitly.
+
+`letter-spacing` controls glyph tracking. Exact font fallbacks supply the required glyphs; the layout
+does not select a font by language.
+
+| Control | Behavior |
+| --- | --- |
+| `width`, `size`, `padding`, `letter-spacing`, `word-gap` | Determine the available space and the text's occupied width. |
+| `wrap: word` | Flows at display-unit boundaries and permits an over-wide word to break. Han units are already characters. |
+| `wrap: grapheme` | Also permits breaking inside a Latin word. |
+| `max-words-per-line` | Optional counted row breaks between complete alignment units. Counts Display Words, normally characters for Chinese; it does not make new Cues. An indivisible Dual Text unit can exceed this count. |
+| `max-lines` | Requires `max-words-per-line`; rejects too many counted rows. It does not measure browser wrapping or guarantee one physical line. |
+
+Both count limits are omitted above so the example flows by available width. For a compact
+single-line treatment, author coherent Cues and choose a font, size and width that fit those Cues.
+`karaoke: off` keeps a complete Cue steady; `current` and `trail` follow its timed units, which are
+normally individual characters in Chinese.
+
+| Effect | Recipe | Visible behavior |
+| --- | --- | --- |
+| Whole-character emphasis | `karaoke: current; karaoke-transition: step` | The complete current unit takes the active Paint at its start, returning to base Paint at its end. |
+| Accumulating emphasis | `karaoke: trail; karaoke-transition: step` | Each complete unit takes the active Paint at its start and keeps it for the rest of the Cue. |
+| Sweeping fill | `karaoke: trail; karaoke-transition: wipe` | Paint sweeps inside each unit's glyphs during that unit's own time window. |
+| Spoken-unit appearance | `atom-reveal: on-start` | Each complete unit appears at its start. |
+| Typing appearance | `atom-reveal: typewriter` | Whole graphemes appear in sequence within each unit, starting with its first grapheme at the unit's start. A normal Han unit appears as a complete character. |
+
+`step` is the default Karaoke transition. Choose it for ordinary Chinese character highlighting;
+`wipe` deliberately produces partial glyph fills. Cue width and duration do not supply a substitute
+clock for either mode. `atom-reveal` controls text appearing, independently of Karaoke recoloring
+already visible text. A Dual Text span shares one timing unit, so its display words activate together
+under `step`; keep pronunciation markup scoped to the name or expression that needs it.
+
+The Hypit Skill's Caption craft page owns grouping and visual direction.
+
+`font` accepts an exact face or ordered stack. A local file declared through `media:Font` can be the
+primary face or a `<caption-fine:Fallback font={...}/>` child, just like a bundled face. See
+[Media font assets](../media/README.md#font-files) and the independently installed
+[`@hypit/fontsource` adapter](../fontsource/README.md).
+
+The package's Studio facet, published as `@hypit/caption-fine/studio`, reads the same schedule and
+authored Use Style references. It presents the actual Cue timing and exposes Use timing and supported
+Style edits in the Inspector. Runtime and authoring support therefore ship as one versioned capability
+rather than as independently versioned packages.

package/dist/activation.d.ts

@@ -0,0 +1,8 @@
+export declare const hypitPackage: {
+    format: "hypit.package@1";
+    modules: {
+        manifest: import("@hypit/hypit/protocol").ModuleManifest;
+    }[];
+    facets: import("@hypit/hypit/facet").Facet[];
+};
+export default hypitPackage;

package/dist/activation.js

@@ -0,0 +1,30 @@
+import { createAdmissionPackageFacet } from "@hypit/hypit/admission";
+import { createProducerPackageFacet } from "@hypit/hypit/producer";
+import { createMarkupSurfaceFacet } from "@hypit/hypit/markup";
+import { createStudioCompanionFacet } from "@hypit/studio-companion";
+import { captionFineComponent, captionFineManifest, captionFineModuleRef, decodeFineCaptionStyleSurface, decodeFineCaptionTrackSurface, captionFineMarkupSurfaces, } from "./index.js";
+import { captionFineStudioParameterCompanions, captionFineStudioTrackCompanions } from "./studio.js";
+export const hypitPackage = {
+    format: "hypit.package@1",
+    modules: [{
+            manifest: captionFineManifest,
+        }],
+    facets: [
+        ...[captionFineComponent].flatMap((component) => [createProducerPackageFacet(component), createAdmissionPackageFacet(component)]),
+        createMarkupSurfaceFacet({
+            module: captionFineModuleRef,
+            declaration: captionFineMarkupSurfaces.find((item) => item.name === "style"),
+            handler: decodeFineCaptionStyleSurface,
+        }),
+        createMarkupSurfaceFacet({
+            module: captionFineModuleRef,
+            declaration: captionFineMarkupSurfaces.find((item) => item.name === "caption"),
+            handler: decodeFineCaptionTrackSurface,
+        }),
+        createStudioCompanionFacet({
+            tracks: captionFineStudioTrackCompanions,
+            parameters: captionFineStudioParameterCompanions,
+        }),
+    ],
+};
+export default hypitPackage;

package/dist/component.d.ts

@@ -0,0 +1,37 @@
+export declare const captionFineComponent: {
+    producers: ({
+        producer: {
+            module: {
+                readonly name: "@hypit/caption-fine";
+                readonly version: "1";
+            };
+            name: string;
+        };
+        handler: ({ inputs }: import("@hypit/hypit/producer").ProducerHandlerContext) => {
+            outputs: {
+                schedule: {
+                    kind: "inline";
+                    value: import("@hypit/hypit/protocol").CanonicalValue;
+                };
+            };
+            needs: {};
+        };
+    } | {
+        producer: {
+            module: {
+                readonly name: "@hypit/caption-fine";
+                readonly version: "1";
+            };
+            name: string;
+        };
+        handler: ({ inputs }: import("@hypit/hypit/producer").ProducerHandlerContext) => {
+            outputs: {
+                track: {
+                    kind: "inline";
+                    value: import("@hypit/hypit/protocol").CanonicalValue;
+                };
+            };
+            needs: {};
+        };
+    })[];
+};

package/dist/component.js

@@ -0,0 +1,34 @@
+import { canonicalize } from "@hypit/hypit/protocol";
+import { captionFineProducers } from "./manifest.js";
+import { renderFineCaption } from "./render.js";
+import { scheduleFineCaption } from "./schedule.js";
+function inline(value, subject) {
+    if (value?.kind !== "inline")
+        throw new Error(`${subject} must be inline`);
+    return value.value;
+}
+export const captionFineComponent = {
+    producers: [
+        {
+            producer: captionFineProducers.schedule,
+            handler: ({ inputs }) => ({
+                outputs: { schedule: { kind: "inline", value: canonicalize(scheduleFineCaption(inline(inputs.timing?.value, "CaptionTiming"), inline(inputs.program?.value, "CaptionProgram"), inline(inputs.document?.value, "CaptionDocument"))) } },
+                needs: {},
+            }),
+        },
+        {
+            producer: captionFineProducers.render,
+            handler: ({ inputs }) => ({
+                outputs: { track: { kind: "inline", value: canonicalize(renderFineCaption(inline(inputs.schedule?.value, "FineCaptionSchedule"), inline(inputs.program?.value, "CaptionProgram"), inline(inputs.document?.value, "CaptionDocument"), inline(inputs.timeline?.value, "Timeline"), inline(inputs.within?.value, "SpatialFrame"))) } },
+                needs: {},
+            }),
+        },
+        {
+            producer: captionFineProducers.renderWithRegions,
+            handler: ({ inputs }) => ({
+                outputs: { track: { kind: "inline", value: canonicalize(renderFineCaption(inline(inputs.schedule?.value, "FineCaptionSchedule"), inline(inputs.program?.value, "CaptionProgram"), inline(inputs.document?.value, "CaptionDocument"), inline(inputs.timeline?.value, "Timeline"), inline(inputs.within?.value, "SpatialFrame"), inline(inputs.regions?.value, "RegionEvidence"))) } },
+                needs: {},
+            }),
+        },
+    ],
+};

package/dist/fragment.d.ts

@@ -0,0 +1,4 @@
+/** One timing join plus one Style-family render operation, regardless of how many Styles are used. */
+export declare const fineCaptionTrackFragment: import("@hypit/hypit/author").GraphFragment;
+/** The same Caption pipeline with one explicit, external spatial-evidence edge. */
+export declare const fineCaptionRegionEvidenceFragment: import("@hypit/hypit/author").GraphFragment;

package/dist/fragment.js

@@ -0,0 +1,84 @@
+import { captionTypes } from "@hypit/hypit/caption";
+import { compositionTypes } from "@hypit/hypit/composition";
+import { sealGraphFragment } from "@hypit/hypit/author";
+import { timelineTypes } from "@hypit/hypit/timeline";
+import { regionEvidenceTypes } from "@hypit/hypit/region-evidence";
+import { spatialTypes } from "@hypit/hypit/spatial";
+import { captionFineProducers, captionFineTypes } from "./manifest.js";
+const input = (name) => ({ kind: "fragment-input", name });
+const operation = (id) => ({ kind: "fragment-operation", operation: id });
+/** One timing join plus one Style-family render operation, regardless of how many Styles are used. */
+export const fineCaptionTrackFragment = sealGraphFragment({
+    inputs: [
+        { name: "document", type: captionTypes.document },
+        { name: "timeline", type: timelineTypes.timeline },
+        { name: "within", type: spatialTypes.frame },
+        { name: "timing", type: captionTypes.timing },
+        { name: "program", type: captionTypes.program },
+    ],
+    operations: [
+        {
+            id: "caption-fine:schedule",
+            producer: captionFineProducers.schedule,
+            inputs: {
+                timing: input("timing"), program: input("program"), document: input("document"),
+            },
+            result: { kind: "output", name: "schedule" },
+        },
+        {
+            id: "caption-fine:render",
+            producer: captionFineProducers.render,
+            inputs: {
+                schedule: operation("caption-fine:schedule"), program: input("program"),
+                document: input("document"), timeline: input("timeline"), within: input("within"),
+            },
+            result: { kind: "output", name: "track" },
+        },
+    ],
+    exports: [
+        {
+            name: "schedule",
+            type: captionFineTypes.schedule,
+            root: operation("caption-fine:schedule"),
+        },
+        {
+            name: "visual",
+            type: compositionTypes.visualTrack,
+            root: operation("caption-fine:render"),
+        },
+    ],
+});
+/** The same Caption pipeline with one explicit, external spatial-evidence edge. */
+export const fineCaptionRegionEvidenceFragment = sealGraphFragment({
+    inputs: [
+        { name: "document", type: captionTypes.document },
+        { name: "timeline", type: timelineTypes.timeline },
+        { name: "within", type: spatialTypes.frame },
+        { name: "timing", type: captionTypes.timing },
+        { name: "program", type: captionTypes.program },
+        { name: "regions", type: regionEvidenceTypes.evidence },
+    ],
+    operations: [
+        {
+            id: "caption-fine:schedule",
+            producer: captionFineProducers.schedule,
+            inputs: {
+                timing: input("timing"), program: input("program"), document: input("document"),
+            },
+            result: { kind: "output", name: "schedule" },
+        },
+        {
+            id: "caption-fine:render",
+            producer: captionFineProducers.renderWithRegions,
+            inputs: {
+                schedule: operation("caption-fine:schedule"), program: input("program"),
+                document: input("document"), timeline: input("timeline"), within: input("within"), regions: input("regions"),
+            },
+            result: { kind: "output", name: "track" },
+        },
+    ],
+    exports: [
+        { name: "schedule", type: captionFineTypes.schedule, root: operation("caption-fine:schedule") },
+        { name: "visual", type: compositionTypes.visualTrack, root: operation("caption-fine:render") },
+    ],
+});

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { captionFineComponent } from "./component.js";
+export { fineCaptionRegionEvidenceFragment, fineCaptionTrackFragment } from "./fragment.js";
+export { captionFineManifest, captionFineMarkupSurfaces, captionFineModuleRef, captionFineProducers, captionFineTypes } from "./manifest.js";
+export { renderFineCaption } from "./render.js";
+export { assertFineCaptionSchedule, scheduleFineCaption } from "./schedule.js";
+export { fineCaptionOneShotMotions, fineCaptionOptionalRecipeProperties, fineCaptionRecipeSchema, fineCaptionRequiredRecipeProperties, } from "./recipe.js";
+export { assertFineCaptionParameters, FINE_CAPTION_FAMILY, fineCaptionParameters, fineCaptionStyle, } from "./style.js";
+export { decodeFineCaptionStyleSurface, decodeFineCaptionTrackSurface } from "./surface.js";
+export type * from "./types.js";
+export { fineCaptionEditableDefaults } from "./recipe.js";

package/dist/index.js

@@ -0,0 +1,9 @@
+export { captionFineComponent } from "./component.js";
+export { fineCaptionRegionEvidenceFragment, fineCaptionTrackFragment } from "./fragment.js";
+export { captionFineManifest, captionFineMarkupSurfaces, captionFineModuleRef, captionFineProducers, captionFineTypes } from "./manifest.js";
+export { renderFineCaption } from "./render.js";
+export { assertFineCaptionSchedule, scheduleFineCaption } from "./schedule.js";
+export { fineCaptionOneShotMotions, fineCaptionOptionalRecipeProperties, fineCaptionRecipeSchema, fineCaptionRequiredRecipeProperties, } from "./recipe.js";
+export { assertFineCaptionParameters, FINE_CAPTION_FAMILY, fineCaptionParameters, fineCaptionStyle, } from "./style.js";
+export { decodeFineCaptionStyleSurface, decodeFineCaptionTrackSurface } from "./surface.js";
+export { fineCaptionEditableDefaults } from "./recipe.js";

package/dist/joined-box.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Fine's joined decoration is measured after browser layout. Its temporary, untransformed copy
+ * uses the same exact-font children and content width, so Cue motion cannot distort measurements.
+ * Nothing is retained outside the program or written back into Script/Caption/Timeline.
+ */
+export declare const joinedBoxSetup: string;

package/dist/joined-box.js

@@ -0,0 +1,114 @@
+/**
+ * Fine's joined decoration is measured after browser layout. Its temporary, untransformed copy
+ * uses the same exact-font children and content width, so Cue motion cannot distort measurements.
+ * Nothing is retained outside the program or written back into Script/Caption/Timeline.
+ */
+export const joinedBoxSetup = String.raw `
+const layout = root.querySelector('[data-fine-box-layout]');
+const layers = [...root.querySelectorAll('[data-caption-active-box="joined"]')];
+const ns = 'http://www.w3.org/2000/svg';
+const paths = layers.map(layer => {
+  const svg = document.createElementNS(ns, 'svg');
+  svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;overflow:visible';
+  const path = document.createElementNS(ns, 'path');
+  path.setAttribute('fill', data.background);
+  path.setAttribute('stroke', data.borderColor);
+  path.setAttribute('stroke-width', String(data.borderWidth));
+  svg.append(path); layer.append(svg); return path;
+});
+// Union on actual rectangle edges. Tracing only the exterior removes internal borders and
+// paints translucent fills once, including where line padding overlaps the neighbouring line.
+const outline = rectangles => {
+  const xs = [...new Set(rectangles.flatMap(r => [r.left, r.right]))].sort((a,b) => a-b);
+  const ys = [...new Set(rectangles.flatMap(r => [r.top, r.bottom]))].sort((a,b) => a-b);
+  const cells = ys.slice(1).map((_, y) => xs.slice(1).map((_, x) => rectangles.some(r =>
+    r.left <= xs[x] && r.right >= xs[x+1] && r.top <= ys[y] && r.bottom >= ys[y+1])));
+  const edges = new Map();
+  const key = (x,y) => x+','+y;
+  const add = (x,y,ex,ey) => {
+    const k = key(x,y), list = edges.get(k) || [];
+    list.push([ex,ey]); edges.set(k,list);
+  };
+  for (let y=0;y<cells.length;y++) for (let x=0;x<cells[y].length;x++) {
+    if (!cells[y][x]) continue;
+    if (!cells[y-1]?.[x]) add(x,y,x+1,y);
+    if (!cells[y]?.[x+1]) add(x+1,y,x+1,y+1);
+    if (!cells[y+1]?.[x]) add(x+1,y+1,x,y+1);
+    if (!cells[y]?.[x-1]) add(x,y+1,x,y);
+  }
+  const contours = [];
+  while (edges.size) {
+    const start = edges.keys().next().value.split(',').map(Number);
+    const points = []; let current = start, previous;
+    do {
+      points.push([xs[current[0]],ys[current[1]]]);
+      const k = key(...current), next = edges.get(k);
+      let index = 0;
+      if (next.length > 1 && previous) {
+        const dx = current[0]-previous[0], dy = current[1]-previous[1];
+        // At a point contact, keep each contour on its own side of the corner.
+        index = next.findIndex(p => dx*(p[1]-current[1])-dy*(p[0]-current[0]) > 0);
+        if (index < 0) index = 0;
+      }
+      const target = next.splice(index,1)[0];
+      if (!next.length) edges.delete(k);
+      previous = current; current = target;
+    } while (current[0] !== start[0] || current[1] !== start[1]);
+    const corners = points.filter((p,i) => {
+      const a = points[(i+points.length-1)%points.length], b = points[(i+1)%points.length];
+      return (p[0]-a[0])*(b[1]-p[1]) !== (p[1]-a[1])*(b[0]-p[0]);
+    });
+    const rounded = corners.map((p,i) => {
+      const a = corners[(i+corners.length-1)%corners.length], b = corners[(i+1)%corners.length];
+      const before = Math.hypot(p[0]-a[0],p[1]-a[1]), after = Math.hypot(b[0]-p[0],b[1]-p[1]);
+      const radius = Math.min(data.radius, before/2, after/2);
+      return { p, start: [p[0]+(a[0]-p[0])*radius/before,p[1]+(a[1]-p[1])*radius/before],
+        end: [p[0]+(b[0]-p[0])*radius/after,p[1]+(b[1]-p[1])*radius/after], radius,
+        turn: (p[0]-a[0])*(b[1]-p[1])-(p[1]-a[1])*(b[0]-p[0]) };
+    });
+    contours.push(rounded.map((c,i) => (i ? 'L' : 'M')+c.start.join(' ')
+      +(c.radius ? 'A'+c.radius+' '+c.radius+' 0 0 '+(c.turn>0 ? 1 : 0)+' '+c.end.join(' ') : '')).join(' ')+'Z');
+  }
+  return contours.join(' ');
+};
+return () => {
+  const measure = layout.cloneNode(true);
+  // Exact font declarations are already inline on the typed text children. Copy the inherited
+  // flow properties explicitly; the measurement must not inherit the document body's typography.
+  const style = getComputedStyle(layout);
+  const rootStyle = getComputedStyle(root);
+  const offsetX = parseFloat(rootStyle.paddingLeft), offsetY = parseFloat(rootStyle.paddingTop);
+  for (const name of ['font-size','line-height','text-align','direction','letter-spacing','word-spacing']) {
+    measure.style.setProperty(name,style.getPropertyValue(name));
+  }
+  measure.style.cssText += ';position:fixed;left:0;top:0;margin:0;padding:0;border:0;box-sizing:content-box;'
+    +'width:'+style.width+';height:auto;max-width:none;transform:none;visibility:hidden;pointer-events:none';
+  measure.removeAttribute('id');
+  for (const child of measure.querySelectorAll('[id]')) child.removeAttribute('id');
+  document.body.append(measure);
+  let words;
+  try {
+    const origin = measure.getBoundingClientRect();
+    words = [...measure.querySelectorAll('[data-fine-box-word]')].map(word => {
+      const range = document.createRange(); range.selectNodeContents(word);
+      return [...range.getClientRects()].filter(r => r.width > 0 && r.height > 0).map(r => ({
+        left:r.left-origin.left+offsetX, right:r.right-origin.left+offsetX,
+        top:r.top-origin.top+offsetY, bottom:r.bottom-origin.top+offsetY,
+      }));
+    });
+  } finally { measure.remove(); }
+  const lines = new Map(); let wordIndex = 0;
+  for (let index=0;index<paths.length;index++) {
+    for (let count=0;count<data.wordCounts[index];count++) for (const rect of words[wordIndex++]) {
+      const line = lines.get(rect.top);
+      if (!line) lines.set(rect.top,{...rect});
+      else { line.left=Math.min(line.left,rect.left); line.right=Math.max(line.right,rect.right);
+        line.bottom=Math.max(line.bottom,rect.bottom); }
+    }
+    paths[index].setAttribute('d',outline([...lines.values()].map(r => ({
+      left:r.left-data.paddingX-data.borderWidth/2, right:r.right+data.paddingX+data.borderWidth/2,
+      top:r.top-data.paddingY-data.borderWidth/2, bottom:r.bottom+data.paddingY+data.borderWidth/2,
+    }))));
+  }
+};
+`;