You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.4 KiB
94 lines
3.4 KiB
<script lang="ts">
|
|
/**
|
|
* The UIX boot chain for the blocks section, in one place: the shell uses it
|
|
* for the documentation pages, and each block's `preview` route uses it too
|
|
* — a preview is a REAL page (its own document, its own viewport scroll), so
|
|
* it boots the framework itself instead of inheriting the section chrome.
|
|
*
|
|
* The axes arrive as props so the preview can be driven from its URL:
|
|
* `?mode=dark&dir=rtl&lang=en` is what the demo's iframe passes.
|
|
*/
|
|
import './reset.css';
|
|
import { onDestroy, untrack } from 'svelte';
|
|
import { createActiveUix, setActiveUix } from '$active-uix';
|
|
import { standardPrefsDimensions } from '$prefs';
|
|
import { Soma } from '$soma/core/soma.svelte';
|
|
import { siumLangs } from '$sium/langs/langs';
|
|
import { secsLangs } from '$libs/secs';
|
|
import { blocksLangs } from './blocks-langs';
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
import { semaPacks } from './sema-packs';
|
|
import type { Snippet } from 'svelte';
|
|
|
|
export type BootLanguage = 'es' | 'en' | 'fr' | 'de';
|
|
export type BootDensity = 'compact' | 'comfortable' | 'spacious';
|
|
|
|
let {
|
|
mode = 'light',
|
|
language = 'es',
|
|
dir = 'ltr',
|
|
density = 'comfortable',
|
|
children
|
|
}: {
|
|
mode?: 'light' | 'dark';
|
|
language?: BootLanguage;
|
|
dir?: 'ltr' | 'rtl';
|
|
density?: BootDensity;
|
|
children: Snippet;
|
|
} = $props();
|
|
|
|
const prefsSchema = standardPrefsDimensions({
|
|
languages: ['es', 'en', 'fr', 'de'] as const,
|
|
locales: ['es-ES', 'en-US', 'en-GB', 'de-DE'] as const,
|
|
currencies: ['EUR', 'USD', 'GBP', 'JPY'] as const,
|
|
defaults: { language: 'es', locale: 'es-ES', currency: 'EUR' }
|
|
});
|
|
|
|
const uix = createActiveUix({
|
|
langs: {
|
|
schema: { sium: siumLangs, secs: secsLangs, blocks: blocksLangs },
|
|
defaultLocale: 'es' as const
|
|
},
|
|
// The blocks tier is shown, not shipped: this is the gallery of a SEMANTIC
|
|
// framework, so the perceptual channels are on. Without this the engine
|
|
// still stamps `data-event-*` correctly and nothing is ever audible —
|
|
// which is how the section shipped from F0.
|
|
events: { sound: true, haptic: true, components: semaPacks },
|
|
prefs: {
|
|
schema: prefsSchema,
|
|
// The four axes enter as INTENT, so the first resolution is already the
|
|
// one the URL asked for — no flash, no second engine. A SNAPSHOT on
|
|
// purpose (`untrack`): the engine is built once and the `$effect`
|
|
// below owns every later move of a prop.
|
|
intent: untrack(() => ({ mode, language, direction: dir, density })),
|
|
// A preview is a PROJECTION of its URL and persists nothing. The iframe
|
|
// shares its origin with the section shell, so the canonical envelope is
|
|
// the SHELL's: with the default adapter this boot hydrated the shell's
|
|
// choices over the URL's and then wrote the URL's back into them.
|
|
storage: false
|
|
}
|
|
});
|
|
setActiveUix(uix);
|
|
Soma.create();
|
|
|
|
// Mode, theme, density and scaling reach `<html>` from the prefs slots eidos
|
|
// reads — the density scales included, rebound by the generated sheet per
|
|
// `[data-density='…']`.
|
|
const activeEidos = ActiveEidos.create({ applyDom: true, theme: 'base' });
|
|
|
|
// Re-assert the axes when a prop moves without remounting the boot.
|
|
$effect(() => {
|
|
uix.prefs.setIntent('mode', mode);
|
|
uix.prefs.setIntent('language', language);
|
|
uix.prefs.setIntent('direction', dir);
|
|
uix.prefs.setIntent('density', density);
|
|
});
|
|
|
|
onDestroy(() => {
|
|
activeEidos.dispose();
|
|
uix.dispose();
|
|
});
|
|
</script>
|
|
|
|
{@render children()}
|