@editframe/elements 0.17.6-beta.0 → 0.18.3-beta.0

package/dist/gui/TWMixin.js

@@ -1,2 +1,2 @@
-var TWMixin_default = "*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.col-span-2{grid-column:span 2/span 2}.mx-2{margin-left:.5rem;margin-right:.5rem}.mb-\\[1px\\]{margin-bottom:1px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-\\[1\\.1rem\\]{height:1.1rem}.h-\\[5px\\]{height:5px}.h-full{height:100%}.w-1{width:.25rem}.w-\\[2px\\]{width:2px}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-r-2{border-right-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity))}.border-b-slate-600{--tw-border-opacity:1;border-bottom-color:rgb(71 85 105/var(--tw-border-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-opacity-20{--tw-bg-opacity:.2}.p-\\[1px\\]{padding:1px}.pb-0{padding-bottom:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pt-\\[8px\\]{padding-top:8px}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-5xl{font-size:3rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.line-through{text-decoration-line:line-through}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-slate-300{--tw-shadow-color:#cbd5e1;--tw-shadow:var(--tw-shadow-colored)}.shadow-slate-600{--tw-shadow-color:#475569;--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.hover\\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer:hover~.peer-hover\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer:hover~.peer-hover\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.data-\\[focused\\]\\:bg-slate-400[data-focused]{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer[data-focused]~.peer-data-\\[focused\\]\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer[data-focused]~.peer-data-\\[focused\\]\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}";
+var TWMixin_default = "*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:\"\"}html,:host{-webkit-text-size-adjust:100%;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder{opacity:1;color:#9ca3af}textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.top-0{top:0}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.col-span-2{grid-column:span 2/span 2}.mx-2{margin-left:.5rem;margin-right:.5rem}.mb-\\[1px\\]{margin-bottom:1px}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-\\[1\\.1rem\\]{height:1.1rem}.h-\\[270px\\]{height:270px}.h-\\[5px\\]{height:5px}.h-full{height:100%}.w-1{width:.25rem}.w-\\[2px\\]{width:2px}.w-\\[480px\\]{width:480px}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skewX(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}.cursor-crosshair{cursor:crosshair}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.text-nowrap{text-wrap:nowrap}.rounded{border-radius:.25rem}.border{border-width:1px}.border-r-2{border-right-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity))}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity))}.border-b-slate-600{--tw-border-opacity:1;border-bottom-color:rgb(71 85 105/var(--tw-border-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity))}.bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity))}.bg-opacity-20{--tw-bg-opacity:.2}.p-\\[1px\\]{padding:1px}.pb-0{padding-bottom:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pt-\\[8px\\]{padding-top:8px}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-5xl{font-size:3rem;line-height:1}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.line-through{text-decoration-line:line-through}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-slate-300{--tw-shadow-color:#cbd5e1;--tw-shadow:var(--tw-shadow-colored)}.shadow-slate-600{--tw-shadow-color:#475569;--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.blur{--tw-blur:blur(8px);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.filter{filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}.hover\\:bg-slate-400:hover{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer:hover~.peer-hover\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer:hover~.peer-hover\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}.data-\\[focused\\]\\:bg-slate-400[data-focused]{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity))}.peer[data-focused]~.peer-data-\\[focused\\]\\:border-slate-400{--tw-border-opacity:1;border-color:rgb(148 163 184/var(--tw-border-opacity))}.peer[data-focused]~.peer-data-\\[focused\\]\\:bg-slate-300{--tw-bg-opacity:1;background-color:rgb(203 213 225/var(--tw-bg-opacity))}";
 export { TWMixin_default as default };

package/dist/gui/services/ElementConnectionManager.browsertest.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/gui/services/ElementConnectionManager.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Manages dynamic connection/disconnection of media elements to AudioContext
+ * Extracted from ContextMixin to improve separation of concerns and testability
+ */
+export declare class ElementConnectionManager {
+    private connectedMediaSources;
+    private lookaheadMs;
+    constructor(lookaheadMs?: number);
+    /**
+     * Update connected media elements based on current playhead position
+     * Connects upcoming elements and disconnects past elements
+     */
+    updateConnectedElements(audioContext: AudioContext, timegroup: any, // EFTimegroup type
+    currentMs: number): Promise<void>;
+    /**
+     * Find elements that should be connected based on timeline position
+     */
+    private getElementsToConnect;
+    /**
+     * Connect new elements that aren't already connected
+     */
+    private connectNewElements;
+    /**
+     * Update connection states for all managed elements
+     */
+    private updateElementStates;
+    /**
+     * Activate an element (connect to destination and start playback)
+     */
+    private activateElement;
+    /**
+     * Deactivate an element (disconnect but keep prepared)
+     */
+    private deactivateElement;
+    /**
+     * Clean up elements that are far in the past
+     */
+    private cleanupOldElements;
+    /**
+     * Clear all connected media sources (for cleanup)
+     */
+    clearAll(): void;
+    /**
+     * Get connection status for testing/debugging
+     */
+    getConnectionInfo(): {
+        total: number;
+        connected: number;
+        prepared: number;
+    };
+    /**
+     * Set lookahead time
+     */
+    setLookaheadMs(lookaheadMs: number): void;
+    /**
+     * Get current lookahead time
+     */
+    getLookaheadMs(): number;
+}

package/dist/gui/services/ElementConnectionManager.js

@@ -0,0 +1,128 @@
+/**
+* Manages dynamic connection/disconnection of media elements to AudioContext
+* Extracted from ContextMixin to improve separation of concerns and testability
+*/
+var ElementConnectionManager = class {
+	constructor(lookaheadMs = 3e3) {
+		this.connectedMediaSources = /* @__PURE__ */ new Map();
+		this.lookaheadMs = lookaheadMs;
+	}
+	/**
+	* Update connected media elements based on current playhead position
+	* Connects upcoming elements and disconnects past elements
+	*/
+	async updateConnectedElements(audioContext, timegroup, currentMs) {
+		if (!audioContext || audioContext.state === "closed") return;
+		const allMediaElements = Array.from(timegroup.querySelectorAll("ef-audio, ef-video"));
+		const lookaheadMs = currentMs + this.lookaheadMs;
+		const elementsToConnect = this.getElementsToConnect(allMediaElements, currentMs, lookaheadMs);
+		await this.connectNewElements(audioContext, elementsToConnect);
+		await this.updateElementStates(currentMs);
+		this.cleanupOldElements(currentMs);
+	}
+	/**
+	* Find elements that should be connected based on timeline position
+	*/
+	getElementsToConnect(allElements, currentMs, lookaheadMs) {
+		return allElements.filter((mediaElement) => {
+			const startTime = mediaElement.startTimeMs;
+			const endTime = mediaElement.endTimeMs;
+			const isCurrentlyActive = currentMs >= startTime && currentMs < endTime;
+			const isStartingSoon = startTime > currentMs && startTime <= lookaheadMs;
+			return isCurrentlyActive || isStartingSoon;
+		});
+	}
+	/**
+	* Connect new elements that aren't already connected
+	*/
+	async connectNewElements(audioContext, elementsToConnect) {
+		for (const mediaElement of elementsToConnect) if (!this.connectedMediaSources.has(mediaElement)) {
+			const mediaElementSource = await mediaElement.getMediaElementSource(audioContext);
+			this.connectedMediaSources.set(mediaElement, {
+				mediaElementSource,
+				connected: false
+			});
+		}
+	}
+	/**
+	* Update connection states for all managed elements
+	*/
+	async updateElementStates(currentMs) {
+		for (const [mediaElement, sourceInfo] of this.connectedMediaSources.entries()) {
+			const startTime = mediaElement.startTimeMs;
+			const endTime = mediaElement.endTimeMs;
+			const isCurrentlyActive = currentMs >= startTime && currentMs < endTime;
+			if (isCurrentlyActive && !sourceInfo.connected) await this.activateElement(mediaElement, sourceInfo);
+			else if (!isCurrentlyActive && sourceInfo.connected) await this.deactivateElement(mediaElement, sourceInfo);
+		}
+	}
+	/**
+	* Activate an element (connect to destination and start playback)
+	*/
+	async activateElement(mediaElement, sourceInfo) {
+		sourceInfo.mediaElementSource.connect(sourceInfo.mediaElementSource.context.destination);
+		sourceInfo.connected = true;
+		if (mediaElement.audioElement) {
+			const mediaTimeMs = mediaElement.currentSourceTimeMs;
+			mediaElement.audioElement.currentTime = mediaTimeMs / 1e3;
+			await mediaElement.audioElement.play();
+		}
+	}
+	/**
+	* Deactivate an element (disconnect but keep prepared)
+	*/
+	async deactivateElement(mediaElement, sourceInfo) {
+		sourceInfo.mediaElementSource.disconnect();
+		sourceInfo.connected = false;
+		if (mediaElement.audioElement) mediaElement.audioElement.pause();
+	}
+	/**
+	* Clean up elements that are far in the past
+	*/
+	cleanupOldElements(currentMs) {
+		const cleanupThresholdMs = currentMs - this.lookaheadMs;
+		for (const [mediaElement, sourceInfo] of this.connectedMediaSources.entries()) {
+			const endTime = mediaElement.endTimeMs;
+			if (endTime < cleanupThresholdMs) {
+				if (sourceInfo.connected) sourceInfo.mediaElementSource.disconnect();
+				this.connectedMediaSources.delete(mediaElement);
+			}
+		}
+	}
+	/**
+	* Clear all connected media sources (for cleanup)
+	*/
+	clearAll() {
+		for (const [, sourceInfo] of this.connectedMediaSources.entries()) try {
+			if (sourceInfo.connected) sourceInfo.mediaElementSource.disconnect();
+		} catch (_error) {}
+		this.connectedMediaSources.clear();
+	}
+	/**
+	* Get connection status for testing/debugging
+	*/
+	getConnectionInfo() {
+		let connected = 0;
+		let prepared = 0;
+		for (const [, sourceInfo] of this.connectedMediaSources.entries()) if (sourceInfo.connected) connected++;
+		else prepared++;
+		return {
+			total: this.connectedMediaSources.size,
+			connected,
+			prepared
+		};
+	}
+	/**
+	* Set lookahead time
+	*/
+	setLookaheadMs(lookaheadMs) {
+		this.lookaheadMs = lookaheadMs;
+	}
+	/**
+	* Get current lookahead time
+	*/
+	getLookaheadMs() {
+		return this.lookaheadMs;
+	}
+};
+export { ElementConnectionManager };

package/dist/gui/services/PlaybackController.browsertest.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/gui/services/PlaybackController.d.ts

@@ -0,0 +1,103 @@
+export interface PlaybackControllerOptions {
+    fps?: number;
+    onTimeUpdate?: (timeMs: number) => void;
+    onPlayStateChange?: (playing: boolean) => void;
+    onError?: (error: Error) => void;
+}
+/**
+ * Manages playback timing, AudioContext lifecycle, and timeline synchronization
+ * Extracted from ContextMixin to improve separation of concerns and testability
+ */
+export declare class PlaybackController {
+    private playbackAudioContext;
+    private animationFrameRequest;
+    private options;
+    private playing;
+    private currentTimeMs;
+    private msPerFrame;
+    private audioStartTime;
+    private playbackStartTimeMs;
+    private activeChunks;
+    private chunkDurationMs;
+    private lookaheadChunks;
+    private currentChunkIndex;
+    private renderingChunks;
+    constructor(options?: PlaybackControllerOptions);
+    /**
+     * Start playback for the given timegroup
+     */
+    startPlayback(timegroup: any, fromMs?: number): Promise<void>;
+    /**
+     * Stop playback and clean up resources
+     */
+    stopPlayback(): Promise<void>;
+    /**
+     * Pause playback (can be resumed)
+     */
+    pausePlayback(): Promise<void>;
+    /**
+     * Resume paused playback
+     */
+    resumePlayback(): Promise<void>;
+    /**
+     * Seek to a specific time (restarts progressive playback from new position)
+     */
+    seekTo(timeMs: number, timegroup?: any): Promise<void>;
+    /**
+     * Internal method to sync playhead with unified audio buffer timing
+     */
+    private syncPlayheadToAudioBuffer;
+    /**
+     * Update playing state and notify observers
+     */
+    private setPlaying;
+    /**
+     * Get current playback state
+     */
+    isPlaying(): boolean;
+    /**
+     * Get current time
+     */
+    getCurrentTime(): number;
+    /**
+     * Get current AudioContext
+     */
+    getAudioContext(): AudioContext | null;
+    /**
+     * Check if AudioContext is ready
+     */
+    isAudioContextReady(): boolean;
+    /**
+     * Get playback statistics for debugging
+     */
+    getPlaybackInfo(): {
+        playing: boolean;
+        currentTimeMs: number;
+        audioContextState: string | null;
+        hasElementManager: boolean;
+    };
+    /**
+     * Update playback options
+     */
+    updateOptions(options: Partial<PlaybackControllerOptions>): void;
+    /**
+     * Start progressive chunk rendering and playback
+     */
+    private startProgressivePlayback;
+    /**
+     * Render and schedule a single audio chunk
+     */
+    private renderAndScheduleChunk;
+    /**
+     * Update chunk rendering as playhead advances - now handles all chunk management
+     */
+    private updateProgressiveChunks;
+    /**
+     * Systematically ensure chunks are ready ahead of current playback (synchronous)
+     */
+    private ensureChunksAhead;
+    /**
+     * Clean up chunks that are behind the current playhead
+     */
+    private cleanupOldChunks;
+}

package/dist/gui/services/PlaybackController.js

@@ -0,0 +1,290 @@
+/**
+* Manages playback timing, AudioContext lifecycle, and timeline synchronization
+* Extracted from ContextMixin to improve separation of concerns and testability
+*/
+var PlaybackController = class {
+	constructor(options = {}) {
+		this.playbackAudioContext = null;
+		this.animationFrameRequest = null;
+		this.playing = false;
+		this.currentTimeMs = 0;
+		this.audioStartTime = 0;
+		this.playbackStartTimeMs = 0;
+		this.activeChunks = /* @__PURE__ */ new Map();
+		this.chunkDurationMs = 4e3;
+		this.lookaheadChunks = 2;
+		this.currentChunkIndex = 0;
+		this.renderingChunks = /* @__PURE__ */ new Set();
+		this.options = {
+			fps: 30,
+			onTimeUpdate: () => {},
+			onPlayStateChange: () => {},
+			onError: () => {},
+			...options
+		};
+		this.msPerFrame = 1e3 / this.options.fps;
+	}
+	/**
+	* Start playback for the given timegroup
+	*/
+	async startPlayback(timegroup, fromMs) {
+		await this.stopPlayback();
+		if (!timegroup) {
+			this.setPlaying(false);
+			this.options.onPlayStateChange(false);
+			this.options.onError(/* @__PURE__ */ new Error("No timegroup provided"));
+			return;
+		}
+		await timegroup.waitForMediaDurations?.();
+		const currentMs = fromMs ?? timegroup.currentTimeMs ?? 0;
+		const toMs = timegroup.endTimeMs;
+		if (currentMs >= toMs) {
+			this.setPlaying(false);
+			this.options.onPlayStateChange(false);
+			return;
+		}
+		try {
+			this.playbackAudioContext = new AudioContext({ latencyHint: "playback" });
+			if (this.playbackAudioContext.state === "suspended") {
+				console.warn("AudioContext is suspended, attempting to resume...");
+				try {
+					await Promise.race([this.playbackAudioContext.resume(), new Promise((_, reject) => setTimeout(() => reject(/* @__PURE__ */ new Error("AudioContext resume timeout")), 2e3))]);
+				} catch (error) {
+					console.warn("AudioContext resume failed:", error);
+				}
+			} else await this.playbackAudioContext.resume();
+			this.audioStartTime = this.playbackAudioContext.currentTime;
+			this.playbackStartTimeMs = currentMs;
+			this.currentChunkIndex = Math.floor(currentMs / this.chunkDurationMs);
+			await this.startProgressivePlayback(timegroup, currentMs, toMs);
+			if (this.isAudioContextReady()) {
+				this.setPlaying(true);
+				this.currentTimeMs = currentMs;
+				this.options.onTimeUpdate(currentMs);
+				this.syncPlayheadToAudioBuffer(timegroup, currentMs);
+			} else {
+				this.setPlaying(false);
+				this.options.onPlayStateChange(false);
+				console.warn("AudioContext not ready for playback, state:", this.playbackAudioContext?.state);
+			}
+		} catch (error) {
+			console.error("🎵 [PLAYBACK_ERROR] Failed to setup progressive audio playback:", error);
+			this.setPlaying(false);
+			this.options.onPlayStateChange(false);
+			this.options.onError(error);
+		}
+	}
+	/**
+	* Stop playback and clean up resources
+	*/
+	async stopPlayback() {
+		for (const [_chunkIndex, bufferSource] of this.activeChunks.entries()) try {
+			bufferSource.stop();
+		} catch (_error) {}
+		this.activeChunks.clear();
+		this.renderingChunks.clear();
+		if (this.playbackAudioContext) {
+			if (this.playbackAudioContext.state !== "closed") await this.playbackAudioContext.close();
+		}
+		if (this.animationFrameRequest) {
+			cancelAnimationFrame(this.animationFrameRequest);
+			this.animationFrameRequest = null;
+		}
+		this.playbackAudioContext = null;
+		this.setPlaying(false);
+	}
+	/**
+	* Pause playback (can be resumed)
+	*/
+	async pausePlayback() {
+		if (this.playbackAudioContext && this.playbackAudioContext.state === "running") try {
+			await Promise.race([this.playbackAudioContext.suspend(), new Promise((_, reject) => setTimeout(() => reject(/* @__PURE__ */ new Error("AudioContext suspend timeout")), 2e3))]);
+		} catch (error) {
+			console.warn("AudioContext suspend failed:", error);
+		}
+		if (this.animationFrameRequest) {
+			cancelAnimationFrame(this.animationFrameRequest);
+			this.animationFrameRequest = null;
+		}
+		this.setPlaying(false);
+	}
+	/**
+	* Resume paused playback
+	*/
+	async resumePlayback() {
+		if (this.playbackAudioContext && this.playbackAudioContext.state === "suspended") {
+			try {
+				await Promise.race([this.playbackAudioContext.resume(), new Promise((_, reject) => setTimeout(() => reject(/* @__PURE__ */ new Error("AudioContext resume timeout")), 2e3))]);
+			} catch (error) {
+				console.warn("AudioContext resume failed:", error);
+			}
+			this.setPlaying(true);
+		}
+	}
+	/**
+	* Seek to a specific time (restarts progressive playback from new position)
+	*/
+	async seekTo(timeMs, timegroup) {
+		this.currentTimeMs = timeMs;
+		this.options.onTimeUpdate(timeMs);
+		if (this.playing && timegroup) {
+			for (const bufferSource of this.activeChunks.values()) try {
+				bufferSource.stop();
+			} catch (_error) {}
+			this.activeChunks.clear();
+			this.renderingChunks.clear();
+			this.audioStartTime = this.playbackAudioContext?.currentTime ?? 0;
+			this.playbackStartTimeMs = timeMs;
+			this.currentChunkIndex = Math.floor(timeMs / this.chunkDurationMs);
+			await this.startProgressivePlayback(timegroup, timeMs, timegroup.endTimeMs);
+		}
+	}
+	/**
+	* Internal method to sync playhead with unified audio buffer timing
+	*/
+	syncPlayheadToAudioBuffer(timegroup, startMs) {
+		if (!this.playbackAudioContext || !this.playing) return;
+		const elapsedAudioTime = this.playbackAudioContext.currentTime - this.audioStartTime;
+		const rawTimeMs = startMs + elapsedAudioTime * 1e3;
+		const nextTimeMs = Math.round(rawTimeMs / this.msPerFrame) * this.msPerFrame;
+		if (nextTimeMs !== this.currentTimeMs) {
+			this.currentTimeMs = nextTimeMs;
+			this.options.onTimeUpdate(nextTimeMs);
+			if (timegroup && timegroup.currentTimeMs !== nextTimeMs) timegroup.currentTimeMs = nextTimeMs;
+			this.updateProgressiveChunks(timegroup, nextTimeMs, timegroup.endTimeMs);
+		}
+		this.animationFrameRequest = requestAnimationFrame(() => {
+			this.syncPlayheadToAudioBuffer(timegroup, startMs);
+		});
+	}
+	/**
+	* Update playing state and notify observers
+	*/
+	setPlaying(playing) {
+		if (this.playing !== playing) {
+			this.playing = playing;
+			this.options.onPlayStateChange(playing);
+		}
+	}
+	/**
+	* Get current playback state
+	*/
+	isPlaying() {
+		return this.playing;
+	}
+	/**
+	* Get current time
+	*/
+	getCurrentTime() {
+		return this.currentTimeMs;
+	}
+	/**
+	* Get current AudioContext
+	*/
+	getAudioContext() {
+		return this.playbackAudioContext;
+	}
+	/**
+	* Check if AudioContext is ready
+	*/
+	isAudioContextReady() {
+		return this.playbackAudioContext != null && this.playbackAudioContext.state !== "closed";
+	}
+	/**
+	* Get playback statistics for debugging
+	*/
+	getPlaybackInfo() {
+		return {
+			playing: this.playing,
+			currentTimeMs: this.currentTimeMs,
+			audioContextState: this.playbackAudioContext?.state || null,
+			hasElementManager: false
+		};
+	}
+	/**
+	* Update playback options
+	*/
+	updateOptions(options) {
+		Object.assign(this.options, options);
+		if (options.fps) this.msPerFrame = 1e3 / options.fps;
+	}
+	/**
+	* Start progressive chunk rendering and playback
+	*/
+	async startProgressivePlayback(timegroup, fromMs, _toMs) {
+		const firstChunkIndex = Math.floor(fromMs / this.chunkDurationMs);
+		const firstChunkStart = firstChunkIndex * this.chunkDurationMs;
+		const offsetInChunk = fromMs - firstChunkStart;
+		await this.renderAndScheduleChunk(timegroup, firstChunkStart, firstChunkIndex, offsetInChunk);
+	}
+	/**
+	* Render and schedule a single audio chunk
+	*/
+	async renderAndScheduleChunk(timegroup, chunkStartMs, chunkIndex, offsetInChunk = 0) {
+		if (this.renderingChunks.has(chunkIndex) || this.activeChunks.has(chunkIndex)) return;
+		this.renderingChunks.add(chunkIndex);
+		try {
+			const chunkEndMs = chunkStartMs + this.chunkDurationMs;
+			const chunkBuffer = await timegroup.renderAudio(chunkStartMs, chunkEndMs);
+			const bufferSource = this.playbackAudioContext?.createBufferSource();
+			if (!bufferSource || !this.playbackAudioContext?.destination) throw new Error("Audio context or buffer source not available");
+			bufferSource.buffer = chunkBuffer;
+			bufferSource.connect(this.playbackAudioContext.destination);
+			const chunkTimelineStartMs = chunkIndex * this.chunkDurationMs;
+			const relativeDelayMs = Math.max(0, chunkTimelineStartMs - this.playbackStartTimeMs);
+			const chunkStartTime = this.audioStartTime + relativeDelayMs / 1e3;
+			const startOffset = offsetInChunk / 1e3;
+			const now = this.playbackAudioContext?.currentTime ?? 0;
+			if (chunkStartTime <= now) console.warn(`🎵 [CHUNK_TIMING_WARNING] Chunk ${chunkIndex} scheduled in the past! startTime=${chunkStartTime.toFixed(3)}s, currentTime=${now.toFixed(3)}s`);
+			bufferSource.start(chunkStartTime, startOffset);
+			this.activeChunks.set(chunkIndex, bufferSource);
+			bufferSource.onended = () => {
+				this.activeChunks.delete(chunkIndex);
+			};
+		} catch (error) {
+			console.error(`🎵 [CHUNK_ERROR] Failed to render chunk ${chunkIndex}:`, error);
+		} finally {
+			this.renderingChunks.delete(chunkIndex);
+		}
+	}
+	/**
+	* Update chunk rendering as playhead advances - now handles all chunk management
+	*/
+	updateProgressiveChunks(timegroup, currentTimeMs, maxTimeMs) {
+		const newChunkIndex = Math.floor(currentTimeMs / this.chunkDurationMs);
+		if (newChunkIndex !== this.currentChunkIndex) {
+			this.currentChunkIndex = newChunkIndex;
+			this.cleanupOldChunks();
+		}
+		this.ensureChunksAhead(timegroup, maxTimeMs);
+	}
+	/**
+	* Systematically ensure chunks are ready ahead of current playback (synchronous)
+	*/
+	ensureChunksAhead(timegroup, maxTimeMs) {
+		for (let i = 1; i <= this.lookaheadChunks; i++) {
+			const targetChunkIndex = this.currentChunkIndex + i;
+			const targetChunkStartMs = targetChunkIndex * this.chunkDurationMs;
+			if (targetChunkStartMs >= maxTimeMs) break;
+			if (!this.renderingChunks.has(targetChunkIndex) && !this.activeChunks.has(targetChunkIndex)) {
+				const offsetInChunk = 0;
+				this.renderAndScheduleChunk(timegroup, targetChunkStartMs, targetChunkIndex, offsetInChunk).catch((error) => {
+					console.error(`🎵 [ENSURE_CHUNKS_ERROR] Failed to render chunk ${targetChunkIndex}:`, error);
+				});
+			}
+		}
+	}
+	/**
+	* Clean up chunks that are behind the current playhead
+	*/
+	cleanupOldChunks() {
+		const cutoffChunkIndex = this.currentChunkIndex - 1;
+		for (const [chunkIndex, bufferSource] of this.activeChunks.entries()) if (chunkIndex < cutoffChunkIndex) {
+			try {
+				bufferSource.stop();
+			} catch (_error) {}
+			this.activeChunks.delete(chunkIndex);
+		}
+	}
+};
+export { PlaybackController };