@makolabs/ripple 3.8.1 → 3.9.2

package/dist/helper/pdf-assets.d.ts

@@ -0,0 +1,42 @@
+/**
+ * pdfjs ships its image codecs (JPEG2000/JPX, JBIG2) and colour management as
+ * separate WebAssembly modules that live in `pdfjs-dist/wasm/`. Since pdfjs v4+
+ * the JPX decoder is one of these wasm modules, so a page whose images are
+ * JPEG2000-encoded (`/Filter /JPXDecode`) renders BLANK unless pdfjs can load
+ * `openjpeg.wasm` at runtime. pdfjs's own `wasmUrl` option expects a directory
+ * URL and then fetches `<wasmUrl>openjpeg.wasm` by its literal name — but a
+ * bundler (Vite/webpack) content-hashes emitted assets and can't emit a bare
+ * directory, so a plain `wasmUrl` can't be resolved reliably from a library.
+ *
+ * Instead we resolve each wasm file individually with the same bundler-agnostic
+ * `new URL('<file>', import.meta.url)` mechanism used for the pdf worker (every
+ * major bundler rewrites it to the emitted asset URL), fetch the bytes, and hand
+ * them straight to pdfjs through a custom `BinaryDataFactory`. This sidesteps
+ * both the directory requirement and asset hashing: we already hold the correct
+ * (hashed) URL for each file, so the exact emitted name never has to be guessed.
+ *
+ * pdfjs only reaches this factory for image-codec wasm (JPX/JBIG2); ICC colour
+ * (`qcms_bg.wasm`) is loaded by pdfjs via a separate synchronous path that still
+ * needs `wasmUrl` and is left unconfigured (non-fatal — ICC profiles are rare in
+ * scanned docs and pdfjs simply warns and skips them). Predefined CMaps and
+ * standard fonts are likewise unconfigured, matching the prior behaviour.
+ */
+/** Argument shape pdfjs passes to `BinaryDataFactory#fetch`. */
+type FetchRequest = {
+    kind: string;
+    filename: string;
+};
+/**
+ * A pdfjs `BinaryDataFactory` that serves the image-codec wasm modules from
+ * bundler-emitted asset URLs. Pass the class (not an instance) as the
+ * `BinaryDataFactory` option to `getDocument` — pdfjs instantiates it itself.
+ *
+ * For any request it doesn't recognise (predefined CMaps, standard fonts) it
+ * throws the same "API parameter not provided" error pdfjs's default factory
+ * would, so behaviour for those unconfigured assets is unchanged.
+ */
+export declare class PdfBinaryDataFactory {
+    constructor(_options?: unknown);
+    fetch({ kind, filename }: FetchRequest): Promise<Uint8Array>;
+}
+export {};

package/dist/helper/pdf-assets.js

@@ -0,0 +1,57 @@
+/**
+ * pdfjs ships its image codecs (JPEG2000/JPX, JBIG2) and colour management as
+ * separate WebAssembly modules that live in `pdfjs-dist/wasm/`. Since pdfjs v4+
+ * the JPX decoder is one of these wasm modules, so a page whose images are
+ * JPEG2000-encoded (`/Filter /JPXDecode`) renders BLANK unless pdfjs can load
+ * `openjpeg.wasm` at runtime. pdfjs's own `wasmUrl` option expects a directory
+ * URL and then fetches `<wasmUrl>openjpeg.wasm` by its literal name — but a
+ * bundler (Vite/webpack) content-hashes emitted assets and can't emit a bare
+ * directory, so a plain `wasmUrl` can't be resolved reliably from a library.
+ *
+ * Instead we resolve each wasm file individually with the same bundler-agnostic
+ * `new URL('<file>', import.meta.url)` mechanism used for the pdf worker (every
+ * major bundler rewrites it to the emitted asset URL), fetch the bytes, and hand
+ * them straight to pdfjs through a custom `BinaryDataFactory`. This sidesteps
+ * both the directory requirement and asset hashing: we already hold the correct
+ * (hashed) URL for each file, so the exact emitted name never has to be guessed.
+ *
+ * pdfjs only reaches this factory for image-codec wasm (JPX/JBIG2); ICC colour
+ * (`qcms_bg.wasm`) is loaded by pdfjs via a separate synchronous path that still
+ * needs `wasmUrl` and is left unconfigured (non-fatal — ICC profiles are rare in
+ * scanned docs and pdfjs simply warns and skips them). Predefined CMaps and
+ * standard fonts are likewise unconfigured, matching the prior behaviour.
+ */
+/**
+ * Bundler-resolved URLs for the wasm image codecs. The `new URL(<literal>,
+ * import.meta.url)` calls must use string literals so Vite/webpack can statically
+ * detect them and emit the assets. Keyed by the exact filename pdfjs requests.
+ */
+const WASM_ASSET_URLS = {
+    'openjpeg.wasm': new URL('pdfjs-dist/wasm/openjpeg.wasm', import.meta.url),
+    'jbig2.wasm': new URL('pdfjs-dist/wasm/jbig2.wasm', import.meta.url)
+};
+/**
+ * A pdfjs `BinaryDataFactory` that serves the image-codec wasm modules from
+ * bundler-emitted asset URLs. Pass the class (not an instance) as the
+ * `BinaryDataFactory` option to `getDocument` — pdfjs instantiates it itself.
+ *
+ * For any request it doesn't recognise (predefined CMaps, standard fonts) it
+ * throws the same "API parameter not provided" error pdfjs's default factory
+ * would, so behaviour for those unconfigured assets is unchanged.
+ */
+export class PdfBinaryDataFactory {
+    // pdfjs constructs this with { cMapUrl, standardFontDataUrl, wasmUrl }; we
+    // resolve wasm ourselves and ignore the (unset) URL options.
+    constructor(_options) { }
+    async fetch({ kind, filename }) {
+        const assetUrl = WASM_ASSET_URLS[filename];
+        if (!assetUrl) {
+            throw new Error(`Ensure that the \`${kind}\` API parameter is provided.`);
+        }
+        const response = await fetch(assetUrl);
+        if (!response.ok) {
+            throw new Error(`Unable to load pdf wasm asset "${filename}" (HTTP ${response.status})`);
+        }
+        return new Uint8Array(await response.arrayBuffer());
+    }
+}

package/dist/helper/pdf-safety.d.ts

@@ -0,0 +1,38 @@
+/** Options passed to pdfjs getDocument to neutralise eval/XFA and silence logging. */
+export declare const PDFJS_DOCUMENT_OPTIONS: {
+    readonly isEvalSupported: false;
+    readonly enableXfa: false;
+    readonly verbosity: 0;
+};
+/** True when a pdfjs-dist version is at/above the CVE-2024-4367 fix (4.2.67). */
+export declare function isPdfJsVersionSafe(version: string | undefined): boolean;
+export type CanvasDimensions = {
+    cssWidth: number;
+    cssHeight: number;
+    pixelWidth: number;
+    pixelHeight: number;
+    effectivePixelRatio: number;
+};
+/**
+ * Compute canvas backing-store + CSS dimensions for a page, clamping the
+ * backing store to MAX_CANVAS_SIDE/MAX_CANVAS_AREA so a giant MediaBox can't
+ * OOM the tab. CSS (display) size is preserved; only resolution is reduced.
+ */
+export declare function computeCanvasDimensions(baseWidth: number, baseHeight: number, scale: number, rawPixelRatio: number): CanvasDimensions;
+/** Number of pages to eagerly render: min(numPages, maxPages); 0 if invalid. */
+export declare function pagesToRender(numPages: number, maxPages: number): number;
+/** How the viewer auto-sizes a page to its container. `fit-width` spans the
+ *  available width (scroll vertically); `fit-page` fits the whole first page. */
+export type FitMode = 'fit-width' | 'fit-page';
+/**
+ * Resolve a `fit-width`/`fit-page` request into a concrete render scale for the
+ * given page and container, clamped to [minScale, maxScale]. `padding` is the
+ * total horizontal (and, for `fit-page`, vertical) chrome to subtract from the
+ * container before fitting. Invalid geometry falls back to a clamped scale of 1
+ * so the caller always gets a usable number.
+ */
+export declare function computeFitScale(pageWidth: number, pageHeight: number, containerWidth: number, containerHeight: number, mode: FitMode, opts: {
+    minScale: number;
+    maxScale: number;
+    padding?: number;
+}): number;

package/dist/helper/pdf-safety.js

@@ -0,0 +1,85 @@
+/** Pure pdfjs hardening helpers — testable without a browser/canvas. See spec §5.2. */
+import { MAX_CANVAS_AREA, MAX_CANVAS_SIDE, clampPixelRatio } from './resource-limits.js';
+/** Options passed to pdfjs getDocument to neutralise eval/XFA and silence logging. */
+export const PDFJS_DOCUMENT_OPTIONS = {
+    isEvalSupported: false,
+    enableXfa: false,
+    verbosity: 0
+};
+/** True when a pdfjs-dist version is at/above the CVE-2024-4367 fix (4.2.67). */
+export function isPdfJsVersionSafe(version) {
+    if (!version || typeof version !== 'string')
+        return false;
+    const m = version.match(/^(\d+)\.(\d+)\.(\d+)/);
+    if (!m)
+        return false;
+    const major = Number(m[1]);
+    const minor = Number(m[2]);
+    const patch = Number(m[3]);
+    if (major > 4)
+        return true;
+    if (major < 4)
+        return false;
+    if (minor > 2)
+        return true;
+    if (minor < 2)
+        return false;
+    return patch >= 67;
+}
+/**
+ * Compute canvas backing-store + CSS dimensions for a page, clamping the
+ * backing store to MAX_CANVAS_SIDE/MAX_CANVAS_AREA so a giant MediaBox can't
+ * OOM the tab. CSS (display) size is preserved; only resolution is reduced.
+ */
+export function computeCanvasDimensions(baseWidth, baseHeight, scale, rawPixelRatio) {
+    const pr = clampPixelRatio(rawPixelRatio);
+    const cssWidth = baseWidth * scale;
+    const cssHeight = baseHeight * scale;
+    let pixelWidth = cssWidth * pr;
+    let pixelHeight = cssHeight * pr;
+    const sideScale = Math.min(1, MAX_CANVAS_SIDE / pixelWidth, MAX_CANVAS_SIDE / pixelHeight);
+    pixelWidth *= sideScale;
+    pixelHeight *= sideScale;
+    const area = pixelWidth * pixelHeight;
+    const areaScale = area > MAX_CANVAS_AREA ? Math.sqrt(MAX_CANVAS_AREA / area) : 1;
+    pixelWidth *= areaScale;
+    pixelHeight *= areaScale;
+    return {
+        cssWidth,
+        cssHeight,
+        pixelWidth: Math.max(1, Math.floor(pixelWidth)),
+        pixelHeight: Math.max(1, Math.floor(pixelHeight)),
+        effectivePixelRatio: pr * sideScale * areaScale
+    };
+}
+/** Number of pages to eagerly render: min(numPages, maxPages); 0 if invalid. */
+export function pagesToRender(numPages, maxPages) {
+    if (!Number.isFinite(numPages) || numPages <= 0)
+        return 0;
+    return Math.min(numPages, Math.max(0, maxPages));
+}
+/**
+ * Resolve a `fit-width`/`fit-page` request into a concrete render scale for the
+ * given page and container, clamped to [minScale, maxScale]. `padding` is the
+ * total horizontal (and, for `fit-page`, vertical) chrome to subtract from the
+ * container before fitting. Invalid geometry falls back to a clamped scale of 1
+ * so the caller always gets a usable number.
+ */
+export function computeFitScale(pageWidth, pageHeight, containerWidth, containerHeight, mode, opts) {
+    const { minScale, maxScale, padding = 0 } = opts;
+    const clamp = (value) => Math.min(Math.max(value, minScale), maxScale);
+    const finiteAndPositive = (n) => Number.isFinite(n) && n > 0;
+    if (!finiteAndPositive(pageWidth) ||
+        !finiteAndPositive(pageHeight) ||
+        !finiteAndPositive(containerWidth) ||
+        !finiteAndPositive(containerHeight)) {
+        return clamp(1);
+    }
+    const availWidth = Math.max(0, containerWidth - padding);
+    const widthScale = availWidth / pageWidth;
+    if (mode === 'fit-page') {
+        const availHeight = Math.max(0, containerHeight - padding);
+        return clamp(Math.min(widthScale, availHeight / pageHeight));
+    }
+    return clamp(widthScale);
+}

package/dist/helper/resource-limits.d.ts

@@ -0,0 +1,13 @@
+/** Shared resource caps for the file-preview viewers. See spec §4. */
+/** Max PDF pages PdfViewer will eagerly render before showing a "first N" banner. */
+export declare const MAX_PAGES = 200;
+/** Max canvas area (px²) — 16 MP is safe across Chrome/Safari/Firefox. */
+export declare const MAX_CANVAS_AREA = 16000000;
+/** Max canvas side length (px). */
+export declare const MAX_CANVAS_SIDE = 8192;
+/** Max decoded image pixels (w×h) before falling back to download. */
+export declare const MAX_IMAGE_PIXELS = 40000000;
+/** Max decoded text bytes TextViewer will buffer before truncating. */
+export declare const MAX_TEXT_BYTES: number;
+/** Clamp a devicePixelRatio into [1, 2]; invalid input falls back to 1. */
+export declare function clampPixelRatio(dpr?: number): number;

package/dist/helper/resource-limits.js

@@ -0,0 +1,16 @@
+/** Shared resource caps for the file-preview viewers. See spec §4. */
+/** Max PDF pages PdfViewer will eagerly render before showing a "first N" banner. */
+export const MAX_PAGES = 200;
+/** Max canvas area (px²) — 16 MP is safe across Chrome/Safari/Firefox. */
+export const MAX_CANVAS_AREA = 16_000_000;
+/** Max canvas side length (px). */
+export const MAX_CANVAS_SIDE = 8192;
+/** Max decoded image pixels (w×h) before falling back to download. */
+export const MAX_IMAGE_PIXELS = 40_000_000;
+/** Max decoded text bytes TextViewer will buffer before truncating. */
+export const MAX_TEXT_BYTES = 2 * 1024 * 1024;
+/** Clamp a devicePixelRatio into [1, 2]; invalid input falls back to 1. */
+export function clampPixelRatio(dpr) {
+    const value = typeof dpr === 'number' && Number.isFinite(dpr) && dpr > 0 ? dpr : 1;
+    return Math.min(value, 2);
+}

package/dist/helper/sanitize-html.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Sanitise an untrusted HTML string with DOMPurify. Returns '' when no DOM is
+ * available (SSR) so unsanitised HTML can never reach the page. See spec §5.9.
+ */
+export declare function sanitizeHtml(dirty: string): string;

package/dist/helper/sanitize-html.js

@@ -0,0 +1,12 @@
+import DOMPurify from 'dompurify';
+/**
+ * Sanitise an untrusted HTML string with DOMPurify. Returns '' when no DOM is
+ * available (SSR) so unsanitised HTML can never reach the page. See spec §5.9.
+ */
+export function sanitizeHtml(dirty) {
+    if (typeof dirty !== 'string')
+        return '';
+    if (typeof window === 'undefined')
+        return '';
+    return DOMPurify.sanitize(dirty);
+}

package/dist/index.d.ts

@@ -47,6 +47,9 @@ export type { SpinnerProps } from './elements/spinner/spinner-types.js';
 export type { SkeletonProps, SkeletonVariant } from './elements/skeleton/skeleton-types.js';
 export type { EmptyStateProps, EmptyStateSize } from './elements/empty-state/empty-state-types.js';
 export type { PdfViewerProps } from './elements/pdf-viewer/pdf-viewer-types.js';
+export type { FileViewerProps, FileKindValue } from './elements/file-viewer/file-viewer-types.js';
+export { FileKind, fileKindFromMime, fileKindFromFileName } from './elements/file-viewer/file-viewer-types.js';
+export type { FilePreviewModalProps } from './elements/file-viewer/file-preview-modal-types.js';
 export type { TooltipProps, TooltipPlacement, TooltipSize, TooltipVariant } from './elements/tooltip/tooltip-types.js';
 export type { PopoverProps, PopoverPlacement, PopoverTrigger } from './elements/popover/popover-types.js';
 export type { CalendarProps, CalendarMode } from './forms/calendar/calendar-types.js';
@@ -65,6 +68,10 @@ export type { ChatMessageType, StreamingCallback, ChatAction, ChatMessage, ChatR
 export type { GetUsersOptions, GetUsersResult, UserEmail, UserPhone, User, Permission, Role, UserTableProps, UserModalProps, UserModalSavePayload, UserViewModalProps, UserApproveModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-types.js';
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
+export * from './helper/resource-limits.js';
+export * from './helper/is-safe-http-url.js';
+export * from './helper/pdf-safety.js';
+export * from './helper/sanitize-html.js';
 export { default as Button } from './button/Button.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as ConfirmDialog } from './modal/ConfirmDialog.svelte';
@@ -101,6 +108,8 @@ export { spinner as spinnerVariants } from './elements/spinner/spinner.js';
 export { default as EmptyState } from './elements/empty-state/EmptyState.svelte';
 export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
 export { default as PdfViewer } from './elements/pdf-viewer/PdfViewer.svelte';
+export { default as FileViewer } from './elements/file-viewer/FileViewer.svelte';
+export { default as FilePreviewModal } from './elements/file-viewer/FilePreviewModal.svelte';
 export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
 export { default as Popover } from './elements/popover/Popover.svelte';
 export { default as ComboBox } from './elements/combobox/ComboBox.svelte';

package/dist/index.js

@@ -12,12 +12,17 @@ export { buildTestId } from './helper/testid.js';
 export { ALL_COUNTRY_CODES, COUNTRY_NAMES } from './forms/market/country-data.js';
 export { Market } from './forms/market/market.js';
 export { countryCodeToFlagEmoji } from './forms/market/flag-emoji.js';
+export { FileKind, fileKindFromMime, fileKindFromFileName } from './elements/file-viewer/file-viewer-types.js';
 export { defaultDatePresets, toIsoDate, fromIsoDate } from './filters/date-presets.js';
 // ============================================================================
 // Helper utilities
 // ============================================================================
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
+export * from './helper/resource-limits.js';
+export * from './helper/is-safe-http-url.js';
+export * from './helper/pdf-safety.js';
+export * from './helper/sanitize-html.js';
 // ============================================================================
 // Direct Component Exports
 // ============================================================================
@@ -78,6 +83,9 @@ export { default as EmptyState } from './elements/empty-state/EmptyState.svelte'
 export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
 // Elements - PdfViewer
 export { default as PdfViewer } from './elements/pdf-viewer/PdfViewer.svelte';
+// Elements - File viewers
+export { default as FileViewer } from './elements/file-viewer/FileViewer.svelte';
+export { default as FilePreviewModal } from './elements/file-viewer/FilePreviewModal.svelte';
 // Elements - Tooltip
 export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
 // Elements - Popover

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "3.8.1",
+	"version": "3.9.2",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -55,7 +55,7 @@
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0",
-		"pdfjs-dist": "^4.0.0 || ^5.0.0",
+		"pdfjs-dist": "^4.2.67 || ^5.0.0",
 		"svelte": "^5.0.0 || ^6.0.0"
 	},
 	"peerDependenciesMeta": {
@@ -79,6 +79,7 @@
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/svelte": "^5.2.4",
 		"@types/node": "^22.19.1",
+		"@vitest/coverage-v8": "^4.1.9",
 		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-storybook": "^10.0.7",
@@ -147,6 +148,7 @@
 		"@aws-sdk/s3-request-presigner": "^3.1029.0",
 		"@friendofsvelte/mermaid": "^0.0.4",
 		"dayjs": "^1.11.19",
+		"dompurify": "^3.4.11",
 		"echarts": "^6.0.0",
 		"marked": "^17.0.0",
 		"svelte-highlight": "^7.9.0",