@makolabs/ripple 3.8.1 → 3.9.2

package/dist/ai/MessageBox.svelte

@@ -2,6 +2,7 @@
 	import { cn } from '../helper/cls.js';
 	import { formatTime } from '../helper/date.js';
 	import { marked } from 'marked';
+	import { sanitizeHtml } from '../helper/sanitize-html.js';
 	import { tv, type ClassValue } from 'tailwind-variants';
 	import type { VariantColors } from '../index.js';
 	import { parseContentSegments } from './content-detector.js';
@@ -69,7 +70,7 @@
 
 	function renderMarkdown(text: string): string {
 		const result = marked(text);
-		return typeof result === 'string' ? result : '';
+		return sanitizeHtml(typeof result === 'string' ? result : '');
 	}
 
 	// Parse content into segments for enhanced rendering

package/dist/button/Button.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
+	import { isSafeLinkHref } from '../helper/is-safe-http-url.js';
 	import { buttonVariants } from './button.js';
 	import type { ButtonProps } from '../index.js';
+	import type { HTMLAttributeAnchorTarget } from 'svelte/elements';
 	import { Color, Size } from '../variants.js';
 
 	let {
@@ -33,20 +35,100 @@
 			className
 		)
 	);
+
+	// Drop dangerous spread attributes: string event handlers (function
+	// handlers like onclick={fn} are kept) and unsafe formaction.
+	function dropDangerous(props: Record<string, unknown>): Record<string, unknown> {
+		const out: Record<string, unknown> = {};
+		for (const [key, value] of Object.entries(props)) {
+			const lower = key.toLowerCase();
+			if (lower.startsWith('on') && typeof value === 'string') continue;
+			if (lower === 'formaction' && (typeof value !== 'string' || !isSafeLinkHref(value))) continue;
+			out[key] = value;
+		}
+		return out;
+	}
+
+	const ANCHOR_CONTROLLED = new Set(['href', 'target', 'rel', 'referrerpolicy']);
+
+	// restProps is a discriminated union; read anchor-only attrs via a record view.
+	const rest = $derived(restProps as Record<string, unknown>);
+
+	const rawHref = $derived(rest['href'] as string | undefined);
+	const isAnchor = $derived(typeof rawHref === 'string');
+	const safeHref = $derived(
+		typeof rawHref === 'string' && isSafeLinkHref(rawHref) ? rawHref : undefined
+	);
+	const anchorTarget = $derived(rest['target'] as HTMLAttributeAnchorTarget | undefined);
+
+	// Reverse-tabnabbing protection: opening a new browsing context requires
+	// `noopener`. A consumer `rel` (e.g. "nofollow") must not be able to silently
+	// drop it, so we merge the token in rather than treating rel as all-or-nothing.
+	// `noreferrer` already implies `noopener`, so either token satisfies the guard.
+	function hardenRel(
+		callerRel: string | undefined,
+		target: string | undefined
+	): string | undefined {
+		if (target !== '_blank') return callerRel;
+		if (callerRel === undefined) return 'noopener noreferrer';
+		const tokens = callerRel.split(/\s+/).filter(Boolean);
+		if (!tokens.some((t) => t === 'noopener' || t === 'noreferrer')) tokens.push('noopener');
+		return tokens.join(' ');
+	}
+	const anchorRel = $derived(hardenRel(rest['rel'] as string | undefined, anchorTarget));
+	const anchorReferrerPolicy = $derived(
+		(rest['referrerpolicy'] as ReferrerPolicy | undefined) ??
+			(anchorTarget === '_blank' && rest['rel'] === undefined
+				? ('no-referrer' as ReferrerPolicy)
+				: undefined)
+	);
+
+	const buttonAttrs = $derived(dropDangerous(rest));
+	const anchorAttrs = $derived(
+		Object.fromEntries(
+			Object.entries(dropDangerous(rest)).filter(([k]) => !ANCHOR_CONTROLLED.has(k.toLowerCase()))
+		)
+	);
 </script>
 
-{#if restProps['href']}
-	<a class={buttonClasses} data-testid={buildTestId('button', undefined, testId)} {...restProps}>
-		{#if children}
-			{@render children()}
-		{/if}
-	</a>
+<!--
+	Button renders arbitrary, scheme-guarded hrefs (including external URLs), so
+	the SvelteKit resolve() route helper does not apply here. safeHref is vetted by
+	isSafeLinkHref before it ever reaches the DOM.
+-->
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+{#if isAnchor}
+	{#if safeHref && !disabled && !loading}
+		<a
+			class={buttonClasses}
+			data-testid={buildTestId('button', undefined, testId)}
+			{...anchorAttrs}
+			href={safeHref}
+			target={anchorTarget}
+			rel={anchorRel}
+			referrerpolicy={anchorReferrerPolicy}
+		>
+			{#if children}
+				{@render children()}
+			{/if}
+		</a>
+	{:else}
+		<span
+			class={cn(buttonClasses, 'pointer-events-none cursor-not-allowed opacity-50')}
+			data-testid={buildTestId('button', undefined, testId)}
+			aria-disabled="true"
+		>
+			{#if children}
+				{@render children()}
+			{/if}
+		</span>
+	{/if}
 {:else}
 	<button
 		class={buttonClasses}
 		data-testid={buildTestId('button', undefined, testId)}
 		disabled={disabled || loading}
-		{...restProps}
+		{...buttonAttrs}
 	>
 		{#if children}
 			{@render children()}

package/dist/elements/file-viewer/FilePreviewModal.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import Modal from '../../modal/Modal.svelte';
+	import Button from '../../button/Button.svelte';
+	import FileViewer from './FileViewer.svelte';
+	import { Color, Size } from '../../variants.js';
+	import type { FilePreviewModalProps } from './file-preview-modal-types.js';
+
+	let {
+		open = $bindable(false),
+		url,
+		kind,
+		mimeType,
+		fileName,
+		height = '70vh',
+		size = Size.XL,
+		showDownload = true,
+		downloadUrl,
+		downloadLabel = 'Download',
+		closeLabel = 'Close',
+		onclose,
+		showToolbar,
+		initialScale,
+		minScale,
+		maxScale,
+		scaleStep,
+		maxPages,
+		maxImagePixels,
+		maxBytes,
+		loadingLabel,
+		errorTitle,
+		errorActionLabel,
+		class: className,
+		testId,
+		actions
+	}: FilePreviewModalProps = $props();
+
+	function handleClose() {
+		open = false;
+		onclose?.();
+	}
+</script>
+
+<Modal
+	bind:open
+	title={fileName}
+	{size}
+	onclose={handleClose}
+	bodyClass="overflow-hidden p-0"
+	{testId}
+>
+	<!--
+		Explicit height + non-scrolling body: gives the viewer a genuinely definite
+		height so its toolbar stays pinned and its own content area scrolls (a
+		flex-derived height would collapse through FileViewer's h-full).
+	-->
+	<div style="height: {height}">
+		<FileViewer
+			{url}
+			{kind}
+			{mimeType}
+			{fileName}
+			class={cn('h-full', className)}
+			{showToolbar}
+			{initialScale}
+			{minScale}
+			{maxScale}
+			{scaleStep}
+			{maxPages}
+			{maxImagePixels}
+			{maxBytes}
+			{loadingLabel}
+			{errorTitle}
+			{errorActionLabel}
+			{testId}
+		/>
+	</div>
+
+	{#snippet footer()}
+		{@render actions?.()}
+		{#if showDownload}
+			<Button
+				variant="outline"
+				color={Color.DEFAULT}
+				href={downloadUrl ?? url}
+				target="_blank"
+				download={fileName ?? true}
+				data-testid="file-preview-download"
+			>
+				{downloadLabel}
+			</Button>
+		{/if}
+		<Button
+			variant="outline"
+			color={Color.DEFAULT}
+			onclick={handleClose}
+			data-testid="file-preview-close"
+		>
+			{closeLabel}
+		</Button>
+	{/snippet}
+</Modal>

package/dist/elements/file-viewer/FilePreviewModal.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FilePreviewModalProps } from './file-preview-modal-types.js';
+declare const FilePreviewModal: import("svelte").Component<FilePreviewModalProps, {}, "open">;
+type FilePreviewModal = ReturnType<typeof FilePreviewModal>;
+export default FilePreviewModal;

package/dist/elements/file-viewer/FileViewer.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import PdfViewer from '../pdf-viewer/PdfViewer.svelte';
+	import ImageViewer from '../image-viewer/ImageViewer.svelte';
+	import TextViewer from '../text-viewer/TextViewer.svelte';
+	import UnsupportedPreview from '../viewer-shared/UnsupportedPreview.svelte';
+	import {
+		FileKind,
+		fileKindFromMime,
+		fileKindFromFileName,
+		type FileViewerProps
+	} from './file-viewer-types.js';
+
+	let {
+		url,
+		kind,
+		mimeType,
+		fileName,
+		showToolbar = true,
+		initialScale,
+		minScale,
+		maxScale,
+		scaleStep,
+		maxPages,
+		maxImagePixels,
+		maxBytes,
+		loadingLabel,
+		errorTitle,
+		errorActionLabel,
+		class: className = '',
+		testId
+	}: FileViewerProps = $props();
+
+	// Resolution order: explicit kind → mimeType → fileName → UNKNOWN. Each source
+	// only wins if it yields a known kind, so a junk mimeType still lets fileName
+	// decide.
+	const resolvedKind = $derived.by(() => {
+		if (kind) return kind;
+		if (mimeType) {
+			const fromMime = fileKindFromMime(mimeType);
+			if (fromMime !== FileKind.UNKNOWN) return fromMime;
+		}
+		if (fileName) {
+			const fromName = fileKindFromFileName(fileName);
+			if (fromName !== FileKind.UNKNOWN) return fromName;
+		}
+		return FileKind.UNKNOWN;
+	});
+</script>
+
+<div
+	class={cn('h-full w-full', className)}
+	data-testid={buildTestId('file-viewer', undefined, testId)}
+>
+	{#if resolvedKind === FileKind.PDF}
+		<PdfViewer
+			{url}
+			{showToolbar}
+			{initialScale}
+			{minScale}
+			{maxScale}
+			{scaleStep}
+			{maxPages}
+			{loadingLabel}
+			{errorTitle}
+			{errorActionLabel}
+			{testId}
+		/>
+	{:else if resolvedKind === FileKind.IMAGE}
+		<ImageViewer
+			{url}
+			{showToolbar}
+			initialScale={typeof initialScale === 'number' ? initialScale : undefined}
+			{minScale}
+			{maxScale}
+			{scaleStep}
+			{maxImagePixels}
+			{loadingLabel}
+			{errorTitle}
+			{errorActionLabel}
+			{testId}
+		/>
+	{:else if resolvedKind === FileKind.TEXT}
+		<TextViewer {url} {maxBytes} {loadingLabel} {errorTitle} {errorActionLabel} {testId} />
+	{:else}
+		<UnsupportedPreview
+			{url}
+			{fileName}
+			title={errorTitle ?? 'Preview not available'}
+			message="This file type can't be previewed."
+			actionLabel={errorActionLabel}
+			{testId}
+		/>
+	{/if}
+</div>

package/dist/elements/file-viewer/FileViewer.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type FileViewerProps } from './file-viewer-types.js';
+declare const FileViewer: import("svelte").Component<FileViewerProps, {}, "">;
+type FileViewer = ReturnType<typeof FileViewer>;
+export default FileViewer;

package/dist/elements/file-viewer/file-preview-modal-types.d.ts

@@ -0,0 +1,62 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantSizes } from '../../index.js';
+import type { FileKindValue } from './file-viewer-types.js';
+import type { FitMode } from '../../helper/pdf-safety.js';
+/**
+ * Props for `<FilePreviewModal>` — a `<Modal>` that previews a file with the
+ * unified `<FileViewer>`, correctly sized (toolbar pinned, content scrolls) with
+ * an optional download action and a close button.
+ *
+ * @example
+ * ```svelte
+ * <FilePreviewModal
+ *   bind:open
+ *   url={file.url}
+ *   mimeType={file.mimeType}
+ *   fileName={file.name}
+ * />
+ * ```
+ */
+export type FilePreviewModalProps = {
+    /** Bindable open state. @default false */
+    open?: boolean;
+    /** URL of the file. */
+    url: string;
+    /** Explicit file kind. Optional — derived from `mimeType`/`fileName` otherwise. */
+    kind?: FileKindValue;
+    /** MIME type used to derive `kind`. */
+    mimeType?: string;
+    /** File name — the modal title, and used to derive `kind` and name the download. */
+    fileName?: string;
+    /** Height of the viewer inside the modal (any CSS length). @default '70vh' */
+    height?: string;
+    /** Modal size. @default 'xl' */
+    size?: VariantSizes;
+    /** Show a download action in the footer. @default true */
+    showDownload?: boolean;
+    /** URL for the download action. @default `url` */
+    downloadUrl?: string;
+    /** @default 'Download' */
+    downloadLabel?: string;
+    /** @default 'Close' */
+    closeLabel?: string;
+    /** Fires when the modal is dismissed (close button, × , backdrop, Escape). */
+    onclose?: () => void;
+    showToolbar?: boolean;
+    /** PDF initial zoom: a fixed scale, or `'fit-width'` / `'fit-page'`. @default 'fit-width' */
+    initialScale?: number | FitMode;
+    minScale?: number;
+    maxScale?: number;
+    scaleStep?: number;
+    maxPages?: number;
+    maxImagePixels?: number;
+    maxBytes?: number;
+    loadingLabel?: string;
+    errorTitle?: string;
+    errorActionLabel?: string;
+    class?: ClassValue;
+    testId?: string;
+    /** Extra footer content, rendered left of the Download/Close buttons. */
+    actions?: Snippet;
+};

package/dist/elements/file-viewer/file-preview-modal-types.js

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

package/dist/elements/file-viewer/file-viewer-types.d.ts

@@ -0,0 +1,51 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { FitMode } from '../../helper/pdf-safety.js';
+/** Coarse file category that selects which viewer renders the file. */
+export declare const FileKind: {
+    readonly PDF: "pdf";
+    readonly IMAGE: "image";
+    readonly TEXT: "text";
+    readonly OFFICE: "office";
+    readonly UNKNOWN: "unknown";
+};
+export type FileKindValue = (typeof FileKind)[keyof typeof FileKind];
+/** Map a MIME type to a FileKind. Unknown/junk maps to UNKNOWN (never a render path). */
+export declare function fileKindFromMime(mime: string): FileKindValue;
+/**
+ * Map a file name (or URL/path) to a FileKind by its extension. Query strings,
+ * fragments, and directories are ignored. Unknown/missing extensions map to
+ * UNKNOWN. Use when you don't have a MIME type; prefer `fileKindFromMime` when
+ * you do.
+ */
+export declare function fileKindFromFileName(name: string): FileKindValue;
+/** Props for the `<FileViewer>` router component. */
+export type FileViewerProps = {
+    /** URL of the file. */
+    url: string;
+    /**
+     * Explicit file kind. Optional — if omitted, it is derived from `mimeType`,
+     * then from `fileName`, falling back to `UNKNOWN` (the download fallback).
+     */
+    kind?: FileKindValue;
+    /** MIME type used to derive `kind` when `kind` is not given. */
+    mimeType?: string;
+    /**
+     * File name, shown in the unsupported/download fallback and used to derive
+     * `kind` (by extension) when neither `kind` nor `mimeType` is given.
+     */
+    fileName?: string;
+    showToolbar?: boolean;
+    /** PDF initial zoom: a fixed scale, or `'fit-width'` / `'fit-page'`. @default 'fit-width' */
+    initialScale?: number | FitMode;
+    minScale?: number;
+    maxScale?: number;
+    scaleStep?: number;
+    maxPages?: number;
+    maxImagePixels?: number;
+    maxBytes?: number;
+    loadingLabel?: string;
+    errorTitle?: string;
+    errorActionLabel?: string;
+    class?: ClassValue;
+    testId?: string;
+};

package/dist/elements/file-viewer/file-viewer-types.js

@@ -0,0 +1,127 @@
+/** Coarse file category that selects which viewer renders the file. */
+export const FileKind = {
+    PDF: 'pdf',
+    IMAGE: 'image',
+    TEXT: 'text',
+    OFFICE: 'office',
+    UNKNOWN: 'unknown'
+};
+const TEXT_APPLICATION_TYPES = new Set([
+    'application/json',
+    'application/xml',
+    'application/javascript',
+    'application/typescript',
+    'application/x-ndjson',
+    'application/csv'
+]);
+const OFFICE_TYPES = new Set([
+    'application/msword',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'application/vnd.ms-excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'application/vnd.ms-powerpoint',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+]);
+/** Map a MIME type to a FileKind. Unknown/junk maps to UNKNOWN (never a render path). */
+export function fileKindFromMime(mime) {
+    if (typeof mime !== 'string')
+        return FileKind.UNKNOWN;
+    const type = mime.toLowerCase().split(';')[0].trim();
+    if (!type)
+        return FileKind.UNKNOWN;
+    if (type === 'application/pdf')
+        return FileKind.PDF;
+    if (type.startsWith('image/'))
+        return FileKind.IMAGE;
+    if (type.startsWith('text/'))
+        return FileKind.TEXT;
+    if (TEXT_APPLICATION_TYPES.has(type))
+        return FileKind.TEXT;
+    if (OFFICE_TYPES.has(type))
+        return FileKind.OFFICE;
+    return FileKind.UNKNOWN;
+}
+const IMAGE_EXTENSIONS = new Set([
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'webp',
+    'svg',
+    'bmp',
+    'avif',
+    'ico',
+    'tiff',
+    'tif'
+]);
+// Rendered as plain text (textContent), so source-y formats are safe here.
+const TEXT_EXTENSIONS = new Set([
+    'txt',
+    'text',
+    'md',
+    'markdown',
+    'csv',
+    'tsv',
+    'json',
+    'ndjson',
+    'xml',
+    'yml',
+    'yaml',
+    'log',
+    'js',
+    'mjs',
+    'cjs',
+    'ts',
+    'tsx',
+    'jsx',
+    'css',
+    'scss',
+    'less',
+    'html',
+    'htm',
+    'py',
+    'rb',
+    'go',
+    'rs',
+    'java',
+    'kt',
+    'c',
+    'h',
+    'cc',
+    'cpp',
+    'hpp',
+    'sh',
+    'bash',
+    'zsh',
+    'sql',
+    'ini',
+    'toml',
+    'conf',
+    'env'
+]);
+const OFFICE_EXTENSIONS = new Set(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']);
+/**
+ * Map a file name (or URL/path) to a FileKind by its extension. Query strings,
+ * fragments, and directories are ignored. Unknown/missing extensions map to
+ * UNKNOWN. Use when you don't have a MIME type; prefer `fileKindFromMime` when
+ * you do.
+ */
+export function fileKindFromFileName(name) {
+    if (typeof name !== 'string')
+        return FileKind.UNKNOWN;
+    // Drop query/fragment, then isolate the final path segment.
+    const base = name.split(/[?#]/)[0].split('/').pop() ?? '';
+    const dot = base.lastIndexOf('.');
+    const ext = dot >= 0 ? base.slice(dot + 1).toLowerCase() : '';
+    if (!ext)
+        return FileKind.UNKNOWN;
+    if (ext === 'pdf')
+        return FileKind.PDF;
+    if (IMAGE_EXTENSIONS.has(ext))
+        return FileKind.IMAGE;
+    if (TEXT_EXTENSIONS.has(ext))
+        return FileKind.TEXT;
+    if (OFFICE_EXTENSIONS.has(ext))
+        return FileKind.OFFICE;
+    return FileKind.UNKNOWN;
+}