codebay 0.0.1 → 0.2.0

package/src/components/Skeleton.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	let {
+		variant = 'text',
+		width
+	}: {
+		variant?: 'text' | 'pill' | 'wide';
+		width?: string;
+	} = $props();
+</script>
+
+<span class="skel {variant}" style:width></span>
+
+<style>
+	.skel {
+		display: inline-block;
+		height: 0.95em;
+		background: linear-gradient(
+			90deg,
+			var(--rule-soft) 25%,
+			var(--bg-card) 50%,
+			var(--rule-soft) 75%
+		);
+		background-size: 200% 100%;
+		animation: shimmer 1.4s linear infinite;
+		vertical-align: middle;
+	}
+	.skel.wide {
+		width: min(420px, 60vw);
+	}
+	.skel.pill {
+		width: 64px;
+		height: 18px;
+		border-radius: 999px;
+	}
+	@keyframes shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+</style>

package/src/components/StatusBadge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Instance } from '../types.ts';
+
+	let { status }: { status: Instance['status'] } = $props();
+
+	const label: Record<Instance['status'], string> = {
+		creating: 'Booting…',
+		running: 'Running',
+		stopped: 'Stopped',
+		error: 'Error'
+	};
+</script>
+
+<span class="status {status}">{label[status]}</span>
+
+<style>
+	/* Error is the one true alarm state, so it alone gets hue; the rest read via fill. */
+	.status {
+		font-family: var(--font-mono);
+		font-weight: 600;
+		font-size: 10px;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		padding: 3px 7px;
+		border: 1px solid var(--ink);
+		white-space: nowrap;
+	}
+	.status.running {
+		background: var(--ink);
+		color: var(--bg);
+	}
+	.status.stopped {
+		background: transparent;
+		color: var(--ink-soft);
+		border-color: var(--ink-faint);
+	}
+	.status.creating {
+		background: var(--ink);
+		color: var(--bg);
+		animation: lcd-blink 1.1s steps(1) infinite;
+	}
+	.status.error {
+		background: var(--danger);
+		color: var(--bg);
+		border-color: var(--danger);
+		font-weight: 700;
+	}
+	@keyframes lcd-blink {
+		50% {
+			background: transparent;
+			color: var(--ink);
+		}
+	}
+</style>

package/src/components/ThemePicker.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import Sun from '@lucide/svelte/icons/sun';
+	import Moon from '@lucide/svelte/icons/moon';
+	import Monitor from '@lucide/svelte/icons/monitor';
+	import { getTheme, setTheme, applyTheme, type Theme } from '../theme.ts';
+
+	let theme: Theme = $state(getTheme());
+
+	const options: { value: Theme; label: string; icon: typeof Sun }[] = [
+		{ value: 'auto', label: 'Auto', icon: Monitor },
+		{ value: 'light', label: 'Light', icon: Sun },
+		{ value: 'dark', label: 'Dark', icon: Moon }
+	];
+
+	function select(value: Theme) {
+		theme = value;
+		setTheme(value);
+		applyTheme(value);
+	}
+</script>
+
+<div class="picker" role="radiogroup" aria-label="Theme">
+	{#each options as { value, label, icon: Icon } (value)}
+		<button
+			type="button"
+			class="segment"
+			class:active={theme === value}
+			role="radio"
+			aria-checked={theme === value}
+			onclick={() => select(value)}
+		>
+			<Icon size={13} />
+			{label}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.picker {
+		display: inline-flex;
+		flex: none;
+		border: 1px solid var(--ink);
+		background: var(--bg-card);
+	}
+	.segment {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 7px 12px;
+		font-family: var(--font-mono);
+		font-weight: 600;
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		border: none;
+		background: transparent;
+		color: var(--ink);
+		cursor: pointer;
+	}
+	.segment + .segment {
+		border-left: 1px solid var(--ink);
+	}
+	.segment:hover:not(.active) {
+		background: var(--ink);
+		color: var(--bg);
+	}
+	.segment.active {
+		font-weight: 700;
+		background: var(--ink);
+		color: var(--bg);
+		cursor: default;
+	}
+	.segment:focus-visible {
+		outline: 2px solid var(--ink);
+		outline-offset: -2px;
+	}
+</style>

package/src/components/TopBar.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import Plus from '@lucide/svelte/icons/plus';
+	import Component from '@lucide/svelte/icons/component';
+	import { isDev } from 'mochi-framework';
+	import type { AuthProvider } from '../types.ts';
+	import Brand from './Brand.svelte';
+	import SettingsCog from './SettingsCog.svelte';
+	import CredMenu from './CredMenu.svelte';
+	import Button from './Button.svelte';
+
+	// Action state is injected so the bar stays presentational and reusable on /debug.
+	let {
+		auth,
+		canDelete = false,
+		ready = true,
+		creating = false,
+		onNew,
+		onDeleteAll
+	}: {
+		auth: AuthProvider[];
+		canDelete?: boolean;
+		ready?: boolean;
+		creating?: boolean;
+		onNew?: () => void;
+		onDeleteAll?: () => void;
+	} = $props();
+</script>
+
+<header class="topbar">
+	<Brand />
+	<div class="topbar-actions">
+		{#if isDev}
+			<Button variant="default" size="sm" icon={Component} href="/debug">Debug</Button>
+		{/if}
+		<SettingsCog />
+		<CredMenu {auth} />
+		<Button variant="danger" size="sm" onclick={onDeleteAll} disabled={!canDelete}>
+			Delete all
+		</Button>
+		<Button
+			variant="primary"
+			icon={creating ? undefined : Plus}
+			onclick={onNew}
+			disabled={!ready || creating}
+		>
+			{creating ? 'Creating…' : 'New instance'}
+		</Button>
+	</div>
+</header>
+
+<style>
+	.topbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 18px 28px;
+		border-bottom: 1px solid var(--rule);
+	}
+	.topbar-actions {
+		display: inline-flex;
+		align-items: center;
+		gap: 14px;
+	}
+</style>