Redesign UI with new token system, primitives, and motion
Restraint-first design language: neutral gray surfaces + one blue accent (cyan/amber/red reserved for state), 8pt spacing, softer radii, one ambient + one raised shadow, standardized motion tokens. Alfa Slab One demoted to BrandMark only; Inter carries all page copy. New primitives (Button, Card, Badge, Stat, SectionHeader, Skeleton, EmptyState, Tabs, Breadcrumbs, StatusPip, Field, Input, Select, Textarea) plus motion utilities (tweenNumber, viewTransition) and a global toast system. All eight route surfaces rewritten on top: Fleet gains an overview hero, Server detail restructures into tabs, Deployments gets a collapsible drift summary + per-server pipeline visual, and the scripts/configs/plugins/betas flows adopt the new form primitives. Sticky translucent nav with backdrop blur, view-transition cross-fades between routes, staggered card entrance on Fleet, breathing status pip halo, tabular-numeric player counts. Gmail-style g-key nav shortcuts. Mobile stacks below 720px; prefers-reduced-motion neutralizes durations. Legacy tokens preserved as aliases so any un-migrated code still renders.
This commit is contained in:
@@ -1,39 +1,38 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import Card from './primitives/Card.svelte';
|
||||
import Badge from './primitives/Badge.svelte';
|
||||
import Button from './primitives/Button.svelte';
|
||||
import SectionHeader from './primitives/SectionHeader.svelte';
|
||||
import Breadcrumbs from './primitives/Breadcrumbs.svelte';
|
||||
import EmptyState from './primitives/EmptyState.svelte';
|
||||
import Field from './primitives/Field.svelte';
|
||||
import Input from './primitives/Input.svelte';
|
||||
import Select from './primitives/Select.svelte';
|
||||
|
||||
type Family = 'script' | 'config' | 'plugin';
|
||||
|
||||
interface Props {
|
||||
id: number;
|
||||
family: Family;
|
||||
}
|
||||
interface Props { id: number; family: Family; }
|
||||
let { id, family }: Props = $props();
|
||||
|
||||
const basePath = $derived(`/${family}s`);
|
||||
const backLabel = $derived(`← all ${family}s`);
|
||||
const crumbLabel = $derived(family.charAt(0).toUpperCase() + family.slice(1) + 's');
|
||||
|
||||
interface Artifact {
|
||||
id: number;
|
||||
name: string;
|
||||
target_rel_path: string;
|
||||
scope_type: 'game' | 'map' | null;
|
||||
scope_value: string | null;
|
||||
id: number; name: string; target_rel_path: string;
|
||||
scope_type: 'game' | 'map' | null; scope_value: string | null;
|
||||
current_version_id: number | null;
|
||||
kind: 'script' | 'config' | 'plugin' | 'baseline';
|
||||
created_at: string;
|
||||
}
|
||||
interface Version {
|
||||
id: number;
|
||||
version: number;
|
||||
sha256: string;
|
||||
size: number;
|
||||
notes: string | null;
|
||||
state: 'untested' | 'tested' | 'test-failed';
|
||||
id: number; version: number; sha256: string; size: number;
|
||||
notes: string | null; state: 'untested' | 'tested' | 'test-failed';
|
||||
uploaded_at: string;
|
||||
}
|
||||
interface ServerRow { name: string; game: string | null; map: string | null }
|
||||
interface ScopeOptions { games: string[]; mapsByGame: Record<string, string[]> }
|
||||
interface ServerRow { name: string; game: string | null; map: string | null; }
|
||||
interface ScopeOptions { games: string[]; mapsByGame: Record<string, string[]>; }
|
||||
|
||||
let artifact = $state<Artifact | null>(null);
|
||||
let versions = $state<Version[]>([]);
|
||||
@@ -42,7 +41,6 @@
|
||||
let loading = $state(true);
|
||||
let flash = $state<string | null>(null);
|
||||
|
||||
// Modal-form state (only used while the corresponding dialog is open).
|
||||
let scopeType = $state<'none' | 'game' | 'map'>('none');
|
||||
let scopeGame = $state('');
|
||||
let scopeMap = $state('');
|
||||
@@ -55,11 +53,8 @@
|
||||
|
||||
let scopeDialog = $state<HTMLDialogElement | null>(null);
|
||||
let uploadDialog = $state<HTMLDialogElement | null>(null);
|
||||
// Kept around so we can reseed scopeGame after servers load (map→game backfill).
|
||||
let fleetServers: ServerRow[] = [];
|
||||
|
||||
// Polling handle for auto-refresh of server-owned state (artifact, versions,
|
||||
// matched servers, runningBetaId). Form state is never reseeded from polling.
|
||||
let poll: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
const editedScopeValue = $derived.by(() => {
|
||||
@@ -80,10 +75,12 @@
|
||||
|
||||
function scopeLabel(s: Artifact): string {
|
||||
if (!s.scope_type) return 'unscoped';
|
||||
return `${s.scope_type}=${s.scope_value ?? '?'}`;
|
||||
return `${s.scope_type} · ${s.scope_value ?? '?'}`;
|
||||
}
|
||||
function stateClass(state: Version['state']): string {
|
||||
return `tag state-${state}`;
|
||||
function stateVariant(s: Version['state']): 'online' | 'danger' | 'neutral' {
|
||||
return s === 'tested' ? 'online' :
|
||||
s === 'test-failed' ? 'danger' :
|
||||
'neutral';
|
||||
}
|
||||
|
||||
async function load({ seedForm = true }: { seedForm?: boolean } = {}): Promise<void> {
|
||||
@@ -94,10 +91,8 @@
|
||||
]);
|
||||
if (!detailRes.ok) { loading = false; return; }
|
||||
const body = (await detailRes.json()) as {
|
||||
script: Artifact;
|
||||
versions: Version[];
|
||||
matchedServers: string[];
|
||||
runningBetaId: number | null;
|
||||
script: Artifact; versions: Version[];
|
||||
matchedServers: string[]; runningBetaId: number | null;
|
||||
};
|
||||
artifact = body.script;
|
||||
versions = body.versions;
|
||||
@@ -126,8 +121,7 @@
|
||||
const owner = fleetServers.find((sv) => sv.map === scopeMap);
|
||||
scopeGame = owner?.game ?? '';
|
||||
} else {
|
||||
scopeGame = '';
|
||||
scopeMap = '';
|
||||
scopeGame = ''; scopeMap = '';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -135,9 +129,7 @@
|
||||
load();
|
||||
poll = setInterval(() => load({ seedForm: false }), 5000);
|
||||
});
|
||||
onDestroy(() => {
|
||||
if (poll) clearInterval(poll);
|
||||
});
|
||||
onDestroy(() => { if (poll) clearInterval(poll); });
|
||||
|
||||
function openScopeModal(): void {
|
||||
if (runningBetaId !== null) return;
|
||||
@@ -174,8 +166,7 @@
|
||||
async function uploadVersion(e: Event): Promise<void> {
|
||||
e.preventDefault();
|
||||
if (!versionFile || uploadingVersion) return;
|
||||
uploadingVersion = true;
|
||||
flash = null;
|
||||
uploadingVersion = true; flash = null;
|
||||
const form = new FormData();
|
||||
form.append('content', versionFile);
|
||||
if (versionNotes.trim()) form.append('notes', versionNotes.trim());
|
||||
@@ -186,8 +177,7 @@
|
||||
flash = body.error ?? `HTTP ${res.status}`;
|
||||
return;
|
||||
}
|
||||
versionFile = null;
|
||||
versionNotes = '';
|
||||
versionFile = null; versionNotes = '';
|
||||
uploadDialog?.close();
|
||||
await load();
|
||||
} finally {
|
||||
@@ -199,11 +189,10 @@
|
||||
e.preventDefault();
|
||||
if (updatingScope) return;
|
||||
if (scopeType !== 'none' && !editedScopeValue) {
|
||||
flash = `pick a ${scopeType}`;
|
||||
flash = `Pick a ${scopeType}`;
|
||||
return;
|
||||
}
|
||||
updatingScope = true;
|
||||
flash = null;
|
||||
updatingScope = true; flash = null;
|
||||
try {
|
||||
const res = await fetch(`/api/scripts/${id}/scope`, {
|
||||
method: 'POST',
|
||||
@@ -229,322 +218,344 @@
|
||||
if (!confirm(`Delete this ${family}?`)) return;
|
||||
const res = await fetch(`/api/scripts/${id}`, { method: 'DELETE' });
|
||||
const body = (await res.json()) as { ok: boolean; error?: string };
|
||||
if (!body.ok) { flash = body.error ?? 'delete failed'; return; }
|
||||
if (!body.ok) { flash = body.error ?? 'Delete failed'; return; }
|
||||
goto(basePath);
|
||||
}
|
||||
|
||||
let gameOptions = $derived([
|
||||
{ value: '', label: '— Pick a game —', disabled: true },
|
||||
...scopeOptions.games.map((g) => ({ value: g, label: g }))
|
||||
]);
|
||||
let mapOptions = $derived([
|
||||
{ value: '', label: '— Pick a map —', disabled: true },
|
||||
...(scopeOptions.mapsByGame[scopeGame] ?? []).map((m) => ({ value: m, label: m }))
|
||||
]);
|
||||
let scopeTypeOptions = [
|
||||
{ value: 'none', label: 'Unscoped' },
|
||||
{ value: 'game', label: 'Game' },
|
||||
{ value: 'map', label: 'Map' }
|
||||
];
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<p class="empty">loading…</p>
|
||||
<div class="loading">Loading…</div>
|
||||
{:else if !artifact}
|
||||
<p class="empty">{family} not found</p>
|
||||
<EmptyState title="Not found" description="This {family} may have been deleted." />
|
||||
{:else}
|
||||
<a class="back" href={basePath}>{backLabel}</a>
|
||||
<h1>{artifact.name}</h1>
|
||||
<div class="sub mono">{artifact.target_rel_path}</div>
|
||||
{@const a = artifact}
|
||||
<div class="page">
|
||||
<SectionHeader title={a.name} subtitle={a.target_rel_path}>
|
||||
{#snippet crumbs()}
|
||||
<Breadcrumbs items={[{ label: crumbLabel, href: basePath }, { label: a.name }]} />
|
||||
{/snippet}
|
||||
</SectionHeader>
|
||||
|
||||
{#if runningBetaId}
|
||||
<section class="panel banner">
|
||||
<p>
|
||||
Beta <a href="/betas/{runningBetaId}"><strong>#{runningBetaId}</strong></a> is currently running for this {family}.
|
||||
{#if runningBetaId}
|
||||
<div class="warn-banner">
|
||||
Beta <a href="/betas/{runningBetaId}"><strong>#{runningBetaId}</strong></a> is running for this {family}.
|
||||
Rollback or promote it before making changes.
|
||||
</p>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<section class="panel">
|
||||
<h2>Details</h2>
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="k">target file</div>
|
||||
<div class="v mono">{artifact.target_rel_path}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">scope</div>
|
||||
<div class="v mono">{scopeLabel(artifact)}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">applies to</div>
|
||||
<div class="v mono">
|
||||
{#if !artifact.scope_type}
|
||||
<span class="dim">unscoped — deploy from a beta</span>
|
||||
{:else if matchedServers.length === 0}
|
||||
<span class="warn">no matching servers</span>
|
||||
{:else}
|
||||
{matchedServers.join(', ')}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">current version</div>
|
||||
<div class="v mono">
|
||||
{#if currentVersion}
|
||||
v{currentVersion.version} · {currentVersion.sha256.slice(0, 8)} <span class="tag cur">promoted</span>
|
||||
{:else}
|
||||
<span class="dim">— never promoted (open a beta from <a href="/betas">/betas</a>)</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if showLatestSeparately && latestVersion}
|
||||
<div class="stat">
|
||||
<div class="k">latest version</div>
|
||||
<div class="v mono">
|
||||
v{latestVersion.version} · {latestVersion.sha256.slice(0, 8)}
|
||||
<span class={stateClass(latestVersion.state)}>{latestVersion.state}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button
|
||||
class="secondary"
|
||||
onclick={openScopeModal}
|
||||
disabled={runningBetaId !== null}
|
||||
title={runningBetaId !== null ? 'a beta is currently running' : ''}
|
||||
>
|
||||
edit scope
|
||||
</button>
|
||||
<button
|
||||
class="secondary"
|
||||
onclick={openUploadModal}
|
||||
disabled={runningBetaId !== null}
|
||||
title={runningBetaId !== null ? 'a beta is currently running' : ''}
|
||||
>
|
||||
upload new version
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Version history</h2>
|
||||
{#if versions.length === 0}
|
||||
<p class="empty">none</p>
|
||||
{:else}
|
||||
<div class="versions">
|
||||
{#each versions as v (v.id)}
|
||||
<div class="version {artifact.current_version_id === v.id ? 'current' : ''}">
|
||||
<span class="v-num mono">v{v.version}</span>
|
||||
<span class="v-sha mono">{v.sha256.slice(0, 12)}</span>
|
||||
<span class="v-size mono">{v.size}B</span>
|
||||
<span class="v-notes">{v.notes ?? ''}</span>
|
||||
<span class="v-when mono">{v.uploaded_at}</span>
|
||||
{#if artifact.current_version_id === v.id}
|
||||
<span class="tag cur">promoted</span>
|
||||
{:else if v.state === 'tested'}
|
||||
<span class="tag state-tested">tested</span>
|
||||
{:else if v.state === 'test-failed'}
|
||||
<span class="tag state-test-failed">test-failed</span>
|
||||
{:else}
|
||||
<span class="tag state-untested">untested</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Danger</h2>
|
||||
<button class="danger" onclick={deleteArtifact}>delete {family}</button>
|
||||
</section>
|
||||
<Card padding="lg">
|
||||
<div class="panel-head">
|
||||
<h2>Details</h2>
|
||||
<div class="head-actions">
|
||||
<Button variant="secondary" size="sm" onclick={openScopeModal} disabled={runningBetaId !== null}>
|
||||
Edit scope
|
||||
</Button>
|
||||
<Button variant="secondary" size="sm" onclick={openUploadModal} disabled={runningBetaId !== null}>
|
||||
Upload new version
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
||||
|
||||
<dialog bind:this={scopeDialog} onclick={(e) => onDialogClick(scopeDialog, e)}>
|
||||
<form class="dlg" onsubmit={saveScope}>
|
||||
<h3>Edit scope</h3>
|
||||
<div class="scope-form">
|
||||
<select bind:value={scopeType} disabled={updatingScope}>
|
||||
<option value="none">unscoped</option>
|
||||
<option value="game">game</option>
|
||||
<option value="map">map</option>
|
||||
</select>
|
||||
{#if scopeType === 'game'}
|
||||
<select bind:value={scopeGame} disabled={updatingScope}>
|
||||
<option value="">— pick a game —</option>
|
||||
{#each scopeOptions.games as g (g)}
|
||||
<option value={g}>{g}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{:else if scopeType === 'map'}
|
||||
<select bind:value={scopeGame} disabled={updatingScope}>
|
||||
<option value="">— pick a game —</option>
|
||||
{#each scopeOptions.games as g (g)}
|
||||
<option value={g}>{g}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<select bind:value={scopeMap} disabled={updatingScope || !scopeGame}>
|
||||
<option value="">— pick a map —</option>
|
||||
{#each (scopeOptions.mapsByGame[scopeGame] ?? []) as m (m)}
|
||||
<option value={m}>{m}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<div class="kv-grid">
|
||||
<div class="kv">
|
||||
<span class="k">Target file</span>
|
||||
<span class="v mono">{a.target_rel_path}</span>
|
||||
</div>
|
||||
<div class="kv">
|
||||
<span class="k">Scope</span>
|
||||
<span class="v">
|
||||
<Badge
|
||||
variant={a.scope_type === 'game' ? 'info' : a.scope_type === 'map' ? 'warning' : 'neutral'}
|
||||
size="sm"
|
||||
>
|
||||
{scopeLabel(a)}
|
||||
</Badge>
|
||||
</span>
|
||||
</div>
|
||||
<div class="kv">
|
||||
<span class="k">Applies to</span>
|
||||
<span class="v mono">
|
||||
{#if !a.scope_type}
|
||||
<span class="dim">Unscoped — deploy from a beta</span>
|
||||
{:else if matchedServers.length === 0}
|
||||
<span class="warn">No matching servers</span>
|
||||
{:else}
|
||||
{matchedServers.join(', ')}
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="kv">
|
||||
<span class="k">Current version</span>
|
||||
<span class="v mono">
|
||||
{#if currentVersion}
|
||||
v{currentVersion.version} · {currentVersion.sha256.slice(0, 8)}
|
||||
<Badge variant="online" size="sm">Promoted</Badge>
|
||||
{:else}
|
||||
<span class="dim">Never promoted — open a <a href="/betas">beta</a></span>
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
{#if showLatestSeparately && latestVersion}
|
||||
<div class="kv">
|
||||
<span class="k">Latest version</span>
|
||||
<span class="v mono">
|
||||
v{latestVersion.version} · {latestVersion.sha256.slice(0, 8)}
|
||||
<Badge variant={stateVariant(latestVersion.state)} size="sm">{latestVersion.state}</Badge>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="dlg-actions">
|
||||
<button type="button" class="secondary" onclick={cancelScopeModal} disabled={updatingScope}>cancel</button>
|
||||
<button type="submit" class="primary" disabled={updatingScope}>
|
||||
{updatingScope ? 'saving…' : 'save scope'}
|
||||
</button>
|
||||
</div>
|
||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
||||
</form>
|
||||
</dialog>
|
||||
</Card>
|
||||
|
||||
<dialog bind:this={uploadDialog} onclick={(e) => onDialogClick(uploadDialog, e)}>
|
||||
<form class="dlg" onsubmit={uploadVersion}>
|
||||
<h3>Upload new version</h3>
|
||||
<div class="version-form">
|
||||
<input type="file" onchange={pickVersionFile} disabled={uploadingVersion} />
|
||||
<input type="text" bind:value={versionNotes} placeholder="notes (optional)" disabled={uploadingVersion} />
|
||||
<Card padding="lg">
|
||||
<div class="panel-head">
|
||||
<h2>Version history</h2>
|
||||
<Badge variant="neutral" size="sm">{versions.length}</Badge>
|
||||
</div>
|
||||
<div class="dlg-actions">
|
||||
<button type="button" class="secondary" onclick={cancelUploadModal} disabled={uploadingVersion}>cancel</button>
|
||||
<button type="submit" class="primary" disabled={uploadingVersion || !versionFile}>
|
||||
{uploadingVersion ? 'uploading…' : 'upload version'}
|
||||
</button>
|
||||
</div>
|
||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
||||
</form>
|
||||
</dialog>
|
||||
{#if versions.length === 0}
|
||||
<EmptyState title="No versions yet" description="Upload a first version to get started." />
|
||||
{:else}
|
||||
<div class="version-list">
|
||||
{#each versions as v (v.id)}
|
||||
<div class="version-row" class:current={a.current_version_id === v.id}>
|
||||
<span class="v-num">v{v.version}</span>
|
||||
<span class="v-sha">{v.sha256.slice(0, 12)}</span>
|
||||
<span class="v-size">{v.size} B</span>
|
||||
<span class="v-notes">{v.notes ?? ''}</span>
|
||||
<span class="v-when">{v.uploaded_at}</span>
|
||||
{#if a.current_version_id === v.id}
|
||||
<Badge variant="online" size="sm">Promoted</Badge>
|
||||
{:else}
|
||||
<Badge variant={stateVariant(v.state)} size="sm">{v.state.replace('-', ' ')}</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
|
||||
<Card padding="lg">
|
||||
<div class="panel-head"><h2>Danger zone</h2></div>
|
||||
<Button variant="danger" onclick={deleteArtifact}>Delete {family}</Button>
|
||||
</Card>
|
||||
|
||||
{#if flash}<div class="alert">{flash}</div>{/if}
|
||||
|
||||
<!-- Scope dialog -->
|
||||
<dialog bind:this={scopeDialog} onclick={(e) => onDialogClick(scopeDialog, e)}>
|
||||
<form class="dlg" onsubmit={saveScope}>
|
||||
<header class="dlg-head">
|
||||
<h3>Edit scope</h3>
|
||||
<button type="button" class="close" onclick={cancelScopeModal} aria-label="Close">×</button>
|
||||
</header>
|
||||
<Field label="Scope">
|
||||
<div class="scope-row">
|
||||
<Select bind:value={scopeType} options={scopeTypeOptions} disabled={updatingScope} />
|
||||
{#if scopeType === 'game' || scopeType === 'map'}
|
||||
<Select bind:value={scopeGame} options={gameOptions} disabled={updatingScope} />
|
||||
{/if}
|
||||
{#if scopeType === 'map'}
|
||||
<Select bind:value={scopeMap} options={mapOptions} disabled={updatingScope || !scopeGame} />
|
||||
{/if}
|
||||
</div>
|
||||
</Field>
|
||||
<div class="dlg-actions">
|
||||
<Button variant="ghost" onclick={cancelScopeModal} disabled={updatingScope}>Cancel</Button>
|
||||
<Button type="submit" variant="primary" disabled={updatingScope} loading={updatingScope}>
|
||||
Save scope
|
||||
</Button>
|
||||
</div>
|
||||
{#if flash}<div class="alert alert-danger">{flash}</div>{/if}
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- Upload dialog -->
|
||||
<dialog bind:this={uploadDialog} onclick={(e) => onDialogClick(uploadDialog, e)}>
|
||||
<form class="dlg" onsubmit={uploadVersion}>
|
||||
<header class="dlg-head">
|
||||
<h3>Upload new version</h3>
|
||||
<button type="button" class="close" onclick={cancelUploadModal} aria-label="Close">×</button>
|
||||
</header>
|
||||
<Field label="File">
|
||||
<Input type="file" onchange={pickVersionFile} disabled={uploadingVersion} />
|
||||
</Field>
|
||||
<Field label="Notes" hint="Optional. What changed since the previous version.">
|
||||
<Input bind:value={versionNotes} placeholder="what changed" disabled={uploadingVersion} />
|
||||
</Field>
|
||||
<div class="dlg-actions">
|
||||
<Button variant="ghost" onclick={cancelUploadModal} disabled={uploadingVersion}>Cancel</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={uploadingVersion || !versionFile}
|
||||
loading={uploadingVersion}
|
||||
>
|
||||
Upload version
|
||||
</Button>
|
||||
</div>
|
||||
{#if flash}<div class="alert alert-danger">{flash}</div>{/if}
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.back { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono-sm); text-decoration: none; }
|
||||
.back:hover { color: var(--ink-100); }
|
||||
h1 { color: var(--cream); font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: 1.5px; margin: 12px 0 4px; }
|
||||
.sub { color: var(--ink-500); font-size: var(--text-mono); margin-bottom: 24px; }
|
||||
.empty { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
|
||||
.page { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||
.loading { text-align: center; padding: var(--space-16); color: var(--text-tertiary); }
|
||||
|
||||
.panel { background: var(--bg-nav); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--pad-panel); margin-bottom: 20px; }
|
||||
.banner { background: rgba(255, 176, 32, 0.08); border-color: rgba(255, 176, 32, 0.3); }
|
||||
.banner p { margin: 0; color: var(--cream-dim); font-family: var(--font-body); font-size: var(--text-sm); }
|
||||
.banner a { color: var(--amber-500); }
|
||||
h2 { margin: 0 0 14px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-300); }
|
||||
.warn-banner {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: rgba(255, 176, 32, 0.06);
|
||||
border: 1px solid rgba(255, 176, 32, 0.28);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.warn-banner a { color: var(--state-warning); text-decoration: underline; }
|
||||
|
||||
.stats {
|
||||
.panel-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: var(--space-3); margin-bottom: var(--space-4);
|
||||
}
|
||||
.panel-head h2 {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.head-actions { display: flex; gap: var(--space-2); }
|
||||
|
||||
.kv-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.stat {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 12px 14px;
|
||||
.kv {
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.stat .k {
|
||||
color: var(--ink-500);
|
||||
.k {
|
||||
font-size: var(--text-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: var(--tracking-label);
|
||||
color: var(--text-tertiary);
|
||||
font-weight: var(--weight-semibold);
|
||||
}
|
||||
.stat .v {
|
||||
color: var(--ink-100);
|
||||
margin-top: 6px;
|
||||
font-size: var(--text-base);
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.dim { color: var(--ink-500); }
|
||||
.warn { color: var(--amber-500); }
|
||||
|
||||
.actions { display: flex; gap: 10px; margin-top: 18px; }
|
||||
button.secondary {
|
||||
background: var(--bg-card);
|
||||
color: var(--ink-100);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 16px;
|
||||
font-family: var(--font-body);
|
||||
.v {
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
color: var(--text-primary);
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
|
||||
word-break: break-word;
|
||||
}
|
||||
button.secondary:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
||||
button.secondary:disabled { opacity: 0.4; cursor: default; }
|
||||
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
.dim { color: var(--text-tertiary); }
|
||||
.warn { color: var(--state-warning); }
|
||||
.v a { color: var(--accent-primary-hover); }
|
||||
|
||||
.scope-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||
.scope-form select, .version-form input {
|
||||
background: var(--bg-page);
|
||||
color: var(--ink-100);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-mono);
|
||||
}
|
||||
|
||||
.version-form { display: flex; gap: 10px; align-items: center; }
|
||||
.version-form input[type=text] { flex: 1; }
|
||||
|
||||
.versions { display: flex; flex-direction: column; gap: 6px; }
|
||||
.version {
|
||||
.version-list { display: flex; flex-direction: column; gap: var(--space-1); }
|
||||
.version-row {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 130px 90px 1fr 200px auto;
|
||||
gap: 14px;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
grid-template-columns: 60px 130px 80px 1fr 220px auto;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
font-size: var(--text-mono);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
background: color-mix(in oklab, var(--surface) 88%, transparent);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.version.current { border-color: var(--spark-500); box-shadow: 0 0 0 1px var(--spark-500); }
|
||||
.v-num { color: var(--cream); font-weight: 600; }
|
||||
.v-sha, .v-size, .v-when { color: var(--ink-500); }
|
||||
.v-notes { color: var(--ink-300); font-family: var(--font-body); font-size: var(--text-sm); }
|
||||
.tag { padding: 2px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid transparent; }
|
||||
.tag.cur { background: rgba(124, 212, 255, 0.15); border-color: rgba(124, 212, 255, 0.4); color: var(--spark-500); }
|
||||
.tag.state-untested { background: var(--bg-nav); border-color: var(--border); color: var(--ink-300); }
|
||||
.tag.state-tested { background: rgba(124, 212, 255, 0.10); border-color: rgba(124, 212, 255, 0.3); color: var(--spark-500); }
|
||||
.tag.state-test-failed { background: rgba(255, 92, 92, 0.10); border-color: rgba(255, 92, 92, 0.4); color: var(--danger-500); }
|
||||
|
||||
.danger {
|
||||
background: var(--bg-nav);
|
||||
border: 1px solid rgba(255, 48, 80, 0.4);
|
||||
color: var(--danger-500);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 16px;
|
||||
font-family: var(--font-body);
|
||||
cursor: pointer;
|
||||
.version-row.current {
|
||||
border-color: rgba(124, 212, 255, 0.35);
|
||||
background: rgba(124, 212, 255, 0.04);
|
||||
}
|
||||
.v-num { color: var(--text-primary); font-weight: var(--weight-semibold); }
|
||||
.v-sha, .v-size, .v-when { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
|
||||
.v-notes { color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-sm); }
|
||||
|
||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin-top: 12px; }
|
||||
.mono { font-family: var(--font-mono); }
|
||||
.alert {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--state-danger);
|
||||
background: rgba(255, 86, 112, 0.06);
|
||||
border: 1px solid rgba(255, 86, 112, 0.28);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.alert-danger { background: rgba(255, 86, 112, 0.08); }
|
||||
|
||||
/* Dialogs */
|
||||
dialog {
|
||||
background: var(--bg-nav);
|
||||
color: var(--ink-100);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--surface);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 0;
|
||||
max-width: 560px;
|
||||
width: calc(100vw - 40px);
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
dialog[open] { animation: dlg-in var(--dur-base) var(--ease-standard); }
|
||||
@keyframes dlg-in {
|
||||
from { opacity: 0; transform: translateY(6px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
.dlg {
|
||||
display: flex; flex-direction: column; gap: var(--space-4);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
.dlg-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
|
||||
.dlg { display: flex; flex-direction: column; gap: 14px; padding: var(--pad-panel); }
|
||||
.dlg h3 {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--ink-300);
|
||||
font-size: var(--text-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
|
||||
button.primary {
|
||||
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
||||
border: 1px solid var(--blue-400);
|
||||
color: var(--cream);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
.close {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--text-xl);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.close:hover { color: var(--text-primary); background: var(--surface-raised); }
|
||||
|
||||
.scope-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
|
||||
.scope-row :global(.wrap) { flex: 1 1 140px; min-width: 140px; }
|
||||
|
||||
.dlg-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.version-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
button.primary:disabled { opacity: 0.4; cursor: default; }
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
<script lang="ts">
|
||||
// Alfa Slab One is imported *here*, not globally, so the rest of the
|
||||
// product doesn't pay for a display face it never uses.
|
||||
import '@fontsource/alfa-slab-one/400.css';
|
||||
|
||||
interface Props {
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
}
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import Button from './primitives/Button.svelte';
|
||||
import Field from './primitives/Field.svelte';
|
||||
import Input from './primitives/Input.svelte';
|
||||
import Select from './primitives/Select.svelte';
|
||||
|
||||
interface T5MapEntry {
|
||||
friendly: string;
|
||||
@@ -34,8 +38,6 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Track prior open value manually — using $effect with `open` triggers on
|
||||
// every render and repeatedly re-shows the modal.
|
||||
let wasOpen = $state(false);
|
||||
$effect(() => {
|
||||
if (!dialog) return;
|
||||
@@ -54,35 +56,23 @@
|
||||
deploying = false;
|
||||
if (maps.length > 0 && !maps.some((m) => m.slug === mapSlug)) mapSlug = maps[0].slug;
|
||||
}
|
||||
function close(): void { open = false; }
|
||||
|
||||
function close(): void {
|
||||
open = false;
|
||||
}
|
||||
|
||||
// Click-outside-to-close (native <dialog> only supports Esc). Only treat
|
||||
// clicks whose target is the dialog element itself (the backdrop) as
|
||||
// outside — a bounding-rect check catches native <select> dropdown
|
||||
// options that render below the modal and closes the whole thing.
|
||||
function onDialogClick(e: MouseEvent): void {
|
||||
if (e.target === dialog) close();
|
||||
}
|
||||
|
||||
let selectedMap = $derived(maps.find((m) => m.slug === mapSlug));
|
||||
let previewName = $derived(
|
||||
selectedMap ? `t5_${gameMode}_${selectedMap.slug}_?` : ''
|
||||
);
|
||||
let previewName = $derived(selectedMap ? `t5_${gameMode}_${selectedMap.slug}_?` : '');
|
||||
|
||||
let modeOptions = [{ value: 'zombie', label: 'Zombies' }];
|
||||
let mapOptions = $derived(maps.map((m) => ({ value: m.slug, label: m.friendly })));
|
||||
|
||||
async function submit(e: SubmitEvent): Promise<void> {
|
||||
e.preventDefault();
|
||||
if (deploying) return;
|
||||
if (!selectedMap) {
|
||||
flash = 'pick a map';
|
||||
return;
|
||||
}
|
||||
if (plutoKey.trim().length === 0) {
|
||||
flash = 'pluto server key is required';
|
||||
return;
|
||||
}
|
||||
if (!selectedMap) { flash = 'Pick a map'; return; }
|
||||
if (plutoKey.trim().length === 0) { flash = 'Pluto server key is required'; return; }
|
||||
deploying = true;
|
||||
flash = null;
|
||||
try {
|
||||
@@ -91,15 +81,9 @@
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ gameMode, mapSlug: selectedMap.slug, plutoKey })
|
||||
});
|
||||
const body = (await res.json()) as {
|
||||
ok: boolean;
|
||||
name?: string;
|
||||
port?: number;
|
||||
error?: string;
|
||||
kind?: string;
|
||||
};
|
||||
const body = (await res.json()) as { ok: boolean; name?: string; port?: number; error?: string; kind?: string };
|
||||
if (!body.ok || !body.name) {
|
||||
flash = body.error ?? 'deploy failed';
|
||||
flash = body.error ?? 'Deploy failed';
|
||||
deploying = false;
|
||||
return;
|
||||
}
|
||||
@@ -114,167 +98,191 @@
|
||||
|
||||
<dialog bind:this={dialog} onclick={onDialogClick} onclose={() => (open = false)}>
|
||||
<form class="dlg" onsubmit={submit}>
|
||||
<h3>Deploy new server</h3>
|
||||
<header class="dlg-head">
|
||||
<h3>Deploy new server</h3>
|
||||
<button type="button" class="close" onclick={close} aria-label="Close">×</button>
|
||||
</header>
|
||||
|
||||
{#if mapsError}
|
||||
<p class="flash">failed to load map catalog: {mapsError}</p>
|
||||
<div class="alert alert-danger">Failed to load map catalog: {mapsError}</div>
|
||||
{:else if !mapsLoaded}
|
||||
<p class="hint">loading map catalog…</p>
|
||||
<div class="hint">Loading map catalog…</div>
|
||||
{:else}
|
||||
<div class="row">
|
||||
<span class="row-label">Game</span>
|
||||
<div class="readonly mono">Black Ops 1 (t5)</div>
|
||||
</div>
|
||||
<div class="fields">
|
||||
<Field label="Game">
|
||||
<div class="readonly">Black Ops 1 (t5)</div>
|
||||
</Field>
|
||||
|
||||
<div class="row">
|
||||
<label for="mode">Mode</label>
|
||||
<select id="mode" bind:value={gameMode} disabled={deploying}>
|
||||
<option value="zombie">Zombies</option>
|
||||
</select>
|
||||
</div>
|
||||
<Field label="Mode">
|
||||
<Select bind:value={gameMode} options={modeOptions} disabled={deploying} />
|
||||
</Field>
|
||||
|
||||
<div class="row">
|
||||
<label for="map">Map</label>
|
||||
<select id="map" bind:value={mapSlug} disabled={deploying}>
|
||||
{#each maps as m (m.slug)}
|
||||
<option value={m.slug}>{m.friendly}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<Field label="Map">
|
||||
<Select bind:value={mapSlug} options={mapOptions} disabled={deploying} />
|
||||
</Field>
|
||||
|
||||
<div class="row">
|
||||
<label for="key">Pluto server key</label>
|
||||
<input
|
||||
id="key"
|
||||
type="password"
|
||||
bind:value={plutoKey}
|
||||
placeholder="paste each deploy — not stored"
|
||||
autocomplete="off"
|
||||
disabled={deploying}
|
||||
/>
|
||||
<Field label="Pluto server key" hint="Paste each deploy — not stored anywhere.">
|
||||
<Input
|
||||
type="password"
|
||||
bind:value={plutoKey}
|
||||
placeholder="paste key"
|
||||
autocomplete="off"
|
||||
disabled={deploying}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div class="preview">
|
||||
<span class="k">will create</span>
|
||||
<span class="v mono">{previewName || '—'}</span>
|
||||
<span class="sub">(lobby number + port auto-assigned)</span>
|
||||
<span class="preview-k">Will create</span>
|
||||
<span class="preview-v">{previewName || '—'}</span>
|
||||
<span class="preview-sub">(lobby number + port auto-assigned)</span>
|
||||
</div>
|
||||
|
||||
<div class="dlg-actions">
|
||||
<button type="button" class="secondary" onclick={close} disabled={deploying}>cancel</button>
|
||||
<button type="submit" class="primary" disabled={deploying || !selectedMap}>
|
||||
{deploying ? 'deploying…' : 'deploy server'}
|
||||
</button>
|
||||
<div class="actions">
|
||||
<Button variant="ghost" onclick={close} disabled={deploying}>Cancel</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
disabled={deploying || !selectedMap}
|
||||
loading={deploying}
|
||||
>
|
||||
Deploy server
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if flash}<p class="flash">{flash}</p>{/if}
|
||||
{#if flash}<div class="alert alert-danger">{flash}</div>{/if}
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
dialog {
|
||||
background: var(--bg-nav);
|
||||
color: var(--ink-100);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--surface);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 0;
|
||||
max-width: 520px;
|
||||
max-width: 540px;
|
||||
width: calc(100vw - 40px);
|
||||
box-shadow: var(--shadow-raised);
|
||||
}
|
||||
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
|
||||
.dlg { display: flex; flex-direction: column; gap: 14px; padding: var(--pad-panel); }
|
||||
h3 {
|
||||
dialog[open] { animation: dlg-in var(--dur-base) var(--ease-standard); }
|
||||
@keyframes dlg-in {
|
||||
from { opacity: 0; transform: translateY(6px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.dlg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
.dlg-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dlg h3 {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--ink-300);
|
||||
font-size: var(--text-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
.row {
|
||||
.close {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--text-xl);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.close:hover { color: var(--text-primary); background: var(--surface-raised); }
|
||||
.close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
|
||||
.fields {
|
||||
display: grid;
|
||||
grid-template-columns: 130px 1fr;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.row label, .row-label {
|
||||
color: var(--ink-500);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.row select, .row input {
|
||||
background: var(--bg-page);
|
||||
color: var(--ink-100);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-mono);
|
||||
width: 100%;
|
||||
}
|
||||
.row input:focus, .row select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--accent-glow);
|
||||
.fields :global(.field):nth-child(1),
|
||||
.fields :global(.field):nth-child(4) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.readonly {
|
||||
color: var(--ink-300);
|
||||
padding: 10px 0;
|
||||
padding: 9px 12px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: var(--r-sm);
|
||||
font-size: var(--text-mono);
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-left: 2px solid var(--accent-primary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.preview .k {
|
||||
color: var(--ink-500);
|
||||
font-family: var(--font-body);
|
||||
.preview-k {
|
||||
font-size: var(--text-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: var(--tracking-label);
|
||||
color: var(--text-tertiary);
|
||||
font-weight: var(--weight-semibold);
|
||||
}
|
||||
.preview .v { color: var(--cream); }
|
||||
.preview .sub {
|
||||
color: var(--ink-500);
|
||||
font-family: var(--font-body);
|
||||
.preview-v {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.preview-sub {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.alert {
|
||||
margin: 0;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid transparent;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.alert-danger {
|
||||
background: rgba(255, 86, 112, 0.08);
|
||||
border-color: rgba(255, 86, 112, 0.28);
|
||||
color: var(--state-danger);
|
||||
}
|
||||
.hint {
|
||||
color: var(--text-tertiary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.mono { font-family: var(--font-mono); }
|
||||
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
|
||||
button.primary {
|
||||
background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
|
||||
border: 1px solid var(--blue-400);
|
||||
color: var(--cream);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 16px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.fields { grid-template-columns: 1fr; }
|
||||
}
|
||||
button.primary:disabled { opacity: 0.4; cursor: default; }
|
||||
button.secondary {
|
||||
background: var(--bg-card);
|
||||
color: var(--ink-100);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 16px;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
button.secondary:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--accent-glow); }
|
||||
button.secondary:disabled { opacity: 0.4; cursor: default; }
|
||||
.flash { color: var(--danger-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
|
||||
.hint { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--text-mono); margin: 0; }
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
<script lang="ts">
|
||||
import StatusDot from './StatusDot.svelte';
|
||||
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
|
||||
import { uiNow } from '$ui/stores/servers.js';
|
||||
import { gametypeLabel } from '$ui/gametype.js';
|
||||
import { elapsedSince } from '$ui/duration.js';
|
||||
import Card from './primitives/Card.svelte';
|
||||
import Badge from './primitives/Badge.svelte';
|
||||
import Stat from './primitives/Stat.svelte';
|
||||
import StatusPip from './primitives/StatusPip.svelte';
|
||||
|
||||
interface Held {
|
||||
target: string;
|
||||
@@ -63,38 +66,54 @@
|
||||
let mapLabel = $derived(map ?? '—');
|
||||
let gtLabel = $derived(gametypeLabel(gametype));
|
||||
|
||||
// Live-ticking occupancy + match timers. Anchored to server-issued
|
||||
// ISO timestamps and re-derived from a shared 1s ticker.
|
||||
let activeElapsed = $derived(activeSince ? elapsedSince(activeSince, $uiNow) : null);
|
||||
let inactiveElapsed = $derived(inactiveSince ? elapsedSince(inactiveSince, $uiNow) : null);
|
||||
// Game timer only runs while the server is active. Belt-and-suspenders for
|
||||
// the server-side clear on inactive transition.
|
||||
let gameInProgress = $derived(!!gameStartedAt && !gameEndedAt && !!activeSince);
|
||||
let gameElapsed = $derived(gameInProgress ? elapsedSince(gameStartedAt, $uiNow) : null);
|
||||
let showTiming = $derived(
|
||||
health !== 'offline' && (activeElapsed !== null || inactiveElapsed !== null || gameElapsed !== null)
|
||||
);
|
||||
|
||||
// Shared-element transition to /servers/{name} — Chromium only, others
|
||||
// fall through to a plain nav.
|
||||
let cardStyle = $derived(`view-transition-name: server-${name.replace(/[^a-z0-9_-]/gi, '-')};`);
|
||||
</script>
|
||||
|
||||
<a class="card" href="/servers/{name}" class:restarting class:offline={health === 'offline'}>
|
||||
<Card
|
||||
href="/servers/{name}"
|
||||
elevation="interactive"
|
||||
padding="md"
|
||||
class={restarting ? 'restarting' : health === 'offline' ? 'offline' : ''}
|
||||
ariaLabel="Server {name}, {health}"
|
||||
style={cardStyle}
|
||||
>
|
||||
{#if restarting}
|
||||
<span class="restart-bar" aria-hidden="true"></span>
|
||||
{/if}
|
||||
|
||||
<div class="head">
|
||||
<div class="name-row">
|
||||
<StatusDot {health} />
|
||||
<StatusPip {health} />
|
||||
<strong class="name">{name}</strong>
|
||||
</div>
|
||||
{#if health !== 'offline'}
|
||||
<span class="players" class:has-players={players !== null && players > 0}>
|
||||
{players ?? '—'}
|
||||
</span>
|
||||
{#if health === 'offline'}
|
||||
<Badge variant="danger" uppercase>offline</Badge>
|
||||
{:else}
|
||||
<span class="players offline-badge">offline</span>
|
||||
<div class="players" aria-live="polite">
|
||||
<Stat
|
||||
value={players ?? 0}
|
||||
size="md"
|
||||
tone={players !== null && players > 0 ? 'online' : 'primary'}
|
||||
tween
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="meta">
|
||||
<span class="map">{mapLabel}</span>
|
||||
{#if gtLabel}
|
||||
<span class="dot-sep">·</span>
|
||||
<span class="dot" aria-hidden="true">·</span>
|
||||
<span class="gt">{gtLabel}</span>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -102,21 +121,21 @@
|
||||
{#if showTiming}
|
||||
<div class="timing">
|
||||
{#if activeElapsed}
|
||||
<span class="timing-item active">
|
||||
<span class="label">Active</span>
|
||||
<span class="value">{activeElapsed}</span>
|
||||
</span>
|
||||
<div class="metric">
|
||||
<span class="metric-label">Active</span>
|
||||
<span class="metric-value">{activeElapsed}</span>
|
||||
</div>
|
||||
{:else if inactiveElapsed}
|
||||
<span class="timing-item inactive">
|
||||
<span class="label">Inactive</span>
|
||||
<span class="value">{inactiveElapsed}</span>
|
||||
</span>
|
||||
<div class="metric">
|
||||
<span class="metric-label">Inactive</span>
|
||||
<span class="metric-value">{inactiveElapsed}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if gameElapsed}
|
||||
<span class="timing-item game">
|
||||
<span class="label">Game</span>
|
||||
<span class="value">{gameElapsed}</span>
|
||||
</span>
|
||||
<div class="metric">
|
||||
<span class="metric-label">Match</span>
|
||||
<span class="metric-value">{gameElapsed}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -132,15 +151,15 @@
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else if health !== 'offline'}
|
||||
<div class="lobby-empty">lobby is empty</div>
|
||||
{:else}
|
||||
<div class="lobby-empty">Lobby is empty</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if held.length > 0}
|
||||
<div class="held">
|
||||
{#each held as h (h.target)}
|
||||
<span class="chip" title="held by beta {h.betaId}">β {h.target}</span>
|
||||
<Badge variant="info" size="sm" title="held by beta {h.betaId}">β {h.target}</Badge>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -149,203 +168,160 @@
|
||||
{#if health === 'offline' && lastError}
|
||||
<span class="err">{lastError}</span>
|
||||
{:else if lastSeenAt}
|
||||
<span>last seen {ago(lastSeenAt)}</span>
|
||||
<span>Last seen {ago(lastSeenAt)}</span>
|
||||
{:else if lastRestartedAt}
|
||||
<span>restart {ago(lastRestartedAt)}</span>
|
||||
<span>Restart {ago(lastRestartedAt)}</span>
|
||||
{:else}
|
||||
<span class="dim">no data</span>
|
||||
<span class="dim">No data</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if restarting}
|
||||
<div class="restarting-bar" aria-label="restarting"></div>
|
||||
{/if}
|
||||
</a>
|
||||
</Card>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
background:
|
||||
linear-gradient(180deg, var(--bg-card) 0%, var(--bg-nav) 100%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
padding: var(--pad-card);
|
||||
color: var(--ink-100);
|
||||
text-decoration: none;
|
||||
transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
|
||||
box-shadow: var(--shadow-card);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Global tweaks scoped through :global() since Card is a child component. */
|
||||
:global(.card.restarting) {
|
||||
outline: 1px solid rgba(255, 176, 32, 0.28);
|
||||
}
|
||||
.card::before {
|
||||
content: '';
|
||||
:global(.card.offline) {
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
.restart-bar {
|
||||
position: absolute;
|
||||
inset: 0 0 auto 0;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
||||
opacity: 0.55;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--state-warning),
|
||||
var(--state-online),
|
||||
transparent
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: spark-slide 1.6s var(--ease-linear) infinite;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--accent-glow), var(--shadow-card);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.card.restarting { border-color: var(--amber-500); box-shadow: var(--amber-glow); }
|
||||
.card.offline { opacity: 0.75; }
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
.name-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
||||
.name {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-md);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
color: var(--cream);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.players {
|
||||
background: var(--bg-nav);
|
||||
border: 1px solid var(--border);
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-mono);
|
||||
font-weight: 500;
|
||||
color: var(--ink-500);
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
}
|
||||
.players.has-players {
|
||||
color: var(--spark-500);
|
||||
border-color: var(--spark-500);
|
||||
box-shadow: var(--spark-glow);
|
||||
}
|
||||
.players.offline-badge {
|
||||
color: var(--danger-500);
|
||||
border-color: rgba(255, 48, 80, 0.4);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-label);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.players { flex-shrink: 0; }
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-mono);
|
||||
color: var(--ink-300);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.map { color: var(--cream-dim); }
|
||||
.gt { color: var(--ink-300); }
|
||||
.dot-sep { color: var(--ink-500); }
|
||||
|
||||
.roster {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.roster li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 3px 0;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-1);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.pname {
|
||||
color: var(--cream);
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pscore {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--spark-500);
|
||||
font-size: var(--text-mono-sm);
|
||||
}
|
||||
.pping {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--ink-300);
|
||||
font-size: var(--text-mono-sm);
|
||||
min-width: 48px;
|
||||
text-align: right;
|
||||
}
|
||||
.map { color: var(--text-secondary); font-weight: var(--weight-medium); }
|
||||
.gt { color: var(--text-tertiary); }
|
||||
.dot { color: var(--text-quaternary); }
|
||||
|
||||
.timing {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-mono-sm);
|
||||
gap: var(--space-5);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.timing-item {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
.metric {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.timing-item .label {
|
||||
color: var(--ink-500);
|
||||
.metric-label {
|
||||
font-size: 10px;
|
||||
font-weight: var(--weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-label);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.timing-item .value { color: var(--cream); }
|
||||
.timing-item.active .value { color: var(--spark-500); }
|
||||
.timing-item.inactive .value { color: var(--ink-300); }
|
||||
.timing-item.game .value { color: var(--accent, var(--spark-500)); }
|
||||
.metric-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.roster {
|
||||
list-style: none;
|
||||
padding: var(--space-3) 0 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
.roster li {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
padding: 2px 0;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.pname {
|
||||
color: var(--text-primary);
|
||||
font-weight: var(--weight-regular);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pscore,
|
||||
.pping {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.pping { min-width: 44px; text-align: right; }
|
||||
|
||||
.lobby-empty {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-mono-sm);
|
||||
color: var(--ink-500);
|
||||
padding: 4px 0;
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.held { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.chip {
|
||||
background: rgba(124, 192, 245, 0.10);
|
||||
color: var(--cream);
|
||||
border: 1px solid rgba(124, 192, 245, 0.28);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 2px 8px;
|
||||
font-size: var(--text-mono-sm);
|
||||
font-family: var(--font-mono);
|
||||
.held {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-mono-sm);
|
||||
color: var(--ink-500);
|
||||
letter-spacing: 0.3px;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.err { color: var(--danger-500); }
|
||||
.dim { color: var(--ink-700); }
|
||||
|
||||
.restarting-bar {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--amber-500), var(--spark-500), transparent);
|
||||
background-size: 200% 100%;
|
||||
animation: spark-slide 1.2s infinite linear;
|
||||
padding-top: var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.err { color: var(--state-danger); }
|
||||
.dim { color: var(--text-quaternary); }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import { fly, fade } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import { toasts, dismiss } from '$ui/toast.js';
|
||||
</script>
|
||||
|
||||
<div class="toaster" role="region" aria-label="Notifications">
|
||||
{#each $toasts as t (t.id)}
|
||||
<div
|
||||
class="toast v-{t.variant}"
|
||||
in:fly={{ y: 16, duration: 240, easing: cubicOut }}
|
||||
out:fade={{ duration: 160 }}
|
||||
>
|
||||
<span class="dot" aria-hidden="true"></span>
|
||||
<span class="msg">{t.message}</span>
|
||||
<button
|
||||
type="button"
|
||||
class="close"
|
||||
onclick={() => dismiss(t.id)}
|
||||
aria-label="Dismiss notification"
|
||||
>×</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toaster {
|
||||
position: fixed;
|
||||
bottom: var(--space-6);
|
||||
right: var(--space-6);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
pointer-events: none;
|
||||
max-width: min(420px, calc(100vw - 2 * var(--space-6)));
|
||||
}
|
||||
.toast {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: color-mix(in oklab, var(--surface-raised) 92%, transparent);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-raised);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
@supports (backdrop-filter: blur(4px)) {
|
||||
.toast {
|
||||
backdrop-filter: blur(12px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(1.4);
|
||||
background: color-mix(in oklab, var(--surface-raised) 78%, transparent);
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--text-tertiary);
|
||||
}
|
||||
.v-success .dot { background: var(--state-online); box-shadow: 0 0 4px rgba(124, 212, 255, 0.5); }
|
||||
.v-warning .dot { background: var(--state-warning); }
|
||||
.v-danger .dot { background: var(--state-danger); }
|
||||
.v-info .dot { background: var(--accent-primary); }
|
||||
.msg { flex: 1; }
|
||||
.close {
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0 var(--space-1);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.close:hover { color: var(--text-primary); }
|
||||
.close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type Variant = 'neutral' | 'online' | 'warning' | 'danger' | 'info' | 'accent';
|
||||
type Size = 'sm' | 'md';
|
||||
|
||||
interface Props {
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
uppercase?: boolean;
|
||||
mono?: boolean;
|
||||
title?: string;
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
variant = 'neutral',
|
||||
size = 'sm',
|
||||
uppercase = false,
|
||||
mono = false,
|
||||
title,
|
||||
children
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<span
|
||||
class="badge v-{variant} s-{size}"
|
||||
class:uppercase
|
||||
class:mono
|
||||
{title}
|
||||
>
|
||||
{@render children?.()}
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-body);
|
||||
font-weight: var(--weight-medium);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-label);
|
||||
font-weight: var(--weight-semibold);
|
||||
}
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.s-sm { padding: 3px 8px; font-size: var(--text-xs); }
|
||||
.s-md { padding: 5px 12px; font-size: var(--text-sm); }
|
||||
|
||||
.v-neutral {
|
||||
background: var(--surface-raised);
|
||||
color: var(--text-secondary);
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
.v-online {
|
||||
background: rgba(124, 212, 255, 0.10);
|
||||
color: var(--state-online);
|
||||
border-color: rgba(124, 212, 255, 0.25);
|
||||
}
|
||||
.v-warning {
|
||||
background: rgba(255, 176, 32, 0.10);
|
||||
color: var(--state-warning);
|
||||
border-color: rgba(255, 176, 32, 0.28);
|
||||
}
|
||||
.v-danger {
|
||||
background: rgba(255, 86, 112, 0.10);
|
||||
color: var(--state-danger);
|
||||
border-color: rgba(255, 86, 112, 0.28);
|
||||
}
|
||||
.v-info {
|
||||
background: rgba(124, 192, 245, 0.10);
|
||||
color: var(--blue-300);
|
||||
border-color: rgba(124, 192, 245, 0.28);
|
||||
}
|
||||
.v-accent {
|
||||
background: var(--accent-primary);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
interface Crumb {
|
||||
label: string;
|
||||
href?: string | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
items: Crumb[];
|
||||
}
|
||||
|
||||
let { items }: Props = $props();
|
||||
</script>
|
||||
|
||||
<nav class="crumbs" aria-label="Breadcrumb">
|
||||
<ol>
|
||||
{#each items as c, i (i + c.label)}
|
||||
<li>
|
||||
{#if c.href && i < items.length - 1}
|
||||
<a href={c.href}>{c.label}</a>
|
||||
{:else}
|
||||
<span aria-current={i === items.length - 1 ? 'page' : undefined}>{c.label}</span>
|
||||
{/if}
|
||||
{#if i < items.length - 1}<span class="sep" aria-hidden="true">›</span>{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.crumbs ol {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.crumbs li {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.crumbs a {
|
||||
color: var(--text-tertiary);
|
||||
text-decoration: none;
|
||||
transition: color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.crumbs a:hover { color: var(--text-primary); }
|
||||
.crumbs a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
|
||||
.crumbs [aria-current='page'] { color: var(--text-primary); }
|
||||
.sep { color: var(--text-quaternary); }
|
||||
</style>
|
||||
@@ -0,0 +1,162 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
||||
type Size = 'sm' | 'md' | 'lg';
|
||||
|
||||
interface Props {
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
disabled?: boolean;
|
||||
loading?: boolean;
|
||||
href?: string | null;
|
||||
title?: string;
|
||||
ariaLabel?: string;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
children?: Snippet;
|
||||
leading?: Snippet;
|
||||
trailing?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
variant = 'secondary',
|
||||
size = 'md',
|
||||
type = 'button',
|
||||
disabled = false,
|
||||
loading = false,
|
||||
href = null,
|
||||
title,
|
||||
ariaLabel,
|
||||
onclick,
|
||||
children,
|
||||
leading,
|
||||
trailing
|
||||
}: Props = $props();
|
||||
|
||||
let isLink = $derived(href !== null && href !== undefined);
|
||||
</script>
|
||||
|
||||
{#if isLink}
|
||||
<a
|
||||
class="btn v-{variant} s-{size}"
|
||||
class:is-loading={loading}
|
||||
aria-disabled={disabled || loading}
|
||||
aria-label={ariaLabel}
|
||||
{title}
|
||||
href={disabled || loading ? undefined : href}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
{#if leading}<span class="slot slot-leading">{@render leading()}</span>{/if}
|
||||
<span class="label">{@render children?.()}</span>
|
||||
{#if trailing}<span class="slot slot-trailing">{@render trailing()}</span>{/if}
|
||||
{#if loading}<span class="spinner" aria-hidden="true"></span>{/if}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
class="btn v-{variant} s-{size}"
|
||||
class:is-loading={loading}
|
||||
{type}
|
||||
{title}
|
||||
aria-label={ariaLabel}
|
||||
disabled={disabled || loading}
|
||||
{onclick}
|
||||
>
|
||||
{#if leading}<span class="slot slot-leading">{@render leading()}</span>{/if}
|
||||
<span class="label">{@render children?.()}</span>
|
||||
{#if trailing}<span class="slot slot-trailing">{@render trailing()}</span>{/if}
|
||||
{#if loading}<span class="spinner" aria-hidden="true"></span>{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-body);
|
||||
font-weight: var(--weight-semibold);
|
||||
letter-spacing: var(--tracking-normal);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
background-color var(--dur-fast) var(--ease-standard),
|
||||
border-color var(--dur-fast) var(--ease-standard),
|
||||
color var(--dur-fast) var(--ease-standard),
|
||||
transform var(--dur-fast) var(--ease-standard),
|
||||
box-shadow var(--dur-fast) var(--ease-standard);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
.btn:focus { outline: none; }
|
||||
.btn:focus-visible { box-shadow: var(--focus-ring); }
|
||||
.btn:disabled,
|
||||
.btn[aria-disabled='true'] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn:active:not(:disabled):not([aria-disabled='true']) { transform: translateY(0.5px); }
|
||||
|
||||
/* Sizes */
|
||||
.s-sm { padding: 6px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
|
||||
.s-md { padding: 9px 16px; font-size: var(--text-sm); }
|
||||
.s-lg { padding: 12px 22px; font-size: var(--text-base); }
|
||||
|
||||
/* Variants */
|
||||
.v-primary {
|
||||
background: var(--accent-primary);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
.v-primary:hover:not(:disabled):not([aria-disabled='true']) {
|
||||
background: var(--accent-primary-hover);
|
||||
color: var(--gray-950);
|
||||
}
|
||||
|
||||
.v-secondary {
|
||||
background: var(--surface-raised);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
.v-secondary:hover:not(:disabled):not([aria-disabled='true']) {
|
||||
background: var(--surface-overlay);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.v-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.v-ghost:hover:not(:disabled):not([aria-disabled='true']) {
|
||||
background: var(--surface-raised);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.v-danger {
|
||||
background: transparent;
|
||||
color: var(--state-danger);
|
||||
border-color: rgba(255, 86, 112, 0.32);
|
||||
}
|
||||
.v-danger:hover:not(:disabled):not([aria-disabled='true']) {
|
||||
background: rgba(255, 86, 112, 0.12);
|
||||
border-color: var(--state-danger);
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.is-loading .label,
|
||||
.is-loading .slot { visibility: hidden; }
|
||||
.spinner {
|
||||
position: absolute;
|
||||
width: 14px; height: 14px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid currentColor;
|
||||
border-top-color: transparent;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type Padding = 'none' | 'sm' | 'md' | 'lg';
|
||||
type Elevation = 'flat' | 'raised' | 'interactive';
|
||||
|
||||
interface Props {
|
||||
padding?: Padding;
|
||||
elevation?: Elevation;
|
||||
href?: string | null;
|
||||
as?: 'div' | 'section' | 'article' | 'a';
|
||||
ariaLabel?: string;
|
||||
class?: string;
|
||||
style?: string;
|
||||
children?: Snippet;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
padding = 'md',
|
||||
elevation = 'flat',
|
||||
href = null,
|
||||
as = 'div',
|
||||
ariaLabel,
|
||||
class: klass = '',
|
||||
style,
|
||||
children,
|
||||
onclick
|
||||
}: Props = $props();
|
||||
|
||||
let isLink = $derived(href !== null && href !== undefined);
|
||||
let tag = $derived(isLink ? 'a' : as);
|
||||
// When the container isn't a link but does have a click handler, assign
|
||||
// a role so screen readers announce it as interactive (a11y_no_static).
|
||||
let role = $derived(!isLink && onclick ? 'button' : undefined);
|
||||
let tabindex = $derived(!isLink && onclick ? 0 : undefined);
|
||||
</script>
|
||||
|
||||
<svelte:element
|
||||
this={tag}
|
||||
class="card p-{padding} e-{elevation} {klass}"
|
||||
href={isLink ? href : undefined}
|
||||
aria-label={ariaLabel}
|
||||
{role}
|
||||
{tabindex}
|
||||
{style}
|
||||
{onclick}
|
||||
>
|
||||
{@render children?.()}
|
||||
</svelte:element>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--radius-lg);
|
||||
background: color-mix(in oklab, var(--surface) 90%, transparent);
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
transform var(--dur-fast) var(--ease-standard),
|
||||
box-shadow var(--dur-base) var(--ease-standard),
|
||||
background-color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
/* Inner highlight — a single hairline of light at the top edge. */
|
||||
.card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Backdrop blur only where the browser supports it — some rendering
|
||||
backends downgrade poorly, and we don't want blurred noise. */
|
||||
@supports (backdrop-filter: blur(4px)) {
|
||||
.card {
|
||||
backdrop-filter: blur(10px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Padding scale */
|
||||
.p-none { padding: 0; }
|
||||
.p-sm { padding: var(--space-4); }
|
||||
.p-md { padding: var(--space-5); }
|
||||
.p-lg { padding: var(--space-6); }
|
||||
|
||||
/* Elevation */
|
||||
.e-flat { box-shadow: var(--shadow-ambient); }
|
||||
.e-raised { box-shadow: var(--shadow-raised); }
|
||||
|
||||
.e-interactive {
|
||||
box-shadow: var(--shadow-ambient);
|
||||
cursor: pointer;
|
||||
}
|
||||
.e-interactive:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-raised);
|
||||
background: color-mix(in oklab, var(--surface-raised) 92%, transparent);
|
||||
}
|
||||
.e-interactive:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring), var(--shadow-raised);
|
||||
}
|
||||
.e-interactive:active { transform: translateY(-1px); }
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string | null;
|
||||
icon?: Snippet;
|
||||
actions?: Snippet;
|
||||
}
|
||||
|
||||
let { title, description = null, icon, actions }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="empty" role="status">
|
||||
{#if icon}
|
||||
<div class="icon">{@render icon()}</div>
|
||||
{:else}
|
||||
<div class="icon default">
|
||||
<svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="3 4" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
<h3 class="title">{title}</h3>
|
||||
{#if description}<p class="desc">{description}</p>{/if}
|
||||
{#if actions}<div class="actions">{@render actions()}</div>{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: var(--space-16) var(--space-6);
|
||||
gap: var(--space-3);
|
||||
color: var(--text-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
background: color-mix(in oklab, var(--surface) 60%, transparent);
|
||||
}
|
||||
.icon {
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: var(--text-md);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.desc {
|
||||
margin: 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
max-width: 44ch;
|
||||
}
|
||||
.actions {
|
||||
margin-top: var(--space-4);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
hint?: string | null;
|
||||
error?: string | null;
|
||||
required?: boolean;
|
||||
forId?: string;
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let { label, hint = null, error = null, required = false, forId, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="field">
|
||||
{#if label}
|
||||
<label class="label" for={forId}>
|
||||
{label}
|
||||
{#if required}<span class="req" aria-hidden="true">*</span>{/if}
|
||||
</label>
|
||||
{/if}
|
||||
<div class="control" class:has-error={!!error}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{#if error}
|
||||
<div class="msg msg-error" role="alert">{error}</div>
|
||||
{:else if hint}
|
||||
<div class="msg msg-hint">{hint}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
.label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-label);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.req { color: var(--state-danger); margin-left: 3px; }
|
||||
.control { display: flex; flex-direction: column; }
|
||||
.msg {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.msg-hint { color: var(--text-tertiary); }
|
||||
.msg-error { color: var(--state-danger); }
|
||||
</style>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
value?: string;
|
||||
type?: 'text' | 'search' | 'email' | 'number' | 'url' | 'password' | 'file';
|
||||
placeholder?: string;
|
||||
id?: string;
|
||||
name?: string;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
autocomplete?: import('svelte/elements').FullAutoFill;
|
||||
mono?: boolean;
|
||||
onchange?: (e: Event) => void;
|
||||
oninput?: (e: Event) => void;
|
||||
accept?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(''),
|
||||
type = 'text',
|
||||
placeholder,
|
||||
id,
|
||||
name,
|
||||
required = false,
|
||||
disabled = false,
|
||||
readonly = false,
|
||||
autocomplete,
|
||||
mono = false,
|
||||
onchange,
|
||||
oninput,
|
||||
accept
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<input
|
||||
class="input"
|
||||
class:mono
|
||||
{type}
|
||||
{id}
|
||||
{name}
|
||||
{placeholder}
|
||||
{required}
|
||||
{disabled}
|
||||
{readonly}
|
||||
{autocomplete}
|
||||
{accept}
|
||||
bind:value
|
||||
{onchange}
|
||||
{oninput}
|
||||
/>
|
||||
|
||||
<style>
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 9px 12px;
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.4;
|
||||
transition:
|
||||
border-color var(--dur-fast) var(--ease-standard),
|
||||
background-color var(--dur-fast) var(--ease-standard),
|
||||
box-shadow var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.input.mono { font-family: var(--font-mono); }
|
||||
.input::placeholder { color: var(--text-quaternary); }
|
||||
|
||||
.input:hover { border-color: var(--border-strong); }
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--surface);
|
||||
box-shadow: 0 0 0 3px rgba(46, 134, 209, 0.15);
|
||||
}
|
||||
.input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.input[type='file'] {
|
||||
padding: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.input[type='file']::file-selector-button {
|
||||
margin-right: var(--space-3);
|
||||
padding: 6px 12px;
|
||||
background: var(--surface-raised);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-medium);
|
||||
transition: background-color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.input[type='file']::file-selector-button:hover {
|
||||
background: var(--surface-overlay);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
subtitle?: string | null;
|
||||
eyebrow?: string | null;
|
||||
size?: 'md' | 'lg';
|
||||
crumbs?: Snippet;
|
||||
actions?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
title,
|
||||
subtitle = null,
|
||||
eyebrow = null,
|
||||
size = 'md',
|
||||
crumbs,
|
||||
actions
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<header class="section-header s-{size}">
|
||||
{#if crumbs}<div class="crumbs">{@render crumbs()}</div>{/if}
|
||||
<div class="row">
|
||||
<div class="titles">
|
||||
{#if eyebrow}<div class="eyebrow">{eyebrow}</div>{/if}
|
||||
<h1 class="title">{title}</h1>
|
||||
{#if subtitle}<p class="subtitle">{subtitle}</p>{/if}
|
||||
</div>
|
||||
{#if actions}<div class="actions">{@render actions()}</div>{/if}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.section-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
.crumbs {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
.titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
|
||||
.eyebrow {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-semibold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-label);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-weight: var(--weight-bold);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
.s-md .title { font-size: var(--text-2xl); }
|
||||
.s-lg .title { font-size: var(--text-3xl); }
|
||||
.subtitle {
|
||||
margin: 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.row { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
|
||||
.actions { width: 100%; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
<script lang="ts">
|
||||
interface Option {
|
||||
value: string;
|
||||
label: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
value?: string;
|
||||
options: Option[];
|
||||
id?: string;
|
||||
name?: string;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
onchange?: (e: Event) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(''),
|
||||
options,
|
||||
id,
|
||||
name,
|
||||
required = false,
|
||||
disabled = false,
|
||||
placeholder,
|
||||
onchange
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="wrap">
|
||||
<select
|
||||
class="select"
|
||||
{id}
|
||||
{name}
|
||||
{required}
|
||||
{disabled}
|
||||
bind:value
|
||||
{onchange}
|
||||
>
|
||||
{#if placeholder}
|
||||
<option value="" disabled>{placeholder}</option>
|
||||
{/if}
|
||||
{#each options as o (o.value)}
|
||||
<option value={o.value} disabled={o.disabled}>{o.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<span class="chev" aria-hidden="true">▾</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrap {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
padding: 9px 32px 9px 12px;
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color var(--dur-fast) var(--ease-standard),
|
||||
background-color var(--dur-fast) var(--ease-standard),
|
||||
box-shadow var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.select:hover { border-color: var(--border-strong); }
|
||||
.select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--surface);
|
||||
box-shadow: 0 0 0 3px rgba(46, 134, 209, 0.15);
|
||||
}
|
||||
.select:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.chev {
|
||||
position: absolute;
|
||||
right: var(--space-3);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-tertiary);
|
||||
pointer-events: none;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
width?: string;
|
||||
height?: string;
|
||||
radius?: 'sm' | 'md' | 'lg' | 'pill';
|
||||
block?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
width = '100%',
|
||||
height = '1em',
|
||||
radius = 'sm',
|
||||
block = false
|
||||
}: Props = $props();
|
||||
|
||||
let style = $derived(`width:${width};height:${height};`);
|
||||
</script>
|
||||
|
||||
<span class="sk r-{radius}" class:block {style}></span>
|
||||
|
||||
<style>
|
||||
.sk {
|
||||
display: inline-block;
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
var(--surface-raised) 0%,
|
||||
var(--surface-overlay) 50%,
|
||||
var(--surface-raised) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.6s var(--ease-linear) infinite;
|
||||
}
|
||||
.block { display: block; }
|
||||
.r-sm { border-radius: var(--radius-sm); }
|
||||
.r-md { border-radius: var(--radius-md); }
|
||||
.r-lg { border-radius: var(--radius-lg); }
|
||||
.r-pill { border-radius: var(--radius-pill); }
|
||||
</style>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script lang="ts">
|
||||
import { tweenedNumber } from '$ui/motion/tweenNumber.js';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type Size = 'sm' | 'md' | 'lg' | 'xl';
|
||||
type Tone = 'primary' | 'accent' | 'online' | 'warning' | 'danger';
|
||||
|
||||
interface Props {
|
||||
label?: string;
|
||||
value: number | string | null | undefined;
|
||||
unit?: string;
|
||||
size?: Size;
|
||||
tone?: Tone;
|
||||
tween?: boolean;
|
||||
format?: (n: number) => string;
|
||||
trailing?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
label,
|
||||
value,
|
||||
unit,
|
||||
size = 'md',
|
||||
tone = 'primary',
|
||||
tween = true,
|
||||
format,
|
||||
trailing
|
||||
}: Props = $props();
|
||||
|
||||
// Only numeric values can be tweened. Strings/nulls render as-is.
|
||||
let numeric = $derived(typeof value === 'number' ? value : null);
|
||||
// Start at 0 — the $effect below jumps to the real initial value on
|
||||
// first paint, which is the intended entrance animation.
|
||||
let tweened = tweenedNumber(0);
|
||||
|
||||
$effect(() => {
|
||||
if (numeric !== null) tweened.set(numeric);
|
||||
});
|
||||
|
||||
let displayValue = $derived.by(() => {
|
||||
if (value === null || value === undefined) return '—';
|
||||
if (typeof value === 'string') return value;
|
||||
const n = tween ? $tweened : value;
|
||||
return format ? format(n) : Math.round(n).toString();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="stat s-{size} t-{tone}">
|
||||
{#if label}
|
||||
<div class="label">{label}</div>
|
||||
{/if}
|
||||
<div class="value-row">
|
||||
<span class="value">{displayValue}</span>
|
||||
{#if unit}<span class="unit">{unit}</span>{/if}
|
||||
{#if trailing}<span class="trailing">{@render trailing()}</span>{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
.label {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-label);
|
||||
}
|
||||
.value-row {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.value {
|
||||
font-family: var(--font-numeric);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: var(--weight-semibold);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
.unit {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-tertiary);
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
.trailing { display: inline-flex; }
|
||||
|
||||
.s-sm .value { font-size: var(--text-md); }
|
||||
.s-md .value { font-size: var(--text-xl); }
|
||||
.s-lg .value { font-size: var(--text-2xl); }
|
||||
.s-xl .value { font-size: var(--text-3xl); }
|
||||
|
||||
.t-primary .value { color: var(--text-primary); }
|
||||
.t-accent .value { color: var(--accent-primary); }
|
||||
.t-online .value { color: var(--state-online); }
|
||||
.t-warning .value { color: var(--state-warning); }
|
||||
.t-danger .value { color: var(--state-danger); }
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script lang="ts">
|
||||
import type { Health } from '$ui/stores/servers.js';
|
||||
|
||||
interface Props {
|
||||
health?: Health;
|
||||
size?: 'sm' | 'md';
|
||||
label?: string | null;
|
||||
}
|
||||
|
||||
let { health = 'offline', size = 'md', label = null }: Props = $props();
|
||||
|
||||
let toneClass = $derived(
|
||||
health === 'online' ? 't-online' :
|
||||
health === 'stale' ? 't-warning' :
|
||||
't-danger'
|
||||
);
|
||||
|
||||
let announceLabel = $derived(
|
||||
label ?? (
|
||||
health === 'online' ? 'online' :
|
||||
health === 'stale' ? 'stale' :
|
||||
'offline'
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
||||
<span class="pip s-{size} {toneClass}" role="status" aria-label={announceLabel}>
|
||||
<span class="halo" aria-hidden="true"></span>
|
||||
<span class="dot" aria-hidden="true"></span>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.pip {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.s-sm { width: 8px; height: 8px; }
|
||||
.s-md { width: 10px; height: 10px; }
|
||||
|
||||
.dot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Halo — opacity+scale only, GPU-cheap, no box-shadow ring. */
|
||||
.halo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.t-online .dot { background: var(--state-online); box-shadow: 0 0 4px rgba(124, 212, 255, 0.55); }
|
||||
.t-online .halo { background: var(--state-online); animation: pip-breathe 2.4s var(--ease-standard) infinite; }
|
||||
|
||||
.t-warning .dot { background: var(--state-warning); }
|
||||
.t-danger .dot { background: var(--state-danger); opacity: 0.7; }
|
||||
</style>
|
||||
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
interface Tab {
|
||||
id: string;
|
||||
label: string;
|
||||
badge?: string | number | null;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tabs: Tab[];
|
||||
value: string;
|
||||
onchange?: (id: string) => void;
|
||||
ariaLabel?: string;
|
||||
size?: 'sm' | 'md';
|
||||
}
|
||||
|
||||
let { tabs, value = $bindable(), onchange, ariaLabel, size = 'md' }: Props = $props();
|
||||
|
||||
function select(id: string, disabled: boolean | undefined) {
|
||||
if (disabled) return;
|
||||
value = id;
|
||||
onchange?.(id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="tabs s-{size}" role="tablist" aria-label={ariaLabel}>
|
||||
{#each tabs as t (t.id)}
|
||||
<button
|
||||
type="button"
|
||||
class="tab"
|
||||
class:active={value === t.id}
|
||||
role="tab"
|
||||
aria-selected={value === t.id}
|
||||
disabled={t.disabled}
|
||||
onclick={() => select(t.id, t.disabled)}
|
||||
>
|
||||
<span class="lbl">{t.label}</span>
|
||||
{#if t.badge !== undefined && t.badge !== null && t.badge !== ''}
|
||||
<span class="badge">{t.badge}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tabs {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
background: color-mix(in oklab, var(--surface) 80%, transparent);
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.tab {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-tertiary);
|
||||
font-family: var(--font-body);
|
||||
font-weight: var(--weight-medium);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-pill);
|
||||
transition:
|
||||
color var(--dur-fast) var(--ease-standard),
|
||||
background-color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.s-sm .tab { padding: 6px 12px; font-size: var(--text-xs); }
|
||||
.s-md .tab { padding: 8px 16px; font-size: var(--text-sm); }
|
||||
|
||||
.tab:hover:not(:disabled):not(.active) { color: var(--text-primary); }
|
||||
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.tab:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
.tab.active {
|
||||
background: var(--surface-raised);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 5px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--surface-overlay);
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
}
|
||||
.tab.active .badge {
|
||||
background: var(--accent-primary);
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
value?: string;
|
||||
placeholder?: string;
|
||||
id?: string;
|
||||
name?: string;
|
||||
rows?: number;
|
||||
required?: boolean;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
mono?: boolean;
|
||||
oninput?: (e: Event) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
value = $bindable(''),
|
||||
placeholder,
|
||||
id,
|
||||
name,
|
||||
rows = 4,
|
||||
required = false,
|
||||
disabled = false,
|
||||
readonly = false,
|
||||
mono = false,
|
||||
oninput
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<textarea
|
||||
class="textarea"
|
||||
class:mono
|
||||
{id}
|
||||
{name}
|
||||
{placeholder}
|
||||
{rows}
|
||||
{required}
|
||||
{disabled}
|
||||
{readonly}
|
||||
bind:value
|
||||
{oninput}
|
||||
></textarea>
|
||||
|
||||
<style>
|
||||
.textarea {
|
||||
width: 100%;
|
||||
padding: var(--space-3) var(--space-3);
|
||||
background: var(--surface-sunken);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-body);
|
||||
resize: vertical;
|
||||
transition:
|
||||
border-color var(--dur-fast) var(--ease-standard),
|
||||
background-color var(--dur-fast) var(--ease-standard),
|
||||
box-shadow var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.textarea.mono { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-mono); }
|
||||
.textarea::placeholder { color: var(--text-quaternary); }
|
||||
.textarea:hover { border-color: var(--border-strong); }
|
||||
.textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
background: var(--surface);
|
||||
box-shadow: 0 0 0 3px rgba(46, 134, 209, 0.15);
|
||||
}
|
||||
.textarea:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { tweened, type Tweened } from 'svelte/motion';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
|
||||
// Svelte's `tweened` store, pre-configured for our design system so number
|
||||
// changes feel like Apple's counter animations: fast, expressive out-quart,
|
||||
// tabular-numeric-friendly.
|
||||
//
|
||||
// Respects prefers-reduced-motion at construction time — reduced-motion users
|
||||
// get instant updates instead of interpolation.
|
||||
|
||||
const REDUCED_MOTION =
|
||||
typeof window !== 'undefined' &&
|
||||
window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
export function tweenedNumber(
|
||||
initial = 0,
|
||||
opts: { duration?: number } = {}
|
||||
): Tweened<number> {
|
||||
return tweened(initial, {
|
||||
duration: REDUCED_MOTION ? 0 : (opts.duration ?? 360),
|
||||
easing: cubicOut
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// SvelteKit `onNavigate` helper — wraps client-side navigation in the
|
||||
// browser's View Transitions API so route changes cross-fade cleanly and
|
||||
// shared-element transitions (Fleet card → Server detail hero) morph.
|
||||
//
|
||||
// Chromium ships the API today; Firefox and Safari fall through to a plain
|
||||
// navigation — same behavior as before, just without the transition.
|
||||
|
||||
// Structural type — accepts whatever SvelteKit passes to onNavigate without
|
||||
// coupling to a specific @sveltejs/kit version's type name.
|
||||
type NavigationLike = { complete: Promise<unknown> };
|
||||
|
||||
export function enableViewTransitions(navigation: NavigationLike): Promise<void> | void {
|
||||
// Feature-detect without a custom Document extension — the DOM lib type
|
||||
// varies between TS versions, and any narrowing has to survive both.
|
||||
const start = (document as unknown as {
|
||||
startViewTransition?: (cb: () => void | Promise<void>) => unknown;
|
||||
}).startViewTransition;
|
||||
|
||||
if (typeof start !== 'function') return;
|
||||
|
||||
return new Promise<void>((resolve) => {
|
||||
start.call(document, async () => {
|
||||
resolve();
|
||||
await navigation.complete;
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -6,8 +6,14 @@
|
||||
// assets. Importing the CSS from JS puts it on the module graph, which
|
||||
// Vite *does* walk, so the font binaries end up in
|
||||
// build/client/_app/immutable/assets/files/.
|
||||
//
|
||||
// Global set:
|
||||
// - Inter (400/500/600/700) — everything.
|
||||
// - JetBrains Mono (400/500) — data cells (timestamps, scores, IDs).
|
||||
//
|
||||
// Alfa Slab One is NOT loaded here — it's used only in BrandMark, which
|
||||
// imports its own weight so the rest of the product doesn't pay for it.
|
||||
|
||||
import '@fontsource/alfa-slab-one/400.css';
|
||||
import '@fontsource/inter/400.css';
|
||||
import '@fontsource/inter/500.css';
|
||||
import '@fontsource/inter/600.css';
|
||||
|
||||
+229
-88
@@ -1,121 +1,262 @@
|
||||
/* Electric Cherry — design tokens.
|
||||
Blue-primary theme: bright saturated mid-blue from the brand mark,
|
||||
with cherry red demoted to accent + danger. Cool-tinted dark surfaces,
|
||||
larger typography, more generous spacing.
|
||||
|
||||
Font @import chains live in src/lib/ui/styles/fonts.ts and are pulled
|
||||
in by +layout.svelte via JS import — Vite's CSS `@import` inlines the
|
||||
text but doesn't emit the url()-referenced woff files as assets, so
|
||||
we need the JS module graph to see them. */
|
||||
This file is the single source of truth for color, type, spacing, motion,
|
||||
and elevation. It's organized in three layers:
|
||||
|
||||
1. RAW RAMPS — the actual color/type/space values. Never referenced
|
||||
directly by components.
|
||||
2. SEMANTIC ALIASES — what components should reference (--surface,
|
||||
--text-primary, --state-online, --space-4, etc.). Swapping the palette
|
||||
or spacing rhythm later is a single-file edit.
|
||||
3. LEGACY ALIASES — old names (--bg-page, --accent, --ink-300, --pad-card…)
|
||||
mapped onto new semantic values. Kept alive so existing components render
|
||||
during the phased redesign; each page rewrite removes its usage, and
|
||||
this block shrinks over time.
|
||||
|
||||
Design principles this file encodes:
|
||||
· One accent (blue). Cyan/amber/red/green mean state only.
|
||||
· Depth by light, not lines. One ambient shadow + subtle translucency.
|
||||
· One typeface (Inter). Mono for data. Display face lives inside BrandMark.
|
||||
· Motion tokens standardize easings + durations across the product. */
|
||||
|
||||
:root {
|
||||
/* Blue — surfaces + primary (matches logo circle) */
|
||||
--blue-975: #060b16;
|
||||
--blue-925: #0a1428;
|
||||
--blue-875: #12203a;
|
||||
--blue-825: #182b4d;
|
||||
--blue-700: #1e3260;
|
||||
--blue-600: #2560a8;
|
||||
/* ---------- 1. RAW RAMPS ---------- */
|
||||
|
||||
/* Blue — one hue, five stops. Brand primary + focus/link. */
|
||||
--blue-950: #060b16;
|
||||
--blue-900: #0d1826;
|
||||
--blue-700: #1c3d6b;
|
||||
--blue-500: #2e86d1;
|
||||
--blue-400: #4ea3e8;
|
||||
--blue-300: #7cc0f5;
|
||||
|
||||
/* Spark — soft cyan accent */
|
||||
--spark-500: #7cd4ff;
|
||||
--spark-400: #a8e5ff;
|
||||
--spark-glow: 0 0 8px rgba(124, 212, 255, 0.55);
|
||||
--spark-glow-lg: 0 0 14px rgba(124, 212, 255, 0.45);
|
||||
/* Neutral gray — cool-tinted, distinct from the blue ramp so surfaces
|
||||
stop being tinted-blue on tinted-blue. */
|
||||
--gray-975: #08090c;
|
||||
--gray-950: #0d0f14;
|
||||
--gray-925: #12151c;
|
||||
--gray-900: #171b24;
|
||||
--gray-850: #1f242f;
|
||||
--gray-800: #262c39;
|
||||
--gray-700: #363d4d;
|
||||
--gray-500: #6b7488;
|
||||
--gray-400: #8892a5;
|
||||
--gray-300: #a8b2c4;
|
||||
--gray-200: #c5cddc;
|
||||
--gray-100: #dfe4ee;
|
||||
--gray-050: #eef2f8;
|
||||
|
||||
/* Cherry — retained for danger + brand-cherry accent only */
|
||||
--cherry-500: #c8102e;
|
||||
--cherry-400: #e93656;
|
||||
--cherry-300: #ff7a92;
|
||||
/* State — reserved for actual state, never decoration. */
|
||||
--state-online: #7cd4ff;
|
||||
--state-warning: #ffb020;
|
||||
--state-danger: #ff5670;
|
||||
--state-restarting: #7cc0f5;
|
||||
|
||||
/* Neutrals — cool blue-white */
|
||||
--cream: #eef4fb;
|
||||
--cream-dim: #b8c8dc;
|
||||
--ink-100: #eaf1fb;
|
||||
--ink-300: #94a8c4;
|
||||
--ink-500: #5a6d8a;
|
||||
--ink-700: #2a3a55;
|
||||
/* ---------- 2. SEMANTIC ALIASES ---------- */
|
||||
|
||||
/* State */
|
||||
--amber-500: #ffb020;
|
||||
--amber-glow: 0 0 8px rgba(255, 176, 32, 0.4);
|
||||
--danger-500: var(--cherry-500);
|
||||
--success-500: #4ade80;
|
||||
/* Surfaces — three tiers of depth, all near-black cool gray. */
|
||||
--surface-sunken: var(--gray-975);
|
||||
--surface: var(--gray-925);
|
||||
--surface-raised: var(--gray-850);
|
||||
--surface-overlay: var(--gray-800);
|
||||
|
||||
/* Semantic aliases — components should reference THESE, not the raw ramps.
|
||||
Swapping palette later is then a single-file edit. */
|
||||
--bg-page: var(--blue-975);
|
||||
--bg-nav: var(--blue-925);
|
||||
--bg-card: var(--blue-875);
|
||||
--bg-card-hi: var(--blue-825);
|
||||
--border: var(--blue-700);
|
||||
--border-hi: var(--blue-600);
|
||||
--accent: var(--blue-500);
|
||||
--accent-hi: var(--blue-400);
|
||||
--accent-glow: 0 0 8px rgba(46, 134, 209, 0.5);
|
||||
--accent-glow-lg: 0 0 14px rgba(46, 134, 209, 0.4);
|
||||
/* Text — four steps of hierarchy on dark. */
|
||||
--text-primary: var(--gray-050);
|
||||
--text-secondary: var(--gray-300);
|
||||
--text-tertiary: var(--gray-500);
|
||||
--text-quaternary: var(--gray-700);
|
||||
--text-on-accent: #ffffff;
|
||||
|
||||
/* Typography */
|
||||
--font-display: 'Alfa Slab One', 'Georgia', serif;
|
||||
/* Border — hairlines, no more. */
|
||||
--border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--border-strong: rgba(255, 255, 255, 0.12);
|
||||
--border-focus: var(--blue-500);
|
||||
|
||||
/* Accent — one color, one voice. */
|
||||
--accent-primary: var(--blue-500);
|
||||
--accent-primary-hover: var(--blue-300);
|
||||
--accent-primary-active: #256cae;
|
||||
|
||||
/* Typography — Inter everywhere, mono for data.
|
||||
Display face lives inside BrandMark; no global --font-display token. */
|
||||
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-numeric: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
|
||||
/* Type scale — substantial bump */
|
||||
--text-xs: 11px;
|
||||
/* Type scale — cleaner ramp anchored at 15px body. */
|
||||
--text-xs: 12px;
|
||||
--text-sm: 13px;
|
||||
--text-base: 15px;
|
||||
--text-md: 17px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 44px;
|
||||
|
||||
--leading-tight: 1.15;
|
||||
--leading-body: 1.55;
|
||||
--leading-mono: 1.5;
|
||||
|
||||
--tracking-tight: -0.01em;
|
||||
--tracking-normal: 0;
|
||||
--tracking-wide: 0.02em;
|
||||
--tracking-label: 0.08em;
|
||||
|
||||
/* Weight scale — one variable at each rung so intent is legible. */
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--weight-bold: 700;
|
||||
|
||||
/* Spacing — strict 8pt grid (with 4pt half-step). */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
--space-24: 96px;
|
||||
|
||||
/* Radii — three steps + pill. Softer than the old 4/8/12. */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 16px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
/* Elevation — two shadows only, ambient + raised. No glow rings. */
|
||||
--shadow-ambient:
|
||||
0 1px 2px rgba(0, 0, 0, 0.35),
|
||||
0 4px 12px rgba(0, 0, 0, 0.22);
|
||||
--shadow-raised:
|
||||
0 2px 4px rgba(0, 0, 0, 0.4),
|
||||
0 12px 28px rgba(0, 0, 0, 0.32);
|
||||
|
||||
/* Motion — standardized easings + durations. Apple-esque out-quart. */
|
||||
--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-linear: linear;
|
||||
--dur-instant: 80ms;
|
||||
--dur-fast: 160ms;
|
||||
--dur-base: 240ms;
|
||||
--dur-slow: 360ms;
|
||||
--dur-slower: 560ms;
|
||||
|
||||
/* Focus ring — 2px accent, 2px offset, everywhere. */
|
||||
--focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-primary);
|
||||
|
||||
/* ---------- 3. LEGACY ALIASES ----------
|
||||
Old token names, mapped onto new semantic values so components that
|
||||
haven't been rewritten yet keep rendering. Delete entries as pages
|
||||
migrate; the block should be empty at the end of Phase 8. */
|
||||
|
||||
/* Old blue ramp names */
|
||||
--blue-975: var(--gray-975);
|
||||
--blue-925: var(--gray-950);
|
||||
--blue-875: var(--gray-925);
|
||||
--blue-825: var(--gray-850);
|
||||
--blue-600: #256cae;
|
||||
--blue-400: var(--blue-300);
|
||||
|
||||
/* Old spark/cherry/amber names */
|
||||
--spark-500: var(--state-online);
|
||||
--spark-400: #a8e5ff;
|
||||
--spark-glow: 0 0 8px rgba(124, 212, 255, 0.45);
|
||||
--spark-glow-lg: 0 0 14px rgba(124, 212, 255, 0.35);
|
||||
--cherry-500: var(--state-danger);
|
||||
--cherry-400: #ff7590;
|
||||
--cherry-300: #ff9db0;
|
||||
--amber-500: var(--state-warning);
|
||||
--amber-glow: 0 0 8px rgba(255, 176, 32, 0.32);
|
||||
--danger-500: var(--state-danger);
|
||||
--success-500: #4ade80;
|
||||
|
||||
/* Old neutral names */
|
||||
--cream: var(--text-primary);
|
||||
--cream-dim: var(--gray-200);
|
||||
--ink-100: var(--text-primary);
|
||||
--ink-300: var(--text-secondary);
|
||||
--ink-500: var(--text-tertiary);
|
||||
--ink-700: var(--text-quaternary);
|
||||
|
||||
/* Old surface/border/accent aliases */
|
||||
--bg-page: var(--surface-sunken);
|
||||
--bg-nav: var(--surface);
|
||||
--bg-card: var(--surface);
|
||||
--bg-card-hi: var(--surface-raised);
|
||||
--border: var(--border-subtle);
|
||||
--border-hi: var(--border-strong);
|
||||
--accent: var(--accent-primary);
|
||||
--accent-hi: var(--accent-primary-hover);
|
||||
--accent-glow: 0 0 0 1px rgba(46, 134, 209, 0.35);
|
||||
--accent-glow-lg: 0 0 0 1px rgba(46, 134, 209, 0.28);
|
||||
|
||||
/* Old typography names */
|
||||
--font-display: 'Alfa Slab One', 'Georgia', serif;
|
||||
--text-mono: 13px;
|
||||
--text-mono-sm: 12px;
|
||||
--tracking-display: 0.12em;
|
||||
--tracking-nav: 0.03em;
|
||||
|
||||
--leading-tight: 1.2;
|
||||
--leading-body: 1.6;
|
||||
--leading-mono: 1.55;
|
||||
|
||||
--tracking-display: 2px;
|
||||
--tracking-nav: 0.4px;
|
||||
--tracking-label: 1px;
|
||||
|
||||
/* Spacing */
|
||||
--pad-card: 20px;
|
||||
--pad-panel: 24px;
|
||||
--pad-nav-y: 16px;
|
||||
--pad-nav-x: 32px;
|
||||
--gap-section: 32px;
|
||||
--gap-cards: 18px;
|
||||
|
||||
/* Radii */
|
||||
--r-sm: 4px;
|
||||
--r-md: 8px;
|
||||
--r-lg: 12px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-card: 0 2px 12px rgba(6, 11, 22, 0.5);
|
||||
--shadow-panel: 0 4px 24px rgba(6, 11, 22, 0.4);
|
||||
/* Old spacing/radii names */
|
||||
--pad-card: var(--space-5);
|
||||
--pad-panel: var(--space-6);
|
||||
--pad-nav-y: var(--space-4);
|
||||
--pad-nav-x: var(--space-8);
|
||||
--gap-section: var(--space-8);
|
||||
--gap-cards: var(--space-4);
|
||||
--r-sm: var(--radius-sm);
|
||||
--r-md: var(--radius-md);
|
||||
--r-lg: var(--radius-lg);
|
||||
--shadow-card: var(--shadow-ambient);
|
||||
--shadow-panel: var(--shadow-raised);
|
||||
}
|
||||
|
||||
/* Keyframes — pared down.
|
||||
Legacy names kept so existing components animate; the new StatusPip
|
||||
uses `pip-breathe` (opacity-only, GPU-cheap). */
|
||||
|
||||
@keyframes pip-breathe {
|
||||
0%, 100% { opacity: 0.35; transform: scale(1); }
|
||||
50% { opacity: 0.9; transform: scale(1.4); }
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from { background-position: -200% 0; }
|
||||
to { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
/* Legacy — retained until ServerCard/BrandMark/StatusDot are replaced. */
|
||||
@keyframes electric-pulse {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(124, 212, 255, 0.55), var(--spark-glow);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 6px rgba(124, 212, 255, 0), var(--spark-glow-lg);
|
||||
}
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(124, 212, 255, 0.5); }
|
||||
50% { box-shadow: 0 0 0 5px rgba(124, 212, 255, 0); }
|
||||
}
|
||||
|
||||
@keyframes cherry-fizz {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-1px); }
|
||||
50% { transform: translateY(-1px); }
|
||||
}
|
||||
|
||||
@keyframes spark-slide {
|
||||
from { background-position: -100% 0; }
|
||||
to { background-position: 200% 0; }
|
||||
to { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
/* Reduced motion — neutralize all animation. Components that respect this
|
||||
token get calm behavior for free; the media query below handles the
|
||||
ones that don't. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:root {
|
||||
--dur-instant: 0.01ms;
|
||||
--dur-fast: 0.01ms;
|
||||
--dur-base: 0.01ms;
|
||||
--dur-slow: 0.01ms;
|
||||
--dur-slower: 0.01ms;
|
||||
}
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
// Small global toast queue.
|
||||
//
|
||||
// Any part of the UI can drop a message and it appears in the corner for a
|
||||
// couple of seconds, then quietly dismisses. Replaces the ad-hoc "flash"
|
||||
// strings scattered across pages when the message doesn't need to live inline
|
||||
// with a form.
|
||||
|
||||
export type ToastVariant = 'info' | 'success' | 'warning' | 'danger';
|
||||
|
||||
export interface Toast {
|
||||
id: number;
|
||||
message: string;
|
||||
variant: ToastVariant;
|
||||
ttl: number;
|
||||
}
|
||||
|
||||
export const toasts = writable<Toast[]>([]);
|
||||
|
||||
let nextId = 1;
|
||||
|
||||
export function toast(
|
||||
message: string,
|
||||
opts: { variant?: ToastVariant; ttl?: number } = {}
|
||||
): void {
|
||||
const t: Toast = {
|
||||
id: nextId++,
|
||||
message,
|
||||
variant: opts.variant ?? 'info',
|
||||
ttl: opts.ttl ?? 3500
|
||||
};
|
||||
toasts.update((arr) => [...arr, t]);
|
||||
if (t.ttl > 0) {
|
||||
setTimeout(() => dismiss(t.id), t.ttl);
|
||||
}
|
||||
}
|
||||
|
||||
export function dismiss(id: number): void {
|
||||
toasts.update((arr) => arr.filter((t) => t.id !== id));
|
||||
}
|
||||
Reference in New Issue
Block a user