@r2digisolutions/components 0.14.22 → 0.15.1

package/dist/components/atoms/IconBox/IconBox.svelte

@@ -2,12 +2,12 @@
 	import type { Snippet } from 'svelte';
 
 	export type IconBoxTone = 'brand' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
-	export type IconBoxSize = 'sm' | 'md' | 'lg';
+	export type IconBoxSize = 'sm' | 'md' | 'lg' | 'xl';
 
 	interface IconBoxProps {
 		tone?: IconBoxTone;
 		size?: IconBoxSize;
-		rounded?: 'lg' | 'xl' | 'full';
+		rounded?: 'lg' | 'xl' | '2xl' | 'full';
 		class?: string;
 		children?: Snippet;
 	}
@@ -32,12 +32,14 @@
 	const sizes: Record<IconBoxSize, string> = {
 		sm: 'h-8 w-8 [&_svg]:h-3.5 [&_svg]:w-3.5',
 		md: 'h-10 w-10 [&_svg]:h-4 [&_svg]:w-4',
-		lg: 'h-12 w-12 [&_svg]:h-5 [&_svg]:w-5'
+		lg: 'h-12 w-12 [&_svg]:h-5 [&_svg]:w-5',
+		xl: 'h-16 w-16 [&_svg]:h-7 [&_svg]:w-7 sm:h-20 sm:w-20 sm:[&_svg]:h-8 sm:[&_svg]:w-8'
 	};
 
-	const radii: Record<'lg' | 'xl' | 'full', string> = {
+	const radii: Record<'lg' | 'xl' | '2xl' | 'full', string> = {
 		lg: 'rounded-lg',
 		xl: 'rounded-xl',
+		'2xl': 'rounded-2xl',
 		full: 'rounded-full'
 	};
 </script>

package/dist/components/atoms/IconBox/IconBox.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 export type IconBoxTone = 'brand' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
-export type IconBoxSize = 'sm' | 'md' | 'lg';
+export type IconBoxSize = 'sm' | 'md' | 'lg' | 'xl';
 interface IconBoxProps {
     tone?: IconBoxTone;
     size?: IconBoxSize;
-    rounded?: 'lg' | 'xl' | 'full';
+    rounded?: 'lg' | 'xl' | '2xl' | 'full';
     class?: string;
     children?: Snippet;
 }

package/dist/components/molecules/OrgChart/OrgChart.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import PanZoomViewport from '../PanZoomViewport/PanZoomViewport.svelte';
+	import OrgChartTree from './OrgChartTree.svelte';
+
 	export interface OrgNode {
 		id: string;
 		name: string;
@@ -12,106 +15,41 @@
 		root?: OrgNode | null;
 		class?: string;
 		onselect?: (node: OrgNode) => void;
+		/** Pan + wheel zoom viewport */
+		interactive?: boolean;
+		viewportHeight?: string;
+		showControls?: boolean;
+		/** Refit viewport when filter / data changes */
+		contentKey?: string | number | null;
 	}
 
-	let { root = null, class: className = '', onselect }: OrgChartProps = $props();
-
-	let selected = $state<string | null>(null);
-
-	const CARD_W = 176;
-
-	function initials(name: string) {
-		return name
-			.split(/\s+/)
-			.slice(0, 2)
-			.map((p) => p[0]?.toUpperCase() ?? '')
-			.join('');
-	}
-
-	function primaryAvatar(node: OrgNode) {
-		return node.avatarUrl ?? node.assignees?.[0]?.avatarUrl ?? null;
-	}
-
-	function primaryLabel(node: OrgNode) {
-		if (node.assignees?.length === 1) return node.assignees[0].name;
-		return null;
-	}
+	let {
+		root = null,
+		class: className = '',
+		onselect,
+		interactive = true,
+		viewportHeight = 'min(70vh, 640px)',
+		showControls = true,
+		contentKey = null
+	}: OrgChartProps = $props();
+
+	const viewportKey = $derived(contentKey ?? root?.id ?? 'empty');
 </script>
 
-{#snippet nodeCard(node: OrgNode)}
-	<button
-		type="button"
-		class={[
-			'flex w-full flex-col items-center gap-1.5 rounded-xl border bg-surface-elevated px-3 py-2.5 text-center shadow-sm transition-all',
-			selected === node.id
-				? 'border-brand-500 ring-2 ring-brand-500/30'
-				: 'border-border hover:border-brand-400'
-		]}
-		onclick={() => {
-			selected = node.id;
-			onselect?.(node);
-		}}
+{#if interactive && root}
+	<PanZoomViewport
+		class={className}
+		height={viewportHeight}
+		{showControls}
+		contentKey={viewportKey}
+		initialFit
 	>
-		{#if primaryAvatar(node)}
-			<img src={primaryAvatar(node)!} alt="" class="h-9 w-9 rounded-full object-cover" />
-		{:else}
-			<span
-				class="flex h-9 w-9 items-center justify-center rounded-full bg-brand-500/15 text-xs font-semibold text-brand-600 dark:text-brand-300"
-			>
-				{initials(node.name)}
-			</span>
-		{/if}
-		<span class="line-clamp-2 text-sm leading-snug font-semibold text-primary">{node.name}</span>
-		{#if primaryLabel(node)}
-			<span class="truncate text-xs text-secondary">{primaryLabel(node)}</span>
-		{/if}
-		{#if node.role}
-			<span class="truncate text-[11px] text-muted">{node.role}</span>
-		{/if}
-		{#if node.assignees && node.assignees.length > 1}
-			<span class="text-[10px] text-muted">+{node.assignees.length - 1} más</span>
-		{/if}
-	</button>
-{/snippet}
-
-{#snippet tree(node: OrgNode)}
-	<div class="flex flex-col items-center">
-		<div class="shrink-0" style:width="{CARD_W}px">
-			{@render nodeCard(node)}
-		</div>
-		{#if node.children?.length}
-			<div class="h-6 w-0.5 shrink-0 bg-border-strong" aria-hidden="true"></div>
-			{#if node.children.length === 1}
-				{@render tree(node.children[0])}
-			{:else}
-				<div
-					class="relative inline-flex items-start justify-center gap-4"
-					style:--siblings={node.children.length}
-				>
-					<div
-						class="pointer-events-none absolute top-0 h-0.5 bg-border-strong"
-						style:left="calc(50% / var(--siblings))"
-						style:right="calc(50% / var(--siblings))"
-						aria-hidden="true"
-					></div>
-					{#each node.children as child (child.id)}
-						<div class="flex shrink-0 flex-col items-center" style:min-width="{CARD_W}px">
-							<div class="h-4 w-0.5 shrink-0 bg-border-strong" aria-hidden="true"></div>
-							{@render tree(child)}
-						</div>
-					{/each}
-				</div>
-			{/if}
-		{/if}
+		<OrgChartTree {root} {onselect} />
+	</PanZoomViewport>
+{:else if root}
+	<div class={['overflow-x-auto py-4', className]} role="tree" aria-label="Organization chart">
+		<OrgChartTree {root} {onselect} />
 	</div>
-{/snippet}
-
-<div class={['overflow-x-auto py-4', className]} role="tree" aria-label="Organization chart">
-	{#if root}
-		<div class="flex min-w-max justify-center px-4 pb-2">
-			{@render tree(root)}
-		</div>
-	{:else}
-		<p class="py-8 text-center text-sm text-muted">No organization data</p>
-	{/if}
-</div>
+{:else}
+	<p class={['py-8 text-center text-sm text-muted', className]}>No organization data</p>
+{/if}

package/dist/components/molecules/OrgChart/OrgChart.svelte.d.ts

@@ -14,6 +14,12 @@ interface OrgChartProps {
     root?: OrgNode | null;
     class?: string;
     onselect?: (node: OrgNode) => void;
+    /** Pan + wheel zoom viewport */
+    interactive?: boolean;
+    viewportHeight?: string;
+    showControls?: boolean;
+    /** Refit viewport when filter / data changes */
+    contentKey?: string | number | null;
 }
 declare const OrgChart: import("svelte").Component<OrgChartProps, {}, "">;
 type OrgChart = ReturnType<typeof OrgChart>;

package/dist/components/molecules/OrgChart/OrgChartNode.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import OrgChartNode from './OrgChartNode.svelte';
+	import { getPanZoomContext } from '../PanZoomViewport/panZoomContext.js';
+	import type { OrgNode } from './OrgChart.svelte';
+
+	interface OrgChartNodeProps {
+		node: OrgNode;
+		onselect?: (node: OrgNode) => void;
+		selectedId?: string | null;
+	}
+
+	let { node, onselect, selectedId = $bindable(null) }: OrgChartNodeProps = $props();
+
+	const panZoom = getPanZoomContext();
+	const CARD_W = 176;
+
+	let rowEl = $state<HTMLDivElement | null>(null);
+	let line = $state<{ left: number; width: number } | null>(null);
+
+	function initials(name: string) {
+		return name
+			.split(/\s+/)
+			.slice(0, 2)
+			.map((p) => p[0]?.toUpperCase() ?? '')
+			.join('');
+	}
+
+	function primaryAvatar(n: OrgNode) {
+		return n.avatarUrl ?? n.assignees?.[0]?.avatarUrl ?? null;
+	}
+
+	function primaryLabel(n: OrgNode) {
+		if (n.assignees?.length === 1) return n.assignees[0].name;
+		return null;
+	}
+
+	function selectNode(n: OrgNode) {
+		if (panZoom?.consumeClick()) return;
+		selectedId = n.id;
+		onselect?.(n);
+	}
+
+	function measureLine() {
+		const children = node.children ?? [];
+		if (!rowEl || children.length < 2) {
+			line = null;
+			return;
+		}
+		const cols = [...rowEl.querySelectorAll<HTMLElement>('[data-org-col]')];
+		if (cols.length < 2) {
+			line = null;
+			return;
+		}
+		const rowRect = rowEl.getBoundingClientRect();
+		const first = cols[0].getBoundingClientRect();
+		const last = cols[cols.length - 1].getBoundingClientRect();
+		const left = first.left + first.width / 2 - rowRect.left;
+		const right = last.left + last.width / 2 - rowRect.left;
+		line = { left, width: Math.max(0, right - left) };
+	}
+
+	$effect(() => {
+		node.children?.length;
+		if (!rowEl) return;
+		measureLine();
+		const ro = new ResizeObserver(() => measureLine());
+		ro.observe(rowEl);
+		for (const col of rowEl.querySelectorAll('[data-org-col]')) ro.observe(col);
+		return () => ro.disconnect();
+	});
+</script>
+
+<div class="flex flex-col items-center">
+	<div class="shrink-0" style:width="{CARD_W}px">
+		<button
+			type="button"
+			class={[
+				'flex w-full flex-col items-center gap-1.5 rounded-xl border bg-surface-elevated px-3 py-2.5 text-center shadow-sm transition-all',
+				selectedId === node.id
+					? 'border-brand-500 ring-2 ring-brand-500/30'
+					: 'border-border hover:border-brand-400'
+			]}
+			onclick={() => selectNode(node)}
+		>
+			{#if primaryAvatar(node)}
+				<img src={primaryAvatar(node)!} alt="" class="h-9 w-9 rounded-full object-cover" />
+			{:else}
+				<span
+					class="flex h-9 w-9 items-center justify-center rounded-full bg-brand-500/15 text-xs font-semibold text-brand-600 dark:text-brand-300"
+				>
+					{initials(node.name)}
+				</span>
+			{/if}
+			<span class="line-clamp-2 text-sm leading-snug font-semibold text-primary">{node.name}</span>
+			{#if primaryLabel(node)}
+				<span class="truncate text-xs text-secondary">{primaryLabel(node)}</span>
+			{/if}
+			{#if node.role}
+				<span class="truncate text-[11px] text-muted">{node.role}</span>
+			{/if}
+			{#if node.assignees && node.assignees.length > 1}
+				<span class="text-[10px] text-muted">+{node.assignees.length - 1} más</span>
+			{/if}
+		</button>
+	</div>
+
+	{#if node.children?.length}
+		<div class="h-6 w-0.5 shrink-0 bg-border-strong" aria-hidden="true"></div>
+		{#if node.children.length === 1}
+			<OrgChartNode node={node.children[0]} {onselect} bind:selectedId />
+		{:else}
+			<div bind:this={rowEl} class="relative inline-flex items-start justify-center gap-4">
+				{#if line}
+					<div
+						class="pointer-events-none absolute top-0 h-0.5 bg-border-strong"
+						style:left="{line.left}px"
+						style:width="{line.width}px"
+						aria-hidden="true"
+					></div>
+				{/if}
+				{#each node.children as child (child.id)}
+					<div data-org-col class="flex shrink-0 flex-col items-center" style:min-width="{CARD_W}px">
+						<div class="h-4 w-0.5 shrink-0 bg-border-strong" aria-hidden="true"></div>
+						<OrgChartNode node={child} {onselect} bind:selectedId />
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</div>

package/dist/components/molecules/OrgChart/OrgChartNode.svelte.d.ts

@@ -0,0 +1,10 @@
+import OrgChartNode from './OrgChartNode.svelte';
+import type { OrgNode } from './OrgChart.svelte';
+interface OrgChartNodeProps {
+    node: OrgNode;
+    onselect?: (node: OrgNode) => void;
+    selectedId?: string | null;
+}
+declare const OrgChartNode: import("svelte").Component<OrgChartNodeProps, {}, "selectedId">;
+type OrgChartNode = ReturnType<typeof OrgChartNode>;
+export default OrgChartNode;

package/dist/components/molecules/OrgChart/OrgChartStory.svelte

@@ -29,7 +29,7 @@
 	};
 </script>
 
-<div class="rounded-2xl border border-border bg-surface-elevated p-4">
-	<p class="mb-4 text-sm font-semibold text-primary">Organization</p>
-	<OrgChart {root} />
+<div class="rounded-2xl border border-border bg-surface-elevated p-2">
+	<p class="mb-2 px-2 text-sm font-semibold text-primary">Organization</p>
+	<OrgChart {root} viewportHeight="480px" />
 </div>

package/dist/components/molecules/OrgChart/OrgChartTree.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import OrgChartNode from './OrgChartNode.svelte';
+	import type { OrgNode } from './OrgChart.svelte';
+
+	interface OrgChartTreeProps {
+		root: OrgNode;
+		onselect?: (node: OrgNode) => void;
+	}
+
+	let { root, onselect }: OrgChartTreeProps = $props();
+	let selectedId = $state<string | null>(null);
+</script>
+
+<div class="flex min-w-max justify-center px-4 py-4" role="tree" aria-label="Organization chart">
+	<OrgChartNode node={root} {onselect} bind:selectedId />
+</div>

package/dist/components/molecules/OrgChart/OrgChartTree.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { OrgNode } from './OrgChart.svelte';
+interface OrgChartTreeProps {
+    root: OrgNode;
+    onselect?: (node: OrgNode) => void;
+}
+declare const OrgChartTree: import("svelte").Component<OrgChartTreeProps, {}, "">;
+type OrgChartTree = ReturnType<typeof OrgChartTree>;
+export default OrgChartTree;

package/dist/components/molecules/PageHeader/PageHeader.svelte

@@ -48,13 +48,31 @@
 	const titleSize: Record<PageHeaderSize, string> = {
 		sm: 'text-lg font-semibold',
 		md: 'text-2xl font-semibold',
-		lg: 'text-3xl font-bold'
+		lg: 'text-3xl font-bold tracking-tight'
 	};
 
 	const spacing: Record<PageHeaderSize, string> = {
 		sm: 'space-y-2',
 		md: 'space-y-3',
-		lg: 'space-y-4'
+		lg: 'space-y-5'
+	};
+
+	const bodyGap: Record<PageHeaderSize, string> = {
+		sm: 'gap-2',
+		md: 'gap-3',
+		lg: 'gap-4'
+	};
+
+	const textStack: Record<PageHeaderSize, string> = {
+		sm: 'space-y-1',
+		md: 'space-y-1.5',
+		lg: 'space-y-2'
+	};
+
+	const descriptionClass: Record<PageHeaderSize, string> = {
+		sm: 'max-w-2xl text-sm leading-snug text-muted',
+		md: 'max-w-2xl text-sm leading-relaxed text-muted',
+		lg: 'max-w-3xl text-base leading-relaxed text-muted'
 	};
 
 	const resolvedSize = $derived<PageHeaderSize>(
@@ -75,15 +93,15 @@
 		<Breadcrumb items={breadcrumbs} />
 	{/if}
 
-	<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-		<div class="flex min-w-0 items-center gap-2">
+	<div class={['flex flex-col sm:flex-row sm:items-start sm:justify-between', bodyGap[resolvedSize]]}>
+		<div class={['flex min-w-0 items-start', bodyGap[resolvedSize]]}>
 			{#if leading}
-				<div class="shrink-0">
+				<div class="shrink-0 pt-0.5">
 					{@render leading()}
 				</div>
 			{/if}
 
-			<div class="min-w-0 space-y-0.5">
+			<div class={['min-w-0', textStack[resolvedSize]]}>
 				{#if loading}
 					<Skeleton
 						variant="rounded"
@@ -94,8 +112,8 @@
 						<Skeleton variant="rounded" width="18rem" height="1rem" class="mt-1.5" />
 					{/if}
 				{:else}
-					<div class="flex min-w-0 items-center gap-2">
-						<h1 class={['truncate tracking-tight text-primary', titleSize[resolvedSize]]}>
+					<div class="flex min-w-0 flex-wrap items-center gap-2.5">
+						<h1 class={['min-w-0 text-primary', titleSize[resolvedSize]]}>
 							{title}
 						</h1>
 						{#if status}
@@ -105,10 +123,10 @@
 						{/if}
 					</div>
 					{#if description}
-						<p class="max-w-2xl text-sm leading-snug text-muted">{description}</p>
+						<p class={descriptionClass[resolvedSize]}>{description}</p>
 					{/if}
 					{#if meta}
-						<div class="pt-1">
+						<div class={resolvedSize === 'lg' ? 'pt-1' : 'pt-0.5'}>
 							{@render meta()}
 						</div>
 					{/if}
@@ -117,7 +135,7 @@
 		</div>
 
 		{#if actions && !loading}
-			<div class="flex shrink-0 flex-wrap items-center gap-2">
+			<div class="flex shrink-0 flex-wrap items-center gap-2 sm:pt-1">
 				{@render actions()}
 			</div>
 		{:else if loading}

package/dist/components/molecules/PanZoomViewport/PanZoomViewport.stories.js

@@ -0,0 +1,8 @@
+import PanZoomViewportStory from './PanZoomViewportStory.svelte';
+const meta = {
+    title: 'Molecules/PanZoomViewport',
+    component: PanZoomViewportStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};

package/dist/components/molecules/PanZoomViewport/PanZoomViewport.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import FullscreenToggle from '../FullscreenToggle/FullscreenToggle.svelte';
+	import { PAN_ZOOM_CTX, type PanZoomContext } from './panZoomContext.js';
+
+	interface PanZoomViewportProps {
+		minZoom?: number;
+		maxZoom?: number;
+		initialFit?: boolean;
+		showControls?: boolean;
+		showFullscreen?: boolean;
+		height?: string;
+		contentKey?: string | number | null;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		minZoom = 0.25,
+		maxZoom = 2,
+		initialFit = true,
+		showControls = true,
+		showFullscreen = true,
+		height = 'min(70vh, 640px)',
+		contentKey = null,
+		class: className = '',
+		children
+	}: PanZoomViewportProps = $props();
+
+	let scale = $state(1);
+	let panX = $state(0);
+	let panY = $state(0);
+	let dragging = $state(false);
+	let moved = $state(false);
+	let suppressClick = $state(false);
+	let pointerId = $state<number | null>(null);
+	let startX = 0;
+	let startY = 0;
+	let originPanX = 0;
+	let originPanY = 0;
+	let fullscreen = $state(false);
+
+	let shellEl = $state<HTMLDivElement | null>(null);
+	let viewportEl = $state<HTMLDivElement | null>(null);
+	let contentEl = $state<HTMLDivElement | null>(null);
+
+	const MOVE_THRESHOLD = 6;
+	const FIT_PADDING = 32;
+
+	const shellHeight = $derived(fullscreen ? '100%' : height);
+
+	function clampZoom(z: number) {
+		return Math.min(maxZoom, Math.max(minZoom, z));
+	}
+
+	export function fitToContent() {
+		if (!viewportEl || !contentEl) return;
+		const vw = viewportEl.clientWidth;
+		const vh = viewportEl.clientHeight;
+		const cw = contentEl.scrollWidth;
+		const ch = contentEl.scrollHeight;
+		if (!vw || !vh || !cw || !ch) return;
+
+		const next = clampZoom(Math.min((vw - FIT_PADDING) / cw, (vh - FIT_PADDING) / ch, 1));
+		scale = next;
+		panX = (vw - cw * next) / 2;
+		panY = (vh - ch * next) / 2;
+	}
+
+	function zoomAt(nextScale: number, clientX?: number, clientY?: number) {
+		if (!viewportEl) return;
+		const prev = scale;
+		const next = clampZoom(nextScale);
+		if (next === prev) return;
+
+		const rect = viewportEl.getBoundingClientRect();
+		const px = clientX != null ? clientX - rect.left : rect.width / 2;
+		const py = clientY != null ? clientY - rect.top : rect.height / 2;
+
+		panX = px - ((px - panX) * next) / prev;
+		panY = py - ((py - panY) * next) / prev;
+		scale = next;
+	}
+
+	function zoomIn() {
+		zoomAt(scale * 1.2);
+	}
+
+	function zoomOut() {
+		zoomAt(scale / 1.2);
+	}
+
+	function onWheel(e: WheelEvent) {
+		e.preventDefault();
+		const delta = e.deltaY > 0 ? -0.12 : 0.12;
+		zoomAt(scale + delta * scale, e.clientX, e.clientY);
+	}
+
+	function onPointerDown(e: PointerEvent) {
+		if (e.button !== 0) return;
+		if ((e.target as HTMLElement).closest('[data-panzoom-chrome]')) return;
+
+		dragging = true;
+		moved = false;
+		pointerId = e.pointerId;
+		startX = e.clientX;
+		startY = e.clientY;
+		originPanX = panX;
+		originPanY = panY;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!dragging || pointerId !== e.pointerId) return;
+		const dx = e.clientX - startX;
+		const dy = e.clientY - startY;
+		if (!moved && Math.hypot(dx, dy) >= MOVE_THRESHOLD) moved = true;
+		panX = originPanX + dx;
+		panY = originPanY + dy;
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		if (!dragging || pointerId !== e.pointerId) return;
+		dragging = false;
+		pointerId = null;
+		try {
+			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		} catch {
+			/* already released */
+		}
+		if (moved) suppressClick = true;
+		moved = false;
+	}
+
+	function onDoubleClick(e: MouseEvent) {
+		if ((e.target as HTMLElement).closest('[data-panzoom-chrome]')) return;
+		fitToContent();
+	}
+
+	function onFullscreenChange(active: boolean) {
+		fullscreen = active;
+		requestAnimationFrame(() => fitToContent());
+	}
+
+	const ctx: PanZoomContext = {
+		consumeClick: () => {
+			if (!suppressClick) return false;
+			suppressClick = false;
+			return true;
+		}
+	};
+
+	setContext(PAN_ZOOM_CTX, ctx);
+
+	$effect(() => {
+		contentKey;
+		if (!initialFit) return;
+		const id = requestAnimationFrame(() => {
+			requestAnimationFrame(() => fitToContent());
+		});
+		return () => cancelAnimationFrame(id);
+	});
+</script>
+
+<div
+	bind:this={shellEl}
+	class={[
+		'relative overflow-hidden rounded-xl border border-border bg-surface-base/40',
+		fullscreen && 'rounded-none border-0',
+		className
+	]}
+	style:height={shellHeight}
+>
+	{#if showControls}
+		<div
+			class="absolute top-3 right-3 z-10 flex items-center gap-1 rounded-lg border border-border bg-surface-elevated/95 p-1 shadow-sm backdrop-blur-sm"
+			data-panzoom-chrome
+		>
+			<IconButton label="Alejar" size="sm" variant="ghost" onclick={zoomOut}>
+				<span class="text-base leading-none font-medium">−</span>
+			</IconButton>
+			<span class="min-w-[3rem] px-1 text-center text-xs tabular-nums text-secondary">
+				{Math.round(scale * 100)}%
+			</span>
+			<IconButton label="Acercar" size="sm" variant="ghost" onclick={zoomIn}>
+				<span class="text-base leading-none font-medium">+</span>
+			</IconButton>
+			<IconButton label="Ajustar a vista" size="sm" variant="ghost" onclick={fitToContent}>
+				<span class="text-xs font-semibold">⊡</span>
+			</IconButton>
+			{#if showFullscreen}
+				<FullscreenToggle
+					target={shellEl}
+					size="sm"
+					bind:active={fullscreen}
+					enterLabel="Pantalla completa"
+					exitLabel="Salir de pantalla completa"
+					onchange={onFullscreenChange}
+				/>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		bind:this={viewportEl}
+		class={[
+			'h-full w-full touch-none select-none',
+			dragging ? 'cursor-grabbing' : 'cursor-grab'
+		]}
+		onwheel={onWheel}
+		onpointerdown={onPointerDown}
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+		onpointercancel={onPointerUp}
+		ondblclick={onDoubleClick}
+		role="presentation"
+	>
+		<div
+			bind:this={contentEl}
+			class="inline-block will-change-transform"
+			style:transform="translate({panX}px, {panY}px) scale({scale})"
+			style:transform-origin="0 0"
+		>
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/molecules/PanZoomViewport/PanZoomViewport.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface PanZoomViewportProps {
+    minZoom?: number;
+    maxZoom?: number;
+    initialFit?: boolean;
+    showControls?: boolean;
+    showFullscreen?: boolean;
+    height?: string;
+    contentKey?: string | number | null;
+    class?: string;
+    children?: Snippet;
+}
+declare const PanZoomViewport: import("svelte").Component<PanZoomViewportProps, {
+    fitToContent: () => void;
+}, "">;
+type PanZoomViewport = ReturnType<typeof PanZoomViewport>;
+export default PanZoomViewport;

package/dist/components/molecules/PanZoomViewport/PanZoomViewportStory.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import PanZoomViewport from './PanZoomViewport.svelte';
+</script>
+
+<PanZoomViewport height="420px">
+	<div class="flex min-w-max flex-col items-center gap-8 p-12">
+		<div class="rounded-xl border border-border bg-surface-elevated px-6 py-4 text-sm font-semibold">
+			Arrastra para mover · rueda para zoom · doble clic para ajustar
+		</div>
+		<div class="flex gap-16">
+			{#each Array.from({ length: 8 }) as _, i (i)}
+				<div
+					class="flex h-24 w-40 items-center justify-center rounded-xl border border-border bg-surface-elevated text-sm"
+				>
+					Bloque {i + 1}
+				</div>
+			{/each}
+		</div>
+	</div>
+</PanZoomViewport>

package/dist/components/molecules/PanZoomViewport/PanZoomViewportStory.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PanZoomViewportStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PanZoomViewportStory = InstanceType<typeof PanZoomViewportStory>;
+export default PanZoomViewportStory;

package/dist/components/molecules/PanZoomViewport/panZoomContext.d.ts

@@ -0,0 +1,5 @@
+export declare const PAN_ZOOM_CTX: unique symbol;
+export type PanZoomContext = {
+    consumeClick: () => boolean;
+};
+export declare function getPanZoomContext(): PanZoomContext | undefined;

package/dist/components/molecules/PanZoomViewport/panZoomContext.js

@@ -0,0 +1,5 @@
+import { getContext } from 'svelte';
+export const PAN_ZOOM_CTX = Symbol('panZoom');
+export function getPanZoomContext() {
+    return getContext(PAN_ZOOM_CTX);
+}

package/dist/index.d.ts

@@ -252,6 +252,8 @@ export { default as VirtualList } from './components/molecules/VirtualList/Virtu
 export { default as MasonryGrid } from './components/molecules/MasonryGrid/MasonryGrid.svelte';
 export { default as OrgChart } from './components/molecules/OrgChart/OrgChart.svelte';
 export type { OrgNode } from './components/molecules/OrgChart/OrgChart.svelte';
+export { default as PanZoomViewport } from './components/molecules/PanZoomViewport/PanZoomViewport.svelte';
+export { getPanZoomContext, PAN_ZOOM_CTX, type PanZoomContext } from './components/molecules/PanZoomViewport/panZoomContext.js';
 export { default as TableToolbar } from './components/molecules/TableToolbar/TableToolbar.svelte';
 export type { TableColumnOption, TableDensity } from './components/molecules/TableToolbar/TableToolbar.svelte';
 export { default as ButtonGroup } from './components/molecules/ButtonGroup/ButtonGroup.svelte';

package/dist/index.js

@@ -194,6 +194,8 @@ export { default as MessageList } from './components/molecules/MessageList/Messa
 export { default as VirtualList } from './components/molecules/VirtualList/VirtualList.svelte';
 export { default as MasonryGrid } from './components/molecules/MasonryGrid/MasonryGrid.svelte';
 export { default as OrgChart } from './components/molecules/OrgChart/OrgChart.svelte';
+export { default as PanZoomViewport } from './components/molecules/PanZoomViewport/PanZoomViewport.svelte';
+export { getPanZoomContext, PAN_ZOOM_CTX } from './components/molecules/PanZoomViewport/panZoomContext.js';
 export { default as TableToolbar } from './components/molecules/TableToolbar/TableToolbar.svelte';
 export { default as ButtonGroup } from './components/molecules/ButtonGroup/ButtonGroup.svelte';
 export { default as ThemeToggle } from './components/molecules/ThemeToggle/ThemeToggle.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.14.22",
+	"version": "0.15.1",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",