svelte-kit-vice/src/routes/test/air/+layout.svelte

<script lang="ts">
	import '$uix/air/tokens/index.css';
	import '$uix/air/themes/index.css';
	import { createLing } from '$lib/ling/lib';
	import { setContext } from 'svelte';
	import {
		AIR_DEFAULT_THEME,
		type AirTheme,
		BASE_LIGHT_THEME,
		BASE_DARK_THEME,
		EARTH_LIGHT_THEME,
		EARTH_DARK_THEME,
	} from '$uix/air/themes';
	import { useAir } from '$uix/air/config';
	import {
		createTerraCurrencyFormatter,
		createTerraDateTimeFormatter,
		createTerraNumberFormatter,
		createTerraTranslator,
		extendTerraTranslationModule,
		createTerraUnitFormatter,
	} from '$uix/terra/config/exports';
	import { extendAirTranslationModule } from '$uix/air';
	import { AIR_DEMO_CONTEXT_KEY, type AirDemoContext } from './demo-context';
	import {
		AIR_DEMO_AIR_LING_NODE,
		AIR_DEMO_LOCALES,
		AIR_DEMO_TERRA_LING_NODE,
		type AirDemoLocaleId,
		getAirDemoLocale,
		translateAirDemoLingPath,
		translateAirDemoLingValue,
	} from './demo-locale';

	let { children } = $props();

	const THEMES: AirTheme[] = [BASE_LIGHT_THEME, BASE_DARK_THEME, EARTH_LIGHT_THEME, EARTH_DARK_THEME];

	let currentTheme = $state<AirTheme>(BASE_LIGHT_THEME);
	let localeId = $state<AirDemoLocaleId>('en-US');
	let soundEnabled = $state(true);
	let motionEnabled = $state(true);

	const localeOptions = AIR_DEMO_LOCALES;
	const currentLocale = $derived(getAirDemoLocale(localeId));
	const ling = createLing({}, 'es');

	const themeLabel = (t: AirTheme) => t.id.replace('-', ' ');

	extendTerraTranslationModule(ling, AIR_DEMO_TERRA_LING_NODE);
	extendAirTranslationModule(ling);
	ling.extend('air', AIR_DEMO_AIR_LING_NODE);

	const translator = createTerraTranslator({
		// El translator necesita leer una señal reactiva para invalidar el render
		// cuando cambia el locale en la demo. `ling.getLocale()` por sí solo no lo es.
		locale: () => currentLocale.lingLocale,
		translate: () => (value) => translateAirDemoLingValue(ling, currentLocale.lingLocale, value),
		translatePath: () => (path, ...args) =>
			translateAirDemoLingPath(ling, currentLocale.lingLocale, path, ...args),
		runtime: () => ling,
	});

	const dateTimeFormatter = createTerraDateTimeFormatter({
		dateOrder: () => currentLocale.dateOrder,
		timeFormat: () => currentLocale.timeFormat,
	});

	const numberFormatter = createTerraNumberFormatter({
		format: () => (...args: unknown[]) => {
			const [value, options] = args as [unknown, Intl.NumberFormatOptions?];
			return new Intl.NumberFormat(localeId, options).format(Number(value ?? 0));
		},
	});

	const currencyFormatter = createTerraCurrencyFormatter({
		format: () => (...args: unknown[]) => {
			const [value, currency, options] = args as [unknown, string | undefined, Intl.NumberFormatOptions?];
			return new Intl.NumberFormat(localeId, {
				style: 'currency',
				currency: currency ?? currentLocale.currency,
				...(options ?? {}),
			}).format(Number(value ?? 0));
		},
	});

	const unitFormatter = createTerraUnitFormatter({
		format: () => (...args: unknown[]) => {
			const [value, unit, options] = args as [unknown, Intl.NumberFormatOptions['unit'] | undefined, Intl.NumberFormatOptions?];
			return new Intl.NumberFormat(localeId, {
				style: 'unit',
				unit: unit ?? currentLocale.unit,
				unitDisplay: 'narrow',
				...(options ?? {}),
			}).format(Number(value ?? 0));
		},
	});

	const airDemoContext: AirDemoContext = {
		localeId: () => localeId,
		dir: () => currentLocale.dir,
		t: (path, ...args) => translateAirDemoLingPath(ling, currentLocale.lingLocale, path, ...args),
		tv: (value) => translateAirDemoLingValue(ling, currentLocale.lingLocale, value),
	};

	setContext(AIR_DEMO_CONTEXT_KEY, airDemoContext);
	const t = (path: string, ...args: unknown[]) =>
		translateAirDemoLingPath(ling, currentLocale.lingLocale, path, ...args);

	useAir({
		get translator() { return translator; },
		get presentation() {
			return {
				dir:               currentLocale.dir,
				dateTimeFormatter: dateTimeFormatter,
				numberFormatter:   numberFormatter,
				currencyFormatter: currencyFormatter,
				unitFormatter:     unitFormatter,
			};
		},
		get behavior() {
			return {
				soundEnabled,
				motionEnabled,
				soundPresets: currentTheme.soundPresets,
				motionPresets: currentTheme.motionPresets,
			};
		},
	});

	$effect(() => {
		document.documentElement.lang = currentLocale.id;
		document.documentElement.dir = currentLocale.dir;
		document.documentElement.setAttribute('data-theme', currentTheme.id);
	});
</script>

<svelte:head>
	<title>{t('air.demo.shell.playground')}</title>
</svelte:head>

<div class="air-demo-shell" data-theme={currentTheme.id} lang={currentLocale.id} dir={currentLocale.dir}>
		<div class="air-demo-atmosphere" aria-hidden="true"></div>

		<header class="air-demo-toolbar">
			<a href="/test/air" class="air-demo-brand">
				<span class="air-demo-brand-eye">Air</span>
				<span class="air-demo-brand-sep">/</span>
				<span class="air-demo-brand-name">{t('air.demo.shell.playground')}</span>
			</a>

			<nav class="air-demo-nav" aria-label={t('air.demo.shell.navLabel')}>
				<a href="/test">{t('air.demo.shell.index')}</a>
				<a href="/test/terra">Terra</a>
				<a href="/test/air">Air</a>
			</nav>

			<div class="air-demo-controls">
				<div class="air-demo-ctrl-group" aria-label={t('air.demo.shell.locale')}>
					{#each localeOptions as item}
						<button
							type="button"
							class="air-demo-chip"
							class:air-demo-chip--active={localeId === item.id}
							onclick={() => (localeId = item.id)}
						>{item.label}</button>
					{/each}
				</div>
				<div class="air-demo-ctrl-sep" aria-hidden="true"></div>
				<div class="air-demo-ctrl-group" aria-label={t('air.demo.shell.theme')}>
					{#each THEMES as t}
						<button
							type="button"
							class="air-demo-chip"
							class:air-demo-chip--active={currentTheme.id === t.id}
							onclick={() => (currentTheme = t)}
						>{themeLabel(t)}</button>
					{/each}
				</div>
				<div class="air-demo-ctrl-sep" aria-hidden="true"></div>
				<div class="air-demo-ctrl-group" aria-label={t('air.demo.shell.motionAndSound')}>
					<button
						type="button"
						class="air-demo-chip"
						class:air-demo-chip--active={motionEnabled}
						onclick={() => (motionEnabled = !motionEnabled)}
						title={t('air.demo.shell.toggleMotion')}
					>{t('air.demo.shell.motion')}</button>
					<button
						type="button"
						class="air-demo-chip"
						class:air-demo-chip--active={soundEnabled}
						onclick={() => (soundEnabled = !soundEnabled)}
						title={t('air.demo.shell.toggleSound')}
					>{t('air.demo.shell.sound')}</button>
				</div>
			</div>
		</header>

		<div class="air-demo-content">
			{@render children?.()}
		</div>
	</div>

<style>
	:global(body) {
		margin: 0;
		background: var(--air-color-bg);
		color: var(--air-color-text-primary);
		font-family: var(--air-font-sans);
	}

	.air-demo-shell {
		--_chip-bg: color-mix(in srgb, var(--air-color-surface-overlay) 52%, var(--air-color-surface-raised));
		--_chip-bg-hover: color-mix(in srgb, var(--air-color-surface-overlay) 72%, var(--air-color-surface-raised));
		--_chip-border: var(--air-color-border);
		--_chip-border-strong: var(--air-color-border-strong);
		--_chip-active-bg: var(--air-color-accent);
		--_chip-active-fg: var(--air-color-surface-raised);
		position: relative;
		min-height: 100vh;
		color: var(--air-color-text-primary);
	}

	.air-demo-atmosphere {
		position: fixed;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(
				circle at 8% 0%,
				color-mix(in srgb, var(--air-color-accent-muted) 12%, transparent),
				transparent 30%
			),
			radial-gradient(
				circle at 92% 5%,
				color-mix(in srgb, var(--air-color-surface-raised) 60%, transparent),
				transparent 24%
			);
		opacity: 0.7;
	}

	.air-demo-toolbar {
		position: sticky;
		top: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		gap: var(--air-space-3);
		height: 44px;
		padding: 0 var(--air-space-6);
		background: color-mix(in srgb, var(--air-color-surface-raised) 88%, transparent);
		backdrop-filter: blur(12px);
		border-bottom: 1px solid color-mix(in srgb, var(--air-color-border) 70%, transparent);
	}

	.air-demo-brand {
		display: flex;
		align-items: center;
		gap: 0;
		text-decoration: none;
		color: inherit;
		font-family: var(--air-font-mono);
		font-size: var(--air-font-size-sm);
		line-height: var(--air-leading-ui);
		white-space: nowrap;
	}

	.air-demo-brand-eye {
		font-weight: var(--air-font-weight-semibold);
		color: var(--air-color-accent-text);
	}

	.air-demo-brand-sep {
		margin: 0 var(--air-space-1);
		color: var(--air-color-text-disabled);
	}

	.air-demo-brand-name {
		color: var(--air-color-text-secondary);
	}

	.air-demo-nav {
		display: flex;
		align-items: center;
		gap: var(--air-space-1);
	}

	.air-demo-controls {
		display: flex;
		align-items: center;
		gap: var(--air-space-2);
		margin-left: auto;
	}

	.air-demo-ctrl-group {
		display: flex;
		align-items: center;
		gap: var(--air-space-1);
	}

	.air-demo-ctrl-sep {
		width: 1px;
		height: 16px;
		background: color-mix(in srgb, var(--air-color-border) 80%, transparent);
		flex-shrink: 0;
	}

	.air-demo-nav a,
	.air-demo-chip {
		appearance: none;
		border: 1px solid var(--_chip-border);
		background: var(--_chip-bg);
		color: var(--air-color-text-primary);
		text-decoration: none;
		padding: 3px var(--air-space-3);
		border-radius: var(--air-radius-full);
		font: inherit;
		font-size: var(--air-font-size-xs);
		line-height: var(--air-leading-ui);
		cursor: pointer;
		transition:
			background var(--air-duration-fast) var(--air-ease-default),
			border-color var(--air-duration-fast) var(--air-ease-default),
			color var(--air-duration-fast) var(--air-ease-default);
	}

	.air-demo-nav a:hover,
	.air-demo-chip:hover {
		border-color: var(--_chip-border-strong);
		background: var(--_chip-bg-hover);
	}

	.air-demo-nav a:focus-visible,
	.air-demo-chip:focus-visible {
		outline: 2px solid var(--air-color-accent);
		outline-offset: 2px;
	}

	.air-demo-chip--active {
		background: var(--_chip-active-bg);
		border-color: var(--_chip-active-bg);
		box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
		color: var(--_chip-active-fg);
	}

	.air-demo-content {
		position: relative;
		z-index: 1;
		padding: var(--air-space-6);
	}

	@media (max-width: 720px) {
		.air-demo-toolbar {
			padding: 0 var(--air-space-4);
			gap: var(--air-space-2);
		}

		.air-demo-content {
			padding: var(--air-space-4);
		}

		.air-demo-brand-name {
			display: none;
		}
	}
</style>