reflex-gravityui-graph 0.1.0__py3-none-any.whl

reflex_gravityui_graph/graph_canvas.jsx

@@ -0,0 +1,178 @@
+// Local React bridge for @gravity-ui/graph.
+//
+// @gravity-ui/graph is hook + imperative driven: you create a `Graph` instance
+// with the `useGraph` hook, push entities through `setEntities`, and start the
+// render loop once the canvas is ATTACHED. Reflex components cannot call React
+// hooks directly, so this thin bridge encapsulates the whole lifecycle and
+// exposes a flat, declarative prop surface that the Python wrapper drives.
+//
+// Everything below is plain, JSON-serializable data (blocks, connections,
+// settings, colors, constants) plus a handful of event callbacks, which is
+// exactly what Reflex can pass across the Python <-> JS boundary.
+//
+// Requires the npm dependency `@gravity-ui/graph` (declared as a
+// `lib_dependency` on the Python side so Reflex installs it).
+import React, { useEffect, useMemo } from "react";
+import { GraphState } from "@gravity-ui/graph";
+import {
+  GraphCanvas,
+  GraphBlock,
+  useGraph,
+  useGraphEvents,
+} from "@gravity-ui/graph/react";
+
+// Pull the `.id` off a list of canvas component instances (defensively, since
+// the exact shape of an event payload's component objects is internal).
+function idsOf(list) {
+  if (!Array.isArray(list)) return [];
+  return list
+    .map((item) => {
+      if (item == null) return null;
+      if (typeof item === "object") {
+        if ("id" in item) return item.id;
+        if (item.state && "id" in item.state) return item.state.id;
+      }
+      return item;
+    })
+    .filter((id) => id !== null && id !== undefined);
+}
+
+export function GravityGraph(props) {
+  const {
+    blocks = [],
+    connections = [],
+    settings = {},
+    colors = null,
+    constants = null,
+    configName = "reflex-gravityui-graph",
+    autoStart = true,
+    zoomOnStart = true,
+    zoomTarget = "center",
+    zoomPadding = 100,
+    renderHtmlBlocks = false,
+    onBlockSelectionChange = null,
+    onConnectionCreated = null,
+    onConnectionSelectionChange = null,
+    onCameraChange = null,
+    onBlockDragEnd = null,
+    onStateChange = null,
+    style = null,
+    className = null,
+  } = props;
+
+  // Assemble the optional view configuration (colors + constants) only when at
+  // least one of them is supplied, so we never clobber library defaults.
+  const viewConfiguration = useMemo(() => {
+    const view = {};
+    if (colors) view.colors = colors;
+    if (constants) view.constants = constants;
+    return view;
+  }, [JSON.stringify(colors), JSON.stringify(constants)]);
+
+  const { graph, setEntities, start } = useGraph({
+    name: configName,
+    settings,
+    viewConfiguration,
+  });
+
+  // Push the entity set whenever blocks/connections change. We stringify for
+  // the dependency array so structurally-equal updates don't thrash the canvas.
+  const blocksKey = JSON.stringify(blocks);
+  const connectionsKey = JSON.stringify(connections);
+  useEffect(() => {
+    if (!graph) return;
+    setEntities({ blocks, connections });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graph, setEntities, blocksKey, connectionsKey]);
+
+  // Live-apply settings changes after the first mount.
+  const settingsKey = JSON.stringify(settings);
+  useEffect(() => {
+    if (graph && graph.updateSettings) graph.updateSettings(settings);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graph, settingsKey]);
+
+  // Live-apply color / constant changes.
+  useEffect(() => {
+    if (!graph) return;
+    if (colors && graph.setColors) graph.setColors(colors);
+    if (constants && graph.setConstants) graph.setConstants(constants);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [graph, JSON.stringify(colors), JSON.stringify(constants)]);
+
+  // Subscribe to the graph events the Python wrapper cares about. Each payload
+  // is reduced to plain, serializable data before crossing back to Reflex.
+  useGraphEvents(graph, {
+    "blocks-selection-change": (detail) => {
+      if (!onBlockSelectionChange) return;
+      const changes = (detail && detail.changes) || {};
+      onBlockSelectionChange({
+        added: idsOf(changes.add),
+        removed: idsOf(changes.removed),
+      });
+    },
+    "connection-created": (detail) => {
+      if (!onConnectionCreated) return;
+      onConnectionCreated({
+        sourceBlockId: detail?.sourceBlockId ?? null,
+        targetBlockId: detail?.targetBlockId ?? null,
+        sourceAnchorId: detail?.sourceAnchorId ?? null,
+        targetAnchorId: detail?.targetAnchorId ?? null,
+      });
+    },
+    "connection-selection-change": (detail) => {
+      if (!onConnectionSelectionChange) return;
+      const changes = (detail && detail.changes) || {};
+      onConnectionSelectionChange({
+        added: idsOf(changes.add),
+        removed: idsOf(changes.removed),
+      });
+    },
+    "camera-change": (detail) => {
+      if (!onCameraChange) return;
+      onCameraChange({
+        x: detail?.x ?? null,
+        y: detail?.y ?? null,
+        scale: detail?.scale ?? null,
+      });
+    },
+    "block-drag-end": (detail) => {
+      if (!onBlockDragEnd) return;
+      onBlockDragEnd({
+        blockId: detail?.blockId ?? detail?.block?.id ?? null,
+        x: detail?.x ?? null,
+        y: detail?.y ?? null,
+      });
+    },
+  });
+
+  // When requested, render rich HTML/React blocks at detailed zoom levels. The
+  // default (canvas-only) path is the most robust and needs no registration.
+  const renderBlock = renderHtmlBlocks
+    ? (g, block) => (
+        <GraphBlock graph={g} block={block}>
+          {block.name ?? block.id}
+        </GraphBlock>
+      )
+    : undefined;
+
+  const wrapperStyle = style || { width: "100%", height: "600px" };
+
+  return (
+    <GraphCanvas
+      className={className}
+      style={wrapperStyle}
+      graph={graph}
+      renderBlock={renderBlock}
+      onStateChanged={({ state }) => {
+        if (onStateChange) onStateChange({ state });
+        if (state === GraphState.ATTACHED) {
+          if (autoStart) start();
+          if (zoomOnStart && graph) {
+            graph.zoomTo(zoomTarget, { padding: zoomPadding });
+          }
+        }
+      }}
+    />
+  );
+}

reflex_gravityui_graph/recipes.py

@@ -0,0 +1,287 @@
+"""Ergonomic helpers that reproduce the upstream @gravity-ui/graph examples.
+
+The library's Storybook ships many stories: hello-world blocks, anchored
+connections, bezier vs straight edges, colored/dashed connections, and large
+"layered" graphs with hundreds to thousands of nodes. These helpers build the
+equivalent ``blocks``/``connections``/``settings``/``colors`` payloads from a
+plain-Python API so the Reflex demo (and consumers) never hand-write the data.
+
+All functions return JSON-serializable structures ready to pass straight to
+``graph_canvas(...)``.
+"""
+
+from __future__ import annotations
+
+import math
+import random
+from typing import Any
+
+from .domain import (
+    DEFAULT_BLOCK_IS,
+    Anchor,
+    Block,
+    Connection,
+    EAnchorType,
+    GraphData,
+)
+
+# --------------------------------------------------------------------------- #
+# Settings presets (mirror the Storybook argTypes / story configs)
+# --------------------------------------------------------------------------- #
+
+
+# Valid @gravity-ui/graph ``canDrag`` (ECanDrag) values: which blocks the user
+# can move with the mouse. The library default is ``"none"`` (blocks immovable).
+_CAN_DRAG_VALUES = {"all", "onlySelected", "none"}
+
+
+def _normalize_can_drag(value: bool | str) -> str:
+    """Map an ergonomic ``can_drag_blocks`` flag to an ECanDrag string."""
+    if isinstance(value, bool):
+        return "all" if value else "none"
+    if value not in _CAN_DRAG_VALUES:
+        raise ValueError(
+            f"can_drag_blocks must be a bool or one of {sorted(_CAN_DRAG_VALUES)}, "
+            f"got {value!r}"
+        )
+    return value
+
+
+def default_settings(
+    *,
+    can_drag_camera: bool = True,
+    can_zoom_camera: bool = True,
+    can_drag_blocks: bool | str = True,
+    can_create_new_connections: bool = False,
+    use_bezier_connections: bool = True,
+    bezier_direction: str = "horizontal",
+    show_connection_arrows: bool = True,
+    show_connection_labels: bool = False,
+    use_blocks_anchors: bool = True,
+    scale_font_size: float = 1.0,
+) -> dict[str, Any]:
+    """Build a ``settings`` dict from the most common Storybook controls.
+
+    ``can_drag_blocks`` controls whether nodes can be moved with the mouse
+    (``canDrag``). The upstream default is ``"none"`` (immovable), so this
+    defaults to ``True`` -> ``"all"`` to keep the component interactive. Pass
+    ``False`` for ``"none"`` or ``"onlySelected"`` to restrict it.
+    """
+    return {
+        "canDragCamera": can_drag_camera,
+        "canZoomCamera": can_zoom_camera,
+        "canDrag": _normalize_can_drag(can_drag_blocks),
+        "canCreateNewConnections": can_create_new_connections,
+        "useBezierConnections": use_bezier_connections,
+        "bezierConnectionDirection": bezier_direction,
+        "showConnectionArrows": show_connection_arrows,
+        "showConnectionLabels": show_connection_labels,
+        "useBlocksAnchors": use_blocks_anchors,
+        "scaleFontSize": scale_font_size,
+    }
+
+
+# --------------------------------------------------------------------------- #
+# Color themes (mirror the "Theme" / "updateGraphColors" stories)
+# --------------------------------------------------------------------------- #
+
+LIGHT_THEME: dict[str, Any] = {
+    "canvas": {"layerBackground": "#f9f9f9", "belowLayerBackground": "#eaeaea",
+               "dots": "#d0d2ce", "border": "#EAEAEAFF"},
+    "block": {"background": "#e0e0e0", "border": "#dfdfdf", "text": "#272727",
+              "selectedBorder": "#FFCC00"},
+    "anchor": {"background": "#4a4a4a", "selectedBorder": "#FFCC00"},
+    "connection": {"background": "#272727", "selectedBackground": "#ecc113"},
+    "selection": {"background": "rgba(0,0,0,0.051)", "border": "#ecc113"},
+}
+
+DARK_THEME: dict[str, Any] = {
+    "canvas": {"layerBackground": "#1f1f1f", "belowLayerBackground": "#161616",
+               "dots": "#3a3a3a", "border": "#2a2a2aFF"},
+    "block": {"background": "#2c2c2c", "border": "#3a3a3a", "text": "#ffffff",
+              "selectedBorder": "#FFCC00"},
+    "anchor": {"background": "#c0c0c0", "selectedBorder": "#FFCC00"},
+    "connection": {"background": "#d0d0d0", "selectedBackground": "#ecc113"},
+    "selection": {"background": "rgba(255,255,255,0.08)", "border": "#ecc113"},
+}
+
+THEMES: dict[str, dict[str, Any]] = {"light": LIGHT_THEME, "dark": DARK_THEME}
+
+
+# --------------------------------------------------------------------------- #
+# Small, hand-built example graphs (the "Main/GraphEditor" basic stories)
+# --------------------------------------------------------------------------- #
+
+
+def one_block() -> GraphData:
+    """The hello-world story: a single block."""
+    return GraphData(
+        blocks=[Block(id="block_1", x=0, y=0, width=160, height=160,
+                      name="Block #1")],
+        connections=[],
+    )
+
+
+def two_connected_blocks(*, bezier: bool = True) -> GraphData:
+    """Two anchored blocks joined by one connection (straight or bezier)."""
+    a = Block(
+        id="action_1", x=-200, y=-120, width=160, height=160, name="Block #1",
+        anchors=[Anchor(id="out1", block_id="action_1", type=EAnchorType.OUT)],
+    )
+    b = Block(
+        id="action_2", x=220, y=140, width=160, height=160, name="Block #2",
+        anchors=[Anchor(id="in1", block_id="action_2", type=EAnchorType.IN)],
+    )
+    edge = Connection(
+        source_block_id="action_1", source_anchor_id="out1",
+        target_block_id="action_2", target_anchor_id="in1",
+    )
+    return GraphData(blocks=[a, b], connections=[edge])
+
+
+def colored_connections() -> GraphData:
+    """Mirrors the "ColoredConnections" story: per-edge colored/dashed styles."""
+    palette = ["#e74c3c", "#27ae60", "#2980b9", "#8e44ad"]
+    blocks: list[Block] = []
+    connections: list[Connection] = []
+    hub = Block(id="hub", x=0, y=0, width=160, height=120, name="Hub",
+                anchors=[Anchor(id="hub_out", block_id="hub",
+                                type=EAnchorType.OUT)])
+    blocks.append(hub)
+    for i, color in enumerate(palette):
+        angle = (i / len(palette)) * 2 * math.pi
+        leaf_id = f"leaf_{i}"
+        blocks.append(
+            Block(
+                id=leaf_id, x=int(360 * math.cos(angle)),
+                y=int(260 * math.sin(angle)), width=140, height=110,
+                name=f"Leaf {i + 1}",
+                anchors=[Anchor(id=f"{leaf_id}_in", block_id=leaf_id,
+                                type=EAnchorType.IN)],
+            )
+        )
+        connections.append(
+            Connection(
+                source_block_id="hub", source_anchor_id="hub_out",
+                target_block_id=leaf_id, target_anchor_id=f"{leaf_id}_in",
+                label=f"edge {i + 1}", dashed=(i % 2 == 1),
+                styles={"background": color, "selectedBackground": color},
+            )
+        )
+    return GraphData(blocks=blocks, connections=connections)
+
+
+def block_with_anchors(n_in: int = 2, n_out: int = 2) -> GraphData:
+    """Mirrors the "WithAnchors" story: a block exposing several IN/OUT anchors."""
+    anchors = [
+        Anchor(id=f"in_{i}", block_id="anchored", type=EAnchorType.IN, index=i)
+        for i in range(n_in)
+    ] + [
+        Anchor(id=f"out_{i}", block_id="anchored", type=EAnchorType.OUT, index=i)
+        for i in range(n_out)
+    ]
+    return GraphData(
+        blocks=[Block(id="anchored", x=0, y=0, width=200, height=200,
+                      name="Anchored block", anchors=anchors)],
+        connections=[],
+    )
+
+
+# --------------------------------------------------------------------------- #
+# Large "layered" graph generator (Hundred/Thousand/FiveThousand stories)
+# --------------------------------------------------------------------------- #
+
+
+def generate_layered_blocks(
+    *,
+    layers_count: int = 10,
+    connections_per_layer: int = 20,
+    dashed: bool = False,
+    block_is: str = DEFAULT_BLOCK_IS,
+    seed: int | None = 42,
+    h_gap: int = 360,
+    v_gap: int = 220,
+) -> GraphData:
+    """Reproduce the upstream ``generatePrettyBlocks`` layered graphs.
+
+    Creates ``layers_count`` columns of nodes wired left-to-right, where each
+    layer holds roughly ``connections_per_layer`` nodes. Use it for the
+    "HundredBlocks" (10x100), "ThousandBlocks" (25x200) and "FiveThousandsBlocks"
+    (40x300) demos. A fixed ``seed`` keeps the layout reproducible.
+    """
+    if layers_count <= 0 or connections_per_layer <= 0:
+        raise ValueError("layers_count and connections_per_layer must be > 0")
+    rng = random.Random(seed)
+    nodes_per_layer = max(1, connections_per_layer)
+
+    blocks: list[Block] = []
+    layer_ids: list[list[str]] = []
+    for layer in range(layers_count):
+        ids: list[str] = []
+        for n in range(nodes_per_layer):
+            bid = f"l{layer}_n{n}"
+            blocks.append(
+                Block(
+                    id=bid, is_=block_is,
+                    x=layer * h_gap,
+                    y=int((n - nodes_per_layer / 2) * v_gap),
+                    width=150, height=90, name=bid,
+                    anchors=[
+                        Anchor(id=f"{bid}_in", block_id=bid, type=EAnchorType.IN),
+                        Anchor(id=f"{bid}_out", block_id=bid, type=EAnchorType.OUT),
+                    ],
+                )
+            )
+            ids.append(bid)
+        layer_ids.append(ids)
+
+    connections: list[Connection] = []
+    for layer in range(layers_count - 1):
+        src_ids = layer_ids[layer]
+        dst_ids = layer_ids[layer + 1]
+        for _ in range(connections_per_layer):
+            s = rng.choice(src_ids)
+            t = rng.choice(dst_ids)
+            connections.append(
+                Connection(
+                    source_block_id=s, source_anchor_id=f"{s}_out",
+                    target_block_id=t, target_anchor_id=f"{t}_in",
+                    dashed=dashed,
+                )
+            )
+    return GraphData(blocks=blocks, connections=connections)
+
+
+# --------------------------------------------------------------------------- #
+# Grouping example (the "Canvas/Groups" stories)
+# --------------------------------------------------------------------------- #
+
+
+def grouped_graph(groups: int = 3, per_group: int = 4) -> GraphData:
+    """Build a grouped graph by assigning blocks to ``group`` ids."""
+    blocks: list[Block] = []
+    connections: list[Connection] = []
+    for g in range(groups):
+        prev: str | None = None
+        for i in range(per_group):
+            bid = f"g{g}_b{i}"
+            blocks.append(
+                Block(
+                    id=bid, group=f"group_{g}",
+                    x=g * 420, y=i * 160, width=150, height=90,
+                    name=f"G{g} · {i}",
+                    anchors=[
+                        Anchor(id=f"{bid}_in", block_id=bid, type=EAnchorType.IN),
+                        Anchor(id=f"{bid}_out", block_id=bid, type=EAnchorType.OUT),
+                    ],
+                )
+            )
+            if prev is not None:
+                connections.append(
+                    Connection(
+                        source_block_id=prev, source_anchor_id=f"{prev}_out",
+                        target_block_id=bid, target_anchor_id=f"{bid}_in",
+                    )
+                )
+            prev = bid
+    return GraphData(blocks=blocks, connections=connections)

reflex_gravityui_graph-0.1.0.dist-info/METADATA

@@ -0,0 +1,166 @@
+Metadata-Version: 2.4
+Name: reflex-gravityui-graph
+Version: 0.1.0
+Summary: A Reflex custom component wrapping @gravity-ui/graph (a high-performance Canvas + React graph/flowchart/node-editor visualization library).
+Author-email: Ernesto Crespo <ecrespo@gmail.com>
+License: Apache-2.0
+Project-URL: Homepage, https://github.com/ecrespo/reflex-gravityui-graph
+Project-URL: Repository, https://github.com/ecrespo/reflex-gravityui-graph
+Project-URL: Issues, https://github.com/ecrespo/reflex-gravityui-graph/issues
+Project-URL: @gravity-ui/graph, https://github.com/gravity-ui/graph
+Keywords: reflex,reflex-custom-components,gravity-ui,graph,flowchart,node-editor,diagram,canvas,visualization,component
+Classifier: Development Status :: 4 - Beta
+Classifier: Framework :: AsyncIO
+Classifier: Intended Audience :: Developers
+Classifier: License :: OSI Approved :: Apache Software License
+Classifier: Programming Language :: Python :: 3
+Classifier: Topic :: Software Development :: Libraries :: Python Modules
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Requires-Dist: reflex>=0.8.0
+Provides-Extra: dev
+Requires-Dist: build; extra == "dev"
+Requires-Dist: twine; extra == "dev"
+Requires-Dist: pytest; extra == "dev"
+Dynamic: license-file
+
+# reflex-gravityui-graph
+
+A [Reflex](https://reflex.dev) custom component that wraps
+[`@gravity-ui/graph`](https://github.com/gravity-ui/graph) — a high-performance
+graph / flowchart / node-editor visualization library that renders the full
+graph on **Canvas** when zoomed out (smooth with thousands of nodes) and swaps
+to **HTML/React** for rich interactions when zoomed in.
+
+It exposes the whole graph declaratively from Python: pass `blocks`,
+`connections`, `settings`, `colors` and `constants` as plain data, and receive
+selection / connection / camera events back into your Reflex state.
+
+> Status: **0.1.0 (beta).** Wraps `@gravity-ui/graph@1.11.0`.
+
+---
+
+## Installation
+
+```bash
+uv add reflex-gravityui-graph
+# or
+pip install reflex-gravityui-graph
+```
+
+The first time the demo (or your app) runs, Reflex installs the npm dependency
+`@gravity-ui/graph` automatically.
+
+## Quick start
+
+```python
+import reflex as rx
+from reflex_gravityui_graph import graph_canvas, Block, Connection, Anchor, EAnchorType
+
+a = Block(id="a", x=0, y=0, name="Start",
+          anchors=[Anchor(id="out", block_id="a", type=EAnchorType.OUT)])
+b = Block(id="b", x=320, y=180, name="End",
+          anchors=[Anchor(id="in", block_id="b", type=EAnchorType.IN)])
+edge = Connection(source_block_id="a", source_anchor_id="out",
+                  target_block_id="b", target_anchor_id="in")
+
+
+def index() -> rx.Component:
+    return graph_canvas(
+        blocks=[a.to_dict(), b.to_dict()],
+        connections=[edge.to_dict()],
+        width="100%",
+        height="600px",
+    )
+
+
+app = rx.App()
+app.add_page(index)
+```
+
+`GraphCanvas` fills its container, so always give the component an explicit
+height (`height="600px"`) or a sized parent.
+
+## Why a JSX bridge?
+
+`@gravity-ui/graph`'s React API is **hook + imperative**: you create a `Graph`
+with the `useGraph` hook, push entities with `setEntities`, and `start()` the
+render loop once the canvas is attached. Reflex components can't call React hooks
+directly, so this package ships a tiny local bridge (`graph_canvas.jsx`) that
+encapsulates that lifecycle and presents a flat, declarative, JSON-serializable
+prop surface. See [`docs/sdd/02-architecture.md`](docs/sdd/02-architecture.md).
+
+## API
+
+### `graph_canvas(...)` / `GravityGraph`
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `blocks` | `list[dict]` | Nodes (`id`, `is`, `x`, `y`, `width`, `height`, `name`, optional `anchors`, `selected`, `group`, `meta`). |
+| `connections` | `list[dict]` | Edges (`sourceBlockId`/`targetBlockId`, optional anchor ids, `label`, `styles`, `dashed`, `selected`). |
+| `settings` | `dict` | `TGraphSettingsConfig` (bezier, arrows, labels, drag/zoom, anchors, …). |
+| `colors` | `dict` | `RecursivePartial<TGraphColors>` view colors. |
+| `constants` | `dict` | `RecursivePartial<TGraphConstants>` view constants. |
+| `config_name` | `str` | Underlying graph configuration name. |
+| `auto_start` | `bool` | Start the render loop on attach (default `True`). |
+| `zoom_on_start` | `bool` | Fit camera to graph on attach (default `True`). |
+| `zoom_target` | `str` \| list | `"center"`, a rect, or a list of block ids. |
+| `zoom_padding` | `int` | Padding (px) when fitting on start. |
+| `render_html_blocks` | `bool` | Render rich HTML/React blocks at detailed zoom. |
+
+**Events** (each delivers one plain dict to your handler):
+
+`on_block_selection_change`, `on_connection_created`,
+`on_connection_selection_change`, `on_camera_change`, `on_block_drag_end`,
+`on_state_change`.
+
+### Domain value objects
+
+`Block`, `Connection`, `Anchor`, `EAnchorType`, `GraphData` build and validate
+the entity payloads in Python (duplicate-id and dangling-edge checks included).
+
+### Recipe helpers (reproduce the upstream Storybook stories)
+
+`one_block`, `two_connected_blocks`, `colored_connections`, `block_with_anchors`,
+`generate_layered_blocks` (hundred / thousand / five-thousand block graphs),
+`grouped_graph`, `default_settings`, and the `THEMES` color presets.
+
+## Demo app
+
+A full demo with one page per example category lives in
+`reflex_gravityui_graph_demo/`:
+
+```bash
+uv pip install -e .
+cd reflex_gravityui_graph_demo
+reflex run
+```
+
+Pages: Basics · Connections · Scale · Grouping · Camera & Zoom · Theming ·
+Interaction & Events.
+
+## Development
+
+This project uses [`uv`](https://docs.astral.sh/uv/).
+
+```bash
+uv venv && source .venv/bin/activate
+uv pip install -e ".[dev]"
+uv run pytest -q                  # run the test suite
+uv run reflex component build     # build wheel/sdist + generate the .pyi stub
+uv publish                        # publish to PyPI (needs an API token)
+```
+
+See [`docs/sdd/`](docs/sdd/) for the full Spec-Driven Design artifacts
+(overview, PRD, architecture, component spec, plan, tasks) and
+[`docs/research/`](docs/research/) for the upstream research notes.
+
+## Credits
+
+- [`@gravity-ui/graph`](https://github.com/gravity-ui/graph) by Gravity UI (MIT).
+- Built as a [Reflex custom component](https://reflex.dev/docs/custom-components/overview/).
+
+## License
+
+Apache-2.0 © Ernesto Crespo. `@gravity-ui/graph` is MIT © YANDEX LLC.

reflex_gravityui_graph-0.1.0.dist-info/RECORD

@@ -0,0 +1,11 @@
+reflex_gravityui_graph/__init__.py,sha256=1KgCebxi3WTZPoJKlULHboBv4YSvCG3RLcZGWhkJtjg,2399
+reflex_gravityui_graph/domain.py,sha256=6oGRtYbnW4hbGS7AUJq7VsSPRqLHZRIcfYBP0yaYqX0,7199
+reflex_gravityui_graph/graph.py,sha256=9OBu2bXPPwbwbj44Pgh97zng8vuLOZyaOdjlO5VDB9c,6063
+reflex_gravityui_graph/graph.pyi,sha256=PY097LykBBwg67zQxsWO3JhRV9aJi5QovV79eT3E3DU,7640
+reflex_gravityui_graph/graph_canvas.jsx,sha256=uF1VpBSgT5O5DedyYOlQfsqR470yxrSpJ8ipabZsaoI,6058
+reflex_gravityui_graph/recipes.py,sha256=3VqJtTJInuIohME-OjJOtdLhuKoGSGM2gWMBr2NDVp0,11281
+reflex_gravityui_graph-0.1.0.dist-info/licenses/LICENSE,sha256=C32kaF_Nae7AJDNsNGk24KPnrwvRKrMUbYeGHjcGjgw,9994
+reflex_gravityui_graph-0.1.0.dist-info/METADATA,sha256=dKp6doFz9A2VIwwRv8izhhS0G6G4Kqwy96hxR_hDZBk,6369
+reflex_gravityui_graph-0.1.0.dist-info/WHEEL,sha256=aeYiig01lYGDzBgS8HxWXOg3uV61G9ijOsup-k9o1sk,91
+reflex_gravityui_graph-0.1.0.dist-info/top_level.txt,sha256=Nx8HV-kHTzvUkZkz_7YG8YXNZaSZSrx-wzxFrCfvNeM,23
+reflex_gravityui_graph-0.1.0.dist-info/RECORD,,

reflex_gravityui_graph-0.1.0.dist-info/WHEEL

@@ -0,0 +1,5 @@
+Wheel-Version: 1.0
+Generator: setuptools (82.0.1)
+Root-Is-Purelib: true
+Tag: py3-none-any
+