/**
 * The Record panel's CSS and markup, composed into `shell-page.ts`.
 *
 * Split out the way `publish-panel.ts` is: style and markup carry no closure state, so they can
 * leave the busiest file in the package; the panel's behaviour stays inline there, because it
 * needs `readPref`/`writePref`, `postFlat` and the enclosing IIFE's element lookups.
 *
 * What this surface is for: the engine's F9 recorder runs in every project the CLI scaffolds, and
 * the Creator gives it a settings surface (mode + resolution) in its Dev Tools tab. This panel is
 * that surface for `bitmagic dev` — the same two modes, the same six resolutions, the same F9
 * hint — plus the one thing only this lane needs to say: when the project's vendored engine
 * predates streaming frames to the sidecar, name `bitmagic upgrade` instead of letting F9 look
 * broken.
 *
 * Same template-literal rules as its host: **no backticks**, and a backslash in a regex has to be
 * doubled to survive the literal. Every colour is a `--bm-*` token; `shell-page.test.ts` fails the
 * build on a hex that is not black or white.
 */
/**
 * Styles for `#record-overlay`, appended to the shell's stylesheet.
 *
 * The backdrop, the card, the select and the pills come from `design.ts` (`.bm-overlay`,
 * `.bm-dialog`, `.bm-input`, `.bm-pill`); only this dialog's own layout lives here.
 */
export declare const RECORDING_PANEL_CSS = "\n  /* Level with #hq-overlay and #publish-overlay: each is opened from its own control and they\n     never stack. */\n  #record-overlay { z-index: 10; }\n  #record-dialog { width: min(440px, 92vw); padding: 20px; }\n  #record-dialog .bm-label { display: block; margin: 16px 0 8px; }\n  .record-choice { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px;\n                   cursor: pointer; }\n  .record-choice input { accent-color: var(--bm-aqua); }\n  #record-resolution { width: 100%; }\n  /* The one line a creator must know \u2014 the feature has no button, only the key. */\n  #record-hint { margin: 16px 0 0; font-size: 13px; color: var(--bm-text); }\n  .record-note { display: none; margin: 6px 0 0; font-size: 12px; color: var(--bm-text-muted); }\n  .record-note.show { display: block; }\n  #record-note-path { font-family: var(--bm-font-mono); }\n  #record-upgrade { display: none; margin: 14px 0 0; padding: 8px 10px; border-radius: 6px;\n                    background: var(--bm-tint-warning); font-size: 12px; color: var(--bm-text); }\n  #record-upgrade.show { display: block; }\n  /* Same treatment the banners give a command name \u2014 the path note above this is already mono,\n     and two different monospace faces in one card is the tell that one of them is the UA default. */\n  #record-upgrade code { font-family: var(--bm-font-mono); }\n  #record-actions { display: flex; justify-content: flex-end; margin-top: 18px; }\n";
/**
 * Markup for the Record dialog.
 *
 * The mode labels and the six resolutions are the Creator's own
 * (`creator/src/vue/components/tools/DevToolsPanel.vue`), verbatim — one recording feature, two
 * hosts, no drift in what a creator is offered.
 */
/** The six resolutions the panel offers — the Creator's list, and what `?rec=` on the shell accepts. */
export declare const RECORDING_RESOLUTIONS: readonly string[];
export declare const RECORDING_PANEL_HTML = "  <div id=\"record-overlay\" class=\"bm-overlay\">\n    <div id=\"record-dialog\" class=\"bm-dialog\">\n      <h2>Record gameplay</h2>\n      <span class=\"bm-label\">Recording mode</span>\n      <label class=\"record-choice\">\n        <input type=\"radio\" name=\"record-mode\" value=\"frames\"> 60 fps frame by frame\n      </label>\n      <label class=\"record-choice\">\n        <input type=\"radio\" name=\"record-mode\" value=\"video\"> Video capture (real-time)\n      </label>\n      <label class=\"bm-label\" for=\"record-resolution\">Resolution</label>\n      <select id=\"record-resolution\" class=\"bm-input\">\n        <option value=\"1920x1080\">1920x1080 (Full HD)</option>\n        <option value=\"1280x720\">1280x720 (HD)</option>\n        <option value=\"3840x2160\">3840x2160 (4K)</option>\n        <option value=\"1080x1920\">1080x1920 (Vertical Full HD)</option>\n        <option value=\"720x1280\">720x1280 (Vertical HD)</option>\n        <option value=\"2160x3840\">2160x3840 (Vertical 4K)</option>\n      </select>\n      <p id=\"record-hint\">Press F9 in the game to start and stop recording.</p>\n      <p id=\"record-frames-note\" class=\"record-note\">Frames and a timeline land in\n        <span id=\"record-note-path\">.bitmagic/trailer/recordings/gameplay_recording_&hellip;/</span> in this\n        project, ready for <code>bitmagic trailer make</code>.</p>\n      <p id=\"record-video-note\" class=\"record-note\">The capture downloads in your browser as a\n        .webm file.</p>\n      <div id=\"record-upgrade\">This project's engine predates saving frames to disk from here.\n        Run <code>bitmagic upgrade</code>, then reload.</div>\n      <div id=\"record-actions\">\n        <button id=\"record-close\" class=\"bm-pill bm-pill--primary\" type=\"button\">Done</button>\n      </div>\n    </div>\n  </div>\n";