@r2digisolutions/components 0.1.7 → 0.3.0

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

@@ -0,0 +1,25 @@
+import type { MediaClip, MediaTrack } from '../../../utils/mediaTracks.js';
+interface ProgramMonitorProps {
+    width?: number;
+    height?: number;
+    background?: string;
+    currentTimeMs?: number;
+    playing?: boolean;
+    playbackRate?: number;
+    muted?: boolean;
+    volume?: number;
+    tracks?: MediaTrack[];
+    selectedClipIds?: string[];
+    /** When true, selected overlays can be dragged / resized on the frame */
+    editable?: boolean;
+    class?: string;
+    onselectclip?: (clipId: string, e: MouseEvent) => void;
+    onchangeclip?: (clip: MediaClip) => void;
+    /** Batch update (multi-drag). Falls back to repeated onchangeclip. */
+    onchangeclips?: (clips: MediaClip[]) => void;
+    onemptyclick?: () => void;
+    onselectionchange?: (clipIds: string[]) => void;
+}
+declare const ProgramMonitor: import("svelte").Component<ProgramMonitorProps, {}, "">;
+type ProgramMonitor = ReturnType<typeof ProgramMonitor>;
+export default ProgramMonitor;

package/dist/components/molecules/ProgramMonitor/ProgramMonitorStory.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import ProgramMonitor from './ProgramMonitor.svelte';
+	import { createDemoVideoSequence } from '../../../utils/videoSequence.js';
+
+	const seq = createDemoVideoSequence();
+</script>
+
+<div class="max-w-xl">
+	<ProgramMonitor
+		width={seq.width}
+		height={seq.height}
+		tracks={seq.tracks}
+		currentTimeMs={5000}
+		background={seq.background}
+	/>
+</div>

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

package/dist/components/molecules/PropertyField/PropertyField.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Text from '../../atoms/Text/Text.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import Tooltip from '../../atoms/Tooltip/Tooltip.svelte';
+	import Eye from '@lucide/svelte/icons/eye';
+	import EyeOff from '@lucide/svelte/icons/eye-off';
+	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
 
 	interface PropertyFieldProps {
 		label: string;
@@ -9,6 +14,16 @@
 		disabled?: boolean;
 		class?: string;
 		children?: Snippet;
+		/** When set, shows eye toggle for exposing props on User Widgets. */
+		exposed?: boolean | null;
+		onexpose?: (exposed: boolean) => void;
+		/**
+		 * Unreal-style: value differs from default. Shows amber reset control.
+		 * Pass with `onreset` to enable.
+		 */
+		modified?: boolean;
+		/** Reset this property to its default (UE details panel). */
+		onreset?: () => void;
 	}
 
 	const {
@@ -16,8 +31,14 @@
 		labelWidth = '40%',
 		disabled = false,
 		class: className = '',
-		children
+		children,
+		exposed = null,
+		onexpose,
+		modified = false,
+		onreset
 	}: PropertyFieldProps = $props();
+
+	const canReset = $derived(!!onreset && modified && !disabled);
 </script>
 
 <div
@@ -29,8 +50,41 @@
 	]}
 	style:grid-template-columns={`${labelWidth} minmax(0, 1fr)`}
 >
-	<span class="truncate" title={label}>
-		<Text size="xs" tone="secondary" as="span" class="font-medium">
+	<span class="flex min-w-0 items-center gap-0.5 truncate" title={label}>
+		{#if canReset}
+			<Tooltip content="Reset to default" side="top">
+				<IconButton
+					label="Reset to default"
+					size="xs"
+					class="text-amber-500 hover:bg-amber-500/10 hover:text-amber-600 dark:text-amber-400 dark:hover:text-amber-300"
+					onclick={() => onreset?.()}
+				>
+					<RotateCcw class="h-3 w-3" strokeWidth={2.5} />
+				</IconButton>
+			</Tooltip>
+		{:else if onreset}
+			<span class="inline-flex h-7 w-7 shrink-0" aria-hidden="true"></span>
+		{/if}
+		{#if exposed !== null}
+			<IconButton
+				label={exposed ? 'Hide from instances' : 'Expose on instances'}
+				size="xs"
+				class={exposed ? 'text-brand-600' : 'text-muted'}
+				onclick={() => onexpose?.(!exposed)}
+			>
+				{#if exposed}
+					<Eye class="h-3 w-3" />
+				{:else}
+					<EyeOff class="h-3 w-3" />
+				{/if}
+			</IconButton>
+		{/if}
+		<Text
+			size="xs"
+			tone={canReset ? 'primary' : 'secondary'}
+			as="span"
+			class={['truncate font-medium', canReset && 'text-amber-700 dark:text-amber-400']}
+		>
 			{label}
 		</Text>
 	</span>

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

@@ -6,6 +6,16 @@ interface PropertyFieldProps {
     disabled?: boolean;
     class?: string;
     children?: Snippet;
+    /** When set, shows eye toggle for exposing props on User Widgets. */
+    exposed?: boolean | null;
+    onexpose?: (exposed: boolean) => void;
+    /**
+     * Unreal-style: value differs from default. Shows amber reset control.
+     * Pass with `onreset` to enable.
+     */
+    modified?: boolean;
+    /** Reset this property to its default (UE details panel). */
+    onreset?: () => void;
 }
 declare const PropertyField: import("svelte").Component<PropertyFieldProps, {}, "">;
 type PropertyField = ReturnType<typeof PropertyField>;

package/dist/components/molecules/PropertyField/PropertyFieldStory.svelte

@@ -2,9 +2,12 @@
 	import PropertyField from './PropertyField.svelte';
 	import Input from '../../atoms/Input/Input.svelte';
 	import Toggle from '../../atoms/Toggle/Toggle.svelte';
+	import Slider from '../../atoms/Slider/Slider.svelte';
 
+	const DEFAULT_OPACITY = 1;
 	let location = $state('0, 0, 0');
 	let visible = $state(true);
+	let opacity = $state(0.65);
 </script>
 
 <div class="max-w-xs space-y-0.5 rounded border border-border bg-surface-elevated p-1">
@@ -14,4 +17,22 @@
 	<PropertyField label="Visible">
 		<Toggle bind:checked={visible} size="sm" />
 	</PropertyField>
+	<PropertyField
+		label="Opacity"
+		modified={opacity !== DEFAULT_OPACITY}
+		onreset={() => (opacity = DEFAULT_OPACITY)}
+	>
+		<Slider
+			size="sm"
+			min={0}
+			max={1}
+			step={0.01}
+			bind:value={opacity}
+			showValue
+			valuePosition="header"
+		/>
+	</PropertyField>
+	<p class="px-1 pt-1 text-[10px] text-muted">
+		Amber reset icon appears when a value differs from its default (Unreal-style).
+	</p>
 </div>

package/dist/components/molecules/PropertyGroup/PropertyGroup.svelte

@@ -44,7 +44,7 @@
 	</button>
 
 	{#if open}
-		<div class="space-y-0.5 px-1 py-1">
+		<div class="space-y-0.5 px-1 py-1 min-w-0 overflow-x-hidden">
 			{#if children}
 				{@render children()}
 			{/if}

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

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

package/dist/components/molecules/QueryBuilder/QueryBuilder.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import AdvancedFilters from '../AdvancedFilters/AdvancedFilters.svelte';
+	import {
+		emptyFilterGroup,
+		type AdvancedFilterGroup,
+		type FilterFieldDef
+	} from '../../../utils/advancedFilters.js';
+
+	export type { FilterFieldDef, AdvancedFilterGroup };
+
+	interface QueryBuilderProps {
+		fields?: FilterFieldDef[];
+		query?: AdvancedFilterGroup;
+		title?: string;
+		applyLabel?: string;
+		/** Tighter padding / smaller chrome */
+		compact?: boolean;
+		class?: string;
+		onchange?: (query: AdvancedFilterGroup) => void;
+		onapply?: (query: AdvancedFilterGroup) => void;
+	}
+
+	let {
+		fields = [],
+		query = $bindable(emptyFilterGroup()),
+		title = 'Query builder',
+		applyLabel = 'Apply',
+		compact = false,
+		class: className = '',
+		onchange,
+		onapply
+	}: QueryBuilderProps = $props();
+</script>
+
+<div
+	class={[
+		'rounded-xl border border-border bg-surface-elevated',
+		compact ? 'p-2' : 'p-3',
+		className
+	]}
+	data-query-builder
+>
+	<AdvancedFilters
+		bind:query
+		{fields}
+		{title}
+		{applyLabel}
+		{onchange}
+		{onapply}
+		class={compact ? 'text-sm' : ''}
+	/>
+</div>

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

@@ -0,0 +1,18 @@
+import { type AdvancedFilterGroup, type FilterFieldDef } from '../../../utils/advancedFilters.js';
+interface QueryBuilderProps {
+    fields?: FilterFieldDef[];
+    query?: AdvancedFilterGroup;
+    title?: string;
+    applyLabel?: string;
+    /** Tighter padding / smaller chrome */
+    compact?: boolean;
+    class?: string;
+    onchange?: (query: AdvancedFilterGroup) => void;
+    onapply?: (query: AdvancedFilterGroup) => void;
+}
+declare const QueryBuilder: import("svelte").Component<QueryBuilderProps, {
+    FilterFieldDef: typeof FilterFieldDef;
+    AdvancedFilterGroup: typeof AdvancedFilterGroup;
+}, "query">;
+type QueryBuilder = ReturnType<typeof QueryBuilder>;
+export default QueryBuilder;

package/dist/components/molecules/QueryBuilder/QueryBuilderStory.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import QueryBuilder from './QueryBuilder.svelte';
+	import FilterList from '../FilterList/FilterList.svelte';
+	import QueryBar from '../QueryBar/QueryBar.svelte';
+	import {
+		emptyFilterGroup,
+		type AdvancedFilterGroup,
+		type FilterFieldDef
+	} from '../../../utils/advancedFilters.js';
+	import { queryStringToGroup, groupToQueryString } from '../../../utils/queryBridge.js';
+
+	const fields: FilterFieldDef[] = [
+		{
+			id: 'brand',
+			label: 'Brand',
+			type: 'select',
+			options: [
+				{ value: 'nike', label: 'Nike' },
+				{ value: 'adidas', label: 'Adidas' }
+			]
+		},
+		{ id: 'price', label: 'Price', type: 'number' },
+		{
+			id: 'status',
+			label: 'Status',
+			type: 'select',
+			options: [
+				{ value: 'active', label: 'Active' },
+				{ value: 'draft', label: 'Draft' }
+			]
+		}
+	];
+
+	let query = $state<AdvancedFilterGroup>(emptyFilterGroup());
+	let queryString = $state('brand:nike AND price>=100');
+
+	$effect(() => {
+		query = queryStringToGroup(queryString, fields);
+	});
+
+	function onSubmit(q: string) {
+		queryString = q;
+		query = queryStringToGroup(q, fields);
+	}
+
+	function onQueryChange(next: AdvancedFilterGroup) {
+		query = next;
+		queryString = groupToQueryString(next, fields);
+	}
+</script>
+
+<div class="mx-auto flex w-full max-w-3xl flex-col gap-4 p-4">
+	<QueryBar bind:value={queryString} {fields} onsubmit={onSubmit} />
+	<FilterList
+		bind:query
+		bind:queryString
+		{fields}
+		showQueryString
+		onchange={onQueryChange}
+	/>
+	<QueryBuilder bind:query {fields} onchange={onQueryChange} />
+</div>

package/dist/components/molecules/QueryBuilder/QueryBuilderStory.svelte.d.ts

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

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

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

package/dist/components/molecules/RelationPicker/RelationPicker.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import Input from '../../atoms/Input/Input.svelte';
+	import Chip from '../../atoms/Chip/Chip.svelte';
+	import EntityPreview from '../EntityPreview/EntityPreview.svelte';
+	import Spinner from '../../atoms/Spinner/Spinner.svelte';
+
+	export interface RelationOption {
+		id: string;
+		title: string;
+		subtitle?: string;
+		meta?: string;
+		image?: string;
+		kind?: string;
+	}
+
+	interface RelationPickerProps {
+		options?: RelationOption[];
+		value?: string | string[];
+		multiple?: boolean;
+		placeholder?: string;
+		loading?: boolean;
+		disabled?: boolean;
+		emptyLabel?: string;
+		class?: string;
+		onsearch?: (query: string) => void;
+		onchange?: (value: string | string[]) => void;
+		loadOptions?: (query: string) => Promise<RelationOption[]>;
+	}
+
+	let {
+		options = [],
+		value = $bindable<string | string[]>(''),
+		multiple = false,
+		placeholder = 'Search related records…',
+		loading = false,
+		disabled = false,
+		emptyLabel = 'No results',
+		class: className = '',
+		onsearch,
+		onchange,
+		loadOptions
+	}: RelationPickerProps = $props();
+
+	let query = $state('');
+	let open = $state(false);
+	let remote = $state<RelationOption[] | null>(null);
+	let busy = $state(false);
+
+	const selectedIds = $derived(
+		multiple
+			? Array.isArray(value)
+				? value
+				: value
+					? [value]
+					: []
+			: typeof value === 'string' && value
+				? [value]
+				: Array.isArray(value)
+					? value.slice(0, 1)
+					: []
+	);
+
+	const pool = $derived(remote ?? options);
+
+	const filtered = $derived.by(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return pool;
+		return pool.filter(
+			(o) =>
+				o.title.toLowerCase().includes(q) ||
+				o.subtitle?.toLowerCase().includes(q) ||
+				o.id.toLowerCase().includes(q)
+		);
+	});
+
+	const selectedOptions = $derived(
+		selectedIds
+			.map((id) => pool.find((o) => o.id === id) ?? options.find((o) => o.id === id))
+			.filter(Boolean) as RelationOption[]
+	);
+
+	let searchTimer: ReturnType<typeof setTimeout> | undefined;
+
+	async function runSearch(q: string) {
+		onsearch?.(q);
+		if (!loadOptions) {
+			remote = null;
+			return;
+		}
+		busy = true;
+		try {
+			remote = await loadOptions(q);
+		} finally {
+			busy = false;
+		}
+	}
+
+	function onQueryInput(e: Event) {
+		query = (e.currentTarget as HTMLInputElement).value;
+		open = true;
+		clearTimeout(searchTimer);
+		searchTimer = setTimeout(() => runSearch(query), 200);
+	}
+
+	function toggle(id: string) {
+		if (multiple) {
+			const set = new Set(selectedIds);
+			if (set.has(id)) set.delete(id);
+			else set.add(id);
+			value = [...set];
+		} else {
+			value = id;
+			open = false;
+			query = '';
+		}
+		onchange?.(value);
+	}
+
+	function remove(id: string) {
+		if (multiple) {
+			value = selectedIds.filter((x) => x !== id);
+		} else {
+			value = '';
+		}
+		onchange?.(value);
+	}
+</script>
+
+<div class={['relative flex flex-col gap-2', className]} data-relation-picker>
+	{#if selectedOptions.length}
+		<div class="flex flex-wrap gap-1.5">
+			{#each selectedOptions as opt (opt.id)}
+				<Chip size="sm" variant="primary" dismissible ondismiss={() => remove(opt.id)}>
+					{opt.title}
+				</Chip>
+			{/each}
+		</div>
+	{/if}
+
+	<Input
+		value={query}
+		{placeholder}
+		{disabled}
+		oninput={onQueryInput}
+		onfocus={() => (open = true)}
+	/>
+
+	{#if open && !disabled}
+		<div
+			class="absolute top-full z-20 mt-1 max-h-64 w-full overflow-auto rounded-xl border border-border bg-surface-elevated p-1 shadow-lg"
+			role="listbox"
+		>
+			{#if loading || busy}
+				<div class="flex items-center justify-center gap-2 px-3 py-6 text-sm text-muted">
+					<Spinner size="sm" /> Searching…
+				</div>
+			{:else if filtered.length === 0}
+				<p class="px-3 py-6 text-center text-sm text-muted">{emptyLabel}</p>
+			{:else}
+				{#each filtered as opt (opt.id)}
+					<button
+						type="button"
+						class="w-full rounded-lg p-1 text-left hover:bg-surface-overlay"
+						role="option"
+						aria-selected={selectedIds.includes(opt.id)}
+						onclick={() => toggle(opt.id)}
+					>
+						<EntityPreview
+							title={opt.title}
+							subtitle={opt.subtitle}
+							meta={opt.meta}
+							image={opt.image}
+							kind={opt.kind}
+						/>
+					</button>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,24 @@
+export interface RelationOption {
+    id: string;
+    title: string;
+    subtitle?: string;
+    meta?: string;
+    image?: string;
+    kind?: string;
+}
+interface RelationPickerProps {
+    options?: RelationOption[];
+    value?: string | string[];
+    multiple?: boolean;
+    placeholder?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    emptyLabel?: string;
+    class?: string;
+    onsearch?: (query: string) => void;
+    onchange?: (value: string | string[]) => void;
+    loadOptions?: (query: string) => Promise<RelationOption[]>;
+}
+declare const RelationPicker: import("svelte").Component<RelationPickerProps, {}, "value">;
+type RelationPicker = ReturnType<typeof RelationPicker>;
+export default RelationPicker;

package/dist/components/molecules/RelationPicker/RelationPickerStory.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import RelationPicker from './RelationPicker.svelte';
+	import type { RelationOption } from './RelationPicker.svelte';
+
+	const options: RelationOption[] = [
+		{ id: '1', title: 'Acme Corp', subtitle: 'Customer', kind: 'org' },
+		{ id: '2', title: 'Jane Doe', subtitle: 'jane@acme.com', kind: 'user' },
+		{ id: '3', title: 'Project Atlas', subtitle: 'Active', kind: 'project' }
+	];
+
+	let value = $state<string | string[]>('1');
+</script>
+
+<div class="mx-auto max-w-md p-6">
+	<RelationPicker bind:value {options} multiple={false} />
+</div>

package/dist/components/molecules/RelationPicker/RelationPickerStory.svelte.d.ts

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

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

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