registry:ui · Layout
pattern-login — ssh user@host, the card
The `ssh user@host` login card — a composition product, not a primitive: user/host lanes are plain Input (innerInlineStart carries the user@ / --host= glyphs), the passphrase reveal rides the Input's own eye (hard F1 prerequisite — no pattern-local fallback), the OTP second-factor screen rides input-otp (joined form value; incomplete codes submit empty), the submit is a PressButton, and the footer is the copyable npx bootstrap line — the terminal idiom's magic-link analog.
pattern-login
The login card: the echo line composes the live user@host as you type, the passphrase field carries the Input's own reveal eye (starts hidden — the value is never revealed by default), and the footer is the copyable bootstrap command — the terminal idiom's magic link.
<script lang="ts">
import PatternLogin from '@ui/pattern-login.svelte';
import PatternLoginOtp from '@ui/pattern-login/pattern-login-otp.svelte';
</script>
<PatternLogin host="deploy.jixoai.dev" command="npx jixoai-ui init"
onsignin={() => gotoOtpStep()} />
<!-- the second factor: the joined code submits through onverify -->
<PatternLoginOtp host="deploy.jixoai.dev" length={6}
hint="code sent to operator@deploy.jixoai.dev"
onverify={(code) => verify(code)} />pattern-login — the 2FA variant
The second-factor screen: input-otp owns the slot mechanics (auto-advance, paste distribution, the joined form value — incomplete codes submit empty, never a partial lie), the verify step is a press-button, and the same card law carries the frame.
<script lang="ts">
import PatternLogin from '@ui/pattern-login.svelte';
import PatternLoginOtp from '@ui/pattern-login/pattern-login-otp.svelte';
</script>
<PatternLogin host="deploy.jixoai.dev" command="npx jixoai-ui init"
onsignin={() => gotoOtpStep()} />
<!-- the second factor: the joined code submits through onverify -->
<PatternLoginOtp host="deploy.jixoai.dev" length={6}
hint="code sent to operator@deploy.jixoai.dev"
onverify={(code) => verify(code)} />usage
Usage
Two screens, one story: the card signs in, the OTP screen verifies. Pair them by swapping on onsignin.
<script lang="ts">
import PatternLogin from '@ui/pattern-login.svelte';
import PatternLoginOtp from '@ui/pattern-login/pattern-login-otp.svelte';
</script>
<PatternLogin host="deploy.jixoai.dev" command="npx jixoai-ui init"
onsignin={() => gotoOtpStep()} />
<!-- the second factor: the joined code submits through onverify -->
<PatternLoginOtp host="deploy.jixoai.dev" length={6}
hint="code sent to operator@deploy.jixoai.dev"
onverify={(code) => verify(code)} />a11y
Accessibility
Every lane is a labeled native input; the echo line is decorative (aria-hidden) so nothing is announced twice; the reveal is the Input's own aria-pressed toggle.
Keyboard
| Key | Action |
|---|---|
| Tab | Walks user → host → passphrase eye → connect → footer copy in reading order |
| Enter / Space | Activates the focused control — the eye flips the type, connect submits, copy hits the clipboard |
ARIA
| Attribute | Value | Description |
|---|---|---|
| label[for] | every lane | user / host / passphrase each render a real label wired to the native input |
| aria-hidden | true | On the decorative ssh echo line — the typed fields are the truth |
| aria-pressed | the input reveal | Mirrors the passphrase visibility state (starts false — hidden) |
| error lanes | Input error prop | Pass an error string to any lane: aria-invalid + aria-describedby + the dashed ! message line, all the Input's own |
axes
Universal props
The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. FIRST-TIME contract, all no-own: a composition product — the size axis scales the card root, the Input/PressButton lanes ride the ambient chain (吃也供).
PatternLogin / PatternLoginOtp · universal props
<PatternLogin size={18} density="small">…</PatternLogin>api
API
PatternLogin props — plus PatternLoginOtp (the named export) below.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| host | string | 'jixoai.dev' | The host the card addresses (echo line + host lane value). |
| user | string | '' | The user lane; bindable — the echo line mirrors it live. |
| password | string | '' | The passphrase lane; bindable. The reveal is the Input's own (default on). |
| command | string | 'npx jixoai-ui init' | The bootstrap footer command — copy payload. |
| onsignin | () => void | — | Fires on submit; the card never navigates on its own. |
| children | Snippet | — | Extra lanes between the passphrase and the submit. |
| class | string | '' | Class passthrough to the card root. |
| PatternLoginOtp: host | string | 'jixoai.dev' | The host being verified (hint + echo). |
| PatternLoginOtp: length | number | 6 | Slot count of the one-time code. |
| PatternLoginOtp: value | string | '' | The joined code; bindable. |
| PatternLoginOtp: hint | string | '' | One-line context under the slots (where the code was sent). |
| PatternLoginOtp: onverify | (code: string) => void | — | Fires with the joined code on submit. |
Universal props
| Property | Type | Default | Description |
|---|---|---|---|
| size | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | the base scale — root font-size; parts size in em |
| shape | 'round' | 'scoop' | 'bevel' | 'notch' | 'square' | 'squircle' | 'auto' | 'auto' · ambient scope | corner geometry (CSS corner-shape; §14 degrade table) |
| radius | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | corner size; auto = the concentric broadcast (§3) |
| density | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | spacing/leading scale over the kernel channels (§4) |
| color | 'primary' | 'secondary' | 'error' | 'warn' | 'success' | 'info' | 'auto' | number | string | 'auto' · ambient scope | the hue axis of the fixed oklch primary system (§5) |
| theme | 'light' | 'dark' | 'system' | 'auto' | 'auto' · ambient scope | light/dark profile; system = the JS-mutable global (§6) |
| elevation | 'level-1' | 'level0' | 'level1' | 'level2' | 'level3' | 'level4' | 'level5' | 'auto' | number | 'auto' · ambient scope | official M3 levels over the surface ladder (§7) |
| motion | 'reduced' | 'subtle' | 'normal' | 'expressive' | 'auto' | number | 'auto' · ambient scope | intensity across the motion kernels (§8) |