|
|
<script lang="ts">
|
|
|
/**
|
|
|
* Blocks section shell. Boots UIX (createActiveUix → Soma → prefs projection
|
|
|
* → ActiveEidos) and puts REAL chrome around it: a rail with the catalog and
|
|
|
* a topbar whose axes actually drive the framework — colour mode, language,
|
|
|
* direction and density. Without them a demo can only be looked at, never
|
|
|
* exercised, which is the whole point of a demo.
|
|
|
*
|
|
|
* The three regions are placed by `blocks.css` (app-land chrome, the role
|
|
|
* `uix.css` plays for the component docs); everything inside them is a canon
|
|
|
* component, so the section dogfoods the framework like the rest of the site.
|
|
|
*/
|
|
|
import { onDestroy } from 'svelte';
|
|
|
import { page } from '$app/state';
|
|
|
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 './_lib/blocks-langs';
|
|
|
import { ActiveEidos } from '$uix/eidos';
|
|
|
import { semaPacks } from './_lib/sema-packs';
|
|
|
import { Stack } from '$uix/eidos/components/stack';
|
|
|
import { Group } from '$uix/eidos/components/group';
|
|
|
import { Text } from '$uix/eidos/components/text';
|
|
|
import { Link } from '$uix/eidos/components/link';
|
|
|
import { Badge } from '$uix/eidos/components/badge';
|
|
|
import { Separator } from '$uix/eidos/components/separator';
|
|
|
import { ToggleGroup } from '$uix/eidos/components/toggle-group';
|
|
|
import { Button } from '$uix/eidos/components/button';
|
|
|
import * as Icon from '$uix/eidos/components/icon';
|
|
|
import { BLOCK_CATALOG } from './_lib/catalog';
|
|
|
import '@/uix/eidos/index.css';
|
|
|
// The box-model reset the section needs. Imported HERE as well as in `BootUix`
|
|
|
// because this shell boots UIX inline instead of going through it — the
|
|
|
// previews get it from `BootUix`, the gallery from this line.
|
|
|
import './_lib/reset.css';
|
|
|
import './blocks.css';
|
|
|
|
|
|
let { children } = $props();
|
|
|
|
|
|
type Language = 'es' | 'en' | 'fr' | 'de';
|
|
|
type Density = 'compact' | 'comfortable' | 'spacious';
|
|
|
|
|
|
const blocksPrefsSchema = standardPrefsDimensions({
|
|
|
languages: ['es', 'en', 'fr', 'de'] satisfies readonly Language[],
|
|
|
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: blocksPrefsSchema }
|
|
|
});
|
|
|
setActiveUix(uix);
|
|
|
Soma.create();
|
|
|
|
|
|
// ── Axes ──────────────────────────────────────────────────────────────
|
|
|
let mode = $state<'light' | 'dark'>('light');
|
|
|
let language = $state<Language>('es');
|
|
|
let dir = $state<'ltr' | 'rtl'>('ltr');
|
|
|
let density = $state<Density>('comfortable');
|
|
|
|
|
|
const DENSITY_SCALES: Record<Density, { space: number; control: number }> = {
|
|
|
compact: { space: 0.85, control: 0.9 },
|
|
|
comfortable: { space: 1, control: 1 },
|
|
|
spacious: { space: 1.15, control: 1.1 }
|
|
|
};
|
|
|
|
|
|
const modeListeners = new Set<(value: 'light' | 'dark') => void>();
|
|
|
const activeEidos = ActiveEidos.create({
|
|
|
applyDom: true,
|
|
|
theme: 'base',
|
|
|
modeSource: {
|
|
|
get: () => mode,
|
|
|
onChange(handler) {
|
|
|
modeListeners.add(handler);
|
|
|
return () => modeListeners.delete(handler);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// Restore once: a stored choice wins, otherwise the OS scheme decides.
|
|
|
$effect(() => {
|
|
|
if (typeof localStorage === 'undefined') return;
|
|
|
const stored = localStorage.getItem('uix-blocks-prefs');
|
|
|
if (stored) {
|
|
|
try {
|
|
|
const blob = JSON.parse(stored);
|
|
|
if (blob.mode === 'dark' || blob.mode === 'light') mode = blob.mode;
|
|
|
if (blob.language) language = blob.language;
|
|
|
if (blob.dir) dir = blob.dir;
|
|
|
if (blob.density) density = blob.density;
|
|
|
return;
|
|
|
} catch {
|
|
|
/* ignore a corrupt blob */
|
|
|
}
|
|
|
}
|
|
|
mode = window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
|
});
|
|
|
|
|
|
$effect(() => {
|
|
|
if (typeof localStorage === 'undefined') return;
|
|
|
localStorage.setItem('uix-blocks-prefs', JSON.stringify({ mode, language, dir, density }));
|
|
|
});
|
|
|
|
|
|
$effect(() => {
|
|
|
const current = mode;
|
|
|
for (const listener of modeListeners) listener(current);
|
|
|
});
|
|
|
|
|
|
// Language and direction are PREFS intents: they reach langs, formats and the
|
|
|
// document direction through the framework, not through local wiring.
|
|
|
$effect(() => {
|
|
|
uix.prefs.setIntent('language', language);
|
|
|
uix.prefs.setIntent('direction', dir);
|
|
|
});
|
|
|
|
|
|
// Density on :root, so portaled overlays get it too.
|
|
|
$effect(() => {
|
|
|
const d = DENSITY_SCALES[density];
|
|
|
uix.dom.writeStyle(
|
|
|
'uix-blocks-display',
|
|
|
`:root{--density-space-scale:${d.space};--density-control-scale:${d.control};}`
|
|
|
);
|
|
|
});
|
|
|
|
|
|
const currentSlug = $derived(page.url.pathname.replace(/^\/blocks\/?/, ''));
|
|
|
|
|
|
onDestroy(() => {
|
|
|
activeEidos.dispose();
|
|
|
uix.dispose();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
|
<title>Blocks — UIX</title>
|
|
|
<meta name="color-scheme" content="light dark" />
|
|
|
</svelte:head>
|
|
|
|
|
|
<div data-blocks-shell data-theme={mode} data-mode={mode}>
|
|
|
<header data-blocks-topbar>
|
|
|
<Group align="center" gap={3} justify="start">
|
|
|
<Link href="/blocks" variant="plain" underline="none">
|
|
|
<Group align="center" gap={2} justify="start">
|
|
|
<Icon.Boxes size="sm" />
|
|
|
<Text weight="semibold">Blocks</Text>
|
|
|
</Group>
|
|
|
</Link>
|
|
|
<Badge size="xs" variant="soft">tier</Badge>
|
|
|
</Group>
|
|
|
|
|
|
<Group align="center" gap={4} justify="end">
|
|
|
<Group align="center" gap={2} justify="end">
|
|
|
<Text size="xs" color="muted">idioma</Text>
|
|
|
<ToggleGroup
|
|
|
selectionMode="single"
|
|
|
size="sm"
|
|
|
attached
|
|
|
value={[language]}
|
|
|
onValueChange={(v) => (language = (v[0] ?? language) as Language)}
|
|
|
aria-label="Idioma"
|
|
|
>
|
|
|
{#each ['es', 'en', 'fr', 'de'] as value (value)}
|
|
|
<ToggleGroup.Item {value}>{value.toUpperCase()}</ToggleGroup.Item>
|
|
|
{/each}
|
|
|
</ToggleGroup>
|
|
|
</Group>
|
|
|
|
|
|
<Group align="center" gap={2} justify="end">
|
|
|
<Text size="xs" color="muted">densidad</Text>
|
|
|
<ToggleGroup
|
|
|
selectionMode="single"
|
|
|
size="sm"
|
|
|
attached
|
|
|
value={[density]}
|
|
|
onValueChange={(v) => (density = (v[0] ?? density) as Density)}
|
|
|
aria-label="Densidad"
|
|
|
>
|
|
|
<ToggleGroup.Item value="compact">−</ToggleGroup.Item>
|
|
|
<ToggleGroup.Item value="comfortable">·</ToggleGroup.Item>
|
|
|
<ToggleGroup.Item value="spacious">+</ToggleGroup.Item>
|
|
|
</ToggleGroup>
|
|
|
</Group>
|
|
|
|
|
|
<Group align="center" gap={2} justify="end">
|
|
|
<Text size="xs" color="muted">dir</Text>
|
|
|
<ToggleGroup
|
|
|
selectionMode="single"
|
|
|
size="sm"
|
|
|
attached
|
|
|
value={[dir]}
|
|
|
onValueChange={(v) => (dir = (v[0] ?? dir) as 'ltr' | 'rtl')}
|
|
|
aria-label="Dirección"
|
|
|
>
|
|
|
<ToggleGroup.Item value="ltr">LTR</ToggleGroup.Item>
|
|
|
<ToggleGroup.Item value="rtl">RTL</ToggleGroup.Item>
|
|
|
</ToggleGroup>
|
|
|
</Group>
|
|
|
|
|
|
<Button
|
|
|
size="sm"
|
|
|
variant="ghost"
|
|
|
aria-label={mode === 'light' ? 'Cambiar a modo oscuro' : 'Cambiar a modo claro'}
|
|
|
onclick={() => (mode = mode === 'light' ? 'dark' : 'light')}
|
|
|
>
|
|
|
{#if mode === 'light'}
|
|
|
<Icon.Moon size="sm" />
|
|
|
{:else}
|
|
|
<Icon.Sun size="sm" />
|
|
|
{/if}
|
|
|
</Button>
|
|
|
</Group>
|
|
|
</header>
|
|
|
|
|
|
<div data-blocks-body>
|
|
|
<nav data-blocks-rail aria-label="Catálogo de blocks">
|
|
|
<Stack gap={4}>
|
|
|
{#each BLOCK_CATALOG as group, i (group.title)}
|
|
|
<Stack gap={2}>
|
|
|
<Text size="xs" weight="medium" color="muted">{group.title}</Text>
|
|
|
<Stack gap={1}>
|
|
|
{#each group.items as item (item.slug)}
|
|
|
{#if item.shipped}
|
|
|
<Link href={`/blocks/${item.slug}`} variant="plain" underline="none">
|
|
|
<Text
|
|
|
size="sm"
|
|
|
weight={currentSlug === item.slug ? 'semibold' : 'regular'}
|
|
|
color={currentSlug === item.slug ? 'primary' : 'secondary'}
|
|
|
>
|
|
|
{item.label}
|
|
|
</Text>
|
|
|
</Link>
|
|
|
{:else}
|
|
|
<Text size="sm" color="disabled">{item.label}</Text>
|
|
|
{/if}
|
|
|
{/each}
|
|
|
</Stack>
|
|
|
</Stack>
|
|
|
{#if i < BLOCK_CATALOG.length - 1}
|
|
|
<Separator />
|
|
|
{/if}
|
|
|
{/each}
|
|
|
</Stack>
|
|
|
</nav>
|
|
|
|
|
|
<div data-blocks-content {dir}>
|
|
|
{@render children?.()}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
