@ -3070,17 +3069,17 @@ Format.currency.getCurrency(); // USD, explicit user choice`
title:'Frontend',
alias:'$frontend',
summary:
'Application-level frontend preferences: dir, theme, mode, density, reduced motion and reduced sound, applied through adom.',
'Legacy application-level presentation shell. New UIX code uses prefs DOM projection plus Eidos.',
factories:['createActiveFrontend'],
dependsOn:['$adom','$locale'],
layer:'ActiveFrontend',
overview:[
'Frontend is not a component system. It owns global presentation preferences and writes stable attributes to the configured DOM target.',
'dir, mode and reducedMotion can be auto. theme, density and reducedSound are explicit preferences. The same auto/manual dynamic used by Format applies here.',
'When built through App, Frontend consumes core App.prefs plus optional App.dom and App.langs services. Prefs drives mode, density, motion and direction; Lang remains a fallback locale source only when the preference snapshot has no effective locale.'
'Frontend is not a component system. It is a legacy presentation shell kept for older consumers.',
'New UIX code should project cross-modal prefs with createActivePrefsDomProjection() and let ActiveEidos own theme, mode and density.',
'When built through App, Frontend may still consume explicitly declared legacy prefs slots plus optional App.dom.'
],
dynamics:[
'Frontend reads locale and environment preferences, resolves auto-capable values, and writes the result to DOM attributes through Dom.apply(). Components then style against those attributes instead of each component recalculating theme, direction or density.',
'Legacy Frontend reads locale and environment preferences, resolves auto-capable values, and writes the result to DOM attributes through Dom.apply().',
'The auto/manual dynamic matches Format. While dir/mode/reducedMotion are auto, locale or media-query changes can update them. Once the user sets a value explicitly, later auto sources stop overriding it until clearX() is called.',
'Persistence is not owned by Frontend. User intent belongs to prefs, and persistence is handled by the prefs storage bridge or application code.'
],
@ -3098,7 +3097,7 @@ Format.currency.getCurrency(); // USD, explicit user choice`
{
name:'using Frontend as a component library',
purpose:'It only owns global presentation state.',
notes:'Use UI components separately; use $frontend for app-level preferences.'
notes:'Use UIX components separately; use $frontend only for legacy app-level presentation state.'
},
{
name:'persisting every preference blindly',
@ -3108,7 +3107,7 @@ Format.currency.getCurrency(); // USD, explicit user choice`
],
quickStart:{
title:'Direction and theme',
code:`const Frontend = App.frontend;
code:`const Frontend = App.frontend; // legacy service
App.prefs.language.set('ar');
Frontend.getDir();// rtl while dir is auto
@ -3129,7 +3128,7 @@ Frontend.getDir(); // rtl`
{
name:'App.frontend',
purpose:'Schema-declared frontend service.',
notes:'Wired to core App.prefs and optional App.dom/App.langs services when they exist.'
notes:'Legacy opt-in service; not part of the new UIX boot path.'
}
],
api: artifactApis.fend,
@ -3137,7 +3136,7 @@ Frontend.getDir(); // rtl`
{
title:'Creation and app wiring',
body:[
'Frontend should normally be declared as an App service. The factory reads Dom from the service schema and Prefs from the core (always present).',
'Frontend is legacy opt-in. New UIX code should prefer createActivePrefsDomProjection() and ActiveEidos.',
'Create ActiveFrontend directly only for tests or embedded widgets that intentionally own their own DOM target.'
],
code:{
@ -3168,8 +3167,8 @@ App.frontend.getDir(); // rtl while dir remains auto`
dir="rtl"
data-theme="base"
data-mode="light"
data-reduced-motion="false"
data-reduced-sound="false"
data-motion="allow"
data-sound="allow"
data-density="normal"
></html>`
}
@ -3189,7 +3188,7 @@ App.frontend.getDir(); // rtl while dir remains auto`
notes:'Core Prefs drives Frontend mode, density, motion and direction when the Frontend service is declared.'
notes:'Covers legacy Frontend prefs wiring when the Frontend service is declared.'
},
{
name:'/test/fend',
@ -3224,14 +3223,14 @@ App.frontend.getDir(); // rtl while dir remains auto`
dependsOn:['$libs/dom','$reactive'],
layer:'ActiveDom',
overview:[
'Dom is the runtime DOM layer. It keeps browser-specific behavior out of formatting, frontend preferences and feature modules.',
'Dom is the runtime DOM layer. It keeps browser-specific behavior out of formatting, preference projection and feature modules.',
'It can resolve responsive values, track viewport, apply attributes declaratively and coordinate scroll lock. In SSR, browser tracking is inert.',
'Frontend uses Dom.apply() to update application-level attrs, so theme/dir changes are centralized.'
'Prefs projection and ActiveEidos use Dom.apply() to update application-level attrs.'
],
dynamics:[
'In the browser, ActiveDom installs viewport/media listeners and updates a reactive viewport snapshot. During SSR those listeners are inert so imports stay safe.',
'Responsive values are resolved from the current breakpoint. Consumers can pass a scalar or a breakpoint map and receive the best value for the active viewport.',
'DOM writes are centralized through apply(). Frontend uses this to update html/body attributes, while feature modules can use the same writer for controlled attribute/class/style updates.'
'DOM writes are centralized through apply(). Prefs projection, Eidos and feature modules use the same writer for controlled attribute/class/style updates.'
],
commonMistakes:[
{
@ -3250,9 +3249,9 @@ App.frontend.getDir(); // rtl while dir remains auto`
notes:'Resolve responsive maps through Dom.resolve().'
},
{
name:'manual attrs fighting Frontend',
purpose:'Theme/dir/mode can be overwritten by the next preference update.',
notes:'Let Frontend write app-level attrs through Dom.'
name:'manual attrs fighting managed projection',
purpose:'dir, mode or theme attrs can be overwritten by the owning projection.',
notes:'Use createActivePrefsDomProjection(), ActiveEidos or Dom.apply() from the owning layer.'
<tr><td><code>lang</code></td><td><code>defineActiveLangs()</code></td><td>Consumes <code>logger</code> and <code>prefs</code> from the core; follows <code>App.prefs.language.get()</code>.</td></tr>
<tr><td><code>format</code></td><td><code>defineActiveFormat()</code></td><td>Consumes <code>timers</code> and <code>prefs</code> from the core; resolves locale from explicit source or prefs.</td></tr>
<tr><td><code>frontend</code></td><td><code>defineActiveFrontend()</code></td><td>Consumes <code>prefs</code> from the core and optionally <code>dom</code>; prefs drives mode, density, motion and direction.</td></tr>
<tr><td><code>frontend</code></td><td><code>defineActiveFrontend()</code></td><td>Legacy opt-in presentation shell. New UIX code uses prefs projection plus Eidos.</td></tr>
<tr><td><code>dom</code></td><td><code>defineActiveDom()</code></td><td>DOM integration, isolated as a service.</td></tr>
<tr><td><code>storage</code></td><td><code>defineActiveStorage()</code></td><td>Storage runtime, typically used by session and prefs persistence bridges.</td></tr>
<tr><td><code>http</code></td><td><code>defineEngineHttp()</code></td><td>Pure HTTP engine adapted into the schema.</td></tr>
<tr><td>Data</td><td><code>$http</code>, <code>$cache</code>, <code>$storage</code></td><td>Remote calls, coherent cached data, safe local persistence.</td></tr>
<tr><td>Preferences</td><td><code>$prefs</code></td><td>User intent, environment defaults and effective locale/theme/density/timezone values.</td></tr>
<tr><td>Preferences</td><td><code>$prefs</code></td><td>User intent, environment defaults and effective locale/timezone/perception values.</td></tr>
<tr><td>I18n and formats</td><td><code>$langs</code>, <code>$format</code></td><td>Text translation plus preference-driven numbers, currency, units and dates.</td></tr>
<tr><td>Frontend runtime</td><td><code>$frontend</code>, <code>$adom</code></td><td>Effective visual state, direction, theme, DOM writes and responsive helpers.</td></tr>
<tr><td>DOM and UI runtime</td><td><code>$adom</code>, <code>$prefs</code>, <code>$uix/eidos</code></td><td>DOM writes, global preference attrs and visual theme/mode/density.</td></tr>
<tr><td>Validation</td><td><code>$sium</code></td><td>Page-scoped schemas, issues, metadata and translated validation messages.</td></tr>
