@r2digisolutions/components 0.1.7 → 0.3.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/PdfViewer/PdfViewer.svelte.d.ts

@@ -15,6 +15,6 @@ interface PdfViewerProps {
     /** Custom page body for the active page. Receives page index (1-based). */
     children?: Snippet<[number]>;
 }
-declare const PdfViewer: import("svelte").Component<PdfViewerProps, {}, "page" | "zoom">;
+declare const PdfViewer: import("svelte").Component<PdfViewerProps, {}, "zoom" | "page">;
 type PdfViewer = ReturnType<typeof PdfViewer>;
 export default PdfViewer;

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 = {};