@editframe/elements 0.35.0-beta → 0.36.0-beta

package/dist/gui/TWMixin.js

@@ -1,5 +1,5 @@
 //#region src/gui/TWMixin.css?inline
-var TWMixin_default = "/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n::before,\n::after {\n  --tw-content: '';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n  font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n  font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\nsup {\n  top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n  text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n  outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n  vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n  display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nlegend {\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n  resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n  display: none;\n}\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\n.\\!container {\n  width: 100% !important;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .\\!container {\n    max-width: 640px !important;\n  }\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .\\!container {\n    max-width: 768px !important;\n  }\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .\\!container {\n    max-width: 1024px !important;\n  }\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .\\!container {\n    max-width: 1280px !important;\n  }\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .\\!container {\n    max-width: 1536px !important;\n  }\n  .container {\n    max-width: 1536px;\n  }\n}\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\n.\\!visible {\n  visibility: visible !important;\n}\n.visible {\n  visibility: visible;\n}\n.invisible {\n  visibility: hidden;\n}\n.collapse {\n  visibility: collapse;\n}\n.static {\n  position: static;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.inset-0 {\n  inset: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.isolate {\n  isolation: isolate;\n}\n.z-\\[5\\] {\n  z-index: 5;\n}\n.mb-0 {\n  margin-bottom: 0px;\n}\n.mb-\\[1px\\] {\n  margin-bottom: 1px;\n}\n.block {\n  display: block;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.inline-grid {\n  display: inline-grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.size-full {\n  width: 100%;\n  height: 100%;\n}\n.h-\\[1\\.1rem\\] {\n  height: 1.1rem;\n}\n.h-\\[200px\\] {\n  height: 200px;\n}\n.h-\\[270px\\] {\n  height: 270px;\n}\n.h-\\[300px\\] {\n  height: 300px;\n}\n.h-\\[360px\\] {\n  height: 360px;\n}\n.h-\\[400px\\] {\n  height: 400px;\n}\n.h-\\[500px\\] {\n  height: 500px;\n}\n.h-\\[5px\\] {\n  height: 5px;\n}\n.h-full {\n  height: 100%;\n}\n.w-1 {\n  width: 0.25rem;\n}\n.w-\\[1000px\\] {\n  width: 1000px;\n}\n.w-\\[200px\\] {\n  width: 200px;\n}\n.w-\\[480px\\] {\n  width: 480px;\n}\n.w-\\[600px\\] {\n  width: 600px;\n}\n.w-\\[640px\\] {\n  width: 640px;\n}\n.w-full {\n  width: 100%;\n}\n.flex-shrink {\n  flex-shrink: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.\\!transform {\n  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)) !important;\n}\n.transform {\n  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));\n}\n.cursor-grabbing {\n  cursor: grabbing;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.resize {\n  resize: both;\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-nowrap {\n  text-wrap: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.border {\n  border-width: 1px;\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-lime-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(163 230 53 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));\n}\n.object-contain {\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n.p-4 {\n  padding: 1rem;\n}\n.px-0\\.5 {\n  padding-left: 0.125rem;\n  padding-right: 0.125rem;\n}\n.text-center {\n  text-align: center;\n}\n.text-\\[8px\\] {\n  font-size: 8px;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.italic {\n  font-style: italic;\n}\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.text-green-200 {\n  --tw-text-opacity: 1;\n  color: rgb(187 247 208 / var(--tw-text-opacity, 1));\n}\n.text-green-900 {\n  --tw-text-opacity: 1;\n  color: rgb(20 83 45 / var(--tw-text-opacity, 1));\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.blur {\n  --tw-blur: blur(8px);\n  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);\n}\n.drop-shadow {\n  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));\n  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);\n}\n.filter {\n  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);\n}\n.backdrop-filter {\n  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);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ease-in {\n  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n";
+var TWMixin_default = "/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n::before,\n::after {\n  --tw-content: '';\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n  font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n  font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\nsup {\n  top: -0.5em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n  text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n:-moz-focusring {\n  outline: auto;\n}\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\nprogress {\n  vertical-align: baseline;\n}\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\nsummary {\n  display: list-item;\n}\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nlegend {\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n  resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n  display: none;\n}\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\n.\\!container {\n  width: 100% !important;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n  .\\!container {\n    max-width: 640px !important;\n  }\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n  .\\!container {\n    max-width: 768px !important;\n  }\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n  .\\!container {\n    max-width: 1024px !important;\n  }\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n  .\\!container {\n    max-width: 1280px !important;\n  }\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n  .\\!container {\n    max-width: 1536px !important;\n  }\n  .container {\n    max-width: 1536px;\n  }\n}\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\n.\\!visible {\n  visibility: visible !important;\n}\n.visible {\n  visibility: visible;\n}\n.invisible {\n  visibility: hidden;\n}\n.collapse {\n  visibility: collapse;\n}\n.static {\n  position: static;\n}\n.fixed {\n  position: fixed;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.sticky {\n  position: sticky;\n}\n.inset-0 {\n  inset: 0px;\n}\n.left-0 {\n  left: 0px;\n}\n.top-0 {\n  top: 0px;\n}\n.isolate {\n  isolation: isolate;\n}\n.z-\\[5\\] {\n  z-index: 5;\n}\n.mb-0 {\n  margin-bottom: 0px;\n}\n.mb-\\[1px\\] {\n  margin-bottom: 1px;\n}\n.block {\n  display: block;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.inline-grid {\n  display: inline-grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.size-full {\n  width: 100%;\n  height: 100%;\n}\n.h-\\[1\\.1rem\\] {\n  height: 1.1rem;\n}\n.h-\\[1080px\\] {\n  height: 1080px;\n}\n.h-\\[200px\\] {\n  height: 200px;\n}\n.h-\\[270px\\] {\n  height: 270px;\n}\n.h-\\[300px\\] {\n  height: 300px;\n}\n.h-\\[360px\\] {\n  height: 360px;\n}\n.h-\\[400px\\] {\n  height: 400px;\n}\n.h-\\[500px\\] {\n  height: 500px;\n}\n.h-\\[5px\\] {\n  height: 5px;\n}\n.h-full {\n  height: 100%;\n}\n.w-1 {\n  width: 0.25rem;\n}\n.w-\\[1000px\\] {\n  width: 1000px;\n}\n.w-\\[1080px\\] {\n  width: 1080px;\n}\n.w-\\[1920px\\] {\n  width: 1920px;\n}\n.w-\\[200px\\] {\n  width: 200px;\n}\n.w-\\[420px\\] {\n  width: 420px;\n}\n.w-\\[480px\\] {\n  width: 480px;\n}\n.w-\\[600px\\] {\n  width: 600px;\n}\n.w-\\[640px\\] {\n  width: 640px;\n}\n.w-full {\n  width: 100%;\n}\n.flex-shrink {\n  flex-shrink: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.\\!transform {\n  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)) !important;\n}\n.transform {\n  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));\n}\n.cursor-grabbing {\n  cursor: grabbing;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.resize {\n  resize: both;\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.items-center {\n  align-items: center;\n}\n.gap-2 {\n  gap: 0.5rem;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.overflow-visible {\n  overflow: visible;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-nowrap {\n  text-wrap: nowrap;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.border {\n  border-width: 1px;\n}\n.bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\n}\n.bg-lime-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(163 230 53 / var(--tw-bg-opacity, 1));\n}\n.bg-slate-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));\n}\n.bg-yellow-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));\n}\n.object-contain {\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n.p-4 {\n  padding: 1rem;\n}\n.px-0\\.5 {\n  padding-left: 0.125rem;\n  padding-right: 0.125rem;\n}\n.text-center {\n  text-align: center;\n}\n.text-\\[8px\\] {\n  font-size: 8px;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.capitalize {\n  text-transform: capitalize;\n}\n.italic {\n  font-style: italic;\n}\n.text-black {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\n}\n.text-green-200 {\n  --tw-text-opacity: 1;\n  color: rgb(187 247 208 / var(--tw-text-opacity, 1));\n}\n.text-green-900 {\n  --tw-text-opacity: 1;\n  color: rgb(20 83 45 / var(--tw-text-opacity, 1));\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.blur {\n  --tw-blur: blur(8px);\n  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);\n}\n.drop-shadow {\n  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));\n  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);\n}\n.filter {\n  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);\n}\n.backdrop-filter {\n  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);\n}\n.transition {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ease-in {\n  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n";
 
 //#endregion
 export { TWMixin_default as default };

package/dist/gui/TWMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"TWMixin.js","names":[],"sources":["../../src/gui/TWMixin.css?inline"],"sourcesContent":["export default \"/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\\n*, ::before, ::after {\\n  --tw-border-spacing-x: 0;\\n  --tw-border-spacing-y: 0;\\n  --tw-translate-x: 0;\\n  --tw-translate-y: 0;\\n  --tw-rotate: 0;\\n  --tw-skew-x: 0;\\n  --tw-skew-y: 0;\\n  --tw-scale-x: 1;\\n  --tw-scale-y: 1;\\n  --tw-pan-x:  ;\\n  --tw-pan-y:  ;\\n  --tw-pinch-zoom:  ;\\n  --tw-scroll-snap-strictness: proximity;\\n  --tw-gradient-from-position:  ;\\n  --tw-gradient-via-position:  ;\\n  --tw-gradient-to-position:  ;\\n  --tw-ordinal:  ;\\n  --tw-slashed-zero:  ;\\n  --tw-numeric-figure:  ;\\n  --tw-numeric-spacing:  ;\\n  --tw-numeric-fraction:  ;\\n  --tw-ring-inset:  ;\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgb(59 130 246 / 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000;\\n  --tw-shadow: 0 0 #0000;\\n  --tw-shadow-colored: 0 0 #0000;\\n  --tw-blur:  ;\\n  --tw-brightness:  ;\\n  --tw-contrast:  ;\\n  --tw-grayscale:  ;\\n  --tw-hue-rotate:  ;\\n  --tw-invert:  ;\\n  --tw-saturate:  ;\\n  --tw-sepia:  ;\\n  --tw-drop-shadow:  ;\\n  --tw-backdrop-blur:  ;\\n  --tw-backdrop-brightness:  ;\\n  --tw-backdrop-contrast:  ;\\n  --tw-backdrop-grayscale:  ;\\n  --tw-backdrop-hue-rotate:  ;\\n  --tw-backdrop-invert:  ;\\n  --tw-backdrop-opacity:  ;\\n  --tw-backdrop-saturate:  ;\\n  --tw-backdrop-sepia:  ;\\n  --tw-contain-size:  ;\\n  --tw-contain-layout:  ;\\n  --tw-contain-paint:  ;\\n  --tw-contain-style:  ;\\n}\\n::backdrop {\\n  --tw-border-spacing-x: 0;\\n  --tw-border-spacing-y: 0;\\n  --tw-translate-x: 0;\\n  --tw-translate-y: 0;\\n  --tw-rotate: 0;\\n  --tw-skew-x: 0;\\n  --tw-skew-y: 0;\\n  --tw-scale-x: 1;\\n  --tw-scale-y: 1;\\n  --tw-pan-x:  ;\\n  --tw-pan-y:  ;\\n  --tw-pinch-zoom:  ;\\n  --tw-scroll-snap-strictness: proximity;\\n  --tw-gradient-from-position:  ;\\n  --tw-gradient-via-position:  ;\\n  --tw-gradient-to-position:  ;\\n  --tw-ordinal:  ;\\n  --tw-slashed-zero:  ;\\n  --tw-numeric-figure:  ;\\n  --tw-numeric-spacing:  ;\\n  --tw-numeric-fraction:  ;\\n  --tw-ring-inset:  ;\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgb(59 130 246 / 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000;\\n  --tw-shadow: 0 0 #0000;\\n  --tw-shadow-colored: 0 0 #0000;\\n  --tw-blur:  ;\\n  --tw-brightness:  ;\\n  --tw-contrast:  ;\\n  --tw-grayscale:  ;\\n  --tw-hue-rotate:  ;\\n  --tw-invert:  ;\\n  --tw-saturate:  ;\\n  --tw-sepia:  ;\\n  --tw-drop-shadow:  ;\\n  --tw-backdrop-blur:  ;\\n  --tw-backdrop-brightness:  ;\\n  --tw-backdrop-contrast:  ;\\n  --tw-backdrop-grayscale:  ;\\n  --tw-backdrop-hue-rotate:  ;\\n  --tw-backdrop-invert:  ;\\n  --tw-backdrop-opacity:  ;\\n  --tw-backdrop-saturate:  ;\\n  --tw-backdrop-sepia:  ;\\n  --tw-contain-size:  ;\\n  --tw-contain-layout:  ;\\n  --tw-contain-paint:  ;\\n  --tw-contain-style:  ;\\n}\\n/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */\\n/*\\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\\n*/\\n*,\\n::before,\\n::after {\\n  box-sizing: border-box; /* 1 */\\n  border-width: 0; /* 2 */\\n  border-style: solid; /* 2 */\\n  border-color: #e5e7eb; /* 2 */\\n}\\n::before,\\n::after {\\n  --tw-content: '';\\n}\\n/*\\n1. Use a consistent sensible line-height in all browsers.\\n2. Prevent adjustments of font size after orientation changes in iOS.\\n3. Use a more readable tab size.\\n4. Use the user's configured `sans` font-family by default.\\n5. Use the user's configured `sans` font-feature-settings by default.\\n6. Use the user's configured `sans` font-variation-settings by default.\\n7. Disable tap highlights on iOS\\n*/\\nhtml,\\n:host {\\n  line-height: 1.5; /* 1 */\\n  -webkit-text-size-adjust: 100%; /* 2 */\\n  -moz-tab-size: 4; /* 3 */\\n  -o-tab-size: 4;\\n     tab-size: 4; /* 3 */\\n  font-family: ui-sans-serif, system-ui, sans-serif, \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\"; /* 4 */\\n  font-feature-settings: normal; /* 5 */\\n  font-variation-settings: normal; /* 6 */\\n  -webkit-tap-highlight-color: transparent; /* 7 */\\n}\\n/*\\n1. Remove the margin in all browsers.\\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\\n*/\\nbody {\\n  margin: 0; /* 1 */\\n  line-height: inherit; /* 2 */\\n}\\n/*\\n1. Add the correct height in Firefox.\\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\\n3. Ensure horizontal rules are visible by default.\\n*/\\nhr {\\n  height: 0; /* 1 */\\n  color: inherit; /* 2 */\\n  border-top-width: 1px; /* 3 */\\n}\\n/*\\nAdd the correct text decoration in Chrome, Edge, and Safari.\\n*/\\nabbr:where([title]) {\\n  -webkit-text-decoration: underline dotted;\\n          text-decoration: underline dotted;\\n}\\n/*\\nRemove the default font size and weight for headings.\\n*/\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6 {\\n  font-size: inherit;\\n  font-weight: inherit;\\n}\\n/*\\nReset links to optimize for opt-in styling instead of opt-out.\\n*/\\na {\\n  color: inherit;\\n  text-decoration: inherit;\\n}\\n/*\\nAdd the correct font weight in Edge and Safari.\\n*/\\nb,\\nstrong {\\n  font-weight: bolder;\\n}\\n/*\\n1. Use the user's configured `mono` font-family by default.\\n2. Use the user's configured `mono` font-feature-settings by default.\\n3. Use the user's configured `mono` font-variation-settings by default.\\n4. Correct the odd `em` font sizing in all browsers.\\n*/\\ncode,\\nkbd,\\nsamp,\\npre {\\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace; /* 1 */\\n  font-feature-settings: normal; /* 2 */\\n  font-variation-settings: normal; /* 3 */\\n  font-size: 1em; /* 4 */\\n}\\n/*\\nAdd the correct font size in all browsers.\\n*/\\nsmall {\\n  font-size: 80%;\\n}\\n/*\\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\\n*/\\nsub,\\nsup {\\n  font-size: 75%;\\n  line-height: 0;\\n  position: relative;\\n  vertical-align: baseline;\\n}\\nsub {\\n  bottom: -0.25em;\\n}\\nsup {\\n  top: -0.5em;\\n}\\n/*\\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\\n3. Remove gaps between table borders by default.\\n*/\\ntable {\\n  text-indent: 0; /* 1 */\\n  border-color: inherit; /* 2 */\\n  border-collapse: collapse; /* 3 */\\n}\\n/*\\n1. Change the font styles in all browsers.\\n2. Remove the margin in Firefox and Safari.\\n3. Remove default padding in all browsers.\\n*/\\nbutton,\\ninput,\\noptgroup,\\nselect,\\ntextarea {\\n  font-family: inherit; /* 1 */\\n  font-feature-settings: inherit; /* 1 */\\n  font-variation-settings: inherit; /* 1 */\\n  font-size: 100%; /* 1 */\\n  font-weight: inherit; /* 1 */\\n  line-height: inherit; /* 1 */\\n  letter-spacing: inherit; /* 1 */\\n  color: inherit; /* 1 */\\n  margin: 0; /* 2 */\\n  padding: 0; /* 3 */\\n}\\n/*\\nRemove the inheritance of text transform in Edge and Firefox.\\n*/\\nbutton,\\nselect {\\n  text-transform: none;\\n}\\n/*\\n1. Correct the inability to style clickable types in iOS and Safari.\\n2. Remove default button styles.\\n*/\\nbutton,\\ninput:where([type='button']),\\ninput:where([type='reset']),\\ninput:where([type='submit']) {\\n  -webkit-appearance: button; /* 1 */\\n  background-color: transparent; /* 2 */\\n  background-image: none; /* 2 */\\n}\\n/*\\nUse the modern Firefox focus style for all focusable elements.\\n*/\\n:-moz-focusring {\\n  outline: auto;\\n}\\n/*\\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\\n*/\\n:-moz-ui-invalid {\\n  box-shadow: none;\\n}\\n/*\\nAdd the correct vertical alignment in Chrome and Firefox.\\n*/\\nprogress {\\n  vertical-align: baseline;\\n}\\n/*\\nCorrect the cursor style of increment and decrement buttons in Safari.\\n*/\\n::-webkit-inner-spin-button,\\n::-webkit-outer-spin-button {\\n  height: auto;\\n}\\n/*\\n1. Correct the odd appearance in Chrome and Safari.\\n2. Correct the outline style in Safari.\\n*/\\n[type='search'] {\\n  -webkit-appearance: textfield; /* 1 */\\n  outline-offset: -2px; /* 2 */\\n}\\n/*\\nRemove the inner padding in Chrome and Safari on macOS.\\n*/\\n::-webkit-search-decoration {\\n  -webkit-appearance: none;\\n}\\n/*\\n1. Correct the inability to style clickable types in iOS and Safari.\\n2. Change font properties to `inherit` in Safari.\\n*/\\n::-webkit-file-upload-button {\\n  -webkit-appearance: button; /* 1 */\\n  font: inherit; /* 2 */\\n}\\n/*\\nAdd the correct display in Chrome and Safari.\\n*/\\nsummary {\\n  display: list-item;\\n}\\n/*\\nRemoves the default spacing and border for appropriate elements.\\n*/\\nblockquote,\\ndl,\\ndd,\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\nhr,\\nfigure,\\np,\\npre {\\n  margin: 0;\\n}\\nfieldset {\\n  margin: 0;\\n  padding: 0;\\n}\\nlegend {\\n  padding: 0;\\n}\\nol,\\nul,\\nmenu {\\n  list-style: none;\\n  margin: 0;\\n  padding: 0;\\n}\\n/*\\nReset default styling for dialogs.\\n*/\\ndialog {\\n  padding: 0;\\n}\\n/*\\nPrevent resizing textareas horizontally by default.\\n*/\\ntextarea {\\n  resize: vertical;\\n}\\n/*\\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\\n2. Set the default placeholder color to the user's configured gray 400 color.\\n*/\\ninput::-moz-placeholder, textarea::-moz-placeholder {\\n  opacity: 1; /* 1 */\\n  color: #9ca3af; /* 2 */\\n}\\ninput::placeholder,\\ntextarea::placeholder {\\n  opacity: 1; /* 1 */\\n  color: #9ca3af; /* 2 */\\n}\\n/*\\nSet the default cursor for buttons.\\n*/\\nbutton,\\n[role=\\\"button\\\"] {\\n  cursor: pointer;\\n}\\n/*\\nMake sure disabled buttons don't get the pointer cursor.\\n*/\\n:disabled {\\n  cursor: default;\\n}\\n/*\\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\\n   This can trigger a poorly considered lint error in some tools but is included by design.\\n*/\\nimg,\\nsvg,\\nvideo,\\ncanvas,\\naudio,\\niframe,\\nembed,\\nobject {\\n  display: block; /* 1 */\\n  vertical-align: middle; /* 2 */\\n}\\n/*\\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\\n*/\\nimg,\\nvideo {\\n  max-width: 100%;\\n  height: auto;\\n}\\n/* Make elements with the HTML hidden attribute stay hidden by default */\\n[hidden]:where(:not([hidden=\\\"until-found\\\"])) {\\n  display: none;\\n}\\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\\n.\\\\!container {\\n  width: 100% !important;\\n}\\n.container {\\n  width: 100%;\\n}\\n@media (min-width: 640px) {\\n  .\\\\!container {\\n    max-width: 640px !important;\\n  }\\n  .container {\\n    max-width: 640px;\\n  }\\n}\\n@media (min-width: 768px) {\\n  .\\\\!container {\\n    max-width: 768px !important;\\n  }\\n  .container {\\n    max-width: 768px;\\n  }\\n}\\n@media (min-width: 1024px) {\\n  .\\\\!container {\\n    max-width: 1024px !important;\\n  }\\n  .container {\\n    max-width: 1024px;\\n  }\\n}\\n@media (min-width: 1280px) {\\n  .\\\\!container {\\n    max-width: 1280px !important;\\n  }\\n  .container {\\n    max-width: 1280px;\\n  }\\n}\\n@media (min-width: 1536px) {\\n  .\\\\!container {\\n    max-width: 1536px !important;\\n  }\\n  .container {\\n    max-width: 1536px;\\n  }\\n}\\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\\n.\\\\!visible {\\n  visibility: visible !important;\\n}\\n.visible {\\n  visibility: visible;\\n}\\n.invisible {\\n  visibility: hidden;\\n}\\n.collapse {\\n  visibility: collapse;\\n}\\n.static {\\n  position: static;\\n}\\n.fixed {\\n  position: fixed;\\n}\\n.absolute {\\n  position: absolute;\\n}\\n.relative {\\n  position: relative;\\n}\\n.sticky {\\n  position: sticky;\\n}\\n.inset-0 {\\n  inset: 0px;\\n}\\n.left-0 {\\n  left: 0px;\\n}\\n.top-0 {\\n  top: 0px;\\n}\\n.isolate {\\n  isolation: isolate;\\n}\\n.z-\\\\[5\\\\] {\\n  z-index: 5;\\n}\\n.mb-0 {\\n  margin-bottom: 0px;\\n}\\n.mb-\\\\[1px\\\\] {\\n  margin-bottom: 1px;\\n}\\n.block {\\n  display: block;\\n}\\n.inline-block {\\n  display: inline-block;\\n}\\n.inline {\\n  display: inline;\\n}\\n.flex {\\n  display: flex;\\n}\\n.inline-flex {\\n  display: inline-flex;\\n}\\n.table {\\n  display: table;\\n}\\n.grid {\\n  display: grid;\\n}\\n.inline-grid {\\n  display: inline-grid;\\n}\\n.contents {\\n  display: contents;\\n}\\n.hidden {\\n  display: none;\\n}\\n.size-full {\\n  width: 100%;\\n  height: 100%;\\n}\\n.h-\\\\[1\\\\.1rem\\\\] {\\n  height: 1.1rem;\\n}\\n.h-\\\\[200px\\\\] {\\n  height: 200px;\\n}\\n.h-\\\\[270px\\\\] {\\n  height: 270px;\\n}\\n.h-\\\\[300px\\\\] {\\n  height: 300px;\\n}\\n.h-\\\\[360px\\\\] {\\n  height: 360px;\\n}\\n.h-\\\\[400px\\\\] {\\n  height: 400px;\\n}\\n.h-\\\\[500px\\\\] {\\n  height: 500px;\\n}\\n.h-\\\\[5px\\\\] {\\n  height: 5px;\\n}\\n.h-full {\\n  height: 100%;\\n}\\n.w-1 {\\n  width: 0.25rem;\\n}\\n.w-\\\\[1000px\\\\] {\\n  width: 1000px;\\n}\\n.w-\\\\[200px\\\\] {\\n  width: 200px;\\n}\\n.w-\\\\[480px\\\\] {\\n  width: 480px;\\n}\\n.w-\\\\[600px\\\\] {\\n  width: 600px;\\n}\\n.w-\\\\[640px\\\\] {\\n  width: 640px;\\n}\\n.w-full {\\n  width: 100%;\\n}\\n.flex-shrink {\\n  flex-shrink: 1;\\n}\\n.shrink {\\n  flex-shrink: 1;\\n}\\n.\\\\!transform {\\n  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)) !important;\\n}\\n.transform {\\n  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));\\n}\\n.cursor-grabbing {\\n  cursor: grabbing;\\n}\\n.cursor-pointer {\\n  cursor: pointer;\\n}\\n.resize {\\n  resize: both;\\n}\\n.flex-row {\\n  flex-direction: row;\\n}\\n.flex-wrap {\\n  flex-wrap: wrap;\\n}\\n.items-center {\\n  align-items: center;\\n}\\n.gap-2 {\\n  gap: 0.5rem;\\n}\\n.overflow-hidden {\\n  overflow: hidden;\\n}\\n.overflow-visible {\\n  overflow: visible;\\n}\\n.whitespace-nowrap {\\n  white-space: nowrap;\\n}\\n.text-nowrap {\\n  text-wrap: nowrap;\\n}\\n.rounded {\\n  border-radius: 0.25rem;\\n}\\n.border {\\n  border-width: 1px;\\n}\\n.bg-black {\\n  --tw-bg-opacity: 1;\\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\\n}\\n.bg-lime-400 {\\n  --tw-bg-opacity: 1;\\n  background-color: rgb(163 230 53 / var(--tw-bg-opacity, 1));\\n}\\n.bg-slate-500 {\\n  --tw-bg-opacity: 1;\\n  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));\\n}\\n.bg-yellow-400 {\\n  --tw-bg-opacity: 1;\\n  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));\\n}\\n.object-contain {\\n  -o-object-fit: contain;\\n     object-fit: contain;\\n}\\n.p-4 {\\n  padding: 1rem;\\n}\\n.px-0\\\\.5 {\\n  padding-left: 0.125rem;\\n  padding-right: 0.125rem;\\n}\\n.text-center {\\n  text-align: center;\\n}\\n.text-\\\\[8px\\\\] {\\n  font-size: 8px;\\n}\\n.text-sm {\\n  font-size: 0.875rem;\\n  line-height: 1.25rem;\\n}\\n.text-xs {\\n  font-size: 0.75rem;\\n  line-height: 1rem;\\n}\\n.font-bold {\\n  font-weight: 700;\\n}\\n.uppercase {\\n  text-transform: uppercase;\\n}\\n.capitalize {\\n  text-transform: capitalize;\\n}\\n.italic {\\n  font-style: italic;\\n}\\n.text-black {\\n  --tw-text-opacity: 1;\\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\\n}\\n.text-green-200 {\\n  --tw-text-opacity: 1;\\n  color: rgb(187 247 208 / var(--tw-text-opacity, 1));\\n}\\n.text-green-900 {\\n  --tw-text-opacity: 1;\\n  color: rgb(20 83 45 / var(--tw-text-opacity, 1));\\n}\\n.opacity-50 {\\n  opacity: 0.5;\\n}\\n.shadow {\\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\\n}\\n.outline {\\n  outline-style: solid;\\n}\\n.blur {\\n  --tw-blur: blur(8px);\\n  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);\\n}\\n.drop-shadow {\\n  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));\\n  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);\\n}\\n.filter {\\n  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);\\n}\\n.backdrop-filter {\\n  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);\\n}\\n.transition {\\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\\n  transition-duration: 150ms;\\n}\\n.ease-in {\\n  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\\n}\\n.ease-in-out {\\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n.ease-out {\\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\\n}\\n\""],"mappings":";AAAA,sBAAe"}
+{"version":3,"file":"TWMixin.js","names":[],"sources":["../../src/gui/TWMixin.css?inline"],"sourcesContent":["export default \"/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\\n*, ::before, ::after {\\n  --tw-border-spacing-x: 0;\\n  --tw-border-spacing-y: 0;\\n  --tw-translate-x: 0;\\n  --tw-translate-y: 0;\\n  --tw-rotate: 0;\\n  --tw-skew-x: 0;\\n  --tw-skew-y: 0;\\n  --tw-scale-x: 1;\\n  --tw-scale-y: 1;\\n  --tw-pan-x:  ;\\n  --tw-pan-y:  ;\\n  --tw-pinch-zoom:  ;\\n  --tw-scroll-snap-strictness: proximity;\\n  --tw-gradient-from-position:  ;\\n  --tw-gradient-via-position:  ;\\n  --tw-gradient-to-position:  ;\\n  --tw-ordinal:  ;\\n  --tw-slashed-zero:  ;\\n  --tw-numeric-figure:  ;\\n  --tw-numeric-spacing:  ;\\n  --tw-numeric-fraction:  ;\\n  --tw-ring-inset:  ;\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgb(59 130 246 / 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000;\\n  --tw-shadow: 0 0 #0000;\\n  --tw-shadow-colored: 0 0 #0000;\\n  --tw-blur:  ;\\n  --tw-brightness:  ;\\n  --tw-contrast:  ;\\n  --tw-grayscale:  ;\\n  --tw-hue-rotate:  ;\\n  --tw-invert:  ;\\n  --tw-saturate:  ;\\n  --tw-sepia:  ;\\n  --tw-drop-shadow:  ;\\n  --tw-backdrop-blur:  ;\\n  --tw-backdrop-brightness:  ;\\n  --tw-backdrop-contrast:  ;\\n  --tw-backdrop-grayscale:  ;\\n  --tw-backdrop-hue-rotate:  ;\\n  --tw-backdrop-invert:  ;\\n  --tw-backdrop-opacity:  ;\\n  --tw-backdrop-saturate:  ;\\n  --tw-backdrop-sepia:  ;\\n  --tw-contain-size:  ;\\n  --tw-contain-layout:  ;\\n  --tw-contain-paint:  ;\\n  --tw-contain-style:  ;\\n}\\n::backdrop {\\n  --tw-border-spacing-x: 0;\\n  --tw-border-spacing-y: 0;\\n  --tw-translate-x: 0;\\n  --tw-translate-y: 0;\\n  --tw-rotate: 0;\\n  --tw-skew-x: 0;\\n  --tw-skew-y: 0;\\n  --tw-scale-x: 1;\\n  --tw-scale-y: 1;\\n  --tw-pan-x:  ;\\n  --tw-pan-y:  ;\\n  --tw-pinch-zoom:  ;\\n  --tw-scroll-snap-strictness: proximity;\\n  --tw-gradient-from-position:  ;\\n  --tw-gradient-via-position:  ;\\n  --tw-gradient-to-position:  ;\\n  --tw-ordinal:  ;\\n  --tw-slashed-zero:  ;\\n  --tw-numeric-figure:  ;\\n  --tw-numeric-spacing:  ;\\n  --tw-numeric-fraction:  ;\\n  --tw-ring-inset:  ;\\n  --tw-ring-offset-width: 0px;\\n  --tw-ring-offset-color: #fff;\\n  --tw-ring-color: rgb(59 130 246 / 0.5);\\n  --tw-ring-offset-shadow: 0 0 #0000;\\n  --tw-ring-shadow: 0 0 #0000;\\n  --tw-shadow: 0 0 #0000;\\n  --tw-shadow-colored: 0 0 #0000;\\n  --tw-blur:  ;\\n  --tw-brightness:  ;\\n  --tw-contrast:  ;\\n  --tw-grayscale:  ;\\n  --tw-hue-rotate:  ;\\n  --tw-invert:  ;\\n  --tw-saturate:  ;\\n  --tw-sepia:  ;\\n  --tw-drop-shadow:  ;\\n  --tw-backdrop-blur:  ;\\n  --tw-backdrop-brightness:  ;\\n  --tw-backdrop-contrast:  ;\\n  --tw-backdrop-grayscale:  ;\\n  --tw-backdrop-hue-rotate:  ;\\n  --tw-backdrop-invert:  ;\\n  --tw-backdrop-opacity:  ;\\n  --tw-backdrop-saturate:  ;\\n  --tw-backdrop-sepia:  ;\\n  --tw-contain-size:  ;\\n  --tw-contain-layout:  ;\\n  --tw-contain-paint:  ;\\n  --tw-contain-style:  ;\\n}\\n/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */\\n/*\\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\\n*/\\n*,\\n::before,\\n::after {\\n  box-sizing: border-box; /* 1 */\\n  border-width: 0; /* 2 */\\n  border-style: solid; /* 2 */\\n  border-color: #e5e7eb; /* 2 */\\n}\\n::before,\\n::after {\\n  --tw-content: '';\\n}\\n/*\\n1. Use a consistent sensible line-height in all browsers.\\n2. Prevent adjustments of font size after orientation changes in iOS.\\n3. Use a more readable tab size.\\n4. Use the user's configured `sans` font-family by default.\\n5. Use the user's configured `sans` font-feature-settings by default.\\n6. Use the user's configured `sans` font-variation-settings by default.\\n7. Disable tap highlights on iOS\\n*/\\nhtml,\\n:host {\\n  line-height: 1.5; /* 1 */\\n  -webkit-text-size-adjust: 100%; /* 2 */\\n  -moz-tab-size: 4; /* 3 */\\n  -o-tab-size: 4;\\n     tab-size: 4; /* 3 */\\n  font-family: ui-sans-serif, system-ui, sans-serif, \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\"; /* 4 */\\n  font-feature-settings: normal; /* 5 */\\n  font-variation-settings: normal; /* 6 */\\n  -webkit-tap-highlight-color: transparent; /* 7 */\\n}\\n/*\\n1. Remove the margin in all browsers.\\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\\n*/\\nbody {\\n  margin: 0; /* 1 */\\n  line-height: inherit; /* 2 */\\n}\\n/*\\n1. Add the correct height in Firefox.\\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\\n3. Ensure horizontal rules are visible by default.\\n*/\\nhr {\\n  height: 0; /* 1 */\\n  color: inherit; /* 2 */\\n  border-top-width: 1px; /* 3 */\\n}\\n/*\\nAdd the correct text decoration in Chrome, Edge, and Safari.\\n*/\\nabbr:where([title]) {\\n  -webkit-text-decoration: underline dotted;\\n          text-decoration: underline dotted;\\n}\\n/*\\nRemove the default font size and weight for headings.\\n*/\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6 {\\n  font-size: inherit;\\n  font-weight: inherit;\\n}\\n/*\\nReset links to optimize for opt-in styling instead of opt-out.\\n*/\\na {\\n  color: inherit;\\n  text-decoration: inherit;\\n}\\n/*\\nAdd the correct font weight in Edge and Safari.\\n*/\\nb,\\nstrong {\\n  font-weight: bolder;\\n}\\n/*\\n1. Use the user's configured `mono` font-family by default.\\n2. Use the user's configured `mono` font-feature-settings by default.\\n3. Use the user's configured `mono` font-variation-settings by default.\\n4. Correct the odd `em` font sizing in all browsers.\\n*/\\ncode,\\nkbd,\\nsamp,\\npre {\\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace; /* 1 */\\n  font-feature-settings: normal; /* 2 */\\n  font-variation-settings: normal; /* 3 */\\n  font-size: 1em; /* 4 */\\n}\\n/*\\nAdd the correct font size in all browsers.\\n*/\\nsmall {\\n  font-size: 80%;\\n}\\n/*\\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\\n*/\\nsub,\\nsup {\\n  font-size: 75%;\\n  line-height: 0;\\n  position: relative;\\n  vertical-align: baseline;\\n}\\nsub {\\n  bottom: -0.25em;\\n}\\nsup {\\n  top: -0.5em;\\n}\\n/*\\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\\n3. Remove gaps between table borders by default.\\n*/\\ntable {\\n  text-indent: 0; /* 1 */\\n  border-color: inherit; /* 2 */\\n  border-collapse: collapse; /* 3 */\\n}\\n/*\\n1. Change the font styles in all browsers.\\n2. Remove the margin in Firefox and Safari.\\n3. Remove default padding in all browsers.\\n*/\\nbutton,\\ninput,\\noptgroup,\\nselect,\\ntextarea {\\n  font-family: inherit; /* 1 */\\n  font-feature-settings: inherit; /* 1 */\\n  font-variation-settings: inherit; /* 1 */\\n  font-size: 100%; /* 1 */\\n  font-weight: inherit; /* 1 */\\n  line-height: inherit; /* 1 */\\n  letter-spacing: inherit; /* 1 */\\n  color: inherit; /* 1 */\\n  margin: 0; /* 2 */\\n  padding: 0; /* 3 */\\n}\\n/*\\nRemove the inheritance of text transform in Edge and Firefox.\\n*/\\nbutton,\\nselect {\\n  text-transform: none;\\n}\\n/*\\n1. Correct the inability to style clickable types in iOS and Safari.\\n2. Remove default button styles.\\n*/\\nbutton,\\ninput:where([type='button']),\\ninput:where([type='reset']),\\ninput:where([type='submit']) {\\n  -webkit-appearance: button; /* 1 */\\n  background-color: transparent; /* 2 */\\n  background-image: none; /* 2 */\\n}\\n/*\\nUse the modern Firefox focus style for all focusable elements.\\n*/\\n:-moz-focusring {\\n  outline: auto;\\n}\\n/*\\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\\n*/\\n:-moz-ui-invalid {\\n  box-shadow: none;\\n}\\n/*\\nAdd the correct vertical alignment in Chrome and Firefox.\\n*/\\nprogress {\\n  vertical-align: baseline;\\n}\\n/*\\nCorrect the cursor style of increment and decrement buttons in Safari.\\n*/\\n::-webkit-inner-spin-button,\\n::-webkit-outer-spin-button {\\n  height: auto;\\n}\\n/*\\n1. Correct the odd appearance in Chrome and Safari.\\n2. Correct the outline style in Safari.\\n*/\\n[type='search'] {\\n  -webkit-appearance: textfield; /* 1 */\\n  outline-offset: -2px; /* 2 */\\n}\\n/*\\nRemove the inner padding in Chrome and Safari on macOS.\\n*/\\n::-webkit-search-decoration {\\n  -webkit-appearance: none;\\n}\\n/*\\n1. Correct the inability to style clickable types in iOS and Safari.\\n2. Change font properties to `inherit` in Safari.\\n*/\\n::-webkit-file-upload-button {\\n  -webkit-appearance: button; /* 1 */\\n  font: inherit; /* 2 */\\n}\\n/*\\nAdd the correct display in Chrome and Safari.\\n*/\\nsummary {\\n  display: list-item;\\n}\\n/*\\nRemoves the default spacing and border for appropriate elements.\\n*/\\nblockquote,\\ndl,\\ndd,\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\nhr,\\nfigure,\\np,\\npre {\\n  margin: 0;\\n}\\nfieldset {\\n  margin: 0;\\n  padding: 0;\\n}\\nlegend {\\n  padding: 0;\\n}\\nol,\\nul,\\nmenu {\\n  list-style: none;\\n  margin: 0;\\n  padding: 0;\\n}\\n/*\\nReset default styling for dialogs.\\n*/\\ndialog {\\n  padding: 0;\\n}\\n/*\\nPrevent resizing textareas horizontally by default.\\n*/\\ntextarea {\\n  resize: vertical;\\n}\\n/*\\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\\n2. Set the default placeholder color to the user's configured gray 400 color.\\n*/\\ninput::-moz-placeholder, textarea::-moz-placeholder {\\n  opacity: 1; /* 1 */\\n  color: #9ca3af; /* 2 */\\n}\\ninput::placeholder,\\ntextarea::placeholder {\\n  opacity: 1; /* 1 */\\n  color: #9ca3af; /* 2 */\\n}\\n/*\\nSet the default cursor for buttons.\\n*/\\nbutton,\\n[role=\\\"button\\\"] {\\n  cursor: pointer;\\n}\\n/*\\nMake sure disabled buttons don't get the pointer cursor.\\n*/\\n:disabled {\\n  cursor: default;\\n}\\n/*\\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\\n   This can trigger a poorly considered lint error in some tools but is included by design.\\n*/\\nimg,\\nsvg,\\nvideo,\\ncanvas,\\naudio,\\niframe,\\nembed,\\nobject {\\n  display: block; /* 1 */\\n  vertical-align: middle; /* 2 */\\n}\\n/*\\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\\n*/\\nimg,\\nvideo {\\n  max-width: 100%;\\n  height: auto;\\n}\\n/* Make elements with the HTML hidden attribute stay hidden by default */\\n[hidden]:where(:not([hidden=\\\"until-found\\\"])) {\\n  display: none;\\n}\\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\\n.\\\\!container {\\n  width: 100% !important;\\n}\\n.container {\\n  width: 100%;\\n}\\n@media (min-width: 640px) {\\n  .\\\\!container {\\n    max-width: 640px !important;\\n  }\\n  .container {\\n    max-width: 640px;\\n  }\\n}\\n@media (min-width: 768px) {\\n  .\\\\!container {\\n    max-width: 768px !important;\\n  }\\n  .container {\\n    max-width: 768px;\\n  }\\n}\\n@media (min-width: 1024px) {\\n  .\\\\!container {\\n    max-width: 1024px !important;\\n  }\\n  .container {\\n    max-width: 1024px;\\n  }\\n}\\n@media (min-width: 1280px) {\\n  .\\\\!container {\\n    max-width: 1280px !important;\\n  }\\n  .container {\\n    max-width: 1280px;\\n  }\\n}\\n@media (min-width: 1536px) {\\n  .\\\\!container {\\n    max-width: 1536px !important;\\n  }\\n  .container {\\n    max-width: 1536px;\\n  }\\n}\\n/* biome-ignore lint/suspicious/noUnknownAtRules: @tailwind is a valid Tailwind CSS directive */\\n.\\\\!visible {\\n  visibility: visible !important;\\n}\\n.visible {\\n  visibility: visible;\\n}\\n.invisible {\\n  visibility: hidden;\\n}\\n.collapse {\\n  visibility: collapse;\\n}\\n.static {\\n  position: static;\\n}\\n.fixed {\\n  position: fixed;\\n}\\n.absolute {\\n  position: absolute;\\n}\\n.relative {\\n  position: relative;\\n}\\n.sticky {\\n  position: sticky;\\n}\\n.inset-0 {\\n  inset: 0px;\\n}\\n.left-0 {\\n  left: 0px;\\n}\\n.top-0 {\\n  top: 0px;\\n}\\n.isolate {\\n  isolation: isolate;\\n}\\n.z-\\\\[5\\\\] {\\n  z-index: 5;\\n}\\n.mb-0 {\\n  margin-bottom: 0px;\\n}\\n.mb-\\\\[1px\\\\] {\\n  margin-bottom: 1px;\\n}\\n.block {\\n  display: block;\\n}\\n.inline-block {\\n  display: inline-block;\\n}\\n.inline {\\n  display: inline;\\n}\\n.flex {\\n  display: flex;\\n}\\n.inline-flex {\\n  display: inline-flex;\\n}\\n.table {\\n  display: table;\\n}\\n.grid {\\n  display: grid;\\n}\\n.inline-grid {\\n  display: inline-grid;\\n}\\n.contents {\\n  display: contents;\\n}\\n.hidden {\\n  display: none;\\n}\\n.size-full {\\n  width: 100%;\\n  height: 100%;\\n}\\n.h-\\\\[1\\\\.1rem\\\\] {\\n  height: 1.1rem;\\n}\\n.h-\\\\[1080px\\\\] {\\n  height: 1080px;\\n}\\n.h-\\\\[200px\\\\] {\\n  height: 200px;\\n}\\n.h-\\\\[270px\\\\] {\\n  height: 270px;\\n}\\n.h-\\\\[300px\\\\] {\\n  height: 300px;\\n}\\n.h-\\\\[360px\\\\] {\\n  height: 360px;\\n}\\n.h-\\\\[400px\\\\] {\\n  height: 400px;\\n}\\n.h-\\\\[500px\\\\] {\\n  height: 500px;\\n}\\n.h-\\\\[5px\\\\] {\\n  height: 5px;\\n}\\n.h-full {\\n  height: 100%;\\n}\\n.w-1 {\\n  width: 0.25rem;\\n}\\n.w-\\\\[1000px\\\\] {\\n  width: 1000px;\\n}\\n.w-\\\\[1080px\\\\] {\\n  width: 1080px;\\n}\\n.w-\\\\[1920px\\\\] {\\n  width: 1920px;\\n}\\n.w-\\\\[200px\\\\] {\\n  width: 200px;\\n}\\n.w-\\\\[420px\\\\] {\\n  width: 420px;\\n}\\n.w-\\\\[480px\\\\] {\\n  width: 480px;\\n}\\n.w-\\\\[600px\\\\] {\\n  width: 600px;\\n}\\n.w-\\\\[640px\\\\] {\\n  width: 640px;\\n}\\n.w-full {\\n  width: 100%;\\n}\\n.flex-shrink {\\n  flex-shrink: 1;\\n}\\n.shrink {\\n  flex-shrink: 1;\\n}\\n.\\\\!transform {\\n  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)) !important;\\n}\\n.transform {\\n  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));\\n}\\n.cursor-grabbing {\\n  cursor: grabbing;\\n}\\n.cursor-pointer {\\n  cursor: pointer;\\n}\\n.resize {\\n  resize: both;\\n}\\n.flex-row {\\n  flex-direction: row;\\n}\\n.flex-wrap {\\n  flex-wrap: wrap;\\n}\\n.items-center {\\n  align-items: center;\\n}\\n.gap-2 {\\n  gap: 0.5rem;\\n}\\n.overflow-hidden {\\n  overflow: hidden;\\n}\\n.overflow-visible {\\n  overflow: visible;\\n}\\n.whitespace-nowrap {\\n  white-space: nowrap;\\n}\\n.text-nowrap {\\n  text-wrap: nowrap;\\n}\\n.rounded {\\n  border-radius: 0.25rem;\\n}\\n.border {\\n  border-width: 1px;\\n}\\n.bg-black {\\n  --tw-bg-opacity: 1;\\n  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));\\n}\\n.bg-lime-400 {\\n  --tw-bg-opacity: 1;\\n  background-color: rgb(163 230 53 / var(--tw-bg-opacity, 1));\\n}\\n.bg-slate-500 {\\n  --tw-bg-opacity: 1;\\n  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));\\n}\\n.bg-yellow-400 {\\n  --tw-bg-opacity: 1;\\n  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));\\n}\\n.object-contain {\\n  -o-object-fit: contain;\\n     object-fit: contain;\\n}\\n.p-4 {\\n  padding: 1rem;\\n}\\n.px-0\\\\.5 {\\n  padding-left: 0.125rem;\\n  padding-right: 0.125rem;\\n}\\n.text-center {\\n  text-align: center;\\n}\\n.text-\\\\[8px\\\\] {\\n  font-size: 8px;\\n}\\n.text-sm {\\n  font-size: 0.875rem;\\n  line-height: 1.25rem;\\n}\\n.text-xs {\\n  font-size: 0.75rem;\\n  line-height: 1rem;\\n}\\n.font-bold {\\n  font-weight: 700;\\n}\\n.uppercase {\\n  text-transform: uppercase;\\n}\\n.capitalize {\\n  text-transform: capitalize;\\n}\\n.italic {\\n  font-style: italic;\\n}\\n.text-black {\\n  --tw-text-opacity: 1;\\n  color: rgb(0 0 0 / var(--tw-text-opacity, 1));\\n}\\n.text-green-200 {\\n  --tw-text-opacity: 1;\\n  color: rgb(187 247 208 / var(--tw-text-opacity, 1));\\n}\\n.text-green-900 {\\n  --tw-text-opacity: 1;\\n  color: rgb(20 83 45 / var(--tw-text-opacity, 1));\\n}\\n.opacity-50 {\\n  opacity: 0.5;\\n}\\n.shadow {\\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\\n}\\n.outline {\\n  outline-style: solid;\\n}\\n.blur {\\n  --tw-blur: blur(8px);\\n  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);\\n}\\n.drop-shadow {\\n  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));\\n  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);\\n}\\n.filter {\\n  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);\\n}\\n.backdrop-filter {\\n  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);\\n}\\n.transition {\\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\\n  transition-duration: 150ms;\\n}\\n.ease-in {\\n  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\\n}\\n.ease-in-out {\\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n.ease-out {\\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\\n}\\n\""],"mappings":";AAAA,sBAAe"}

package/dist/preview/FrameController.js

@@ -25,6 +25,11 @@ const PRIORITY_WAVEFORM = 4;
 */
 const PRIORITY_IMAGE = 5;
 /**
+* Default priority for elements that don't specify one.
+* High number ensures custom elements render after standard elements.
+*/
+const PRIORITY_DEFAULT = 100;
+/**
 * Type guard to check if an element implements FrameRenderable.
 */
 function isFrameRenderable(element) {
@@ -212,5 +217,5 @@ function createFrameTaskWrapper(element, options = {}) {
 }
 
 //#endregion
-export { FrameController, PRIORITY_AUDIO, PRIORITY_CAPTIONS, PRIORITY_IMAGE, PRIORITY_VIDEO, PRIORITY_WAVEFORM, createFrameTaskWrapper };
+export { FrameController, PRIORITY_AUDIO, PRIORITY_CAPTIONS, PRIORITY_DEFAULT, PRIORITY_IMAGE, PRIORITY_VIDEO, PRIORITY_WAVEFORM, createFrameTaskWrapper };
 //# sourceMappingURL=FrameController.js.map

package/dist/preview/FrameController.js.map

@@ -1 +1 @@
-{"version":3,"file":"FrameController.js","names":["#rootElement","#abortController","#renderInProgress","#pendingRenderTime","#queryVisibleElements","result: FrameRenderable[]","#getChildrenIncludingSlotted","assignedElements: Element[]","frameTaskPromise: Promise<void>","taskObj: FrameTask"],"sources":["../../src/preview/FrameController.ts"],"sourcesContent":["/**\n * FrameController: Centralized frame rendering control\n *\n * Replaces the distributed Lit Task hierarchy with a single control loop\n * that queries elements and coordinates rendering directly.\n *\n * Benefits over the previous Task-based system:\n * - Single abort controller instead of distributed abort handling\n * - Clear prepare → render phases\n * - All coordination visible in one place\n * - No Lit Task reactivity overhead\n */\n\nimport type { LitElement } from \"lit\";\n\n// ============================================================================\n// Priority Constants\n// ============================================================================\n// Lower numbers render first. Elements with dependencies should have higher\n// priority numbers than their dependencies.\n//\n// Example: Waveform depends on audio analysis data, so it renders after audio.\n// ============================================================================\n\n/**\n * Priority for video elements.\n * Video renders first as other elements may depend on video frames being ready.\n */\nexport const PRIORITY_VIDEO = 1;\n\n/**\n * Priority for captions elements.\n * Captions render after video so they can overlay correctly.\n */\nexport const PRIORITY_CAPTIONS = 2;\n\n/**\n * Priority for audio elements.\n * Audio renders after captions (no visual dependency, but keeps consistent ordering).\n */\nexport const PRIORITY_AUDIO = 3;\n\n/**\n * Priority for waveform elements.\n * Waveform renders after audio because it depends on audio analysis data.\n */\nexport const PRIORITY_WAVEFORM = 4;\n\n/**\n * Priority for image elements.\n * Images render with low priority as they're typically static.\n */\nexport const PRIORITY_IMAGE = 5;\n\n/**\n * Default priority for elements that don't specify one.\n * High number ensures custom elements render after standard elements.\n */\nexport const PRIORITY_DEFAULT = 100;\n\n/**\n * State returned by elements describing their readiness for a given time.\n */\nexport interface FrameState {\n  /**\n   * Whether async preparation is needed before rendering.\n   * Examples: video needs to seek, captions need to load data.\n   */\n  needsPreparation: boolean;\n\n  /**\n   * Whether the element is ready to render synchronously.\n   * True when all async work is complete and renderFrame() can be called.\n   */\n  isReady: boolean;\n\n  /**\n   * Rendering priority hint. Lower numbers render first.\n   * Used to order render calls for elements with dependencies.\n   * \n   * Standard priorities:\n   * - PRIORITY_VIDEO (1): Video elements\n   * - PRIORITY_CAPTIONS (2): Caption overlays\n   * - PRIORITY_AUDIO (3): Audio elements\n   * - PRIORITY_WAVEFORM (4): Audio visualizers (depend on audio)\n   * - PRIORITY_IMAGE (5): Static images\n   * - PRIORITY_DEFAULT (100): Fallback for custom elements\n   */\n  priority: number;\n}\n\n/**\n * Interface that elements implement to participate in centralized frame rendering.\n * Elements keep their rendering logic local but expose a standardized interface.\n */\nexport interface FrameRenderable {\n  /**\n   * Query the element's readiness state for a given time.\n   * Must be synchronous and cheap to call.\n   */\n  getFrameState(timeMs: number): FrameState;\n\n  /**\n   * Async preparation phase. Called when getFrameState().needsPreparation is true.\n   * Performs any async work needed before rendering (seeking, loading, etc.).\n   *\n   * @param timeMs - The time to prepare for\n   * @param signal - Abort signal for cancellation\n   */\n  prepareFrame(timeMs: number, signal: AbortSignal): Promise<void>;\n\n  /**\n   * Synchronous render phase. Called after all preparation is complete.\n   * Performs the actual rendering (paint to canvas, update DOM, etc.).\n   *\n   * @param timeMs - The time to render\n   */\n  renderFrame(timeMs: number): void;\n}\n\n/**\n * Type guard to check if an element implements FrameRenderable.\n */\nexport function isFrameRenderable(element: unknown): element is FrameRenderable {\n  return (\n    typeof element === \"object\" &&\n    element !== null &&\n    \"getFrameState\" in element &&\n    \"prepareFrame\" in element &&\n    \"renderFrame\" in element &&\n    typeof (element as FrameRenderable).getFrameState === \"function\" &&\n    typeof (element as FrameRenderable).prepareFrame === \"function\" &&\n    typeof (element as FrameRenderable).renderFrame === \"function\"\n  );\n}\n\n/**\n * Options for FrameController.renderFrame()\n */\nexport interface RenderFrameOptions {\n  /**\n   * Whether to wait for Lit updateComplete before querying elements.\n   * Default: true\n   */\n  waitForLitUpdate?: boolean;\n\n  /**\n   * Callback to update CSS animations after frame rendering completes.\n   * Called with the root element after all elements have rendered.\n   * This centralizes animation synchronization in one place.\n   */\n  onAnimationsUpdate?: (rootElement: Element) => void;\n}\n\n/**\n * Central controller for frame rendering.\n * Lives at the root timegroup and orchestrates all element rendering.\n */\nexport class FrameController {\n  #rootElement: LitElement & { currentTimeMs: number };\n  #abortController: AbortController | null = null;\n  #renderInProgress = false;\n  #pendingRenderTime: number | null = null;\n\n  constructor(rootElement: LitElement & { currentTimeMs: number }) {\n    this.#rootElement = rootElement;\n  }\n\n  /**\n   * Cancel any in-progress render operation.\n   */\n  abort(): void {\n    this.#abortController?.abort();\n    this.#abortController = null;\n  }\n\n  /**\n   * Render a frame at the specified time.\n   *\n   * This is the main entry point for frame rendering. It:\n   * 1. Cancels any previous in-progress render\n   * 2. Queries all visible FrameRenderable elements\n   * 3. Runs preparation in parallel for elements that need it\n   * 4. Runs render in priority order\n   *\n   * @param timeMs - The time in milliseconds to render\n   * @param options - Optional configuration\n   */\n  async renderFrame(\n    timeMs: number,\n    options: RenderFrameOptions = {}\n  ): Promise<void> {\n    const { waitForLitUpdate = true, onAnimationsUpdate } = options;\n\n    // If a render is in progress, queue this one\n    if (this.#renderInProgress) {\n      this.#pendingRenderTime = timeMs;\n      return;\n    }\n\n    // Cancel any previous render operation\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n    const signal = this.#abortController.signal;\n\n    this.#renderInProgress = true;\n\n    try {\n      // Wait for Lit to propagate time changes to children\n      if (waitForLitUpdate) {\n        await this.#rootElement.updateComplete;\n        signal.throwIfAborted();\n      }\n\n      // Query all visible elements that implement FrameRenderable\n      // Pass the timeMs parameter to use for visibility checks (root element's time may be stale)\n      const elements = this.#queryVisibleElements(timeMs);\n      signal.throwIfAborted();\n\n      // Phase 1: Parallel preparation\n      const elementsNeedingPreparation = elements.filter(\n        (el) => el.getFrameState(timeMs).needsPreparation\n      );\n\n      if (elementsNeedingPreparation.length > 0) {\n        await Promise.all(\n          elementsNeedingPreparation.map((el) => el.prepareFrame(timeMs, signal))\n        );\n        signal.throwIfAborted();\n      }\n\n      // Phase 2: Sequential render by priority\n      const sortedElements = [...elements].sort(\n        (a, b) => a.getFrameState(timeMs).priority - b.getFrameState(timeMs).priority\n      );\n\n      for (const element of sortedElements) {\n        signal.throwIfAborted();\n        element.renderFrame(timeMs);\n      }\n\n      // Phase 3: Update CSS animations (centralized)\n      if (onAnimationsUpdate) {\n        onAnimationsUpdate(this.#rootElement);\n      }\n    } finally {\n      this.#renderInProgress = false;\n\n      // Process any queued render\n      if (this.#pendingRenderTime !== null) {\n        const pendingTime = this.#pendingRenderTime;\n        this.#pendingRenderTime = null;\n        // Don't await - fire and forget to avoid recursive waiting\n        this.renderFrame(pendingTime, options).catch(() => {\n          // Silently ignore errors from queued renders (likely aborted)\n        });\n      }\n    }\n  }\n\n  /**\n   * Query all visible FrameRenderable elements in the tree.\n   * Uses temporal visibility to filter out elements not visible at current time.\n   * \n   * IMPORTANT: For temporal elements, we use temporal visibility (startTimeMs/endTimeMs)\n   * instead of CSS visibility. This is because updateAnimations sets display:none on\n   * elements outside their time range, but that CSS state is from the PREVIOUS frame.\n   * When seeking, we need to evaluate visibility based on the NEW time, not stale CSS.\n   * \n   * @param timeMs - The time to use for visibility checks. This should be the target\n   *                 render time, not read from root element (which may be stale).\n   */\n  #queryVisibleElements(timeMs: number): FrameRenderable[] {\n    const result: FrameRenderable[] = [];\n    const currentTimeMs = timeMs;\n\n    const walk = (element: Element): void => {\n      // For temporal elements (ef-timegroup, ef-video, etc.), use temporal visibility\n      // instead of CSS visibility. CSS display:none may be stale from previous frame.\n      const isTemporal = \"startTimeMs\" in element && \"endTimeMs\" in element;\n      \n      if (isTemporal) {\n        // Temporal element: check time-based visibility\n        // Use exclusive end (< not <=) to avoid overlap at boundaries\n        const startMs = (element as { startTimeMs?: number }).startTimeMs ?? -Infinity;\n        const endMs = (element as { endTimeMs?: number }).endTimeMs ?? Infinity;\n        const isTemporallyVisible = currentTimeMs >= startMs && currentTimeMs < endMs;\n        \n        if (!isTemporallyVisible) {\n          // Skip this element AND its children (children's times are relative to parent)\n          return;\n        }\n        \n        // Element is temporally visible - include if it implements FrameRenderable\n        if (isFrameRenderable(element)) {\n          result.push(element);\n        }\n      } else {\n        // Non-temporal element: use CSS visibility\n        if (element instanceof HTMLElement) {\n          // Fast path: check inline display style\n          if (element.style.display === \"none\") {\n            return;\n          }\n          // Slow path: check computed style\n          const style = getComputedStyle(element);\n          if (style.display === \"none\" || style.visibility === \"hidden\") {\n            return;\n          }\n        }\n\n        // Check if this element implements FrameRenderable\n        if (isFrameRenderable(element)) {\n          result.push(element);\n        }\n      }\n\n      // Walk children - handle both regular children and slotted content\n      const children = this.#getChildrenIncludingSlotted(element);\n      for (const child of children) {\n        walk(child);\n      }\n    };\n\n    walk(this.#rootElement);\n    return result;\n  }\n\n  /**\n   * Gets all child elements including slotted content for shadow DOM elements.\n   * For elements with shadow DOM that contain slots, this returns the assigned\n   * elements (slotted content) instead of just the shadow DOM children.\n   */\n  #getChildrenIncludingSlotted(element: Element): Element[] {\n    // If element has shadowRoot with slots, get assigned elements\n    if (element.shadowRoot) {\n      const slots = element.shadowRoot.querySelectorAll('slot');\n      if (slots.length > 0) {\n        const assignedElements: Element[] = [];\n        for (const slot of slots) {\n          assignedElements.push(...slot.assignedElements());\n        }\n        // Also include shadow DOM children that aren't slots (for mixed content)\n        for (const child of element.shadowRoot.children) {\n          if (child.tagName !== 'SLOT') {\n            assignedElements.push(child);\n          }\n        }\n        return assignedElements;\n      }\n    }\n    \n    // Fallback to regular children\n    return Array.from(element.children);\n  }\n\n  /**\n   * Check if a render is currently in progress.\n   */\n  get isRendering(): boolean {\n    return this.#renderInProgress;\n  }\n}\n\n/**\n * Default frame state for elements that don't need special handling.\n * Use this for simple elements that are always ready.\n */\nexport const DEFAULT_FRAME_STATE: FrameState = {\n  needsPreparation: false,\n  isReady: true,\n  priority: PRIORITY_DEFAULT,\n};\n\n/**\n * Helper to create a FrameRenderable mixin for elements.\n * Provides default implementations that can be overridden.\n */\nexport function createFrameRenderableMixin<T extends { new (...args: any[]): HTMLElement }>(\n  Base: T\n) {\n  return class FrameRenderableMixin extends Base implements FrameRenderable {\n    getFrameState(_timeMs: number): FrameState {\n      return DEFAULT_FRAME_STATE;\n    }\n\n    async prepareFrame(_timeMs: number, _signal: AbortSignal): Promise<void> {\n      // Default: no preparation needed\n    }\n\n    renderFrame(_timeMs: number): void {\n      // Default: no explicit render needed\n    }\n  };\n}\n\n// ============================================================================\n// Shared Frame Task Wrapper\n// ============================================================================\n// Creates a backwards-compatible frameTask object from a FrameRenderable element.\n// This eliminates duplicate boilerplate code across all temporal elements.\n// ============================================================================\n\n/**\n * Interface for the legacy frameTask object.\n * Used for backwards compatibility with code expecting the old Task-like API.\n */\nexport interface FrameTask {\n  /**\n   * Run the frame task (prepare + render).\n   * @returns Promise that resolves when the task completes\n   */\n  run(): Promise<void>;\n\n  /**\n   * Promise that resolves when the current task completes.\n   */\n  taskComplete: Promise<void>;\n}\n\n/**\n * Options for creating a frame task wrapper.\n */\nexport interface FrameTaskWrapperOptions {\n  /**\n   * Function to get the current time in milliseconds.\n   * Default uses element's ownCurrentTimeMs if available, otherwise 0.\n   */\n  getTimeMs?: () => number;\n}\n\n/**\n * Create a backwards-compatible frameTask wrapper for a FrameRenderable element.\n * \n * This factory function creates a frameTask object that:\n * - Manages its own AbortController for cancellation\n * - Calls prepareFrame() then renderFrame() in sequence\n * - Silently ignores AbortErrors (expected during cancellation)\n * - Provides taskComplete promise for awaiting completion\n * \n * @param element - The element implementing FrameRenderable\n * @param options - Optional configuration\n * @returns A frameTask object compatible with legacy code\n * \n * @example\n * ```typescript\n * class MyElement extends LitElement implements FrameRenderable {\n *   frameTask = createFrameTaskWrapper(this, {\n *     getTimeMs: () => this.currentSourceTimeMs,\n *   });\n * \n *   getFrameState(timeMs: number): FrameState { ... }\n *   async prepareFrame(timeMs: number, signal: AbortSignal): Promise<void> { ... }\n *   renderFrame(timeMs: number): void { ... }\n * }\n * ```\n */\nexport function createFrameTaskWrapper(\n  element: FrameRenderable & { ownCurrentTimeMs?: number; desiredSeekTimeMs?: number },\n  options: FrameTaskWrapperOptions = {}\n): FrameTask {\n  let frameTaskPromise: Promise<void> = Promise.resolve();\n\n  const getTimeMs = options.getTimeMs ?? (() => {\n    // Try desiredSeekTimeMs first (video), then ownCurrentTimeMs, then 0\n    if (\"desiredSeekTimeMs\" in element && typeof element.desiredSeekTimeMs === \"number\") {\n      return element.desiredSeekTimeMs;\n    }\n    if (\"ownCurrentTimeMs\" in element && typeof element.ownCurrentTimeMs === \"number\") {\n      return element.ownCurrentTimeMs;\n    }\n    return 0;\n  });\n\n  const taskObj: FrameTask = {\n    run: () => {\n      const abortController = new AbortController();\n      const timeMs = getTimeMs();\n      \n      frameTaskPromise = (async () => {\n        try {\n          await element.prepareFrame(timeMs, abortController.signal);\n          element.renderFrame(timeMs);\n        } catch (error) {\n          // Silently ignore AbortErrors - expected when task is cancelled\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            return;\n          }\n          throw error;\n        }\n      })();\n      \n      taskObj.taskComplete = frameTaskPromise;\n      return frameTaskPromise;\n    },\n    taskComplete: Promise.resolve(),\n  };\n  return taskObj;\n}\n"],"mappings":"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"}
+{"version":3,"file":"FrameController.js","names":["#rootElement","#abortController","#renderInProgress","#pendingRenderTime","#queryVisibleElements","result: FrameRenderable[]","#getChildrenIncludingSlotted","assignedElements: Element[]","frameTaskPromise: Promise<void>","taskObj: FrameTask"],"sources":["../../src/preview/FrameController.ts"],"sourcesContent":["/**\n * FrameController: Centralized frame rendering control\n *\n * Replaces the distributed Lit Task hierarchy with a single control loop\n * that queries elements and coordinates rendering directly.\n *\n * Benefits over the previous Task-based system:\n * - Single abort controller instead of distributed abort handling\n * - Clear prepare → render phases\n * - All coordination visible in one place\n * - No Lit Task reactivity overhead\n */\n\nimport type { LitElement } from \"lit\";\n\n// ============================================================================\n// Priority Constants\n// ============================================================================\n// Lower numbers render first. Elements with dependencies should have higher\n// priority numbers than their dependencies.\n//\n// Example: Waveform depends on audio analysis data, so it renders after audio.\n// ============================================================================\n\n/**\n * Priority for video elements.\n * Video renders first as other elements may depend on video frames being ready.\n */\nexport const PRIORITY_VIDEO = 1;\n\n/**\n * Priority for captions elements.\n * Captions render after video so they can overlay correctly.\n */\nexport const PRIORITY_CAPTIONS = 2;\n\n/**\n * Priority for audio elements.\n * Audio renders after captions (no visual dependency, but keeps consistent ordering).\n */\nexport const PRIORITY_AUDIO = 3;\n\n/**\n * Priority for waveform elements.\n * Waveform renders after audio because it depends on audio analysis data.\n */\nexport const PRIORITY_WAVEFORM = 4;\n\n/**\n * Priority for image elements.\n * Images render with low priority as they're typically static.\n */\nexport const PRIORITY_IMAGE = 5;\n\n/**\n * Default priority for elements that don't specify one.\n * High number ensures custom elements render after standard elements.\n */\nexport const PRIORITY_DEFAULT = 100;\n\n/**\n * State returned by elements describing their readiness for a given time.\n */\nexport interface FrameState {\n  /**\n   * Whether async preparation is needed before rendering.\n   * Examples: video needs to seek, captions need to load data.\n   */\n  needsPreparation: boolean;\n\n  /**\n   * Whether the element is ready to render synchronously.\n   * True when all async work is complete and renderFrame() can be called.\n   */\n  isReady: boolean;\n\n  /**\n   * Rendering priority hint. Lower numbers render first.\n   * Used to order render calls for elements with dependencies.\n   * \n   * Standard priorities:\n   * - PRIORITY_VIDEO (1): Video elements\n   * - PRIORITY_CAPTIONS (2): Caption overlays\n   * - PRIORITY_AUDIO (3): Audio elements\n   * - PRIORITY_WAVEFORM (4): Audio visualizers (depend on audio)\n   * - PRIORITY_IMAGE (5): Static images\n   * - PRIORITY_DEFAULT (100): Fallback for custom elements\n   */\n  priority: number;\n}\n\n/**\n * Interface that elements implement to participate in centralized frame rendering.\n * Elements keep their rendering logic local but expose a standardized interface.\n */\nexport interface FrameRenderable {\n  /**\n   * Query the element's readiness state for a given time.\n   * Must be synchronous and cheap to call.\n   */\n  getFrameState(timeMs: number): FrameState;\n\n  /**\n   * Async preparation phase. Called when getFrameState().needsPreparation is true.\n   * Performs any async work needed before rendering (seeking, loading, etc.).\n   *\n   * @param timeMs - The time to prepare for\n   * @param signal - Abort signal for cancellation\n   */\n  prepareFrame(timeMs: number, signal: AbortSignal): Promise<void>;\n\n  /**\n   * Synchronous render phase. Called after all preparation is complete.\n   * Performs the actual rendering (paint to canvas, update DOM, etc.).\n   *\n   * @param timeMs - The time to render\n   */\n  renderFrame(timeMs: number): void;\n}\n\n/**\n * Type guard to check if an element implements FrameRenderable.\n */\nexport function isFrameRenderable(element: unknown): element is FrameRenderable {\n  return (\n    typeof element === \"object\" &&\n    element !== null &&\n    \"getFrameState\" in element &&\n    \"prepareFrame\" in element &&\n    \"renderFrame\" in element &&\n    typeof (element as FrameRenderable).getFrameState === \"function\" &&\n    typeof (element as FrameRenderable).prepareFrame === \"function\" &&\n    typeof (element as FrameRenderable).renderFrame === \"function\"\n  );\n}\n\n/**\n * Options for FrameController.renderFrame()\n */\nexport interface RenderFrameOptions {\n  /**\n   * Whether to wait for Lit updateComplete before querying elements.\n   * Default: true\n   */\n  waitForLitUpdate?: boolean;\n\n  /**\n   * Callback to update CSS animations after frame rendering completes.\n   * Called with the root element after all elements have rendered.\n   * This centralizes animation synchronization in one place.\n   */\n  onAnimationsUpdate?: (rootElement: Element) => void;\n}\n\n/**\n * Central controller for frame rendering.\n * Lives at the root timegroup and orchestrates all element rendering.\n */\nexport class FrameController {\n  #rootElement: LitElement & { currentTimeMs: number };\n  #abortController: AbortController | null = null;\n  #renderInProgress = false;\n  #pendingRenderTime: number | null = null;\n\n  constructor(rootElement: LitElement & { currentTimeMs: number }) {\n    this.#rootElement = rootElement;\n  }\n\n  /**\n   * Cancel any in-progress render operation.\n   */\n  abort(): void {\n    this.#abortController?.abort();\n    this.#abortController = null;\n  }\n\n  /**\n   * Render a frame at the specified time.\n   *\n   * This is the main entry point for frame rendering. It:\n   * 1. Cancels any previous in-progress render\n   * 2. Queries all visible FrameRenderable elements\n   * 3. Runs preparation in parallel for elements that need it\n   * 4. Runs render in priority order\n   *\n   * @param timeMs - The time in milliseconds to render\n   * @param options - Optional configuration\n   */\n  async renderFrame(\n    timeMs: number,\n    options: RenderFrameOptions = {}\n  ): Promise<void> {\n    const { waitForLitUpdate = true, onAnimationsUpdate } = options;\n\n    // If a render is in progress, queue this one\n    if (this.#renderInProgress) {\n      this.#pendingRenderTime = timeMs;\n      return;\n    }\n\n    // Cancel any previous render operation\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n    const signal = this.#abortController.signal;\n\n    this.#renderInProgress = true;\n\n    try {\n      // Wait for Lit to propagate time changes to children\n      if (waitForLitUpdate) {\n        await this.#rootElement.updateComplete;\n        signal.throwIfAborted();\n      }\n\n      // Query all visible elements that implement FrameRenderable\n      // Pass the timeMs parameter to use for visibility checks (root element's time may be stale)\n      const elements = this.#queryVisibleElements(timeMs);\n      signal.throwIfAborted();\n\n      // Phase 1: Parallel preparation\n      const elementsNeedingPreparation = elements.filter(\n        (el) => el.getFrameState(timeMs).needsPreparation\n      );\n\n      if (elementsNeedingPreparation.length > 0) {\n        await Promise.all(\n          elementsNeedingPreparation.map((el) => el.prepareFrame(timeMs, signal))\n        );\n        signal.throwIfAborted();\n      }\n\n      // Phase 2: Sequential render by priority\n      const sortedElements = [...elements].sort(\n        (a, b) => a.getFrameState(timeMs).priority - b.getFrameState(timeMs).priority\n      );\n\n      for (const element of sortedElements) {\n        signal.throwIfAborted();\n        element.renderFrame(timeMs);\n      }\n\n      // Phase 3: Update CSS animations (centralized)\n      if (onAnimationsUpdate) {\n        onAnimationsUpdate(this.#rootElement);\n      }\n    } finally {\n      this.#renderInProgress = false;\n\n      // Process any queued render\n      if (this.#pendingRenderTime !== null) {\n        const pendingTime = this.#pendingRenderTime;\n        this.#pendingRenderTime = null;\n        // Don't await - fire and forget to avoid recursive waiting\n        this.renderFrame(pendingTime, options).catch(() => {\n          // Silently ignore errors from queued renders (likely aborted)\n        });\n      }\n    }\n  }\n\n  /**\n   * Query all visible FrameRenderable elements in the tree.\n   * Uses temporal visibility to filter out elements not visible at current time.\n   * \n   * IMPORTANT: For temporal elements, we use temporal visibility (startTimeMs/endTimeMs)\n   * instead of CSS visibility. This is because updateAnimations sets display:none on\n   * elements outside their time range, but that CSS state is from the PREVIOUS frame.\n   * When seeking, we need to evaluate visibility based on the NEW time, not stale CSS.\n   * \n   * @param timeMs - The time to use for visibility checks. This should be the target\n   *                 render time, not read from root element (which may be stale).\n   */\n  #queryVisibleElements(timeMs: number): FrameRenderable[] {\n    const result: FrameRenderable[] = [];\n    const currentTimeMs = timeMs;\n\n    const walk = (element: Element): void => {\n      // For temporal elements (ef-timegroup, ef-video, etc.), use temporal visibility\n      // instead of CSS visibility. CSS display:none may be stale from previous frame.\n      const isTemporal = \"startTimeMs\" in element && \"endTimeMs\" in element;\n      \n      if (isTemporal) {\n        // Temporal element: check time-based visibility\n        // Use exclusive end (< not <=) to avoid overlap at boundaries\n        const startMs = (element as { startTimeMs?: number }).startTimeMs ?? -Infinity;\n        const endMs = (element as { endTimeMs?: number }).endTimeMs ?? Infinity;\n        const isTemporallyVisible = currentTimeMs >= startMs && currentTimeMs < endMs;\n        \n        if (!isTemporallyVisible) {\n          // Skip this element AND its children (children's times are relative to parent)\n          return;\n        }\n        \n        // Element is temporally visible - include if it implements FrameRenderable\n        if (isFrameRenderable(element)) {\n          result.push(element);\n        }\n      } else {\n        // Non-temporal element: use CSS visibility\n        if (element instanceof HTMLElement) {\n          // Fast path: check inline display style\n          if (element.style.display === \"none\") {\n            return;\n          }\n          // Slow path: check computed style\n          const style = getComputedStyle(element);\n          if (style.display === \"none\" || style.visibility === \"hidden\") {\n            return;\n          }\n        }\n\n        // Check if this element implements FrameRenderable\n        if (isFrameRenderable(element)) {\n          result.push(element);\n        }\n      }\n\n      // Walk children - handle both regular children and slotted content\n      const children = this.#getChildrenIncludingSlotted(element);\n      for (const child of children) {\n        walk(child);\n      }\n    };\n\n    walk(this.#rootElement);\n    return result;\n  }\n\n  /**\n   * Gets all child elements including slotted content for shadow DOM elements.\n   * For elements with shadow DOM that contain slots, this returns the assigned\n   * elements (slotted content) instead of just the shadow DOM children.\n   */\n  #getChildrenIncludingSlotted(element: Element): Element[] {\n    // If element has shadowRoot with slots, get assigned elements\n    if (element.shadowRoot) {\n      const slots = element.shadowRoot.querySelectorAll('slot');\n      if (slots.length > 0) {\n        const assignedElements: Element[] = [];\n        for (const slot of slots) {\n          assignedElements.push(...slot.assignedElements());\n        }\n        // Also include shadow DOM children that aren't slots (for mixed content)\n        for (const child of element.shadowRoot.children) {\n          if (child.tagName !== 'SLOT') {\n            assignedElements.push(child);\n          }\n        }\n        return assignedElements;\n      }\n    }\n    \n    // Fallback to regular children\n    return Array.from(element.children);\n  }\n\n  /**\n   * Check if a render is currently in progress.\n   */\n  get isRendering(): boolean {\n    return this.#renderInProgress;\n  }\n}\n\n/**\n * Default frame state for elements that don't need special handling.\n * Use this for simple elements that are always ready.\n */\nexport const DEFAULT_FRAME_STATE: FrameState = {\n  needsPreparation: false,\n  isReady: true,\n  priority: PRIORITY_DEFAULT,\n};\n\n/**\n * Helper to create a FrameRenderable mixin for elements.\n * Provides default implementations that can be overridden.\n */\nexport function createFrameRenderableMixin<T extends { new (...args: any[]): HTMLElement }>(\n  Base: T\n) {\n  return class FrameRenderableMixin extends Base implements FrameRenderable {\n    getFrameState(_timeMs: number): FrameState {\n      return DEFAULT_FRAME_STATE;\n    }\n\n    async prepareFrame(_timeMs: number, _signal: AbortSignal): Promise<void> {\n      // Default: no preparation needed\n    }\n\n    renderFrame(_timeMs: number): void {\n      // Default: no explicit render needed\n    }\n  };\n}\n\n// ============================================================================\n// Shared Frame Task Wrapper\n// ============================================================================\n// Creates a backwards-compatible frameTask object from a FrameRenderable element.\n// This eliminates duplicate boilerplate code across all temporal elements.\n// ============================================================================\n\n/**\n * Interface for the legacy frameTask object.\n * Used for backwards compatibility with code expecting the old Task-like API.\n */\nexport interface FrameTask {\n  /**\n   * Run the frame task (prepare + render).\n   * @returns Promise that resolves when the task completes\n   */\n  run(): Promise<void>;\n\n  /**\n   * Promise that resolves when the current task completes.\n   */\n  taskComplete: Promise<void>;\n}\n\n/**\n * Options for creating a frame task wrapper.\n */\nexport interface FrameTaskWrapperOptions {\n  /**\n   * Function to get the current time in milliseconds.\n   * Default uses element's ownCurrentTimeMs if available, otherwise 0.\n   */\n  getTimeMs?: () => number;\n}\n\n/**\n * Create a backwards-compatible frameTask wrapper for a FrameRenderable element.\n * \n * This factory function creates a frameTask object that:\n * - Manages its own AbortController for cancellation\n * - Calls prepareFrame() then renderFrame() in sequence\n * - Silently ignores AbortErrors (expected during cancellation)\n * - Provides taskComplete promise for awaiting completion\n * \n * @param element - The element implementing FrameRenderable\n * @param options - Optional configuration\n * @returns A frameTask object compatible with legacy code\n * \n * @example\n * ```typescript\n * class MyElement extends LitElement implements FrameRenderable {\n *   frameTask = createFrameTaskWrapper(this, {\n *     getTimeMs: () => this.currentSourceTimeMs,\n *   });\n * \n *   getFrameState(timeMs: number): FrameState { ... }\n *   async prepareFrame(timeMs: number, signal: AbortSignal): Promise<void> { ... }\n *   renderFrame(timeMs: number): void { ... }\n * }\n * ```\n */\nexport function createFrameTaskWrapper(\n  element: FrameRenderable & { ownCurrentTimeMs?: number; desiredSeekTimeMs?: number },\n  options: FrameTaskWrapperOptions = {}\n): FrameTask {\n  let frameTaskPromise: Promise<void> = Promise.resolve();\n\n  const getTimeMs = options.getTimeMs ?? (() => {\n    // Try desiredSeekTimeMs first (video), then ownCurrentTimeMs, then 0\n    if (\"desiredSeekTimeMs\" in element && typeof element.desiredSeekTimeMs === \"number\") {\n      return element.desiredSeekTimeMs;\n    }\n    if (\"ownCurrentTimeMs\" in element && typeof element.ownCurrentTimeMs === \"number\") {\n      return element.ownCurrentTimeMs;\n    }\n    return 0;\n  });\n\n  const taskObj: FrameTask = {\n    run: () => {\n      const abortController = new AbortController();\n      const timeMs = getTimeMs();\n      \n      frameTaskPromise = (async () => {\n        try {\n          await element.prepareFrame(timeMs, abortController.signal);\n          element.renderFrame(timeMs);\n        } catch (error) {\n          // Silently ignore AbortErrors - expected when task is cancelled\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            return;\n          }\n          throw error;\n        }\n      })();\n      \n      taskObj.taskComplete = frameTaskPromise;\n      return frameTaskPromise;\n    },\n    taskComplete: Promise.resolve(),\n  };\n  return taskObj;\n}\n"],"mappings":"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"}

package/dist/preview/encoding/canvasEncoder.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvasEncoder.js","names":["_workerPool: WorkerPool | null","dataUrl: string"],"sources":["../../../src/preview/encoding/canvasEncoder.ts"],"sourcesContent":["/**\n * Canvas encoding orchestration with worker pool support.\n * \n * Supports caching via RenderContext:\n * - For ef-image/ef-waveform: caches by element + renderVersion\n * - For ef-video: uses direct capture API with source timestamp caching\n */\n\nimport { logger } from \"../logger.js\";\nimport { WorkerPool } from \"../workers/WorkerPool.js\";\nimport { getEncoderWorkerUrl } from \"../workers/encoderWorkerInline.js\";\nimport { encodeCanvasOnMainThread } from \"./mainThreadEncoder.js\";\nimport { encodeCanvasInWorker } from \"./workerEncoder.js\";\nimport type { CanvasEncodeResult, CanvasEncodeOptions } from \"./types.js\";\nimport type { EFVideo } from \"../../elements/EFVideo.js\";\nimport type { EFSurface } from \"../../elements/EFSurface.js\";\n\n// Module-level worker pool state\nlet _workerPool: WorkerPool | null = null;\nlet _workerPoolWarningLogged = false;\n\n/**\n * Get or create the worker pool for canvas encoding.\n * Returns null if workers are not available.\n */\nfunction getWorkerPool(): WorkerPool | null {\n  if (_workerPool) {\n    return _workerPool;\n  }\n\n  // Check if workers are available\n  if (\n    typeof Worker === \"undefined\" ||\n    typeof OffscreenCanvas === \"undefined\" ||\n    typeof createImageBitmap === \"undefined\"\n  ) {\n    if (!_workerPoolWarningLogged) {\n      _workerPoolWarningLogged = true;\n      logger.warn(\n        \"[canvasEncoder] Web Workers or OffscreenCanvas not available, using main thread fallback\",\n      );\n    }\n    return null;\n  }\n\n  try {\n    // Use inline worker URL - this works in any bundler environment\n    // because the worker code is embedded in the bundle as a blob URL\n    const workerUrl = getEncoderWorkerUrl();\n    \n    _workerPool = new WorkerPool(workerUrl);\n    \n    // Check if workers were actually created\n    if (!_workerPool.isAvailable()) {\n      const reason = _workerPool.workerCount === 0 \n        ? \"no workers created (check console for errors)\" \n        : \"workers not available\";\n      _workerPool = null;\n      if (!_workerPoolWarningLogged) {\n        _workerPoolWarningLogged = true;\n        logger.warn(\n          `[canvasEncoder] Worker pool initialization failed (${reason}), using main thread fallback`,\n        );\n      }\n    }\n  } catch (error) {\n    _workerPool = null;\n    if (!_workerPoolWarningLogged) {\n      _workerPoolWarningLogged = true;\n      const errorMessage = error instanceof Error ? error.message : String(error);\n      logger.warn(\n        `[canvasEncoder] Failed to create worker pool: ${errorMessage} - using main thread fallback`,\n      );\n    }\n  }\n\n  return _workerPool;\n}\n\n/**\n * Check if an element is an EFVideo.\n */\nfunction isEFVideo(element: Element): element is EFVideo {\n  return element.tagName === \"EF-VIDEO\";\n}\n\n/**\n * Check if an element is an EFSurface.\n */\nfunction isEFSurface(element: Element): element is EFSurface {\n  return element.tagName === \"EF-SURFACE\";\n}\n\n/**\n * Encode canvases to data URLs in parallel using worker pool.\n * Falls back to main thread encoding if workers are unavailable.\n * \n * When RenderContext and sourceMap are provided:\n * - Checks cache for static elements (ef-image, ef-waveform)\n * - Uses direct capture API for ef-video elements\n * - Shares cached frames for ef-surface elements targeting ef-video\n * \n * @param canvases - Array of canvases to encode\n * @param options - Encoding options including optional renderContext and sourceMap\n * @returns Promise resolving to array of encoded results\n */\nexport async function encodeCanvasesInParallel(\n  canvases: HTMLCanvasElement[],\n  options: CanvasEncodeOptions = {},\n): Promise<CanvasEncodeResult[]> {\n  const { scale: canvasScale = 1, renderContext, sourceMap } = options;\n  const workerPool = getWorkerPool();\n\n  // Helper to encode a single canvas (with caching)\n  const encodeCanvas = async (canvas: HTMLCanvasElement): Promise<CanvasEncodeResult | null> => {\n    try {\n      if (canvas.width === 0 || canvas.height === 0) {\n        return null;\n      }\n\n      const preserveAlpha = canvas.dataset.preserveAlpha === \"true\";\n      const sourceElement = sourceMap?.get(canvas);\n\n      // OPTIMIZATION: Check RenderContext cache for static elements\n      if (renderContext && sourceElement) {\n        // For ef-video, use direct capture API\n        if (isEFVideo(sourceElement)) {\n          const sourceTimeMs = sourceElement.currentSourceTimeMs;\n          \n          // Use direct capture API (bypasses frameTask)\n          // Always use \"main\" quality for export - scrub track is only for preview scrubbing\n          try {\n            const frame = await sourceElement.captureFrameAtSourceTime(sourceTimeMs, { quality: \"main\" });\n            return { canvas, dataUrl: frame.dataUrl, preserveAlpha: false };\n          } catch (e) {\n            // Fall back to normal encoding if direct capture fails\n            logger.warn(\"[canvasEncoder] Direct capture failed, falling back to canvas encoding:\", e);\n          }\n        }\n        \n        // For ef-surface targeting ef-video, share the video's cached frame\n        if (isEFSurface(sourceElement)) {\n          const target = sourceElement.targetElement;\n          if (target && isEFVideo(target as Element)) {\n            const videoTarget = target as unknown as EFVideo;\n            const sourceTimeMs = videoTarget.currentSourceTimeMs;\n            const cached = renderContext.getCachedVideoFrame(videoTarget, sourceTimeMs);\n            if (cached) {\n              return { canvas, dataUrl: cached.dataUrl, preserveAlpha: false };\n            }\n            \n            // Capture from the target video\n            // Always use \"main\" quality for export\n            try {\n              const frame = await videoTarget.captureFrameAtSourceTime(sourceTimeMs, { quality: \"main\" });\n              renderContext.setCachedVideoFrame(videoTarget, sourceTimeMs, frame);\n              return { canvas, dataUrl: frame.dataUrl, preserveAlpha: false };\n            } catch (e) {\n              logger.warn(\"[canvasEncoder] Direct capture for surface target failed:\", e);\n            }\n          }\n        }\n        \n        // For static elements (ef-image, ef-waveform), check version-based cache\n        const cachedDataUrl = renderContext.getCachedCanvasDataUrl(sourceElement);\n        if (cachedDataUrl) {\n          return { canvas, dataUrl: cachedDataUrl, preserveAlpha };\n        }\n      }\n\n      // Standard encoding path (fallback when no RenderContext cache)\n      let sourceCanvas = canvas;\n\n      // Handle canvas scaling on main thread before encoding\n      if (canvasScale < 1) {\n        const scaledWidth = Math.floor(canvas.width * canvasScale);\n        const scaledHeight = Math.floor(canvas.height * canvasScale);\n        const scaledCanvas = document.createElement(\"canvas\");\n        scaledCanvas.width = scaledWidth;\n        scaledCanvas.height = scaledHeight;\n        const scaledCtx = scaledCanvas.getContext(\"2d\");\n        if (scaledCtx) {\n          scaledCtx.drawImage(canvas, 0, 0, scaledWidth, scaledHeight);\n          sourceCanvas = scaledCanvas;\n        }\n      }\n\n      let dataUrl: string;\n      \n      if (workerPool) {\n        // Encode in worker\n        dataUrl = await workerPool.execute((worker) =>\n          encodeCanvasInWorker(worker, sourceCanvas, preserveAlpha),\n        );\n      } else {\n        // Main thread fallback - warning already logged once in getWorkerPool()\n        const encoded = encodeCanvasOnMainThread(sourceCanvas, canvasScale);\n        if (!encoded) return null;\n        dataUrl = encoded.dataUrl;\n      }\n\n      // Cache the result for static elements\n      if (renderContext && sourceElement) {\n        renderContext.setCachedCanvasDataUrl(sourceElement, dataUrl);\n      }\n\n      return { canvas, dataUrl, preserveAlpha };\n    } catch (error) {\n      // Fallback to main thread if worker encoding fails\n      logger.warn(\"[canvasEncoder] Worker encoding failed, using main thread fallback:\", error);\n      const encoded = encodeCanvasOnMainThread(canvas, canvasScale);\n      if (encoded) {\n        logger.warn(\"[canvasEncoder] Main thread fallback succeeded\");\n        return { canvas, ...encoded };\n      }\n      \n      // Cross-origin canvas or other error - skip\n      logger.warn(\"[canvasEncoder] Main thread encoding also failed, skipping canvas:\", error);\n      return null;\n    }\n  };\n\n  // Encode all canvases in parallel\n  const encodingTasks = canvases.map(encodeCanvas);\n  const encodedResults = await Promise.all(encodingTasks);\n  const validResults = encodedResults.filter(\n    (r): r is CanvasEncodeResult => r !== null,\n  );\n  return validResults;\n}\n\n/**\n * Reset the worker pool state (for testing).\n */\nexport function resetWorkerPool(): void {\n  if (_workerPool) {\n    _workerPool.terminate();\n    _workerPool = null;\n  }\n  _workerPoolWarningLogged = false;\n}\n"],"mappings":"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"}
+{"version":3,"file":"canvasEncoder.js","names":["_workerPool: WorkerPool | null","dataUrl: string"],"sources":["../../../src/preview/encoding/canvasEncoder.ts"],"sourcesContent":["/**\n * Canvas encoding orchestration with worker pool support.\n * \n * Supports caching via RenderContext:\n * - For ef-image/ef-waveform: caches by element + renderVersion\n * - For ef-video: uses direct capture API with source timestamp caching\n */\n\nimport { logger } from \"../logger.js\";\nimport { WorkerPool } from \"../workers/WorkerPool.js\";\nimport { getEncoderWorkerUrl } from \"../workers/encoderWorkerInline.js\";\nimport { encodeCanvasOnMainThread } from \"./mainThreadEncoder.js\";\nimport { encodeCanvasInWorker } from \"./workerEncoder.js\";\nimport type { CanvasEncodeResult, CanvasEncodeOptions } from \"./types.js\";\nimport type { EFVideo } from \"../../elements/EFVideo.js\";\nimport type { EFSurface } from \"../../elements/EFSurface.js\";\n\n// Module-level worker pool state\nlet _workerPool: WorkerPool | null = null;\nlet _workerPoolWarningLogged = false;\n\n/**\n * Get or create the worker pool for canvas encoding.\n * Returns null if workers are not available.\n */\nfunction getWorkerPool(): WorkerPool | null {\n  if (_workerPool) {\n    return _workerPool;\n  }\n\n  // Check if workers are available\n  if (\n    typeof Worker === \"undefined\" ||\n    typeof OffscreenCanvas === \"undefined\" ||\n    typeof createImageBitmap === \"undefined\"\n  ) {\n    if (!_workerPoolWarningLogged) {\n      _workerPoolWarningLogged = true;\n      logger.warn(\n        \"[canvasEncoder] Web Workers or OffscreenCanvas not available, using main thread fallback\",\n      );\n    }\n    return null;\n  }\n\n  try {\n    // Use inline worker URL - this works in any bundler environment\n    // because the worker code is embedded in the bundle as a blob URL\n    const workerUrl = getEncoderWorkerUrl();\n    \n    _workerPool = new WorkerPool(workerUrl);\n    \n    // Check if workers were actually created\n    if (!_workerPool.isAvailable()) {\n      const reason = _workerPool.workerCount === 0 \n        ? \"no workers created (check console for errors)\" \n        : \"workers not available\";\n      _workerPool = null;\n      if (!_workerPoolWarningLogged) {\n        _workerPoolWarningLogged = true;\n        logger.warn(\n          `[canvasEncoder] Worker pool initialization failed (${reason}), using main thread fallback`,\n        );\n      }\n    }\n  } catch (error) {\n    _workerPool = null;\n    if (!_workerPoolWarningLogged) {\n      _workerPoolWarningLogged = true;\n      const errorMessage = error instanceof Error ? error.message : String(error);\n      logger.warn(\n        `[canvasEncoder] Failed to create worker pool: ${errorMessage} - using main thread fallback`,\n      );\n    }\n  }\n\n  return _workerPool;\n}\n\n/**\n * Check if an element is an EFVideo.\n */\nfunction isEFVideo(element: Element): element is EFVideo {\n  return element.tagName === \"EF-VIDEO\";\n}\n\n/**\n * Check if an element is an EFSurface.\n */\nfunction isEFSurface(element: Element): element is EFSurface {\n  return element.tagName === \"EF-SURFACE\";\n}\n\n/**\n * Encode canvases to data URLs in parallel using worker pool.\n * Falls back to main thread encoding if workers are unavailable.\n * \n * When RenderContext and sourceMap are provided:\n * - Checks cache for static elements (ef-image, ef-waveform)\n * - Uses direct capture API for ef-video elements\n * - Shares cached frames for ef-surface elements targeting ef-video\n * \n * @param canvases - Array of canvases to encode\n * @param options - Encoding options including optional renderContext and sourceMap\n * @returns Promise resolving to array of encoded results\n */\nexport async function encodeCanvasesInParallel(\n  canvases: HTMLCanvasElement[],\n  options: CanvasEncodeOptions = {},\n): Promise<CanvasEncodeResult[]> {\n  const { scale: canvasScale = 1, renderContext, sourceMap } = options;\n  const workerPool = getWorkerPool();\n\n  // Helper to encode a single canvas (with caching)\n  const encodeCanvas = async (canvas: HTMLCanvasElement): Promise<CanvasEncodeResult | null> => {\n    try {\n      if (canvas.width === 0 || canvas.height === 0) {\n        return null;\n      }\n\n      const preserveAlpha = canvas.dataset.preserveAlpha === \"true\";\n      const sourceElement = sourceMap?.get(canvas);\n      \n      // OPTIMIZATION: Check RenderContext cache for static elements\n      if (renderContext && sourceElement) {\n        // For ef-video, use direct capture API\n        if (isEFVideo(sourceElement)) {\n          const sourceTimeMs = sourceElement.currentSourceTimeMs;\n          \n          // Use direct capture API (bypasses frameTask)\n          // Always use \"main\" quality for export - scrub track is only for preview scrubbing\n          try {\n            const frame = await sourceElement.captureFrameAtSourceTime(sourceTimeMs, { quality: \"main\" });\n            return { canvas, dataUrl: frame.dataUrl, preserveAlpha: false };\n          } catch (e) {\n            // Fall back to normal encoding if direct capture fails\n            logger.warn(\"[canvasEncoder] Direct capture failed, falling back to canvas encoding:\", e);\n          }\n        }\n        \n        // For ef-surface targeting ef-video, share the video's cached frame\n        if (isEFSurface(sourceElement)) {\n          const target = sourceElement.targetElement;\n          if (target && isEFVideo(target as Element)) {\n            const videoTarget = target as unknown as EFVideo;\n            const sourceTimeMs = videoTarget.currentSourceTimeMs;\n            const cached = renderContext.getCachedVideoFrame(videoTarget, sourceTimeMs);\n            if (cached) {\n              return { canvas, dataUrl: cached.dataUrl, preserveAlpha: false };\n            }\n            \n            // Capture from the target video\n            // Always use \"main\" quality for export\n            try {\n              const frame = await videoTarget.captureFrameAtSourceTime(sourceTimeMs, { quality: \"main\" });\n              renderContext.setCachedVideoFrame(videoTarget, sourceTimeMs, frame);\n              return { canvas, dataUrl: frame.dataUrl, preserveAlpha: false };\n            } catch (e) {\n              logger.warn(\"[canvasEncoder] Direct capture for surface target failed:\", e);\n            }\n          }\n        }\n        \n        // For static elements (ef-image, ef-waveform), check version-based cache\n        const cachedDataUrl = renderContext.getCachedCanvasDataUrl(sourceElement);\n        if (cachedDataUrl) {\n          return { canvas, dataUrl: cachedDataUrl, preserveAlpha };\n        }\n      }\n\n      // Standard encoding path (fallback when no RenderContext cache)\n      let sourceCanvas = canvas;\n\n      // Handle canvas scaling on main thread before encoding\n      if (canvasScale < 1) {\n        const scaledWidth = Math.floor(canvas.width * canvasScale);\n        const scaledHeight = Math.floor(canvas.height * canvasScale);\n        const scaledCanvas = document.createElement(\"canvas\");\n        scaledCanvas.width = scaledWidth;\n        scaledCanvas.height = scaledHeight;\n        const scaledCtx = scaledCanvas.getContext(\"2d\");\n        if (scaledCtx) {\n          scaledCtx.drawImage(canvas, 0, 0, scaledWidth, scaledHeight);\n          sourceCanvas = scaledCanvas;\n        }\n      }\n\n      let dataUrl: string;\n      \n      if (workerPool) {\n        // Encode in worker\n        dataUrl = await workerPool.execute((worker) =>\n          encodeCanvasInWorker(worker, sourceCanvas, preserveAlpha),\n        );\n      } else {\n        // Main thread fallback - warning already logged once in getWorkerPool()\n        const encoded = encodeCanvasOnMainThread(sourceCanvas, canvasScale);\n        if (!encoded) return null;\n        dataUrl = encoded.dataUrl;\n      }\n\n      // Cache the result for static elements\n      if (renderContext && sourceElement) {\n        renderContext.setCachedCanvasDataUrl(sourceElement, dataUrl);\n      }\n\n      return { canvas, dataUrl, preserveAlpha };\n    } catch (error) {\n      // Fallback to main thread if worker encoding fails\n      logger.warn(\"[canvasEncoder] Worker encoding failed, using main thread fallback:\", error);\n      const encoded = encodeCanvasOnMainThread(canvas, canvasScale);\n      if (encoded) {\n        logger.warn(\"[canvasEncoder] Main thread fallback succeeded\");\n        return { canvas, ...encoded };\n      }\n      \n      // Cross-origin canvas or other error - skip\n      logger.warn(\"[canvasEncoder] Main thread encoding also failed, skipping canvas:\", error);\n      return null;\n    }\n  };\n\n  // Encode all canvases in parallel\n  const encodingTasks = canvases.map(encodeCanvas);\n  const encodedResults = await Promise.all(encodingTasks);\n  const validResults = encodedResults.filter(\n    (r): r is CanvasEncodeResult => r !== null,\n  );\n  return validResults;\n}\n\n/**\n * Reset the worker pool state (for testing).\n */\nexport function resetWorkerPool(): void {\n  if (_workerPool) {\n    _workerPool.terminate();\n    _workerPool = null;\n  }\n  _workerPoolWarningLogged = false;\n}\n"],"mappings":"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"}

package/dist/preview/encoding/mainThreadEncoder.js

@@ -1,4 +1,7 @@
 //#region src/preview/encoding/mainThreadEncoder.ts
+/**
+* Main thread canvas encoding (fallback implementation).
+*/
 const JPEG_QUALITY_HIGH = .92;
 const JPEG_QUALITY_MEDIUM = .85;
 /**

package/dist/preview/encoding/mainThreadEncoder.js.map

@@ -1 +1 @@
-{"version":3,"file":"mainThreadEncoder.js","names":["dataUrl: string"],"sources":["../../../src/preview/encoding/mainThreadEncoder.ts"],"sourcesContent":["/**\n * Main thread canvas encoding (fallback implementation).\n */\n\nimport type { CanvasEncodeResult } from \"./types.js\";\n\n// JPEG quality constants\nexport const JPEG_QUALITY_HIGH = 0.92;\nexport const JPEG_QUALITY_MEDIUM = 0.85;\n\n/**\n * Encode a single canvas to a data URL on the main thread (fallback).\n * @param canvas - The canvas to encode\n * @param canvasScale - Scale factor for encoding (default: 1)\n * @returns Encoded result or null if encoding fails\n */\nexport function encodeCanvasOnMainThread(\n  canvas: HTMLCanvasElement,\n  canvasScale: number,\n): { dataUrl: string; preserveAlpha: boolean } | null {\n  try {\n    if (canvas.width === 0 || canvas.height === 0) {\n      return null;\n    }\n\n    const preserveAlpha = canvas.dataset.preserveAlpha === \"true\";\n    let dataUrl: string;\n\n    if (canvasScale < 1) {\n      // Scale down canvas before encoding\n      const scaledWidth = Math.floor(canvas.width * canvasScale);\n      const scaledHeight = Math.floor(canvas.height * canvasScale);\n      const scaledCanvas = document.createElement(\"canvas\");\n      scaledCanvas.width = scaledWidth;\n      scaledCanvas.height = scaledHeight;\n      const scaledCtx = scaledCanvas.getContext(\"2d\");\n      if (scaledCtx) {\n        scaledCtx.drawImage(canvas, 0, 0, scaledWidth, scaledHeight);\n        const quality = canvasScale < 0.5 ? JPEG_QUALITY_MEDIUM : JPEG_QUALITY_HIGH;\n        dataUrl = preserveAlpha\n          ? scaledCanvas.toDataURL(\"image/png\")\n          : scaledCanvas.toDataURL(\"image/jpeg\", quality);\n      } else {\n        dataUrl = preserveAlpha\n          ? canvas.toDataURL(\"image/png\")\n          : canvas.toDataURL(\"image/jpeg\", JPEG_QUALITY_HIGH);\n      }\n    } else {\n      dataUrl = preserveAlpha\n        ? canvas.toDataURL(\"image/png\")\n        : canvas.toDataURL(\"image/jpeg\", JPEG_QUALITY_HIGH);\n    }\n\n    return { dataUrl, preserveAlpha };\n  } catch (e) {\n    // Cross-origin canvas or other error - skip\n    return null;\n  }\n}\n"],"mappings":";AAOA,MAAa,oBAAoB;AACjC,MAAa,sBAAsB;;;;;;;AAQnC,SAAgB,yBACd,QACA,aACoD;AACpD,KAAI;AACF,MAAI,OAAO,UAAU,KAAK,OAAO,WAAW,EAC1C,QAAO;EAGT,MAAM,gBAAgB,OAAO,QAAQ,kBAAkB;EACvD,IAAIA;AAEJ,MAAI,cAAc,GAAG;GAEnB,MAAM,cAAc,KAAK,MAAM,OAAO,QAAQ,YAAY;GAC1D,MAAM,eAAe,KAAK,MAAM,OAAO,SAAS,YAAY;GAC5D,MAAM,eAAe,SAAS,cAAc,SAAS;AACrD,gBAAa,QAAQ;AACrB,gBAAa,SAAS;GACtB,MAAM,YAAY,aAAa,WAAW,KAAK;AAC/C,OAAI,WAAW;AACb,cAAU,UAAU,QAAQ,GAAG,GAAG,aAAa,aAAa;IAC5D,MAAM,UAAU,cAAc,KAAM,sBAAsB;AAC1D,cAAU,gBACN,aAAa,UAAU,YAAY,GACnC,aAAa,UAAU,cAAc,QAAQ;SAEjD,WAAU,gBACN,OAAO,UAAU,YAAY,GAC7B,OAAO,UAAU,cAAc,kBAAkB;QAGvD,WAAU,gBACN,OAAO,UAAU,YAAY,GAC7B,OAAO,UAAU,cAAc,kBAAkB;AAGvD,SAAO;GAAE;GAAS;GAAe;UAC1B,GAAG;AAEV,SAAO"}
+{"version":3,"file":"mainThreadEncoder.js","names":["dataUrl: string"],"sources":["../../../src/preview/encoding/mainThreadEncoder.ts"],"sourcesContent":["/**\n * Main thread canvas encoding (fallback implementation).\n */\n\n// JPEG quality constants\nexport const JPEG_QUALITY_HIGH = 0.92;\nexport const JPEG_QUALITY_MEDIUM = 0.85;\n\n/**\n * Encode a single canvas to a data URL on the main thread (fallback).\n * @param canvas - The canvas to encode\n * @param canvasScale - Scale factor for encoding (default: 1)\n * @returns Encoded result or null if encoding fails\n */\nexport function encodeCanvasOnMainThread(\n  canvas: HTMLCanvasElement,\n  canvasScale: number,\n): { dataUrl: string; preserveAlpha: boolean } | null {\n  try {\n    if (canvas.width === 0 || canvas.height === 0) {\n      return null;\n    }\n\n    const preserveAlpha = canvas.dataset.preserveAlpha === \"true\";\n    let dataUrl: string;\n\n    if (canvasScale < 1) {\n      // Scale down canvas before encoding\n      const scaledWidth = Math.floor(canvas.width * canvasScale);\n      const scaledHeight = Math.floor(canvas.height * canvasScale);\n      const scaledCanvas = document.createElement(\"canvas\");\n      scaledCanvas.width = scaledWidth;\n      scaledCanvas.height = scaledHeight;\n      const scaledCtx = scaledCanvas.getContext(\"2d\");\n      if (scaledCtx) {\n        scaledCtx.drawImage(canvas, 0, 0, scaledWidth, scaledHeight);\n        const quality = canvasScale < 0.5 ? JPEG_QUALITY_MEDIUM : JPEG_QUALITY_HIGH;\n        dataUrl = preserveAlpha\n          ? scaledCanvas.toDataURL(\"image/png\")\n          : scaledCanvas.toDataURL(\"image/jpeg\", quality);\n      } else {\n        dataUrl = preserveAlpha\n          ? canvas.toDataURL(\"image/png\")\n          : canvas.toDataURL(\"image/jpeg\", JPEG_QUALITY_HIGH);\n      }\n    } else {\n      dataUrl = preserveAlpha\n        ? canvas.toDataURL(\"image/png\")\n        : canvas.toDataURL(\"image/jpeg\", JPEG_QUALITY_HIGH);\n    }\n\n    return { dataUrl, preserveAlpha };\n  } catch (e) {\n    // Cross-origin canvas or other error - skip\n    return null;\n  }\n}\n"],"mappings":";;;;AAKA,MAAa,oBAAoB;AACjC,MAAa,sBAAsB;;;;;;;AAQnC,SAAgB,yBACd,QACA,aACoD;AACpD,KAAI;AACF,MAAI,OAAO,UAAU,KAAK,OAAO,WAAW,EAC1C,QAAO;EAGT,MAAM,gBAAgB,OAAO,QAAQ,kBAAkB;EACvD,IAAIA;AAEJ,MAAI,cAAc,GAAG;GAEnB,MAAM,cAAc,KAAK,MAAM,OAAO,QAAQ,YAAY;GAC1D,MAAM,eAAe,KAAK,MAAM,OAAO,SAAS,YAAY;GAC5D,MAAM,eAAe,SAAS,cAAc,SAAS;AACrD,gBAAa,QAAQ;AACrB,gBAAa,SAAS;GACtB,MAAM,YAAY,aAAa,WAAW,KAAK;AAC/C,OAAI,WAAW;AACb,cAAU,UAAU,QAAQ,GAAG,GAAG,aAAa,aAAa;IAC5D,MAAM,UAAU,cAAc,KAAM,sBAAsB;AAC1D,cAAU,gBACN,aAAa,UAAU,YAAY,GACnC,aAAa,UAAU,cAAc,QAAQ;SAEjD,WAAU,gBACN,OAAO,UAAU,YAAY,GAC7B,OAAO,UAAU,cAAc,kBAAkB;QAGvD,WAAU,gBACN,OAAO,UAAU,YAAY,GAC7B,OAAO,UAAU,cAAc,kBAAkB;AAGvD,SAAO;GAAE;GAAS;GAAe;UAC1B,GAAG;AAEV,SAAO"}

package/dist/preview/renderTimegroupPreview.js

@@ -33,8 +33,11 @@ const SYNC_PROPERTIES = [
 	"minHeight",
 	"maxWidth",
 	"maxHeight",
-	"flex",
-	"flexFlow",
+	"flexGrow",
+	"flexShrink",
+	"flexBasis",
+	"flexDirection",
+	"flexWrap",
 	"justifyContent",
 	"alignItems",
 	"alignContent",
@@ -59,14 +62,20 @@ const SYNC_PROPERTIES = [
 	"filter",
 	"backdropFilter",
 	"clipPath",
-	"font",
+	"fontFamily",
+	"fontSize",
+	"fontWeight",
+	"fontStyle",
+	"fontVariant",
 	"textAlign",
 	"textDecoration",
 	"textTransform",
 	"letterSpacing",
+	"wordSpacing",
 	"whiteSpace",
 	"textOverflow",
 	"lineHeight",
+	"verticalAlign",
 	"transform",
 	"transformOrigin",
 	"transformStyle",
@@ -227,6 +236,11 @@ function syncElementStyles(source, clone, contentSource) {
 		cloneStyle.visibility = cs.visibility;
 		cloneStyle.backfaceVisibility = cs.backfaceVisibility;
 		cloneStyle.transformStyle = cs.transformStyle;
+		cloneStyle.background = cs.background;
+		cloneStyle.color = cs.color;
+		cloneStyle.boxShadow = cs.boxShadow;
+		cloneStyle.filter = cs.filter;
+		cloneStyle.backdropFilter = cs.backdropFilter;
 		if (contentCs) {
 			cloneStyle.width = contentCs.width;
 			cloneStyle.height = contentCs.height;
@@ -357,18 +371,6 @@ function buildCloneStructure(source, timeMs) {
 	function cloneElement(srcEl, parentNode) {
 		if (SKIP_TAGS.has(srcEl.tagName)) return null;
 		const bounds = getTemporalBounds(srcEl);
-		if (srcEl instanceof SVGElement) {
-			const node$1 = {
-				source: srcEl,
-				clone: srcEl.cloneNode(true),
-				children: [],
-				isCanvasClone: false,
-				bounds,
-				parent: parentNode
-			};
-			nodeCount++;
-			return node$1;
-		}
 		if (srcEl instanceof HTMLCanvasElement) {
 			const canvas = document.createElement("canvas");
 			canvas.width = srcEl.width;
@@ -377,6 +379,34 @@ function buildCloneStructure(source, timeMs) {
 			if (ctx) try {
 				ctx.drawImage(srcEl, 0, 0);
 			} catch {}
+			canvas.style.width = `${srcEl.width}px`;
+			canvas.style.height = `${srcEl.height}px`;
+			try {
+				const cs = getComputedStyle(srcEl);
+				canvas.style.position = cs.position;
+				canvas.style.top = cs.top;
+				canvas.style.right = cs.right;
+				canvas.style.bottom = cs.bottom;
+				canvas.style.left = cs.left;
+				canvas.style.margin = cs.margin;
+				canvas.style.zIndex = cs.zIndex;
+				canvas.style.transform = cs.transform;
+				canvas.style.transformOrigin = cs.transformOrigin;
+				canvas.style.opacity = cs.opacity;
+				canvas.style.visibility = cs.visibility;
+				canvas.style.display = "block";
+			} catch {}
+			canvasSourceMap.set(canvas, srcEl);
+			const node$1 = {
+				source: srcEl,
+				clone: canvas,
+				children: [],
+				isCanvasClone: true,
+				bounds,
+				parent: parentNode
+			};
+			nodeCount++;
+			return node$1;
 		}
 		const isCustom = srcEl.tagName.includes("-");
 		if (isCustom && srcEl.shadowRoot) {
@@ -386,7 +416,11 @@ function buildCloneStructure(source, timeMs) {
 				clone$1.width = shadowCanvas.width || srcEl.clientWidth;
 				clone$1.height = shadowCanvas.height || srcEl.clientHeight;
 				if (srcEl.tagName === "EF-WAVEFORM") clone$1.dataset.preserveAlpha = "true";
-				else if (srcEl.tagName === "EF-IMAGE" && "hasAlpha" in srcEl && srcEl.hasAlpha) clone$1.dataset.preserveAlpha = "true";
+				else if (srcEl.tagName === "EF-IMAGE") {
+					const hasAlpha = "hasAlpha" in srcEl && srcEl.hasAlpha;
+					if (hasAlpha) clone$1.dataset.preserveAlpha = "true";
+					console.log(`[buildCloneStructure] EF-IMAGE canvas: size=${clone$1.width}x${clone$1.height}, hasAlpha=${hasAlpha}, preserveAlpha=${hasAlpha ? "PNG" : "JPEG"}`);
+				}
 				const ctx = clone$1.getContext("2d");
 				if (ctx) try {
 					ctx.drawImage(shadowCanvas, 0, 0);
@@ -411,7 +445,9 @@ function buildCloneStructure(source, timeMs) {
 				const clone$1 = document.createElement("canvas");
 				clone$1.width = shadowImg.naturalWidth;
 				clone$1.height = shadowImg.naturalHeight;
-				if (srcEl.tagName === "EF-IMAGE" && "hasAlpha" in srcEl && srcEl.hasAlpha) clone$1.dataset.preserveAlpha = "true";
+				if (srcEl.tagName === "EF-IMAGE") {
+					if ("hasAlpha" in srcEl && srcEl.hasAlpha) clone$1.dataset.preserveAlpha = "true";
+				}
 				const ctx = clone$1.getContext("2d");
 				if (ctx) try {
 					ctx.drawImage(shadowImg, 0, 0);
@@ -432,7 +468,9 @@ function buildCloneStructure(source, timeMs) {
 				return node$1;
 			}
 		}
-		const clone = document.createElement(isCustom ? "div" : srcEl.tagName.toLowerCase());
+		let clone;
+		if (srcEl instanceof SVGElement) clone = document.createElementNS("http://www.w3.org/2000/svg", srcEl.tagName);
+		else clone = document.createElement(isCustom ? "div" : srcEl.tagName.toLowerCase());
 		const attrs = srcEl.attributes;
 		const attrLen = attrs.length;
 		if (attrLen > 0) for (let i = 0; i < attrLen; i++) {
@@ -615,25 +653,6 @@ function syncNodeWithDelta(node, visibleSet, delta) {
 	for (const child of node.children) syncNodeWithDelta(child, visibleSet, delta);
 }
 /**
-* Sync all CSS properties from source elements to their clones.
-* Uses interval index for O(log n + k) visibility queries instead of O(n) traversal.
-* Uses delta tracking for incremental updates between frames.
-*/
-function syncStyles(state, timeMs) {
-	syncStats = {
-		nodesVisited: 0,
-		nodesCulledByParent: 0,
-		nodesCulledByTemporal: 0,
-		nodesProcessed: 0,
-		nodesFullSync: 0,
-		nodesIncrementalSync: 0,
-		nodesHidden: 0,
-		indexQueryTimeMs: 0,
-		syncTimeMs: 0
-	};
-	syncStylesWithIndex(state, timeMs);
-}
-/**
 * Collect document styles for shadow DOM injection.
 */
 function collectDocumentStyles() {
@@ -661,24 +680,7 @@ function overrideRootCloneStyles(syncState, fullReset = false) {
 		rootClone.style.transform = "none";
 	}
 }
-/**
-* Create a live preview of a timegroup with a refresh function.
-* Used by EFWorkbench for the "computed" preview mode.
-* 
-* @param source - The source timegroup to preview
-* @returns Object with preview container and refresh function
-*/
-function renderTimegroupPreview(source) {
-	const { container, syncState } = buildCloneStructure(source);
-	syncStyles(syncState, 0);
-	return {
-		container,
-		refresh: (timeMs) => {
-			syncStyles(syncState, timeMs ?? 0);
-		}
-	};
-}
 
 //#endregion
-export { buildCloneStructure, collectDocumentStyles, overrideRootCloneStyles, removeHiddenNodesForSerialization, renderTimegroupPreview, restoreHiddenNodes, syncStyles };
+export { buildCloneStructure, collectDocumentStyles, overrideRootCloneStyles, removeHiddenNodesForSerialization, restoreHiddenNodes };
 //# sourceMappingURL=renderTimegroupPreview.js.map