@reticlehq/browser 2.8.0 → 2.9.0

package/dist/presenter/presenter-brand.d.ts

@@ -1,19 +1,36 @@
+/**
+ * The artwork constants are annotated `: string` deliberately.
+ *
+ * Without the annotation TypeScript infers a literal type, and every one of these SVG and HTML
+ * strings is copied verbatim into the emitted `.d.ts` as its own type. That duplicated the artwork
+ * into the published package twice over: this file's declarations alone were 16KB of a 900KB
+ * budget, carrying type information nobody can use - no caller cares about the literal type of a
+ * `<path d=...>`.
+ */
 /**
  * Brand marks, inlined. The SDK is bundled into someone else's page: it cannot read
  * `assets/logo/*.svg` from disk at runtime and must never fetch from our own domain, so the two
  * artwork files live here as strings (same precedent as SEND_ICON in presenter-controls.ts).
- * Both are minified — editor metadata, clip paths, masks and sub-0.01 precision stripped — and paint
+ * Both are minified - editor metadata, clip paths, masks and sub-0.01 precision stripped - and paint
  * with `currentColor` so the mark tracks --reticle-fg instead of hardcoding the export's #FAFAFA.
  */
-/** Accessible name of the HUD — the wordmark is artwork, this is what a screen reader reads. */
+/** Accessible name of the HUD - the wordmark is artwork, this is what a screen reader reads. */
 export declare const BRAND_NAME = "Reticle";
-/** Mark alone (shown when the HUD is collapsed to a pill). */
-export declare const MARK_SVG = "<svg class=\"reticle-mark\" viewBox=\"0 0 96 94\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M92.82 92.16C93.07 93.4 91.77 94.4 90.63 93.83C89.62 93.33 88.62 92.82 87.63 92.3C71.14 83.78 54.79 72.27 39.61 57.96C39.09 57.49 38.57 56.98 38.06 56.49C22.45 41.52 9.78 25.14 .33 8.52C0.29 8.45 .25 8.38 .2 8.31C-0.44 7.2 .51 5.84 1.79 6.05L24.07 9.71C43.06 12.83 60.63 11.75 75.55 6.53L93.95 .09C95.15-0.33 96.31 .78 95.93 1.98L90.1 20.49C85.37 35.48 84.9 52.97 88.69 71.73L92.83 92.16H92.82Z\"/><path d=\"M58.72 89.23L6.15 92.8C5.24 92.86 4.48 92.13 4.51 91.22L6.56 30.39C6.61 28.91 8.51 28.36 9.35 29.57C16.23 39.43 24.98 52.35 33.01 61.26C41.05 70.17 50.6 78.72 59.62 86.56C60.65 87.45 60.08 89.13 58.72 89.23Z\"/></svg>";
-/** Mark + "reticle" lettering (shown when the HUD is expanded). */
-export declare const WORDMARK_SVG = "<svg class=\"reticle-wordmark\" viewBox=\"0 0 347 96\" fill=\"currentColor\" aria-hidden=\"true\"><g transform=\"translate(1 1)\"><path d=\"M92.82 92.16C93.07 93.4 91.77 94.4 90.63 93.83C89.62 93.33 88.62 92.82 87.63 92.3C71.14 83.78 54.79 72.27 39.61 57.96C39.09 57.49 38.57 56.98 38.06 56.49C22.45 41.52 9.78 25.14 .33 8.52C0.29 8.45 .25 8.38 .2 8.31C-0.44 7.2 .51 5.84 1.79 6.05L24.07 9.71C43.06 12.83 60.63 11.75 75.55 6.53L93.95 .09C95.15-0.33 96.31 .78 95.93 1.98L90.1 20.49C85.37 35.48 84.9 52.97 88.69 71.73L92.83 92.16H92.82Z\"/><path d=\"M58.72 89.23L6.15 92.8C5.24 92.86 4.48 92.13 4.51 91.22L6.56 30.39C6.61 28.91 8.51 28.36 9.35 29.57C16.23 39.43 24.98 52.35 33.01 61.26C41.05 70.17 50.6 78.72 59.62 86.56C60.65 87.45 60.08 89.13 58.72 89.23Z\"/></g><path d=\"M116.43 78V27.09H136.51C140.35 27.09 143.64 27.78 146.35 29.15C149.09 30.51 151.17 32.44 152.59 34.95C154.04 37.43 154.76 40.36 154.76 43.72C154.76 47.1 154.03 50.01 152.57 52.45C151.11 54.87 149 56.72 146.23 58.01C143.48 59.31 140.15 59.95 136.24 59.95H122.79V51.3H134.5C136.55 51.3 138.26 51.02 139.62 50.46C140.98 49.89 141.99 49.05 142.65 47.92C143.33 46.8 143.67 45.39 143.67 43.72C143.67 42.03 143.33 40.61 142.65 39.45C141.99 38.29 140.97 37.41 139.59 36.81C138.23 36.2 136.52 35.89 134.45 35.89H127.19V78H116.43ZM143.92 54.83L156.57 78H144.69L132.31 54.83H143.92ZM178.95 78.75C175.02 78.75 171.64 77.95 168.81 76.36C165.99 74.75 163.82 72.48 162.29 69.55C160.77 66.6 160.01 63.11 160.01 59.08C160.01 55.16 160.77 51.71 162.29 48.74C163.82 45.78 165.97 43.46 168.73 41.81C171.52 40.15 174.78 39.32 178.53 39.32C181.05 39.32 183.39 39.73 185.56 40.54C187.75 41.33 189.65 42.54 191.28 44.14C192.92 45.75 194.2 47.77 195.11 50.21C196.02 52.63 196.47 55.46 196.47 58.71V61.62H164.23V55.06H186.51C186.51 53.53 186.17 52.18 185.51 51C184.85 49.83 183.93 48.91 182.75 48.25C181.59 47.57 180.24 47.23 178.7 47.23C177.09 47.23 175.67 47.6 174.43 48.34C173.2 49.07 172.24 50.06 171.54 51.3C170.85 52.53 170.49 53.9 170.47 55.4V61.64C170.47 63.53 170.82 65.17 171.52 66.54C172.23 67.92 173.23 68.98 174.52 69.72C175.82 70.47 177.35 70.84 179.12 70.84C180.3 70.84 181.38 70.68 182.35 70.34C183.33 70.01 184.17 69.52 184.87 68.85C185.56 68.19 186.09 67.38 186.46 66.42L196.25 67.06C195.75 69.42 194.73 71.47 193.19 73.23C191.67 74.97 189.7 76.33 187.28 77.3C184.87 78.27 182.1 78.75 178.95 78.75ZM223.69 39.82V47.77H200.7V39.82H223.69ZM205.92 30.67H216.51V66.27C216.51 67.24 216.66 68.01 216.96 68.55C217.26 69.08 217.67 69.46 218.2 69.67C218.75 69.89 219.38 70 220.09 70C220.59 70 221.08 69.95 221.58 69.87C222.08 69.77 222.46 69.7 222.72 69.65L224.39 77.53C223.86 77.69 223.11 77.88 222.15 78.1C221.19 78.33 220.02 78.47 218.65 78.52C216.1 78.62 213.86 78.28 211.94 77.5C210.03 76.72 208.55 75.51 207.49 73.87C206.43 72.23 205.9 70.16 205.92 67.66V30.67ZM230.59 78V39.82H241.18V78H230.59ZM235.91 34.9C234.34 34.9 232.99 34.37 231.86 33.33C230.75 32.27 230.19 31 230.19 29.53C230.19 28.07 230.75 26.82 231.86 25.77C232.99 24.71 234.34 24.18 235.91 24.18C237.49 24.18 238.83 24.71 239.94 25.77C241.07 26.82 241.63 28.07 241.63 29.53C241.63 31 241.07 32.27 239.94 33.33C238.83 34.37 237.49 34.9 235.91 34.9ZM266.92 78.75C263 78.75 259.64 77.92 256.82 76.26C254.02 74.59 251.87 72.27 250.36 69.3C248.87 66.33 248.12 62.92 248.12 59.06C248.12 55.15 248.88 51.72 250.38 48.77C251.91 45.8 254.07 43.49 256.87 41.83C259.67 40.16 263 39.32 266.87 39.32C270.2 39.32 273.11 39.93 275.62 41.14C278.12 42.35 280.1 44.04 281.56 46.23C283.01 48.42 283.82 50.99 283.97 53.94H273.97C273.69 52.03 272.95 50.5 271.74 49.34C270.54 48.16 268.98 47.57 267.04 47.57C265.4 47.57 263.96 48.02 262.74 48.92C261.53 49.79 260.58 51.08 259.9 52.77C259.23 54.46 258.89 56.51 258.89 58.91C258.89 61.35 259.22 63.42 259.88 65.12C260.56 66.83 261.51 68.13 262.74 69.03C263.96 69.92 265.4 70.37 267.04 70.37C268.25 70.37 269.33 70.12 270.3 69.62C271.27 69.13 272.08 68.4 272.71 67.46C273.35 66.5 273.78 65.35 273.97 64.01H283.97C283.8 66.92 283.01 69.49 281.58 71.71C280.17 73.92 278.23 75.64 275.74 76.88C273.25 78.12 270.31 78.75 266.92 78.75ZM301.34 27.09V78H290.75V27.09H301.34ZM327.22 78.75C323.29 78.75 319.91 77.95 317.08 76.36C314.26 74.75 312.09 72.48 310.57 69.55C309.04 66.6 308.28 63.11 308.28 59.08C308.28 55.16 309.04 51.71 310.57 48.74C312.09 45.78 314.24 43.46 317 41.81C319.79 40.15 323.05 39.32 326.8 39.32C329.32 39.32 331.66 39.73 333.83 40.54C336.02 41.33 337.93 42.54 339.55 44.14C341.19 45.75 342.47 47.77 343.38 50.21C344.29 52.63 344.75 55.46 344.75 58.71V61.62H312.5V55.06H334.78C334.78 53.53 334.45 52.18 333.78 51C333.12 49.83 332.2 48.91 331.02 48.25C329.86 47.57 328.51 47.23 326.97 47.23C325.36 47.23 323.94 47.6 322.7 48.34C321.47 49.07 320.51 50.06 319.81 51.3C319.12 52.53 318.76 53.9 318.74 55.4V61.64C318.74 63.53 319.09 65.17 319.79 66.54C320.5 67.92 321.5 68.98 322.8 69.72C324.09 70.47 325.62 70.84 327.39 70.84C328.57 70.84 329.65 70.68 330.63 70.34C331.6 70.01 332.44 69.52 333.14 68.85C333.83 68.19 334.36 67.38 334.73 66.42L344.52 67.06C344.02 69.42 343.01 71.47 341.46 73.23C339.94 74.97 337.97 76.33 335.55 77.3C333.15 78.27 330.37 78.75 327.22 78.75Z\"/></svg>";
+/** Mark alone (shown in the FAB and compact toolbar). */
+export declare const MARK_SVG: string;
+/** FAB-sized mark for the collapsed circular control. */
+export declare const FAB_MARK_SVG: string;
+/** Mark + "reticle" lettering (legacy wordmark artwork). */
+export declare const WORDMARK_SVG: string;
+/** Compact text label beside the mark in the expanded toolbar. */
+export declare const BRAND_MINI_CLASS = "reticle-brand-mini";
+/** Toolbar brand: mark + Reticle word (always shown together when expanded). */
+export declare const TOOLBAR_BRAND_HTML: string;
 /**
  * Header brand block. Both marks are always in the DOM and CSS picks one off the collapsed
  * attribute, so there is no JS state to keep in sync. The artwork is decorative (aria-hidden);
  * the visually-hidden name is what keeps the HUD identifiable to a screen reader in BOTH states.
  */
-export declare const BRAND_HTML = "<span class=\"reticle-brand\"><svg class=\"reticle-mark\" viewBox=\"0 0 96 94\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M92.82 92.16C93.07 93.4 91.77 94.4 90.63 93.83C89.62 93.33 88.62 92.82 87.63 92.3C71.14 83.78 54.79 72.27 39.61 57.96C39.09 57.49 38.57 56.98 38.06 56.49C22.45 41.52 9.78 25.14 .33 8.52C0.29 8.45 .25 8.38 .2 8.31C-0.44 7.2 .51 5.84 1.79 6.05L24.07 9.71C43.06 12.83 60.63 11.75 75.55 6.53L93.95 .09C95.15-0.33 96.31 .78 95.93 1.98L90.1 20.49C85.37 35.48 84.9 52.97 88.69 71.73L92.83 92.16H92.82Z\"/><path d=\"M58.72 89.23L6.15 92.8C5.24 92.86 4.48 92.13 4.51 91.22L6.56 30.39C6.61 28.91 8.51 28.36 9.35 29.57C16.23 39.43 24.98 52.35 33.01 61.26C41.05 70.17 50.6 78.72 59.62 86.56C60.65 87.45 60.08 89.13 58.72 89.23Z\"/></svg><svg class=\"reticle-wordmark\" viewBox=\"0 0 347 96\" fill=\"currentColor\" aria-hidden=\"true\"><g transform=\"translate(1 1)\"><path d=\"M92.82 92.16C93.07 93.4 91.77 94.4 90.63 93.83C89.62 93.33 88.62 92.82 87.63 92.3C71.14 83.78 54.79 72.27 39.61 57.96C39.09 57.49 38.57 56.98 38.06 56.49C22.45 41.52 9.78 25.14 .33 8.52C0.29 8.45 .25 8.38 .2 8.31C-0.44 7.2 .51 5.84 1.79 6.05L24.07 9.71C43.06 12.83 60.63 11.75 75.55 6.53L93.95 .09C95.15-0.33 96.31 .78 95.93 1.98L90.1 20.49C85.37 35.48 84.9 52.97 88.69 71.73L92.83 92.16H92.82Z\"/><path d=\"M58.72 89.23L6.15 92.8C5.24 92.86 4.48 92.13 4.51 91.22L6.56 30.39C6.61 28.91 8.51 28.36 9.35 29.57C16.23 39.43 24.98 52.35 33.01 61.26C41.05 70.17 50.6 78.72 59.62 86.56C60.65 87.45 60.08 89.13 58.72 89.23Z\"/></g><path d=\"M116.43 78V27.09H136.51C140.35 27.09 143.64 27.78 146.35 29.15C149.09 30.51 151.17 32.44 152.59 34.95C154.04 37.43 154.76 40.36 154.76 43.72C154.76 47.1 154.03 50.01 152.57 52.45C151.11 54.87 149 56.72 146.23 58.01C143.48 59.31 140.15 59.95 136.24 59.95H122.79V51.3H134.5C136.55 51.3 138.26 51.02 139.62 50.46C140.98 49.89 141.99 49.05 142.65 47.92C143.33 46.8 143.67 45.39 143.67 43.72C143.67 42.03 143.33 40.61 142.65 39.45C141.99 38.29 140.97 37.41 139.59 36.81C138.23 36.2 136.52 35.89 134.45 35.89H127.19V78H116.43ZM143.92 54.83L156.57 78H144.69L132.31 54.83H143.92ZM178.95 78.75C175.02 78.75 171.64 77.95 168.81 76.36C165.99 74.75 163.82 72.48 162.29 69.55C160.77 66.6 160.01 63.11 160.01 59.08C160.01 55.16 160.77 51.71 162.29 48.74C163.82 45.78 165.97 43.46 168.73 41.81C171.52 40.15 174.78 39.32 178.53 39.32C181.05 39.32 183.39 39.73 185.56 40.54C187.75 41.33 189.65 42.54 191.28 44.14C192.92 45.75 194.2 47.77 195.11 50.21C196.02 52.63 196.47 55.46 196.47 58.71V61.62H164.23V55.06H186.51C186.51 53.53 186.17 52.18 185.51 51C184.85 49.83 183.93 48.91 182.75 48.25C181.59 47.57 180.24 47.23 178.7 47.23C177.09 47.23 175.67 47.6 174.43 48.34C173.2 49.07 172.24 50.06 171.54 51.3C170.85 52.53 170.49 53.9 170.47 55.4V61.64C170.47 63.53 170.82 65.17 171.52 66.54C172.23 67.92 173.23 68.98 174.52 69.72C175.82 70.47 177.35 70.84 179.12 70.84C180.3 70.84 181.38 70.68 182.35 70.34C183.33 70.01 184.17 69.52 184.87 68.85C185.56 68.19 186.09 67.38 186.46 66.42L196.25 67.06C195.75 69.42 194.73 71.47 193.19 73.23C191.67 74.97 189.7 76.33 187.28 77.3C184.87 78.27 182.1 78.75 178.95 78.75ZM223.69 39.82V47.77H200.7V39.82H223.69ZM205.92 30.67H216.51V66.27C216.51 67.24 216.66 68.01 216.96 68.55C217.26 69.08 217.67 69.46 218.2 69.67C218.75 69.89 219.38 70 220.09 70C220.59 70 221.08 69.95 221.58 69.87C222.08 69.77 222.46 69.7 222.72 69.65L224.39 77.53C223.86 77.69 223.11 77.88 222.15 78.1C221.19 78.33 220.02 78.47 218.65 78.52C216.1 78.62 213.86 78.28 211.94 77.5C210.03 76.72 208.55 75.51 207.49 73.87C206.43 72.23 205.9 70.16 205.92 67.66V30.67ZM230.59 78V39.82H241.18V78H230.59ZM235.91 34.9C234.34 34.9 232.99 34.37 231.86 33.33C230.75 32.27 230.19 31 230.19 29.53C230.19 28.07 230.75 26.82 231.86 25.77C232.99 24.71 234.34 24.18 235.91 24.18C237.49 24.18 238.83 24.71 239.94 25.77C241.07 26.82 241.63 28.07 241.63 29.53C241.63 31 241.07 32.27 239.94 33.33C238.83 34.37 237.49 34.9 235.91 34.9ZM266.92 78.75C263 78.75 259.64 77.92 256.82 76.26C254.02 74.59 251.87 72.27 250.36 69.3C248.87 66.33 248.12 62.92 248.12 59.06C248.12 55.15 248.88 51.72 250.38 48.77C251.91 45.8 254.07 43.49 256.87 41.83C259.67 40.16 263 39.32 266.87 39.32C270.2 39.32 273.11 39.93 275.62 41.14C278.12 42.35 280.1 44.04 281.56 46.23C283.01 48.42 283.82 50.99 283.97 53.94H273.97C273.69 52.03 272.95 50.5 271.74 49.34C270.54 48.16 268.98 47.57 267.04 47.57C265.4 47.57 263.96 48.02 262.74 48.92C261.53 49.79 260.58 51.08 259.9 52.77C259.23 54.46 258.89 56.51 258.89 58.91C258.89 61.35 259.22 63.42 259.88 65.12C260.56 66.83 261.51 68.13 262.74 69.03C263.96 69.92 265.4 70.37 267.04 70.37C268.25 70.37 269.33 70.12 270.3 69.62C271.27 69.13 272.08 68.4 272.71 67.46C273.35 66.5 273.78 65.35 273.97 64.01H283.97C283.8 66.92 283.01 69.49 281.58 71.71C280.17 73.92 278.23 75.64 275.74 76.88C273.25 78.12 270.31 78.75 266.92 78.75ZM301.34 27.09V78H290.75V27.09H301.34ZM327.22 78.75C323.29 78.75 319.91 77.95 317.08 76.36C314.26 74.75 312.09 72.48 310.57 69.55C309.04 66.6 308.28 63.11 308.28 59.08C308.28 55.16 309.04 51.71 310.57 48.74C312.09 45.78 314.24 43.46 317 41.81C319.79 40.15 323.05 39.32 326.8 39.32C329.32 39.32 331.66 39.73 333.83 40.54C336.02 41.33 337.93 42.54 339.55 44.14C341.19 45.75 342.47 47.77 343.38 50.21C344.29 52.63 344.75 55.46 344.75 58.71V61.62H312.5V55.06H334.78C334.78 53.53 334.45 52.18 333.78 51C333.12 49.83 332.2 48.91 331.02 48.25C329.86 47.57 328.51 47.23 326.97 47.23C325.36 47.23 323.94 47.6 322.7 48.34C321.47 49.07 320.51 50.06 319.81 51.3C319.12 52.53 318.76 53.9 318.74 55.4V61.64C318.74 63.53 319.09 65.17 319.79 66.54C320.5 67.92 321.5 68.98 322.8 69.72C324.09 70.47 325.62 70.84 327.39 70.84C328.57 70.84 329.65 70.68 330.63 70.34C331.6 70.01 332.44 69.52 333.14 68.85C333.83 68.19 334.36 67.38 334.73 66.42L344.52 67.06C344.02 69.42 343.01 71.47 341.46 73.23C339.94 74.97 337.97 76.33 335.55 77.3C333.15 78.27 330.37 78.75 327.22 78.75Z\"/></svg><span class=\"reticle-brand-sr\">Reticle</span></span>";
+export declare const BRAND_HTML: string;
+/** Collapsed FAB control - Reticle mark only. */
+export declare const FAB_TOGGLE_HTML: string;

package/dist/presenter/presenter-brand.js

@@ -1,21 +1,38 @@
+/**
+ * The artwork constants are annotated `: string` deliberately.
+ *
+ * Without the annotation TypeScript infers a literal type, and every one of these SVG and HTML
+ * strings is copied verbatim into the emitted `.d.ts` as its own type. That duplicated the artwork
+ * into the published package twice over: this file's declarations alone were 16KB of a 900KB
+ * budget, carrying type information nobody can use - no caller cares about the literal type of a
+ * `<path d=...>`.
+ */
 /**
  * Brand marks, inlined. The SDK is bundled into someone else's page: it cannot read
  * `assets/logo/*.svg` from disk at runtime and must never fetch from our own domain, so the two
  * artwork files live here as strings (same precedent as SEND_ICON in presenter-controls.ts).
- * Both are minified — editor metadata, clip paths, masks and sub-0.01 precision stripped — and paint
+ * Both are minified - editor metadata, clip paths, masks and sub-0.01 precision stripped - and paint
  * with `currentColor` so the mark tracks --reticle-fg instead of hardcoding the export's #FAFAFA.
  */
-/** Accessible name of the HUD — the wordmark is artwork, this is what a screen reader reads. */
+/** Accessible name of the HUD - the wordmark is artwork, this is what a screen reader reads. */
 export const BRAND_NAME = 'Reticle';
-/** The two glyph paths of the mark, shared by both marks — the wordmark just offsets them by (1,1). */
+/** The two glyph paths of the mark, shared by both marks - the wordmark just offsets them by (1,1). */
 const MARK_PATHS = `<path d="M92.82 92.16C93.07 93.4 91.77 94.4 90.63 93.83C89.62 93.33 88.62 92.82 87.63 92.3C71.14 83.78 54.79 72.27 39.61 57.96C39.09 57.49 38.57 56.98 38.06 56.49C22.45 41.52 9.78 25.14 .33 8.52C0.29 8.45 .25 8.38 .2 8.31C-0.44 7.2 .51 5.84 1.79 6.05L24.07 9.71C43.06 12.83 60.63 11.75 75.55 6.53L93.95 .09C95.15-0.33 96.31 .78 95.93 1.98L90.1 20.49C85.37 35.48 84.9 52.97 88.69 71.73L92.83 92.16H92.82Z"/><path d="M58.72 89.23L6.15 92.8C5.24 92.86 4.48 92.13 4.51 91.22L6.56 30.39C6.61 28.91 8.51 28.36 9.35 29.57C16.23 39.43 24.98 52.35 33.01 61.26C41.05 70.17 50.6 78.72 59.62 86.56C60.65 87.45 60.08 89.13 58.72 89.23Z"/>`;
-/** Mark alone (shown when the HUD is collapsed to a pill). */
+/** Mark alone (shown in the FAB and compact toolbar). */
 export const MARK_SVG = `<svg class="reticle-mark" viewBox="0 0 96 94" fill="currentColor" aria-hidden="true">${MARK_PATHS}</svg>`;
-/** Mark + "reticle" lettering (shown when the HUD is expanded). */
+/** FAB-sized mark for the collapsed circular control. */
+export const FAB_MARK_SVG = `<svg class="reticle-fab-mark" viewBox="0 0 96 94" fill="currentColor" aria-hidden="true">${MARK_PATHS}</svg>`;
+/** Mark + "reticle" lettering (legacy wordmark artwork). */
 export const WORDMARK_SVG = `<svg class="reticle-wordmark" viewBox="0 0 347 96" fill="currentColor" aria-hidden="true"><g transform="translate(1 1)">${MARK_PATHS}</g><path d="M116.43 78V27.09H136.51C140.35 27.09 143.64 27.78 146.35 29.15C149.09 30.51 151.17 32.44 152.59 34.95C154.04 37.43 154.76 40.36 154.76 43.72C154.76 47.1 154.03 50.01 152.57 52.45C151.11 54.87 149 56.72 146.23 58.01C143.48 59.31 140.15 59.95 136.24 59.95H122.79V51.3H134.5C136.55 51.3 138.26 51.02 139.62 50.46C140.98 49.89 141.99 49.05 142.65 47.92C143.33 46.8 143.67 45.39 143.67 43.72C143.67 42.03 143.33 40.61 142.65 39.45C141.99 38.29 140.97 37.41 139.59 36.81C138.23 36.2 136.52 35.89 134.45 35.89H127.19V78H116.43ZM143.92 54.83L156.57 78H144.69L132.31 54.83H143.92ZM178.95 78.75C175.02 78.75 171.64 77.95 168.81 76.36C165.99 74.75 163.82 72.48 162.29 69.55C160.77 66.6 160.01 63.11 160.01 59.08C160.01 55.16 160.77 51.71 162.29 48.74C163.82 45.78 165.97 43.46 168.73 41.81C171.52 40.15 174.78 39.32 178.53 39.32C181.05 39.32 183.39 39.73 185.56 40.54C187.75 41.33 189.65 42.54 191.28 44.14C192.92 45.75 194.2 47.77 195.11 50.21C196.02 52.63 196.47 55.46 196.47 58.71V61.62H164.23V55.06H186.51C186.51 53.53 186.17 52.18 185.51 51C184.85 49.83 183.93 48.91 182.75 48.25C181.59 47.57 180.24 47.23 178.7 47.23C177.09 47.23 175.67 47.6 174.43 48.34C173.2 49.07 172.24 50.06 171.54 51.3C170.85 52.53 170.49 53.9 170.47 55.4V61.64C170.47 63.53 170.82 65.17 171.52 66.54C172.23 67.92 173.23 68.98 174.52 69.72C175.82 70.47 177.35 70.84 179.12 70.84C180.3 70.84 181.38 70.68 182.35 70.34C183.33 70.01 184.17 69.52 184.87 68.85C185.56 68.19 186.09 67.38 186.46 66.42L196.25 67.06C195.75 69.42 194.73 71.47 193.19 73.23C191.67 74.97 189.7 76.33 187.28 77.3C184.87 78.27 182.1 78.75 178.95 78.75ZM223.69 39.82V47.77H200.7V39.82H223.69ZM205.92 30.67H216.51V66.27C216.51 67.24 216.66 68.01 216.96 68.55C217.26 69.08 217.67 69.46 218.2 69.67C218.75 69.89 219.38 70 220.09 70C220.59 70 221.08 69.95 221.58 69.87C222.08 69.77 222.46 69.7 222.72 69.65L224.39 77.53C223.86 77.69 223.11 77.88 222.15 78.1C221.19 78.33 220.02 78.47 218.65 78.52C216.1 78.62 213.86 78.28 211.94 77.5C210.03 76.72 208.55 75.51 207.49 73.87C206.43 72.23 205.9 70.16 205.92 67.66V30.67ZM230.59 78V39.82H241.18V78H230.59ZM235.91 34.9C234.34 34.9 232.99 34.37 231.86 33.33C230.75 32.27 230.19 31 230.19 29.53C230.19 28.07 230.75 26.82 231.86 25.77C232.99 24.71 234.34 24.18 235.91 24.18C237.49 24.18 238.83 24.71 239.94 25.77C241.07 26.82 241.63 28.07 241.63 29.53C241.63 31 241.07 32.27 239.94 33.33C238.83 34.37 237.49 34.9 235.91 34.9ZM266.92 78.75C263 78.75 259.64 77.92 256.82 76.26C254.02 74.59 251.87 72.27 250.36 69.3C248.87 66.33 248.12 62.92 248.12 59.06C248.12 55.15 248.88 51.72 250.38 48.77C251.91 45.8 254.07 43.49 256.87 41.83C259.67 40.16 263 39.32 266.87 39.32C270.2 39.32 273.11 39.93 275.62 41.14C278.12 42.35 280.1 44.04 281.56 46.23C283.01 48.42 283.82 50.99 283.97 53.94H273.97C273.69 52.03 272.95 50.5 271.74 49.34C270.54 48.16 268.98 47.57 267.04 47.57C265.4 47.57 263.96 48.02 262.74 48.92C261.53 49.79 260.58 51.08 259.9 52.77C259.23 54.46 258.89 56.51 258.89 58.91C258.89 61.35 259.22 63.42 259.88 65.12C260.56 66.83 261.51 68.13 262.74 69.03C263.96 69.92 265.4 70.37 267.04 70.37C268.25 70.37 269.33 70.12 270.3 69.62C271.27 69.13 272.08 68.4 272.71 67.46C273.35 66.5 273.78 65.35 273.97 64.01H283.97C283.8 66.92 283.01 69.49 281.58 71.71C280.17 73.92 278.23 75.64 275.74 76.88C273.25 78.12 270.31 78.75 266.92 78.75ZM301.34 27.09V78H290.75V27.09H301.34ZM327.22 78.75C323.29 78.75 319.91 77.95 317.08 76.36C314.26 74.75 312.09 72.48 310.57 69.55C309.04 66.6 308.28 63.11 308.28 59.08C308.28 55.16 309.04 51.71 310.57 48.74C312.09 45.78 314.24 43.46 317 41.81C319.79 40.15 323.05 39.32 326.8 39.32C329.32 39.32 331.66 39.73 333.83 40.54C336.02 41.33 337.93 42.54 339.55 44.14C341.19 45.75 342.47 47.77 343.38 50.21C344.29 52.63 344.75 55.46 344.75 58.71V61.62H312.5V55.06H334.78C334.78 53.53 334.45 52.18 333.78 51C333.12 49.83 332.2 48.91 331.02 48.25C329.86 47.57 328.51 47.23 326.97 47.23C325.36 47.23 323.94 47.6 322.7 48.34C321.47 49.07 320.51 50.06 319.81 51.3C319.12 52.53 318.76 53.9 318.74 55.4V61.64C318.74 63.53 319.09 65.17 319.79 66.54C320.5 67.92 321.5 68.98 322.8 69.72C324.09 70.47 325.62 70.84 327.39 70.84C328.57 70.84 329.65 70.68 330.63 70.34C331.6 70.01 332.44 69.52 333.14 68.85C333.83 68.19 334.36 67.38 334.73 66.42L344.52 67.06C344.02 69.42 343.01 71.47 341.46 73.23C339.94 74.97 337.97 76.33 335.55 77.3C333.15 78.27 330.37 78.75 327.22 78.75Z"/></svg>`;
+/** Compact text label beside the mark in the expanded toolbar. */
+export const BRAND_MINI_CLASS = 'reticle-brand-mini';
+/** Toolbar brand: mark + Reticle word (always shown together when expanded). */
+export const TOOLBAR_BRAND_HTML = `<span class="reticle-brand reticle-brand--toolbar">${MARK_SVG}<span class="${BRAND_MINI_CLASS}">${BRAND_NAME}</span><span class="reticle-brand-sr">${BRAND_NAME}</span></span>`;
 /**
  * Header brand block. Both marks are always in the DOM and CSS picks one off the collapsed
  * attribute, so there is no JS state to keep in sync. The artwork is decorative (aria-hidden);
  * the visually-hidden name is what keeps the HUD identifiable to a screen reader in BOTH states.
  */
-export const BRAND_HTML = `<span class="reticle-brand">${MARK_SVG}${WORDMARK_SVG}<span class="reticle-brand-sr">${BRAND_NAME}</span></span>`;
+export const BRAND_HTML = `<span class="reticle-brand">${MARK_SVG}${WORDMARK_SVG}<span class="${BRAND_MINI_CLASS}">${BRAND_NAME}</span><span class="reticle-brand-sr">${BRAND_NAME}</span></span>`;
+/** Collapsed FAB control - Reticle mark only. */
+export const FAB_TOGGLE_HTML = `<button type="button" class="reticle-fab" data-reticle-fab aria-label="Start ${BRAND_NAME}" aria-expanded="false">${FAB_MARK_SVG}<span class="reticle-fab-pulse" aria-hidden="true"></span><span data-reticle-mark-count class="reticle-fab-badge" hidden>0</span></button>`;

package/dist/presenter/presenter-config.d.ts

@@ -1,4 +1,4 @@
-import { type ControlHandler } from './presenter-controls.js';
+import type { ControlHandler } from './presenter-controls.js';
 /**
  * Presenter tunables + option surface. Split out of presenter.ts so that file is just the controller
  * under the size cap; these are pure declarations (interfaces + named constants), no behavior. None
@@ -7,7 +7,7 @@ import { type ControlHandler } from './presenter-controls.js';
 /**
  * Border behavior.
  * - 'session': base border persists connect→disconnect; the busy machine drives only the shimmer.
- * - 'busy': back-compat — the busy machine toggles the base border on/off.
+ * - 'busy': back-compat - the busy machine toggles the base border on/off.
  */
 export declare const BorderMode: {
     readonly SESSION: "session";
@@ -38,7 +38,7 @@ export interface PresenterOptions {
     narrationDwellMs?: number;
     /**
      * 'session' (default): base border persists connect→disconnect, busy machine drives only the
-     * shimmer. 'busy': back-compat — busy machine toggles the base border on/off.
+     * shimmer. 'busy': back-compat - busy machine toggles the base border on/off.
      */
     border?: BorderMode;
     /** Max accumulated activity-log rows before the oldest are pruned. Default 50. */
@@ -54,13 +54,13 @@ export declare const DEFAULT_PACE = 450;
  *
  * The HUD paces `beforeAct` so a person can see the cursor reach the element before it fires. In a
  * headless browser that is 450ms of nothing, charged to the agent, on every action. Measured with
- * RETICLE_TRACE across the e2e battery: 42 `act` round-trips, 40 of them in a 452–460ms band —
- * a fixed cost, not app work — 19.7 SECONDS in total, 98.5% of all time the battery spent in the
+ * RETICLE_TRACE across the e2e battery: 42 `act` round-trips, 40 of them in a 452–460ms band -
+ * a fixed cost, not app work - 19.7 SECONDS in total, 98.5% of all time the battery spent in the
  * browser, while every other command ran in 1–4ms.
  *
  * `navigator.webdriver` is the discriminator because it is exactly the question being asked: true
  * under automation (Playwright, CDP, the browser pool's leased tabs, CI), false in the dev browser
- * a human has open — the case the HUD exists for, which keeps its pacing untouched.
+ * a human has open - the case the HUD exists for, which keeps its pacing untouched.
  *
  * An EXPLICIT `paceMs` always wins: a recorded demo runs under automation and still wants the glide,
  * and an option that quietly ignores what the caller asked for is worse than no option.
@@ -69,7 +69,7 @@ export declare function effectivePaceMs(requested: number | undefined, nav?: Nav
 /**
  * Glow state machine phases (exposed via glowPhase for tests). A burst of activity flips the
  * border IN once on the first activity, holds steady (the slow reticle-pulse breathing keeps running
- * uninterrupted — no per-action restart/strobe), then fades OUT once after a quiet window.
+ * uninterrupted - no per-action restart/strobe), then fades OUT once after a quiet window.
  */
 export declare const GlowPhase: {
     readonly IDLE: "idle";
@@ -83,10 +83,17 @@ export declare const IDLE_AFTER_MS = 700;
 export declare const HEARTBEAT_MS = 1000;
 /**
  * After this much quiet, the act strip stops showing the last action and starts a LIVE, ticking
- * "◌ idle · {duration} since last action" — so a watcher can tell a 3s think from a dead agent
+ * "◌ idle · {duration} since last action" - so a watcher can tell a 3s think from a dead agent
  * (the killer gap: a frozen panel used to look identical whether the agent paused or stopped).
  */
 export declare const IDLE_NOTICE_MS = 4000;
+/** Act-strip copy (presenter-only UI). */
+export declare const ACT_STRIP: {
+    readonly READY: "Ready";
+    readonly IDLE_PREFIX: "idle · ";
+    readonly NOW: "now";
+    readonly SINCE_LAST: " since last action";
+};
 /** Default session-idle-end: after this much quiet the session auto-ends (glow off, panel persists
  * for analysis). Agent-tweakable via reticle_session { idleEndMs } for the app's needs. */
 export declare const IDLE_END_MS = 300000;
@@ -97,6 +104,92 @@ export declare const GLOW_FADE_MS = 250;
 export declare const GLOW_ON = "1";
 export declare const GLOW_OFF = "0";
 export declare const DATA_ON = "data-on";
-/** Overlay-root attribute toggled when the panel is minimised to a bar. */
+/** Overlay-root attribute toggled when the HUD is collapsed to the FAB. */
 export declare const MIN_ATTR = "data-reticle-min";
+/** Overlay-root attribute toggled when the agent chat panel is open. */
+export declare const CHAT_ATTR = "data-reticle-chat";
+/** Fixed dock wrapper that stacks chat above the morphing HUD shell. */
+export declare const DOCK_ATTR = "data-reticle-dock";
+/** Collapsed circular control that expands the toolbar. */
+export declare const FAB_ATTR = "data-reticle-fab";
+/** Toolbar chat toggle button. */
+export declare const CHAT_TOGGLE_ATTR = "data-reticle-chat-toggle";
+/** Agent chat panel anchored to the dock. */
+export declare const CHAT_PANEL_ATTR = "data-reticle-chat-panel";
+/** Chat panel opens above or below the HUD bar depending on viewport space. */
+export declare const CHAT_PLACEMENT_ATTR = "data-reticle-chat-placement";
+/** Settings card opens above or below the HUD bar depending on viewport space. */
+export declare const SETTINGS_PLACEMENT_ATTR = "data-reticle-settings-placement";
+/** Horizontal alignment of dock-anchored panels (start = left, end = right). */
+export declare const DOCK_ALIGN_ATTR = "data-reticle-dock-align";
+export declare const Placement: {
+    readonly ABOVE: "above";
+    readonly BELOW: "below";
+};
+export declare const DockAlign: {
+    readonly START: "start";
+    readonly END: "end";
+};
+/** Show/hide annotation markers. */
+export declare const MARKERS_BTN_ATTR = "data-reticle-markers-btn";
+/** Clear every annotation on the page. */
+export declare const CLEAR_MARKS_ATTR = "data-reticle-clear-marks";
+/** Collapsed FAB annotation-count badge. */
+export declare const MARK_COUNT_ATTR = "data-reticle-mark-count";
+/**
+ * Turn annotation on and off from the toolbar.
+ *
+ * Annotation used to be reachable only as a side effect of expanding the HUD, which meant there was
+ * no way to keep the HUD open and stop annotating, and nothing on screen said the mode existed at
+ * all. It is a mode the user chooses, so it gets a control they can see and press.
+ */
+export declare const ANNOTATE_BTN_ATTR = "data-reticle-annotate-btn";
+/** Minimise the agent chat back to the toolbar, without collapsing the whole HUD. */
+export declare const CHAT_MIN_ATTR = "data-reticle-chat-min";
+/** Overlay flag: is the impact report on screen. */
+export declare const REPORT_ATTR = "data-reticle-report";
+/** The report panel itself. */
+export declare const REPORT_PANEL_ATTR = "data-reticle-report-panel";
+/** The report's close button. */
+export declare const REPORT_CLOSE_ATTR = "data-reticle-report-close";
+/** The toolbar button that opens the report. */
+export declare const REPORT_BTN_ATTR = "data-reticle-report-btn";
+/** The capsule that stands in for the chat while it is minimised - state dot + last action. */
+export declare const CHAT_PILL_ATTR = "data-reticle-chat-pill";
+/** Settings gear is open - the card sits above the dock. */
+export declare const SETTINGS_ATTR = "data-reticle-settings";
+export declare const SETTINGS_BTN_ATTR = "data-reticle-settings-btn";
+export declare const SETTINGS_PANEL_ATTR = "data-reticle-settings-panel";
+export declare const SETTINGS_CLOSE_ATTR = "data-reticle-settings-close";
+export declare const SETTING_KEY_ATTR = "data-reticle-setting";
+export declare const SETTINGS_STORAGE_KEY = "reticle-presenter-settings";
+/** Accent swatch applied to the dock chrome. */
+/** Overlay flag: is the page-edge glow wanted at all (user setting). */
+export declare const AMBIENT_GLOW_ATTR = "data-reticle-ambient-glow";
+/** Overlay mirror of the activity strip's liveness, so CSS can pick the ACTIVE status colour. */
+export declare const LIVENESS_ATTR = "data-reticle-live";
+/** When 1, a transparent blocker captures page pointer events. */
+export declare const BLOCK_ATTR = "data-reticle-block";
+/** When 1, the dock is hidden until the page reloads. */
+export declare const HIDDEN_UNTIL_RESTART_ATTR = "data-reticle-hidden";
+/** When 0, activity-log timestamps are hidden. */
+export declare const LOG_TIMESTAMPS_ATTR = "data-reticle-log-ts";
+/** When 1, the chat panel uses a narrower width. */
+/** When 1, HUD motion is reduced for accessibility. */
+export declare const REDUCE_MOTION_ATTR = "data-reticle-reduce-motion";
+/** Presenter settings card version label (browser package). */
+export declare const PRESENTER_UI_VERSION = "2.7.0";
+/** Docs opened from the settings footer. */
+export declare const MCP_DOCS_URL = "https://github.com/reticlehq/reticle/blob/main/docs/getting-started.md";
+/** HUD has been dragged off the default dock - positioned with explicit left/top. */
+export declare const HUD_DRAGGED_ATTR = "data-dragged";
+/** CSS custom properties written when the HUD is dragged. */
+export declare const HUD_POS_X_VAR = "--reticle-hud-x";
+export declare const HUD_POS_Y_VAR = "--reticle-hud-y";
+/** Pointer movement below this threshold is treated as a click, not a drag. */
+export declare const HUD_DRAG_THRESHOLD_PX = 4;
+/** Minimum gap between a dragged HUD and the viewport edge. */
+export declare const HUD_DOCK_MARGIN_PX = 8;
+/** Interactive nodes inside the drag handle that must not start a drag (not the FAB itself). */
+export declare const HUD_DRAG_IGNORE_SEL = "[data-reticle-pause], [data-reticle-annotate-btn], [data-reticle-markers-btn], [data-reticle-clear-marks], [data-reticle-end], [data-reticle-min-btn], [data-reticle-settings-btn], [data-reticle-settings-panel], [data-reticle-report-btn], [data-reticle-report-panel], [data-reticle-chat-panel], [data-reticle-chat-toggle], [data-reticle-workspace-btn], [data-reticle-workspace-menu], [data-reticle-copy], [data-reticle-export], [data-reticle-send], input, textarea, select, a, .reticle-head-ctl, [data-reticle-tally], .reticle-maxhint";
 export declare const THROTTLED_ATTR = "data-reticle-throttled";

package/dist/presenter/presenter-config.js

@@ -1,4 +1,3 @@
-import {} from './presenter-controls.js';
 /**
  * Presenter tunables + option surface. Split out of presenter.ts so that file is just the controller
  * under the size cap; these are pure declarations (interfaces + named constants), no behavior. None
@@ -7,7 +6,7 @@ import {} from './presenter-controls.js';
 /**
  * Border behavior.
  * - 'session': base border persists connect→disconnect; the busy machine drives only the shimmer.
- * - 'busy': back-compat — the busy machine toggles the base border on/off.
+ * - 'busy': back-compat - the busy machine toggles the base border on/off.
  */
 export const BorderMode = { SESSION: 'session', BUSY: 'busy' };
 export const DEFAULT_BORDER_MODE = BorderMode.SESSION;
@@ -20,13 +19,13 @@ export const DEFAULT_PACE = 450;
  *
  * The HUD paces `beforeAct` so a person can see the cursor reach the element before it fires. In a
  * headless browser that is 450ms of nothing, charged to the agent, on every action. Measured with
- * RETICLE_TRACE across the e2e battery: 42 `act` round-trips, 40 of them in a 452–460ms band —
- * a fixed cost, not app work — 19.7 SECONDS in total, 98.5% of all time the battery spent in the
+ * RETICLE_TRACE across the e2e battery: 42 `act` round-trips, 40 of them in a 452–460ms band -
+ * a fixed cost, not app work - 19.7 SECONDS in total, 98.5% of all time the battery spent in the
  * browser, while every other command ran in 1–4ms.
  *
  * `navigator.webdriver` is the discriminator because it is exactly the question being asked: true
  * under automation (Playwright, CDP, the browser pool's leased tabs, CI), false in the dev browser
- * a human has open — the case the HUD exists for, which keeps its pacing untouched.
+ * a human has open - the case the HUD exists for, which keeps its pacing untouched.
  *
  * An EXPLICIT `paceMs` always wins: a recorded demo runs under automation and still wants the glide,
  * and an option that quietly ignores what the caller asked for is worse than no option.
@@ -39,7 +38,7 @@ export function effectivePaceMs(requested, nav = 'undefined' === typeof navigato
 /**
  * Glow state machine phases (exposed via glowPhase for tests). A burst of activity flips the
  * border IN once on the first activity, holds steady (the slow reticle-pulse breathing keeps running
- * uninterrupted — no per-action restart/strobe), then fades OUT once after a quiet window.
+ * uninterrupted - no per-action restart/strobe), then fades OUT once after a quiet window.
  */
 export const GlowPhase = {
     IDLE: 'idle',
@@ -52,10 +51,17 @@ export const IDLE_AFTER_MS = 700;
 export const HEARTBEAT_MS = 1000;
 /**
  * After this much quiet, the act strip stops showing the last action and starts a LIVE, ticking
- * "◌ idle · {duration} since last action" — so a watcher can tell a 3s think from a dead agent
+ * "◌ idle · {duration} since last action" - so a watcher can tell a 3s think from a dead agent
  * (the killer gap: a frozen panel used to look identical whether the agent paused or stopped).
  */
 export const IDLE_NOTICE_MS = 4000;
+/** Act-strip copy (presenter-only UI). */
+export const ACT_STRIP = {
+    READY: 'Ready',
+    IDLE_PREFIX: 'idle · ',
+    NOW: 'now',
+    SINCE_LAST: ' since last action',
+};
 /** Default session-idle-end: after this much quiet the session auto-ends (glow off, panel persists
  * for analysis). Agent-tweakable via reticle_session { idleEndMs } for the app's needs. */
 export const IDLE_END_MS = 300_000;
@@ -66,6 +72,86 @@ export const GLOW_FADE_MS = 250;
 export const GLOW_ON = '1';
 export const GLOW_OFF = '0';
 export const DATA_ON = 'data-on';
-/** Overlay-root attribute toggled when the panel is minimised to a bar. */
+/** Overlay-root attribute toggled when the HUD is collapsed to the FAB. */
 export const MIN_ATTR = 'data-reticle-min';
+/** Overlay-root attribute toggled when the agent chat panel is open. */
+export const CHAT_ATTR = 'data-reticle-chat';
+/** Fixed dock wrapper that stacks chat above the morphing HUD shell. */
+export const DOCK_ATTR = 'data-reticle-dock';
+/** Collapsed circular control that expands the toolbar. */
+export const FAB_ATTR = 'data-reticle-fab';
+/** Toolbar chat toggle button. */
+export const CHAT_TOGGLE_ATTR = 'data-reticle-chat-toggle';
+/** Agent chat panel anchored to the dock. */
+export const CHAT_PANEL_ATTR = 'data-reticle-chat-panel';
+/** Chat panel opens above or below the HUD bar depending on viewport space. */
+export const CHAT_PLACEMENT_ATTR = 'data-reticle-chat-placement';
+/** Settings card opens above or below the HUD bar depending on viewport space. */
+export const SETTINGS_PLACEMENT_ATTR = 'data-reticle-settings-placement';
+/** Horizontal alignment of dock-anchored panels (start = left, end = right). */
+export const DOCK_ALIGN_ATTR = 'data-reticle-dock-align';
+export const Placement = { ABOVE: 'above', BELOW: 'below' };
+export const DockAlign = { START: 'start', END: 'end' };
+/** Show/hide annotation markers. */
+export const MARKERS_BTN_ATTR = 'data-reticle-markers-btn';
+/** Clear every annotation on the page. */
+export const CLEAR_MARKS_ATTR = 'data-reticle-clear-marks';
+/** Collapsed FAB annotation-count badge. */
+export const MARK_COUNT_ATTR = 'data-reticle-mark-count';
+/**
+ * Turn annotation on and off from the toolbar.
+ *
+ * Annotation used to be reachable only as a side effect of expanding the HUD, which meant there was
+ * no way to keep the HUD open and stop annotating, and nothing on screen said the mode existed at
+ * all. It is a mode the user chooses, so it gets a control they can see and press.
+ */
+export const ANNOTATE_BTN_ATTR = 'data-reticle-annotate-btn';
+/** Minimise the agent chat back to the toolbar, without collapsing the whole HUD. */
+export const CHAT_MIN_ATTR = 'data-reticle-chat-min';
+/** Overlay flag: is the impact report on screen. */
+export const REPORT_ATTR = 'data-reticle-report';
+/** The report panel itself. */
+export const REPORT_PANEL_ATTR = 'data-reticle-report-panel';
+/** The report's close button. */
+export const REPORT_CLOSE_ATTR = 'data-reticle-report-close';
+/** The toolbar button that opens the report. */
+export const REPORT_BTN_ATTR = 'data-reticle-report-btn';
+/** The capsule that stands in for the chat while it is minimised - state dot + last action. */
+export const CHAT_PILL_ATTR = 'data-reticle-chat-pill';
+/** Settings gear is open - the card sits above the dock. */
+export const SETTINGS_ATTR = 'data-reticle-settings';
+export const SETTINGS_BTN_ATTR = 'data-reticle-settings-btn';
+export const SETTINGS_PANEL_ATTR = 'data-reticle-settings-panel';
+export const SETTINGS_CLOSE_ATTR = 'data-reticle-settings-close';
+export const SETTING_KEY_ATTR = 'data-reticle-setting';
+export const SETTINGS_STORAGE_KEY = 'reticle-presenter-settings';
+/** Accent swatch applied to the dock chrome. */
+/** Overlay flag: is the page-edge glow wanted at all (user setting). */
+export const AMBIENT_GLOW_ATTR = 'data-reticle-ambient-glow';
+/** Overlay mirror of the activity strip's liveness, so CSS can pick the ACTIVE status colour. */
+export const LIVENESS_ATTR = 'data-reticle-live';
+/** When 1, a transparent blocker captures page pointer events. */
+export const BLOCK_ATTR = 'data-reticle-block';
+/** When 1, the dock is hidden until the page reloads. */
+export const HIDDEN_UNTIL_RESTART_ATTR = 'data-reticle-hidden';
+/** When 0, activity-log timestamps are hidden. */
+export const LOG_TIMESTAMPS_ATTR = 'data-reticle-log-ts';
+/** When 1, the chat panel uses a narrower width. */
+/** When 1, HUD motion is reduced for accessibility. */
+export const REDUCE_MOTION_ATTR = 'data-reticle-reduce-motion';
+/** Presenter settings card version label (browser package). */
+export const PRESENTER_UI_VERSION = '2.7.0';
+/** Docs opened from the settings footer. */
+export const MCP_DOCS_URL = 'https://github.com/reticlehq/reticle/blob/main/docs/getting-started.md';
+/** HUD has been dragged off the default dock - positioned with explicit left/top. */
+export const HUD_DRAGGED_ATTR = 'data-dragged';
+/** CSS custom properties written when the HUD is dragged. */
+export const HUD_POS_X_VAR = '--reticle-hud-x';
+export const HUD_POS_Y_VAR = '--reticle-hud-y';
+/** Pointer movement below this threshold is treated as a click, not a drag. */
+export const HUD_DRAG_THRESHOLD_PX = 4;
+/** Minimum gap between a dragged HUD and the viewport edge. */
+export const HUD_DOCK_MARGIN_PX = 8;
+/** Interactive nodes inside the drag handle that must not start a drag (not the FAB itself). */
+export const HUD_DRAG_IGNORE_SEL = '[data-reticle-pause], [data-reticle-annotate-btn], [data-reticle-markers-btn], [data-reticle-clear-marks], [data-reticle-end], [data-reticle-min-btn], [data-reticle-settings-btn], [data-reticle-settings-panel], [data-reticle-report-btn], [data-reticle-report-panel], [data-reticle-chat-panel], [data-reticle-chat-toggle], [data-reticle-workspace-btn], [data-reticle-workspace-menu], [data-reticle-copy], [data-reticle-export], [data-reticle-send], input, textarea, select, a, .reticle-head-ctl, [data-reticle-tally], .reticle-maxhint';
 export const THROTTLED_ATTR = 'data-reticle-throttled';

package/dist/presenter/presenter-controls.d.ts

@@ -1,4 +1,5 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
+export declare const PAUSED_BADGE_LABEL = "PAUSED";
 /** Border fade-out delay after a session ends (native timer; presenter-only tunable). */
 export declare const ENDED_FADE_MS = 4000;
 /** Payload the panel hands to its host when the human drives a control. */
@@ -8,25 +9,24 @@ export interface ControlIntent {
 }
 export type ControlHandler = (intent: ControlIntent) => void;
 /** CSS for the control surface (injected with the rest of the presenter stylesheet). */
-export declare const CONTROLS_CSS = "\n[data-reticle-hud] .reticle-ctl{pointer-events:auto;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;\n  height:26px;padding:0 11px;border-radius:8px;border:1px solid var(--reticle-line);background:rgba(255,255,255,.04);\n  color:var(--reticle-muted);font-family:var(--reticle-font);font-size:11px;font-weight:500;letter-spacing:.01em;line-height:1;\n  transition:background .15s,color .15s,border-color .15s,transform .1s;}\n[data-reticle-hud] .reticle-ctl:hover{color:var(--reticle-fg);background:rgba(255,255,255,.09);}\n[data-reticle-hud] .reticle-ctl:active{transform:scale(.95);}\n[data-reticle-hud] .reticle-ctl:disabled{opacity:.35;cursor:default;}\n[data-reticle-hud] [data-reticle-end]{color:#ff9aa2;border-color:rgba(255,107,107,.22);}\n[data-reticle-hud] [data-reticle-end]:hover{color:#ff7a7a;border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.1);}\n[data-reticle-hud] .reticle-badge{display:none;align-items:center;flex:none;font-weight:600;letter-spacing:.1em;font-size:9px;\n  color:var(--reticle-accent);border:1px solid var(--reticle-accent);background:var(--reticle-accent-soft);padding:2px 8px;border-radius:999px;}\n[data-reticle-overlay][data-reticle-state=\"paused\"] [data-reticle-badge]{display:inline-flex;}\n[data-reticle-hud] [data-reticle-foot]{flex:none;padding:10px 12px 12px;border-top:1px solid var(--reticle-line2);background:rgba(0,0,0,.16);}\n[data-reticle-hud] .reticle-composer{display:flex;align-items:flex-end;gap:6px;background:rgba(255,255,255,.05);\n  border:1px solid var(--reticle-line);border-radius:14px;padding:5px 6px 5px 14px;transition:border-color .15s,box-shadow .15s;}\n[data-reticle-hud] .reticle-composer:focus-within{border-color:var(--reticle-accent);box-shadow:0 0 0 3px var(--reticle-accent-soft);}\n[data-reticle-hud] .reticle-msg{flex:1;min-width:0;pointer-events:auto;background:transparent;border:none;outline:none;resize:none;\n  box-sizing:border-box;color:var(--reticle-fg);font-family:var(--reticle-font);font-size:13px;line-height:18px;\n  height:28px;min-height:28px;max-height:96px;padding:5px 0;overflow-y:auto;\n  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;}\n[data-reticle-hud] .reticle-msg::-webkit-scrollbar{width:9px;}\n[data-reticle-hud] .reticle-msg::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;border:2px solid transparent;background-clip:content-box;}\n[data-reticle-hud] .reticle-msg::placeholder{color:var(--reticle-faint);}\n[data-reticle-hud] .reticle-msg:disabled{opacity:.5;}\n[data-reticle-hud] .reticle-send{flex:none;width:30px;height:30px;padding:0;border-radius:10px;border:none;cursor:pointer;pointer-events:auto;\n  background:var(--reticle-accent);color:#0b0d14;display:inline-flex;align-items:center;justify-content:center;transition:filter .15s,transform .1s;}\n[data-reticle-hud] .reticle-send svg{display:block;}\n[data-reticle-hud] .reticle-send:hover{filter:brightness(1.12);}\n[data-reticle-hud] .reticle-send:active{transform:scale(.9);}\n[data-reticle-hud] .reticle-send:disabled{opacity:.4;cursor:default;}\n[data-reticle-hud] .reticle-banner{display:none;flex:none;padding:8px 15px;color:var(--reticle-accent);\n  font-size:11.5px;font-weight:500;border-bottom:1px solid var(--reticle-line2);background:var(--reticle-accent-soft);}\n[data-reticle-overlay][data-reticle-state=\"ended\"] [data-reticle-banner]{display:block;}\n/* Export row: hidden during a live session; revealed when ended so the run can be copied/saved. */\n[data-reticle-hud] .reticle-export{display:none;align-items:center;gap:8px;margin-top:9px;}\n[data-reticle-overlay][data-reticle-state=\"ended\"] [data-reticle-hud] .reticle-export{display:flex;}\n[data-reticle-hud] .reticle-export-msg{color:var(--reticle-ok);font-size:11px;opacity:0;transition:opacity .15s;}\n[data-reticle-hud] .reticle-export-msg[data-show=\"1\"]{opacity:1;}\n[data-reticle-overlay][data-reticle-state=\"paused\"] [data-reticle-glow][data-on=\"1\"]{animation:none;\n  box-shadow:inset 0 0 0 3px rgba(246,180,76,.9),inset 0 0 30px 6px rgba(246,180,76,.4);}\n[data-reticle-overlay][data-reticle-state=\"ended\"] [data-reticle-glow][data-on=\"1\"]{animation:none;\n  box-shadow:inset 0 0 0 2px rgba(61,215,166,.55);}\n/* Handoff tones tell the human the agent's mode at a glance. waiting = calm teal \"your turn\" (no\n   alarm); ask = amber \"answer me\" with a pulse; warn = amber \"agent crashed\" with a pulse. Each leads\n   the banner with an icon and overrides the calm ended-green accent. */\n[data-reticle-overlay][data-reticle-tone=\"waiting\"] [data-reticle-hud]{--reticle-accent:#38bdf8;--reticle-accent-soft:rgba(56,189,248,.16);}\n[data-reticle-overlay][data-reticle-tone=\"waiting\"] [data-reticle-banner]{font-weight:600;color:#7dd3fc;}\n[data-reticle-overlay][data-reticle-tone=\"waiting\"] [data-reticle-banner]::before{content:\"\\270B  \";}\n[data-reticle-overlay][data-reticle-tone=\"waiting\"] [data-reticle-glow][data-on=\"1\"]{animation:none;\n  box-shadow:inset 0 0 0 2px rgba(56,189,248,.5);}\n[data-reticle-overlay][data-reticle-tone=\"ask\"] [data-reticle-hud],\n[data-reticle-overlay][data-reticle-tone=\"warn\"] [data-reticle-hud]{--reticle-accent:#fb923c;--reticle-accent-soft:rgba(251,146,60,.18);}\n[data-reticle-overlay][data-reticle-tone=\"ask\"] [data-reticle-banner],\n[data-reticle-overlay][data-reticle-tone=\"warn\"] [data-reticle-banner]{font-weight:600;color:#fdba74;}\n[data-reticle-overlay][data-reticle-tone=\"ask\"] [data-reticle-banner]::before{content:\"\\2753  \";}\n[data-reticle-overlay][data-reticle-tone=\"warn\"] [data-reticle-banner]::before{content:\"\\26A0\\FE0F  \";}\n[data-reticle-overlay][data-reticle-tone=\"ask\"] [data-reticle-glow][data-on=\"1\"],\n[data-reticle-overlay][data-reticle-tone=\"warn\"] [data-reticle-glow][data-on=\"1\"]{animation:reticle-warn-pulse 1.5s ease-in-out infinite;\n  box-shadow:inset 0 0 0 2px rgba(251,146,60,.7);}\n@keyframes reticle-warn-pulse{0%,100%{box-shadow:inset 0 0 0 2px rgba(251,146,60,.32);}\n  50%{box-shadow:inset 0 0 0 3px rgba(251,146,60,.85),inset 0 0 26px 5px rgba(251,146,60,.34);}}\n/* Replay-a-flow row: the human re-runs a saved flow with no agent. Hidden until flows are pushed.\n   Bounded + self-scrolling: it sits between the flex:1 log and the flex:none composer, so without a\n   height cap a long flow list would squeeze the log to nothing and push the message input past the\n   panel's overflow:hidden clip. flex:none + max-height + overflow-y keep the log and input always\n   visible; extra flow chips scroll inside this section instead of growing the panel. */\n[data-reticle-hud] .reticle-flows{display:none;flex:none;flex-wrap:wrap;align-content:flex-start;gap:6px;\n  padding:9px 12px;border-top:1px solid var(--reticle-line2);max-height:88px;overflow-y:auto;overscroll-behavior:contain;}\n[data-reticle-hud] .reticle-flows[data-has=\"1\"]{display:flex;}\n[data-reticle-hud] .reticle-flows::-webkit-scrollbar{width:9px;}\n[data-reticle-hud] .reticle-flows::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;border:2px solid transparent;background-clip:content-box;}\n[data-reticle-hud] .reticle-flows-cap{flex:0 0 100%;margin-bottom:1px;color:var(--reticle-faint);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;}\n[data-reticle-hud] .reticle-flow{pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;\n  border-radius:7px;border:1px solid var(--reticle-line);background:rgba(255,255,255,.04);color:var(--reticle-muted);\n  font-family:var(--reticle-font);font-size:11px;font-weight:500;transition:background .15s,color .15s,border-color .15s,transform .1s;}\n[data-reticle-hud] .reticle-flow:hover{color:var(--reticle-fg);background:var(--reticle-accent-soft);border-color:var(--reticle-accent);}\n[data-reticle-hud] .reticle-flow:active{transform:scale(.95);}\n";
-/** Header markup (controls + badge) injected into .reticle-hud-head, after the expand button. */
+export declare const CONTROLS_CSS: string;
+/** Icon toolbar: pause, chat, markers, end, clear - copy/export appear after a run ends. */
+export declare const CONTROLS_TOOLBAR_HTML: string;
+/** @deprecated Legacy head markup - replaced by CONTROLS_TOOLBAR_HTML in the morphing shell. */
 export declare const CONTROLS_HEAD_HTML: string;
 /** Banner markup (between head and log, hidden unless ended). */
 export declare const CONTROLS_BANNER_HTML = "<div data-reticle-banner class=\"reticle-banner\">Session ended</div>";
 /** Replay-a-flow row (between log and footer); buttons are filled in by setFlows once flows arrive. */
 export declare const CONTROLS_FLOWS_HTML = "<div data-reticle-flows class=\"reticle-flows\"><span class=\"reticle-flows-cap\">Replay a flow</span></div>";
-/** Footer markup: a rounded composer pill (input + icon Send), appended after the log div. */
+/** Footer markup: composer only (export icons live in the toolbar). */
 export declare const CONTROLS_FOOT_HTML: string;
-/** Host hooks the panel needs from the Presenter (the control callback + activity-log appender). */
 interface ControlPanelHost {
-    /** Emit a control to the host (onControl). The ONLY emit path — server pushes never call this. */
     emit: (kind: HumanControlKind, text?: string) => void;
-    /** Append a local 🧑 row when the human sends a message. */
     logHuman: (text: string) => void;
-    /** Injected ended-border fade delay (native timer). */
     endedFadeMs: number;
-    /** The exported run state for the Copy/Export buttons (serialized to JSON). */
     runState: () => unknown;
+    clearRunLog?: () => void;
+    onStateChange?: (state: SessionState) => void;
 }
 /**
  * The live-control panel: owns the control element refs, the SessionState, the ended-fade timer,
@@ -48,13 +48,13 @@ export declare class ControlPanel {
     /**
      * Re-render the replay chips for the CURRENT page. A flow "starts here" iff its first step's anchor
      * (a testid `start` hint) is present in the live DOM; flows with no start hint (signal/role-first,
-     * un-checkable) always show. Called on connect and on every route change so the list tracks the page —
+     * un-checkable) always show. Called on connect and on every route change so the list tracks the page -
      * so you never see (or click) a flow that can't replay from where you are. Existing flows benefit
      * without re-recording, since the hint is derived from the first step, not stored on the flow.
      */
     refilterFlows(): void;
     /**
-     * Drive the panel's visual state. Idempotent; NEVER emits a control — the shared path for both the
+     * Drive the panel's visual state. Idempotent; NEVER emits a control - the shared path for both the
      * optimistic local click and the authoritative server PRESENTER echo. Only the ended-border fade
      * touches a clock, via the injected native timer.
      */