@r2digisolutions/components 0.1.7 → 0.3.0

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

@@ -0,0 +1,117 @@
+<script lang="ts">
+	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,
+		onscrub,
+		onscrubstart,
+		onscrubend
+	}: TimeRulerProps = $props();
+
+	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) {
+		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 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="pointer-events-none absolute top-0 flex h-full flex-col justify-end"
+			style:left={`${tick.ms * pxPerMs}px`}
+		>
+			{#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={[
+					'w-px bg-border-strong',
+					tickHeight(tick.level),
+					tick.level === 'minor' && 'opacity-40',
+					tick.level === 'mid' && 'opacity-70'
+				]}
+			></div>
+		</div>
+	{/each}
+</div>

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

@@ -0,0 +1,17 @@
+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>;
+export default TimeRuler;

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import TimeRuler from './TimeRuler.svelte';
+</script>
+
+<div class="overflow-x-auto rounded-lg border border-border bg-surface-elevated p-2">
+	<TimeRuler durationMs={60000} pxPerMs={0.08} />
+</div>

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

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/atoms/Tooltip/Tooltip.svelte

@@ -76,7 +76,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
 	bind:this={triggerEl}
-	class={['inline-flex min-w-0 max-w-full', className]}
+	class={['inline-flex shrink-0', className]}
 	onmouseenter={show}
 	onmouseleave={hide}
 	onfocusin={show}

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

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

package/dist/components/atoms/TrimHandle/TrimHandle.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	export type TrimHandleSide = 'start' | 'end';
+
+	interface TrimHandleProps {
+		side?: TrimHandleSide;
+		disabled?: boolean;
+		class?: string;
+		ondragstart?: (e: PointerEvent) => void;
+		ondrag?: (e: PointerEvent) => void;
+		ondragend?: (e: PointerEvent) => void;
+	}
+
+	let {
+		side = 'start',
+		disabled = false,
+		class: className = '',
+		ondragstart,
+		ondrag,
+		ondragend
+	}: TrimHandleProps = $props();
+
+	function onPointerDown(e: PointerEvent) {
+		if (disabled) return;
+		e.stopPropagation();
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		ondragstart?.(e);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (disabled) return;
+		if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) return;
+		ondrag?.(e);
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		if (disabled) return;
+		(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		ondragend?.(e);
+	}
+</script>
+
+<button
+	type="button"
+	aria-label={side === 'start' ? 'Trim start' : 'Trim end'}
+	disabled={disabled}
+	class={[
+		'absolute top-0 z-10 h-full w-2 touch-none border-0 bg-transparent p-0',
+		'cursor-ew-resize hover:bg-white/30',
+		side === 'start' ? 'left-0' : 'right-0',
+		disabled && 'pointer-events-none opacity-40',
+		className
+	]}
+	onpointerdown={onPointerDown}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+>
+	<span
+		class="absolute top-1/2 h-4 w-0.5 -translate-y-1/2 rounded-full bg-white/90"
+		style:left={side === 'start' ? '3px' : 'auto'}
+		style:right={side === 'end' ? '3px' : 'auto'}
+		aria-hidden="true"
+	></span>
+</button>

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

@@ -0,0 +1,12 @@
+export type TrimHandleSide = 'start' | 'end';
+interface TrimHandleProps {
+    side?: TrimHandleSide;
+    disabled?: boolean;
+    class?: string;
+    ondragstart?: (e: PointerEvent) => void;
+    ondrag?: (e: PointerEvent) => void;
+    ondragend?: (e: PointerEvent) => void;
+}
+declare const TrimHandle: import("svelte").Component<TrimHandleProps, {}, "">;
+type TrimHandle = ReturnType<typeof TrimHandle>;
+export default TrimHandle;

package/dist/components/atoms/TrimHandle/TrimHandleStory.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import TrimHandle from './TrimHandle.svelte';
+</script>
+
+<div class="relative h-10 w-64 rounded-md bg-brand-500">
+	<TrimHandle side="start" />
+	<TrimHandle side="end" />
+	<span class="pointer-events-none absolute inset-0 flex items-center justify-center text-xs text-white">
+		Clip
+	</span>
+</div>

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

package/dist/components/molecules/AiAssistPanel/AiAssistPanel.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/AiAssistPanel/AiAssistPanel.stories.js

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

package/dist/components/molecules/AiAssistPanel/AiAssistPanel.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import PromptInput from '../PromptInput/PromptInput.svelte';
+	import ChatBubble from '../ChatBubble/ChatBubble.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+
+	export type AiAssistRole = 'user' | 'assistant' | 'system';
+
+	export interface AiAssistMessage {
+		id: string;
+		role: AiAssistRole;
+		content: string;
+	}
+
+	interface AiAssistPanelProps {
+		messages?: AiAssistMessage[];
+		snippets?: string[];
+		title?: string;
+		loading?: boolean;
+		placeholder?: string;
+		class?: string;
+		onsubmit?: (prompt: string) => void;
+		oninsert?: (text: string) => void;
+		onstop?: () => void;
+	}
+
+	let {
+		messages = $bindable<AiAssistMessage[]>([]),
+		snippets = [],
+		title = 'AI assist',
+		loading = false,
+		placeholder = 'Ask for help with this resource…',
+		class: className = '',
+		onsubmit,
+		oninsert,
+		onstop
+	}: AiAssistPanelProps = $props();
+
+	let draft = $state('');
+
+	function submit(value: string) {
+		const text = value.trim();
+		if (!text) return;
+		messages = [
+			...messages,
+			{ id: `m-${Date.now()}`, role: 'user', content: text }
+		];
+		draft = '';
+		onsubmit?.(text);
+	}
+</script>
+
+<aside
+	class={[
+		'flex h-full min-h-[360px] w-full max-w-md flex-col overflow-hidden rounded-xl border border-border bg-surface-elevated',
+		className
+	]}
+	data-ai-assist-panel
+>
+	<header class="border-b border-border px-3 py-2">
+		<p class="text-sm font-semibold text-primary">{title}</p>
+	</header>
+
+	{#if snippets.length}
+		<div class="flex flex-wrap gap-1 border-b border-border px-3 py-2">
+			{#each snippets as s (s)}
+				<Button size="sm" variant="secondary" onclick={() => oninsert?.(s)}>{s}</Button>
+			{/each}
+		</div>
+	{/if}
+
+	<div class="flex-1 space-y-3 overflow-auto p-3">
+		{#each messages as msg (msg.id)}
+			{#if msg.role === 'assistant'}
+				<div class="flex flex-col items-start gap-1">
+					<ChatBubble content={msg.content} side="left" />
+					{#if oninsert}
+						<Button size="sm" variant="ghost" onclick={() => oninsert?.(msg.content)}>
+							Insert
+						</Button>
+					{/if}
+				</div>
+			{:else if msg.role === 'system'}
+				<p class="text-center text-[11px] text-muted">{msg.content}</p>
+			{:else}
+				<ChatBubble content={msg.content} side="right" />
+			{/if}
+		{/each}
+		{#if !messages.length}
+			<p class="py-8 text-center text-sm text-muted">Ask anything to get started.</p>
+		{/if}
+	</div>
+
+	<div class="border-t border-border p-3">
+		<PromptInput
+			bind:value={draft}
+			{placeholder}
+			{loading}
+			onsubmit={submit}
+			onstop={onstop}
+		/>
+	</div>
+</aside>

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

@@ -0,0 +1,20 @@
+export type AiAssistRole = 'user' | 'assistant' | 'system';
+export interface AiAssistMessage {
+    id: string;
+    role: AiAssistRole;
+    content: string;
+}
+interface AiAssistPanelProps {
+    messages?: AiAssistMessage[];
+    snippets?: string[];
+    title?: string;
+    loading?: boolean;
+    placeholder?: string;
+    class?: string;
+    onsubmit?: (prompt: string) => void;
+    oninsert?: (text: string) => void;
+    onstop?: () => void;
+}
+declare const AiAssistPanel: import("svelte").Component<AiAssistPanelProps, {}, "messages">;
+type AiAssistPanel = ReturnType<typeof AiAssistPanel>;
+export default AiAssistPanel;

package/dist/components/molecules/AiAssistPanel/AiAssistPanelStory.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import AiAssistPanel from './AiAssistPanel.svelte';
+	import type { AiAssistMessage } from './AiAssistPanel.svelte';
+
+	let messages = $state<AiAssistMessage[]>([
+		{ id: '1', role: 'system', content: 'Context: ResourceStudio · customers' },
+		{ id: '2', role: 'user', content: 'Write a filter for active VIP customers' },
+		{
+			id: '3',
+			role: 'assistant',
+			content: 'status:active AND tags:vip'
+		}
+	]);
+
+	function onsubmit(prompt: string) {
+		messages = [
+			...messages,
+			{
+				id: String(Date.now()),
+				role: 'assistant',
+				content: `Suggested: ${prompt.includes('filter') ? 'status:active' : 'Done.'}`
+			}
+		];
+	}
+</script>
+
+<div class="flex justify-center p-4">
+	<AiAssistPanel
+		bind:messages
+		{onsubmit}
+		snippets={['Summarize', 'Fix types', 'Write test']}
+		oninsert={(t) => console.log('insert', t)}
+	/>
+</div>

package/dist/components/molecules/AiAssistPanel/AiAssistPanelStory.svelte.d.ts

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