domotion-svg 0.20.0 → 0.22.2

package/FEATURES.md

@@ -11,9 +11,11 @@ Each feature has a visual regression test that compares HTML-to-PNG with SVG-to-
 - [x] **text-right**: Right-aligned text
 - [x] **text-mono**: Monospace font rendering
 - [x] **text-multiline**: Multiple lines of text in a container
+- [x] **lineheight-residual**: Baseline pixel-grid snap on fractional line-height baselines (18px × 1.6 → 28.796875px line boxes; Skia rounds glyph y to integer device pixels)
 - [x] **text-small**: Small/label text (11-12px)
 - [x] **text-inline-mixed**: Mixed inline content (prose with inline code spans)
 - [x] **text-pre-multiline**: Preformatted multiline text (`<pre>` with `white-space: pre`)
+- [x] **text-font-stretch-underline**: CSS `font-stretch` end to end — condensed/expanded cut selection for declared families (Blink's trait-based style matcher), the `wdth` variation axis on the macOS `system-ui` face and variable webfonts, and decoration metrics resolved on the same width-matched face as the glyphs
 
 ### Backgrounds & Colors
 - [x] **bg-solid**: Solid background colors
@@ -35,6 +37,7 @@ Each feature has a visual regression test that compares HTML-to-PNG with SVG-to-
 - [ ] **layout-grid**: CSS Grid layout
 - [ ] **layout-absolute**: Absolute positioning
 - [x] **layout-padding**: Padding affecting content position
+- [x] **float-paint-order-context-wide** (doc 01 § Stacking): a stacking context paints in CSS 2.1 Appendix E phases — every in-flow block's background + border (step 3), then every non-positioned float (step 4), then all inline content (step 5). So a float paints above a later block sibling's background and below the text of every paragraph in the context, and an `inline-block` / flex item keeps its own floats (it paints atomically).
 
 ### Components
 - [x] **comp-button**: Button with background, border, padding, text

package/README.md

@@ -14,7 +14,7 @@
 
 **Domotion turns real HTML/CSS into one self-contained, animated SVG** — an accurate reproduction of the rendered page, with optional animation and simulated interaction built in. Text is emitted as real glyph paths, so it looks identical across browsers; the output scales crisply at any size and embeds anywhere with a plain `<img>`, no external assets.
 
-Beyond raw capture it ships a **template library** that turns a few flags into a polished animated SVG, **terminal-session capture** (a recording → an animated terminal), **scroll capture** (a long page replayed as one self-contained scrolling SVG), multi-frame **animation** with transitions, overlays, and simulated interaction, **device-chrome** framing, **nested compositing** (animated layers inside animated layers), one-command **SVG → MP4/WebM**, and a fidelity **review** tool.
+Beyond raw capture it ships a **template library** that turns a few flags into a polished animated SVG, **terminal-session capture** (a recording → an animated terminal), **scroll capture** (a long page replayed as one self-contained scrolling SVG), multi-frame **animation** with parameterized and custom transitions, overlays, and simulated interaction, **scene storyboarding** (sequence distinct scenes end-to-end), **brand kits** and **social-format presets** (reel / square / portrait / landscape), **device-chrome** framing, **nested compositing** (animated layers inside animated layers), one-command **SVG → MP4/WebM**, and a fidelity **review** tool.
 
 <p align="center">
   <img src="examples/output/hero-product-demo.svg" alt="An analytics dashboard assembling itself inside a browser window — KPI cards rise in, a bar chart grows with its peak highlighted, a search query types itself, and a nav item is clicked — all in one self-contained animated SVG" width="760">
@@ -87,7 +87,13 @@ For a multi-frame animated SVG, write a small JSON config and run `domotion anim
 domotion animate ./demo.json
 ```
 
-The config describes each frame (input, duration, transition) plus a declarative surface for interaction demos: continuous-session frames that carry client-side state across steps (omit `input` / set `"continue": true`), DOM-mutation and interaction actions, richer readiness waits (`waitForText` / `waitForGone` / `waitForCount`), typing / tap / svg / blink overlays that can anchor to an element's box, an on-screen `cursor` (explicit or `"auto"`), `vars` + `${}` interpolation, and a small `evaluate` escape hatch. See `domotion --help` for the full grammar and the [Quick start](https://brianwestphal.github.io/domotion/start/quickstart/) for a walkthrough.
+The config describes each frame (input, duration, transition) plus a declarative surface for interaction demos: continuous-session frames that carry client-side state across steps (omit `input` / set `"continue": true`), DOM-mutation and interaction actions, richer readiness waits (`waitForText` / `waitForGone` / `waitForCount`), typing / tap / svg / blink / shine / interact overlays that can anchor to an element's box (typing supports per-keystroke reveal, `kern`, caret shapes, and a high-fidelity `typeResample` mode), real interaction-state capture (`forceState` / `hoverReveal` / `hoverDetect` / `jsReveal`), an on-screen `cursor` (explicit or `"auto"`), `vars` + `${}` interpolation, and a small `evaluate` escape hatch. See `domotion --help` for the full grammar and the [Quick start](https://brianwestphal.github.io/domotion/start/quickstart/) for a walkthrough.
+
+Transitions are not limited to fixed presets. Parameterized `push`, `reveal`,
+`zoom`, and `shine` forms control direction/angle, distance, origin, radius, and
+highlight styling. A strict `custom` recipe can safely combine incoming/outgoing
+opacity, translate, scale, reveal clip, and shine channels—plus explicit reduced-
+motion and loop behavior—without accepting raw CSS or script.
 
 ### Templates — animated SVGs from a few flags
 
@@ -99,7 +105,7 @@ domotion template chart --type donut --data "42,28,18,12" --labels "Search,Direc
 domotion template kinetic-text --text "Ship it" --variant pop --by char -o title.svg
 ```
 
-Built-ins: **lower-third** (broadcast banner) · **kinetic-text** (animated typography) · **chart** (column / bar / line / pie / donut) · **chat** (message thread) · **subscribe** (follow pop-up) · **background-loop** (seamless looping background) · **device-mockup** (wrap a page in a phone / browser / window bezel). Third-party templates are npm packages named `domotion-template-<name>`.
+Built-ins (14): **lower-third** (broadcast banner) · **kinetic-text** (animated typography) · **chart** (column / bar / line / pie / donut) · **chat** (message thread) · **subscribe** (follow pop-up) · **background-loop** (seamless looping background) · **device-mockup** (wrap a page in a phone / browser / window bezel) · and a **creative-template pack** of full-bleed text/number cards: **title-card**, **quote**, **caption**, **cta**, **counter**, **stat**, **compare**. Every template adapts to a `--format` social preset (reel / square / portrait / landscape) and a `--brand` kit (palette / type / logo). Third-party templates are npm packages named `domotion-template-<name>`.
 
 ### Terminal sessions
 

package/assets/favicon.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="87px" height="63px" viewBox="0 0 87 63" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>favicon</title>
+    <defs>
+        <path d="M52.1302578,62.6943682 L52.9561621,62.4203238 C54.9907421,61.6285255 56.5742403,60.1130126 57.4803182,58.2543611 C57.8521129,58.6506388 58.2699053,59.0147811 58.7300111,59.3415229 C62.5574997,62.0595945 67.8637247,61.1602344 70.5817963,57.3327457 L85.4302812,36.4236548 C87.5232396,33.4764277 87.5232396,29.5278738 85.4302812,26.5806467 L70.5817964,5.6715558 C67.8637247,1.84406717 62.5574997,0.944707 58.7300111,3.66277864 C54.9025225,6.38085027 54.0031623,11.6870753 56.7212339,15.5145639 L68.0747376,31.5021508 L56.7367455,47.4678948 L45.3285811,6.23552933 C44.0767607,1.71109255 39.394179,-0.941887166 34.8697422,0.309933287 C32.4374738,0.982892913 30.5460517,2.6473336 29.5196818,4.74994043 C29.1478855,4.35366131 28.7300938,3.98951979 28.2699889,3.66277864 C24.4425003,0.944707 19.1362753,1.84406717 16.4182036,5.6715558 L1.56971878,26.5806467 C-0.523239593,29.5278738 -0.523239593,33.4764277 1.56971878,36.4236548 L16.4182036,57.3327457 C19.1362753,61.1602344 24.4425003,62.0595945 28.2699889,59.3415229 C32.0974775,56.6234513 32.9968377,51.3172263 30.2787661,47.4897376 L18.9252624,31.5021508 L30.2632545,15.5364067 L41.6714189,56.7687722 C42.9232393,61.293209 47.605821,63.9461887 52.1302578,62.6943682 Z M48.4179509,54.9021428 L35.6906782,8.90214279 C35.4697687,8.10371277 35.9379416,7.27737482 36.7363716,7.05646533 C37.5348016,6.83555584 38.3611396,7.30372873 38.5820491,8.10215875 L51.3093218,54.1021588 C51.5302313,54.9005888 51.0620584,55.7269267 50.2636283,55.9478361 L50.1137503,55.9812691 C49.3642711,56.108934 48.6250536,55.6506709 48.4179509,54.9021428 Z M22.125494,53.2797424 L7.2770092,32.3706515 C6.9076636,31.8505526 6.9076636,31.153749 7.2770092,30.6336501 L22.125494,9.72455914 C22.6051537,9.04911997 23.5415464,8.89040935 24.2169856,9.37006906 C24.8924247,9.84972876 25.0511354,10.7861214 24.5714757,11.4615606 L11.7788621,29.4756491 C10.9170557,30.6892132 10.9170557,32.3150883 11.7788621,33.5286524 L24.5714757,51.542741 C25.0511354,52.2181801 24.8924247,53.1545728 24.2169856,53.6342325 C23.5415464,54.1138922 22.6051537,53.9551816 22.125494,53.2797424 Z M62.7830144,53.6342325 C62.1075753,53.1545728 61.9488646,52.2181801 62.4285243,51.542741 L75.2211379,33.5286524 C76.0829443,32.3150883 76.0829443,30.6892132 75.2211379,29.4756491 L62.4285243,11.4615606 C61.9488646,10.7861214 62.1075753,9.84972876 62.7830144,9.37006906 C63.4584536,8.89040935 64.3948463,9.04911997 64.874506,9.72455914 L79.7229908,30.6336501 C80.0923364,31.153749 80.0923364,31.8505526 79.7229908,32.3706515 L64.8745059,53.2797424 L64.7793926,53.4003021 C64.2788165,53.9725268 63.4162387,54.0839135 62.7830144,53.6342325 Z" id="path-1"></path>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#EF4370" offset="0%"></stop>
+            <stop stop-color="#B22B2B" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#8B5CF6" offset="0%"></stop>
+            <stop stop-color="#EC4899" offset="100%"></stop>
+        </linearGradient>
+        <path d="M28.74,81.8621508 L58.34,81.8621508 C70.6611551,81.8621508 76.8217327,81.8621508 81.527791,79.4642943 C85.667357,77.3550801 89.0329293,73.9895078 91.1421435,69.8499418 C93.54,65.1438835 93.54,58.9833059 93.54,46.6621508 L93.54,17.0621508 C93.54,4.74099564 93.54,-1.41958193 91.1421435,-6.12564023 C89.0329293,-10.2652063 85.667357,-13.6307785 81.527791,-15.7399928 C76.8217327,-18.1378492 70.6611551,-18.1378492 58.34,-18.1378492 L28.74,-18.1378492 C16.4188449,-18.1378492 10.2582673,-18.1378492 5.55220901,-15.7399928 C1.41264296,-13.6307785 -1.95292928,-10.2652063 -4.06214353,-6.12564023 C-6.46,-1.41958193 -6.46,4.74099564 -6.46,17.0621508 L-6.46,46.6621508 C-6.46,58.9833059 -6.46,65.1438835 -4.06214353,69.8499418 C-1.95292928,73.9895078 1.41264296,77.3550801 5.55220901,79.4642943 C10.2582673,81.8621508 16.4188449,81.8621508 28.74,81.8621508 Z" id="path-5"></path>
+    </defs>
+    <g id="favicon" stroke="none" fill="none">
+        <g id="Group" stroke-width="1" fill-rule="evenodd">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Shape" fill="#979797" fill-rule="nonzero" xlink:href="#path-1"></use>
+            <g id="Path" mask="url(#mask-2)">
+                <use fill="url(#linearGradient-3)" xlink:href="#path-5"></use>
+                <use fill="url(#linearGradient-4)" xlink:href="#path-5"></use>
+            </g>
+        </g>
+        <polyline id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" transform="translate(15.9242, 31.5022) scale(1, -1) translate(-15.9242, -31.5022)" points="23.3484848 10.5930599 8.5 31.5021508 23.3484848 52.4112417"></polyline>
+        <polyline id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" transform="translate(71.0758, 31.5022) scale(1, -1) translate(-71.0758, -31.5022)" points="63.6515152 10.5930599 78.5 31.5021508 63.6515152 52.4112417"></polyline>
+        <line x1="49.8636364" y1="8.50215077" x2="37.1363636" y2="54.5021508" id="Path" stroke="#FFFFFF" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" transform="translate(43.5, 31.5022) scale(1, -1) translate(-43.5, -31.5022)"></line>
+    </g>
+</svg>

package/assets/fonts/fixture/LICENSE-ibm-plex-serif.txt

@@ -0,0 +1,93 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/assets/fonts/fixture/LICENSE-jetbrains-mono.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/assets/fonts/fixture/README.md

@@ -0,0 +1,39 @@
+# Deterministic fixture faces
+
+Subsetted fonts the frame-sequence compressor's e2e fixtures render with, so
+those fixtures paint the same glyph outlines on macOS, Linux, and Windows.
+
+They exist because the compressor e2e tests assert pixel parity between a
+compressed run and the uncompressed flipbook of the same state, bounded by the
+no-motion caps in `src/review/compare-pngs.ts`. Both images come from our own
+renderer, so the caps only absorb the sub-pixel phase difference the
+compressor's transform groups introduce — but the size of that drift depends on
+which outlines get rasterized. While the fixtures asked for host-dependent
+families (`Menlo`, `system-ui`, `Georgia`) the clean drift ceiling moved with
+the host (88 px largest strict region on macOS vs 829 px in the Linux
+container), overlapping a known compressor break at 3712 px, so no single cap
+could both pass a correct build and fail a broken one. Pinning the fixtures to
+these files collapses the ceiling to one number everywhere.
+
+Consumed through `tests/fixture-fonts.ts` — never referenced by path from a
+test. See that module for the two-halves usage contract (page `@font-face` for
+Chrome's layout, `registerWebfont` for Domotion's outlines).
+
+## Provenance
+
+| File | Upstream | License |
+|---|---|---|
+| `DomotionFixtureMono-Regular.ttf` | [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono) Regular | SIL OFL 1.1 — `LICENSE-jetbrains-mono.txt` |
+| `DomotionFixtureSerif-Regular.ttf` | [IBM Plex Serif](https://github.com/IBM/plex) Regular | SIL OFL 1.1 — `LICENSE-ibm-plex-serif.txt` |
+
+Both are unmodified apart from being subsetted to the characters the fixtures
+paint. The OFL permits redistribution of modified copies under a reserved-name
+rule, which is why the outputs carry neutral `DomotionFixture*` names rather
+than the upstream family names.
+
+## Regenerating
+
+`tools/build-fixture-fonts.mjs` rebuilds both from the upstream originals (it
+prints the download URLs). The subset is deterministic — same inputs and the
+same harfbuzzjs version produce byte-identical output, so a re-run must leave
+`git status` clean unless an input or the charset actually changed.

package/assets/logo.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logo</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#EF4370" offset="0%"></stop>
+            <stop stop-color="#B22B2B" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#8B5CF6" offset="0%"></stop>
+            <stop stop-color="#EC4899" offset="100%"></stop>
+        </linearGradient>
+        <path d="M35.2,100 L64.8,100 C77.1211551,100 83.2817327,100 87.987791,97.6021435 C92.127357,95.4929293 95.4929293,92.127357 97.6021435,87.987791 C100,83.2817327 100,77.1211551 100,64.8 L100,35.2 C100,22.8788449 100,16.7182673 97.6021435,12.012209 C95.4929293,7.87264296 92.127357,4.50707072 87.987791,2.39785647 C83.2817327,-2.84217094e-14 77.1211551,-2.84217094e-14 64.8,-2.84217094e-14 L35.2,-2.84217094e-14 C22.8788449,-2.84217094e-14 16.7182673,-2.84217094e-14 12.012209,2.39785647 C7.87264296,4.50707072 4.50707072,7.87264296 2.39785647,12.012209 C0,16.7182673 0,22.8788449 0,35.2 L0,64.8 C0,77.1211551 0,83.2817327 2.39785647,87.987791 C4.50707072,92.127357 7.87264296,95.4929293 12.012209,97.6021435 C16.7182673,100 22.8788449,100 35.2,100 Z" id="path-3"></path>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linearGradient-4">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linearGradient-5">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="linearGradient-6">
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-10.7%" y="-20.7%" width="121.4%" height="134.8%" filterUnits="objectBoundingBox" id="filter-7">
+            <feOffset dx="0" dy="-2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+    </defs>
+    <g id="logo" stroke="none" fill="none" fill-rule="evenodd">
+        <g id="Path">
+            <use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
+            <use fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
+        </g>
+        <g id="Group-6" opacity="0.1" stroke-width="1" transform="translate(14.96, 49.64) scale(1, -1) translate(-14.96, -49.64)translate(-20.04, 26.64)">
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group-5" opacity="0.14" stroke-width="1" transform="translate(19.96, 49.64) scale(1, -1) translate(-19.96, -49.64)translate(-15.04, 26.64)">
+            <path d="M17.7434872,-1.98572692 C19.9949511,-0.386861254 20.5239865,2.73444758 18.9251209,4.98591148 L6.13250724,23 L18.9251209,41.0140885 C21.2762002,44.3247921 18.9090676,48.9090909 14.8484848,48.9090909 L9.84848485,48.9090909 C8.22888116,48.9090909 6.70960014,48.1246002 5.77184884,46.8040933 L-9.07663601,25.8950024 C-10.307788,24.1613394 -10.307788,21.8386606 -9.07663601,20.1049976 L5.77184884,-0.804093295 C6.77712725,-2.21968943 8.93367462,-2.92130621 12.241491,-2.90894365 C14.8127919,-3.07227934 16.6467907,-2.76454043 17.7434872,-1.98572692 Z" id="Path" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group-4" opacity="0.18" stroke-width="1" transform="translate(24.96, 49.64) scale(1, -1) translate(-24.96, -49.64)translate(-10.04, 26.64)">
+            <path d="M17.7434872,-1.98572692 C19.9949511,-0.386861254 20.5239865,2.73444758 18.9251209,4.98591148 L6.13250724,23 L18.9251209,41.0140885 C21.2762002,44.3247921 18.9090676,48.9090909 14.8484848,48.9090909 L9.84848485,48.9090909 C8.22888116,48.9090909 6.70960014,48.1246002 5.77184884,46.8040933 L-9.07663601,25.8950024 C-10.307788,24.1613394 -10.307788,21.8386606 -9.07663601,20.1049976 L5.77184884,-0.804093295 C6.77712725,-2.21968943 8.93367462,-2.92130621 12.241491,-2.90894365 C14.8127919,-3.07227934 16.6467907,-2.76454043 17.7434872,-1.98572692 Z" id="Path" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group-3" opacity="0.22" stroke-width="1" transform="translate(29.96, 49.64) scale(1, -1) translate(-29.96, -49.64)translate(-5.04, 26.64)">
+            <path d="M17.7434872,-1.98572692 C19.9949511,-0.386861254 20.5239865,2.73444758 18.9251209,4.98591148 L6.13250724,23 L18.9251209,41.0140885 C21.2762002,44.3247921 18.9090676,48.9090909 14.8484848,48.9090909 L9.84848485,48.9090909 C8.22888116,48.9090909 6.70960014,48.1246002 5.77184884,46.8040933 L-9.07663601,25.8950024 C-10.307788,24.1613394 -10.307788,21.8386606 -9.07663601,20.1049976 L5.77184884,-0.804093295 C6.77712725,-2.21968943 8.93367462,-2.92130621 12.241491,-2.90894365 C14.8127919,-3.07227934 16.6467907,-2.76454043 17.7434872,-1.98572692 Z" id="Path" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group-2" opacity="0.26" stroke-width="1" transform="translate(34.96, 49.64) scale(1, -1) translate(-34.96, -49.64)translate(-0.04, 26.64)">
+            <path d="M17.7434872,-1.98572692 C19.9949511,-0.386861254 20.5239865,2.73444758 18.9251209,4.98591148 L6.13250724,23 L18.9251209,41.0140885 C21.2762002,44.3247921 18.9090676,48.9090909 14.8484848,48.9090909 L9.84848485,48.9090909 C8.22888116,48.9090909 6.70960014,48.1246002 5.77184884,46.8040933 L-9.07663601,25.8950024 C-10.307788,24.1613394 -10.307788,21.8386606 -9.07663601,20.1049976 L5.77184884,-0.804093295 C6.77712725,-2.21968943 8.93367462,-2.92130621 12.241491,-2.90894365 C14.8127919,-3.07227934 16.6467907,-2.76454043 17.7434872,-1.98572692 Z" id="Path" fill="url(#linearGradient-6)" fill-rule="nonzero"></path>
+            <path d="M59.2281512,-0.804093295 L74.076636,20.1049976 C75.307788,21.8386606 75.307788,24.1613394 74.076636,25.8950024 L59.2281512,46.8040933 C58.2903999,48.1246002 56.7711188,48.9090909 55.1515152,48.9090909 L50.1515152,48.9090909 C46.0909324,48.9090909 43.7237998,44.3247921 46.0748791,41.0140885 L58.8674927,23 L46.0748791,4.98591148 C44.4760135,2.73444758 45.0050489,-0.386861254 47.2565128,-1.98572692 C48.9015576,-3.15394719 51.0109759,-3.18617107 52.6494654,-2.2359644 C54.8581485,-3.51883331 57.7202335,-2.92748749 59.2281512,-0.804093295 Z" id="Path" fill="url(#linearGradient-4)" fill-rule="nonzero"></path>
+            <path d="M46.1825878,1.33330673 L33.4553151,47.3333067 C32.8558787,49.4998411 30.884295,51 28.6363636,51 L23.6363636,51 C20.3318697,51 17.9362314,47.8515325 18.8174122,44.6666933 L31.5446849,-1.33330673 C32.1441213,-3.49984115 34.115705,-5 36.3636364,-5 L41.3636363,-5 C44.6681303,-5 47.0637686,-1.85153248 46.1825878,1.33330673 Z" id="Path" fill="url(#linearGradient-5)" fill-rule="nonzero"></path>
+        </g>
+        <g id="Group" filter="url(#filter-7)" opacity="0.99" stroke-width="1" transform="translate(49.96, 49.64) scale(1, -1) translate(-49.96, -49.64)translate(14.96, 26.64)" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round">
+            <polyline id="Path" stroke-width="10" points="14.8484848 2.09090909 0 23 14.8484848 43.9090909"></polyline>
+            <polyline id="Path" stroke-width="10" points="55.1515152 2.09090909 70 23 55.1515152 43.9090909"></polyline>
+            <line x1="41.3636364" y1="0" x2="28.6363636" y2="46" id="Path" stroke-width="10"></line>
+        </g>
+    </g>
+</svg>

package/assets/mask-icon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="75px" height="76px" viewBox="0 0 75 76" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>mask-icon</title>
+    <defs>
+        <path d="M0,0 L75,0 L75,75 L0,75 Z" id="path-1"></path>
+    </defs>
+    <g id="mask-icon" stroke="none" fill="none" transform="translate(0, 0.5)" xlink:href="#path-1" fill-rule="evenodd">
+        <use fill="#FFFFFF" xlink:href="#path-1"></use>
+        <path d="M21.5029569,13.8210913 C23.7544208,15.4199569 24.2834562,18.5412658 22.6845906,20.7927297 L10.8200073,37.5 L22.6845906,54.2072703 C24.2834562,56.4587342 23.7544208,59.5800431 21.5029569,61.1789087 C19.251493,62.7777744 16.1301842,62.248739 14.5313185,59.9972751 L0.610863987,40.3950024 C-0.620287996,38.6613394 -0.620287996,36.3386606 0.610863987,34.6049976 L14.5313185,15.0027249 C16.1301842,12.751261 19.251493,12.2222256 21.5029569,13.8210913 Z M60.4686815,15.0027249 L74.389136,34.6049976 C75.620288,36.3386606 75.620288,38.6613394 74.389136,40.3950024 L60.4686815,59.9972751 C58.8698158,62.248739 55.748507,62.7777744 53.4970431,61.1789087 C51.2455792,59.5800431 50.7165438,56.4587342 52.3154094,54.2072703 L64.1799927,37.5 L52.3154094,20.7927297 C50.7165438,18.5412658 51.2455792,15.4199569 53.4970431,13.8210913 C55.748507,12.2222256 58.8698158,12.751261 60.4686815,15.0027249 Z M36.3530424,14.6041933 L48.2848606,57.7291933 C49.0212255,60.3906267 47.4606492,63.1450865 44.7992158,63.8814515 C42.1377824,64.6178164 39.3833226,63.0572401 38.6469576,60.3958067 L26.7151394,17.2708067 C25.9787745,14.6093733 27.5393508,11.8549135 30.2007842,11.1185485 C32.8622176,10.3821836 35.6166774,11.9427599 36.3530424,14.6041933 Z" id="Combined-Shape" fill="#000000"></path>
+    </g>
+</svg>

package/dist/animation/animator.d.ts

@@ -6,7 +6,9 @@
  */
 import { type CursorAtResolver, type CursorOverlay, type SelectorResolver } from "./cursor-overlay.js";
 import type { MagicMove } from "./magic-move.js";
-import type { AnimationOverlay, TypingOverlay, TapOverlay, SvgOverlay, BlinkOverlay, IntraFrameAnimation } from "./overlay-schema.js";
+import type { AnimationOverlay, TypingOverlay, TapOverlay, SvgOverlay, BlinkOverlay, ShineOverlay, InteractOverlay, IntraFrameAnimation } from "./overlay-schema.js";
+import { type ResolvedTextTrack } from "./caret-track.js";
+import { type Transition } from "./transition-schema.js";
 export interface AnimationFrame {
     /** SVG content for this frame (from dom-to-svg) */
     svgContent: string;
@@ -14,9 +16,10 @@ export interface AnimationFrame {
      * Per-element viewBox-cull keyframes CSS (DM-603). The caller runs
      * `cullElementsOutsideViewBox()` on the captured tree before `elementTreeToSvg()` — that
      * mutates `displayNone` / `cullClass` on each element (which the renderer
-     * surfaces) and returns the keyframes blocks that map each `cull-N` class
-     * to its visible window. The animator splices this CSS into the scene-wide
-     * `<style>` block.
+     * surfaces) and returns the keyframes blocks that map each window-derived
+     * `cull-<start>-<end>` class to its visible window. The animator splices
+     * this CSS into the scene-wide `<style>` block, deduping blocks whose class
+     * (= window) repeats across frames.
      *
      * When omitted, no culling happens — callers passing pre-rendered
      * `svgContent` strings without the cull CSS get unchanged behavior.
@@ -33,22 +36,8 @@ export interface AnimationFrame {
      * `offsetEmbeddedAnimatedSvgTimeline`). Omit for ordinary captured frames.
      */
     embeddedAnimationPeriodMs?: number;
-    /** Transition to next frame */
-    transition?: {
-        /**
-         * `crossfade` (default) overlaps fade-out and fade-in. `push-left` slides
-         * the outgoing frame off and the incoming frame in from the right.
-         * `scroll` keeps both visible during the transition. `cut` is instant —
-         * no fade, no slide. For `cut`, `duration` is ignored. `magic-move` blends
-         * shared elements between the two frames — matched elements slide from
-         * their old position to their new one while added/removed elements
-         * cross-fade (DM-898; see `docs/53-magic-move-transition.md`). It requires
-         * the per-frame `magicMove` bridge layer (built caller-side from the
-         * element trees); when that's absent it degrades to `crossfade`.
-         */
-        type: "crossfade" | "push-left" | "scroll" | "cut" | "magic-move";
-        duration: number;
-    };
+    /** Transition to the next frame. The type is derived from the canonical zod schema. */
+    transition?: Transition;
     /**
      * Magic-move bridge layer for this frame's transition to the next, built by
      * the caller via `buildMagicMove(prevTree, nextTree, …)`. Present only when
@@ -69,7 +58,7 @@ export interface AnimationFrame {
      */
     animations?: IntraFrameAnimation[];
 }
-export type { TypingOverlay, TapOverlay, SvgOverlay, BlinkOverlay, AnimationOverlay, IntraFrameAnimation };
+export type { TypingOverlay, TapOverlay, SvgOverlay, BlinkOverlay, ShineOverlay, InteractOverlay, AnimationOverlay, IntraFrameAnimation };
 export interface AnimationConfig {
     width: number;
     height: number;
@@ -112,6 +101,15 @@ export interface AnimationConfig {
      * when omitted, the overlay paints the single arrow.
      */
     resolveCursorAt?: CursorAtResolver;
+    /**
+     * Caret + selection tracks (docs/101): declarative caret / selection
+     * rendering anchored to captured text, resolved caller-side against the
+     * frame's captured tree via `resolveTextTrack` (the magic-move precedent —
+     * built from the element trees, consumed here as resolved geometry). Layered
+     * above every frame group and below the cursor overlay. Times inside each
+     * track are ms on the animation's global timeline.
+     */
+    textTracks?: ResolvedTextTrack[];
     /**
      * Canvas background color painted behind every frame (a full-viewport
      * `<rect>`). Mirrors the single-frame path's `transparentRootBgRect`
@@ -145,4 +143,36 @@ export interface AnimationConfig {
  * frames whose ids are already unique are emitted byte-for-byte unchanged.
  */
 export declare function dedupeFrameIds(frames: AnimationFrame[]): AnimationFrame[];
+/** A rectangular half-plane reveal sampled to a fixed vertex count so angled
+ * wipe polygons remain CSS-interpolable on every supported engine. */
+export declare function linearWipeClip(f: number, width: number, height: number, angleDeg: number): string;
+/**
+ * DM-1767 (docs/104): resolve an overlay's WINDOW END, in ms from frame start.
+ *
+ * Historically every overlay's window ended with its frame. `endAt` makes that
+ * explicit and lets an overlay end EARLY — clamped to the frame's duration, so
+ * it can still never leak past the cut into the next frame. Returns the frame's
+ * own duration when the overlay declares nothing, which is why every existing
+ * config emits byte-identical CSS.
+ *
+ * Exported for unit tests.
+ */
+export declare function overlayWindowEndMs(overlay: AnimationOverlay, frameDurationMs: number): number;
+/**
+ * Collapse repeated numeric offsets inside whole-layer CSS `@keyframes` blocks.
+ * Later declarations win per property, matching CSS source-order cascading,
+ * but each offset is emitted once so boundary behavior is engine-independent.
+ * Blocks without repeated offsets remain byte-identical.
+ */
+export declare function consolidateKeyframeOffsets(svg: string): string;
 export declare function generateAnimatedSvg(config: AnimationConfig): string;
+/**
+ * DM-1767: each overlay kind's default `delay` — the ms after frame start at
+ * which it begins when the author sets none. Published because SHIFTING an
+ * overlay onto a different origin (a per-state overlay inside a compressed run
+ * moving from "its own state's start" to "the collapsed run's start" —
+ * docs/104) must add the offset to the EFFECTIVE delay; adding it to a bare
+ * `delay ?? 0` would silently drop the kind's own lead-in and the overlay would
+ * fire early relative to how it behaved as its own frame.
+ */
+export declare const OVERLAY_DEFAULT_DELAY_MS: Record<AnimationOverlay["kind"], number>;