@r2digisolutions/components 0.1.6 → 0.2.0

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

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

package/dist/components/molecules/VersionHistoryPanel/VersionHistoryPanel.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import VersionTag from '../../atoms/VersionTag/VersionTag.svelte';
+	import DiffViewer from '../DiffViewer/DiffViewer.svelte';
+	import TimeAgo from '../TimeAgo/TimeAgo.svelte';
+
+	export interface VersionRevision {
+		id: string;
+		label: string;
+		author?: string;
+		createdAt?: string | Date | number;
+		summary?: string;
+		content?: string;
+		previousContent?: string;
+	}
+
+	interface VersionHistoryPanelProps {
+		revisions?: VersionRevision[];
+		selectedId?: string;
+		currentContent?: string;
+		class?: string;
+		onselect?: (revision: VersionRevision) => void;
+		onrestore?: (revision: VersionRevision) => void;
+	}
+
+	let {
+		revisions = [],
+		selectedId = $bindable(''),
+		currentContent = '',
+		class: className = '',
+		onselect,
+		onrestore
+	}: VersionHistoryPanelProps = $props();
+
+	const selected = $derived(
+		revisions.find((r) => r.id === selectedId) ?? revisions[0] ?? null
+	);
+
+	$effect(() => {
+		if (!selectedId && revisions[0]) selectedId = revisions[0].id;
+	});
+
+	function pick(rev: VersionRevision) {
+		selectedId = rev.id;
+		onselect?.(rev);
+	}
+</script>
+
+<div
+	class={[
+		'grid overflow-hidden rounded-xl border border-border bg-surface-elevated md:grid-cols-[240px_1fr]',
+		className
+	]}
+	data-version-history
+>
+	<aside class="max-h-[420px] overflow-auto border-b border-border md:border-b-0 md:border-r">
+		<ul class="p-2">
+			{#each revisions as rev (rev.id)}
+				<li>
+					<button
+						type="button"
+						class={[
+							'flex w-full flex-col gap-0.5 rounded-lg px-2.5 py-2 text-left transition-colors',
+							selected?.id === rev.id
+								? 'bg-brand-50 dark:bg-brand-950/40'
+								: 'hover:bg-surface-overlay'
+						]}
+						onclick={() => pick(rev)}
+					>
+						<div class="flex items-center justify-between gap-2">
+							<span class="truncate text-sm font-medium text-primary">{rev.label}</span>
+							<VersionTag version={rev.label} prefix="" />
+						</div>
+						{#if rev.author || rev.createdAt}
+							<p class="text-[11px] text-muted">
+								{#if rev.author}{rev.author} · {/if}
+								{#if rev.createdAt}
+									<TimeAgo date={rev.createdAt} />
+								{/if}
+							</p>
+						{/if}
+						{#if rev.summary}
+							<p class="truncate text-[11px] text-secondary">{rev.summary}</p>
+						{/if}
+					</button>
+				</li>
+			{/each}
+			{#if !revisions.length}
+				<li class="px-2 py-6 text-center text-xs text-muted">No revisions</li>
+			{/if}
+		</ul>
+	</aside>
+
+	<section class="flex min-h-0 flex-col gap-2 p-3">
+		{#if selected}
+			<div class="flex items-center justify-between gap-2">
+				<div>
+					<p class="text-sm font-semibold text-primary">{selected.label}</p>
+					{#if selected.summary}
+						<p class="text-xs text-muted">{selected.summary}</p>
+					{/if}
+				</div>
+				<Button size="sm" variant="secondary" onclick={() => onrestore?.(selected)}>
+					Restore
+				</Button>
+			</div>
+			<DiffViewer
+				before={selected.previousContent ?? selected.content ?? ''}
+				after={currentContent || selected.content || ''}
+				mode="split"
+				class="min-h-[280px] flex-1"
+			/>
+		{:else}
+			<p class="py-12 text-center text-sm text-muted">Select a revision</p>
+		{/if}
+	</section>
+</div>

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

@@ -0,0 +1,20 @@
+export interface VersionRevision {
+    id: string;
+    label: string;
+    author?: string;
+    createdAt?: string | Date | number;
+    summary?: string;
+    content?: string;
+    previousContent?: string;
+}
+interface VersionHistoryPanelProps {
+    revisions?: VersionRevision[];
+    selectedId?: string;
+    currentContent?: string;
+    class?: string;
+    onselect?: (revision: VersionRevision) => void;
+    onrestore?: (revision: VersionRevision) => void;
+}
+declare const VersionHistoryPanel: import("svelte").Component<VersionHistoryPanelProps, {}, "selectedId">;
+type VersionHistoryPanel = ReturnType<typeof VersionHistoryPanel>;
+export default VersionHistoryPanel;

package/dist/components/molecules/VersionHistoryPanel/VersionHistoryPanelStory.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import VersionHistoryPanel from './VersionHistoryPanel.svelte';
+
+	const revisions = [
+		{
+			id: 'v3',
+			label: '3.0.0',
+			author: 'Rafa',
+			createdAt: Date.now() - 3600_000,
+			summary: 'Tweaked intro copy',
+			previousContent: 'Hello world\nLine two',
+			content: 'Hello world\nLine two\nLine three'
+		},
+		{
+			id: 'v2',
+			label: '2.1.0',
+			author: 'Alex',
+			createdAt: Date.now() - 86400_000,
+			summary: 'Added section',
+			previousContent: 'Hello world',
+			content: 'Hello world\nLine two'
+		},
+		{
+			id: 'v1',
+			label: '1.0.0',
+			author: 'Alex',
+			createdAt: Date.now() - 7 * 86400_000,
+			summary: 'Initial',
+			content: 'Hello world'
+		}
+	];
+</script>
+
+<div class="p-4">
+	<VersionHistoryPanel {revisions} currentContent="Hello world\nLine two\nLine three\nFinal" />
+</div>

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

package/dist/components/molecules/VideoPlayer/VideoPlayer.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        example?: "gallery" | "flower" | "bunny" | "sintel" | "clip" | "no-preview";
+        example?: "clip" | "gallery" | "flower" | "bunny" | "sintel" | "no-preview";
     }, {}, "">;
     tags: string[];
     argTypes: {

package/dist/components/molecules/VideoTrackHeader/VideoTrackHeader.stories.d.ts

@@ -0,0 +1,9 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

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

package/dist/components/molecules/VideoTrackHeader/VideoTrackHeader.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import type { MediaTrack } from '../../../utils/mediaTracks.js';
+	import Volume2 from '@lucide/svelte/icons/volume-2';
+	import VolumeX from '@lucide/svelte/icons/volume-x';
+	import Lock from '@lucide/svelte/icons/lock';
+	import LockOpen from '@lucide/svelte/icons/lock-open';
+	import Headphones from '@lucide/svelte/icons/headphones';
+
+	interface VideoTrackHeaderProps {
+		track: MediaTrack;
+		class?: string;
+		onchange?: (track: MediaTrack) => void;
+	}
+
+	let { track, class: className = '', onchange }: VideoTrackHeaderProps = $props();
+
+	function patch(partial: Partial<MediaTrack>) {
+		onchange?.({ ...track, ...partial });
+	}
+</script>
+
+<div class={['flex min-w-0 flex-1 items-center gap-1', className]}>
+	<span
+		class="h-2 w-2 shrink-0 rounded-full"
+		style:background={track.color ?? (track.kind === 'audio' ? '#10b981' : '#3b82f6')}
+		aria-hidden="true"
+	></span>
+	<span class="min-w-0 flex-1 truncate text-xs font-medium text-secondary">{track.name}</span>
+	<IconButton
+		label={track.muted ? 'Unmute' : 'Mute'}
+		size="xs"
+		onclick={() => patch({ muted: !track.muted })}
+	>
+		{#if track.muted}
+			<VolumeX class="h-3.5 w-3.5" />
+		{:else}
+			<Volume2 class="h-3.5 w-3.5" />
+		{/if}
+	</IconButton>
+	<IconButton
+		label={track.solo ? 'Unsolo' : 'Solo'}
+		size="xs"
+		onclick={() => patch({ solo: !track.solo })}
+	>
+		<Headphones class={['h-3.5 w-3.5', track.solo && 'text-brand-500']} />
+	</IconButton>
+	<IconButton
+		label={track.locked ? 'Unlock' : 'Lock'}
+		size="xs"
+		onclick={() => patch({ locked: !track.locked })}
+	>
+		{#if track.locked}
+			<Lock class="h-3.5 w-3.5" />
+		{:else}
+			<LockOpen class="h-3.5 w-3.5" />
+		{/if}
+	</IconButton>
+</div>

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

@@ -0,0 +1,9 @@
+import type { MediaTrack } from '../../../utils/mediaTracks.js';
+interface VideoTrackHeaderProps {
+    track: MediaTrack;
+    class?: string;
+    onchange?: (track: MediaTrack) => void;
+}
+declare const VideoTrackHeader: import("svelte").Component<VideoTrackHeaderProps, {}, "">;
+type VideoTrackHeader = ReturnType<typeof VideoTrackHeader>;
+export default VideoTrackHeader;

package/dist/components/molecules/VideoTrackHeader/VideoTrackHeaderStory.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import VideoTrackHeader from './VideoTrackHeader.svelte';
+	import { createMediaTrack } from '../../../utils/mediaTracks.js';
+
+	let track = $state(createMediaTrack({ name: 'V1', kind: 'video', color: '#3b82f6' }));
+</script>
+
+<div class="w-48 rounded-lg border border-border bg-surface-elevated p-2">
+	<VideoTrackHeader {track} onchange={(t) => (track = t)} />
+</div>

package/dist/components/molecules/VideoTrackHeader/VideoTrackHeaderStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VideoTrackHeaderStory: import("svelte").Component<Record<string, never>, {}, "">;
+type VideoTrackHeaderStory = ReturnType<typeof VideoTrackHeaderStory>;
+export default VideoTrackHeaderStory;

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

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

package/dist/components/molecules/WaveformRegion/WaveformRegion.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import WaveBars from '../../atoms/WaveBars/WaveBars.svelte';
+	import type { MediaClip } from '../../../utils/mediaTracks.js';
+	import { msToPx } from '../../../utils/mediaTime.js';
+
+	interface WaveformRegionProps {
+		clip: MediaClip;
+		pxPerMs?: number;
+		selected?: boolean;
+		progress?: number;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		onmove?: (startMs: number) => void;
+	}
+
+	let {
+		clip,
+		pxPerMs = 0.05,
+		selected = false,
+		progress,
+		class: className = '',
+		onclick,
+		onmove
+	}: WaveformRegionProps = $props();
+
+	const left = $derived(msToPx(clip.startMs, pxPerMs));
+	const width = $derived(Math.max(24, msToPx(clip.endMs - clip.startMs, pxPerMs)));
+	const bg = $derived(clip.color ?? '#3b82f6');
+
+	let dragging = $state(false);
+	let originX = $state(0);
+	let originStart = $state(0);
+
+	function onPointerDown(e: PointerEvent) {
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		dragging = true;
+		originX = e.clientX;
+		originStart = clip.startMs;
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!dragging) return;
+		const deltaMs = (e.clientX - originX) / pxPerMs;
+		onmove?.(Math.max(0, originStart + deltaMs));
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		dragging = false;
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	role="button"
+	tabindex="0"
+	aria-label={clip.name}
+	aria-pressed={selected}
+	class={[
+		'absolute top-1 bottom-1 overflow-hidden rounded-md border px-1',
+		selected ? 'ring-2 ring-white/70' : 'border-black/20',
+		dragging ? 'cursor-grabbing' : 'cursor-grab',
+		className
+	]}
+	style:left={`${left}px`}
+	style:width={`${width}px`}
+	style:background={`${bg}cc`}
+	onclick={(e) => {
+		e.stopPropagation();
+		onclick?.(e);
+	}}
+	onpointerdown={onPointerDown}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+>
+	<span class="pointer-events-none absolute left-1 top-0.5 z-10 truncate text-[10px] font-medium text-white">
+		{clip.name}
+	</span>
+	<div class="pointer-events-none mt-3 h-[calc(100%-0.75rem)]">
+		<WaveBars height={28} progress={progress} tone="neutral" class="opacity-90" />
+	</div>
+</div>

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

@@ -0,0 +1,13 @@
+import type { MediaClip } from '../../../utils/mediaTracks.js';
+interface WaveformRegionProps {
+    clip: MediaClip;
+    pxPerMs?: number;
+    selected?: boolean;
+    progress?: number;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    onmove?: (startMs: number) => void;
+}
+declare const WaveformRegion: import("svelte").Component<WaveformRegionProps, {}, "">;
+type WaveformRegion = ReturnType<typeof WaveformRegion>;
+export default WaveformRegion;

package/dist/components/molecules/WaveformRegion/WaveformRegionStory.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import WaveformRegion from './WaveformRegion.svelte';
+	import { createMediaClip } from '../../../utils/mediaTracks.js';
+
+	const clip = createMediaClip({
+		trackId: 't1',
+		name: 'Drums',
+		kind: 'audio',
+		startMs: 500,
+		endMs: 9000,
+		color: '#3b82f6'
+	});
+</script>
+
+<div class="relative h-16 w-full rounded-lg border border-border bg-surface">
+	<WaveformRegion {clip} pxPerMs={0.06} selected progress={0.35} />
+</div>

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

package/dist/components/molecules/WidgetCanvas/WidgetCanvas.svelte

@@ -19,8 +19,10 @@
 		width?: number;
 		/** Board height in px (modo scroll + fixed; en auto se redondea a celdas) */
 		height?: number;
-		/** Altura visible del viewport */
+		/** Altura visible del viewport (ignored when `fill` is true) */
 		viewportHeight?: number;
+		/** Fill parent height instead of fixed viewportHeight */
+		fill?: boolean;
 		/** scroll = tablero grande · fit/fullscreen = sin scroll */
 		mode?: 'scroll' | 'fit' | 'fullscreen';
 		showGrid?: boolean;
@@ -38,6 +40,7 @@
 		width = 1600,
 		height = 1000,
 		viewportHeight = 520,
+		fill = false,
 		mode = $bindable<'scroll' | 'fit' | 'fullscreen'>('scroll'),
 		showGrid = $bindable(true),
 		snap = $bindable(true),
@@ -135,7 +138,9 @@
 	setContext(WIDGET_CANVAS_CONTEXT, api);
 
 	const overflowClass = $derived(mode === 'scroll' ? 'overflow-auto' : 'overflow-hidden');
-	const effectiveViewportHeight = $derived(mode === 'fullscreen' ? '100vh' : `${viewportHeight}px`);
+	const effectiveViewportHeight = $derived(
+		fill ? '100%' : mode === 'fullscreen' ? '100vh' : `${viewportHeight}px`
+	);
 
 	const statusLabel = $derived.by(() => {
 		const b = getBounds();
@@ -195,7 +200,7 @@
 	});
 </script>
 
-<div class={['flex w-full flex-col gap-2', className]}>
+<div class={['flex w-full flex-col gap-2', fill && 'h-full min-h-0', className]}>
 	{#if controls}
 		<div
 			class="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-surface-elevated px-3 py-2"
@@ -263,7 +268,11 @@
 	{/if}
 
 	<div
-		class={['w-full rounded-2xl border border-border bg-surface', overflowClass].join(' ')}
+		class={[
+			'w-full border border-border bg-surface',
+			fill ? 'min-h-0 flex-1 rounded-none' : 'rounded-2xl',
+			overflowClass
+		].join(' ')}
 		style={`height:${effectiveViewportHeight};`}
 		bind:this={viewportEl}
 	>

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

@@ -4,8 +4,10 @@ interface WidgetCanvasProps {
     width?: number;
     /** Board height in px (modo scroll + fixed; en auto se redondea a celdas) */
     height?: number;
-    /** Altura visible del viewport */
+    /** Altura visible del viewport (ignored when `fill` is true) */
     viewportHeight?: number;
+    /** Fill parent height instead of fixed viewportHeight */
+    fill?: boolean;
     /** scroll = tablero grande · fit/fullscreen = sin scroll */
     mode?: 'scroll' | 'fit' | 'fullscreen';
     showGrid?: boolean;

package/dist/components/molecules/WidgetCanvas/widgetCanvasContext.d.ts

@@ -15,6 +15,8 @@ export interface WidgetCanvasContext {
     readonly cellSize: number;
     readonly autoCells: number;
     readonly cellSizeMode: 'fixed' | 'auto';
+    /** Visual scale of the board (screen px / board px). Default 1. */
+    readonly scale?: number;
     getBounds: () => WidgetCanvasBounds;
     snapValue: (value: number) => number;
     snapRect: (rect: WidgetRect, minW: number, minH: number) => WidgetRect;