@thomasfosterau/prosekit-flowchart 0.0.0-stage → 0.1.0

package/dist/node/html.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Flowchart post-processing pass for a ProseKit HTML renderer.
+ *
+ * `@thomasfosterau/prosekit-utilities/prosekit`'s `createHtmlRenderer` (and
+ * ProseKit's own `toDOM`) render a flowchart node as an inert
+ * `<div data-flowchart data-payload="…">` placeholder — the node spec has no
+ * way to synthesise the SVG itself, since `toDOM` runs with no access to
+ * `generateFlowchartSvg`. A consuming app wires this in as that renderer's
+ * `postProcess` hook so the placeholder becomes a real diagram in the served
+ * HTML:
+ *
+ * ```ts
+ * createHtmlRenderer({ postProcess: postProcessFlowcharts });
+ * ```
+ *
+ * Ported verbatim from Website's `postProcessFlowcharts` in
+ * `src/editor/html.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/html
+ */
+/**
+ * Replaces the inner content of every `[data-flowchart]` placeholder with a
+ * server-rendered SVG snapshot derived from the placeholder's `data-payload`
+ * JSON attribute. The `data-payload` attribute stays on the element so the
+ * editor can still round-trip the diagram via {@link parseFlowchartData}.
+ *
+ * `document` is the caller's DOM implementation (the browser's global, or a
+ * server-side one such as linkedom) — this module never constructs one
+ * itself, keeping it usable from both a browser bundle and a Worker.
+ */
+export declare function postProcessFlowcharts(html: string, document: Document): string;

package/dist/node/html.js

@@ -0,0 +1,46 @@
+/**
+ * Flowchart post-processing pass for a ProseKit HTML renderer.
+ *
+ * `@thomasfosterau/prosekit-utilities/prosekit`'s `createHtmlRenderer` (and
+ * ProseKit's own `toDOM`) render a flowchart node as an inert
+ * `<div data-flowchart data-payload="…">` placeholder — the node spec has no
+ * way to synthesise the SVG itself, since `toDOM` runs with no access to
+ * `generateFlowchartSvg`. A consuming app wires this in as that renderer's
+ * `postProcess` hook so the placeholder becomes a real diagram in the served
+ * HTML:
+ *
+ * ```ts
+ * createHtmlRenderer({ postProcess: postProcessFlowcharts });
+ * ```
+ *
+ * Ported verbatim from Website's `postProcessFlowcharts` in
+ * `src/editor/html.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/html
+ */
+import * as Array from 'effect/Array';
+import { parseFlowchartData } from "./data.js";
+import { generateFlowchartSvg } from "./svg.js";
+/**
+ * Replaces the inner content of every `[data-flowchart]` placeholder with a
+ * server-rendered SVG snapshot derived from the placeholder's `data-payload`
+ * JSON attribute. The `data-payload` attribute stays on the element so the
+ * editor can still round-trip the diagram via {@link parseFlowchartData}.
+ *
+ * `document` is the caller's DOM implementation (the browser's global, or a
+ * server-side one such as linkedom) — this module never constructs one
+ * itself, keeping it usable from both a browser bundle and a Worker.
+ */
+export function postProcessFlowcharts(html, document) {
+    if (!html.includes('data-flowchart'))
+        return html;
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    const placeholders = Array.fromIterable(container.querySelectorAll('[data-flowchart]'));
+    placeholders.forEach((placeholder) => {
+        const payload = placeholder.getAttribute('data-payload') ?? '';
+        const data = parseFlowchartData(payload);
+        placeholder.innerHTML = generateFlowchartSvg(data);
+    });
+    return container.innerHTML;
+}

package/dist/node/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `@thomasfosterau/prosekit-flowchart/node` — the flowchart block without a
+ * canvas: the ProseKit node spec and command, the Effect Schema payload, the
+ * server-renderable SVG, the attribute-overlay entry and the HTML / Markdown
+ * serialiser hooks. Safe on a server and in a bundle that never renders the
+ * canvas.
+ *
+ * @module
+ */
+export { EMPTY_FLOWCHART, parseFlowchartData, type FlowchartPosition } from './data.ts';
+export { defineFlowchart } from './flowchart-node.ts';
+export { postProcessFlowcharts } from './html.ts';
+export { flowchartMarkdown } from './markdown.ts';
+export { FLOWCHART_ATTRIBUTE_OVERRIDES } from './overrides.ts';
+export { FlowchartData, FlowchartEdge, FlowchartNode } from './schema.ts';
+export { generateFlowchartSvg, type FlowchartSvgLabels } from './svg.ts';

package/dist/node/index.js

@@ -0,0 +1,16 @@
+/**
+ * `@thomasfosterau/prosekit-flowchart/node` — the flowchart block without a
+ * canvas: the ProseKit node spec and command, the Effect Schema payload, the
+ * server-renderable SVG, the attribute-overlay entry and the HTML / Markdown
+ * serialiser hooks. Safe on a server and in a bundle that never renders the
+ * canvas.
+ *
+ * @module
+ */
+export { EMPTY_FLOWCHART, parseFlowchartData } from "./data.js";
+export { defineFlowchart } from "./flowchart-node.js";
+export { postProcessFlowcharts } from "./html.js";
+export { flowchartMarkdown } from "./markdown.js";
+export { FLOWCHART_ATTRIBUTE_OVERRIDES } from "./overrides.js";
+export { FlowchartData, FlowchartEdge, FlowchartNode } from "./schema.js";
+export { generateFlowchartSvg } from "./svg.js";

package/dist/node/markdown.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Markdown placeholder for the flowchart block.
+ *
+ * Markdown has no diagram syntax, so a flowchart node renders as a fixed,
+ * overridable label rather than being silently dropped — the Markdown stays
+ * a truthful reflection of what the HTML renders.
+ *
+ * A factory rather than a constant (unlike `@thomasfosterau/prosekit-utilities`'s
+ * other opt-in serialisers, `mentionMarkdown` / `figureMarkdown` /
+ * `sidenoteMarkdown`) so a consuming app can change the label without
+ * re-implementing the `BlockSerialiser`:
+ *
+ * ```ts
+ * const toMarkdown = createMarkdownSerialiser({
+ *   blocks: { flowchart: flowchartMarkdown('_[diagram omitted]_') },
+ * });
+ * ```
+ *
+ * Ported verbatim from the `case "flowchart": return "_[flowchart
+ * diagram]_";` branch of Website's `src/editor/markdown.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/markdown
+ */
+import type { BlockSerialiser } from '@thomasfosterau/prosekit-utilities';
+/**
+ * Builds a {@link BlockSerialiser} that renders every flowchart node as
+ * `label`, ignoring the node's own content — there is nothing in a
+ * {@link import("./schema.ts").FlowchartData} payload with a faithful
+ * Markdown form.
+ */
+export declare function flowchartMarkdown(label?: string): BlockSerialiser;

package/dist/node/markdown.js

@@ -0,0 +1,34 @@
+/**
+ * Markdown placeholder for the flowchart block.
+ *
+ * Markdown has no diagram syntax, so a flowchart node renders as a fixed,
+ * overridable label rather than being silently dropped — the Markdown stays
+ * a truthful reflection of what the HTML renders.
+ *
+ * A factory rather than a constant (unlike `@thomasfosterau/prosekit-utilities`'s
+ * other opt-in serialisers, `mentionMarkdown` / `figureMarkdown` /
+ * `sidenoteMarkdown`) so a consuming app can change the label without
+ * re-implementing the `BlockSerialiser`:
+ *
+ * ```ts
+ * const toMarkdown = createMarkdownSerialiser({
+ *   blocks: { flowchart: flowchartMarkdown('_[diagram omitted]_') },
+ * });
+ * ```
+ *
+ * Ported verbatim from the `case "flowchart": return "_[flowchart
+ * diagram]_";` branch of Website's `src/editor/markdown.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/markdown
+ */
+/** Website's own copy, and this factory's default `label`. */
+const DEFAULT_LABEL = '_[flowchart diagram]_';
+/**
+ * Builds a {@link BlockSerialiser} that renders every flowchart node as
+ * `label`, ignoring the node's own content — there is nothing in a
+ * {@link import("./schema.ts").FlowchartData} payload with a faithful
+ * Markdown form.
+ */
+export function flowchartMarkdown(label = DEFAULT_LABEL) {
+    return () => label;
+}

package/dist/node/overrides.d.ts

@@ -0,0 +1,43 @@
+/**
+ * The flowchart node's attribute-overlay entry.
+ *
+ * `@thomasfosterau/prosekit-utilities/derive` recovers a ProseMirror node's
+ * attribute *structure* (its default, whether the key is omissible) but not
+ * its value *type* — a caller supplies that through an `AttributeOverlay` /
+ * `attributeOverlay()` record. `flowchart.data` is the one attribute this
+ * package's node spec owns, so this is the entry a consuming app merges into
+ * its own overlay:
+ *
+ * ```ts
+ * import { attributeOverlay } from '@thomasfosterau/prosekit-utilities/derive';
+ * import { FLOWCHART_ATTRIBUTE_OVERRIDES } from '@thomasfosterau/prosekit-flowchart/node';
+ *
+ * const overlay = attributeOverlay({
+ *   ...STANDARD_ATTRIBUTE_OVERRIDES,
+ *   ...FLOWCHART_ATTRIBUTE_OVERRIDES,
+ * });
+ * ```
+ *
+ * Wrapped in `required(...)`: ProseMirror's own rule is that any attribute
+ * with a `default` — even one an overlay supplies a value type for — becomes
+ * an omissible key, but a live editor's `flowchart` node always serialises
+ * `data` in practice (`Node.toJSON()` includes every attr, defaulted or not).
+ * Leaving it omissible would let a machine-authored document skip the value
+ * the model was supposed to specify (a flowchart with no diagram data)
+ * without failing validation.
+ *
+ * Ported verbatim from the `flowchart: { data: required(FlowchartData) }`
+ * entry in Website's `src/editor/document-schema.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/overrides
+ */
+import { type RequiredAttribute } from '@thomasfosterau/prosekit-utilities/derive';
+/**
+ * The flowchart node's attribute overlay: `data` typed as {@link FlowchartData}
+ * and required.
+ */
+export declare const FLOWCHART_ATTRIBUTE_OVERRIDES: {
+    readonly flowchart: {
+        readonly data: RequiredAttribute;
+    };
+};

package/dist/node/overrides.js

@@ -0,0 +1,42 @@
+/**
+ * The flowchart node's attribute-overlay entry.
+ *
+ * `@thomasfosterau/prosekit-utilities/derive` recovers a ProseMirror node's
+ * attribute *structure* (its default, whether the key is omissible) but not
+ * its value *type* — a caller supplies that through an `AttributeOverlay` /
+ * `attributeOverlay()` record. `flowchart.data` is the one attribute this
+ * package's node spec owns, so this is the entry a consuming app merges into
+ * its own overlay:
+ *
+ * ```ts
+ * import { attributeOverlay } from '@thomasfosterau/prosekit-utilities/derive';
+ * import { FLOWCHART_ATTRIBUTE_OVERRIDES } from '@thomasfosterau/prosekit-flowchart/node';
+ *
+ * const overlay = attributeOverlay({
+ *   ...STANDARD_ATTRIBUTE_OVERRIDES,
+ *   ...FLOWCHART_ATTRIBUTE_OVERRIDES,
+ * });
+ * ```
+ *
+ * Wrapped in `required(...)`: ProseMirror's own rule is that any attribute
+ * with a `default` — even one an overlay supplies a value type for — becomes
+ * an omissible key, but a live editor's `flowchart` node always serialises
+ * `data` in practice (`Node.toJSON()` includes every attr, defaulted or not).
+ * Leaving it omissible would let a machine-authored document skip the value
+ * the model was supposed to specify (a flowchart with no diagram data)
+ * without failing validation.
+ *
+ * Ported verbatim from the `flowchart: { data: required(FlowchartData) }`
+ * entry in Website's `src/editor/document-schema.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/overrides
+ */
+import { required } from '@thomasfosterau/prosekit-utilities/derive';
+import { FlowchartData } from "./schema.js";
+/**
+ * The flowchart node's attribute overlay: `data` typed as {@link FlowchartData}
+ * and required.
+ */
+export const FLOWCHART_ATTRIBUTE_OVERRIDES = {
+    flowchart: { data: /* @__PURE__ */ required(FlowchartData) },
+};

package/dist/node/schema.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Effect Schema for the flowchart node's persisted `data` attribute.
+ *
+ * This is the value-type seam a ProseMirror `AttributeSpec` cannot express on
+ * its own: `FLOWCHART_ATTRIBUTE_OVERRIDES` (`./overrides.ts`) hands these
+ * schemas to a consuming app's `@thomasfosterau/prosekit-utilities/derive`
+ * attribute overlay so the derived document schema can decode/encode the
+ * flowchart payload precisely, rather than treating it as an opaque blob.
+ *
+ * The persisted shape is a strict subset of what this package's canvas
+ * dependency (Svelte Flow) accepts: only the fields that must survive
+ * persistence, so its internal fields (selection, measured dimensions) never
+ * round-trip.
+ *
+ * Ported verbatim from Website's `src/editor/flowchart/schema.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/schema
+ */
+import * as Schema from 'effect/Schema';
+/** Persisted shape of a single flowchart node. */
+export declare const FlowchartNode: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly position: Schema.Struct<{
+        readonly x: Schema.Finite;
+        readonly y: Schema.Finite;
+    }>;
+    readonly data: Schema.Struct<{
+        readonly label: Schema.String;
+    }>;
+}>;
+/** The decoded type of {@link FlowchartNode}. */
+export type FlowchartNode = typeof FlowchartNode.Type;
+/** Persisted shape of a single flowchart edge. */
+export declare const FlowchartEdge: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly source: Schema.String;
+    readonly target: Schema.String;
+}>;
+/** The decoded type of {@link FlowchartEdge}. */
+export type FlowchartEdge = typeof FlowchartEdge.Type;
+/**
+ * Persisted payload stored on the ProseMirror `flowchart` node's `data` attr.
+ */
+export declare const FlowchartData: Schema.Struct<{
+    readonly nodes: Schema.$Array<Schema.Struct<{
+        readonly id: Schema.String;
+        readonly position: Schema.Struct<{
+            readonly x: Schema.Finite;
+            readonly y: Schema.Finite;
+        }>;
+        readonly data: Schema.Struct<{
+            readonly label: Schema.String;
+        }>;
+    }>>;
+    readonly edges: Schema.$Array<Schema.Struct<{
+        readonly id: Schema.String;
+        readonly source: Schema.String;
+        readonly target: Schema.String;
+    }>>;
+}>;
+/** The decoded type of {@link FlowchartData}. */
+export type FlowchartData = typeof FlowchartData.Type;

package/dist/node/schema.js

@@ -0,0 +1,50 @@
+/**
+ * Effect Schema for the flowchart node's persisted `data` attribute.
+ *
+ * This is the value-type seam a ProseMirror `AttributeSpec` cannot express on
+ * its own: `FLOWCHART_ATTRIBUTE_OVERRIDES` (`./overrides.ts`) hands these
+ * schemas to a consuming app's `@thomasfosterau/prosekit-utilities/derive`
+ * attribute overlay so the derived document schema can decode/encode the
+ * flowchart payload precisely, rather than treating it as an opaque blob.
+ *
+ * The persisted shape is a strict subset of what this package's canvas
+ * dependency (Svelte Flow) accepts: only the fields that must survive
+ * persistence, so its internal fields (selection, measured dimensions) never
+ * round-trip.
+ *
+ * Ported verbatim from Website's `src/editor/flowchart/schema.ts`.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/schema
+ */
+import * as Schema from 'effect/Schema';
+/**
+ * Position of a node on the flowchart canvas.
+ *
+ * Not exported: nothing outside this module needs the schema value, and
+ * `./data.ts` derives the public `FlowchartPosition` type from
+ * {@link FlowchartNode}'s `position` field instead, so there is no dead
+ * export to carry.
+ */
+const FlowchartPosition = /* @__PURE__ */ Schema.Struct({
+    x: Schema.Finite,
+    y: Schema.Finite,
+});
+/** Persisted shape of a single flowchart node. */
+export const FlowchartNode = /* @__PURE__ */ Schema.Struct({
+    id: Schema.String,
+    position: FlowchartPosition,
+    data: /* @__PURE__ */ Schema.Struct({ label: Schema.String }),
+});
+/** Persisted shape of a single flowchart edge. */
+export const FlowchartEdge = /* @__PURE__ */ Schema.Struct({
+    id: Schema.String,
+    source: Schema.String,
+    target: Schema.String,
+});
+/**
+ * Persisted payload stored on the ProseMirror `flowchart` node's `data` attr.
+ */
+export const FlowchartData = /* @__PURE__ */ Schema.Struct({
+    nodes: /* @__PURE__ */ Schema.Array(FlowchartNode),
+    edges: /* @__PURE__ */ Schema.Array(FlowchartEdge),
+});

package/dist/node/svg.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Server-renderable SVG synthesis for flowchart blocks.
+ *
+ * Walks a {@link FlowchartData} payload and emits a self-contained SVG markup
+ * string — no DOM measurement required, since node positions are already
+ * persisted. This is the read-only fallback a consuming app's HTML renderer
+ * injects (via `postProcessFlowcharts`, `./html.ts`) so readers see the
+ * diagram without loading this package's canvas runtime.
+ *
+ * Output is not pixel-perfect with the interactive canvas (font metrics and
+ * edge curves are approximated) but is structurally faithful and cheap to
+ * generate in a Worker.
+ *
+ * Ported verbatim from Website's `src/editor/flowchart/svg.ts`, with the
+ * three user-facing strings (the empty-state label, the diagram's
+ * node-count summary, the untitled-node fallback) promoted to an optional
+ * `labels` parameter — each still defaults to Website's own copy.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/svg
+ */
+import type { FlowchartData } from './schema.ts';
+/**
+ * Overridable copy for {@link generateFlowchartSvg}'s accessible strings;
+ * each field documents its English default.
+ */
+export interface FlowchartSvgLabels {
+    /** The empty-state `<svg>`'s `aria-label` and visible text. Default: `'Empty flowchart'`. */
+    readonly emptyLabel?: string | undefined;
+    /** The populated diagram's `aria-label`, given the node count. Default: `Flowchart diagram with ${n} node(s)`. */
+    readonly diagramLabel?: ((nodeCount: number) => string) | undefined;
+    /** Fallback text for a node whose label is blank. Default: `'Untitled'`. */
+    readonly untitledLabel?: string | undefined;
+}
+/**
+ * Returns an SVG markup string for the given flowchart payload.
+ *
+ * The SVG uses `currentColor` for strokes and text so it adapts to the
+ * surrounding theme. Width is constrained to the container via `width="100%"`;
+ * height is derived from the viewBox aspect ratio.
+ */
+export declare function generateFlowchartSvg(data: FlowchartData, labels?: FlowchartSvgLabels): string;

package/dist/node/svg.js

@@ -0,0 +1,124 @@
+/**
+ * Server-renderable SVG synthesis for flowchart blocks.
+ *
+ * Walks a {@link FlowchartData} payload and emits a self-contained SVG markup
+ * string — no DOM measurement required, since node positions are already
+ * persisted. This is the read-only fallback a consuming app's HTML renderer
+ * injects (via `postProcessFlowcharts`, `./html.ts`) so readers see the
+ * diagram without loading this package's canvas runtime.
+ *
+ * Output is not pixel-perfect with the interactive canvas (font metrics and
+ * edge curves are approximated) but is structurally faithful and cheap to
+ * generate in a Worker.
+ *
+ * Ported verbatim from Website's `src/editor/flowchart/svg.ts`, with the
+ * three user-facing strings (the empty-state label, the diagram's
+ * node-count summary, the untitled-node fallback) promoted to an optional
+ * `labels` parameter — each still defaults to Website's own copy.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/node/svg
+ */
+import * as Array from 'effect/Array';
+import * as HashMap from 'effect/HashMap';
+import * as Option from 'effect/Option';
+/** Minimum width of a rendered node box, in canvas units. */
+const MIN_NODE_WIDTH = 100;
+/** Fixed height of a rendered node box (single-line label). */
+const NODE_HEIGHT = 40;
+/** Horizontal padding inside the node box. */
+const NODE_PADDING_X = 16;
+/** Approximate advance width per character at the rendered font size. */
+const CHAR_WIDTH = 7.2;
+/** Padding around the rendered diagram inside the SVG viewBox. */
+const CANVAS_PADDING = 20;
+/** Default for `labels.emptyLabel`. */
+const DEFAULT_EMPTY_LABEL = 'Empty flowchart';
+/** Default for `labels.diagramLabel`. */
+const defaultDiagramLabel = (nodeCount) => `Flowchart diagram with ${nodeCount} node(s)`;
+/** Default for `labels.untitledLabel`. */
+const DEFAULT_UNTITLED_LABEL = 'Untitled';
+function sizeNode(node) {
+    const label = node.data.label;
+    const width = Math.max(MIN_NODE_WIDTH, label.length * CHAR_WIDTH + NODE_PADDING_X * 2);
+    return { ...node, width, height: NODE_HEIGHT };
+}
+/**
+ * Returns an SVG markup string for the given flowchart payload.
+ *
+ * The SVG uses `currentColor` for strokes and text so it adapts to the
+ * surrounding theme. Width is constrained to the container via `width="100%"`;
+ * height is derived from the viewBox aspect ratio.
+ */
+export function generateFlowchartSvg(data, labels) {
+    const emptyLabel = labels?.emptyLabel ?? DEFAULT_EMPTY_LABEL;
+    const diagramLabel = labels?.diagramLabel ?? defaultDiagramLabel;
+    const untitledLabel = labels?.untitledLabel ?? DEFAULT_UNTITLED_LABEL;
+    const sized = data.nodes.map(sizeNode);
+    if (Array.isArrayEmpty(sized)) {
+        return (`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 60" width="100%" ` +
+            `role="img" aria-label="${escapeXml(emptyLabel)}">` +
+            `<text x="120" y="30" text-anchor="middle" dominant-baseline="central" ` +
+            `font-family="ui-sans-serif, system-ui, sans-serif" font-size="12" fill="currentColor" ` +
+            `opacity="0.6">${escapeXml(emptyLabel)}</text>` +
+            `</svg>`);
+    }
+    const minX = Math.min(...sized.map((n) => n.position.x)) - CANVAS_PADDING;
+    const minY = Math.min(...sized.map((n) => n.position.y)) - CANVAS_PADDING;
+    const maxX = Math.max(...sized.map((n) => n.position.x + n.width)) + CANVAS_PADDING;
+    const maxY = Math.max(...sized.map((n) => n.position.y + n.height)) + CANVAS_PADDING;
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const byId = HashMap.fromIterable(sized.map((n) => [n.id, n]));
+    const defs = `<defs>` +
+        `<marker id="flowchart-arrow" viewBox="0 0 10 10" refX="9" refY="5" ` +
+        `markerWidth="6" markerHeight="6" orient="auto-start-reverse">` +
+        `<path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />` +
+        `</marker>` +
+        `</defs>`;
+    const edgePaths = Array.getSomes(data.edges.map((edge) => renderEdge(edge, byId))).join('');
+    const nodeRects = sized.map((node) => renderNode(node, untitledLabel)).join('');
+    return (`<svg xmlns="http://www.w3.org/2000/svg" ` +
+        `viewBox="${minX} ${minY} ${width} ${height}" ` +
+        `width="100%" preserveAspectRatio="xMidYMid meet" ` +
+        `role="img" aria-label="${escapeXml(diagramLabel(sized.length))}">` +
+        defs +
+        edgePaths +
+        nodeRects +
+        `</svg>`);
+}
+function renderNode(node, untitledLabel) {
+    const { position, width, height, data } = node;
+    return (`<g transform="translate(${position.x},${position.y})">` +
+        `<rect width="${width}" height="${height}" rx="4" ry="4" ` +
+        `fill="transparent" stroke="currentColor" stroke-width="1" />` +
+        `<text x="${width / 2}" y="${height / 2}" text-anchor="middle" ` +
+        `dominant-baseline="central" font-family="ui-sans-serif, system-ui, sans-serif" ` +
+        `font-size="12" fill="currentColor">${escapeXml(data.label || untitledLabel)}</text>` +
+        `</g>`);
+}
+function renderEdge(edge, nodes) {
+    const sourceOption = HashMap.get(nodes, edge.source);
+    const targetOption = HashMap.get(nodes, edge.target);
+    if (Option.isNone(sourceOption) || Option.isNone(targetOption))
+        return Option.none();
+    const source = sourceOption.value;
+    const target = targetOption.value;
+    // Source handle at bottom-center; target handle at top-center. Approximates
+    // Svelte Flow's default bezier edge with vertical handles.
+    const x1 = source.position.x + source.width / 2;
+    const y1 = source.position.y + source.height;
+    const x2 = target.position.x + target.width / 2;
+    const y2 = target.position.y;
+    const cyMid = (y1 + y2) / 2;
+    const path = `M ${x1},${y1} C ${x1},${cyMid} ${x2},${cyMid} ${x2},${y2}`;
+    return Option.some(`<path d="${path}" fill="none" stroke="currentColor" stroke-width="1.5" ` +
+        `marker-end="url(#flowchart-arrow)" />`);
+}
+function escapeXml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
+}

package/dist/toolbar.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The flowchart's toolbar and insert-menu entries.
+ *
+ * `@thomasfosterau/prosekit-svelte`'s `BlockToolbar` renders a list of values
+ * rather than a hard-coded row, so a block that lives in its own package can
+ * add itself to a toolbar without either package importing the other's UI.
+ * These two factories are that entry: an application appends
+ * `flowchartToolbarItem()` to its `items` and `flowchartSlashCommand()` to its
+ * `slashCommands`, and gets the same button and menu row the source
+ * application had.
+ *
+ * Both insert the starter diagram the source application used — one node
+ * labelled "Start" at (120, 80) — rather than an empty payload, because an
+ * empty canvas gives an author nothing to double-click and no anchor to drag a
+ * connection from.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/toolbar
+ */
+import type { SlashCommand, ToolbarItem } from '@thomasfosterau/prosekit-svelte';
+/**
+ * The toolbar button that inserts a flowchart block.
+ *
+ * An action, not a toggle: inserting a block has no pressed state, and a
+ * button claiming one would lie to every assistive technology reading it.
+ *
+ * @param label - Visible text and accessible name. Default: `'Flowchart'`.
+ */
+export declare function flowchartToolbarItem(label?: string): ToolbarItem;
+/**
+ * The insert-menu entry that inserts a flowchart block — the same insertion as
+ * {@link flowchartToolbarItem}, reached from the Insert menu instead.
+ *
+ * @param label - Visible text and accessible name. Default: `'Flowchart'`.
+ */
+export declare function flowchartSlashCommand(label?: string): SlashCommand;

package/dist/toolbar.js

@@ -0,0 +1,74 @@
+/**
+ * The flowchart's toolbar and insert-menu entries.
+ *
+ * `@thomasfosterau/prosekit-svelte`'s `BlockToolbar` renders a list of values
+ * rather than a hard-coded row, so a block that lives in its own package can
+ * add itself to a toolbar without either package importing the other's UI.
+ * These two factories are that entry: an application appends
+ * `flowchartToolbarItem()` to its `items` and `flowchartSlashCommand()` to its
+ * `slashCommands`, and gets the same button and menu row the source
+ * application had.
+ *
+ * Both insert the starter diagram the source application used — one node
+ * labelled "Start" at (120, 80) — rather than an empty payload, because an
+ * empty canvas gives an author nothing to double-click and no anchor to drag a
+ * connection from.
+ *
+ * @module @thomasfosterau/prosekit-flowchart/toolbar
+ */
+/**
+ * The diagram a freshly inserted flowchart block carries.
+ *
+ * Built per call, never shared: the payload becomes a ProseMirror node
+ * attribute, and handing two nodes the same object would let an edit to one
+ * diagram appear in the other.
+ */
+function starterDiagram() {
+    return {
+        nodes: [{ id: 'n-start', position: { x: 120, y: 80 }, data: { label: 'Start' } }],
+        edges: [],
+    };
+}
+/**
+ * Inserts a `flowchart` node at the selection, then returns focus to the
+ * document.
+ *
+ * The command is reached by name through the editor's own `commands` record —
+ * the same loose lookup the default item set uses — so the entry is inert
+ * rather than throwing against an extension that never registered
+ * `defineFlowchart()`.
+ */
+function insertFlowchart({ editor }) {
+    const commands = editor.commands;
+    commands['insertNode']?.({ type: 'flowchart', attrs: { data: starterDiagram() } });
+    editor.focus();
+}
+/**
+ * The toolbar button that inserts a flowchart block.
+ *
+ * An action, not a toggle: inserting a block has no pressed state, and a
+ * button claiming one would lie to every assistive technology reading it.
+ *
+ * @param label - Visible text and accessible name. Default: `'Flowchart'`.
+ */
+export function flowchartToolbarItem(label = 'Flowchart') {
+    return {
+        id: 'flowchart',
+        label,
+        kind: 'action',
+        run: insertFlowchart,
+    };
+}
+/**
+ * The insert-menu entry that inserts a flowchart block — the same insertion as
+ * {@link flowchartToolbarItem}, reached from the Insert menu instead.
+ *
+ * @param label - Visible text and accessible name. Default: `'Flowchart'`.
+ */
+export function flowchartSlashCommand(label = 'Flowchart') {
+    return {
+        id: 'flowchart',
+        label,
+        run: insertFlowchart,
+    };
+}