@r2digisolutions/components 0.1.6 → 0.2.0

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

@@ -0,0 +1,33 @@
+import '@xyflow/svelte/dist/style.css';
+import { type BlueprintVariable, type GraphDocument, type GraphEdge, type GraphNodeContext, type GraphNodeTypeDef, type GraphValidationIssue } from '../../../utils/nodeGraph.js';
+interface NodeGraphProps {
+    value?: GraphDocument;
+    nodeTypes?: GraphNodeTypeDef[];
+    /** Blueprint variables → Get/Set in place menu + drop targets. */
+    variables?: BlueprintVariable[];
+    /** Graph kind filter (Events only on event_graph, etc.). */
+    graphContext?: GraphNodeContext | null;
+    readonly?: boolean;
+    showMinimap?: boolean;
+    showToolbar?: boolean;
+    showGrid?: boolean;
+    snapToGrid?: boolean;
+    gridSize?: number;
+    class?: string;
+    selectedIds?: string[];
+    onchange?: (doc: GraphDocument) => void;
+    onselect?: (id: string | null) => void;
+    onselectmany?: (ids: string[]) => void;
+    onconnect?: (edge: GraphEdge) => void;
+    onvalidate?: (issues: GraphValidationIssue[]) => void;
+    onplace?: (type: string, x: number, y: number) => void;
+}
+declare const NodeGraph: import("svelte").Component<NodeGraphProps, {
+    GraphDocument: typeof GraphDocument;
+    GraphNode: typeof GraphNode;
+    GraphEdge: typeof GraphEdge;
+    GraphNodeTypeDef: typeof GraphNodeTypeDef;
+    GraphPort: typeof GraphPort;
+}, "value" | "showGrid" | "snapToGrid" | "selectedIds">;
+type NodeGraph = ReturnType<typeof NodeGraph>;
+export default NodeGraph;

package/dist/components/molecules/NodeGraph/NodeGraphStory.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import NodeGraph from './NodeGraph.svelte';
+	import {
+		createGraphEdge,
+		createGraphNode,
+		emptyGraphDocument,
+		type GraphDocument
+	} from '../../../utils/nodeGraph.js';
+
+	const begin = createGraphNode({
+		type: 'trigger',
+		x: 40,
+		y: 160,
+		data: { label: 'On Start' }
+	});
+	const branch = createGraphNode({
+		type: 'condition',
+		x: 300,
+		y: 140,
+		data: { label: 'Is Valid?' }
+	});
+	const action = createGraphNode({
+		type: 'action',
+		x: 560,
+		y: 40,
+		data: { label: 'Notify' }
+	});
+	const transform = createGraphNode({
+		type: 'transform',
+		x: 560,
+		y: 240,
+		data: { label: 'Normalize' }
+	});
+	const literal = createGraphNode({
+		type: 'get_string',
+		x: 300,
+		y: 320,
+		data: { label: '"ok"' }
+	});
+	const toBool = createGraphNode({
+		type: 'to_bool',
+		x: 40,
+		y: 300,
+		data: { label: 'To Bool' }
+	});
+	const end = createGraphNode({
+		type: 'end',
+		x: 820,
+		y: 140,
+		data: { label: 'Done' }
+	});
+	const note = createGraphNode({
+		type: 'comment',
+		x: 40,
+		y: 40,
+		data: { label: 'Exec = play · Functions = data-only' }
+	});
+
+	let value = $state<GraphDocument>({
+		...emptyGraphDocument(),
+		nodes: [begin, branch, action, transform, literal, toBool, end, note],
+		edges: [
+			createGraphEdge(begin.id, branch.id, { sourceHandle: 'exec', targetHandle: 'exec_in' }),
+			createGraphEdge(toBool.id, branch.id, {
+				sourceHandle: 'out',
+				targetHandle: 'condition'
+			}),
+			createGraphEdge(branch.id, action.id, {
+				label: 'True',
+				sourceHandle: 'true',
+				targetHandle: 'exec_in'
+			}),
+			createGraphEdge(branch.id, transform.id, {
+				label: 'False',
+				sourceHandle: 'false',
+				targetHandle: 'exec_in'
+			}),
+			createGraphEdge(literal.id, transform.id, {
+				sourceHandle: 'value',
+				targetHandle: 'in'
+			}),
+			createGraphEdge(action.id, end.id, { sourceHandle: 'exec', targetHandle: 'exec_in' }),
+			createGraphEdge(transform.id, end.id, { sourceHandle: 'exec', targetHandle: 'exec_in' })
+		]
+	});
+</script>
+
+<div class="flex h-[640px] flex-col p-4">
+	<NodeGraph bind:value class="min-h-0 flex-1" />
+</div>

package/dist/components/molecules/NodeGraph/NodeGraphStory.svelte.d.ts

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

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

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

package/dist/components/molecules/NodePalette/NodePalette.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import SearchInput from '../SearchInput/SearchInput.svelte';
+	import {
+		DEFAULT_BLUEPRINT_NODE_TYPES,
+		groupNodeTypesByCategory,
+		type GraphNodeTypeDef
+	} from '../../../utils/nodeGraph.js';
+
+	interface NodePaletteProps {
+		nodeTypes?: GraphNodeTypeDef[];
+		query?: string;
+		title?: string;
+		class?: string;
+		onselect?: (type: GraphNodeTypeDef) => void;
+	}
+
+	let {
+		nodeTypes = DEFAULT_BLUEPRINT_NODE_TYPES,
+		query = $bindable(''),
+		title = 'Palette',
+		class: className = '',
+		onselect
+	}: NodePaletteProps = $props();
+
+	const filtered = $derived.by(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return nodeTypes;
+		return nodeTypes.filter(
+			(t) =>
+				t.label.toLowerCase().includes(q) ||
+				t.type.toLowerCase().includes(q) ||
+				t.category?.toLowerCase().includes(q) ||
+				t.description?.toLowerCase().includes(q)
+		);
+	});
+
+	const groups = $derived(groupNodeTypesByCategory(filtered));
+</script>
+
+<div class={['flex h-full min-h-0 flex-col', className]} data-node-palette>
+	<div class="border-b border-border px-2 py-2">
+		{#if title}
+			<p class="mb-1.5 px-1 text-[11px] font-semibold uppercase tracking-wide text-muted">{title}</p>
+		{/if}
+		<SearchInput bind:value={query} placeholder="Search nodes…" size="sm" />
+	</div>
+	<div class="min-h-0 flex-1 overflow-auto p-1">
+		{#each groups as group (group.category)}
+			<div class="mb-2">
+				<p class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted">
+					{group.category}
+				</p>
+				<ul class="flex flex-col gap-0.5">
+					{#each group.types as nt (nt.type)}
+						<li>
+							<button
+								type="button"
+								class="flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left hover:bg-surface-overlay"
+								onclick={() => onselect?.(nt)}
+								draggable="true"
+								ondragstart={(e) => {
+									e.dataTransfer?.setData('application/x-node-type', nt.type);
+									e.dataTransfer?.setData('text/plain', nt.type);
+								}}
+							>
+								<span
+									class="mt-1 h-2.5 w-2.5 shrink-0 rounded-full"
+									style={`background:${nt.color ?? '#64748b'}`}
+								></span>
+								<span class="min-w-0">
+									<span class="block truncate text-sm font-medium text-primary">{nt.label}</span>
+									{#if nt.description}
+										<span class="block truncate text-[11px] text-muted">{nt.description}</span>
+									{/if}
+								</span>
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/each}
+		{#if !filtered.length}
+			<p class="px-3 py-8 text-center text-xs text-muted">No nodes match</p>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,11 @@
+import { type GraphNodeTypeDef } from '../../../utils/nodeGraph.js';
+interface NodePaletteProps {
+    nodeTypes?: GraphNodeTypeDef[];
+    query?: string;
+    title?: string;
+    class?: string;
+    onselect?: (type: GraphNodeTypeDef) => void;
+}
+declare const NodePalette: import("svelte").Component<NodePaletteProps, {}, "query">;
+type NodePalette = ReturnType<typeof NodePalette>;
+export default NodePalette;

package/dist/components/molecules/NodePalette/NodePaletteStory.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import NodePalette from './NodePalette.svelte';
+	import { DEFAULT_BLUEPRINT_NODE_TYPES } from '../../../utils/nodeGraph.js';
+</script>
+
+<div class="h-[420px] w-72 rounded-xl border border-border bg-surface-elevated">
+	<NodePalette
+		nodeTypes={DEFAULT_BLUEPRINT_NODE_TYPES}
+		onselect={(t) => console.log('select', t.type)}
+	/>
+</div>

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

package/dist/components/molecules/Poll/Poll.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/svelte';
 declare const meta: {
     title: string;
     component: import("svelte").Component<{
-        example?: "multiple" | "cards" | "release" | "closed" | "results" | "binary" | "changeable";
+        example?: "closed" | "multiple" | "cards" | "release" | "results" | "binary" | "changeable";
         size?: import("./Poll.svelte.ts").PollSize;
         layout?: import("./Poll.svelte.ts").PollLayout;
         showResults?: boolean;

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

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

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { MediaClip, MediaTrack } from '../../../utils/mediaTracks.js';
+	import { findClipAt } from '../../../utils/mediaTracks.js';
+
+	interface ProgramMonitorProps {
+		width?: number;
+		height?: number;
+		background?: string;
+		currentTimeMs?: number;
+		tracks?: MediaTrack[];
+		class?: string;
+	}
+
+	let {
+		width = 1280,
+		height = 720,
+		background = '#0a0a0a',
+		currentTimeMs = 0,
+		tracks = [],
+		class: className = ''
+	}: ProgramMonitorProps = $props();
+
+	const activeVideo = $derived(
+		findClipAt(tracks, currentTimeMs, 'video') ?? findClipAt(tracks, currentTimeMs, 'image')
+	);
+	const activeAudio = $derived(findClipAt(tracks, currentTimeMs, 'audio'));
+
+	function sourceTime(clip: MediaClip): number {
+		const trim = clip.trimInMs ?? 0;
+		return Math.max(0, currentTimeMs - clip.startMs + trim) / 1000;
+	}
+</script>
+
+<div
+	class={[
+		'relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg border border-border',
+		className
+	]}
+	style:background
+	style:aspect-ratio={`${width} / ${height}`}
+>
+	{#if activeVideo?.src && activeVideo.kind === 'video'}
+		<video
+			src={activeVideo.src}
+			class="h-full w-full object-contain"
+			muted
+			playsinline
+			currentTime={sourceTime(activeVideo)}
+		></video>
+	{:else if activeVideo?.src && activeVideo.kind === 'image'}
+		<img src={activeVideo.src} alt={activeVideo.name} class="h-full w-full object-contain" />
+	{:else if activeVideo}
+		<div class="flex flex-col items-center gap-2 text-secondary">
+			<span class="rounded-md bg-surface-overlay px-3 py-1.5 text-sm font-medium text-primary">
+				{activeVideo.name}
+			</span>
+			<span class="text-xs text-muted">No media source</span>
+		</div>
+	{:else}
+		<span class="text-sm text-muted">No clip at playhead</span>
+	{/if}
+
+	{#if activeAudio?.src}
+		<audio src={activeAudio.src} currentTime={sourceTime(activeAudio)} class="hidden"></audio>
+	{/if}
+
+	<div
+		class="pointer-events-none absolute bottom-2 left-2 rounded bg-black/50 px-2 py-0.5 font-mono text-[10px] text-white"
+	>
+		{Math.round(currentTimeMs)}ms
+	</div>
+</div>

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

@@ -0,0 +1,12 @@
+import type { MediaTrack } from '../../../utils/mediaTracks.js';
+interface ProgramMonitorProps {
+    width?: number;
+    height?: number;
+    background?: string;
+    currentTimeMs?: number;
+    tracks?: MediaTrack[];
+    class?: string;
+}
+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;