@heycys/gallery 0.1.2 → 0.2.0

package/packs/gallery/heatmap/preview.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7z"/><path d="M16 3v4M8 3v4M4 11h16"/></g><rect x="50" y="28" width="46" height="6" rx="3" fill="#3b3a37"/><rect x="150" y="29" width="60" height="5" rx="2.5" fill="#c4c2bd"/><rect x="36" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="36" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="43" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="50" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="57" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="64" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="71" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="78" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="78" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="78" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="62" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="85" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="85" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="85" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="92" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="92" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="69" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="99" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="99" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="99" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="106" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="106" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="106" y="69" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="83" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="106" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="113" y="69" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="113" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="113" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="113" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="55" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="120" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="120" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="120" y="90" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="127" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="127" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="127" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="127" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="127" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="127" y="83" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="127" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="62" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="134" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="134" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="141" y="83" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="141" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="148" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="148" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="148" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="148" y="69" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="148" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="148" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="148" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="155" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="155" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="155" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="155" y="69" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="155" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="155" y="83" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="155" y="90" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="162" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="162" y="55" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="162" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="162" y="69" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="162" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="162" y="83" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="162" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="169" y="48" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="169" y="55" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="169" y="62" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="169" y="69" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="169" y="76" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="169" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="169" y="90" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="176" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="76" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="176" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="176" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="183" y="48" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="183" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="183" y="62" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="183" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="183" y="76" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="183" y="83" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="183" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="190" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="76" width="5.5" height="5.5" rx="1.4" fill="#93b9e6"/><rect x="190" y="83" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="190" y="90" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="48" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="55" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="62" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="197" y="83" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="197" y="90" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="204" y="48" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="204" y="55" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/><rect x="204" y="62" width="5.5" height="5.5" rx="1.4" fill="#2e7cd1"/><rect x="204" y="69" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="204" y="76" width="5.5" height="5.5" rx="1.4" fill="#efeeec"/><rect x="204" y="83" width="5.5" height="5.5" rx="1.4" fill="#5c97da"/><rect x="204" y="90" width="5.5" height="5.5" rx="1.4" fill="#c9dcf2"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="10.5" y="8.5" width="219" height="103" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="20" y="16" width="10" height="10" rx="3" fill="#efefed"/><rect x="34" y="18.5" width="36" height="5" rx="2.5" fill="#37352f"/><rect x="20" y="34" width="18" height="4" rx="2" fill="#a6a5a1"/><rect x="20" y="42" width="36" height="12" rx="3" fill="#1d1d1b"/><rect x="20" y="58" width="30" height="4" rx="2" fill="#d4d3cf"/><rect x="20" y="70" width="26" height="3.5" rx="1.75" fill="#a6a5a1"/><rect x="62" y="70" width="10" height="3.5" rx="1.75" fill="#37352f"/><rect x="20" y="78" width="26" height="3.5" rx="1.75" fill="#a6a5a1"/><rect x="62" y="78" width="10" height="3.5" rx="1.75" fill="#37352f"/><rect x="20" y="86" width="26" height="3.5" rx="1.75" fill="#a6a5a1"/><rect x="62" y="86" width="10" height="3.5" rx="1.75" fill="#37352f"/><rect x="20" y="98" width="32" height="3" rx="1.5" fill="#4084cf"/><rect x="54" y="98" width="22" height="3" rx="1.5" fill="#b0cbeb"/><rect x="92" y="28" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="92" y="37" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="92" y="46" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="92" y="55" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="92" y="64" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="92" y="73" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="92" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="101" y="28" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="101" y="37" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="101" y="46" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="101" y="55" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="101" y="64" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="101" y="73" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="101" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="110" y="28" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="110" y="37" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="110" y="46" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="110" y="55" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="110" y="64" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="110" y="73" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="110" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="119" y="28" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="119" y="37" width="7" height="7" rx="1.8" fill="#2e5e9c"/><rect x="119" y="46" width="7" height="7" rx="1.8" fill="#2e5e9c"/><rect x="119" y="55" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="119" y="64" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="119" y="73" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="119" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="128" y="28" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="128" y="37" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="128" y="46" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="128" y="55" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="128" y="64" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="128" y="73" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="128" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="137" y="28" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="137" y="37" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="137" y="46" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="137" y="55" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="137" y="64" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="137" y="73" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="137" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="146" y="28" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="146" y="37" width="7" height="7" rx="1.8" fill="#2e5e9c"/><rect x="146" y="46" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="146" y="55" width="7" height="7" rx="1.8" fill="#2e5e9c"/><rect x="146" y="64" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="146" y="73" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="146" y="82" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="155" y="28" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="155" y="37" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="155" y="46" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="155" y="55" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="155" y="64" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="155" y="73" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="155" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="164" y="28" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="164" y="37" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="164" y="46" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="164" y="55" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="164" y="64" width="7" height="7" rx="1.8" fill="#2e5e9c"/><rect x="164" y="73" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="164" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="173" y="28" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="173" y="37" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="173" y="46" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="173" y="55" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="173" y="64" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="173" y="73" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="173" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="182" y="28" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="182" y="37" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="182" y="46" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="182" y="55" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="182" y="64" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="182" y="73" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="182" y="82" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="191" y="28" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="191" y="37" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="191" y="46" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="191" y="55" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="191" y="64" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="191" y="73" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="191" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="200" y="28" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="200" y="37" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="200" y="46" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="200" y="55" width="7" height="7" rx="1.8" fill="#4d88d3"/><rect x="200" y="64" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="200" y="73" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="200" y="82" width="7" height="7" rx="1.8" fill="#ececea"/><rect x="209" y="28" width="7" height="7" rx="1.8" fill="#d1e2f6"/><rect x="209" y="37" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="209" y="46" width="7" height="7" rx="1.8" fill="#90b6e3"/><rect x="209" y="55" width="7" height="7" rx="1.8" fill="#ececea"/></svg>

package/packs/gallery/heatmap/style.css

@@ -1,201 +1,189 @@
 /* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
-   reaches the rest of the page. The face fills its card on a custom page (the board draws the frame), in
-   the kit's card tokens: its head (the chip, 编辑热力图, its line, the quiet note at its end (how many
-   edits, or since when it is kept; the period where the figures show), its end clear of the card's grip); the
-   weekdays down the left, the months over the weeks, the squares a column a week, Monday at the top. The
-   squares' side and gaps are the script's (--gallery-heatmap-cell, --gallery-heatmap-gap, and
-   --gallery-heatmap-across between the weeks, wider on a card far wider than high: as big as the card
-   lets them be), their corners a quarter of their side, the grid hung from the left under the head
-   and the room left over at its right; the weekdays' column left out where a square is under 6px
-   (data-small: its words would run into each other). A day drawn by its level, 0 to 4, the accent's
-   shades on the card's fill (a quarter, a half, three quarters of it, and the accent itself; in dark two
-   fifths, three fifths, four fifths, so that the first stands off the track), a day of none the track's
-   gray (a step stronger than the track, so that a year of none still reads as a grid), a day before the
-   record only outlined in that gray, an empty slot rather than a day of nothing, so that a record just
-   begun reads as starting now; a day to come none. A wide card with something counted (data-figures)
-   shows its figures beside the squares: what they count, the edits (or words) in all, large (the cards'
-   hero size), the days that had any and today's, a hairline at their right; under 150px high, today's
-   left out, under 124px what they count too. Less to more (the script places it) under the squares at their left where the room
-   under them holds it, else at the head's end, where a card too narrow for it beside the line leaves it out. */
+   reaches the rest of the page. The pack's design B, in the kit's card tokens: the head (the chip, a
+   calendar, 编辑热力图 and its quiet meta), its end clear of the card's grip; the squares the hero, a grid
+   of columns of seven (the script's --gallery-heatmap-cell, -gap and -weeks), five shades of the accent
+   (their own in dark: the deepest the lightest there), a day before the record a small gray dot, today
+   ringed; the months' names over them and 一 三 五 at their left, faint; less to more under them. Laid out by
+   the face's data-layout: "full" the figures in a column of 156px at the left (what the weeks are, the
+   total large, the average a day, three facts and the reader's and the Agent's split as a bar), the squares
+   24px after it; "compact" the total and the days with any on a line over the squares; "strip" the squares
+   alone under the head; "grid" (8 × 2) the squares alone. A pointer on a square: a dark tip over it with its
+   day, over the card (the top layer). Unread: a line over empty squares. Light and dark. */
 [data-doc-component="gallery/heatmap"] {
-  --gallery-heatmap-0: light-dark(rgb(33 27 23 / 10%), rgb(255 255 255 / 11%));
-  --gallery-heatmap-1: light-dark(color-mix(in oklab, var(--gallery-accent) 26%, var(--gallery-card-fill)), color-mix(in oklab, var(--gallery-accent) 42%, var(--gallery-card-fill)));
-  --gallery-heatmap-2: light-dark(color-mix(in oklab, var(--gallery-accent) 50%, var(--gallery-card-fill)), color-mix(in oklab, var(--gallery-accent) 62%, var(--gallery-card-fill)));
-  --gallery-heatmap-3: light-dark(color-mix(in oklab, var(--gallery-accent) 75%, var(--gallery-card-fill)), color-mix(in oklab, var(--gallery-accent) 81%, var(--gallery-card-fill)));
-  --gallery-heatmap-4: var(--gallery-accent);
-  height: 12em;
-  container-type: size;
-  > .gallery-heatmap-face {
-    --gallery-heatmap-cell: 10px;
-    --gallery-heatmap-gap: 3px;
-    display: flex;
-    flex-direction: column;
-    gap: var(--gallery-face-gap);
-    box-sizing: border-box;
-    height: 100%;
-    min-height: 0;
-    color: var(--gallery-text);
-    font-size: 12px;
-    line-height: 1.3;
-  }
+  --gallery-heatmap-0: light-dark(rgb(55 53 47 / 6.5%), rgb(255 255 255 / 6.5%));
+  --gallery-heatmap-1: light-dark(#d1e2f6, #243b5a);
+  --gallery-heatmap-2: light-dark(#90b6e3, #335e95);
+  --gallery-heatmap-3: light-dark(#4d88d3, #4e89d0);
+  --gallery-heatmap-4: light-dark(#2e5e9c, #a0c2ea);
+  --gallery-heatmap-dot: light-dark(rgb(55 53 47 / 17%), rgb(255 255 255 / 17%));
+  --gallery-heatmap-tip: light-dark(#2a2927, #3b3b39);
+  font-family: var(--gallery-font);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--gallery-text);
+  > .gallery-heatmap-face { display: flex; flex-direction: column; box-sizing: border-box; min-height: 0; }
   > .gallery-heatmap-face > .gallery-heatmap-head {
     display: flex;
     align-items: center;
     gap: 8px;
     flex: none;
+    height: 20px;
     min-width: 0;
     padding-inline-end: var(--gallery-grip-room, 0px);
   }
   > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-chip {
     flex: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+    display: grid;
+    place-items: center;
     width: var(--gallery-chip-size);
     height: var(--gallery-chip-size);
     border-radius: var(--gallery-chip-radius);
-    background: var(--gallery-accent-soft);
-    color: var(--gallery-accent);
-  }
-  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-chip > svg { width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
-  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-title { flex: none; font-size: var(--gallery-title-size); font-weight: 600; line-height: var(--gallery-title-line); color: var(--gallery-text-strong); }
-  /* The head's last piece (its line, or less to more where the script put it there) at the content's edge, faded while the card's grip shows. */
-  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line:last-child,
-  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-legend { margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
-  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line {
-    flex: 1 1 auto;
-    min-width: 0;
-    margin-inline-start: 4px;
-    font-size: var(--gallery-meta-size);
-    color: var(--doc-muted);
-    text-align: end;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    background: var(--gallery-fill);
+    color: var(--gallery-muted);
   }
-  > .gallery-heatmap-face > .gallery-heatmap-body {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 6px;
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
-  }
-  /* The figures beside the squares (a wide card's, where something is counted): what they count, small and
-     muted, over the edits (or words) in all, large, their unit after them, and a muted line of the days
-     that had any and today's; a hairline at their right. */
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside {
-    display: none;
-    flex: none;
-    flex-direction: column;
-    justify-content: center;
-    gap: 4px;
-    align-self: stretch;
-    width: clamp(120px, 18cqi, 190px);
-    box-sizing: border-box;
-    margin-inline-end: 6px;
-    padding-inline-end: 16px;
-    border-inline-end: 1px solid var(--doc-grid);
-  }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-label { font-size: var(--gallery-meta-size); line-height: 16px; color: var(--doc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total { display: flex; align-items: baseline; flex-wrap: wrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-chip > svg { display: block; width: var(--gallery-chip-icon); height: var(--gallery-chip-icon); }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-title { flex: none; font-size: var(--gallery-title-size); line-height: var(--gallery-title-line); font-weight: 600; color: var(--gallery-text); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--gallery-meta-size); color: var(--gallery-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
+  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line > .gallery-heatmap-dot { margin: 0 5px; color: var(--gallery-faintest); }
+  > .gallery-heatmap-face > .gallery-heatmap-body { flex: 1; display: flex; gap: 24px; min-height: 0; margin-top: 16px; }
+
+  /* The figures: a column at the left of a full card. */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside { flex: none; display: flex; flex-direction: column; width: 156px; min-width: 0; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-label { font-size: 12px; line-height: 16px; color: var(--gallery-muted); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total { display: flex; align-items: baseline; margin-top: 6px; white-space: nowrap; }
   > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number {
-    font-size: var(--gallery-hero-size);
-    line-height: 1.1;
+    font-size: 36px;
+    line-height: 1;
     font-weight: var(--gallery-numeral-weight);
     letter-spacing: var(--gallery-numeral-tracking);
+    font-variant-numeric: lining-nums;
     color: var(--gallery-text-strong);
-    font-variant-numeric: tabular-nums;
   }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-unit { margin-inline-start: var(--gallery-unit-gap); font-size: max(12px, calc(var(--gallery-hero-size) * .4)); font-weight: 500; color: var(--doc-muted); }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-more { display: flex; flex-direction: column; font-size: var(--gallery-meta-size); line-height: 1.5; color: var(--doc-muted); }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-more > .gallery-heatmap-piece { white-space: nowrap; }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-rows {
-    display: grid;
-    flex: none;
-    grid-template-rows: repeat(7, var(--gallery-heatmap-cell));
-    gap: var(--gallery-heatmap-gap);
-    margin-top: 18px;
-    color: var(--doc-muted);
-    font-size: 10px;
-  }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-rows > .gallery-heatmap-row { display: flex; align-items: center; line-height: 1; }
-  > .gallery-heatmap-face[data-small] > .gallery-heatmap-body > .gallery-heatmap-rows { display: none; }
-  /* Less to more under the squares: the weekdays as much shorter at the bottom, so that they stay beside their rows. */
-  > .gallery-heatmap-face > .gallery-heatmap-body:has(> .gallery-heatmap-area > .gallery-heatmap-legend) > .gallery-heatmap-rows { margin-bottom: 18px; }
-  /* As wide as its weeks, hung from the left beside the weekdays. */
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area { flex: none; width: calc(var(--gallery-heatmap-weeks, 53) * (var(--gallery-heatmap-cell) + var(--gallery-heatmap-across, var(--gallery-heatmap-gap))) - var(--gallery-heatmap-across, var(--gallery-heatmap-gap))); }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-months {
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-unit { margin-left: 3px; font-size: var(--gallery-unit); font-weight: 500; color: var(--gallery-muted); white-space: pre; }
+  > .gallery-heatmap-face[data-unread] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number { font-weight: 300; color: var(--gallery-faintest); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-average { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-average > .gallery-heatmap-strong { font-weight: 600; color: var(--gallery-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts { display: flex; flex-direction: column; gap: 8px; margin: auto 0 0; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fact { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; line-height: 16px; color: var(--gallery-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fact > dt { margin: 0; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fact > dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--gallery-text); font-variant-numeric: tabular-nums; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fact > dd > small { margin-left: 2px; font-size: 11.5px; font-weight: 400; color: var(--gallery-faint); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fresh { margin: 0; font-size: 12px; line-height: 18px; color: var(--gallery-faint); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-facts > .gallery-heatmap-fresh > .gallery-heatmap-clause { display: inline-block; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who { margin-top: auto; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who[hidden] { display: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-split { display: flex; gap: 2px; height: 6px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-split > i { border-radius: 3px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-split > .gallery-heatmap-you-bar { background: var(--gallery-accent); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-split > .gallery-heatmap-agent-bar { background: var(--gallery-accent-mid); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; line-height: 15px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words > span { display: inline-flex; align-items: center; gap: 5px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words > span > b { margin-left: -2px; font-weight: 600; color: var(--gallery-muted); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words > span > i { width: 6px; height: 6px; border-radius: 2px; background: var(--gallery-accent); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-who > .gallery-heatmap-who-words > .gallery-heatmap-agent > i { background: var(--gallery-accent-mid); }
+
+  /* The squares and what stands around them. */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area {
     position: relative;
-    height: 14px;
-    margin-bottom: 4px;
-    color: var(--doc-muted);
-    font-size: 10px;
-    line-height: 14px;
-  }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-months > .gallery-heatmap-month {
-    position: absolute;
-    top: 0;
-    left: calc(var(--gallery-heatmap-week) * (var(--gallery-heatmap-cell) + var(--gallery-heatmap-across, var(--gallery-heatmap-gap))));
-    white-space: nowrap;
+    flex: none;
+    box-sizing: content-box;
+    width: calc(var(--gallery-heatmap-weeks, 14) * (var(--gallery-heatmap-cell, 23px) + var(--gallery-heatmap-gap, 4px)) - var(--gallery-heatmap-gap, 4px));
+    padding: 18px 0 0 20px;
   }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid {
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-months { position: absolute; top: 0; left: 20px; right: 0; height: 18px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-months > .gallery-heatmap-month { position: absolute; top: 0; left: calc(var(--gallery-heatmap-week) * (var(--gallery-heatmap-cell) + var(--gallery-heatmap-gap))); font-size: 11px; line-height: 14px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-rows { position: absolute; top: 18px; left: 0; display: grid; grid-template-rows: repeat(7, var(--gallery-heatmap-cell, 23px)); row-gap: var(--gallery-heatmap-gap, 4px); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-rows > .gallery-heatmap-row { display: flex; align-items: center; font-size: 11px; line-height: 1; color: var(--gallery-faint); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid {
     display: grid;
     grid-auto-flow: column;
-    grid-template-rows: repeat(7, var(--gallery-heatmap-cell));
-    grid-auto-columns: var(--gallery-heatmap-cell);
-    gap: var(--gallery-heatmap-gap) var(--gallery-heatmap-across, var(--gallery-heatmap-gap));
+    grid-template-rows: repeat(7, var(--gallery-heatmap-cell, 23px));
+    grid-auto-columns: var(--gallery-heatmap-cell, 23px);
+    gap: var(--gallery-heatmap-gap, 4px);
   }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day {
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day { position: relative; border-radius: max(3px, calc(var(--gallery-heatmap-cell, 23px) * .24)); background: var(--gallery-heatmap-0); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="1"] { background: var(--gallery-heatmap-1); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="2"] { background: var(--gallery-heatmap-2); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="3"] { background: var(--gallery-heatmap-3); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="4"] { background: var(--gallery-heatmap-4); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-future { visibility: hidden; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before { background: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3.2px; height: 3.2px; margin: -1.6px 0 0 -1.6px; border-radius: 50%; background: var(--gallery-heatmap-dot); }
+  > .gallery-heatmap-face[data-layout="full"] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before::after { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
+  > .gallery-heatmap-face[data-unread] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before { background: var(--gallery-heatmap-0); }
+  > .gallery-heatmap-face[data-unread] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-before::after { content: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-today { outline: 1.5px solid var(--gallery-muted); outline-offset: 1.75px; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-date]:hover { outline: 1.5px solid var(--gallery-text); outline-offset: 1.75px; }
+  /* The tip: over the card in the top layer (a popover, else fixed), placed in the window by the script, the arrow at its square (--gallery-heatmap-arrow; at its top when it stands under the square). */
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-tip {
+    position: fixed;
+    inset: auto;
+    z-index: 10; /* the top layer needs none: this is where no popover is */
     box-sizing: border-box;
-    border-radius: max(2px, calc(var(--gallery-heatmap-cell) / 4));
-    background: var(--gallery-heatmap-0);
+    margin: 0;
+    border: 0;
+    overflow: visible;
+    padding: 7px 10px;
+    border-radius: 8px;
+    background: var(--gallery-heatmap-tip);
+    box-shadow: 0 6px 18px -6px rgb(0 0 0 / 35%);
+    font-size: 12px;
+    line-height: 17px;
+    color: #f5f5f3;
+    white-space: nowrap;
+    pointer-events: none;
   }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="1"] { background: var(--gallery-heatmap-1); }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="2"] { background: var(--gallery-heatmap-2); }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="3"] { background: var(--gallery-heatmap-3); }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day[data-level="4"] { background: var(--gallery-heatmap-4); }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day.gallery-heatmap-before { background: transparent; box-shadow: inset 0 0 0 1px var(--gallery-heatmap-0); }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-grid > .gallery-heatmap-day.gallery-heatmap-future { visibility: hidden; }
-  /* Less to more, wherever the script put it: under the squares or at the head's end. */
-  > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-legend,
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-legend {
-    display: flex;
-    align-items: center;
-    align-self: center;
-    gap: 3px;
-    flex: none;
-    color: var(--doc-muted);
-    font-size: 10px;
-    line-height: 1;
-    > .gallery-heatmap-less { margin-inline-end: 3px; }
-    > .gallery-heatmap-more { margin-inline-start: 3px; }
-    > .gallery-heatmap-square { width: 10px; height: 10px; border-radius: 3px; background: var(--gallery-heatmap-0); }
-    > .gallery-heatmap-square[data-level="1"] { background: var(--gallery-heatmap-1); }
-    > .gallery-heatmap-square[data-level="2"] { background: var(--gallery-heatmap-2); }
-    > .gallery-heatmap-square[data-level="3"] { background: var(--gallery-heatmap-3); }
-    > .gallery-heatmap-square[data-level="4"] { background: var(--gallery-heatmap-4); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-tip[hidden] { display: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-tip > small { display: block; font-size: 11.5px; color: rgb(255 255 255 / 60%); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-tip::after { content: ""; position: absolute; bottom: -4px; left: var(--gallery-heatmap-arrow, 50%); width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-area > .gallery-heatmap-tip[data-below]::after { top: -4px; bottom: auto; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; font-size: 11px; line-height: 14px; color: var(--gallery-faint); white-space: nowrap; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square { width: 11px; height: 11px; border-radius: 3px; background: var(--gallery-heatmap-0); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square[data-level="1"] { background: var(--gallery-heatmap-1); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square[data-level="2"] { background: var(--gallery-heatmap-2); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square[data-level="3"] { background: var(--gallery-heatmap-3); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-square[data-level="4"] { background: var(--gallery-heatmap-4); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-note { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend > .gallery-heatmap-note > s { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--gallery-heatmap-dot); }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: 0;
+    padding: 6px 12px;
+    border-radius: 8px;
+    transform: translate(-50%, -50%);
+    background: var(--gallery-card-fill);
+    box-shadow: 0 0 0 1px var(--gallery-hair);
+    font-size: 12.5px;
+    line-height: 18px;
+    color: var(--gallery-muted);
+    white-space: nowrap;
   }
-  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-area > .gallery-heatmap-legend { align-self: flex-start; margin-top: 8px; }
-}
-/* A wide card (8 cells and more) with something counted: the figures beside the squares. */
-@container (min-width: 560px) {
-  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face[data-figures] > .gallery-heatmap-body > .gallery-heatmap-aside { display: flex; }
-}
-/* Not so high (a 2-high card from a window 1440px wide): today's left out of the figures, which would not fit with the rest. */
-@container (max-height: 150px) {
-  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-more > .gallery-heatmap-piece + .gallery-heatmap-piece { display: none; }
-}
-/* Low (a 2-high card from a window under 1440px wide): what the figures count left out too, the number the figure size. */
-@container (max-height: 124px) {
-  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-label { display: none; }
-  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number { font-size: var(--gallery-figure-size); }
-}
-/* A card too narrow for less to more beside the line: the line alone. */
-@container (max-width: 440px) {
-  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-legend { display: none; }
-  [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face > .gallery-heatmap-head > .gallery-heatmap-line { margin-inline-end: calc(-1 * var(--gallery-grip-room, 0px)); opacity: calc(1 - var(--gallery-grip-shown, 0)); transition: opacity .12s ease-out; }
+  > .gallery-heatmap-face > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-overlay[hidden] { display: none; }
+
+  /* A compact card: a line of the total over the squares, no legend. */
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body { flex-direction: column; gap: 10px; margin-top: 12px; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside { flex-direction: row; align-items: flex-end; justify-content: space-between; width: auto; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > :is(.gallery-heatmap-label, .gallery-heatmap-facts, .gallery-heatmap-who) { display: none; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total { margin: 0; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-number { font-size: 28px; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-total > .gallery-heatmap-unit { margin-left: 11px; }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-aside > .gallery-heatmap-average { margin: 0; font-size: 11.5px; line-height: 16px; color: var(--gallery-faint); }
+  > .gallery-heatmap-face[data-layout="compact"] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend { display: none; }
+  /* A strip: the squares alone under the head. */
+  > .gallery-heatmap-face[data-layout="strip"] > .gallery-heatmap-body { margin-top: 12px; }
+  > .gallery-heatmap-face[data-layout="strip"] > .gallery-heatmap-body > .gallery-heatmap-aside { display: none; }
+  /* Two cells high (8 × 2): the squares alone, no head, figures or legend, in the middle of the card's height;
+     the months' row its first, kept out of the grip's corner by the script (the probe: as wide as that corner). */
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-head { display: none; }
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-body { margin-top: 0; }
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-body > .gallery-heatmap-aside { display: none; }
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-body > .gallery-heatmap-field { justify-content: center; }
+  > .gallery-heatmap-face[data-layout="grid"] > .gallery-heatmap-body > .gallery-heatmap-field > .gallery-heatmap-legend { display: none; }
+  > .gallery-heatmap-face > .gallery-heatmap-grip-room { position: absolute; width: var(--gallery-grip-room, 0px); height: 0; visibility: hidden; pointer-events: none; }
 }
-/* On a custom page the face is the card's: as high as what the card holds inside its padding. */
+/* On a custom page the face fills the card the board frames. */
 .gallery-card > [data-doc-component="gallery/heatmap"] { height: 100%; }
+.gallery-card > [data-doc-component="gallery/heatmap"] > .gallery-heatmap-face { height: 100%; }

package/packs/gallery/heatmap/writing.md

@@ -14,8 +14,8 @@ It is kept in its data part `settings`, a `<script type="application/json">`: `{
 
 ## How to write it
 
-Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add heatmap`, the instance as template.html has it. Sizes: 8 × 3 (the default: most of a year, its weekdays and less to more under the squares), 12 × 3 (a year) and 4 × 3 (the last weeks alone): as many weeks as the card holds are drawn, the last ending today.
+Put it on a custom page as a card of its board, `<section class="gallery-card" data-card-id="…" data-x data-y data-w data-h>`, holding one instance, after `gallery block add heatmap`, the instance as template.html has it. Sizes: 8 × 4 (the default: 14 weeks and the figures beside them), 12 × 4 (26 weeks and the figures), 4 × 4 (10 weeks under a line of the total), 12 × 3 (a year, the total in the head), 8 × 3 (about 33 weeks, the total in the head) and 8 × 2 (the squares alone, about 44 weeks: no head, figures or legend): as many weeks as the card holds are drawn, the last ending today.
 
 ## How it looks
 
-编辑热力图 beside a calendar's chip, how many edits there were at the top line's end, the weekdays down the left (Monday first), the months over the weeks, the squares in the accent's shades, darker for a day of more; in the kit's card tokens (as every Gallery card: a head of a tinted chip and a title, its end clear of the card's grip), light and dark. Less to more stands under the squares where the card has the room, else at the top line's end. On a wide card (8 cells and more), once anything is counted, the figures stand at the left of the squares: 期间编辑, the edits (or words) in all, large, how many days had any and today's, the top line then saying since when. A day before the record began is an outlined square, an empty slot. Each square says its day and its count where the pointer rests on it. Until anything is counted the line says since when the record is kept (从 11月8日 开始记录). It follows by itself: a document saved, or written by the Agent, shows on today's square at once, and what was written while Gallery did not run is counted on its day when it starts. In an exported file, which has no workspace to read, the line says it shows when the page is opened in Gallery. The script runs with the rights of the page's own scripts, as any block's does.
+In Gallery 风格's look (the kit's card tokens, light and dark): a head of a small gray chip and a title, its end clear of the card's grip; one hero; the rest small and gray; the accent on the data and on today alone. Its head is a calendar's chip and 编辑热力图. The squares are the hero, five shades of the accent by how a day stands among the days recorded, today's ringed, the months' names over them and 一 三 五 beside them, less to more under them; a day before the record began is a small gray dot, never an empty square. On an 8 × 4 or 12 × 4 card the figures stand at their left: the edits of the weeks shown, large, the average a day, the days with any, the longest run of them and today's, and a bar of how the reader's and the Agent's edits split. A pointer on a square shows its day, its edits and whose they were. 按字数显示 counts the words each day added instead.

package/packs/gallery/kanban/kit.js

@@ -1,5 +1,5 @@
 // gallery/kanban (看板): a view of a table of the document (its manifest's needs hold "tables"; the table's
-// frame carries the key its data-doc-from names, which the table's 视图 › puts on both). Each row of the
+// frame carries the key its data-doc-from names, which a board made from "/" takes from the table above it). Each row of the
 // table is a card, grouped by a column (its settings' `group`, else the column that reads as a status: one
 // named 状态, 进度, 阶段, status…, else the one after the first whose words repeat most), the groups in
 // the order its settings' `order` lists (empty ones too), then any other value as the rows first say it,
@@ -34,7 +34,7 @@ const WORDS = {
     remove: "删除",
     open: "打开",
     cards: (/** @type {number} */ count) => `${count} 张卡片`,
-    unbound: "这个看板还没有接到表格上：在表格的菜单里选“视图 › 看板”。",
+    unbound: "这个看板还没有接到表格上：在它的菜单里选“设置…”，选一张表格。",
     unread: "读不到这个看板的表格：它不在页面上了，或者有合并的单元格。",
     missing: (/** @type {string} */ name) => `找不到列“${name}”：表格的列名改过了吗？`,
     readOnly: "这张表格有表尾，或者各行的格数不一样，看板改不了它，这里只能看。",
@@ -51,7 +51,7 @@ const WORDS = {
     remove: "Delete",
     open: "Open",
     cards: (/** @type {number} */ count) => `${count} cards`,
-    unbound: "This board reads no table yet: pick View › Board in a table's menu.",
+    unbound: "This board reads no table yet: pick Settings… in its menu and choose a table.",
     unread: "This board's table cannot be read: it is not on the page, or it has merged cells.",
     missing: (/** @type {string} */ name) => `No column “${name}”: was the table's column renamed?`,
     readOnly: "This table has a footer, or rows of other lengths: the board cannot change it, only show it.",

package/packs/gallery/kanban/writing.md

@@ -13,7 +13,7 @@ Write a table, then the board after it, as example.html does (`gallery block sho
 
   Write `{}` for no settings. One table may have several views (another board, a 指标, a 图表), each with the same key.
 
-The reader adds a board in Gallery from a table's menu, 视图 › 看板, which writes the key on both; it is not in "/", as a board needs its table.
+The reader adds a board in Gallery from "/" (看板): it reads the nearest table above it, the key written on both; its menu's 设置… picks another table.
 
 ## How it looks
 

package/packs/gallery/metric/kit.js

@@ -1,5 +1,5 @@
 // gallery/metric (指标): a view of a table of the document (its manifest's needs hold "tables"; the table's
-// frame carries the key its data-doc-from names, which the table's 视图 › puts on both): one number of
+// frame carries the key its data-doc-from names, which a metric made from "/" takes from the table above it): one number of
 // the table, large, under its name. Its settings (its data part `settings`, JSON) say which: `op`
 // "count" (the rows: the default), "sum" or "average" of the numbers of a `column` (the first column
 // holding numbers where it names none; a cell holding no number is left out, as a chart leaves it out),
@@ -28,7 +28,7 @@ const WORDS = {
     of: (/** @type {string} */ label, /** @type {string} */ where) => `${label}（${where}）`,
     counted: (/** @type {number} */ count) => `按 ${count} 行算`,
     outOf: (/** @type {number} */ count) => `共 ${count} 行`,
-    unbound: "这个指标还没有接到表格上：在表格的菜单里选“视图 › 指标”。",
+    unbound: "这个指标还没有接到表格上：在它的菜单里选“设置…”，选一张表格。",
     unread: "读不到这个指标的表格：它不在页面上了，或者有合并的单元格。",
     missing: (/** @type {string} */ name) => `找不到列“${name}”：表格的列名改过了吗？`,
     noNumbers: "表格里没有写数的列：合计和平均要一列数。",
@@ -50,7 +50,7 @@ const WORDS = {
     of: (/** @type {string} */ label, /** @type {string} */ where) => `${label} (${where})`,
     counted: (/** @type {number} */ count) => `Of ${count} rows`,
     outOf: (/** @type {number} */ count) => `${count} rows in all`,
-    unbound: "This metric reads no table yet: pick View › Metric in a table's menu.",
+    unbound: "This metric reads no table yet: pick Settings… in its menu and choose a table.",
     unread: "This metric's table cannot be read: it is not on the page, or it has merged cells.",
     missing: (/** @type {string} */ name) => `No column “${name}”: was the table's column renamed?`,
     noNumbers: "The table has no column of numbers: a sum and an average need one.",

package/packs/gallery/metric/writing.md

@@ -16,7 +16,7 @@ Write a table, then the metric, as example.html does (`gallery block show galler
 
   One table may have several views (a 看板, a 图表, more metrics), each with the same key.
 
-The reader adds a metric in Gallery from a table's menu, 视图 › 指标, which writes the key on both; it is not in "/", as a metric needs its table. Its ⚙ (where the page edits) changes its settings.
+The reader adds a metric in Gallery from "/" (指标): it reads the nearest table above it, the key written on both; its menu's 设置… picks another table and changes its settings (so does its ⚙, where the page edits).
 
 ## How it looks