@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/markdown/LinkRenderer.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">import { Icon } from "../icon";
+let { href = "", title, children } = $props();
+const isExternal = $derived(href.startsWith("http"));
+</script>
+
+<a
+	{href}
+	{title}
+	target={isExternal ? '_blank' : undefined}
+	rel={isExternal ? 'noopener noreferrer' : undefined}
+	class="message-link"
+>
+	{@render children?.()}
+	{#if isExternal}
+		<Icon icon="lucide:external-link" size={14} class="external-icon" />
+	{/if}
+</a>
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+	.message-link {
+		color: var(--color-link, #3b82f6);
+		text-decoration: none;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.message-link:hover {
+		text-decoration: underline;
+	}
+
+	:global(.external-icon) {
+		opacity: 0.5;
+	}
+</style>

package/dist/lib/components/markdown/LinkRenderer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    href?: string;
+    title?: string;
+    children?: Snippet;
+}
+declare const LinkRenderer: import("svelte").Component<Props, {}, "">;
+type LinkRenderer = ReturnType<typeof LinkRenderer>;
+export default LinkRenderer;

package/dist/lib/components/markdown/MarkdownRenderer.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">import SvelteMarkdown from "@humanspeak/svelte-markdown";
+import CodeRenderer from "./CodeRenderer.svelte";
+import LinkRenderer from "./LinkRenderer.svelte";
+import ImageRenderer from "./ImageRenderer.svelte";
+import { processContent } from "./content-processor.js";
+let { content, config = {} } = $props();
+// Custom renderers for markdown elements
+const renderers = {
+	// Code block with syntax highlighting
+	code: CodeRenderer,
+	// Links with security
+	link: LinkRenderer,
+	// Images with lazy loading
+	image: ImageRenderer
+};
+// Process content for safe rendering
+let processed = $derived(processContent(content, config));
+</script>
+
+<div class="markdown-renderer">
+	<SvelteMarkdown
+		source={processed.sanitizedContent}
+		{renderers}
+		options={processed.markdownOptions}
+	/>
+</div>
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+
+	.markdown-renderer {
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+		line-height: 1.6;
+	}
+
+	/*
+	 * A prose block owns the space BETWEEN its blocks, never the space around
+	 * itself — that belongs to whatever contains it. Without this, the first
+	 * heading's 1.25rem top margin stacks on top of the container's padding and
+	 * every consumer has to reach in and cancel it. Consumers cannot cancel it
+	 * from outside either: `> :first-child` from the parent selects this wrapper,
+	 * which has no margin, so the override silently does nothing.
+	 */
+	.markdown-renderer > :global(:first-child) {
+		margin-top: 0;
+	}
+
+	.markdown-renderer > :global(:last-child) {
+		margin-bottom: 0;
+	}
+
+	/* Typography */
+	.markdown-renderer :global(p) {
+		margin: 0 0 0.75rem;
+	}
+
+	.markdown-renderer :global(p:last-child) {
+		margin-bottom: 0;
+	}
+
+	.markdown-renderer :global(h1),
+	.markdown-renderer :global(h2),
+	.markdown-renderer :global(h3),
+	.markdown-renderer :global(h4),
+	.markdown-renderer :global(h5),
+	.markdown-renderer :global(h6) {
+		margin: 1.25rem 0 0.75rem;
+		font-weight: 600;
+		line-height: 1.25;
+	}
+
+	.markdown-renderer :global(h1) {
+		font-size: 1.75rem;
+	}
+	.markdown-renderer :global(h2) {
+		font-size: 1.5rem;
+	}
+	.markdown-renderer :global(h3) {
+		font-size: 1.25rem;
+	}
+	.markdown-renderer :global(h4) {
+		font-size: 1.125rem;
+	}
+	.markdown-renderer :global(h5) {
+		font-size: 1rem;
+	}
+	.markdown-renderer :global(h6) {
+		font-size: 0.875rem;
+	}
+
+	/* Lists.
+	   Tailwind preflight resets `ul, ol { list-style: none }`, so markers have to
+	   be restored explicitly — without this, every markdown bullet list renders
+	   as unmarked indented lines. The rule that used to sit here targeted
+	   `ul[role='list']`, which matches nothing: the upstream
+	   `@humanspeak/svelte-markdown` List renderer emits a bare `<ul>`/`<ol>` with
+	   no role, so it was dead CSS standing in for the marker rule. */
+	.markdown-renderer :global(ul),
+	.markdown-renderer :global(ol) {
+		margin: 0.75rem 0;
+		padding-left: 1.5rem;
+	}
+
+	.markdown-renderer :global(ul) {
+		list-style: disc;
+	}
+
+	.markdown-renderer :global(ol) {
+		list-style: decimal;
+	}
+
+	.markdown-renderer :global(ul ul) {
+		list-style: circle;
+	}
+
+	.markdown-renderer :global(li) {
+		margin: 0.25rem 0;
+	}
+
+	.markdown-renderer :global(li::marker) {
+		color: var(--muted-foreground, currentColor);
+	}
+
+	/* Task lists ship their own checkbox affordance; markers would double up. */
+	.markdown-renderer :global(li:has(> input[type='checkbox'])) {
+		list-style: none;
+		margin-left: -1.25rem;
+	}
+
+	.markdown-renderer :global(input[type='checkbox'][disabled]) {
+		margin-right: 0.5rem;
+		cursor: not-allowed;
+	}
+
+	/* Inline code — theme-adaptive tint (a faint shade of the current text
+	   color) so it reads in both light and dark themes without an OS media
+	   query. */
+	.markdown-renderer :global(code:not(pre code)) {
+		background-color: color-mix(in srgb, var(--foreground, #111) 8%, transparent);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		font-size: 0.875em;
+		font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+	}
+
+	/* Blockquotes. `--color-text-secondary` was never defined; `--muted-foreground`
+	   is the real token. */
+	.markdown-renderer :global(blockquote) {
+		margin: 1rem 0;
+		padding-left: 1rem;
+		border-left: 2px solid color-mix(in oklab, var(--border) 80%, transparent);
+		color: var(--muted-foreground, inherit);
+		font-style: italic;
+	}
+
+	/* Tables.
+	   `display: block` is what makes `overflow-x` actually scroll a table, so a
+	   wide table never forces the whole message column to scroll sideways.
+	   Rules are horizontal-only: a full 1px grid on every cell made the table the
+	   loudest element in an otherwise calm message, which is backwards — the
+	   data should carry the emphasis, not the scaffolding. */
+	.markdown-renderer :global(table) {
+		margin: 1rem 0;
+		border-collapse: collapse;
+		width: 100%;
+		max-width: 100%;
+		overflow-x: auto;
+		display: block;
+		font-size: 0.9375em;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.markdown-renderer :global(th),
+	.markdown-renderer :global(td) {
+		padding: 0.4375rem 0.875rem 0.4375rem 0;
+		border: 0;
+		border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
+		text-align: left;
+		white-space: nowrap;
+		/* Keep cell text tied to the theme's foreground so it always contrasts
+		   with the (theme-adaptive) header tint below. */
+		color: var(--foreground, inherit);
+	}
+
+	.markdown-renderer :global(tbody tr:last-child > *) {
+		border-bottom: 0;
+	}
+
+	/* The header tint is a shade of the CURRENT foreground, so it adapts to
+	   whichever theme the app renders (class/data-attribute driven) instead of the
+	   OS `prefers-color-scheme`. The old OS media query painted dark rows even
+	   when the app rendered light, putting dark text on a dark row. Zebra striping
+	   is gone: with horizontal rules it was redundant banding. */
+	.markdown-renderer :global(th) {
+		border-bottom: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
+		font-weight: 600;
+		font-size: 0.8125em;
+		letter-spacing: 0.02em;
+		text-transform: uppercase;
+		color: var(--muted-foreground, inherit);
+	}
+
+	/* Horizontal rules */
+	.markdown-renderer :global(hr) {
+		margin: 1.5rem 0;
+		border: 0;
+		border-top: 1px solid var(--border, var(--color-border, #e5e7eb));
+	}
+</style>

package/dist/lib/components/markdown/MarkdownRenderer.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    content: string;
+    config?: {
+        allowUnsafeHtml?: boolean;
+        enableGfm?: boolean;
+        enableBreaks?: boolean;
+    };
+};
+declare const MarkdownRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkdownRenderer = ReturnType<typeof MarkdownRenderer>;
+export default MarkdownRenderer;

package/dist/lib/components/markdown/content-processor.d.ts

@@ -0,0 +1,34 @@
+export declare const MARKDOWN_PURIFY_CONFIG: {
+    ALLOWED_TAGS: string[];
+    ALLOWED_ATTR: string[];
+    FORBID_TAGS: string[];
+    FORBID_ATTR: string[];
+    ALLOW_DATA_ATTR: boolean;
+    ALLOWED_URI_REGEXP: RegExp;
+};
+export declare function sanitizeContent(content: string, config?: {
+    allowUnsafeHtml?: boolean;
+    enableGfm?: boolean;
+    enableBreaks?: boolean;
+}): string;
+export declare function getMarkdownOptions(config?: {
+    allowUnsafeHtml?: boolean;
+    enableGfm?: boolean;
+    enableBreaks?: boolean;
+}): {
+    gfm: boolean;
+    breaks: boolean;
+    sanitize: boolean;
+};
+export declare function processContent(content: string, config?: {
+    allowUnsafeHtml?: boolean;
+    enableGfm?: boolean;
+    enableBreaks?: boolean;
+}): {
+    sanitizedContent: string;
+    markdownOptions: {
+        gfm: boolean;
+        breaks: boolean;
+        sanitize: boolean;
+    };
+};

package/dist/lib/components/markdown/content-processor.js

@@ -0,0 +1,104 @@
+export const MARKDOWN_PURIFY_CONFIG = {
+    ALLOWED_TAGS: [
+        'p',
+        'br',
+        'strong',
+        'em',
+        'u',
+        's',
+        'code',
+        'pre',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'ul',
+        'ol',
+        'li',
+        'a',
+        'img',
+        'table',
+        'thead',
+        'tbody',
+        'tr',
+        'th',
+        'td',
+        'blockquote',
+        'hr',
+        'div',
+        'span'
+    ],
+    ALLOWED_ATTR: [
+        'href',
+        'target',
+        'rel',
+        'src',
+        'alt',
+        'title',
+        'width',
+        'height',
+        'class',
+        'colspan',
+        'rowspan',
+        'id'
+    ],
+    FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'form', 'input', 'button'],
+    FORBID_ATTR: [
+        'onerror',
+        'onload',
+        'onclick',
+        'onmouseover',
+        'onfocus',
+        'onblur',
+        'onkeypress',
+        'onkeydown',
+        'onkeyup',
+        'onsubmit',
+        'onreset',
+        'onselect',
+        'onchange',
+        'ondblclick',
+        'onmousedown',
+        'onmouseup',
+        'onmousemove',
+        'onmouseout',
+        'javascript'
+    ],
+    ALLOW_DATA_ATTR: false,
+    ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i
+};
+function escapeHtml(text) {
+    // Neutralize the tag-OPENING character only. Every raw HTML tag (the XSS
+    // vector — `<img onerror=…>`, `<a onclick=…>`, `<script>`) requires a literal
+    // `<`; escaping every `<` to `&lt;` means no tag can ever form, after which a
+    // bare `>` is inert text and `&`, `"`, `'` cannot break out of anything.
+    //
+    // We deliberately do NOT escape `>`: escaping it broke markdown structure —
+    // a blockquote marker `> quote` became the literal entity `&gt; quote`
+    // (bug #568) and `Array<T>` lost its trailing bracket. Leaving `>` as text
+    // is safe (no unescaped `<` remains to pair with it) and restores
+    // blockquotes + comparison/generic syntax. `&`, `"`, `'` are likewise left
+    // alone — the markdown renderer + Svelte already escape text nodes, so
+    // escaping them here DOUBLE-encoded (apostrophes as `&#039;`, `&` as `&amp;`).
+    return text.replace(/</g, '&lt;');
+}
+export function sanitizeContent(content, config = {}) {
+    if (config.allowUnsafeHtml)
+        return content;
+    return escapeHtml(content);
+}
+export function getMarkdownOptions(config = {}) {
+    return {
+        gfm: config.enableGfm ?? true,
+        breaks: config.enableBreaks ?? true,
+        sanitize: false
+    };
+}
+export function processContent(content, config = {}) {
+    return {
+        sanitizedContent: sanitizeContent(content, config),
+        markdownOptions: getMarkdownOptions(config)
+    };
+}

package/dist/lib/components/markdown/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Markdown rendering primitives.
+ *
+ * Generic Svelte components for rendering markdown content with syntax
+ * highlighting, sanitized links, and lazy-loaded images. Domain packages
+ * (chat-svelte, docs-svelte, etc.) compose these — they are not chat-specific.
+ */
+export { default as MarkdownRenderer } from './MarkdownRenderer.svelte';
+export { default as CodeRenderer } from './CodeRenderer.svelte';
+export { default as LinkRenderer } from './LinkRenderer.svelte';
+export { default as ImageRenderer } from './ImageRenderer.svelte';
+export * from './content-processor.js';

package/dist/lib/components/markdown/index.js

@@ -0,0 +1,12 @@
+/**
+ * Markdown rendering primitives.
+ *
+ * Generic Svelte components for rendering markdown content with syntax
+ * highlighting, sanitized links, and lazy-loaded images. Domain packages
+ * (chat-svelte, docs-svelte, etc.) compose these — they are not chat-specific.
+ */
+export { default as MarkdownRenderer } from './MarkdownRenderer.svelte';
+export { default as CodeRenderer } from './CodeRenderer.svelte';
+export { default as LinkRenderer } from './LinkRenderer.svelte';
+export { default as ImageRenderer } from './ImageRenderer.svelte';
+export * from './content-processor.js';

package/dist/lib/components/multiselect/MultiselectCombobox.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">let { options, value = $bindable([]), placeholder = "Select...", searchPlaceholder = "Search...", class: className = "", disabled = false } = $props();
+let open = $state(false);
+let search = $state("");
+let inputEl = $state();
+let filteredOptions = $derived(options.filter((o) => search ? o.label.toLowerCase().includes(search.toLowerCase()) : true));
+function toggleOption(val) {
+	if (disabled) return;
+	if (value.includes(val)) {
+		value = value.filter((v) => v !== val);
+	} else {
+		value = [...value, val];
+	}
+}
+function removeOption(val) {
+	if (disabled) return;
+	value = value.filter((v) => v !== val);
+}
+function getLabel(val) {
+	return options.find((o) => o.value === val)?.label ?? val;
+}
+</script>
+
+<div class={className}>
+	<div
+		class="multiselect-trigger"
+		role="combobox"
+		tabindex={disabled ? -1 : 0}
+		aria-expanded={open}
+		aria-haspopup="listbox"
+		aria-controls="multiselect-listbox"
+		aria-disabled={disabled}
+		onclick={() => !disabled && (open = !open)}
+		onkeydown={(e) => {
+			if (e.key === 'Escape') open = false;
+			if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+				e.preventDefault();
+				open = !open;
+			}
+		}}
+	>
+		{#if value.length === 0}
+			<span class="multiselect-placeholder">{placeholder}</span>
+		{:else}
+			{#each value as val (val)}
+				<span class="multiselect-tag">
+					{getLabel(val)}
+					<button
+						type="button"
+						class="multiselect-tag-remove"
+						onclick={(e) => {
+							e.stopPropagation();
+							removeOption(val);
+						}}
+						aria-label="Remove {getLabel(val)}"
+					>
+						&times;
+					</button>
+				</span>
+			{/each}
+		{/if}
+	</div>
+
+	{#if open}
+		<div id="multiselect-listbox" class="multiselect-dropdown" role="listbox">
+			<input
+				bind:this={inputEl}
+				type="text"
+				class="multiselect-search focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
+				placeholder={searchPlaceholder}
+				bind:value={search}
+				onfocus={() => (open = true)}
+			/>
+			{#each filteredOptions as option (option.value)}
+				<button
+					type="button"
+					class="multiselect-option"
+					class:selected={value.includes(option.value)}
+					role="option"
+					aria-selected={value.includes(option.value)}
+					onclick={() => toggleOption(option.value)}
+				>
+					{#if value.includes(option.value)}
+						<span class="multiselect-check">&#10003;</span>
+					{/if}
+					{option.label}
+				</button>
+			{/each}
+			{#if filteredOptions.length === 0}
+				<div class="multiselect-empty">No results</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.multiselect-trigger {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		min-height: 2.25rem;
+		padding: 0.25rem 0.5rem;
+		border: 1px solid var(--border, #e2e8f0);
+		border-radius: 0.375rem;
+		cursor: pointer;
+		align-items: center;
+	}
+
+	.multiselect-trigger[aria-disabled='true'] {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.multiselect-placeholder {
+		color: var(--muted-foreground, #94a3b8);
+		font-size: 0.875rem;
+	}
+
+	.multiselect-tag {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.125rem 0.5rem;
+		background: var(--secondary, #f1f5f9);
+		border-radius: 0.25rem;
+		font-size: 0.8125rem;
+	}
+
+	.multiselect-tag-remove {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		background: none;
+		cursor: pointer;
+		padding: 0;
+		line-height: 1;
+		font-size: 1rem;
+		color: var(--muted-foreground, #64748b);
+	}
+
+	.multiselect-dropdown {
+		position: absolute;
+		z-index: 50;
+		margin-top: 0.25rem;
+		border: 1px solid var(--border, #e2e8f0);
+		border-radius: 0.375rem;
+		background: var(--popover, white);
+		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+		max-height: 15rem;
+		overflow-y: auto;
+		min-width: 100%;
+	}
+
+	.multiselect-search {
+		width: 100%;
+		padding: 0.5rem;
+		border: none;
+		border-bottom: 1px solid var(--border, #e2e8f0);
+		font-size: 0.875rem;
+		box-sizing: border-box;
+	}
+
+	.multiselect-option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.375rem 0.5rem;
+		border: none;
+		background: none;
+		cursor: pointer;
+		font-size: 0.875rem;
+		text-align: left;
+	}
+
+	.multiselect-option:hover {
+		background: var(--accent, #f1f5f9);
+	}
+
+	.multiselect-option.selected {
+		background: var(--accent, #f1f5f9);
+	}
+
+	.multiselect-check {
+		font-size: 0.75rem;
+		color: var(--primary, #3b82f6);
+	}
+
+	.multiselect-empty {
+		padding: 0.5rem;
+		text-align: center;
+		color: var(--muted-foreground, #94a3b8);
+		font-size: 0.875rem;
+	}
+</style>

package/dist/lib/components/multiselect/MultiselectCombobox.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Option {
+    value: string;
+    label: string;
+}
+interface Props {
+    options: Option[];
+    value?: string[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    class?: string;
+    disabled?: boolean;
+}
+declare const MultiselectCombobox: import("svelte").Component<Props, {}, "value">;
+type MultiselectCombobox = ReturnType<typeof MultiselectCombobox>;
+export default MultiselectCombobox;