@axerity/cli 0.1.0

package/src/lib/components/kit/Accordion.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getContext, untrack } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
+	import { ACCORDION_GROUP } from './accordion-context';
+
+	let {
+		title,
+		icon,
+		open = false,
+		children
+	}: { title: string; icon?: string; open?: boolean; children: Snippet } = $props();
+
+	// `open` is an uncontrolled initial value; toggling afterwards is internal.
+	let isOpen = $state(untrack(() => open));
+
+	const grouped = getContext(ACCORDION_GROUP) === true;
+
+	// Standalone accordions are self-contained cards; grouped ones inherit the
+	// group's border and dividers.
+	const wrapperClass = grouped ? 'bg-surface' : 'my-5 rounded-xl border border-border bg-surface';
+</script>
+
+<div class={wrapperClass}>
+	<button
+		type="button"
+		onclick={() => (isOpen = !isOpen)}
+		aria-expanded={isOpen}
+		class="flex w-full items-center gap-3 px-4 py-3 text-left text-sm font-medium text-fg transition hover:bg-bg-subtle"
+	>
+		{#if icon}
+			<DynamicIcon name={icon} size={18} class="shrink-0 text-accent" />
+		{/if}
+		<span class="flex-1">{title}</span>
+		<ChevronDown
+			size={18}
+			class="shrink-0 text-fg-subtle transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
+		/>
+	</button>
+
+	{#if isOpen}
+		<div transition:slide={{ duration: 200 }}>
+			<div class="accordion-body px-4 pb-4 text-sm text-fg-muted">
+				{@render children()}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Trim stray margins from markdown rendered inside the panel. */
+	.accordion-body :global(> :first-child) {
+		margin-top: 0;
+	}
+	.accordion-body :global(> :last-child) {
+		margin-bottom: 0;
+	}
+</style>

package/src/lib/components/kit/AccordionGroup.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+	import { ACCORDION_GROUP } from './accordion-context';
+
+	let { children }: { children: Snippet } = $props();
+
+	setContext(ACCORDION_GROUP, true);
+</script>
+
+<div class="my-5 divide-y divide-border overflow-hidden rounded-xl border border-border">
+	{@render children()}
+</div>

package/src/lib/components/kit/Badge.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Color = 'neutral' | 'info' | 'success' | 'warn' | 'error';
+
+	let { color = 'neutral', children }: { color?: Color; children: Snippet } = $props();
+
+	const variants = {
+		neutral: 'border-border bg-bg-subtle text-fg-muted',
+		info: 'border-transparent bg-(--c)/15 text-(--c)',
+		success: 'border-transparent bg-(--c)/15 text-(--c)',
+		warn: 'border-transparent bg-(--c)/15 text-(--c)',
+		error: 'border-transparent bg-(--c)/15 text-(--c)'
+	} as const;
+
+	const colors = {
+		neutral: 'var(--fg-muted)',
+		info: 'oklch(0.62 0.2 250)',
+		success: 'oklch(0.6 0.16 155)',
+		warn: 'oklch(0.7 0.16 75)',
+		error: 'oklch(0.62 0.22 25)'
+	} as const;
+</script>
+
+<span
+	class="inline-flex items-center rounded-full border px-2 py-0.5 align-middle text-xs font-medium {variants[
+		color
+	]}"
+	style="--c: {colors[color]};"
+>
+	{@render children()}
+</span>

package/src/lib/components/kit/Callout.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	import Info from '@lucide/svelte/icons/info';
+	import Lightbulb from '@lucide/svelte/icons/lightbulb';
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import TriangleAlert from '@lucide/svelte/icons/triangle-alert';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+
+	type CalloutType = 'info' | 'tip' | 'success' | 'warn' | 'warning' | 'error';
+
+	let {
+		type = 'info',
+		title,
+		children
+	}: { type?: CalloutType; title?: string; children: Snippet } = $props();
+
+	const variants = {
+		info: { icon: Info, color: 'var(--fg-muted)' },
+		tip: { icon: Lightbulb, color: 'oklch(0.62 0.2 300)' },
+		success: { icon: CircleCheck, color: 'oklch(0.6 0.16 155)' },
+		warn: { icon: TriangleAlert, color: 'oklch(0.7 0.16 75)' },
+		error: { icon: CircleX, color: 'oklch(0.62 0.22 25)' }
+	} as const;
+
+	const variant = $derived(variants[type === 'warning' ? 'warn' : type]);
+	const Icon = $derived(variant.icon);
+</script>
+
+<div
+	class="callout my-5 flex gap-2.5 rounded-lg border border-(--c)/25 bg-(--c)/[0.07] px-4 py-3"
+	style="--c: {variant.color};"
+	role="note"
+>
+	<Icon size={18} class="mt-0.5 shrink-0 text-(--c)" />
+	<div class="callout-body min-w-0 flex-1 text-sm leading-relaxed text-(--c)">
+		{#if title}
+			<p class="mb-0.5 font-semibold">{title}</p>
+		{/if}
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.callout-body :global(> :first-child) {
+		margin-top: 0;
+	}
+	.callout-body :global(> :last-child) {
+		margin-bottom: 0;
+	}
+</style>

package/src/lib/components/kit/Card.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
+	import { withBase } from '$lib/base';
+
+	let {
+		title,
+		icon,
+		href,
+		horizontal = false,
+		children
+	}: {
+		title: string;
+		icon?: string;
+		href?: string;
+		horizontal?: boolean;
+		children?: Snippet;
+	} = $props();
+
+	const isLink = $derived(!!href);
+	const external = $derived(!!href && /^https?:\/\//.test(href));
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'div'}
+	href={withBase(href) || undefined}
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noreferrer' : undefined}
+	class="card-root group block rounded-lg border border-border bg-surface p-4 transition
+		{isLink ? 'hover:border-border-strong hover:bg-bg-subtle' : ''}
+		{horizontal ? 'flex items-start gap-3.5' : ''}"
+>
+	{#if icon}
+		<div
+			class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-bg-subtle text-fg
+				{horizontal ? '' : 'mb-3'}"
+		>
+			<DynamicIcon name={icon} size={17} />
+		</div>
+	{/if}
+
+	<div class="min-w-0 flex-1">
+		<div class="flex items-center gap-1.5">
+			<span class="font-semibold text-fg">{title}</span>
+			{#if isLink}
+				<ArrowRight
+					size={15}
+					class="text-fg-subtle transition-transform group-hover:translate-x-0.5"
+				/>
+			{/if}
+		</div>
+		{#if children}
+			<div class="card-body mt-1 text-sm text-fg-muted">
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+</svelte:element>
+
+<style>
+	.card-root,
+	.card-root:hover {
+		text-decoration: none;
+	}
+	.card-body :global(> :first-child) {
+		margin-top: 0;
+	}
+	.card-body :global(> :last-child) {
+		margin-bottom: 0;
+	}
+</style>

package/src/lib/components/kit/CardGroup.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { cols = 2, children }: { cols?: number; children: Snippet } = $props();
+</script>
+
+<div class="card-group my-5 grid gap-3" style="--cols: {cols};">
+	{@render children()}
+</div>
+
+<style>
+	.card-group {
+		grid-template-columns: repeat(1, minmax(0, 1fr));
+	}
+
+	@media (min-width: 640px) {
+		.card-group {
+			grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+		}
+	}
+</style>

package/src/lib/components/kit/CodeGroup.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+
+	let container = $state<HTMLElement>();
+	let tabs = $state<string[]>([]);
+	let active = $state(0);
+
+	let blocks: HTMLElement[] = [];
+	let initialized = false;
+
+	$effect(() => {
+		if (!container || initialized) return;
+		const found = Array.from(
+			container.querySelectorAll('.cg-blocks > .code-block')
+		) as HTMLElement[];
+		if (!found.length) return;
+
+		blocks = found;
+		tabs = found.map((block, index) => {
+			const title = block.querySelector('.code-title')?.textContent?.trim();
+			block.querySelector('.code-header')?.classList.add('hidden');
+			return title || `Tab ${index + 1}`;
+		});
+		select(0);
+		initialized = true;
+	});
+
+	function select(index: number) {
+		active = index;
+		blocks.forEach((block, i) => block.classList.toggle('hidden', i !== index));
+	}
+</script>
+
+<div class="code-group my-5 overflow-hidden rounded-lg border border-border" bind:this={container}>
+	{#if tabs.length}
+		<div class="cg-tabs flex items-center gap-1 border-b border-border bg-bg-subtle px-1.5 py-1.5">
+			{#each tabs as tab, index (index)}
+				<button
+					type="button"
+					onclick={() => select(index)}
+					class="rounded-md px-2.5 py-1 font-mono text-xs transition
+						{index === active ? 'bg-surface text-fg' : 'text-fg-muted hover:text-fg'}"
+				>
+					{tab}
+				</button>
+			{/each}
+		</div>
+	{/if}
+	<div class="cg-blocks">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.code-group :global(.code-block) {
+		margin: 0;
+		border-radius: 0;
+	}
+	.code-group :global(.code-block pre) {
+		border: 0;
+		border-radius: 0;
+	}
+</style>

package/src/lib/components/kit/Columns.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { cols = 2, children }: { cols?: number; children: Snippet } = $props();
+</script>
+
+<div class="columns-grid" style="--cols: {cols};">
+	{@render children()}
+</div>
+
+<style>
+	.columns-grid {
+		display: grid;
+		gap: 1rem;
+		grid-template-columns: 1fr;
+		margin: 1.25rem 0;
+	}
+	@media (min-width: 640px) {
+		.columns-grid {
+			grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+		}
+	}
+	.columns-grid :global(> *) {
+		margin: 0;
+	}
+</style>

package/src/lib/components/kit/Event.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import { withBase } from '$lib/base';
+
+	let { name, href, children }: { name: string; href?: string; children?: Snippet } = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'div'}
+	href={href ? withBase(href) : undefined}
+	class="event-item flex items-center gap-3 px-4 py-3 text-sm transition {href
+		? 'hover:bg-bg-subtle'
+		: ''}"
+>
+	<code class="shrink-0 font-mono text-fg">{name}</code>
+	{#if children}
+		<span class="min-w-0 flex-1 truncate text-fg-muted">{@render children()}</span>
+	{/if}
+	{#if href}
+		<ArrowRight size={15} class="ml-auto shrink-0 text-fg-subtle" />
+	{/if}
+</svelte:element>

package/src/lib/components/kit/EventList.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="event-list my-5 divide-y divide-border overflow-hidden rounded-lg border border-border">
+	{@render children()}
+</div>

package/src/lib/components/kit/File.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import FileIcon from '@lucide/svelte/icons/file';
+	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
+
+	let { name, icon }: { name: string; icon?: string } = $props();
+</script>
+
+<div class="tree-file flex items-center gap-1.5 rounded-md py-1 pr-1.5 pl-[1.625rem] text-fg-muted">
+	{#if icon}
+		<DynamicIcon name={icon} size={16} class="shrink-0 text-fg-subtle" />
+	{:else}
+		<FileIcon size={16} class="shrink-0 text-fg-subtle" />
+	{/if}
+	<span class="truncate">{name}</span>
+</div>

package/src/lib/components/kit/Folder.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { untrack } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import FolderClosed from '@lucide/svelte/icons/folder';
+	import FolderOpen from '@lucide/svelte/icons/folder-open';
+	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
+
+	let {
+		name,
+		icon,
+		defaultOpen = false,
+		children
+	}: { name: string; icon?: string; defaultOpen?: boolean; children?: Snippet } = $props();
+
+	let isOpen = $state(untrack(() => defaultOpen));
+</script>
+
+<div class="tree-folder">
+	<button
+		type="button"
+		onclick={() => (isOpen = !isOpen)}
+		aria-expanded={isOpen}
+		class="flex w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-left transition hover:bg-surface-raised"
+	>
+		<ChevronRight
+			size={14}
+			class="shrink-0 text-fg-subtle transition-transform duration-150 {isOpen ? 'rotate-90' : ''}"
+		/>
+		{#if icon}
+			<DynamicIcon name={icon} size={16} class="shrink-0 text-fg-muted" />
+		{:else if isOpen}
+			<FolderOpen size={16} class="shrink-0 text-fg-muted" />
+		{:else}
+			<FolderClosed size={16} class="shrink-0 text-fg-muted" />
+		{/if}
+		<span class="truncate">{name}</span>
+	</button>
+
+	{#if isOpen && children}
+		<div transition:slide={{ duration: 150 }} class="ml-[0.6875rem] border-l border-border pl-2">
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/src/lib/components/kit/Frame.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { fade, scale } from 'svelte/transition';
+	import { browser } from '$app/environment';
+
+	let {
+		caption,
+		zoom = true,
+		children
+	}: { caption?: string; zoom?: boolean; children: Snippet } = $props();
+
+	let open = $state(false);
+
+	function onkeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') open = false;
+	}
+
+	$effect(() => {
+		if (!browser) return;
+		document.body.style.overflow = open ? 'hidden' : '';
+		return () => {
+			document.body.style.overflow = '';
+		};
+	});
+</script>
+
+<svelte:window {onkeydown} />
+
+<figure class="frame my-6">
+	{#if zoom}
+		<button
+			type="button"
+			onclick={() => (open = true)}
+			class="frame-inner flex w-full cursor-zoom-in justify-center rounded-xl border border-border bg-surface-raised p-4 transition hover:border-border-strong"
+		>
+			{@render children()}
+		</button>
+	{:else}
+		<div
+			class="frame-inner flex justify-center rounded-xl border border-border bg-surface-raised p-4"
+		>
+			{@render children()}
+		</div>
+	{/if}
+	{#if caption}
+		<figcaption class="mt-2.5 text-center text-sm text-fg-subtle">{caption}</figcaption>
+	{/if}
+</figure>
+
+{#if open}
+	<button
+		type="button"
+		onclick={() => (open = false)}
+		aria-label="Close expanded view"
+		class="frame-overlay fixed inset-0 z-100 flex cursor-zoom-out items-center justify-center bg-black/80 p-6 backdrop-blur-sm"
+		transition:fade={{ duration: 150 }}
+	>
+		<span class="frame-overlay-inner block max-h-full max-w-5xl" transition:scale={{ start: 0.96 }}>
+			{@render children()}
+		</span>
+	</button>
+{/if}
+
+<style>
+	.frame-inner :global(img),
+	.frame-inner :global(video) {
+		margin: 0;
+		border-radius: 0.5rem;
+		max-width: 100%;
+		height: auto;
+	}
+	.frame-overlay-inner :global(img),
+	.frame-overlay-inner :global(video) {
+		margin: 0;
+		border-radius: 0.5rem;
+		max-height: 85vh;
+		max-width: 100%;
+		width: auto;
+		height: auto;
+	}
+</style>

package/src/lib/components/kit/Icon.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
+
+	let {
+		icon,
+		size = 16,
+		color,
+		class: className = ''
+	}: { icon: string; size?: number; color?: string; class?: string } = $props();
+</script>
+
+<span
+	class="inline-icon inline-flex align-middle {className}"
+	style={color ? `color: ${color};` : undefined}
+>
+	<DynamicIcon name={icon} {size} />
+</span>

package/src/lib/components/kit/Kbd.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<kbd
+	class="inline-flex min-w-5 items-center justify-center rounded border border-b-2 border-border bg-bg-subtle px-1.5 py-0.5 font-mono text-xs text-fg-muted"
+>
+	{@render children()}
+</kbd>

package/src/lib/components/kit/Roadmap.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="roadmap">
+	{@render children()}
+</div>
+
+<style>
+	.roadmap {
+		margin: 1.5rem 0;
+	}
+</style>

package/src/lib/components/kit/RoadmapItem.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Status = 'planned' | 'exploring' | 'in-progress' | 'shipped';
+
+	let {
+		title,
+		status = 'planned',
+		eta,
+		children
+	}: {
+		title: string;
+		status?: Status;
+		eta?: string;
+		children?: Snippet;
+	} = $props();
+
+	const meta = {
+		planned: { label: 'Planned', color: 'var(--fg-subtle)' },
+		exploring: { label: 'Exploring', color: 'oklch(0.62 0.2 295)' },
+		'in-progress': { label: 'In progress', color: 'oklch(0.7 0.16 75)' },
+		shipped: { label: 'Shipped', color: 'oklch(0.6 0.16 155)' }
+	} as const;
+
+	const current = $derived(meta[status] ?? meta.planned);
+</script>
+
+<div class="item" style="--c: {current.color};">
+	<span class="dot" aria-hidden="true"></span>
+	<div class="content">
+		<div class="head">
+			<span class="title">{title}</span>
+			<span class="status">{current.label}</span>
+			{#if eta}
+				<span class="eta">· {eta}</span>
+			{/if}
+		</div>
+		{#if children}
+			<div class="body">
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.item {
+		display: flex;
+		gap: 0.875rem;
+		padding-bottom: 1.5rem;
+	}
+	.item:last-child {
+		padding-bottom: 0;
+	}
+	.dot {
+		position: relative;
+		margin-top: 0.35rem;
+		height: 0.5rem;
+		width: 0.5rem;
+		flex-shrink: 0;
+		border-radius: 9999px;
+		background-color: var(--c);
+	}
+	.item:not(:last-child) .dot::after {
+		content: '';
+		position: absolute;
+		top: 0.9rem;
+		left: 50%;
+		height: calc(100% + 1.5rem);
+		width: 1px;
+		transform: translateX(-50%);
+		background-color: var(--border);
+	}
+	.content {
+		min-width: 0;
+		flex: 1;
+	}
+	.head {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: 0.25rem 0.5rem;
+	}
+	.title {
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: var(--fg);
+	}
+	.status {
+		font-size: 0.8rem;
+		font-weight: 500;
+		color: var(--c);
+	}
+	.eta {
+		font-size: 0.8rem;
+		color: var(--fg-subtle);
+	}
+	.body {
+		margin-top: 0.2rem;
+		font-size: 0.875rem;
+		color: var(--fg-muted);
+	}
+	.body :global(> :first-child) {
+		margin-top: 0;
+	}
+	.body :global(> :last-child) {
+		margin-bottom: 0;
+	}
+</style>