@r2digisolutions/components 0.2.0 → 0.3.1

package/README.md

@@ -75,6 +75,16 @@ Mismo flujo que usan muchas libs con `bumpp` / `release-it` (tag → CI → npm
 pnpm add @r2digisolutions/components
 ```
 
+Los componentes usan clases de Tailwind 4. En la app consumidora basta con importar el CSS del design system (incluye `@theme`, variables y el `@source` del paquete):
+
+```css
+/* app.css / layout.css del consumidor */
+@import 'tailwindcss';
+@import '@r2digisolutions/components/styles.css';
+```
+
+Ese import registra tokens (`border-border`, `bg-surface`, …) y hace que Tailwind escanee los `.svelte` del paquete. Sin él, las utilidades pueden faltar o `--border` no estar definido.
+
 ## Licencia
 
 MIT

package/dist/components/atoms/Playhead/Playhead.svelte

@@ -3,6 +3,14 @@
 		/** Position in px from left of timeline content */
 		x?: number;
 		height?: number | string;
+		/**
+		 * `full` — head + needle (spans ruler+tracks)
+		 * `head` — caret on the ruler only
+		 * `line` — needle through tracks only
+		 */
+		variant?: 'full' | 'head' | 'line';
+		/** Height of the head area that sits on the ruler (px) */
+		headSize?: number;
 		dragging?: boolean;
 		class?: string;
 		ondragstart?: (e: PointerEvent) => void;
@@ -13,6 +21,8 @@
 	let {
 		x = 0,
 		height = '100%',
+		variant = 'full',
+		headSize = 28,
 		dragging = false,
 		class: className = '',
 		ondragstart,
@@ -20,7 +30,12 @@
 		ondragend
 	}: PlayheadProps = $props();
 
+	const showHead = $derived(variant === 'full' || variant === 'head');
+	const showLine = $derived(variant === 'full' || variant === 'line');
+
 	function onPointerDown(e: PointerEvent) {
+		e.preventDefault();
+		e.stopPropagation();
 		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
 		ondragstart?.(e);
 	}
@@ -42,7 +57,8 @@
 	aria-valuenow={Math.round(x)}
 	tabindex="0"
 	class={[
-		'absolute top-0 z-20 w-0 touch-none select-none',
+		'absolute top-0 z-40 -translate-x-1/2 touch-none select-none',
+		variant === 'line' ? 'w-3' : 'w-4',
 		dragging ? 'cursor-grabbing' : 'cursor-ew-resize',
 		className
 	]}
@@ -52,8 +68,31 @@
 	onpointermove={onPointerMove}
 	onpointerup={onPointerUp}
 >
-	<div
-		class="absolute left-1/2 top-0 h-3 w-3 -translate-x-1/2 rounded-sm bg-red-500 shadow-sm"
-	></div>
-	<div class="absolute left-1/2 top-2 h-[calc(100%-0.5rem)] w-px -translate-x-1/2 bg-red-500"></div>
+	{#if showHead}
+		<div
+			class="absolute left-1/2 top-0 z-10 flex -translate-x-1/2 flex-col items-center justify-center"
+			style:height={`${headSize}px`}
+		>
+			<svg
+				viewBox="0 0 14 18"
+				class="h-[16px] w-[12px] drop-shadow-sm"
+				aria-hidden="true"
+			>
+				<path
+					d="M1 1.5h12v8.2L7 16.5 1 9.7V1.5z"
+					fill="#ef4444"
+					stroke="#b91c1c"
+					stroke-width="1"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</div>
+	{/if}
+	{#if showLine}
+		<div
+			class="absolute left-1/2 w-0.5 -translate-x-1/2 bg-red-500"
+			style:top={variant === 'full' ? `${headSize - 2}px` : '0'}
+			style:bottom="0"
+		></div>
+	{/if}
 </div>

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

@@ -2,6 +2,14 @@ interface PlayheadProps {
     /** Position in px from left of timeline content */
     x?: number;
     height?: number | string;
+    /**
+     * `full` — head + needle (spans ruler+tracks)
+     * `head` — caret on the ruler only
+     * `line` — needle through tracks only
+     */
+    variant?: 'full' | 'head' | 'line';
+    /** Height of the head area that sits on the ruler (px) */
+    headSize?: number;
     dragging?: boolean;
     class?: string;
     ondragstart?: (e: PointerEvent) => void;

package/dist/components/atoms/TimeRuler/TimeRuler.svelte

@@ -1,57 +1,116 @@
 <script lang="ts">
-	import { formatTimecode, ticksForDuration } from '../../../utils/mediaTime.js';
+	import { formatTimecode, ticksForDuration, type TimeTick } from '../../../utils/mediaTime.js';
 
 	interface TimeRulerProps {
 		durationMs?: number;
 		pxPerMs?: number;
 		height?: number;
+		/** Precomputed ticks; defaults to ticksForDuration. */
+		ticks?: TimeTick[];
 		class?: string;
 		onclick?: (ms: number, e: MouseEvent) => void;
+		/** Scrub while dragging on the ruler */
+		onscrub?: (ms: number, e: PointerEvent) => void;
+		onscrubstart?: (ms: number, e: PointerEvent) => void;
+		onscrubend?: (ms: number, e: PointerEvent) => void;
 	}
 
 	let {
 		durationMs = 30_000,
 		pxPerMs = 0.05,
 		height = 28,
+		ticks: ticksProp,
 		class: className = '',
-		onclick
+		onclick,
+		onscrub,
+		onscrubstart,
+		onscrubend
 	}: TimeRulerProps = $props();
 
-	const ticks = $derived(ticksForDuration(durationMs, pxPerMs));
+	const ticks = $derived(ticksProp ?? ticksForDuration(durationMs, pxPerMs));
 	const width = $derived(Math.max(1, durationMs * pxPerMs));
 
+	let scrubbing = $state(false);
+
+	function msFromClientX(el: HTMLElement, clientX: number): number {
+		const rect = el.getBoundingClientRect();
+		const x = clientX - rect.left;
+		return Math.max(0, Math.min(durationMs, x / pxPerMs));
+	}
+
 	function handleClick(e: MouseEvent) {
-		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-		const x = e.clientX - rect.left;
-		onclick?.(x / pxPerMs, e);
+		if (scrubbing) return;
+		const ms = msFromClientX(e.currentTarget as HTMLElement, e.clientX);
+		onclick?.(ms, e);
+	}
+
+	function onPointerDown(e: PointerEvent) {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		const el = e.currentTarget as HTMLElement;
+		el.setPointerCapture(e.pointerId);
+		scrubbing = true;
+		const ms = msFromClientX(el, e.clientX);
+		onscrubstart?.(ms, e);
+		onscrub?.(ms, e);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		const el = e.currentTarget as HTMLElement;
+		if (!el.hasPointerCapture(e.pointerId)) return;
+		const ms = msFromClientX(el, e.clientX);
+		onscrub?.(ms, e);
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		const el = e.currentTarget as HTMLElement;
+		if (!el.hasPointerCapture(e.pointerId)) return;
+		el.releasePointerCapture(e.pointerId);
+		const ms = msFromClientX(el, e.clientX);
+		onscrubend?.(ms, e);
+		scrubbing = false;
+	}
+
+	function tickHeight(level: TimeTick['level']): string {
+		if (level === 'major') return 'h-3.5';
+		if (level === 'mid') return 'h-2.5';
+		return 'h-1.5';
 	}
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	role="presentation"
 	class={[
-		'relative shrink-0 select-none border-b border-border bg-surface text-[10px] text-muted',
+		'relative shrink-0 cursor-ew-resize select-none border-b border-border bg-surface text-[10px] text-muted',
+		scrubbing && 'cursor-grabbing',
 		className
 	]}
 	style:height={`${height}px`}
 	style:width={`${width}px`}
 	onclick={handleClick}
+	onpointerdown={onPointerDown}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+	onpointercancel={onPointerUp}
 >
 	{#each ticks as tick (tick.ms)}
 		<div
-			class="absolute top-0 flex h-full flex-col justify-end"
+			class="pointer-events-none absolute top-0 flex h-full flex-col justify-end"
 			style:left={`${tick.ms * pxPerMs}px`}
 		>
-			<span
+			{#if tick.level === 'major'}
+				<span class="mb-0.5 -translate-x-1/2 whitespace-nowrap pl-1 text-secondary">
+					{formatTimecode(tick.ms)}
+				</span>
+			{/if}
+			<div
 				class={[
-					'mb-0.5 -translate-x-1/2 whitespace-nowrap pl-1',
-					tick.major ? 'text-secondary' : 'text-muted/70'
+					'w-px bg-border-strong',
+					tickHeight(tick.level),
+					tick.level === 'minor' && 'opacity-40',
+					tick.level === 'mid' && 'opacity-70'
 				]}
-			>
-				{formatTimecode(tick.ms)}
-			</span>
-			<div
-				class={['w-px bg-border-strong', tick.major ? 'h-3' : 'h-2 opacity-60']}
 			></div>
 		</div>
 	{/each}

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

@@ -1,9 +1,16 @@
+import { type TimeTick } from '../../../utils/mediaTime.js';
 interface TimeRulerProps {
     durationMs?: number;
     pxPerMs?: number;
     height?: number;
+    /** Precomputed ticks; defaults to ticksForDuration. */
+    ticks?: TimeTick[];
     class?: string;
     onclick?: (ms: number, e: MouseEvent) => void;
+    /** Scrub while dragging on the ruler */
+    onscrub?: (ms: number, e: PointerEvent) => void;
+    onscrubstart?: (ms: number, e: PointerEvent) => void;
+    onscrubend?: (ms: number, e: PointerEvent) => void;
 }
 declare const TimeRuler: import("svelte").Component<TimeRulerProps, {}, "">;
 type TimeRuler = ReturnType<typeof TimeRuler>;

package/dist/components/atoms/TimelineGrid/TimelineGrid.stories.js

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

package/dist/components/atoms/TimelineGrid/TimelineGrid.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { ticksForDuration, type TimeTick } from '../../../utils/mediaTime.js';
+
+	interface TimelineGridProps {
+		durationMs?: number;
+		pxPerMs?: number;
+		/** Precomputed ticks; defaults to ticksForDuration. */
+		ticks?: TimeTick[];
+		class?: string;
+	}
+
+	let {
+		durationMs = 30_000,
+		pxPerMs = 0.05,
+		ticks: ticksProp,
+		class: className = ''
+	}: TimelineGridProps = $props();
+
+	const ticks = $derived(ticksProp ?? ticksForDuration(durationMs, pxPerMs));
+	const width = $derived(Math.max(1, durationMs * pxPerMs));
+</script>
+
+<div
+	aria-hidden="true"
+	class={['pointer-events-none absolute inset-y-0 left-0 z-0', className]}
+	style:width={`${width}px`}
+>
+	{#each ticks as tick (tick.ms)}
+		<div
+			class={[
+				'absolute inset-y-0 w-px',
+				tick.level === 'major' && 'bg-border-strong/50',
+				tick.level === 'mid' && 'bg-border/40',
+				tick.level === 'minor' && 'bg-border/20'
+			]}
+			style:left={`${tick.ms * pxPerMs}px`}
+		></div>
+	{/each}
+</div>

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

@@ -0,0 +1,11 @@
+import { type TimeTick } from '../../../utils/mediaTime.js';
+interface TimelineGridProps {
+    durationMs?: number;
+    pxPerMs?: number;
+    /** Precomputed ticks; defaults to ticksForDuration. */
+    ticks?: TimeTick[];
+    class?: string;
+}
+declare const TimelineGrid: import("svelte").Component<TimelineGridProps, {}, "">;
+type TimelineGrid = ReturnType<typeof TimelineGrid>;
+export default TimelineGrid;

package/dist/components/atoms/TimelineGrid/TimelineGridStory.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import TimelineGrid from './TimelineGrid.svelte';
+</script>
+
+<div class="relative h-40 overflow-hidden rounded-lg border border-border bg-surface">
+	<TimelineGrid durationMs={30000} pxPerMs={0.1} class="absolute inset-0" />
+</div>

package/dist/components/atoms/TimelineGrid/TimelineGridStory.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 TimelineGridStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TimelineGridStory = InstanceType<typeof TimelineGridStory>;
+export default TimelineGridStory;

package/dist/components/molecules/ColorPicker/ColorPicker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+	type ColorPickerSize = 'sm' | 'md' | 'lg';
 
 	interface ColorPickerProps {
 		value?: string;
@@ -11,6 +12,7 @@
 		format?: ColorFormat;
 		/** Show preset swatches. */
 		showSwatches?: boolean;
+		size?: ColorPickerSize;
 		disabled?: boolean;
 		open?: boolean;
 		class?: string;
@@ -37,12 +39,37 @@
 		alpha = false,
 		format = 'hex',
 		showSwatches = true,
+		size = 'md',
 		disabled = false,
 		open = $bindable(false),
 		class: className = '',
 		onchange
 	}: ColorPickerProps = $props();
 
+	const triggerSizeClasses: Record<ColorPickerSize, string> = {
+		sm: 'h-8 gap-2 rounded-lg px-2',
+		md: 'h-10 gap-2.5 rounded-xl px-2.5',
+		lg: 'h-12 gap-3 rounded-xl px-3'
+	};
+
+	const swatchSizeClasses: Record<ColorPickerSize, string> = {
+		sm: 'h-5 w-5 rounded-md',
+		md: 'h-7 w-7 rounded-lg',
+		lg: 'h-8 w-8 rounded-lg'
+	};
+
+	const valueSizeClasses: Record<ColorPickerSize, string> = {
+		sm: 'text-sm',
+		md: 'text-sm',
+		lg: 'text-base'
+	};
+
+	const chevronSizeClasses: Record<ColorPickerSize, string> = {
+		sm: 'h-3.5 w-3.5',
+		md: 'h-4 w-4',
+		lg: 'h-4 w-4'
+	};
+
 	let rootEl = $state<HTMLDivElement | null>(null);
 	let svEl = $state<HTMLDivElement | null>(null);
 	let triggerEl = $state<HTMLButtonElement | null>(null);
@@ -236,17 +263,31 @@
 		aria-haspopup="dialog"
 		onclick={togglePanel}
 		class={[
-			'flex h-10 w-full items-center gap-2.5 rounded-xl border border-border bg-surface-elevated px-2.5 text-left transition-colors',
+			'flex w-full items-center border border-border bg-surface-elevated text-left transition-colors',
+			triggerSizeClasses[size],
 			'hover:bg-surface-overlay focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/20',
 			open && 'border-brand-500 ring-2 ring-brand-500/20',
 			disabled && 'cursor-not-allowed opacity-60'
 		]}
 	>
-		<span class="cp-checker relative h-7 w-7 shrink-0 overflow-hidden rounded-lg border border-border">
+		<span
+			class={[
+				'cp-checker relative shrink-0 overflow-hidden border border-border',
+				swatchSizeClasses[size]
+			]}
+		>
 			<span class="absolute inset-0" style:background={preview}></span>
 		</span>
-		<span class="min-w-0 flex-1 truncate font-mono text-sm text-primary">{value}</span>
-		<svg class="h-4 w-4 shrink-0 text-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+		<span class={['min-w-0 flex-1 truncate font-mono text-primary', valueSizeClasses[size]]}>
+			{value}
+		</span>
+		<svg
+			class={['shrink-0 text-muted', chevronSizeClasses[size]]}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+		>
 			<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
 		</svg>
 	</button>

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

@@ -1,4 +1,5 @@
 export type ColorFormat = 'hex' | 'rgb' | 'hsl';
+type ColorPickerSize = 'sm' | 'md' | 'lg';
 interface ColorPickerProps {
     value?: string;
     swatches?: string[];
@@ -9,6 +10,7 @@ interface ColorPickerProps {
     format?: ColorFormat;
     /** Show preset swatches. */
     showSwatches?: boolean;
+    size?: ColorPickerSize;
     disabled?: boolean;
     open?: boolean;
     class?: string;

package/dist/components/molecules/ContextMenu/ContextMenu.svelte

@@ -105,16 +105,33 @@
 			.filter((i) => i !== -1)
 	);
 
+	function clampMenuPosition(x: number, y: number) {
+		if (!menuEl) return;
+		const pad = 8;
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		const mw = menuEl.offsetWidth;
+		const mh = menuEl.offsetHeight;
+		if (mw <= 0 || mh <= 0) {
+			menuX = x;
+			menuY = y;
+			return;
+		}
+		let nextX = x;
+		let nextY = y;
+		// Flip if overflowing right / bottom
+		if (nextX + mw > vw - pad) nextX = x - mw;
+		if (nextY + mh > vh - pad) nextY = y - mh;
+		// Always keep fully inside the viewport
+		menuX = Math.min(Math.max(pad, nextX), Math.max(pad, vw - mw - pad));
+		menuY = Math.min(Math.max(pad, nextY), Math.max(pad, vh - mh - pad));
+	}
+
 	function placeMenu(x: number, y: number) {
 		menuX = x;
 		menuY = y;
 		requestAnimationFrame(() => {
-			if (!menuEl) return;
-			const vw = window.innerWidth;
-			const vh = window.innerHeight;
-			const { offsetWidth: mw, offsetHeight: mh } = menuEl;
-			menuX = x + mw > vw - 8 ? Math.max(8, x - mw) : x;
-			menuY = y + mh > vh - 8 ? Math.max(8, y - mh) : y;
+			clampMenuPosition(x, y);
 		});
 	}
 
@@ -132,11 +149,15 @@
 		open = true;
 		highlighted = -1;
 		query = '';
-		placeMenu(x, y);
+		menuX = x;
+		menuY = y;
 		// Defer past the contextmenu/mouseup that would light-dismiss a popover=auto.
+		// Measure after showPopover — closed popovers have display:none (0×0).
 		requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				if (open) showMenu();
+				if (!open) return;
+				showMenu();
+				requestAnimationFrame(() => clampMenuPosition(x, y));
 			});
 		});
 	}
@@ -180,9 +201,11 @@
 
 	/** Manual popover: close on outside pointer. Keep open on scroll —
 	 * the menu is position:fixed, and closing on scroll also kills scrolling
-	 * inside a long/searchable menu. */
+	 * inside a long/searchable menu.
+	 * Right-click (button 2) is ignored so retargeting another item keeps the menu open. */
 	function onDocPointerDown(event: PointerEvent) {
 		if (!open) return;
+		if (event.button === 2) return;
 		const t = event.target;
 		if (t instanceof Node && menuEl?.contains(t)) return;
 		close();
@@ -243,10 +266,14 @@
 		}
 		const x = anchor.x;
 		const y = anchor.y;
-		placeMenu(x, y);
+		highlighted = -1;
+		menuX = x;
+		menuY = y;
 		requestAnimationFrame(() => {
 			requestAnimationFrame(() => {
-				if (open) showMenu();
+				if (!open) return;
+				showMenu();
+				requestAnimationFrame(() => clampMenuPosition(x, y));
 			});
 		});
 	});

package/dist/components/molecules/MediaAssetBrowser/MediaAssetBrowser.svelte

@@ -5,6 +5,7 @@
 	import {
 		createMediaAsset,
 		kindFromFile,
+		probeMediaSrc,
 		type MediaAsset,
 		type MediaAssetKind
 	} from '../../../utils/mediaTracks.js';
@@ -15,6 +16,11 @@
 		accept?: string;
 		helperText?: string;
 		allowText?: boolean;
+		/**
+		 * Upload dropzone layout. Prefer `vertical` in narrow sidebars.
+		 * @see FileUploader `layout`
+		 */
+		uploadLayout?: 'horizontal' | 'vertical' | 'compact';
 		class?: string;
 		onassetschange?: (assets: MediaAsset[]) => void;
 		onselect?: (id: string) => void;
@@ -27,6 +33,7 @@
 		accept = 'image/*,video/*,audio/*',
 		helperText = 'Images, video or audio',
 		allowText = false,
+		uploadLayout = 'vertical',
 		class: className = '',
 		onassetschange,
 		onselect,
@@ -38,15 +45,22 @@
 		onassetschange?.(next);
 	}
 
-	function handleFiles(files: File[]) {
+	function probeMedia(src: string, kind: MediaAssetKind): Promise<Partial<MediaAsset>> {
+		return probeMediaSrc(src, kind);
+	}
+
+	async function handleFiles(files: File[]) {
 		const created: MediaAsset[] = [];
 		for (const file of files) {
 			const kind = kindFromFile(file);
 			if (kind === 'text') continue;
+			const src = URL.createObjectURL(file);
+			const meta = await probeMedia(src, kind);
 			const asset = createMediaAsset({
 				kind,
 				name: file.name,
-				src: URL.createObjectURL(file)
+				src,
+				...meta
 			});
 			created.push(asset);
 		}
@@ -65,6 +79,7 @@
 		label="Upload"
 		{accept}
 		{helperText}
+		layout={uploadLayout}
 		variant="multiple"
 		view="grid"
 		showViewToggle={false}

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

@@ -5,6 +5,11 @@ interface MediaAssetBrowserProps {
     accept?: string;
     helperText?: string;
     allowText?: boolean;
+    /**
+     * Upload dropzone layout. Prefer `vertical` in narrow sidebars.
+     * @see FileUploader `layout`
+     */
+    uploadLayout?: 'horizontal' | 'vertical' | 'compact';
     class?: string;
     onassetschange?: (assets: MediaAsset[]) => void;
     onselect?: (id: string) => void;