anentrypoint-design 0.0.414 → 0.0.416

package/dist/ui_kits/settings/app.js

@@ -1,6 +1,7 @@
 import * as webjsx from 'webjsx';
 import { Topbar, Crumb, Status, Side, AppShell, Panel, Heading, Lede, Chip, Btn, Row } from 'ds/components.js';
 import { mountKit } from 'ds/bootstrap.js';
+import { shortUid } from 'ds/uid.js';
 const h = webjsx.createElement;
 
 const root = document.getElementById('root');
@@ -8,57 +9,131 @@ const root = document.getElementById('root');
 const state = {
     section: 'profile',
     name: 'lanmower',
-    email: 'almagestfraternite@gmail.com',
+    email: 'almagestfraternite@247420.xyz',
     handle: '@247420',
     bio: 'creative department of the internet. always open. always a little high.',
     theme: 'auto',
     motion: true,
     notify: { mentions: true, releases: true, marketing: false },
-    api_key: 'sk-247420-•••••••-c2a',
-    dirty: false
+    api_key: 'sk-247420-*******-c2a',
+    dirty: false,
+    lastSaved: null,
+    draft: null,
+    showConfirmDiscard: false,
+    // Which state the notifications surface renders in. Toggled from the
+    // sidebar so loading / empty / error are reachable here, not just on a
+    // real backend failure.
+    phase: 'ready'
 };
 
 const sections = [
-    { id: 'profile',   label: 'profile',      glyph: '◆' },
-    { id: 'theme',     label: 'theme',        glyph: '◐' },
-    { id: 'notify',    label: 'notifications',glyph: '◇' },
+    { id: 'profile',   label: 'profile',      glyph: '@' },
+    { id: 'theme',     label: 'theme',        glyph: '*' },
+    { id: 'notify',    label: 'notifications',glyph: '~' },
     { id: 'api',       label: 'api keys',     glyph: '⌘' },
     { id: 'danger',    label: 'danger zone',  glyph: '!' }
 ];
 
+// Draft management: auto-save to localStorage on every dirty change
+function saveDraft() {
+    const draft = {
+        name: state.name,
+        email: state.email,
+        handle: state.handle,
+        bio: state.bio,
+        theme: state.theme,
+        motion: state.motion,
+        notify: { ...state.notify },
+        timestamp: Date.now()
+    };
+    localStorage.setItem('settings-draft', JSON.stringify(draft));
+    state.draft = draft;
+}
+
+function loadDraft() {
+    const stored = localStorage.getItem('settings-draft');
+    if (stored) {
+        try {
+            const draft = JSON.parse(stored);
+            state.draft = draft;
+            return draft;
+        } catch (e) {
+            return null;
+        }
+    }
+    return null;
+}
+
+function restoreDraft(draft) {
+    if (draft) {
+        state.name = draft.name;
+        state.email = draft.email;
+        state.handle = draft.handle;
+        state.bio = draft.bio;
+        state.theme = draft.theme;
+        state.motion = draft.motion;
+        state.notify = { ...draft.notify };
+    }
+}
+
+function clearDraft() {
+    localStorage.removeItem('settings-draft');
+    state.draft = null;
+}
+
+function DiscardConfirmModal({ onConfirm, onCancel }) {
+    const draft = state.draft;
+    const timestamp = draft?.timestamp ? new Date(draft.timestamp).toLocaleString() : 'unknown time';
+    return h('div', { class: 'ds-modal-backdrop', onclick: (e) => { if (e.target === e.currentTarget) onCancel(); } },
+        h('div', { class: 'ds-modal ds-modal-small ds-settings-modal' },
+            h('div', { class: 'ds-modal-head' }, 'Discard unsaved changes?'),
+            h('div', { class: 'ds-modal-body ds-modal-body-form' },
+                h('p', { class: 'ds-modal-note' }, 'You have unsaved changes. A draft was saved at ' + timestamp + '.'),
+                h('div', { class: 'ds-draft-preview' },
+                    'Name: ' + state.name, h('br'), 'Email: ' + state.email, h('br'),
+                    draft && draft.theme && draft.theme !== 'auto' ? ['Theme: ' + draft.theme, h('br')] : null
+                ),
+                h('div', { class: 'ds-modal-actions' },
+                    h('button', { class: 'btn', onclick: () => { restoreDraft(draft); onCancel(); } }, 'Restore draft'),
+                    h('button', { class: 'btn btn-primary danger ds-btn-warn', onclick: onConfirm }, 'Discard & continue')
+                )
+            )
+        )
+    );
+}
+
 function Field({ label, hint, children }) {
-    return h('label', { class: 'ds-field', style: 'display:flex;flex-direction:column;gap:6px;margin:10px 0' },
-        h('span', { style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-text-3)' }, label),
+    return h('label', { class: 'ds-field ds-field-block' },
+        h('span', { class: 'ds-field-eyebrow' }, label),
         children,
-        hint ? h('span', { style: 'font-size:12px;color:var(--panel-text-2)' }, hint) : null
+        hint ? h('span', { class: 'ds-hint-sm' }, hint) : null
     );
 }
 
 function Toggle({ on, onChange, label }) {
     return h('button', {
-        class: on ? 'btn btn-primary' : 'btn',
-        style: 'min-width:78px',
+        class: (on ? 'btn btn-primary' : 'btn') + ' ds-toggle-btn',
         onclick: () => { onChange(!on); state.dirty = true; kit.render(); }
-    }, on ? '● on' : '○ off', label ? h('span', { style: 'margin-left:8px;color:inherit;opacity:0.7' }, label) : null);
+    }, on ? '[x] on' : '[ ] off', label ? h('span', { class: 'ds-toggle-label' }, label) : null);
 }
 
 function Profile() {
-    return Panel({ title: 'profile', style: 'margin:8px 0', children: h('div', { style: 'padding:14px 18px' },
+    return Panel({ title: 'profile', class: 'ds-panel-gap', children: h('div', { class: 'ds-settings-body' },
         Field({ label: 'name', hint: 'shown on commits and PRs.', children:
-            h('input', { class: 'input', value: state.name, oninput: (e) => { state.name = e.target.value; state.dirty = true; } }) }),
+            h('input', { class: 'input', value: state.name, oninput: (e) => { state.name = e.target.value; state.dirty = true; saveDraft(); kit.render(); } }) }),
         Field({ label: 'email', hint: 'used for git identity. never mailed.', children:
-            h('input', { class: 'input', type: 'email', value: state.email, oninput: (e) => { state.email = e.target.value; state.dirty = true; } }) }),
+            h('input', { class: 'input', type: 'email', value: state.email, oninput: (e) => { state.email = e.target.value; state.dirty = true; saveDraft(); kit.render(); } }) }),
         Field({ label: 'handle', children:
             h('input', { class: 'input', value: state.handle, oninput: (e) => { state.handle = e.target.value; state.dirty = true; } }) }),
         Field({ label: 'bio', hint: 'one sentence. plain text.', children:
-            h('textarea', { class: 'input', rows: 3, oninput: (e) => { state.bio = e.target.value; state.dirty = true; } }, state.bio) })
+            h('textarea', { class: 'input', rows: 3, oninput: (e) => { state.bio = e.target.value; state.dirty = true; saveDraft(); kit.render(); } }, state.bio) })
     ) });
 }
 
 function Theme() {
-    const opts = [['auto', '◐ auto'], ['light', '○ light'], ['dark', '● dark']];
-    return Panel({ title: 'theme', style: 'margin:8px 0', children: h('div', { style: 'padding:14px 18px' },
-        Field({ label: 'mode', children: h('div', { style: 'display:flex;gap:6px' },
+    const opts = [['auto', 'auto'], ['light', 'light'], ['dark', 'dark']];
+    return Panel({ title: 'theme', class: 'ds-panel-gap', children: h('div', { class: 'ds-settings-body' },
+        Field({ label: 'mode', children: h('div', { class: 'ds-btn-row ds-btn-row-tight' },
             ...opts.map(([k, l]) => h('button', { key: k,
                 class: state.theme === k ? 'btn btn-primary' : 'btn',
                 onclick: () => { state.theme = k; state.dirty = true; kit.render(); } }, l))
@@ -68,31 +143,72 @@ function Theme() {
     ) });
 }
 
+const PHASES = ['ready', 'loading', 'empty', 'error'];
+
+// Row-shaped shimmer for preferences still being fetched. Reuses
+// .ds-event-row-skeleton + .ds-skel* (app-shell/files.css) — Row() renders the
+// same title / sub / trailing-control rhythm.
+function PrefsSkeleton() {
+    return h('div', {},
+        ...Array.from({ length: 3 }, (_, i) => h('div', { key: 'sk' + i, class: 'ds-event-row-skeleton' },
+            h('span', { class: 'ds-skel ds-skel-title' }),
+            h('span', { class: 'ds-skel ds-skel-meta' })
+        ))
+    );
+}
+
+function PrefsEmpty() {
+    return h('div', { class: 'ds-empty-state' },
+        h('div', { class: 'ds-empty-state-glyph' }, '[ ]'),
+        h('p', { class: 'ds-empty-state-msg' }, 'no notification channels connected'),
+        h('p', { class: 'ds-empty-state-hint' }, 'mentions, releases and product updates need somewhere to go. verify an email or add a webhook and the toggles for it appear here.')
+    );
+}
+
+function PrefsError() {
+    return h('div', { class: 'ds-alert ds-alert-error' },
+        h('span', { class: 'ds-alert-icon' }, '!'),
+        h('div', { class: 'ds-alert-content' },
+            h('div', { class: 'ds-alert-title' }, 'preferences did not save'),
+            h('div', { class: 'ds-alert-message' }, 'the server holds a newer copy of these toggles than this tab does, so saving would overwrite a change made elsewhere. reloading pulls the current values and keeps your draft alongside them.'),
+            h('div', { class: 'ds-alert-retry' },
+                h('button', { class: 'btn', onclick: () => { state.phase = 'ready'; kit.render(); } }, 'reload preferences')
+            )
+        )
+    );
+}
+
 function Notify() {
-    return Panel({ title: 'notifications', style: 'margin:8px 0', children: [
-        Row({ key: 'n1', code: '◆', title: 'mentions',  sub: 'when someone @s you',          meta: h('span', {}, Toggle({ on: state.notify.mentions, onChange: (v) => state.notify.mentions = v })) }),
-        Row({ key: 'n2', code: '◇', title: 'releases',  sub: 'on every tagged build',        meta: h('span', {}, Toggle({ on: state.notify.releases, onChange: (v) => state.notify.releases = v })) }),
-        Row({ key: 'n3', code: '◇', title: 'marketing', sub: 'occasional product updates',   meta: h('span', {}, Toggle({ on: state.notify.marketing, onChange: (v) => state.notify.marketing = v })) })
+    if (state.phase === 'loading') return Panel({ title: 'notifications', class: 'ds-panel-gap', children: PrefsSkeleton() });
+    if (state.phase === 'error') return Panel({ title: 'notifications', class: 'ds-panel-gap', children: PrefsError() });
+    if (state.phase === 'empty') return Panel({ title: 'notifications', class: 'ds-panel-gap', children: PrefsEmpty() });
+    // No `code` — these are settings, not an indexed list. Carrying a one-glyph
+    // code would reserve the row's 12ch leading gutter for a single character
+    // and strand the label far right of its own panel edge.
+    return Panel({ title: 'notifications', class: 'ds-panel-gap', children: [
+        Row({ key: 'n1', title: 'mentions',  sub: 'when someone @s you',        meta: Toggle({ on: state.notify.mentions,  onChange: (v) => state.notify.mentions = v }) }),
+        Row({ key: 'n2', title: 'releases',  sub: 'on every tagged build',      meta: Toggle({ on: state.notify.releases,  onChange: (v) => state.notify.releases = v }) }),
+        Row({ key: 'n3', title: 'marketing', sub: 'occasional product updates', meta: Toggle({ on: state.notify.marketing, onChange: (v) => state.notify.marketing = v }) })
     ] });
 }
 
 function ApiKeys() {
-    return Panel({ title: 'api keys', count: 1, style: 'margin:8px 0', children: h('div', { style: 'padding:14px 18px' },
+    return Panel({ title: 'api keys', count: 1, class: 'ds-panel-gap', children: h('div', { class: 'ds-settings-body' },
         Field({ label: 'production key', hint: 'rotate quarterly.', children:
-            h('div', { style: 'display:flex;gap:8px' },
-                h('input', { class: 'input', value: state.api_key, readonly: true, style: 'flex:1;font-family:var(--ff-mono)' }),
+            h('div', { class: 'ds-btn-row' },
+                h('input', { class: 'input ds-key-input', value: state.api_key, readonly: true }),
                 h('button', { class: 'btn', onclick: () => { navigator.clipboard?.writeText(state.api_key); } }, 'copy'),
-                h('button', { class: 'btn', onclick: () => { state.api_key = 'sk-247420-' + Math.random().toString(36).slice(2, 10) + '-' + Math.random().toString(36).slice(2, 5); state.dirty = true; kit.render(); } }, 'rotate')
+                h('button', { class: 'btn', onclick: () => { state.api_key = 'sk-247420-' + shortUid(8) + '-' + shortUid(5); state.dirty = true; kit.render(); } }, 'rotate')
             ) })
     ) });
 }
 
 function Danger() {
-    return Panel({ title: 'danger zone', kind: 'danger', style: 'margin:8px 0', children: h('div', { style: 'padding:14px 18px;display:flex;flex-direction:column;gap:10px' },
-        h('p', { style: 'margin:0;color:var(--panel-text-2)' }, 'these actions are permanent.'),
-        h('div', { style: 'display:flex;gap:8px' },
-            h('button', { class: 'btn', style: 'color:var(--mascot,#e0a200)' }, 'export account'),
-            h('button', { class: 'btn', style: 'color:var(--warn)' }, 'delete account')
+    return Panel({ title: 'danger zone', kind: 'danger', class: 'ds-panel-gap', children: h('div', { class: 'ds-settings-body ds-settings-body-stack' },
+        h('p', { class: 'ds-note-quiet' }, 'these actions are permanent.'),
+        h('div', { class: 'ds-btn-row' },
+            h('button', { class: 'btn ds-btn-mascot' }, 'export account'),
+            h('button', { class: 'btn ds-btn-warn' }, 'delete account')
         )
     ) });
 }
@@ -100,7 +216,7 @@ function Danger() {
 function App() {
     const view = { profile: Profile, theme: Theme, notify: Notify, api: ApiKeys, danger: Danger }[state.section]();
     return AppShell({
-        topbar: Topbar({ brand: '247420', leaf: 'settings', items: [['index', '../../'], ['source ↗', 'https://github.com/AnEntrypoint/design']] }),
+        topbar: Topbar({ brand: '247420', leaf: 'settings', items: [['index', '../../'], ['source ->', 'https://github.com/AnEntrypoint/design']] }),
         crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'settings · ' + state.section }),
         side: Side({
             sections: [
@@ -108,23 +224,34 @@ function App() {
                     glyph: s.glyph, label: s.label,
                     href: '#' + s.id, active: state.section === s.id, key: s.id,
                     onClick: (e) => { e.preventDefault(); state.section = s.id; kit.render(); }
+                })) },
+                // Reachable state switcher — applies to the notifications
+                // section, this kit's list-shaped data surface.
+                { group: 'prefs state', items: PHASES.map((p) => ({
+                    glyph: h('span', { class: state.phase === p ? 'ds-dot ds-dot-on' : 'ds-dot ds-dot-off' }),
+                    label: p, key: 'ph-' + p, active: state.phase === p,
+                    onClick: (e) => { e.preventDefault(); state.phase = p; state.section = 'notify'; kit.render(); }
                 })) }
             ]
         }),
         main: [
-            h('div', { class: 'ds-section', style: 'padding:8px' },
+            h('div', { class: 'ds-app-surface ds-settings-main' },
                 Heading({ level: 1, children: 'settings' }),
                 Lede({ children: 'every input primitive in one surface — fields, toggles, segmented buttons, danger panel, save bar.' }),
                 view,
-                state.dirty ? h('div', { style: 'position:sticky;bottom:8px;display:flex;justify-content:flex-end;gap:8px;padding:10px;background:var(--panel-2);border-radius:10px;margin:8px 0' },
-                    h('span', { style: 'flex:1;color:var(--panel-text-2)' }, 'unsaved changes'),
-                    h('button', { class: 'btn', onclick: () => { state.dirty = false; kit.render(); } }, 'discard'),
-                    h('button', { class: 'btn btn-primary', onclick: () => { state.dirty = false; kit.render(); } }, 'save')
+                state.showConfirmDiscard ? DiscardConfirmModal({
+                    onCancel: () => { state.showConfirmDiscard = false; kit.render(); },
+                    onConfirm: () => { state.dirty = false; clearDraft(); state.showConfirmDiscard = false; kit.render(); }
+                }) : null,
+                state.dirty ? h('div', { class: 'ds-savebar' },
+                    h('span', { class: 'ds-savebar-note' }, 'unsaved changes · draft auto-saved'),
+                    h('button', { class: 'btn', onclick: () => { state.showConfirmDiscard = true; kit.render(); } }, 'discard'),
+                    h('button', { class: 'btn btn-primary', onclick: () => { saveDraft(); state.dirty = false; state.lastSaved = Date.now(); kit.render(); } }, 'save')
                 ) : null
             )
         ],
         status: Status({
-            left: ['settings', '• ' + state.section, state.dirty ? '• dirty' : '• saved'],
+            left: ['settings', '- ' + state.section, state.dirty ? '- dirty' : '- saved', '- prefs ' + state.phase],
             right: ['247420 / mmxxvi']
         })
     });

package/dist/ui_kits/signin/app.js

@@ -1,74 +1,196 @@
 import * as webjsx from 'webjsx';
-import { Topbar, Crumb, Status, AppShell, Panel, Heading, Lede, Chip } from 'ds/components.js';
+import { Topbar, Crumb, Status, AppShell, Panel, Heading, Lede, Chip, Icon, Divider } from 'ds/components.js';
 import { mountKit } from 'ds/bootstrap.js';
+import { shortUid } from 'ds/uid.js';
 const h = webjsx.createElement;
 
 const root = document.getElementById('root');
-const state = { mode: 'signin', email: '', password: '', remember: true, sent: false, error: '' };
+const state = { mode: 'signin', email: '', password: '', remember: true, sent: false, error: '', loading: null, demoUrl: '' };
 
-function setMode(m) { state.mode = m; state.sent = false; state.error = ''; kit.render(); }
+function setMode(m) { state.mode = m; state.sent = false; state.error = ''; state.loading = null; state.demoUrl = ''; kit.render(); }
 
 function submit(e) {
     e.preventDefault();
-    if (!state.email.includes('@')) { state.error = 'enter a real email.'; kit.render(); return; }
-    if (state.mode !== 'magic' && state.password.length < 6) { state.error = 'password must be at least 6 characters.'; kit.render(); return; }
+    // Name the problem and the fix, in the surface's terse lowercase voice.
+    // "enter a real email" told the user they were wrong without saying what
+    // would be right.
+    if (!state.email.trim()) { state.error = 'email is empty — enter the address on your account.'; kit.render(); return; }
+    if (!state.email.includes('@')) { state.error = 'that address has no @ — check for a typo.'; kit.render(); return; }
+    if (state.mode !== 'magic' && state.mode !== 'reset' && state.password.length < 6) {
+        state.error = 'password is too short — 6 characters minimum.'; kit.render(); return;
+    }
     state.error = '';
     state.sent = true;
     kit.render();
 }
 
-function Provider({ glyph, label, onClick }) {
+function Provider({ glyph, label, provider }) {
+    const isLoading = state.loading === provider;
     return h('button', {
-        class: 'btn',
-        style: 'flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px',
-        onclick: onClick || ((e) => { e.preventDefault(); state.error = '(stub) provider not wired'; kit.render(); })
+        class: 'btn ds-auth-provider-btn' + (isLoading ? ' ds-auth-provider-btn--loading' : ''),
+        onclick: (e) => {
+            e.preventDefault();
+            if (isLoading) return;
+            state.loading = provider;
+            state.error = '';
+            kit.render();
+            startOAuthFlow(provider);
+        },
+        disabled: isLoading
     },
-        h('span', { style: 'font-family:var(--ff-mono);color:var(--panel-text-3)' }, glyph),
-        h('span', {}, label)
+        h('span', { class: 'ds-auth-provider-glyph' + (isLoading ? ' ds-spin' : '') }, isLoading ? Icon('refresh') : glyph),
+        h('span', {}, isLoading ? 'redirecting...' : label)
     );
 }
 
+// Config comes from a plain global, NOT import.meta.env. There is no Vite in
+// this repo, so `import.meta.env` is undefined in the browser and reading a
+// property off it THROWS — and because the config object was built before the
+// try below, that throw escaped the catch entirely and left every provider
+// button stuck on "redirecting..." forever with no error shown. A host app that
+// wants real credentials sets globalThis.__DS_AUTH before mounting.
+const AUTH_ENV = (typeof globalThis !== 'undefined' && globalThis.__DS_AUTH) || {};
+
+function startOAuthFlow(provider) {
+    const config = {
+        github: {
+            clientId: AUTH_ENV.githubClientId || 'demo-github-client-id',
+            redirectUri: window.location.origin + '/auth/callback/github'
+        },
+        google: {
+            clientId: AUTH_ENV.googleClientId || 'demo-google-client-id',
+            redirectUri: window.location.origin + '/auth/callback/google'
+        },
+        sso: {
+            endpoint: AUTH_ENV.ssoEndpoint || 'https://sso.247420.xyz/authorize',
+            redirectUri: window.location.origin + '/auth/callback/sso'
+        }
+    }[provider];
+
+    if (!config) {
+        state.error = 'provider not configured';
+        state.loading = null;
+        kit.render();
+        return;
+    }
+
+    try {
+        if (provider === 'github') {
+            const scopes = ['user:email', 'read:user'].join(' ');
+            const params = new URLSearchParams({
+                client_id: config.clientId,
+                redirect_uri: config.redirectUri,
+                scope: scopes,
+                state: generateState()
+            });
+            go('https://github.com/login/oauth/authorize?' + params);
+        } else if (provider === 'google') {
+            const scopes = ['openid', 'email', 'profile'].join(' ');
+            const params = new URLSearchParams({
+                client_id: config.clientId,
+                redirect_uri: config.redirectUri,
+                response_type: 'code',
+                scope: scopes,
+                state: generateState()
+            });
+            go('https://accounts.google.com/o/oauth2/v2/auth?' + params);
+        } else if (provider === 'sso') {
+            const params = new URLSearchParams({
+                redirect_uri: config.redirectUri,
+                state: generateState()
+            });
+            go(config.endpoint + '?' + params);
+        }
+    } catch (err) {
+        state.error = 'oauth flow failed: ' + (err.message || 'unknown error');
+        state.loading = null;
+        kit.render();
+    }
+}
+
+// A specimen must not actually leave the specimen. Without real credentials the
+// navigation above would send a visitor to github.com with the literal client id
+// "demo-github-client-id" and strand them on a provider error page, so unless a
+// host app supplied real config we show the exact URL that WOULD be opened and
+// stay put. That is more useful than a redirect anyway: it makes the request
+// this component builds inspectable, which is what a specimen is for.
+function isDemoConfig() {
+    return !AUTH_ENV.githubClientId && !AUTH_ENV.googleClientId && !AUTH_ENV.ssoEndpoint;
+}
+
+function go(url) {
+    if (isDemoConfig()) {
+        state.loading = null;
+        state.demoUrl = url;
+        kit.render();
+        return;
+    }
+    window.location.href = url;
+}
+
+function generateState() {
+    return btoa(JSON.stringify({
+        nonce: shortUid(11),
+        timestamp: Date.now()
+    }));
+}
+
 function Form() {
     if (state.sent) {
-        return h('div', { style: 'padding:18px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center' },
-            h('div', { style: 'font-size:32px;color:var(--panel-accent)' }, '✓'),
-            h('p', { style: 'margin:0;font-weight:600' }, state.mode === 'magic' ? 'check your email' : (state.mode === 'reset' ? 'reset link sent' : 'welcome back')),
-            h('p', { style: 'margin:0;color:var(--panel-text-2)' }, state.mode === 'magic' ? 'we sent a sign-in link to ' + state.email : (state.mode === 'reset' ? 'follow the link to set a new password.' : 'redirecting…'))
+        // A confirmation with no way back is a trap: mistype the address and
+        // the only recovery was a page reload. Every sent state that waits on
+        // an email now offers the correction path.
+        const waiting = state.mode === 'magic' || state.mode === 'reset';
+        return h('div', { class: 'ds-auth-form ds-auth-sent' },
+            h('div', { class: 'ds-auth-sent-glyph' }, '[x]'),
+            h('p', { class: 'ds-auth-sent-title' }, state.mode === 'magic' ? 'check your email' : (state.mode === 'reset' ? 'reset link sent' : 'welcome back')),
+            h('p', { class: 'ds-auth-sent-sub' }, state.mode === 'magic'
+                ? 'we sent a sign-in link to ' + state.email + '. it expires in 15 minutes.'
+                : (state.mode === 'reset' ? 'we sent a reset link to ' + state.email + '. follow it to set a new password.' : 'signed in. taking you to the index.')),
+            waiting ? h('button', {
+                class: 'btn',
+                onclick: (e) => { e.preventDefault(); state.sent = false; kit.render(); }
+            }, 'use a different email') : null
         );
     }
-    return h('form', { onsubmit: submit, style: 'padding:18px;display:flex;flex-direction:column;gap:10px' },
-        h('label', { style: 'display:flex;flex-direction:column;gap:4px' },
-            h('span', { style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-text-3)' }, 'email'),
+    return h('form', { onsubmit: submit, class: 'ds-auth-form' },
+        h('label', { class: 'ds-auth-field' },
+            h('span', { class: 'ds-auth-field-label' }, 'email'),
             h('input', { class: 'input', type: 'email', placeholder: 'you@247420.xyz', value: state.email, autocomplete: 'email', oninput: (e) => { state.email = e.target.value; } })
         ),
-        state.mode !== 'magic' && state.mode !== 'reset' ? h('label', { style: 'display:flex;flex-direction:column;gap:4px' },
-            h('span', { style: 'font-family:var(--ff-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--panel-text-3)' }, 'password'),
-            h('input', { class: 'input', type: 'password', placeholder: '••••••••', value: state.password, autocomplete: state.mode === 'signup' ? 'new-password' : 'current-password', oninput: (e) => { state.password = e.target.value; } })
+        state.mode !== 'magic' && state.mode !== 'reset' ? h('label', { class: 'ds-auth-field' },
+            h('span', { class: 'ds-auth-field-label' }, 'password'),
+            h('input', { class: 'input', type: 'password', placeholder: '********', value: state.password, autocomplete: state.mode === 'signup' ? 'new-password' : 'current-password', oninput: (e) => { state.password = e.target.value; } })
         ) : null,
-        state.mode === 'signin' ? h('div', { style: 'display:flex;align-items:center;justify-content:space-between' },
-            h('label', { style: 'display:flex;align-items:center;gap:6px;cursor:pointer' },
+        state.mode === 'signin' ? h('div', { class: 'ds-auth-row-between' },
+            h('label', { class: 'ds-auth-remember' },
                 h('input', { type: 'checkbox', checked: state.remember, onchange: (e) => { state.remember = e.target.checked; } }),
-                h('span', { style: 'color:var(--panel-text-2);font-size:13px' }, 'remember me')
+                h('span', { class: 'ds-auth-remember-text' }, 'remember me')
             ),
-            h('a', { href: '#reset', onclick: (e) => { e.preventDefault(); setMode('reset'); }, style: 'font-size:13px' }, 'forgot password?')
+            h('a', { href: '#reset', onclick: (e) => { e.preventDefault(); setMode('reset'); }, class: 'ds-auth-forgot' }, 'forgot password?')
         ) : null,
-        state.error ? h('div', { style: 'padding:8px 10px;background:var(--panel-1);border-radius:8px;color:#cc4242;font-size:13px' }, state.error) : null,
+        // role=alert so the validation message is announced, not just painted.
+        state.error ? h('div', { class: 'ds-auth-error', role: 'alert' }, state.error) : null,
+        // Shows the exact authorize URL this component built, instead of
+        // navigating away from the specimen with placeholder credentials.
+        state.demoUrl ? h('div', { class: 'ds-auth-error', role: 'status' },
+            'demo mode — would open: ' + state.demoUrl) : null,
         h('button', { class: 'btn btn-primary', type: 'submit' },
-            state.mode === 'signup' ? 'create account →' :
-            state.mode === 'magic'  ? 'send magic link →' :
-            state.mode === 'reset'  ? 'send reset link →' : 'sign in →'
+            state.mode === 'signup' ? 'create account ->' :
+            state.mode === 'magic'  ? 'send magic link ->' :
+            state.mode === 'reset'  ? 'send reset link ->' : 'sign in ->'
         ),
-        state.mode !== 'reset' ? h('div', { style: 'display:flex;align-items:center;gap:10px;margin:6px 0;color:var(--panel-text-3);font-size:12px' },
-            h('div', { style: 'flex:1;height:1px;background:var(--panel-2)' }),
-            h('span', {}, 'or'),
-            h('div', { style: 'flex:1;height:1px;background:var(--panel-2)' })
-        ) : null,
-        state.mode !== 'reset' ? h('div', { style: 'display:flex;gap:8px' },
-            Provider({ glyph: '◆', label: 'github' }),
-            Provider({ glyph: '◇', label: 'google' }),
-            Provider({ glyph: '✦', label: 'sso' })
-        ) : null,
-        state.mode !== 'reset' && state.mode !== 'magic' ? h('button', { class: 'btn', onclick: (e) => { e.preventDefault(); setMode('magic'); } }, 'use a magic link instead') : null
+        state.mode !== 'reset' ? Divider({ label: 'or' }) : null,
+        state.mode !== 'reset' ? h('div', { class: 'ds-auth-providers' },
+            Provider({ glyph: 'gh', label: 'github', provider: 'github' }),
+            Provider({ glyph: 'g', label: 'google', provider: 'google' }),
+            Provider({ glyph: '@', label: 'sso', provider: 'sso' })
+        ) : null
+        // The "use a magic link instead" button was removed from here: it was
+        // a full-width default button sitting directly under the three OAuth
+        // buttons, so it read as a fourth provider, and it duplicated the
+        // magic-link entry already present in the mode row below the panel.
+        // One control per action.
     );
 }
 
@@ -76,28 +198,32 @@ function App() {
     const headings = {
         signin: ['sign in',     'welcome back. pick a provider or use email.'],
         signup: ['create',      'join the 247420 portfolio. one account, every kit.'],
-        magic:  ['magic link',  'we’ll email you a one-tap sign-in link. no password.'],
+        magic:  ['magic link',  "we'll email you a one-tap sign-in link. no password."],
         reset:  ['reset',       'enter your email to receive a reset link.']
     }[state.mode];
     return AppShell({
         narrow: true,
         topbar: Topbar({ brand: '247420', leaf: 'auth', items: [['index', '../../']] }),
-        crumb: Crumb({ trail: ['247420', 'kits'], leaf: 'signin · ' + state.mode }),
+        crumb: Crumb({ trail: ['247420', 'kits'], leaf: state.mode === 'signin' ? 'signin' : 'signin · ' + state.mode }),
         main: [
-            h('div', { class: 'ds-section', style: 'padding:8px;display:flex;flex-direction:column;align-items:center' },
-                h('div', { style: 'width:100%;max-width:440px;display:flex;flex-direction:column;gap:8px;margin:24px 0' },
+            h('div', { class: 'ds-section ds-auth-wrap' },
+                h('div', { class: 'ds-auth-col' },
                     Heading({ level: 1, children: headings[0] }),
                     Lede({ children: headings[1] }),
                     Panel({ children: Form() }),
-                    h('div', { style: 'display:flex;justify-content:center;gap:14px;margin-top:8px;font-size:13px' },
+                    // `reset` is a sub-flow of signin, not a fourth mode, so it
+                    // marks signin as its origin. Without this the mode row
+                    // showed nothing active during reset and offered no route
+                    // back — "forgot password?" was a one-way door.
+                    h('div', { class: 'ds-auth-modes' },
                         ['signin', 'signup', 'magic'].map((m) =>
                             h('a', { key: m, href: '#' + m,
                                 onclick: (e) => { e.preventDefault(); setMode(m); },
-                                style: 'color:' + (state.mode === m ? 'var(--panel-text)' : 'var(--panel-text-3)') + ';text-decoration:' + (state.mode === m ? 'underline' : 'none')
-                            }, m === 'signin' ? 'sign in' : m === 'signup' ? 'create account' : 'magic link')
+                                class: 'ds-auth-mode-link' + ((state.mode === m || (state.mode === 'reset' && m === 'signin')) ? ' ds-auth-mode-link--active' : '')
+                            }, m === 'signin' ? (state.mode === 'reset' ? '<- back to sign in' : 'sign in') : m === 'signup' ? 'create account' : 'magic link')
                         )
                     ),
-                    h('p', { style: 'text-align:center;font-size:12px;color:var(--panel-text-3);margin:6px 0' },
+                    h('p', { class: 'ds-auth-fineprint' },
                         'by continuing you agree to the ',
                         Chip({ tone: 'dim', children: 'terms' }), ' and ',
                         Chip({ tone: 'dim', children: 'privacy notice' }), '.'
@@ -106,7 +232,7 @@ function App() {
             )
         ],
         status: Status({
-            left: ['auth', '• ' + state.mode, state.error ? '• error' : '• ok'],
+            left: ['auth', '- ' + state.mode, state.error ? '- error' : '- ok'],
             right: ['247420 / mmxxvi']
         })
     });

package/dist/ui_kits/signin/index.html

@@ -11,6 +11,7 @@
   <link rel="icon" type="image/svg+xml" href="../../favicon.svg">
   <link rel="stylesheet" href="../../colors_and_type.css">
   <link rel="stylesheet" href="../../app-shell.css">
+  <link rel="stylesheet" href="../../editor-primitives.css">
 <script type="importmap">
 { "imports": {
   "webjsx": "../../vendor/webjsx/index.js",