@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/canvas-multi.mjs

@@ -0,0 +1,53 @@
+import { blockIcon } from './canvas-icons.mjs';
+import { designerIcon } from './icons.mjs';
+import { locate } from './layout-tree.mjs';
+import { setHidden, setText } from './writes.mjs';
+import { chromeLanguage } from './chrome-language.mjs';
+export function multiBar(options) {
+    const { el, doc, designer } = options;
+    const button = (words, icon, act, label) => {
+        const b = el('button', { type: 'button', class: 'fd-multi-button', ...(label ? { 'aria-label': label, title: label } : {}) }, icon, ...(label ? [] : [words]));
+        b.addEventListener('click', act);
+        return b;
+    };
+    const w = designer.words.canvas;
+    const picks = () => designer.getState().picked;
+    const group = button(w.group, blockIcon(doc, 'group'), () => designer.wrap(picks(), 'group'));
+    const side = button(w.sideBySide, blockIcon(doc, 'side'), () => designer.wrap(picks(), 'side'));
+    const tabs = button(w.tabs, blockIcon(doc, 'tabs'), () => designer.wrap(picks(), 'tabs'));
+    const copy = button('', designerIcon(doc, 'duplicate'), () => designer.duplicate(picks()), w.duplicate);
+    const remove = button('', designerIcon(doc, 'delete'), () => designer.remove(picks()), w.remove);
+    const down = button('', designerIcon(doc, 'plus'), () => designer.select(null), w.putDown);
+    down.classList.add('fd-multi-down');
+    const ungroup = button(w.ungroup, blockIcon(doc, 'group'), () => {
+        const id = designer.getState().selected;
+        if (id)
+            designer.ungroup(id);
+    });
+    const count = el('b', { class: 'fd-multi-count' });
+    const why = el('span', { class: 'fd-multi-why' }, w.sameGroupToGroup);
+    const bar = el('div', { class: 'fd-multi', role: 'toolbar', 'aria-label': w.whatIsPicked, hidden: '', ...chromeLanguage(designer) }, count, group, side, tabs, why, copy, remove, down, ungroup);
+    const element = el('div', { class: 'fd-multi-dock' }, bar);
+    return {
+        element,
+        update(state, advanced) {
+            const page = state.page;
+            const spots = state.picked.map((id) => locate(page, id));
+            const several = advanced && state.picked.length > 1;
+            const one = advanced && state.picked.length === 1 ? spots[0]?.node : null;
+            const ungroupable = !!one && (one.type === 'section' || one.type === 'tabs');
+            setHidden(bar, !several && !ungroupable);
+            // Parts that sit together, in one list (not tabs among their tabs), can be put in a group of their own.
+            const together = several && spots.every((s) => s && s.list === spots[0]?.list) && spots[0]?.parent.type !== 'tabs';
+            setHidden(count, !several);
+            setText(count, w.picked(state.picked.length));
+            for (const b of [group, side, tabs])
+                setHidden(b, !together);
+            setHidden(why, !several || together);
+            for (const b of [copy, remove, down])
+                setHidden(b, !several);
+            setHidden(ungroup, several || !ungroupable);
+        },
+    };
+}
+//# sourceMappingURL=canvas-multi.mjs.map

package/src/lib/canvas-multi.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-multi.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-multi.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAiBnD,MAAM,UAAU,QAAQ,CAAC,OAAkE;IACzF,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IACtC,MAAM,MAAM,GAAG,CAAC,KAAa,EAAE,IAAmB,EAAE,GAAe,EAAE,KAAc,EAAE,EAAE;QACrF,MAAM,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC/J,CAAC,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QACjC,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACF,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;IAChC,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC;IAC/C,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9F,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;IAChG,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1F,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,EAAE,YAAY,CAAC,GAAG,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;IACxG,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IACjG,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,EAAE,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IAC3F,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACpC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE;QAC9D,MAAM,EAAE,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC;QACxC,IAAI,EAAE;YAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACtE,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,QAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IACjM,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,GAAG,CAAC,CAAC;IAE3D,OAAO;QACL,OAAO;QACP,MAAM,CAAC,KAAK,EAAE,QAAQ;YACpB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;YACxB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;YACzD,MAAM,OAAO,GAAG,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YACpD,MAAM,GAAG,GAAG,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;YAC1E,MAAM,WAAW,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,SAAS,IAAI,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC;YAC7E,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC;YACzC,wGAAwG;YACxG,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC;YACnH,SAAS,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC;YAC3B,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;YAC9C,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC;gBAAE,SAAS,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;YAC7D,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC;YACrC,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC;gBAAE,SAAS,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;YAC7D,SAAS,CAAC,OAAO,EAAE,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9C,CAAC;KACF,CAAC;AACJ,CAAC"}

package/src/lib/canvas-resize.d.mts

@@ -0,0 +1,72 @@
+import { type ScreenSize } from './canvas-size.mjs';
+import type { ElementFactory } from './chrome.mjs';
+import type { DesignerWords } from './designer-words.mjs';
+/**
+ * The canvas dragged to any width, as Designable's is: a handle on its end
+ * edge (the left one, right to left) sets a width from a phone's to the
+ * stage's whole, between the Desktop, Tablet and Phone steps. While it is
+ * dragged a chip by the handle says the width and the size the form takes it
+ * for, by the form's own widths (`sizeAt`), and each group shows the columns
+ * it has there. The canvas stays in the stage's middle, as a tablet's does, so
+ * its edge follows the pointer: two pixels of width for each it moves.
+ *
+ * The handle is a vertical separator: ← and → move it ten pixels (mirrored
+ * right to left), Shift a hundred, Home and End to a phone's and the stage's
+ * width; a double-click goes back to the size's own width.
+ *
+ * One frame per redraw: pointer moves are gathered into a single animation
+ * frame, which only writes. What is measured — the canvas, the stage — is read
+ * as a drag starts, as a key is pressed, and in the canvas's own frame before
+ * it writes (`read`).
+ */
+/** The canvas's width now, the stage's (the most it can be), and the room the canvas keeps round the form inside it. */
+export interface CanvasMeasure {
+    width: number;
+    room: number;
+    inset: number;
+}
+export interface CanvasResizeOptions {
+    el: ElementFactory;
+    canvas: HTMLElement;
+    rtl(): boolean;
+    /** The size shown now. */
+    size(): ScreenSize;
+    /** A width dragged or keyed to, and the size the form takes it for: as a drag goes, and once more when it is let go (`done`). */
+    change(width: number, size: ScreenSize, done: boolean): void;
+    /** Back to the size's own width: a double-click on the handle. */
+    reset(): void;
+    /** Words for the live region. */
+    say(words: string): void;
+    /** The designer's words. English unless given. */
+    words?: DesignerWords;
+    /** Read off the page by default. */
+    measure?(): CanvasMeasure;
+}
+export interface CanvasResize {
+    element: HTMLElement;
+    /** Measure now, before the frame writes; what to write after — the handle's values. Nothing while it is dragged. */
+    read(): (() => void) | null;
+    destroy(): void;
+}
+/** A drag's width: two pixels for each the pointer moves outwards, as the canvas stays in the stage's middle. */
+export declare function dragWidth(at: {
+    start: number;
+    from: number;
+    x: number;
+    rtl: boolean;
+}): number;
+/** No narrower than a phone, no wider than the stage, in whole pixels. */
+export declare function clampWidth(width: number, room: number): number;
+/** A key's width: ← and → ten pixels (mirrored right to left), Shift a hundred, Home and End the least and the most; null for a key not the handle's. */
+export declare function keyWidth(width: number, key: {
+    key: string;
+    shiftKey: boolean;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+}, rtl: boolean, room: number): number | null;
+/** The chip's words: "640 px · Tablet". */
+export declare const chipWords: (width: number, size: ScreenSize, words?: DesignerWords) => string;
+/** A screen reader's: "640 pixels, tablet". */
+export declare const valueWords: (width: number, size: ScreenSize, words?: DesignerWords) => string;
+export declare function canvasResize(options: CanvasResizeOptions): CanvasResize;

package/src/lib/canvas-resize.d.ts

@@ -0,0 +1,72 @@
+import { type ScreenSize } from './canvas-size';
+import type { ElementFactory } from './chrome';
+import type { DesignerWords } from './designer-words';
+/**
+ * The canvas dragged to any width, as Designable's is: a handle on its end
+ * edge (the left one, right to left) sets a width from a phone's to the
+ * stage's whole, between the Desktop, Tablet and Phone steps. While it is
+ * dragged a chip by the handle says the width and the size the form takes it
+ * for, by the form's own widths (`sizeAt`), and each group shows the columns
+ * it has there. The canvas stays in the stage's middle, as a tablet's does, so
+ * its edge follows the pointer: two pixels of width for each it moves.
+ *
+ * The handle is a vertical separator: ← and → move it ten pixels (mirrored
+ * right to left), Shift a hundred, Home and End to a phone's and the stage's
+ * width; a double-click goes back to the size's own width.
+ *
+ * One frame per redraw: pointer moves are gathered into a single animation
+ * frame, which only writes. What is measured — the canvas, the stage — is read
+ * as a drag starts, as a key is pressed, and in the canvas's own frame before
+ * it writes (`read`).
+ */
+/** The canvas's width now, the stage's (the most it can be), and the room the canvas keeps round the form inside it. */
+export interface CanvasMeasure {
+    width: number;
+    room: number;
+    inset: number;
+}
+export interface CanvasResizeOptions {
+    el: ElementFactory;
+    canvas: HTMLElement;
+    rtl(): boolean;
+    /** The size shown now. */
+    size(): ScreenSize;
+    /** A width dragged or keyed to, and the size the form takes it for: as a drag goes, and once more when it is let go (`done`). */
+    change(width: number, size: ScreenSize, done: boolean): void;
+    /** Back to the size's own width: a double-click on the handle. */
+    reset(): void;
+    /** Words for the live region. */
+    say(words: string): void;
+    /** The designer's words. English unless given. */
+    words?: DesignerWords;
+    /** Read off the page by default. */
+    measure?(): CanvasMeasure;
+}
+export interface CanvasResize {
+    element: HTMLElement;
+    /** Measure now, before the frame writes; what to write after — the handle's values. Nothing while it is dragged. */
+    read(): (() => void) | null;
+    destroy(): void;
+}
+/** A drag's width: two pixels for each the pointer moves outwards, as the canvas stays in the stage's middle. */
+export declare function dragWidth(at: {
+    start: number;
+    from: number;
+    x: number;
+    rtl: boolean;
+}): number;
+/** No narrower than a phone, no wider than the stage, in whole pixels. */
+export declare function clampWidth(width: number, room: number): number;
+/** A key's width: ← and → ten pixels (mirrored right to left), Shift a hundred, Home and End the least and the most; null for a key not the handle's. */
+export declare function keyWidth(width: number, key: {
+    key: string;
+    shiftKey: boolean;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+}, rtl: boolean, room: number): number | null;
+/** The chip's words: "640 px · Tablet". */
+export declare const chipWords: (width: number, size: ScreenSize, words?: DesignerWords) => string;
+/** A screen reader's: "640 pixels, tablet". */
+export declare const valueWords: (width: number, size: ScreenSize, words?: DesignerWords) => string;
+export declare function canvasResize(options: CanvasResizeOptions): CanvasResize;

package/src/lib/canvas-resize.js

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.valueWords = exports.chipWords = void 0;
+exports.dragWidth = dragWidth;
+exports.clampWidth = clampWidth;
+exports.keyWidth = keyWidth;
+exports.canvasResize = canvasResize;
+const canvas_size_1 = require("./canvas-size");
+const writes_1 = require("./writes");
+const en_1 = require("./locales/en");
+/** A drag's width: two pixels for each the pointer moves outwards, as the canvas stays in the stage's middle. */
+function dragWidth(at) {
+    return at.start + 2 * (at.rtl ? at.from - at.x : at.x - at.from);
+}
+/** No narrower than a phone, no wider than the stage, in whole pixels. */
+function clampWidth(width, room) {
+    return Math.round(Math.max(canvas_size_1.MIN_WIDTH, Math.min(width, room)));
+}
+/** A key's width: ← and → ten pixels (mirrored right to left), Shift a hundred, Home and End the least and the most; null for a key not the handle's. */
+function keyWidth(width, key, rtl, room) {
+    if (key.altKey || key.ctrlKey || key.metaKey)
+        return null;
+    if (key.key === 'Home')
+        return canvas_size_1.MIN_WIDTH;
+    if (key.key === 'End')
+        return clampWidth(room, room);
+    if (key.key !== 'ArrowLeft' && key.key !== 'ArrowRight')
+        return null;
+    const wider = (key.key === 'ArrowRight') !== rtl;
+    return clampWidth(width + (wider ? 1 : -1) * (key.shiftKey ? 100 : 10), room);
+}
+/** The chip's words: "640 px · Tablet". */
+const chipWords = (width, size, words = en_1.en) => words.canvas.chip(width, words.canvas.sizes[size]);
+exports.chipWords = chipWords;
+/** A screen reader's: "640 pixels, tablet". */
+const valueWords = (width, size, words = en_1.en) => words.canvas.value(width, size);
+exports.valueWords = valueWords;
+function canvasResize(options) {
+    const { el, canvas } = options;
+    const words = options.words ?? en_1.en;
+    const doc = canvas.ownerDocument;
+    const view = doc.defaultView;
+    /** Pixels of a computed style's properties, added up. */
+    const px = (style, ...names) => names.reduce((sum, name) => sum + (parseFloat(style?.getPropertyValue(name) ?? '') || 0), 0);
+    const across = ['padding-left', 'padding-right', 'border-left-width', 'border-right-width'];
+    const measure = options.measure ??
+        (() => {
+            const stage = canvas.parentElement;
+            const room = stage ? stage.getBoundingClientRect().width - px(view?.getComputedStyle(stage), ...across) : canvas.getBoundingClientRect().width;
+            return { width: canvas.getBoundingClientRect().width, room, inset: px(view?.getComputedStyle(canvas), ...across) };
+        });
+    const chip = el('span', { class: 'fd-canvas-resize-chip', 'aria-hidden': 'true' });
+    const grip = el('span', { class: 'fd-canvas-resize-grip' }, chip);
+    const element = el('div', {
+        class: 'fd-canvas-resize',
+        role: 'separator',
+        'aria-orientation': 'vertical',
+        'aria-label': words.canvas.screenWidth,
+        'aria-valuemin': String(canvas_size_1.MIN_WIDTH),
+        tabindex: '0',
+        title: words.canvas.resizeTitle,
+    }, grip);
+    canvas.append(element);
+    /** The handle's values, and the chip's words, for a width and its size. */
+    function show(width, room, size) {
+        (0, writes_1.setAttr)(element, 'aria-valuenow', String(width));
+        (0, writes_1.setAttr)(element, 'aria-valuemax', String(Math.max(canvas_size_1.MIN_WIDTH, Math.round(room))));
+        (0, writes_1.setAttr)(element, 'aria-valuetext', (0, exports.valueWords)(width, size, words));
+        (0, writes_1.setText)(chip, (0, exports.chipWords)(width, size, words));
+    }
+    // ---- the pointer ---------------------------------------------------------------
+    let drag = null;
+    const onDown = (event) => {
+        if (event.button !== 0 || drag)
+            return;
+        // Not prevented: the browser focuses the handle as a pointer focuses, its keys going on from there with no ring
+        // drawn; nothing is selected on the way, as the handle selects nothing (styles-canvas.ts).
+        event.stopPropagation();
+        // Captured, a fast drag never loses the handle; the moves still come up to the document.
+        try {
+            element.setPointerCapture?.(event.pointerId);
+        }
+        catch {
+            // A pointer the browser no longer has: the document's moves are enough.
+        }
+        const m = measure();
+        const rtl = options.rtl();
+        const from = event.clientX;
+        let x = from;
+        let moved = false;
+        let frame = 0;
+        let width = Math.round(m.width);
+        let size = options.size();
+        const settle = () => {
+            width = clampWidth(dragWidth({ start: m.width, from, x, rtl }), m.room);
+            size = (0, canvas_size_1.sizeAt)(width - m.inset);
+            show(width, m.room, size);
+        };
+        const draw = () => {
+            frame = 0;
+            settle();
+            options.change(width, size, false);
+        };
+        const move = (e) => {
+            x = e.clientX;
+            if (x !== from)
+                moved = true;
+            if (moved && !frame)
+                frame = view?.requestAnimationFrame ? view.requestAnimationFrame(draw) : (draw(), 0);
+        };
+        const end = (commit) => {
+            doc.removeEventListener('pointermove', move);
+            doc.removeEventListener('pointerup', up);
+            doc.removeEventListener('pointercancel', up);
+            if (frame)
+                view?.cancelAnimationFrame(frame);
+            frame = 0;
+            drag = null;
+            element.removeAttribute('data-active');
+            if (!commit || !moved)
+                return;
+            settle();
+            options.change(width, size, true);
+            options.say((0, exports.valueWords)(width, size, words));
+        };
+        // Let go, or taken by the browser: the width shown is the one kept.
+        const up = () => end(true);
+        doc.addEventListener('pointermove', move);
+        doc.addEventListener('pointerup', up);
+        doc.addEventListener('pointercancel', up);
+        drag = { end };
+        show(width, m.room, size);
+        element.setAttribute('data-active', '');
+    };
+    // ---- the keys ------------------------------------------------------------------
+    const onKey = (event) => {
+        if (drag)
+            return;
+        const m = measure();
+        const now = Math.round(m.width);
+        const next = keyWidth(now, event, options.rtl(), m.room);
+        if (next === null)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (next === now)
+            return;
+        const size = (0, canvas_size_1.sizeAt)(next - m.inset);
+        show(next, m.room, size);
+        options.change(next, size, true);
+        options.say((0, exports.valueWords)(next, size, words));
+    };
+    const onDouble = (event) => {
+        event.preventDefault();
+        options.reset();
+    };
+    element.addEventListener('pointerdown', onDown);
+    element.addEventListener('keydown', onKey);
+    element.addEventListener('dblclick', onDouble);
+    return {
+        element,
+        read() {
+            if (drag)
+                return null;
+            const m = measure();
+            return () => show(Math.round(m.width), m.room, options.size());
+        },
+        destroy() {
+            drag?.end(false);
+            element.removeEventListener('pointerdown', onDown);
+            element.removeEventListener('keydown', onKey);
+            element.removeEventListener('dblclick', onDouble);
+            element.remove();
+        },
+    };
+}
+//# sourceMappingURL=canvas-resize.js.map

package/src/lib/canvas-resize.js.map

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

package/src/lib/canvas-resize.mjs

@@ -0,0 +1,168 @@
+import { MIN_WIDTH, sizeAt } from './canvas-size.mjs';
+import { setAttr, setText } from './writes.mjs';
+import { en } from './locales/en/index.mjs';
+/** A drag's width: two pixels for each the pointer moves outwards, as the canvas stays in the stage's middle. */
+export function dragWidth(at) {
+    return at.start + 2 * (at.rtl ? at.from - at.x : at.x - at.from);
+}
+/** No narrower than a phone, no wider than the stage, in whole pixels. */
+export function clampWidth(width, room) {
+    return Math.round(Math.max(MIN_WIDTH, Math.min(width, room)));
+}
+/** A key's width: ← and → ten pixels (mirrored right to left), Shift a hundred, Home and End the least and the most; null for a key not the handle's. */
+export function keyWidth(width, key, rtl, room) {
+    if (key.altKey || key.ctrlKey || key.metaKey)
+        return null;
+    if (key.key === 'Home')
+        return MIN_WIDTH;
+    if (key.key === 'End')
+        return clampWidth(room, room);
+    if (key.key !== 'ArrowLeft' && key.key !== 'ArrowRight')
+        return null;
+    const wider = (key.key === 'ArrowRight') !== rtl;
+    return clampWidth(width + (wider ? 1 : -1) * (key.shiftKey ? 100 : 10), room);
+}
+/** The chip's words: "640 px · Tablet". */
+export const chipWords = (width, size, words = en) => words.canvas.chip(width, words.canvas.sizes[size]);
+/** A screen reader's: "640 pixels, tablet". */
+export const valueWords = (width, size, words = en) => words.canvas.value(width, size);
+export function canvasResize(options) {
+    const { el, canvas } = options;
+    const words = options.words ?? en;
+    const doc = canvas.ownerDocument;
+    const view = doc.defaultView;
+    /** Pixels of a computed style's properties, added up. */
+    const px = (style, ...names) => names.reduce((sum, name) => sum + (parseFloat(style?.getPropertyValue(name) ?? '') || 0), 0);
+    const across = ['padding-left', 'padding-right', 'border-left-width', 'border-right-width'];
+    const measure = options.measure ??
+        (() => {
+            const stage = canvas.parentElement;
+            const room = stage ? stage.getBoundingClientRect().width - px(view?.getComputedStyle(stage), ...across) : canvas.getBoundingClientRect().width;
+            return { width: canvas.getBoundingClientRect().width, room, inset: px(view?.getComputedStyle(canvas), ...across) };
+        });
+    const chip = el('span', { class: 'fd-canvas-resize-chip', 'aria-hidden': 'true' });
+    const grip = el('span', { class: 'fd-canvas-resize-grip' }, chip);
+    const element = el('div', {
+        class: 'fd-canvas-resize',
+        role: 'separator',
+        'aria-orientation': 'vertical',
+        'aria-label': words.canvas.screenWidth,
+        'aria-valuemin': String(MIN_WIDTH),
+        tabindex: '0',
+        title: words.canvas.resizeTitle,
+    }, grip);
+    canvas.append(element);
+    /** The handle's values, and the chip's words, for a width and its size. */
+    function show(width, room, size) {
+        setAttr(element, 'aria-valuenow', String(width));
+        setAttr(element, 'aria-valuemax', String(Math.max(MIN_WIDTH, Math.round(room))));
+        setAttr(element, 'aria-valuetext', valueWords(width, size, words));
+        setText(chip, chipWords(width, size, words));
+    }
+    // ---- the pointer ---------------------------------------------------------------
+    let drag = null;
+    const onDown = (event) => {
+        if (event.button !== 0 || drag)
+            return;
+        // Not prevented: the browser focuses the handle as a pointer focuses, its keys going on from there with no ring
+        // drawn; nothing is selected on the way, as the handle selects nothing (styles-canvas.ts).
+        event.stopPropagation();
+        // Captured, a fast drag never loses the handle; the moves still come up to the document.
+        try {
+            element.setPointerCapture?.(event.pointerId);
+        }
+        catch {
+            // A pointer the browser no longer has: the document's moves are enough.
+        }
+        const m = measure();
+        const rtl = options.rtl();
+        const from = event.clientX;
+        let x = from;
+        let moved = false;
+        let frame = 0;
+        let width = Math.round(m.width);
+        let size = options.size();
+        const settle = () => {
+            width = clampWidth(dragWidth({ start: m.width, from, x, rtl }), m.room);
+            size = sizeAt(width - m.inset);
+            show(width, m.room, size);
+        };
+        const draw = () => {
+            frame = 0;
+            settle();
+            options.change(width, size, false);
+        };
+        const move = (e) => {
+            x = e.clientX;
+            if (x !== from)
+                moved = true;
+            if (moved && !frame)
+                frame = view?.requestAnimationFrame ? view.requestAnimationFrame(draw) : (draw(), 0);
+        };
+        const end = (commit) => {
+            doc.removeEventListener('pointermove', move);
+            doc.removeEventListener('pointerup', up);
+            doc.removeEventListener('pointercancel', up);
+            if (frame)
+                view?.cancelAnimationFrame(frame);
+            frame = 0;
+            drag = null;
+            element.removeAttribute('data-active');
+            if (!commit || !moved)
+                return;
+            settle();
+            options.change(width, size, true);
+            options.say(valueWords(width, size, words));
+        };
+        // Let go, or taken by the browser: the width shown is the one kept.
+        const up = () => end(true);
+        doc.addEventListener('pointermove', move);
+        doc.addEventListener('pointerup', up);
+        doc.addEventListener('pointercancel', up);
+        drag = { end };
+        show(width, m.room, size);
+        element.setAttribute('data-active', '');
+    };
+    // ---- the keys ------------------------------------------------------------------
+    const onKey = (event) => {
+        if (drag)
+            return;
+        const m = measure();
+        const now = Math.round(m.width);
+        const next = keyWidth(now, event, options.rtl(), m.room);
+        if (next === null)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (next === now)
+            return;
+        const size = sizeAt(next - m.inset);
+        show(next, m.room, size);
+        options.change(next, size, true);
+        options.say(valueWords(next, size, words));
+    };
+    const onDouble = (event) => {
+        event.preventDefault();
+        options.reset();
+    };
+    element.addEventListener('pointerdown', onDown);
+    element.addEventListener('keydown', onKey);
+    element.addEventListener('dblclick', onDouble);
+    return {
+        element,
+        read() {
+            if (drag)
+                return null;
+            const m = measure();
+            return () => show(Math.round(m.width), m.room, options.size());
+        },
+        destroy() {
+            drag?.end(false);
+            element.removeEventListener('pointerdown', onDown);
+            element.removeEventListener('keydown', onKey);
+            element.removeEventListener('dblclick', onDouble);
+            element.remove();
+        },
+    };
+}
+//# sourceMappingURL=canvas-resize.mjs.map

package/src/lib/canvas-resize.mjs.map

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

package/src/lib/canvas-size.d.mts

@@ -0,0 +1,42 @@
+import type { ColumnCount, ColumnsByWidth } from '@fieldia/core';
+import type { ElementFactory } from './chrome.mjs';
+import type { DesignerWords } from './designer-words.mjs';
+/**
+ * The size of screen the Advanced canvas shows, as the mockup's switch on its
+ * stage: a desktop, a tablet or a phone. Each group shows the columns it has
+ * on that size whatever the canvas's own width — worked out by the form's own
+ * rules — and on a tablet or a phone the canvas narrows to one. Simple shows a
+ * desktop. The choice is the person's, kept in this browser.
+ *
+ * The canvas can also be dragged to any width (canvas-resize.ts): the size is
+ * then the one the form takes that width for, by its own widths.
+ */
+export type ScreenSize = 'desktop' | 'tablet' | 'phone';
+/** The narrowest the canvas is dragged to: a small phone's screen. */
+export declare const MIN_WIDTH = 320;
+/**
+ * The size a form this wide is, by the form's own widths (FORM_WIDTHS, the
+ * ones its stylesheet lays its groups out by): a phone up to the narrow one,
+ * a tablet up to the medium one, a desktop beyond.
+ */
+export declare function sizeAt(formWidth: number): ScreenSize;
+export declare function readSize(view: Window | null): ScreenSize;
+export declare function writeSize(view: Window | null, size: ScreenSize): void;
+/** The canvas's own width, dragged to: whole pixels, no narrower than a phone; or none, the size's own. */
+export declare function readWidth(view: Window | null): number | null;
+export declare function writeWidth(view: Window | null, width: number | null): void;
+/**
+ * A group's columns on a size of screen, as the form lays them out there: a
+ * tablet's own count, or what the skin does by itself — the outlined skin
+ * keeps its columns, the underline skin stacks them; a phone's own, or one.
+ */
+export declare function columnsAt(columns: ColumnCount | ColumnsByWidth | undefined, size: ScreenSize, skin: string): number;
+export interface SizeSwitch {
+    element: HTMLElement;
+    /** The canvas's own width beside the switch, once it has one: "640 px". */
+    note: HTMLElement;
+    /** The size shown pressed, and the canvas's own width, or none. */
+    set(size: ScreenSize, width?: number | null): void;
+}
+/** Three buttons — a picture each, and its name where there is room — the one shown pressed; a note of the width dragged to. */
+export declare function sizeSwitch(el: ElementFactory, doc: Document, size: ScreenSize, change: (size: ScreenSize) => void, width?: number | null, words?: DesignerWords): SizeSwitch;