@bemedev/mind-flow 0.0.1

package/lib/ui/components/FlowChart.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowChart.context.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.context.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,KAAK,EAAU,MAAM,6BAA6B,CAAC;AAQjE,4EAA4E;AAC5E,KAAK,UAAU,GAAG;IAChB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,MAAM,EAAE,KAAK,CAAC;IACd,gEAAgE;IAChE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qEAAqE;IACrE,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC;AAEF,uEAAuE;AACvE,MAAM,MAAM,IAAI,GAAG;IACjB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,2BAA2B;IAC3B,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAWF;;;GAGG;AACH,eAAO,MAAO,QAAQ,sCAAE,OAAO;;;;sCAUK,MAAM,WAAW,MAAM,KAAG,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiTlE,CAAC"}

package/lib/ui/components/FlowChart.d.ts

@@ -0,0 +1,63 @@
+import { inferT } from '@bemedev/app/typings';
+import { Component } from 'solid-js';
+import { edgeJSON, nodeJSON } from '../../services/main.typings';
+/**
+ * Serialized node properties type inferred from schema
+ * {@linkcode nodeJSON}.
+ */
+export type NodeProps = inferT<typeof nodeJSON>;
+/**
+ * Serialized edge properties type inferred from schema
+ * {@linkcode edgeJSON}.
+ */
+export type EdgeProps = inferT<typeof edgeJSON>;
+/**
+ * Configuration options and callback handlers for the {@linkcode FlowChart}
+ * component.
+ */
+export type FlowProps = {
+    /** Initial flowchart state configuration with nodes and edges. */
+    config?: {
+        nodes?: (NodeProps & {
+            id: string;
+        })[];
+        edges?: (EdgeProps & {
+            id: string;
+        })[];
+    };
+    /**
+     * Callback triggered when a new node is created.
+     *
+     * @param node - The created node object of type {@linkcode NodeProps}.
+     */
+    onNodeAdded?: (node: NodeProps) => void;
+    /**
+     * Callback triggered when a node is deleted.
+     *
+     * @param nodeId - The identifier of the deleted node.
+     */
+    onNodeDeleted?: (nodeId: string) => void;
+    /**
+     * Callback triggered when an edge is created.
+     *
+     * @param edge - The created edge object of type {@linkcode EdgeProps}.
+     */
+    onEdgeAdded?: (edge: EdgeProps) => void;
+    /**
+     * Callback triggered when an edge is deleted.
+     *
+     * @param edgeId - The identifier of the deleted edge.
+     */
+    onEdgeDeleted?: (edgeId: string) => void;
+};
+/**
+ * Flowchart board canvas component that renders interactive nodes, edges,
+ * pan/zoom, and toolbar controls.
+ *
+ * @param props - Flowchart configuration and event handlers of type
+ *   {@linkcode FlowProps}.
+ *
+ * @returns The rendered Solid component.
+ */
+export declare const FlowChart: Component<FlowProps>;
+//# sourceMappingURL=FlowChart.d.ts.map

package/lib/ui/components/FlowChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowChart.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAsB,MAAM,UAAU,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAKtE;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEhD;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEhD;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,kEAAkE;IAClE,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,CAAC,SAAS,GAAG;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,EAAE,CAAC;QACvC,KAAK,CAAC,EAAE,CAAC,SAAS,GAAG;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,EAAE,CAAC;KACxC,CAAC;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAIF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAAE,SAAS,CAAC,SAAS,CA6C1C,CAAC"}

package/lib/ui/components/FlowChart.data.d.ts

@@ -0,0 +1,67 @@
+import { NodeProps } from './FlowChart';
+/**
+ * Horizontal gap in pixels between a parent node and newly created child
+ * node.
+ */
+export declare const PARENT_CHILD_GAP_WIDTH = 100;
+/** Border width in pixels for a node container. */
+export declare const NODE_BORDER_WIDTH = 1.5;
+/** Diameter in pixels of a node connection handle. */
+export declare const HANDLE_SIZE = 12;
+/** Radius in pixels of a node connection handle. */
+export declare const HANDLE_RADIUS: number;
+/** Top margin in pixels for positioning connection handles. */
+export declare const HANDLE_MARGIN_TOP = 12;
+/** Horizontal container offset in pixels for handle placement. */
+export declare const HANDLE_CONTAINER_OFFSET_X = 18;
+/** Y-axis center coordinate in pixels of a handle. */
+export declare const HANDLE_CENTER_Y: number;
+/** X-axis center offset in pixels from the node container edge. */
+export declare const HANDLE_CENTER_X_OFFSET: number;
+/** Default X offset in pixels for input connection handles. */
+export declare const DEFAULT_INPUT_OFFSET_X: number;
+/** Default Y offset in pixels for input connection handles. */
+export declare const DEFAULT_INPUT_OFFSET_Y: number;
+/** Default 2D offset coordinates for input connection handles. */
+export declare const DEFAULT_INPUT_OFFSET: {
+    x: number;
+    y: number;
+};
+/**
+ * Dimensions representing width and height of the flow chart container
+ * canvas.
+ */
+export declare const CONTAINER_DIMENSIONS: {
+    WIDTH: number;
+    HEIGHT: number;
+};
+/**
+ * Computes default output handle offset coordinates given a node width.
+ *
+ * @param width - Node width in pixels, defaults to `0`.
+ *
+ * @returns 2D offset coordinates for the output handle.
+ */
+export declare const getDefaultOutputOffset: (width?: number) => {
+    x: number;
+    y: number;
+};
+/** Top offset in pixels for node action toolbars. */
+export declare const TOOLBAR_TOP_OFFSET = 30;
+/** Safety buffer in pixels applied above the toolbar. */
+export declare const TOOLBAR_BUFFER = 5;
+/**
+ * Boundary padding constraints for node dragging and positioning within
+ * the viewport.
+ */
+export declare const BOUNDS_CONSTRAINTS: {
+    horizontal: number;
+    vertical: number;
+};
+/** Multiplier factor used to compute canvas virtual scroll dimensions. */
+export declare const CANVAS_FACTOR = 5;
+/** Default node items provided when no initial configuration is given. */
+export declare const DEFAULT_NODES: (NodeProps & {
+    id: string;
+})[];
+//# sourceMappingURL=FlowChart.data.d.ts.map

package/lib/ui/components/FlowChart.data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowChart.data.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C;;;GAGG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAG1C,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,sDAAsD;AACtD,eAAO,MAAM,WAAW,KAAK,CAAC;AAE9B,oDAAoD;AACpD,eAAO,MAAM,aAAa,QAAkB,CAAC;AAE7C,+DAA+D;AAC/D,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,kEAAkE;AAClE,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAE5C,sDAAsD;AACtD,eAAO,MAAM,eAAe,QAAoC,CAAC;AAEjE,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,QAC4B,CAAC;AAEhE,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,QAA0B,CAAC;AAE9D,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,QAAkB,CAAC;AAEtD,kEAAkE;AAClE,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;CAAgC,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GAAI,cAAS;;;CAG9C,CAAC;AAEH,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,yDAAyD;AACzD,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;CAG9B,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,aAAa,IAAI,CAAC;AAG/B,0EAA0E;AAC1E,eAAO,MAAM,aAAa,EAAE,CAAC,SAAS,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,EAOvD,CAAC"}

package/lib/ui/components/NodeComponent.d.ts

@@ -0,0 +1,34 @@
+import { Component } from 'solid-js';
+declare module 'solid-js' {
+    namespace JSX {
+        interface Directives {
+            draggable: any;
+        }
+    }
+}
+/** Properties for rendering an individual flowchart node component. */
+type Props = {
+    /** Unique identifier of the node. */
+    id: string;
+    /** Horizontal position of the node in board coordinates. */
+    x: number;
+    /** Vertical position of the node in board coordinates. */
+    y: number;
+    /** Optional header label for the node. */
+    label?: string;
+    /** Body content text of the node. */
+    content: string;
+    /** Whether the node has an input handle. */
+    input: boolean;
+};
+/**
+ * Interactive flowchart node component supporting dragging, selection,
+ * handle connections, and child/sibling creation.
+ *
+ * @param props - Node rendering properties of type {@linkcode Props}.
+ *
+ * @returns The rendered Solid component.
+ */
+export declare const NodeComponent: Component<Props>;
+export {};
+//# sourceMappingURL=NodeComponent.d.ts.map

package/lib/ui/components/NodeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodeComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAoC,MAAM,UAAU,CAAC;AAWvE,OAAO,QAAQ,UAAU,CAAC;IACxB,UAAU,GAAG,CAAC;QACZ,UAAU,UAAU;YAClB,SAAS,EAAE,GAAG,CAAC;SAChB;KACF;CACF;AAED,uEAAuE;AACvE,KAAK,KAAK,GAAG;IACX,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,CAAC,EAAE,MAAM,CAAC;IACV,0DAA0D;IAC1D,CAAC,EAAE,MAAM,CAAC;IACV,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,SAAS,CAAC,KAAK,CAiP1C,CAAC"}

package/lib/ui/components/NodesBoard.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'solid-js';
+/**
+ * Interactive board component containing the drag-drop viewport, zoom
+ * controls, panning gestures, and rendered nodes/edges.
+ *
+ * @returns The rendered Solid component.
+ */
+export declare const NodesBoard: Component;
+//# sourceMappingURL=NodesBoard.d.ts.map

package/lib/ui/components/NodesBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodesBoard.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodesBoard.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,SAAS,EAOV,MAAM,UAAU,CAAC;AAOlB;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,SA6QxB,CAAC"}

package/lib/ui/components/classes.d.ts

@@ -0,0 +1,6 @@
+/**
+ * List of Tailwind CSS class names used across flowchart UI components to
+ * ensure compilation safelist.
+ */
+export declare const CLASSES: string[];
+//# sourceMappingURL=classes.d.ts.map

package/lib/ui/components/classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classes.d.ts","sourceRoot":"","sources":["../../../src/ui/components/classes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,OAAO,UAgFnB,CAAC"}

package/package.json

@@ -0,0 +1,146 @@
+{
+  "name": "@bemedev/mind-flow",
+  "version": "0.0.1",
+  "description": "Flow Chart UI library for Solid.js applications",
+  "keywords": [
+    "diagram",
+    "flow",
+    "flowchart",
+    "solid-js",
+    "ui-library"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "chlbri",
+    "email": "bri_lvi@icloud.com",
+    "url": "https://bemedev.vercel.app"
+  },
+  "maintainers": [
+    {
+      "email": "bri_lvi@icloud.com",
+      "name": "chlbri",
+      "url": "https://bemedev.vercel.app"
+    }
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "node": {
+        "import": "./lib/server.es.js",
+        "require": "./lib/server.cjs.js"
+      },
+      "browser": {
+        "import": "./lib/index.es.js",
+        "require": "./lib/index.cjs.js"
+      },
+      "import": "./lib/index.es.js",
+      "require": "./lib/index.cjs.js"
+    },
+    "./style.css": "./lib/output.css"
+  },
+  "contributors": [
+    {
+      "email": "bri_lvi@icloud.com",
+      "name": "chlbri",
+      "url": "https://bemedev.vercel.app"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chlbri/mind-app"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "type": "module",
+  "main": "lib/index.es.js",
+  "module": "lib/index.es.js",
+  "types": "lib/index.d.ts",
+  "dependencies": {
+    "dequal": "^2.0.3",
+    "nanoid": "^6.0.1"
+  },
+  "devDependencies": {
+    "@bemedev/app": "^1.11.0",
+    "@bemedev/app-cli": "^1.11.0",
+    "@bemedev/app-solidjs": "^1.11.0",
+    "@bemedev/fsf": "^1.0.1",
+    "@bemedev/rollup-config": "^0.2.2",
+    "@bemedev/vitest-alias": "^0.0.3",
+    "@bemedev/vitest-exclude": "^0.1.1",
+    "@bemedev/vitest-extended": "^1.5.3",
+    "@rollup/plugin-babel": "^7.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@size-limit/file": "^13.0.3",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.2.0",
+    "@vitest/coverage-v8": "^4.1.11",
+    "babel-preset-solid": "^1.9.15",
+    "glob": "^13.0.6",
+    "globals": "^17.11.0",
+    "husky": "^9.1.7",
+    "onchange": "^7.1.0",
+    "oxfmt": "^0.64.0",
+    "oxlint": "^1.79.0",
+    "pretty-quick": "^4.2.2",
+    "rimraf": "^6.1.3",
+    "rolldown": "^1.2.4",
+    "rollup": "^4.62.4",
+    "rollup-preset-solid": "^3.0.0",
+    "size-limit": "^13.0.3",
+    "solid-js": "^1.9.15",
+    "tailwindcss": "^4.3.3",
+    "tslib": "^2.8.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.2.1",
+    "vite-plugin-dts": "^5.0.3",
+    "vite-plugin-solid": "^2.11.14",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.1.11"
+  },
+  "peerDependencies": {
+    "@bemedev/app": "^1.11.0",
+    "@bemedev/app-solidjs": "^1.11.0",
+    "@thisbeyond/solid-dnd": "^0.7.5",
+    "solid-js": "^1.9.15"
+  },
+  "size-limit": [
+    {
+      "path": "lib/index.es.js",
+      "limit": "50 KB"
+    },
+    {
+      "path": "lib/index.cjs.js",
+      "limit": "50 KB"
+    }
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "pnpm rm:lib && pnpm run build:server && pnpm run build:client && pnpm run build:css",
+    "build:client": "vite build",
+    "build:server": "vite build --mode server",
+    "build:css": "pnpx @tailwindcss/cli -i ./input.css -o ../lib/output.css --minify --cwd ./src",
+    "build:css:watch": "pnpm run build:css --watch",
+    "pretest": "pnpm run build",
+    "posttest": "pnpm run size",
+    "_ci": "pnpm run lint && pnpm run test",
+    "ci": "CI_START=$(date +%s) && pnpm run _ci && pnpm run p-q && echo \"\n✅ CI takes $(($(date +%s) - CI_START))s\n\"",
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check",
+    "_lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "lint": "pnpm run fmt && pnpm run lint:fix",
+    "p-q": "pretty-quick",
+    "rm": "pnpx rimraf ./node_modules ./pnpm-lock.yaml",
+    "rm:lib": "pnpx rimraf -- lib",
+    "size": "size-limit",
+    "test": "pnpm run test:coverage --no-coverage",
+    "test:only": "pnpm run test:coverage --no-coverage",
+    "test:coverage": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
+  }
+}

package/src/README.md

@@ -0,0 +1,36 @@
+# Flow Chart UI Library
+
+This is a self-contained UI library for creating interactive flow charts in
+Solid.js applications.
+
+## Structure
+
+- `services/` - State management and business logic
+- `ui/components/` - Solid.js components for the flow chart
+- `helpers/` - Utility functions
+- `index.ts` - Public API exports
+
+## Usage
+
+Import the library components from `~/`:
+
+```tsx
+import { FlowChart, Provider } from '~/';
+
+export const MyComponent = () => {
+  return (
+    <Provider>
+      <FlowChart />
+    </Provider>
+  );
+};
+```
+
+## Exports
+
+- `FlowChart` - Main flow chart component
+- `Provider` - Context provider for flow chart state
+- `useFlow` - Hook to access flow chart context
+- `NodeProps` - Type definition for node properties
+- `EdgeProps` - Type definition for edge properties
+- `Edge` - Type definition for edge data

package/src/helpers/createContext.ts

@@ -0,0 +1,37 @@
+import {
+  createContext as createSolidContext,
+  useContext,
+  type ParentComponent,
+} from 'solid-js';
+
+/** Context options type extracted from Solid's `createContext`. */
+type Options = Parameters<typeof createSolidContext>[1];
+
+/**
+ * Creates a Solid context provider component and a custom hook to consume
+ * it.
+ *
+ * @template T - The type of the context value.
+ *
+ * @param context - Factory function returning a non-nullable context value
+ *   of type `NonNullable<T>`.
+ * @param options - Optional context configuration of type
+ *   {@linkcode Options}.
+ *
+ * @returns A tuple containing the Provider component of type
+ *   {@linkcode ParentComponent}, the accessor hook, and the Solid context
+ *   object.
+ */
+export const createContext = <const T>(
+  context: () => NonNullable<T>,
+  options?: Options,
+) => {
+  const _context = createSolidContext(context(), options);
+
+  const Provider: ParentComponent = ({ children }) =>
+    _context.Provider({ value: _context.defaultValue, children });
+
+  const _useContext = () => useContext(_context);
+
+  return [Provider, _useContext, _context] as const;
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export type { NodeProps, EdgeProps } from './ui/components/FlowChart';
+export * from './ui/components/classes';
+export * from './ui/Flow';

package/src/input.css

@@ -0,0 +1,15 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+@utility no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+@utility pointer-events-all {
+  pointer-events: all;
+}