@warmio/ui 1.4.0 → 1.5.2

package/dist/chunks/chunk-GKEYV2XW.js

@@ -1,10 +0,0 @@
-// ../ui/src/warmio/button.tsx
-import {
-  Button,
-  ButtonLink
-} from "@warmio/design/button";
-
-export {
-  Button,
-  ButtonLink
-};

package/dist/chunks/chunk-HDCV4ACN.js

@@ -1,469 +0,0 @@
-import {
-  cn
-} from "./chunk-VIB7OX7D.js";
-
-// ../ui/src/warmio/flame-expression-video.tsx
-import { useRef } from "react";
-
-// ../ui/src/warmio/flame-expression-videos.ts
-var FLAME_EXPRESSION_VIDEO_PACK = "v4";
-var FLAME_EXPRESSION_VIDEO_IDS = ["NORMAL", "LUL", "POG", "CRY", "LOVE", "HYPE"];
-var LEGACY_MASCOT_MOOD_TO_EXPRESSION = {
-  calm: "NORMAL",
-  happy: "LUL",
-  focused: "NORMAL",
-  relieved: "LOVE",
-  /** @deprecated Use peekEyes="closed" on auth peek instead. */
-  "password-retry": "NORMAL",
-  frustrated: "CRY"
-};
-function isLegacyMascotMood(expression) {
-  return Object.hasOwn(LEGACY_MASCOT_MOOD_TO_EXPRESSION, expression);
-}
-function isFlameExpressionVideoId(expression) {
-  for (const id of FLAME_EXPRESSION_VIDEO_IDS) {
-    if (id === expression) return true;
-  }
-  return false;
-}
-function getFlameExpressionVideoSrc(expression, theme) {
-  return `/flame-expressions/${FLAME_EXPRESSION_VIDEO_PACK}/${expression}/open_${theme}.mp4`;
-}
-function getFlameMascotPeekVideoSrc(eyes, theme) {
-  return `/mascot/${eyes}_${theme}.mp4`;
-}
-function resolveFlameExpressionVideoId(expression) {
-  if (!expression) return "NORMAL";
-  if (isLegacyMascotMood(expression)) {
-    return LEGACY_MASCOT_MOOD_TO_EXPRESSION[expression];
-  }
-  if (isFlameExpressionVideoId(expression)) {
-    return expression;
-  }
-  return "NORMAL";
-}
-
-// ../ui/src/warmio/flame-expression-video.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var LIGHT_KEY = 247;
-var DARK_KEY = 17;
-var HARD_KEY = 16;
-var SOFT_KEY = 42;
-function prefersReducedMotion() {
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function isDarkDocument() {
-  return document.documentElement.classList.contains("dark");
-}
-function pixelChannel(pixels, index) {
-  const value = pixels[index];
-  if (value === void 0) throw new Error("Canvas pixel data is unexpectedly sparse");
-  return value;
-}
-function isDarkForRoot(root) {
-  const theme = root.dataset["flameTheme"];
-  if (theme === "dark") return true;
-  if (theme === "light") return false;
-  return isDarkDocument();
-}
-function punchKeyedBackground(context, width, height, dark) {
-  const frame = context.getImageData(0, 0, width, height);
-  const pixels = frame.data;
-  const key = dark ? DARK_KEY : LIGHT_KEY;
-  for (let index = 0; index < pixels.length; index += 4) {
-    const red = pixelChannel(pixels, index);
-    const green = pixelChannel(pixels, index + 1);
-    const blue = pixelChannel(pixels, index + 2);
-    if (!dark) {
-      const minChannel = Math.min(red, green, blue);
-      if (minChannel > LIGHT_KEY) {
-        pixels[index] = 255;
-        pixels[index + 1] = 255;
-        pixels[index + 2] = 255;
-        pixels[index + 3] = 255;
-        continue;
-      }
-    }
-    const distance = Math.max(Math.abs(red - key), Math.abs(green - key), Math.abs(blue - key));
-    if (distance <= HARD_KEY) {
-      pixels[index + 3] = 0;
-      continue;
-    }
-    if (distance < SOFT_KEY) {
-      const alpha = pixelChannel(pixels, index + 3);
-      pixels[index + 3] = Math.round(alpha * ((distance - HARD_KEY) / (SOFT_KEY - HARD_KEY)));
-    }
-  }
-  context.putImageData(frame, 0, 0);
-}
-function syncCanvasSize(canvas, context) {
-  const cssSize = canvas.clientWidth;
-  if (cssSize === 0) return false;
-  const pixelRatio = Math.min(Math.max(window.devicePixelRatio || 1, 2), 3);
-  const nextSize = Math.max(1, Math.round(cssSize * pixelRatio));
-  if (canvas.width !== nextSize || canvas.height !== nextSize) {
-    canvas.width = nextSize;
-    canvas.height = nextSize;
-  }
-  context.imageSmoothingEnabled = true;
-  context.imageSmoothingQuality = "high";
-  return true;
-}
-function drawKeyedFrame(video, canvas, context, dark) {
-  if (!syncCanvasSize(canvas, context) || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
-    return;
-  }
-  context.drawImage(video, 0, 0, canvas.width, canvas.height);
-  punchKeyedBackground(context, canvas.width, canvas.height, dark);
-}
-function sourceForTheme(video, dark) {
-  return dark ? video.dataset["darkSrc"] : video.dataset["lightSrc"];
-}
-function bindKeyedExpressionVideo(root) {
-  if (root.dataset["bound"] === "true") return () => void 0;
-  root.dataset["bound"] = "true";
-  const video = root.querySelector("[data-flame-expression-video-source]");
-  const canvas = root.querySelector("[data-flame-expression-video-frame]");
-  if (!video || !canvas) {
-    delete root.dataset["bound"];
-    return () => void 0;
-  }
-  const context = canvas.getContext("2d", { willReadFrequently: true });
-  if (!context) {
-    root.hidden = true;
-    delete root.dataset["bound"];
-    return () => void 0;
-  }
-  let dark = isDarkForRoot(root);
-  let playing = false;
-  let visible = true;
-  let frameHandle = 0;
-  let lastVideoTime = -1;
-  const reducedMotion = prefersReducedMotion();
-  let loadedDataListener = null;
-  const drawFrame = () => {
-    const nextDark = isDarkForRoot(root);
-    if (nextDark !== dark) {
-      applyTheme(nextDark);
-      return;
-    }
-    drawKeyedFrame(video, canvas, context, dark);
-  };
-  const stopLoop = () => {
-    cancelAnimationFrame(frameHandle);
-    frameHandle = 0;
-    lastVideoTime = -1;
-  };
-  const loop = () => {
-    if (!playing || reducedMotion) return;
-    if (video.currentTime !== lastVideoTime) {
-      lastVideoTime = video.currentTime;
-      drawFrame();
-    }
-    frameHandle = requestAnimationFrame(loop);
-  };
-  const startLoop = () => {
-    if (playing || reducedMotion) {
-      drawFrame();
-      return;
-    }
-    playing = true;
-    void video.play().catch(() => void 0);
-    loop();
-  };
-  const pauseLoop = () => {
-    playing = false;
-    video.pause();
-    stopLoop();
-  };
-  const playWhenSized = () => {
-    if (root.clientWidth === 0) return;
-    drawFrame();
-    if (!visible || reducedMotion || playing) return;
-    startLoop();
-  };
-  const continueFrom = (resumeAt) => {
-    if (Number.isFinite(resumeAt) && resumeAt > 0) {
-      try {
-        video.currentTime = resumeAt;
-      } catch {
-      }
-    }
-    drawFrame();
-    if (visible && !reducedMotion) {
-      startLoop();
-    }
-  };
-  const waitForData = (resumeAt) => {
-    if (loadedDataListener) {
-      video.removeEventListener("loadeddata", loadedDataListener);
-    }
-    loadedDataListener = () => continueFrom(resumeAt);
-    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-      loadedDataListener();
-      loadedDataListener = null;
-      return;
-    }
-    video.addEventListener("loadeddata", loadedDataListener, { once: true });
-    void video.play().catch(() => void 0);
-  };
-  const applyTheme = (nextDark) => {
-    const nextSrc = sourceForTheme(video, nextDark);
-    if (!nextSrc) return;
-    const resumeAt = video.currentTime;
-    dark = nextDark;
-    const assignedSrc = video.getAttribute("src");
-    const alreadyOnSource = video.networkState !== HTMLMediaElement.NETWORK_EMPTY && (video.dataset["activeSrc"] === nextSrc || assignedSrc === nextSrc);
-    if (alreadyOnSource) {
-      video.dataset["activeSrc"] = nextSrc;
-      waitForData(resumeAt);
-      return;
-    }
-    pauseLoop();
-    video.dataset["activeSrc"] = nextSrc;
-    video.src = nextSrc;
-    waitForData(resumeAt);
-  };
-  syncCanvasSize(canvas, context);
-  applyTheme(dark);
-  const visibility = new IntersectionObserver(
-    (entries) => {
-      visible = entries.some((entry) => entry.isIntersecting);
-      if (!visible) {
-        pauseLoop();
-        return;
-      }
-      if (reducedMotion) {
-        drawFrame();
-        return;
-      }
-      startLoop();
-    },
-    { threshold: 0 }
-  );
-  visibility.observe(root);
-  const resize = new ResizeObserver(playWhenSized);
-  resize.observe(root);
-  const themeObserver = new MutationObserver(() => {
-    const nextDark = isDarkForRoot(root);
-    if (nextDark === dark) return;
-    applyTheme(nextDark);
-  });
-  themeObserver.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["class"]
-  });
-  const themeOverrideObserver = new MutationObserver(() => {
-    const nextDark = isDarkForRoot(root);
-    if (nextDark === dark) return;
-    applyTheme(nextDark);
-  });
-  themeOverrideObserver.observe(root, {
-    attributes: true,
-    attributeFilter: ["data-flame-theme"]
-  });
-  return () => {
-    visibility.disconnect();
-    resize.disconnect();
-    themeObserver.disconnect();
-    themeOverrideObserver.disconnect();
-    pauseLoop();
-    if (loadedDataListener) {
-      video.removeEventListener("loadeddata", loadedDataListener);
-    }
-    video.removeAttribute("src");
-    video.load();
-    delete video.dataset["activeSrc"];
-    delete root.dataset["bound"];
-  };
-}
-function readDomVideoTheme() {
-  if (typeof document === "undefined") return "light";
-  const mode = document.documentElement.getAttribute("data-theme-mode");
-  if (mode === "dark") return "dark";
-  if (mode === "light") return "light";
-  if (globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches) return "dark";
-  return "light";
-}
-function WarmFlameExpressionVideo({
-  expression: expressionProp = "NORMAL",
-  size = "default",
-  label = null,
-  theme: themeProp,
-  peekEyes
-}) {
-  const cleanupRef = useRef(void 0);
-  const expression = resolveFlameExpressionVideoId(expressionProp);
-  const videoTheme = themeProp ?? readDomVideoTheme();
-  const lightSrc = peekEyes ? getFlameMascotPeekVideoSrc(peekEyes, "light") : getFlameExpressionVideoSrc(expression, "light");
-  const darkSrc = peekEyes ? getFlameMascotPeekVideoSrc(peekEyes, "dark") : getFlameExpressionVideoSrc(expression, "dark");
-  const source = videoTheme === "dark" ? darkSrc : lightSrc;
-  const setRootRef = useRef(null);
-  if (setRootRef.current === null) {
-    setRootRef.current = (node) => {
-      cleanupRef.current?.();
-      cleanupRef.current = void 0;
-      if (!node) return;
-      cleanupRef.current = bindKeyedExpressionVideo(node);
-    };
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: setRootRef.current,
-      className: cn(
-        "warm-flame-expression-video",
-        "pointer-events-none inline-flex shrink-0 select-none"
-      ),
-      "data-slot": "warm-flame-expression-video",
-      "data-size": size,
-      "data-expression": expression,
-      "data-flame-peek-eyes": peekEyes,
-      "data-flame-theme": videoTheme,
-      role: label ? "img" : void 0,
-      "aria-label": label ?? void 0,
-      "aria-hidden": label ? void 0 : true,
-      children: [
-        /* @__PURE__ */ jsx(
-          "video",
-          {
-            className: "warm-flame-expression-video__source",
-            "data-flame-expression-video-source": "",
-            "data-light-src": lightSrc,
-            "data-dark-src": darkSrc,
-            src: source,
-            muted: true,
-            loop: true,
-            playsInline: true,
-            preload: "auto",
-            disablePictureInPicture: true,
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ jsx("canvas", { className: "warm-flame-expression-video__frame", "data-flame-expression-video-frame": "" })
-      ]
-    }
-  );
-}
-
-// ../ui/src/warmio/logo.tsx
-import {
-  Logo,
-  WarmLogoIcon
-} from "@warmio/design/logo";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var brandedLogoShellClassNameBySize = {
-  sm: "size-8",
-  md: "size-10",
-  lg: "size-14"
-};
-var brandedLogoIconClassNameBySize = {
-  sm: "size-5",
-  md: "size-6",
-  lg: "size-8"
-};
-var _WarmLogoGlyph = /* @__PURE__ */ jsxs2(Fragment, { children: [
-  /* @__PURE__ */ jsx2(
-    "path",
-    {
-      d: "M 33.500 40.660 C 20.206 42.744, 0 48.560, -0 50.302 C -0 51.759, 123.955 348.889, 127.738 356.500 C 142.182 385.561, 169.450 410.275, 198.946 421.040 C 218.922 428.330, 243.683 430.825, 264.526 427.648 C 277.151 425.724, 294.628 420.011, 294.194 417.952 C 293.790 416.040, 172.732 124.599, 168.522 115.405 C 161.779 100.679, 149.168 84.171, 135.093 71.646 C 119.358 57.644, 98.880 47.362, 77 42.478 C 69.645 40.836, 40.220 39.606, 33.500 40.660",
-      fill: "currentColor"
-    }
-  ),
-  /* @__PURE__ */ jsx2(
-    "path",
-    {
-      d: "M 229.651 41.597 C 217.916 43.718, 202.443 49.144, 202.744 51.035 C 203.418 55.268, 329.689 356.584, 333.687 363.500 C 340.525 375.327, 345.293 381.483, 355.408 391.538 C 374.603 410.619, 398.878 423.014, 425.907 427.533 C 439.649 429.831, 463.594 429.132, 476 426.072 C 489.892 422.645, 497.188 419.815, 496.703 418.043 C 495.416 413.331, 371.058 116.094, 367.406 109 C 349.467 74.149, 313.008 47.875, 273.752 41.509 C 262.281 39.648, 240.195 39.693, 229.651 41.597",
-      fill: "currentColor"
-    }
-  ),
-  /* @__PURE__ */ jsx2(
-    "path",
-    {
-      d: "M 463 40.593 C 451.670 42.545, 447.288 43.569, 439 46.203 C 433.775 47.864, 429.338 49.372, 429.140 49.555 C 428.942 49.737, 434.670 64.021, 441.868 81.297 C 455.574 114.190, 462.215 131.660, 468.447 151.208 C 475.360 172.892, 486.124 186.213, 503.834 194.997 C 530.956 208.450, 564.982 201.679, 583.654 179.112 C 604.399 154.041, 605.407 121.944, 586.291 95.155 C 567.827 69.280, 539.107 50.114, 508 42.907 C 500.680 41.212, 494.713 40.644, 482 40.434 C 472.925 40.284, 464.375 40.356, 463 40.593",
-      fill: "currentColor"
-    }
-  )
-] });
-function WarmBrandedLogoMark({
-  size = "md",
-  className,
-  logoClassName
-}) {
-  return /* @__PURE__ */ jsxs2(
-    "span",
-    {
-      className: cn(
-        "relative inline-flex shrink-0 items-center justify-center",
-        brandedLogoShellClassNameBySize[size],
-        className
-      ),
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute inset-0 scale-[1.35] opacity-90", children: /* @__PURE__ */ jsx2(WarmFlameExpressionVideo, { expression: "calm", label: null }) }),
-        /* @__PURE__ */ jsx2(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 600 600",
-            className: cn(
-              "relative z-10 drop-shadow-sm",
-              brandedLogoIconClassNameBySize[size],
-              logoClassName
-            ),
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx2("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
-          }
-        )
-      ]
-    }
-  );
-}
-function WarmBrandedLogoLink({
-  href,
-  ariaLabel = "Warm home",
-  size = "md",
-  className,
-  logoClassName
-}) {
-  return /* @__PURE__ */ jsx2("a", { href, "aria-label": ariaLabel, className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx2(
-    WarmBrandedLogoMark,
-    {
-      size,
-      ...className !== void 0 ? { className } : {},
-      ...logoClassName !== void 0 ? { logoClassName } : {}
-    }
-  ) });
-}
-function WarmBrandedLogoMarkStatic({
-  className,
-  logoClassName
-}) {
-  return /* @__PURE__ */ jsxs2("span", { className: cn("relative inline-flex size-8 items-center justify-center", className), children: [
-    /* @__PURE__ */ jsx2(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: "absolute inset-0 rounded-full bg-gradient-to-br from-primary/90 via-warning/80 to-primary/70"
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 600 600",
-        className: cn("relative z-10 size-5 drop-shadow-sm", logoClassName),
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx2("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
-      }
-    )
-  ] });
-}
-
-export {
-  WarmBrandedLogoMark,
-  WarmBrandedLogoLink,
-  WarmBrandedLogoMarkStatic,
-  Logo,
-  WarmLogoIcon
-};