@axerity/cli 0.1.0

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { title, children }: { title?: string; children: Snippet } = $props();
+</script>
+
+<div class="step">
+	{#if title}
+		<div class="step-title">{title}</div>
+	{/if}
+	<div class="step-body">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.step {
+		position: relative;
+		margin-left: 0.85rem;
+		padding-left: 2.25rem;
+		padding-bottom: 1.5rem;
+		border-left: 2px solid var(--border);
+	}
+
+	.step:last-child {
+		border-left-color: transparent;
+		padding-bottom: 0;
+	}
+
+	.step::before {
+		counter-increment: axerity-step;
+		content: counter(axerity-step);
+		position: absolute;
+		top: -0.2rem;
+		left: 0;
+		transform: translateX(-50%);
+		display: grid;
+		place-items: center;
+		width: 1.7rem;
+		height: 1.7rem;
+		border-radius: 9999px;
+		background-color: var(--surface-raised);
+		border: 1px solid var(--border-strong);
+		color: var(--fg);
+		font-size: 0.8rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.step-title {
+		margin-bottom: 0.5rem;
+		font-weight: 600;
+		line-height: 1.7rem;
+		color: var(--fg);
+	}
+
+	.step-body :global(> :first-child) {
+		margin-top: 0;
+	}
+	.step-body :global(> :last-child) {
+		margin-bottom: 0;
+	}
+</style>

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

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

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { getContext, onDestroy, untrack } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { TABS, type TabsContext } from './tabs-context';
+
+	let { title, icon, children }: { title: string; icon?: string; children: Snippet } = $props();
+
+	const tabs = getContext<TabsContext>(TABS);
+	const id = untrack(() => tabs.register(title, icon));
+
+	onDestroy(() => tabs.unregister(id));
+</script>
+
+{#if tabs.isActive(id)}
+	<div role="tabpanel" class="tab-panel">
+		{@render children()}
+	</div>
+{/if}
+
+<style>
+	.tab-panel :global(> :first-child) {
+		margin-top: 0;
+	}
+	.tab-panel :global(> :last-child) {
+		margin-bottom: 0;
+	}
+</style>

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { TABS, type TabsContext } from './tabs-context';
+	import { tabGroups } from './tabs-store.svelte';
+	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
+
+	let { group, children }: { group?: string; children: Snippet } = $props();
+
+	interface TabMeta {
+		id: number;
+		title: string;
+		icon?: string;
+	}
+
+	const tabs = $state<TabMeta[]>([]);
+	let localValue = $state<string | undefined>(undefined);
+	let counter = 0;
+
+	$effect(() => {
+		if (group) tabGroups.init(group);
+	});
+
+	const activeValue = $derived(group ? tabGroups.get(group) : localValue);
+
+	const activeId = $derived.by(() => {
+		const match = activeValue !== undefined ? tabs.find((t) => t.title === activeValue) : undefined;
+		return match?.id ?? tabs[0]?.id;
+	});
+
+	function select(title: string) {
+		if (group) tabGroups.set(group, title);
+		else localValue = title;
+	}
+
+	setContext<TabsContext>(TABS, {
+		register(title, icon) {
+			const id = counter++;
+			tabs.push({ id, title, icon });
+			return id;
+		},
+		unregister(id) {
+			const index = tabs.findIndex((tab) => tab.id === id);
+			if (index !== -1) tabs.splice(index, 1);
+		},
+		isActive: (id) => activeId === id
+	});
+</script>
+
+<div class="my-5 flex flex-col overflow-hidden rounded-xl border border-border">
+	<div class="order-2 p-4">
+		{@render children()}
+	</div>
+
+	<div
+		role="tablist"
+		class="order-1 flex gap-1 overflow-x-auto border-b border-border bg-bg-subtle px-2"
+	>
+		{#each tabs as tab (tab.id)}
+			<button
+				type="button"
+				role="tab"
+				aria-selected={activeId === tab.id}
+				onclick={() => select(tab.title)}
+				class="-mb-px flex shrink-0 items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium transition
+					{activeId === tab.id ? 'border-accent text-fg' : 'border-transparent text-fg-muted hover:text-fg'}"
+			>
+				{#if tab.icon}
+					<DynamicIcon name={tab.icon} size={15} />
+				{/if}
+				{tab.title}
+			</button>
+		{/each}
+	</div>
+</div>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { tip, children }: { tip: string; children: Snippet } = $props();
+</script>
+
+<span class="tooltip group relative inline-flex">
+	<button type="button" class="tooltip-trigger" aria-label={tip}>
+		{@render children()}
+	</button>
+	<span
+		role="tooltip"
+		class="tooltip-pop pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs -translate-x-1/2 scale-95 rounded-md bg-fg px-2.5 py-1.5 text-xs leading-snug font-medium text-surface opacity-0 shadow-md transition duration-150 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100"
+	>
+		{tip}
+		<span
+			class="tooltip-arrow absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-fg"
+		></span>
+	</span>
+</span>
+
+<style>
+	.tooltip-trigger {
+		cursor: help;
+		text-decoration: underline dotted from-font;
+		text-underline-offset: 0.2em;
+	}
+	.tooltip-trigger:focus-visible {
+		outline: 2px solid var(--border-strong);
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div
+	class="tree my-5 overflow-hidden rounded-lg border border-border bg-surface p-2 font-mono text-sm text-fg"
+>
+	{@render children()}
+</div>

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

@@ -0,0 +1,187 @@
+<script lang="ts" module>
+	export interface TypeTableProp {
+		/** Short type signature, shown in the collapsed row (e.g. `string`). */
+		type?: string;
+		/** Short prose describing the property. */
+		description?: string;
+		/** Full type signature, shown in the expanded detail (e.g. `string | undefined`). */
+		typeDescription?: string;
+		/** Optional href turning the expanded type into a link. */
+		typeDescriptionLink?: string;
+		/** Default value, shown in the expanded detail. */
+		default?: string;
+		required?: boolean;
+		deprecated?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { SvelteSet } from 'svelte/reactivity';
+	import { slide } from 'svelte/transition';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { withBase } from '$lib/base';
+
+	let { type }: { type: Record<string, TypeTableProp> } = $props();
+
+	const entries = $derived(Object.entries(type));
+
+	// Rows are open by default; track the ones the reader has collapsed.
+	const collapsed = new SvelteSet<string>();
+	const isOpen = (name: string) => !collapsed.has(name);
+	function toggle(name: string) {
+		if (collapsed.has(name)) collapsed.delete(name);
+		else collapsed.add(name);
+	}
+</script>
+
+<div class="tt">
+	<div class="tt-head">
+		<span>Prop</span>
+		<span>Type</span>
+		<span class="tt-spacer"></span>
+	</div>
+
+	{#each entries as [name, prop] (name)}
+		<div class="tt-item">
+			<button
+				type="button"
+				class="tt-summary"
+				aria-expanded={isOpen(name)}
+				onclick={() => toggle(name)}
+			>
+				<span class="tt-prop" class:tt-deprecated={prop.deprecated}>
+					{name}{prop.required ? '' : '?'}
+				</span>
+				<span class="tt-type">{prop.type ?? '—'}</span>
+				<ChevronDown size={16} class="tt-chevron {isOpen(name) ? 'tt-chevron-open' : ''}" />
+			</button>
+
+			{#if isOpen(name)}
+				<div class="tt-detail" transition:slide={{ duration: 150 }}>
+					{#if prop.description}
+						<p class="tt-desc">{prop.description}</p>
+					{/if}
+					<div class="tt-meta-row">
+						<span class="tt-meta-label">Type</span>
+						{#if prop.typeDescriptionLink}
+							<a class="tt-code tt-link" href={withBase(prop.typeDescriptionLink)}>
+								{prop.typeDescription ?? prop.type ?? '—'}
+							</a>
+						{:else}
+							<span class="tt-code">{prop.typeDescription ?? prop.type ?? '—'}</span>
+						{/if}
+					</div>
+					{#if prop.default !== undefined}
+						<div class="tt-meta-row">
+							<span class="tt-meta-label">Default</span>
+							<span class="tt-code">{prop.default}</span>
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.tt {
+		margin: 1.5rem 0;
+		padding: 0.4rem;
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		background-color: var(--bg-subtle);
+	}
+
+	.tt-head {
+		display: grid;
+		grid-template-columns: 1fr 1.4fr auto;
+		gap: 1rem;
+		padding: 0.5rem 0.85rem;
+		font-size: 0.78rem;
+		color: var(--fg-subtle);
+	}
+
+	.tt-item {
+		overflow: hidden;
+		border: 1px solid var(--border);
+		border-radius: 0.375rem;
+		background-color: var(--surface);
+	}
+	.tt-item + .tt-item {
+		margin-top: 0.4rem;
+	}
+
+	.tt-summary {
+		display: grid;
+		grid-template-columns: 1fr 1.4fr auto;
+		gap: 1rem;
+		align-items: center;
+		width: 100%;
+		padding: 0.6rem 0.85rem;
+		text-align: left;
+		cursor: pointer;
+	}
+
+	.tt-prop {
+		font-family: var(--font-mono);
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: var(--accent);
+	}
+	.tt-deprecated {
+		text-decoration: line-through;
+		opacity: 0.7;
+	}
+
+	.tt-type {
+		overflow: hidden;
+		font-family: var(--font-mono);
+		font-size: 0.85rem;
+		color: var(--fg-muted);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* :global because the class lands on the <svg> rendered by the icon component. */
+	.tt-summary :global(.tt-chevron) {
+		color: var(--fg-subtle);
+		transition: transform 0.15s ease;
+	}
+	.tt-summary :global(.tt-chevron-open) {
+		transform: rotate(180deg);
+	}
+
+	.tt-detail {
+		padding: 0 0.85rem 0.85rem;
+		border-top: 1px solid var(--border);
+	}
+
+	.tt-desc {
+		margin: 0.75rem 0 0;
+		font-size: 0.9rem;
+		line-height: 1.6;
+		color: var(--fg-muted);
+	}
+
+	.tt-meta-row {
+		display: flex;
+		gap: 1rem;
+		padding-top: 0.7rem;
+	}
+	.tt-meta-label {
+		flex-shrink: 0;
+		width: 4.5rem;
+		font-size: 0.85rem;
+		color: var(--fg-subtle);
+	}
+	.tt-code {
+		font-family: var(--font-mono);
+		font-size: 0.85rem;
+		color: var(--fg);
+	}
+	.tt-link {
+		color: var(--accent);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+</style>

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { label, date, children }: { label: string; date?: string; children: Snippet } = $props();
+</script>
+
+<div class="update relative border-l border-border pb-8 pl-6">
+	<span class="update-dot absolute top-1.5 -left-[5px] h-2.5 w-2.5 rounded-full bg-border-strong"
+	></span>
+	<div class="mb-2 flex flex-wrap items-baseline gap-x-3 gap-y-1">
+		<h3 class="m-0 text-base font-semibold text-fg">{label}</h3>
+		{#if date}
+			<span class="text-xs text-fg-subtle">{date}</span>
+		{/if}
+	</div>
+	<div class="update-body text-sm text-fg-muted">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.update:last-child {
+		border-color: transparent;
+		padding-bottom: 0;
+	}
+	.update-body :global(> :first-child) {
+		margin-top: 0;
+	}
+	.update-body :global(> :last-child) {
+		margin-bottom: 0;
+	}
+</style>

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+	let { src, title = 'Video', poster }: { src: string; title?: string; poster?: string } = $props();
+
+	const FILE_RE = /\.(mp4|webm|ogg|ogv|mov|m4v)(\?.*)?$/i;
+
+	function parseUrl(input: string): URL | null {
+		try {
+			return new URL(input);
+		} catch {
+			return null;
+		}
+	}
+
+	function youtubeId(input: string): string | null {
+		if (/^[\w-]{11}$/.test(input)) return input;
+		const url = parseUrl(input);
+		if (!url) return null;
+		if (url.hostname.includes('youtu.be')) return url.pathname.slice(1) || null;
+		const v = url.searchParams.get('v');
+		if (v) return v;
+		const parts = url.pathname.split('/');
+		const embedIndex = parts.indexOf('embed');
+		if (embedIndex >= 0 && parts[embedIndex + 1]) return parts[embedIndex + 1];
+		return null;
+	}
+
+	function vimeoId(input: string): string | null {
+		const url = parseUrl(input);
+		if (!url || !url.hostname.includes('vimeo')) return null;
+		const match = url.pathname.match(/\/(?:video\/)?(\d+)/);
+		return match ? match[1] : null;
+	}
+
+	const resolved = $derived.by(() => {
+		if (FILE_RE.test(src)) return { kind: 'file' as const, url: src };
+
+		const yt = youtubeId(src);
+		if (yt) return { kind: 'embed' as const, url: `https://www.youtube-nocookie.com/embed/${yt}` };
+
+		const vimeo = vimeoId(src);
+		if (vimeo) return { kind: 'embed' as const, url: `https://player.vimeo.com/video/${vimeo}` };
+
+		return { kind: 'embed' as const, url: src };
+	});
+</script>
+
+<div
+	class="video my-6 aspect-video w-full overflow-hidden rounded-xl border border-border bg-black"
+>
+	{#if resolved.kind === 'file'}
+		<!-- svelte-ignore a11y_media_has_caption -->
+		<video src={resolved.url} {poster} {title} class="h-full w-full" controls playsinline></video>
+	{:else}
+		<iframe
+			{title}
+			src={resolved.url}
+			class="h-full w-full"
+			loading="lazy"
+			referrerpolicy="strict-origin-when-cross-origin"
+			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+			allowfullscreen
+		></iframe>
+	{/if}
+</div>

package/src/lib/components/kit/accordion-context.ts

@@ -0,0 +1 @@
+export const ACCORDION_GROUP = Symbol('accordion-group');

package/src/lib/components/kit/api/Api.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { API, type ApiContext, type ApiExampleEntry } from './api-context';
+	import ApiExamplePanel from './ApiExamplePanel.svelte';
+
+	let { children }: { children: Snippet } = $props();
+
+	const examples = $state<ApiExampleEntry[]>([]);
+	let counter = 0;
+
+	const requests = $derived(examples.filter((example) => example.kind === 'request'));
+	const responses = $derived(examples.filter((example) => example.kind === 'response'));
+	const objects = $derived(examples.filter((example) => example.kind === 'object'));
+
+	setContext<ApiContext>(API, {
+		registerExample(entry) {
+			const id = counter++;
+			examples.push({ ...entry, id });
+			return id;
+		},
+		unregisterExample(id) {
+			const index = examples.findIndex((example) => example.id === id);
+			if (index !== -1) examples.splice(index, 1);
+		}
+	});
+</script>
+
+<div class="api">
+	<div class="api-main">
+		{@render children()}
+	</div>
+
+	<div class="api-rail">
+		<div class="api-rail-sticky">
+			{#each objects as object (object.id)}
+				<ApiExamplePanel label={object.title} entries={[object]} />
+			{/each}
+			<ApiExamplePanel label="Request" entries={requests} />
+			<ApiExamplePanel label="Response" entries={responses} />
+		</div>
+	</div>
+</div>
+
+<style>
+	.api {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: 2rem;
+	}
+
+	@media (min-width: 1024px) {
+		.api {
+			grid-template-columns: minmax(0, 1fr) 28rem;
+			gap: 2.5rem;
+			align-items: start;
+		}
+	}
+
+	.api-main :global(h2) {
+		margin-top: 1.75rem;
+		font-size: 1.2rem;
+	}
+	.api-main :global(h2:first-child) {
+		margin-top: 0;
+	}
+
+	.api-rail-sticky {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	@media (min-width: 1024px) {
+		.api-rail-sticky {
+			position: sticky;
+			top: calc(var(--spacing-header) + 1.5rem);
+		}
+	}
+</style>

package/src/lib/components/kit/api/ApiExamplePanel.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { ApiExampleEntry } from './api-context';
+
+	let { label, entries }: { label: string; entries: ApiExampleEntry[] } = $props();
+
+	let activeId = $state<number | undefined>(undefined);
+	const active = $derived(entries.find((entry) => entry.id === activeId) ?? entries[0]);
+	const multiple = $derived(entries.length > 1);
+</script>
+
+{#if entries.length}
+	<div class="panel">
+		<div class="panel-head">
+			<span class="panel-label">{label}</span>
+			{#if multiple}
+				<div class="panel-tabs" role="tablist">
+					{#each entries as entry (entry.id)}
+						<button
+							type="button"
+							role="tab"
+							aria-selected={active?.id === entry.id}
+							class:active={active?.id === entry.id}
+							onclick={() => (activeId = entry.id)}
+						>
+							{entry.title}
+						</button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+		<div class="panel-body">
+			{#if active}
+				{@render active.snippet()}
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.panel {
+		overflow: hidden;
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		background-color: var(--surface-raised);
+	}
+
+	.panel-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		padding: 0.4rem 0.4rem 0.4rem 0.85rem;
+		border-bottom: 1px solid var(--border);
+		background-color: var(--bg-subtle);
+	}
+
+	.panel-label {
+		font-size: 0.78rem;
+		font-weight: 600;
+		color: var(--fg-muted);
+	}
+
+	.panel-tabs {
+		display: flex;
+		gap: 0.15rem;
+		overflow-x: auto;
+	}
+	.panel-tabs button {
+		flex-shrink: 0;
+		padding: 0.2rem 0.55rem;
+		border-radius: 0.3rem;
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		color: var(--fg-muted);
+		cursor: pointer;
+		transition:
+			color 0.12s,
+			background-color 0.12s;
+	}
+	.panel-tabs button:hover {
+		color: var(--fg);
+	}
+	.panel-tabs button.active {
+		color: var(--fg);
+		background-color: var(--surface);
+	}
+
+	.panel-body :global(.code-block) {
+		margin: 0;
+	}
+	.panel-body :global(pre.shiki) {
+		border: 0;
+		border-radius: 0;
+		background-color: transparent !important;
+	}
+
+	.panel-body :global(.code-header) {
+		border-top: 0;
+	}
+</style>