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.
51 lines
1.9 KiB
51 lines
1.9 KiB
<script lang="ts">
|
|
/**
|
|
* UIX docs landing — `/uix` overview page. Hero + module summary.
|
|
*/
|
|
</script>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<div data-uix-eyebrow>UIX · Framework</div>
|
|
<h1 data-uix-page-title>The contract-first UI framework for Svelte 5.</h1>
|
|
<p data-uix-page-lede>
|
|
Four layers, one source of truth. Morfo declares the contract. Soma
|
|
executes the behaviour. Sema fires the perceptual signature. Eidos
|
|
paints the surface. Components compile from a single declarative
|
|
spec — no leaky implementations, no drift between code and CSS.
|
|
</p>
|
|
|
|
<div data-uix-page-meta>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>version</span>0.1</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>components</span>10</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>license</span>MIT</span>
|
|
</div>
|
|
|
|
<section data-uix-prose>
|
|
<h2>What's in the box</h2>
|
|
<p>
|
|
Each layer owns one concern, and each concern is independently
|
|
testable. The morfo is plain TypeScript — no Svelte runtime
|
|
required to introspect a component's parts, ARIA contract, or
|
|
keyboard map. Soma reads that contract and wires up the behaviour
|
|
(focus management, dismissal, drag, presence). Sema turns the
|
|
declarative events into perceptual signals (sound, haptic). Eidos
|
|
styles via <code>data-*</code> selectors that the morfo formally
|
|
declares — never an off-contract attribute.
|
|
</p>
|
|
|
|
<h3>Why four layers?</h3>
|
|
<p>
|
|
Most component libraries collapse contract + behaviour + style into
|
|
one file. That works until you need to swap any one of them — a
|
|
different visual theme, a custom interaction, a parallel set of
|
|
perceptual cues. UIX keeps them separate so each can evolve at its
|
|
own cadence.
|
|
</p>
|
|
|
|
<p>
|
|
Browse the foundations to learn the vocabulary, or jump into the
|
|
components to see the framework in action.
|
|
</p>
|
|
</section>
|
|
</div>
|