@leavepulse/ui 0.68.0 → 0.70.0

package/dist/chunks/{LpSelect-BCyDYoih.js → LpSelect-B4f_yRi5.js}

@@ -1,13 +1,15 @@
-import { defineComponent, computed, ref, reactive, watch, nextTick, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementBlock, createElementVNode, toDisplayString, TransitionGroup, Fragment, renderList, createCommentVNode, Transition, withModifiers, createTextVNode, normalizeStyle } from "vue";
+import { defineComponent, computed, ref, useId, useAttrs, reactive, watch, nextTick, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, toDisplayString, createElementBlock, TransitionGroup, Fragment, renderList, createCommentVNode, withModifiers, createTextVNode, normalizeStyle } from "vue";
 import { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxInput, ComboboxViewport, ComboboxEmpty, ComboboxItem, ComboboxItemIndicator } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$3 } from "./OptionContent-CmYUUeWj.js";
 import { _ as _sfc_main$2 } from "./LpRollingText-DB7upf-5.js";
-import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
 import { fitChips, toggledValues } from "../components/select.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
 const _hoisted_1 = { class: "sr-only" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = { class: "truncate" };
@@ -26,24 +28,21 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = { class: "truncate" };
 const _hoisted_8 = { class: "inline-flex px-2 py-0.5 text-xs font-medium" };
-const _hoisted_9 = ["src"];
-const _hoisted_10 = ["aria-label"];
+const _hoisted_9 = { class: "flex min-w-0 items-center gap-2" };
+const _hoisted_10 = ["src"];
 const _hoisted_11 = {
+  key: 2,
+  class: "min-w-0 truncate text-muted"
+};
+const _hoisted_12 = ["aria-label"];
+const _hoisted_13 = {
   key: 0,
   class: "border-b border-line p-2"
 };
-const _hoisted_12 = {
+const _hoisted_14 = {
   key: 0,
   class: "px-3 py-4 text-center text-sm italic text-muted"
 };
-const _hoisted_13 = { class: "flex min-w-0 items-center gap-2.5" };
-const _hoisted_14 = ["src"];
-const _hoisted_15 = { class: "flex min-w-0 flex-col" };
-const _hoisted_16 = { class: "truncate" };
-const _hoisted_17 = {
-  key: 0,
-  class: "truncate text-xs text-muted"
-};
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -66,7 +65,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     selected: {},
     labels: {}
   },
-  emits: ["update:modelValue", "change", "update:searchTerm"],
+  emits: ["update:modelValue", "change", "update:searchTerm", "blur"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const SIZE_HEIGHT = {
@@ -108,9 +107,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         else localQuery.value = v;
       }
     });
-    function onOpenChange(_open) {
+    const isOpen = ref(false);
+    function onOpenChange(open) {
+      isOpen.value = open;
       query.value = "";
     }
+    const partOf = `lp-select-${useId()}`;
+    function onFocusOut(event) {
+      const next = event.relatedTarget;
+      const inside = !!next && typeof next.closest === "function" && !!next.closest(`[data-lp-select-part="${partOf}"]`);
+      if (!inside) emit("blur", event);
+    }
+    const attrs = useAttrs();
+    const valueId = `lp-select-${useId()}-value`;
+    const valueText = computed(() => chips.value.length ? chipNames.value : displayLabel.value || placeholderText.value);
+    const triggerName = computed(
+      () => field.value.labelId ? { "aria-labelledby": `${field.value.labelId} ${valueId}`, "aria-label": void 0 } : { "aria-label": attrs["aria-label"] ?? valueText.value }
+    );
     const EMPTY_SENTINEL = "\0__lp_empty__";
     function encode(v) {
       return v === "" ? EMPTY_SENTINEL : v;
@@ -176,6 +189,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return current.value?.label ?? "";
     });
+    const rollKey = computed(() => {
+      const c = current.value;
+      return c ? [c.label, c.hint ?? "", c.image ?? c.icon ?? ""].join("\0") : `\0${placeholderText.value}`;
+    });
     const chipRow = ref(null);
     const probeRow = ref(null);
     const fit = ref(Number.POSITIVE_INFINITY);
@@ -193,16 +210,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         more?.offsetWidth ?? 0
       );
     }
-    let rowObserver = null;
-    watch(chipRow, (row) => {
-      rowObserver?.disconnect();
-      rowObserver = null;
-      if (!row || typeof ResizeObserver === "undefined") return;
-      rowObserver = new ResizeObserver(() => measure());
-      rowObserver.observe(row);
-    });
+    useResizeObserver(chipRow, () => measure());
     watch(chips, () => void nextTick(measure), { flush: "post", deep: true });
-    onBeforeUnmount(() => rowObserver?.disconnect());
     const shownChips = computed(() => chips.value.slice(0, fit.value));
     const hiddenCount = computed(() => modelList.value.length - shownChips.value.length);
     const chipNames = computed(() => {
@@ -224,13 +233,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       for (const v of toggledValues(previous, decoded)) emit("change", v);
     }
     function clear() {
+      if (field.value.disabled) return;
       emit("update:modelValue", props.multiple ? [] : void 0);
     }
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ComboboxRoot), mergeProps({
         "model-value": comboModel.value,
         multiple: __props.multiple,
         disabled: unref(field).disabled,
+        required: unref(field).required,
         "ignore-filter": true,
         "reset-search-term-on-select": false,
         "reset-search-term-on-blur": false,
@@ -241,19 +254,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }), {
         default: withCtx(() => [
           createVNode(unref(ComboboxAnchor), {
+            "data-lp-select-part": partOf,
+            onFocusout: onFocusOut,
             class: normalizeClass([
               anchorHeight.value,
-              "group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+              "group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2",
+              unref(field).disabled && "cursor-not-allowed opacity-55",
               unref(field).invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand focus-within:ring-ring"
             ])
           }, {
             default: withCtx(() => [
-              createVNode(unref(ComboboxTrigger), {
-                id: unref(field).id,
+              createElementVNode("span", {
+                id: valueId,
+                hidden: ""
+              }, toDisplayString(valueText.value), 1),
+              createVNode(unref(ComboboxTrigger), mergeProps({
+                id: unref(field).id
+              }, triggerName.value, {
                 "aria-invalid": unref(field).invalid || void 0,
                 "aria-describedby": unref(field).describedBy,
                 class: "flex min-w-0 flex-1 items-center gap-2 outline-none"
-              }, {
+              }), {
                 default: withCtx(() => [
                   chips.value.length ? (openBlock(), createElementBlock("span", {
                     key: 0,
@@ -312,61 +333,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }), 128)),
                       createElementVNode("span", _hoisted_8, "+" + toDisplayString(modelList.value.length), 1)
                     ], 512)
-                  ], 512)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                    createVNode(_sfc_main$3, {
-                      axis: "width",
-                      class: "shrink-0"
-                    }, {
-                      default: withCtx(() => [
-                        createVNode(Transition, {
-                          mode: "out-in",
-                          "enter-active-class": "transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none",
-                          "leave-active-class": "transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none",
-                          "enter-from-class": "scale-75 opacity-0",
-                          "leave-to-class": "scale-75 opacity-0"
-                        }, {
-                          default: withCtx(() => [
-                            current.value?.image ? (openBlock(), createElementBlock("img", {
-                              key: current.value.image,
-                              src: current.value.image,
-                              alt: "",
-                              class: "block size-5 rounded-full object-cover"
-                            }, null, 8, _hoisted_9)) : current.value?.icon ? (openBlock(), createBlock(_sfc_main$1, {
-                              key: current.value.icon,
-                              name: current.value.icon,
-                              size: 16,
-                              class: "block text-muted"
-                            }, null, 8, ["name"])) : createCommentVNode("", true)
-                          ]),
-                          _: 1
-                        })
-                      ]),
-                      _: 1
-                    }),
-                    createVNode(_sfc_main$2, {
-                      value: displayLabel.value || placeholderText.value,
-                      align: "start",
-                      class: normalizeClass(["min-w-0", displayLabel.value ? "" : "text-muted"])
-                    }, null, 8, ["value", "class"]),
-                    createVNode(Transition, {
-                      "enter-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
-                      "leave-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
-                      "enter-from-class": "opacity-0",
-                      "leave-to-class": "opacity-0"
-                    }, {
-                      default: withCtx(() => [
-                        current.value?.hint ? (openBlock(), createElementBlock("span", {
-                          key: current.value.hint,
-                          class: "min-w-0 truncate text-muted"
-                        }, toDisplayString(current.value.hint), 1)) : createCommentVNode("", true)
-                      ]),
-                      _: 1
-                    })
-                  ], 64))
+                  ], 512)) : (openBlock(), createBlock(_sfc_main$2, {
+                    key: 1,
+                    value: rollKey.value,
+                    align: "start",
+                    class: "min-w-0 flex-1"
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_9, [
+                        current.value?.image ? (openBlock(), createElementBlock("img", {
+                          key: 0,
+                          src: current.value.image,
+                          alt: "",
+                          class: "block size-5 shrink-0 rounded-full object-cover"
+                        }, null, 8, _hoisted_10)) : current.value?.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                          key: 1,
+                          name: current.value.icon,
+                          size: 16,
+                          class: "block shrink-0 text-muted"
+                        }, null, 8, ["name"])) : createCommentVNode("", true),
+                        createElementVNode("span", {
+                          class: normalizeClass(["min-w-0 truncate", displayLabel.value ? "" : "text-muted"])
+                        }, toDisplayString(displayLabel.value || placeholderText.value), 3),
+                        current.value?.hint ? (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(current.value.hint), 1)) : createCommentVNode("", true)
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["value"]))
                 ]),
                 _: 1
-              }, 8, ["id", "aria-invalid", "aria-describedby"]),
-              __props.clearable && hasValue.value ? (openBlock(), createElementBlock("button", {
+              }, 16, ["id", "aria-invalid", "aria-describedby"]),
+              __props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createElementBlock("button", {
                 key: 0,
                 type: "button",
                 class: "group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
@@ -380,7 +377,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   size: 16,
                   class: "transition-transform duration-200 ease-[var(--ease-emphasized)] group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0"
                 })
-              ], 40, _hoisted_10)) : createCommentVNode("", true),
+              ], 40, _hoisted_12)) : createCommentVNode("", true),
               createVNode(unref(ComboboxTrigger), {
                 tabindex: "-1",
                 "aria-hidden": "true",
@@ -398,15 +395,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["class"]),
-          createVNode(unref(ComboboxPortal), null, {
+          createVNode(unref(ComboboxPortal), { to: unref(portalTo) }, {
             default: withCtx(() => [
               createVNode(unref(ComboboxContent), {
+                "data-lp-select-part": partOf,
+                onFocusout: onFocusOut,
+                onInteractOutside: unref(guardOutside),
+                onEscapeKeyDown: unref(guardOutside),
                 position: "popper",
                 "side-offset": 6,
                 class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"])
               }, {
                 default: withCtx(() => [
-                  __props.searchable || serverSide.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
+                  __props.searchable || serverSide.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
                     createVNode(unref(ComboboxInput), {
                       modelValue: query.value,
                       "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => query.value = $event),
@@ -417,7 +418,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ])) : createCommentVNode("", true),
                   createVNode(unref(ComboboxViewport), { class: "max-h-56 overflow-y-auto p-1" }, {
                     default: withCtx(() => [
-                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(loadingLabel.value), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
+                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_14, toDisplayString(loadingLabel.value), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
                         key: 1,
                         class: "px-3 py-4 text-center text-sm italic text-muted"
                       }, {
@@ -431,27 +432,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           key: String(opt.value),
                           value: encode(opt.value),
                           disabled: opt.disabled,
-                          style: normalizeStyle({ animationDelay: `${Math.min(i, 12) * 22}ms` }),
+                          style: normalizeStyle(unref(optionStagger)(i)),
                           class: normalizeClass([unref(OPTION_ITEM), "justify-between data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"])
                         }, {
                           default: withCtx(() => [
-                            createElementVNode("span", _hoisted_13, [
-                              opt.image ? (openBlock(), createElementBlock("img", {
-                                key: 0,
-                                src: opt.image,
-                                alt: "",
-                                class: "size-6 shrink-0 rounded-full object-cover"
-                              }, null, 8, _hoisted_14)) : opt.icon ? (openBlock(), createBlock(_sfc_main$1, {
-                                key: 1,
-                                name: opt.icon,
-                                size: 16,
-                                class: "shrink-0 text-muted"
-                              }, null, 8, ["name"])) : createCommentVNode("", true),
-                              createElementVNode("span", _hoisted_15, [
-                                createElementVNode("span", _hoisted_16, toDisplayString(opt.label), 1),
-                                opt.description ? (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
-                              ])
-                            ]),
+                            createVNode(_sfc_main$3, { option: opt }, null, 8, ["option"]),
                             createVNode(unref(ComboboxItemIndicator), { class: "flex shrink-0 items-center text-brand" }, {
                               default: withCtx(() => [
                                 createVNode(_sfc_main$1, {
@@ -470,13 +455,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 _: 1
-              }, 8, ["class"])
+              }, 8, ["onInteractOutside", "onEscapeKeyDown", "class"])
             ]),
             _: 1
-          })
+          }, 8, ["to"])
         ]),
         _: 1
-      }, 16, ["model-value", "multiple", "disabled", "class"]);
+      }, 16, ["model-value", "multiple", "disabled", "required", "class"]);
     };
   }
 });

package/dist/chunks/LpShaderBackdrop-Bote0iuy.js

@@ -0,0 +1,332 @@
+import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createVNode, Transition, withCtx, createElementVNode, normalizeStyle, normalizeClass } from "vue";
+import { parseColor } from "../components/color.js";
+import { PRESETS, FRAGMENT_HEADER, frameDue, approach, tooSlow, VERTEX_SHADER } from "../components/shaderBackdrop.js";
+import { i as isBrokenBackdropEngine } from "./backdrop-Dkf2vM81.js";
+import { durationToken } from "../composables/easing.js";
+import { useInView } from "../composables/useInView.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { usePrefersReducedMotion } from "../composables/useReducedMotion.js";
+import { useResizeObserver } from "../composables/useResizeObserver.js";
+const _hoisted_1 = ["data-mode"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpShaderBackdrop",
+  props: {
+    preset: { default: "aurora" },
+    intensity: { default: 0.7 },
+    speed: { default: 1 },
+    fps: { default: 30 },
+    paused: { type: Boolean, default: false },
+    still: { type: Boolean, default: false }
+  },
+  emits: ["fallback"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { el: root, inView } = useInView();
+    const reduced = usePrefersReducedMotion();
+    const canvas = ref(null);
+    const canvasKey = ref(0);
+    const failed = ref(false);
+    const shown = ref(false);
+    const wantGl = computed(() => !props.still && !reduced.value && !failed.value);
+    const animating = computed(() => !props.paused && inView.value);
+    const weakEngine = typeof navigator !== "undefined" && isBrokenBackdropEngine();
+    const fallbackStyle = computed(() => ({ background: PRESETS[props.preset].fallback, opacity: Math.min(1, clamp01(props.intensity) * 1.15) }));
+    function clamp01(n) {
+      return Math.max(0, Math.min(1, n));
+    }
+    const TOKENS = ["surface", "brand", "accent", "action", "ink"];
+    let probe = null;
+    let paint = null;
+    function tokenColor(name) {
+      if (!probe || !root.value) return [0, 0, 0];
+      probe.style.color = `var(--color-${name})`;
+      const css = getComputedStyle(probe).color;
+      const rgb = parseColor(css);
+      if (rgb) return [rgb.r / 255, rgb.g / 255, rgb.b / 255];
+      paint ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+      if (!paint) return [0, 0, 0];
+      paint.clearRect(0, 0, 1, 1);
+      paint.fillStyle = "#000";
+      paint.fillStyle = css;
+      paint.fillRect(0, 0, 1, 1);
+      const [r, g, b] = paint.getImageData(0, 0, 1, 1).data;
+      return [r / 255, g / 255, b / 255];
+    }
+    function readPalette() {
+      const out = {};
+      for (const name of TOKENS) out[name] = tokenColor(name);
+      return out;
+    }
+    let target = null;
+    let current = null;
+    function refreshPalette() {
+      target = readPalette();
+      if (!current || !running) {
+        current = { ...target };
+        drawFrame();
+      }
+    }
+    let gl = null;
+    let program = null;
+    let buffer = null;
+    let uniforms = {};
+    function compile(type, source) {
+      if (!gl) return null;
+      const shader = gl.createShader(type);
+      if (!shader) return null;
+      gl.shaderSource(shader, source);
+      gl.compileShader(shader);
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        gl.deleteShader(shader);
+        return null;
+      }
+      return shader;
+    }
+    function useProgram(preset) {
+      if (!gl) return false;
+      if (program) gl.deleteProgram(program);
+      program = null;
+      const vs = compile(gl.VERTEX_SHADER, VERTEX_SHADER);
+      const fs = compile(gl.FRAGMENT_SHADER, FRAGMENT_HEADER + PRESETS[preset].fragment);
+      if (!vs || !fs) return false;
+      const next = gl.createProgram();
+      if (!next) return false;
+      gl.attachShader(next, vs);
+      gl.attachShader(next, fs);
+      gl.linkProgram(next);
+      gl.deleteShader(vs);
+      gl.deleteShader(fs);
+      if (!gl.getProgramParameter(next, gl.LINK_STATUS)) {
+        gl.deleteProgram(next);
+        return false;
+      }
+      program = next;
+      gl.useProgram(program);
+      const at = gl.getAttribLocation(program, "p");
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.enableVertexAttribArray(at);
+      gl.vertexAttribPointer(at, 2, gl.FLOAT, false, 0, 0);
+      uniforms = {};
+      for (const name of ["u_res", "u_time", "u_px", "u_k", "u_bg", "u_brand", "u_accent", "u_action", "u_ink"]) {
+        uniforms[name] = gl.getUniformLocation(program, name);
+      }
+      sizeCanvas();
+      return true;
+    }
+    let pixelRatio = 1;
+    function sizeCanvas() {
+      const el = canvas.value;
+      if (!el) return;
+      const dpr = Math.min(weakEngine ? 1 : 2, window.devicePixelRatio || 1);
+      pixelRatio = dpr * PRESETS[props.preset].scale;
+      const w = Math.max(1, Math.round(el.clientWidth * pixelRatio));
+      const h = Math.max(1, Math.round(el.clientHeight * pixelRatio));
+      if (el.width !== w || el.height !== h) {
+        el.width = w;
+        el.height = h;
+      }
+      gl?.viewport(0, 0, w, h);
+    }
+    let time = 0;
+    function drawFrame() {
+      if (!gl || !program || !current || !canvas.value) return;
+      const c = current;
+      gl.uniform2f(uniforms.u_res, canvas.value.width, canvas.value.height);
+      gl.uniform1f(uniforms.u_time, time);
+      gl.uniform1f(uniforms.u_px, pixelRatio);
+      gl.uniform1f(uniforms.u_k, clamp01(props.intensity));
+      gl.uniform3fv(uniforms.u_bg, c.surface);
+      gl.uniform3fv(uniforms.u_brand, c.brand);
+      gl.uniform3fv(uniforms.u_accent, c.accent);
+      gl.uniform3fv(uniforms.u_action, c.action);
+      gl.uniform3fv(uniforms.u_ink, c.ink);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    }
+    function giveUp(reason) {
+      failed.value = true;
+      emit("fallback", reason);
+    }
+    function onContextLost() {
+      release();
+      giveUp("lost");
+    }
+    function start() {
+      const el = canvas.value;
+      if (!el || gl) return;
+      const context = el.getContext("webgl", {
+        alpha: false,
+        antialias: false,
+        depth: false,
+        stencil: false,
+        preserveDrawingBuffer: false,
+        powerPreference: "low-power",
+        failIfMajorPerformanceCaveat: true
+      });
+      if (!context) return giveUp("unavailable");
+      gl = context;
+      el.addEventListener("webglcontextlost", onContextLost);
+      buffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+      if (!useProgram(props.preset)) {
+        release();
+        return giveUp("compile");
+      }
+      intervals = [];
+      refreshPalette();
+      drawFrame();
+      shown.value = true;
+      sync();
+    }
+    function release() {
+      stop();
+      shown.value = false;
+      const el = canvas.value;
+      el?.removeEventListener("webglcontextlost", onContextLost);
+      if (gl) {
+        if (program) gl.deleteProgram(program);
+        if (buffer) gl.deleteBuffer(buffer);
+        gl.getExtension("WEBGL_lose_context")?.loseContext();
+        canvasKey.value++;
+      }
+      gl = null;
+      program = null;
+      buffer = null;
+      current = null;
+    }
+    let frame = 0;
+    let running = false;
+    let last = 0;
+    let intervals = [];
+    function tick(now) {
+      frame = requestAnimationFrame(tick);
+      const cap = weakEngine ? Math.min(props.fps, 24) : props.fps;
+      if (!frameDue(now, last, cap)) return;
+      const dt = last ? now - last : 0;
+      last = now;
+      time += Math.min(dt, 100) / 1e3 * props.speed;
+      if (current && target) {
+        const k = Math.min(1, dt / 160);
+        for (const name of TOKENS) current[name] = approach(current[name], target[name], k);
+      }
+      drawFrame();
+      if (dt > 0 && dt < 500 && intervals.length < 30) {
+        intervals.push(dt);
+        if (tooSlow(intervals, cap)) {
+          release();
+          giveUp("slow");
+        }
+      }
+    }
+    function stop() {
+      running = false;
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
+    }
+    function sync() {
+      if (gl && animating.value) {
+        if (running) return;
+        running = true;
+        last = 0;
+        frame = requestAnimationFrame(tick);
+      } else stop();
+    }
+    let themeObserver;
+    let schemeQuery;
+    useResizeObserver(root, () => {
+      sizeCanvas();
+      drawFrame();
+    });
+    onMounted(() => {
+      probe = document.createElement("span");
+      probe.style.display = "none";
+      root.value?.appendChild(probe);
+      themeObserver = new MutationObserver(() => {
+        if (gl) refreshPalette();
+      });
+      themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["style", "class", "data-theme", "data-theme-mode"] });
+      schemeQuery = window.matchMedia?.("(prefers-color-scheme: dark)");
+      schemeQuery?.addEventListener("change", refreshPalette);
+      if (wantGl.value) start();
+    });
+    watch(wantGl, (on) => {
+      if (on) requestAnimationFrame(start);
+      else release();
+    });
+    watch(animating, sync);
+    let swapTimer = 0;
+    watch(
+      () => props.preset,
+      (preset) => {
+        if (!gl) return;
+        shown.value = false;
+        window.clearTimeout(swapTimer);
+        swapTimer = window.setTimeout(() => {
+          if (!gl) return;
+          if (!useProgram(preset)) {
+            release();
+            return giveUp("compile");
+          }
+          drawFrame();
+          shown.value = true;
+        }, durationToken("duration-medium"));
+      }
+    );
+    watch(
+      () => props.intensity,
+      () => {
+        if (!running) drawFrame();
+      }
+    );
+    onBeforeUnmount(() => {
+      window.clearTimeout(swapTimer);
+      release();
+      themeObserver?.disconnect();
+      schemeQuery?.removeEventListener("change", refreshPalette);
+      probe?.remove();
+    });
+    const { class: rootClass, attrs: rest } = useMergedAttrs("pointer-events-none absolute inset-0 overflow-hidden bg-surface");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "root",
+        ref: root,
+        class: unref(rootClass)
+      }, unref(rest), {
+        "aria-hidden": "true",
+        "data-mode": shown.value ? "gl" : "css"
+      }), [
+        createVNode(Transition, {
+          "enter-active-class": "transition-opacity duration-medium ease-out motion-reduce:transition-none",
+          "leave-active-class": "transition-opacity duration-medium ease-out motion-reduce:transition-none",
+          "enter-from-class": "opacity-0",
+          "leave-to-class": "opacity-0"
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createElementBlock("div", {
+              key: __props.preset,
+              class: "absolute inset-0"
+            }, [
+              createElementVNode("div", {
+                class: "absolute inset-0 transition-opacity duration-medium",
+                style: normalizeStyle(fallbackStyle.value)
+              }, null, 4)
+            ]))
+          ]),
+          _: 1
+        }),
+        (openBlock(), createElementBlock("canvas", {
+          key: canvasKey.value,
+          ref_key: "canvas",
+          ref: canvas,
+          class: normalizeClass(["absolute inset-0 size-full transition-opacity duration-medium ease-out", shown.value ? "opacity-100" : "opacity-0"])
+        }, null, 2))
+      ], 16, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};