@misoto22/design 0.6.0 → 0.7.0

package/dist/diagrams/spec.d.ts

@@ -0,0 +1,353 @@
+/**
+ * The five diagram specifications, and the vocabulary they share.
+ *
+ * These types mirror the JSON schemas published by
+ * [archify](https://github.com/tt-a1i/archify) — `architecture`, `workflow`,
+ * `sequence`, `dataflow` and `lifecycle` — so a specification authored for that
+ * tool renders here without a translation step. That compatibility is the whole
+ * point of copying somebody else's field names: an agent that already knows how
+ * to write `{ "diagram_type": "architecture", "components": [...] }` can hand
+ * the same object to a React component and get the system's own look back.
+ *
+ * WHAT IS DELIBERATELY NOT HERE: archify's routing micro-controls. `via`,
+ * `channelX`, `channelY`, `labelAt`, `labelSegment` and `bias` exist there to
+ * let an author nudge a line after a validator complains about a collision.
+ * They are accepted below and honoured where they are cheap, because dropping a
+ * field silently turns a valid specification into a different diagram — but
+ * they are hints, not a contract, and a figure that needs many of them is a
+ * figure that wants fewer edges.
+ *
+ * Every position in every type is EXPLICIT — a row and a column, a lane and a
+ * step, a participant and a y. Nothing below is solved for. That is what makes
+ * these figures server-renderable: layout is arithmetic on numbers the
+ * specification already carries, not a simulation that has to settle.
+ */
+/** A point in the figure's own user-unit space. */
+type Point = [x: number, y: number];
+/** Which face of a box a line leaves from or arrives at. */
+type Side = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * What a node IS, across every diagram type that has nodes.
+ *
+ * Seven kinds, and in a monochrome system none of them is a colour. Each is
+ * drawn as a distinct sigil in the node's leading corner — a cylinder for a
+ * database, a shield for a security boundary, rails and ticks for a queue — so
+ * the kind survives a greyscale print, a colour-blind reader, and the system's
+ * own rule that the only chroma left is bound to state.
+ */
+type NodeKind = 'frontend' | 'backend' | 'database' | 'cloud' | 'security' | 'messagebus' | 'external';
+/**
+ * How much a relationship or a node is being insisted upon.
+ *
+ * `emphasis` reverses the plate; `security` dashes the frame and doubles the
+ * rule; `dashed` is the quiet one — an optional path, an asynchronous hop.
+ */
+type Variant = 'default' | 'emphasis' | 'security' | 'dashed';
+/** How a line gets from one box to another. */
+type RouteMode = 'auto' | 'straight' | 'orthogonal-h' | 'orthogonal-v';
+/** Whether the key beside the figure names every kind, only the used ones, or none. */
+type LegendMode = 'auto' | 'all' | 'hidden';
+/**
+ * One curated stop in a guided reading of the figure.
+ *
+ * At most five, which is archify's cap and a good one: a sixth chapter is a
+ * second diagram wearing the first one's clothes.
+ */
+interface DiagramView {
+    id: string;
+    label: string;
+    /** Node ids this chapter lights. */
+    focus: string[];
+    note?: string;
+}
+/**
+ * A conclusion card printed under the figure.
+ *
+ * `dot` names a hue in archify's palette. Here it selects a MARK — a filled
+ * square, a ring, a bar — rather than a colour, so seven cards in a row are
+ * still seven distinguishable cards on paper-white.
+ */
+interface DiagramCard {
+    dot: 'cyan' | 'emerald' | 'violet' | 'amber' | 'rose' | 'orange' | 'slate';
+    title: string;
+    items: string[];
+}
+/** What every specification says about itself. */
+interface DiagramMeta {
+    title: string;
+    subtitle?: string;
+    /**
+     * The extent the author's own renderer came out at.
+     *
+     * Accepted so a specification carrying it still typechecks, and deliberately
+     * NOT applied. It describes archify's layout — a different grid, different
+     * column widths, a different plate height — so on any figure placed from
+     * lanes and columns it is simply the wrong rectangle: too small and it crops
+     * the last participants off the edge, too large and it hangs a band of dead
+     * paper under the diagram. The extent here is computed from the marks
+     * actually drawn, which is the only number that can be right.
+     */
+    viewBox?: [number, number] | [number, number, number, number];
+    legend?: {
+        mode?: LegendMode;
+        entries?: Record<string, {
+            label?: string;
+            visible?: boolean;
+        }>;
+    };
+    views?: DiagramView[];
+}
+/** Where a node's facts came from, when the figure was built against real code. */
+interface SourceRef {
+    path: string;
+    line?: number;
+    end_line?: number;
+    label?: string;
+}
+/** The fields every drawn box carries, whatever the diagram type calls it. */
+interface NodeBase {
+    id: string;
+    label: string;
+    /** One short line under the label — what it is, a step back. */
+    sublabel?: string;
+    /** A mono chip on the box: a version, a region, a protocol. */
+    tag?: string;
+    /** How wide and tall this box is, when the type's default does not suit it. */
+    width?: number;
+    height?: number;
+}
+/** The fields every drawn line carries. */
+interface EdgeBase {
+    id?: string;
+    from: string;
+    to: string;
+    label?: string;
+    variant?: Variant;
+    fromSide?: Side;
+    toSide?: Side;
+    route?: RouteMode | string;
+    /** Waypoints the line is dragged through, in order. */
+    via?: Point[];
+    /** Pins the label rather than letting the router place it. */
+    labelAt?: Point;
+    labelDx?: number;
+    labelDy?: number;
+    /** Forces an orthogonal run through a fixed coordinate. */
+    channelX?: number;
+    channelY?: number;
+    /** Stroke weight, in user units. */
+    width?: number;
+}
+interface ArchitectureComponent extends NodeBase {
+    type: NodeKind;
+    /** Grid placement. Ignored when `pos` is given. */
+    row?: number;
+    col?: number;
+    /** Absolute placement, in user units, overriding the grid. */
+    pos?: Point;
+    /**
+     * `[width, height]`, which is how archify's architecture schema spells it.
+     *
+     * Accepted alongside the `width` / `height` pair every other diagram type
+     * uses, and it wins when both are given. Two spellings for one fact is not a
+     * design — it is the cost of reading somebody else's file format without
+     * making its authors edit their files.
+     */
+    size?: [number, number];
+    sources?: SourceRef[];
+}
+/**
+ * A frame drawn around several components.
+ *
+ * `region` is a deployment boundary — an availability zone, a VPC, a cluster.
+ * `security-group` is a trust boundary, and is drawn dashed for that reason: a
+ * reader should be able to see which line is about where a thing runs and which
+ * is about what may reach it, without reading either label.
+ */
+interface ArchitectureBoundary {
+    kind: 'region' | 'security-group';
+    label: string;
+    /** Component ids this frame encloses. */
+    wraps: string[];
+    /** Clear space between the frame and the boxes it holds. */
+    pad?: number;
+}
+interface ArchitectureSpec {
+    diagram_type?: 'architecture';
+    meta: DiagramMeta;
+    layout?: {
+        origin?: Point;
+        cols?: number;
+        gapX?: number;
+        gapY?: number;
+        cellW?: number;
+        cellH?: number;
+    };
+    components: ArchitectureComponent[];
+    boundaries?: ArchitectureBoundary[];
+    connections?: EdgeBase[];
+    cards?: DiagramCard[];
+}
+/** A horizontal band: who or what performs the steps in it. */
+interface WorkflowLane {
+    id: string;
+    label: string;
+    /** `exception` bands hold the failure path and are drawn on a washed ground. */
+    variant?: 'normal' | 'exception';
+}
+/** A vertical band across every lane: a stage of the process. */
+interface WorkflowPhase {
+    id: string;
+    label: string;
+    fromCol: number;
+    toCol: number;
+    variant?: Variant;
+}
+/** A frame around a run of columns inside ONE lane. */
+interface WorkflowGroup extends WorkflowPhase {
+    lane: string;
+}
+interface WorkflowNode extends NodeBase {
+    lane: string;
+    col: number;
+    type?: NodeKind;
+    /** Nudges this box off its row's centre line, for a branch that needs room. */
+    yOffset?: number;
+}
+/**
+ * What a line MEANS in a process, which is not the same question as how it is
+ * drawn.
+ *
+ * `main` is the path the reader should be able to follow without thinking;
+ * `branch` leaves it and comes back; `async` does not block; `return` goes
+ * backwards; `error` leaves for the exception lane.
+ */
+type WorkflowEdgeRole = 'main' | 'branch' | 'async' | 'return' | 'error';
+interface WorkflowEdge extends EdgeBase {
+    role?: WorkflowEdgeRole;
+}
+interface WorkflowSpec {
+    diagram_type?: 'workflow';
+    schema_version?: 1 | 2;
+    meta: DiagramMeta;
+    lanes: WorkflowLane[];
+    phases?: WorkflowPhase[];
+    groups?: WorkflowGroup[];
+    nodes: WorkflowNode[];
+    edges?: WorkflowEdge[];
+    /** Node ids on the path a reader should follow first. Drawn heavier. */
+    mainPath?: string[];
+    cards?: DiagramCard[];
+}
+interface SequenceParticipant extends NodeBase {
+    type?: NodeKind;
+}
+/** A labelled horizontal band across the whole figure: a phase of the exchange. */
+interface SequenceSegment {
+    from: number;
+    to: number;
+    label: string;
+}
+interface SequenceMessage {
+    id?: string;
+    from: string;
+    to: string;
+    /** Where this message sits on the vertical time axis, in user units. */
+    y: number;
+    label?: string;
+    /** `return` is drawn dashed with an open head — a reply, not a call. */
+    variant?: Variant | 'return';
+    note?: string;
+}
+/** A bar on a lifeline: this participant is busy for this span of the axis. */
+interface SequenceActivation {
+    participant: string;
+    from: number;
+    to: number;
+    type?: NodeKind;
+}
+interface SequenceSpec {
+    diagram_type?: 'sequence';
+    meta: DiagramMeta & {
+        /**
+         * `fixed` gives every participant the same column width; `spread` divides
+         * the figure evenly instead.
+         *
+         * Reach for `spread` when a fixed layout would leave a wide empty margin,
+         * or when a meaningful participant label does not fit. Shortening the label
+         * to make it fit is the wrong repair — the label is the data.
+         */
+        column_fit?: 'fixed' | 'spread';
+    };
+    participants: SequenceParticipant[];
+    segments?: SequenceSegment[];
+    messages: SequenceMessage[];
+    activations?: SequenceActivation[];
+    cards?: DiagramCard[];
+}
+/** A column header: a stage of the pipeline. */
+interface DataflowStage {
+    label: string;
+}
+interface DataflowNode extends NodeBase {
+    type: NodeKind;
+    /** Index into `stages`. */
+    stage: number;
+    row: number;
+    yOffset?: number;
+}
+interface DataflowEdge extends EdgeBase {
+    /**
+     * What is travelling, in governance terms — `PII`, `aggregated`, `hashed`.
+     *
+     * Printed as a mono chip on the line rather than folded into the label,
+     * because a data-flow diagram is very often read for exactly this and for
+     * nothing else.
+     */
+    classification?: string;
+}
+interface DataflowSpec {
+    diagram_type?: 'dataflow';
+    meta: DiagramMeta;
+    stages: DataflowStage[];
+    nodes: DataflowNode[];
+    flows?: DataflowEdge[];
+    cards?: DiagramCard[];
+}
+/**
+ * What a state IS, and here the system's one licence for colour applies.
+ *
+ * `success` and `failure` are bound to `--ok` and `--danger` — the two tokens
+ * this design system reserves for state and refuses to spend on brand. Every
+ * other kind is carried by shape: a start is a filled cap, a decision is a
+ * diamond, a wait is dashed, an external is a plate with a cut corner.
+ */
+type LifecycleStateKind = 'start' | 'active' | 'waiting' | 'decision' | 'success' | 'failure' | 'neutral' | 'external';
+interface LifecycleLane {
+    id: string;
+    label: string;
+}
+interface LifecycleState extends NodeBase {
+    type: LifecycleStateKind;
+    /** A step number printed in the corner — `01`, `02a`. */
+    step?: string;
+    lane?: string;
+    col: number;
+    yOffset?: number;
+}
+interface LifecycleTransition extends EdgeBase {
+    /** A second line under the label: the condition, the timeout, the retry count. */
+    note?: string;
+}
+interface LifecycleSpec {
+    diagram_type?: 'lifecycle';
+    meta: DiagramMeta;
+    lanes?: LifecycleLane[];
+    states: LifecycleState[];
+    transitions?: LifecycleTransition[];
+    cards?: DiagramCard[];
+}
+/** Any of the five, for a call site that dispatches on `diagram_type`. */
+type DiagramSpecAny = ArchitectureSpec | WorkflowSpec | SequenceSpec | DataflowSpec | LifecycleSpec;
+
+export type { ArchitectureBoundary, ArchitectureComponent, ArchitectureSpec, DataflowEdge, DataflowNode, DataflowSpec, DataflowStage, DiagramCard, DiagramMeta, DiagramSpecAny, DiagramView, EdgeBase, LegendMode, LifecycleLane, LifecycleSpec, LifecycleState, LifecycleStateKind, LifecycleTransition, NodeBase, NodeKind, Point, RouteMode, SequenceActivation, SequenceMessage, SequenceParticipant, SequenceSegment, SequenceSpec, Side, SourceRef, Variant, WorkflowEdge, WorkflowEdgeRole, WorkflowGroup, WorkflowLane, WorkflowNode, WorkflowPhase, WorkflowSpec };

package/dist/diagrams/spec.js

@@ -0,0 +1 @@
+//# sourceMappingURL=spec.js.map

package/dist/diagrams/spec.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/lib/svg-export.d.ts

@@ -0,0 +1,138 @@
+/**
+ * Taking an `<svg>` off the page as a file.
+ *
+ * Shared by two entries that both draw in SVG and both need to hand a reader a
+ * picture of it: `@misoto22/design/charts` and `@misoto22/design/diagrams`.
+ * Everything here is engine-agnostic — nothing knows what a series or a node
+ * is — so the parts that DO know (which `<svg>` inside a wrapper is the plot,
+ * what the file should be called, what sits behind it) stay with the caller.
+ *
+ * Nothing touches the DOM at module scope. Every browser API — `document`,
+ * `canvas`, `URL.createObjectURL` — is reached for inside a function body, so
+ * this module imports cleanly into a server component and only fails when a
+ * consumer actually asks for a file on a server, which is a call that cannot
+ * succeed anywhere.
+ */
+/**
+ * Copies the resolved paint of every node in `live` onto the matching node in
+ * `clone`.
+ *
+ * ## The problem this function exists to solve
+ *
+ * Serialising an `<svg>` and handing it to an `<img>` puts it in a document of
+ * its own. That document has none of the page's stylesheets, so every
+ * `var(--ink)`, `var(--rule-2)` and `var(--diagram-node)` in the markup
+ * resolves to nothing — and a paint that resolves to nothing is not a fallback
+ * colour, it is an invisible mark. Serialise naively and you get an empty
+ * rectangle.
+ *
+ * ## The solution
+ *
+ * Walk the live tree and the clone in step, and on every node write
+ * `getComputedStyle`'s answer into an inline `style`. Computed values have
+ * already had `var()` substituted by the engine, so `fill: var(--ink)` arrives
+ * as `fill: rgb(16, 16, 16)` — and, because the walk reads the LIVE element, it
+ * reads it under whichever theme is currently applied. Light and dark come out
+ * right for free, with no theme argument anywhere in this file.
+ *
+ * `<stop>` and `<marker>` children are walked too, which is the half that is
+ * easy to miss: a gradient's stops and an arrowhead's fill carry custom
+ * properties of their own, and a `<defs>` that lost its paint takes every line
+ * ending with it.
+ */
+declare function inlinePaint(live: Element, clone: Element): void;
+/**
+ * A custom property, resolved against the live element.
+ *
+ * `var()` inside a custom property is substituted at computed-value time, so
+ * `--diagram-surface: var(--paper)` reads back as a colour. The guard is for
+ * the case where it did not — an unregistered name, or a value the engine left
+ * as a token stream — because writing `var(--paper)` into a serialised SVG
+ * paints nothing at all.
+ */
+declare function readToken(element: Element, name: string, fallback: string): string;
+interface SerializeOptions {
+    /** Space around the artwork, in user units. Defaults to 16. */
+    padding?: number;
+    /** Painted behind the artwork. Omit for a transparent ground. */
+    background?: string;
+    /** A band above the artwork carrying this text. */
+    title?: string;
+    /** Paint for the title. Defaults to `#101010`. */
+    titleColor?: string;
+    /** Family for the title. Defaults to `sans-serif`. */
+    titleFont?: string;
+    /**
+     * Forces the output box, letterboxing the artwork inside it.
+     *
+     * This is what a share card is: a fixed 1200×630 frame that the diagram is
+     * fitted into, rather than a frame the diagram sizes. Omit it and the output
+     * is the artwork plus its padding.
+     */
+    frame?: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * One standalone `<svg>` document: the element's own artwork, repainted with
+ * resolved colours, on an optional plate, under an optional title.
+ *
+ * Returns markup rather than a blob because the SVG export wants the string
+ * and every raster export wants it as a data source — one serialisation, four
+ * file formats.
+ *
+ * ## What this cannot capture, honestly
+ *
+ * - **Anything drawn in HTML.** A toolbar, a tooltip, an inspector panel are
+ *   DOM, not SVG. The file is the artwork.
+ * - **Web fonts.** The isolated document cannot fetch the page's `@font-face`
+ *   sources, so text is rasterised in whatever the resolved family stack finds
+ *   locally. Type metrics will differ from the screen.
+ * - **Cross-origin images.** An `<image>` from another origin taints the canvas
+ *   and `toBlob` throws; there is no way around it from script.
+ */
+declare function serializeSvg(svg: SVGSVGElement, options?: SerializeOptions): string;
+/** The raster formats a browser canvas can encode. */
+type RasterFormat = 'png' | 'jpeg' | 'webp';
+interface RasterOptions {
+    /** Multiplier on the on-screen size. 2 is a retina-sharp export. */
+    scale?: number;
+    /** Encoder quality for `jpeg` and `webp`, 0–1. Ignored by `png`. */
+    quality?: number;
+    /**
+     * Painted behind the image, for a format with no alpha channel.
+     *
+     * JPEG has no transparency, so a diagram serialised without a plate lands on
+     * black. Passing the page's own surface here is what makes the file look
+     * like the screen rather than like a negative.
+     */
+    background?: string;
+}
+/**
+ * SVG markup, rasterised through a canvas.
+ *
+ * This is the browser's own SVG rasteriser re-drawing the markup, not a
+ * screenshot: antialiasing, `backdrop-filter` and any effect a page stylesheet
+ * applied from outside the `<svg>` are not in it.
+ */
+declare function rasterize(markup: string, format: RasterFormat, options?: RasterOptions): Promise<Blob>;
+/**
+ * Hands a blob to the browser as a download.
+ *
+ * Throws rather than no-oping without a `document`: a download is something a
+ * person just asked for, and a silent return would look to them like a click
+ * that did nothing.
+ */
+declare function downloadBlob(blob: Blob, filename: string): void;
+/**
+ * A title as a filename.
+ *
+ * Lowercase, ASCII-safe and hyphenated, because a downloaded file crosses into
+ * shells, zip archives and Windows paths where a title's spaces and slashes are
+ * someone else's problem. A title with no ASCII in it at all — a Chinese one,
+ * say — slugs to nothing, so the caller's fallback is what names the file.
+ */
+declare function exportFilename(title: string, extension: string, fallback?: string): string;
+
+export { type RasterFormat, type RasterOptions, type SerializeOptions, downloadBlob, exportFilename, inlinePaint, rasterize, readToken, serializeSvg };

package/dist/lib/svg-export.js

@@ -0,0 +1,198 @@
+const SVG_NS = "http://www.w3.org/2000/svg";
+const PAINTED_PROPERTIES = [
+  "display",
+  "visibility",
+  "opacity",
+  "color",
+  "fill",
+  "fill-opacity",
+  "fill-rule",
+  "stroke",
+  "stroke-opacity",
+  "stroke-width",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "stop-color",
+  "stop-opacity",
+  "flood-color",
+  "flood-opacity",
+  "marker-start",
+  "marker-mid",
+  "marker-end",
+  "mask",
+  "filter",
+  "clip-path",
+  "clip-rule",
+  "paint-order",
+  "mix-blend-mode",
+  "shape-rendering",
+  "text-anchor",
+  "dominant-baseline",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "letter-spacing",
+  "text-transform"
+];
+function inlinePaint(live, clone) {
+  const computed = getComputedStyle(live);
+  let css = "";
+  for (const property of PAINTED_PROPERTIES) {
+    const value = computed.getPropertyValue(property);
+    if (value) css += `${property}:${value};`;
+  }
+  if (css) clone.setAttribute("style", css);
+  const children = live.children;
+  const clones = clone.children;
+  for (let index = 0; index < children.length; index += 1) {
+    const liveChild = children[index];
+    const cloneChild = clones[index];
+    if (liveChild && cloneChild) inlinePaint(liveChild, cloneChild);
+  }
+}
+function readToken(element, name, fallback) {
+  const value = getComputedStyle(element).getPropertyValue(name).trim();
+  return value && !value.includes("var(") ? value : fallback;
+}
+function serializeSvg(svg, options = {}) {
+  const { padding = 16, background, title, titleColor = "#101010", titleFont = "sans-serif" } = options;
+  const box = svg.getBoundingClientRect();
+  const width = Math.ceil(box.width) || Number(svg.getAttribute("width")) || 0;
+  const height = Math.ceil(box.height) || Number(svg.getAttribute("height")) || 0;
+  if (width === 0 || height === 0) {
+    throw new Error("serializeSvg: the artwork has no measured size yet \u2014 export it after it renders");
+  }
+  const clone = svg.cloneNode(true);
+  inlinePaint(svg, clone);
+  clone.setAttribute("width", String(width));
+  clone.setAttribute("height", String(height));
+  const titleBand = title ? 34 : 0;
+  const contentWidth = width + padding * 2;
+  const contentHeight = height + padding * 2 + titleBand;
+  const totalWidth = options.frame?.width ?? contentWidth;
+  const totalHeight = options.frame?.height ?? contentHeight;
+  const scale = options.frame ? Math.min(totalWidth / contentWidth, totalHeight / contentHeight, 1) : 1;
+  const offsetX = (totalWidth - contentWidth * scale) / 2;
+  const offsetY = (totalHeight - contentHeight * scale) / 2;
+  const page = document.createElementNS(SVG_NS, "svg");
+  page.setAttribute("xmlns", SVG_NS);
+  page.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+  page.setAttribute("width", String(totalWidth));
+  page.setAttribute("height", String(totalHeight));
+  page.setAttribute("viewBox", `0 0 ${totalWidth} ${totalHeight}`);
+  if (background) {
+    const plate = document.createElementNS(SVG_NS, "rect");
+    plate.setAttribute("width", String(totalWidth));
+    plate.setAttribute("height", String(totalHeight));
+    plate.setAttribute("fill", background);
+    page.append(plate);
+  }
+  const stage = document.createElementNS(SVG_NS, "g");
+  stage.setAttribute("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
+  page.append(stage);
+  if (title) {
+    const caption = document.createElementNS(SVG_NS, "text");
+    caption.setAttribute("x", String(padding));
+    caption.setAttribute("y", String(padding + 15));
+    caption.setAttribute("fill", titleColor);
+    caption.setAttribute("font-size", "15");
+    caption.setAttribute("font-weight", "500");
+    caption.setAttribute("font-family", titleFont);
+    caption.textContent = title;
+    stage.append(caption);
+  }
+  const group = document.createElementNS(SVG_NS, "g");
+  group.setAttribute("transform", `translate(${padding}, ${padding + titleBand})`);
+  group.append(clone);
+  stage.append(group);
+  return `<?xml version="1.0" encoding="UTF-8"?>
+${new XMLSerializer().serializeToString(page)}`;
+}
+const MIME = {
+  png: "image/png",
+  jpeg: "image/jpeg",
+  webp: "image/webp"
+};
+async function rasterize(markup, format, options = {}) {
+  const { scale = 2, quality = 0.92, background } = options;
+  const url = URL.createObjectURL(new Blob([markup], { type: "image/svg+xml;charset=utf-8" }));
+  try {
+    const image = await loadImage(url);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.ceil(image.width * scale));
+    canvas.height = Math.max(1, Math.ceil(image.height * scale));
+    const context = canvas.getContext("2d");
+    if (!context) throw new Error("rasterize: this browser gave back no 2D canvas context");
+    if (background) {
+      context.fillStyle = background;
+      context.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return await canvasToBlob(canvas, MIME[format], quality);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => resolve(image));
+    image.addEventListener(
+      "error",
+      () => reject(new Error("rasterize: the browser refused to decode the serialised artwork"))
+    );
+    image.src = url;
+  });
+}
+function canvasToBlob(canvas, mime, quality) {
+  return new Promise((resolve, reject) => {
+    try {
+      canvas.toBlob(
+        (blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error(`rasterize: the canvas produced no ${mime} data`));
+        },
+        mime,
+        quality
+      );
+    } catch (cause) {
+      reject(
+        new Error(
+          "rasterize: the canvas is tainted, which means the artwork contains a cross-origin image",
+          { cause }
+        )
+      );
+    }
+  });
+}
+function downloadBlob(blob, filename) {
+  if (typeof document === "undefined") {
+    throw new Error("downloadBlob: needs a browser document \u2014 call it from an event handler");
+  }
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.rel = "noopener";
+  anchor.style.display = "none";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+function exportFilename(title, extension, fallback = "figure") {
+  const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return `${slug || fallback}.${extension}`;
+}
+export {
+  downloadBlob,
+  exportFilename,
+  inlinePaint,
+  rasterize,
+  readToken,
+  serializeSvg
+};
+//# sourceMappingURL=svg-export.js.map