@marwes-ui/svelte 1.3.0

package/dist/provider/MarwesProvider.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+  import {
+    ThemeMode as MwThemeMode,
+    nextThemeMode,
+    resolveThemeInput,
+    resolveThemePreference,
+  } from "@marwes-ui/core";
+  import type { ResolvedTheme, ThemeMode, ThemePreference } from "@marwes-ui/core";
+  import { setMarwesContext } from "./context.js";
+  import { applyThemeToElement, loadThemeFonts, themeToRootStyle } from "./runtime-theme.js";
+  import {
+    applyModeAttribute,
+    getSystemThemeMode,
+    readStoredThemePreference,
+    subscribeToSystemThemeMode,
+    withoutModeTransitions,
+    writeStoredThemePreference,
+  } from "./theme-mode-runtime.js";
+  import type { MarwesContextState, MarwesProviderProps } from "./types.js";
+
+  let {
+    theme,
+    defaultPreference,
+    preference: controlledPreference,
+    defaultMode,
+    mode: controlledMode,
+    fontLoading = "auto",
+    onPreferenceChange,
+    onModeChange,
+    storageKey = false,
+    enableSystem = true,
+    target = "provider",
+    attribute = "class",
+    disableTransitionOnChange = false,
+    variableStrategy = "inline",
+    children,
+  }: MarwesProviderProps = $props();
+
+  let rootElement: HTMLDivElement | undefined = $state(undefined);
+
+  let internalPreference = $state<ThemePreference>(
+    defaultPreference ?? defaultMode ?? MwThemeMode.light
+  );
+
+  let systemMode = $state<ThemeMode>(
+    enableSystem ? getSystemThemeMode() : MwThemeMode.light
+  );
+
+  const activePreference = $derived(
+    controlledPreference ?? controlledMode ?? theme?.mode ?? internalPreference
+  );
+
+  const activeMode = $derived(resolveThemePreference(activePreference, systemMode));
+
+  const isPreferenceControlled = $derived(
+    controlledPreference !== undefined || controlledMode !== undefined || theme?.mode !== undefined
+  );
+
+  const resolved: ResolvedTheme = $derived(
+    resolveThemeInput({ ...(theme ?? {}), mode: activeMode })
+  );
+
+  const rootStyle = $derived(
+    variableStrategy === "style-tag" ? undefined : themeToRootStyle(resolved)
+  );
+
+  const rootStyleString = $derived(
+    rootStyle
+      ? Object.entries(rootStyle)
+          .map(([k, v]) => (k === "backgroundColor" ? `background-color: ${v}` : `${k}: ${v}`))
+          .join("; ")
+      : undefined
+  );
+
+  function setPreference(nextPreference: ThemePreference): void {
+    if (!isPreferenceControlled) {
+      internalPreference = nextPreference;
+    }
+    writeStoredThemePreference(storageKey, nextPreference);
+    onPreferenceChange?.(nextPreference);
+  }
+
+  function setMode(nextMode: ThemeMode): void {
+    setPreference(nextMode);
+    onModeChange?.(nextMode);
+  }
+
+  function toggleMode(): void {
+    setMode(nextThemeMode(activeMode));
+  }
+
+  // Context state — mutated reactively by effects below
+  const contextState: MarwesContextState = $state({
+    theme: resolved,
+    mode: activeMode,
+    preference: activePreference,
+    systemMode,
+  });
+
+  setMarwesContext({
+    get state() { return contextState; },
+    setMode,
+    setPreference,
+    toggleMode,
+  });
+
+  // Keep context state synced with derived values
+  $effect(() => {
+    contextState.theme = resolved;
+    contextState.mode = activeMode;
+    contextState.preference = activePreference;
+    contextState.systemMode = systemMode;
+  });
+
+  // Read stored preference on mount
+  $effect(() => {
+    const storedPreference = readStoredThemePreference(storageKey);
+    if (storedPreference !== undefined && !isPreferenceControlled) {
+      internalPreference = storedPreference;
+    }
+  });
+
+  // System theme subscription
+  $effect(() => {
+    if (!enableSystem) {
+      systemMode = MwThemeMode.light;
+      return;
+    }
+
+    systemMode = getSystemThemeMode();
+
+    if (activePreference !== "system") {
+      return;
+    }
+
+    const unsubscribe = subscribeToSystemThemeMode((mode) => {
+      systemMode = mode;
+    });
+
+    return unsubscribe;
+  });
+
+  // Apply theme to element (inline vars)
+  $effect(() => {
+    if (variableStrategy === "style-tag") return;
+    if (rootElement) {
+      applyThemeToElement(rootElement, resolved);
+    }
+  });
+
+  // Apply mode attribute to target
+  $effect(() => {
+    if (target === "provider") return;
+
+    const apply = () => {
+      applyModeAttribute({
+        target,
+        providerElement: rootElement ?? null,
+        mode: activeMode,
+        attribute,
+      });
+    };
+
+    if (disableTransitionOnChange) {
+      withoutModeTransitions(apply);
+      return;
+    }
+
+    apply();
+  });
+
+  // Font loading
+  $effect(() => {
+    loadThemeFonts(resolved, fontLoading);
+  });
+</script>
+
+<div
+  bind:this={rootElement}
+  class={`mw-theme--${resolved.mode}`}
+  data-marwes-theme="true"
+  data-marwes-mode={resolved.mode}
+  style={rootStyleString}
+>
+  {@render children?.()}
+</div>

package/dist/provider/MarwesProvider.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MarwesProviderProps } from "./types.js";
+declare const MarwesProvider: import("svelte").Component<MarwesProviderProps, {}, "">;
+type MarwesProvider = ReturnType<typeof MarwesProvider>;
+export default MarwesProvider;

package/dist/provider/context.d.ts

@@ -0,0 +1,3 @@
+import type { MarwesContextValue } from "./types.js";
+export declare function setMarwesContext(value: MarwesContextValue): void;
+export declare function getMarwesContext(): MarwesContextValue;

package/dist/provider/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+const CONTEXT_KEY = Symbol("marwes-context");
+export function setMarwesContext(value) {
+    setContext(CONTEXT_KEY, value);
+}
+export function getMarwesContext() {
+    const ctx = getContext(CONTEXT_KEY);
+    if (!ctx) {
+        throw new Error("MarwesProvider is missing. Wrap your app in <MarwesProvider />.");
+    }
+    return ctx;
+}

package/dist/provider/runtime-theme.d.ts

@@ -0,0 +1,5 @@
+import type { FontLoadingConfig, ResolvedTheme } from "@marwes-ui/core";
+export declare function themeToRootStyle(theme: ResolvedTheme): Record<string, string>;
+export declare function applyThemeToElement(element: HTMLElement, theme: ResolvedTheme): void;
+export declare function loadThemeFonts(theme: ResolvedTheme, config?: FontLoadingConfig): void;
+export declare function resetThemeRuntimeState(): void;

package/dist/provider/runtime-theme.js

@@ -0,0 +1,63 @@
+import { buildGoogleFontsUrl, extractFontFamilyName, extractUsedWeights, shouldLoadGoogleFont, themeToCSSVars, } from "@marwes-ui/core";
+const loadedFonts = new Set();
+let preconnected = false;
+export function themeToRootStyle(theme) {
+    return {
+        ...themeToCSSVars(theme),
+        backgroundColor: theme.color.background,
+        color: theme.color.text,
+    };
+}
+export function applyThemeToElement(element, theme) {
+    element.setAttribute("data-marwes-theme", "true");
+    element.setAttribute("data-marwes-mode", theme.mode);
+    for (const [property, value] of Object.entries(themeToRootStyle(theme))) {
+        if (property === "backgroundColor") {
+            element.style.backgroundColor = value;
+            continue;
+        }
+        element.style.setProperty(property, value);
+    }
+}
+function ensureFontPreconnect() {
+    if (preconnected || typeof document === "undefined")
+        return;
+    preconnected = true;
+    for (const href of ["https://fonts.googleapis.com", "https://fonts.gstatic.com"]) {
+        const linkElement = document.createElement("link");
+        linkElement.rel = "preconnect";
+        linkElement.href = href;
+        if (href.includes("gstatic")) {
+            linkElement.crossOrigin = "anonymous";
+        }
+        document.head.appendChild(linkElement);
+    }
+}
+function loadGoogleFontToDocument(family, weights) {
+    if (typeof document === "undefined")
+        return;
+    const cacheKey = `${family}:${weights.join(",")}`;
+    if (loadedFonts.has(cacheKey))
+        return;
+    loadedFonts.add(cacheKey);
+    ensureFontPreconnect();
+    const linkElement = document.createElement("link");
+    linkElement.rel = "stylesheet";
+    linkElement.href = buildGoogleFontsUrl(family, weights);
+    linkElement.dataset.marwesFont = family;
+    document.head.appendChild(linkElement);
+}
+export function loadThemeFonts(theme, config = "auto") {
+    const weights = extractUsedWeights(theme.typography);
+    const fontStacks = [theme.font.primary, theme.font.secondary];
+    for (const fontStack of fontStacks) {
+        const familyName = extractFontFamilyName(fontStack);
+        if (familyName && shouldLoadGoogleFont(familyName, config)) {
+            loadGoogleFontToDocument(familyName, weights);
+        }
+    }
+}
+export function resetThemeRuntimeState() {
+    loadedFonts.clear();
+    preconnected = false;
+}

package/dist/provider/theme-mode-runtime.d.ts

@@ -0,0 +1,15 @@
+import { ThemeMode } from "@marwes-ui/core";
+import type { ThemePreference } from "@marwes-ui/core";
+export type ThemeTarget = "provider" | "html" | "body";
+export type ThemeAttribute = "class" | "data-theme" | "data-mode";
+export declare function getSystemThemeMode(): ThemeMode;
+export declare function subscribeToSystemThemeMode(onChange: (mode: ThemeMode) => void): () => void;
+export declare function readStoredThemePreference(storageKey: string | false): ThemePreference | undefined;
+export declare function writeStoredThemePreference(storageKey: string | false, preference: ThemePreference): void;
+export declare function applyModeAttribute({ target, providerElement, mode, attribute, }: {
+    target: ThemeTarget;
+    providerElement: HTMLElement | null;
+    mode: ThemeMode;
+    attribute: ThemeAttribute;
+}): void;
+export declare function withoutModeTransitions(callback: () => void): void;

package/dist/provider/theme-mode-runtime.js

@@ -0,0 +1,84 @@
+import { ThemeMode, isThemePreference } from "@marwes-ui/core";
+const mediaQuery = "(prefers-color-scheme: dark)";
+export function getSystemThemeMode() {
+    if (typeof window === "undefined")
+        return ThemeMode.light;
+    return window.matchMedia?.(mediaQuery).matches ? ThemeMode.dark : ThemeMode.light;
+}
+export function subscribeToSystemThemeMode(onChange) {
+    if (typeof window === "undefined" || !window.matchMedia)
+        return () => { };
+    const media = window.matchMedia(mediaQuery);
+    const listener = (event) => {
+        onChange(event.matches ? ThemeMode.dark : ThemeMode.light);
+    };
+    if (media.addEventListener) {
+        media.addEventListener("change", listener);
+    }
+    else {
+        media.addListener?.(listener);
+    }
+    return () => {
+        if (media.removeEventListener) {
+            media.removeEventListener("change", listener);
+        }
+        else {
+            media.removeListener?.(listener);
+        }
+    };
+}
+export function readStoredThemePreference(storageKey) {
+    if (!storageKey || typeof window === "undefined")
+        return undefined;
+    try {
+        const value = window.localStorage.getItem(storageKey);
+        return isThemePreference(value) ? value : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+export function writeStoredThemePreference(storageKey, preference) {
+    if (!storageKey || typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(storageKey, preference);
+    }
+    catch {
+        // Ignore unavailable storage.
+    }
+}
+export function applyModeAttribute({ target, providerElement, mode, attribute, }) {
+    const element = getTargetElement(target, providerElement);
+    if (!element)
+        return;
+    if (attribute === "class") {
+        const oppositeMode = mode === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark;
+        element.classList.remove(oppositeMode);
+        element.classList.add(mode);
+        return;
+    }
+    element.setAttribute(attribute, mode);
+}
+export function withoutModeTransitions(callback) {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+        callback();
+        return;
+    }
+    const style = document.createElement("style");
+    style.dataset.marwesDisableTransitions = "true";
+    style.textContent = "* { transition: none !important; }";
+    document.head.appendChild(style);
+    callback();
+    window.getComputedStyle(document.body);
+    window.requestAnimationFrame(() => {
+        style.remove();
+    });
+}
+function getTargetElement(target, providerElement) {
+    if (target === "provider")
+        return providerElement;
+    if (typeof document === "undefined")
+        return null;
+    return target === "html" ? document.documentElement : document.body;
+}

package/dist/provider/types.d.ts

@@ -0,0 +1,32 @@
+import type { FontLoadingConfig, ResolvedTheme, ThemeInput, ThemeMode, ThemePreference, ThemeVariableStrategy } from "@marwes-ui/core";
+import type { Snippet } from "svelte";
+import type { ThemeAttribute, ThemeTarget } from "./theme-mode-runtime.js";
+export interface MarwesProviderProps {
+    theme?: ThemeInput;
+    defaultPreference?: ThemePreference;
+    preference?: ThemePreference;
+    defaultMode?: ThemeMode;
+    mode?: ThemeMode;
+    fontLoading?: FontLoadingConfig;
+    onPreferenceChange?: (preference: ThemePreference) => void;
+    onModeChange?: (mode: ThemeMode) => void;
+    storageKey?: string | false;
+    enableSystem?: boolean;
+    target?: ThemeTarget;
+    attribute?: ThemeAttribute;
+    disableTransitionOnChange?: boolean;
+    variableStrategy?: ThemeVariableStrategy;
+    children?: Snippet;
+}
+export interface MarwesContextState {
+    theme: ResolvedTheme;
+    mode: ThemeMode;
+    preference: ThemePreference;
+    systemMode: ThemeMode;
+}
+export interface MarwesContextValue {
+    readonly state: MarwesContextState;
+    setMode: (mode: ThemeMode) => void;
+    setPreference: (preference: ThemePreference) => void;
+    toggleMode: () => void;
+}

package/dist/provider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/provider/use-theme-mode.d.ts

@@ -0,0 +1,24 @@
+import { ThemeMode } from "@marwes-ui/core";
+import type { ThemePreference } from "@marwes-ui/core";
+export interface ThemeModeContextValue {
+    readonly mode: ThemeMode;
+    readonly preference: ThemePreference;
+    readonly systemMode: ThemeMode;
+    readonly isDark: boolean;
+    readonly isLight: boolean;
+    readonly isSystem: boolean;
+    setMode: (mode: ThemeMode) => void;
+    setPreference: (preference: ThemePreference) => void;
+    toggleMode: () => void;
+}
+/**
+ * Returns reactive theme mode state and setters.
+ * Must be called inside a component rendered within MarwesProvider.
+ *
+ * All properties are getters that stay reactive:
+ * ```ts
+ * const themeMode = useThemeMode();
+ * // themeMode.isDark, themeMode.mode, themeMode.toggleMode()
+ * ```
+ */
+export declare function useThemeMode(): ThemeModeContextValue;

package/dist/provider/use-theme-mode.js

@@ -0,0 +1,38 @@
+import { ThemeMode } from "@marwes-ui/core";
+import { getMarwesContext } from "./context.js";
+/**
+ * Returns reactive theme mode state and setters.
+ * Must be called inside a component rendered within MarwesProvider.
+ *
+ * All properties are getters that stay reactive:
+ * ```ts
+ * const themeMode = useThemeMode();
+ * // themeMode.isDark, themeMode.mode, themeMode.toggleMode()
+ * ```
+ */
+export function useThemeMode() {
+    const ctx = getMarwesContext();
+    return {
+        get mode() {
+            return ctx.state.mode;
+        },
+        get preference() {
+            return ctx.state.preference;
+        },
+        get systemMode() {
+            return ctx.state.systemMode;
+        },
+        get isDark() {
+            return ctx.state.mode === ThemeMode.dark;
+        },
+        get isLight() {
+            return ctx.state.mode === ThemeMode.light;
+        },
+        get isSystem() {
+            return ctx.state.preference === "system";
+        },
+        setMode: ctx.setMode,
+        setPreference: ctx.setPreference,
+        toggleMode: ctx.toggleMode,
+    };
+}

package/dist/provider/use-theme.d.ts

@@ -0,0 +1,15 @@
+import type { ResolvedTheme } from "@marwes-ui/core";
+export interface UseThemeReturn {
+    readonly theme: ResolvedTheme;
+}
+/**
+ * Returns a reactive reference to the resolved Marwes theme.
+ * Must be called inside a component rendered within MarwesProvider.
+ *
+ * Access `theme` as a getter to stay reactive:
+ * ```ts
+ * const { theme } = useTheme();
+ * // use theme.color.primary etc.
+ * ```
+ */
+export declare function useTheme(): UseThemeReturn;

package/dist/provider/use-theme.js

@@ -0,0 +1,19 @@
+import { getMarwesContext } from "./context.js";
+/**
+ * Returns a reactive reference to the resolved Marwes theme.
+ * Must be called inside a component rendered within MarwesProvider.
+ *
+ * Access `theme` as a getter to stay reactive:
+ * ```ts
+ * const { theme } = useTheme();
+ * // use theme.color.primary etc.
+ * ```
+ */
+export function useTheme() {
+    const ctx = getMarwesContext();
+    return {
+        get theme() {
+            return ctx.state.theme;
+        },
+    };
+}

package/dist/ssr.d.ts

@@ -0,0 +1,2 @@
+export type { MarwesThemeScriptOptions, MarwesThemeStyleOptions } from "@marwes-ui/core";
+export { createMarwesThemeScript, createMarwesThemeStyle } from "@marwes-ui/core";

package/dist/ssr.js

@@ -0,0 +1 @@
+export { createMarwesThemeScript, createMarwesThemeStyle } from "@marwes-ui/core";

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@marwes-ui/svelte",
+  "version": "1.3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./ssr": {
+      "types": "./dist/ssr.d.ts",
+      "svelte": "./dist/ssr.js",
+      "default": "./dist/ssr.js"
+    }
+  },
+  "dependencies": {
+    "@marwes-ui/core": "1.3.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.20.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@testing-library/svelte": "^5.0.0",
+    "jsdom": "26.1.0",
+    "rimraf": "6.1.2",
+    "svelte": "^5.20.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "5.9.3",
+    "vite": "^6.0.0",
+    "vitest": "4.0.18"
+  },
+  "scripts": {
+    "dev": "svelte-package --watch",
+    "build": "svelte-package",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test:typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "NODE_ENV=test vitest run",
+    "clean": "rimraf dist",
+    "lint": "biome lint .",
+    "format": "biome format --write ."
+  }
+}