@intinyagroup/diagram 0.1.0

package/dist/FlowCanvas.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { SvelteFlow, Background, Controls, MiniMap } from "@xyflow/svelte";
+  import type { Snippet } from "svelte";
+  import type {
+    GraphEdge,
+    GraphNode,
+    GraphNodeTypeMap,
+    GraphViewport,
+  } from "./types.js";
+
+  let {
+    nodes = [],
+    edges = [],
+    nodeTypes = {},
+    viewport,
+    fitView = true,
+    showBackground = true,
+    showControls = true,
+    showMiniMap = false,
+    class: className,
+    children,
+    onConnect,
+    onNodeClick,
+    onPaneClick,
+  }: {
+    nodes?: GraphNode[];
+    edges?: GraphEdge[];
+    nodeTypes?: GraphNodeTypeMap;
+    viewport?: GraphViewport;
+    fitView?: boolean;
+    showBackground?: boolean;
+    showControls?: boolean;
+    showMiniMap?: boolean;
+    class?: string;
+    children?: Snippet;
+    onConnect?: (connection: unknown) => void;
+    onNodeClick?: (event: MouseEvent | TouchEvent, node: GraphNode) => void;
+    onPaneClick?: (event: MouseEvent) => void;
+  } = $props();
+
+  const flowNodes = $derived(
+    nodes.map((node) => ({ ...node, data: node.data ?? {} })),
+  );
+</script>
+
+<div
+  class={`relative h-full min-h-0 w-full overflow-hidden ${className ?? ""}`}
+  data-slot="flow-canvas"
+>
+  <SvelteFlow
+    nodes={flowNodes as any}
+    edges={edges as any}
+    {nodeTypes}
+    {fitView}
+    {viewport}
+    onconnect={(connection) => onConnect?.(connection)}
+    onnodeclick={({ event, node }) => onNodeClick?.(event, node as GraphNode)}
+    onpaneclick={({ event }) => onPaneClick?.(event)}
+  >
+    {#if showBackground}<Background />{/if}
+    {#if showControls}<Controls />{/if}
+    {#if showMiniMap}<MiniMap />{/if}
+    {@render children?.()}
+  </SvelteFlow>
+</div>

package/dist/FlowCanvas.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { GraphEdge, GraphNode, GraphNodeTypeMap, GraphViewport } from "./types.js";
+type $$ComponentProps = {
+    nodes?: GraphNode[];
+    edges?: GraphEdge[];
+    nodeTypes?: GraphNodeTypeMap;
+    viewport?: GraphViewport;
+    fitView?: boolean;
+    showBackground?: boolean;
+    showControls?: boolean;
+    showMiniMap?: boolean;
+    class?: string;
+    children?: Snippet;
+    onConnect?: (connection: unknown) => void;
+    onNodeClick?: (event: MouseEvent | TouchEvent, node: GraphNode) => void;
+    onPaneClick?: (event: MouseEvent) => void;
+};
+declare const FlowCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlowCanvas = ReturnType<typeof FlowCanvas>;
+export default FlowCanvas;

package/dist/GraphToolbar.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  let { children, class: className }: { children?: Snippet; class?: string } =
+    $props();
+</script>
+
+<div
+  class={`pointer-events-auto absolute left-3 top-3 z-10 flex items-center gap-1 rounded-lg border border-border bg-card/95 p-1 shadow-lg backdrop-blur-xl ${className ?? ""}`}
+  data-slot="graph-toolbar"
+>
+  {@render children?.()}
+</div>

package/dist/GraphToolbar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children?: Snippet;
+    class?: string;
+};
+declare const GraphToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type GraphToolbar = ReturnType<typeof GraphToolbar>;
+export default GraphToolbar;

package/dist/InspectorShell.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  let {
+    title = "Inspector",
+    description,
+    children,
+    class: className,
+  }: {
+    title?: string;
+    description?: string;
+    children?: Snippet;
+    class?: string;
+  } = $props();
+</script>
+
+<aside
+  class={`flex h-full w-80 flex-col border-l border-border bg-card text-card-foreground ${className ?? ""}`}
+  data-slot="inspector-shell"
+  aria-label={title}
+>
+  <header class="shrink-0 border-b border-border px-4 py-3">
+    <h2 class="text-sm font-semibold">{title}</h2>
+    {#if description}<p class="mt-1 text-xs text-muted-foreground">
+        {description}
+      </p>{/if}
+  </header>
+  <div class="min-h-0 flex-1 overflow-y-auto p-4">
+    {@render children?.()}
+  </div>
+</aside>

package/dist/InspectorShell.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    children?: Snippet;
+    class?: string;
+};
+declare const InspectorShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type InspectorShell = ReturnType<typeof InspectorShell>;
+export default InspectorShell;

package/dist/graph-adapter.d.ts

@@ -0,0 +1,16 @@
+import type { GraphEdge, GraphNode, GraphViewport } from "./types.js";
+export type GraphDocument = {
+    version: 1;
+    nodes: GraphNode[];
+    edges: GraphEdge[];
+    viewport?: GraphViewport;
+};
+export declare function graphToJson(document: GraphDocument): string;
+export declare function graphFromJson(input: string): GraphDocument;
+export declare function createGraphAdapter(initial?: GraphDocument): {
+    readonly snapshot: GraphDocument;
+    setNodes(nodes: GraphNode[]): void;
+    setEdges(edges: GraphEdge[]): void;
+    setViewport(viewport: GraphViewport): void;
+    toJSON(): string;
+};

package/dist/graph-adapter.js

@@ -0,0 +1,40 @@
+export function graphToJson(document) {
+    return JSON.stringify(document, null, 2);
+}
+export function graphFromJson(input) {
+    const parsed = JSON.parse(input);
+    if (!parsed || typeof parsed !== "object")
+        throw new Error("Graph document must be an object");
+    const value = parsed;
+    if (value.version !== 1 ||
+        !Array.isArray(value.nodes) ||
+        !Array.isArray(value.edges)) {
+        throw new Error("Unsupported graph document");
+    }
+    return {
+        version: 1,
+        nodes: value.nodes,
+        edges: value.edges,
+        viewport: value.viewport,
+    };
+}
+export function createGraphAdapter(initial = { version: 1, nodes: [], edges: [] }) {
+    let document = structuredClone(initial);
+    return {
+        get snapshot() {
+            return structuredClone(document);
+        },
+        setNodes(nodes) {
+            document = { ...document, nodes: structuredClone(nodes) };
+        },
+        setEdges(edges) {
+            document = { ...document, edges: structuredClone(edges) };
+        },
+        setViewport(viewport) {
+            document = { ...document, viewport: { ...viewport } };
+        },
+        toJSON() {
+            return graphToJson(document);
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Handle as FlowHandle, Position } from "@xyflow/svelte";
+export { default as FlowCanvas } from "./FlowCanvas.svelte";
+export { default as GraphToolbar } from "./GraphToolbar.svelte";
+export { default as InspectorShell } from "./InspectorShell.svelte";
+export type { GraphNode, GraphEdge, GraphHandle, GraphViewport, GraphChange, GraphNodeTypeMap, InspectorField, } from "./types.js";
+export { createGraphAdapter, graphToJson, graphFromJson, } from "./graph-adapter.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { Handle as FlowHandle, Position } from "@xyflow/svelte";
+export { default as FlowCanvas } from "./FlowCanvas.svelte";
+export { default as GraphToolbar } from "./GraphToolbar.svelte";
+export { default as InspectorShell } from "./InspectorShell.svelte";
+export { createGraphAdapter, graphToJson, graphFromJson, } from "./graph-adapter.js";

package/dist/types.d.ts

@@ -0,0 +1,74 @@
+import type { Component, Snippet } from "svelte";
+export type GraphViewport = {
+    x: number;
+    y: number;
+    zoom: number;
+};
+export type GraphHandle = {
+    id: string;
+    type: "source" | "target";
+    position?: "top" | "right" | "bottom" | "left";
+    dataType?: string;
+    multiple?: boolean;
+};
+export type GraphNode = {
+    id: string;
+    type: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    data?: Record<string, unknown>;
+    handles?: GraphHandle[];
+    selected?: boolean;
+    hidden?: boolean;
+};
+export type GraphEdge = {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+    type?: string;
+    data?: Record<string, unknown>;
+    selected?: boolean;
+    animated?: boolean;
+};
+export type GraphChange = {
+    type: "node-position";
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+} | {
+    type: "node-select";
+    id: string;
+    selected: boolean;
+} | {
+    type: "node-remove";
+    id: string;
+} | {
+    type: "edge-remove";
+    id: string;
+} | {
+    type: "edge-add";
+    edge: GraphEdge;
+};
+export type GraphNodeTypeMap = Record<string, Component>;
+export type InspectorField = {
+    id: string;
+    label: string;
+    type: "text" | "number" | "select" | "boolean" | "textarea" | "secret";
+    description?: string;
+    options?: Array<{
+        label: string;
+        value: string;
+    }>;
+    required?: boolean;
+};
+export type InspectorShellProps = {
+    title?: string;
+    description?: string;
+    children?: Snippet;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@intinyagroup/diagram",
+  "version": "0.1.0",
+  "description": "Reusable Svelte node-graph and workflow canvas primitives",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "svelte-package -o dist",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@intinyagroup/ui": "workspace:*",
+    "@xyflow/svelte": "^1.6.6"
+  },
+  "devDependencies": {
+    "@intinyagroup/vitest-preset": "workspace:*",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "svelte": "^5.55.2",
+    "svelte-check": "^4.4.6",
+    "typescript": "^6.0.2",
+    "vitest": "^5.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}