Fix circular-dep TDZ crash and picker alias mismatch

Move coerceBrokenShape() and the broken-shape set into
vertexStylesTransform.ts so the import from storageAtoms is type-only
into graphStyles.ts, breaking the runtime cycle that caused a
ReferenceError during initialization.

Change the coercion target from "round-rectangle" to "roundrectangle"
(the value NODE_SHAPE uses for the picker) so the style dialog displays
"Round Rectangle" instead of a blank field for coerced entries.

Author: kmcginnes

packages/graph-explorer/src/core/StateProvider/graphStyles.test.ts

@@ -8,7 +8,6 @@ import { DbState, renderHookWithState } from "@/utils/testing";
 import {
   appDefaultEdgeStyle,
   appDefaultVertexStyle,
-  coerceBrokenShape,
   edgeStyleAtom,
   type EdgeStyleStorage,
   type ShapeStyle,
@@ -17,6 +16,7 @@ import {
   vertexStyleAtom,
   type VertexStyleStorage,
 } from "./graphStyles";
+import { coerceBrokenShape } from "./vertexStylesTransform";
 
 function createExpectedVertex(existing: VertexStyleStorage) {
   return {
@@ -473,13 +473,14 @@ describe("coerceBrokenShape", () => {
     "round-tag",
   ];
 
-  it.each(BROKEN)("coerces %s to round-rectangle", shape => {
-    expect(coerceBrokenShape(shape)).toBe("round-rectangle");
+  it.each(BROKEN)("coerces %s to roundrectangle", shape => {
+    expect(coerceBrokenShape(shape)).toBe("roundrectangle");
   });
 
   const SAFE: ShapeStyle[] = [
     "ellipse",
     "rectangle",
+    "roundrectangle",
     "round-rectangle",
     "round-diamond",
     "star",

packages/graph-explorer/src/core/StateProvider/graphStyles.ts

@@ -45,31 +45,6 @@ export const SHAPE_STYLES = [
 ] as const;
 export type ShapeStyle = (typeof SHAPE_STYLES)[number];
 
-/**
- * Shapes that cytoscape's round-polygon renderer draws incorrectly at small
- * node size (24px): their corner computation degenerates, rendering as a blob
- * and producing invalid edge endpoints that cause edges to disappear. These are
- * kept in {@link SHAPE_STYLES} so older files still parse, but are coerced to
- * `round-rectangle` at every read boundary.
- */
-const BROKEN_ROUND_POLYGON_SHAPES: ReadonlySet<ShapeStyle> = new Set([
-  "round-triangle",
-  "round-pentagon",
-  "round-hexagon",
-  "round-heptagon",
-  "round-octagon",
-  "round-tag",
-]);
-
-const BROKEN_SHAPE_REPLACEMENT: ShapeStyle = "round-rectangle";
-
-/** Coerces a broken round-polygon shape to `round-rectangle`, passing all others through. */
-export function coerceBrokenShape(shape: ShapeStyle): ShapeStyle {
-  return BROKEN_ROUND_POLYGON_SHAPES.has(shape)
-    ? BROKEN_SHAPE_REPLACEMENT
-    : shape;
-}
-
 export const LINE_STYLES = ["solid", "dashed", "dotted"] as const;
 export type LineStyle = (typeof LINE_STYLES)[number];
 

packages/graph-explorer/src/core/StateProvider/vertexStylesTransform.test.ts

@@ -38,14 +38,15 @@ describe("transformVertexStyles", () => {
     for (const shape of broken) {
       const styles = vertexMap([["X", { shape }]]);
       const result = transformVertexStyles(styles);
-      expect(result.get(createVertexType("X"))!.shape).toBe("round-rectangle");
+      expect(result.get(createVertexType("X"))!.shape).toBe("roundrectangle");
     }
   });
 
-  it("does not coerce round-rectangle or round-diamond", () => {
+  it("does not coerce roundrectangle, round-rectangle, or round-diamond", () => {
     const styles = vertexMap([
-      ["A", { shape: "round-rectangle" }],
-      ["B", { shape: "round-diamond" }],
+      ["A", { shape: "roundrectangle" }],
+      ["B", { shape: "round-rectangle" }],
+      ["C", { shape: "round-diamond" }],
     ]);
 
     expect(transformVertexStyles(styles)).toBe(styles);
@@ -58,7 +59,7 @@ describe("transformVertexStyles", () => {
 
     const result = transformVertexStyles(styles);
     const entry = result.get(createVertexType("A"))!;
-    expect(entry.shape).toBe("round-rectangle");
+    expect(entry.shape).toBe("roundrectangle");
     expect(entry.color).toBe("#ff0000");
     expect(entry.borderWidth).toBe(2);
   });

packages/graph-explorer/src/core/StateProvider/vertexStylesTransform.ts

@@ -1,6 +1,30 @@
 import type { VertexType } from "../entities";
+import type { ShapeStyle, VertexStyleStorage } from "./graphStyles";
 
-import { coerceBrokenShape, type VertexStyleStorage } from "./graphStyles";
+/**
+ * Shapes that cytoscape's round-polygon renderer draws incorrectly at small
+ * node size (24px): their corner computation degenerates, rendering as a blob
+ * and producing invalid edge endpoints that cause edges to disappear. These are
+ * kept in {@link SHAPE_STYLES} so older files still parse, but are coerced to
+ * `round-rectangle` at every read boundary.
+ */
+const BROKEN_ROUND_POLYGON_SHAPES: ReadonlySet<ShapeStyle> = new Set([
+  "round-triangle",
+  "round-pentagon",
+  "round-hexagon",
+  "round-heptagon",
+  "round-octagon",
+  "round-tag",
+]);
+
+const BROKEN_SHAPE_REPLACEMENT: ShapeStyle = "roundrectangle";
+
+/** Coerces a broken round-polygon shape to `round-rectangle`, passing all others through. */
+export function coerceBrokenShape(shape: ShapeStyle): ShapeStyle {
+  return BROKEN_ROUND_POLYGON_SHAPES.has(shape)
+    ? BROKEN_SHAPE_REPLACEMENT
+    : shape;
+}
 
 /**
  * ReadTransform for vertex style maps: coerces broken round-polygon shapes to

packages/graph-explorer/src/core/styling/stylingParser.test.ts

@@ -78,19 +78,19 @@ describe("style enum validation", () => {
       vertices: { A: { shape } },
       edges: {},
     });
-    const expected = BROKEN_SHAPES.has(shape) ? "round-rectangle" : shape;
+    const expected = BROKEN_SHAPES.has(shape) ? "roundrectangle" : shape;
     expect(result.vertexStyles.get(createVertexType("A"))!.shape).toBe(
       expected,
     );
   });
 
-  test("coerces broken round-polygon shapes to round-rectangle on import", () => {
+  test("coerces broken round-polygon shapes to roundrectangle on import", () => {
     const result = parseStylingPayload({
       vertices: { A: { shape: "round-tag" } },
       edges: {},
     });
     expect(result.vertexStyles.get(createVertexType("A"))!.shape).toBe(
-      "round-rectangle",
+      "roundrectangle",
     );
   });
 

packages/graph-explorer/src/core/styling/stylingParser.ts

@@ -8,12 +8,12 @@ import { createEdgeType, createVertexType } from "@/core/entities";
 import { FileEnvelopeError } from "@/core/fileEnvelope";
 import {
   ARROW_STYLES,
-  coerceBrokenShape,
   type EdgeStyleStorage,
   LINE_STYLES,
   SHAPE_STYLES,
   type VertexStyleStorage,
 } from "@/core/StateProvider/graphStyles";
+import { coerceBrokenShape } from "@/core/StateProvider/vertexStylesTransform";
 import { typedEntries } from "@/utils";
 
 // --- Format identity ---