@axerity/cli 0.1.4 → 0.2.1

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

@@ -1,32 +0,0 @@
-<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

@@ -1,64 +0,0 @@
-<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

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

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

@@ -1,80 +0,0 @@
-<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

@@ -1,100 +0,0 @@
-<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>

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

@@ -1,124 +0,0 @@
-<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

@@ -1,121 +0,0 @@
-<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

@@ -1,116 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-<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>