@axerity/cli 0.1.0

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

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { withBase } from '$lib/base';
+
+	let {
+		name,
+		type,
+		typeLink,
+		required = false,
+		deprecated = false,
+		default: defaultValue,
+		children
+	}: {
+		name: string;
+		type?: string;
+		typeLink?: string;
+		required?: boolean;
+		deprecated?: boolean;
+		default?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div class="field">
+	<div class="field-head">
+		<code class="field-name" class:field-deprecated={deprecated}>{name}</code>
+		{#if type}
+			{#if typeLink}
+				<a class="field-type field-type-link" href={withBase(typeLink)}>{type}</a>
+			{:else}
+				<span class="field-type">{type}</span>
+			{/if}
+		{/if}
+		{#if required}
+			<span class="field-flag field-required">required</span>
+		{/if}
+		{#if deprecated}
+			<span class="field-flag">deprecated</span>
+		{/if}
+		{#if defaultValue !== undefined}
+			<span class="field-default">default: <code>{defaultValue}</code></span>
+		{/if}
+	</div>
+	{#if children}
+		<div class="field-desc">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.field {
+		padding: 0.7rem 0;
+		border-top: 1px solid var(--border);
+	}
+	.field:last-of-type {
+		border-bottom: 1px solid var(--border);
+	}
+
+	.field-head {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: 0.5rem;
+	}
+
+	.field-name {
+		font-family: var(--font-mono);
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: var(--fg);
+	}
+	.field-deprecated {
+		text-decoration: line-through;
+		opacity: 0.7;
+	}
+
+	.field-type {
+		font-family: var(--font-mono);
+		font-size: 0.8rem;
+		color: var(--fg-muted);
+	}
+	.field-type-link {
+		color: var(--accent);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	.field-flag {
+		padding: 0.05rem 0.4rem;
+		border-radius: 9999px;
+		font-size: 0.62rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		color: var(--fg-subtle);
+		background-color: var(--bg-subtle);
+	}
+	.field-required {
+		color: oklch(0.62 0.21 25);
+		background-color: color-mix(in oklch, oklch(0.62 0.21 25) 14%, transparent);
+	}
+
+	.field-default {
+		font-size: 0.78rem;
+		color: var(--fg-subtle);
+	}
+	.field-default code {
+		font-family: var(--font-mono);
+	}
+
+	.field-desc {
+		margin-top: 0.4rem;
+		font-size: 0.9rem;
+		line-height: 1.6;
+		color: var(--fg-muted);
+	}
+	.field-desc :global(> :first-child) {
+		margin-top: 0;
+	}
+	.field-desc :global(> :last-child) {
+		margin-bottom: 0;
+	}
+</style>

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

@@ -0,0 +1,121 @@
+<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 {
+		address,
+		protocol = 'ws',
+		server,
+		description,
+		children
+	}: {
+		address: string;
+		protocol?: string;
+		server?: string;
+		description?: string;
+		children: Snippet;
+	} = $props();
+
+	const examples = $state<ApiExampleEntry[]>([]);
+	let counter = 0;
+
+	const objects = $derived(examples.filter((example) => example.kind === 'object'));
+	const messages = $derived(examples.filter((example) => example.kind !== 'object'));
+
+	const url = $derived((server ? server.replace(/\/$/, '') : '') + address);
+
+	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">
+		<div class="channel-head">
+			<span class="channel-protocol">{protocol.toUpperCase()}</span>
+			<code class="channel-address">{url}</code>
+		</div>
+		{#if description}
+			<p class="channel-sub">{description}</p>
+		{/if}
+		{@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="Messages" entries={messages} />
+		</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;
+	}
+
+	.channel-head {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		margin-bottom: 0.5rem;
+	}
+	.channel-protocol {
+		flex-shrink: 0;
+		border-radius: var(--radius-md);
+		background-color: color-mix(in oklab, var(--accent) 14%, transparent);
+		padding: 0.15rem 0.5rem;
+		font-family: var(--font-mono);
+		font-size: 0.7rem;
+		font-weight: 700;
+		letter-spacing: 0.02em;
+		color: var(--accent);
+	}
+	.channel-address {
+		font-family: var(--font-mono);
+		font-size: 1.05rem;
+		font-weight: 600;
+		color: var(--fg);
+	}
+	.channel-sub {
+		margin-top: 0;
+		color: var(--fg-muted);
+	}
+
+	.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/Endpoint.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import Copy from '@lucide/svelte/icons/copy';
+	import Check from '@lucide/svelte/icons/check';
+
+	let {
+		method = 'GET',
+		path,
+		baseUrl = ''
+	}: { method?: string; path: string; baseUrl?: string } = $props();
+
+	const upper = $derived(method.toUpperCase());
+
+	const segments = $derived(path.split(/(\{[^}]+\})/).filter(Boolean));
+
+	let copied = $state(false);
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(baseUrl + path);
+			copied = true;
+			setTimeout(() => (copied = false), 1500);
+		} catch {
+			copied = false;
+		}
+	}
+</script>
+
+<div class="endpoint">
+	<span class="endpoint-method" data-method={upper}>{upper}</span>
+	<code class="endpoint-path">
+		{#if baseUrl}<span class="endpoint-base">{baseUrl}</span
+			>{/if}{#each segments as segment (segment)}{#if /^\{.*\}$/.test(segment)}<span
+					class="endpoint-param">{segment}</span
+				>{:else}{segment}{/if}{/each}
+	</code>
+	<button type="button" class="endpoint-copy" onclick={copy} aria-label="Copy endpoint URL">
+		{#if copied}
+			<Check size={15} />
+		{:else}
+			<Copy size={15} />
+		{/if}
+	</button>
+</div>
+
+<style>
+	.endpoint {
+		display: flex;
+		align-items: center;
+		gap: 0.65rem;
+		margin: 1.25rem 0;
+		padding: 0.55rem 0.65rem 0.55rem 0.75rem;
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		background-color: var(--bg-subtle);
+	}
+
+	.endpoint-method {
+		flex-shrink: 0;
+		padding: 0.15rem 0.5rem;
+		border-radius: 0.3rem;
+		font-family: var(--font-mono);
+		font-size: 0.72rem;
+		font-weight: 700;
+		letter-spacing: 0.02em;
+		color: var(--m);
+		background-color: color-mix(in oklch, var(--m) 15%, transparent);
+	}
+	.endpoint-method[data-method='GET'] {
+		--m: oklch(0.6 0.15 155);
+	}
+	.endpoint-method[data-method='POST'] {
+		--m: oklch(0.6 0.16 250);
+	}
+	.endpoint-method[data-method='PUT'] {
+		--m: oklch(0.68 0.15 75);
+	}
+	.endpoint-method[data-method='PATCH'] {
+		--m: oklch(0.62 0.19 300);
+	}
+	.endpoint-method[data-method='DELETE'] {
+		--m: oklch(0.62 0.21 25);
+	}
+
+	.endpoint-path {
+		flex: 1;
+		overflow-x: auto;
+		font-family: var(--font-mono);
+		font-size: 0.85rem;
+		color: var(--fg);
+		white-space: nowrap;
+	}
+	.endpoint-base {
+		color: var(--fg-subtle);
+	}
+	.endpoint-param {
+		color: var(--accent);
+	}
+
+	.endpoint-copy {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		width: 1.85rem;
+		height: 1.85rem;
+		border-radius: 0.375rem;
+		color: var(--fg-subtle);
+		cursor: pointer;
+		transition:
+			color 0.15s,
+			background-color 0.15s;
+	}
+	.endpoint-copy:hover {
+		color: var(--fg);
+		background-color: var(--surface);
+	}
+</style>

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { value, children }: { value: string; children?: Snippet } = $props();
+</script>
+
+<div class="enum-item">
+	<code class="enum-pill">{value}</code>
+	{#if children}
+		<div class="enum-desc">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.enum-item {
+		padding: 0.6rem 0;
+	}
+
+	.enum-pill {
+		display: inline-block;
+		padding: 0.1rem 0.45rem;
+		border: 1px solid var(--border);
+		border-radius: 0.3rem;
+		background-color: var(--surface);
+		font-family: var(--font-mono);
+		font-size: 0.8rem;
+		color: var(--fg);
+	}
+
+	.enum-desc {
+		margin-top: 0.35rem;
+		font-size: 0.85rem;
+		line-height: 1.5;
+		color: var(--fg-muted);
+	}
+	.enum-desc :global(> :first-child) {
+		margin-top: 0;
+	}
+	.enum-desc :global(> :last-child) {
+		margin-bottom: 0;
+	}
+</style>

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { title = 'Possible enum values', children }: { title?: string; children: Snippet } =
+		$props();
+</script>
+
+<div class="enum">
+	<div class="enum-head">{title}</div>
+	<div class="enum-body">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.enum {
+		margin: 0.75rem 0;
+		border: 1px solid var(--border);
+		border-radius: 0.5rem;
+		background-color: var(--bg-subtle);
+	}
+	.enum-head {
+		padding: 0.55rem 0.85rem;
+		border-bottom: 1px solid var(--border);
+		font-size: 0.78rem;
+		font-weight: 600;
+		color: var(--fg-muted);
+	}
+	.enum-body {
+		padding: 0.25rem 0.85rem;
+	}
+	.enum-body > :global(.enum-item:not(:first-child)) {
+		border-top: 1px solid var(--border);
+	}
+</style>

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Minus from '@lucide/svelte/icons/minus';
+
+	let {
+		title = 'child attributes',
+		open = false,
+		children
+	}: { title?: string; open?: boolean; children: Snippet } = $props();
+
+	let isOpen = $state(untrack(() => open));
+</script>
+
+<div class="expandable">
+	<button
+		type="button"
+		class="expandable-toggle"
+		onclick={() => (isOpen = !isOpen)}
+		aria-expanded={isOpen}
+	>
+		{#if isOpen}
+			<Minus size={14} />
+		{:else}
+			<Plus size={14} />
+		{/if}
+		<span>{isOpen ? 'Hide' : 'Show'} {title}</span>
+	</button>
+
+	{#if isOpen}
+		<div class="expandable-body" transition:slide={{ duration: 150 }}>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.expandable {
+		margin-top: 0.6rem;
+	}
+
+	.expandable-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.3rem 0.7rem;
+		border: 1px solid var(--border);
+		border-radius: 0.375rem;
+		background-color: var(--surface);
+		font-size: 0.8rem;
+		font-weight: 500;
+		color: var(--fg-muted);
+		cursor: pointer;
+		transition:
+			color 0.12s,
+			border-color 0.12s;
+	}
+	.expandable-toggle:hover {
+		color: var(--fg);
+		border-color: var(--border-strong);
+	}
+
+	.expandable-body {
+		margin-top: 0.5rem;
+		padding-left: 1rem;
+		border-left: 1px solid var(--border);
+	}
+</style>

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ArrowUp from '@lucide/svelte/icons/arrow-up';
+	import ArrowDown from '@lucide/svelte/icons/arrow-down';
+
+	let {
+		direction = 'receive',
+		name,
+		children
+	}: {
+		direction?: 'send' | 'receive' | 'publish' | 'subscribe';
+		name?: string;
+		children?: Snippet;
+	} = $props();
+
+	const isSend = $derived(direction === 'send' || direction === 'publish');
+</script>
+
+<div class="message">
+	<div class="message-head" data-direction={isSend ? 'send' : 'receive'}>
+		{#if isSend}
+			<ArrowUp size={14} />
+		{:else}
+			<ArrowDown size={14} />
+		{/if}
+		<span class="message-label">{isSend ? 'Send' : 'Receive'}</span>
+		{#if name}
+			<code class="message-name">{name}</code>
+		{/if}
+	</div>
+	{#if children}
+		<div class="message-body">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.message {
+		margin: 1.75rem 0 0;
+	}
+	.message-head {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		border-radius: var(--radius-md);
+		padding: 0.25rem 0.6rem;
+		font-size: 0.8rem;
+		font-weight: 600;
+		color: var(--d);
+		background-color: color-mix(in oklab, var(--d) 12%, transparent);
+	}
+	.message-head[data-direction='send'] {
+		--d: oklch(0.6 0.16 250);
+	}
+	.message-head[data-direction='receive'] {
+		--d: oklch(0.6 0.15 155);
+	}
+	.message-name {
+		font-family: var(--font-mono);
+		font-weight: 600;
+		color: inherit;
+	}
+	.message-body :global(> :first-child) {
+		margin-top: 0.75rem;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { getContext, onDestroy, untrack } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { API, type ApiContext } from './api-context';
+
+	let { title = 'Object', children }: { title?: string; children: Snippet } = $props();
+
+	const api = getContext<ApiContext>(API);
+	const id = untrack(() => api.registerExample({ title, kind: 'object', snippet: children }));
+	onDestroy(() => api.unregisterExample(id));
+</script>

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { getContext, onDestroy, untrack } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { API, type ApiContext } from './api-context';
+
+	let { title = 'Request', children }: { title?: string; children: Snippet } = $props();
+
+	const api = getContext<ApiContext>(API);
+	const id = untrack(() => api.registerExample({ title, kind: 'request', snippet: children }));
+	onDestroy(() => api.unregisterExample(id));
+</script>

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { getContext, onDestroy, untrack } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { API, type ApiContext } from './api-context';
+
+	let { title = 'Response', children }: { title?: string; children: Snippet } = $props();
+
+	const api = getContext<ApiContext>(API);
+	const id = untrack(() => api.registerExample({ title, kind: 'response', snippet: children }));
+	onDestroy(() => api.unregisterExample(id));
+</script>