panelui-web 0.0.0-stage → 0.1.0

package/dist/components/feedback/index.js

@@ -0,0 +1,283 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Feedback — a dialog whose body is something to write in, and whose actions
+ * sit in a band around it.
+ *
+ * ```tsx
+ * <Feedback>
+ *   <Feedback.Trigger>Send feedback</Feedback.Trigger>
+ *   <Feedback.Content>
+ *     <Feedback.Panel>
+ *       <Feedback.Title>What should we fix first?</Feedback.Title>
+ *       <Feedback.Close />
+ *       <Feedback.Field placeholder="Tell us what got in your way" />
+ *     </Feedback.Panel>
+ *     <Feedback.Footer>
+ *       <Feedback.Cancel />
+ *       <Feedback.Submit onSubmit={send} />
+ *     </Feedback.Footer>
+ *   </Feedback.Content>
+ * </Feedback>
+ * ```
+ *
+ * ## The panel is a well
+ *
+ * A dialog that asks for a sentence has two jobs on screen at once: hold what
+ * is being written, and offer the two things to do with it. Here the writing
+ * surface is set into the dialog and the buttons sit in the band around it.
+ * The recess says the field is the page and the rest is its frame, before a
+ * word has been read. It is also why the field has no border of its own: an
+ * outline inside a well is two edges making one point.
+ *
+ * ## Nothing is sent empty
+ *
+ * `Submit` is inert while the field is empty. A dialog that accepts an empty
+ * answer produces empty feedback, from somebody who believes they said
+ * something. Inert, it drops its fill instead of dimming it, because a tinted
+ * accent pill still reads as the thing to press whatever its opacity.
+ *
+ * ## It does not close itself
+ *
+ * `Submit` hands the message to `onSubmit` and stays open. Sending has to
+ * finish first, and a dialog that closed on the press would take its own error
+ * message with it.
+ */
+import { Dialog } from '@base-ui/react/dialog';
+import { ScrollArea } from '@base-ui/react/scroll-area';
+import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { tv } from 'tailwind-variants';
+const feedbackVariants = tv({
+    slots: {
+        backdrop: 'fixed inset-0 z-50 bg-black/40 transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0',
+        viewport: 'fixed inset-0 z-50 grid place-items-center overflow-y-auto p-4',
+        /*
+         * The shell is the popover surface with black mixed into it. The well it
+         * holds is the plain popover surface, so the shell is the darker of the
+         * two in a light theme and in a dark one, which a step on a grey scale
+         * could not promise: those run darker one way and lighter the other.
+         *
+         * The hairline ring is for a dark theme over a dimmed page, where the
+         * shell and what is behind it are both nearly black and the band would
+         * otherwise have no edge.
+         *
+         * 38 and 30 are one corner. The panel's radius is the shell's less the
+         * 8px between them, which is what keeps the two curves concentric.
+         */
+        shell: 'relative w-full max-w-sm rounded-[38px] bg-[color-mix(in_oklab,var(--popover),black_5%)] p-2 text-popover-foreground shadow-xl outline-none ring-1 ring-foreground/[0.06] dark:bg-[color-mix(in_oklab,var(--popover),black_14%)]',
+        popup: 'transition-[opacity,scale,translate] duration-200 ease-[cubic-bezier(0.2,0,0,1)] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:translate-y-2 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
+        panel: 'relative flex flex-col gap-4 rounded-[30px] bg-popover p-5 shadow-xs',
+        title: 'pe-9 text-[22px] font-semibold leading-7',
+        // Drawn at 22px against the title's cap height; the `after` is the rest
+        // of a 44px target, which a circle that size would not fit on the line.
+        close: 'absolute end-5 top-[23px] inline-flex size-[22px] cursor-pointer items-center justify-center rounded-full bg-foreground/10 text-muted-foreground outline-none transition-colors after:absolute after:-inset-[11px] hover:bg-foreground/15 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring',
+        /*
+         * The field never scrolls itself. It is always as tall as what is written
+         * in it, and the area round it does the scrolling, which is what lets the
+         * bar be a drawn one: a thin rounded thumb that shows while the pointer is
+         * over the field or the text is moving, in place of the browser's own.
+         */
+        field: 'block w-full resize-none overflow-hidden bg-transparent p-0 text-[17px] leading-6 text-foreground outline-none placeholder:text-muted-foreground',
+        scroller: 'relative',
+        scrollerViewport: 'rounded-[inherit] outline-none data-has-overflow-y:overscroll-y-contain',
+        // Moved out into the well's padding, so it runs beside the text and not
+        // over the ends of its lines.
+        scrollbar: 'my-1 -me-3.5 flex w-1.5 opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-100 data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-100',
+        thumb: 'relative flex-1 rounded-full bg-foreground/20',
+        // Held in from the shell's edge further than the panel is. A row the full
+        // width would read as a third edge of the dialog, not as two buttons.
+        footer: 'flex items-center gap-3.5 px-[18px] pb-2.5 pt-4',
+        action: 'inline-flex h-11 flex-1 cursor-pointer items-center justify-center rounded-full text-base outline-none transition-[scale,background-color] duration-150 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-[0.97] motion-reduce:transition-none',
+    },
+    variants: {
+        blur: {
+            true: { backdrop: 'bg-black/20 backdrop-blur-md' },
+        },
+        tone: {
+            /** The one that discards. A tint of the foreground, not a fill. */
+            cancel: { action: 'bg-foreground/10 font-medium text-muted-foreground hover:bg-foreground/15' },
+            /** The one that sends. Filled, and the only filled thing on the dialog. */
+            submit: { action: 'bg-primary font-semibold text-primary-foreground hover:bg-primary/90' },
+        },
+        disabled: {
+            true: { action: 'cursor-not-allowed active:scale-100' },
+        },
+    },
+    compoundVariants: [
+        // Fainter than Cancel's own tint on purpose. Matched, they would read as
+        // two Cancels, not as one live action and one that is not ready.
+        {
+            tone: 'submit',
+            disabled: true,
+            class: {
+                action: 'bg-foreground/[0.04] font-medium text-muted-foreground/50 hover:bg-foreground/[0.04]',
+            },
+        },
+        { tone: 'cancel', disabled: true, class: { action: 'opacity-45' } },
+    ],
+});
+const FeedbackContext = createContext(null);
+function useFeedback(part) {
+    const context = useContext(FeedbackContext);
+    if (!context)
+        throw new Error(`${part} must be used inside a <Feedback>.`);
+    return context;
+}
+function FeedbackRoot({ children, open, onOpenChange, defaultOpen = false, value, defaultValue = '', onValueChange, dismissible = true, }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const resolvedOpen = open ?? internalOpen;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const resolvedValue = value ?? internalValue;
+    const submit = useRef(null);
+    const setOpen = useCallback((next) => {
+        if (open === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [open, onOpenChange]);
+    const setValue = useCallback((next) => {
+        if (value === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    }, [value, onValueChange]);
+    const context = useMemo(() => ({ open: resolvedOpen, setOpen, value: resolvedValue, setValue, submit, inline: false }), [resolvedOpen, setOpen, resolvedValue, setValue]);
+    return (_jsx(FeedbackContext.Provider, { value: context, children: _jsx(Dialog.Root, { open: resolvedOpen, disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
+                // The primitive has a switch for a press outside and none for
+                // Escape, so that one is refused here.
+                if (!next && !dismissible && details.reason === 'escape-key')
+                    return;
+                setOpen(next);
+            }, children: children }) }));
+}
+FeedbackRoot.displayName = 'Feedback';
+/** What opens the dialog. A plain button unless `render` supplies one. */
+function FeedbackTrigger({ render, children, ...props }) {
+    return (_jsx(Dialog.Trigger, { render: render, ...props, children: children }));
+}
+FeedbackTrigger.displayName = 'Feedback.Trigger';
+/** The shell: the darker band, and everything set in it. */
+function FeedbackContent({ inline = false, blur = false, className, children, ...props }) {
+    const feedback = useFeedback('Feedback.Content');
+    const slots = feedbackVariants({ blur });
+    const context = useMemo(() => ({ ...feedback, inline }), [feedback, inline]);
+    if (inline) {
+        return (_jsx(FeedbackContext.Provider, { value: context, children: _jsx("div", { className: slots.shell({ className }), ...props, children: children }) }));
+    }
+    return (_jsxs(Dialog.Portal, { children: [_jsx(Dialog.Backdrop, { className: slots.backdrop() }), _jsx(Dialog.Viewport, { className: slots.viewport(), children: _jsx(Dialog.Popup, { className: slots.shell({ className: [slots.popup(), className] }), ...props, children: _jsx(FeedbackContext.Provider, { value: context, children: children }) }) })] }));
+}
+FeedbackContent.displayName = 'Feedback.Content';
+/** The well set into the shell: the title, the close button and the field. */
+function FeedbackPanel({ className, ...props }) {
+    const slots = feedbackVariants();
+    return _jsx("div", { className: slots.panel({ className }), ...props });
+}
+FeedbackPanel.displayName = 'Feedback.Panel';
+/** The question. In a dialog it is also what the dialog is announced as. */
+function FeedbackTitle({ className, ...props }) {
+    const { inline } = useFeedback('Feedback.Title');
+    const slots = feedbackVariants();
+    if (inline)
+        return _jsx("h2", { className: slots.title({ className }), ...props });
+    return _jsx(Dialog.Title, { className: slots.title({ className }), ...props });
+}
+FeedbackTitle.displayName = 'Feedback.Title';
+/** The ✕ in the panel's corner. */
+function FeedbackClose({ label = 'Close', className, onClick, ...props }) {
+    const { setOpen } = useFeedback('Feedback.Close');
+    const slots = feedbackVariants();
+    return (_jsx("button", { type: "button", "aria-label": label, className: slots.close({ className }), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                setOpen(false);
+        }, ...props, children: _jsx("svg", { viewBox: "0 0 10 10", "aria-hidden": "true", className: "size-2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: _jsx("path", { d: "M2 2l6 6M8 2l-6 6" }) }) }));
+}
+FeedbackClose.displayName = 'Feedback.Close';
+/**
+ * What is being written. No border and no background of its own: it is
+ * already inside a well.
+ */
+function FeedbackField({ value, onValueChange, minHeight = 200, maxHeight = 360, className, style, onKeyDown, ref, 'aria-label': ariaLabel = 'Your message', ...props }) {
+    const feedback = useFeedback('Feedback.Field');
+    const slots = feedbackVariants();
+    const field = useRef(null);
+    const text = value ?? feedback.value;
+    // As tall as what is written, and never shorter than the room it starts
+    // with. Measured with the height let go first, or a field that has grown
+    // could never shrink.
+    useLayoutEffect(() => {
+        const node = field.current;
+        if (!node)
+            return;
+        node.style.height = 'auto';
+        node.style.height = `${Math.max(minHeight, node.scrollHeight)}px`;
+    }, [text, minHeight]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        // Enter makes a new line, as it does in any text box. Command or Control
+        // with it sends, which is the shortcut for it everywhere else.
+        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            feedback.submit.current?.();
+        }
+    };
+    return (_jsxs(ScrollArea.Root, { className: slots.scroller(), children: [_jsx(ScrollArea.Viewport, { className: slots.scrollerViewport(), style: { maxHeight }, children: _jsx(ScrollArea.Content, { style: { minWidth: 0 }, children: _jsx("textarea", { ref: (node) => {
+                            field.current = node;
+                            if (typeof ref === 'function')
+                                ref(node);
+                            else if (ref)
+                                ref.current = node;
+                        }, "aria-label": ariaLabel, value: text, onChange: (event) => {
+                            feedback.setValue(event.target.value);
+                            onValueChange?.(event.target.value);
+                        }, onKeyDown: handleKeyDown, className: slots.field({ className }), style: { minHeight, ...style }, ...props }) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
+}
+FeedbackField.displayName = 'Feedback.Field';
+/** The action row, in the band under the panel. */
+function FeedbackFooter({ className, ...props }) {
+    const slots = feedbackVariants();
+    return _jsx("div", { className: slots.footer({ className }), ...props });
+}
+FeedbackFooter.displayName = 'Feedback.Footer';
+/** Discards and closes. Call `preventDefault` in `onClick` to keep it open. */
+function FeedbackCancel({ children = 'Cancel', className, disabled, onClick, ...props }) {
+    const { setOpen } = useFeedback('Feedback.Cancel');
+    const slots = feedbackVariants({ tone: 'cancel', disabled: !!disabled });
+    return (_jsx("button", { type: "button", disabled: disabled, className: slots.action({ className }), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                setOpen(false);
+        }, ...props, children: children }));
+}
+FeedbackCancel.displayName = 'Feedback.Cancel';
+/** Sends. Inert while the field is empty, unless `disabled` says otherwise. */
+function FeedbackSubmit({ children = 'Submit', className, disabled, onClick, onSubmit, ...props }) {
+    const feedback = useFeedback('Feedback.Submit');
+    // Empty feedback is worse than none: it is sent by somebody who believes
+    // they said something.
+    const inert = disabled ?? feedback.value.trim().length === 0;
+    const slots = feedbackVariants({ tone: 'submit', disabled: inert });
+    // What the field's shortcut calls. Kept current on every render, so it
+    // sends what is in the field now and not what was there when it mounted.
+    feedback.submit.current = inert ? null : () => onSubmit?.(feedback.value);
+    return (_jsx("button", { type: "button", disabled: inert, className: slots.action({ className }), onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                onSubmit?.(feedback.value);
+        }, ...props, children: children }));
+}
+FeedbackSubmit.displayName = 'Feedback.Submit';
+export const Feedback = Object.assign(FeedbackRoot, {
+    Trigger: FeedbackTrigger,
+    Content: FeedbackContent,
+    Panel: FeedbackPanel,
+    Title: FeedbackTitle,
+    Close: FeedbackClose,
+    Field: FeedbackField,
+    Footer: FeedbackFooter,
+    Cancel: FeedbackCancel,
+    Submit: FeedbackSubmit,
+});
+/* The parts by name, for a Server Component, which cannot dot into a client
+   module. `<FeedbackContent>` there is `<Feedback.Content>` everywhere else. */
+export { FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackFooter, FeedbackCancel, FeedbackSubmit, };

package/dist/components/flow/flow-paths.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Edge geometry for Flow.
+ *
+ * Everything here is plain arithmetic on plain numbers: where on a node's face
+ * an edge attaches, which faces two nodes should use when nobody has said, and
+ * the path between two anchors in each of the four routings. It knows nothing
+ * about React or the page, which is what lets it be tested by itself.
+ *
+ * Kept out of `index.tsx` so the component file stays about components. Named
+ * `flow-paths` and not `paths`, because a copied component lands beside others
+ * and `paths.ts` would be a land grab on a very common name.
+ */
+/** Which face of a node an edge leaves from or arrives at. */
+export type FlowSide = 'top' | 'right' | 'bottom' | 'left';
+/** A node's box in graph coordinates. */
+export interface FlowRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface FlowPoint {
+    x: number;
+    y: number;
+}
+/** The outward unit normal of a face — which way an edge sets off. */
+export declare function sideNormal(side: FlowSide): FlowPoint;
+/**
+ * Where on a face an edge attaches. `offset` runs 0–1 along the face, so two
+ * handles on the same side can sit apart without either knowing about the other.
+ */
+export declare function anchorOf(rect: FlowRect, side: FlowSide, offset: number): FlowPoint;
+/**
+ * Pushes an anchor out along its own face's normal.
+ *
+ * For an end attached to something that draws its own border: landing exactly
+ * on the border puts the line under the stroke, where it reads as stopping
+ * short rather than as arriving.
+ */
+export declare function standOff(point: FlowPoint, side: FlowSide, by: number): FlowPoint;
+/**
+ * The faces two nodes should use when nobody has said. Whichever axis they are
+ * further apart on wins, so nodes side by side connect left-to-right and nodes
+ * stacked connect top-to-bottom — and the edge changes its mind as they are
+ * dragged past each other, which is what makes a hand-arranged graph stay
+ * readable without anyone re-specifying anything.
+ */
+export declare function autoSides(from: FlowRect, to: FlowRect): {
+    from: FlowSide;
+    to: FlowSide;
+};
+/** A line, for a graph where the routing is not the point. */
+export declare function straightPath(from: FlowPoint, to: FlowPoint): string;
+/** A cubic curve leaving and arriving perpendicular to each face. */
+export declare function bezierPath(from: FlowPoint, fromSide: FlowSide, to: FlowPoint, toSide: FlowSide, curvature: number): string;
+/**
+ * An orthogonal route with rounded corners — the one that reads as wiring.
+ *
+ * Both ends first step `gap` points straight out along their own face, so the
+ * edge leaves the node square-on instead of grazing its corner. From there the
+ * two are joined by a single dog-leg, split across the axis they are further
+ * apart on.
+ *
+ * `radius` of 0 gives hard corners, which is the stepped variant.
+ */
+export declare function smoothStepPath(from: FlowPoint, fromSide: FlowSide, to: FlowPoint, toSide: FlowSide, radius: number, gap: number): string;
+/**
+ * The `d` string for an edge between two anchors, in whichever shape was asked
+ * for. One entry point, so an edge's path is a single call.
+ */
+export declare function edgePath(variant: 'bezier' | 'smoothstep' | 'step' | 'straight', from: FlowPoint, fromSide: FlowSide, to: FlowPoint, toSide: FlowSide, curvature: number, radius: number, gap: number): string;
+/** Length of an edge's bounding diagonal — enough to size a dash cycle by. */
+export declare function edgeSpan(from: FlowPoint, to: FlowPoint): number;
+/**
+ * The arrowhead at an edge's target, as its own closed path.
+ *
+ * SVG has `marker-end` for exactly this, and it is the obvious way to do it.
+ * It is not used, because a path carrying a marker reference stops picking up
+ * new geometry on re-render — the arrow-bearing edges freeze where they were
+ * first drawn while arrow-less ones follow their nodes. Drawing the triangle
+ * as an ordinary path costs nine numbers and behaves.
+ *
+ * `dirX`/`dirY` is the unit direction of travel *into* the target.
+ */
+export declare function arrowHeadPath(tip: FlowPoint, dirX: number, dirY: number, size: number): string;
+/**
+ * Which way an edge is travelling as it arrives. Every routing but `straight`
+ * comes in perpendicular to the target's face, so the face decides it; a
+ * straight line comes in along itself.
+ */
+export declare function arrivalDirection(variant: 'bezier' | 'smoothstep' | 'step' | 'straight', from: FlowPoint, to: FlowPoint, toSide: FlowSide): {
+    x: number;
+    y: number;
+};

package/dist/components/flow/flow-paths.js

@@ -0,0 +1,270 @@
+/**
+ * Edge geometry for Flow.
+ *
+ * Everything here is plain arithmetic on plain numbers: where on a node's face
+ * an edge attaches, which faces two nodes should use when nobody has said, and
+ * the path between two anchors in each of the four routings. It knows nothing
+ * about React or the page, which is what lets it be tested by itself.
+ *
+ * Kept out of `index.tsx` so the component file stays about components. Named
+ * `flow-paths` and not `paths`, because a copied component lands beside others
+ * and `paths.ts` would be a land grab on a very common name.
+ */
+/** The outward unit normal of a face — which way an edge sets off. */
+export function sideNormal(side) {
+    if (side === 'left')
+        return { x: -1, y: 0 };
+    if (side === 'right')
+        return { x: 1, y: 0 };
+    if (side === 'top')
+        return { x: 0, y: -1 };
+    return { x: 0, y: 1 };
+}
+/**
+ * Where on a face an edge attaches. `offset` runs 0–1 along the face, so two
+ * handles on the same side can sit apart without either knowing about the other.
+ */
+export function anchorOf(rect, side, offset) {
+    if (side === 'top') {
+        return { x: rect.x + rect.width * offset, y: rect.y };
+    }
+    if (side === 'bottom') {
+        return { x: rect.x + rect.width * offset, y: rect.y + rect.height };
+    }
+    if (side === 'left') {
+        return { x: rect.x, y: rect.y + rect.height * offset };
+    }
+    return { x: rect.x + rect.width, y: rect.y + rect.height * offset };
+}
+/**
+ * Pushes an anchor out along its own face's normal.
+ *
+ * For an end attached to something that draws its own border: landing exactly
+ * on the border puts the line under the stroke, where it reads as stopping
+ * short rather than as arriving.
+ */
+export function standOff(point, side, by) {
+    if (by === 0)
+        return point;
+    const normal = sideNormal(side);
+    return { x: point.x + normal.x * by, y: point.y + normal.y * by };
+}
+/**
+ * The faces two nodes should use when nobody has said. Whichever axis they are
+ * further apart on wins, so nodes side by side connect left-to-right and nodes
+ * stacked connect top-to-bottom — and the edge changes its mind as they are
+ * dragged past each other, which is what makes a hand-arranged graph stay
+ * readable without anyone re-specifying anything.
+ */
+export function autoSides(from, to) {
+    const dx = to.x + to.width / 2 - (from.x + from.width / 2);
+    const dy = to.y + to.height / 2 - (from.y + from.height / 2);
+    if (Math.abs(dx) > Math.abs(dy)) {
+        return dx >= 0 ? { from: 'right', to: 'left' } : { from: 'left', to: 'right' };
+    }
+    return dy >= 0 ? { from: 'bottom', to: 'top' } : { from: 'top', to: 'bottom' };
+}
+/** A line, for a graph where the routing is not the point. */
+export function straightPath(from, to) {
+    return `M${from.x},${from.y} L${to.x},${to.y}`;
+}
+/**
+ * How far a bezier's control point sits from its anchor.
+ *
+ * With room between the two faces it is half the gap, which gives the familiar
+ * S. When they overlap — the target is *behind* the source — the gap is
+ * negative and half of it would fold the curve inside out, so the offset grows
+ * with the square root of the overlap instead: enough to bulge the curve clear
+ * of the node, never enough to run away as the overlap grows.
+ */
+function controlOffset(distance, curvature) {
+    if (distance >= 0)
+        return 0.5 * distance;
+    return curvature * 25 * Math.sqrt(-distance);
+}
+function controlPoint(point, side, other, curvature) {
+    if (side === 'left') {
+        return { x: point.x - controlOffset(point.x - other.x, curvature), y: point.y };
+    }
+    if (side === 'right') {
+        return { x: point.x + controlOffset(other.x - point.x, curvature), y: point.y };
+    }
+    if (side === 'top') {
+        return { x: point.x, y: point.y - controlOffset(point.y - other.y, curvature) };
+    }
+    return { x: point.x, y: point.y + controlOffset(other.y - point.y, curvature) };
+}
+/** A cubic curve leaving and arriving perpendicular to each face. */
+export function bezierPath(from, fromSide, to, toSide, curvature) {
+    const c1 = controlPoint(from, fromSide, to, curvature);
+    const c2 = controlPoint(to, toSide, from, curvature);
+    return `M${from.x},${from.y} C${c1.x},${c1.y} ${c2.x},${c2.y} ${to.x},${to.y}`;
+}
+function distanceBetween(a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+/**
+ * One corner of a stepped path, rounded.
+ *
+ * The radius is capped at half of the shorter of the two segments meeting here,
+ * so a corner between two short runs tucks in rather than overshooting into the
+ * segment beyond it and drawing a path that doubles back.
+ */
+function bend(a, b, c, radius) {
+    const size = Math.min(distanceBetween(a, b) / 2, distanceBetween(b, c) / 2, radius);
+    // Three collinear points are not a corner.
+    if ((a.x === b.x && b.x === c.x) || (a.y === b.y && b.y === c.y)) {
+        return `L${b.x},${b.y}`;
+    }
+    if (a.y === b.y) {
+        const xDir = a.x < c.x ? -1 : 1;
+        const yDir = a.y < c.y ? 1 : -1;
+        return `L${b.x + size * xDir},${b.y}Q${b.x},${b.y} ${b.x},${b.y + size * yDir}`;
+    }
+    const xDir = a.x < c.x ? 1 : -1;
+    const yDir = a.y < c.y ? -1 : 1;
+    return `L${b.x},${b.y + size * yDir}Q${b.x},${b.y} ${b.x + size * xDir},${b.y}`;
+}
+/**
+ * An orthogonal route with rounded corners — the one that reads as wiring.
+ *
+ * Both ends first step `gap` points straight out along their own face, so the
+ * edge leaves the node square-on instead of grazing its corner. From there the
+ * two are joined by a single dog-leg, split across the axis they are further
+ * apart on.
+ *
+ * `radius` of 0 gives hard corners, which is the stepped variant.
+ */
+export function smoothStepPath(from, fromSide, to, toSide, radius, gap) {
+    const fromNormal = sideNormal(fromSide);
+    const toNormal = sideNormal(toSide);
+    let fromGap = {
+        x: from.x + fromNormal.x * gap,
+        y: from.y + fromNormal.y * gap,
+    };
+    let toGap = { x: to.x + toNormal.x * gap, y: to.y + toNormal.y * gap };
+    // The axis the two gap points are further apart on is the one the dog-leg
+    // travels along.
+    const horizontal = Math.abs(toGap.x - fromGap.x) > Math.abs(toGap.y - fromGap.y);
+    const facing = (fromNormal.x !== 0 && toNormal.x !== 0 && fromNormal.x !== toNormal.x) ||
+        (fromNormal.y !== 0 && toNormal.y !== 0 && fromNormal.y !== toNormal.y);
+    let middle;
+    if (facing) {
+        // Faces pointing at each other: meet in the middle of the run between them.
+        const midX = (fromGap.x + toGap.x) / 2;
+        const midY = (fromGap.y + toGap.y) / 2;
+        middle =
+            fromNormal.x !== 0
+                ? [
+                    { x: midX, y: fromGap.y },
+                    { x: midX, y: toGap.y },
+                ]
+                : [
+                    { x: fromGap.x, y: midY },
+                    { x: toGap.x, y: midY },
+                ];
+    }
+    else {
+        // Faces pointing the same way, or at right angles: one corner is enough.
+        // Which of the two possible corners depends on the travelling axis.
+        middle = horizontal ? [{ x: toGap.x, y: fromGap.y }] : [{ x: fromGap.x, y: toGap.y }];
+        // Two handles on the same face, closer together than the gap: the gap
+        // points sit between the anchors and the route folds back over itself.
+        // Push them out far enough to clear.
+        if (fromSide === toSide) {
+            const axis = fromNormal.x !== 0 ? 'x' : 'y';
+            const apart = Math.abs(from[axis] - to[axis]);
+            if (apart <= gap) {
+                const push = Math.min(gap - 1, gap - apart);
+                if (axis === 'x') {
+                    fromGap = { x: fromGap.x + fromNormal.x * push, y: fromGap.y };
+                    toGap = { x: toGap.x + toNormal.x * push, y: toGap.y };
+                    middle = [{ x: Math.max(fromGap.x, toGap.x), y: fromGap.y }];
+                }
+                else {
+                    fromGap = { x: fromGap.x, y: fromGap.y + fromNormal.y * push };
+                    toGap = { x: toGap.x, y: toGap.y + toNormal.y * push };
+                    middle = [{ x: fromGap.x, y: Math.max(fromGap.y, toGap.y) }];
+                }
+            }
+        }
+    }
+    const points = [from, fromGap, ...middle, toGap, to];
+    // Drop points that repeat the one before them — a duplicate reads as a
+    // zero-length segment and makes the bend either side of it collapse.
+    const route = [];
+    for (let i = 0; i < points.length; i += 1) {
+        const point = points[i];
+        const previous = route[route.length - 1];
+        if (previous && previous.x === point.x && previous.y === point.y)
+            continue;
+        route.push(point);
+    }
+    if (route.length < 2)
+        return `M${from.x},${from.y}`;
+    let d = `M${route[0].x},${route[0].y}`;
+    for (let i = 1; i < route.length - 1; i += 1) {
+        d +=
+            radius > 0
+                ? bend(route[i - 1], route[i], route[i + 1], radius)
+                : `L${route[i].x},${route[i].y}`;
+    }
+    const last = route[route.length - 1];
+    d += `L${last.x},${last.y}`;
+    return d;
+}
+/**
+ * The `d` string for an edge between two anchors, in whichever shape was asked
+ * for. One entry point, so an edge's path is a single call.
+ */
+export function edgePath(variant, from, fromSide, to, toSide, curvature, radius, gap) {
+    if (variant === 'straight')
+        return straightPath(from, to);
+    if (variant === 'bezier')
+        return bezierPath(from, fromSide, to, toSide, curvature);
+    return smoothStepPath(from, fromSide, to, toSide, variant === 'step' ? 0 : radius, gap);
+}
+/** Length of an edge's bounding diagonal — enough to size a dash cycle by. */
+export function edgeSpan(from, to) {
+    return distanceBetween(from, to);
+}
+/**
+ * The arrowhead at an edge's target, as its own closed path.
+ *
+ * SVG has `marker-end` for exactly this, and it is the obvious way to do it.
+ * It is not used, because a path carrying a marker reference stops picking up
+ * new geometry on re-render — the arrow-bearing edges freeze where they were
+ * first drawn while arrow-less ones follow their nodes. Drawing the triangle
+ * as an ordinary path costs nine numbers and behaves.
+ *
+ * `dirX`/`dirY` is the unit direction of travel *into* the target.
+ */
+export function arrowHeadPath(tip, dirX, dirY, size) {
+    const length = Math.sqrt(dirX * dirX + dirY * dirY) || 1;
+    const ux = dirX / length;
+    const uy = dirY / length;
+    // The perpendicular, for the two back corners.
+    const px = -uy;
+    const py = ux;
+    const baseX = tip.x - ux * size;
+    const baseY = tip.y - uy * size;
+    const half = size * 0.45;
+    return (`M${tip.x},${tip.y} ` +
+        `L${baseX + px * half},${baseY + py * half} ` +
+        `L${baseX - px * half},${baseY - py * half} Z`);
+}
+/**
+ * Which way an edge is travelling as it arrives. Every routing but `straight`
+ * comes in perpendicular to the target's face, so the face decides it; a
+ * straight line comes in along itself.
+ */
+export function arrivalDirection(variant, from, to, toSide) {
+    if (variant === 'straight') {
+        return { x: to.x - from.x, y: to.y - from.y };
+    }
+    const normal = sideNormal(toSide);
+    // The face points outward; the edge arrives against it.
+    return { x: -normal.x, y: -normal.y };
+}