Merge branch 'sy-3833-strongly-type-schematics-v2' of https://github.com/synnaxlabs/synnax into sy-3833-2

Author: emilbon99

.gitignore

@@ -72,6 +72,8 @@ work
 # |||| DATA ||||
 
 **/data
+!pluto/src/schematic/edge/data
+!pluto/src/schematic/edge/data/**
 synnax-data
 synnax-data/**
 

client/ts/src/arc/compiler/types.gen.ts

@@ -9,6 +9,7 @@
 
 // Code generated by Oracle. DO NOT EDIT.
 
+import { record } from "@synnaxlabs/x";
 import { z } from "zod";
 
 /**
@@ -22,6 +23,6 @@ export const outputZ = z.object({
    * outputMemoryBases contains memory base addresses for multi-output functions, mapping
    * function keys to their base addresses.
    */
-  outputMemoryBases: z.record(z.string(), z.uint32()),
+  outputMemoryBases: record.nullishToEmpty(z.string(), z.uint32()),
 });
 export interface Output extends z.infer<typeof outputZ> {}

client/ts/src/arc/ir/types.gen.ts

@@ -9,7 +9,7 @@
 
 // Code generated by Oracle. DO NOT EDIT.
 
-import { array, zod } from "@synnaxlabs/x";
+import { array, record, zod } from "@synnaxlabs/x";
 import { z } from "zod";
 
 import { types } from "@/arc/types";
@@ -76,7 +76,7 @@ export const authoritiesZ = z.object({
   /** default is the default authority for all write channels not explicitly listed. */
   default: zod.uint8.optional(),
   /** channels maps channel keys to their specific authority values. */
-  channels: z.record(z.uint32(), zod.uint8),
+  channels: record.nullishToEmpty(z.uint32(), zod.uint8),
 });
 export interface Authorities extends z.infer<typeof authoritiesZ> {}
 

client/ts/src/arc/types/types.gen.ts

@@ -9,7 +9,7 @@
 
 // Code generated by Oracle. DO NOT EDIT.
 
-import { array, zod } from "@synnaxlabs/x";
+import { array, record, zod } from "@synnaxlabs/x";
 import { z } from "zod";
 
 export enum Kind {
@@ -48,9 +48,9 @@ export const chanDirectionZ = z.enum(ChanDirection);
 /** Channels contains channel declarations for reading from and writing to Synnax channels. */
 export const channelsZ = z.object({
   /** read contains readable channel indices mapped to parameter names. */
-  read: z.record(z.uint32(), z.string()),
+  read: record.nullishToEmpty(z.uint32(), z.string()),
   /** write contains writable channel indices mapped to parameter names. */
-  write: z.record(z.uint32(), z.string()),
+  write: record.nullishToEmpty(z.uint32(), z.string()),
 });
 export interface Channels extends z.infer<typeof channelsZ> {}
 

client/ts/src/schematic/client.ts

@@ -179,5 +179,5 @@ export const ZERO_NEW: New = {
   legend: ZERO_LEGEND,
   nodes: [],
   edges: [],
-  props: {},
+  configs: {},
 };

client/ts/src/schematic/schematic.spec.ts

@@ -73,14 +73,14 @@ describe("Schematic", () => {
         ...schematic.ZERO_NEW,
         authority: 5,
         nodes: [{ key: "n1", position: { x: 10, y: 20 }, zIndex: 0 }],
-        props: { n1: { variant: "valve" } },
+        configs: { n1: { variant: "valve" } },
       });
       const res = await client.schematics.retrieve({ key: schem.key });
       expect(res.name).toEqual("Schematic");
       expect(res.authority).toEqual(5);
       expect(res.nodes).toHaveLength(1);
       expect(res.nodes[0].key).toEqual("n1");
-      expect(res.props.n1.variant).toEqual("valve");
+      expect((res.configs.n1 as Record<string, unknown>).variant).toEqual("valve");
     });
   });
 
@@ -101,12 +101,12 @@ describe("Schematic", () => {
     });
   });
 
-  describe("props case preservation", () => {
-    test("preserves arbitrary key casing within prop values", async () => {
+  describe("config case preservation", () => {
+    test("preserves arbitrary key casing within config values", async () => {
       const ws = await client.workspaces.create({ name: "CaseTest", layout: {} });
       const schem = await client.schematics.create(ws.key, {
         ...schematic.ZERO_NEW,
-        props: {
+        configs: {
           n1: {
             camelCaseKey: "value1",
             PascalCaseKey: "value2",
@@ -119,13 +119,19 @@ describe("Schematic", () => {
         },
       });
       const retrieved = await client.schematics.retrieve({ key: schem.key });
-      const props = retrieved.props.n1;
-      expect(props.camelCaseKey).toEqual("value1");
-      expect(props.PascalCaseKey).toEqual("value2");
-      expect(props.snake_case_key).toEqual("value3");
-      const nested = props.nested as Record<string, unknown>;
-      expect(nested.innerCamelCase).toEqual(123);
-      expect((nested.InnerPascalCase as Record<string, unknown>).deepKey).toEqual(true);
+      const config = retrieved.configs.n1 as Record<string, unknown>;
+      expect(config.camelCaseKey).toEqual("value1");
+      expect(config.PascalCaseKey).toEqual("value2");
+      expect(config.snake_case_key).toEqual("value3");
+      expect((config.nested as Record<string, unknown>).innerCamelCase).toEqual(123);
+      expect(
+        (
+          (config.nested as Record<string, unknown>).InnerPascalCase as Record<
+            string,
+            unknown
+          >
+        ).deepKey,
+      ).toEqual(true);
     });
   });
 

client/ts/src/schematic/types.gen.ts

@@ -14,26 +14,14 @@ import { z } from "zod";
 
 import { ontology } from "@/ontology";
 
-export const EDGE_VARIANTS = [
-  "pipe",
-  "electric",
-  "secondary",
-  "jacketed",
-  "hydraulic",
-  "pneumatic",
-  "data",
-] as const;
-export const edgeVariantZ = z.enum(EDGE_VARIANTS);
-export type EdgeVariant = z.infer<typeof edgeVariantZ>;
-
 /** Legend is the control legend overlay configuration. */
 export const legendZ = z.object({
   /** visible is whether the legend is visible. */
   visible: z.boolean(),
   /** position is the legend position within the schematic. */
   position: spatial.stickyXYZ,
   /** colors maps control status keys to their display colors. */
-  colors: z.record(z.string(), color.colorZ),
+  colors: record.nullishToEmpty(z.string(), color.colorZ),
 });
 export interface Legend extends z.infer<typeof legendZ> {}
 
@@ -64,15 +52,6 @@ export const handleZ = z.object({
 });
 export interface Handle extends z.infer<typeof handleZ> {}
 
-/** Segment is an orthogonal path segment with a direction and signed length. */
-export const segmentZ = z.object({
-  /** direction is the axis of travel: x (horizontal) or y (vertical). */
-  direction: spatial.directionZ,
-  /** length is the signed distance along the axis. */
-  length: z.number(),
-});
-export interface Segment extends z.infer<typeof segmentZ> {}
-
 export const keyZ = z.uuid();
 export type Key = z.infer<typeof keyZ>;
 
@@ -87,17 +66,6 @@ export const edgeZ = z.object({
 });
 export interface Edge extends z.infer<typeof edgeZ> {}
 
-/** EdgeProps contains visual properties for an edge, stored in schematic props. */
-export const edgePropsZ = z.object({
-  /** segments defines the orthogonal path segments from source to target. */
-  segments: array.nullishToEmpty(segmentZ),
-  /** variant is the visual style of the edge. */
-  variant: edgeVariantZ.default("pipe"),
-  /** color is the optional display color. */
-  color: color.colorZ.optional(),
-});
-export interface EdgeProps extends z.infer<typeof edgePropsZ> {}
-
 /**
  * Schematic is a visual diagram editor component for drawing system schematics,
  * control flows, and process diagrams. Schematics support interactive
@@ -119,10 +87,11 @@ export const schematicZ = z.object({
   /** edges contains all connections between nodes. */
   edges: array.nullishToEmpty(edgeZ),
   /**
-   * props contains symbol-specific properties keyed by node or edge key,
-   * including colors, labels, segments, and other visual configuration.
+   * configs contains per-element configuration keyed by node or edge key. The
+   * shape of each value is determined by the element's variant; the
+   * wire format intentionally stores it as an opaque record.
    */
-  props: caseconv.preserveCase(z.record(z.string(), record.unknownZ())),
+  configs: caseconv.preserveCase(record.nullishToEmpty(z.string(), record.unknownZ())),
 });
 export interface Schematic extends z.infer<typeof schematicZ> {}
 

console/src/access/role/ontology.tsx

@@ -8,7 +8,7 @@
 // included in the file licenses/APL.txt.
 
 import { access } from "@synnaxlabs/client";
-import { Access, Icon, Menu } from "@synnaxlabs/pluto";
+import { Access, Icon, Menu, User } from "@synnaxlabs/pluto";
 
 import { ContextMenu } from "@/components";
 import { Ontology } from "@/ontology";
@@ -68,10 +68,8 @@ export const ONTOLOGY_SERVICE: Ontology.Service = {
   icon: <Icon.Role />,
   TreeContextMenu,
   hasChildren: true,
-  canDrop: ({ items }) =>
-    items.every(
-      ({ key, type, data }) =>
-        (key.toString().startsWith("user:") || type === "user") &&
-        data?.rootUser !== true,
-    ),
+  canDrop: ({ items }) => {
+    const users = User.filterHaulItems(items);
+    return users.length === items.length && users.every(({ data }) => !data.rootUser);
+  },
 };

console/src/arc/editor/graph/Editor.spec.ts

@@ -0,0 +1,63 @@
+// Copyright 2026 Synnax Labs, Inc.
+//
+// Use of this software is governed by the Business Source License included in the file
+// licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with the Business Source
+// License, use of this software will be governed by the Apache License, Version 2.0,
+// included in the file licenses/APL.txt.
+
+import { type Haul } from "@synnaxlabs/pluto";
+import { describe, expect, it } from "vitest";
+
+import {
+  canDropHaulItem,
+  createHaulItem,
+  filterHaulItems,
+  HAUL_TYPE,
+  isHaulItem,
+} from "@/arc/editor/graph/Editor";
+
+const KEY = "stage-key";
+const OTHER: Haul.Item = { type: "other_type", key: "other" };
+
+describe("arc element haul utilities", () => {
+  describe("createHaulItem", () => {
+    it("creates an item with the arc element HAUL_TYPE", () => {
+      expect(createHaulItem(KEY).type).toEqual(HAUL_TYPE);
+    });
+
+    it("creates an item with the provided key", () => {
+      expect(createHaulItem(KEY).key).toEqual(KEY);
+    });
+  });
+
+  describe("isHaulItem", () => {
+    it("returns true for an arc element item", () => {
+      expect(isHaulItem(createHaulItem(KEY))).toBe(true);
+    });
+
+    it("returns false for an item of another kind", () => {
+      expect(isHaulItem(OTHER)).toBe(false);
+    });
+  });
+
+  describe("filterHaulItems", () => {
+    it("keeps arc element items and drops items of other kinds", () => {
+      const item = createHaulItem(KEY);
+      expect(filterHaulItems([item, OTHER])).toEqual([item]);
+    });
+  });
+
+  describe("canDropHaulItem", () => {
+    it("returns true when at least one item is an arc element item", () => {
+      expect(
+        canDropHaulItem({ source: OTHER, items: [createHaulItem(KEY), OTHER] }),
+      ).toBe(true);
+    });
+
+    it("returns false when no item is an arc element item", () => {
+      expect(canDropHaulItem({ source: OTHER, items: [OTHER] })).toBe(false);
+    });
+  });
+});

console/src/arc/editor/graph/Editor.tsx

@@ -53,15 +53,27 @@ import { useUndoableDispatch } from "@/hooks/useUndoableDispatch";
 import { Layout } from "@/layout";
 import { type RootState } from "@/store";
 
-export const HAUL_TYPE = "arc-element";
+export const HAUL_TYPE = "arc_element";
 
-const StageRenderer = ({
+export type HaulItem = Haul.Item<typeof HAUL_TYPE, string, undefined>;
+
+export const createHaulItem = (key: string): HaulItem => ({ type: HAUL_TYPE, key });
+
+export const isHaulItem = (item: Haul.Item): item is HaulItem =>
+  item.type === HAUL_TYPE;
+
+export const filterHaulItems = (items: Haul.Item[]): HaulItem[] =>
+  items.filter(isHaulItem);
+
+export const canDropHaulItem = Haul.canDropOfType<HaulItem>(HAUL_TYPE);
+
+const NodeRenderer = ({
   nodeKey,
   position,
   selected,
   draggable,
 }: Diagram.NodeProps): ReactElement | null => {
-  const { layoutKey, dispatch } = useArcEditorContext("ArcEditor.StageRenderer");
+  const { layoutKey, dispatch } = useArcEditorContext("ArcEditor.NodeRenderer");
   const props = useSelectNodeProps(layoutKey, nodeKey);
   const { key = "", ...rest } = props ?? {};
   const handleChange = useCallback(
@@ -94,7 +106,7 @@ const StageRenderer = ({
 };
 
 const ArcDiagram = Base.create({
-  node: Component.renderProp(StageRenderer),
+  node: Component.renderProp(NodeRenderer),
 });
 
 export const ContextMenu: Layout.ContextMenuRenderer = ({ layoutKey }) => (
@@ -131,9 +143,15 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
   );
 
   const handleNodesChange = useCallback(
-    (changes: Diagram.NodeChange[]) =>
-      undoableDispatch(applyNodeChanges({ key: layoutKey, changes })),
-    [layoutKey, undoableDispatch],
+    (changes: Diagram.NodeChange[]) => {
+      const dragging = changes.some(
+        (c) => c.type === "position" && c.dragging === true,
+      );
+      const action = applyNodeChanges({ key: layoutKey, changes });
+      if (dragging) dispatch(action);
+      else undoableDispatch(action);
+    },
+    [layoutKey, dispatch, undoableDispatch],
   );
 
   const handleEdgesChange = useCallback(
@@ -172,9 +190,9 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
 
   const handleDrop = useCallback(
     ({ items, event }: Haul.OnDropProps): Haul.Item[] => {
-      const valid = Haul.filterByType(HAUL_TYPE, items);
+      const valid = filterHaulItems(items);
       if (ref.current == null || event == null) return valid;
-      valid.forEach(({ key, data }) => {
+      valid.forEach(({ key }) => {
         const spec = Base.Stage.REGISTRY[key];
         if (spec == null) return;
         const pos = xy.truncate(calculateCursorPosition(event), 0);
@@ -183,7 +201,7 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
             key: layoutKey,
             elKey: id.create(),
             node: { position: pos, zIndex: spec.zIndex },
-            props: { key, ...spec.defaultProps(theme), ...(data ?? {}) },
+            props: { key, ...spec.defaultProps(theme) },
           }),
         );
       });
@@ -195,7 +213,7 @@ export const Editor: Layout.Renderer = ({ layoutKey, visible }) => {
   const dropProps = Haul.useDrop({
     type: "arc",
     key: layoutKey,
-    canDrop: Haul.canDropOfType(HAUL_TYPE),
+    canDrop: canDropHaulItem,
     onDrop: handleDrop,
   });