demuxe 0.3.0-beta.3

package/web/generated/player/interaction.d.ts

@@ -0,0 +1,6 @@
+export declare function formatTime(value: number): string;
+export declare function outputDimensions(ratio: number): {
+    width: number;
+    height: number;
+};
+export declare function shortcut(event: KeyboardEvent, spaceControlsPlayback?: boolean): string | null;

package/web/generated/player/interaction.js

@@ -0,0 +1,14 @@
+export function formatTime(value) {
+    const n = Math.max(0, Math.floor(value)), seconds = String(n % 60).padStart(2, '0'), minutes = String(Math.floor(n / 60) % 60).padStart(2, '0');
+    return n >= 3600 ? `${Math.floor(n / 3600)}:${minutes}:${seconds}` : `${Math.floor(n / 60)}:${seconds}`;
+}
+export function outputDimensions(ratio) { const width = Math.min(1920, 1080 * ratio); return { width: Math.max(1, Math.round(width)), height: Math.max(1, Math.round(width / ratio)) }; }
+export function shortcut(event, spaceControlsPlayback = false) {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.isComposing || event.defaultPrevented)
+        return null;
+    if (event.composedPath().some(node => node instanceof HTMLElement && (node.matches('input,select,textarea,[role="slider"]') || node.isContentEditable)))
+        return null;
+    if ((event.key === 'Enter' || event.key === ' ' && !spaceControlsPlayback) && event.composedPath().some(node => node instanceof HTMLElement && node.matches('button,a,summary,[role="button"]')))
+        return null;
+    return event.key.toLowerCase();
+}

package/web/generated/player/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles = "\n.queue-navigation{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--demuxe-muted-foreground)}\n.queue-navigation .icon-button{width:30px;min-width:30px;flex-basis:30px;padding:7px}.queue-navigation svg{width:16px;height:16px}\n.times:has(.queue-navigation:not([hidden])){gap:4px}.times:has(.queue-navigation:not([hidden]))>.space{display:none}\n.queue-section{margin-top:16px;padding-top:10px;border-top:1px solid var(--demuxe-border)}\n.queue-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.queue-header button{font-size:10px;padding:6px 8px}\n#queue-list{padding:0;margin:8px 0 0;list-style:none;max-height:min(240px,30vh);overflow:auto;overscroll-behavior:contain}#queue-list li{display:flex;gap:4px;align-items:center}\n#queue-list .queue-item{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;border:0;padding:8px}\n#queue-list .queue-item[aria-current=true]{color:var(--demuxe-accent);font-weight:650;background:var(--demuxe-control-background)}\n#queue-list .queue-remove{flex:none;background:transparent;border:0;font-size:19px;padding:4px 10px}\n@media(pointer:coarse){.queue-navigation .icon-button{width:44px;min-width:44px;flex-basis:44px}}\n\n:host{display:block;contain:layout;container-type:inline-size;container-name:player;--demuxe-background:#101114;--demuxe-foreground:#f6f3ed;--demuxe-accent:#f3ead8;--demuxe-border:#ffffff24;--demuxe-radius:14px;--demuxe-stage-background:#08090c;--demuxe-muted-foreground:#b8bbc3;--demuxe-panel-background:#151619;--demuxe-control-background:#25262b;--demuxe-overlay-background:#30343b70;color:var(--demuxe-foreground);font:14px/1.5 system-ui,sans-serif;color-scheme:dark}\n*{box-sizing:border-box}[hidden]{display:none!important}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{min-height:44px;border:1px solid var(--demuxe-border);border-radius:8px;background:color-mix(in srgb,var(--demuxe-foreground) 3%,transparent);padding:8px 14px}button:hover{background:color-mix(in srgb,var(--demuxe-foreground) 9%,transparent)}button:disabled,input:disabled,select:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--demuxe-accent);outline-offset:4px}input[type=file]{width:100%;min-width:0;font-size:12px}input[type=range]{accent-color:var(--demuxe-accent);cursor:pointer;margin:0;min-height:32px}\n.shell{position:relative;isolation:isolate;background:var(--demuxe-background);border:1px solid var(--demuxe-border);border-radius:var(--demuxe-radius);overflow:clip}.stage{position:relative;width:100%;min-width:0;display:grid;place-items:center;background:var(--demuxe-stage-background);min-height:240px;aspect-ratio:var(--media-aspect,16/9);max-height:80vh;overflow:hidden}.surface,.poster{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center}.surface .demuxe-player{width:100%;height:100%;display:grid;place-items:center}.surface video,.surface canvas,.poster{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}\n.topbar{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:6px;padding:clamp(8px,1.3cqw,16px) clamp(12px,2.2cqw,26px) 24px;background:linear-gradient(var(--demuxe-overlay-background),transparent);pointer-events:none}.topbar>*{pointer-events:auto}.player-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;font-size:clamp(12px,1.3cqw,15px);font-weight:450;letter-spacing:.1px}.space{flex:1;min-width:0}.icon-button{display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;padding:8px;border:0;border-radius:50%;background:transparent;transition:background .15s,transform .15s}.icon-button:hover{background:color-mix(in srgb,var(--demuxe-foreground) 8%,transparent)}.icon-button svg{width:20px;height:20px;display:block;pointer-events:none;filter:drop-shadow(0 1px 4px #0008)}.icon-button[aria-expanded=true],.icon-button[aria-pressed=true]{color:var(--demuxe-accent);background:color-mix(in srgb,var(--demuxe-foreground) 7%,transparent)}\n.transport{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:clamp(16px,3cqw,36px)}.transport .play{width:clamp(56px,8cqw,88px);height:clamp(56px,8cqw,88px);flex-basis:clamp(56px,8cqw,88px);border:0;border-radius:8px;background:transparent;backdrop-filter:none}.transport .icon-button:hover{background:transparent;transform:scale(1.06)}.transport .play svg{width:clamp(44px,6.5cqw,72px);height:clamp(44px,6.5cqw,72px)}.transport #back,.transport #forward{width:60px;height:60px;flex-basis:60px;padding:10px}.transport #back svg,.transport #forward svg{width:clamp(28px,3cqw,36px);height:clamp(28px,3cqw,36px);stroke-width:1.5}\n.controls{position:absolute;z-index:2;inset:auto 0 0;padding:20px clamp(12px,2.3cqw,28px) clamp(8px,1.2cqw,14px);background:linear-gradient(transparent,var(--demuxe-overlay-background));pointer-events:none}.controls>*{pointer-events:auto}.row{display:flex;align-items:center;gap:4px;margin-bottom:0}.volume{width:clamp(42px,5cqw,60px)}.times{display:flex;justify-content:space-between;gap:20px}.time{font-size:clamp(10px,1.1cqw,12px);font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #0008}.timeline{width:100%;display:block;appearance:none;background:transparent;padding:0;height:28px;--progress:0%}.timeline::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--demuxe-foreground) var(--progress),transparent var(--progress)),var(--buffered,linear-gradient(transparent,transparent)),color-mix(in srgb,var(--demuxe-foreground) 13%,transparent)}.timeline::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--demuxe-accent);margin-top:-4.5px}.timeline::-moz-range-track{height:3px;background:var(--buffered,linear-gradient(transparent,transparent)),color-mix(in srgb,var(--demuxe-foreground) 13%,transparent);border-radius:3px}.timeline::-moz-range-progress{height:3px;background:var(--demuxe-foreground)}.timeline::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--demuxe-accent)}\n.settings{position:absolute;z-index:4;right:clamp(12px,2.2cqw,26px);bottom:106px;width:260px;max-width:calc(100% - 24px);max-height:calc(100% - 124px);padding:6px 14px 10px;font-size:12px;background:var(--demuxe-panel-background);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 8%,transparent);border-radius:10px;box-shadow:0 16px 40px #0007;color:var(--demuxe-foreground);overflow:auto}.settings header{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:-6px;background:var(--demuxe-panel-background);border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--demuxe-foreground) 5%,transparent);z-index:1}.settings header strong{font-size:12px;font-weight:550;letter-spacing:.1px}.settings header .icon-button{margin-right:-10px}.settings label{display:grid;gap:8px;margin:12px 0}.settings .setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;margin:0;border-bottom:1px solid color-mix(in srgb,var(--demuxe-foreground) 3%,transparent)}.setting-row span{flex-shrink:0}.settings select{color:var(--demuxe-muted-foreground);min-height:44px;width:100%;min-width:0;border:0;border-radius:5px;background:transparent;padding:8px}.setting-row select{width:auto;max-width:60%;text-align:right;text-overflow:ellipsis}.media-picker{display:grid;gap:8px;margin:12px 0}.media-picker button{justify-self:start}.media-picker #current-source{color:var(--demuxe-muted-foreground);overflow-wrap:anywhere;min-width:0}\n.settings .subtitle-picker{font-size:12px;color:var(--demuxe-muted-foreground);padding-top:6px}.settings input[type=url]{width:100%;min-width:0;background:var(--demuxe-control-background);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 7%,transparent);border-radius:6px;padding:10px}.settings .check{display:flex;align-items:center;gap:8px}.source-menu{top:76px;bottom:auto;max-height:calc(100% - 100px);width:320px}.settings form{border-top:1px solid color-mix(in srgb,var(--demuxe-foreground) 9%,transparent);margin-top:18px;padding-top:4px}.help{font-size:11px;color:var(--demuxe-muted-foreground);line-height:1.7;margin:14px 0 0}\n.notice{position:absolute;z-index:5;top:78px;left:20px;right:20px;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--demuxe-overlay-background);border:1px solid var(--demuxe-border);border-radius:10px;overflow-wrap:anywhere}.notice span{flex:1}.status{position:absolute;z-index:2;bottom:132px;left:24px;max-width:calc(100% - 48px);padding:6px 10px;background:var(--demuxe-overlay-background);border-radius:6px;font-size:12px;pointer-events:none}.status:empty{display:none}.busy{position:absolute;top:80px;left:26px;z-index:2;padding:6px 12px;background:var(--demuxe-overlay-background);border-radius:20px;font-size:12px}\n.empty{position:relative;text-align:center;max-width:100%;padding:80px 24px}.empty strong{display:block;font-size:25px;font-weight:450;letter-spacing:-.5px}.empty p{color:var(--demuxe-muted-foreground);margin:8px 0 24px}.emblem{display:grid;place-items:center;width:80px;height:80px;margin:0 auto 24px;border:1px solid color-mix(in srgb,var(--demuxe-foreground) 38%,transparent);border-radius:50%;font-size:32px}.empty button{background:var(--demuxe-foreground);color:var(--demuxe-background);border:0;padding:10px 24px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\n.topbar,.controls,.transport{transition:opacity .22s}.idle .topbar,.idle .controls,.idle .transport{opacity:0;pointer-events:none}.idle .topbar *,.idle .controls *,.idle .transport *{pointer-events:none}.idle{cursor:none}.shell:not(.idle):has(:focus-visible) .topbar,.shell:not(.idle):has(:focus-visible) .controls,.shell:not(.idle):has(:focus-visible) .transport{opacity:1}.shell:not(.idle):has(:focus-visible) .topbar *,.shell:not(.idle):has(:focus-visible) .controls *,.shell:not(.idle):has(:focus-visible) .transport *{pointer-events:auto}\n:host(:fullscreen){background:var(--demuxe-stage-background);width:100%;height:100%}:host(:fullscreen) .shell{height:100%;border:0;border-radius:0}:host(:fullscreen) .stage{height:100%;width:100%;max-height:none;min-height:0;aspect-ratio:auto}\n@container player (max-width:600px){.stage{min-height:240px;max-height:none}.topbar{padding:6px 10px 18px}.controls{padding:12px 12px 8px}.settings{right:10px;bottom:94px;max-height:calc(100% - 108px);width:240px}.source-menu{top:50px;bottom:auto;max-height:calc(100% - 62px)}.menu-open .transport{opacity:0;visibility:hidden}.empty{padding:48px 16px}.empty strong{font-size:18px}.empty p{font-size:12px;margin:6px 0 12px}.emblem{width:44px;height:44px;font-size:23px;margin-bottom:12px}.status{bottom:100px;left:12px}.busy{top:50px;left:12px}.volume{width:42px}}\n@media(pointer:coarse){.icon-button{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px}.settings{bottom:114px;max-height:calc(100% - 126px)}.source-menu{bottom:auto;max-height:calc(100% - 80px)}}\n.settings button,.empty button{background:var(--demuxe-control-background);color:var(--demuxe-foreground);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 9%,transparent);border-radius:7px;box-shadow:0 1px 2px #0003;font-weight:500}.settings button:hover,.empty button:hover{background:var(--demuxe-control-background);border-color:color-mix(in srgb,var(--demuxe-foreground) 15%,transparent)}.settings .icon-button{background:transparent;border:0;box-shadow:none;border-radius:6px;color:var(--demuxe-muted-foreground)}.settings .icon-button:hover{background:color-mix(in srgb,var(--demuxe-foreground) 3%,transparent);color:var(--demuxe-foreground)}.settings .icon-button svg{width:17px;height:17px;filter:none}.settings select:hover:not(:disabled){background:color-mix(in srgb,var(--demuxe-foreground) 2%,transparent);color:var(--demuxe-foreground)}.settings option{background:var(--demuxe-panel-background);color:var(--demuxe-foreground)}.settings input::file-selector-button{font:inherit;color:var(--demuxe-foreground);background:var(--demuxe-control-background);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 8%,transparent);border-radius:6px;padding:8px 10px;margin-right:8px;cursor:pointer}.topbar .icon-button:hover,.row .icon-button:hover{background:var(--demuxe-control-background)}.row .icon-button[aria-expanded=true],.row .icon-button[aria-pressed=true]{background:var(--demuxe-control-background);color:var(--demuxe-foreground)}\n/* One quiet, distinctive entry point into the empty player. */\n.empty #open{display:inline-flex;align-items:center;gap:16px;min-height:62px;padding:12px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--demuxe-foreground) 3%,transparent),color-mix(in srgb,var(--demuxe-foreground) 1%,transparent));border:1px solid color-mix(in srgb,var(--demuxe-foreground) 9%,transparent);border-radius:18px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--demuxe-foreground) 3%,transparent);color:var(--demuxe-foreground);font-size:14px;font-weight:450;letter-spacing:.2px;transition:border-color .2s,background .2s,box-shadow .2s}.empty #open .open-folder{width:28px;height:28px;color:var(--demuxe-foreground)}.empty #open .open-arrow{width:18px;height:18px;color:var(--demuxe-muted-foreground);margin-left:10px;transition:transform .2s,color .2s}.empty #open:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--demuxe-foreground) 6%,transparent),color-mix(in srgb,var(--demuxe-foreground) 2%,transparent));border-color:color-mix(in srgb,var(--demuxe-foreground) 19%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--demuxe-foreground) 6%,transparent),0 8px 30px #0002;color:var(--demuxe-foreground)}.empty #open:hover .open-arrow{transform:translateX(3px);color:var(--demuxe-foreground)}.empty #open:active{transform:translateY(1px)}\n.diagnostics-overlay{position:absolute;z-index:3;left:clamp(12px,2.2cqw,26px);top:62px;max-width:calc(100% - 48px);max-height:calc(100% - 156px);margin:0;padding:10px 12px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.65 ui-monospace,SFMono-Regular,monospace;color:var(--demuxe-foreground);background:var(--demuxe-overlay-background);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 9%,transparent);border-radius:6px;text-shadow:0 1px 3px #000c;pointer-events:auto}\n@container player (max-width:600px){.diagnostics-overlay{top:52px;max-height:calc(100% - 120px);font-size:9px;line-height:1.45;padding:6px 8px}}\n/* Top actions stay unboxed; motion and stroke carry interaction feedback. */\n.topbar .icon-button,.topbar .icon-button:hover,.topbar .icon-button[aria-expanded=true],.topbar .icon-button[aria-pressed=true]{background:transparent;box-shadow:none}\n.topbar .icon-button{color:var(--demuxe-muted-foreground);transition:color .16s,translate .2s var(--motion-ease),scale .18s var(--motion-ease)}\n.topbar .icon-button:hover:not(:disabled){color:var(--demuxe-foreground);translate:0 -2px;scale:1.08}.topbar .icon-button:active:not(:disabled){translate:0 0;scale:.94}\n.topbar .icon-button[aria-expanded=true],.topbar .icon-button[aria-pressed=true]{color:var(--demuxe-accent)}\n.topbar .icon-button[aria-expanded=true] svg,.topbar .icon-button[aria-pressed=true] svg{stroke-width:2.5;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--demuxe-accent) 20%,transparent))}\n/* Top-right menus align with their triggers; volume sits under the timeline. */\n.settings{top:64px;bottom:auto;max-height:calc(100% - 80px);transform-origin:top right;--menu-offset:-6px}.settings:not([hidden]){transform-origin:top right}.source-menu{top:64px}.controls .times{align-items:center;gap:12px}.controls .row{margin:0}\n@container player (max-width:600px){.transport{top:42%}.settings,.source-menu{top:50px;bottom:auto;max-height:calc(100% - 62px)}}\n/* Show only the existing timeline briefly after a hidden-control seek. */\n.idle.seek-preview .controls{opacity:1;translate:0 0}.idle .controls .row,.idle .controls slot{visibility:hidden}.idle.seek-preview .controls,.idle.seek-preview .controls *{pointer-events:none}\n/* A slim volume track inside the existing pointer target. */\n.volume{appearance:none;background:transparent;height:32px;padding:0;--volume-progress:100%}\n.volume::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,var(--demuxe-foreground) var(--volume-progress),color-mix(in srgb,var(--demuxe-foreground) 19%,transparent) var(--volume-progress))}\n.volume::-webkit-slider-thumb{appearance:none;width:8px;height:8px;margin-top:-3px;border:0;border-radius:50%;background:var(--demuxe-foreground);transition:scale .16s,box-shadow .16s}\n.volume::-moz-range-track{height:2px;border-radius:2px;background:color-mix(in srgb,var(--demuxe-foreground) 19%,transparent)}.volume::-moz-range-progress{height:2px;border-radius:2px;background:var(--demuxe-foreground)}.volume::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:var(--demuxe-foreground);transition:scale .16s,box-shadow .16s}\n.volume:hover::-webkit-slider-thumb,.volume:focus-visible::-webkit-slider-thumb{scale:1.25;box-shadow:0 0 0 3px color-mix(in srgb,var(--demuxe-foreground) 6%,transparent)}.volume:hover::-moz-range-thumb,.volume:focus-visible::-moz-range-thumb{scale:1.25;box-shadow:0 0 0 3px color-mix(in srgb,var(--demuxe-foreground) 6%,transparent)}\n@media(forced-colors:active){.volume{appearance:auto}}\n/* Motion stays on overlays so playback geometry never shifts. */\n:host{--motion-ease:cubic-bezier(.22,1,.36,1)}\n.topbar,.controls,.transport{transition:opacity .24s ease,translate .32s var(--motion-ease),scale .32s var(--motion-ease)}\n.idle .topbar{translate:0 -6px}.idle .controls{translate:0 8px}.idle .transport{scale:.96}\n.shell:not(.idle):has(:focus-visible) .topbar,.shell:not(.idle):has(:focus-visible) .controls{translate:0 0}.shell:not(.idle):has(:focus-visible) .transport{scale:1}\nbutton{transition:background .16s,color .16s,border-color .16s,scale .18s var(--motion-ease)}button:active:not(:disabled){scale:.94}\n.icon-button svg{transition:transform .28s var(--motion-ease)}#settings-toggle[aria-expanded=true] svg{transform:rotate(35deg)}\n.settings:not([hidden]){transform-origin:top right}.settings.source-menu{transform-origin:top right;--menu-offset:-6px}\n\n\n.timeline::-webkit-slider-thumb{transition:scale .16s var(--motion-ease),box-shadow .16s}.timeline:hover:not(:disabled)::-webkit-slider-thumb,.timeline:focus-visible::-webkit-slider-thumb{scale:1.2;box-shadow:0 0 0 4px color-mix(in srgb,var(--demuxe-foreground) 8%,transparent)}.timeline:active:not(:disabled)::-webkit-slider-thumb{scale:1.35}\n.timeline::-moz-range-thumb{transition:scale .16s var(--motion-ease),box-shadow .16s}.timeline:hover:not(:disabled)::-moz-range-thumb,.timeline:focus-visible::-moz-range-thumb{scale:1.2;box-shadow:0 0 0 4px color-mix(in srgb,var(--demuxe-foreground) 8%,transparent)}.timeline:active:not(:disabled)::-moz-range-thumb{scale:1.35}\n.empty #open{transition:border-color .2s,background .2s,box-shadow .2s,scale .18s var(--motion-ease)}.empty #open .open-folder{transition:transform .25s var(--motion-ease)}.empty #open:hover .open-folder{transform:translateY(-2px) rotate(-5deg)}\n.busy{display:flex;align-items:center;gap:8px}.busy::before{content:\"\";width:10px;height:10px;flex:none;border:1.5px solid color-mix(in srgb,var(--demuxe-foreground) 19%,transparent);border-top-color:currentColor;border-radius:50%;animation:busy-turn .8s linear infinite}@keyframes busy-turn{to{transform:rotate(360deg)}}\n/* Waiting feedback stays visible independently of playback chrome. */\n.buffering-indicator{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;pointer-events:none;animation:buffer-appear .18s ease-out .15s backwards}\n.buffering-indicator span{display:block;width:clamp(32px,4.5cqw,48px);height:clamp(32px,4.5cqw,48px);border:2px solid color-mix(in srgb,var(--demuxe-foreground) 13%,transparent);border-top-color:var(--demuxe-accent);border-right-color:color-mix(in srgb,var(--demuxe-accent) 60%,transparent);border-radius:50%;filter:drop-shadow(0 1px 4px #0008);animation:busy-turn .85s linear infinite}\n.buffering .transport #play svg{opacity:0}.transport #play svg{transition:opacity .18s}\n@keyframes buffer-appear{from{opacity:0;scale:.9}to{opacity:1;scale:1}}\n@container player (max-width:600px){.buffering-indicator{top:42%}}\n@media(forced-colors:active){.buffering-indicator span{border-color:GrayText;border-top-color:Highlight}}\n/* Short stagger on reveal, coordinated fade on dismissal. */\n.topbar .icon-button{transition:opacity .18s ease,translate .24s var(--motion-ease),scale .2s var(--motion-ease),color .16s;transition-delay:var(--icon-delay,0ms)}\n#diagnostics-toggle{--icon-delay:0ms}#open-menu{--icon-delay:25ms}#settings-toggle{--icon-delay:50ms}#fullscreen{--icon-delay:75ms}\n.idle .topbar .icon-button{opacity:0;translate:0 -4px;scale:.92;transition-delay:0ms}\n.transport .icon-button{transition:opacity .18s ease,translate .26s var(--motion-ease),scale .2s var(--motion-ease),transform .15s}\n.transport #back{transition-delay:25ms}.transport #forward{transition-delay:50ms}.idle .transport .icon-button{opacity:0;translate:0 5px;scale:.94;transition-delay:0ms}\n.controls .timeline,.controls .times{transition:opacity .18s ease,translate .26s var(--motion-ease)}.controls .times{transition-delay:35ms}\n.idle:not(.seek-preview) .controls .timeline,.idle:not(.seek-preview) .controls .times{opacity:0;translate:0 4px;transition-delay:0ms}\n.settings,.diagnostics-overlay,.empty,.notice{opacity:1;translate:0 0;scale:1;transition:opacity .18s ease,translate .24s var(--motion-ease),scale .24s var(--motion-ease),display .24s allow-discrete}\n.settings[hidden],.diagnostics-overlay[hidden],.empty[hidden],.notice[hidden]{opacity:0;translate:0 -5px;scale:.985;pointer-events:none}\n.settings[hidden] *,.empty[hidden] *,.notice[hidden] *{pointer-events:none}\n@starting-style{.settings:not([hidden]),.diagnostics-overlay:not([hidden]),.empty:not([hidden]),.notice:not([hidden]){opacity:0;translate:0 -5px;scale:.985}}\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto;transition:none!important;animation:none!important}}\n\n@media(forced-colors:active){button,select,.shell,.settings{border:1px solid ButtonText}.transport .play{border-color:ButtonText}.stage{background:Canvas}.settings,.source-menu{background:Canvas}.timeline{appearance:auto;accent-color:Highlight}.icon-button,.time,.empty,.help{color:CanvasText}}\n";

package/web/generated/player/styles.js

@@ -0,0 +1,86 @@
+export const styles = `
+.queue-navigation{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--demuxe-muted-foreground)}
+.queue-navigation .icon-button{width:30px;min-width:30px;flex-basis:30px;padding:7px}.queue-navigation svg{width:16px;height:16px}
+.times:has(.queue-navigation:not([hidden])){gap:4px}.times:has(.queue-navigation:not([hidden]))>.space{display:none}
+.queue-section{margin-top:16px;padding-top:10px;border-top:1px solid var(--demuxe-border)}
+.queue-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.queue-header button{font-size:10px;padding:6px 8px}
+#queue-list{padding:0;margin:8px 0 0;list-style:none;max-height:min(240px,30vh);overflow:auto;overscroll-behavior:contain}#queue-list li{display:flex;gap:4px;align-items:center}
+#queue-list .queue-item{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;border:0;padding:8px}
+#queue-list .queue-item[aria-current=true]{color:var(--demuxe-accent);font-weight:650;background:var(--demuxe-control-background)}
+#queue-list .queue-remove{flex:none;background:transparent;border:0;font-size:19px;padding:4px 10px}
+@media(pointer:coarse){.queue-navigation .icon-button{width:44px;min-width:44px;flex-basis:44px}}
+
+:host{display:block;contain:layout;container-type:inline-size;container-name:player;--demuxe-background:#101114;--demuxe-foreground:#f6f3ed;--demuxe-accent:#f3ead8;--demuxe-border:#ffffff24;--demuxe-radius:14px;--demuxe-stage-background:#08090c;--demuxe-muted-foreground:#b8bbc3;--demuxe-panel-background:#151619;--demuxe-control-background:#25262b;--demuxe-overlay-background:#30343b70;color:var(--demuxe-foreground);font:14px/1.5 system-ui,sans-serif;color-scheme:dark}
+*{box-sizing:border-box}[hidden]{display:none!important}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{min-height:44px;border:1px solid var(--demuxe-border);border-radius:8px;background:color-mix(in srgb,var(--demuxe-foreground) 3%,transparent);padding:8px 14px}button:hover{background:color-mix(in srgb,var(--demuxe-foreground) 9%,transparent)}button:disabled,input:disabled,select:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--demuxe-accent);outline-offset:4px}input[type=file]{width:100%;min-width:0;font-size:12px}input[type=range]{accent-color:var(--demuxe-accent);cursor:pointer;margin:0;min-height:32px}
+.shell{position:relative;isolation:isolate;background:var(--demuxe-background);border:1px solid var(--demuxe-border);border-radius:var(--demuxe-radius);overflow:clip}.stage{position:relative;width:100%;min-width:0;display:grid;place-items:center;background:var(--demuxe-stage-background);min-height:240px;aspect-ratio:var(--media-aspect,16/9);max-height:80vh;overflow:hidden}.surface,.poster{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center}.surface .demuxe-player{width:100%;height:100%;display:grid;place-items:center}.surface video,.surface canvas,.poster{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
+.topbar{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:6px;padding:clamp(8px,1.3cqw,16px) clamp(12px,2.2cqw,26px) 24px;background:linear-gradient(var(--demuxe-overlay-background),transparent);pointer-events:none}.topbar>*{pointer-events:auto}.player-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;font-size:clamp(12px,1.3cqw,15px);font-weight:450;letter-spacing:.1px}.space{flex:1;min-width:0}.icon-button{display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;padding:8px;border:0;border-radius:50%;background:transparent;transition:background .15s,transform .15s}.icon-button:hover{background:color-mix(in srgb,var(--demuxe-foreground) 8%,transparent)}.icon-button svg{width:20px;height:20px;display:block;pointer-events:none;filter:drop-shadow(0 1px 4px #0008)}.icon-button[aria-expanded=true],.icon-button[aria-pressed=true]{color:var(--demuxe-accent);background:color-mix(in srgb,var(--demuxe-foreground) 7%,transparent)}
+.transport{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;gap:clamp(16px,3cqw,36px)}.transport .play{width:clamp(56px,8cqw,88px);height:clamp(56px,8cqw,88px);flex-basis:clamp(56px,8cqw,88px);border:0;border-radius:8px;background:transparent;backdrop-filter:none}.transport .icon-button:hover{background:transparent;transform:scale(1.06)}.transport .play svg{width:clamp(44px,6.5cqw,72px);height:clamp(44px,6.5cqw,72px)}.transport #back,.transport #forward{width:60px;height:60px;flex-basis:60px;padding:10px}.transport #back svg,.transport #forward svg{width:clamp(28px,3cqw,36px);height:clamp(28px,3cqw,36px);stroke-width:1.5}
+.controls{position:absolute;z-index:2;inset:auto 0 0;padding:20px clamp(12px,2.3cqw,28px) clamp(8px,1.2cqw,14px);background:linear-gradient(transparent,var(--demuxe-overlay-background));pointer-events:none}.controls>*{pointer-events:auto}.row{display:flex;align-items:center;gap:4px;margin-bottom:0}.volume{width:clamp(42px,5cqw,60px)}.times{display:flex;justify-content:space-between;gap:20px}.time{font-size:clamp(10px,1.1cqw,12px);font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #0008}.timeline{width:100%;display:block;appearance:none;background:transparent;padding:0;height:28px;--progress:0%}.timeline::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--demuxe-foreground) var(--progress),transparent var(--progress)),var(--buffered,linear-gradient(transparent,transparent)),color-mix(in srgb,var(--demuxe-foreground) 13%,transparent)}.timeline::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--demuxe-accent);margin-top:-4.5px}.timeline::-moz-range-track{height:3px;background:var(--buffered,linear-gradient(transparent,transparent)),color-mix(in srgb,var(--demuxe-foreground) 13%,transparent);border-radius:3px}.timeline::-moz-range-progress{height:3px;background:var(--demuxe-foreground)}.timeline::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--demuxe-accent)}
+.settings{position:absolute;z-index:4;right:clamp(12px,2.2cqw,26px);bottom:106px;width:260px;max-width:calc(100% - 24px);max-height:calc(100% - 124px);padding:6px 14px 10px;font-size:12px;background:var(--demuxe-panel-background);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 8%,transparent);border-radius:10px;box-shadow:0 16px 40px #0007;color:var(--demuxe-foreground);overflow:auto}.settings header{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:-6px;background:var(--demuxe-panel-background);border-radius:0;border-bottom:1px solid color-mix(in srgb,var(--demuxe-foreground) 5%,transparent);z-index:1}.settings header strong{font-size:12px;font-weight:550;letter-spacing:.1px}.settings header .icon-button{margin-right:-10px}.settings label{display:grid;gap:8px;margin:12px 0}.settings .setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;margin:0;border-bottom:1px solid color-mix(in srgb,var(--demuxe-foreground) 3%,transparent)}.setting-row span{flex-shrink:0}.settings select{color:var(--demuxe-muted-foreground);min-height:44px;width:100%;min-width:0;border:0;border-radius:5px;background:transparent;padding:8px}.setting-row select{width:auto;max-width:60%;text-align:right;text-overflow:ellipsis}.media-picker{display:grid;gap:8px;margin:12px 0}.media-picker button{justify-self:start}.media-picker #current-source{color:var(--demuxe-muted-foreground);overflow-wrap:anywhere;min-width:0}
+.settings .subtitle-picker{font-size:12px;color:var(--demuxe-muted-foreground);padding-top:6px}.settings input[type=url]{width:100%;min-width:0;background:var(--demuxe-control-background);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 7%,transparent);border-radius:6px;padding:10px}.settings .check{display:flex;align-items:center;gap:8px}.source-menu{top:76px;bottom:auto;max-height:calc(100% - 100px);width:320px}.settings form{border-top:1px solid color-mix(in srgb,var(--demuxe-foreground) 9%,transparent);margin-top:18px;padding-top:4px}.help{font-size:11px;color:var(--demuxe-muted-foreground);line-height:1.7;margin:14px 0 0}
+.notice{position:absolute;z-index:5;top:78px;left:20px;right:20px;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--demuxe-overlay-background);border:1px solid var(--demuxe-border);border-radius:10px;overflow-wrap:anywhere}.notice span{flex:1}.status{position:absolute;z-index:2;bottom:132px;left:24px;max-width:calc(100% - 48px);padding:6px 10px;background:var(--demuxe-overlay-background);border-radius:6px;font-size:12px;pointer-events:none}.status:empty{display:none}.busy{position:absolute;top:80px;left:26px;z-index:2;padding:6px 12px;background:var(--demuxe-overlay-background);border-radius:20px;font-size:12px}
+.empty{position:relative;text-align:center;max-width:100%;padding:80px 24px}.empty strong{display:block;font-size:25px;font-weight:450;letter-spacing:-.5px}.empty p{color:var(--demuxe-muted-foreground);margin:8px 0 24px}.emblem{display:grid;place-items:center;width:80px;height:80px;margin:0 auto 24px;border:1px solid color-mix(in srgb,var(--demuxe-foreground) 38%,transparent);border-radius:50%;font-size:32px}.empty button{background:var(--demuxe-foreground);color:var(--demuxe-background);border:0;padding:10px 24px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
+.topbar,.controls,.transport{transition:opacity .22s}.idle .topbar,.idle .controls,.idle .transport{opacity:0;pointer-events:none}.idle .topbar *,.idle .controls *,.idle .transport *{pointer-events:none}.idle{cursor:none}.shell:not(.idle):has(:focus-visible) .topbar,.shell:not(.idle):has(:focus-visible) .controls,.shell:not(.idle):has(:focus-visible) .transport{opacity:1}.shell:not(.idle):has(:focus-visible) .topbar *,.shell:not(.idle):has(:focus-visible) .controls *,.shell:not(.idle):has(:focus-visible) .transport *{pointer-events:auto}
+:host(:fullscreen){background:var(--demuxe-stage-background);width:100%;height:100%}:host(:fullscreen) .shell{height:100%;border:0;border-radius:0}:host(:fullscreen) .stage{height:100%;width:100%;max-height:none;min-height:0;aspect-ratio:auto}
+@container player (max-width:600px){.stage{min-height:240px;max-height:none}.topbar{padding:6px 10px 18px}.controls{padding:12px 12px 8px}.settings{right:10px;bottom:94px;max-height:calc(100% - 108px);width:240px}.source-menu{top:50px;bottom:auto;max-height:calc(100% - 62px)}.menu-open .transport{opacity:0;visibility:hidden}.empty{padding:48px 16px}.empty strong{font-size:18px}.empty p{font-size:12px;margin:6px 0 12px}.emblem{width:44px;height:44px;font-size:23px;margin-bottom:12px}.status{bottom:100px;left:12px}.busy{top:50px;left:12px}.volume{width:42px}}
+@media(pointer:coarse){.icon-button{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px}.settings{bottom:114px;max-height:calc(100% - 126px)}.source-menu{bottom:auto;max-height:calc(100% - 80px)}}
+.settings button,.empty button{background:var(--demuxe-control-background);color:var(--demuxe-foreground);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 9%,transparent);border-radius:7px;box-shadow:0 1px 2px #0003;font-weight:500}.settings button:hover,.empty button:hover{background:var(--demuxe-control-background);border-color:color-mix(in srgb,var(--demuxe-foreground) 15%,transparent)}.settings .icon-button{background:transparent;border:0;box-shadow:none;border-radius:6px;color:var(--demuxe-muted-foreground)}.settings .icon-button:hover{background:color-mix(in srgb,var(--demuxe-foreground) 3%,transparent);color:var(--demuxe-foreground)}.settings .icon-button svg{width:17px;height:17px;filter:none}.settings select:hover:not(:disabled){background:color-mix(in srgb,var(--demuxe-foreground) 2%,transparent);color:var(--demuxe-foreground)}.settings option{background:var(--demuxe-panel-background);color:var(--demuxe-foreground)}.settings input::file-selector-button{font:inherit;color:var(--demuxe-foreground);background:var(--demuxe-control-background);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 8%,transparent);border-radius:6px;padding:8px 10px;margin-right:8px;cursor:pointer}.topbar .icon-button:hover,.row .icon-button:hover{background:var(--demuxe-control-background)}.row .icon-button[aria-expanded=true],.row .icon-button[aria-pressed=true]{background:var(--demuxe-control-background);color:var(--demuxe-foreground)}
+/* One quiet, distinctive entry point into the empty player. */
+.empty #open{display:inline-flex;align-items:center;gap:16px;min-height:62px;padding:12px 22px;background:linear-gradient(135deg,color-mix(in srgb,var(--demuxe-foreground) 3%,transparent),color-mix(in srgb,var(--demuxe-foreground) 1%,transparent));border:1px solid color-mix(in srgb,var(--demuxe-foreground) 9%,transparent);border-radius:18px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--demuxe-foreground) 3%,transparent);color:var(--demuxe-foreground);font-size:14px;font-weight:450;letter-spacing:.2px;transition:border-color .2s,background .2s,box-shadow .2s}.empty #open .open-folder{width:28px;height:28px;color:var(--demuxe-foreground)}.empty #open .open-arrow{width:18px;height:18px;color:var(--demuxe-muted-foreground);margin-left:10px;transition:transform .2s,color .2s}.empty #open:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--demuxe-foreground) 6%,transparent),color-mix(in srgb,var(--demuxe-foreground) 2%,transparent));border-color:color-mix(in srgb,var(--demuxe-foreground) 19%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--demuxe-foreground) 6%,transparent),0 8px 30px #0002;color:var(--demuxe-foreground)}.empty #open:hover .open-arrow{transform:translateX(3px);color:var(--demuxe-foreground)}.empty #open:active{transform:translateY(1px)}
+.diagnostics-overlay{position:absolute;z-index:3;left:clamp(12px,2.2cqw,26px);top:62px;max-width:calc(100% - 48px);max-height:calc(100% - 156px);margin:0;padding:10px 12px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.65 ui-monospace,SFMono-Regular,monospace;color:var(--demuxe-foreground);background:var(--demuxe-overlay-background);border:1px solid color-mix(in srgb,var(--demuxe-foreground) 9%,transparent);border-radius:6px;text-shadow:0 1px 3px #000c;pointer-events:auto}
+@container player (max-width:600px){.diagnostics-overlay{top:52px;max-height:calc(100% - 120px);font-size:9px;line-height:1.45;padding:6px 8px}}
+/* Top actions stay unboxed; motion and stroke carry interaction feedback. */
+.topbar .icon-button,.topbar .icon-button:hover,.topbar .icon-button[aria-expanded=true],.topbar .icon-button[aria-pressed=true]{background:transparent;box-shadow:none}
+.topbar .icon-button{color:var(--demuxe-muted-foreground);transition:color .16s,translate .2s var(--motion-ease),scale .18s var(--motion-ease)}
+.topbar .icon-button:hover:not(:disabled){color:var(--demuxe-foreground);translate:0 -2px;scale:1.08}.topbar .icon-button:active:not(:disabled){translate:0 0;scale:.94}
+.topbar .icon-button[aria-expanded=true],.topbar .icon-button[aria-pressed=true]{color:var(--demuxe-accent)}
+.topbar .icon-button[aria-expanded=true] svg,.topbar .icon-button[aria-pressed=true] svg{stroke-width:2.5;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--demuxe-accent) 20%,transparent))}
+/* Top-right menus align with their triggers; volume sits under the timeline. */
+.settings{top:64px;bottom:auto;max-height:calc(100% - 80px);transform-origin:top right;--menu-offset:-6px}.settings:not([hidden]){transform-origin:top right}.source-menu{top:64px}.controls .times{align-items:center;gap:12px}.controls .row{margin:0}
+@container player (max-width:600px){.transport{top:42%}.settings,.source-menu{top:50px;bottom:auto;max-height:calc(100% - 62px)}}
+/* Show only the existing timeline briefly after a hidden-control seek. */
+.idle.seek-preview .controls{opacity:1;translate:0 0}.idle .controls .row,.idle .controls slot{visibility:hidden}.idle.seek-preview .controls,.idle.seek-preview .controls *{pointer-events:none}
+/* A slim volume track inside the existing pointer target. */
+.volume{appearance:none;background:transparent;height:32px;padding:0;--volume-progress:100%}
+.volume::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,var(--demuxe-foreground) var(--volume-progress),color-mix(in srgb,var(--demuxe-foreground) 19%,transparent) var(--volume-progress))}
+.volume::-webkit-slider-thumb{appearance:none;width:8px;height:8px;margin-top:-3px;border:0;border-radius:50%;background:var(--demuxe-foreground);transition:scale .16s,box-shadow .16s}
+.volume::-moz-range-track{height:2px;border-radius:2px;background:color-mix(in srgb,var(--demuxe-foreground) 19%,transparent)}.volume::-moz-range-progress{height:2px;border-radius:2px;background:var(--demuxe-foreground)}.volume::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:var(--demuxe-foreground);transition:scale .16s,box-shadow .16s}
+.volume:hover::-webkit-slider-thumb,.volume:focus-visible::-webkit-slider-thumb{scale:1.25;box-shadow:0 0 0 3px color-mix(in srgb,var(--demuxe-foreground) 6%,transparent)}.volume:hover::-moz-range-thumb,.volume:focus-visible::-moz-range-thumb{scale:1.25;box-shadow:0 0 0 3px color-mix(in srgb,var(--demuxe-foreground) 6%,transparent)}
+@media(forced-colors:active){.volume{appearance:auto}}
+/* Motion stays on overlays so playback geometry never shifts. */
+:host{--motion-ease:cubic-bezier(.22,1,.36,1)}
+.topbar,.controls,.transport{transition:opacity .24s ease,translate .32s var(--motion-ease),scale .32s var(--motion-ease)}
+.idle .topbar{translate:0 -6px}.idle .controls{translate:0 8px}.idle .transport{scale:.96}
+.shell:not(.idle):has(:focus-visible) .topbar,.shell:not(.idle):has(:focus-visible) .controls{translate:0 0}.shell:not(.idle):has(:focus-visible) .transport{scale:1}
+button{transition:background .16s,color .16s,border-color .16s,scale .18s var(--motion-ease)}button:active:not(:disabled){scale:.94}
+.icon-button svg{transition:transform .28s var(--motion-ease)}#settings-toggle[aria-expanded=true] svg{transform:rotate(35deg)}
+.settings:not([hidden]){transform-origin:top right}.settings.source-menu{transform-origin:top right;--menu-offset:-6px}
+
+
+.timeline::-webkit-slider-thumb{transition:scale .16s var(--motion-ease),box-shadow .16s}.timeline:hover:not(:disabled)::-webkit-slider-thumb,.timeline:focus-visible::-webkit-slider-thumb{scale:1.2;box-shadow:0 0 0 4px color-mix(in srgb,var(--demuxe-foreground) 8%,transparent)}.timeline:active:not(:disabled)::-webkit-slider-thumb{scale:1.35}
+.timeline::-moz-range-thumb{transition:scale .16s var(--motion-ease),box-shadow .16s}.timeline:hover:not(:disabled)::-moz-range-thumb,.timeline:focus-visible::-moz-range-thumb{scale:1.2;box-shadow:0 0 0 4px color-mix(in srgb,var(--demuxe-foreground) 8%,transparent)}.timeline:active:not(:disabled)::-moz-range-thumb{scale:1.35}
+.empty #open{transition:border-color .2s,background .2s,box-shadow .2s,scale .18s var(--motion-ease)}.empty #open .open-folder{transition:transform .25s var(--motion-ease)}.empty #open:hover .open-folder{transform:translateY(-2px) rotate(-5deg)}
+.busy{display:flex;align-items:center;gap:8px}.busy::before{content:"";width:10px;height:10px;flex:none;border:1.5px solid color-mix(in srgb,var(--demuxe-foreground) 19%,transparent);border-top-color:currentColor;border-radius:50%;animation:busy-turn .8s linear infinite}@keyframes busy-turn{to{transform:rotate(360deg)}}
+/* Waiting feedback stays visible independently of playback chrome. */
+.buffering-indicator{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;pointer-events:none;animation:buffer-appear .18s ease-out .15s backwards}
+.buffering-indicator span{display:block;width:clamp(32px,4.5cqw,48px);height:clamp(32px,4.5cqw,48px);border:2px solid color-mix(in srgb,var(--demuxe-foreground) 13%,transparent);border-top-color:var(--demuxe-accent);border-right-color:color-mix(in srgb,var(--demuxe-accent) 60%,transparent);border-radius:50%;filter:drop-shadow(0 1px 4px #0008);animation:busy-turn .85s linear infinite}
+.buffering .transport #play svg{opacity:0}.transport #play svg{transition:opacity .18s}
+@keyframes buffer-appear{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
+@container player (max-width:600px){.buffering-indicator{top:42%}}
+@media(forced-colors:active){.buffering-indicator span{border-color:GrayText;border-top-color:Highlight}}
+/* Short stagger on reveal, coordinated fade on dismissal. */
+.topbar .icon-button{transition:opacity .18s ease,translate .24s var(--motion-ease),scale .2s var(--motion-ease),color .16s;transition-delay:var(--icon-delay,0ms)}
+#diagnostics-toggle{--icon-delay:0ms}#open-menu{--icon-delay:25ms}#settings-toggle{--icon-delay:50ms}#fullscreen{--icon-delay:75ms}
+.idle .topbar .icon-button{opacity:0;translate:0 -4px;scale:.92;transition-delay:0ms}
+.transport .icon-button{transition:opacity .18s ease,translate .26s var(--motion-ease),scale .2s var(--motion-ease),transform .15s}
+.transport #back{transition-delay:25ms}.transport #forward{transition-delay:50ms}.idle .transport .icon-button{opacity:0;translate:0 5px;scale:.94;transition-delay:0ms}
+.controls .timeline,.controls .times{transition:opacity .18s ease,translate .26s var(--motion-ease)}.controls .times{transition-delay:35ms}
+.idle:not(.seek-preview) .controls .timeline,.idle:not(.seek-preview) .controls .times{opacity:0;translate:0 4px;transition-delay:0ms}
+.settings,.diagnostics-overlay,.empty,.notice{opacity:1;translate:0 0;scale:1;transition:opacity .18s ease,translate .24s var(--motion-ease),scale .24s var(--motion-ease),display .24s allow-discrete}
+.settings[hidden],.diagnostics-overlay[hidden],.empty[hidden],.notice[hidden]{opacity:0;translate:0 -5px;scale:.985;pointer-events:none}
+.settings[hidden] *,.empty[hidden] *,.notice[hidden] *{pointer-events:none}
+@starting-style{.settings:not([hidden]),.diagnostics-overlay:not([hidden]),.empty:not([hidden]),.notice:not([hidden]){opacity:0;translate:0 -5px;scale:.985}}
+@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto;transition:none!important;animation:none!important}}
+
+@media(forced-colors:active){button,select,.shell,.settings{border:1px solid ButtonText}.transport .play{border-color:ButtonText}.stage{background:Canvas}.settings,.source-menu{background:Canvas}.timeline{appearance:auto;accent-color:Highlight}.icon-button,.time,.empty,.help{color:CanvasText}}
+`;

package/web/generated/types.d.ts

@@ -0,0 +1,227 @@
+export declare const PLAYBACK_MODES: readonly ["native", "hybrid", "software"];
+export type PlaybackMode = typeof PLAYBACK_MODES[number];
+export type TrackType = 'audio' | 'sub';
+export type MediaInputOptions = {
+    demuxer?: string;
+};
+/** Select one rendition for the session; this is not automatic bitrate switching. */
+export type StreamingOptions = {
+    maxBandwidth?: number;
+    representation?: string;
+    live?: boolean;
+};
+export type RemoteSource = MediaInputOptions & {
+    streaming?: StreamingOptions;
+    url: string;
+    format?: 'file' | 'hls' | 'dash';
+    headers?: Record<string, string>;
+    credentials?: RequestCredentials;
+    allowedOrigins?: string[];
+    immutable?: boolean;
+    refreshAuthorization?: (resource?: {
+        url: string;
+    }) => Promise<{
+        url?: string;
+        headers?: Record<string, string>;
+    }>;
+};
+export type TextTrackSource = {
+    src: string;
+    label: string;
+    language?: string;
+    default?: boolean;
+};
+export type SubtitleOptions = {
+    label?: string;
+    language?: string;
+    select?: boolean;
+};
+export type SubtitleAsset = {
+    bytes: ArrayBuffer;
+    format: 'srt' | 'ass' | 'ssa' | 'vtt';
+    label: string;
+    language?: string;
+    select: boolean;
+};
+export type FontAsset = {
+    name: string;
+    bytes: ArrayBuffer;
+};
+export type AudioOutput = 'stereo' | '5.1' | '7.1' | 'auto';
+export type ToneMapping = 'off' | 'hdr-to-sdr';
+/** Software decode pixels (up to 4K), and mpv's individual FFmpeg allocation cap. */
+export type ResourceLimits = {
+    maxDecodePixels?: number;
+    maxAllocationBytes?: number;
+};
+export type PlayerOptions = {
+    /** Package runtime root; includes web/ and fixtures/. Same-origin only. */
+    assetBase?: string;
+    audioOutput?: AudioOutput;
+    audioFallback?: 'stereo' | 'reject';
+    toneMapping?: ToneMapping;
+    resourceLimits?: ResourceLimits;
+    mode?: PlaybackMode;
+    /** Defaults to true when mode is omitted. Explicit modes remain pinned. */
+    automaticSelection?: boolean;
+    /** Internal Native packaging plan; "never" disables the packet-copy fallback. */
+    /** Opt-in retained-session seeks; broad automatic admission remains gated. */
+    experimentalBufferedNativeSeeks?: boolean;
+    /** Explicit Native trials only; copy original audio first, then qualified integer FLAC. */
+    experimentalAudioAdaptation?: 'flac' | 'opus';
+    /** Permit automatic FLAC for the qualified local-file subset; never permits lossy conversion. */
+    automaticAudioAdaptation?: 'lossless';
+    /** Explicit lossy permission; does not authorize resampling or downmixing. */
+    allowLossyAudio?: boolean;
+    /** External ASS/SSA overlay on qualified Native presentations; no embedded extraction. */
+    experimentalNativeASS?: boolean;
+    nativeRemux?: 'auto' | 'never' | 'always';
+    /** Optional Software presenter; RGB remains the default. */
+    softwarePresenter?: 'rgb' | 'experimental-yuv';
+    width?: number;
+    height?: number;
+    videoFilters?: string;
+    /** Experimental scalar attenuation, 0..1; 1 avoids Native Web Audio allocation. */
+    audioGain?: number;
+    audioFilters?: string;
+    /** Opt-in scalar audio filtering on Hybrid; other filters retain Software routing. */
+    experimentalHybridAudioFilters?: boolean;
+};
+export type Capabilities = {
+    videoFilters: boolean;
+    audioFilters: boolean;
+    mpvSubtitles: boolean;
+    externalTextTracks: boolean;
+    externalSubtitles: boolean;
+    customFonts: boolean;
+    customRequestHeaders: boolean;
+};
+export type PlaybackEvent = {
+    event: string;
+    name?: string;
+    data?: unknown;
+    [key: string]: unknown;
+};
+export type Diagnostics = {
+    planAdmission?: Array<{
+        id: string;
+        mode: PlaybackMode;
+        eligible: boolean;
+        code?: string;
+        reason?: string;
+    }>;
+    plan?: {
+        id: string;
+        mode: PlaybackMode;
+        video: string;
+        audio: string;
+        qualification: string;
+    };
+    mode: PlaybackMode;
+    switching: boolean;
+    videoFilters: string;
+    audioFilters: string;
+    audioGain?: number;
+    toneMapping?: ToneMapping;
+    resourceLimits?: ResourceLimits;
+    selection?: {
+        automatic: boolean;
+        attempts: Array<{
+            mode: PlaybackMode | 'probe';
+            outcome: 'skipped' | 'failed' | 'selected';
+            reason: string;
+        }>;
+    };
+    backend?: Record<string, unknown>;
+};
+export type OpenOptions = MediaInputOptions & {
+    signal?: AbortSignal;
+};
+export type MediaSourceInput = File | ArrayBuffer | string | URL | RemoteSource;
+export type OperationKind = 'opening' | 'seeking' | 'switching' | 'closing';
+export type PendingOperation = Readonly<{
+    id: number;
+    kind: OperationKind;
+}>;
+export type PlayerErrorCode = 'INVALID_ARGUMENT' | 'ABORTED' | 'AUTOPLAY_BLOCKED' | 'SOURCE_PERMISSION' | 'SOURCE_CHANGED' | 'NETWORK_TIMEOUT' | 'UNSUPPORTED_MEDIA' | 'UNSUPPORTED_TIMELINE' | 'UNSUPPORTED_FEATURE' | 'ASSET_LOAD_FAILED' | 'ISOLATION_REQUIRED' | 'DECODE_FAILED';
+export type SessionError = Readonly<{
+    code: PlayerErrorCode;
+    message: string;
+    operationId: number | null;
+    operation: OperationKind | null;
+    scope: 'operation' | 'session';
+    retryable: boolean;
+}>;
+export type TimeRange = Readonly<{
+    start: number;
+    end: number;
+}>;
+export type FeatureAvailability = Readonly<{
+    availability: 'available';
+} | {
+    availability: 'switch';
+    mode: PlaybackMode;
+    reason: string;
+} | {
+    availability: 'unavailable';
+    reason: string;
+} | {
+    availability: 'unknown';
+    reason: string;
+}>;
+export type FeatureName = 'seek' | 'audioTracks' | 'subtitleTracks' | 'externalSubtitles' | 'customFonts' | 'videoFilters' | 'audioFilters' | 'audioGain';
+export type PlayerCapabilities = Readonly<Capabilities & {
+    deployment: Readonly<{
+        isolated: boolean;
+        webCodecs: boolean;
+        mediaSource: boolean;
+    }>;
+    features: Readonly<Record<FeatureName, FeatureAvailability>>;
+}>;
+export type MediaTrack = Readonly<{
+    id: string;
+    type: 'audio' | 'subtitle' | 'video';
+    label: string;
+    language: string | null;
+    codec: string | null;
+    selected: boolean;
+    external: boolean;
+}>;
+export type MediaInfo = Readonly<{
+    displayWidth: number | null;
+    displayHeight: number | null;
+    aspectRatio: number | null;
+    rotation: number | null;
+    video: MediaTrack | null;
+    audio: MediaTrack | null;
+    subtitle: MediaTrack | null;
+}>;
+export type PlayerState = Readonly<{
+    status: 'idle' | 'paused' | 'playing' | 'buffering' | 'ended' | 'error';
+    playbackIntent: 'play' | 'pause';
+    pendingOperation: PendingOperation | null;
+    sourceId: number | null;
+    currentTime: number;
+    duration: number | null;
+    streamType: 'unknown' | 'vod' | 'live';
+    subtitlesVisible: boolean;
+    volume: number;
+    muted: boolean;
+    playbackRate: number;
+    activeMode: PlaybackMode | null;
+    automaticSelection: boolean;
+    buffered: readonly TimeRange[] | null;
+    seekable: readonly TimeRange[] | null;
+    audioTracks: readonly MediaTrack[];
+    subtitleTracks: readonly MediaTrack[];
+    mediaInfo: MediaInfo;
+    capabilities: PlayerCapabilities;
+    error: SessionError | null;
+}>;
+export declare const PLAYER_EVENTS: readonly ["play", "playing", "pause", "waiting", "ended", "timeupdate", "durationchange", "seeking", "seeked", "volumechange", "ratechange", "trackschange", "capabilitieschange", "sourcechange", "statechange", "error"];
+export type PlayerEventName = typeof PLAYER_EVENTS[number];
+export type PlayerEventMap = {
+    [K in Exclude<PlayerEventName, 'error'>]: CustomEvent<PlayerState>;
+} & {
+    error: CustomEvent<SessionError>;
+};

package/web/generated/types.js

@@ -0,0 +1,2 @@
+export const PLAYBACK_MODES = Object.freeze(['native', 'hybrid', 'software']);
+export const PLAYER_EVENTS = Object.freeze(['play', 'playing', 'pause', 'waiting', 'ended', 'timeupdate', 'durationchange', 'seeking', 'seeked', 'volumechange', 'ratechange', 'trackschange', 'capabilitieschange', 'sourcechange', 'statechange', 'error']);

package/web/generated/unified-player.d.ts

@@ -0,0 +1,129 @@
+import type { PlayerState, PlayerEventMap, PlayerCapabilities, OpenOptions, MediaSourceInput } from './types.js';
+import type { ToneMapping, SubtitleOptions, PlaybackMode, PlayerOptions, RemoteSource, TextTrackSource, Diagnostics, TrackType } from './types.js';
+/** Three explicit playback modes. Mode/filter changes reopen transactionally. */
+export declare class Player extends EventTarget {
+    readonly ready: Promise<void>;
+    private assetBase;
+    private snapshot;
+    private subscribers;
+    private publishQueued;
+    private sourceSerial;
+    private publicSelections;
+    private operationSerial;
+    private operationEpoch;
+    private activeOperation?;
+    private pendingOperation;
+    private sessionError;
+    private observedPlaying;
+    private observedWaiting;
+    private muted;
+    private closing?;
+    private currentMode;
+    private automatic;
+    private attempts;
+    private inspection?;
+    private recovering;
+    private lifetime;
+    private recoveredSessions;
+    private audioAdaptation?;
+    private automaticLossless;
+    private losslessInspection?;
+    private bufferedNativeSeeks;
+    private hybridAudioFilters;
+    private nativeASS;
+    private allowLossy;
+    private planDecisions;
+    private admissionContext;
+    private nativeRemux;
+    private softwarePresenter;
+    private settings;
+    private audioOutput;
+    private audioFallback;
+    private toneMapping;
+    private resourceLimits;
+    private fonts;
+    private subtitleAssets;
+    private root;
+    private width;
+    private height;
+    private current?;
+    private candidate?;
+    private source?;
+    private nativeTracks;
+    private queue;
+    private queued;
+    private destroyed;
+    private destruction?;
+    private busy;
+    private empty;
+    private monitor?;
+    constructor(container: HTMLElement, options?: PlayerOptions);
+    get state(): PlayerState;
+    get mediaInfo(): Readonly<{
+        displayWidth: number | null;
+        displayHeight: number | null;
+        aspectRatio: number | null;
+        rotation: number | null;
+        video: import("./types.js").MediaTrack | null;
+        audio: import("./types.js").MediaTrack | null;
+        subtitle: import("./types.js").MediaTrack | null;
+    }>;
+    subscribe(listener: (state: PlayerState) => void): () => void;
+    addEventListener<K extends keyof PlayerEventMap>(type: K, listener: ((this: Player, ev: PlayerEventMap[K]) => any) | null, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof PlayerEventMap>(type: K, listener: ((this: Player, ev: PlayerEventMap[K]) => any) | null, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions): void;
+    private schedulePublish;
+    private publish;
+    private featureCapabilities;
+    get mode(): "native" | "hybrid" | "software";
+    get automaticSelection(): boolean;
+    get surface(): HTMLCanvasElement | HTMLVideoElement | undefined;
+    get properties(): ReadonlyMap<string, unknown>;
+    get capabilities(): PlayerCapabilities;
+    private get legacyCapabilities();
+    get diagnostics(): Diagnostics;
+    audioDiagnostics(): object | undefined;
+    private emit;
+    private assertOperation;
+    private validateFilters;
+    private enqueue;
+    private interruptible;
+    private dispose;
+    private create;
+    private settled;
+    private admissible;
+    private replace;
+    private record;
+    private select;
+    private recover;
+    setAutomaticSelection(enabled?: boolean): Promise<void>;
+    open(input: MediaSourceInput, options?: OpenOptions): Promise<void>;
+    openRemote(source: RemoteSource, options?: OpenOptions): Promise<void>;
+    setMode(mode: PlaybackMode): Promise<void>;
+    private filters;
+    setVideoFilters(value: string): Promise<void>;
+    setAudioFilters(value: string): Promise<void>;
+    setAudioGain(value: number): Promise<void>;
+    private setting;
+    play(): Promise<void>;
+    pause(): Promise<void>;
+    seek(seconds: number): Promise<void>;
+    volume(value: number): Promise<void>;
+    setVolume(value: number): Promise<void>;
+    setMuted(value: boolean): Promise<void>;
+    setPlaybackRate(value: number): Promise<void>;
+    selectAudioTrack(id: string | null): Promise<void>;
+    selectSubtitleTrack(id: string | null): Promise<void>;
+    private selectPublicTrack;
+    rate(value: number): Promise<void>;
+    selectTrack(type: TrackType, id: string): Promise<void>;
+    subtitleVisible(visible: boolean): Promise<void>;
+    addSubtitle(file: File, options?: SubtitleOptions): Promise<void>;
+    addFont(file: File): Promise<void>;
+    setToneMapping(value: ToneMapping): Promise<void>;
+    addTextTrack(track: TextTrackSource): Promise<void>;
+    resize(width: number, height: number): void;
+    close(): Promise<void>;
+    destroy(): Promise<void>;
+}