@r2digisolutions/components 0.1.7 → 0.2.0

package/dist/components/molecules/SplitPane/SplitPane.svelte

@@ -5,13 +5,21 @@
 
 	interface SplitPaneProps {
 		orientation?: SplitOrientation;
-		/** Size of the sized pane as percentage (bindable) */
+		/** Size of the sized pane (bindable). Unit controlled by `unit`. */
 		size?: number;
 		defaultSize?: number;
 		minSize?: number;
 		maxSize?: number;
-		/** Which pane the size percentage applies to */
+		/** Which pane the size applies to */
 		sizePane?: 'start' | 'end';
+		/** `percent` (default) or absolute `px` relative to the container. */
+		unit?: 'percent' | 'px';
+		/**
+		 * Collapse a pane to its content intrinsic size (e.g. Panel header).
+		 * The sibling fills the remaining space; the handle is hidden.
+		 */
+		startCollapsed?: boolean;
+		endCollapsed?: boolean;
 		/**
 		 * Idle: thin accent line. Hover / focus / drag: full grip.
 		 * Pass-through to SplitHandle.
@@ -29,6 +37,9 @@
 		minSize = 15,
 		maxSize = 85,
 		sizePane = 'start',
+		unit = 'percent',
+		startCollapsed = false,
+		endCollapsed = false,
 		revealOnHover = false,
 		class: className = '',
 		start,
@@ -44,6 +55,15 @@
 	const isHorizontal = $derived(orientation === 'horizontal');
 	const currentSize = $derived(size ?? internalSize);
 	const sizeEnd = $derived(sizePane === 'end');
+	const isPx = $derived(unit === 'px');
+	const eitherCollapsed = $derived(startCollapsed || endCollapsed);
+	const bothCollapsed = $derived(startCollapsed && endCollapsed);
+
+	function containerSpan(): number {
+		if (!containerEl) return isPx ? 1000 : 100;
+		const rect = containerEl.getBoundingClientRect();
+		return isHorizontal ? rect.width : rect.height;
+	}
 
 	function setSize(next: number) {
 		const clamped = Math.min(maxSize, Math.max(minSize, next));
@@ -55,18 +75,21 @@
 	}
 
 	function applyPointer(e: PointerEvent) {
-		if (!containerEl) return;
+		if (!containerEl || eitherCollapsed) return;
 		const rect = containerEl.getBoundingClientRect();
-		let pct: number;
-		if (isHorizontal) {
-			pct = ((e.clientX - rect.left) / rect.width) * 100;
-		} else {
-			pct = ((e.clientY - rect.top) / rect.height) * 100;
+		const span = isHorizontal ? rect.width : rect.height;
+		const offset = isHorizontal ? e.clientX - rect.left : e.clientY - rect.top;
+		if (isPx) {
+			const fromStart = offset;
+			setSize(sizeEnd ? span - fromStart : fromStart);
+			return;
 		}
+		const pct = (offset / span) * 100;
 		setSize(sizeEnd ? 100 - pct : pct);
 	}
 
 	function startDrag(e: PointerEvent) {
+		if (eitherCollapsed) return;
 		if (e.button !== 0 && e.pointerType === 'mouse') return;
 		e.preventDefault();
 		isDragging = true;
@@ -91,27 +114,61 @@
 	}
 
 	function onAdjust(delta: number) {
-		// Handle value is always the separator position from the start edge
+		if (eitherCollapsed) return;
+		if (isPx) {
+			const span = containerSpan();
+			const separator = sizeEnd ? span - currentSize : currentSize;
+			const nextSep = separator + delta * 4;
+			setSize(sizeEnd ? span - nextSep : nextSep);
+			return;
+		}
 		const separator = sizeEnd ? 100 - currentSize : currentSize;
 		const nextSep = separator + delta;
 		setSize(sizeEnd ? 100 - nextSep : nextSep);
 	}
 
-	const separatorValue = $derived(sizeEnd ? 100 - currentSize : currentSize);
-	const separatorMin = $derived(sizeEnd ? 100 - maxSize : minSize);
-	const separatorMax = $derived(sizeEnd ? 100 - minSize : maxSize);
-
-	const startStyle = $derived(
-		sizeEnd
-			? 'flex:1;min-width:0;min-height:0;'
-			: `${isHorizontal ? 'width' : 'height'}:${currentSize}%;flex:none;`
-	);
-
-	const endStyle = $derived(
-		sizeEnd
-			? `${isHorizontal ? 'width' : 'height'}:${currentSize}%;flex:none;`
-			: 'flex:1;min-width:0;min-height:0;'
-	);
+	const separatorValue = $derived.by(() => {
+		if (!isPx) return sizeEnd ? 100 - currentSize : currentSize;
+		const span = containerSpan() || 1;
+		const fromStart = sizeEnd ? span - currentSize : currentSize;
+		return (fromStart / span) * 100;
+	});
+	const separatorMin = $derived.by(() => {
+		if (!isPx) return sizeEnd ? 100 - maxSize : minSize;
+		const span = containerSpan() || 1;
+		const fromStartMin = sizeEnd ? span - maxSize : minSize;
+		return (fromStartMin / span) * 100;
+	});
+	const separatorMax = $derived.by(() => {
+		if (!isPx) return sizeEnd ? 100 - minSize : maxSize;
+		const span = containerSpan() || 1;
+		const fromStartMax = sizeEnd ? span - minSize : maxSize;
+		return (fromStartMax / span) * 100;
+	});
+
+	/** Collapsed panes shrink to content (Panel header); sibling fills. */
+	const collapsedStyle = 'flex:none;align-self:stretch;';
+	const fillStyle = 'flex:1;min-width:0;min-height:0;';
+
+	function sizedStyle(): string {
+		return isPx
+			? `${isHorizontal ? 'width' : 'height'}:${currentSize}px;flex:none;`
+			: `${isHorizontal ? 'width' : 'height'}:${currentSize}%;flex:none;`;
+	}
+
+	const startStyle = $derived.by(() => {
+		if (bothCollapsed) return collapsedStyle;
+		if (startCollapsed) return collapsedStyle;
+		if (endCollapsed) return fillStyle;
+		return sizeEnd ? fillStyle : sizedStyle();
+	});
+
+	const endStyle = $derived.by(() => {
+		if (bothCollapsed) return collapsedStyle;
+		if (endCollapsed) return collapsedStyle;
+		if (startCollapsed) return fillStyle;
+		return sizeEnd ? sizedStyle() : fillStyle;
+	});
 </script>
 
 <div
@@ -129,19 +186,21 @@
 		{/if}
 	</div>
 
-	<SplitHandle
-		{orientation}
-		value={separatorValue}
-		min={separatorMin}
-		max={separatorMax}
-		dragging={isDragging}
-		{revealOnHover}
-		onpointerdown={startDrag}
-		onpointermove={onPointerMove}
-		onpointerup={stopDrag}
-		onpointercancel={stopDrag}
-		onadjust={onAdjust}
-	/>
+	{#if !eitherCollapsed}
+		<SplitHandle
+			{orientation}
+			value={separatorValue}
+			min={separatorMin}
+			max={separatorMax}
+			dragging={isDragging}
+			{revealOnHover}
+			onpointerdown={startDrag}
+			onpointermove={onPointerMove}
+			onpointerup={stopDrag}
+			onpointercancel={stopDrag}
+			onadjust={onAdjust}
+		/>
+	{/if}
 
 	<div class="min-h-0 min-w-0 overflow-hidden" style={endStyle}>
 		{#if end}

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

@@ -2,13 +2,21 @@ import type { Snippet } from 'svelte';
 import type { SplitOrientation } from '../../atoms/SplitHandle/SplitHandle.svelte';
 interface SplitPaneProps {
     orientation?: SplitOrientation;
-    /** Size of the sized pane as percentage (bindable) */
+    /** Size of the sized pane (bindable). Unit controlled by `unit`. */
     size?: number;
     defaultSize?: number;
     minSize?: number;
     maxSize?: number;
-    /** Which pane the size percentage applies to */
+    /** Which pane the size applies to */
     sizePane?: 'start' | 'end';
+    /** `percent` (default) or absolute `px` relative to the container. */
+    unit?: 'percent' | 'px';
+    /**
+     * Collapse a pane to its content intrinsic size (e.g. Panel header).
+     * The sibling fills the remaining space; the handle is hidden.
+     */
+    startCollapsed?: boolean;
+    endCollapsed?: boolean;
     /**
      * Idle: thin accent line. Hover / focus / drag: full grip.
      * Pass-through to SplitHandle.

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

@@ -23,6 +23,6 @@ interface TableToolbarProps {
     oncolumnschange?: (columns: TableColumnOption[]) => void;
     onexport?: (format: 'csv' | 'json') => void;
 }
-declare const TableToolbar: import("svelte").Component<TableToolbarProps, {}, "search" | "density" | "columns">;
+declare const TableToolbar: import("svelte").Component<TableToolbarProps, {}, "search" | "columns" | "density">;
 type TableToolbar = ReturnType<typeof TableToolbar>;
 export default TableToolbar;

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

@@ -0,0 +1,20 @@
+import TerminalStory from './TerminalStory.svelte';
+const meta = {
+    title: 'Molecules/Terminal',
+    component: TerminalStory,
+    tags: ['autodocs'],
+    argTypes: {
+        tone: {
+            control: 'select',
+            options: ['adaptive', 'contrast']
+        }
+    },
+    args: {
+        tone: 'adaptive'
+    }
+};
+export default meta;
+export const Adaptive = {};
+export const Contrast = {
+    args: { tone: 'contrast' }
+};

package/dist/components/molecules/Terminal/Terminal.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+
+	export type TerminalLineKind = 'input' | 'stdout' | 'stderr' | 'system';
+
+	export interface TerminalLine {
+		id: string;
+		kind: TerminalLineKind;
+		text: string;
+	}
+
+	interface TerminalProps {
+		lines?: TerminalLine[];
+		prompt?: string;
+		disabled?: boolean;
+		/** `adaptive` follows light/dark; `contrast` is always a dark console. */
+		tone?: 'adaptive' | 'contrast';
+		class?: string;
+		oncommand?: (command: string) => void;
+		onclear?: () => void;
+	}
+
+	let {
+		lines = $bindable<TerminalLine[]>([]),
+		prompt = '$',
+		disabled = false,
+		tone = 'adaptive',
+		class: className = '',
+		oncommand,
+		onclear
+	}: TerminalProps = $props();
+
+	let draft = $state('');
+	let scroller = $state<HTMLDivElement | null>(null);
+	let hovered = $state(false);
+
+	function uid() {
+		return `t-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+	}
+
+	function scrollToBottom() {
+		if (!scroller || hovered) return;
+		scroller.scrollTop = scroller.scrollHeight;
+	}
+
+	$effect(() => {
+		lines;
+		queueMicrotask(scrollToBottom);
+	});
+
+	function submit() {
+		const cmd = draft.trim();
+		if (!cmd || disabled) return;
+		lines = [...lines, { id: uid(), kind: 'input', text: cmd }];
+		draft = '';
+		oncommand?.(cmd);
+	}
+
+	function clear() {
+		lines = [];
+		onclear?.();
+	}
+</script>
+
+<div
+	class={[
+		'terminal flex flex-col overflow-hidden rounded-xl border shadow-sm',
+		tone === 'contrast' ? 'terminal--contrast' : 'terminal--adaptive',
+		className
+	]}
+	data-terminal
+>
+	<div class="terminal-header flex items-center justify-between border-b px-3 py-1.5">
+		<div class="flex items-center gap-2">
+			<div class="flex items-center gap-1.5" aria-hidden="true">
+				<span class="terminal-dot h-2.5 w-2.5 rounded-full"></span>
+				<span class="terminal-dot h-2.5 w-2.5 rounded-full opacity-80"></span>
+				<span class="terminal-dot h-2.5 w-2.5 rounded-full opacity-60"></span>
+			</div>
+			<span class="terminal-title text-[11px] font-semibold uppercase tracking-wide">Terminal</span>
+		</div>
+		<Button size="sm" variant="ghost" class="terminal-clear" onclick={clear}>Clear</Button>
+	</div>
+
+	<div
+		bind:this={scroller}
+		class="max-h-72 min-h-[180px] flex-1 overflow-auto px-3 py-2 font-mono text-xs leading-relaxed"
+		onmouseenter={() => (hovered = true)}
+		onmouseleave={() => {
+			hovered = false;
+			queueMicrotask(scrollToBottom);
+		}}
+	>
+		{#each lines as line (line.id)}
+			<div class={['terminal-line whitespace-pre-wrap break-all', `terminal-line--${line.kind}`]}>
+				{#if line.kind === 'input'}
+					<span class="terminal-prompt">{prompt}</span>
+					{' '}{line.text}
+				{:else}
+					{line.text}
+				{/if}
+			</div>
+		{/each}
+	</div>
+
+	<form
+		class="terminal-footer flex items-center gap-2 border-t px-3 py-2 font-mono text-xs"
+		onsubmit={(e) => {
+			e.preventDefault();
+			submit();
+		}}
+	>
+		<span class="terminal-prompt">{prompt}</span>
+		<input
+			class="terminal-input min-w-0 flex-1 bg-transparent outline-none"
+			bind:value={draft}
+			{disabled}
+			placeholder="Type a command…"
+			autocomplete="off"
+			spellcheck={false}
+		/>
+	</form>
+</div>
+
+<style>
+	.terminal--adaptive {
+		border-color: var(--border);
+		background: var(--surface-elevated);
+		color: var(--text-primary);
+	}
+
+	.terminal--adaptive .terminal-header,
+	.terminal--adaptive .terminal-footer {
+		border-color: var(--border);
+		background: var(--surface-overlay);
+	}
+
+	.terminal--adaptive .terminal-title,
+	.terminal--adaptive .terminal-prompt {
+		color: var(--text-muted);
+	}
+
+	.terminal--adaptive :global(.terminal-clear) {
+		color: var(--text-muted);
+	}
+	.terminal--adaptive :global(.terminal-clear:hover) {
+		color: var(--text-primary);
+	}
+
+	.terminal--adaptive .terminal-dot:nth-child(1) {
+		background: #ff5f57;
+	}
+	.terminal--adaptive .terminal-dot:nth-child(2) {
+		background: #febc2e;
+	}
+	.terminal--adaptive .terminal-dot:nth-child(3) {
+		background: #28c840;
+	}
+
+	.terminal--adaptive .terminal-line--input {
+		color: #059669;
+	}
+	.terminal--adaptive .terminal-line--stdout {
+		color: var(--text-primary);
+	}
+	.terminal--adaptive .terminal-line--stderr {
+		color: #dc2626;
+	}
+	.terminal--adaptive .terminal-line--system {
+		color: var(--text-muted);
+	}
+
+	.terminal--adaptive .terminal-input {
+		color: var(--text-primary);
+	}
+	.terminal--adaptive .terminal-input::placeholder {
+		color: var(--text-muted);
+	}
+
+	:global(.dark) .terminal--adaptive .terminal-line--input {
+		color: #6ee7b7;
+	}
+	:global(.dark) .terminal--adaptive .terminal-line--stderr {
+		color: #f87171;
+	}
+
+	.terminal--contrast {
+		border-color: oklch(30% 0.03 265);
+		background: oklch(18% 0.03 265);
+		color: oklch(93% 0.01 265);
+	}
+
+	.terminal--contrast .terminal-header,
+	.terminal--contrast .terminal-footer {
+		border-color: oklch(30% 0.03 265);
+		background: oklch(15% 0.025 265);
+	}
+
+	.terminal--contrast .terminal-title,
+	.terminal--contrast .terminal-prompt,
+	.terminal--contrast .terminal-line--system {
+		color: oklch(62% 0.02 265);
+	}
+
+	.terminal--contrast :global(.terminal-clear) {
+		color: oklch(70% 0.02 265);
+	}
+	.terminal--contrast :global(.terminal-clear:hover) {
+		color: oklch(93% 0.01 265);
+	}
+
+	.terminal--contrast .terminal-dot:nth-child(1) {
+		background: #ff5f57;
+	}
+	.terminal--contrast .terminal-dot:nth-child(2) {
+		background: #febc2e;
+	}
+	.terminal--contrast .terminal-dot:nth-child(3) {
+		background: #28c840;
+	}
+
+	.terminal--contrast .terminal-line--input {
+		color: #6ee7b7;
+	}
+	.terminal--contrast .terminal-line--stdout {
+		color: oklch(93% 0.01 265);
+	}
+	.terminal--contrast .terminal-line--stderr {
+		color: #f87171;
+	}
+
+	.terminal--contrast .terminal-input {
+		color: oklch(93% 0.01 265);
+	}
+	.terminal--contrast .terminal-input::placeholder {
+		color: oklch(50% 0.02 265);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+export type TerminalLineKind = 'input' | 'stdout' | 'stderr' | 'system';
+export interface TerminalLine {
+    id: string;
+    kind: TerminalLineKind;
+    text: string;
+}
+interface TerminalProps {
+    lines?: TerminalLine[];
+    prompt?: string;
+    disabled?: boolean;
+    /** `adaptive` follows light/dark; `contrast` is always a dark console. */
+    tone?: 'adaptive' | 'contrast';
+    class?: string;
+    oncommand?: (command: string) => void;
+    onclear?: () => void;
+}
+declare const Terminal: import("svelte").Component<TerminalProps, {}, "lines">;
+type Terminal = ReturnType<typeof Terminal>;
+export default Terminal;

package/dist/components/molecules/Terminal/TerminalStory.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import Terminal from './Terminal.svelte';
+	import type { TerminalLine } from './Terminal.svelte';
+
+	interface Props {
+		tone?: 'adaptive' | 'contrast';
+	}
+
+	let { tone = 'adaptive' }: Props = $props();
+
+	let lines = $state<TerminalLine[]>([
+		{ id: '1', kind: 'system', text: 'Connected to sandbox.' },
+		{ id: '2', kind: 'input', text: 'ls' },
+		{ id: '3', kind: 'stdout', text: 'README.md\nsrc\npackage.json' }
+	]);
+
+	function reply(kind: TerminalLine['kind'], text: string) {
+		lines = [...lines, { id: `out-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`, kind, text }];
+	}
+
+	function oncommand(cmd: string) {
+		const [name, ...rest] = cmd.split(/\s+/);
+		const args = rest.join(' ');
+
+		if (name === 'help') {
+			reply('stdout', 'Commands: help, ls, echo, clear');
+			return;
+		}
+		if (name === 'ls') {
+			reply('stdout', 'README.md\nsrc\npackage.json');
+			return;
+		}
+		if (name === 'echo') {
+			reply('stdout', args);
+			return;
+		}
+		if (name === 'clear') {
+			lines = [];
+			return;
+		}
+		reply('stderr', `command not found: ${name}`);
+	}
+</script>
+
+<div class="mx-auto max-w-xl p-4">
+	<Terminal bind:lines {tone} {oncommand} />
+</div>

package/dist/components/molecules/Terminal/TerminalStory.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    tone?: 'adaptive' | 'contrast';
+}
+declare const TerminalStory: import("svelte").Component<Props, {}, "">;
+type TerminalStory = ReturnType<typeof TerminalStory>;
+export default TerminalStory;

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

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

package/dist/components/molecules/TimelineClip/TimelineClip.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import TrimHandle from '../../atoms/TrimHandle/TrimHandle.svelte';
+	import MediaKindIcon from '../../atoms/MediaKindIcon/MediaKindIcon.svelte';
+	import type { MediaClip } from '../../../utils/mediaTracks.js';
+	import { msToPx } from '../../../utils/mediaTime.js';
+
+	interface TimelineClipProps {
+		clip: MediaClip;
+		pxPerMs?: number;
+		selected?: boolean;
+		locked?: boolean;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		onmove?: (startMs: number) => void;
+		ontrimstart?: (startMs: number) => void;
+		ontrimend?: (endMs: number) => void;
+	}
+
+	let {
+		clip,
+		pxPerMs = 0.05,
+		selected = false,
+		locked = false,
+		class: className = '',
+		onclick,
+		onmove,
+		ontrimstart,
+		ontrimend
+	}: TimelineClipProps = $props();
+
+	const left = $derived(msToPx(clip.startMs, pxPerMs));
+	const width = $derived(Math.max(8, msToPx(clip.endMs - clip.startMs, pxPerMs)));
+	const bg = $derived(clip.color ?? '#3b82f6');
+
+	let dragMode = $state<'move' | 'trimStart' | 'trimEnd' | null>(null);
+	let originX = $state(0);
+	let originStart = $state(0);
+	let originEnd = $state(0);
+
+	function beginMove(e: PointerEvent) {
+		if (locked) return;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		dragMode = 'move';
+		originX = e.clientX;
+		originStart = clip.startMs;
+		originEnd = clip.endMs;
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!dragMode || locked) return;
+		const deltaMs = (e.clientX - originX) / pxPerMs;
+		if (dragMode === 'move') onmove?.(Math.max(0, originStart + deltaMs));
+		if (dragMode === 'trimStart') ontrimstart?.(originStart + deltaMs);
+		if (dragMode === 'trimEnd') ontrimend?.(originEnd + deltaMs);
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId);
+		dragMode = null;
+	}
+</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 text-left text-xs text-white shadow-sm',
+		selected ? 'ring-2 ring-white/80 ring-offset-1 ring-offset-transparent' : 'border-black/20',
+		locked ? 'cursor-not-allowed opacity-70' : 'cursor-grab active:cursor-grabbing',
+		className
+	]}
+	style:left={`${left}px`}
+	style:width={`${width}px`}
+	style:background={bg}
+	onclick={(e) => {
+		e.stopPropagation();
+		onclick?.(e);
+	}}
+	onpointerdown={beginMove}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+>
+	<TrimHandle
+		side="start"
+		disabled={locked}
+		ondragstart={(e) => {
+			dragMode = 'trimStart';
+			originX = e.clientX;
+			originStart = clip.startMs;
+		}}
+		ondrag={(e) => {
+			const deltaMs = (e.clientX - originX) / pxPerMs;
+			ontrimstart?.(originStart + deltaMs);
+		}}
+	/>
+	<div class="pointer-events-none flex h-full items-center gap-1.5 overflow-hidden px-2">
+		<MediaKindIcon kind={clip.kind} size="sm" class="shrink-0 opacity-90" />
+		<span class="truncate font-medium">{clip.name}</span>
+	</div>
+	<TrimHandle
+		side="end"
+		disabled={locked}
+		ondragstart={(e) => {
+			dragMode = 'trimEnd';
+			originX = e.clientX;
+			originEnd = clip.endMs;
+		}}
+		ondrag={(e) => {
+			const deltaMs = (e.clientX - originX) / pxPerMs;
+			ontrimend?.(originEnd + deltaMs);
+		}}
+	/>
+</div>