[draedful]

Summary

Adds a new v2 package, @gravity-ui/graph-uikit, for building graphs inside @gravity-ui/uikit applications. It has two layers:

• Kit: building blocks to compose your own graph.
• Facade: useUikitGraph and UikitGraphCanvas, which wire the whole kit in by default.

Canvas rendering and LOD stay the core of the library. Every canvas level now gets the uikit look, and React is used only at the Detailed level.

Core (packages/graph) is not modified. Code that should move into core is tagged // TODO(graph-core): <what> — <why>; see the list below.

What's inside

• Theme bridge. Graph colors follow the active uikit theme, with a global or scoped ThemeProvider.

  • Tokens are read from the graph root in a passive effect, after the provider's own layout effect.
  • The mapping is UIKIT_GRAPH_TOKENS.
  • useUikitGraph({ colors, tokens }) overrides single values or the whole table.
  • Palette and typography values that don't fit into TGraphColors live in a per-graph signal store.

• Canvas text. renderUikitText / measureUikitText mirror uikit <Text>: variants, colors, ellipsis, ellipsisLines, whiteSpace, wordBreak. The typography is built from the per-variant --g-text-* tokens.

• UikitBlock. A canvas block with a uikit surface on every LOD level:

  • radius 8 and uikit borders;
  • hover and selection;
  • statuses through block.meta.theme, plus block.meta.description.

  Override renderContent(ctx, rect, level) for custom content.

• UikitConnection. Uikit line colors, screen-pixel line and arrow widths, and a uikit label pill.

• UikitGraphBlock. The Detailed-level React skeleton: GraphBlock with a uikit Box that matches the canvas surface pixel for pixel. It respects the colors override.

• Interactions.

  • UikitInteractionLayer, GraphTooltip, GraphContextMenu and useHoveredEntity, built on uikit Popup/Menu. They work on every LOD level, including React blocks.
  • The native context menu is intercepted only while a GraphContextMenu is mounted.

• Toolbar. GraphUikitToolbar is a floating toolbar of uikit buttons grouped into cards.

  • Only the zoom group ships, via group(...zoomGroup({ reset, viewport, selection })): zoom in and out with a multiplicative step, 1:1, fit to viewport and fit selection.
  • Disabled states follow the camera and the selection.
  • Project-specific groups are built with group(...) and custom actions.
  • This adds the runtime dependency @gravity-ui/icons.

• Modes. view / edit. Edit mode allows dragging blocks and creating connections through @gravity-ui/graph-connection-editing: Shift+drag between blocks, or anchor-to-anchor.

• Repo additions.

  • Storybook Plugins/Uikit stories (View, Edit, CustomBlock, four-theme switcher).
  • E2E specs in a separate uikit bundle and page (apps/e2e/tests/uikit, including toolbar.spec.ts).
  • The package contract and README.
  • Repo wiring: build filters, release-please config and manifest, tsconfig-strict list, root README.

Decisions worth knowing

• Publish build. tsconfig.publish.json uses skipLibCheck: true. uikit's declarations import react-beautiful-dnd types that uikit ships only as a devDependency (TS7016). The e2e and contract fixtures keep skipLibCheck: false and use a small ambient type shim instead. The README tells consumers to install @types/react-beautiful-dnd.
• Contract. The contract has no Node runtime probe (uikit's ESM build imports .css) and no types/node-esm fixture (uikit's own declarations fail under Node16).
• Canvas text rules:
  • wordBreak: "break-all" behaves like "break-word";
  • at least one line is always drawn;
  • ellipsisLines truncates the last kept line on its own, like CSS line-clamp.
• Hover point. It comes from the last real pointer move, read in the capture phase. Core's synthetic camera-emulation events never feed it.
• Public API. The exports are narrowed to the documented API, and the shared defaults are deep-frozen.

Core candidates (grep -rn "TODO(graph-core)" packages/graph-uikit/src)

• Graph-level mouseleave when the pointer leaves the root, and a graph-level contextmenu event.
• A public "component → entity kind/id" API, and a "world rect → viewport rect" helper.
• A hover state on Block.
• In core text layout:
  • ellipsis and line clamp in layoutText;
  • line height is parsed from the font string, so "500 13px" becomes 50013;
  • the measureText cache is never cleared.
• A configurable default block class, and extensible TGraphColors groups.
• Per-graph extension storage.

Testing

• ✅ pnpm run build.
• ✅ graph-uikit: 24 suites and 101 unit tests; typecheck and lint are clean.
• ✅ Typecheck of storybook and e2e, the e2e bundle, test:type-configs and test:release-contract.
• ⚠️ Not run yet: the Playwright E2E (pnpm --filter @gravity-ui/graph-e2e run test:e2e tests/uikit) and the package contract (pnpm --filter @gravity-ui/graph-uikit run test:package-contract). The dev sandbox blocked local port binding and registry access.
• ⚠️ No visual check of the Storybook stories yet: the four themes, canvas versus React parity, tooltip and menu.

🤖 Generated with Claude Code

[gravity-ui-bot]

Preview is ready.