svelte-docsmith 0.1.0

package/dist/ui/badge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	export type BadgeVariant =
+		| 'default'
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'warning'
+		| 'danger'
+		| 'outline';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		Badge as ShadcnBadge,
+		type BadgeVariant as ShadcnVariant
+	} from './shadcn/badge/index.js';
+
+	const {
+		variant = 'default',
+		href,
+		children
+	}: {
+		/** Visual intent. Default: `default`. */
+		variant?: BadgeVariant;
+		/** Turns the badge into a link. */
+		href?: string;
+		children: Snippet;
+	} = $props();
+
+	// Docs intents map onto the vendored shadcn badge. success/warning aren't
+	// shadcn variants, so they render on the `outline` base with token-driven
+	// colors layered on top (tailwind-merge lets the extra classes win).
+	const base: Record<BadgeVariant, ShadcnVariant> = {
+		default: 'secondary',
+		primary: 'default',
+		secondary: 'secondary',
+		success: 'outline',
+		warning: 'outline',
+		danger: 'destructive',
+		outline: 'outline'
+	};
+
+	const extra: Partial<Record<BadgeVariant, string>> = {
+		success:
+			'border-transparent bg-emerald-500/10 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400',
+		warning:
+			'border-transparent bg-amber-500/10 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400'
+	};
+</script>
+
+<ShadcnBadge variant={base[variant]} {href} class={extra[variant]}>
+	{@render children()}
+</ShadcnBadge>

package/dist/ui/badge.svelte.d.ts

@@ -0,0 +1,12 @@
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Visual intent. Default: `default`. */
+    variant?: BadgeVariant;
+    /** Turns the badge into a link. */
+    href?: string;
+    children: Snippet;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/ui/callout.svelte

@@ -0,0 +1,125 @@
+<script lang="ts" module>
+	export type CalloutType = 'note' | 'tip' | 'warning' | 'danger';
+</script>
+
+<script lang="ts">
+	import Info from '@lucide/svelte/icons/info';
+	import Lightbulb from '@lucide/svelte/icons/lightbulb';
+	import TriangleAlert from '@lucide/svelte/icons/triangle-alert';
+	import CircleAlert from '@lucide/svelte/icons/circle-alert';
+	import type { Component } from 'svelte';
+	import type { Snippet } from 'svelte';
+
+	const {
+		type = 'note',
+		title,
+		children
+	}: {
+		/** Visual intent. Default: `note`. */
+		type?: CalloutType;
+		/** Optional heading; defaults to the capitalized type. */
+		title?: string;
+		children: Snippet;
+	} = $props();
+
+	const variants: Record<CalloutType, { icon: Component; label: string; klass: string }> = {
+		note: { icon: Info, label: 'Note', klass: 'callout-note' },
+		tip: { icon: Lightbulb, label: 'Tip', klass: 'callout-tip' },
+		warning: { icon: TriangleAlert, label: 'Warning', klass: 'callout-warning' },
+		danger: { icon: CircleAlert, label: 'Danger', klass: 'callout-danger' }
+	};
+
+	const variant = $derived(variants[type]);
+	const Icon = $derived(variant.icon);
+</script>
+
+<div role="note" class="not-prose callout {variant.klass}">
+	<Icon class="callout-icon" size={18} aria-hidden="true" />
+	<div class="callout-body">
+		<p class="callout-title">{title ?? variant.label}</p>
+		<div class="callout-content">{@render children()}</div>
+	</div>
+</div>
+
+<style>
+	.callout {
+		display: flex;
+		gap: 0.75rem;
+		margin: 1.5rem 0;
+		padding: 1rem 1.1rem;
+		border: 1px solid;
+		border-radius: var(--radius);
+		background: var(--callout-bg);
+		border-color: var(--callout-border);
+	}
+	:global(.callout .callout-icon) {
+		margin-top: 0.1rem;
+		flex-shrink: 0;
+		color: var(--callout-accent);
+	}
+	.callout-body {
+		min-width: 0;
+	}
+	.callout-title {
+		margin: 0;
+		font-weight: 600;
+		font-size: 0.875rem;
+		color: var(--callout-accent);
+	}
+	.callout-content {
+		margin-top: 0.25rem;
+		font-size: 0.9375rem;
+		line-height: 1.6;
+		color: var(--foreground);
+	}
+	.callout-content :global(:first-child) {
+		margin-top: 0;
+	}
+	.callout-content :global(:last-child) {
+		margin-bottom: 0;
+	}
+	.callout-content :global(a) {
+		color: var(--callout-accent);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+	.callout-content :global(code) {
+		font-family: var(--font-mono);
+		font-size: 0.85em;
+	}
+
+	/* Tints are built from a single hue per type so light and dark both read
+	   correctly; body copy stays on --foreground for contrast. */
+	.callout-note {
+		--callout-accent: oklch(0.58 0.13 250);
+		--callout-bg: oklch(0.58 0.13 250 / 0.08);
+		--callout-border: oklch(0.58 0.13 250 / 0.28);
+	}
+	.callout-tip {
+		--callout-accent: oklch(0.6 0.13 160);
+		--callout-bg: oklch(0.6 0.13 160 / 0.08);
+		--callout-border: oklch(0.6 0.13 160 / 0.28);
+	}
+	.callout-warning {
+		--callout-accent: oklch(0.62 0.14 75);
+		--callout-bg: oklch(0.62 0.14 75 / 0.1);
+		--callout-border: oklch(0.62 0.14 75 / 0.3);
+	}
+	.callout-danger {
+		--callout-accent: var(--destructive);
+		--callout-bg: oklch(0.64 0.21 25 / 0.08);
+		--callout-border: oklch(0.64 0.21 25 / 0.28);
+	}
+	:global(.dark) .callout-note {
+		--callout-accent: oklch(0.75 0.12 250);
+	}
+	:global(.dark) .callout-tip {
+		--callout-accent: oklch(0.78 0.13 160);
+	}
+	:global(.dark) .callout-warning {
+		--callout-accent: oklch(0.82 0.13 80);
+	}
+	:global(.dark) .callout-danger {
+		--callout-accent: oklch(0.72 0.17 25);
+	}
+</style>

package/dist/ui/callout.svelte.d.ts

@@ -0,0 +1,13 @@
+export type CalloutType = 'note' | 'tip' | 'warning' | 'danger';
+import type { Component } from 'svelte';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Visual intent. Default: `note`. */
+    type?: CalloutType;
+    /** Optional heading; defaults to the capitalized type. */
+    title?: string;
+    children: Snippet;
+};
+declare const Callout: Component<$$ComponentProps, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/ui/card-grid.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const { children }: { children: Snippet } = $props();
+</script>
+
+<!-- Breakpoint-free responsive grid of <Card>s. -->
+<div class="not-prose my-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(15rem,1fr))]">
+	{@render children()}
+</div>

package/dist/ui/card-grid.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const CardGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardGrid = ReturnType<typeof CardGrid>;
+export default CardGrid;

package/dist/ui/card.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import type { Snippet } from 'svelte';
+
+	const {
+		title,
+		href,
+		external = false,
+		icon,
+		children
+	}: {
+		title: string;
+		/** Turns the card into a link. */
+		href?: string;
+		external?: boolean;
+		/** Optional leading icon. */
+		icon?: Snippet;
+		/** Card body / description. */
+		children?: Snippet;
+	} = $props();
+
+	const tag = $derived(href ? 'a' : 'div');
+	const rel = $derived(external ? 'noopener noreferrer' : undefined);
+	const target = $derived(external ? '_blank' : undefined);
+</script>
+
+<svelte:element
+	this={tag}
+	{href}
+	{rel}
+	{target}
+	class="group not-prose flex flex-col gap-2 rounded-xl border border-border bg-card p-5 shadow-sm transition-colors {href
+		? 'hover:border-primary/40 focus-visible:border-primary/40 focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden'
+		: ''}"
+>
+	{#if icon}
+		<div class="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+			{@render icon()}
+		</div>
+	{/if}
+	<div class="flex items-center gap-1.5">
+		<h3 class="font-semibold tracking-tight">{title}</h3>
+		{#if href}
+			<ArrowRight
+				class="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-primary"
+			/>
+		{/if}
+	</div>
+	{#if children}
+		<div class="text-sm leading-relaxed text-muted-foreground">{@render children()}</div>
+	{/if}
+</svelte:element>

package/dist/ui/card.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    title: string;
+    /** Turns the card into a link. */
+    href?: string;
+    external?: boolean;
+    /** Optional leading icon. */
+    icon?: Snippet;
+    /** Card body / description. */
+    children?: Snippet;
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/ui/copy-button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Button } from './shadcn/button/index.js';
+	import Check from '@lucide/svelte/icons/check';
+	import Copy from '@lucide/svelte/icons/copy';
+	import { fade } from 'svelte/transition';
+
+	const {
+		copied,
+		onclick,
+		class: className
+	}: {
+		/** Whether the copy just succeeded — swaps the icon to a check. */
+		copied: boolean;
+		onclick: () => void;
+		class?: string;
+	} = $props();
+</script>
+
+<Button {onclick} variant="ghost" size="icon" class="size-8 {className ?? ''}">
+	{#if copied}
+		<div in:fade={{ duration: 80 }}>
+			<Check class="text-emerald-500" />
+		</div>
+	{:else}
+		<div in:fade={{ duration: 200 }}>
+			<Copy />
+		</div>
+	{/if}
+	<span class="sr-only">Copy</span>
+</Button>

package/dist/ui/copy-button.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    /** Whether the copy just succeeded — swaps the icon to a check. */
+    copied: boolean;
+    onclick: () => void;
+    class?: string;
+};
+declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/ui/file-tree-item.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import Folder from '@lucide/svelte/icons/folder';
+	import FileIcon from '@lucide/svelte/icons/file';
+	import type { Snippet } from 'svelte';
+
+	const {
+		name,
+		folder = false,
+		highlight = false,
+		children
+	}: {
+		/** File or directory name. */
+		name: string;
+		/** Force folder styling for an empty directory (folders with children are detected automatically). */
+		folder?: boolean;
+		/** Emphasize this entry — e.g. the file a guide is about to create. */
+		highlight?: boolean;
+		/** Nested entries. Their presence marks this item as a folder. */
+		children?: Snippet;
+	} = $props();
+
+	const isFolder = $derived(folder || !!children);
+</script>
+
+<li class="ft-item">
+	<span class="ft-label" class:ft-highlight={highlight}>
+		{#if isFolder}
+			<Folder class="ft-icon ft-icon-folder" size={15} aria-hidden="true" />
+		{:else}
+			<FileIcon class="ft-icon ft-icon-file" size={15} aria-hidden="true" />
+		{/if}
+		<span class="ft-name">{name}</span>
+	</span>
+	{#if children}
+		<ul>
+			{@render children()}
+		</ul>
+	{/if}
+</li>
+
+<style>
+	.ft-item {
+		margin: 0;
+		padding: 0;
+	}
+	.ft-label {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.45rem;
+		padding: 0.1rem 0.35rem;
+		border-radius: calc(var(--radius) - 2px);
+	}
+	.ft-highlight {
+		background: color-mix(in oklch, var(--primary) 12%, transparent);
+		color: var(--primary);
+		font-weight: 600;
+	}
+	:global(.filetree .ft-icon) {
+		flex-shrink: 0;
+	}
+	:global(.filetree .ft-icon-folder) {
+		color: var(--primary);
+	}
+	:global(.filetree .ft-icon-file) {
+		color: var(--muted-foreground);
+	}
+	.ft-name {
+		color: var(--foreground);
+	}
+</style>

package/dist/ui/file-tree-item.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** File or directory name. */
+    name: string;
+    /** Force folder styling for an empty directory (folders with children are detected automatically). */
+    folder?: boolean;
+    /** Emphasize this entry — e.g. the file a guide is about to create. */
+    highlight?: boolean;
+    /** Nested entries. Their presence marks this item as a folder. */
+    children?: Snippet;
+};
+declare const FileTreeItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileTreeItem = ReturnType<typeof FileTreeItem>;
+export default FileTreeItem;

package/dist/ui/file-tree.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const { children }: { children: Snippet } = $props();
+</script>
+
+<!--
+	A static project/directory tree for docs. Compose it from <FileTreeItem>s;
+	nesting is just nested items. Works in markdown and plain .svelte alike.
+-->
+<ul class="filetree not-prose">
+	{@render children()}
+</ul>
+
+<style>
+	.filetree {
+		margin: 1.5rem 0;
+		padding: 0.75rem 1rem;
+		list-style: none;
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+		background: var(--card);
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.85rem;
+		line-height: 1.6;
+	}
+	.filetree :global(ul) {
+		list-style: none;
+		margin: 0;
+		padding-left: 1.05rem;
+		border-left: 1px solid var(--border);
+		margin-left: 0.5rem;
+	}
+</style>

package/dist/ui/file-tree.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const FileTree: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileTree = ReturnType<typeof FileTree>;
+export default FileTree;

package/dist/ui/icons/github.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	const { class: className = '' }: { class?: string } = $props();
+</script>
+
+<svg
+	role="img"
+	fill="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	class={className}
+	><title>GitHub</title><path
+		d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+	/>
+</svg>

package/dist/ui/icons/github.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const Github: import("svelte").Component<$$ComponentProps, {}, "">;
+type Github = ReturnType<typeof Github>;
+export default Github;

package/dist/ui/kbd.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const { children }: { children: Snippet } = $props();
+</script>
+
+<kbd
+	class="border-border bg-muted text-muted-foreground inline-flex min-w-[1.6em] items-center justify-center rounded-md border px-1.5 py-0.5 font-mono text-[0.75em] leading-none font-medium shadow-sm"
+>
+	{@render children()}
+</kbd>

package/dist/ui/kbd.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Kbd: import("svelte").Component<$$ComponentProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/ui/layouts/breadcrumbs.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+
+	export type Crumb = { title: string; url?: string };
+
+	const { items = [] }: { items?: Crumb[] } = $props();
+</script>
+
+{#if items.length > 1}
+	<nav aria-label="Breadcrumb" class="mb-5">
+		<ol class="flex flex-wrap items-center gap-1.5 text-sm">
+			{#each items as crumb, i (crumb.title + i)}
+				{@const isLast = i === items.length - 1}
+				<li class="flex items-center gap-1.5">
+					{#if i > 0}
+						<ChevronRight class="text-muted-foreground/50 size-3.5 shrink-0" aria-hidden="true" />
+					{/if}
+					{#if crumb.url && !isLast}
+						<a
+							href={crumb.url}
+							class="text-muted-foreground hover:text-foreground rounded transition-colors"
+						>
+							{crumb.title}
+						</a>
+					{:else}
+						<span
+							class={isLast ? 'text-foreground font-medium' : 'text-muted-foreground'}
+							aria-current={isLast ? 'page' : undefined}
+						>
+							{crumb.title}
+						</span>
+					{/if}
+				</li>
+			{/each}
+		</ol>
+	</nav>
+{/if}

package/dist/ui/layouts/breadcrumbs.svelte.d.ts

@@ -0,0 +1,10 @@
+export type Crumb = {
+    title: string;
+    url?: string;
+};
+type $$ComponentProps = {
+    items?: Crumb[];
+};
+declare const Breadcrumbs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/ui/layouts/docs-footer.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { DocsmithConfig } from '../../config.js';
+
+	const { config }: { config: DocsmithConfig } = $props();
+	const footer = $derived(config.footer);
+</script>
+
+{#if footer}
+	<footer class="border-border/60 mt-16 border-t">
+		<div class="mx-auto max-w-7xl px-4 py-10 md:px-6 lg:px-8">
+			{#if footer.columns?.length}
+				<div class="mb-8 grid gap-8 grid-cols-[repeat(auto-fit,minmax(10rem,1fr))]">
+					{#each footer.columns as column (column.title)}
+						<div>
+							<p class="mb-3 text-sm font-semibold">{column.title}</p>
+							<ul class="space-y-2">
+								{#each column.links as link (link.href)}
+									<li>
+										<a
+											href={link.href}
+											target={link.external ? '_blank' : undefined}
+											rel={link.external ? 'noopener noreferrer' : undefined}
+											class="text-muted-foreground hover:text-foreground text-sm transition-colors"
+										>
+											{link.label}
+										</a>
+									</li>
+								{/each}
+							</ul>
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			{#if footer.copyright}
+				<p class="text-muted-foreground text-sm">{footer.copyright}</p>
+			{/if}
+		</div>
+	</footer>
+{/if}

package/dist/ui/layouts/docs-footer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DocsmithConfig } from '../../config.js';
+type $$ComponentProps = {
+    config: DocsmithConfig;
+};
+declare const DocsFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsFooter = ReturnType<typeof DocsFooter>;
+export default DocsFooter;