@axerity/cli 0.1.4 → 0.2.1

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>

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

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

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

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

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

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

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

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