@zukhruf/diagram 0.3.33 → 0.3.34

package/README.md

@@ -125,7 +125,7 @@ Two props also change the look:
 - `accent`: the highlight color. It is `green` (the default), `primary`, `neutral`, or a CSS color.
 - `stylePreset`: `default`, or `sketch`. The `sketch` preset draws black ink on white, and makes each tone the same gray.
 
-The SVG text uses the font `ui-monospace, 'Geist Mono', monospace`. The layout calculates the width of a label from the widths of a monospace font.
+The text uses the fonts Geist Sans and Geist Mono. The stylesheet loads them from `@fontsource/geist-sans` and `@fontsource/geist-mono`, which install with the package. The graph layout measures each text with a table of the glyph widths of these fonts. Thus the text fits its box on each operating system and in server rendering. See [ADR 0003](./docs/adr/0003-the-graph-layout-is-a-content-sized-grid.md).
 
 ## Effects
 
@@ -154,10 +154,10 @@ The source of truth is `src/lib/react/Diagram.tsx`, `src/lib/react/diagram-types
 
 The renderer sets the layout. `SvgGraphDiagram`, `CanvasGraphDiagram` and `HtmlGraphDiagram` draw a **graph**. `SvgTimelineDiagram` draws a **timeline**.
 
-- **Graph primitives:** `Node`, `Box`, `Card`, `Port`, `Label`, `Float`, `Phantom`, `Marker`, `Appliance`, `Connector`, `Junction`, `Edge`, `Arrow`, `Wire`, `Group`, `Guide`, `Text`, `Note`.
+- **Graph primitives:** `Node`, `Box`, `Card`, `Port`, `Label`, `Float`, `Marker`, `Appliance`, `Connector`, `Junction`, `Note`, `Edge`, `Arrow`, `Wire`, `Group`, `Content`.
 - **Timeline primitives:** `Lane`, `Signal`, `Frame`.
 
-`Line` makes a label with more than one line, in both layouts. `Content` goes into a `Box`, a `Card` or a `Node`, one time. `Waypoint`, `Entry` and `Exit` go into an edge.
+`Line` makes a label with more than one line, in both layouts. `Content` goes into a `Box`, a `Card` or a `Node`, one time.
 
 ### Timeline primitives
 
@@ -182,28 +182,44 @@ The layout splits the line into two stubs. The stub at the source has no arrowhe
 
 ### Graph primitives
 
-Each node has an `id`, and a `row` and a `col` in the grid. `colSpan`, `width` and `height` change its size.
-
-| Primitive           | What it is                                                  | Default frame | Notes                                                                 |
-| ------------------- | ----------------------------------------------------------- | ------------- | --------------------------------------------------------------------- |
-| `Diagram.Node`      | The general node                                            | `solid`       | Prefer `Box` or `Card`.                                               |
-| `Diagram.Box`       | A node with a solid border and centered text                | `solid`       | The usual node.                                                       |
-| `Diagram.Card`      | A node with a solid border and text that starts at the left | `solid`       | For a node with a `description` or `items`.                           |
-| `Diagram.Port`      | A node with no header                                       | `transparent` | Often holds a set of labels under a box.                              |
-| `Diagram.Label`     | Text at a grid position                                     | `none`        | For a section title or the label of an axis.                          |
-| `Diagram.Float`     | A flat node                                                 | `flat`        | An edge cannot attach to it.                                          |
-| `Diagram.Phantom`   | A node that is not visible                                  | `none`        | An edge can attach to it. Use it to make an edge go through one cell. |
-| `Diagram.Marker`    | A node with an `icon`, for example `server` or `user`       | `none`        | The icon is required.                                                 |
-| `Diagram.Appliance` | A hardware device                                           | `none`        | `appliancePorts`, `antenna` and `slant` change the drawing.           |
-| `Diagram.Connector` | A small node with round corners and an optional `icon`      | `solid`       | The default size is 148 × 40.                                         |
-| `Diagram.Junction`  | A small circle where edges meet                             | `none`        | The default size is 16 × 16.                                          |
+A graph is a grid of cells. Give each node an `id`, and a `row` and a `col`: integers from 0. `rowSpan` and `colSpan` let a node cover more cells. One node at most is in a cell. You do not give sizes in pixels. The layout measures the content of each node, and gives each row and each column the size of its largest content.
+
+| Primitive           | What it is                                                  | Default frame | Size                                    |
+| ------------------- | ----------------------------------------------------------- | ------------- | --------------------------------------- |
+| `Diagram.Node`      | The general node                                            | `solid`       | Fills its area. Prefer `Box` or `Card`. |
+| `Diagram.Box`       | A node with a solid border and centered text                | `solid`       | Fills its area. The usual node.         |
+| `Diagram.Card`      | A node with a solid border and text that starts at the left | `solid`       | Fills its area.                         |
+| `Diagram.Port`      | A node with no header                                       | `transparent` | Fills its area.                         |
+| `Diagram.Label`     | Text at a grid position                                     | `none`        | Fills its area.                         |
+| `Diagram.Float`     | A flat node. An edge cannot attach to it.                   | `flat`        | Fills its area.                         |
+| `Diagram.Marker`    | A node with an `icon`, for example `server` or `user`       | `none`        | Its own size. The icon is required.     |
+| `Diagram.Appliance` | A hardware device                                           | `none`        | Its own size.                           |
+| `Diagram.Connector` | A small node with round corners and an optional `icon`      | `solid`       | Its own size.                           |
+| `Diagram.Junction`  | A small circle where edges meet                             | `none`        | Its own size.                           |
+| `Diagram.Note`      | Text with no frame, with an optional leader to a `target`   | `none`        | Its own size.                           |
+
+A node that keeps its own size goes at the center of its area.
 
 Other props of a node:
 
-- `tone`, `texture` and `accent` set its colors.
+- `tone`, `texture` and `accent` set its colors. `frame` sets its border.
+- `description` and `items` add text under the title of a card.
 - `caption` puts text next to the node, on the side that `captionSide` sets.
-- `ports` gives node ports: named points on a side, where an edge can attach.
-- `stack` draws copies of the frame behind the node, for a set of equal items.
+- `ports` gives node ports: named points on a side, where an edge can attach. When a side has ports, each edge to that side must name a port.
+- `stack` draws copies of the frame behind the node, for a set of equal items. `stackDirection` sets where the copies go.
+- `appliancePorts` and `antenna` change the drawing of an appliance.
+
+A note explains a node or a group. With a `target`, the layout draws a leader from the note to it:
+
+```tsx
+<Diagram.Box id="cert-manager" row={2} col={5}>
+  cert-manager
+</Diagram.Box>
+<Diagram.Note id="cert-note" row={2} col={7} target="cert-manager">
+  <Diagram.Line>Manages</Diagram.Line>
+  <Diagram.Line>certificates</Diagram.Line>
+</Diagram.Note>
+```
 
 ### Edges
 
@@ -213,45 +229,72 @@ Other props of a node:
 | `Diagram.Wire`  | An edge with no arrowhead                 | No            | When the direction is clear or the same both ways. |
 | `Diagram.Edge`  | The general edge; set `headless` yourself | You select it | Prefer `Arrow` or `Wire`.                          |
 
-The required props are `from` and `to`. Other props: `lineStyle` (`solid`, `dashed`, `dotted`), `direction` (`forward`, `both`, `none`), `route` (`orthogonal`, `straight`), `dim`, `accent`, the `label*` props, and the `badge*` props for an icon on the edge.
+The required props are `from` and `to`. Each is the id of a node or a group, or `id:port` for a node port. The other props are:
 
-An edge accepts these children: text and `Diagram.Line` for its label, and `Diagram.Entry`, `Diagram.Exit` and `Diagram.Waypoint`.
+- `lineStyle` (`solid`, `dashed`, `dotted`), `direction` (`forward`, `both`, `none`), `weight` (`regular`, `bold`), `dim`, `accent`, and `headless`.
+- `exitSide` and `entrySide` (`top`, `right`, `bottom`, `left`): the side of the source where the edge goes out, and the side of the target where it goes in.
+- `layer` (`background`, `foreground`): whether the edge draws below or above the nodes.
+- `labelFrame`: a box around the label.
+- `badgeIcon` and `badgeLabel`: an icon on the edge.
+- `channel`: a name that the layout copies to the `data-diagram-edge-channel` attribute.
 
-### Groups
+The text children and the `Diagram.Line` children of an edge are its label.
 
-`Diagram.Group` draws a rectangle around a set of nodes. Put the nodes in it as children, or give each node a `group` prop.
+The router in `src/lib/layouts/graph/route.ts` selects each path:
 
-The required prop is `id`. The optional props are `label`, `accent`, `tone`, `texture`, `rx` (the corner radius), `tight` (bounds that fit the nodes closely), `padding`, `dividers`, `frame` (`solid`, `dashed`, `none`), and `rowStart`, `rowEnd`, `colStart`, `colEnd` (the bounds). When you do not give the bounds, the compiler calculates them from the rows and columns of the nodes.
+- Each path is orthogonal. The router finds it with A\*, and it goes around the nodes, the captions, the group labels, and the labels of the edges that routed before it.
+- The router routes the nearest edges first.
+- When you do not give `exitSide` and `entrySide`, the router selects the sides from the cells of the two ends.
+- The edges on one side of a node divide that side into equal slots, in the order of their other ends, so they do not cross.
+- The router puts each label beside the longest segment of its edge, at the first free position.
 
-### Edge routing
+The layout throws when an edge has no route, or when a label has no free position. Each error names the edge. Then give `exitSide` or `entrySide`, move a node to a different cell, or split the diagram. When the problem is general, fix the router. See [the internals](./docs/internals.md).
+
+### Groups
 
-| Primitive          | What it does                                                                            |
-| ------------------ | --------------------------------------------------------------------------------------- |
-| `Diagram.Entry`    | Sets the side of the target where the edge goes in: `top`, `right`, `bottom` or `left`. |
-| `Diagram.Exit`     | Sets the side of the source where the edge goes out.                                    |
-| `Diagram.Waypoint` | Gives a point that the edge goes through: `{ x, y }`, a grid cell, a guide, or a node.  |
+`Diagram.Group` draws a rectangle around a set of nodes. Put the nodes in it as children. A group can be in a group.
 
-Use them when the router draws a crossing, or draws an edge around a node.
+The required prop is `id`. The optional props are `label`, `labelAlign`, `labelSide` (`top`, `bottom`), `titleBand` (a band behind the label), `accent`, `tone`, `texture`, `fill`, `frame` (`solid`, `dashed`, `none`), `ports`, and `dividers` (a line through each gutter in the group).
 
-The router in `src/lib/layouts/graph/graph-layout.ts` does these things:
+The area of a group is the smallest area that holds its members. To give a larger area, set `row`, `col`, `rowSpan` and `colSpan`:
 
-- A self-edge (`from` is the same as `to`) is a loop around the node. The default loop is above the node. `Exit` and `Entry` can select a different side.
-- Two edges in the same row that go in opposite directions get two lanes. For example, `running → paused` stays direct, and `paused → running` goes below the nodes.
-- An edge in the same row that goes from right to left goes below the row, not across the top of the row.
-- Return edges from the same source to the same side get different corridors. A longer return, for example `paused → idle`, goes deeper than a shorter return, for example `paused → running`.
-- The router puts each edge label from the geometry of its path.
+```tsx
+<Diagram.Group id="bug" row={0} col={3} colSpan={5} label="BUG">
+  <Diagram.Box id="reproduce" row={0} col={3}>
+    Reproduce
+  </Diagram.Box>
+  <Diagram.Box id="review-fix" row={0} col={6}>
+    Review fix
+  </Diagram.Box>
+</Diagram.Group>
+```
 
-When the default paths still cross, use `Entry`, `Exit` and `Waypoint`. When the problem is general, fix the router instead. See [the internals](./docs/internals.md).
+The border, the padding and the title band of a group go in the gutters between the rows and the columns. Thus a group never covers a node. The layout throws when two sibling groups overlap, when a node is in the area of a group that it is not a member of, and when an explicit area does not hold all of the members.
 
 ### Primitives for both layouts
 
-| Primitive         | What it is                                                                                     |
-| ----------------- | ---------------------------------------------------------------------------------------------- |
-| `Diagram.Text`    | A free annotation: `{ x, y }`, or next to a `target` node, with an optional leader line.       |
-| `Diagram.Note`    | The same as `Diagram.Text`.                                                                    |
-| `Diagram.Line`    | One line of a label with more than one line. It goes into a lane, a signal, a node or an edge. |
-| `Diagram.Guide`   | A vertical or horizontal line that helps to align things.                                      |
-| `Diagram.Content` | Real React content in a `Box`, a `Card` or a `Node`. Only `HtmlGraphDiagram` draws it.         |
+| Primitive      | What it is                                                                                     |
+| -------------- | ---------------------------------------------------------------------------------------------- |
+| `Diagram.Line` | One line of a label with more than one line. It goes into a lane, a signal, a node or an edge. |
+
+### Content
+
+`Diagram.Content` holds real React content in a `Box`, a `Card` or a `Node`. Only `HtmlGraphDiagram` draws it. The layout cannot measure React content, so give its size in pixels with `size`. The layout keeps a space of that size under the label:
+
+```tsx
+<HtmlGraphDiagram title="Query">
+  <Diagram.Box id="database" row={0} col={0}>
+    Database
+    <Diagram.Content size={{ w: 96, h: 56 }}>
+      <button type="button">Run query</button>
+    </Diagram.Content>
+  </Diagram.Box>
+</HtmlGraphDiagram>
+```
+
+### The layout without React
+
+`layoutGraph(ir)` calculates the layout of a graph and returns a `GraphLayout`: the boxes of the nodes, the rectangles of the groups, the paths of the edges and the leaders, the positions of each text, and the `viewBox`. It is a pure, synchronous function. The renderers call it, and only copy its values. The package exports it and its types.
 
 ### Labels
 
@@ -269,8 +312,8 @@ The compiler checks the children, and it throws with a clear message:
 - A renderer accepts only primitives as children.
 - A React fragment (`<>…</>`) throws. Write the primitives directly, or give an array of primitives.
 - A different component, for example `<MyHelper />`, throws with the name of the component.
-- A lane, a signal, an edge and a frame accept only their own children: text, `Line`, `Entry`, `Exit` and `Waypoint`, and `Signal` in a frame.
-- A duplicate `id` of a node, a group, a guide or a lane throws, with the id in the message.
+- A lane, a signal, an edge and a frame accept only their own children: text and `Line`, and `Signal` in a frame.
+- A duplicate `id` of a node, a group or a lane throws, with the id in the message.
 - An edge to a missing `from` or `to` throws, with both ends in the message.
 
 ### Renderer props
@@ -291,7 +334,7 @@ Each renderer takes these props:
 | `viewport`    | `{ fit?, zoom? }`                    | `fit: 'width'` | How the drawing fits its container: `width`, `contain` or `natural`. `zoom` scales it. |
 | `paper`       | `boolean \| { fill?, stroke?, rx? }` |                | A rectangle behind the drawing. `fill` is `background` or `surface`.                   |
 
-The graph renderers also take `graph`: the size of the columns and rows, and the padding. `HtmlGraphDiagram` takes `viewport.zoom`, but not `viewport.fit`. Only `SvgGraphDiagram` takes `effects`.
+`HtmlGraphDiagram` takes `viewport.zoom`, but not `viewport.fit`. Only `SvgGraphDiagram` takes `effects`.
 
 The package does not set the width of a diagram on a page. Give the classes of your page layout with `className`.
 
@@ -300,6 +343,8 @@ The package does not set the width of a diagram on a page. Give the classes of y
 - **Internals**: [docs/internals.md](./docs/internals.md) tells how the compiler, the layouts and the renderers divide the work, and which mistakes the code had before.
 - **Decisions**: the [architecture decision records](./docs/adr) tell why the design is as it is.
   1. [The diagram is a zukhruf package](./docs/adr/0001-the-diagram-is-a-zukhruf-package.md)
+  2. [The examples are a playground app in zukhruf](./docs/adr/0002-the-examples-are-a-playground-app-in-zukhruf.md)
+  3. [The graph layout is a content-sized grid](./docs/adr/0003-the-graph-layout-is-a-content-sized-grid.md)
 
 ## Development
 
@@ -317,9 +362,10 @@ npx nx run diagram:lint        # lints the code
 src/
   lib/model/        the IR types, and parseEndpointRef, which reads the from and to of an edge
   lib/compiler/     reads the primitives, and makes the IR
-  lib/layouts/      the pure geometry of the graph and the timeline
+  lib/layouts/      the pure geometry of the graph and the timeline; text/ measures text with the glyph table
   lib/renderers/    svg/, canvas/, html/ and webgpu/ draw the layouts; shared/ holds the parts that they share
   lib/react/        the Diagram primitives and the chrome
+  testing/          the oracle (assertSoundLayout), and the script that writes the glyph table; the build does not ship them
   index.ts          the entry
-styles.css          registers dist with @source
+styles.css          loads the Geist fonts, and registers dist with @source
 ```

package/dist/index.d.ts

@@ -1,8 +1,10 @@
-export { Diagram, type DiagramAccent, type DiagramApplianceProps, type DiagramConnectorProps, type DiagramContentProps, type DiagramEdgeProps, type DiagramEffects, type DiagramEntryProps, type DiagramExitProps, type DiagramFrameProps, type DiagramGroupProps, type DiagramGuideProps, type DiagramJunctionProps, type DiagramLaneProps, type DiagramLineProps, type DiagramMarkerProps, type DiagramMode, type DiagramNodeProps, type DiagramPaper, type DiagramPhantomProps, type DiagramProps, type DiagramSignalProps, type DiagramStackDirection, type DiagramStylePreset, type DiagramTextProps, type DiagramViewport, type DiagramWaypointProps, } from './lib/react/Diagram.tsx';
+export { Diagram, type DiagramAccent, type DiagramApplianceProps, type DiagramConnectorProps, type DiagramContentProps, type DiagramEdgeProps, type DiagramEffects, type DiagramFrameProps, type DiagramGroupProps, type DiagramJunctionProps, type DiagramLaneProps, type DiagramLineProps, type DiagramMarkerProps, type DiagramMode, type DiagramNodeProps, type DiagramNoteProps, type DiagramPaper, type DiagramProps, type DiagramSignalProps, type DiagramStackDirection, type DiagramStylePreset, type DiagramViewport, } from './lib/react/Diagram.tsx';
 export { SvgGraphDiagram, type SvgGraphDiagramProps, } from './lib/renderers/svg/graph-svg.tsx';
 export { SvgTimelineDiagram, type SvgTimelineDiagramProps, } from './lib/renderers/svg/timeline-svg.tsx';
 export { CanvasGraphDiagram, type CanvasGraphDiagramProps, } from './lib/renderers/canvas/graph-canvas.tsx';
 export { HtmlGraphDiagram, type HtmlGraphDiagramProps, } from './lib/renderers/html/graph-html.tsx';
-export type { Box, DiagramAnchor, DiagramAnnotation, DiagramEdge, DiagramEdgeDirection, DiagramEdgeLabelSide, DiagramEdgeLineStyle, DiagramFrameElement, DiagramGraphIR, DiagramGraphLayout, DiagramGroup, DiagramGuide, DiagramLabelLine, DiagramLane, DiagramMarker, DiagramNode, DiagramNodeIcon, DiagramNodePort, DiagramSide, DiagramSignal, DiagramTextColor, DiagramTextAlign, DiagramTexture, DiagramTimelineSpec, DiagramTone, DiagramViewportFit, Point, } from './lib/model/diagram-ir.ts';
-export type { DiagramFontFace } from './lib/layouts/text-metrics.ts';
+export { layoutGraph } from './lib/layouts/graph/layout.ts';
+export type { EdgeLabelLayout, EdgeLayout, GraphLayout, GroupLayout, LeaderLayout, NodeLayout, PortLayout, TextAnchor, TextRun, } from './lib/layouts/graph/graph-layout-result.ts';
+export type { Font, FontFace, FontWeight } from './lib/layouts/text/font.ts';
+export type { Box, DiagramEdge, DiagramEdgeDirection, DiagramEdgeLineStyle, DiagramEdgeWeight, DiagramFrameElement, DiagramGraphIR, DiagramGroup, DiagramLabelLine, DiagramLane, DiagramMarker, DiagramNode, DiagramNodeContent, DiagramNodeIcon, DiagramNodePort, DiagramSide, DiagramSignal, DiagramTextColor, DiagramTexture, DiagramTimelineSpec, DiagramTone, DiagramViewportFit, Point, } from './lib/model/diagram-ir.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,aAAa,EAClB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,oBAAoB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,yCAAyC,CAAC;AACjD,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,qCAAqC,CAAC;AAC7C,YAAY,EACV,GAAG,EACH,aAAa,EACb,iBAAiB,EACjB,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,cAAc,EACd,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,WAAW,EACX,eAAe,EACf,eAAe,EACf,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,KAAK,GACN,MAAM,2BAA2B,CAAC;AACnC,YAAY,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,aAAa,EAClB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,WAAW,EAChB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,eAAe,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,yCAAyC,CAAC;AACjD,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,YAAY,EACV,eAAe,EACf,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,OAAO,GACR,MAAM,4CAA4C,CAAC;AACpD,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC7E,YAAY,EACV,GAAG,EACH,WAAW,EACX,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,KAAK,GACN,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -3,4 +3,5 @@ export { SvgGraphDiagram } from "./lib/renderers/svg/graph-svg.js";
 export { SvgTimelineDiagram } from "./lib/renderers/svg/timeline-svg.js";
 export { CanvasGraphDiagram } from "./lib/renderers/canvas/graph-canvas.js";
 export { HtmlGraphDiagram } from "./lib/renderers/html/graph-html.js";
+export { layoutGraph } from "./lib/layouts/graph/layout.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Diagram","SvgGraphDiagram","SvgTimelineDiagram","CanvasGraphDiagram","HtmlGraphDiagram"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  Diagram,\n  type DiagramAccent,\n  type DiagramApplianceProps,\n  type DiagramConnectorProps,\n  type DiagramContentProps,\n  type DiagramEdgeProps,\n  type DiagramEffects,\n  type DiagramEntryProps,\n  type DiagramExitProps,\n  type DiagramFrameProps,\n  type DiagramGroupProps,\n  type DiagramGuideProps,\n  type DiagramJunctionProps,\n  type DiagramLaneProps,\n  type DiagramLineProps,\n  type DiagramMarkerProps,\n  type DiagramMode,\n  type DiagramNodeProps,\n  type DiagramPaper,\n  type DiagramPhantomProps,\n  type DiagramProps,\n  type DiagramSignalProps,\n  type DiagramStackDirection,\n  type DiagramStylePreset,\n  type DiagramTextProps,\n  type DiagramViewport,\n  type DiagramWaypointProps,\n} from './lib/react/Diagram.tsx';\nexport {\n  SvgGraphDiagram,\n  type SvgGraphDiagramProps,\n} from './lib/renderers/svg/graph-svg.tsx';\nexport {\n  SvgTimelineDiagram,\n  type SvgTimelineDiagramProps,\n} from './lib/renderers/svg/timeline-svg.tsx';\nexport {\n  CanvasGraphDiagram,\n  type CanvasGraphDiagramProps,\n} from './lib/renderers/canvas/graph-canvas.tsx';\nexport {\n  HtmlGraphDiagram,\n  type HtmlGraphDiagramProps,\n} from './lib/renderers/html/graph-html.tsx';\nexport type {\n  Box,\n  DiagramAnchor,\n  DiagramAnnotation,\n  DiagramEdge,\n  DiagramEdgeDirection,\n  DiagramEdgeLabelSide,\n  DiagramEdgeLineStyle,\n  DiagramFrameElement,\n  DiagramGraphIR,\n  DiagramGraphLayout,\n  DiagramGroup,\n  DiagramGuide,\n  DiagramLabelLine,\n  DiagramLane,\n  DiagramMarker,\n  DiagramNode,\n  DiagramNodeIcon,\n  DiagramNodePort,\n  DiagramSide,\n  DiagramSignal,\n  DiagramTextColor,\n  DiagramTextAlign,\n  DiagramTexture,\n  DiagramTimelineSpec,\n  DiagramTone,\n  DiagramViewportFit,\n  Point,\n} from './lib/model/diagram-ir.ts';\nexport type { DiagramFontFace } from './lib/layouts/text-metrics.ts';\n"],"mappings":"AAAA,SACEA,OAAO,QA2BF,wBAAyB;AAChC,SACEC,eAAe,QAEV,kCAAmC;AAC1C,SACEC,kBAAkB,QAEb,qCAAsC;AAC7C,SACEC,kBAAkB,QAEb,wCAAyC;AAChD,SACEC,gBAAgB,QAEX,oCAAqC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Diagram","SvgGraphDiagram","SvgTimelineDiagram","CanvasGraphDiagram","HtmlGraphDiagram","layoutGraph"],"sources":["../src/index.ts"],"sourcesContent":["export {\n  Diagram,\n  type DiagramAccent,\n  type DiagramApplianceProps,\n  type DiagramConnectorProps,\n  type DiagramContentProps,\n  type DiagramEdgeProps,\n  type DiagramEffects,\n  type DiagramFrameProps,\n  type DiagramGroupProps,\n  type DiagramJunctionProps,\n  type DiagramLaneProps,\n  type DiagramLineProps,\n  type DiagramMarkerProps,\n  type DiagramMode,\n  type DiagramNodeProps,\n  type DiagramNoteProps,\n  type DiagramPaper,\n  type DiagramProps,\n  type DiagramSignalProps,\n  type DiagramStackDirection,\n  type DiagramStylePreset,\n  type DiagramViewport,\n} from './lib/react/Diagram.tsx';\nexport {\n  SvgGraphDiagram,\n  type SvgGraphDiagramProps,\n} from './lib/renderers/svg/graph-svg.tsx';\nexport {\n  SvgTimelineDiagram,\n  type SvgTimelineDiagramProps,\n} from './lib/renderers/svg/timeline-svg.tsx';\nexport {\n  CanvasGraphDiagram,\n  type CanvasGraphDiagramProps,\n} from './lib/renderers/canvas/graph-canvas.tsx';\nexport {\n  HtmlGraphDiagram,\n  type HtmlGraphDiagramProps,\n} from './lib/renderers/html/graph-html.tsx';\nexport { layoutGraph } from './lib/layouts/graph/layout.ts';\nexport type {\n  EdgeLabelLayout,\n  EdgeLayout,\n  GraphLayout,\n  GroupLayout,\n  LeaderLayout,\n  NodeLayout,\n  PortLayout,\n  TextAnchor,\n  TextRun,\n} from './lib/layouts/graph/graph-layout-result.ts';\nexport type { Font, FontFace, FontWeight } from './lib/layouts/text/font.ts';\nexport type {\n  Box,\n  DiagramEdge,\n  DiagramEdgeDirection,\n  DiagramEdgeLineStyle,\n  DiagramEdgeWeight,\n  DiagramFrameElement,\n  DiagramGraphIR,\n  DiagramGroup,\n  DiagramLabelLine,\n  DiagramLane,\n  DiagramMarker,\n  DiagramNode,\n  DiagramNodeContent,\n  DiagramNodeIcon,\n  DiagramNodePort,\n  DiagramSide,\n  DiagramSignal,\n  DiagramTextColor,\n  DiagramTexture,\n  DiagramTimelineSpec,\n  DiagramTone,\n  DiagramViewportFit,\n  Point,\n} from './lib/model/diagram-ir.ts';\n"],"mappings":"AAAA,SACEA,OAAO,QAsBF,wBAAyB;AAChC,SACEC,eAAe,QAEV,kCAAmC;AAC1C,SACEC,kBAAkB,QAEb,qCAAsC;AAC7C,SACEC,kBAAkB,QAEb,wCAAyC;AAChD,SACEC,gBAAgB,QAEX,oCAAqC;AAC5C,SAASC,WAAW,QAAQ,+BAA+B","ignoreList":[]}

package/dist/lib/compiler/diagram-compile.d.ts

@@ -1,16 +1,15 @@
 import { type ReactNode } from 'react';
-import type { DiagramGraphIR, DiagramGraphLayout, DiagramTimelineSpec } from '../model/diagram-ir.ts';
+import type { DiagramGraphIR, DiagramTimelineSpec } from '../model/diagram-ir.ts';
 export declare const DIAGRAM_PRIMITIVE: unique symbol;
-declare const PRIMITIVE_KINDS: readonly ["node", "box", "card", "port", "label", "float", "phantom", "appliance", "connector", "junction", "edge", "arrow", "wire", "group", "text", "line", "lane", "signal", "frame", "marker", "guide", "waypoint", "entry", "exit", "content"];
+declare const PRIMITIVE_KINDS: readonly ["node", "box", "card", "port", "label", "float", "appliance", "connector", "junction", "edge", "arrow", "wire", "group", "note", "line", "lane", "signal", "frame", "marker", "content"];
 export type PrimitiveKind = (typeof PRIMITIVE_KINDS)[number];
 export type PrimitiveComponent<P> = ((props: P) => null) & {
     [DIAGRAM_PRIMITIVE]: PrimitiveKind;
 };
 export declare function primitive<P>(kind: PrimitiveKind): PrimitiveComponent<P>;
 export declare function primitiveKind(node: ReactNode): PrimitiveKind | null;
-export declare function compileGraph(children: ReactNode, layout: DiagramGraphLayout | undefined): DiagramGraphIR;
+export declare function compileGraph(children: ReactNode): DiagramGraphIR;
 export declare function compileTimeline(children: ReactNode): DiagramTimelineSpec;
-export declare function validateGraph(ir: DiagramGraphIR): void;
 export declare function validateTimeline(ir: DiagramTimelineSpec): void;
 export {};
 //# sourceMappingURL=diagram-compile.d.ts.map

package/dist/lib/compiler/diagram-compile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diagram-compile.d.ts","sourceRoot":"","sources":["../../../src/lib/compiler/diagram-compile.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAIV,cAAc,EACd,kBAAkB,EAOlB,mBAAmB,EAEpB,MAAM,wBAAwB,CAAC;AAuBhC,eAAO,MAAM,iBAAiB,eAA2C,CAAC;AAE1E,QAAA,MAAM,eAAe,qPA0BX,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IACzD,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACpC,CAAC;AAEF,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,aAAa,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAEvE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,GAAG,aAAa,GAAG,IAAI,CAMnE;AA6CD,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,SAAS,EACnB,MAAM,EAAE,kBAAkB,GAAG,SAAS,GACrC,cAAc,CAmBhB;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,SAAS,GAAG,mBAAmB,CAkBxE;AA0mBD,wBAAgB,aAAa,CAAC,EAAE,EAAE,cAAc,QA0I/C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,mBAAmB,QAoBvD"}
+{"version":3,"file":"diagram-compile.d.ts","sourceRoot":"","sources":["../../../src/lib/compiler/diagram-compile.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAGV,cAAc,EAOd,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAiBhC,eAAO,MAAM,iBAAiB,eAA2C,CAAC;AAE1E,QAAA,MAAM,eAAe,oMAqBX,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IACzD,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;CACpC,CAAC;AAEF,wBAAgB,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,aAAa,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAEvE;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,GAAG,aAAa,GAAG,IAAI,CAMnE;AAuCD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,SAAS,GAAG,cAAc,CAgBhE;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,SAAS,GAAG,mBAAmB,CAgBxE;AAqYD,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,mBAAmB,QAoBvD"}