@mieweb/ui 0.10.0-dev.1 → 0.10.0-dev.2

package/dist/chunk-IXFC7LK2.cjs

@@ -0,0 +1,174 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/hooks/useYouTubeHoverPreview.ts
+var ytApiPromise = null;
+var YT_API_TIMEOUT_MS = 1e4;
+function loadYouTubeIframeApi() {
+  if (typeof window === "undefined") return Promise.resolve();
+  const w = window;
+  if (w.YT?.Player) return Promise.resolve();
+  if (ytApiPromise) return ytApiPromise;
+  ytApiPromise = new Promise((resolve, reject) => {
+    const prev = w.onYouTubeIframeAPIReady;
+    let timer;
+    const settle = (err) => {
+      if (timer !== void 0) window.clearTimeout(timer);
+      timer = void 0;
+      if (err) {
+        ytApiPromise = null;
+        reject(err);
+      } else {
+        resolve();
+      }
+    };
+    w.onYouTubeIframeAPIReady = () => {
+      prev?.();
+      settle();
+    };
+    const tag = document.createElement("script");
+    tag.src = "https://www.youtube.com/iframe_api";
+    tag.async = true;
+    tag.onerror = () => settle(new Error("Failed to load the YouTube iframe API"));
+    timer = window.setTimeout(
+      () => settle(new Error("Timed out loading the YouTube iframe API")),
+      YT_API_TIMEOUT_MS
+    );
+    document.head.appendChild(tag);
+  });
+  return ytApiPromise;
+}
+function useYouTubeHoverPreview(youtubeId, {
+  dwellMs = 600,
+  host = "https://www.youtube-nocookie.com",
+  enabled = true
+} = {}) {
+  const [preview, setPreview] = React__namespace.useState("idle");
+  const [progress, setProgress] = React__namespace.useState(0);
+  const hostRef = React__namespace.useRef(null);
+  const playerRef = React__namespace.useRef(null);
+  const hoveringRef = React__namespace.useRef(false);
+  const enterTimerRef = React__namespace.useRef(null);
+  const pollRef = React__namespace.useRef(null);
+  const stopPreview = React__namespace.useCallback(() => {
+    hoveringRef.current = false;
+    if (enterTimerRef.current !== null) {
+      window.clearTimeout(enterTimerRef.current);
+      enterTimerRef.current = null;
+    }
+    if (pollRef.current !== null) {
+      window.clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+    if (playerRef.current) {
+      try {
+        playerRef.current.destroy();
+      } catch {
+      }
+      playerRef.current = null;
+    }
+    if (hostRef.current) hostRef.current.innerHTML = "";
+    setPreview("idle");
+    setProgress(0);
+  }, []);
+  const beginPlayer = React__namespace.useCallback(() => {
+    const el = hostRef.current;
+    const YT = window.YT;
+    if (!el || !YT?.Player || playerRef.current || !hoveringRef.current || !youtubeId)
+      return;
+    const target = document.createElement("div");
+    el.appendChild(target);
+    const startPolling = () => {
+      if (pollRef.current !== null) return;
+      pollRef.current = window.setInterval(() => {
+        const p = playerRef.current;
+        if (!p) return;
+        const d = p.getDuration();
+        if (d > 0) setProgress(Math.min(p.getCurrentTime() / d, 1));
+      }, 200);
+    };
+    playerRef.current = new YT.Player(target, {
+      videoId: youtubeId,
+      host,
+      width: "100%",
+      height: "100%",
+      playerVars: {
+        autoplay: 1,
+        mute: 1,
+        controls: 0,
+        playsinline: 1,
+        modestbranding: 1,
+        rel: 0,
+        disablekb: 1,
+        fs: 0,
+        iv_load_policy: 3,
+        start: 0
+      },
+      events: {
+        onReady: (e) => {
+          if (!hoveringRef.current) {
+            stopPreview();
+            return;
+          }
+          e.target.mute();
+          e.target.playVideo();
+        },
+        onStateChange: (e) => {
+          if (e.data === 1) {
+            setPreview("playing");
+            startPolling();
+          } else if (e.data === 0 && playerRef.current) {
+            playerRef.current.seekTo(0, true);
+            playerRef.current.playVideo();
+          }
+        },
+        onError: () => stopPreview()
+      }
+    });
+    if (!hoveringRef.current) stopPreview();
+  }, [youtubeId, host, stopPreview]);
+  const handleEnter = React__namespace.useCallback(() => {
+    if (!enabled || !youtubeId || typeof window === "undefined" || !window.matchMedia("(hover: hover)").matches || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    hoveringRef.current = true;
+    if (enterTimerRef.current !== null || playerRef.current) return;
+    enterTimerRef.current = window.setTimeout(() => {
+      enterTimerRef.current = null;
+      if (!hoveringRef.current) return;
+      setPreview("loading");
+      void loadYouTubeIframeApi().then(() => {
+        if (hoveringRef.current) beginPlayer();
+      }).catch(() => {
+        stopPreview();
+      });
+    }, dwellMs);
+  }, [enabled, youtubeId, dwellMs, beginPlayer, stopPreview]);
+  React__namespace.useEffect(() => stopPreview, [stopPreview]);
+  return { preview, progress, hostRef, handleEnter, stopPreview };
+}
+
+exports.useYouTubeHoverPreview = useYouTubeHoverPreview;
+//# sourceMappingURL=chunk-IXFC7LK2.cjs.map
+//# sourceMappingURL=chunk-IXFC7LK2.cjs.map

package/dist/chunk-IXFC7LK2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useYouTubeHoverPreview.ts"],"names":["React"],"mappings":"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","file":"chunk-IXFC7LK2.cjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n// =============================================================================\n// YouTube IFrame API (lazy, shared)\n// =============================================================================\n// Loaded only the first time a visitor dwells on a card, then reused. A minimal\n// hand-written shape instead of @types/youtube keeps the dependency graph flat.\n\ninterface YTPreviewPlayer {\n  playVideo(): void;\n  mute(): void;\n  getCurrentTime(): number;\n  getDuration(): number;\n  seekTo(seconds: number, allowSeekAhead: boolean): void;\n  destroy(): void;\n}\n\ninterface YTPlayerEvent {\n  target: YTPreviewPlayer;\n  data?: number;\n}\n\ninterface YTNamespace {\n  Player: new (\n    el: HTMLElement,\n    opts: Record<string, unknown>\n  ) => YTPreviewPlayer;\n}\n\ntype YTWindow = Window & {\n  YT?: YTNamespace;\n  onYouTubeIframeAPIReady?: () => void;\n};\n\nlet ytApiPromise: Promise<void> | null = null;\n\nconst YT_API_TIMEOUT_MS = 10_000;\n\nfunction loadYouTubeIframeApi(): Promise<void> {\n  if (typeof window === 'undefined') return Promise.resolve();\n  const w = window as YTWindow;\n  if (w.YT?.Player) return Promise.resolve();\n  if (ytApiPromise) return ytApiPromise;\n  ytApiPromise = new Promise<void>((resolve, reject) => {\n    const prev = w.onYouTubeIframeAPIReady;\n    let timer: number | undefined;\n    const settle = (err?: Error) => {\n      if (timer !== undefined) window.clearTimeout(timer);\n      timer = undefined;\n      if (err) {\n        // Clear the shared promise so a later hover can retry a transient\n        // failure (CSP, ad blocker, flaky network).\n        ytApiPromise = null;\n        reject(err);\n      } else {\n        resolve();\n      }\n    };\n    w.onYouTubeIframeAPIReady = () => {\n      prev?.();\n      settle();\n    };\n    const tag = document.createElement('script');\n    tag.src = 'https://www.youtube.com/iframe_api';\n    tag.async = true;\n    tag.onerror = () =>\n      settle(new Error('Failed to load the YouTube iframe API'));\n    timer = window.setTimeout(\n      () => settle(new Error('Timed out loading the YouTube iframe API')),\n      YT_API_TIMEOUT_MS\n    );\n    document.head.appendChild(tag);\n  });\n  return ytApiPromise;\n}\n\n// =============================================================================\n// Hook\n// =============================================================================\n\nexport type HoverPreviewState = 'idle' | 'loading' | 'playing';\n\nexport interface UseYouTubeHoverPreviewOptions {\n  /** Hover dwell before the player mounts. Default 600ms. */\n  dwellMs?: number;\n  /** Player host. Default `https://www.youtube-nocookie.com`. */\n  host?: string;\n  /** Disable entirely (e.g. when the card has no YouTube id). */\n  enabled?: boolean;\n}\n\nexport interface UseYouTubeHoverPreviewReturn {\n  /** Lifecycle phase of the muted preview. */\n  preview: HoverPreviewState;\n  /** Normalised playback position (0–1) for a timeline bar. */\n  progress: number;\n  /** Attach to the element the muted iframe should fill. */\n  hostRef: React.RefObject<HTMLDivElement | null>;\n  /** Wire to the hover target's `onMouseEnter` / `onFocus`. */\n  handleEnter: () => void;\n  /** Wire to the hover target's `onMouseLeave` / `onBlur` (and any manual reset). */\n  stopPreview: () => void;\n}\n\n/**\n * Drives a muted, looping YouTube hover preview for a single `youtubeId` — the\n * \"silent autoplay on dwell\" pattern from YouTube's own grid. After a short\n * hover dwell a muted player is mounted lazily inside `hostRef`; `progress`\n * tracks playback for a timeline bar; everything tears down on leave so only\n * one preview is ever live. Honours `prefers-reduced-motion` and skips\n * pointer-less (touch) inputs.\n *\n * @example\n * ```tsx\n * const { preview, progress, hostRef, handleEnter, stopPreview } =\n *   useYouTubeHoverPreview('dQw4w9WgXcQ');\n * <a onMouseEnter={handleEnter} onMouseLeave={stopPreview}>\n *   <div ref={hostRef} className={preview === 'playing' ? 'opacity-100' : 'opacity-0'} />\n * </a>\n * ```\n */\nexport function useYouTubeHoverPreview(\n  youtubeId: string | undefined,\n  {\n    dwellMs = 600,\n    host = 'https://www.youtube-nocookie.com',\n    enabled = true,\n  }: UseYouTubeHoverPreviewOptions = {}\n): UseYouTubeHoverPreviewReturn {\n  const [preview, setPreview] = React.useState<HoverPreviewState>('idle');\n  const [progress, setProgress] = React.useState(0);\n\n  const hostRef = React.useRef<HTMLDivElement | null>(null);\n  const playerRef = React.useRef<YTPreviewPlayer | null>(null);\n  const hoveringRef = React.useRef(false);\n  const enterTimerRef = React.useRef<number | null>(null);\n  const pollRef = React.useRef<number | null>(null);\n\n  const stopPreview = React.useCallback(() => {\n    hoveringRef.current = false;\n    if (enterTimerRef.current !== null) {\n      window.clearTimeout(enterTimerRef.current);\n      enterTimerRef.current = null;\n    }\n    if (pollRef.current !== null) {\n      window.clearInterval(pollRef.current);\n      pollRef.current = null;\n    }\n    if (playerRef.current) {\n      try {\n        playerRef.current.destroy();\n      } catch {\n        /* player already torn down */\n      }\n      playerRef.current = null;\n    }\n    if (hostRef.current) hostRef.current.innerHTML = '';\n    setPreview('idle');\n    setProgress(0);\n  }, []);\n\n  const beginPlayer = React.useCallback(() => {\n    const el = hostRef.current;\n    const YT = (window as YTWindow).YT;\n    if (\n      !el ||\n      !YT?.Player ||\n      playerRef.current ||\n      !hoveringRef.current ||\n      !youtubeId\n    )\n      return;\n\n    const target = document.createElement('div');\n    el.appendChild(target);\n\n    const startPolling = () => {\n      if (pollRef.current !== null) return;\n      pollRef.current = window.setInterval(() => {\n        const p = playerRef.current;\n        if (!p) return;\n        const d = p.getDuration();\n        if (d > 0) setProgress(Math.min(p.getCurrentTime() / d, 1));\n      }, 200);\n    };\n\n    playerRef.current = new YT.Player(target, {\n      videoId: youtubeId,\n      host,\n      width: '100%',\n      height: '100%',\n      playerVars: {\n        autoplay: 1,\n        mute: 1,\n        controls: 0,\n        playsinline: 1,\n        modestbranding: 1,\n        rel: 0,\n        disablekb: 1,\n        fs: 0,\n        iv_load_policy: 3,\n        start: 0,\n      },\n      events: {\n        onReady: (e: YTPlayerEvent) => {\n          if (!hoveringRef.current) {\n            stopPreview();\n            return;\n          }\n          e.target.mute();\n          e.target.playVideo();\n        },\n        onStateChange: (e: YTPlayerEvent) => {\n          if (e.data === 1) {\n            // PLAYING — reveal only once frames are actually flowing\n            setPreview('playing');\n            startPolling();\n          } else if (e.data === 0 && playerRef.current) {\n            // ENDED — loop like YouTube's own previews\n            playerRef.current.seekTo(0, true);\n            playerRef.current.playVideo();\n          }\n        },\n        onError: () => stopPreview(),\n      },\n    });\n\n    // the visitor may have left during async player construction\n    if (!hoveringRef.current) stopPreview();\n  }, [youtubeId, host, stopPreview]);\n\n  const handleEnter = React.useCallback(() => {\n    if (\n      !enabled ||\n      !youtubeId ||\n      typeof window === 'undefined' ||\n      !window.matchMedia('(hover: hover)').matches ||\n      window.matchMedia('(prefers-reduced-motion: reduce)').matches\n    ) {\n      return;\n    }\n    hoveringRef.current = true;\n    if (enterTimerRef.current !== null || playerRef.current) return;\n    enterTimerRef.current = window.setTimeout(() => {\n      enterTimerRef.current = null;\n      if (!hoveringRef.current) return;\n      setPreview('loading');\n      void loadYouTubeIframeApi()\n        .then(() => {\n          // If the visitor left while the API loaded, mouseleave/blur/unmount\n          // already ran stopPreview — calling it again here could set state\n          // after unmount when the script finally arrives.\n          if (hoveringRef.current) beginPlayer();\n        })\n        .catch(() => {\n          // API blocked or timed out — return the card to its idle poster\n          // instead of leaving it stuck in `loading`.\n          stopPreview();\n        });\n    }, dwellMs);\n  }, [enabled, youtubeId, dwellMs, beginPlayer, stopPreview]);\n\n  React.useEffect(() => stopPreview, [stopPreview]);\n\n  return { preview, progress, hostRef, handleEnter, stopPreview };\n}\n"]}

package/dist/{chunk-VNAREBLV.cjs → chunk-J5CSLNCN.cjs}

@@ -5,7 +5,7 @@ var brands = {
   bluehive: () => import('./brands/bluehive.cjs').then((m) => m.bluehiveBrand),
   ccme: () => import('./brands/ccme.cjs').then((m) => m.ccmeBrand),
   default: () => import('./default-CCMUBXP6.cjs').then((m) => m.defaultBrand),
-  "enterprise-health": () => import('./enterprise-health-75VYWAVG.cjs').then((m) => m.enterpriseHealthBrand),
+  "enterprise-health": () => import('./enterprise-health-UHHPVPU6.cjs').then((m) => m.enterpriseHealthBrand),
   mieweb: () => import('./mieweb-72YOL44I.cjs').then((m) => m.miewebBrand),
   ozwell: () => import('./brands/ozwell.cjs').then((m) => m.ozwellBrand),
   waggleline: () => import('./waggleline-5CBT4MNN.cjs').then((m) => m.wagglelineBrand),
@@ -13,5 +13,5 @@ var brands = {
 };
 
 exports.brands = brands;
-//# sourceMappingURL=chunk-VNAREBLV.cjs.map
-//# sourceMappingURL=chunk-VNAREBLV.cjs.map
+//# sourceMappingURL=chunk-J5CSLNCN.cjs.map
+//# sourceMappingURL=chunk-J5CSLNCN.cjs.map

package/dist/{chunk-VNAREBLV.cjs.map → chunk-J5CSLNCN.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/brands/index.ts"],"names":[],"mappings":";;;AAkCO,IAAM,MAAA,GAAS;AAAA,EACpB,QAAA,EAAU,MAAM,OAAO,uBAAY,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,aAAa,CAAA;AAAA,EAChE,IAAA,EAAM,MAAM,OAAO,mBAAQ,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,CAAA;AAAA,EACpD,OAAA,EAAS,MAAM,OAAO,wBAAW,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,YAAY,CAAA;AAAA,EAC7D,mBAAA,EAAqB,MACnB,OAAO,kCAAqB,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,qBAAqB,CAAA;AAAA,EACnE,MAAA,EAAQ,MAAM,OAAO,uBAAU,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,WAAW,CAAA;AAAA,EAC1D,MAAA,EAAQ,MAAM,OAAO,qBAAU,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,WAAW,CAAA;AAAA,EAC1D,UAAA,EAAY,MAAM,OAAO,2BAAc,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,eAAe,CAAA;AAAA,EACtE,QAAA,EAAU,MAAM,OAAO,yBAAY,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,aAAa;AAClE","file":"chunk-VNAREBLV.cjs","sourcesContent":["/**\n * @mieweb/ui Brand System\n *\n * Export all brand-related types, utilities, and configurations.\n */\n\n// Types and utilities\nexport type {\n  BrandConfig,\n  BrandColors,\n  BrandTypography,\n  BrandBorderRadius,\n  BrandBoxShadow,\n  ColorScale,\n  SemanticColors,\n} from './types';\n\nexport {\n  generateBrandCSS,\n  generateTailwindTheme,\n  createBrandPreset,\n} from './types';\n\n// Brand configurations\nexport { bluehiveBrand } from './bluehive';\nexport { ccmeBrand } from './ccme';\nexport { defaultBrand } from './default';\nexport { enterpriseHealthBrand } from './enterprise-health';\nexport { miewebBrand } from './mieweb';\nexport { ozwellBrand } from './ozwell';\nexport { wagglelineBrand } from './waggleline';\nexport { webchartBrand } from './webchart';\n\n// All brands for iteration\nexport const brands = {\n  bluehive: () => import('./bluehive').then((m) => m.bluehiveBrand),\n  ccme: () => import('./ccme').then((m) => m.ccmeBrand),\n  default: () => import('./default').then((m) => m.defaultBrand),\n  'enterprise-health': () =>\n    import('./enterprise-health').then((m) => m.enterpriseHealthBrand),\n  mieweb: () => import('./mieweb').then((m) => m.miewebBrand),\n  ozwell: () => import('./ozwell').then((m) => m.ozwellBrand),\n  waggleline: () => import('./waggleline').then((m) => m.wagglelineBrand),\n  webchart: () => import('./webchart').then((m) => m.webchartBrand),\n} as const;\n"]}
+{"version":3,"sources":["../src/brands/index.ts"],"names":[],"mappings":";;;AAkCO,IAAM,MAAA,GAAS;AAAA,EACpB,QAAA,EAAU,MAAM,OAAO,uBAAY,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,aAAa,CAAA;AAAA,EAChE,IAAA,EAAM,MAAM,OAAO,mBAAQ,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,CAAA;AAAA,EACpD,OAAA,EAAS,MAAM,OAAO,wBAAW,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,YAAY,CAAA;AAAA,EAC7D,mBAAA,EAAqB,MACnB,OAAO,kCAAqB,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,qBAAqB,CAAA;AAAA,EACnE,MAAA,EAAQ,MAAM,OAAO,uBAAU,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,WAAW,CAAA;AAAA,EAC1D,MAAA,EAAQ,MAAM,OAAO,qBAAU,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,WAAW,CAAA;AAAA,EAC1D,UAAA,EAAY,MAAM,OAAO,2BAAc,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,eAAe,CAAA;AAAA,EACtE,QAAA,EAAU,MAAM,OAAO,yBAAY,EAAE,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,aAAa;AAClE","file":"chunk-J5CSLNCN.cjs","sourcesContent":["/**\n * @mieweb/ui Brand System\n *\n * Export all brand-related types, utilities, and configurations.\n */\n\n// Types and utilities\nexport type {\n  BrandConfig,\n  BrandColors,\n  BrandTypography,\n  BrandBorderRadius,\n  BrandBoxShadow,\n  ColorScale,\n  SemanticColors,\n} from './types';\n\nexport {\n  generateBrandCSS,\n  generateTailwindTheme,\n  createBrandPreset,\n} from './types';\n\n// Brand configurations\nexport { bluehiveBrand } from './bluehive';\nexport { ccmeBrand } from './ccme';\nexport { defaultBrand } from './default';\nexport { enterpriseHealthBrand } from './enterprise-health';\nexport { miewebBrand } from './mieweb';\nexport { ozwellBrand } from './ozwell';\nexport { wagglelineBrand } from './waggleline';\nexport { webchartBrand } from './webchart';\n\n// All brands for iteration\nexport const brands = {\n  bluehive: () => import('./bluehive').then((m) => m.bluehiveBrand),\n  ccme: () => import('./ccme').then((m) => m.ccmeBrand),\n  default: () => import('./default').then((m) => m.defaultBrand),\n  'enterprise-health': () =>\n    import('./enterprise-health').then((m) => m.enterpriseHealthBrand),\n  mieweb: () => import('./mieweb').then((m) => m.miewebBrand),\n  ozwell: () => import('./ozwell').then((m) => m.ozwellBrand),\n  waggleline: () => import('./waggleline').then((m) => m.wagglelineBrand),\n  webchart: () => import('./webchart').then((m) => m.webchartBrand),\n} as const;\n"]}

package/dist/{chunk-24SEAAOH.js → chunk-JHULS3EC.js}

@@ -126,5 +126,5 @@ function useIsMobileOrTablet() {
 }
 
 export { RTL_LOCALES, isRtlLocale, useCommandK, useDirection, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery };
-//# sourceMappingURL=chunk-24SEAAOH.js.map
-//# sourceMappingURL=chunk-24SEAAOH.js.map
+//# sourceMappingURL=chunk-JHULS3EC.js.map
+//# sourceMappingURL=chunk-JHULS3EC.js.map

package/dist/{chunk-24SEAAOH.js.map → chunk-JHULS3EC.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useDirection.ts","../src/hooks/useKeyboardShortcut.ts","../src/hooks/useMediaQuery.ts"],"names":["useEffect","useState"],"mappings":"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","file":"chunk-24SEAAOH.js","sourcesContent":["import { useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport type Direction = 'ltr' | 'rtl';\n\n/** Locales whose primary script reads right-to-left. */\nexport const RTL_LOCALES = ['ar', 'he', 'fa', 'ur'] as const;\n\n/**\n * Returns true when the given locale (e.g. `ar`, `ar-SA`, `he_IL`) uses a\n * right-to-left script.\n */\nexport function isRtlLocale(locale: string): boolean {\n  const lang = locale.toLowerCase().split(/[-_]/)[0];\n  return (RTL_LOCALES as readonly string[]).includes(lang);\n}\n\nfunction resolveDirection(element?: HTMLElement | null): Direction {\n  if (typeof document === 'undefined') return 'ltr';\n  const target = element ?? document.documentElement;\n  return getComputedStyle(target).direction === 'rtl' ? 'rtl' : 'ltr';\n}\n\n/**\n * Hook returning the effective text direction (`ltr` | `rtl`) inherited from\n * the nearest `dir` attribute — zero setup for consumers who set\n * `<html dir=\"rtl\">`.\n *\n * Use for JS-level direction logic that CSS logical properties can't cover:\n * inverting ArrowLeft/ArrowRight keyboard handling, popover/toast placement,\n * drag math, etc.\n *\n * @param elementRef - Optional ref; when provided, direction is resolved from\n *   that element (respecting any local `dir` override) instead of `<html>`.\n *\n * @example\n * ```tsx\n * const direction = useDirection();\n * const nextKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n * ```\n */\nexport function useDirection(\n  elementRef?: RefObject<HTMLElement | null>\n): Direction {\n  const [direction, setDirection] = useState<Direction>(() =>\n    resolveDirection(elementRef?.current)\n  );\n\n  useEffect(() => {\n    const update = () => setDirection(resolveDirection(elementRef?.current));\n    update();\n    // dir changes are rare; observing the whole tree for just this attribute is cheap.\n    const observer = new MutationObserver(update);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir'],\n      subtree: true,\n    });\n    return () => observer.disconnect();\n  }, [elementRef]);\n\n  // Re-sync when a re-render points elementRef.current at a different node:\n  // the MutationObserver only fires on `dir` attribute mutations, so a swapped\n  // ref target with a different inherited direction would otherwise go stale.\n  const currentElement = elementRef?.current ?? null;\n  useEffect(() => {\n    setDirection(resolveDirection(currentElement));\n  }, [currentElement]);\n\n  return direction;\n}\n","import { useEffect, useCallback } from 'react';\n\n/**\n * Options for keyboard shortcut hook\n */\nexport interface KeyboardShortcutOptions {\n  /** Whether the shortcut is currently enabled (default: true) */\n  enabled?: boolean;\n  /** Modifier keys required (default: none) */\n  modifiers?: {\n    ctrl?: boolean;\n    shift?: boolean;\n    alt?: boolean;\n    meta?: boolean;\n  };\n  /** Whether to prevent default browser behavior (default: true) */\n  preventDefault?: boolean;\n  /** Whether to stop event propagation (default: false) */\n  stopPropagation?: boolean;\n  /** Element types to ignore when the shortcut is pressed (default: ['INPUT', 'TEXTAREA', 'SELECT']) */\n  ignoreInputs?: boolean;\n}\n\n/**\n * Hook that triggers a callback when a specific keyboard shortcut is pressed.\n * Supports modifier keys (Ctrl, Shift, Alt, Meta) and ignores input fields by default.\n *\n * @param key - The key to listen for (e.g., 'k', 'Enter', 'Escape', '/')\n * @param callback - Function to call when the shortcut is pressed\n * @param options - Configuration options\n *\n * @example\n * ```tsx\n * // Cmd/Ctrl+K to open search\n * useKeyboardShortcut('k', openSearch, { modifiers: { meta: true, ctrl: true } });\n *\n * // Forward slash to focus search (ignoring when typing)\n * useKeyboardShortcut('/', focusSearch);\n *\n * // Escape to close modal\n * useKeyboardShortcut('Escape', closeModal);\n * ```\n */\nexport function useKeyboardShortcut(\n  key: string,\n  callback: (event: KeyboardEvent) => void,\n  options: KeyboardShortcutOptions = {}\n): void {\n  const {\n    enabled = true,\n    modifiers = {},\n    preventDefault = true,\n    stopPropagation = false,\n    ignoreInputs = true,\n  } = options;\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      // Check if we should ignore input fields\n      if (ignoreInputs) {\n        const target = event.target as HTMLElement;\n        const tagName = target.tagName.toUpperCase();\n        if (\n          tagName === 'INPUT' ||\n          tagName === 'TEXTAREA' ||\n          tagName === 'SELECT' ||\n          target.isContentEditable\n        ) {\n          return;\n        }\n      }\n\n      // Check modifiers\n      const { ctrl, shift, alt, meta } = modifiers;\n\n      // For Cmd+K style shortcuts, allow either meta (Mac) or ctrl (Windows/Linux)\n      const metaOrCtrl = meta || ctrl;\n      if (metaOrCtrl) {\n        if (!(event.metaKey || event.ctrlKey)) return;\n      } else {\n        // If no meta/ctrl modifier specified, ensure neither is pressed\n        if (event.metaKey || event.ctrlKey) return;\n      }\n\n      if (shift && !event.shiftKey) return;\n      if (alt && !event.altKey) return;\n\n      // Check key match (case-insensitive for letters)\n      const eventKey =\n        event.key.length === 1 ? event.key.toLowerCase() : event.key;\n      const targetKey = key.length === 1 ? key.toLowerCase() : key;\n      if (eventKey !== targetKey) return;\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      callback(event);\n    },\n    [key, callback, modifiers, preventDefault, stopPropagation, ignoreInputs]\n  );\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown, enabled]);\n}\n\n/**\n * Hook for the common Cmd/Ctrl+K shortcut pattern (command palette, search, etc.)\n *\n * @param callback - Function to call when Cmd/Ctrl+K is pressed\n * @param enabled - Whether the shortcut is active (default: true)\n *\n * @example\n * ```tsx\n * useCommandK(() => setIsOpen(true));\n * ```\n */\nexport function useCommandK(callback: () => void, enabled = true): void {\n  useKeyboardShortcut('k', callback, {\n    enabled,\n    modifiers: { meta: true, ctrl: true },\n    ignoreInputs: false, // Cmd+K should work even in inputs\n  });\n}\n","import { useState, useEffect } from 'react';\n\n/**\n * Hook that tracks whether a media query matches.\n * Uses the native `matchMedia` API for efficient media query tracking.\n *\n * @param query - CSS media query string (e.g., '(min-width: 768px)')\n * @returns Boolean indicating whether the media query matches\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const isMobile = useMediaQuery('(max-width: 767px)');\n *   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n *   const isDesktop = useMediaQuery('(min-width: 1024px)');\n *\n *   return (\n *     <div>\n *       {isMobile && <MobileLayout />}\n *       {isTablet && <TabletLayout />}\n *       {isDesktop && <DesktopLayout />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaQuery(query: string): boolean {\n  // Initialize with null to indicate SSR/initial state\n  const [matches, setMatches] = useState<boolean>(() => {\n    // Check if we're in a browser environment\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Handler for media query changes\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Modern browsers use addEventListener\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handler);\n      return () => mediaQuery.removeEventListener('change', handler);\n    }\n\n    // Fallback for older browsers\n    mediaQuery.addListener(handler);\n    return () => mediaQuery.removeListener(handler);\n  }, [query]);\n\n  return matches;\n}\n\n/**\n * Preset breakpoint hooks following common responsive design patterns\n */\n\n/** Returns true when viewport is smaller than 640px (mobile) */\nexport function useIsMobile(): boolean {\n  return useMediaQuery('(max-width: 639px)');\n}\n\n/** Returns true when viewport is 640px-767px (large mobile / small tablet) */\nexport function useIsSmallTablet(): boolean {\n  return useMediaQuery('(min-width: 640px) and (max-width: 767px)');\n}\n\n/** Returns true when viewport is 768px-1023px (tablet) */\nexport function useIsTablet(): boolean {\n  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n}\n\n/** Returns true when viewport is 1024px or larger (desktop) */\nexport function useIsDesktop(): boolean {\n  return useMediaQuery('(min-width: 1024px)');\n}\n\n/** Returns true when viewport is 1280px or larger (large desktop) */\nexport function useIsLargeDesktop(): boolean {\n  return useMediaQuery('(min-width: 1280px)');\n}\n\n/** Returns true when viewport is smaller than 1024px (mobile/tablet) */\nexport function useIsMobileOrTablet(): boolean {\n  return useMediaQuery('(max-width: 1023px)');\n}\n"]}
+{"version":3,"sources":["../src/hooks/useDirection.ts","../src/hooks/useKeyboardShortcut.ts","../src/hooks/useMediaQuery.ts"],"names":["useEffect","useState"],"mappings":"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","file":"chunk-JHULS3EC.js","sourcesContent":["import { useState, useEffect } from 'react';\nimport type { RefObject } from 'react';\n\nexport type Direction = 'ltr' | 'rtl';\n\n/** Locales whose primary script reads right-to-left. */\nexport const RTL_LOCALES = ['ar', 'he', 'fa', 'ur'] as const;\n\n/**\n * Returns true when the given locale (e.g. `ar`, `ar-SA`, `he_IL`) uses a\n * right-to-left script.\n */\nexport function isRtlLocale(locale: string): boolean {\n  const lang = locale.toLowerCase().split(/[-_]/)[0];\n  return (RTL_LOCALES as readonly string[]).includes(lang);\n}\n\nfunction resolveDirection(element?: HTMLElement | null): Direction {\n  if (typeof document === 'undefined') return 'ltr';\n  const target = element ?? document.documentElement;\n  return getComputedStyle(target).direction === 'rtl' ? 'rtl' : 'ltr';\n}\n\n/**\n * Hook returning the effective text direction (`ltr` | `rtl`) inherited from\n * the nearest `dir` attribute — zero setup for consumers who set\n * `<html dir=\"rtl\">`.\n *\n * Use for JS-level direction logic that CSS logical properties can't cover:\n * inverting ArrowLeft/ArrowRight keyboard handling, popover/toast placement,\n * drag math, etc.\n *\n * @param elementRef - Optional ref; when provided, direction is resolved from\n *   that element (respecting any local `dir` override) instead of `<html>`.\n *\n * @example\n * ```tsx\n * const direction = useDirection();\n * const nextKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n * ```\n */\nexport function useDirection(\n  elementRef?: RefObject<HTMLElement | null>\n): Direction {\n  const [direction, setDirection] = useState<Direction>(() =>\n    resolveDirection(elementRef?.current)\n  );\n\n  useEffect(() => {\n    const update = () => setDirection(resolveDirection(elementRef?.current));\n    update();\n    // dir changes are rare; observing the whole tree for just this attribute is cheap.\n    const observer = new MutationObserver(update);\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir'],\n      subtree: true,\n    });\n    return () => observer.disconnect();\n  }, [elementRef]);\n\n  // Re-sync when a re-render points elementRef.current at a different node:\n  // the MutationObserver only fires on `dir` attribute mutations, so a swapped\n  // ref target with a different inherited direction would otherwise go stale.\n  const currentElement = elementRef?.current ?? null;\n  useEffect(() => {\n    setDirection(resolveDirection(currentElement));\n  }, [currentElement]);\n\n  return direction;\n}\n","import { useEffect, useCallback } from 'react';\n\n/**\n * Options for keyboard shortcut hook\n */\nexport interface KeyboardShortcutOptions {\n  /** Whether the shortcut is currently enabled (default: true) */\n  enabled?: boolean;\n  /** Modifier keys required (default: none) */\n  modifiers?: {\n    ctrl?: boolean;\n    shift?: boolean;\n    alt?: boolean;\n    meta?: boolean;\n  };\n  /** Whether to prevent default browser behavior (default: true) */\n  preventDefault?: boolean;\n  /** Whether to stop event propagation (default: false) */\n  stopPropagation?: boolean;\n  /** Element types to ignore when the shortcut is pressed (default: ['INPUT', 'TEXTAREA', 'SELECT']) */\n  ignoreInputs?: boolean;\n}\n\n/**\n * Hook that triggers a callback when a specific keyboard shortcut is pressed.\n * Supports modifier keys (Ctrl, Shift, Alt, Meta) and ignores input fields by default.\n *\n * @param key - The key to listen for (e.g., 'k', 'Enter', 'Escape', '/')\n * @param callback - Function to call when the shortcut is pressed\n * @param options - Configuration options\n *\n * @example\n * ```tsx\n * // Cmd/Ctrl+K to open search\n * useKeyboardShortcut('k', openSearch, { modifiers: { meta: true, ctrl: true } });\n *\n * // Forward slash to focus search (ignoring when typing)\n * useKeyboardShortcut('/', focusSearch);\n *\n * // Escape to close modal\n * useKeyboardShortcut('Escape', closeModal);\n * ```\n */\nexport function useKeyboardShortcut(\n  key: string,\n  callback: (event: KeyboardEvent) => void,\n  options: KeyboardShortcutOptions = {}\n): void {\n  const {\n    enabled = true,\n    modifiers = {},\n    preventDefault = true,\n    stopPropagation = false,\n    ignoreInputs = true,\n  } = options;\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      // Check if we should ignore input fields\n      if (ignoreInputs) {\n        const target = event.target as HTMLElement;\n        const tagName = target.tagName.toUpperCase();\n        if (\n          tagName === 'INPUT' ||\n          tagName === 'TEXTAREA' ||\n          tagName === 'SELECT' ||\n          target.isContentEditable\n        ) {\n          return;\n        }\n      }\n\n      // Check modifiers\n      const { ctrl, shift, alt, meta } = modifiers;\n\n      // For Cmd+K style shortcuts, allow either meta (Mac) or ctrl (Windows/Linux)\n      const metaOrCtrl = meta || ctrl;\n      if (metaOrCtrl) {\n        if (!(event.metaKey || event.ctrlKey)) return;\n      } else {\n        // If no meta/ctrl modifier specified, ensure neither is pressed\n        if (event.metaKey || event.ctrlKey) return;\n      }\n\n      if (shift && !event.shiftKey) return;\n      if (alt && !event.altKey) return;\n\n      // Check key match (case-insensitive for letters)\n      const eventKey =\n        event.key.length === 1 ? event.key.toLowerCase() : event.key;\n      const targetKey = key.length === 1 ? key.toLowerCase() : key;\n      if (eventKey !== targetKey) return;\n\n      if (preventDefault) {\n        event.preventDefault();\n      }\n      if (stopPropagation) {\n        event.stopPropagation();\n      }\n\n      callback(event);\n    },\n    [key, callback, modifiers, preventDefault, stopPropagation, ignoreInputs]\n  );\n\n  useEffect(() => {\n    if (!enabled) return;\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown, enabled]);\n}\n\n/**\n * Hook for the common Cmd/Ctrl+K shortcut pattern (command palette, search, etc.)\n *\n * @param callback - Function to call when Cmd/Ctrl+K is pressed\n * @param enabled - Whether the shortcut is active (default: true)\n *\n * @example\n * ```tsx\n * useCommandK(() => setIsOpen(true));\n * ```\n */\nexport function useCommandK(callback: () => void, enabled = true): void {\n  useKeyboardShortcut('k', callback, {\n    enabled,\n    modifiers: { meta: true, ctrl: true },\n    ignoreInputs: false, // Cmd+K should work even in inputs\n  });\n}\n","import { useState, useEffect } from 'react';\n\n/**\n * Hook that tracks whether a media query matches.\n * Uses the native `matchMedia` API for efficient media query tracking.\n *\n * @param query - CSS media query string (e.g., '(min-width: 768px)')\n * @returns Boolean indicating whether the media query matches\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const isMobile = useMediaQuery('(max-width: 767px)');\n *   const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n *   const isDesktop = useMediaQuery('(min-width: 1024px)');\n *\n *   return (\n *     <div>\n *       {isMobile && <MobileLayout />}\n *       {isTablet && <TabletLayout />}\n *       {isDesktop && <DesktopLayout />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useMediaQuery(query: string): boolean {\n  // Initialize with null to indicate SSR/initial state\n  const [matches, setMatches] = useState<boolean>(() => {\n    // Check if we're in a browser environment\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia(query).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia(query);\n\n    // Set initial value\n    setMatches(mediaQuery.matches);\n\n    // Handler for media query changes\n    const handler = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Modern browsers use addEventListener\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handler);\n      return () => mediaQuery.removeEventListener('change', handler);\n    }\n\n    // Fallback for older browsers\n    mediaQuery.addListener(handler);\n    return () => mediaQuery.removeListener(handler);\n  }, [query]);\n\n  return matches;\n}\n\n/**\n * Preset breakpoint hooks following common responsive design patterns\n */\n\n/** Returns true when viewport is smaller than 640px (mobile) */\nexport function useIsMobile(): boolean {\n  return useMediaQuery('(max-width: 639px)');\n}\n\n/** Returns true when viewport is 640px-767px (large mobile / small tablet) */\nexport function useIsSmallTablet(): boolean {\n  return useMediaQuery('(min-width: 640px) and (max-width: 767px)');\n}\n\n/** Returns true when viewport is 768px-1023px (tablet) */\nexport function useIsTablet(): boolean {\n  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)');\n}\n\n/** Returns true when viewport is 1024px or larger (desktop) */\nexport function useIsDesktop(): boolean {\n  return useMediaQuery('(min-width: 1024px)');\n}\n\n/** Returns true when viewport is 1280px or larger (large desktop) */\nexport function useIsLargeDesktop(): boolean {\n  return useMediaQuery('(min-width: 1280px)');\n}\n\n/** Returns true when viewport is smaller than 1024px (mobile/tablet) */\nexport function useIsMobileOrTablet(): boolean {\n  return useMediaQuery('(max-width: 1023px)');\n}\n"]}

package/dist/{chunk-X5YM3KXY.js → chunk-JI244Y7C.js}

@@ -850,6 +850,11 @@ var miewebUISafelist = [
   // makes SVGs block-level, which would stack them above the label text)
   "[&_svg]:inline-block",
   "[&_svg]:align-middle",
+  // Button `effect` variants (sheen/orbit) lift the button on hover; the
+  // mie-fx-* classes themselves are plain CSS in styles/effects.css.
+  "hover:-translate-y-0.5",
+  // VideoCard hover-preview progress bar rounds its leading-fill edge.
+  "rounded-e-full",
   "hover:text-white",
   "h-0.5",
   "transition-[left,width]",
@@ -1030,7 +1035,176 @@ var miewebUISafelist = [
   "md:px-0",
   "md:pe-0.5",
   "md:ps-0.5",
-  "md:gap-0.5"
+  "md:gap-0.5",
+  // EH frontdoor ports (ui#420) — arbitrary values, opacity modifiers, and
+  // variants emitted by MegaMenu / VideoCard / YearTimeline / SliderCalculator /
+  // OrbitRing / RadialExplorer / Globe that TW3 consumers can't generate.
+  // Shared positioning & typography
+  "-translate-x-1/2",
+  "-translate-y-1/2",
+  "left-1/2",
+  "top-1/2",
+  "tabular-nums",
+  "aspect-square",
+  "aspect-video",
+  "backdrop-blur-md",
+  // SiteHeader mobile drawer — static group labels reuse the link style
+  "hover:bg-transparent",
+  // MegaMenu — panel layout, feature column gradient, link states
+  "[&_svg]:h-4",
+  "[&_svg]:h-5",
+  "[&_svg]:h-7",
+  "[&_svg]:w-4",
+  "[&_svg]:w-5",
+  "[&_svg]:w-7",
+  "[background:linear-gradient(160deg,color-mix(in_srgb,var(--mieweb-accent,var(--mieweb-primary-700))_70%,#000)_0%,var(--mieweb-primary-950)_100%)]",
+  "grid-cols-[1fr_280px]",
+  "w-[min(600px,calc(100vw-2rem))]",
+  "w-[min(880px,calc(100vw-2rem))]",
+  "transition-[opacity,transform]",
+  "motion-safe:animate-[mie-fade-in_0.2s_ease-out]",
+  "bg-white/10",
+  "border-white/40",
+  "text-foreground/70",
+  "text-foreground/80",
+  "text-white/80",
+  "text-white/90",
+  "hover:bg-primary-500/10",
+  "hover:bg-primary-900",
+  "hover:border-primary-500",
+  "hover:border-white",
+  "group-hover:bg-primary-800",
+  "group-hover:text-primary-800",
+  "group-hover:text-white",
+  "dark:group-hover:text-primary-200",
+  "focus-visible:bg-primary-500/10",
+  // VideoCard — hover-preview conic progress ring and play button
+  "[-webkit-mask:radial-gradient(farthest-side,transparent_calc(100%-4px),#000_calc(100%-4px))]",
+  "[mask:radial-gradient(farthest-side,transparent_calc(100%-4px),#000_calc(100%-4px))]",
+  "[background:conic-gradient(from_0deg,transparent_0deg,var(--mieweb-primary-500)_90deg,var(--mieweb-primary-300)_240deg,var(--mieweb-primary-200)_320deg,transparent_360deg)]",
+  "drop-shadow-[0_0_5px_color-mix(in_srgb,var(--mieweb-primary-400)_60%,transparent)]",
+  "bg-white/90",
+  "group-hover:opacity-100",
+  "group-hover:scale-110",
+  "group-focus-visible:opacity-100",
+  "motion-safe:animate-[mie-spin_1.4s_linear_infinite]",
+  // YearTimeline — spine gradient, markers, responsive label rail
+  "grid-cols-12",
+  "md:grid",
+  "md:grid-cols-[var(--yt-label)_1fr]",
+  "md:block",
+  "md:inline",
+  "md:pb-4",
+  "md:py-3.5",
+  "md:h-[22px]",
+  "md:border-border/60",
+  "before:absolute",
+  'before:content-[""]',
+  "before:inset-x-0",
+  "before:top-0",
+  "before:left-1/2",
+  "before:-translate-x-1/2",
+  "before:h-1",
+  "before:h-2.5",
+  "before:w-2.5",
+  "before:rounded-full",
+  "before:bg-primary-700",
+  "before:z-[4]",
+  "before:[background:linear-gradient(90deg,var(--mieweb-accent,var(--mieweb-primary-400))_0%,var(--mieweb-primary-500)_50%,var(--mieweb-success)_80%,var(--mieweb-accent,var(--mieweb-primary-400))_100%)]",
+  "[background:linear-gradient(180deg,var(--mieweb-primary-700),color-mix(in_srgb,var(--mieweb-primary-700)_15%,transparent))]",
+  "[&_svg]:h-3.5",
+  "[&_svg]:w-3.5",
+  "[text-shadow:0_1px_1px_rgba(0,0,0,0.3)]",
+  "bg-muted/30",
+  "border-border/60",
+  "hover:bg-muted/40",
+  "text-[9px]",
+  "tracking-[0.08em]",
+  "tracking-[0.09em]",
+  "tracking-[0.11em]",
+  "tracking-[0.12em]",
+  "z-[1]",
+  "z-[3]",
+  "z-[5]",
+  // SliderCalculator — dark panel gradients and glassy rows
+  "[background:linear-gradient(90deg,var(--mieweb-accent,var(--mieweb-primary-300)),var(--mieweb-primary-300))]",
+  "[background:radial-gradient(120%_120%_at_100%_0%,var(--mieweb-primary-800),var(--mieweb-primary-950)_70%)]",
+  "lg:grid-cols-[1.1fr_1fr]",
+  "sm:p-8",
+  "sm:text-3xl",
+  "sm:text-6xl",
+  "bg-white/5",
+  "border-white/10",
+  "border-white/15",
+  "text-white/60",
+  "text-white/75",
+  "last:border-0",
+  // OrbitRing — attract-loop rotation, pause-on-hover, glow ring
+  "group/orbit",
+  "group/sat",
+  "[container-type:size]",
+  "motion-safe:animate-[mie-spin_var(--dur)_linear_infinite]",
+  "group-hover/orbit:[animation-play-state:paused]",
+  "group-focus-within/orbit:[animation-play-state:paused]",
+  "[background:radial-gradient(circle_at_50%_38%,#fff_0%,color-mix(in_srgb,var(--mieweb-accent,var(--mieweb-primary-200))_14%,#fff)_52%,color-mix(in_srgb,var(--mieweb-accent,var(--mieweb-primary-200))_30%,#fff)_100%)]",
+  "[background:radial-gradient(closest-side,color-mix(in_srgb,var(--mieweb-accent,var(--mieweb-primary-300))_30%,transparent)_0%,color-mix(in_srgb,var(--mieweb-accent,var(--mieweb-primary-300))_12%,transparent)_42%,transparent_78%)]",
+  "shadow-[0_0_0_1px_color-mix(in_srgb,var(--mieweb-accent,var(--mieweb-primary-400))_35%,transparent),0_10px_30px_rgba(0,0,0,0.18),0_0_46px_color-mix(in_srgb,var(--mieweb-accent,var(--mieweb-primary-400))_42%,transparent)]",
+  "dark:border-primary-800",
+  // RadialExplorer — dot navigation and reveal animation
+  "motion-safe:animate-[mie-fade-in_0.25s_ease-out]",
+  "text-[15px]",
+  "tracking-[0.14em]",
+  // Globe — HTML overlay chrome (TW3 consumers using the /globe entry)
+  "bg-[var(--mieweb-accent,#ffe7b0)]",
+  "shadow-[0_0_8px_var(--mieweb-accent,#ffe7b0)]",
+  "bg-neutral-950/70",
+  "max-w-[min(90%,360px)]",
+  "motion-safe:animate-[mie-fade-in_0.28s_ease]",
+  // RadialExplorer / VideoCard / SliderCalculator stragglers
+  "tracking-[0.18em]",
+  "tracking-tight",
+  "start-1/2",
+  "w-[calc(var(--re-r)*2+120px)]",
+  "bg-[linear-gradient(90deg,var(--mieweb-primary-500),var(--mieweb-primary-300))]",
+  "bg-black/55",
+  "bg-black/60",
+  "group-hover:text-primary-700",
+  "dark:group-hover:text-primary-300",
+  // SiteHeader — menus/MegaMenuBar row and mobile drawer (touched in ui#420)
+  "bg-black/50",
+  "bg-white/20",
+  "bg-white/80",
+  "border-white/30",
+  "hover:bg-white/90",
+  "hover:bg-gray-100",
+  "hover:bg-red-50",
+  "hover:text-gray-700",
+  "hover:text-gray-900",
+  "max-h-[calc(100dvh-10rem)]",
+  "md:flex",
+  "sm:block",
+  "dark:border-b",
+  "dark:bg-gray-800",
+  "dark:bg-gray-900",
+  "dark:bg-gray-900/80",
+  "dark:bg-primary-900/30",
+  "dark:border-gray-600",
+  "dark:border-gray-700",
+  "dark:border-gray-800",
+  "dark:hover:bg-gray-700",
+  "dark:hover:bg-gray-800",
+  "dark:hover:bg-red-900/20",
+  "dark:hover:text-gray-200",
+  "dark:hover:text-white",
+  "dark:text-gray-300",
+  "dark:text-red-400",
+  "dark:text-white",
+  // Badge usages added in ui#420 (VideoCard duration pill, RadialExplorer tag)
+  "dark:bg-black/60",
+  "bg-primary-100",
+  "text-primary-900",
+  "dark:bg-primary-900",
+  "dark:text-primary-100"
 ];
 var miewebUIPreset = {
   darkMode: ["class", '[data-theme="dark"]'],
@@ -1257,5 +1431,5 @@ var miewebUIPreset = {
 var tailwind_preset_default = miewebUIPreset;
 
 export { miewebUIPreset, miewebUISafelist, tailwind_preset_default };
-//# sourceMappingURL=chunk-X5YM3KXY.js.map
-//# sourceMappingURL=chunk-X5YM3KXY.js.map
+//# sourceMappingURL=chunk-JI244Y7C.js.map
+//# sourceMappingURL=chunk-JI244Y7C.js.map