@leavepulse/ui 0.77.2 → 0.78.0

package/dist/chunks/LpThemeProvider-8MG6yqU9.js

@@ -1,640 +0,0 @@
-import { computed, readonly, shallowRef, defineComponent, ref, watch, nextTick, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot } from "vue";
-import { prefersReducedMotion, easingToken } from "../composables/easing.js";
-import { d as detectBackdropFilter } from "./backdrop-Dkf2vM81.js";
-import { useMergedAttrs } from "../composables/useMergedClass.js";
-const sharedShape = { radiusControl: 8, radiusCard: 14, radiusPill: 9999 };
-const sharedDensity = { spacingUnit: 4, controlSm: 32, controlMd: 38, controlLg: 44 };
-const interFont = {
-  sans: '"Inter", "Segoe UI", system-ui, sans-serif',
-  mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace'
-};
-const dark = {
-  name: "Dark",
-  mode: "dark",
-  colors: {
-    surface: "#080b0d",
-    surfaceRaised: "#12171d",
-    surfaceSoft: "#172027",
-    ink: "#eef5f1",
-    inkInverse: "#06100b",
-    muted: "#9aa8a2",
-    mutedStrong: "#c7d2cc",
-    brand: "#00bcff",
-    brandHover: "#19c6ff",
-    brandSoft: "rgba(0, 188, 255, 0.16)",
-    action: "#39e58c",
-    actionHover: "#4dffa1",
-    actionSoft: "rgba(57, 229, 140, 0.14)",
-    accent: "#f0b35a",
-    accentHover: "#f2bf74",
-    accentSoft: "rgba(240, 179, 90, 0.14)",
-    danger: "#ff6f6f",
-    dangerHover: "#ff8585",
-    dangerSoft: "rgba(255, 111, 111, 0.14)",
-    line: "rgba(255, 255, 255, 0.1)",
-    lineStrong: "rgba(255, 255, 255, 0.18)",
-    ring: "rgba(0, 188, 255, 0.45)"
-  },
-  shape: { ...sharedShape },
-  density: { ...sharedDensity },
-  font: { ...interFont }
-};
-const light = {
-  name: "Light",
-  mode: "light",
-  colors: {
-    surface: "#f6f8f7",
-    surfaceRaised: "#ffffff",
-    surfaceSoft: "#eceff0",
-    ink: "#0d1714",
-    inkInverse: "#f8fff9",
-    muted: "#5d6b65",
-    mutedStrong: "#34433d",
-    brand: "#0086c7",
-    brandHover: "#0095db",
-    brandSoft: "rgba(0, 134, 199, 0.12)",
-    action: "#1f9d5f",
-    actionHover: "#23b06b",
-    actionSoft: "rgba(31, 157, 95, 0.12)",
-    accent: "#aa6f1d",
-    accentHover: "#b88641",
-    accentSoft: "rgba(170, 111, 29, 0.12)",
-    danger: "#c2333b",
-    dangerHover: "#d23b44",
-    dangerSoft: "rgba(194, 51, 59, 0.12)",
-    line: "rgba(13, 23, 20, 0.12)",
-    lineStrong: "rgba(13, 23, 20, 0.22)",
-    ring: "rgba(0, 134, 199, 0.4)"
-  },
-  shape: { ...sharedShape },
-  density: { ...sharedDensity },
-  font: { ...interFont }
-};
-const lime = {
-  name: "Lime",
-  mode: "dark",
-  colors: {
-    surface: "#050505",
-    surfaceRaised: "#0c0d0a",
-    surfaceSoft: "#14160f",
-    ink: "#f4f7ee",
-    inkInverse: "#0a0c05",
-    muted: "#8b8f80",
-    mutedStrong: "#c3c8b6",
-    brand: "#c4f042",
-    brandHover: "#d2ff5c",
-    brandSoft: "rgba(196, 240, 66, 0.14)",
-    action: "#5fd97a",
-    actionHover: "#74e88d",
-    actionSoft: "rgba(95, 217, 122, 0.14)",
-    accent: "#ffb84d",
-    accentHover: "#ffc369",
-    accentSoft: "rgba(255, 184, 77, 0.14)",
-    danger: "#ff6f6f",
-    dangerHover: "#ff8585",
-    dangerSoft: "rgba(255, 111, 111, 0.14)",
-    line: "rgba(255, 255, 255, 0.08)",
-    lineStrong: "rgba(196, 240, 66, 0.3)",
-    ring: "rgba(196, 240, 66, 0.4)"
-  },
-  // a sharper theme — overrides the shape axis too
-  shape: { radiusControl: 4, radiusCard: 6, radiusPill: 4 },
-  density: { ...sharedDensity },
-  // a distinct typeface so the theme has its own voice (not just colour)
-  font: {
-    sans: '"Space Grotesk", "Inter", system-ui, sans-serif',
-    mono: '"IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace'
-  }
-};
-const rose = {
-  name: "Rose",
-  mode: "dark",
-  colors: {
-    surface: "#120a0d",
-    surfaceRaised: "#1c1014",
-    surfaceSoft: "#26161b",
-    ink: "#fdeef1",
-    inkInverse: "#1a0d11",
-    muted: "#a98a92",
-    mutedStrong: "#d8c0c6",
-    brand: "#fb7185",
-    brandHover: "#fd8a9b",
-    brandSoft: "rgba(251, 113, 133, 0.14)",
-    action: "#34d399",
-    actionHover: "#4adeaa",
-    actionSoft: "rgba(52, 211, 153, 0.14)",
-    accent: "#fbbf24",
-    accentHover: "#fcc947",
-    accentSoft: "rgba(251, 191, 36, 0.14)",
-    danger: "#ef4444",
-    dangerHover: "#f56565",
-    dangerSoft: "rgba(239, 68, 68, 0.14)",
-    line: "rgba(255, 255, 255, 0.1)",
-    lineStrong: "rgba(251, 113, 133, 0.3)",
-    ring: "rgba(251, 113, 133, 0.4)"
-  },
-  shape: { ...sharedShape },
-  density: { ...sharedDensity },
-  font: { ...interFont }
-};
-const amber = {
-  name: "Amber",
-  mode: "dark",
-  colors: {
-    surface: "#0f0b06",
-    surfaceRaised: "#1a130a",
-    surfaceSoft: "#241a0e",
-    ink: "#fdf3e6",
-    inkInverse: "#1a1206",
-    muted: "#a3927a",
-    mutedStrong: "#d6c6ad",
-    brand: "#f59e0b",
-    brandHover: "#fbb024",
-    brandSoft: "rgba(245, 158, 11, 0.14)",
-    action: "#4ade80",
-    actionHover: "#5cea90",
-    actionSoft: "rgba(74, 222, 128, 0.14)",
-    accent: "#38bdf8",
-    accentHover: "#58c8f9",
-    accentSoft: "rgba(56, 189, 248, 0.14)",
-    danger: "#f87171",
-    dangerHover: "#fa8a8a",
-    dangerSoft: "rgba(248, 113, 113, 0.14)",
-    line: "rgba(255, 255, 255, 0.1)",
-    lineStrong: "rgba(245, 158, 11, 0.3)",
-    ring: "rgba(245, 158, 11, 0.4)"
-  },
-  shape: { ...sharedShape },
-  density: { ...sharedDensity },
-  font: { ...interFont }
-};
-const violet = {
-  name: "Violet",
-  mode: "dark",
-  colors: {
-    surface: "#0c0a14",
-    surfaceRaised: "#15111f",
-    surfaceSoft: "#1d1729",
-    ink: "#f1eefb",
-    inkInverse: "#100b1a",
-    muted: "#948aa9",
-    mutedStrong: "#c6bedb",
-    brand: "#a78bfa",
-    brandHover: "#b69dfc",
-    brandSoft: "rgba(167, 139, 250, 0.14)",
-    action: "#34d399",
-    actionHover: "#4adeaa",
-    actionSoft: "rgba(52, 211, 153, 0.14)",
-    accent: "#fbbf24",
-    accentHover: "#fcc947",
-    accentSoft: "rgba(251, 191, 36, 0.14)",
-    danger: "#f87171",
-    dangerHover: "#fa8a8a",
-    dangerSoft: "rgba(248, 113, 113, 0.14)",
-    line: "rgba(255, 255, 255, 0.1)",
-    lineStrong: "rgba(167, 139, 250, 0.3)",
-    ring: "rgba(167, 139, 250, 0.4)"
-  },
-  shape: { ...sharedShape },
-  density: { ...sharedDensity },
-  font: { ...interFont }
-};
-const nord = {
-  name: "Nord",
-  mode: "dark",
-  colors: {
-    surface: "#2e3440",
-    surfaceRaised: "#3b4252",
-    surfaceSoft: "#434c5e",
-    ink: "#eceff4",
-    inkInverse: "#2e3440",
-    muted: "#9aa4b8",
-    mutedStrong: "#d8dee9",
-    brand: "#88c0d0",
-    brandHover: "#9bccd9",
-    brandSoft: "rgba(136, 192, 208, 0.16)",
-    action: "#a3be8c",
-    actionHover: "#b3cb9f",
-    actionSoft: "rgba(163, 190, 140, 0.16)",
-    accent: "#ebcb8b",
-    accentHover: "#eed39e",
-    accentSoft: "rgba(235, 203, 139, 0.16)",
-    danger: "#bf616a",
-    dangerHover: "#cb727b",
-    dangerSoft: "rgba(191, 97, 106, 0.16)",
-    line: "rgba(236, 239, 244, 0.1)",
-    lineStrong: "rgba(136, 192, 208, 0.35)",
-    ring: "rgba(136, 192, 208, 0.45)"
-  },
-  shape: { ...sharedShape },
-  density: { ...sharedDensity },
-  font: { ...interFont }
-};
-const presets = { dark, light, lime, rose, amber, violet, nord };
-const COLOR_VARS = {
-  surface: "--color-surface",
-  surfaceRaised: "--color-surface-raised",
-  surfaceSoft: "--color-surface-soft",
-  ink: "--color-ink",
-  inkInverse: "--color-ink-inverse",
-  muted: "--color-muted",
-  mutedStrong: "--color-muted-strong",
-  brand: "--color-brand",
-  brandHover: "--color-brand-hover",
-  brandSoft: "--color-brand-soft",
-  action: "--color-action",
-  actionHover: "--color-action-hover",
-  actionSoft: "--color-action-soft",
-  accent: "--color-accent",
-  accentHover: "--color-accent-hover",
-  accentSoft: "--color-accent-soft",
-  danger: "--color-danger",
-  dangerHover: "--color-danger-hover",
-  dangerSoft: "--color-danger-soft",
-  line: "--color-line",
-  lineStrong: "--color-line-strong",
-  ring: "--color-ring"
-};
-const SHAPE_VARS = {
-  radiusControl: "--radius-control",
-  radiusCard: "--radius-card",
-  radiusPill: "--radius-pill"
-};
-const DENSITY_VARS = {
-  spacingUnit: "--spacing-unit",
-  controlSm: "--size-control-sm",
-  controlMd: "--size-control-md",
-  controlLg: "--size-control-lg"
-};
-const FONT_VARS = {
-  sans: "--font-sans",
-  mono: "--font-mono"
-};
-const SURFACE_VARS = {
-  borderWidth: "--surface-border-width",
-  panelBlur: "--surface-panel-blur",
-  panelSaturate: "--surface-panel-saturate",
-  panelOverlay: "--surface-panel-overlay",
-  panelShadow: "--surface-panel-shadow",
-  panelInset: "--surface-panel-inset"
-};
-const DEFAULT_SURFACE = {
-  borderWidth: "1px",
-  panelBlur: "0px",
-  panelSaturate: "100%",
-  panelOverlay: "none",
-  panelShadow: "0 1px 2px rgba(0, 0, 0, 0.18)",
-  panelInset: "0 0 0 0 transparent"
-};
-const CACHE_KEY = "leavepulse-ui-theme";
-const _current = shallowRef(null);
-const _system = shallowRef(null);
-let _hydrated = false;
-let _fallback = null;
-const DARK_QUERY = "(prefers-color-scheme: dark)";
-let _media = null;
-function prefersDarkScheme() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true;
-  return window.matchMedia(DARK_QUERY).matches || !window.matchMedia("(prefers-color-scheme: light)").matches;
-}
-function pick(system, dark2 = prefersDarkScheme()) {
-  return dark2 ? system.dark : system.light;
-}
-function onSchemeChange(event) {
-  const system = _system.value;
-  if (!system) return;
-  const theme = pick(system, event.matches);
-  applyTheme(theme);
-  _current.value = theme;
-}
-function followSystem(system) {
-  _system.value = system;
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-  if (system && !_media) {
-    _media = window.matchMedia(DARK_QUERY);
-    _media.addEventListener("change", onSchemeChange);
-  } else if (!system && _media) {
-    _media.removeEventListener("change", onSchemeChange);
-    _media = null;
-  }
-}
-function readCache() {
-  try {
-    const cached = localStorage.getItem(CACHE_KEY);
-    if (!cached) return null;
-    const raw = JSON.parse(cached);
-    if (raw && typeof raw === "object" && raw.system) {
-      return {
-        system: {
-          light: parseTheme(JSON.stringify(raw.system.light)),
-          dark: parseTheme(JSON.stringify(raw.system.dark))
-        }
-      };
-    }
-    return { theme: parseTheme(cached) };
-  } catch {
-    return null;
-  }
-}
-function hydrateOnce() {
-  if (_hydrated || typeof window === "undefined") return;
-  _hydrated = true;
-  const cached = readCache();
-  if (cached?.system) {
-    followSystem(cached.system);
-    _current.value = pick(cached.system);
-    writeThemeCookie(systemCookieValue(cached.system));
-  } else if (cached?.theme) {
-    _current.value = cached.theme;
-    writeThemeCookie(cached.theme.name);
-  } else if (_fallback) {
-    _current.value = _fallback;
-  } else {
-    return;
-  }
-  applyTheme(_current.value);
-}
-const DERIVED_VARS = [
-  ["--color-surface-overlay", "color-mix(in srgb, var(--color-surface-raised) 94%, transparent)"],
-  ["--color-node-compute", "var(--color-action)"],
-  ["--color-node-transit", "var(--color-accent)"],
-  ["--color-node-edge", "var(--color-brand)"],
-  ["--color-node-unknown", "var(--color-line-strong)"]
-];
-function themeEntries(input) {
-  const theme = normalizeTheme(input);
-  const out = [];
-  for (const [key, cssVar] of Object.entries(COLOR_VARS)) {
-    out.push([cssVar, theme.colors[key]]);
-  }
-  for (const [key, cssVar] of Object.entries(SHAPE_VARS)) {
-    out.push([cssVar, `${theme.shape[key]}px`]);
-  }
-  for (const [key, cssVar] of Object.entries(DENSITY_VARS)) {
-    out.push([cssVar, `${theme.density[key]}px`]);
-  }
-  for (const [key, cssVar] of Object.entries(FONT_VARS)) {
-    out.push([cssVar, theme.font[key]]);
-  }
-  const surface = theme.surface ?? DEFAULT_SURFACE;
-  for (const [key, cssVar] of Object.entries(SURFACE_VARS)) {
-    out.push([cssVar, surface[key]]);
-  }
-  for (const [cssVar, value] of DERIVED_VARS) out.push([cssVar, value]);
-  return out;
-}
-function applyTheme(theme, root = document.documentElement) {
-  for (const [cssVar, value] of themeEntries(theme)) root.style.setProperty(cssVar, value);
-  root.dataset.themeMode = theme.mode;
-  root.style.colorScheme = theme.mode;
-  detectBackdropFilter(root);
-}
-function revealTransition(update, origin, durationMs = 480) {
-  const doc = document;
-  if (typeof doc.startViewTransition !== "function" || prefersReducedMotion()) {
-    void update();
-    return;
-  }
-  const x = origin?.x ?? window.innerWidth / 2;
-  const y = origin?.y ?? window.innerHeight / 2;
-  const endRadius = Math.hypot(
-    Math.max(x, window.innerWidth - x),
-    Math.max(y, window.innerHeight - y)
-  );
-  const transition = doc.startViewTransition(update);
-  transition.ready.then(() => {
-    document.documentElement.animate(
-      {
-        clipPath: [`circle(${endRadius}px at ${x}px ${y}px)`, `circle(0px at ${x}px ${y}px)`]
-      },
-      {
-        duration: durationMs,
-        easing: easingToken("ease-emphasized"),
-        // Hold the fully-shrunk circle after the keyframes end. Without it the
-        // old snapshot snaps back to its default (un-clipped) state for the one
-        // frame between animation-end and the browser tearing down the
-        // view-transition pseudo-elements — that flash is the old theme
-        // "blinking" at the very end.
-        fill: "forwards",
-        pseudoElement: "::view-transition-old(root)"
-      }
-    );
-  });
-}
-function applyThemeWithTransition(theme, origin, root = document.documentElement, durationMs = 480) {
-  revealTransition(() => applyTheme(theme, root), origin, durationMs);
-}
-function serializeTheme(theme) {
-  return JSON.stringify(theme);
-}
-function themeToCssVars(theme) {
-  return themeEntries(theme).map(([cssVar, value]) => `${cssVar}: ${value}`).join("; ");
-}
-function themeToCssRule(theme, selector = ":root") {
-  return `${selector} { color-scheme: ${theme.mode}; ${themeToCssVars(theme)}; }`;
-}
-function normalizeTheme(raw) {
-  const mode = raw.mode === "light" ? "light" : "dark";
-  const base = mode === "light" ? light : dark;
-  return {
-    name: typeof raw.name === "string" ? raw.name : base.name,
-    mode,
-    colors: { ...base.colors, ...raw.colors },
-    shape: { ...base.shape, ...raw.shape },
-    density: { ...base.density, ...raw.density },
-    font: { ...base.font, ...raw.font },
-    surface: raw.surface ? { ...DEFAULT_SURFACE, ...raw.surface } : void 0
-  };
-}
-function parseTheme(json) {
-  const raw = JSON.parse(json);
-  if (!raw || typeof raw !== "object" || !raw.colors || !raw.shape || !raw.density) {
-    throw new Error("Invalid theme: missing colors/shape/density");
-  }
-  return normalizeTheme(raw);
-}
-function bootstrapTheme(fallback) {
-  const cached = typeof window === "undefined" ? null : readCache();
-  const theme = cached?.system ? pick(cached.system) : cached?.theme ?? fallback;
-  if (cached?.system) followSystem(cached.system);
-  if (typeof document !== "undefined") applyTheme(theme);
-  return theme;
-}
-function cacheTheme(theme) {
-  try {
-    localStorage.setItem(CACHE_KEY, serializeTheme(theme));
-  } catch {
-  }
-  writeThemeCookie(theme.name);
-}
-function cacheSystemThemes(system) {
-  try {
-    localStorage.setItem(CACHE_KEY, JSON.stringify({ system }));
-  } catch {
-  }
-  writeThemeCookie(systemCookieValue(system));
-}
-const THEME_COOKIE = "lp-theme";
-const SYSTEM_PREFIX = "system:";
-const COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
-function systemCookieValue(system) {
-  return `${SYSTEM_PREFIX}${system.light.name}|${system.dark.name}`;
-}
-function writeThemeCookie(value) {
-  if (typeof document === "undefined") return;
-  document.cookie = `${THEME_COOKIE}=${encodeURIComponent(value)}; path=/; max-age=${COOKIE_MAX_AGE}; samesite=lax`;
-}
-function safeDecode(value) {
-  try {
-    return decodeURIComponent(value);
-  } catch {
-    return value;
-  }
-}
-function themeFromCookie(cookieValue, themes, options = {}) {
-  if (!cookieValue) return null;
-  const find = (name) => themes.find((theme) => theme.name === name) ?? null;
-  for (const value of [cookieValue, safeDecode(cookieValue)]) {
-    if (value.startsWith(SYSTEM_PREFIX)) {
-      const [lightName = "", darkName = ""] = value.slice(SYSTEM_PREFIX.length).split("|");
-      const wanted = options.prefersDark === false ? lightName : darkName;
-      const found2 = find(wanted);
-      if (found2) return found2;
-      continue;
-    }
-    const found = find(value);
-    if (found) return found;
-  }
-  return null;
-}
-function useTheme() {
-  hydrateOnce();
-  const commit = (theme) => {
-    followSystem(null);
-    cacheTheme(theme);
-    _current.value = theme;
-  };
-  return {
-    current: readonly(_current),
-    currentName: computed(() => _current.value?.name ?? ""),
-    system: computed(() => _system.value !== null),
-    setTheme: (theme, origin) => {
-      applyThemeWithTransition(theme, origin);
-      commit(theme);
-    },
-    setSystem: (themes, origin) => {
-      const theme = pick(themes);
-      applyThemeWithTransition(theme, origin);
-      followSystem(themes);
-      cacheSystemThemes(themes);
-      _current.value = theme;
-    },
-    init: (fallback) => {
-      _fallback = fallback;
-      hydrateOnce();
-      if (!_current.value) _current.value = bootstrapTheme(fallback);
-      return _current.value;
-    },
-    apply: (theme) => {
-      applyTheme(theme);
-      commit(theme);
-    },
-    applyWithTransition: (theme, origin) => {
-      applyThemeWithTransition(theme, origin);
-      commit(theme);
-    },
-    serialize: serializeTheme,
-    parse: parseTheme,
-    bootstrap: bootstrapTheme
-  };
-}
-const PRESS_FRESH_MS = 1500;
-let lastPress = null;
-if (typeof window !== "undefined") {
-  window.addEventListener(
-    "pointerdown",
-    (event) => lastPress = { x: event.clientX, y: event.clientY, at: performance.now() },
-    { capture: true, passive: true }
-  );
-}
-const __default__ = { inheritAttrs: false };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  __name: "LpThemeProvider",
-  props: {
-    theme: {},
-    as: { default: "div" },
-    transition: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const props = __props;
-    const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink");
-    const root = ref(null);
-    const shown = shallowRef(props.theme);
-    const style = computed(() => ({
-      ...Object.fromEntries(themeEntries(shown.value)),
-      colorScheme: shown.value.mode
-    }));
-    function originOf() {
-      if (lastPress && performance.now() - lastPress.at < PRESS_FRESH_MS) return lastPress;
-      const value = root.value;
-      const el = value instanceof HTMLElement ? value : value?.$el;
-      const box = el?.getBoundingClientRect?.();
-      return box ? { x: box.left + box.width / 2, y: box.top + box.height / 2 } : void 0;
-    }
-    watch(
-      () => props.theme,
-      (next) => {
-        if (!props.transition) {
-          shown.value = next;
-          return;
-        }
-        revealTransition(async () => {
-          shown.value = next;
-          await nextTick();
-        }, originOf());
-      }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
-        ref_key: "root",
-        ref: root,
-        style: style.value,
-        "data-theme-mode": shown.value.mode,
-        class: unref(rootClass)
-      }, unref(rest)), {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 16, ["style", "data-theme-mode", "class"]);
-    };
-  }
-});
-export {
-  DEFAULT_SURFACE as D,
-  THEME_COOKIE as T,
-  _sfc_main as _,
-  parseTheme as a,
-  amber as b,
-  applyTheme as c,
-  applyThemeWithTransition as d,
-  bootstrapTheme as e,
-  cacheSystemThemes as f,
-  dark as g,
-  lime as h,
-  normalizeTheme as i,
-  prefersDarkScheme as j,
-  rose as k,
-  light as l,
-  themeFromCookie as m,
-  nord as n,
-  themeToCssRule as o,
-  presets as p,
-  themeToCssVars as q,
-  revealTransition as r,
-  serializeTheme as s,
-  themeEntries as t,
-  useTheme as u,
-  violet as v
-};