@theodo-group/epure 0.1.0 → 0.2.0

package/README.md

@@ -45,6 +45,26 @@ npx @theodo-group/epure ./docs/diagrams/system.epr.d2
 This prints a local URL and serves the editor against that pair, syncing your
 edits both ways. (It creates a starter diagram if the file doesn't exist yet.)
 
+## Use it as a library
+
+The npm package also exposes the editor's internals as importable entry points
+(React 18 and 19 are both supported as peers):
+
+```ts
+// Headless pair → SVG/PNG, no browser, no DOM — the editor's exact look.
+import { renderDiagramSvg, packagedIconsDir } from '@theodo-group/epure/render'
+const svg = await renderDiagramSvg(d2, layoutJson, { iconsDir: packagedIconsDir() })
+
+// The bundled icon catalog (~9.4k icons) and its zero-dependency search.
+import { searchIcons, iconById, ICON_CATALOG } from '@theodo-group/epure/icons'
+
+// The presentational SVG components the renders are drawn with.
+import { Node, Edge, EdgeDefs, Area, AreaLabel } from '@theodo-group/epure/react'
+```
+
+The icon images ship with the package: on disk under `packagedIconsDir()`, or
+per file via `@theodo-group/epure/icons/files/<id>.png`.
+
 ## Commands
 
 Every command is `npx @theodo-group/epure <command>`:

package/dist-lib/Canvas-BcrF3N4l.d.ts

@@ -0,0 +1,96 @@
+type ShapeName = 'rectangle' | 'cylinder' | 'person';
+type EdgeStyle = 'solid' | 'dashed' | 'dotted';
+type EdgeDirection = 'forward' | 'backward' | 'bidirectional' | 'none';
+
+type PaletteColor = 'black' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'pink';
+type FillColor = PaletteColor | 'transparent' | 'white';
+type Size = 'S' | 'M' | 'L' | 'XL';
+type LineStyle = 'solid' | 'dashed' | 'dotted';
+type EndCap = 'none' | 'arrow' | 'dot' | 'diamond';
+
+type Side = 'N' | 'S' | 'E' | 'W';
+interface NodeStyle {
+    textSize?: Size;
+    textColor?: PaletteColor;
+    borderColor?: PaletteColor;
+    borderStyle?: LineStyle;
+    fillColor?: FillColor;
+    /** Override the shape parsed from the D2 source. Useful from the style
+     *  panel when the user wants to change a node's shape without editing the
+     *  source. Unset → use the AST shape. */
+    shape?: ShapeName;
+    /** Icon id from the bundled catalog (e.g. "aws/compute/ec2"). */
+    icon?: string;
+    /** Where the icon sits on the node. `corner` (default) is a small badge in
+     *  the bottom-right; `top` puts a larger icon centered above the label. */
+    iconPosition?: 'corner' | 'top';
+}
+interface EdgeStyleSpec {
+    color?: PaletteColor;
+    lineStyle?: LineStyle;
+    width?: Size;
+    startCap?: EndCap;
+    endCap?: EndCap;
+    /** Nudge the label off its auto-computed anchor, in grid units (integers,
+     *  may be negative). Absent → label sits at the routed default. Shared by
+     *  every parallel edge of the same source→target pair (like the other
+     *  style fields). */
+    labelDx?: number;
+    labelDy?: number;
+}
+interface AreaStyleSpec {
+    borderColor?: PaletteColor;
+    borderStyle?: LineStyle;
+    fillColor?: FillColor;
+}
+interface NodeLayout extends NodeStyle {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface AreaLayout extends AreaStyleSpec {
+    id: string;
+    label?: string;
+    members: string[];
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+interface EdgeEndpoint {
+    nodeId: string;
+    side: Side;
+}
+interface EdgeRoute extends EdgeStyleSpec {
+    id: string;
+    source: EdgeEndpoint;
+    target: EdgeEndpoint;
+    points: {
+        x: number;
+        y: number;
+    }[];
+    labelAnchor?: {
+        x: number;
+        y: number;
+    };
+}
+interface RoutedDiagram {
+    gridSize: number;
+    nodes: NodeLayout[];
+    areas: AreaLayout[];
+    edges: EdgeRoute[];
+}
+
+interface NodeMeta {
+    shape: ShapeName;
+    label?: string;
+}
+interface EdgeMeta {
+    label?: string;
+    style?: EdgeStyle;
+    marker?: EdgeDirection;
+}
+
+export type { AreaLayout as A, EdgeRoute as E, FillColor as F, LineStyle as L, NodeMeta as N, PaletteColor as P, RoutedDiagram as R, ShapeName as S, Size as a, Side as b, EdgeStyle as c, EdgeDirection as d, EdgeMeta as e };