@svelteframe/shapes 0.0.0-stage → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sumeet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,35 @@
-# Temporary Holding Version
+# @svelteframe/shapes
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+SVG shape primitives and smart connecting arrows for Svelteframe video compositions.
+
+## Features
+
+- **Shapes**: `Rect`, `Circle`, `Ellipse`, `Polygon`, `Star`, `Triangle`, and raw `Shape` components.
+- **Canvas**: Coordinate system and viewBox management.
+- **Connectors**: `Arrow` that attaches smoothly to any registered shape by `id`.
+
+## Installation
+
+```sh
+npm install @svelteframe/shapes @svelteframe/core
+# or
+pnpm add @svelteframe/shapes @svelteframe/core
+```
+
+## Basic Usage
+
+```svelte
+<script lang="ts">
+  import { Canvas, Rect, Circle, Arrow } from '@svelteframe/shapes';
+</script>
+
+<Canvas width={800} height={600}>
+  <Rect id="box-a" x={100} y={200} width={120} height={80} fill="#3b82f6" />
+  <Circle id="box-b" cx={500} cy={200} r={50} fill="#10b981" />
+  <Arrow from="box-a" to="box-b" stroke="#ffffff" strokeWidth={3} />
+</Canvas>
+```
+
+## License
+
+MIT

package/dist/Arrow.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { End } from './connect.js';
+	import { useEnds } from './ends.svelte.js';
+	import { arrowGeometry, boundsOf, paintAttributes, pointsAttribute, round, type ArrowHeads, type Point } from './geometry.js';
+	import Shape from './Shape.svelte';
+	import type { ShapeProps } from './types.js';
+
+	interface Props extends Omit<ShapeProps, 'x' | 'y' | 'anchor' | 'fill'> {
+		/**
+		 * The ends: a point `[x, y]`, or a shape in the same `<Canvas>` by its id: `"card"` for the
+		 * edge facing the other end, `"card.bottom"` for a point of its box, or
+		 * `{ id, anchor, dx, dy }` to move the end.
+		 */
+		from: End;
+		to: End;
+		/** Space between an end and the shape it is attached to. */
+		gap?: number;
+		/** Which ends get a head. */
+		heads?: ArrowHeads;
+		/** Length of a head along the line. Defaults to 4 times the stroke width. */
+		headLength?: number;
+		/** Width of a head across the line. Defaults to 0.8 times its length. */
+		headWidth?: number;
+	}
+
+	let {
+		from,
+		to,
+		gap,
+		heads = 'end',
+		headLength,
+		headWidth,
+		stroke = 'currentColor',
+		strokeWidth = 4,
+		strokeLinecap,
+		strokeLinejoin = 'round',
+		opacity,
+		progress = 1,
+		...placement
+	}: Props = $props();
+
+	const ends = useEnds('Arrow', () => from, () => to, () => gap);
+	const paint = $derived(paintAttributes({ stroke, strokeWidth, strokeLinecap, opacity }));
+	const headPaint = $derived(paintAttributes({ fill: stroke, stroke, strokeWidth: 0, strokeLinejoin, opacity }));
+
+	// `progress` grows the arrow from the first end to the second, its head going along with the tip.
+	const arrow = $derived.by(() => {
+		if (!ends.points) return undefined;
+		const [start, finish] = ends.points;
+		const box = boundsOf([start, finish]);
+		const local = (p: Point): Point => [p[0] - box.x, p[1] - box.y];
+		const geometry = arrowGeometry(start, finish, { progress, strokeWidth, headLength, headWidth, heads });
+		return {
+			box,
+			shaft: geometry.shaft?.map(local),
+			heads: geometry.heads.map((head) => head.map(local))
+		};
+	});
+</script>
+
+{#if arrow}
+	<Shape x={arrow.box.x} y={arrow.box.y} width={arrow.box.width} height={arrow.box.height} {...placement}>
+		{#if arrow.shaft}
+			<line
+				x1={round(arrow.shaft[0][0])}
+				y1={round(arrow.shaft[0][1])}
+				x2={round(arrow.shaft[1][0])}
+				y2={round(arrow.shaft[1][1])}
+				{...paint}
+			/>
+		{/if}
+		{#each arrow.heads as head}
+			<polygon points={pointsAttribute(head)} {...headPaint} />
+		{/each}
+	</Shape>
+{/if}

package/dist/Arrow.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { End } from './connect.js';
+import { type ArrowHeads } from './geometry.js';
+import type { ShapeProps } from './types.js';
+interface Props extends Omit<ShapeProps, 'x' | 'y' | 'anchor' | 'fill'> {
+    /**
+     * The ends: a point `[x, y]`, or a shape in the same `<Canvas>` by its id: `"card"` for the
+     * edge facing the other end, `"card.bottom"` for a point of its box, or
+     * `{ id, anchor, dx, dy }` to move the end.
+     */
+    from: End;
+    to: End;
+    /** Space between an end and the shape it is attached to. */
+    gap?: number;
+    /** Which ends get a head. */
+    heads?: ArrowHeads;
+    /** Length of a head along the line. Defaults to 4 times the stroke width. */
+    headLength?: number;
+    /** Width of a head across the line. Defaults to 0.8 times its length. */
+    headWidth?: number;
+}
+declare const Arrow: import("svelte").Component<Props, {}, "">;
+type Arrow = ReturnType<typeof Arrow>;
+export default Arrow;

package/dist/Canvas.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useVideo } from '@svelteframe/core';
+	import { setCanvas } from './registry.svelte.js';
+
+	interface Props {
+		class?: string;
+		style?: string;
+		children?: Snippet;
+	}
+
+	let { class: className, style = '', children }: Props = $props();
+
+	const video = useVideo();
+	setCanvas();
+</script>
+
+<!-- One user unit is one pixel of the composition, with the origin at the top-left. Like a
+     <Sequence>, it fills its nearest positioned parent. -->
+<svg
+	class={className}
+	width={video.width}
+	height={video.height}
+	viewBox="0 0 {video.width} {video.height}"
+	style="position:absolute;inset:0;{style}"
+	aria-hidden="true"
+>
+	{@render children?.()}
+</svg>

package/dist/Canvas.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    style?: string;
+    children?: Snippet;
+}
+declare const Canvas: import("svelte").Component<Props, {}, "">;
+type Canvas = ReturnType<typeof Canvas>;
+export default Canvas;

package/dist/Circle.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { assertSize, needsPathLength, paintAttributes } from './geometry.js';
+	import Shape from './Shape.svelte';
+	import type { ShapeProps } from './types.js';
+
+	interface Props extends ShapeProps {
+		radius: number;
+	}
+
+	let { radius, fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity, progress, ...placement }: Props = $props();
+
+	const paint = $derived(paintAttributes({ fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity, progress }));
+	const size = $derived.by(() => {
+		assertSize('radius', radius);
+		return radius * 2;
+	});
+</script>
+
+<!-- The box is the circle's bounding square, so `anchor="center"` is its centre. -->
+<Shape width={size} height={size} outline={{ kind: 'ellipse' }} {...placement}>
+	<circle cx={radius} cy={radius} r={radius} pathLength={needsPathLength(progress) ? 1 : undefined} {...paint} />
+</Shape>

package/dist/Circle.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ShapeProps } from './types.js';
+interface Props extends ShapeProps {
+    radius: number;
+}
+declare const Circle: import("svelte").Component<Props, {}, "">;
+type Circle = ReturnType<typeof Circle>;
+export default Circle;

package/dist/Ellipse.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { assertSize, needsPathLength, paintAttributes } from './geometry.js';
+	import Shape from './Shape.svelte';
+	import type { ShapeProps } from './types.js';
+
+	interface Props extends ShapeProps {
+		/** Horizontal radius. */
+		rx: number;
+		/** Vertical radius. */
+		ry: number;
+	}
+
+	let { rx, ry, fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity, progress, ...placement }: Props = $props();
+
+	const paint = $derived(paintAttributes({ fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity, progress }));
+	const size = $derived.by(() => {
+		assertSize('rx', rx);
+		assertSize('ry', ry);
+		return [rx * 2, ry * 2] as const;
+	});
+</script>
+
+<Shape width={size[0]} height={size[1]} outline={{ kind: 'ellipse' }} {...placement}>
+	<ellipse cx={rx} cy={ry} {rx} {ry} pathLength={needsPathLength(progress) ? 1 : undefined} {...paint} />
+</Shape>

package/dist/Ellipse.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ShapeProps } from './types.js';
+interface Props extends ShapeProps {
+    /** Horizontal radius. */
+    rx: number;
+    /** Vertical radius. */
+    ry: number;
+}
+declare const Ellipse: import("svelte").Component<Props, {}, "">;
+type Ellipse = ReturnType<typeof Ellipse>;
+export default Ellipse;

package/dist/Line.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { End } from './connect.js';
+	import { useEnds } from './ends.svelte.js';
+	import { boundsOf, clampProgress, lerpPoint, paintAttributes, round } from './geometry.js';
+	import Shape from './Shape.svelte';
+	import type { ShapeProps } from './types.js';
+
+	interface Props extends Omit<ShapeProps, 'x' | 'y' | 'anchor' | 'fill'> {
+		/**
+		 * The ends: a point `[x, y]`, or a shape in the same `<Canvas>` by its id: `"card"` for the
+		 * edge facing the other end, `"card.bottom"` for a point of its box, or
+		 * `{ id, anchor, dx, dy }` to move the end.
+		 */
+		from: End;
+		to: End;
+		/** Space between an end and the shape it is attached to. */
+		gap?: number;
+	}
+
+	let { from, to, gap, stroke = 'currentColor', strokeWidth = 4, strokeLinecap, strokeLinejoin, opacity, progress = 1, ...placement }: Props = $props();
+
+	const ends = useEnds('Line', () => from, () => to, () => gap);
+	const paint = $derived(paintAttributes({ stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity }));
+
+	// `progress` draws the line from the first end towards the second.
+	const line = $derived.by(() => {
+		if (!ends.points) return undefined;
+		const [start, finish] = ends.points;
+		const end = lerpPoint(start, finish, clampProgress(progress));
+		return { start, end, box: boundsOf([start, finish]), visible: end[0] !== start[0] || end[1] !== start[1] };
+	});
+</script>
+
+<!-- Drawn relative to the box, which a <Canvas> places where the line is. -->
+{#if line}
+	<Shape x={line.box.x} y={line.box.y} width={line.box.width} height={line.box.height} {...placement}>
+		{#if line.visible}
+			<line
+				x1={round(line.start[0] - line.box.x)}
+				y1={round(line.start[1] - line.box.y)}
+				x2={round(line.end[0] - line.box.x)}
+				y2={round(line.end[1] - line.box.y)}
+				{...paint}
+			/>
+		{/if}
+	</Shape>
+{/if}

package/dist/Line.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { End } from './connect.js';
+import type { ShapeProps } from './types.js';
+interface Props extends Omit<ShapeProps, 'x' | 'y' | 'anchor' | 'fill'> {
+    /**
+     * The ends: a point `[x, y]`, or a shape in the same `<Canvas>` by its id: `"card"` for the
+     * edge facing the other end, `"card.bottom"` for a point of its box, or
+     * `{ id, anchor, dx, dy }` to move the end.
+     */
+    from: End;
+    to: End;
+    /** Space between an end and the shape it is attached to. */
+    gap?: number;
+}
+declare const Line: import("svelte").Component<Props, {}, "">;
+type Line = ReturnType<typeof Line>;
+export default Line;

package/dist/Polygon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { needsPathLength, paintAttributes, pointsAttribute, regularPolygon } from './geometry.js';
+	import Shape from './Shape.svelte';
+	import type { ShapeProps } from './types.js';
+
+	interface Props extends ShapeProps {
+		/** 3 for a triangle, 5 for a pentagon, and so on. */
+		sides: number;
+		/** Distance from the centre to a corner. One corner points up. */
+		radius: number;
+	}
+
+	let { sides, radius, fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin = 'round', opacity, progress, ...placement }: Props = $props();
+
+	const paint = $derived(paintAttributes({ fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity, progress }));
+	const vertices = $derived(regularPolygon(sides, radius));
+	const points = $derived(pointsAttribute(vertices));
+</script>
+
+<!-- The box is the circle the corners lie on, so `anchor="center"` is the polygon's centre. -->
+<Shape width={radius * 2} height={radius * 2} outline={{ kind: 'polygon', points: vertices }} {...placement}>
+	<polygon {points} pathLength={needsPathLength(progress) ? 1 : undefined} {...paint} />
+</Shape>

package/dist/Polygon.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ShapeProps } from './types.js';
+interface Props extends ShapeProps {
+    /** 3 for a triangle, 5 for a pentagon, and so on. */
+    sides: number;
+    /** Distance from the centre to a corner. One corner points up. */
+    radius: number;
+}
+declare const Polygon: import("svelte").Component<Props, {}, "">;
+type Polygon = ReturnType<typeof Polygon>;
+export default Polygon;

package/dist/Rect.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { assertSize, needsPathLength, paintAttributes } from './geometry.js';
+	import Shape from './Shape.svelte';
+	import type { ShapeProps } from './types.js';
+
+	interface Props extends ShapeProps {
+		width: number;
+		height: number;
+		/** Corner radius; limited to half the shorter side. */
+		radius?: number;
+	}
+
+	let { width, height, radius = 0, fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity, progress, ...placement }: Props = $props();
+
+	const paint = $derived(paintAttributes({ fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity, progress }));
+	const corner = $derived.by(() => {
+		assertSize('width', width);
+		assertSize('height', height);
+		assertSize('radius', radius);
+		return Math.min(radius, width / 2, height / 2);
+	});
+</script>
+
+<Shape {width} {height} {...placement}>
+	<rect {width} {height} rx={corner || undefined} pathLength={needsPathLength(progress) ? 1 : undefined} {...paint} />
+</Shape>

package/dist/Rect.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ShapeProps } from './types.js';
+interface Props extends ShapeProps {
+    width: number;
+    height: number;
+    /** Corner radius; limited to half the shorter side. */
+    radius?: number;
+}
+declare const Rect: import("svelte").Component<Props, {}, "">;
+type Rect = ReturnType<typeof Rect>;
+export default Rect;

package/dist/Shape.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { onDestroy, type Snippet } from 'svelte';
+	import { useCanvas } from './registry.svelte.js';
+	import type { Outline, ShapeGeometry } from './connect.js';
+	import { shapeTransform } from './geometry.js';
+	import type { ShapeProps } from './types.js';
+
+	/** Places a shape: in a `<Canvas>` as a group, otherwise as an element of its own. */
+	interface Props extends Pick<ShapeProps, 'id' | 'x' | 'y' | 'anchor' | 'rotate' | 'scale' | 'origin' | 'class' | 'style'> {
+		/** The size of the shape's box, before it is scaled. */
+		width: number;
+		height: number;
+		/** Where its edge is, for arrows that attach to it. Defaults to the box. */
+		outline?: Outline;
+		children: Snippet;
+	}
+
+	let { id, width, height, outline = { kind: 'box' }, x, y, anchor, rotate, scale, origin, class: className, style, children }: Props = $props();
+
+	const registry = useCanvas();
+	const canvas = registry !== undefined;
+
+	// Findable by id as soon as it exists, and as long as it does.
+	// svelte-ignore state_referenced_locally
+	if (registry && id !== undefined) {
+		const name = id;
+		const geometry = (): ShapeGeometry => ({ width, height, outline, placement: { x, y, anchor, rotate, scale, origin } });
+		registry.register(name, geometry);
+		onDestroy(() => registry.unregister(name, geometry));
+	}
+
+	// Elsewhere CSS positions the element, so only what the shape does to itself applies.
+	const transform = $derived(
+		shapeTransform({ width, height, anchor, rotate, scale, origin, ...(canvas ? { x, y } : {}) })
+	);
+</script>
+
+{#if canvas}
+	<g class={className} {style} transform={transform || undefined}>
+		{@render children()}
+	</g>
+{:else}
+	<!-- Overflow is visible so strokes, rotation and scaling are not cut off by the box. -->
+	<svg class={className} {width} {height} viewBox="0 0 {width} {height}" style="display:block;overflow:visible;{style ?? ''}" aria-hidden="true">
+		<g transform={transform || undefined}>
+			{@render children()}
+		</g>
+	</svg>
+{/if}

package/dist/Shape.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from 'svelte';
+import type { Outline } from './connect.js';
+import type { ShapeProps } from './types.js';
+/** Places a shape: in a `<Canvas>` as a group, otherwise as an element of its own. */
+interface Props extends Pick<ShapeProps, 'id' | 'x' | 'y' | 'anchor' | 'rotate' | 'scale' | 'origin' | 'class' | 'style'> {
+    /** The size of the shape's box, before it is scaled. */
+    width: number;
+    height: number;
+    /** Where its edge is, for arrows that attach to it. Defaults to the box. */
+    outline?: Outline;
+    children: Snippet;
+}
+declare const Shape: import("svelte").Component<Props, {}, "">;
+type Shape = ReturnType<typeof Shape>;
+export default Shape;

package/dist/Star.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { needsPathLength, paintAttributes, pointsAttribute, star } from './geometry.js';
+	import Shape from './Shape.svelte';
+	import type { ShapeProps } from './types.js';
+
+	interface Props extends ShapeProps {
+		/** Number of points. */
+		points?: number;
+		/** Distance from the centre to the tips. One tip points up. */
+		outerRadius: number;
+		/** Distance from the centre to the notches. Defaults to 0.4 times the outer radius. */
+		innerRadius?: number;
+	}
+
+	let { points = 5, outerRadius, innerRadius, fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin = 'round', opacity, progress, ...placement }: Props = $props();
+
+	const paint = $derived(paintAttributes({ fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity, progress }));
+	const corners = $derived(star(points, outerRadius, innerRadius ?? outerRadius * 0.4));
+	const vertices = $derived(pointsAttribute(corners));
+</script>
+
+<Shape width={outerRadius * 2} height={outerRadius * 2} outline={{ kind: 'polygon', points: corners }} {...placement}>
+	<polygon points={vertices} pathLength={needsPathLength(progress) ? 1 : undefined} {...paint} />
+</Shape>

package/dist/Star.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ShapeProps } from './types.js';
+interface Props extends ShapeProps {
+    /** Number of points. */
+    points?: number;
+    /** Distance from the centre to the tips. One tip points up. */
+    outerRadius: number;
+    /** Distance from the centre to the notches. Defaults to 0.4 times the outer radius. */
+    innerRadius?: number;
+}
+declare const Star: import("svelte").Component<Props, {}, "">;
+type Star = ReturnType<typeof Star>;
+export default Star;

package/dist/Triangle.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { assertSize, needsPathLength, paintAttributes, pointsAttribute, type Point } from './geometry.js';
+	import Shape from './Shape.svelte';
+	import type { ShapeProps } from './types.js';
+
+	interface Props extends ShapeProps {
+		width: number;
+		height: number;
+	}
+
+	let { width, height, fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin = 'round', opacity, progress, ...placement }: Props = $props();
+
+	const paint = $derived(paintAttributes({ fill, stroke, strokeWidth, strokeLinecap, strokeLinejoin, opacity, progress }));
+	// Pointing up, with its base along the bottom of the box.
+	const corners = $derived.by((): Point[] => {
+		assertSize('width', width);
+		assertSize('height', height);
+		return [[width / 2, 0], [width, height], [0, height]];
+	});
+	const points = $derived(pointsAttribute(corners));
+</script>
+
+<Shape {width} {height} outline={{ kind: 'polygon', points: corners }} {...placement}>
+	<polygon {points} pathLength={needsPathLength(progress) ? 1 : undefined} {...paint} />
+</Shape>

package/dist/Triangle.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ShapeProps } from './types.js';
+interface Props extends ShapeProps {
+    width: number;
+    height: number;
+}
+declare const Triangle: import("svelte").Component<Props, {}, "">;
+type Triangle = ReturnType<typeof Triangle>;
+export default Triangle;

package/dist/connect.d.ts

@@ -0,0 +1,73 @@
+import { type Anchor, type Point, type TransformOptions } from './geometry.js';
+/** The names an anchor can have, as written after the dot in `"card.bottom"`. */
+export declare const ANCHORS: readonly Anchor[];
+/** The shape of a shape's edge, in the shape's own coordinates. */
+export type Outline = 
+/** The box. Also what shapes with no better outline fall back to; rounded corners are ignored. */
+{
+    kind: 'box';
+}
+/** The ellipse that fills the box. */
+ | {
+    kind: 'ellipse';
+} | {
+    kind: 'polygon';
+    points: readonly Point[];
+};
+/** What the `<Canvas>` knows about a shape that has an `id`. */
+export interface ShapeGeometry {
+    /** The size of the shape's box, before it is scaled. */
+    width: number;
+    height: number;
+    outline: Outline;
+    /** Where the shape is on the canvas. */
+    placement: Omit<TransformOptions, 'width' | 'height'>;
+}
+/** What `from` and `to` of a line or arrow accept. */
+export type End = 
+/** A point on the canvas. */
+Point
+/** `"id"`: the edge of the shape facing the other end. `"id.anchor"`: that point of its box. */
+ | string | {
+    id: string;
+    anchor?: Anchor; /** Moves the end, in canvas pixels. */
+    dx?: number;
+    dy?: number;
+};
+interface ShapeEnd {
+    kind: 'shape';
+    id: string;
+    anchor?: Anchor;
+    dx: number;
+    dy: number;
+}
+type ParsedEnd = {
+    kind: 'point';
+    point: Point;
+} | ShapeEnd;
+/** Read what `from` or `to` was given as. */
+export declare function parseEnd(end: End): ParsedEnd;
+/** The ids a shape can be found by must not contain a dot, which separates the anchor. */
+export declare function assertShapeId(id: string): void;
+/** A point of the shape's box, on the canvas. */
+export declare function shapeAnchorPoint(shape: ShapeGeometry, anchor: Anchor): Point;
+/**
+ * Where the line from the centre of `shape` towards `target` leaves its outline. When the target
+ * is inside the shape there is no edge to meet, and the centre is returned.
+ */
+export declare function boundaryToward(shape: ShapeGeometry, target: Point): Point;
+export interface ResolveOptions {
+    /** Finds a shape by id; `undefined` while there is none (yet). */
+    find: (id: string) => ShapeGeometry | undefined;
+    /** Space to leave between an end and the shape it is attached to, in canvas pixels. */
+    gap?: number;
+}
+export interface ResolvedEnds {
+    /** The two ends on the canvas, or `undefined` while a shape is missing. */
+    points?: readonly [Point, Point];
+    /** The ids that no shape has. */
+    missing: string[];
+}
+/** Turn the `from` and `to` of a line into points on the canvas. */
+export declare function resolveEnds(from: End, to: End, { find, gap }: ResolveOptions): ResolvedEnds;
+export {};