codebay 0.0.1 → 0.2.0

package/src/components/AvatarEditor.svelte

@@ -0,0 +1,321 @@
+<script lang="ts">
+	import Copy from '@lucide/svelte/icons/copy';
+	import Eraser from '@lucide/svelte/icons/eraser';
+	import Contrast from '@lucide/svelte/icons/contrast';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
+	import toast from 'svelte-french-toast';
+	import { ROWS, COLS, ON, OFF, type AvatarArt } from '../avatars/types.ts';
+	import {
+		cellsToPixels,
+		normalizeName,
+		toModuleSource,
+		toIssueUrl
+	} from '../avatars/serialize.ts';
+	import Avatar from './Avatar.svelte';
+	import Button from './Button.svelte';
+
+	// Picked randomly so the hint varies each time the page loads.
+	const NAME_PROMPTS = [
+		'dragon',
+		'unicorn',
+		'cactus',
+		'comet',
+		'pretzel',
+		'volcano',
+		'narwhal',
+		'waffle',
+		'satellite',
+		'pineapple',
+		'kraken',
+		'yeti',
+		'moose',
+		'lighthouse',
+		'toaster',
+		'hedgehog',
+		'walrus',
+		'pumpkin',
+		'jellyfish',
+		'tornado',
+		'igloo',
+		'boomerang'
+	];
+	const namePlaceholder = NAME_PROMPTS[Math.floor(Math.random() * NAME_PROMPTS.length)];
+
+	// Same shape `decode()` produces, so the two round-trip.
+	let cells = $state<number[]>(Array(ROWS * COLS).fill(OFF));
+	let avatarName = $state('');
+
+	const slug = $derived(normalizeName(avatarName));
+	const art = $derived<AvatarArt>({ name: slug || 'my-avatar', pixels: cellsToPixels(cells) });
+	// Contributing needs a name and at least one lit pixel — a blank sprite is no sprite.
+	const canContribute = $derived(slug.length > 0 && cells.some((c) => c === ON));
+
+	// Capturing the pointer on the grid is what lets one stroke paint every cell it crosses.
+	let gridEl = $state<HTMLDivElement | null>(null);
+	let painting = false;
+	let paintValue: number = ON;
+
+	// Mirrors Avatar.svelte's bezel so the user sees the real framing while drawing.
+	const RING_CELLS = Array.from({ length: 100 }, (_, i) => ({
+		r: Math.floor(i / 10),
+		c: i % 10
+	})).filter(({ r, c }) => r === 0 || r === 9 || c === 0 || c === 9);
+
+	function cellAt(e: PointerEvent): number | null {
+		if (!gridEl) return null;
+		const rect = gridEl.getBoundingClientRect();
+		const c = Math.floor(((e.clientX - rect.left) / rect.width) * COLS);
+		const r = Math.floor(((e.clientY - rect.top) / rect.height) * ROWS);
+		if (r < 0 || r >= ROWS || c < 0 || c >= COLS) return null;
+		return r * COLS + c;
+	}
+
+	function onpointerdown(e: PointerEvent) {
+		const i = cellAt(e);
+		if (i == null) return;
+		(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+		painting = true;
+		paintValue = cells[i] === ON ? OFF : ON;
+		cells[i] = paintValue;
+	}
+
+	function onpointermove(e: PointerEvent) {
+		if (!painting) return;
+		const i = cellAt(e);
+		if (i != null) cells[i] = paintValue;
+	}
+
+	function stopPainting() {
+		painting = false;
+	}
+
+	function clear() {
+		cells = Array(ROWS * COLS).fill(OFF);
+	}
+
+	function invert() {
+		cells = cells.map((c) => (c === ON ? OFF : ON));
+	}
+
+	async function copyModule() {
+		try {
+			await navigator.clipboard.writeText(toModuleSource(art));
+			toast('Copied — paste it into the GitHub issue');
+		} catch (err) {
+			toast.error(`Copy failed: ${(err as Error).message}`);
+		}
+	}
+</script>
+
+<section class="editor">
+	<div class="head">
+		<h2>Draw your avatar</h2>
+	</div>
+
+	<div class="body">
+		<div class="grid-frame">
+			{#each RING_CELLS as { r, c }, i (i)}
+				<span class="ring-cell" style="grid-row:{r + 1};grid-column:{c + 1}" aria-hidden="true"
+				></span>
+			{/each}
+			<div
+				class="grid"
+				bind:this={gridEl}
+				role="img"
+				aria-label="8 by 8 pixel drawing canvas"
+				{onpointerdown}
+				{onpointermove}
+				onpointerup={stopPainting}
+				onpointercancel={stopPainting}
+				onlostpointercapture={stopPainting}
+			>
+				{#each cells as cell, i (i)}
+					<span class="cell" class:on={cell === ON}></span>
+				{/each}
+			</div>
+		</div>
+
+		<div class="side">
+			<div class="preview">
+				<div class="preview-label">Preview</div>
+				<div class="preview-row">
+					<Avatar {art} name={art.name} scale={6} />
+					<Avatar {art} name={art.name} scale={3} />
+				</div>
+			</div>
+
+			<label class="name-field">
+				<span class="preview-label">Name</span>
+				<input
+					type="text"
+					bind:value={avatarName}
+					placeholder={namePlaceholder}
+					spellcheck="false"
+					autocapitalize="off"
+					autocorrect="off"
+					autocomplete="off"
+					maxlength="24"
+				/>
+			</label>
+
+			<div class="tools">
+				<Button size="sm" icon={Eraser} onclick={clear}>Clear</Button>
+				<Button size="sm" icon={Contrast} onclick={invert}>Invert</Button>
+			</div>
+		</div>
+	</div>
+
+	<div class="foot">
+		<span class="hint">Draw something, then open an issue to get it into the official set.</span>
+		<div class="actions">
+			<Button size="sm" icon={Copy} disabled={!canContribute} onclick={copyModule}>Copy</Button>
+			<Button
+				size="sm"
+				variant="primary"
+				icon={ExternalLink}
+				disabled={!canContribute}
+				href={toIssueUrl(art)}
+				target="_blank"
+				rel="noopener"
+			>
+				Open GitHub issue
+			</Button>
+		</div>
+	</div>
+</section>
+
+<style>
+	.editor {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		background: var(--bg-card);
+		border: 1px solid var(--rule);
+		overflow: hidden;
+	}
+	.head {
+		display: flex;
+		align-items: center;
+		padding: 14px 18px;
+		border-bottom: 1px solid var(--ink);
+		background: var(--ink);
+	}
+	.head h2 {
+		margin: 0;
+		font-family: var(--font-display);
+		font-weight: 700;
+		font-size: 17px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--bg);
+	}
+	.body {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 18px;
+		padding: 18px;
+	}
+	.grid-frame {
+		display: grid;
+		grid-template-columns: repeat(10, 40px);
+		grid-template-rows: repeat(10, 40px);
+		width: 400px;
+		height: 400px;
+		flex: none;
+		border: 1px solid var(--ink);
+		background: var(--bg);
+	}
+	.ring-cell {
+		box-sizing: border-box;
+		padding: 0 1px 1px 0;
+		background-clip: content-box;
+		background-color: var(--rule-soft);
+		opacity: 0.4; /* more muted than the paintable off cells — not part of the art */
+	}
+	/* A stroke paints by pointer position, so cells need no individual handlers. */
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(8, 1fr);
+		grid-template-rows: repeat(8, 1fr);
+		grid-column: 2 / 10;
+		grid-row: 2 / 10;
+		cursor: crosshair;
+		touch-action: none; /* drawing on touch shouldn't scroll the page */
+	}
+	.cell {
+		box-sizing: border-box;
+		padding: 0 1px 1px 0;
+		background-clip: content-box;
+		background-color: var(--rule-soft); /* unlit LED — faint */
+	}
+	.cell.on {
+		background-color: var(--ink);
+	}
+	.side {
+		flex: 1;
+		min-width: 160px;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+	.preview-label {
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--ink-faint);
+		font-family: var(--font-mono);
+	}
+	.preview-row {
+		display: flex;
+		align-items: flex-end;
+		gap: 10px;
+		margin-top: 6px;
+	}
+	.name-field {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+	.name-field input {
+		font-family: var(--font-mono);
+		font-size: 13px;
+		padding: 8px 12px;
+		border: 1px solid var(--ink);
+		background: var(--bg);
+		color: var(--ink);
+	}
+	.name-field input::placeholder {
+		color: var(--ink-faint);
+	}
+	.name-field input:focus {
+		outline: none;
+		box-shadow: inset 3px 3px 0 var(--rule-soft);
+	}
+	.tools {
+		display: flex;
+		gap: 8px;
+	}
+	.foot {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		flex-wrap: wrap;
+		padding: 14px 18px;
+		border-top: 1px solid var(--ink);
+	}
+	.hint {
+		font-family: var(--font-mono);
+		font-size: 12px;
+		color: var(--ink-faint);
+		flex: 1;
+		min-width: 180px;
+	}
+	.actions {
+		display: flex;
+		gap: 8px;
+	}
+	.actions :global(.btn) {
+		white-space: nowrap;
+	}
+</style>

package/src/components/AvatarsView.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { Toaster } from 'svelte-french-toast';
+	import AppBar from './AppBar.svelte';
+	import Avatar from './Avatar.svelte';
+	import AvatarEditor from './AvatarEditor.svelte';
+	import { avatars } from '../avatars/index.ts';
+</script>
+
+<div class="page">
+	<AppBar>
+		<span class="title">Avatars</span>
+	</AppBar>
+
+	<main class="content">
+		<AvatarEditor />
+
+		<section class="catalog">
+			<header>
+				<h2>The set</h2>
+				<p>{avatars.length} hand-crafted 8×8 sprites</p>
+			</header>
+			<ul>
+				{#each avatars as art (art.name)}
+					<li>
+						<Avatar {art} name={art.name} scale={8} interactive />
+						<span class="label">{art.name}</span>
+					</li>
+				{/each}
+			</ul>
+		</section>
+	</main>
+</div>
+
+<!-- This page renders outside AppShell, which hosts the app-wide Toaster. -->
+<Toaster
+	toastOptions={{
+		style:
+			'border:1px solid var(--ink); background:var(--bg-card); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:var(--font-mono); font-size:13px;'
+	}}
+/>
+
+<style>
+	.page {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+	.title {
+		display: inline-flex;
+		align-items: center;
+		padding: 0 14px;
+		font-family: var(--font-mono);
+		font-size: 12px;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--ink-soft);
+	}
+	.content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 24px;
+		padding: 32px 20px;
+	}
+	.content > :global(*) {
+		width: 100%;
+		max-width: 720px;
+	}
+	.catalog {
+		background: var(--bg-card);
+		border: 1px solid var(--rule);
+		padding: 18px;
+	}
+	.catalog header {
+		margin-bottom: 20px;
+	}
+	.catalog h2 {
+		margin: 0;
+		font-family: var(--font-display);
+		font-weight: 700;
+		font-size: 17px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+	}
+	.catalog header p {
+		margin: 4px 0 0;
+		font-family: var(--font-mono);
+		font-size: 12px;
+		color: var(--ink-soft);
+	}
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+		gap: 20px;
+	}
+	li {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+	}
+	.label {
+		font-family: var(--font-mono);
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--ink-soft);
+	}
+</style>

package/src/components/BranchBox.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import GitBranch from '@lucide/svelte/icons/git-branch';
+
+	let { branch }: { branch: string } = $props();
+</script>
+
+<div class="branch" title="Branch checked out in the container">
+	<GitBranch size={12} /><span>{branch}</span>
+</div>
+
+<style>
+	.branch {
+		margin-top: 6px;
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		max-width: 100%;
+		font-family: var(--font-mono);
+		font-size: 12px;
+		color: var(--ink);
+		border: 1px solid var(--ink-faint);
+		padding: 2px 7px;
+	}
+	.branch :global(svg) {
+		flex: none;
+	}
+	.branch span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/src/components/Brand.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import Package from '@lucide/svelte/icons/package';
+</script>
+
+<a class="brand" href="/"
+	><span class="logo"><Package size={22} /></span><span>Codebay</span><span class="tagline"
+		>devcontainer manager</span
+	></a
+>
+
+<style>
+	.brand {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 11px;
+		font-family: var(--font-display);
+		font-weight: 700;
+		font-size: 22px;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: inherit;
+		text-decoration: none;
+	}
+	.logo {
+		display: inline-flex;
+		align-items: center;
+		align-self: center;
+	}
+	.tagline {
+		font-family: var(--font-sans);
+		font-size: 12px;
+		font-weight: 500;
+		letter-spacing: 0.08em;
+		color: var(--ink-soft);
+	}
+	@media (max-width: 640px) {
+		.tagline {
+			display: none;
+		}
+	}
+</style>

package/src/components/Button.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+
+	type Variant = 'default' | 'primary' | 'danger';
+	type Size = 'sm' | 'md' | 'lg';
+
+	let {
+		variant = 'default',
+		size = 'md',
+		ghost = false,
+		icon,
+		iconSize,
+		href,
+		disabled = false,
+		onclick,
+		children,
+		...rest
+	}: {
+		variant?: Variant;
+		size?: Size;
+		/** Dashed-outline treatment that fills on hover — used for secondary links. */
+		ghost?: boolean;
+		/** Optional leading icon component, e.g. a lucide icon like `Plus`. */
+		icon?: Component<{ size?: number }>;
+		/** Override the icon size; defaults to a size that scales with `size`. */
+		iconSize?: number;
+		/** When set, the button renders as an `<a>` link instead of a `<button>`. */
+		href?: string;
+		disabled?: boolean;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	const Icon = $derived(icon);
+	const resolvedIconSize = $derived(iconSize ?? (size === 'lg' ? 18 : size === 'sm' ? 13 : 15));
+</script>
+
+{#if href}
+	<a
+		class="btn {variant} {size}"
+		class:ghost
+		href={disabled ? undefined : href}
+		aria-disabled={disabled || undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...rest}
+	>
+		{#if Icon}<Icon size={resolvedIconSize} />{/if}
+		{@render children?.()}
+	</a>
+{:else}
+	<button class="btn {variant} {size}" class:ghost {onclick} {disabled} {...rest}>
+		{#if Icon}<Icon size={resolvedIconSize} />{/if}
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 7px;
+		font-family: var(--font-mono);
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		border: 1px solid var(--ink);
+		background: var(--bg-card);
+		color: var(--ink);
+		cursor: pointer;
+		text-decoration: none;
+	}
+	.btn:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+	/* `disabled` has no native effect on an <a> — the href branch above drops the
+     href entirely when disabled, but it still needs the same visual treatment
+     and to be excluded from the tab order / assistive-tech actions. */
+	.btn[aria-disabled='true'] {
+		opacity: 0.4;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	.btn.sm {
+		padding: 7px 12px;
+		font-size: 12px;
+	}
+	.btn.md {
+		padding: 9px 16px;
+		font-size: 13px;
+	}
+	.btn.lg {
+		padding: 12px 22px;
+		font-size: 15px;
+	}
+
+	.btn.default:hover:not(:disabled) {
+		background: var(--ink);
+		color: var(--bg);
+	}
+
+	.btn.primary {
+		font-weight: 700;
+		background: var(--ink);
+		color: var(--bg);
+	}
+	.btn.primary:hover:not(:disabled) {
+		background: var(--bg-card);
+		color: var(--ink);
+	}
+
+	.btn.ghost {
+		background: transparent;
+		border-style: dashed;
+	}
+	.btn.ghost:hover:not(:disabled) {
+		background: var(--ink);
+		color: var(--bg);
+		border-style: solid;
+	}
+
+	.btn.danger {
+		color: var(--danger);
+		border-color: var(--danger);
+	}
+	.btn.danger:hover:not(:disabled) {
+		color: var(--danger);
+		background-color: var(--danger-soft);
+		border-color: transparent;
+		/* Slowly marching red "ants" border, drawn as four animated edge gradients. */
+		background-image:
+			linear-gradient(90deg, var(--danger) 50%, transparent 0),
+			linear-gradient(90deg, var(--danger) 50%, transparent 0),
+			linear-gradient(0deg, var(--danger) 50%, transparent 0),
+			linear-gradient(0deg, var(--danger) 50%, transparent 0);
+		background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+		background-size:
+			14px 2px,
+			14px 2px,
+			2px 14px,
+			2px 14px;
+		background-position:
+			0 0,
+			0 100%,
+			0 0,
+			100% 0;
+		animation: marching-ants 2s linear infinite;
+	}
+	@keyframes marching-ants {
+		to {
+			background-position:
+				28px 0,
+				-28px 100%,
+				0 -28px,
+				100% 28px;
+		}
+	}
+</style>