@vibesdotdev/docs 0.0.0-stage → 1.0.0-rc.3

package/dist/svelte/ui/directives/Descriptor.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { DirectiveNode } from '@vibesdotdev/docs';
+
+	interface Props {
+		node: DirectiveNode;
+	}
+	const { node }: Props = $props();
+
+	const kind = $derived(node.attrs.kind ?? '?');
+	const id = $derived(node.attrs.id ?? '?');
+</script>
+
+<div class="descriptor-card">
+	<div class="descriptor-card__header">
+		<span class="descriptor-card__chip">descriptor</span>
+		<span class="descriptor-card__id">{id}</span>
+	</div>
+	<dl class="descriptor-card__body">
+		<dt>kind</dt>
+		<dd><code>{kind}</code></dd>
+		<dt>id</dt>
+		<dd><code>{id}</code></dd>
+	</dl>
+</div>
+
+<style>
+	.descriptor-card {
+		border: 1px solid var(--color-border, hsl(0 0% 90%));
+		border-radius: 0.75rem;
+		padding: 0.875rem 1rem;
+		background: var(--color-card, hsl(0 0% 99%));
+		margin: 1rem 0;
+	}
+	.descriptor-card__header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+	.descriptor-card__chip {
+		font-size: 0.6875rem;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		padding: 0.125rem 0.5rem;
+		border-radius: 9999px;
+		background: var(--color-muted, hsl(220 13% 91%));
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+		font-weight: 600;
+	}
+	.descriptor-card__id {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+	.descriptor-card__body {
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		gap: 0.25rem 1rem;
+		font-size: 0.875rem;
+		margin: 0;
+	}
+	.descriptor-card__body dt {
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+		font-weight: 500;
+	}
+	.descriptor-card__body dd {
+		margin: 0;
+	}
+	.descriptor-card__body code {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.8125rem;
+	}
+</style>

package/dist/svelte/ui/directives/Descriptor.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DirectiveNode } from '@vibesdotdev/docs';
+interface Props {
+    node: DirectiveNode;
+}
+declare const Descriptor: import("svelte").Component<Props, {}, "">;
+type Descriptor = ReturnType<typeof Descriptor>;
+export default Descriptor;
+//# sourceMappingURL=Descriptor.svelte.d.ts.map

package/dist/svelte/ui/directives/Descriptor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Descriptor.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/ui/directives/Descriptor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGtD,UAAU,KAAK;IACd,IAAI,EAAE,aAAa,CAAC;CACpB;AA2BF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/svelte/ui/directives/DirectiveDispatch.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { DirectiveNode } from '@vibesdotdev/docs';
+	import Descriptor from './Descriptor.svelte';
+	import Endpoint from './Endpoint.svelte';
+	import Install from './Install.svelte';
+	import Shell from './Shell.svelte';
+	import Usage from './Usage.svelte';
+	import Card from './Card.svelte';
+
+	interface Props {
+		node: DirectiveNode;
+	}
+	const { node }: Props = $props();
+</script>
+
+{#if node.name === 'descriptor'}
+	<Descriptor {node} />
+{:else if node.name === 'endpoint'}
+	<Endpoint {node} />
+{:else if node.name === 'install'}
+	<Install {node} />
+{:else if node.name === 'shell'}
+	<Shell {node} />
+{:else if node.name === 'usage'}
+	<Usage {node} />
+{:else if node.name === 'card'}
+	<Card {node} />
+{:else}
+	<div class="unknown-directive">[unknown directive: {node.name}]</div>
+	{#if node.body.trim()}
+		<pre>{node.body.trim()}</pre>
+	{/if}
+{/if}
+
+<style>
+	.unknown-directive {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.75rem;
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+		padding: 0.25rem 0.5rem;
+		border: 1px dashed var(--color-border, hsl(0 0% 90%));
+		border-radius: 0.375rem;
+		margin: 0.5rem 0;
+	}
+</style>

package/dist/svelte/ui/directives/DirectiveDispatch.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DirectiveNode } from '@vibesdotdev/docs';
+interface Props {
+    node: DirectiveNode;
+}
+declare const DirectiveDispatch: import("svelte").Component<Props, {}, "">;
+type DirectiveDispatch = ReturnType<typeof DirectiveDispatch>;
+export default DirectiveDispatch;
+//# sourceMappingURL=DirectiveDispatch.svelte.d.ts.map

package/dist/svelte/ui/directives/DirectiveDispatch.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectiveDispatch.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/ui/directives/DirectiveDispatch.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAStD,UAAU,KAAK;IACd,IAAI,EAAE,aAAa,CAAC;CACpB;AAoCF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/ui/directives/Endpoint.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { DirectiveNode } from '@vibesdotdev/docs';
+
+	interface Props {
+		node: DirectiveNode;
+	}
+	const { node }: Props = $props();
+
+	function getMethodHue(m: string): string {
+		switch (m) {
+			case 'GET':
+				return '142 71% 45%';
+			case 'POST':
+				return '38 92% 50%';
+			case 'PUT':
+				return '217 91% 60%';
+			case 'PATCH':
+				return '291 64% 42%';
+			case 'DELETE':
+				return '0 84% 60%';
+			default:
+				return '220 13% 50%';
+		}
+	}
+
+	const method = $derived((node.attrs.method ?? 'GET').toUpperCase());
+	const path = $derived(node.attrs.path ?? '/');
+	const appId = $derived(node.attrs.appId);
+	const hue = $derived(getMethodHue(method));
+</script>
+
+<div class="endpoint" style="--method-hue: {hue}">
+	<span class="endpoint__method">{method}</span>
+	<code class="endpoint__path">{path}</code>
+	{#if appId}
+		<span class="endpoint__app">@ {appId}</span>
+	{/if}
+</div>
+
+<style>
+	.endpoint {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.375rem 0.625rem;
+		border: 1px solid var(--color-border, hsl(0 0% 90%));
+		border-radius: 0.5rem;
+		background: var(--color-card, hsl(0 0% 99%));
+		margin: 0.5rem 0;
+		font-size: 0.875rem;
+	}
+	.endpoint__method {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-weight: 700;
+		font-size: 0.75rem;
+		padding: 0.125rem 0.5rem;
+		border-radius: 0.25rem;
+		background: hsl(var(--method-hue) / 0.15); /* vibes-dead-color-allow: --method-hue is a genuine HSL channel triplet (e.g. '142 71% 45%') */
+		color: hsl(var(--method-hue)); /* vibes-dead-color-allow: same — HSL channels, not an oklch token */
+	}
+	.endpoint__path {
+		font-family: var(--font-mono, ui-monospace, monospace);
+	}
+	.endpoint__app {
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+		font-size: 0.75rem;
+	}
+</style>

package/dist/svelte/ui/directives/Endpoint.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DirectiveNode } from '@vibesdotdev/docs';
+interface Props {
+    node: DirectiveNode;
+}
+declare const Endpoint: import("svelte").Component<Props, {}, "">;
+type Endpoint = ReturnType<typeof Endpoint>;
+export default Endpoint;
+//# sourceMappingURL=Endpoint.svelte.d.ts.map

package/dist/svelte/ui/directives/Endpoint.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Endpoint.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/ui/directives/Endpoint.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGtD,UAAU,KAAK;IACd,IAAI,EAAE,aAAa,CAAC;CACpB;AAyCF,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/ui/directives/Install.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import type { DirectiveNode } from '@vibesdotdev/docs';
+
+	interface Props {
+		node: DirectiveNode;
+	}
+	const { node }: Props = $props();
+
+	const pkg = $derived(node.attrs.package ?? '<package>');
+	let manager = $state<'bun' | 'npm' | 'pnpm' | 'yarn'>('bun');
+
+	const COMMAND = $derived.by(() => {
+		switch (manager) {
+			case 'bun':
+				return `bun add ${pkg}`;
+			case 'npm':
+				return `npm install ${pkg}`;
+			case 'pnpm':
+				return `pnpm add ${pkg}`;
+			case 'yarn':
+				return `yarn add ${pkg}`;
+		}
+	});
+</script>
+
+<div class="install">
+	<div class="install__header">
+		<span class="install__chip">install</span>
+		<code class="install__pkg">{pkg}</code>
+	</div>
+	<div class="install__tabs" role="tablist">
+		{#each (['bun', 'npm', 'pnpm', 'yarn'] as const) as m}
+			<button
+				type="button"
+				role="tab"
+				aria-selected={manager === m}
+				class="install__tab"
+				class:active={manager === m}
+				onclick={() => (manager = m)}>{m}</button
+			>
+		{/each}
+	</div>
+	<pre class="install__cmd"><code>$ {COMMAND}</code></pre>
+	{#if node.body.trim()}
+		<p class="install__note">{node.body.trim()}</p>
+	{/if}
+</div>
+
+<style>
+	.install {
+		border: 1px solid var(--color-border, hsl(0 0% 90%));
+		border-radius: 0.75rem;
+		padding: 0.875rem 1rem;
+		background: var(--color-card, hsl(0 0% 99%));
+		margin: 1rem 0;
+	}
+	.install__header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+	.install__chip {
+		font-size: 0.6875rem;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		padding: 0.125rem 0.5rem;
+		border-radius: 9999px;
+		background: var(--color-muted, hsl(220 13% 91%));
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+		font-weight: 600;
+	}
+	.install__pkg {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+	.install__tabs {
+		display: flex;
+		gap: 0.25rem;
+		margin-bottom: 0.5rem;
+	}
+	.install__tab {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.75rem;
+		padding: 0.25rem 0.625rem;
+		border: 1px solid transparent;
+		border-radius: 0.375rem;
+		background: transparent;
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+		cursor: pointer;
+	}
+	.install__tab.active {
+		background: var(--color-muted, hsl(220 13% 91%));
+		color: var(--color-foreground, hsl(0 0% 7%));
+		border-color: var(--color-border, hsl(0 0% 90%));
+	}
+	.install__cmd {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.8125rem;
+		background: var(--color-code-bg, hsl(220 13% 95%));
+		padding: 0.625rem 0.875rem;
+		border-radius: 0.5rem;
+		margin: 0;
+		overflow-x: auto;
+	}
+	.install__note {
+		margin: 0.625rem 0 0;
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+		font-size: 0.8125rem;
+	}
+</style>

package/dist/svelte/ui/directives/Install.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DirectiveNode } from '@vibesdotdev/docs';
+interface Props {
+    node: DirectiveNode;
+}
+declare const Install: import("svelte").Component<Props, {}, "">;
+type Install = ReturnType<typeof Install>;
+export default Install;
+//# sourceMappingURL=Install.svelte.d.ts.map

package/dist/svelte/ui/directives/Install.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Install.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/ui/directives/Install.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGtD,UAAU,KAAK;IACd,IAAI,EAAE,aAAa,CAAC;CACpB;AA2CF,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/svelte/ui/directives/Shell.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { DirectiveNode } from '@vibesdotdev/docs';
+
+	interface Props {
+		node: DirectiveNode;
+	}
+	const { node }: Props = $props();
+
+	const lines = $derived(
+		node.body
+			.trim()
+			.split('\n')
+			.map((line) => line.replace(/^\$\s*/, ''))
+	);
+</script>
+
+<pre class="shell"><code>{#each lines as line}<span class="shell__line">{'$ '}{line}{'\n'}</span>{/each}</code></pre>
+
+<style>
+	.shell {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 0.8125rem;
+		background: var(--color-code-bg, hsl(220 13% 95%));
+		padding: 0.625rem 0.875rem;
+		border-radius: 0.5rem;
+		margin: 0.75rem 0;
+		overflow-x: auto;
+	}
+	.shell__line {
+		display: block;
+	}
+</style>

package/dist/svelte/ui/directives/Shell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DirectiveNode } from '@vibesdotdev/docs';
+interface Props {
+    node: DirectiveNode;
+}
+declare const Shell: import("svelte").Component<Props, {}, "">;
+type Shell = ReturnType<typeof Shell>;
+export default Shell;
+//# sourceMappingURL=Shell.svelte.d.ts.map

package/dist/svelte/ui/directives/Shell.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shell.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/ui/directives/Shell.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGtD,UAAU,KAAK;IACd,IAAI,EAAE,aAAa,CAAC;CACpB;AAoBF,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/svelte/ui/directives/Usage.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { DirectiveNode } from '@vibesdotdev/docs';
+	import CodeBlock from '../markdown/CodeBlock.svelte';
+
+	interface Props {
+		node: DirectiveNode;
+	}
+	const { node }: Props = $props();
+
+	const lang = $derived(node.attrs.language ?? 'ts');
+	const body = $derived(node.body.replace(/\n$/, ''));
+</script>
+
+<CodeBlock text={body} {lang} />

package/dist/svelte/ui/directives/Usage.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DirectiveNode } from '@vibesdotdev/docs';
+interface Props {
+    node: DirectiveNode;
+}
+declare const Usage: import("svelte").Component<Props, {}, "">;
+type Usage = ReturnType<typeof Usage>;
+export default Usage;
+//# sourceMappingURL=Usage.svelte.d.ts.map

package/dist/svelte/ui/directives/Usage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Usage.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/ui/directives/Usage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAItD,UAAU,KAAK;IACd,IAAI,EAAE,aAAa,CAAC;CACpB;AAeF,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/svelte/ui/help/HelpDialog.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+	/**
+	 * <HelpDialog /> — modal that resolves a topic from the Svelte context
+	 * (`setDocsTopics(topics)`) and renders its body via <MarkdownView />.
+	 *
+	 * For `body.type: 'markdown'`, renders the parsed AST inline.
+	 * For other body types (route / openapi / graphql / descriptor-ref /
+	 * component), renders an "Open in docs" link to the full page.
+	 */
+	import type { DocsTopicDescriptor } from '@vibesdotdev/docs/schemas';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import { indexedTopicFor, type IndexedTopic } from '../../build/topic-index.js';
+	import { getDocsTopics } from '../../context.js';
+	import { docsTopicHref, resolveDocsServiceOrigin } from '../../docs-origin.js';
+	import MarkdownView from '../markdown/MarkdownView.svelte';
+
+	interface Props {
+		open: boolean;
+		topic?: string;
+		kind?: string;
+		id?: string;
+		docsOrigin?: string;
+	}
+
+	let { open = $bindable(false), topic, kind, id, docsOrigin }: Props = $props();
+
+	const topics = $derived(getDocsTopics());
+	const runtimeStore = getRuntimeSvelteContext();
+	let catalogOrigin = $state<string | null>(null);
+
+	$effect(() => {
+		const explicit = docsOrigin;
+		if (explicit) {
+			catalogOrigin = null;
+			return;
+		}
+		const runtime = runtimeStore.runtime;
+		if (!runtime) {
+			void runtimeStore.load();
+			return;
+		}
+		let cancelled = false;
+		void resolveDocsServiceOrigin(runtime).then((origin) => {
+			if (!cancelled) catalogOrigin = origin;
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	const resolved = $derived.by<IndexedTopic | null>(() => {
+		if (topic) return indexedTopicFor(topics, topic);
+		if (kind && id) {
+			const direct = topics.find((t) => t.subject?.kind === kind && t.subject?.id === id);
+			return direct ? indexedTopicFor(topics, direct.id) : null;
+		}
+		return null;
+	});
+
+	const headerText = $derived(
+		resolved?.descriptor.title ?? topic ?? (kind && id ? `${kind} → ${id}` : 'Documentation')
+	);
+
+	const docsUrl = $derived.by(() => {
+		const topicId = resolved?.descriptor.id ?? topic ?? '';
+		return docsTopicHref(docsOrigin ?? catalogOrigin, topicId);
+	});
+
+	function close() {
+		open = false;
+	}
+
+	function isRouteOrApi(descriptor: DocsTopicDescriptor): boolean {
+		return ['route', 'openapi', 'graphql', 'component', 'descriptor-ref'].includes(
+			descriptor.body.type
+		);
+	}
+</script>
+
+{#if open}
+	<div
+		class="help-dialog__backdrop"
+		role="presentation"
+		onclick={close}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') close();
+		}}
+	>
+		<div
+			class="help-dialog"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="help-dialog-title"
+			tabindex="-1"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => {
+				if (e.key === 'Escape') close();
+			}}
+		>
+			<header class="help-dialog__header">
+				<h2 id="help-dialog-title" class="help-dialog__title">{headerText}</h2>
+				<button type="button" class="help-dialog__close" aria-label="Close help" onclick={close}
+					>×</button
+				>
+			</header>
+			<div class="help-dialog__body">
+				{#if resolved && resolved.parsed}
+					{#if resolved.descriptor.summary}
+						<p class="help-dialog__summary">{resolved.descriptor.summary}</p>
+					{/if}
+					<MarkdownView parsed={resolved.parsed} />
+					<p class="help-dialog__more">
+						<a href={docsUrl} target="_blank" rel="noopener noreferrer"> Open in docs → </a>
+					</p>
+				{:else if resolved && isRouteOrApi(resolved.descriptor)}
+					<p class="help-dialog__placeholder">
+						{resolved.descriptor.summary ?? 'This topic is best viewed in the docs app.'}
+					</p>
+					<p class="help-dialog__more">
+						<a href={docsUrl} target="_blank" rel="noopener noreferrer"> Open in docs → </a>
+					</p>
+				{:else}
+					<p class="help-dialog__placeholder">
+						No topic registered for
+						<code>{topic ?? (kind && id ? `${kind}:${id}` : 'unknown')}</code>. Check the docs
+						registry or open
+						<a href={docsUrl} target="_blank" rel="noopener noreferrer">{docsUrl}</a>.
+					</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.help-dialog__backdrop {
+		position: fixed;
+		inset: 0;
+		background: hsl(0 0% 0% / 0.4);
+		display: grid;
+		place-items: center;
+		z-index: 50;
+	}
+	.help-dialog {
+		background: var(--color-card, hsl(0 0% 100%));
+		color: var(--color-foreground, hsl(0 0% 7%));
+		border: 1px solid var(--color-border, hsl(0 0% 90%));
+		border-radius: 0.75rem;
+		max-width: 36rem;
+		width: calc(100% - 2rem);
+		max-height: calc(100vh - 4rem);
+		overflow: auto;
+		box-shadow: 0 20px 40px hsl(0 0% 0% / 0.18);
+	}
+	.help-dialog__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.875rem 1.125rem;
+		border-bottom: 1px solid var(--color-border, hsl(0 0% 90%));
+		position: sticky;
+		top: 0;
+		background: var(--color-card, hsl(0 0% 100%));
+		z-index: 1;
+	}
+	.help-dialog__title {
+		font-size: 1rem;
+		font-weight: 600;
+		margin: 0;
+	}
+	.help-dialog__close {
+		background: transparent;
+		border: none;
+		font-size: 1.5rem;
+		line-height: 1;
+		cursor: pointer;
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+		padding: 0 0.25rem;
+	}
+	.help-dialog__close:hover {
+		color: var(--color-foreground, hsl(0 0% 7%));
+	}
+	.help-dialog__body {
+		padding: 1rem 1.125rem;
+	}
+	.help-dialog__summary {
+		margin: 0 0 1rem;
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
+	.help-dialog__more {
+		margin: 1.25rem 0 0;
+		font-size: 0.8125rem;
+	}
+	.help-dialog__more a {
+		color: var(--color-link, hsl(217 91% 60%));
+	}
+	.help-dialog__placeholder {
+		margin: 0;
+		font-size: 0.875rem;
+		color: var(--color-muted-foreground, hsl(220 13% 26%));
+	}
+	.help-dialog__placeholder code {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		padding: 0.125rem 0.375rem;
+		background: var(--color-code-bg, hsl(220 13% 95%));
+		border-radius: 0.25rem;
+	}
+</style>

package/dist/svelte/ui/help/HelpDialog.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    open: boolean;
+    topic?: string;
+    kind?: string;
+    id?: string;
+    docsOrigin?: string;
+}
+declare const HelpDialog: import("svelte").Component<Props, {}, "open">;
+type HelpDialog = ReturnType<typeof HelpDialog>;
+export default HelpDialog;
+//# sourceMappingURL=HelpDialog.svelte.d.ts.map

package/dist/svelte/ui/help/HelpDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpDialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/ui/help/HelpDialog.svelte.ts"],"names":[],"mappings":"AAmBC,UAAU,KAAK;IACd,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AA8GF,QAAA,MAAM,UAAU,+CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}