graphgarden-web 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import Graph from "graphology";
+import Sigma from "sigma";
+export interface GraphGardenConfig {
+    localNodeColor: string;
+    friendNodeColor: string;
+    internalEdgeColor: string;
+    friendEdgeColor: string;
+    labelColor: string;
+    nodeSize: number;
+    edgeSize: number;
+    labelSize: number;
+    iterations: number;
+}
+export declare const DEFAULT_CONFIG: GraphGardenConfig;
+export interface GraphGardenNode {
+    url: string;
+    title: string;
+}
+export interface GraphGardenEdge {
+    source: string;
+    target: string;
+    type: "internal" | "friend";
+}
+export interface GraphGardenSite {
+    title: string;
+    description?: string;
+    language?: string;
+}
+/** The top-level shape of a `graphgarden.json` file. */
+export interface GraphGardenFile {
+    version: string;
+    generated_at: string;
+    base_url: string;
+    site: GraphGardenSite;
+    nodes: GraphGardenNode[];
+    edges: GraphGardenEdge[];
+}
+/** Runtime check that `value` matches the {@link GraphGardenFile} shape. */
+export declare function isGraphGardenFile(value: unknown): value is GraphGardenFile;
+/** Build a graphology `Graph` from a parsed {@link GraphGardenFile}. */
+export declare function buildGraph(file: GraphGardenFile, config: GraphGardenConfig): Graph;
+/**
+ * Assign random initial positions then run ForceAtlas2 to compute
+ * a stable layout. Mutates node `x`/`y` attributes in place.
+ */
+export declare function assignLayout(graph: Graph, iterations: number): void;
+/** Fetch friend sites' graphs and merge their nodes and edges into `graph`. */
+export declare function fetchFriendGraphs(graph: Graph, config: GraphGardenConfig): Promise<Graph>;
+/**
+ * `<graph-garden>` custom element — fetches the site's own
+ * `graphgarden.json`, builds a graphology `Graph`, merges friend
+ * graphs, and renders an interactive force-directed visualisation
+ * via Sigma.js.
+ */
+export declare class GraphGarden extends HTMLElement {
+    static readonly tagName: "graph-garden";
+    /** The local graph built from the protocol file, or `null` before loading. */
+    graph: Graph | null;
+    /** The Sigma renderer instance, or `null` before rendering. */
+    renderer: Sigma | null;
+    /** Shadow DOM container for the Sigma canvas. */
+    private container;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private resolveConfig;
+    private initRenderer;
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "graphgarden-web",
+  "version": "0.1.0",
+  "description": "Web component that renders an interactive GraphGarden node graph",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bruits/graphgarden",
+    "directory": "packages/graphgarden-web"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/graphgarden.js",
+  "module": "dist/graphgarden.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/graphgarden.js",
+      "default": "./dist/graphgarden.js"
+    },
+    "./iife": "./dist/graphgarden.iife.js"
+  },
+  "dependencies": {
+    "graphology": "^0.25",
+    "graphology-layout-forceatlas2": "^0.10",
+    "sigma": "^3"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25",
+    "happy-dom": "^18",
+    "tsx": "^4",
+    "typescript": "^5",
+    "vitest": "^3"
+  },
+  "scripts": {
+    "build": "tsx build.ts && tsc",
+    "dev": "tsx watch build.ts",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}