@fieldia/designer 0.0.0-stage → 0.12.0

package/src/lib/layout-tree.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.andList = exports.rowsOf = exports.sharesOneCell = exports.across = exports.SPANNED = exports.spanOf = exports.isWrapper = exports.isSection = exports.locate = exports.listOf = void 0;
+exports.find = find;
+exports.nodeOf = nodeOf;
+exports.contains = contains;
+exports.setSpan = setSpan;
+exports.colsOf = colsOf;
+exports.inGrid = inGrid;
+exports.onTracks = onTracks;
+exports.isRow = isRow;
+exports.rowsIn = rowsIn;
+exports.nameOf = nameOf;
+exports.seenAs = seenAs;
+const core_1 = require("@fieldia/core");
+const en_1 = require("./locales/en");
+// ---- reading the page --------------------------------------------------------------------------------
+const listOf = (node) => {
+    const children = node?.children;
+    return Array.isArray(children) ? children : null;
+};
+exports.listOf = listOf;
+/** A part inside a holder, the list it is in, and its place there, however deep. */
+function find(holder, id) {
+    const list = (0, exports.listOf)(holder) ?? [];
+    for (let index = 0; index < list.length; index++) {
+        const node = list[index];
+        if (node.id === id)
+            return { node, parent: holder, list, index };
+        const deeper = find(node, id);
+        if (deeper)
+            return deeper;
+    }
+    return null;
+}
+/** A part, the list it is in, and its place there, wherever it sits on the page. */
+const locate = (page, id) => find(page.layout, id);
+exports.locate = locate;
+/** The part, or the page's own layout, by id. */
+function nodeOf(page, id) {
+    return page.layout.id === id ? page.layout : ((0, exports.locate)(page, id)?.node ?? null);
+}
+/** Whether `inner` is `outer` or sits somewhere inside it. */
+function contains(page, outer, inner) {
+    const node = nodeOf(page, outer);
+    return outer === inner || (!!node && !!find(node, inner));
+}
+const isSection = (node) => node?.type === 'section';
+exports.isSection = isSection;
+/** An arrangement: a section with no title in the plain style, there only to hold parts side by side or one under another. */
+const isWrapper = (node) => (0, exports.isSection)(node) && node.style === 'plain' && !node.title;
+exports.isWrapper = isWrapper;
+const spanOf = (node) => node.colspan ?? 1;
+exports.spanOf = spanOf;
+/** The parts that take a width; a divider runs across the whole row. */
+exports.SPANNED = new Set(['field', 'button', 'text', 'section', 'tabs', 'spacer', 'image', 'form']);
+/** Set how many columns a part spans; one is the default, and a part that spans nothing (a divider) is left as it is. */
+function setSpan(node, span) {
+    if (!exports.SPANNED.has(node.type))
+        return;
+    const own = node;
+    if (span <= 1)
+        delete own.colspan;
+    else
+        own.colspan = span;
+}
+/** The columns a section has: its own, or — an arrangement in a grid — the ones it covers there. */
+function colsOf(page, section) {
+    if (onTracks(page, section))
+        return Math.min((0, exports.spanOf)(section), colsOf(page, (0, exports.locate)(page, section.id)?.parent));
+    return (0, core_1.wideColumns)(section.columns);
+}
+/** How many places a list has across: a section's columns, or one for the page, a step and a tab. */
+const across = (page, holder) => ((0, exports.isSection)(holder) ? colsOf(page, holder) : 1);
+exports.across = across;
+/** Whether a part sits in a grid with columns (not on the page, in a tab or in one column). */
+function inGrid(page, node) {
+    const parent = (0, exports.locate)(page, node.id)?.parent;
+    return (0, exports.isSection)(parent) && colsOf(page, parent) > 1;
+}
+/** One column wide with columns of its own: parts sharing one cell, side by side. */
+const sharesOneCell = (section) => (0, exports.spanOf)(section) === 1 && (0, core_1.wideColumns)(section.columns) > 1;
+exports.sharesOneCell = sharesOneCell;
+/** An arrangement in a section with columns lays its parts on the columns it covers there. */
+function onTracks(page, section) {
+    if (!(0, exports.isWrapper)(section) || (0, exports.sharesOneCell)(section))
+        return false;
+    const parent = (0, exports.locate)(page, section.id)?.parent;
+    return (0, exports.isSection)(parent) && parent.columns !== undefined && colsOf(page, parent) > 1;
+}
+/** A row of parts on the page or in a tab: an arrangement with as many columns as parts. */
+function isRow(page, node) {
+    if (!(0, exports.isWrapper)(node) || inGrid(page, node) || onTracks(page, node))
+        return false;
+    const cols = colsOf(page, node);
+    return cols >= 2 && node.children.length === cols;
+}
+/**
+ * The rows a list's parts fall into, in reading order as the grid places them:
+ * a part too wide for what is left of a row starts the next. A divider is a
+ * line across the whole row.
+ */
+const rowsOf = (page, holder, skip) => rowsIn(holder.children, (0, exports.across)(page, holder), skip);
+exports.rowsOf = rowsOf;
+/** The rows of a list of parts on a grid of `cols` columns. */
+function rowsIn(list, cols, skip) {
+    const rows = [];
+    let row = [];
+    let used = 0;
+    for (const part of list) {
+        if (part.id === skip)
+            continue;
+        const span = part.type === 'divider' ? cols : Math.min((0, exports.spanOf)(part), cols);
+        if (used + span > cols && row.length) {
+            rows.push({ items: row, used });
+            row = [];
+            used = 0;
+        }
+        row.push(part);
+        used += span;
+    }
+    if (row.length)
+        rows.push({ items: row, used });
+    return rows;
+}
+// ---- names --------------------------------------------------------------------------------------------
+/** Long words cut short, at the end of a word where there is one near. */
+function shortened(text) {
+    const cut = text.slice(0, 33);
+    const end = cut.lastIndexOf(' ');
+    return end > 16 ? cut.slice(0, end) : text.slice(0, 32);
+}
+/** A part's name as a person reads it. */
+function nameOf(page, node, words = en_1.en) {
+    const w = words.parts;
+    if (!node)
+        return '';
+    if (node.id === page.layout.id)
+        return page.title || w.page;
+    const part = node;
+    switch (part.type) {
+        case 'field':
+            return part.label ?? page.fields[part.field]?.label ?? part.field;
+        case 'section': {
+            if (part.title)
+                return part.title;
+            // Named by how its parts fall: one under another, side by side, or in rows of so many.
+            const rows = (0, exports.rowsOf)(page, part);
+            const most = rows.reduce((n, r) => Math.max(n, r.items.length), 0);
+            return most < 2 ? w.column : rows.length > 1 ? w.columns(most) : w.sideBySide;
+        }
+        case 'tabs':
+            return w.tabs;
+        case 'tab':
+            return part.label;
+        case 'text':
+            return part.text.length > 34 ? `${shortened(part.text)}…` : part.text;
+        case 'button':
+            return part.label;
+        case 'image':
+            return part.alt || w.image;
+        case 'slot':
+            return part.name;
+        case 'form': {
+            if (part.title)
+                return part.title;
+            // A title with no letters to name its answers after (one in Arabic, say) left them the generic `form`: it is a saved form, the second one so on.
+            const generic = /^form(?:_(\d+))?$/.exec(part.name);
+            if (generic)
+                return words.savedForms.copy(generic[1] ? Number(generic[1]) : 1);
+            // Its answers' name as words: “Address 2”.
+            return `${part.name.charAt(0).toUpperCase()}${part.name.slice(1).replace(/_/g, ' ')}`;
+        }
+        default:
+            return part.type === 'divider' ? w.divider : w.spacer;
+    }
+}
+const andList = (words) => (words.length <= 2 ? words.join(' and ') : `${words.slice(0, -1).join(', ')} and ${words[words.length - 1]}`);
+exports.andList = andList;
+/** A part as people see it, quoted: an arrangement is named by what it holds. */
+function seenAs(page, node, words = en_1.en) {
+    if (!(0, exports.isWrapper)(node))
+        return words.parts.quote(nameOf(page, node, words));
+    return words.parts.and(node.children.map((c) => words.parts.quote(nameOf(page, c, words))));
+}
+//# sourceMappingURL=layout-tree.js.map

package/src/lib/layout-tree.js.map

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

package/src/lib/layout-tree.mjs

@@ -0,0 +1,163 @@
+import { wideColumns } from '@fieldia/core';
+import { en } from './locales/en/index.mjs';
+// ---- reading the page --------------------------------------------------------------------------------
+export const listOf = (node) => {
+    const children = node?.children;
+    return Array.isArray(children) ? children : null;
+};
+/** A part inside a holder, the list it is in, and its place there, however deep. */
+export function find(holder, id) {
+    const list = listOf(holder) ?? [];
+    for (let index = 0; index < list.length; index++) {
+        const node = list[index];
+        if (node.id === id)
+            return { node, parent: holder, list, index };
+        const deeper = find(node, id);
+        if (deeper)
+            return deeper;
+    }
+    return null;
+}
+/** A part, the list it is in, and its place there, wherever it sits on the page. */
+export const locate = (page, id) => find(page.layout, id);
+/** The part, or the page's own layout, by id. */
+export function nodeOf(page, id) {
+    return page.layout.id === id ? page.layout : (locate(page, id)?.node ?? null);
+}
+/** Whether `inner` is `outer` or sits somewhere inside it. */
+export function contains(page, outer, inner) {
+    const node = nodeOf(page, outer);
+    return outer === inner || (!!node && !!find(node, inner));
+}
+export const isSection = (node) => node?.type === 'section';
+/** An arrangement: a section with no title in the plain style, there only to hold parts side by side or one under another. */
+export const isWrapper = (node) => isSection(node) && node.style === 'plain' && !node.title;
+export const spanOf = (node) => node.colspan ?? 1;
+/** The parts that take a width; a divider runs across the whole row. */
+export const SPANNED = new Set(['field', 'button', 'text', 'section', 'tabs', 'spacer', 'image', 'form']);
+/** Set how many columns a part spans; one is the default, and a part that spans nothing (a divider) is left as it is. */
+export function setSpan(node, span) {
+    if (!SPANNED.has(node.type))
+        return;
+    const own = node;
+    if (span <= 1)
+        delete own.colspan;
+    else
+        own.colspan = span;
+}
+/** The columns a section has: its own, or — an arrangement in a grid — the ones it covers there. */
+export function colsOf(page, section) {
+    if (onTracks(page, section))
+        return Math.min(spanOf(section), colsOf(page, locate(page, section.id)?.parent));
+    return wideColumns(section.columns);
+}
+/** How many places a list has across: a section's columns, or one for the page, a step and a tab. */
+export const across = (page, holder) => (isSection(holder) ? colsOf(page, holder) : 1);
+/** Whether a part sits in a grid with columns (not on the page, in a tab or in one column). */
+export function inGrid(page, node) {
+    const parent = locate(page, node.id)?.parent;
+    return isSection(parent) && colsOf(page, parent) > 1;
+}
+/** One column wide with columns of its own: parts sharing one cell, side by side. */
+export const sharesOneCell = (section) => spanOf(section) === 1 && wideColumns(section.columns) > 1;
+/** An arrangement in a section with columns lays its parts on the columns it covers there. */
+export function onTracks(page, section) {
+    if (!isWrapper(section) || sharesOneCell(section))
+        return false;
+    const parent = locate(page, section.id)?.parent;
+    return isSection(parent) && parent.columns !== undefined && colsOf(page, parent) > 1;
+}
+/** A row of parts on the page or in a tab: an arrangement with as many columns as parts. */
+export function isRow(page, node) {
+    if (!isWrapper(node) || inGrid(page, node) || onTracks(page, node))
+        return false;
+    const cols = colsOf(page, node);
+    return cols >= 2 && node.children.length === cols;
+}
+/**
+ * The rows a list's parts fall into, in reading order as the grid places them:
+ * a part too wide for what is left of a row starts the next. A divider is a
+ * line across the whole row.
+ */
+export const rowsOf = (page, holder, skip) => rowsIn(holder.children, across(page, holder), skip);
+/** The rows of a list of parts on a grid of `cols` columns. */
+export function rowsIn(list, cols, skip) {
+    const rows = [];
+    let row = [];
+    let used = 0;
+    for (const part of list) {
+        if (part.id === skip)
+            continue;
+        const span = part.type === 'divider' ? cols : Math.min(spanOf(part), cols);
+        if (used + span > cols && row.length) {
+            rows.push({ items: row, used });
+            row = [];
+            used = 0;
+        }
+        row.push(part);
+        used += span;
+    }
+    if (row.length)
+        rows.push({ items: row, used });
+    return rows;
+}
+// ---- names --------------------------------------------------------------------------------------------
+/** Long words cut short, at the end of a word where there is one near. */
+function shortened(text) {
+    const cut = text.slice(0, 33);
+    const end = cut.lastIndexOf(' ');
+    return end > 16 ? cut.slice(0, end) : text.slice(0, 32);
+}
+/** A part's name as a person reads it. */
+export function nameOf(page, node, words = en) {
+    const w = words.parts;
+    if (!node)
+        return '';
+    if (node.id === page.layout.id)
+        return page.title || w.page;
+    const part = node;
+    switch (part.type) {
+        case 'field':
+            return part.label ?? page.fields[part.field]?.label ?? part.field;
+        case 'section': {
+            if (part.title)
+                return part.title;
+            // Named by how its parts fall: one under another, side by side, or in rows of so many.
+            const rows = rowsOf(page, part);
+            const most = rows.reduce((n, r) => Math.max(n, r.items.length), 0);
+            return most < 2 ? w.column : rows.length > 1 ? w.columns(most) : w.sideBySide;
+        }
+        case 'tabs':
+            return w.tabs;
+        case 'tab':
+            return part.label;
+        case 'text':
+            return part.text.length > 34 ? `${shortened(part.text)}…` : part.text;
+        case 'button':
+            return part.label;
+        case 'image':
+            return part.alt || w.image;
+        case 'slot':
+            return part.name;
+        case 'form': {
+            if (part.title)
+                return part.title;
+            // A title with no letters to name its answers after (one in Arabic, say) left them the generic `form`: it is a saved form, the second one so on.
+            const generic = /^form(?:_(\d+))?$/.exec(part.name);
+            if (generic)
+                return words.savedForms.copy(generic[1] ? Number(generic[1]) : 1);
+            // Its answers' name as words: “Address 2”.
+            return `${part.name.charAt(0).toUpperCase()}${part.name.slice(1).replace(/_/g, ' ')}`;
+        }
+        default:
+            return part.type === 'divider' ? w.divider : w.spacer;
+    }
+}
+export const andList = (words) => (words.length <= 2 ? words.join(' and ') : `${words.slice(0, -1).join(', ')} and ${words[words.length - 1]}`);
+/** A part as people see it, quoted: an arrangement is named by what it holds. */
+export function seenAs(page, node, words = en) {
+    if (!isWrapper(node))
+        return words.parts.quote(nameOf(page, node, words));
+    return words.parts.and(node.children.map((c) => words.parts.quote(nameOf(page, c, words))));
+}
+//# sourceMappingURL=layout-tree.mjs.map

package/src/lib/layout-tree.mjs.map

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

package/src/lib/layout-twelfths.d.mts

@@ -0,0 +1,101 @@
+import { type Page, type SectionNode } from '@fieldia/core';
+import type { DesignerWords } from './designer-words.mjs';
+import { type Holder, type Part } from './layout-tree.mjs';
+/**
+ * Groups in twelfths, as Bootstrap's and Vueform's rows divide, and as
+ * Grafloria's split board fits its panes: each row of a group divides twelve
+ * ways, its own way. A part dropped beside another re-divides only that row;
+ * a part leaving a row closes it up. A group keeps each row full — its parts
+ * sharing the width, a part alone taking all of it — or, saying `rows:
+ * 'gaps'`, lets a part keep its width when a neighbour leaves.
+ *
+ * A group of one to four columns is divided in twelfths the first time an
+ * Advanced gesture needs it (a drop beside one of its parts, a gutter or a
+ * width handle dragged), inside the same edit: each part as wide as it was,
+ * so nothing moves.
+ */
+export declare const TWELVE = 12;
+/** A group: a section with columns of its own — titled, or drawn — not an arrangement laying parts out. */
+export declare const isGroup: (node: unknown) => node is SectionNode;
+/** A group whose rows divide in twelfths. */
+export declare const inTwelfths: (node: unknown) => node is SectionNode;
+/** A group in twelfths, or one of one to four columns that a gesture divides in twelfths. */
+export declare const twelfthsAhead: (node: unknown) => node is SectionNode;
+/** Whether a group keeps each row full, the default, rather than leaving gaps. */
+export declare const keepsFull: (group: SectionNode) => boolean;
+/** Whether a holder lays its parts in twelfths: a group in twelfths, or an arrangement on one's columns. */
+export declare function laidInTwelfths(page: Page, holder: Holder | Part | null | undefined): boolean;
+/** Widths scaled to add up to `total`, in whole columns: the largest remainders round up, and each keeps one at least. */
+export declare function shares(spans: number[], total: number): number[];
+/** A part made `span` wide, from a grid of `from` columns onto one of `to`: an arrangement lays its own parts on its new columns. */
+export declare function resize(part: Part, span: number, from?: number, to?: number): void;
+/** Parts laid on `from` columns, laid on `to` instead: each row shared out as it was, as wide as it was. */
+export declare function relay(list: Part[], from: number, to: number): void;
+/** Parts of a row widened, or narrowed, to fill `total` of a group in twelfths together, as they shared it. */
+export declare function fill(row: Part[], total?: number): void;
+/** A group of one to four columns divided in twelfths: each part, and each arrangement's parts, as wide as it was. */
+export declare function toTwelfths(group: SectionNode): void;
+/**
+ * A new column inside a group, beside all its rows, as Grafloria splits a
+ * section's content: the rows go into an arrangement on half the group's
+ * tracks, keeping their shares there, and the part takes the other half.
+ * `from` is the columns the part had where it came from.
+ */
+export declare function columnInside(group: SectionNode, part: Part, after: boolean, id: string, from?: number): void;
+/** A group in twelfths on one to four columns again: each part as near as wide as it was. */
+export declare function fromTwelfths(group: SectionNode, cols: number): void;
+/**
+ * Where a part dropped beside `target` in a group goes, the group in twelfths
+ * (or about to be): along its own row, every width kept; into the room a row
+ * that leaves gaps has; else into the row, which divides equally — four to a
+ * row. `row` is the target's row without the part dropped.
+ */
+export type Beside = {
+    how: 'reorder' | 'divide';
+    row: Part[];
+} | {
+    how: 'room';
+    row: Part[];
+    span: number;
+} | {
+    how: 'refused';
+    why: 'rowHoldsFour';
+};
+export declare function besideIn(page: Page, group: SectionNode, target: Part, moving?: string): Beside;
+/** A drop beside a part in a group, in the words the chip says: "between “Customer” and “Visit date” — the row in thirds". */
+export declare function besideWords(page: Page, plan: Beside, target: Part, after: boolean, words?: DesignerWords): string;
+/** The width a part takes where it lands: in or out of twelfths, as wide a share of the row as it had; new in twelfths, the whole row; else no wider than there. */
+export declare function landingSpan(page: Page, part: Part, box: Holder, from?: {
+    cols: number;
+    twelfths: boolean;
+}): number;
+/**
+ * Put parts in a list at a place, each as wide as `width` says. In a group
+ * that keeps its rows full, each is a row of its own, and a row they land in
+ * the middle of closes up either side of them.
+ */
+export declare function putAt(page: Page, holder: Holder, index: number, parts: Part[], width: (part: Part) => number, from?: (part: Part) => number | undefined): void;
+/** The fractions of a row a part in twelfths is offered: in twelfths, as a short word, its label, and its name in a menu. */
+export declare const ROW_PARTS: {
+    span: number;
+    words: string;
+    label: string;
+    name: string;
+}[];
+/** The same fractions, in the designer's words. */
+export declare function rowParts(words: DesignerWords): {
+    span: number;
+    words: string;
+    label: string;
+    name: string;
+}[];
+/** A part's width as a share of a row of `cols` columns, in words: "half the row", "58% of the row". */
+export declare function rowShare(span: number, cols?: number, words?: DesignerWords): string;
+/** A width as a whole percentage of a row. */
+export declare const percent: (span: number, cols?: number) => number;
+/**
+ * The widths a part in a group that keeps its rows full can take: the whole
+ * row (the rest of it then a row of their own), or what leaves the rest of
+ * its row a twelfth each. A part alone in its row takes all of it.
+ */
+export declare function widthsFor(page: Page, group: SectionNode, part: Part): (span: number) => boolean;

package/src/lib/layout-twelfths.d.ts

@@ -0,0 +1,101 @@
+import { type Page, type SectionNode } from '@fieldia/core';
+import type { DesignerWords } from './designer-words';
+import { type Holder, type Part } from './layout-tree';
+/**
+ * Groups in twelfths, as Bootstrap's and Vueform's rows divide, and as
+ * Grafloria's split board fits its panes: each row of a group divides twelve
+ * ways, its own way. A part dropped beside another re-divides only that row;
+ * a part leaving a row closes it up. A group keeps each row full — its parts
+ * sharing the width, a part alone taking all of it — or, saying `rows:
+ * 'gaps'`, lets a part keep its width when a neighbour leaves.
+ *
+ * A group of one to four columns is divided in twelfths the first time an
+ * Advanced gesture needs it (a drop beside one of its parts, a gutter or a
+ * width handle dragged), inside the same edit: each part as wide as it was,
+ * so nothing moves.
+ */
+export declare const TWELVE = 12;
+/** A group: a section with columns of its own — titled, or drawn — not an arrangement laying parts out. */
+export declare const isGroup: (node: unknown) => node is SectionNode;
+/** A group whose rows divide in twelfths. */
+export declare const inTwelfths: (node: unknown) => node is SectionNode;
+/** A group in twelfths, or one of one to four columns that a gesture divides in twelfths. */
+export declare const twelfthsAhead: (node: unknown) => node is SectionNode;
+/** Whether a group keeps each row full, the default, rather than leaving gaps. */
+export declare const keepsFull: (group: SectionNode) => boolean;
+/** Whether a holder lays its parts in twelfths: a group in twelfths, or an arrangement on one's columns. */
+export declare function laidInTwelfths(page: Page, holder: Holder | Part | null | undefined): boolean;
+/** Widths scaled to add up to `total`, in whole columns: the largest remainders round up, and each keeps one at least. */
+export declare function shares(spans: number[], total: number): number[];
+/** A part made `span` wide, from a grid of `from` columns onto one of `to`: an arrangement lays its own parts on its new columns. */
+export declare function resize(part: Part, span: number, from?: number, to?: number): void;
+/** Parts laid on `from` columns, laid on `to` instead: each row shared out as it was, as wide as it was. */
+export declare function relay(list: Part[], from: number, to: number): void;
+/** Parts of a row widened, or narrowed, to fill `total` of a group in twelfths together, as they shared it. */
+export declare function fill(row: Part[], total?: number): void;
+/** A group of one to four columns divided in twelfths: each part, and each arrangement's parts, as wide as it was. */
+export declare function toTwelfths(group: SectionNode): void;
+/**
+ * A new column inside a group, beside all its rows, as Grafloria splits a
+ * section's content: the rows go into an arrangement on half the group's
+ * tracks, keeping their shares there, and the part takes the other half.
+ * `from` is the columns the part had where it came from.
+ */
+export declare function columnInside(group: SectionNode, part: Part, after: boolean, id: string, from?: number): void;
+/** A group in twelfths on one to four columns again: each part as near as wide as it was. */
+export declare function fromTwelfths(group: SectionNode, cols: number): void;
+/**
+ * Where a part dropped beside `target` in a group goes, the group in twelfths
+ * (or about to be): along its own row, every width kept; into the room a row
+ * that leaves gaps has; else into the row, which divides equally — four to a
+ * row. `row` is the target's row without the part dropped.
+ */
+export type Beside = {
+    how: 'reorder' | 'divide';
+    row: Part[];
+} | {
+    how: 'room';
+    row: Part[];
+    span: number;
+} | {
+    how: 'refused';
+    why: 'rowHoldsFour';
+};
+export declare function besideIn(page: Page, group: SectionNode, target: Part, moving?: string): Beside;
+/** A drop beside a part in a group, in the words the chip says: "between “Customer” and “Visit date” — the row in thirds". */
+export declare function besideWords(page: Page, plan: Beside, target: Part, after: boolean, words?: DesignerWords): string;
+/** The width a part takes where it lands: in or out of twelfths, as wide a share of the row as it had; new in twelfths, the whole row; else no wider than there. */
+export declare function landingSpan(page: Page, part: Part, box: Holder, from?: {
+    cols: number;
+    twelfths: boolean;
+}): number;
+/**
+ * Put parts in a list at a place, each as wide as `width` says. In a group
+ * that keeps its rows full, each is a row of its own, and a row they land in
+ * the middle of closes up either side of them.
+ */
+export declare function putAt(page: Page, holder: Holder, index: number, parts: Part[], width: (part: Part) => number, from?: (part: Part) => number | undefined): void;
+/** The fractions of a row a part in twelfths is offered: in twelfths, as a short word, its label, and its name in a menu. */
+export declare const ROW_PARTS: {
+    span: number;
+    words: string;
+    label: string;
+    name: string;
+}[];
+/** The same fractions, in the designer's words. */
+export declare function rowParts(words: DesignerWords): {
+    span: number;
+    words: string;
+    label: string;
+    name: string;
+}[];
+/** A part's width as a share of a row of `cols` columns, in words: "half the row", "58% of the row". */
+export declare function rowShare(span: number, cols?: number, words?: DesignerWords): string;
+/** A width as a whole percentage of a row. */
+export declare const percent: (span: number, cols?: number) => number;
+/**
+ * The widths a part in a group that keeps its rows full can take: the whole
+ * row (the rest of it then a row of their own), or what leaves the rest of
+ * its row a twelfth each. A part alone in its row takes all of it.
+ */
+export declare function widthsFor(page: Page, group: SectionNode, part: Part): (span: number) => boolean;