@eventcatalog/core 5.0.0-beta.11 → 5.0.0-beta.13

package/eventcatalog/src/features/studio/node-types.ts

@@ -1,205 +0,0 @@
-/**
- * The kinds of node people (and agents) can put on a canvas, and what's in their data. Shared by the browser and
- * the server, so it has no UI in it: the icons for each type are in components/icons.ts.
- */
-
-export type NodeCategory = 'boundaries' | 'messages' | 'architecture' | 'other';
-
-export const NODE_CATEGORIES: { id: NodeCategory; label: string }[] = [
-  { id: 'boundaries', label: 'Boundaries' },
-  { id: 'messages', label: 'Messages' },
-  { id: 'architecture', label: 'Architecture' },
-  { id: 'other', label: 'Other' },
-];
-
-/** Domains and systems as containers: boxes other nodes sit in */
-export const GROUP_TYPES = { domain: 'domain-group', system: 'system-group' } as const;
-export const isGroupType = (type?: string) => type === GROUP_TYPES.domain || type === GROUP_TYPES.system;
-
-export type NodeDefinition = {
-  /** React Flow node type, matches the visualiser node component keys */
-  type: string;
-  label: string;
-  category: NodeCategory;
-  /** Not in the components list (still drawn, for canvases that have them) */
-  unlisted?: boolean;
-  /** Where the resource lives inside node.data (e.g. `service` for data.service). Undefined = data root */
-  resourceKey?: string;
-  /** Nodes that are sized on the canvas (containers, notes, text) start at this size */
-  defaultSize?: { width: number; height: number };
-  /** Only its width is set: its height follows what's in it (text) */
-  autoHeight?: boolean;
-  createData: () => Record<string, unknown>;
-};
-
-const resource = (name: string, summary: string) => ({ name, version: '0.0.1', summary, owners: [] });
-
-export const nodeDefinitions: NodeDefinition[] = [
-  {
-    type: GROUP_TYPES.domain,
-    label: 'Domain',
-    category: 'boundaries',
-    resourceKey: 'domain',
-    defaultSize: { width: 720, height: 460 },
-    createData: () => ({ domain: { name: 'New Domain', version: '0.0.1' } }),
-  },
-  {
-    type: GROUP_TYPES.system,
-    label: 'System',
-    category: 'boundaries',
-    resourceKey: 'system',
-    defaultSize: { width: 560, height: 360 },
-    createData: () => ({ system: { name: 'New System', version: '0.0.1' } }),
-  },
-  {
-    type: 'service',
-    category: 'architecture',
-    label: 'Service',
-    resourceKey: 'service',
-    createData: () => ({
-      mode: 'full',
-      service: { ...resource('New Service', 'Describe what this service does.'), sends: [], receives: [] },
-    }),
-  },
-  {
-    type: 'event',
-    category: 'messages',
-    label: 'Event',
-    resourceKey: 'message',
-    createData: () => ({ mode: 'full', message: resource('NewEvent', 'Something happened.') }),
-  },
-  {
-    type: 'command',
-    category: 'messages',
-    label: 'Command',
-    resourceKey: 'message',
-    createData: () => ({ mode: 'full', message: resource('NewCommand', 'Asks a service to do something.') }),
-  },
-  {
-    type: 'query',
-    category: 'messages',
-    label: 'Query',
-    resourceKey: 'message',
-    createData: () => ({ mode: 'full', message: resource('NewQuery', 'Asks for some information.') }),
-  },
-  {
-    type: 'channel',
-    category: 'architecture',
-    label: 'Channel',
-    resourceKey: 'channel',
-    createData: () => ({ mode: 'full', channel: { ...resource('new.channel', 'Where messages are routed.'), protocols: [] } }),
-  },
-  {
-    type: 'data',
-    category: 'architecture',
-    label: 'Data Store',
-    resourceKey: 'data',
-    createData: () => ({ mode: 'full', data: { ...resource('New Database', 'Stores data.'), container_type: 'database' } }),
-  },
-  {
-    type: 'view',
-    category: 'architecture',
-    label: 'View',
-    resourceKey: 'view',
-    createData: () => ({ mode: 'full', view: resource('New View', 'What the user sees.') }),
-  },
-  {
-    type: 'externalSystem',
-    category: 'architecture',
-    unlisted: true,
-    label: 'External System',
-    resourceKey: 'externalSystem',
-    createData: () => ({ mode: 'full', externalSystem: resource('External System', 'A third party system.') }),
-  },
-  {
-    type: 'agent',
-    category: 'architecture',
-    label: 'Agent',
-    resourceKey: 'agent',
-    createData: () => ({ mode: 'full', agent: { ...resource('New Agent', 'What this agent does.'), sends: [], receives: [] } }),
-  },
-  {
-    type: 'actor',
-    category: 'other',
-    label: 'Actor',
-    createData: () => ({ mode: 'full', name: 'Customer', summary: 'A person using the system.' }),
-  },
-  {
-    type: 'text',
-    category: 'other',
-    label: 'Text',
-    defaultSize: { width: 240, height: 40 },
-    autoHeight: true,
-    createData: () => ({ text: 'Add some text' }),
-  },
-  {
-    type: 'note',
-    category: 'other',
-    label: 'Sticky Note',
-    // About square, like a post-it (taller if more is written on it)
-    defaultSize: { width: 200, height: 176 },
-    autoHeight: true,
-    createData: () => ({ text: '', color: 'yellow' }),
-  },
-];
-
-/** The types people and agents can add (not the unlisted ones) */
-export const COMPONENT_TYPES = nodeDefinitions
-  .filter((definition) => !definition.unlisted)
-  .map((definition) => definition.type) as [string, ...string[]];
-
-const definitionsByType = new Map(nodeDefinitions.map((definition) => [definition.type, definition]));
-
-// Node types that only come from the catalog (not in the components list)
-const catalogNodeTypes: Record<string, { label: string; resourceKey: string }> = {
-  system: { label: 'System', resourceKey: 'system' },
-  'context-domain': { label: 'Domain', resourceKey: 'domain' },
-};
-
-export const getNodeDefinition = (type?: string) => (type ? definitionsByType.get(type) : undefined);
-
-export const getNodeLabel = (type?: string) => getNodeDefinition(type)?.label ?? catalogNodeTypes[type ?? '']?.label ?? 'Node';
-
-// About the size the visualiser's resource cards render at
-export const DEFAULT_NODE_SIZE = { width: 240, height: 112 };
-
-/** The size a new node of a type starts at (or, for cards, about the size it renders at) */
-export const getNodeSize = (type?: string) => getNodeDefinition(type)?.defaultSize ?? DEFAULT_NODE_SIZE;
-
-const getResourceKey = (type?: string) => getNodeDefinition(type)?.resourceKey ?? catalogNodeTypes[type ?? '']?.resourceKey;
-
-/** The resource object for a node (e.g. data.service), or the data itself for flat nodes */
-export const getResource = (type: string | undefined, data: Record<string, unknown>): Record<string, unknown> => {
-  const key = getResourceKey(type);
-  return key ? ((data[key] as Record<string, unknown>) ?? {}) : data;
-};
-
-/** Sticky notes sit on the canvas wherever they're put, never inside a container */
-export const canGoInContainer = (type?: string) => type !== 'note';
-
-/**
- * The level (L1, L2 or L3) a sticky note was added on: it's only shown there. Notes from before levels had notes
- * are on L3, the canvas people edit. Other nodes are on every level they fit in, so they have none.
- */
-export const getNoteLevel = (node: { type?: string; data: Record<string, unknown> }): 1 | 2 | 3 | undefined =>
-  node.type === 'note' ? ((node.data.level as 1 | 2 | undefined) ?? 3) : undefined;
-
-/** Whether a node is on a level's canvas as itself: everything on L3, but notes only on the level they were added on */
-export const isOnLevel = (node: { type?: string; data: Record<string, unknown> }, level: 1 | 2 | 3) =>
-  node.type !== 'note' || getNoteLevel(node) === level;
-
-/** Notes and text: written on the canvas itself (their text is their data, not a resource with a name) */
-export const isWrittenOnCanvas = (type?: string) => type === 'note' || type === 'text';
-
-/** Whether a node's resource has a version (actors and notes don't) */
-export const isVersioned = (type?: string) => !!getResourceKey(type);
-
-/** Returns new node data with fields of the resource changed */
-export const updateResource = (type: string | undefined, data: Record<string, unknown>, fields: Record<string, unknown>) => {
-  const key = getResourceKey(type);
-  return key ? { ...data, [key]: { ...getResource(type, data), ...fields } } : { ...data, ...fields };
-};
-
-/** A node's name, as people and agents see it */
-export const getNodeName = (type: string | undefined, data: Record<string, unknown>, fallback = 'node') =>
-  String(getResource(type, data).name ?? data.text ?? fallback);

package/eventcatalog/src/features/studio/placement.ts

@@ -1,197 +0,0 @@
-import type { Node, XYPosition } from '@xyflow/react';
-import { fitGroup, getAbsolutePosition, GROUP_PADDING, sizeOf } from './grouping';
-
-/**
- * Where agents put what they add without a position, the way an architect would: next to what it connects to,
- * following the flow left to right (what sends to it on its left, what it sends to on its right), lined up with
- * it, and stacked around it when several things connect to the same node. Nothing already on the canvas moves.
- * Things connected to nothing go in a row below what's there. Containers are filled first, so what goes around them
- * leaves room for what they grow to hold.
- */
-
-/** A connection between two nodes, from the one that sends to the one that receives */
-export type Link = { source: string; target: string };
-
-/** Between connected nodes side by side (room for the labels on their connections), and nodes stacked in a column */
-const GAP = { x: 200, y: 80 };
-/** The least room left around nodes */
-const CLEARANCE = { x: 120, y: 60 };
-/** Between what's on the canvas and things connected to nothing added below it */
-const BELOW_GAP = 120;
-/** Things connected to nothing go side by side (so connecting them later is easy), this many to a row */
-const ROW_LENGTH = 4;
-/** How far to look for free space before giving up and going below everything */
-const MAX_ROWS = 12;
-const MAX_COLUMNS = 8;
-
-type Rect = { x: number; y: number; width: number; height: number };
-type Anchor = { rect: Rect; centerY: number; upstream: boolean };
-
-const rectOf = (node: Node): Rect => ({ ...node.position, ...sizeOf(node) });
-
-const tooClose = (a: Rect, b: Rect) =>
-  a.x < b.x + b.width + CLEARANCE.x &&
-  b.x < a.x + a.width + CLEARANCE.x &&
-  a.y < b.y + b.height + CLEARANCE.y &&
-  b.y < a.y + a.height + CLEARANCE.y;
-
-const below = (rects: Rect[]): XYPosition => ({
-  x: Math.min(...rects.map((rect) => rect.x)),
-  y: Math.max(...rects.map((rect) => rect.y + rect.height)) + BELOW_GAP,
-});
-
-/** 0, 1, -1, 2, -2, …: rows below and above in turn, so things stacked around a node stay centred on it */
-const rowOffset = (row: number) => (row % 2 ? (row + 1) / 2 : -row / 2);
-
-/**
- * Where the nodes to place go on the canvas (not relative to their containers: containers that grow to fit them
- * move what's in them, but nothing moves on the canvas). They're among `nodes`, with their containers set.
- * Everything else in `nodes` stays where it is.
- */
-export const placeNodes = (nodes: Node[], toPlace: string[], links: Link[]): Map<string, XYPosition> => {
-  const working = new Map(nodes.map((node) => [node.id, node]));
-  const remaining = new Set(toPlace.filter((id) => working.has(id)));
-
-  const neighbours = new Map<string, { id: string; upstream: boolean }[]>();
-  const addNeighbour = (id: string, neighbour: { id: string; upstream: boolean }) =>
-    neighbours.set(id, [...(neighbours.get(id) ?? []), neighbour]);
-  for (const { source, target } of links) {
-    addNeighbour(source, { id: target, upstream: false });
-    addNeighbour(target, { id: source, upstream: true });
-  }
-
-  const depthOf = (id: string | undefined): number => {
-    const node = id ? working.get(id) : undefined;
-    return node ? 1 + depthOf(node.parentId) : 0;
-  };
-
-  /** The node, or the container it's in, that sits directly in a level (undefined for the canvas itself) */
-  const atLevel = (id: string, level: string | undefined) => {
-    let node = working.get(id);
-    while (node && node.parentId !== level) node = node.parentId ? working.get(node.parentId) : undefined;
-    return node;
-  };
-
-  /** The containers things are put in grow to fit them (innermost first), as they will on the canvas */
-  const growing = new Set<string>();
-  for (const id of remaining) {
-    for (let parentId = working.get(id)!.parentId; parentId; parentId = working.get(parentId)?.parentId) growing.add(parentId);
-  }
-  const fitContainers = () => {
-    const containers = [...growing].filter((id) => working.has(id)).sort((a, b) => depthOf(b) - depthOf(a));
-    for (const id of containers) {
-      const fit = fitGroup(
-        id,
-        [...working.values()].filter((node) => node.parentId !== id || !remaining.has(node.id))
-      );
-      if (!fit) continue;
-      const container = working.get(id)!;
-      // Growing up or left: what's in it moves the other way, so nothing moves on the canvas
-      if (fit.shift.x || fit.shift.y) {
-        for (const child of working.values()) {
-          if (child.parentId !== id) continue;
-          working.set(child.id, {
-            ...child,
-            position: { x: child.position.x + fit.shift.x, y: child.position.y + fit.shift.y },
-          });
-        }
-      }
-      working.set(id, {
-        ...container,
-        position: { x: container.position.x - fit.shift.x, y: container.position.y - fit.shift.y },
-        width: fit.width,
-        height: fit.height,
-      });
-    }
-  };
-
-  // Innermost containers first, then outwards to the canvas
-  const levels = [...new Set([...remaining].map((id) => working.get(id)!.parentId))].sort((a, b) => depthOf(b) - depthOf(a));
-
-  for (const level of levels) {
-    fitContainers();
-    const parent = level ? working.get(level) : undefined;
-    const origin = parent ? getAbsolutePosition(parent, working) : { x: 0, y: 0 };
-    // Inside a container: clear of its header, so it grows down rather than up
-    const start = parent ? { x: GROUP_PADDING.left, y: GROUP_PADDING.top } : { x: 0, y: 0 };
-    const todo = [...remaining].filter((id) => working.get(id)!.parentId === level);
-    // Things connected to nothing: a row below what was there, each to the right of what's been placed so far
-    let row: { y: number; length: number } | undefined;
-    const placedHere: Rect[] = [];
-    const obstacles = () =>
-      [...working.values()].filter((node) => node.parentId === level && !remaining.has(node.id)).map(rectOf);
-
-    /** What a node connects to that's already placed: the node itself, or the container it's in, at this level */
-    const anchorsOf = (id: string): Anchor[] =>
-      (neighbours.get(id) ?? []).flatMap(({ id: other, upstream }) => {
-        const shown = atLevel(other, level);
-        if (!shown || shown.id === id || remaining.has(shown.id)) return [];
-        const node = working.get(other)!;
-        // Lined up with the node itself, even when it's inside a container
-        const centerY = getAbsolutePosition(node, working).y + sizeOf(node).height / 2 - origin.y;
-        return [{ rect: rectOf(shown), centerY, upstream }];
-      });
-
-    /** Nothing placed to start from: the first one with nothing sending to it, so the flow grows left to right */
-    const startOf = (ids: string[]) =>
-      ids.find(
-        (id) =>
-          !(neighbours.get(id) ?? []).some(({ id: other, upstream }) => {
-            const shown = atLevel(other, level);
-            return upstream && shown && shown.id !== id && ids.includes(shown.id);
-          })
-      ) ?? ids[0];
-
-    const findSpot = (from: XYPosition, size: { width: number; height: number }, direction: 1 | -1): XYPosition => {
-      const rects = obstacles();
-      for (let column = 0; column < MAX_COLUMNS; column++) {
-        const x = from.x + direction * column * (size.width + GAP.x);
-        for (let row = 0; row < MAX_ROWS * 2; row++) {
-          const spot = { x, y: from.y + rowOffset(row) * (size.height + GAP.y) };
-          if (parent && spot.y < GROUP_PADDING.top) continue;
-          if (!rects.some((rect) => tooClose({ ...spot, ...size }, rect))) return spot;
-        }
-      }
-      return rects.length ? below(rects) : start;
-    };
-
-    while (todo.length > 0) {
-      const candidates = todo.map((id) => ({ id, anchors: anchorsOf(id) }));
-      const connected = candidates.reduce((best, candidate) =>
-        candidate.anchors.length > best.anchors.length ? candidate : best
-      );
-      const { id, anchors } = connected.anchors.length > 0 ? connected : { id: startOf(todo), anchors: [] };
-      const node = working.get(id)!;
-      const size = sizeOf(node);
-
-      let spot: XYPosition;
-      if (anchors.length > 0) {
-        const upstream = anchors.filter((anchor) => anchor.upstream);
-        const downstream = anchors.filter((anchor) => !anchor.upstream);
-        const x = upstream.length
-          ? Math.max(...upstream.map(({ rect }) => rect.x + rect.width)) + GAP.x
-          : Math.min(...downstream.map(({ rect }) => rect.x)) - GAP.x - size.width;
-        const centerY = anchors.reduce((sum, anchor) => sum + anchor.centerY, 0) / anchors.length;
-        spot = findSpot({ x, y: centerY - size.height / 2 }, size, upstream.length ? 1 : -1);
-      } else {
-        const rects = obstacles();
-        if (!row || row.length === ROW_LENGTH) {
-          spot = findSpot(rects.length ? below(rects) : start, size, 1);
-          row = { y: spot.y, length: 1 };
-        } else {
-          spot = findSpot({ x: Math.max(...placedHere.map((rect) => rect.x + rect.width)) + GAP.x, y: row.y }, size, 1);
-          row.length++;
-        }
-      }
-
-      const position = { x: Math.round(spot.x), y: Math.round(spot.y) };
-      working.set(id, { ...node, position });
-      placedHere.push({ ...position, ...size });
-      remaining.delete(id);
-      todo.splice(todo.indexOf(id), 1);
-    }
-  }
-
-  fitContainers();
-  return new Map(toPlace.filter((id) => working.has(id)).map((id) => [id, getAbsolutePosition(working.get(id)!, working)]));
-};

package/eventcatalog/src/features/studio/studio.css

@@ -1,273 +0,0 @@
-/*
- * The visualiser hides node handles (it is read only), here they are the connection points,
- * so show them on hover, on selection and while connecting.
- */
-.studio-canvas .react-flow__handle {
-  opacity: 0 !important;
-  width: 11px;
-  height: 11px;
-  background: rgb(var(--ec-card-bg));
-  border: 2px solid rgb(var(--ec-accent));
-  transition: opacity 0.15s ease;
-  z-index: 30;
-}
-
-.studio-canvas .react-flow__node:hover .react-flow__handle,
-.studio-canvas .react-flow__node.selected .react-flow__handle,
-.studio-canvas .react-flow__pane.connecting ~ * .react-flow__handle,
-.studio-canvas .react-flow__handle.connectingto {
-  opacity: 1 !important;
-}
-
-.studio-canvas .react-flow__handle:hover,
-.studio-canvas .react-flow__handle.connectingto {
-  background: rgb(var(--ec-accent));
-}
-
-.studio-canvas .react-flow__handle.connectingto.valid {
-  background: rgb(var(--ec-badge-color-green-text));
-  border-color: rgb(var(--ec-badge-color-green-text));
-}
-
-.studio-canvas .react-flow__edge.selected .react-flow__edge-path,
-.studio-canvas .react-flow__edge:hover .react-flow__edge-path {
-  stroke: rgb(var(--ec-accent)) !important;
-  stroke-width: 2px !important;
-}
-
-/*
- * A connection being dragged (a new one, or an end moved to another node): once it's on a node it can connect
- * to, it turns the hover colour, so you know letting go will connect it
- */
-.studio-canvas .react-flow__connection-path {
-  stroke-width: 2px;
-  transition: stroke 100ms ease;
-}
-/* Like a hovered edge in the visualiser: glowing, with the dashes flowing (ec-edge-dash, from its styles) */
-.studio-canvas .react-flow__connection.valid .react-flow__connection-path {
-  stroke: #2563eb;
-  stroke-width: 4px;
-  filter: drop-shadow(0 0 8px #2563eb);
-  stroke-dasharray: 5 5;
-  animation: ec-edge-dash 0.5s linear infinite;
-}
-[data-theme='dark'] .studio-canvas .react-flow__connection.valid .react-flow__connection-path {
-  stroke: #00d9ff;
-  filter: drop-shadow(0 0 8px #00d9ff);
-}
-
-/* Comment mode (C): click anywhere to drop a comment */
-.studio-canvas.comment-mode .react-flow__pane,
-.studio-canvas.comment-mode .react-flow__node {
-  cursor: crosshair !important;
-}
-
-/* After a layout or a level change, nodes glide to their new place */
-.studio-canvas.is-layout-transition .react-flow__node {
-  transition: transform 450ms ease;
-}
-
-/* Edges are drawn where the nodes end up, so they wait for the glide to finish */
-.studio-canvas .react-flow__edges {
-  transition: opacity 200ms ease;
-}
-.studio-canvas.is-layout-transition .react-flow__edges {
-  opacity: 0;
-  transition: none;
-}
-
-/* Containers grow smoothly when they're fitted to what's in them, or someone else resizes them */
-.studio-canvas.is-container-resize :is(.react-flow__node-domain-group, .react-flow__node-system-group) {
-  transition:
-    width 300ms ease,
-    height 300ms ease,
-    transform 300ms ease;
-}
-
-/* Nodes pop in when they're added (by anyone, people or agents) */
-@keyframes studio-node-in {
-  from {
-    opacity: 0;
-    scale: 0.85;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
-}
-.studio-canvas .react-flow__node {
-  animation: studio-node-in 220ms ease-out;
-}
-
-/* No React Flow attribution on the canvas */
-.studio-canvas .react-flow__attribution {
-  display: none;
-}
-
-/*
- * Containers let the pointer through their body to the canvas (so dragging inside one draws a selection box),
- * and are moved, selected and resized by their header and resize handles. React Flow sets pointer-events inline.
- */
-.studio-canvas .react-flow__node-domain-group,
-.studio-canvas .react-flow__node-system-group {
-  pointer-events: none !important;
-}
-.studio-canvas .react-flow__node-domain-group :is(.ec-group-grip, .react-flow__resize-control),
-.studio-canvas .react-flow__node-system-group :is(.ec-group-grip, .react-flow__resize-control) {
-  pointer-events: auto;
-}
-
-/*
- * Selected nodes get an accent outline and glow around them, and hovered ones a faint outline (like Figma and
- * Miro). Drawn by the node's wrapper, so it fits every kind of node. Containers draw their own.
- */
-.studio-canvas .react-flow__node:not(.react-flow__node-domain-group, .react-flow__node-system-group)::after {
-  content: '';
-  position: absolute;
-  inset: -6px;
-  border-radius: 12px;
-  border: 2px solid transparent;
-  pointer-events: none;
-  transition:
-    border-color 120ms ease,
-    box-shadow 120ms ease;
-}
-.studio-canvas .react-flow__node:not(.react-flow__node-domain-group, .react-flow__node-system-group):hover::after {
-  border-color: rgb(var(--ec-accent) / 0.35);
-}
-.studio-canvas .react-flow__node.selected:not(.react-flow__node-domain-group, .react-flow__node-system-group)::after {
-  border-color: rgb(var(--ec-accent));
-  box-shadow: 0 0 0 4px rgb(var(--ec-accent) / 0.15);
-}
-
-/* A selected or hovered connection shows the ends you can drag to another node */
-.studio-canvas .react-flow__edge .react-flow__edgeupdater {
-  cursor: grab;
-}
-.studio-canvas .react-flow__edge:is(.selected, :hover) .react-flow__edgeupdater {
-  fill: rgb(var(--ec-accent) / 0.2);
-  stroke: rgb(var(--ec-accent));
-  stroke-width: 1.5;
-}
-
-/* A selected container */
-.studio-canvas .ec-group-selected {
-  position: absolute;
-  inset: 0;
-  border-radius: 14px;
-  box-shadow: 0 0 0 2px rgb(var(--ec-accent) / 0.7);
-  pointer-events: none;
-}
-
-/* A container something's dragged over: it goes in it when it's dropped (in the theme's button colours, which stay
-   strong in light and dark themes) */
-.studio-canvas .ec-drop-target {
-  position: absolute;
-  inset: -5px;
-  border-radius: 17px;
-  border: 3px solid rgb(var(--ec-button-bg));
-  background: rgb(var(--ec-button-bg) / 0.1);
-  box-shadow: 0 0 0 6px rgb(var(--ec-button-bg) / 0.2);
-  pointer-events: none;
-  animation: ec-drop-target-in 150ms ease-out;
-}
-.studio-canvas .ec-drop-target-label {
-  position: absolute;
-  top: -16px;
-  left: 50%;
-  translate: -50% 0;
-  white-space: nowrap;
-  border-radius: 9999px;
-  padding: 4px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  color: rgb(var(--ec-button-text));
-  background: rgb(var(--ec-button-bg));
-  box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
-}
-@keyframes ec-drop-target-in {
-  from {
-    opacity: 0;
-    scale: 0.98;
-  }
-}
-
-/*
- * What's dragged from the left panel (DragGhost): just the node, on nothing. The visualiser's class gives it the page
- * background, and its handles are hidden on the canvas only.
- */
-.studio-drag-preview,
-.studio-drag-preview .react-flow,
-.studio-drag-preview .react-flow__renderer,
-.studio-drag-preview .react-flow__pane {
-  background: transparent !important;
-}
-.studio-drag-preview .react-flow__handle {
-  display: none !important;
-}
-
-/* Text written on the canvas: no card around it, in the page's text colour */
-.studio-canvas .studio-text,
-.studio-drag-preview .studio-text {
-  min-width: 80px;
-  padding: 2px 4px;
-}
-.studio-text .studio-text-body {
-  margin: 0;
-  font-size: 16px;
-  line-height: 1.4;
-  color: rgb(var(--ec-page-text));
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.studio-canvas .studio-width-handle {
-  border-color: rgb(var(--ec-accent)) !important;
-}
-
-/* A sticky note: about square like a post-it, taller if more is written on it (dark text: the paper is light in
-   every theme) */
-.studio-note {
-  position: relative;
-  min-height: 176px;
-  height: 100%;
-  padding: 12px 14px;
-  border: 1px solid;
-  border-radius: 6px;
-  box-shadow:
-    0 1px 2px rgb(0 0 0 / 0.06),
-    0 6px 16px -6px rgb(0 0 0 / 0.18);
-  color: #1f2937;
-}
-.studio-note .studio-note-body {
-  margin: 0;
-  font-size: 13px;
-  line-height: 1.45;
-  color: inherit;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-.studio-note .studio-note-body::placeholder {
-  color: inherit;
-  opacity: 0.5;
-}
-/* Its colours, above it while it's selected */
-.studio-note .studio-note-colors {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: 0;
-  display: flex;
-  gap: 4px;
-  padding: 4px;
-  border-radius: 9999px;
-  border: 1px solid rgb(var(--ec-page-border));
-  background: rgb(var(--ec-card-bg));
-  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
-}
-.studio-note .studio-note-color {
-  width: 16px;
-  height: 16px;
-  border-radius: 9999px;
-  border: 2px solid;
-  cursor: pointer;
-}

package/dist/{chunk-KHACCTW2.js → chunk-ZEY2XUJN.js}

@@ -1,3 +1,7 @@
+import {
+  getFederationDiagnostics,
+  resolveFederationRules
+} from "./chunk-JJPB6EOZ.js";
 import {
   withFederationOutputTransaction
 } from "./chunk-WRNH5C3U.js";
@@ -10,10 +14,6 @@ import {
 import {
   createFederationContentCache
 } from "./chunk-R7Z5ALYI.js";
-import {
-  getFederationDiagnostics,
-  resolveFederationRules
-} from "./chunk-JJPB6EOZ.js";
 import {
   getEventCatalogConfigFile
 } from "./chunk-RFIXKATC.js";