/**
 * The asset overlay's CSS and markup, composed into `shell-page.ts`.
 *
 * Split out for one reason: that file is the busiest in the package — it grew past 1400 lines and
 * two sessions have added panel features to it in a day. Its style and its markup are the parts
 * that carry no closure state, so they can leave without threading anything across a boundary. The
 * overlay's behaviour stays inline there, because it needs `postFlat`, `await_`, `loaded`,
 * `gameState` and `GAME_URL` from the enclosing IIFE.
 *
 * Same template-literal rules as its host: **no backticks**, and a backslash in a regex has to be
 * doubled to survive the literal.
 */
/**
 * Styles for `#asset-overlay`, appended to the shell's stylesheet.
 *
 * The surface, the pills and the modal backdrop come from `design.ts` (`.bm-overlay`,
 * `.bm-dialog`, `.bm-pill`); only what is specific to this dialog's layout lives here.
 */
export declare const ASSET_DETAIL_CSS = "\n  /* Above #hq-overlay, which sits at 10 \u2014 a preview opened from a row must cover it. */\n  #asset-overlay { z-index: 11; }\n  #asset-dialog { display: flex; width: min(1100px, 94vw); height: min(760px, 88vh);\n                  overflow: hidden; }\n  /* The viewer takes the room. Everything else is a caption. The near-black ground is the\n     brand's: a creation is the only thing on this surface that carries colour. */\n  #asset-view { flex: 1; min-width: 0; position: relative; background: var(--bm-bg); }\n  #asset-view iframe { display: block; width: 100%; height: 100%; border: 0; }\n  #asset-view img { display: block; width: 100%; height: 100%; object-fit: contain;\n                    background: var(--bm-bg); }\n  #asset-view audio { position: absolute; left: 50%; top: 50%; width: min(420px, 80%);\n                      transform: translate(-50%, -50%); }\n  /* Fitted rather than filled, like the image rule above: a generated clip is 16:9 by default but\n     follows its first frame when one was given, so the dialog cannot assume a shape. */\n  #asset-view video { display: block; width: 100%; height: 100%; object-fit: contain;\n                      background: var(--bm-bg); }\n  /* A note here is always a failure or a wait that has gone on too long \u2014 the negative accent. */\n  #asset-note { position: absolute; inset: auto 0 0 0; padding: 10px 12px;\n                background: var(--bm-scrim); color: var(--bm-pink-hover); font-size: 12px; }\n  #asset-note.hidden, #asset-view > .hidden { display: none; }\n  /* Wide enough for the action pills to sit on one row (wrapping to two once Edit voxels shows):\n     uppercase tracked labels are wider than the sentence-case ones this panel used to have. */\n  #asset-meta { width: 360px; flex: none; padding: 16px; overflow-y: auto;\n                border-left: 1px solid var(--bm-border-muted); }\n  #asset-meta h2 { margin: 0 0 4px; word-break: break-word; }\n  #asset-meta .sub { color: var(--bm-text-dim); font-size: 12px; margin-bottom: 16px; }\n  #asset-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12px; }\n  #asset-facts dt { color: var(--bm-text-dim); }\n  #asset-facts dd { margin: 0; color: var(--bm-text); word-break: break-word; }\n  #asset-facts dd.mono { font-family: var(--bm-font-mono); }\n  /* The built-in clip row, shown only for a character. Pills are the dialog's own, tightened:\n     nine of them at the toolbar's tracking would run to four rows in a 360px column. */\n  #asset-clips { margin-top: 16px; }\n  #asset-clips.hidden { display: none; }\n  #asset-clips-title { color: var(--bm-text-dim); font-size: 12px; margin-bottom: 8px; }\n  #asset-clip-row { display: flex; flex-wrap: wrap; gap: 6px; }\n  #asset-clip-row .bm-pill { padding: 5px 10px; letter-spacing: 1px; }\n  #asset-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }\n  /* The .hidden rules above are scoped to the viewer side; the actions row needs its own. */\n  #asset-actions .hidden { display: none; }\n  #asset-close { margin-left: auto; }\n";
/**
 * The overlay itself.
 *
 * `<audio controls>` rather than a play button of our own: the web Creator withholds native
 * controls because its player sits in a 46px row, and here there is a whole dialog. A creator
 * checking a sound effect wants the scrubber. `<video controls>` is here for the same reason —
 * a cutscene is watched, scrubbed and watched again.
 *
 * `preload="metadata"` on the video, not `none`: the dialog is opened BY a click on the row, so
 * the creator has already asked for it, and a poster frame beats a black rectangle. Muted is
 * deliberately absent — a generated clip may carry audio and this is where you would check.
 */
export declare const ASSET_DETAIL_HTML = "\n  <div id=\"asset-overlay\" class=\"bm-overlay\">\n    <div id=\"asset-dialog\" class=\"bm-dialog\">\n      <div id=\"asset-view\">\n        <iframe id=\"asset-frame\" class=\"hidden\" title=\"Asset preview\"></iframe>\n        <img id=\"asset-image\" class=\"hidden\" alt=\"\">\n        <audio id=\"asset-audio\" class=\"hidden\" controls preload=\"none\"></audio>\n        <video id=\"asset-video\" class=\"hidden\" controls playsinline preload=\"metadata\"></video>\n        <div id=\"asset-note\" class=\"hidden\"></div>\n      </div>\n      <aside id=\"asset-meta\">\n        <h2 id=\"asset-name\"></h2>\n        <div class=\"sub\" id=\"asset-sub\"></div>\n        <dl id=\"asset-facts\"></dl>\n        <div id=\"asset-clips\" class=\"hidden\">\n          <div id=\"asset-clips-title\">Built-in animations</div>\n          <div id=\"asset-clip-row\">\n            <button class=\"bm-pill\" type=\"button\" data-clip=\"\" title=\"Back to the still model\">Model</button>\n            <button class=\"bm-pill\" type=\"button\" data-clip=\"Idle\">Idle</button>\n            <button class=\"bm-pill\" type=\"button\" data-clip=\"Walk\">Walk</button>\n            <button class=\"bm-pill\" type=\"button\" data-clip=\"SlowRun\">Run</button>\n            <button class=\"bm-pill\" type=\"button\" data-clip=\"Jump\">Jump</button>\n            <button class=\"bm-pill\" type=\"button\" data-clip=\"Punching\">Punch</button>\n            <button class=\"bm-pill\" type=\"button\" data-clip=\"Kicking\">Kick</button>\n            <button class=\"bm-pill\" type=\"button\" data-clip=\"ForwardFlip\">Flip</button>\n            <button class=\"bm-pill\" type=\"button\" data-clip=\"Dance\">Dance</button>\n          </div>\n        </div>\n        <div id=\"asset-actions\">\n          <button id=\"asset-edit-voxels\" class=\"bm-pill bm-pill--primary hidden\" type=\"button\" title=\"Open the 3D voxel editor: add, delete and recolor voxels, and set which ones glow\">Edit voxels</button>\n          <button id=\"asset-reset\" class=\"bm-pill\" type=\"button\" title=\"Back to the angle the thumbnail uses\">Reset view</button>\n          <button id=\"asset-copy\" class=\"bm-pill\" type=\"button\" title=\"Copy this asset's id\">Copy id</button>\n          <button id=\"asset-close\" class=\"bm-pill bm-pill--ghost\" type=\"button\">Close</button>\n        </div>\n      </aside>\n    </div>\n  </div>\n";