go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2bc5fe6bd2'
${ noResults }
svelte-kit-vice/docs/active-uix-architecture.svg

126 lines
12 KiB
Raw Normal View History Unescape

feat(audit): component re-audit + fixes P0–P5 (P4 complete, P5 in progress) Re-audit of the whole component catalog at pilot depth (91 fichas + the checkpoint verdicts in docs/audit/components/) and the executed fix packages. - P0–P3: doctrine (sema participation, CANON §3 intent, component-guide §5 + API naming, §32 outline), guards (morfo-vocabulary-check S10/S11d, component-audit A-3.1/A-1.4/S9, eidos-lint classHooks), morfo contracts (role=application removed ×4, aria-selected off the Day, drp translationRef, field data-state prune, pin-input commit-set, media-player renames), 13 new sema packs + 12 morfos family-default → pack. - P4 (N1–N10) COMPLETE: selectionMode (select/combobox/toggle-group/calendar); onValueCommit terminal-callback norm (pin-input/search/password/textarea + date/time/color-field add); typed validation reason + onInvalid (tags-input, css-field); index/onIndexChange (carousel); deselectable; openDelay/ groupSkipDelay; allowCustomValue; defaultValue prune. - P5 (in progress): S1 class-hooks codemod (22 hooks → data-attrs across cropper/button/image-picker/toggle/image-adjustments); S5 outline remnant in field.css; depth pass (data-depth=overlay on tooltip/toast/float-panel); touch-rows (--touch-target token, decoupled ::before hit-slop, area-not-visual, 44 AAA). S6 (Field composition) + S8 (calendar-surface) pending. Verification: errors-outside-(alpha|words|palabras|chronos) == 59 (baseline); morfo-vocabulary-check exit 0; eidos-lint class-hooks/invalid 0 on touched components; per-component vitest suites green. Handoff + remaining plan: docs/process/continue-audit-fixes-2026-07.md Excluded (broken by the N1 rename, left broken per user decision, not staged): words/**, palabras/**, chronos, web/routes/alpha/**. Reconciliation pending: the touch-rows ::before for checkbox/switch reverses changelog §37's earlier pseudo-element rejection (WCAG-overlap) that had routed markers to a labeled-row/Field task — flagged for the user in the handoff. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3 months ago
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 1100 724" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="ttl dsc">
<title id="ttl">Arquitectura de active-uix</title>
<desc id="dsc">Stack de capas UIX: morfo (contrato declarativo) consumido por sema (motor semantico), soma (componentes headless) y eidos (capa CSS), todo compuesto por active-uix. Debajo, los servicios de runtime (arts), la foundation pura (libs) y los engines de servidor (svrs), mas el flujo en runtime del trigger.</desc>
<defs>
<marker id="ar" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z" fill="var(--text-secondary,#5b6270)"/></marker>
<style>
.h1{font:700 25px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-primary,#20242c)}
.sub{font:13px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-secondary,#5b6270)}
.bt{font:700 16px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-primary,#20242c)}
.bs{font:11.5px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-secondary,#5b6270)}
.hd{font:700 12px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-secondary,#5b6270)}
.cap{font:11px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-primary,#20242c)}
.st{font:12px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-primary,#20242c)}
.stn{font:700 12px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-accent,#5b74e8)}
.lg{font:11px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-secondary,#5b6270)}
.fl{font:10px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-secondary,#5b6270)}
.ft{font:11.5px var(--font-voice,ui-sans-serif,system-ui,sans-serif);fill:var(--text-secondary,#5b6270)}
.arrow{stroke:var(--text-secondary,#5b6270);stroke-width:1.4;fill:none}
.layer{fill:color-mix(in srgb,var(--text-accent,#5b74e8) 9%,transparent);stroke:color-mix(in srgb,var(--text-accent,#5b74e8) 55%,transparent);stroke-width:1.5}
.root{fill:color-mix(in srgb,var(--text-accent,#5b74e8) 17%,transparent);stroke:var(--text-accent,#5b74e8);stroke-width:2}
.band{fill:color-mix(in srgb,var(--text-primary,#808890) 3.5%,transparent);stroke:color-mix(in srgb,var(--text-primary,#808890) 13%,transparent);stroke-width:1}
.rail{fill:color-mix(in srgb,var(--text-primary,#808890) 4%,transparent);stroke:color-mix(in srgb,var(--text-primary,#808890) 16%,transparent);stroke-width:1}
.chip{fill:color-mix(in srgb,var(--text-primary,#808890) 7%,transparent);stroke:color-mix(in srgb,var(--text-primary,#808890) 24%,transparent);stroke-width:1}
.chipk{fill:color-mix(in srgb,var(--text-accent,#5b74e8) 8%,transparent);stroke:color-mix(in srgb,var(--text-accent,#5b74e8) 60%,transparent);stroke-width:1.4}
</style>
</defs>
<text class="h1" x="36" y="40">active-uix · arquitectura</text>
<text class="sub" x="37" y="61">morfo declara el contrato — soma lo ejecuta, sema lo emite, eidos reacciona, active-uix compone</text>
<rect class="layer" x="836" y="18" width="13" height="13" rx="3"/><text class="lg" x="855" y="29">Capas UIX</text>
<rect class="chip" x="836" y="37" width="13" height="13" rx="3"/><text class="lg" x="855" y="48">Servicios · foundation · server</text>
<rect class="chipk" x="836" y="56" width="13" height="13" rx="3"/><text class="lg" x="855" y="67">arts consumido directo por las capas</text>
<rect class="root" x="36" y="76" width="620" height="44" rx="9"/>
<text class="bt" x="52" y="98">active-uix</text><text class="bs" x="148" y="98">composition root · createActiveUix / attachActiveUix</text>
<line class="arrow" x1="346" y1="121" x2="346" y2="139" marker-end="url(#ar)"/><text class="fl" x="356" y="135">compone</text>
<rect class="layer" x="36" y="142" width="300" height="54" rx="9"/>
<text class="bt" x="52" y="168">soma</text><text class="bs" x="52" y="185">headless · runtime.trigger()</text>
<rect class="layer" x="356" y="142" width="300" height="54" rx="9"/>
<text class="bt" x="372" y="168">eidos</text><text class="bs" x="372" y="185">CSS · recipes · tokens</text>
<line class="arrow" x1="346" y1="197" x2="346" y2="215" marker-end="url(#ar)"/><text class="fl" x="356" y="211">ejecuta · emite · reacciona</text>
<rect class="layer" x="36" y="218" width="620" height="48" rx="9"/>
<text class="bt" x="52" y="241">sema</text><text class="bs" x="118" y="241">motor semántico · canales sound + haptic · stamps data-event-*</text>
<line class="arrow" x1="346" y1="267" x2="346" y2="285" marker-end="url(#ar)"/><text class="fl" x="356" y="281">lee compileMorfo()</text>
<rect class="layer" x="36" y="288" width="620" height="48" rx="9"/>
<text class="bt" x="52" y="311">morfo</text><text class="bs" x="124" y="311">contrato / DNA · parts · data-attrs · ARIA · keyboard · eventos</text>
<rect class="rail" x="690" y="76" width="374" height="260" rx="9"/>
<text class="hd" x="708" y="100">FLUJO EN RUNTIME — trigger(evento)</text>
<text class="stn" x="708" y="131">1</text><text class="st" x="726" y="131">soma.runtime.trigger(evento)</text>
<text class="stn" x="708" y="159">2</text><text class="st" x="726" y="159">prewrite → escribe data-attrs</text>
<text class="stn" x="708" y="187">3</text><text class="st" x="726" y="187">sema.emit → sound · haptic</text>
<text class="stn" x="708" y="215">4</text><text class="st" x="726" y="215">stamp data-event-* (canal visual)</text>
<text class="stn" x="708" y="243">5</text><text class="st" x="726" y="243">handler → muta el estado</text>
<text class="stn" x="708" y="271">6</text><text class="st" x="726" y="271">effects → data-state · eidos reacciona</text>
<text class="lg" x="708" y="308">morfo permanece como contrato puro;</text>
<text class="lg" x="708" y="324">cada capa lo lee vía compileMorfo(morfo).</text>
<rect class="band" x="36" y="356" width="1028" height="126" rx="9"/>
<text class="hd" x="50" y="378">ARTS · servicios de runtime (engines)</text>
<text class="fl" x="312" y="378">borde acento = consumido directo por las capas (DOM · color · motion)</text>
<rect class="chipk" x="50" y="388" width="136" height="26" rx="6"/><text class="cap" x="118" y="405" text-anchor="middle">adom · DOM</text>
<rect class="chipk" x="194" y="388" width="136" height="26" rx="6"/><text class="cap" x="262" y="405" text-anchor="middle">color · EngineColor</text>
<rect class="chipk" x="338" y="388" width="136" height="26" rx="6"/><text class="cap" x="406" y="405" text-anchor="middle">motion · EngineMotion</text>
<rect class="chip" x="482" y="388" width="136" height="26" rx="6"/><text class="cap" x="550" y="405" text-anchor="middle">perf</text>
<rect class="chip" x="626" y="388" width="136" height="26" rx="6"/><text class="cap" x="694" y="405" text-anchor="middle">perm</text>
<rect class="chip" x="770" y="388" width="136" height="26" rx="6"/><text class="cap" x="838" y="405" text-anchor="middle">prefs</text>
<rect class="chip" x="914" y="388" width="136" height="26" rx="6"/><text class="cap" x="982" y="405" text-anchor="middle">format</text>
<rect class="chip" x="50" y="421" width="136" height="26" rx="6"/><text class="cap" x="118" y="438" text-anchor="middle">langs</text>
<rect class="chip" x="194" y="421" width="136" height="26" rx="6"/><text class="cap" x="262" y="438" text-anchor="middle">timer</text>
<rect class="chip" x="338" y="421" width="136" height="26" rx="6"/><text class="cap" x="406" y="438" text-anchor="middle">storage</text>
<rect class="chip" x="482" y="421" width="136" height="26" rx="6"/><text class="cap" x="550" y="438" text-anchor="middle">bus</text>
<rect class="chip" x="626" y="421" width="136" height="26" rx="6"/><text class="cap" x="694" y="438" text-anchor="middle">cache</text>
<rect class="chip" x="770" y="421" width="136" height="26" rx="6"/><text class="cap" x="838" y="438" text-anchor="middle">clipboard</text>
<rect class="chip" x="914" y="421" width="136" height="26" rx="6"/><text class="cap" x="982" y="438" text-anchor="middle">connection</text>
<rect class="chip" x="50" y="454" width="136" height="26" rx="6"/><text class="cap" x="118" y="471" text-anchor="middle">http</text>
<rect class="chip" x="194" y="454" width="136" height="26" rx="6"/><text class="cap" x="262" y="471" text-anchor="middle">auth</text>
<rect class="chip" x="338" y="454" width="136" height="26" rx="6"/><text class="cap" x="406" y="471" text-anchor="middle">session</text>
<rect class="chip" x="482" y="454" width="136" height="26" rx="6"/><text class="cap" x="550" y="471" text-anchor="middle">logger</text>
<rect class="chip" x="626" y="454" width="136" height="26" rx="6"/><text class="cap" x="694" y="471" text-anchor="middle">orca</text>
<rect class="chip" x="770" y="454" width="136" height="26" rx="6"/><text class="cap" x="838" y="471" text-anchor="middle">sium</text>
<rect class="chip" x="914" y="454" width="136" height="26" rx="6"/><text class="cap" x="982" y="471" text-anchor="middle">active-app</text>
<line class="arrow" x1="550" y1="356" x2="550" y2="338" marker-end="url(#ar)"/>
<text class="fl" x="560" y="351">las capas consumen los arts</text>
<rect class="band" x="36" y="496" width="1028" height="96" rx="9"/>
<text class="hd" x="50" y="516">LIBS · helpers puros, zero-dep (foundation)</text>
<rect class="chip" x="50" y="526" width="120" height="26" rx="6"/><text class="cap" x="110" y="543" text-anchor="middle">reactive</text>
<rect class="chip" x="177" y="526" width="120" height="26" rx="6"/><text class="cap" x="237" y="543" text-anchor="middle">days</text>
<rect class="chip" x="304" y="526" width="120" height="26" rx="6"/><text class="cap" x="364" y="543" text-anchor="middle">dom</text>
<rect class="chip" x="431" y="526" width="120" height="26" rx="6"/><text class="cap" x="491" y="543" text-anchor="middle">locale</text>
<rect class="chip" x="558" y="526" width="120" height="26" rx="6"/><text class="cap" x="618" y="543" text-anchor="middle">gradient</text>
<rect class="chip" x="685" y="526" width="120" height="26" rx="6"/><text class="cap" x="745" y="543" text-anchor="middle">sound</text>
<rect class="chip" x="812" y="526" width="120" height="26" rx="6"/><text class="cap" x="872" y="543" text-anchor="middle">haptic</text>
<rect class="chip" x="939" y="526" width="120" height="26" rx="6"/><text class="cap" x="999" y="543" text-anchor="middle">selection</text>
<rect class="chip" x="50" y="558" width="120" height="26" rx="6"/><text class="cap" x="110" y="575" text-anchor="middle">forms</text>
<rect class="chip" x="177" y="558" width="120" height="26" rx="6"/><text class="cap" x="237" y="575" text-anchor="middle">plots</text>
<rect class="chip" x="304" y="558" width="120" height="26" rx="6"/><text class="cap" x="364" y="575" text-anchor="middle">qr</text>
<rect class="chip" x="431" y="558" width="120" height="26" rx="6"/><text class="cap" x="491" y="575" text-anchor="middle">theme</text>
<rect class="chip" x="558" y="558" width="120" height="26" rx="6"/><text class="cap" x="618" y="575" text-anchor="middle">direction</text>
<rect class="chip" x="685" y="558" width="120" height="26" rx="6"/><text class="cap" x="745" y="575" text-anchor="middle">density</text>
<rect class="chip" x="812" y="558" width="120" height="26" rx="6"/><text class="cap" x="872" y="575" text-anchor="middle">numbers</text>
<rect class="chip" x="939" y="558" width="120" height="26" rx="6"/><text class="cap" x="999" y="575" text-anchor="middle">+ 25 más</text>
<line class="arrow" x1="120" y1="496" x2="120" y2="482" marker-end="url(#ar)"/>
<text class="fl" x="130" y="491">arts se construyen sobre libs</text>
<rect class="band" x="36" y="606" width="1028" height="56" rx="9"/>
<text class="hd" x="50" y="626">SVRS · engines server-authoritative</text>
<rect class="chip" x="430" y="624" width="120" height="26" rx="6"/><text class="cap" x="490" y="641" text-anchor="middle">auth</text>
<rect class="chip" x="557" y="624" width="120" height="26" rx="6"/><text class="cap" x="617" y="641" text-anchor="middle">cache</text>
<rect class="chip" x="684" y="624" width="120" height="26" rx="6"/><text class="cap" x="744" y="641" text-anchor="middle">perm</text>
<text class="ft" x="36" y="690">Reglas clave: morfo es TS puro (sin runes/DOM) · sema no conoce el DOM · soma usa $adom (no $libs/dom) · eidos lee langs/format/prefs vía ActiveEidos.require()</text>
<text class="ft" x="36" y="708">motion alimenta soma + eidos · color materializa el theming en eidos · adom es el único surface DOM de las capas</text>
</svg>

Powered by TurnKey Linux.