@fieldia/designer 0.0.0-stage → 0.11.0

package/src/lib/canvas-form.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formViews = formViews;
+const viewer_1 = require("@fieldia/viewer");
+const icons_1 = require("./icons");
+const saved_forms_1 = require("./saved-forms");
+const writes_1 = require("./writes");
+/** A page of one part, the saved form placed as this page places it: what the form draws, without the page's own conditions round it. */
+function placing(node, look, language) {
+    return {
+        fieldia: '0.1',
+        id: 'fieldia-designer-preview',
+        // In the page's language, as the form will draw it: the saved form's own words in it, where it keeps them.
+        ...(language ? { language } : {}),
+        data: { kind: 'responses' },
+        fields: {},
+        ...(look ? { look } : {}),
+        layout: {
+            type: 'sections',
+            id: 'preview',
+            children: [{ type: 'form', id: 'preview-part', page: node.page, name: node.name, ...(node.version === undefined ? {} : { version: node.version }), ...(node.title === undefined ? {} : { title: node.title }) }],
+        },
+    };
+}
+function formViews(options) {
+    const { el, doc, designer } = options;
+    const w = designer.words.savedForms;
+    const views = new Map();
+    /** A saved form inside the saved form, as the app's store has it: the viewer draws it too. */
+    const pages = (request) => {
+        if (!('id' in request))
+            return null;
+        const known = designer.savedForm(request.id, request.version);
+        if (known !== undefined)
+            return known?.page ?? null;
+        return designer.loadSavedForm(request.id).then(() => designer.savedForm(request.id, request.version)?.page ?? null);
+    };
+    function make(id) {
+        const tag = el('span', { class: 'fd-canvas-form-tag' });
+        const open = el('button', { type: 'button', class: 'fd-button fd-button-link fd-canvas-form-open' }, w.openIt);
+        const note = el('p', { class: 'fd-canvas-form-note' });
+        // Shown, never used: what is inside takes no focus and no click, so a click picks the saved form itself.
+        const body = el('div', { class: 'fd-canvas-form-body', inert: '' });
+        const head = el('div', { class: 'fd-canvas-form-head' }, (0, icons_1.designerIcon)(doc, 'saved-form'), tag, open);
+        const element = el('div', { class: 'fd-canvas-block fd-canvas-form', 'data-node': id }, head, note, body);
+        const view = { element, tag, open, note, body, viewer: null, drawn: null, pageId: '' };
+        open.addEventListener('click', () => designer.openForm(view.pageId));
+        return view;
+    }
+    function unmount(view) {
+        view.viewer?.destroy();
+        view.viewer = null;
+        view.drawn = null;
+    }
+    /** Inside the frame, the saved form's parts keep their own ids apart from the page's: the canvas finds the page's parts by theirs. */
+    function apart(view) {
+        for (const part of view.body.querySelectorAll('[data-node]')) {
+            part.setAttribute('data-saved-node', part.getAttribute('data-node'));
+            part.removeAttribute('data-node');
+        }
+    }
+    return {
+        draw(node, picked) {
+            let view = views.get(node.id);
+            if (!view)
+                views.set(node.id, (view = make(node.id)));
+            view.pageId = node.page;
+            const known = designer.savedForm(node.page, node.version);
+            const saved = known?.page ?? null;
+            // Its title as the form will show it: in the page's language, where the saved form keeps a translation.
+            const name = (0, saved_forms_1.shownTitle)(saved, designer.getPage().language) || node.page;
+            (0, writes_1.setText)(view.tag, w.tag(name, node.version));
+            view.open.title = w.openTitle(name);
+            (0, writes_1.setHidden)(view.open, !designer.canOpenForm());
+            view.element.classList.toggle('fd-canvas-selected', picked);
+            view.element.classList.toggle('fd-hidden-sometimes', node.invisible !== undefined);
+            if (node.colspan)
+                view.element.style.setProperty('--fd-span', String(node.colspan));
+            else
+                view.element.style.removeProperty('--fd-span');
+            const problem = known === undefined ? null : designer.checks().find((check) => check.at === node.id && check.severity === 'must');
+            const words = known === undefined ? w.loading(node.page) : problem ? problem.text : '';
+            (0, writes_1.setText)(view.note, words);
+            (0, writes_1.setHidden)(view.note, !words);
+            view.note.classList.toggle('fd-canvas-form-problem', !!problem);
+            if (!saved || problem) {
+                unmount(view);
+                view.body.replaceChildren();
+                return view.element;
+            }
+            // Drawn by the viewer, placed as the form places it — its card, its title, its fields — in this page's look.
+            const { look, language } = designer.getPage();
+            const key = JSON.stringify([node.page, node.version ?? null, node.title ?? null, look ?? null, language ?? null]);
+            if (view.drawn?.page !== saved || view.drawn.key !== key) {
+                unmount(view);
+                view.body.replaceChildren();
+                try {
+                    view.viewer = (0, viewer_1.mountViewer)(view.body, { page: placing(node, look, language), showActions: false, skin: (options.skin ?? 'outlined'), widgets: options.widgets, pages });
+                }
+                catch (error) {
+                    (0, writes_1.setText)(view.note, w.cannotShow(name, error.message.split('\n')[0]));
+                    (0, writes_1.setHidden)(view.note, false);
+                }
+                view.drawn = { page: saved, key };
+            }
+            apart(view);
+            return view.element;
+        },
+        keep(ids) {
+            for (const [id, view] of views) {
+                if (ids.has(id))
+                    continue;
+                unmount(view);
+                view.element.remove();
+                views.delete(id);
+            }
+        },
+        destroy() {
+            for (const view of views.values())
+                unmount(view);
+            views.clear();
+        },
+    };
+}
+//# sourceMappingURL=canvas-form.js.map

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

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

package/src/lib/canvas-form.mjs

@@ -0,0 +1,122 @@
+import { mountViewer } from '@fieldia/viewer';
+import { designerIcon } from './icons.mjs';
+import { shownTitle } from './saved-forms.mjs';
+import { setHidden, setText } from './writes.mjs';
+/** A page of one part, the saved form placed as this page places it: what the form draws, without the page's own conditions round it. */
+function placing(node, look, language) {
+    return {
+        fieldia: '0.1',
+        id: 'fieldia-designer-preview',
+        // In the page's language, as the form will draw it: the saved form's own words in it, where it keeps them.
+        ...(language ? { language } : {}),
+        data: { kind: 'responses' },
+        fields: {},
+        ...(look ? { look } : {}),
+        layout: {
+            type: 'sections',
+            id: 'preview',
+            children: [{ type: 'form', id: 'preview-part', page: node.page, name: node.name, ...(node.version === undefined ? {} : { version: node.version }), ...(node.title === undefined ? {} : { title: node.title }) }],
+        },
+    };
+}
+export function formViews(options) {
+    const { el, doc, designer } = options;
+    const w = designer.words.savedForms;
+    const views = new Map();
+    /** A saved form inside the saved form, as the app's store has it: the viewer draws it too. */
+    const pages = (request) => {
+        if (!('id' in request))
+            return null;
+        const known = designer.savedForm(request.id, request.version);
+        if (known !== undefined)
+            return known?.page ?? null;
+        return designer.loadSavedForm(request.id).then(() => designer.savedForm(request.id, request.version)?.page ?? null);
+    };
+    function make(id) {
+        const tag = el('span', { class: 'fd-canvas-form-tag' });
+        const open = el('button', { type: 'button', class: 'fd-button fd-button-link fd-canvas-form-open' }, w.openIt);
+        const note = el('p', { class: 'fd-canvas-form-note' });
+        // Shown, never used: what is inside takes no focus and no click, so a click picks the saved form itself.
+        const body = el('div', { class: 'fd-canvas-form-body', inert: '' });
+        const head = el('div', { class: 'fd-canvas-form-head' }, designerIcon(doc, 'saved-form'), tag, open);
+        const element = el('div', { class: 'fd-canvas-block fd-canvas-form', 'data-node': id }, head, note, body);
+        const view = { element, tag, open, note, body, viewer: null, drawn: null, pageId: '' };
+        open.addEventListener('click', () => designer.openForm(view.pageId));
+        return view;
+    }
+    function unmount(view) {
+        view.viewer?.destroy();
+        view.viewer = null;
+        view.drawn = null;
+    }
+    /** Inside the frame, the saved form's parts keep their own ids apart from the page's: the canvas finds the page's parts by theirs. */
+    function apart(view) {
+        for (const part of view.body.querySelectorAll('[data-node]')) {
+            part.setAttribute('data-saved-node', part.getAttribute('data-node'));
+            part.removeAttribute('data-node');
+        }
+    }
+    return {
+        draw(node, picked) {
+            let view = views.get(node.id);
+            if (!view)
+                views.set(node.id, (view = make(node.id)));
+            view.pageId = node.page;
+            const known = designer.savedForm(node.page, node.version);
+            const saved = known?.page ?? null;
+            // Its title as the form will show it: in the page's language, where the saved form keeps a translation.
+            const name = shownTitle(saved, designer.getPage().language) || node.page;
+            setText(view.tag, w.tag(name, node.version));
+            view.open.title = w.openTitle(name);
+            setHidden(view.open, !designer.canOpenForm());
+            view.element.classList.toggle('fd-canvas-selected', picked);
+            view.element.classList.toggle('fd-hidden-sometimes', node.invisible !== undefined);
+            if (node.colspan)
+                view.element.style.setProperty('--fd-span', String(node.colspan));
+            else
+                view.element.style.removeProperty('--fd-span');
+            const problem = known === undefined ? null : designer.checks().find((check) => check.at === node.id && check.severity === 'must');
+            const words = known === undefined ? w.loading(node.page) : problem ? problem.text : '';
+            setText(view.note, words);
+            setHidden(view.note, !words);
+            view.note.classList.toggle('fd-canvas-form-problem', !!problem);
+            if (!saved || problem) {
+                unmount(view);
+                view.body.replaceChildren();
+                return view.element;
+            }
+            // Drawn by the viewer, placed as the form places it — its card, its title, its fields — in this page's look.
+            const { look, language } = designer.getPage();
+            const key = JSON.stringify([node.page, node.version ?? null, node.title ?? null, look ?? null, language ?? null]);
+            if (view.drawn?.page !== saved || view.drawn.key !== key) {
+                unmount(view);
+                view.body.replaceChildren();
+                try {
+                    view.viewer = mountViewer(view.body, { page: placing(node, look, language), showActions: false, skin: (options.skin ?? 'outlined'), widgets: options.widgets, pages });
+                }
+                catch (error) {
+                    setText(view.note, w.cannotShow(name, error.message.split('\n')[0]));
+                    setHidden(view.note, false);
+                }
+                view.drawn = { page: saved, key };
+            }
+            apart(view);
+            return view.element;
+        },
+        keep(ids) {
+            for (const [id, view] of views) {
+                if (ids.has(id))
+                    continue;
+                unmount(view);
+                view.element.remove();
+                views.delete(id);
+            }
+        },
+        destroy() {
+            for (const view of views.values())
+                unmount(view);
+            views.clear();
+        },
+    };
+}
+//# sourceMappingURL=canvas-form.mjs.map

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

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

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

@@ -0,0 +1,24 @@
+import type { Designer, DesignerState } from './designer.mjs';
+/**
+ * The guides of the Advanced canvas, as the mockup draws them: the columns of
+ * the grid the picked part sits on — and of a picked group's own grid — as
+ * tinted bands under the parts, each numbered, so a part dropped or widened is
+ * seen to land on them. The bands are laid out by the grid's own column count
+ * and gap at the width it has now, so they are its columns, not a copy. A
+ * group in twelfths (and an arrangement on its columns) has more than four:
+ * they are drawn fainter, and not numbered.
+ */
+export interface CanvasGuides {
+    update(state: DesignerState, advanced: boolean): void;
+}
+/**
+ * The width of a cell parts share, side by side, at or under which the form
+ * puts them one under the other — its stylesheet's @container rule (a spec
+ * holds the two together). Kept here, not in the form's script, which has no
+ * use for it.
+ */
+export declare const SHARED_CELL_NARROW = 330;
+export declare function canvasGuides(options: {
+    root: HTMLElement;
+    designer: Designer;
+}): CanvasGuides;

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

@@ -0,0 +1,24 @@
+import type { Designer, DesignerState } from './designer';
+/**
+ * The guides of the Advanced canvas, as the mockup draws them: the columns of
+ * the grid the picked part sits on — and of a picked group's own grid — as
+ * tinted bands under the parts, each numbered, so a part dropped or widened is
+ * seen to land on them. The bands are laid out by the grid's own column count
+ * and gap at the width it has now, so they are its columns, not a copy. A
+ * group in twelfths (and an arrangement on its columns) has more than four:
+ * they are drawn fainter, and not numbered.
+ */
+export interface CanvasGuides {
+    update(state: DesignerState, advanced: boolean): void;
+}
+/**
+ * The width of a cell parts share, side by side, at or under which the form
+ * puts them one under the other — its stylesheet's @container rule (a spec
+ * holds the two together). Kept here, not in the form's script, which has no
+ * use for it.
+ */
+export declare const SHARED_CELL_NARROW = 330;
+export declare function canvasGuides(options: {
+    root: HTMLElement;
+    designer: Designer;
+}): CanvasGuides;

package/src/lib/canvas-guides.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHARED_CELL_NARROW = void 0;
+exports.canvasGuides = canvasGuides;
+const layout_tree_1 = require("./layout-tree");
+/**
+ * The width of a cell parts share, side by side, at or under which the form
+ * puts them one under the other — its stylesheet's @container rule (a spec
+ * holds the two together). Kept here, not in the form's script, which has no
+ * use for it.
+ */
+exports.SHARED_CELL_NARROW = 330;
+function canvasGuides(options) {
+    const { root, designer } = options;
+    const doc = root.ownerDocument;
+    /**
+     * Cells that parts share are one column where the browser reports them
+     * SHARED_CELL_NARROW wide or less, as the form's own rule has it: known from
+     * a ResizeObserver, which reports after the page is laid out, so nothing is
+     * measured while the canvas redraws. A cell crossing that width redraws the
+     * guides.
+     */
+    const narrowCells = new WeakMap();
+    const watched = new WeakSet();
+    let last = null;
+    const view = doc.defaultView;
+    const sized = view?.ResizeObserver
+        ? new view.ResizeObserver((entries) => {
+            let crossed = false;
+            for (const entry of entries) {
+                const narrow = entry.contentRect.width <= exports.SHARED_CELL_NARROW;
+                if (narrowCells.get(entry.target) !== narrow)
+                    crossed = true;
+                narrowCells.set(entry.target, narrow);
+            }
+            if (crossed && last)
+                update(last.state, last.advanced);
+        })
+        : null;
+    /**
+     * How many columns a grid has now, worked out as the stylesheet does —
+     * never by laying the page out to measure it: the columns the canvas gives
+     * it; on its grid's tracks, as many as its span covers of that grid's; in a
+     * shared cell, its own, or one where the cell is narrow; else as the page says.
+     */
+    function columns(grid) {
+        const given = Number(grid.style.getPropertyValue('--fd-cols'));
+        if (Number.isInteger(given) && given >= 1)
+            return given;
+        const part = grid.parentElement;
+        const place = part?.dataset['place'];
+        if (part && place === 'tracks') {
+            const outer = part.parentElement?.closest('[data-container]');
+            const span = Number(part.style.getPropertyValue('--fd-span')) || 1;
+            return Math.min(span, outer && outer !== root ? columns(outer) : 1);
+        }
+        if (part && place === 'shared') {
+            if (sized && !watched.has(part)) {
+                watched.add(part);
+                sized.observe(part);
+            }
+            return narrowCells.get(part) ? 1 : Number(grid.style.getPropertyValue('--fd-columns')) || 1;
+        }
+        const holder = (0, layout_tree_1.nodeOf)(designer.getPage(), grid.dataset['container']);
+        return holder ? (0, layout_tree_1.across)(designer.getPage(), holder) : 1;
+    }
+    function draw(grid) {
+        const count = columns(grid);
+        if (count < 2)
+            return;
+        const bands = doc.createElement('div');
+        bands.className = count > 4 ? 'fd-guides fd-guides-fine' : 'fd-guides';
+        bands.setAttribute('aria-hidden', 'true');
+        for (let n = 1; n <= count; n++) {
+            const band = doc.createElement('i');
+            if (count <= 4)
+                band.setAttribute('data-n', String(n));
+            bands.append(band);
+        }
+        grid.prepend(bands);
+    }
+    function update(state, advanced) {
+        last = { state, advanced };
+        for (const old of root.querySelectorAll('.fd-guides'))
+            old.remove();
+        const id = state.selected;
+        if (!advanced || !id || !(0, layout_tree_1.locate)(state.page, id))
+            return;
+        const part = root.querySelector(`[data-node="${id.replace(/["\\]/g, '\\$&')}"]:not([role="tab"])`);
+        if (!part)
+            return;
+        const around = part.parentElement?.closest('[data-container]');
+        const own = [...part.querySelectorAll('[data-container]')].find((g) => g.parentElement?.closest('[data-node]') === part);
+        for (const grid of [around, own])
+            if (grid && grid !== root)
+                draw(grid);
+    }
+    return { update };
+}
+//# sourceMappingURL=canvas-guides.js.map

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

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

package/src/lib/canvas-guides.mjs

@@ -0,0 +1,96 @@
+import { across, locate, nodeOf } from './layout-tree.mjs';
+/**
+ * The width of a cell parts share, side by side, at or under which the form
+ * puts them one under the other — its stylesheet's @container rule (a spec
+ * holds the two together). Kept here, not in the form's script, which has no
+ * use for it.
+ */
+export const SHARED_CELL_NARROW = 330;
+export function canvasGuides(options) {
+    const { root, designer } = options;
+    const doc = root.ownerDocument;
+    /**
+     * Cells that parts share are one column where the browser reports them
+     * SHARED_CELL_NARROW wide or less, as the form's own rule has it: known from
+     * a ResizeObserver, which reports after the page is laid out, so nothing is
+     * measured while the canvas redraws. A cell crossing that width redraws the
+     * guides.
+     */
+    const narrowCells = new WeakMap();
+    const watched = new WeakSet();
+    let last = null;
+    const view = doc.defaultView;
+    const sized = view?.ResizeObserver
+        ? new view.ResizeObserver((entries) => {
+            let crossed = false;
+            for (const entry of entries) {
+                const narrow = entry.contentRect.width <= SHARED_CELL_NARROW;
+                if (narrowCells.get(entry.target) !== narrow)
+                    crossed = true;
+                narrowCells.set(entry.target, narrow);
+            }
+            if (crossed && last)
+                update(last.state, last.advanced);
+        })
+        : null;
+    /**
+     * How many columns a grid has now, worked out as the stylesheet does —
+     * never by laying the page out to measure it: the columns the canvas gives
+     * it; on its grid's tracks, as many as its span covers of that grid's; in a
+     * shared cell, its own, or one where the cell is narrow; else as the page says.
+     */
+    function columns(grid) {
+        const given = Number(grid.style.getPropertyValue('--fd-cols'));
+        if (Number.isInteger(given) && given >= 1)
+            return given;
+        const part = grid.parentElement;
+        const place = part?.dataset['place'];
+        if (part && place === 'tracks') {
+            const outer = part.parentElement?.closest('[data-container]');
+            const span = Number(part.style.getPropertyValue('--fd-span')) || 1;
+            return Math.min(span, outer && outer !== root ? columns(outer) : 1);
+        }
+        if (part && place === 'shared') {
+            if (sized && !watched.has(part)) {
+                watched.add(part);
+                sized.observe(part);
+            }
+            return narrowCells.get(part) ? 1 : Number(grid.style.getPropertyValue('--fd-columns')) || 1;
+        }
+        const holder = nodeOf(designer.getPage(), grid.dataset['container']);
+        return holder ? across(designer.getPage(), holder) : 1;
+    }
+    function draw(grid) {
+        const count = columns(grid);
+        if (count < 2)
+            return;
+        const bands = doc.createElement('div');
+        bands.className = count > 4 ? 'fd-guides fd-guides-fine' : 'fd-guides';
+        bands.setAttribute('aria-hidden', 'true');
+        for (let n = 1; n <= count; n++) {
+            const band = doc.createElement('i');
+            if (count <= 4)
+                band.setAttribute('data-n', String(n));
+            bands.append(band);
+        }
+        grid.prepend(bands);
+    }
+    function update(state, advanced) {
+        last = { state, advanced };
+        for (const old of root.querySelectorAll('.fd-guides'))
+            old.remove();
+        const id = state.selected;
+        if (!advanced || !id || !locate(state.page, id))
+            return;
+        const part = root.querySelector(`[data-node="${id.replace(/["\\]/g, '\\$&')}"]:not([role="tab"])`);
+        if (!part)
+            return;
+        const around = part.parentElement?.closest('[data-container]');
+        const own = [...part.querySelectorAll('[data-container]')].find((g) => g.parentElement?.closest('[data-node]') === part);
+        for (const grid of [around, own])
+            if (grid && grid !== root)
+                draw(grid);
+    }
+    return { update };
+}
+//# sourceMappingURL=canvas-guides.mjs.map

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

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

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

@@ -0,0 +1,26 @@
+import type { Form, Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome.mjs';
+import type { Designer } from './designer.mjs';
+/**
+ * A record's header on the canvas, drawn the way the viewer draws it: the
+ * header's buttons and the status steps over the card, the counters and the
+ * badges on it. A part is picked by a click and its words typed where they
+ * stand, a small bar on it moving or taking it away; a quiet "Add …" after
+ * each kind adds one. The status steps are the real widget, from a field
+ * picked in a menu of the fields that can be steps.
+ */
+export interface CanvasHeader {
+    /** Over the card: the header's buttons and the status steps. */
+    top: HTMLElement;
+    /** On the card, over the title: the counters and the badges. */
+    card: HTMLElement;
+    update(page: Page, selected: string | null, form: () => Form): void;
+    /** Put the cursor in a part's words, every word selected. */
+    focus(id: string): void;
+    destroy(): void;
+}
+export declare function canvasHeader(options: {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+}): CanvasHeader;

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

@@ -0,0 +1,26 @@
+import type { Form, Page } from '@fieldia/core';
+import type { ElementFactory } from './chrome';
+import type { Designer } from './designer';
+/**
+ * A record's header on the canvas, drawn the way the viewer draws it: the
+ * header's buttons and the status steps over the card, the counters and the
+ * badges on it. A part is picked by a click and its words typed where they
+ * stand, a small bar on it moving or taking it away; a quiet "Add …" after
+ * each kind adds one. The status steps are the real widget, from a field
+ * picked in a menu of the fields that can be steps.
+ */
+export interface CanvasHeader {
+    /** Over the card: the header's buttons and the status steps. */
+    top: HTMLElement;
+    /** On the card, over the title: the counters and the badges. */
+    card: HTMLElement;
+    update(page: Page, selected: string | null, form: () => Form): void;
+    /** Put the cursor in a part's words, every word selected. */
+    focus(id: string): void;
+    destroy(): void;
+}
+export declare function canvasHeader(options: {
+    el: ElementFactory;
+    doc: Document;
+    designer: Designer;
+}): CanvasHeader;