@loradb/lora-graph-canvas 0.11.3 → 0.13.0

package/dist/theme/palette.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Palette helpers — shared between `nodeAutoColorBy` (in
+ * `useAccessorOverrides`) and the `GroupLegend` swatches so a given
+ * group key always maps to the same colour in the canvas and in the
+ * legend.
+ *
+ * The default ramp is `d3-scale-chromatic`'s `schemeTableau10`. Hosts
+ * can override the palette via `LoraGraphTheme.nodePalette` and the
+ * hash-to-index function picks colours deterministically — same string
+ * → same colour across re-renders, sessions, and consumers.
+ */
+/** Default node palette (Tableau10). Kept in the same order as
+ *  d3-scale-chromatic so any consumer that already uses Tableau10
+ *  matches without configuration. */
+export declare const DEFAULT_NODE_PALETTE: readonly string[];
+/** Default relationship colour when nothing is selected or hovered.
+ *  Stays in lock-step with `useAccessorOverrides`'s baseline so the
+ *  in-engine fallback and the selection wrapper agree. */
+export declare const DEFAULT_LINK_COLOR = "rgba(96, 102, 110, 0.55)";
+/** Default colour for hovered relationships. Same alpha as
+ *  `DEFAULT_LINK_COLOR` so a hover transition only mutates RGB and
+ *  doesn't drag the link across Three.js's transparent/opaque sort
+ *  groups (which would visibly reshuffle neighbouring lines). */
+export declare const DEFAULT_LINK_HOVER_COLOR = "rgba(180, 188, 198, 0.55)";
+/** Pick the palette colour for a group key. */
+export declare function colorForGroup(group: string, palette?: readonly string[]): string;

package/dist/tools/GroupLegend.d.ts

@@ -6,6 +6,9 @@ export interface GroupLegendProps<N extends NodeObject = NodeObject> {
     /** Hidden group keys (stringified). Toggled by clicking. */
     hidden: Set<string>;
     onToggle(group: string): void;
+    /** Palette used for swatch backgrounds — must match the canvas's
+     *  node palette so legend swatches and node fills line up. Defaults
+     *  to the package's Tableau10 ramp. */
+    palette?: readonly string[];
 }
-export declare function colorForGroup(group: string): string;
-export declare function GroupLegend<N extends NodeObject = NodeObject>({ nodes, groupBy, hidden, onToggle, }: GroupLegendProps<N>): import("react/jsx-runtime").JSX.Element | null;
+export declare function GroupLegend<N extends NodeObject = NodeObject>({ nodes, groupBy, hidden, onToggle, palette, }: GroupLegendProps<N>): import("react/jsx-runtime").JSX.Element | null;

package/dist/types.d.ts

@@ -69,6 +69,18 @@ export interface LoraGraphTheme {
     menuHoverBackground?: string;
     fontFamily?: string;
     fontSize?: string;
+    /** Palette used when `nodeAutoColorBy` is set: nodes get a colour by
+     *  hashing the group key against this array. Defaults to a
+     *  Tableau10-style ramp. */
+    nodePalette?: readonly string[];
+    /** Default colour for relationships when nothing is selected /
+     *  hovered. Defaults to `rgba(96, 102, 110, 0.55)`. */
+    linkDefault?: string;
+    /** Colour for hovered relationships — both direct hover and
+     *  neighbour-of-hovered-node. Kept distinct from the selection
+     *  accent so users can tell hover from selection at a glance.
+     *  Defaults to `rgba(180, 188, 198, 0.55)`. */
+    linkHover?: string;
 }
 export interface ToolbarConfig {
     include?: ToolId[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loradb/lora-graph-canvas",
-  "version": "0.11.3",
+  "version": "0.13.0",
   "description": "React graph canvas for LoraDB. Unified 2D/3D force-directed component with a built-in tool palette for adding, connecting, selecting, and removing nodes.",
   "license": "BUSL-1.1",
   "packageManager": "yarn@4.5.1",