@unityevolv/ofiskit-ui-builder 0.1.0

package/dist/canvas/BuilderCanvas.d.ts

@@ -0,0 +1,32 @@
+import { type Template } from '@unityevolv/ofiskit-template';
+import type { OnChange, Selection, Tool } from './types.js';
+/**
+ * The drawing surface.
+ *
+ * Two rules do most of the work, and both live in `geometry.ts`. Rooms snap to a
+ * grid and to each other's edges, because freehand rectangles never line up and an
+ * office of almost aligned rooms looks broken. User areas are *sized* in whole
+ * avatar units, so a fractional area is not something the author has to be told
+ * about — it is something they cannot draw.
+ *
+ * Sized, and not positioned: an area holding two people holds exactly two wherever
+ * it sits, so its corner moves on the same fine grid as everything else.
+ *
+ * What is left here is the surface itself: the element, the background, the shapes
+ * and the two handlers. The gestures are in `useCanvasDrag`, the keys are in
+ * `useCanvasKeys`, and what any of it means to a template is in `geometry.ts`.
+ */
+export interface BuilderCanvasProps {
+    template: Template;
+    /** An object URL while the author is working; a file name once saved. */
+    imageUrl: string | null;
+    tool: Tool;
+    selection: Selection;
+    onSelect(selection: Selection): void;
+    onChange: OnChange;
+    onToolDone(): void;
+    /** Draws a ghost avatar in every cell, so a full room can be judged empty. */
+    showGhosts: boolean;
+}
+export declare function BuilderCanvas(props: BuilderCanvasProps): import("react").JSX.Element;
+//# sourceMappingURL=BuilderCanvas.d.ts.map

package/dist/canvas/BuilderCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderCanvas.d.ts","sourceRoot":"","sources":["../../src/canvas/BuilderCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAIxE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAI3D;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,QAAQ,CAAA;IAClB,yEAAyE;IACzE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAA;IACpC,QAAQ,EAAE,QAAQ,CAAA;IAClB,UAAU,IAAI,IAAI,CAAA;IAClB,8EAA8E;IAC9E,UAAU,EAAE,OAAO,CAAA;CACpB;AAQD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BA6FtD"}

package/dist/canvas/BuilderCanvas.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { avatarUnit } from '@unityevolv/ofiskit-template';
+import { useRef } from 'react';
+import { RoomShape, percent } from './RoomShape.js';
+import { useCanvasDrag } from './useCanvasDrag.js';
+import { useCanvasKeys } from './useCanvasKeys.js';
+const RATIOS = {
+    landscape: '16 / 9',
+    square: '1 / 1',
+    portrait: '3 / 4',
+};
+export function BuilderCanvas(props) {
+    const { template, tool, selection } = props;
+    const surface = useRef(null);
+    const unit = avatarUnit(template.canvas, template.avatarSize);
+    const drag = useCanvasDrag({
+        template,
+        tool,
+        unit,
+        surface,
+        onSelect: props.onSelect,
+        onChange: props.onChange,
+        onToolDone: props.onToolDone,
+    });
+    const onKeyDown = useCanvasKeys({ template, selection, unit, onChange: props.onChange });
+    return (_jsxs("div", { ref: surface, className: "relative aspect-[var(--canvas-ratio)] w-full touch-none select-none overflow-hidden rounded-lg bg-base-300 ring-1 ring-base-300", style: {
+            '--canvas-ratio': RATIOS[template.canvas],
+            cursor: tool === 'select' ? 'default' : 'crosshair',
+        }, onPointerDown: drag.onPointerDown, onPointerMove: drag.onPointerMove, onPointerUp: drag.onPointerUp, onPointerCancel: drag.onPointerUp, onKeyDown: onKeyDown, 
+        /*
+         * One focus stop, and the arrow keys move what is selected.
+         *
+         * Drawing a rectangle is a pointer gesture and there is no honest keyboard
+         * equivalent of dragging one out. Adjusting one is a different matter: an
+         * author who can select a room from the panel but cannot then nudge it has
+         * a tool they cannot use, so the keys are not a courtesy.
+         */
+        role: "application", tabIndex: 0, "aria-label": "Office layout. Select a room in the panel, then use the arrow keys to move it and shift with the arrow keys to resize it.", "data-testid": "builder-canvas", children: [props.imageUrl && (_jsx("img", { src: props.imageUrl, alt: "", "aria-hidden": "true", className: "absolute inset-0 h-full w-full", draggable: false })), template.rooms.map((room) => (_jsx(RoomShape, { room: room, canvas: template.canvas, unit: unit, selection: selection, showGhosts: props.showGhosts }, room.id))), drag.preview && (_jsx("div", { className: "absolute border-2 border-dashed border-primary bg-primary/10", style: percent(drag.preview), "aria-hidden": "true" })), drag.guides.x.map((at) => (_jsx("div", { className: "absolute inset-y-0 w-px bg-primary", style: { left: `${at * 100}%` }, "aria-hidden": "true" }, `x${at}`))), drag.guides.y.map((at) => (_jsx("div", { className: "absolute inset-x-0 h-px bg-primary", style: { top: `${at * 100}%` }, "aria-hidden": "true" }, `y${at}`)))] }));
+}
+//# sourceMappingURL=BuilderCanvas.js.map

package/dist/canvas/BuilderCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuilderCanvas.js","sourceRoot":"","sources":["../../src/canvas/BuilderCanvas.tsx"],"names":[],"mappings":"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"}

package/dist/canvas/RoomShape.d.ts

@@ -0,0 +1,27 @@
+import { type CanvasShape, type Rect, type Room } from '@unityevolv/ofiskit-template';
+import type { Unit } from './geometry.js';
+import type { Selection } from './types.js';
+/**
+ * One room on the canvas, with its user areas over it.
+ *
+ * Drawing only: everything it knows arrives as props, and it changes nothing. The
+ * bar is drawn where it will actually be rather than as a label, because the whole
+ * reason an author moves it to the other edge is that it lands on something in the
+ * picture, and they cannot judge that from a legend.
+ */
+declare const percent: (rect: Rect) => {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+};
+export declare function RoomShape(props: {
+    room: Room;
+    canvas: CanvasShape;
+    unit: Unit;
+    selection: Selection;
+    /** Draws a ghost avatar in every cell, so a full room can be judged empty. */
+    showGhosts: boolean;
+}): import("react").JSX.Element;
+export { percent };
+//# sourceMappingURL=RoomShape.d.ts.map

package/dist/canvas/RoomShape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoomShape.d.ts","sourceRoot":"","sources":["../../src/canvas/RoomShape.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,WAAW,EAAE,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAE9F,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAE3C;;;;;;;GAOG;AAEH,QAAA,MAAM,OAAO,GAAI,MAAM,IAAI;;;;;CAKzB,CAAA;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAC/B,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,EAAE,WAAW,CAAA;IACnB,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,EAAE,SAAS,CAAA;IACpB,8EAA8E;IAC9E,UAAU,EAAE,OAAO,CAAA;CACpB,+BAgFA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/canvas/RoomShape.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { barRect } from '@unityevolv/ofiskit-template';
+/**
+ * One room on the canvas, with its user areas over it.
+ *
+ * Drawing only: everything it knows arrives as props, and it changes nothing. The
+ * bar is drawn where it will actually be rather than as a label, because the whole
+ * reason an author moves it to the other edge is that it lands on something in the
+ * picture, and they cannot judge that from a legend.
+ */
+const percent = (rect) => ({
+    left: `${rect.x * 100}%`,
+    top: `${rect.y * 100}%`,
+    width: `${rect.width * 100}%`,
+    height: `${rect.height * 100}%`,
+});
+export function RoomShape(props) {
+    const { room, canvas, unit, selection, showGhosts } = props;
+    const chosen = selection.kind !== 'none' && 'roomId' in selection && selection.roomId === room.id;
+    const bar = barRect(room.rect, room.bar, canvas);
+    return (_jsxs("div", { children: [_jsxs("div", { className: [
+                    'absolute rounded-sm border-2',
+                    chosen ? 'border-primary bg-primary/10' : 'border-base-content/50 bg-base-content/5',
+                ].join(' '), style: percent(room.rect), children: [_jsx("div", { className: "absolute inset-x-0 truncate bg-base-100/90 px-1 text-[10px] leading-tight text-base-content", style: {
+                            top: room.bar === 'top' ? 0 : undefined,
+                            bottom: room.bar === 'bottom' ? 0 : undefined,
+                            height: `${(bar.height / room.rect.height) * 100}%`,
+                        }, children: room.name }), chosen && (_jsx("span", { className: "absolute -bottom-1 -right-1 h-3 w-3 cursor-se-resize rounded-sm bg-primary", "aria-hidden": "true" }))] }), room.areas.map((area) => {
+                const areaChosen = selection.kind === 'area' && selection.areaId === area.id;
+                return (_jsxs("div", { className: [
+                        'absolute border border-dashed',
+                        areaChosen ? 'border-primary bg-primary/20' : 'border-primary/60 bg-primary/5',
+                    ].join(' '), style: percent({
+                        x: area.x,
+                        y: area.y,
+                        width: area.columns * unit.width,
+                        height: area.rows * unit.height,
+                    }), children: [showGhosts && (_jsx("div", { className: "grid h-full w-full", style: {
+                                gridTemplateColumns: `repeat(${area.columns}, 1fr)`,
+                                gridTemplateRows: `repeat(${area.rows}, 1fr)`,
+                            }, children: Array.from({ length: area.columns * area.rows }, (_, index) => (_jsxs("div", { className: "flex flex-col items-center justify-center gap-[2px] p-[2px]", children: [_jsx("span", { className: "aspect-square w-[58%] rounded-full bg-base-content/25" }), _jsx("span", { className: "h-[3px] w-[70%] rounded-full bg-base-content/20" })] }, index))) })), _jsxs("span", { className: "absolute -top-4 left-0 rounded bg-primary px-1 text-[9px] text-primary-content", children: [area.columns, "x", area.rows] })] }, area.id));
+            })] }));
+}
+export { percent };
+//# sourceMappingURL=RoomShape.js.map

package/dist/canvas/RoomShape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoomShape.js","sourceRoot":"","sources":["../../src/canvas/RoomShape.tsx"],"names":[],"mappings":"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"}

package/dist/canvas/geometry.d.ts

@@ -0,0 +1,115 @@
+import { type Rect, type Room, type Template, type UserArea } from '@unityevolv/ofiskit-template';
+/**
+ * The rules a drawing tool is made of, with no React in them.
+ *
+ * Everything here takes a template and returns a template, or answers a question
+ * about one. That is the whole point of the file: what a drag *means* — where a
+ * room may sit, how close is close enough to snap, what happens to a room's user
+ * areas when the room moves — is the part worth being sure about, and none of it
+ * needs a pointer, an element or a rendered component to be true.
+ *
+ * The component above turns events into calls to these; it decides nothing.
+ */
+/** Rooms snap to this fraction of the canvas, and to other rooms' edges. */
+export declare const GRID = 0.01;
+export declare const SNAP_TO_EDGE = 0.012;
+/** A room has to be at least this big to be a room somebody meant to draw. */
+export declare const MIN_DRAWN = 0.03;
+export declare const clamp: (value: number, low: number, high: number) => number;
+export type Unit = {
+    width: number;
+    height: number;
+};
+export type Direction = {
+    x: number;
+    y: number;
+};
+/**
+ * Snap a room edge to the grid, or to another room's edge if one is close.
+ *
+ * Edges win over the grid: lining up with the room next door is what the author
+ * is actually trying to do, and the grid is only there so that a room with
+ * nothing near it still lands somewhere tidy. The second value is the edge it
+ * snapped to, or null — which is what the alignment guide draws.
+ */
+export declare function snapRoom(template: Template, value: number, axis: 'x' | 'y', ignoreId?: string): [number, number | null];
+/**
+ * Where a user area lands.
+ *
+ * Its **size** is whole avatar units and always will be: half an avatar is not a
+ * place anybody can stand. Its **position** is not, and the two were once
+ * conflated. An area holding two people holds exactly two wherever it sits, so
+ * snapping its corner to a lattice of whole avatars buys nothing — and it costs a
+ * great deal, because one avatar unit is about a sixth of the height of a
+ * landscape office, which leaves a typical room with two or three places an area
+ * can be at all. It reads as a broken drag rather than as a rule.
+ *
+ * So the corner snaps to the same fine grid as everything else, and the area is
+ * kept inside the room it belongs to — an area outside its room is not somewhere
+ * a person can be put, and it used to be reported afterwards as a validation
+ * warning instead of being prevented.
+ */
+export declare function placeArea(wanted: {
+    x: number;
+    y: number;
+}, area: {
+    columns: number;
+    rows: number;
+}, usable: Rect, unit: Unit): {
+    x: number;
+    y: number;
+};
+export declare function roomAt(template: Template, at: {
+    x: number;
+    y: number;
+}): Room | null;
+export declare function areaAt(template: Template, at: {
+    x: number;
+    y: number;
+}): {
+    room: Room;
+    area: UserArea;
+} | null;
+/** Whether a point is on a room's resize corner rather than on the room. */
+export declare function onResizeCorner(room: Room, at: {
+    x: number;
+    y: number;
+}): boolean;
+export declare function mapRoom(template: Template, roomId: string, change: (room: Room) => Room): Template;
+/**
+ * Move a room, and take its user areas with it.
+ *
+ * The areas are the reason this is a function rather than two lines at the call
+ * site: leaving them behind puts every one of them outside its room, which is a
+ * validation error the author did not ask for and would have to undo by hand.
+ */
+export declare function moveRoom(template: Template, roomId: string, to: {
+    x: number;
+    y: number;
+}): Template;
+/** Resize a room by dragging its bottom-right corner to a point. */
+export declare function resizeRoom(template: Template, roomId: string, corner: {
+    x: number;
+    y: number;
+}, unit: Unit): Template;
+/** Move one user area within its room. */
+export declare function moveArea(template: Template, roomId: string, areaId: string, wanted: {
+    x: number;
+    y: number;
+}, unit: Unit): Template;
+/** Add a user area to a room, sized in whole cells. */
+export declare function addArea(template: Template, roomId: string, rect: Rect, unit: Unit, id?: string): Template;
+/** A new room opens with the bar at the top and one 1x1 area, ready to adjust. */
+export declare function addRoom(template: Template, rect: Rect, unit: Unit, id?: string): Template;
+/**
+ * Nudge a room, or resize it.
+ *
+ * The keyboard half of the tool, and not a courtesy: an author who can select a
+ * room from the panel but cannot then move it has a tool they cannot use.
+ */
+export declare function nudgeRoom(template: Template, roomId: string, direction: Direction, step: number, options?: {
+    resize?: boolean;
+}): Template;
+/** Nudge one user area, on the grid and never out of its room. */
+export declare function nudgeArea(template: Template, roomId: string, areaId: string, direction: Direction, step: number, unit: Unit): Template;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/canvas/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/canvas/geometry.ts"],"names":[],"mappings":"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"}

package/dist/canvas/geometry.js

@@ -0,0 +1,222 @@
+import { avatarUnit, usableRect, } from '@unityevolv/ofiskit-template';
+/**
+ * The rules a drawing tool is made of, with no React in them.
+ *
+ * Everything here takes a template and returns a template, or answers a question
+ * about one. That is the whole point of the file: what a drag *means* — where a
+ * room may sit, how close is close enough to snap, what happens to a room's user
+ * areas when the room moves — is the part worth being sure about, and none of it
+ * needs a pointer, an element or a rendered component to be true.
+ *
+ * The component above turns events into calls to these; it decides nothing.
+ */
+/** Rooms snap to this fraction of the canvas, and to other rooms' edges. */
+export const GRID = 0.01;
+export const SNAP_TO_EDGE = 0.012;
+/** A room has to be at least this big to be a room somebody meant to draw. */
+export const MIN_DRAWN = 0.03;
+/** Half a pixel at any sane canvas size: enough to forgive a rounded edge. */
+const EPSILON = 0.0005;
+export const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+/**
+ * Snap a room edge to the grid, or to another room's edge if one is close.
+ *
+ * Edges win over the grid: lining up with the room next door is what the author
+ * is actually trying to do, and the grid is only there so that a room with
+ * nothing near it still lands somewhere tidy. The second value is the edge it
+ * snapped to, or null — which is what the alignment guide draws.
+ */
+export function snapRoom(template, value, axis, ignoreId) {
+    for (const room of template.rooms) {
+        if (room.id === ignoreId)
+            continue;
+        const edges = axis === 'x'
+            ? [room.rect.x, room.rect.x + room.rect.width]
+            : [room.rect.y, room.rect.y + room.rect.height];
+        for (const edge of edges) {
+            if (Math.abs(edge - value) < SNAP_TO_EDGE)
+                return [edge, edge];
+        }
+    }
+    return [Math.round(value / GRID) * GRID, null];
+}
+/**
+ * Where a user area lands.
+ *
+ * Its **size** is whole avatar units and always will be: half an avatar is not a
+ * place anybody can stand. Its **position** is not, and the two were once
+ * conflated. An area holding two people holds exactly two wherever it sits, so
+ * snapping its corner to a lattice of whole avatars buys nothing — and it costs a
+ * great deal, because one avatar unit is about a sixth of the height of a
+ * landscape office, which leaves a typical room with two or three places an area
+ * can be at all. It reads as a broken drag rather than as a rule.
+ *
+ * So the corner snaps to the same fine grid as everything else, and the area is
+ * kept inside the room it belongs to — an area outside its room is not somewhere
+ * a person can be put, and it used to be reported afterwards as a validation
+ * warning instead of being prevented.
+ */
+export function placeArea(wanted, area, usable, unit) {
+    const width = area.columns * unit.width;
+    const height = area.rows * unit.height;
+    return {
+        // `Math.max` on the far edge because a room can be resized smaller than an
+        // area already in it, and a clamp with its ends crossed returns nonsense.
+        x: clamp(Math.round(wanted.x / GRID) * GRID, usable.x, Math.max(usable.x, usable.x + usable.width - width)),
+        y: clamp(Math.round(wanted.y / GRID) * GRID, usable.y, Math.max(usable.y, usable.y + usable.height - height)),
+    };
+}
+// ------------------------------------------------------------------ hit tests
+export function roomAt(template, at) {
+    // Reverse order so the most recently added room wins where they overlap,
+    // which is what the author just drew and therefore what they mean.
+    for (let index = template.rooms.length - 1; index >= 0; index -= 1) {
+        const room = template.rooms[index];
+        if (!room)
+            continue;
+        const { x, y, width, height } = room.rect;
+        if (at.x >= x - EPSILON && at.x <= x + width && at.y >= y - EPSILON && at.y <= y + height) {
+            return room;
+        }
+    }
+    return null;
+}
+export function areaAt(template, at) {
+    const unit = avatarUnit(template.canvas, template.avatarSize);
+    for (const room of template.rooms) {
+        for (const area of room.areas) {
+            const width = area.columns * unit.width;
+            const height = area.rows * unit.height;
+            if (at.x >= area.x && at.x <= area.x + width && at.y >= area.y && at.y <= area.y + height) {
+                return { room, area };
+            }
+        }
+    }
+    return null;
+}
+/** Whether a point is on a room's resize corner rather than on the room. */
+export function onResizeCorner(room, at) {
+    return (Math.abs(at.x - (room.rect.x + room.rect.width)) < 0.015 &&
+        Math.abs(at.y - (room.rect.y + room.rect.height)) < 0.015);
+}
+// ----------------------------------------------------------------- transforms
+export function mapRoom(template, roomId, change) {
+    return {
+        ...template,
+        rooms: template.rooms.map((room) => (room.id === roomId ? change(room) : room)),
+    };
+}
+/**
+ * Move a room, and take its user areas with it.
+ *
+ * The areas are the reason this is a function rather than two lines at the call
+ * site: leaving them behind puts every one of them outside its room, which is a
+ * validation error the author did not ask for and would have to undo by hand.
+ */
+export function moveRoom(template, roomId, to) {
+    return mapRoom(template, roomId, (room) => {
+        const x = clamp(to.x, 0, 1 - room.rect.width);
+        const y = clamp(to.y, 0, 1 - room.rect.height);
+        return {
+            ...room,
+            rect: { ...room.rect, x, y },
+            areas: room.areas.map((area) => ({
+                ...area,
+                x: area.x + x - room.rect.x,
+                y: area.y + y - room.rect.y,
+            })),
+        };
+    });
+}
+/** Resize a room by dragging its bottom-right corner to a point. */
+export function resizeRoom(template, roomId, corner, unit) {
+    return mapRoom(template, roomId, (room) => ({
+        ...room,
+        rect: {
+            ...room.rect,
+            width: clamp(corner.x - room.rect.x, unit.width, 1 - room.rect.x),
+            height: clamp(corner.y - room.rect.y, unit.height, 1 - room.rect.y),
+        },
+    }));
+}
+/** Move one user area within its room. */
+export function moveArea(template, roomId, areaId, wanted, unit) {
+    const room = template.rooms.find((candidate) => candidate.id === roomId);
+    if (!room)
+        return template;
+    const usable = usableRect(room, template.canvas);
+    return mapRoom(template, roomId, (current) => ({
+        ...current,
+        areas: current.areas.map((area) => area.id === areaId ? { ...area, ...placeArea(wanted, area, usable, unit) } : area),
+    }));
+}
+/** Add a user area to a room, sized in whole cells. */
+export function addArea(template, roomId, rect, unit, id = `area-${Date.now().toString(36)}`) {
+    const columns = Math.max(1, Math.round(rect.width / unit.width));
+    const rows = Math.max(1, Math.round(rect.height / unit.height));
+    return mapRoom(template, roomId, (room) => ({
+        ...room,
+        areas: [...room.areas, { id, x: rect.x, y: rect.y, columns, rows }],
+    }));
+}
+/** A new room opens with the bar at the top and one 1x1 area, ready to adjust. */
+export function addRoom(template, rect, unit, id = `room-${Date.now().toString(36)}`) {
+    const used = template.rooms.filter((room) => room.type === 'workspace' || room.type === 'meeting');
+    return {
+        ...template,
+        rooms: [
+            ...template.rooms,
+            {
+                id,
+                name: `Room ${used.length + 1}`,
+                type: 'workspace',
+                rect,
+                bar: 'top',
+                areas: [
+                    {
+                        id: `area-${id}`,
+                        x: rect.x + (rect.width - unit.width) / 2,
+                        y: rect.y + (rect.height - unit.height) / 2,
+                        columns: 1,
+                        rows: 1,
+                    },
+                ],
+            },
+        ],
+    };
+}
+// ------------------------------------------------------------------- keyboard
+/**
+ * Nudge a room, or resize it.
+ *
+ * The keyboard half of the tool, and not a courtesy: an author who can select a
+ * room from the panel but cannot then move it has a tool they cannot use.
+ */
+export function nudgeRoom(template, roomId, direction, step, options = {}) {
+    const dx = direction.x * step;
+    const dy = direction.y * step;
+    if (options.resize) {
+        return mapRoom(template, roomId, (room) => ({
+            ...room,
+            rect: {
+                ...room.rect,
+                width: clamp(room.rect.width + dx, GRID * 4, 1 - room.rect.x),
+                height: clamp(room.rect.height + dy, GRID * 4, 1 - room.rect.y),
+            },
+        }));
+    }
+    const room = template.rooms.find((candidate) => candidate.id === roomId);
+    if (!room)
+        return template;
+    return moveRoom(template, roomId, { x: room.rect.x + dx, y: room.rect.y + dy });
+}
+/** Nudge one user area, on the grid and never out of its room. */
+export function nudgeArea(template, roomId, areaId, direction, step, unit) {
+    const area = template.rooms
+        .find((candidate) => candidate.id === roomId)
+        ?.areas.find((candidate) => candidate.id === areaId);
+    if (!area)
+        return template;
+    return moveArea(template, roomId, areaId, { x: area.x + direction.x * step, y: area.y + direction.y * step }, unit);
+}
+//# sourceMappingURL=geometry.js.map

package/dist/canvas/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.js","sourceRoot":"","sources":["../../src/canvas/geometry.ts"],"names":[],"mappings":"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"}

package/dist/canvas/types.d.ts

@@ -0,0 +1,47 @@
+import type { Template } from '@unityevolv/ofiskit-template';
+/**
+ * What the canvas is for and what is picked, shared by the surface and the panel.
+ *
+ * In their own file because the hooks, the surface and the panel all need them,
+ * and a type imported from the component that renders it is how two files end up
+ * importing each other.
+ */
+export type Tool = 'select' | 'room' | 'area';
+export type Selection = {
+    kind: 'none';
+} | {
+    kind: 'room';
+    roomId: string;
+} | {
+    kind: 'area';
+    roomId: string;
+    areaId: string;
+};
+/** How a change reaches the history: replacing a step, or opening a new one. */
+export interface ChangeOptions {
+    /** Part of a drag in progress. Replaces the current step rather than adding one. */
+    transient?: boolean;
+    /** The template as it was before this gesture, which is what undo goes back to. */
+    before?: Template;
+}
+export type OnChange = (template: Template, options?: ChangeOptions) => void;
+/** One gesture in progress. */
+export interface Drag {
+    kind: 'draw-room' | 'draw-area' | 'move-room' | 'resize-room' | 'move-area';
+    roomId?: string;
+    areaId?: string;
+    /** Where the pointer went down, in canvas coordinates. */
+    from: {
+        x: number;
+        y: number;
+    };
+    /** The template before the drag, so the whole drag is one undo step. */
+    before: Template;
+    /** Offset from the shape's corner, so it does not jump under the cursor. */
+    grab?: {
+        x: number;
+        y: number;
+    };
+    handle?: 'se' | 'nw';
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/canvas/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/canvas/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAE5D;;;;;;GAMG;AAEH,MAAM,MAAM,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAChB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAEpD,gFAAgF;AAChF,MAAM,WAAW,aAAa;IAC5B,oFAAoF;IACpF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mFAAmF;IACnF,MAAM,CAAC,EAAE,QAAQ,CAAA;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;AAE5E,+BAA+B;AAC/B,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,CAAA;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0DAA0D;IAC1D,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9B,wEAAwE;IACxE,MAAM,EAAE,QAAQ,CAAA;IAChB,4EAA4E;IAC5E,IAAI,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACrB"}

package/dist/canvas/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/canvas/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/canvas/types.ts"],"names":[],"mappings":""}

package/dist/canvas/useCanvasDrag.d.ts

@@ -0,0 +1,35 @@
+import { type Rect, type Template } from '@unityevolv/ofiskit-template';
+import { type PointerEvent as ReactPointerEvent, type RefObject } from 'react';
+import { type Unit } from './geometry.js';
+import type { OnChange, Selection, Tool } from './types.js';
+/**
+ * One gesture at a time, from pointer down to pointer up.
+ *
+ * Held apart from the surface because it is a small state machine and the surface
+ * is a large piece of markup, and mixing the two made both hard to follow. What is
+ * here is only the sequencing — which gesture is running, what it looks like while
+ * it runs, and when it becomes an undo step. What each gesture *means* is in
+ * `geometry.ts`, where it can be tested without a pointer.
+ */
+export interface CanvasDrag {
+    /** The rectangle being drawn, while one is. Nothing to do with the template yet. */
+    preview: Rect | null;
+    /** Alignment guides: an edge this drag has snapped to, so the author can see it. */
+    guides: {
+        x: number[];
+        y: number[];
+    };
+    onPointerDown(event: ReactPointerEvent): void;
+    onPointerMove(event: ReactPointerEvent): void;
+    onPointerUp(): void;
+}
+export declare function useCanvasDrag(options: {
+    template: Template;
+    tool: Tool;
+    unit: Unit;
+    surface: RefObject<HTMLDivElement | null>;
+    onSelect(selection: Selection): void;
+    onChange: OnChange;
+    onToolDone(): void;
+}): CanvasDrag;
+//# sourceMappingURL=useCanvasDrag.d.ts.map

package/dist/canvas/useCanvasDrag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasDrag.d.ts","sourceRoot":"","sources":["../../src/canvas/useCanvasDrag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AACnF,OAAO,EAAY,KAAK,YAAY,IAAI,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAExF,OAAO,EAaL,KAAK,IAAI,EACV,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAQ,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjE;;;;;;;;GAQG;AAEH,MAAM,WAAW,UAAU;IACzB,oFAAoF;IACpF,OAAO,EAAE,IAAI,GAAG,IAAI,CAAA;IACpB,oFAAoF;IACpF,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IACpC,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAC7C,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAC7C,WAAW,IAAI,IAAI,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE;IACrC,QAAQ,EAAE,QAAQ,CAAA;IAClB,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,IAAI,CAAA;IACV,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACzC,QAAQ,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAA;IACpC,QAAQ,EAAE,QAAQ,CAAA;IAClB,UAAU,IAAI,IAAI,CAAA;CACnB,GAAG,UAAU,CA2Jb"}