@r2digisolutions/components 0.1.7 → 0.3.0

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,193 @@
+<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;
+		oncontextmenu?: (e: MouseEvent) => void;
+		onmove?: (startMs: number) => void;
+		ontrimstart?: (startMs: number) => void;
+		ontrimend?: (endMs: number) => void;
+		ondragoverclip?: (e: DragEvent) => void;
+		ondropclip?: (e: DragEvent) => void;
+	}
+
+	let {
+		clip,
+		pxPerMs = 0.05,
+		selected = false,
+		locked = false,
+		class: className = '',
+		onclick,
+		oncontextmenu,
+		onmove,
+		ontrimstart,
+		ontrimend,
+		ondragoverclip,
+		ondropclip
+	}: 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');
+	const inW = $derived(
+		clip.animationIn ? Math.min(width * 0.45, msToPx(clip.animationIn.durationMs, pxPerMs)) : 0
+	);
+	const outW = $derived(
+		clip.animationOut ? Math.min(width * 0.45, msToPx(clip.animationOut.durationMs, pxPerMs)) : 0
+	);
+	const transW = $derived(
+		clip.transitionOut
+			? Math.min(width * 0.5, Math.max(10, msToPx(clip.transitionOut.durationMs, pxPerMs)))
+			: 0
+	);
+
+	let dragMode = $state<'move' | null>(null);
+	let originX = $state(0);
+	let originStart = $state(0);
+
+	function beginMove(e: PointerEvent) {
+		if (locked || e.button !== 0) return;
+		e.stopPropagation();
+		e.preventDefault();
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		dragMode = 'move';
+		originX = e.clientX;
+		originStart = clip.startMs;
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (locked) return;
+		if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) return;
+		if (dragMode !== 'move') return;
+		const deltaMs = (e.clientX - originX) / pxPerMs;
+		onmove?.(Math.max(0, originStart + deltaMs));
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		const el = e.currentTarget as HTMLElement;
+		if (el.hasPointerCapture(e.pointerId)) el.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 z-1 touch-none overflow-hidden rounded-md border text-left text-xs text-white shadow-sm',
+		selected
+			? 'z-10 border-2 border-white shadow-md ring-2 ring-brand-500 ring-offset-1 ring-offset-surface'
+			: 'border-black/25',
+		locked ? 'cursor-not-allowed' : 'cursor-grab active:cursor-grabbing',
+		className
+	]}
+	style:left={`${left}px`}
+	style:width={`${width}px`}
+	style:background={bg}
+	style:opacity={locked ? Math.min(0.7, clip.opacity ?? 1) : (clip.opacity ?? 1)}
+	style:filter={selected ? 'brightness(1.12)' : undefined}
+	data-marquee-id={clip.id}
+	onclick={(e) => {
+		e.stopPropagation();
+		onclick?.(e);
+	}}
+	oncontextmenu={(e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		oncontextmenu?.(e);
+	}}
+	onpointerdown={beginMove}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+	ondragover={(e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		ondragoverclip?.(e);
+	}}
+	ondrop={(e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		ondropclip?.(e);
+	}}
+>
+	<!-- CapCut-style: In wedge -->
+	{#if clip.animationIn && inW > 2}
+		<div
+			class="pointer-events-none absolute inset-y-0 left-0 z-0 bg-gradient-to-r from-emerald-400/70 to-transparent"
+			style:width={`${inW}px`}
+			title={`In: ${clip.animationIn.type}`}
+		></div>
+	{/if}
+	<!-- CapCut-style: Out wedge -->
+	{#if clip.animationOut && outW > 2}
+		<div
+			class="pointer-events-none absolute inset-y-0 right-0 z-0 bg-gradient-to-l from-amber-400/70 to-transparent"
+			style:width={`${outW}px`}
+			title={`Out: ${clip.animationOut.type}`}
+		></div>
+	{/if}
+	<!-- Transition window at clip end -->
+	{#if clip.transitionOut && transW > 2}
+		<div
+			class="pointer-events-none absolute inset-y-0 right-0 z-[1] bg-gradient-to-l from-fuchsia-500/55 to-transparent"
+			style:width={`${transW}px`}
+			title={`Transition: ${clip.transitionOut.type} · ${(clip.transitionOut.durationMs / 1000).toFixed(1)}s`}
+		></div>
+	{/if}
+	<!-- CapCut-style: transition diamond at clip end -->
+	{#if clip.transitionOut}
+		<div
+			class="pointer-events-none absolute top-1/2 right-0 z-20 flex h-4 w-4 -translate-y-1/2 translate-x-1/2 items-center justify-center"
+			title={`Transition: ${clip.transitionOut.type}`}
+		>
+			<span
+				class="block h-2.5 w-2.5 rotate-45 border border-white/80 bg-fuchsia-400 shadow-sm"
+			></span>
+		</div>
+	{/if}
+
+	<TrimHandle
+		side="start"
+		disabled={locked}
+		ondragstart={(e) => {
+			originX = e.clientX;
+			originStart = clip.startMs;
+		}}
+		ondrag={(e) => {
+			const deltaMs = (e.clientX - originX) / pxPerMs;
+			ontrimstart?.(originStart + deltaMs);
+		}}
+	/>
+	<div class="pointer-events-none relative z-10 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>
+		{#if clip.animationIn || clip.animationOut}
+			<span class="ml-auto shrink-0 rounded bg-black/25 px-1 text-[9px] uppercase tracking-wide">
+				{clip.animationIn && clip.animationOut ? 'I/O' : clip.animationIn ? 'In' : 'Out'}
+			</span>
+		{/if}
+	</div>
+	<TrimHandle
+		side="end"
+		disabled={locked}
+		ondragstart={(e) => {
+			originX = e.clientX;
+			originStart = clip.endMs;
+		}}
+		ondrag={(e) => {
+			const deltaMs = (e.clientX - originX) / pxPerMs;
+			ontrimend?.(originStart + deltaMs);
+		}}
+	/>
+</div>

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

@@ -0,0 +1,18 @@
+import type { MediaClip } from '../../../utils/mediaTracks.js';
+interface TimelineClipProps {
+    clip: MediaClip;
+    pxPerMs?: number;
+    selected?: boolean;
+    locked?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    oncontextmenu?: (e: MouseEvent) => void;
+    onmove?: (startMs: number) => void;
+    ontrimstart?: (startMs: number) => void;
+    ontrimend?: (endMs: number) => void;
+    ondragoverclip?: (e: DragEvent) => void;
+    ondropclip?: (e: DragEvent) => void;
+}
+declare const TimelineClip: import("svelte").Component<TimelineClipProps, {}, "">;
+type TimelineClip = ReturnType<typeof TimelineClip>;
+export default TimelineClip;

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import TimelineClip from './TimelineClip.svelte';
+	import type { MediaClip } from '../../../utils/mediaTracks.js';
+
+	const clip: MediaClip = {
+		id: 'c1',
+		trackId: 't1',
+		name: 'Intro',
+		kind: 'video',
+		startMs: 1000,
+		endMs: 8000,
+		color: '#8b5cf6'
+	};
+</script>
+
+<div class="relative h-12 w-full rounded-lg border border-border bg-surface">
+	<TimelineClip {clip} pxPerMs={0.08} selected />
+</div>

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

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

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