@r2digisolutions/components 0.1.7 → 0.3.0

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

@@ -0,0 +1,112 @@
+<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';
+	import GripVertical from '@lucide/svelte/icons/grip-vertical';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+
+	interface VideoTrackHeaderProps {
+		track: MediaTrack;
+		class?: string;
+		draggable?: boolean;
+		canRemove?: boolean;
+		dragging?: boolean;
+		onchange?: (track: MediaTrack) => void;
+		onremove?: (trackId: string) => void;
+		/** Pointer-based reorder (preferred over HTML5 drag) */
+		onreorderstart?: (trackId: string, e: PointerEvent) => void;
+	}
+
+	let {
+		track,
+		class: className = '',
+		draggable = false,
+		canRemove = false,
+		dragging = false,
+		onchange,
+		onremove,
+		onreorderstart
+	}: VideoTrackHeaderProps = $props();
+
+	function patch(partial: Partial<MediaTrack>) {
+		onchange?.({ ...track, ...partial });
+	}
+</script>
+
+<div class={['flex min-w-0 flex-1 items-center gap-1', className, dragging && 'pointer-events-none']}>
+	{#if draggable}
+		<button
+			type="button"
+			class="flex h-6 w-5 shrink-0 cursor-grab touch-none items-center justify-center rounded text-muted hover:bg-surface-overlay hover:text-secondary active:cursor-grabbing"
+			aria-label={`Reorder ${track.name}`}
+			title="Drag to reorder"
+			data-marquee-ignore
+			onpointerdown={(e) => {
+				if (e.button !== 0) return;
+				e.preventDefault();
+				e.stopPropagation();
+				onreorderstart?.(track.id, e);
+			}}
+		>
+			<GripVertical class="h-3.5 w-3.5" />
+		</button>
+	{/if}
+	<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-semibold text-primary" title={track.name}>
+		{track.name}
+	</span>
+	{#if !dragging}
+		<div class="flex shrink-0 items-center">
+			<IconButton
+				label={track.muted ? 'Unmute' : 'Mute'}
+				size="xs"
+				class="!h-5 !w-5"
+				onclick={() => patch({ muted: !track.muted })}
+			>
+				{#if track.muted}
+					<VolumeX class="h-3 w-3" />
+				{:else}
+					<Volume2 class="h-3 w-3" />
+				{/if}
+			</IconButton>
+			<IconButton
+				label={track.solo ? 'Unsolo' : 'Solo'}
+				size="xs"
+				class="!h-5 !w-5"
+				onclick={() => patch({ solo: !track.solo })}
+			>
+				<Headphones class={['h-3 w-3', track.solo && 'text-brand-500']} />
+			</IconButton>
+			<IconButton
+				label={track.locked ? 'Unlock' : 'Lock'}
+				size="xs"
+				class="!h-5 !w-5"
+				onclick={() => patch({ locked: !track.locked })}
+			>
+				{#if track.locked}
+					<Lock class="h-3 w-3" />
+				{:else}
+					<LockOpen class="h-3 w-3" />
+				{/if}
+			</IconButton>
+			{#if canRemove && onremove}
+				<IconButton
+					label="Delete track"
+					size="xs"
+					class="!h-5 !w-5"
+					onclick={() => onremove(track.id)}
+				>
+					<Trash2 class="h-3 w-3" />
+				</IconButton>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { MediaTrack } from '../../../utils/mediaTracks.js';
+interface VideoTrackHeaderProps {
+    track: MediaTrack;
+    class?: string;
+    draggable?: boolean;
+    canRemove?: boolean;
+    dragging?: boolean;
+    onchange?: (track: MediaTrack) => void;
+    onremove?: (trackId: string) => void;
+    /** Pointer-based reorder (preferred over HTML5 drag) */
+    onreorderstart?: (trackId: string, e: PointerEvent) => 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/VideoTransitionsPanel/VideoTransitionsPanel.stories.js

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

package/dist/components/molecules/VideoTransitionsPanel/VideoTransitionsPanel.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" module>
+	export interface VideoTransitionDef {
+		id: string;
+		label: string;
+		group: string;
+		type: string;
+		durationMs: number;
+		glyph?: string;
+	}
+
+	export const VIDEO_TRANSITION_MIME = 'application/x-r2-video-transition';
+</script>
+
+<script lang="ts">
+	interface VideoTransitionsPanelProps {
+		class?: string;
+		disabled?: boolean;
+		hint?: string;
+		onapply?: (def: VideoTransitionDef) => void;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		hint = 'Select a clip, or drag onto its end',
+		onapply
+	}: VideoTransitionsPanelProps = $props();
+
+	const transitions: VideoTransitionDef[] = [
+		/* Dissolve */
+		{ id: 'crossfade', label: 'Crossfade', group: 'Dissolve', type: 'crossfade', durationMs: 900, glyph: '╳' },
+		{ id: 'dip-black', label: 'Dip black', group: 'Dissolve', type: 'dip-black', durationMs: 1000, glyph: '■' },
+		{ id: 'dip-white', label: 'Dip white', group: 'Dissolve', type: 'dip-white', durationMs: 1000, glyph: '□' },
+		{ id: 'fade-soft', label: 'Soft fade', group: 'Dissolve', type: 'fade-soft', durationMs: 1200, glyph: '≈' },
+		{ id: 'blur-dissolve', label: 'Blur', group: 'Dissolve', type: 'blur', durationMs: 1000, glyph: '◈' },
+		{ id: 'flash', label: 'Flash', group: 'Dissolve', type: 'flash', durationMs: 500, glyph: '⚡' },
+		/* Wipe */
+		{ id: 'wipe-left', label: 'Wipe left', group: 'Wipe', type: 'wipe-left', durationMs: 900, glyph: '◀' },
+		{ id: 'wipe-right', label: 'Wipe right', group: 'Wipe', type: 'wipe-right', durationMs: 900, glyph: '▶' },
+		{ id: 'wipe-up', label: 'Wipe up', group: 'Wipe', type: 'wipe-up', durationMs: 900, glyph: '▲' },
+		{ id: 'wipe-down', label: 'Wipe down', group: 'Wipe', type: 'wipe-down', durationMs: 900, glyph: '▼' },
+		{ id: 'wipe-diagonal', label: 'Diagonal', group: 'Wipe', type: 'wipe-diagonal', durationMs: 900, glyph: '╱' },
+		{ id: 'iris', label: 'Iris', group: 'Wipe', type: 'iris', durationMs: 900, glyph: '◎' },
+		{ id: 'barn-doors', label: 'Barn doors', group: 'Wipe', type: 'barn-doors', durationMs: 900, glyph: ' ⟺ ' },
+		/* Move */
+		{ id: 'push-left', label: 'Push left', group: 'Move', type: 'push-left', durationMs: 900, glyph: '⇇' },
+		{ id: 'push-right', label: 'Push right', group: 'Move', type: 'push-right', durationMs: 900, glyph: '⇉' },
+		{ id: 'push-up', label: 'Push up', group: 'Move', type: 'push-up', durationMs: 900, glyph: '⇈' },
+		{ id: 'push-down', label: 'Push down', group: 'Move', type: 'push-down', durationMs: 900, glyph: '⇊' },
+		{ id: 'slide-left', label: 'Slide left', group: 'Move', type: 'slide-left', durationMs: 900, glyph: '◁' },
+		{ id: 'slide-right', label: 'Slide right', group: 'Move', type: 'slide-right', durationMs: 900, glyph: '▷' },
+		/* Style */
+		{ id: 'zoom-through', label: 'Zoom in', group: 'Style', type: 'zoom-in', durationMs: 900, glyph: '⊕' },
+		{ id: 'zoom-out', label: 'Zoom out', group: 'Style', type: 'zoom-out', durationMs: 900, glyph: '⊖' },
+		{ id: 'spin', label: 'Spin', group: 'Style', type: 'spin', durationMs: 900, glyph: '↻' },
+		{ id: 'flip-x', label: 'Flip H', group: 'Style', type: 'flip-x', durationMs: 900, glyph: '↔' },
+		{ id: 'flip-y', label: 'Flip V', group: 'Style', type: 'flip-y', durationMs: 900, glyph: '↕' },
+		{ id: 'squeeze-h', label: 'Squeeze H', group: 'Style', type: 'squeeze-h', durationMs: 800, glyph: '↔︎' },
+		{ id: 'squeeze-v', label: 'Squeeze V', group: 'Style', type: 'squeeze-v', durationMs: 800, glyph: '↕︎' }
+	];
+
+	const groups = $derived(
+		[...new Set(transitions.map((t) => t.group))].map((group) => ({
+			group,
+			items: transitions.filter((t) => t.group === group)
+		}))
+	);
+
+	function onDragStart(e: DragEvent, item: VideoTransitionDef) {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		e.dataTransfer?.setData(VIDEO_TRANSITION_MIME, JSON.stringify(item));
+		e.dataTransfer?.setData('text/plain', item.label);
+		if (e.dataTransfer) e.dataTransfer.effectAllowed = 'copy';
+	}
+</script>
+
+<div class={['flex flex-col gap-4 p-2', className]}>
+	{#if disabled}
+		<p class="px-1 py-4 text-center text-xs text-muted">{hint}</p>
+	{:else}
+		<p class="px-1 text-[10px] leading-relaxed text-muted">
+			CapCut-style: transition sits at the <strong class="font-medium text-secondary">end</strong> of
+			a clip (into the next). Drag onto a clip or click with one selected.
+		</p>
+	{/if}
+	{#each groups as { group, items } (group)}
+		<section class="flex flex-col gap-2">
+			<h3 class="px-1 text-[10px] font-semibold uppercase tracking-wide text-muted">{group}</h3>
+			<div class="grid grid-cols-3 gap-1.5">
+				{#each items as item (item.id)}
+					<button
+						type="button"
+						disabled={disabled}
+						draggable={!disabled}
+						ondragstart={(e) => onDragStart(e, item)}
+						class="flex cursor-grab flex-col items-center gap-1.5 rounded-lg border border-border bg-surface-elevated px-1.5 py-2 text-center transition-colors enabled:hover:border-brand-500/50 enabled:hover:bg-surface-overlay active:cursor-grabbing disabled:cursor-not-allowed disabled:opacity-50"
+						onclick={() => onapply?.(item)}
+					>
+						<span
+							class="flex h-9 w-full items-center justify-center rounded-md bg-surface text-sm font-semibold text-secondary"
+						>
+							{item.glyph ?? item.label.slice(0, 2)}
+						</span>
+						<span class="text-[10px] font-medium text-secondary">{item.label}</span>
+					</button>
+				{/each}
+			</div>
+		</section>
+	{/each}
+</div>

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

@@ -0,0 +1,18 @@
+export interface VideoTransitionDef {
+    id: string;
+    label: string;
+    group: string;
+    type: string;
+    durationMs: number;
+    glyph?: string;
+}
+export declare const VIDEO_TRANSITION_MIME = "application/x-r2-video-transition";
+interface VideoTransitionsPanelProps {
+    class?: string;
+    disabled?: boolean;
+    hint?: string;
+    onapply?: (def: VideoTransitionDef) => void;
+}
+declare const VideoTransitionsPanel: import("svelte").Component<VideoTransitionsPanelProps, {}, "">;
+type VideoTransitionsPanel = ReturnType<typeof VideoTransitionsPanel>;
+export default VideoTransitionsPanel;

package/dist/components/molecules/VideoTransitionsPanel/VideoTransitionsPanelStory.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import VideoTransitionsPanel from './VideoTransitionsPanel.svelte';
+</script>
+
+<div class="h-96 w-72 rounded-lg border border-border bg-surface">
+	<VideoTransitionsPanel onapply={(d) => console.log('trans', d)} />
+</div>

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

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;