@moni-labs/moni-ui 0.2.0

package/dist/styles/tokens.css

@@ -0,0 +1,190 @@
+@import 'tailwindcss';
+
+@theme {
+	/* ─── Material Design 3 Expressive tokens ─── */
+	--color-primary: var(--md-sys-color-primary);
+	--color-on-primary: var(--md-sys-color-on-primary);
+	--color-primary-container: var(--md-sys-color-primary-container);
+	--color-on-primary-container: var(--md-sys-color-on-primary-container);
+
+	--color-secondary: var(--md-sys-color-secondary);
+	--color-on-secondary: var(--md-sys-color-on-secondary);
+	--color-secondary-container: var(--md-sys-color-secondary-container);
+	--color-on-secondary-container: var(--md-sys-color-on-secondary-container);
+
+	--color-tertiary: var(--md-sys-color-tertiary);
+	--color-on-tertiary: var(--md-sys-color-on-tertiary);
+	--color-tertiary-container: var(--md-sys-color-tertiary-container);
+	--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
+
+	--color-error: var(--md-sys-color-error);
+	--color-on-error: var(--md-sys-color-on-error);
+	--color-error-container: var(--md-sys-color-error-container);
+	--color-on-error-container: var(--md-sys-color-on-error-container);
+
+	--color-background: var(--md-sys-color-background);
+	--color-on-background: var(--md-sys-color-on-background);
+	--color-surface: var(--md-sys-color-surface);
+	--color-on-surface: var(--md-sys-color-on-surface);
+	--color-surface-variant: var(--md-sys-color-surface-variant);
+	--color-on-surface-variant: var(--md-sys-color-on-surface-variant);
+
+	--color-outline: var(--md-sys-color-outline);
+	--color-outline-variant: var(--md-sys-color-outline-variant);
+
+	--color-surface-container-lowest: var(--md-sys-color-surface-container-lowest);
+	--color-surface-container-low: var(--md-sys-color-surface-container-low);
+	--color-surface-container: var(--md-sys-color-surface-container);
+	--color-surface-container-high: var(--md-sys-color-surface-container-high);
+	--color-surface-container-highest: var(--md-sys-color-surface-container-highest);
+
+	--color-inverse-surface: var(--md-sys-color-inverse-surface);
+	--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
+	--color-inverse-primary: var(--md-sys-color-inverse-primary);
+
+	/* ─── Semantic Moni tokens ─── */
+	--color-success: #16a34a;
+	--color-on-success: #ffffff;
+	--color-success-container: #dcfce7;
+	--color-on-success-container: #14532d;
+
+	--color-warning: #f59e0b;
+	--color-on-warning: #000000;
+	--color-warning-container: #fef3c7;
+	--color-on-warning-container: #78350f;
+
+	--color-danger: #dc2626;
+	--color-on-danger: #ffffff;
+	--color-danger-container: #fee2e2;
+	--color-on-danger-container: #7f1d1d;
+
+	--color-info: #0284c7;
+	--color-on-info: #ffffff;
+	--color-info-container: #e0f2fe;
+	--color-on-info-container: #0c4a6e;
+
+	/* ─── Typography ─── */
+	--font-sans: var(--moni-font-sans, 'Geist', system-ui, -apple-system, sans-serif);
+	--font-serif: var(--moni-font-title, 'Instrument Serif', Georgia, serif);
+	--font-mono: 'Geist Mono', 'Fira Code', monospace;
+	--font-brand: var(--moni-font-sans, 'Geist', system-ui, sans-serif);
+	--font-title: var(--moni-font-title, 'Instrument Serif', Georgia, serif);
+	--font-icon: var(--moni-font-icon, 'Material Symbols Rounded');
+
+	/* ─── Spacing density ─── */
+	--spacing-density: var(--moni-spacing-density, 1);
+	--spacing-xs: calc(0.25rem * var(--moni-spacing-density, 1));
+	--spacing-sm: calc(0.5rem * var(--moni-spacing-density, 1));
+	--spacing-md: calc(1rem * var(--moni-spacing-density, 1));
+	--spacing-lg: calc(1.5rem * var(--moni-spacing-density, 1));
+	--spacing-xl: calc(2rem * var(--moni-spacing-density, 1));
+	--spacing-2xl: calc(3rem * var(--moni-spacing-density, 1));
+
+	/* ─── Radius scale ─── */
+	--radius-base: var(--moni-radius-base, 12px);
+	--radius-sm: calc(var(--moni-radius-base, 12px) * 0.5);
+	--radius-md: var(--moni-radius-base, 12px);
+	--radius-lg: calc(var(--moni-radius-base, 12px) * 1.5);
+	--radius-xl: calc(var(--moni-radius-base, 12px) * 2);
+	--radius-full: 9999px;
+
+	/* ─── Card radius (overridable per card via --moni-radius-card) ─── */
+	--radius-card: var(--moni-radius-card, var(--radius-md, 0.75rem));
+
+	/* ─── List dividers (overridable per list via --moni-list-divider) ─── */
+	--moni-list-divider: var(--moni-list-divider-fallback, 0);
+
+	/* ─── Progress color (overridable per progress via --moni-progress-color) ─── */
+	--moni-progress-color: var(--color-primary);
+
+	/* ─── Button shape radius (overridable per button via shape-radius) ─── */
+	--moni-button-shape-radius: 1.25rem;
+
+	/* ─── Motion ─── */
+	--ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
+	--ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
+	--ease-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
+	--ease-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
+	--ease-standard-decelerate: cubic-bezier(0.0, 0.0, 0, 1.0);
+	--ease-standard-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
+
+	--duration-instant: 0ms;
+	--duration-fast: 100ms;
+	--duration-normal: 200ms;
+	--duration-medium: 300ms;
+	--duration-emphasized: 500ms;
+	--duration-long: 800ms;
+
+	/* ─── Elevación / sombras M3 ─── */
+	--shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+	--shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+	--shadow-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+	--shadow-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
+	--shadow-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+
+	/* ─── Grain opacity ─── */
+	--moni-grain-opacity: var(--moni-grain-opacity, 0.03);
+
+	/* ─── Legacy Moni tokens (fallback durante la migración) ─── */
+	--color-brand-bg: var(--md-sys-color-background);
+	--color-brand-surface: var(--md-sys-color-surface);
+	--color-brand-primary: var(--md-sys-color-on-surface);
+	--color-brand-muted: var(--md-sys-color-on-surface-variant);
+	--color-brand-border: var(--md-sys-color-outline-variant);
+	--color-brand-accent: var(--md-sys-color-primary);
+
+	--color-admin-bg: var(--md-sys-color-background);
+	--color-admin-surface: var(--md-sys-color-surface);
+	--color-admin-sidebar: var(--md-sys-color-inverse-surface);
+	--color-admin-sidebar-fg: var(--md-sys-color-inverse-on-surface);
+	--color-admin-sidebar-muted: var(--md-sys-color-inverse-on-surface);
+	--color-admin-accent: var(--md-sys-color-primary);
+	--color-admin-accent-soft: var(--md-sys-color-primary-container);
+	--color-admin-text: var(--md-sys-color-on-surface);
+	--color-admin-success: var(--color-success);
+	--color-admin-warn: var(--color-warning);
+	--color-admin-danger: var(--color-danger);
+	--color-admin-info: var(--color-info);
+}
+
+:root {
+	--primary: var(--md-sys-color-primary);
+	--on-primary: var(--md-sys-color-on-primary);
+	--primary-container: var(--md-sys-color-primary-container);
+	--on-primary-container: var(--md-sys-color-on-primary-container);
+
+	--secondary: var(--md-sys-color-secondary);
+	--on-secondary: var(--md-sys-color-on-secondary);
+	--secondary-container: var(--md-sys-color-secondary-container);
+	--on-secondary-container: var(--md-sys-color-on-secondary-container);
+
+	--tertiary: var(--md-sys-color-tertiary);
+	--on-tertiary: var(--md-sys-color-on-tertiary);
+	--tertiary-container: var(--md-sys-color-tertiary-container);
+	--on-tertiary-container: var(--md-sys-color-on-tertiary-container);
+
+	--error: var(--md-sys-color-error);
+	--on-error: var(--md-sys-color-on-error);
+	--error-container: var(--md-sys-color-error-container);
+	--on-error-container: var(--md-sys-color-on-error-container);
+
+	--background: var(--md-sys-color-background);
+	--on-background: var(--md-sys-color-on-background);
+	--surface: var(--md-sys-color-surface);
+	--on-surface: var(--md-sys-color-on-surface);
+	--surface-variant: var(--md-sys-color-surface-variant);
+	--on-surface-variant: var(--md-sys-color-on-surface-variant);
+
+	--outline: var(--md-sys-color-outline);
+	--outline-variant: var(--md-sys-color-outline-variant);
+
+	--surface-container-lowest: var(--md-sys-color-surface-container-lowest);
+	--surface-container-low: var(--md-sys-color-surface-container-low);
+	--surface-container: var(--md-sys-color-surface-container);
+	--surface-container-high: var(--md-sys-color-surface-container-high);
+	--surface-container-highest: var(--md-sys-color-surface-container-highest);
+
+	--inverse-surface: var(--md-sys-color-inverse-surface);
+	--inverse-on-surface: var(--md-sys-color-inverse-on-surface);
+	--inverse-primary: var(--md-sys-color-inverse-primary);
+}

package/dist/utils/color.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Utilidades de color para generar esquemas compatibles con Material Design 3.
+ * Basado en @material/material-color-utilities.
+ */
+export type ContrastLevel = 'standard' | 'medium' | 'high';
+export interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface ColorScheme {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    background: string;
+    onBackground: string;
+    surface: string;
+    onSurface: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    outline: string;
+    outlineVariant: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    shadow: string;
+}
+export declare function hexToHsl(hex: string): HSL;
+export declare function hslToHex({ h, s, l }: HSL): string;
+export declare function generateScheme(seedHex: string, mode?: 'light' | 'dark', contrast?: ContrastLevel): ColorScheme;
+export declare function applySchemeToDocument(scheme: ColorScheme, mode: 'light' | 'dark', doc: Document): void;
+export declare function getDefaultSeed(): string;
+//# sourceMappingURL=color.d.ts.map

package/dist/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/utils/color.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,GAAG;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACV;AAED,MAAM,WAAW,WAAW;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,uBAAuB,EAAE,MAAM,CAAC;IAChC,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CA8BzC;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAYjD;AAID,wBAAgB,cAAc,CAC7B,OAAO,EAAE,MAAM,EACf,IAAI,GAAE,OAAO,GAAG,MAAgB,EAChC,QAAQ,GAAE,aAA0B,GAClC,WAAW,CAiDb;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,EAAE,QAAQ,QAW/F;AAED,wBAAgB,cAAc,IAAI,MAAM,CAEvC"}

package/dist/utils/color.js

@@ -0,0 +1,107 @@
+/**
+ * Utilidades de color para generar esquemas compatibles con Material Design 3.
+ * Basado en @material/material-color-utilities.
+ */
+import { SchemeTonalSpot, Hct, argbFromHex, hexFromArgb } from '@material/material-color-utilities';
+export function hexToHsl(hex) {
+    const normalized = hex.replace('#', '');
+    const r = parseInt(normalized.substring(0, 2), 16) / 255;
+    const g = parseInt(normalized.substring(2, 4), 16) / 255;
+    const b = parseInt(normalized.substring(4, 6), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return { h: h * 360, s: s * 100, l: l * 100 };
+}
+export function hslToHex({ h, s, l }) {
+    s /= 100;
+    l /= 100;
+    const k = (n) => (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => {
+        const color = l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+        return Math.round(color * 255)
+            .toString(16)
+            .padStart(2, '0');
+    };
+    return `#${f(0)}${f(8)}${f(4)}`;
+}
+export function generateScheme(seedHex, mode = 'light', contrast = 'standard') {
+    const seed = seedHex.startsWith('#') ? seedHex : `#${seedHex}`;
+    const argb = argbFromHex(seed);
+    const hct = Hct.fromInt(argb);
+    let contrastLevel = 0.0;
+    if (contrast === 'medium') {
+        contrastLevel = 0.5;
+    }
+    else if (contrast === 'high') {
+        contrastLevel = 1.0;
+    }
+    const scheme = new SchemeTonalSpot(hct, mode === 'dark', contrastLevel);
+    return {
+        primary: hexFromArgb(scheme.primary),
+        onPrimary: hexFromArgb(scheme.onPrimary),
+        primaryContainer: hexFromArgb(scheme.primaryContainer),
+        onPrimaryContainer: hexFromArgb(scheme.onPrimaryContainer),
+        secondary: hexFromArgb(scheme.secondary),
+        onSecondary: hexFromArgb(scheme.onSecondary),
+        secondaryContainer: hexFromArgb(scheme.secondaryContainer),
+        onSecondaryContainer: hexFromArgb(scheme.onSecondaryContainer),
+        tertiary: hexFromArgb(scheme.tertiary),
+        onTertiary: hexFromArgb(scheme.onTertiary),
+        tertiaryContainer: hexFromArgb(scheme.tertiaryContainer),
+        onTertiaryContainer: hexFromArgb(scheme.onTertiaryContainer),
+        error: hexFromArgb(scheme.error),
+        onError: hexFromArgb(scheme.onError),
+        errorContainer: hexFromArgb(scheme.errorContainer),
+        onErrorContainer: hexFromArgb(scheme.onErrorContainer),
+        background: hexFromArgb(scheme.background),
+        onBackground: hexFromArgb(scheme.onBackground),
+        surface: hexFromArgb(scheme.surface),
+        onSurface: hexFromArgb(scheme.onSurface),
+        surfaceVariant: hexFromArgb(scheme.surfaceVariant),
+        onSurfaceVariant: hexFromArgb(scheme.onSurfaceVariant),
+        outline: hexFromArgb(scheme.outline),
+        outlineVariant: hexFromArgb(scheme.outlineVariant),
+        surfaceContainerLowest: hexFromArgb(scheme.surfaceContainerLowest),
+        surfaceContainerLow: hexFromArgb(scheme.surfaceContainerLow),
+        surfaceContainer: hexFromArgb(scheme.surfaceContainer),
+        surfaceContainerHigh: hexFromArgb(scheme.surfaceContainerHigh),
+        surfaceContainerHighest: hexFromArgb(scheme.surfaceContainerHighest),
+        inverseSurface: hexFromArgb(scheme.inverseSurface),
+        inverseOnSurface: hexFromArgb(scheme.inverseOnSurface),
+        inversePrimary: hexFromArgb(scheme.inversePrimary),
+        shadow: hexFromArgb(scheme.shadow)
+    };
+}
+export function applySchemeToDocument(scheme, mode, doc) {
+    const root = doc.documentElement;
+    const prefix = '--md-sys-color-';
+    for (const [key, value] of Object.entries(scheme)) {
+        const kebab = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+        root.style.setProperty(`${prefix}${kebab}`, value);
+        root.style.setProperty(`--${kebab}`, value);
+    }
+    root.setAttribute('data-theme', mode);
+}
+export function getDefaultSeed() {
+    return '#4f46e5';
+}

package/dist/utils/theme.svelte.d.ts

@@ -0,0 +1,45 @@
+/**
+ * ThemeEngine — gestión reactiva del tema visual de Moni.
+ * Soporta: modo claro/oscuro, color semilla, densidad, radio, fuente y grain.
+ */
+import { type ColorScheme, type ContrastLevel } from './color.js';
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ThemeDensity = 'compact' | 'default' | 'comfortable' | 'spacious';
+export type ThemeRadius = 'sharp' | 'default' | 'rounded';
+export type ThemeFont = 'geist' | 'inter' | 'roboto' | 'instrument';
+export interface ThemeSettings {
+    mode: ThemeMode;
+    seedColor: string;
+    contrast: ContrastLevel;
+    density: ThemeDensity;
+    radius: ThemeRadius;
+    font: ThemeFont;
+    titleFont: ThemeFont;
+    grainOpacity: number;
+    reduceMotion: boolean;
+}
+export declare class ThemeEngine {
+    settings: ThemeSettings;
+    resolvedMode: "light" | "dark";
+    scheme: ColorScheme;
+    private mediaQuery;
+    private bound;
+    constructor();
+    private bindSystem;
+    private getEffectiveMode;
+    apply(): void;
+    persist(): void;
+    setMode(mode: ThemeMode): void;
+    setSeedColor(color: string): void;
+    setContrast(contrast: ContrastLevel): void;
+    setDensity(density: ThemeDensity): void;
+    setRadius(radius: ThemeRadius): void;
+    setFont(font: ThemeFont): void;
+    setTitleFont(font: ThemeFont): void;
+    setGrainOpacity(opacity: number): void;
+    setReduceMotion(reduce: boolean): void;
+    reset(): void;
+}
+export declare function getThemeEngine(): ThemeEngine;
+export declare function resetThemeEngine(): void;
+//# sourceMappingURL=theme.svelte.d.ts.map

package/dist/utils/theme.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../../src/utils/theme.svelte.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAyD,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAEzH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAC9E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEpE,MAAM,WAAW,aAAa;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;CACtB;AAoED,qBAAa,WAAW;IACvB,QAAQ,gBAA0C;IAClD,YAAY,mBAAqC;IACjD,MAAM,cAAuF;IAC7F,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,KAAK,CAAS;;IAWtB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,gBAAgB;IAKxB,KAAK;IAqBL,OAAO;IAOP,OAAO,CAAC,IAAI,EAAE,SAAS;IAKvB,YAAY,CAAC,KAAK,EAAE,MAAM;IAK1B,WAAW,CAAC,QAAQ,EAAE,aAAa;IAKnC,UAAU,CAAC,OAAO,EAAE,YAAY;IAKhC,SAAS,CAAC,MAAM,EAAE,WAAW;IAK7B,OAAO,CAAC,IAAI,EAAE,SAAS;IAKvB,YAAY,CAAC,IAAI,EAAE,SAAS;IAK5B,eAAe,CAAC,OAAO,EAAE,MAAM;IAK/B,eAAe,CAAC,MAAM,EAAE,OAAO;IAK/B,KAAK;CAIL;AAID,wBAAgB,cAAc,IAAI,WAAW,CAG5C;AAED,wBAAgB,gBAAgB,SAE/B"}

package/dist/utils/theme.svelte.js

@@ -0,0 +1,168 @@
+/**
+ * ThemeEngine — gestión reactiva del tema visual de Moni.
+ * Soporta: modo claro/oscuro, color semilla, densidad, radio, fuente y grain.
+ */
+import { generateScheme, applySchemeToDocument, getDefaultSeed } from './color.js';
+const STORAGE_KEY = 'moni-theme-settings-v1';
+const defaults = {
+    mode: 'system',
+    seedColor: getDefaultSeed(),
+    contrast: 'standard',
+    density: 'default',
+    radius: 'rounded',
+    font: 'geist',
+    titleFont: 'instrument',
+    grainOpacity: 0.03,
+    reduceMotion: false
+};
+function parseSettings(raw) {
+    if (!raw)
+        return { ...defaults };
+    try {
+        const parsed = JSON.parse(raw);
+        return { ...defaults, ...parsed };
+    }
+    catch {
+        return { ...defaults };
+    }
+}
+function getSystemMode() {
+    if (typeof window === 'undefined')
+        return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+function densityValue(density) {
+    switch (density) {
+        case 'compact':
+            return 0.75;
+        case 'comfortable':
+            return 1.25;
+        case 'spacious':
+            return 1.6;
+        default:
+            return 1;
+    }
+}
+function radiusValue(radius) {
+    switch (radius) {
+        case 'sharp':
+            return '0px';
+        case 'rounded':
+            return '20px';
+        default:
+            return '12px';
+    }
+}
+function fontFamily(font) {
+    switch (font) {
+        case 'inter':
+            return "'Inter', system-ui, sans-serif";
+        case 'roboto':
+            return "'Roboto', system-ui, sans-serif";
+        case 'instrument':
+            return "'Instrument Serif', Georgia, serif";
+        default:
+            return "'Geist', system-ui, sans-serif";
+    }
+}
+export class ThemeEngine {
+    constructor() {
+        this.settings = $state({ ...defaults });
+        this.resolvedMode = $state('light');
+        this.scheme = $state(generateScheme(defaults.seedColor, 'light', defaults.contrast));
+        this.mediaQuery = null;
+        this.bound = false;
+        if (typeof window !== 'undefined') {
+            this.settings = parseSettings(localStorage.getItem(STORAGE_KEY));
+            this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            this.bindSystem();
+            this.apply();
+        }
+    }
+    bindSystem() {
+        if (this.bound || !this.mediaQuery)
+            return;
+        this.bound = true;
+        this.mediaQuery.addEventListener('change', () => this.apply());
+    }
+    getEffectiveMode() {
+        if (this.settings.mode === 'system')
+            return getSystemMode();
+        return this.settings.mode;
+    }
+    apply() {
+        if (typeof document === 'undefined')
+            return;
+        const mode = this.getEffectiveMode();
+        this.resolvedMode = mode;
+        this.scheme = generateScheme(this.settings.seedColor, mode, this.settings.contrast);
+        applySchemeToDocument(this.scheme, mode, document);
+        const root = document.documentElement;
+        root.style.setProperty('--moni-spacing-density', densityValue(this.settings.density).toString());
+        root.style.setProperty('--moni-radius-base', radiusValue(this.settings.radius));
+        root.style.setProperty('--moni-font-sans', fontFamily(this.settings.font));
+        root.style.setProperty('--moni-font-title', fontFamily(this.settings.titleFont));
+        root.style.setProperty('--moni-grain-opacity', this.settings.grainOpacity.toString());
+        if (this.settings.reduceMotion) {
+            root.classList.add('moni-reduce-motion');
+        }
+        else {
+            root.classList.remove('moni-reduce-motion');
+        }
+    }
+    persist() {
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(this.settings));
+        }
+        this.apply();
+    }
+    setMode(mode) {
+        this.settings.mode = mode;
+        this.persist();
+    }
+    setSeedColor(color) {
+        this.settings.seedColor = color.startsWith('#') ? color : `#${color}`;
+        this.persist();
+    }
+    setContrast(contrast) {
+        this.settings.contrast = contrast;
+        this.persist();
+    }
+    setDensity(density) {
+        this.settings.density = density;
+        this.persist();
+    }
+    setRadius(radius) {
+        this.settings.radius = radius;
+        this.persist();
+    }
+    setFont(font) {
+        this.settings.font = font;
+        this.persist();
+    }
+    setTitleFont(font) {
+        this.settings.titleFont = font;
+        this.persist();
+    }
+    setGrainOpacity(opacity) {
+        this.settings.grainOpacity = Math.max(0, Math.min(1, opacity));
+        this.persist();
+    }
+    setReduceMotion(reduce) {
+        this.settings.reduceMotion = reduce;
+        this.persist();
+    }
+    reset() {
+        this.settings = { ...defaults };
+        this.persist();
+    }
+}
+let engine = null;
+export function getThemeEngine() {
+    if (!engine)
+        engine = new ThemeEngine();
+    return engine;
+}
+export function resetThemeEngine() {
+    engine = null;
+}

package/dist/web-components.d.ts

@@ -0,0 +1,3 @@
+import './components/index.js';
+export * from './components/index.js';
+//# sourceMappingURL=web-components.d.ts.map

package/dist/web-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-components.d.ts","sourceRoot":"","sources":["../src/web-components.ts"],"names":[],"mappings":"AAEA,OAAO,uBAAuB,CAAC;AAE/B,cAAc,uBAAuB,CAAC"}

package/dist/web-components.js

@@ -0,0 +1,4 @@
+// Lightweight entry point for Moni UI Web Components only.
+// Auto-registers every <moni-*> custom element without pulling in Svelte.
+import './components/index.js';
+export * from './components/index.js';

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@moni-labs/moni-ui",
+  "version": "0.2.0",
+  "private": false,
+  "type": "module",
+  "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./web-components": {
+      "types": "./dist/web-components.d.ts",
+      "import": "./dist/web-components.js"
+    },
+    "./styles": "./dist/styles/index.css",
+    "./components/*.ts": "./src/components/*.ts",
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./actions/*": {
+      "types": "./dist/actions/*.d.ts",
+      "import": "./dist/actions/*.js"
+    },
+    "./utils/*": {
+      "types": "./dist/utils/*.d.ts",
+      "import": "./dist/utils/*.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src",
+    "custom-elements.json",
+    "README.md",
+    "package.json"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/moni-spa/moni-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/moni-spa/moni-ui/issues"
+  },
+  "homepage": "https://github.com/moni-spa/moni-ui#readme",
+  "peerDependencies": {
+    "svelte": "^5.55.2",
+    "tailwindcss": "^4.2.2"
+  },
+  "dependencies": {
+    "@material/material-color-utilities": "^0.4.0",
+    "gsap": "^3.12.7",
+    "lit": "^3.3.3"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@tailwindcss/vite": "^4.3.1",
+    "jsdom": "^29.1.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "analyze": "custom-elements-manifest analyze",
+    "test": "vitest run",
+    "test:verbose": "vitest run --reporter=verbose",
+    "test:watch": "vitest"
+  }
+}

package/src/actions/index.ts

@@ -0,0 +1,2 @@
+// Legacy Svelte actions removed; this module is kept for backward compatibility.
+export {};

package/src/assets/arch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="304" height="304" fill="none" viewBox="0 0 304 304"><path fill="#d0bcff" d="M304 253.72c0 6.11 0 9.17-.31 11.74-2.38 20.05-18.18 35.85-38.23 38.23-2.57.31-5.63.31-11.74.31H50.281c-6.112 0-9.168 0-11.737-.31-20.049-2.38-35.856-18.18-38.239-38.23C0 262.89 0 259.83 0 253.72V152C0 68.05 68.053 0 152 0c83.95 0 152 68.05 152 152z"/></svg>

package/src/assets/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="316" height="278" fill="none" viewBox="0 0 316 278"><path fill="#d0bcff" d="M271.57 122.2c-14.018-21.58-28.035-43.19-42.053-64.77-9.094-14.01-18.35-28.21-30.645-39.34-12.296-11.15-28.224-19.03-44.556-18-14.34.92-27.632 8.63-38.125 18.7S97.546 41.26 89.528 53.54C67.842 86.72 46.13 119.9 24.444 153.1 14.139 168.86 3.565 185.31.713 204.09c-3.444 22.69 5.839 45.8 22.305 60.89 17.219 15.78 45.12 14.5 66.08 10.18 22.977-4.75 45.443-13.68 68.877-13.65 20.072 0 39.471 6.6 59.004 11.4 19.506 4.77 40.466 7.71 59.3.61 23.38-8.79 40.169-33.79 39.712-59.45-.431-23.41-13.534-44.32-26.152-63.8-6.081-9.35-12.161-18.72-18.242-28.07z"/></svg>