@moni-labs/moni-ui 0.2.0

package/src/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/src/types/svelte-runes.d.ts

@@ -0,0 +1,7 @@
+// Minimal type declarations for Svelte 5 runes used in non-Svelte TS files.
+// These allow the project to type-check without requiring the Svelte compiler in the TS pipeline.
+
+declare const $state: <T>(initial: T) => T;
+declare const $derived: <T>(fn: () => T) => T;
+declare const $effect: (fn: () => void | (() => void)) => void;
+declare const $props: <T = Record<string, unknown>>() => T;

package/src/utils/color.ts

@@ -0,0 +1,170 @@
+/**
+ * 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 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 function hexToHsl(hex: string): HSL {
+	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 }: HSL): string {
+	s /= 100;
+	l /= 100;
+	const k = (n: number) => (n + h / 30) % 12;
+	const a = s * Math.min(l, 1 - l);
+	const f = (n: number) => {
+		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: string,
+	mode: 'light' | 'dark' = 'light',
+	contrast: ContrastLevel = 'standard'
+): ColorScheme {
+	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: ColorScheme, mode: 'light' | 'dark', doc: Document) {
+	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(): string {
+	return '#4f46e5';
+}

package/src/utils/theme.svelte.ts

@@ -0,0 +1,206 @@
+/**
+ * ThemeEngine — gestión reactiva del tema visual de Moni.
+ * Soporta: modo claro/oscuro, color semilla, densidad, radio, fuente y grain.
+ */
+
+import { generateScheme, applySchemeToDocument, getDefaultSeed, 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;
+}
+
+const STORAGE_KEY = 'moni-theme-settings-v1';
+
+const defaults: ThemeSettings = {
+	mode: 'system',
+	seedColor: getDefaultSeed(),
+	contrast: 'standard',
+	density: 'default',
+	radius: 'rounded',
+	font: 'geist',
+	titleFont: 'instrument',
+	grainOpacity: 0.03,
+	reduceMotion: false
+};
+
+function parseSettings(raw: string | null): ThemeSettings {
+	if (!raw) return { ...defaults };
+	try {
+		const parsed = JSON.parse(raw) as Partial<ThemeSettings>;
+		return { ...defaults, ...parsed };
+	} catch {
+		return { ...defaults };
+	}
+}
+
+function getSystemMode(): 'light' | 'dark' {
+	if (typeof window === 'undefined') return 'light';
+	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function densityValue(density: ThemeDensity): number {
+	switch (density) {
+		case 'compact':
+			return 0.75;
+		case 'comfortable':
+			return 1.25;
+		case 'spacious':
+			return 1.6;
+		default:
+			return 1;
+	}
+}
+
+function radiusValue(radius: ThemeRadius): string {
+	switch (radius) {
+		case 'sharp':
+			return '0px';
+		case 'rounded':
+			return '20px';
+		default:
+			return '12px';
+	}
+}
+
+function fontFamily(font: ThemeFont): string {
+	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 {
+	settings = $state<ThemeSettings>({ ...defaults });
+	resolvedMode = $state<'light' | 'dark'>('light');
+	scheme = $state<ColorScheme>(generateScheme(defaults.seedColor, 'light', defaults.contrast));
+	private mediaQuery: MediaQueryList | null = null;
+	private bound = false;
+
+	constructor() {
+		if (typeof window !== 'undefined') {
+			this.settings = parseSettings(localStorage.getItem(STORAGE_KEY));
+			this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+			this.bindSystem();
+			this.apply();
+		}
+	}
+
+	private bindSystem() {
+		if (this.bound || !this.mediaQuery) return;
+		this.bound = true;
+		this.mediaQuery.addEventListener('change', () => this.apply());
+	}
+
+	private getEffectiveMode(): 'light' | 'dark' {
+		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: ThemeMode) {
+		this.settings.mode = mode;
+		this.persist();
+	}
+
+	setSeedColor(color: string) {
+		this.settings.seedColor = color.startsWith('#') ? color : `#${color}`;
+		this.persist();
+	}
+
+	setContrast(contrast: ContrastLevel) {
+		this.settings.contrast = contrast;
+		this.persist();
+	}
+
+	setDensity(density: ThemeDensity) {
+		this.settings.density = density;
+		this.persist();
+	}
+
+	setRadius(radius: ThemeRadius) {
+		this.settings.radius = radius;
+		this.persist();
+	}
+
+	setFont(font: ThemeFont) {
+		this.settings.font = font;
+		this.persist();
+	}
+
+	setTitleFont(font: ThemeFont) {
+		this.settings.titleFont = font;
+		this.persist();
+	}
+
+	setGrainOpacity(opacity: number) {
+		this.settings.grainOpacity = Math.max(0, Math.min(1, opacity));
+		this.persist();
+	}
+
+	setReduceMotion(reduce: boolean) {
+		this.settings.reduceMotion = reduce;
+		this.persist();
+	}
+
+	reset() {
+		this.settings = { ...defaults };
+		this.persist();
+	}
+}
+
+let engine: ThemeEngine | null = null;
+
+export function getThemeEngine(): ThemeEngine {
+	if (!engine) engine = new ThemeEngine();
+	return engine;
+}
+
+export function resetThemeEngine() {
+	engine = null;
+}

package/src/web-components.ts

@@ -0,0 +1,5 @@
+// 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';