@bavuchoko/edge-node 0.0.0-stage → 0.1.0

package/dist/theme.d.ts

@@ -0,0 +1,108 @@
+import type { CSSProperties } from 'react';
+export type GraphColorMode = 'dark' | 'light';
+export type GraphTheme = {
+    background?: string;
+    /** Dot grid overlay color. Set to 'transparent' to hide. */
+    gridColor?: string;
+    gridSize?: number;
+    node?: {
+        background?: string;
+        border?: string;
+        borderHover?: string;
+        borderSelected?: string;
+        title?: string;
+        subtitle?: string;
+        shadow?: string;
+        radius?: number;
+        handle?: string;
+        handleActive?: string;
+        badgeBackground?: string;
+        badgeText?: string;
+        statusSuccess?: string;
+        statusError?: string;
+        statusIdle?: string;
+    };
+    edge?: {
+        color?: string;
+        hoverColor?: string;
+        selectedColor?: string;
+        width?: number;
+        hoverWidth?: number;
+        selectedWidth?: number;
+        /** Invisible hit area width in screen px */
+        hitWidth?: number;
+        draftColor?: string;
+        draftWidth?: number;
+        draftDash?: string;
+        /** Arrowhead length in screen px. 0 hides arrows. */
+        arrowSize?: number;
+        /** Dash pattern for `kind: 'optional'` edges. */
+        optionalDash?: string;
+        labelColor?: string;
+    };
+    hud?: {
+        color?: string;
+    };
+    /** Colors used when a node is hovered to show its dependency chain. */
+    dependency?: {
+        /** Nodes the hovered node depends on (incoming side). */
+        upstreamColor?: string;
+        /** Nodes that depend on the hovered node (outgoing side). */
+        downstreamColor?: string;
+        /** Opacity of nodes/edges outside the chain. */
+        dimOpacity?: number;
+    };
+};
+export type ResolvedGraphTheme = {
+    background: string;
+    gridColor: string;
+    gridSize: number;
+    node: {
+        background: string;
+        border: string;
+        borderHover: string;
+        borderSelected: string;
+        title: string;
+        subtitle: string;
+        shadow: string;
+        radius: number;
+        handle: string;
+        handleActive: string;
+        badgeBackground: string;
+        badgeText: string;
+        statusSuccess: string;
+        statusError: string;
+        statusIdle: string;
+    };
+    edge: {
+        color: string;
+        hoverColor: string;
+        selectedColor: string;
+        width: number;
+        hoverWidth: number;
+        selectedWidth: number;
+        hitWidth: number;
+        draftColor: string;
+        draftWidth: number;
+        draftDash: string;
+        arrowSize: number;
+        optionalDash: string;
+        labelColor: string;
+    };
+    hud: {
+        color: string;
+    };
+    dependency: {
+        upstreamColor: string;
+        downstreamColor: string;
+        dimOpacity: number;
+    };
+};
+export declare const darkGraphTheme: ResolvedGraphTheme;
+export declare const lightGraphTheme: ResolvedGraphTheme;
+/** Alias of `darkGraphTheme`, the theme used when no color mode is given. */
+export declare const defaultGraphTheme: ResolvedGraphTheme;
+export declare const graphThemes: Record<GraphColorMode, ResolvedGraphTheme>;
+/** Fills a partial theme from the preset for `mode`. */
+export declare function resolveGraphTheme(partial?: GraphTheme, mode?: GraphColorMode): ResolvedGraphTheme;
+export declare function themeToCssVars(theme: ResolvedGraphTheme): CSSProperties;

package/dist/types.d.ts

@@ -0,0 +1,86 @@
+export type NodeId = string;
+export type EdgeId = string;
+export type Point = {
+    x: number;
+    y: number;
+};
+export type NodeStatus = 'success' | 'error' | 'idle';
+export type NodeDetail = {
+    label: string;
+    value: string | number;
+};
+export type NodeData = {
+    title: string;
+    subtitle?: string;
+    status: NodeStatus;
+    stats?: string;
+    badge?: string;
+    /** Rows shown when the node is expanded (click its content area). */
+    details?: NodeDetail[];
+};
+/**
+ * `TData` is free-form when you draw cards yourself with `renderNode`; the
+ * built-in card reads the `NodeData` fields.
+ */
+export type GraphNode<TData = NodeData> = {
+    id: NodeId;
+    position: Point;
+    width: number;
+    height: number;
+    data: TData;
+};
+/**
+ * - `required`: target cannot run without source (solid line)
+ * - `optional`: soft / ordering-only dependency (dashed line)
+ */
+export type EdgeKind = 'required' | 'optional';
+/** Directed edge: `target` depends on `source`. */
+export type GraphEdge = {
+    id: EdgeId;
+    source: NodeId;
+    target: NodeId;
+    /** Defaults to `'required'`. */
+    kind?: EdgeKind;
+    /** Short text drawn at the middle of the edge. */
+    label?: string;
+    /**
+     * The target's relation to the source, read as "target <relation> source"
+     * (e.g. `'runs on'`). Shown on the target's card while the source is hovered.
+     */
+    relation?: string;
+    /**
+     * The source's relation to the target, read as "source <inverseRelation> target"
+     * (e.g. `'hosts'`). Shown on the source's card while the target is hovered.
+     */
+    inverseRelation?: string;
+};
+/** Edge fields the user can edit after drawing a connection. */
+export type EdgePatch = Partial<Pick<GraphEdge, 'kind' | 'label' | 'relation' | 'inverseRelation'>>;
+export type GraphEdgeInput = Omit<GraphEdge, 'id'>;
+export type Viewport = {
+    x: number;
+    y: number;
+    zoom: number;
+};
+export type HandleSide = 'left' | 'right';
+export type Selection = {
+    type: 'node';
+    id: NodeId;
+}
+/** `created` is set right after the edge was drawn, so its editor can grab focus. */
+ | {
+    type: 'edge';
+    id: EdgeId;
+    created?: boolean;
+} | null;
+export type ConnectionDraft = {
+    sourceId: NodeId;
+    pointer: Point;
+};
+export type GraphState<TData = NodeData> = {
+    nodes: Record<NodeId, GraphNode<TData>>;
+    edges: Record<EdgeId, GraphEdge>;
+    viewport: Viewport;
+    selection: Selection;
+    connectionDraft: ConnectionDraft | null;
+};

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@bavuchoko/edge-node",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "React node-graph editor with pannable canvas, draggable nodes and connectable edges.",
+  "keywords": [
+    "react",
+    "node-editor",
+    "graph",
+    "dag",
+    "pipeline",
+    "dependency-graph",
+    "diagram",
+    "edges"
+  ],
+  "license": "MIT",
+  "author": "bavuchoko",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bavuchoko/edge-node.git"
+  },
+  "homepage": "https://github.com/bavuchoko/edge-node#readme",
+  "bugs": {
+    "url": "https://github.com/bavuchoko/edge-node/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --mode lib && tsc -p tsconfig.lib.json && node -e \"require('node:fs').copyFileSync('src/graph/graph.css','dist/style.css')\"",
+    "prepack": "npm run build:lib",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "oxlint": "^1.71.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "~6.0.2",
+    "vite": "^8.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}