svelte-docsmith 0.1.0

package/dist/ui/markdown/pre.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { useClipboard } from '../../clipboard.svelte.js';
+	import type { Snippet } from 'svelte';
+	import { ScrollArea } from '../shadcn/scroll-area/index.js';
+	import CopyButton from '../copy-button.svelte';
+
+	const clipboard = useClipboard();
+
+	const { children }: { children: Snippet } = $props();
+</script>
+
+<div class="rounded-md overflow-hidden bg-muted mt-2 shadow-md text-sm relative">
+	<ScrollArea orientation="both" class="relative">
+		<CopyButton
+			copied={clipboard.copied}
+			onclick={() => clipboard.copy()}
+			class="bg-muted absolute top-2 right-2 z-10"
+		/>
+
+		<pre class="not-prose shiki max-h-[32rem] flex shrink" use:clipboard.readText>
+			{@render children()}
+		</pre>
+
+		<!-- Scroll indicators with increased fade intensity -->
+		<div
+			class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-muted via-muted/70 to-transparent pointer-events-none"
+			aria-hidden="true"
+		></div>
+		<div
+			class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-muted via-muted/70 to-transparent pointer-events-none"
+			aria-hidden="true"
+		></div>
+		<div
+			class="absolute top-0 bottom-0 right-0 w-4 bg-gradient-to-l from-muted via-muted/70 to-transparent pointer-events-none"
+			aria-hidden="true"
+		></div>
+		<div
+			class="absolute top-0 bottom-0 left-0 w-4 bg-gradient-to-r from-muted via-muted/70 to-transparent pointer-events-none"
+			aria-hidden="true"
+		></div>
+	</ScrollArea>
+</div>
+
+<style>
+	/*
+	 * Plain CSS (not @apply): these style Shiki's output and ship inside the
+	 * published package, where the consumer's Tailwind theme context isn't
+	 * available to resolve @apply (Tailwind v4 compiles scoped styles in
+	 * isolation). See PLAN.md §2.5.
+	 */
+	:global(pre code) {
+		display: block;
+		flex-grow: 1;
+		height: 100%;
+		margin: 0;
+		padding-block: 1rem;
+	}
+
+	:global(pre span.line) {
+		display: inline-block;
+		width: 100%;
+		padding-inline: 1rem;
+	}
+
+	:global(pre span.line.highlighted) {
+		background-color: rgb(254 240 138 / 0.5);
+	}
+
+	:global(.dark pre span.line.highlighted) {
+		background-color: rgb(250 204 21 / 0.2);
+	}
+
+	:global(pre span.line.diff.add) {
+		background-color: rgb(134 239 172 / 0.5);
+	}
+
+	:global(pre span.line.diff.remove) {
+		background-color: rgb(252 165 165 / 0.5);
+	}
+
+	:global(.dark pre span.line.diff.add) {
+		background-color: rgb(22 163 74 / 0.2);
+	}
+
+	:global(.dark pre span.line.diff.remove) {
+		background-color: rgb(220 38 38 / 0.2);
+	}
+</style>

package/dist/ui/markdown/pre.svelte.d.ts

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

package/dist/ui/markdown/table.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	// mdsvex maps every markdown `<table>` to this component, so plain markdown
+	// tables (API entry points, token lists, frontmatter fields) render with the
+	// same bordered, quiet-header look as the PropsTable component. Authors write
+	// normal markdown; the styling is automatic.
+	const { children }: { children: Snippet } = $props();
+</script>
+
+<div class="md-table not-prose">
+	<div class="md-table-scroll">
+		<table>
+			{@render children()}
+		</table>
+	</div>
+</div>
+
+<style>
+	.md-table {
+		margin: 1.75rem 0;
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+		background: var(--card);
+		overflow: hidden;
+	}
+	.md-table-scroll {
+		overflow-x: auto;
+	}
+	.md-table table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.875rem;
+	}
+
+	.md-table :global(thead th) {
+		text-align: left;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+		padding: 0.6rem 1rem;
+		border-bottom: 1px solid var(--border);
+		background: color-mix(in oklch, var(--muted) 55%, var(--card));
+		white-space: nowrap;
+	}
+	.md-table :global(tbody td) {
+		padding: 0.7rem 1rem;
+		vertical-align: baseline;
+		border-top: 1px solid var(--border);
+		color: var(--foreground);
+		transition: background-color 120ms ease;
+	}
+	.md-table :global(tbody tr:first-child td) {
+		border-top: none;
+	}
+	.md-table :global(tbody tr:hover td) {
+		background: color-mix(in oklch, var(--muted) 45%, transparent);
+	}
+	/* Inline code inside cells: subtle chip so token names stay scannable. */
+	.md-table :global(td code),
+	.md-table :global(th code) {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.82em;
+		padding: 0.05em 0.35em;
+		border-radius: 0.35rem;
+		background: color-mix(in oklch, var(--muted) 60%, transparent);
+		white-space: nowrap;
+	}
+	.md-table :global(td a) {
+		color: var(--primary);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.md-table :global(tbody td) {
+			transition: none;
+		}
+	}
+</style>

package/dist/ui/markdown/table.svelte.d.ts

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

package/dist/ui/markdown/types.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithChildren } from '../../types.js';
+export type HeadingProps = WithChildren<HTMLAttributes<HTMLHeadingElement>>;

package/dist/ui/markdown/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/prop.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const {
+		name,
+		type,
+		required = false,
+		default: defaultValue,
+		children
+	}: {
+		/** Property name. */
+		name: string;
+		/** Type signature, shown as code. */
+		type?: string;
+		/** Mark the property as required. */
+		required?: boolean;
+		/** Default value, shown in its own column. */
+		default?: string;
+		/** Description. */
+		children?: Snippet;
+	} = $props();
+
+	// Split a union into per-value chips so long ones wrap as a tidy pill group
+	// instead of ugly broken text. Skip splitting when the type is a generic
+	// (`Array<A | B>`) where a top-level `|` split would be wrong.
+	const typeParts = $derived.by(() => {
+		if (!type) return [];
+		if (/[<(]/.test(type)) return [type];
+		return type
+			.split('|')
+			.map((s) => s.trim())
+			.filter(Boolean);
+	});
+</script>
+
+<tr>
+	<td class="prop-name">
+		<code>{name}</code>
+		{#if required}<span class="prop-required">required</span>{/if}
+	</td>
+	<td class="prop-type">
+		{#each typeParts as part (part)}
+			<code class="type-chip">{part}</code>
+		{/each}
+	</td>
+	<td class="prop-default">
+		{#if defaultValue !== undefined}
+			<code>{defaultValue}</code>
+		{:else}
+			<span class="prop-none" aria-hidden="true">—</span>
+		{/if}
+	</td>
+	<td class="prop-desc">
+		{#if children}{@render children()}{/if}
+	</td>
+</tr>
+
+<style>
+	/* Name is the anchor you scan for: mono, ink, medium weight. */
+	.prop-name {
+		white-space: nowrap;
+	}
+	.prop-name code {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--foreground);
+	}
+	/* Solid brand pill — the sanctioned primary-foreground-on-primary pairing,
+	   so it stays legible in both themes (terracotta-on-tint fails AA in light). */
+	.prop-required {
+		display: inline-block;
+		margin-left: 0.45rem;
+		padding: 0.05rem 0.4rem;
+		border-radius: 9999px;
+		background: var(--primary);
+		color: var(--primary-foreground);
+		font-size: 0.625rem;
+		font-weight: 600;
+		letter-spacing: 0.02em;
+		vertical-align: 0.1em;
+	}
+
+	/* Type values as chips: a union wraps as a neat pill group, each token
+	   unbroken. Single types render as one chip. */
+	.prop-type {
+		max-width: 26rem;
+	}
+	.type-chip {
+		display: inline-block;
+		margin: 0.1rem 0.3rem 0.1rem 0;
+		padding: 0.05rem 0.4rem;
+		border-radius: 0.4rem;
+		border: 1px solid var(--border);
+		background: color-mix(in oklch, var(--muted) 55%, transparent);
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.78rem;
+		color: var(--foreground);
+		white-space: nowrap;
+	}
+
+	.prop-default {
+		white-space: nowrap;
+	}
+	.prop-default code {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.8125rem;
+		color: var(--foreground);
+	}
+	.prop-none {
+		color: var(--muted-foreground);
+	}
+
+	.prop-desc {
+		color: var(--foreground);
+		line-height: 1.55;
+	}
+	.prop-desc :global(code) {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.85em;
+		padding: 0.05em 0.3em;
+		border-radius: 0.3rem;
+		background: color-mix(in oklch, var(--muted) 60%, transparent);
+	}
+	.prop-desc :global(a) {
+		color: var(--primary);
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Property name. */
+    name: string;
+    /** Type signature, shown as code. */
+    type?: string;
+    /** Mark the property as required. */
+    required?: boolean;
+    /** Default value, shown in its own column. */
+    default?: string;
+    /** Description. */
+    children?: Snippet;
+};
+declare const Prop: import("svelte").Component<$$ComponentProps, {}, "">;
+type Prop = ReturnType<typeof Prop>;
+export default Prop;

package/dist/ui/props-table.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const {
+		title,
+		children
+	}: {
+		/** Optional caption — the component name when a page documents several. */
+		title?: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<!--
+	A component API reference. Compose it from <Prop> rows:
+
+	  <PropsTable title="Badge">
+	    <Prop name="variant" type="'a' | 'b'" default="'a'">Visual intent.</Prop>
+	    <Prop name="href" type="string" required>Turns it into a link.</Prop>
+	  </PropsTable>
+-->
+<div class="props-table not-prose">
+	{#if title}
+		<div class="props-table-caption">
+			<span class="props-table-caption-mark" aria-hidden="true">&lt;/&gt;</span>
+			<span class="props-table-caption-name">{title}</span>
+		</div>
+	{/if}
+	<div class="props-table-scroll">
+		<table>
+			<thead>
+				<tr>
+					<th class="col-prop">Prop</th>
+					<th class="col-type">Type</th>
+					<th class="col-default">Default</th>
+					<th class="col-desc">Description</th>
+				</tr>
+			</thead>
+			<tbody>
+				{@render children()}
+			</tbody>
+		</table>
+	</div>
+</div>
+
+<style>
+	.props-table {
+		margin: 1.75rem 0;
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+		background: var(--card);
+		/* Clip the scroll region to the rounded corners. */
+		overflow: hidden;
+	}
+
+	/* Caption = which component. Mono + ink weight, distinct from the quiet
+	   column-header row below it so the two never read as one grey slab. */
+	.props-table-caption {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.65rem 1rem;
+		border-bottom: 1px solid var(--border);
+		background: color-mix(in oklch, var(--muted) 55%, var(--card));
+	}
+	.props-table-caption-mark {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.7rem;
+		font-weight: 600;
+		color: var(--primary);
+		opacity: 0.85;
+	}
+	.props-table-caption-name {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.8125rem;
+		font-weight: 600;
+		letter-spacing: -0.01em;
+		color: var(--foreground);
+	}
+
+	.props-table-scroll {
+		overflow-x: auto;
+	}
+	.props-table table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.875rem;
+	}
+
+	/* Column headers: quiet labels, no fill — the caption owns the emphasis. */
+	.props-table :global(thead th) {
+		text-align: left;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+		padding: 0.55rem 1rem;
+		border-bottom: 1px solid var(--border);
+		white-space: nowrap;
+	}
+	/* Prop / Default shrink to their content; Type flexes; Description holds width. */
+	.props-table :global(.col-prop),
+	.props-table :global(.col-default) {
+		width: 1%;
+	}
+	.props-table :global(.col-desc) {
+		width: 40%;
+	}
+
+	.props-table :global(tbody td) {
+		padding: 0.7rem 1rem;
+		vertical-align: baseline;
+		border-top: 1px solid var(--border);
+		transition: background-color 120ms ease;
+	}
+	.props-table :global(tbody tr:first-child td) {
+		border-top: none;
+	}
+	.props-table :global(tbody tr:hover td) {
+		background: color-mix(in oklch, var(--muted) 45%, transparent);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.props-table :global(tbody td) {
+			transition: none;
+		}
+	}
+</style>

package/dist/ui/props-table.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Optional caption — the component name when a page documents several. */
+    title?: string;
+    children: Snippet;
+};
+declare const PropsTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type PropsTable = ReturnType<typeof PropsTable>;
+export default PropsTable;

package/dist/ui/shadcn/accordion/accordion-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '../../../shadcn.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	data-slot="accordion-content"
+	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
+	{...restProps}
+>
+	<div
+		class={cn(
+			'pt-0 pb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
+			className
+		)}
+	>
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

package/dist/ui/shadcn/accordion/accordion-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+declare const AccordionContent: import("svelte").Component<Omit<AccordionPrimitive.ContentProps, "child">, {}, "ref">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/ui/shadcn/accordion/accordion-item.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '../../../shadcn.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn('not-last:border-b', className)}
+	{...restProps}
+/>

package/dist/ui/shadcn/accordion/accordion-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+declare const AccordionItem: import("svelte").Component<AccordionPrimitive.ItemProps, {}, "ref">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/ui/shadcn/accordion/accordion-trigger.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn, type WithoutChild } from '../../../shadcn.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps['level'];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
+		bind:ref
+		class={cn(
+			'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDownIcon
+			data-slot="accordion-trigger-icon"
+			class="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+		/>
+		<ChevronUpIcon
+			data-slot="accordion-trigger-icon"
+			class="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/dist/ui/shadcn/accordion/accordion-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import { type WithoutChild } from '../../../shadcn.js';
+type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
+    level?: AccordionPrimitive.HeaderProps['level'];
+};
+declare const AccordionTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
+export default AccordionTrigger;

package/dist/ui/shadcn/accordion/accordion.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '../../../shadcn.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	class={cn('cn-accordion flex w-full flex-col', className)}
+	{...restProps}
+/>

package/dist/ui/shadcn/accordion/accordion.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+declare const Accordion: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/ui/shadcn/accordion/index.d.ts

@@ -0,0 +1,5 @@
+import Root from './accordion.svelte';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

package/dist/ui/shadcn/accordion/index.js

@@ -0,0 +1,7 @@
+import Root from './accordion.svelte';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+export { Root, Content, Item, Trigger, 
+//
+Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

package/dist/ui/shadcn/badge/badge.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const badgeVariants = tv({
+		base: 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+				destructive:
+					'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+				link: 'text-primary underline-offset-4 hover:underline'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../shadcn.js';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>