@fieldia/designer 0.0.0-stage → 0.11.0

package/src/lib/styles-canvas.js

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DESIGNER_CANVAS_CSS = void 0;
+/**
+ * The Advanced canvas's own styles: what keeps the canvas drawing each part
+ * where the form puts it, and the marks of Advanced — the drop line and the
+ * group tinted under it, the chip that says where, the width handle and the
+ * gutter between two parts, the guides of a grid's columns, the bar for
+ * several picked, the handle the canvas's own width is dragged by, and the
+ * note Simple mode shows on an arrangement.
+ *
+ * Logical properties throughout, so right to left mirrors on its own.
+ */
+exports.DESIGNER_CANVAS_CSS = `
+/* ---- the canvas draws each part where the form puts it ---- */
+/* The page's own parts, the same room between them as the form leaves. */
+.fd-canvas-body.fd-sections { gap: var(--fd-gap-block, 24px); }
+/* A field's widget sits in the field as the form puts it, nothing drawn round it to take room. */
+.fd-canvas-widget:not([hidden]) { display: contents; }
+
+/* ---- Simple and Advanced ---- */
+/* Simple keeps an arrangement as Advanced laid it out, and says so on its top edge, where it is seen as it is picked. */
+.fd-simple-lock {
+  position: absolute; z-index: 8; inset-inline-end: 0; inset-block-start: 0; translate: 0 -50%; width: max-content; max-width: min(420px, 100%);
+  display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--fd-border-strong); border-radius: 8px;
+  background: var(--fd-surface); color: var(--fd-muted); font-size: 13px; line-height: 1.45; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
+}
+.fd-simple-lock[hidden] { display: none; }
+.fd-simple-lock > .fd-button { justify-self: start; }
+
+/* ---- Advanced: where a carried part would go ---- */
+/* The marks are drawn in the canvas, placed against it, so they wear its colours; none takes the pointer. */
+.fd-canvas { position: relative; }
+.fd-canvas > :is(.fd-drop-bar, .fd-drop-zone, .fd-drop-chip) { position: absolute; pointer-events: none; }
+/* The line where it would go: beside a part, under it, or across a grid between its rows. */
+.fd-drop-bar { z-index: 30; background: var(--fd-accent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 25%, transparent); }
+/* A whole group as the target: tinted, never outlined. */
+.fd-drop-zone { z-index: 29; background: color-mix(in srgb, var(--fd-accent) 7%, transparent); border-radius: 10px; }
+/* The chip by the pointer: what is carried, and where it would go — or why not. */
+.fd-drop-chip {
+  z-index: 31; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; width: max-content; max-width: 300px;
+  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-accent); border-radius: 7px; padding: 5px 9px;
+  font-size: 12.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
+}
+.fd-drop-where { flex-basis: 100%; font-weight: 500; font-size: 11.5px; color: var(--fd-muted); }
+.fd-drop-chip.fd-drop-refused { border-color: var(--fd-error); }
+.fd-drop-chip.fd-drop-refused .fd-drop-where { color: var(--fd-error); }
+/* What is carried stays where it is, dimmed, until it is let go. */
+.fd-drag-carried { opacity: 0.35; }
+
+/* ---- Advanced: widths ---- */
+/* A picked part's width handle on its end edge: dragged, it snaps to the columns. */
+.fd-width-handle {
+  position: absolute; z-index: 9; width: 8px; height: 30px; border-radius: 4px; background: var(--fd-surface);
+  box-shadow: 0 0 0 1.5px var(--fd-accent), 0 1px 3px rgba(15, 23, 42, 0.2); cursor: ew-resize; touch-action: none;
+}
+.fd-width-handle::after { content: ""; position: absolute; inset: 9px 3px; border-inline: 1px solid var(--fd-accent); }
+/* The gutter between two parts of a row: a slim line in the gap, dragged or moved with the arrow keys to trade columns. */
+/* 24px wide, a target a finger can hit (WCAG 2.5.8); the line drawn down its middle. */
+.fd-gutter { position: absolute; z-index: 9; width: 24px; cursor: col-resize; touch-action: none; border-radius: 6px; }
+/* While a part is carried, what floats over the parts lets the pointer through: a drop at a picked part's edge goes beside it, not onto its handle. */
+.fd-canvas.fd-dragging :is(.fd-width-handle, .fd-gutter, .fd-field-bar, .fd-canvas-resize) { pointer-events: none; }
+.fd-gutter::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 11px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--fd-accent) 55%, transparent); }
+.fd-gutter:hover::before, .fd-gutter:focus-visible::before { inset-inline-start: 10px; width: 4px; background: var(--fd-accent); }
+.fd-gutter:focus-visible { outline: none; }
+.fd-width-handle[hidden], .fd-gutter[hidden] { display: none; }
+/* How many columns, while the edge or the gutter is dragged. */
+.fd-width-chip {
+  position: absolute; z-index: 32; pointer-events: none; background: var(--fd-text); color: var(--fd-surface);
+  font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px; white-space: nowrap;
+}
+
+/* ---- Advanced: several picked ---- */
+/* Each picked part tinted, with the room round it, as the field being edited is; a block picked alone too. */
+.fd-canvas :is(.fd-canvas-picked:not(.fd-editing):not(.fd-canvas-selected), .fd-canvas-block.fd-canvas-selected) {
+  background: color-mix(in srgb, var(--fd-accent) 9%, transparent); border-radius: 6px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--fd-accent) 9%, transparent);
+}
+/* An arrangement picked: softly tinted, with the room round it, as the mockup marks a plain group. */
+.fd-canvas .fd-canvas-arrangement.fd-canvas-selected { background: color-mix(in srgb, var(--fd-accent) 4%, transparent); border-radius: 6px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--fd-accent) 4%, transparent); }
+/* The bar at the top of the canvas as it scrolls, under the designer's own bar as the rails are, taking no room. */
+.fd-multi-dock { position: sticky; top: var(--fd-bar-room, 76px); z-index: 40; height: 0; display: flex; justify-content: center; align-items: flex-start; }
+.fd-multi {
+  display: flex; align-items: center; gap: 4px; margin-block-start: -12px; padding: 5px 6px 5px 12px; max-width: calc(100% - 24px); overflow-x: auto;
+  background: var(--fd-text); color: var(--fd-surface); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25); font-size: 13px; white-space: nowrap;
+}
+.fd-multi[hidden] { display: none; }
+.fd-multi-count { margin-inline-end: 6px; }
+.fd-multi-button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 9px; border-radius: 7px; cursor: pointer; }
+.fd-multi-button:hover { background: rgba(127, 127, 127, 0.28); }
+.fd-multi-button:focus-visible { outline: 2px solid var(--fd-surface); outline-offset: 1px; }
+.fd-multi-button[hidden] { display: none; }
+.fd-multi-down > svg { rotate: 45deg; }
+.fd-multi-why { opacity: 0.75; font-size: 12px; padding-inline: 6px; }
+.fd-multi-why[hidden] { display: none; }
+
+/* ---- Advanced: the keyboard ---- */
+/* What a key just did, said to a screen reader and not shown. */
+.fd-canvas-said { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/* The keys, behind a small "?" at the stage's end. */
+.fd-canvas-help { position: relative; z-index: 35; margin-inline-start: auto; }
+.fd-canvas-help-button {
+  all: unset; box-sizing: border-box; display: grid; place-items: center; width: 22px; height: 22px; margin-inline-start: auto; border-radius: 50%;
+  color: var(--fd-muted); font-size: 12px; font-weight: 700; cursor: pointer; background: var(--fd-page);
+}
+/* Filled, not ringed: a ring so near the canvas's own border would read as a box in a box. */
+.fd-canvas-help-button:hover, .fd-canvas-help-button[aria-expanded="true"] { color: var(--fd-text); background: color-mix(in srgb, var(--fd-text) 10%, var(--fd-page)); }
+.fd-canvas-help-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-canvas-keys {
+  position: absolute; inset-inline-end: 0; inset-block-start: 28px; width: max-content; max-width: min(420px, 80vw); margin: 0; padding: 10px 12px;
+  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;
+  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16); font-size: 12.5px;
+}
+.fd-canvas-keys[hidden] { display: none; }
+.fd-canvas-keys dt { font-weight: 650; white-space: nowrap; }
+.fd-canvas-keys dd { margin: 0; color: var(--fd-muted); }
+
+/* ---- Advanced: the guides ---- */
+/* The columns of the grid a picked part sits on: tinted bands under the parts, laid out as the grid's own columns, numbered. */
+.fd-canvas .fd-grid:has(> .fd-guides) { position: relative; }
+.fd-canvas .fd-grid:has(> .fd-guides) > [data-node] { position: relative; z-index: 1; }
+.fd-guides {
+  position: absolute; inset: 0; z-index: 0; pointer-events: none; display: grid;
+  grid-template-columns: repeat(var(--fd-cols, 1), minmax(0, 1fr)); column-gap: var(--fd-gap-x);
+}
+.fd-guides > i { position: relative; border-radius: 4px; background: color-mix(in srgb, var(--fd-accent) 7%, transparent); }
+/* Twelfths: twelve thin tracks, fainter, with no numbers. */
+.fd-guides-fine > i { border-radius: 2px; background: color-mix(in srgb, var(--fd-accent) 4.5%, transparent); }
+.fd-guides > i::after {
+  content: attr(data-n); position: absolute; inset-block-start: -15px; inset-inline-start: 50%; translate: -50% 0;
+  font: 600 10px/1 system-ui, sans-serif; font-style: normal; color: color-mix(in srgb, var(--fd-accent) 70%, var(--fd-muted));
+}
+
+/* ---- Advanced: the stage — the size of screen shown, and the keys ---- */
+/* Room under the screen sizes for the bar of a field picked in the first group's first row, lifted over the group's name. */
+.fd-canvas-stage { display: flex; align-items: center; gap: 8px; margin-block-end: 16px; }
+.fd-canvas:not([data-mode="advanced"]) > .fd-canvas-stage { display: none; }
+.fd-canvas-sizes { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fd-page); border: 1px solid var(--fd-border); }
+.fd-canvas-size {
+  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px;
+  font-size: 12.5px; font-weight: 600; color: var(--fd-muted); cursor: pointer;
+}
+.fd-canvas-size[aria-pressed="true"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }
+.fd-canvas-size:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+/* Pictures only where the canvas has no room for their names. */
+@container (max-width: 520px) { .fd-canvas-size-name { display: none; } }
+/* On a tablet or a phone, the canvas is as wide as one. */
+.fd-canvas[data-size="tablet"] { width: 100%; max-width: 768px; margin-inline: auto; }
+.fd-canvas[data-size="phone"] { width: 100%; max-width: 390px; margin-inline: auto; }
+
+/* ---- Advanced: a width of the canvas's own ---- */
+/* Dragged or keyed to: as wide as that, never wider than the stage, in its middle as a tablet's is. */
+.fd-canvas[data-mode="advanced"][data-width] { width: var(--fd-canvas-width); max-width: 100%; margin-inline: auto; }
+/* The width beside the switch, once the canvas has one of its own. */
+/* Its words, and the chip's, run the way they are written — "640 px" stays so on a right-to-left page. */
+.fd-canvas-size-px { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; unicode-bidi: plaintext; }
+.fd-canvas-size-px[hidden] { display: none; }
+/* The handle: the canvas's whole end edge takes the pointer, 24px wide (WCAG 2.5.8), inside the canvas so the page is never
+   wider for it; its grip stays in the middle of what is in view. */
+.fd-screen-designer { container-name: fd-designer; }
+.fd-canvas-resize { position: absolute; z-index: 4; inset-block: 0; inset-inline-end: 0; width: 24px; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
+.fd-canvas:not([data-mode="advanced"]) > .fd-canvas-resize { display: none; }
+/* A designer narrower than a tablet shows the canvas as wide as it is: no handle, and no width of its own to note. */
+@container fd-designer (max-width: 767px) { .fd-canvas-resize, .fd-canvas-size-px { display: none; } }
+.fd-canvas-resize:focus-visible { outline: none; }
+/* The edge itself, drawn over the canvas's border while the handle is pointed at, focused or dragged. */
+.fd-canvas-resize::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: -1px; width: 2px; background: transparent; transition: background 120ms; }
+.fd-canvas-resize:is(:hover, :focus-visible, [data-active])::before { background: var(--fd-accent); }
+.fd-canvas-resize-grip {
+  position: sticky; top: calc(50vh - 20px); display: block; width: 8px; height: 40px; margin-inline: auto 3px; border-radius: 4px;
+  background: var(--fd-surface); box-shadow: 0 0 0 1.5px var(--fd-border-strong), 0 1px 3px rgba(15, 23, 42, 0.16);
+}
+.fd-canvas-resize-grip::after { content: ""; position: absolute; inset: 13px 2px; border-inline: 1px solid var(--fd-muted); }
+.fd-canvas-resize:is(:hover, :focus-visible, [data-active]) .fd-canvas-resize-grip { box-shadow: 0 0 0 1.5px var(--fd-accent), 0 1px 3px rgba(15, 23, 42, 0.2); }
+.fd-canvas-resize:is(:hover, :focus-visible, [data-active]) .fd-canvas-resize-grip::after { border-color: var(--fd-accent); }
+.fd-canvas-resize:focus-visible .fd-canvas-resize-grip { outline: 2px solid var(--fd-focus); outline-offset: 3px; }
+/* The width and the size the form takes it for, beside the grip while it moves. */
+.fd-canvas-resize-chip {
+  position: absolute; inset-inline-end: calc(100% + 10px); top: 50%; translate: 0 -50%; display: none; pointer-events: none;
+  background: var(--fd-text); color: var(--fd-surface); font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px;
+  white-space: nowrap; font-variant-numeric: tabular-nums; unicode-bidi: plaintext;
+}
+.fd-canvas-resize[data-active] .fd-canvas-resize-chip { display: block; }
+@media (prefers-reduced-motion: reduce) { .fd-canvas-resize::before { transition: none; } }
+
+/* ---- a saved form placed in the page: the form as it will be drawn, in a frame with its words and “Open it” ---- */
+.fd-canvas-form { display: grid; gap: 10px; min-width: 0; padding: 12px 14px 14px; border: 1px dashed var(--fd-border-strong); border-radius: 10px; }
+.fd-canvas-form-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.fd-canvas-form-head > .fd-dicon { flex: none; width: 18px; height: 18px; color: var(--fd-muted); }
+.fd-canvas-form-tag { flex: 1 1 auto; min-width: 0; color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }
+/* Picked, on the picked part's tint: the muted words would fall short of 4.5:1, so they take the text's colour. */
+.fd-canvas-form.fd-canvas-selected .fd-canvas-form-tag { color: var(--fd-text); }
+.fd-canvas-form-open { flex: none; }
+.fd-canvas-form-note { margin: 0; color: var(--fd-muted); }
+.fd-canvas-form-note.fd-canvas-form-problem { color: var(--fd-error); }
+/* Shown, never used: what is inside is inert, and takes no pointer either. */
+.fd-canvas-form-body { min-width: 0; pointer-events: none; }
+.fd-canvas-form-body:empty { display: none; }
+`;
+//# sourceMappingURL=styles-canvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles-canvas.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles-canvas.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;GASG;AACU,QAAA,mBAAmB,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwL5C,CAAC"}

package/src/lib/styles-canvas.mjs

@@ -0,0 +1,196 @@
+/**
+ * The Advanced canvas's own styles: what keeps the canvas drawing each part
+ * where the form puts it, and the marks of Advanced — the drop line and the
+ * group tinted under it, the chip that says where, the width handle and the
+ * gutter between two parts, the guides of a grid's columns, the bar for
+ * several picked, the handle the canvas's own width is dragged by, and the
+ * note Simple mode shows on an arrangement.
+ *
+ * Logical properties throughout, so right to left mirrors on its own.
+ */
+export const DESIGNER_CANVAS_CSS = /* css */ `
+/* ---- the canvas draws each part where the form puts it ---- */
+/* The page's own parts, the same room between them as the form leaves. */
+.fd-canvas-body.fd-sections { gap: var(--fd-gap-block, 24px); }
+/* A field's widget sits in the field as the form puts it, nothing drawn round it to take room. */
+.fd-canvas-widget:not([hidden]) { display: contents; }
+
+/* ---- Simple and Advanced ---- */
+/* Simple keeps an arrangement as Advanced laid it out, and says so on its top edge, where it is seen as it is picked. */
+.fd-simple-lock {
+  position: absolute; z-index: 8; inset-inline-end: 0; inset-block-start: 0; translate: 0 -50%; width: max-content; max-width: min(420px, 100%);
+  display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed var(--fd-border-strong); border-radius: 8px;
+  background: var(--fd-surface); color: var(--fd-muted); font-size: 13px; line-height: 1.45; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
+}
+.fd-simple-lock[hidden] { display: none; }
+.fd-simple-lock > .fd-button { justify-self: start; }
+
+/* ---- Advanced: where a carried part would go ---- */
+/* The marks are drawn in the canvas, placed against it, so they wear its colours; none takes the pointer. */
+.fd-canvas { position: relative; }
+.fd-canvas > :is(.fd-drop-bar, .fd-drop-zone, .fd-drop-chip) { position: absolute; pointer-events: none; }
+/* The line where it would go: beside a part, under it, or across a grid between its rows. */
+.fd-drop-bar { z-index: 30; background: var(--fd-accent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-accent) 25%, transparent); }
+/* A whole group as the target: tinted, never outlined. */
+.fd-drop-zone { z-index: 29; background: color-mix(in srgb, var(--fd-accent) 7%, transparent); border-radius: 10px; }
+/* The chip by the pointer: what is carried, and where it would go — or why not. */
+.fd-drop-chip {
+  z-index: 31; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; width: max-content; max-width: 300px;
+  background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-accent); border-radius: 7px; padding: 5px 9px;
+  font-size: 12.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
+}
+.fd-drop-where { flex-basis: 100%; font-weight: 500; font-size: 11.5px; color: var(--fd-muted); }
+.fd-drop-chip.fd-drop-refused { border-color: var(--fd-error); }
+.fd-drop-chip.fd-drop-refused .fd-drop-where { color: var(--fd-error); }
+/* What is carried stays where it is, dimmed, until it is let go. */
+.fd-drag-carried { opacity: 0.35; }
+
+/* ---- Advanced: widths ---- */
+/* A picked part's width handle on its end edge: dragged, it snaps to the columns. */
+.fd-width-handle {
+  position: absolute; z-index: 9; width: 8px; height: 30px; border-radius: 4px; background: var(--fd-surface);
+  box-shadow: 0 0 0 1.5px var(--fd-accent), 0 1px 3px rgba(15, 23, 42, 0.2); cursor: ew-resize; touch-action: none;
+}
+.fd-width-handle::after { content: ""; position: absolute; inset: 9px 3px; border-inline: 1px solid var(--fd-accent); }
+/* The gutter between two parts of a row: a slim line in the gap, dragged or moved with the arrow keys to trade columns. */
+/* 24px wide, a target a finger can hit (WCAG 2.5.8); the line drawn down its middle. */
+.fd-gutter { position: absolute; z-index: 9; width: 24px; cursor: col-resize; touch-action: none; border-radius: 6px; }
+/* While a part is carried, what floats over the parts lets the pointer through: a drop at a picked part's edge goes beside it, not onto its handle. */
+.fd-canvas.fd-dragging :is(.fd-width-handle, .fd-gutter, .fd-field-bar, .fd-canvas-resize) { pointer-events: none; }
+.fd-gutter::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 11px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--fd-accent) 55%, transparent); }
+.fd-gutter:hover::before, .fd-gutter:focus-visible::before { inset-inline-start: 10px; width: 4px; background: var(--fd-accent); }
+.fd-gutter:focus-visible { outline: none; }
+.fd-width-handle[hidden], .fd-gutter[hidden] { display: none; }
+/* How many columns, while the edge or the gutter is dragged. */
+.fd-width-chip {
+  position: absolute; z-index: 32; pointer-events: none; background: var(--fd-text); color: var(--fd-surface);
+  font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px; white-space: nowrap;
+}
+
+/* ---- Advanced: several picked ---- */
+/* Each picked part tinted, with the room round it, as the field being edited is; a block picked alone too. */
+.fd-canvas :is(.fd-canvas-picked:not(.fd-editing):not(.fd-canvas-selected), .fd-canvas-block.fd-canvas-selected) {
+  background: color-mix(in srgb, var(--fd-accent) 9%, transparent); border-radius: 6px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--fd-accent) 9%, transparent);
+}
+/* An arrangement picked: softly tinted, with the room round it, as the mockup marks a plain group. */
+.fd-canvas .fd-canvas-arrangement.fd-canvas-selected { background: color-mix(in srgb, var(--fd-accent) 4%, transparent); border-radius: 6px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--fd-accent) 4%, transparent); }
+/* The bar at the top of the canvas as it scrolls, under the designer's own bar as the rails are, taking no room. */
+.fd-multi-dock { position: sticky; top: var(--fd-bar-room, 76px); z-index: 40; height: 0; display: flex; justify-content: center; align-items: flex-start; }
+.fd-multi {
+  display: flex; align-items: center; gap: 4px; margin-block-start: -12px; padding: 5px 6px 5px 12px; max-width: calc(100% - 24px); overflow-x: auto;
+  background: var(--fd-text); color: var(--fd-surface); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25); font-size: 13px; white-space: nowrap;
+}
+.fd-multi[hidden] { display: none; }
+.fd-multi-count { margin-inline-end: 6px; }
+.fd-multi-button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 9px; border-radius: 7px; cursor: pointer; }
+.fd-multi-button:hover { background: rgba(127, 127, 127, 0.28); }
+.fd-multi-button:focus-visible { outline: 2px solid var(--fd-surface); outline-offset: 1px; }
+.fd-multi-button[hidden] { display: none; }
+.fd-multi-down > svg { rotate: 45deg; }
+.fd-multi-why { opacity: 0.75; font-size: 12px; padding-inline: 6px; }
+.fd-multi-why[hidden] { display: none; }
+
+/* ---- Advanced: the keyboard ---- */
+/* What a key just did, said to a screen reader and not shown. */
+.fd-canvas-said { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+/* The keys, behind a small "?" at the stage's end. */
+.fd-canvas-help { position: relative; z-index: 35; margin-inline-start: auto; }
+.fd-canvas-help-button {
+  all: unset; box-sizing: border-box; display: grid; place-items: center; width: 22px; height: 22px; margin-inline-start: auto; border-radius: 50%;
+  color: var(--fd-muted); font-size: 12px; font-weight: 700; cursor: pointer; background: var(--fd-page);
+}
+/* Filled, not ringed: a ring so near the canvas's own border would read as a box in a box. */
+.fd-canvas-help-button:hover, .fd-canvas-help-button[aria-expanded="true"] { color: var(--fd-text); background: color-mix(in srgb, var(--fd-text) 10%, var(--fd-page)); }
+.fd-canvas-help-button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-canvas-keys {
+  position: absolute; inset-inline-end: 0; inset-block-start: 28px; width: max-content; max-width: min(420px, 80vw); margin: 0; padding: 10px 12px;
+  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;
+  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16); font-size: 12.5px;
+}
+.fd-canvas-keys[hidden] { display: none; }
+.fd-canvas-keys dt { font-weight: 650; white-space: nowrap; }
+.fd-canvas-keys dd { margin: 0; color: var(--fd-muted); }
+
+/* ---- Advanced: the guides ---- */
+/* The columns of the grid a picked part sits on: tinted bands under the parts, laid out as the grid's own columns, numbered. */
+.fd-canvas .fd-grid:has(> .fd-guides) { position: relative; }
+.fd-canvas .fd-grid:has(> .fd-guides) > [data-node] { position: relative; z-index: 1; }
+.fd-guides {
+  position: absolute; inset: 0; z-index: 0; pointer-events: none; display: grid;
+  grid-template-columns: repeat(var(--fd-cols, 1), minmax(0, 1fr)); column-gap: var(--fd-gap-x);
+}
+.fd-guides > i { position: relative; border-radius: 4px; background: color-mix(in srgb, var(--fd-accent) 7%, transparent); }
+/* Twelfths: twelve thin tracks, fainter, with no numbers. */
+.fd-guides-fine > i { border-radius: 2px; background: color-mix(in srgb, var(--fd-accent) 4.5%, transparent); }
+.fd-guides > i::after {
+  content: attr(data-n); position: absolute; inset-block-start: -15px; inset-inline-start: 50%; translate: -50% 0;
+  font: 600 10px/1 system-ui, sans-serif; font-style: normal; color: color-mix(in srgb, var(--fd-accent) 70%, var(--fd-muted));
+}
+
+/* ---- Advanced: the stage — the size of screen shown, and the keys ---- */
+/* Room under the screen sizes for the bar of a field picked in the first group's first row, lifted over the group's name. */
+.fd-canvas-stage { display: flex; align-items: center; gap: 8px; margin-block-end: 16px; }
+.fd-canvas:not([data-mode="advanced"]) > .fd-canvas-stage { display: none; }
+.fd-canvas-sizes { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--fd-page); border: 1px solid var(--fd-border); }
+.fd-canvas-size {
+  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px;
+  font-size: 12.5px; font-weight: 600; color: var(--fd-muted); cursor: pointer;
+}
+.fd-canvas-size[aria-pressed="true"] { background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 2px rgba(15, 20, 25, 0.12); }
+.fd-canvas-size:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+/* Pictures only where the canvas has no room for their names. */
+@container (max-width: 520px) { .fd-canvas-size-name { display: none; } }
+/* On a tablet or a phone, the canvas is as wide as one. */
+.fd-canvas[data-size="tablet"] { width: 100%; max-width: 768px; margin-inline: auto; }
+.fd-canvas[data-size="phone"] { width: 100%; max-width: 390px; margin-inline: auto; }
+
+/* ---- Advanced: a width of the canvas's own ---- */
+/* Dragged or keyed to: as wide as that, never wider than the stage, in its middle as a tablet's is. */
+.fd-canvas[data-mode="advanced"][data-width] { width: var(--fd-canvas-width); max-width: 100%; margin-inline: auto; }
+/* The width beside the switch, once the canvas has one of its own. */
+/* Its words, and the chip's, run the way they are written — "640 px" stays so on a right-to-left page. */
+.fd-canvas-size-px { font-size: 12.5px; font-weight: 600; color: var(--fd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; unicode-bidi: plaintext; }
+.fd-canvas-size-px[hidden] { display: none; }
+/* The handle: the canvas's whole end edge takes the pointer, 24px wide (WCAG 2.5.8), inside the canvas so the page is never
+   wider for it; its grip stays in the middle of what is in view. */
+.fd-screen-designer { container-name: fd-designer; }
+.fd-canvas-resize { position: absolute; z-index: 4; inset-block: 0; inset-inline-end: 0; width: 24px; cursor: ew-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
+.fd-canvas:not([data-mode="advanced"]) > .fd-canvas-resize { display: none; }
+/* A designer narrower than a tablet shows the canvas as wide as it is: no handle, and no width of its own to note. */
+@container fd-designer (max-width: 767px) { .fd-canvas-resize, .fd-canvas-size-px { display: none; } }
+.fd-canvas-resize:focus-visible { outline: none; }
+/* The edge itself, drawn over the canvas's border while the handle is pointed at, focused or dragged. */
+.fd-canvas-resize::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: -1px; width: 2px; background: transparent; transition: background 120ms; }
+.fd-canvas-resize:is(:hover, :focus-visible, [data-active])::before { background: var(--fd-accent); }
+.fd-canvas-resize-grip {
+  position: sticky; top: calc(50vh - 20px); display: block; width: 8px; height: 40px; margin-inline: auto 3px; border-radius: 4px;
+  background: var(--fd-surface); box-shadow: 0 0 0 1.5px var(--fd-border-strong), 0 1px 3px rgba(15, 23, 42, 0.16);
+}
+.fd-canvas-resize-grip::after { content: ""; position: absolute; inset: 13px 2px; border-inline: 1px solid var(--fd-muted); }
+.fd-canvas-resize:is(:hover, :focus-visible, [data-active]) .fd-canvas-resize-grip { box-shadow: 0 0 0 1.5px var(--fd-accent), 0 1px 3px rgba(15, 23, 42, 0.2); }
+.fd-canvas-resize:is(:hover, :focus-visible, [data-active]) .fd-canvas-resize-grip::after { border-color: var(--fd-accent); }
+.fd-canvas-resize:focus-visible .fd-canvas-resize-grip { outline: 2px solid var(--fd-focus); outline-offset: 3px; }
+/* The width and the size the form takes it for, beside the grip while it moves. */
+.fd-canvas-resize-chip {
+  position: absolute; inset-inline-end: calc(100% + 10px); top: 50%; translate: 0 -50%; display: none; pointer-events: none;
+  background: var(--fd-text); color: var(--fd-surface); font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px;
+  white-space: nowrap; font-variant-numeric: tabular-nums; unicode-bidi: plaintext;
+}
+.fd-canvas-resize[data-active] .fd-canvas-resize-chip { display: block; }
+@media (prefers-reduced-motion: reduce) { .fd-canvas-resize::before { transition: none; } }
+
+/* ---- a saved form placed in the page: the form as it will be drawn, in a frame with its words and “Open it” ---- */
+.fd-canvas-form { display: grid; gap: 10px; min-width: 0; padding: 12px 14px 14px; border: 1px dashed var(--fd-border-strong); border-radius: 10px; }
+.fd-canvas-form-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.fd-canvas-form-head > .fd-dicon { flex: none; width: 18px; height: 18px; color: var(--fd-muted); }
+.fd-canvas-form-tag { flex: 1 1 auto; min-width: 0; color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }
+/* Picked, on the picked part's tint: the muted words would fall short of 4.5:1, so they take the text's colour. */
+.fd-canvas-form.fd-canvas-selected .fd-canvas-form-tag { color: var(--fd-text); }
+.fd-canvas-form-open { flex: none; }
+.fd-canvas-form-note { margin: 0; color: var(--fd-muted); }
+.fd-canvas-form-note.fd-canvas-form-problem { color: var(--fd-error); }
+/* Shown, never used: what is inside is inert, and takes no pointer either. */
+.fd-canvas-form-body { min-width: 0; pointer-events: none; }
+.fd-canvas-form-body:empty { display: none; }
+`;
+//# sourceMappingURL=styles-canvas.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles-canvas.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles-canvas.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwL5C,CAAC"}

package/src/lib/styles-choices.d.mts

@@ -0,0 +1,6 @@
+/**
+ * The designer's part for the choice kinds: an option's grip, the word that
+ * marks one going alone, a picture's description under its address, and the
+ * options kept in place when shuffled. Appended to the designer's stylesheet.
+ */
+export declare const DESIGNER_CHOICES_CSS = "\n/* An option's grip: seen when the row is pointed at or one is being moved, dragged by the pointer. */\n.fd-q-option-grip {\n  flex: none; display: grid; place-items: center; width: 14px; height: 24px; margin-inline-end: -6px;\n  color: var(--fd-muted); cursor: grab; touch-action: none; opacity: 0; transition: opacity 150ms;\n}\n.fd-q-option-grip[hidden] { display: none; }\n.fd-q-option-grip svg { width: 16px; height: 16px; }\n.fd-q-option:hover > .fd-q-option-grip, .fd-q-option-lifted > .fd-q-option-grip { opacity: 1; }\n.fd-q-option-lifted { position: relative; z-index: 1; background: var(--fd-surface); box-shadow: 0 4px 14px rgba(15, 20, 25, 0.16); border-radius: 6px; cursor: grabbing; }\n@media (hover: none) { .fd-q-option-grip { opacity: 1; } }\n.fd-q-alone { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--fd-page); color: var(--fd-muted); font-size: 12px; white-space: nowrap; }\n.fd-inline-input.fd-kind-picture-alt { grid-column: 3; width: 100%; min-width: 0; }\n.fd-kind-keep[hidden] { display: none; }\n@container (max-width: 520px) { .fd-inline-input.fd-kind-picture-alt { grid-column: 2 / -1; } }\n";

package/src/lib/styles-choices.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The designer's part for the choice kinds: an option's grip, the word that
+ * marks one going alone, a picture's description under its address, and the
+ * options kept in place when shuffled. Appended to the designer's stylesheet.
+ */
+export declare const DESIGNER_CHOICES_CSS = "\n/* An option's grip: seen when the row is pointed at or one is being moved, dragged by the pointer. */\n.fd-q-option-grip {\n  flex: none; display: grid; place-items: center; width: 14px; height: 24px; margin-inline-end: -6px;\n  color: var(--fd-muted); cursor: grab; touch-action: none; opacity: 0; transition: opacity 150ms;\n}\n.fd-q-option-grip[hidden] { display: none; }\n.fd-q-option-grip svg { width: 16px; height: 16px; }\n.fd-q-option:hover > .fd-q-option-grip, .fd-q-option-lifted > .fd-q-option-grip { opacity: 1; }\n.fd-q-option-lifted { position: relative; z-index: 1; background: var(--fd-surface); box-shadow: 0 4px 14px rgba(15, 20, 25, 0.16); border-radius: 6px; cursor: grabbing; }\n@media (hover: none) { .fd-q-option-grip { opacity: 1; } }\n.fd-q-alone { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--fd-page); color: var(--fd-muted); font-size: 12px; white-space: nowrap; }\n.fd-inline-input.fd-kind-picture-alt { grid-column: 3; width: 100%; min-width: 0; }\n.fd-kind-keep[hidden] { display: none; }\n@container (max-width: 520px) { .fd-inline-input.fd-kind-picture-alt { grid-column: 2 / -1; } }\n";

package/src/lib/styles-choices.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DESIGNER_CHOICES_CSS = void 0;
+/**
+ * The designer's part for the choice kinds: an option's grip, the word that
+ * marks one going alone, a picture's description under its address, and the
+ * options kept in place when shuffled. Appended to the designer's stylesheet.
+ */
+exports.DESIGNER_CHOICES_CSS = `
+/* An option's grip: seen when the row is pointed at or one is being moved, dragged by the pointer. */
+.fd-q-option-grip {
+  flex: none; display: grid; place-items: center; width: 14px; height: 24px; margin-inline-end: -6px;
+  color: var(--fd-muted); cursor: grab; touch-action: none; opacity: 0; transition: opacity 150ms;
+}
+.fd-q-option-grip[hidden] { display: none; }
+.fd-q-option-grip svg { width: 16px; height: 16px; }
+.fd-q-option:hover > .fd-q-option-grip, .fd-q-option-lifted > .fd-q-option-grip { opacity: 1; }
+.fd-q-option-lifted { position: relative; z-index: 1; background: var(--fd-surface); box-shadow: 0 4px 14px rgba(15, 20, 25, 0.16); border-radius: 6px; cursor: grabbing; }
+@media (hover: none) { .fd-q-option-grip { opacity: 1; } }
+.fd-q-alone { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--fd-page); color: var(--fd-muted); font-size: 12px; white-space: nowrap; }
+.fd-inline-input.fd-kind-picture-alt { grid-column: 3; width: 100%; min-width: 0; }
+.fd-kind-keep[hidden] { display: none; }
+@container (max-width: 520px) { .fd-inline-input.fd-kind-picture-alt { grid-column: 2 / -1; } }
+`;
+//# sourceMappingURL=styles-choices.js.map

package/src/lib/styles-choices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-choices.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles-choices.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACU,QAAA,oBAAoB,GAAa;;;;;;;;;;;;;;;CAe7C,CAAC"}

package/src/lib/styles-choices.mjs

@@ -0,0 +1,22 @@
+/**
+ * The designer's part for the choice kinds: an option's grip, the word that
+ * marks one going alone, a picture's description under its address, and the
+ * options kept in place when shuffled. Appended to the designer's stylesheet.
+ */
+export const DESIGNER_CHOICES_CSS = /* css */ `
+/* An option's grip: seen when the row is pointed at or one is being moved, dragged by the pointer. */
+.fd-q-option-grip {
+  flex: none; display: grid; place-items: center; width: 14px; height: 24px; margin-inline-end: -6px;
+  color: var(--fd-muted); cursor: grab; touch-action: none; opacity: 0; transition: opacity 150ms;
+}
+.fd-q-option-grip[hidden] { display: none; }
+.fd-q-option-grip svg { width: 16px; height: 16px; }
+.fd-q-option:hover > .fd-q-option-grip, .fd-q-option-lifted > .fd-q-option-grip { opacity: 1; }
+.fd-q-option-lifted { position: relative; z-index: 1; background: var(--fd-surface); box-shadow: 0 4px 14px rgba(15, 20, 25, 0.16); border-radius: 6px; cursor: grabbing; }
+@media (hover: none) { .fd-q-option-grip { opacity: 1; } }
+.fd-q-alone { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--fd-page); color: var(--fd-muted); font-size: 12px; white-space: nowrap; }
+.fd-inline-input.fd-kind-picture-alt { grid-column: 3; width: 100%; min-width: 0; }
+.fd-kind-keep[hidden] { display: none; }
+@container (max-width: 520px) { .fd-inline-input.fd-kind-picture-alt { grid-column: 2 / -1; } }
+`;
+//# sourceMappingURL=styles-choices.mjs.map

package/src/lib/styles-choices.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-choices.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles-choices.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;CAe7C,CAAC"}

package/src/lib/styles-extend.d.mts

@@ -0,0 +1,6 @@
+/**
+ * The designer's part for what an app adds: its own kinds' settings, the
+ * templates a blank page starts from, and the app's assistant. Appended to
+ * the designer's stylesheet.
+ */
+export declare const DESIGNER_EXTEND_CSS = "\n/* ---- an app's kind: its settings flow with the field's own ---------------- */\n.fd-app-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }\n.fd-prop > .fd-app-settings { font-size: 13px; color: var(--fd-muted); }\n\n/* ---- a blank page: templates to start from -------------------------------- */\n.fd-start-area { display: contents; }\n.fd-canvas-scroll .fd-start, .fd-canvas-scroll .fd-start-done { margin-block-end: 14px; }\n.fd-start { display: grid; gap: 16px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; padding: 20px 24px 22px; }\n.fd-start-head { display: grid; gap: 4px; }\n.fd-start-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--fd-text); }\n.fd-start-lead { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--fd-muted); }\n.fd-start-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }\n.fd-start-item { display: flex; min-width: 0; }\n.fd-start-card {\n  font: inherit; color: var(--fd-text); text-align: start; cursor: pointer; flex: 1; min-width: 0; box-sizing: border-box;\n  display: grid; align-content: start; gap: 4px; padding: 14px 14px 12px; margin: 0;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;\n  transition: border-color 120ms ease, box-shadow 120ms ease;\n}\n.fd-start-card:hover { border-color: var(--fd-accent); box-shadow: 0 2px 8px rgba(15, 20, 25, 0.08); }\n.fd-start-card:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-start-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; }\n.fd-start-card-description { font-size: 13px; line-height: 1.4; color: var(--fd-muted); }\n.fd-start-preview { display: grid; gap: 5px; margin-block-start: 8px; padding-block-start: 10px; border-block-start: 1px dashed var(--fd-border); }\n.fd-start-preview-row { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 1.3; }\n.fd-start-preview-row > .fd-dicon { flex: none; width: 14px; height: 14px; color: var(--fd-muted); }\n.fd-start-preview-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-start-preview-more { font-size: 12px; color: var(--fd-muted); padding-inline-start: 21px; }\n.fd-start-foot { display: flex; flex-wrap: wrap; gap: 8px; }\n\n/* ---- what a whole-page edit did, with Undo -------------------------------- */\n.fd-start-done {\n  display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 8px;\n  background: var(--fd-accent-soft); border: 1px solid color-mix(in srgb, var(--fd-accent) 28%, transparent); color: var(--fd-text);\n}\n.fd-start-done:focus { outline: none; }\n.fd-start-done:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-start-done-body { flex: 1; min-width: 0; display: grid; gap: 6px; padding-block-start: 5px; }\n.fd-start-done-words { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }\n.fd-start-done-changes { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; font-size: 13px; line-height: 1.45; }\n.fd-start-done-more { list-style: none; margin-inline-start: -18px; color: var(--fd-muted); }\n.fd-start-done-actions { flex: none; display: flex; align-items: center; gap: 4px; }\n\n/* ---- the app's assistant: a box to describe the form ---------------------- */\n.fd-assist { display: grid; gap: 8px; min-width: 0; }\n.fd-start .fd-assist { padding-block-start: 16px; border-block-start: 1px solid var(--fd-border); }\n.fd-assist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }\n.fd-assist-label { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fd-text); }\n.fd-assist-name { font-size: 11.5px; font-weight: 600; line-height: 1.6; padding: 0 8px; border-radius: 999px; background: var(--fd-page); color: var(--fd-muted); }\n.fd-assist .fd-assist-prompt { width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical; font: inherit; line-height: 1.45; }\n.fd-assist-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fd-muted); }\n.fd-assist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; }\n.fd-assist-busy { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fd-text); }\n.fd-assist-spinner { width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fd-accent) 25%, transparent); border-block-start-color: var(--fd-accent); animation: fd-assist-spin 800ms linear infinite; }\n@keyframes fd-assist-spin { to { transform: rotate(360deg); } }\n.fd-assist-said { margin: 0; font-size: 13px; color: var(--fd-muted); }\n.fd-assist-said:empty { display: none; }\n.fd-assist-problem { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fd-error); }\n.fd-assist-dialog-body { padding: 16px 18px 18px; }\n@media (prefers-reduced-motion: reduce) { .fd-start-card { transition: none; } .fd-assist-spinner { animation-duration: 2400ms; } }\n";

package/src/lib/styles-extend.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The designer's part for what an app adds: its own kinds' settings, the
+ * templates a blank page starts from, and the app's assistant. Appended to
+ * the designer's stylesheet.
+ */
+export declare const DESIGNER_EXTEND_CSS = "\n/* ---- an app's kind: its settings flow with the field's own ---------------- */\n.fd-app-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }\n.fd-prop > .fd-app-settings { font-size: 13px; color: var(--fd-muted); }\n\n/* ---- a blank page: templates to start from -------------------------------- */\n.fd-start-area { display: contents; }\n.fd-canvas-scroll .fd-start, .fd-canvas-scroll .fd-start-done { margin-block-end: 14px; }\n.fd-start { display: grid; gap: 16px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; padding: 20px 24px 22px; }\n.fd-start-head { display: grid; gap: 4px; }\n.fd-start-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--fd-text); }\n.fd-start-lead { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--fd-muted); }\n.fd-start-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }\n.fd-start-item { display: flex; min-width: 0; }\n.fd-start-card {\n  font: inherit; color: var(--fd-text); text-align: start; cursor: pointer; flex: 1; min-width: 0; box-sizing: border-box;\n  display: grid; align-content: start; gap: 4px; padding: 14px 14px 12px; margin: 0;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;\n  transition: border-color 120ms ease, box-shadow 120ms ease;\n}\n.fd-start-card:hover { border-color: var(--fd-accent); box-shadow: 0 2px 8px rgba(15, 20, 25, 0.08); }\n.fd-start-card:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-start-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; }\n.fd-start-card-description { font-size: 13px; line-height: 1.4; color: var(--fd-muted); }\n.fd-start-preview { display: grid; gap: 5px; margin-block-start: 8px; padding-block-start: 10px; border-block-start: 1px dashed var(--fd-border); }\n.fd-start-preview-row { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 1.3; }\n.fd-start-preview-row > .fd-dicon { flex: none; width: 14px; height: 14px; color: var(--fd-muted); }\n.fd-start-preview-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-start-preview-more { font-size: 12px; color: var(--fd-muted); padding-inline-start: 21px; }\n.fd-start-foot { display: flex; flex-wrap: wrap; gap: 8px; }\n\n/* ---- what a whole-page edit did, with Undo -------------------------------- */\n.fd-start-done {\n  display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 8px;\n  background: var(--fd-accent-soft); border: 1px solid color-mix(in srgb, var(--fd-accent) 28%, transparent); color: var(--fd-text);\n}\n.fd-start-done:focus { outline: none; }\n.fd-start-done:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n.fd-start-done-body { flex: 1; min-width: 0; display: grid; gap: 6px; padding-block-start: 5px; }\n.fd-start-done-words { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }\n.fd-start-done-changes { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; font-size: 13px; line-height: 1.45; }\n.fd-start-done-more { list-style: none; margin-inline-start: -18px; color: var(--fd-muted); }\n.fd-start-done-actions { flex: none; display: flex; align-items: center; gap: 4px; }\n\n/* ---- the app's assistant: a box to describe the form ---------------------- */\n.fd-assist { display: grid; gap: 8px; min-width: 0; }\n.fd-start .fd-assist { padding-block-start: 16px; border-block-start: 1px solid var(--fd-border); }\n.fd-assist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }\n.fd-assist-label { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fd-text); }\n.fd-assist-name { font-size: 11.5px; font-weight: 600; line-height: 1.6; padding: 0 8px; border-radius: 999px; background: var(--fd-page); color: var(--fd-muted); }\n.fd-assist .fd-assist-prompt { width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical; font: inherit; line-height: 1.45; }\n.fd-assist-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fd-muted); }\n.fd-assist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; }\n.fd-assist-busy { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fd-text); }\n.fd-assist-spinner { width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fd-accent) 25%, transparent); border-block-start-color: var(--fd-accent); animation: fd-assist-spin 800ms linear infinite; }\n@keyframes fd-assist-spin { to { transform: rotate(360deg); } }\n.fd-assist-said { margin: 0; font-size: 13px; color: var(--fd-muted); }\n.fd-assist-said:empty { display: none; }\n.fd-assist-problem { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fd-error); }\n.fd-assist-dialog-body { padding: 16px 18px 18px; }\n@media (prefers-reduced-motion: reduce) { .fd-start-card { transition: none; } .fd-assist-spinner { animation-duration: 2400ms; } }\n";

package/src/lib/styles-extend.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DESIGNER_EXTEND_CSS = void 0;
+/**
+ * The designer's part for what an app adds: its own kinds' settings, the
+ * templates a blank page starts from, and the app's assistant. Appended to
+ * the designer's stylesheet.
+ */
+exports.DESIGNER_EXTEND_CSS = `
+/* ---- an app's kind: its settings flow with the field's own ---------------- */
+.fd-app-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
+.fd-prop > .fd-app-settings { font-size: 13px; color: var(--fd-muted); }
+
+/* ---- a blank page: templates to start from -------------------------------- */
+.fd-start-area { display: contents; }
+.fd-canvas-scroll .fd-start, .fd-canvas-scroll .fd-start-done { margin-block-end: 14px; }
+.fd-start { display: grid; gap: 16px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px; padding: 20px 24px 22px; }
+.fd-start-head { display: grid; gap: 4px; }
+.fd-start-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--fd-text); }
+.fd-start-lead { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--fd-muted); }
+.fd-start-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
+.fd-start-item { display: flex; min-width: 0; }
+.fd-start-card {
+  font: inherit; color: var(--fd-text); text-align: start; cursor: pointer; flex: 1; min-width: 0; box-sizing: border-box;
+  display: grid; align-content: start; gap: 4px; padding: 14px 14px 12px; margin: 0;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: 8px;
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+.fd-start-card:hover { border-color: var(--fd-accent); box-shadow: 0 2px 8px rgba(15, 20, 25, 0.08); }
+.fd-start-card:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-start-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
+.fd-start-card-description { font-size: 13px; line-height: 1.4; color: var(--fd-muted); }
+.fd-start-preview { display: grid; gap: 5px; margin-block-start: 8px; padding-block-start: 10px; border-block-start: 1px dashed var(--fd-border); }
+.fd-start-preview-row { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; line-height: 1.3; }
+.fd-start-preview-row > .fd-dicon { flex: none; width: 14px; height: 14px; color: var(--fd-muted); }
+.fd-start-preview-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-start-preview-more { font-size: 12px; color: var(--fd-muted); padding-inline-start: 21px; }
+.fd-start-foot { display: flex; flex-wrap: wrap; gap: 8px; }
+
+/* ---- what a whole-page edit did, with Undo -------------------------------- */
+.fd-start-done {
+  display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 8px;
+  background: var(--fd-accent-soft); border: 1px solid color-mix(in srgb, var(--fd-accent) 28%, transparent); color: var(--fd-text);
+}
+.fd-start-done:focus { outline: none; }
+.fd-start-done:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
+.fd-start-done-body { flex: 1; min-width: 0; display: grid; gap: 6px; padding-block-start: 5px; }
+.fd-start-done-words { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }
+.fd-start-done-changes { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; font-size: 13px; line-height: 1.45; }
+.fd-start-done-more { list-style: none; margin-inline-start: -18px; color: var(--fd-muted); }
+.fd-start-done-actions { flex: none; display: flex; align-items: center; gap: 4px; }
+
+/* ---- the app's assistant: a box to describe the form ---------------------- */
+.fd-assist { display: grid; gap: 8px; min-width: 0; }
+.fd-start .fd-assist { padding-block-start: 16px; border-block-start: 1px solid var(--fd-border); }
+.fd-assist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
+.fd-assist-label { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fd-text); }
+.fd-assist-name { font-size: 11.5px; font-weight: 600; line-height: 1.6; padding: 0 8px; border-radius: 999px; background: var(--fd-page); color: var(--fd-muted); }
+.fd-assist .fd-assist-prompt { width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical; font: inherit; line-height: 1.45; }
+.fd-assist-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fd-muted); }
+.fd-assist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; }
+.fd-assist-busy { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fd-text); }
+.fd-assist-spinner { width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--fd-accent) 25%, transparent); border-block-start-color: var(--fd-accent); animation: fd-assist-spin 800ms linear infinite; }
+@keyframes fd-assist-spin { to { transform: rotate(360deg); } }
+.fd-assist-said { margin: 0; font-size: 13px; color: var(--fd-muted); }
+.fd-assist-said:empty { display: none; }
+.fd-assist-problem { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fd-error); }
+.fd-assist-dialog-body { padding: 16px 18px 18px; }
+@media (prefers-reduced-motion: reduce) { .fd-start-card { transition: none; } .fd-assist-spinner { animation-duration: 2400ms; } }
+`;
+//# sourceMappingURL=styles-extend.js.map

package/src/lib/styles-extend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-extend.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/styles-extend.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACU,QAAA,mBAAmB,GAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D5C,CAAC"}