@axerity/cli 0.1.3 → 0.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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