@fieldia/designer 0.0.0-stage → 0.12.0

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"}

package/src/lib/styles-extend.mjs

@@ -0,0 +1,68 @@
+/**
+ * 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 const DESIGNER_EXTEND_CSS = /* 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.mjs.map

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * The designer's styles for what closes the gap with other form builders:
+ * looks to start from on the Look tab, the mark of a group that folds, and
+ * an icon by what Find anything lists, where it has one of its own.
+ */
+export declare const DESIGNER_GAP_CSS = "\n/* Looks to start from: a tile each, its words in its font and accent on its scheme's surface. */\n.fd-look-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }\n.fd-look-preset, .fd-look-own {\n  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 54px; box-sizing: border-box; padding: 5px 4px;\n  border: 1px solid var(--fd-border); border-radius: 8px; background: var(--fd-surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--fd-muted); cursor: pointer;\n}\n.fd-look-preset:hover { border-color: var(--fd-border-strong); color: var(--fd-text); }\n.fd-look-preset:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-look-preset[aria-pressed=\"true\"] { border-color: var(--fd-accent); color: var(--fd-accent); box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-look-preset-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-look-preset-sample { padding: 0 6px; border-radius: 4px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--fd-preset-accent, var(--fd-accent)); }\n.fd-look-preset-sample[data-scheme=\"dark\"] { background: #1f2329; }\n.fd-look-preset-sample[data-font=\"serif\"] { font-family: \"Source Serif 4\", Georgia, serif; }\n.fd-look-preset-sample[data-font=\"rounded\"] { font-family: Nunito, \"Varela Round\", system-ui; }\n/* The look the page wears when it is none of them: said, not pressed. */\n.fd-look-own { cursor: default; border-style: dashed; color: var(--fd-text); font-weight: 600; text-align: center; }\n.fd-look-own[hidden] { display: none; }\n/* Looks of one's own: under Fieldia's, drawn as they are, a menu at each tile's corner. */\n.fd-look-saved-head { margin: 6px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--fd-text); }\n.fd-look-saved-tile { position: relative; display: grid; min-width: 0; }\n.fd-look-saved-tile > .fd-look-preset { padding-inline: 6px; }\n/* A name of one's own, on two lines before it is cut short: the whole of it is the tile's title and its name. */\n.fd-look-saved-tile .fd-look-preset-name { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }\n.fd-look-saved-more {\n  position: absolute; inset-block-start: 2px; inset-inline-end: 2px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;\n  border: 0; border-radius: 6px; background: transparent; color: var(--fd-muted); cursor: pointer;\n}\n.fd-look-saved-more:hover, .fd-look-saved-more[aria-expanded=\"true\"] { background: var(--fd-page); color: var(--fd-text); }\n.fd-look-saved-more:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 0; }\n.fd-look-saved-more .fd-dicon { width: 16px; height: 16px; }\n.fd-properties .fd-look-save { justify-self: start; min-height: 24px; padding: 0 2px; font-size: 12.5px; }\n.fd-look-save[hidden], .fd-look-name[hidden], .fd-look-status[hidden], .fd-look-problem[hidden], .fd-look-name-problem[hidden] { display: none; }\n/* Naming one: a box on the page, its refusal under it in words. */\n.fd-look-name { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: var(--fd-page); }\n.fd-look-name-label { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }\n.fd-look-name > .fd-input { min-width: 0; }\n.fd-look-name > .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-look-name-buttons { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-look-name-problem { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--fd-error); }\n/* What was done, with Undo; what failed, with Try again. */\n.fd-look-status, .fd-look-problem { margin: 0; font-size: 12.5px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }\n.fd-look-status { color: var(--fd-muted); }\n.fd-look-problem { color: var(--fd-error); }\n.fd-look-status .fd-button, .fd-look-problem .fd-button { min-height: 24px; padding: 0 4px; }\n/* A group that folds by its title: an arrow before the title, as the form draws it; along the line while it starts folded. */\n.fd-canvas-fold { display: inline-flex; vertical-align: -2px; margin-inline-end: 6px; color: var(--fd-muted); }\n.fd-canvas-fold[hidden] { display: none; }\n.fd-canvas-fold .fd-dicon { width: 15px; height: 15px; }\n.fd-canvas-fold[data-fold=\"folded\"] .fd-dicon { transform: rotate(-90deg); }\n.fd-canvas-fold[data-fold=\"folded\"]:dir(rtl) .fd-dicon { transform: rotate(90deg); }\n/* Find anything: an icon before what has one of its own, as the bar shows it. */\n.fd-find-option > .fd-dicon { width: 16px; height: 16px; margin-inline-end: -4px; color: var(--fd-muted); }\n.fd-find-option[aria-selected=\"true\"] > .fd-dicon { color: var(--fd-accent); }\n/* Where some of what is found has an icon, the rest keep its room, so the words line up. */\n.fd-find-icon-room { flex: none; width: 16px; margin-inline-end: -4px; }\n/* A rule across fields that does not hold on the made-up values: said, not as a success. */\n.fd-formula-result[data-fails] { background: var(--fd-warning-soft, var(--fd-page)); }\n";

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

@@ -0,0 +1,6 @@
+/**
+ * The designer's styles for what closes the gap with other form builders:
+ * looks to start from on the Look tab, the mark of a group that folds, and
+ * an icon by what Find anything lists, where it has one of its own.
+ */
+export declare const DESIGNER_GAP_CSS = "\n/* Looks to start from: a tile each, its words in its font and accent on its scheme's surface. */\n.fd-look-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }\n.fd-look-preset, .fd-look-own {\n  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 54px; box-sizing: border-box; padding: 5px 4px;\n  border: 1px solid var(--fd-border); border-radius: 8px; background: var(--fd-surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--fd-muted); cursor: pointer;\n}\n.fd-look-preset:hover { border-color: var(--fd-border-strong); color: var(--fd-text); }\n.fd-look-preset:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-look-preset[aria-pressed=\"true\"] { border-color: var(--fd-accent); color: var(--fd-accent); box-shadow: inset 0 0 0 1px var(--fd-accent); }\n.fd-look-preset-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-look-preset-sample { padding: 0 6px; border-radius: 4px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--fd-preset-accent, var(--fd-accent)); }\n.fd-look-preset-sample[data-scheme=\"dark\"] { background: #1f2329; }\n.fd-look-preset-sample[data-font=\"serif\"] { font-family: \"Source Serif 4\", Georgia, serif; }\n.fd-look-preset-sample[data-font=\"rounded\"] { font-family: Nunito, \"Varela Round\", system-ui; }\n/* The look the page wears when it is none of them: said, not pressed. */\n.fd-look-own { cursor: default; border-style: dashed; color: var(--fd-text); font-weight: 600; text-align: center; }\n.fd-look-own[hidden] { display: none; }\n/* Looks of one's own: under Fieldia's, drawn as they are, a menu at each tile's corner. */\n.fd-look-saved-head { margin: 6px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--fd-text); }\n.fd-look-saved-tile { position: relative; display: grid; min-width: 0; }\n.fd-look-saved-tile > .fd-look-preset { padding-inline: 6px; }\n/* A name of one's own, on two lines before it is cut short: the whole of it is the tile's title and its name. */\n.fd-look-saved-tile .fd-look-preset-name { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }\n.fd-look-saved-more {\n  position: absolute; inset-block-start: 2px; inset-inline-end: 2px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;\n  border: 0; border-radius: 6px; background: transparent; color: var(--fd-muted); cursor: pointer;\n}\n.fd-look-saved-more:hover, .fd-look-saved-more[aria-expanded=\"true\"] { background: var(--fd-page); color: var(--fd-text); }\n.fd-look-saved-more:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 0; }\n.fd-look-saved-more .fd-dicon { width: 16px; height: 16px; }\n.fd-properties .fd-look-save { justify-self: start; min-height: 24px; padding: 0 2px; font-size: 12.5px; }\n.fd-look-save[hidden], .fd-look-name[hidden], .fd-look-status[hidden], .fd-look-problem[hidden], .fd-look-name-problem[hidden] { display: none; }\n/* Naming one: a box on the page, its refusal under it in words. */\n.fd-look-name { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: var(--fd-page); }\n.fd-look-name-label { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }\n.fd-look-name > .fd-input { min-width: 0; }\n.fd-look-name > .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-look-name-buttons { display: flex; flex-wrap: wrap; gap: 6px; }\n.fd-look-name-problem { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--fd-error); }\n/* What was done, with Undo; what failed, with Try again. */\n.fd-look-status, .fd-look-problem { margin: 0; font-size: 12.5px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }\n.fd-look-status { color: var(--fd-muted); }\n.fd-look-problem { color: var(--fd-error); }\n.fd-look-status .fd-button, .fd-look-problem .fd-button { min-height: 24px; padding: 0 4px; }\n/* A group that folds by its title: an arrow before the title, as the form draws it; along the line while it starts folded. */\n.fd-canvas-fold { display: inline-flex; vertical-align: -2px; margin-inline-end: 6px; color: var(--fd-muted); }\n.fd-canvas-fold[hidden] { display: none; }\n.fd-canvas-fold .fd-dicon { width: 15px; height: 15px; }\n.fd-canvas-fold[data-fold=\"folded\"] .fd-dicon { transform: rotate(-90deg); }\n.fd-canvas-fold[data-fold=\"folded\"]:dir(rtl) .fd-dicon { transform: rotate(90deg); }\n/* Find anything: an icon before what has one of its own, as the bar shows it. */\n.fd-find-option > .fd-dicon { width: 16px; height: 16px; margin-inline-end: -4px; color: var(--fd-muted); }\n.fd-find-option[aria-selected=\"true\"] > .fd-dicon { color: var(--fd-accent); }\n/* Where some of what is found has an icon, the rest keep its room, so the words line up. */\n.fd-find-icon-room { flex: none; width: 16px; margin-inline-end: -4px; }\n/* A rule across fields that does not hold on the made-up values: said, not as a success. */\n.fd-formula-result[data-fails] { background: var(--fd-warning-soft, var(--fd-page)); }\n";

package/src/lib/styles-gap.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DESIGNER_GAP_CSS = void 0;
+/**
+ * The designer's styles for what closes the gap with other form builders:
+ * looks to start from on the Look tab, the mark of a group that folds, and
+ * an icon by what Find anything lists, where it has one of its own.
+ */
+exports.DESIGNER_GAP_CSS = `
+/* Looks to start from: a tile each, its words in its font and accent on its scheme's surface. */
+.fd-look-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
+.fd-look-preset, .fd-look-own {
+  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 54px; box-sizing: border-box; padding: 5px 4px;
+  border: 1px solid var(--fd-border); border-radius: 8px; background: var(--fd-surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--fd-muted); cursor: pointer;
+}
+.fd-look-preset:hover { border-color: var(--fd-border-strong); color: var(--fd-text); }
+.fd-look-preset:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-look-preset[aria-pressed="true"] { border-color: var(--fd-accent); color: var(--fd-accent); box-shadow: inset 0 0 0 1px var(--fd-accent); }
+.fd-look-preset-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-look-preset-sample { padding: 0 6px; border-radius: 4px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--fd-preset-accent, var(--fd-accent)); }
+.fd-look-preset-sample[data-scheme="dark"] { background: #1f2329; }
+.fd-look-preset-sample[data-font="serif"] { font-family: "Source Serif 4", Georgia, serif; }
+.fd-look-preset-sample[data-font="rounded"] { font-family: Nunito, "Varela Round", system-ui; }
+/* The look the page wears when it is none of them: said, not pressed. */
+.fd-look-own { cursor: default; border-style: dashed; color: var(--fd-text); font-weight: 600; text-align: center; }
+.fd-look-own[hidden] { display: none; }
+/* Looks of one's own: under Fieldia's, drawn as they are, a menu at each tile's corner. */
+.fd-look-saved-head { margin: 6px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--fd-text); }
+.fd-look-saved-tile { position: relative; display: grid; min-width: 0; }
+.fd-look-saved-tile > .fd-look-preset { padding-inline: 6px; }
+/* A name of one's own, on two lines before it is cut short: the whole of it is the tile's title and its name. */
+.fd-look-saved-tile .fd-look-preset-name { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
+.fd-look-saved-more {
+  position: absolute; inset-block-start: 2px; inset-inline-end: 2px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
+  border: 0; border-radius: 6px; background: transparent; color: var(--fd-muted); cursor: pointer;
+}
+.fd-look-saved-more:hover, .fd-look-saved-more[aria-expanded="true"] { background: var(--fd-page); color: var(--fd-text); }
+.fd-look-saved-more:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 0; }
+.fd-look-saved-more .fd-dicon { width: 16px; height: 16px; }
+.fd-properties .fd-look-save { justify-self: start; min-height: 24px; padding: 0 2px; font-size: 12.5px; }
+.fd-look-save[hidden], .fd-look-name[hidden], .fd-look-status[hidden], .fd-look-problem[hidden], .fd-look-name-problem[hidden] { display: none; }
+/* Naming one: a box on the page, its refusal under it in words. */
+.fd-look-name { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: var(--fd-page); }
+.fd-look-name-label { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }
+.fd-look-name > .fd-input { min-width: 0; }
+.fd-look-name > .fd-input[aria-invalid="true"] { border-color: var(--fd-error); }
+.fd-look-name-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
+.fd-look-name-problem { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--fd-error); }
+/* What was done, with Undo; what failed, with Try again. */
+.fd-look-status, .fd-look-problem { margin: 0; font-size: 12.5px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
+.fd-look-status { color: var(--fd-muted); }
+.fd-look-problem { color: var(--fd-error); }
+.fd-look-status .fd-button, .fd-look-problem .fd-button { min-height: 24px; padding: 0 4px; }
+/* A group that folds by its title: an arrow before the title, as the form draws it; along the line while it starts folded. */
+.fd-canvas-fold { display: inline-flex; vertical-align: -2px; margin-inline-end: 6px; color: var(--fd-muted); }
+.fd-canvas-fold[hidden] { display: none; }
+.fd-canvas-fold .fd-dicon { width: 15px; height: 15px; }
+.fd-canvas-fold[data-fold="folded"] .fd-dicon { transform: rotate(-90deg); }
+.fd-canvas-fold[data-fold="folded"]:dir(rtl) .fd-dicon { transform: rotate(90deg); }
+/* Find anything: an icon before what has one of its own, as the bar shows it. */
+.fd-find-option > .fd-dicon { width: 16px; height: 16px; margin-inline-end: -4px; color: var(--fd-muted); }
+.fd-find-option[aria-selected="true"] > .fd-dicon { color: var(--fd-accent); }
+/* Where some of what is found has an icon, the rest keep its room, so the words line up. */
+.fd-find-icon-room { flex: none; width: 16px; margin-inline-end: -4px; }
+/* A rule across fields that does not hold on the made-up values: said, not as a success. */
+.fd-formula-result[data-fails] { background: var(--fd-warning-soft, var(--fd-page)); }
+`;
+//# sourceMappingURL=styles-gap.js.map

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

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

package/src/lib/styles-gap.mjs

@@ -0,0 +1,65 @@
+/**
+ * The designer's styles for what closes the gap with other form builders:
+ * looks to start from on the Look tab, the mark of a group that folds, and
+ * an icon by what Find anything lists, where it has one of its own.
+ */
+export const DESIGNER_GAP_CSS = /* css */ `
+/* Looks to start from: a tile each, its words in its font and accent on its scheme's surface. */
+.fd-look-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
+.fd-look-preset, .fd-look-own {
+  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 54px; box-sizing: border-box; padding: 5px 4px;
+  border: 1px solid var(--fd-border); border-radius: 8px; background: var(--fd-surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--fd-muted); cursor: pointer;
+}
+.fd-look-preset:hover { border-color: var(--fd-border-strong); color: var(--fd-text); }
+.fd-look-preset:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-look-preset[aria-pressed="true"] { border-color: var(--fd-accent); color: var(--fd-accent); box-shadow: inset 0 0 0 1px var(--fd-accent); }
+.fd-look-preset-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fd-look-preset-sample { padding: 0 6px; border-radius: 4px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--fd-preset-accent, var(--fd-accent)); }
+.fd-look-preset-sample[data-scheme="dark"] { background: #1f2329; }
+.fd-look-preset-sample[data-font="serif"] { font-family: "Source Serif 4", Georgia, serif; }
+.fd-look-preset-sample[data-font="rounded"] { font-family: Nunito, "Varela Round", system-ui; }
+/* The look the page wears when it is none of them: said, not pressed. */
+.fd-look-own { cursor: default; border-style: dashed; color: var(--fd-text); font-weight: 600; text-align: center; }
+.fd-look-own[hidden] { display: none; }
+/* Looks of one's own: under Fieldia's, drawn as they are, a menu at each tile's corner. */
+.fd-look-saved-head { margin: 6px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--fd-text); }
+.fd-look-saved-tile { position: relative; display: grid; min-width: 0; }
+.fd-look-saved-tile > .fd-look-preset { padding-inline: 6px; }
+/* A name of one's own, on two lines before it is cut short: the whole of it is the tile's title and its name. */
+.fd-look-saved-tile .fd-look-preset-name { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
+.fd-look-saved-more {
+  position: absolute; inset-block-start: 2px; inset-inline-end: 2px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
+  border: 0; border-radius: 6px; background: transparent; color: var(--fd-muted); cursor: pointer;
+}
+.fd-look-saved-more:hover, .fd-look-saved-more[aria-expanded="true"] { background: var(--fd-page); color: var(--fd-text); }
+.fd-look-saved-more:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 0; }
+.fd-look-saved-more .fd-dicon { width: 16px; height: 16px; }
+.fd-properties .fd-look-save { justify-self: start; min-height: 24px; padding: 0 2px; font-size: 12.5px; }
+.fd-look-save[hidden], .fd-look-name[hidden], .fd-look-status[hidden], .fd-look-problem[hidden], .fd-look-name-problem[hidden] { display: none; }
+/* Naming one: a box on the page, its refusal under it in words. */
+.fd-look-name { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: var(--fd-page); }
+.fd-look-name-label { font-size: 12.5px; font-weight: 600; color: var(--fd-text); }
+.fd-look-name > .fd-input { min-width: 0; }
+.fd-look-name > .fd-input[aria-invalid="true"] { border-color: var(--fd-error); }
+.fd-look-name-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
+.fd-look-name-problem { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--fd-error); }
+/* What was done, with Undo; what failed, with Try again. */
+.fd-look-status, .fd-look-problem { margin: 0; font-size: 12.5px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
+.fd-look-status { color: var(--fd-muted); }
+.fd-look-problem { color: var(--fd-error); }
+.fd-look-status .fd-button, .fd-look-problem .fd-button { min-height: 24px; padding: 0 4px; }
+/* A group that folds by its title: an arrow before the title, as the form draws it; along the line while it starts folded. */
+.fd-canvas-fold { display: inline-flex; vertical-align: -2px; margin-inline-end: 6px; color: var(--fd-muted); }
+.fd-canvas-fold[hidden] { display: none; }
+.fd-canvas-fold .fd-dicon { width: 15px; height: 15px; }
+.fd-canvas-fold[data-fold="folded"] .fd-dicon { transform: rotate(-90deg); }
+.fd-canvas-fold[data-fold="folded"]:dir(rtl) .fd-dicon { transform: rotate(90deg); }
+/* Find anything: an icon before what has one of its own, as the bar shows it. */
+.fd-find-option > .fd-dicon { width: 16px; height: 16px; margin-inline-end: -4px; color: var(--fd-muted); }
+.fd-find-option[aria-selected="true"] > .fd-dicon { color: var(--fd-accent); }
+/* Where some of what is found has an icon, the rest keep its room, so the words line up. */
+.fd-find-icon-room { flex: none; width: 16px; margin-inline-end: -4px; }
+/* A rule across fields that does not hold on the made-up values: said, not as a success. */
+.fd-formula-result[data-fails] { background: var(--fd-warning-soft, var(--fd-page)); }
+`;
+//# sourceMappingURL=styles-gap.mjs.map

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

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

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

@@ -0,0 +1,5 @@
+/**
+ * The JSON view's look, and Try it's drawer of data and problems: the box the
+ * page is typed in, its line numbers and marked lines, the problems under it.
+ */
+export declare const DESIGNER_JSON_CSS = "\n.fd-json { display: grid; gap: 12px; min-width: 0; }\n.fd-json[hidden] { display: none; }\n.fd-json-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px; }\n.fd-json-title { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; }\n.fd-json-heading { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.35; }\n.fd-json-state { margin: 0; font-size: 13px; line-height: 1.4; color: var(--fd-muted); }\n.fd-json-actions { display: flex; flex-wrap: wrap; gap: 8px; }\n/* Leaving with changes not applied: asked here, never in a browser dialog. */\n.fd-json-leave { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-radius: var(--fd-radius); background: var(--fd-warning-soft); color: var(--fd-text); }\n.fd-json-leave[hidden] { display: none; }\n.fd-json-leave-text { margin: 0; flex: 1 1 240px; font-weight: 600; }\n/* The box: numbers and text in one scroll of their own; long lines scroll inside the text. Its line is 20px and its top 12px, as json-code.ts counts. */\n.fd-json-code {\n  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;\n  max-height: min(56vh, 640px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius);\n  font: 13px/20px ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n}\n.fd-json-code:focus-within { border-color: var(--fd-accent); }\n.fd-json-gutter {\n  margin: 0; padding: 12px 10px 24px 12px; min-width: 3ch; box-sizing: border-box; min-height: 100%;\n  font: inherit; text-align: end; color: var(--fd-muted); background: var(--fd-page); border-inline-end: 1px solid var(--fd-border);\n  user-select: none; -webkit-user-select: none;\n}\n.fd-json-input {\n  display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 12px 14px 24px; border: 0; border-radius: 0;\n  font: inherit; color: var(--fd-text); background: transparent; resize: none; outline: none; box-shadow: none;\n  white-space: pre; overflow-x: auto; overflow-y: hidden; tab-size: 2; caret-color: var(--fd-accent);\n  height: calc(var(--fd-json-lines, 1) * 20px + 36px);\n}\n.fd-designer .fd-json-input:focus, .fd-designer .fd-json-input:focus-visible { outline: none; box-shadow: none; }\n.fd-json-marks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }\n.fd-json-mark { position: absolute; inset-inline: 0; height: 20px; background: color-mix(in srgb, var(--fd-error) 12%, transparent); border-inline-start: 3px solid var(--fd-error); }\n.fd-json-mark[data-severity=\"should\"] { background: color-mix(in srgb, var(--fd-warning) 12%, transparent); border-inline-start-color: var(--fd-warning); }\n.fd-json-hint { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-json-problems { list-style: none; margin: 0; padding: 0; display: grid; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }\n.fd-json-problems:empty { display: none; }\n.fd-json-problem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; }\n.fd-json-problem + .fd-json-problem { border-block-start: 1px solid var(--fd-border); }\n.fd-json-at {\n  all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap; padding: 1px 7px; border-radius: 5px;\n  font: 12.5px/1.5 ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; color: var(--fd-accent); background: var(--fd-accent-soft);\n}\n.fd-json-at:hover { text-decoration: underline; }\n.fd-json-at:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-json-severity { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-json-problem[data-severity=\"should\"] .fd-json-severity { color: var(--fd-warning); background: var(--fd-warning-soft); }\n.fd-json-message { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }\n.fd-json-fix { min-height: 28px; padding: 2px 6px; font-size: 13px; font-weight: 600; }\n/* Try it's drawer: the answers as JSON and the problems they have, kept in sight as the page is filled. */\n.fd-try-drawer {\n  position: sticky; bottom: 8px; z-index: 5; display: grid; margin-inline: auto; width: 100%; max-width: 1100px; box-sizing: border-box;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 -6px 18px rgba(15, 20, 25, 0.08);\n}\n.fd-try-drawer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 2px 10px; }\n.fd-try-drawer-bar:has(+ .fd-try-panels:not([hidden])) { border-block-end: 1px solid var(--fd-border); }\n.fd-try-tabs { display: flex; gap: 2px; margin-inline-end: auto; }\n.fd-try-tab {\n  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px 7px;\n  font-size: 13.5px; font-weight: 600; color: var(--fd-muted); border-block-end: 2px solid transparent;\n}\n.fd-try-tab[aria-expanded=\"true\"] { color: var(--fd-text); border-block-end-color: var(--fd-accent); }\n.fd-try-tab:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; border-radius: 4px; }\n.fd-try-count { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--fd-error-soft); color: var(--fd-error); }\n.fd-try-count[hidden] { display: none; }\n.fd-try-said { font-size: 12.5px; color: var(--fd-muted); }\n.fd-try-said:empty { display: none; }\n.fd-try-copy, .fd-try-fold { min-height: 30px; padding: 2px 6px; font-size: 13px; font-weight: 600; }\n.fd-try-panels { max-height: min(260px, 38vh); overflow: auto; overscroll-behavior: contain; }\n.fd-try-panels[hidden] { display: none; }\n.fd-try-panel { padding: 10px 14px; }\n.fd-try-panel[hidden] { display: none; }\n.fd-try-data { margin: 0; font: 12.5px/1.55 ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; color: var(--fd-text); }\n.fd-try-data:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-try-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }\n.fd-try-problems:empty { display: none; }\n.fd-try-problem { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; line-height: 1.45; }\n.fd-try-problem:hover { background: var(--fd-page); }\n.fd-try-problem:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-try-problem strong { font-weight: 600; }\n.fd-try-problem span { color: var(--fd-error); }\n.fd-try-problem[data-warning] span { color: var(--fd-warning); }\n.fd-try-none { margin: 0; color: var(--fd-muted); font-size: 13.5px; }\n.fd-try-none[hidden] { display: none; }\n/* A choice's options written here, or taken from one of the app's lists: which list, and what it changes with. */\n.fd-q-source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-block-end: 8px; }\n.fd-q-source[hidden] { display: none; }\n.fd-q-source-words { flex-basis: 100%; font-size: 13px; font-weight: 600; }\n.fd-q-source-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }\n.fd-q-list { display: grid; gap: 10px; }\n.fd-q-list[hidden] { display: none; }\n.fd-q-list-name { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }\n.fd-q-list-name > [hidden] { display: none; }\n.fd-q-depends { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }\n.fd-q-depends > legend { padding: 0; margin-block-end: 4px; font-size: 13px; font-weight: 600; }\n.fd-q-depends-boxes { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 120px; overflow: auto; }\n.fd-q-depends-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }\n.fd-q-list-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-q-list-note[hidden] { display: none; }\n";

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

@@ -0,0 +1,5 @@
+/**
+ * The JSON view's look, and Try it's drawer of data and problems: the box the
+ * page is typed in, its line numbers and marked lines, the problems under it.
+ */
+export declare const DESIGNER_JSON_CSS = "\n.fd-json { display: grid; gap: 12px; min-width: 0; }\n.fd-json[hidden] { display: none; }\n.fd-json-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px; }\n.fd-json-title { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; }\n.fd-json-heading { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.35; }\n.fd-json-state { margin: 0; font-size: 13px; line-height: 1.4; color: var(--fd-muted); }\n.fd-json-actions { display: flex; flex-wrap: wrap; gap: 8px; }\n/* Leaving with changes not applied: asked here, never in a browser dialog. */\n.fd-json-leave { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-radius: var(--fd-radius); background: var(--fd-warning-soft); color: var(--fd-text); }\n.fd-json-leave[hidden] { display: none; }\n.fd-json-leave-text { margin: 0; flex: 1 1 240px; font-weight: 600; }\n/* The box: numbers and text in one scroll of their own; long lines scroll inside the text. Its line is 20px and its top 12px, as json-code.ts counts. */\n.fd-json-code {\n  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;\n  max-height: min(56vh, 640px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius);\n  font: 13px/20px ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n}\n.fd-json-code:focus-within { border-color: var(--fd-accent); }\n.fd-json-gutter {\n  margin: 0; padding: 12px 10px 24px 12px; min-width: 3ch; box-sizing: border-box; min-height: 100%;\n  font: inherit; text-align: end; color: var(--fd-muted); background: var(--fd-page); border-inline-end: 1px solid var(--fd-border);\n  user-select: none; -webkit-user-select: none;\n}\n.fd-json-input {\n  display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 12px 14px 24px; border: 0; border-radius: 0;\n  font: inherit; color: var(--fd-text); background: transparent; resize: none; outline: none; box-shadow: none;\n  white-space: pre; overflow-x: auto; overflow-y: hidden; tab-size: 2; caret-color: var(--fd-accent);\n  height: calc(var(--fd-json-lines, 1) * 20px + 36px);\n}\n.fd-designer .fd-json-input:focus, .fd-designer .fd-json-input:focus-visible { outline: none; box-shadow: none; }\n.fd-json-marks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }\n.fd-json-mark { position: absolute; inset-inline: 0; height: 20px; background: color-mix(in srgb, var(--fd-error) 12%, transparent); border-inline-start: 3px solid var(--fd-error); }\n.fd-json-mark[data-severity=\"should\"] { background: color-mix(in srgb, var(--fd-warning) 12%, transparent); border-inline-start-color: var(--fd-warning); }\n.fd-json-hint { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-json-problems { list-style: none; margin: 0; padding: 0; display: grid; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }\n.fd-json-problems:empty { display: none; }\n.fd-json-problem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; }\n.fd-json-problem + .fd-json-problem { border-block-start: 1px solid var(--fd-border); }\n.fd-json-at {\n  all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap; padding: 1px 7px; border-radius: 5px;\n  font: 12.5px/1.5 ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; color: var(--fd-accent); background: var(--fd-accent-soft);\n}\n.fd-json-at:hover { text-decoration: underline; }\n.fd-json-at:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-json-severity { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; color: var(--fd-error); background: var(--fd-error-soft); }\n.fd-json-problem[data-severity=\"should\"] .fd-json-severity { color: var(--fd-warning); background: var(--fd-warning-soft); }\n.fd-json-message { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }\n.fd-json-fix { min-height: 28px; padding: 2px 6px; font-size: 13px; font-weight: 600; }\n/* Try it's drawer: the answers as JSON and the problems they have, kept in sight as the page is filled. */\n.fd-try-drawer {\n  position: sticky; bottom: 8px; z-index: 5; display: grid; margin-inline: auto; width: 100%; max-width: 1100px; box-sizing: border-box;\n  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 -6px 18px rgba(15, 20, 25, 0.08);\n}\n.fd-try-drawer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 2px 10px; }\n.fd-try-drawer-bar:has(+ .fd-try-panels:not([hidden])) { border-block-end: 1px solid var(--fd-border); }\n.fd-try-tabs { display: flex; gap: 2px; margin-inline-end: auto; }\n.fd-try-tab {\n  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px 7px;\n  font-size: 13.5px; font-weight: 600; color: var(--fd-muted); border-block-end: 2px solid transparent;\n}\n.fd-try-tab[aria-expanded=\"true\"] { color: var(--fd-text); border-block-end-color: var(--fd-accent); }\n.fd-try-tab:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; border-radius: 4px; }\n.fd-try-count { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--fd-error-soft); color: var(--fd-error); }\n.fd-try-count[hidden] { display: none; }\n.fd-try-said { font-size: 12.5px; color: var(--fd-muted); }\n.fd-try-said:empty { display: none; }\n.fd-try-copy, .fd-try-fold { min-height: 30px; padding: 2px 6px; font-size: 13px; font-weight: 600; }\n.fd-try-panels { max-height: min(260px, 38vh); overflow: auto; overscroll-behavior: contain; }\n.fd-try-panels[hidden] { display: none; }\n.fd-try-panel { padding: 10px 14px; }\n.fd-try-panel[hidden] { display: none; }\n.fd-try-data { margin: 0; font: 12.5px/1.55 ui-monospace, \"SF Mono\", Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; color: var(--fd-text); }\n.fd-try-data:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }\n.fd-try-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }\n.fd-try-problems:empty { display: none; }\n.fd-try-problem { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; line-height: 1.45; }\n.fd-try-problem:hover { background: var(--fd-page); }\n.fd-try-problem:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }\n.fd-try-problem strong { font-weight: 600; }\n.fd-try-problem span { color: var(--fd-error); }\n.fd-try-problem[data-warning] span { color: var(--fd-warning); }\n.fd-try-none { margin: 0; color: var(--fd-muted); font-size: 13.5px; }\n.fd-try-none[hidden] { display: none; }\n/* A choice's options written here, or taken from one of the app's lists: which list, and what it changes with. */\n.fd-q-source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-block-end: 8px; }\n.fd-q-source[hidden] { display: none; }\n.fd-q-source-words { flex-basis: 100%; font-size: 13px; font-weight: 600; }\n.fd-q-source-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }\n.fd-q-list { display: grid; gap: 10px; }\n.fd-q-list[hidden] { display: none; }\n.fd-q-list-name { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }\n.fd-q-list-name > [hidden] { display: none; }\n.fd-q-depends { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }\n.fd-q-depends > legend { padding: 0; margin-block-end: 4px; font-size: 13px; font-weight: 600; }\n.fd-q-depends-boxes { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 120px; overflow: auto; }\n.fd-q-depends-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }\n.fd-q-list-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-q-list-note[hidden] { display: none; }\n";

package/src/lib/styles-json.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DESIGNER_JSON_CSS = void 0;
+/**
+ * The JSON view's look, and Try it's drawer of data and problems: the box the
+ * page is typed in, its line numbers and marked lines, the problems under it.
+ */
+exports.DESIGNER_JSON_CSS = `
+.fd-json { display: grid; gap: 12px; min-width: 0; }
+.fd-json[hidden] { display: none; }
+.fd-json-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); padding: 10px 14px; }
+.fd-json-title { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; }
+.fd-json-heading { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.35; }
+.fd-json-state { margin: 0; font-size: 13px; line-height: 1.4; color: var(--fd-muted); }
+.fd-json-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+/* Leaving with changes not applied: asked here, never in a browser dialog. */
+.fd-json-leave { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-radius: var(--fd-radius); background: var(--fd-warning-soft); color: var(--fd-text); }
+.fd-json-leave[hidden] { display: none; }
+.fd-json-leave-text { margin: 0; flex: 1 1 240px; font-weight: 600; }
+/* The box: numbers and text in one scroll of their own; long lines scroll inside the text. Its line is 20px and its top 12px, as json-code.ts counts. */
+.fd-json-code {
+  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
+  max-height: min(56vh, 640px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius);
+  font: 13px/20px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+}
+.fd-json-code:focus-within { border-color: var(--fd-accent); }
+.fd-json-gutter {
+  margin: 0; padding: 12px 10px 24px 12px; min-width: 3ch; box-sizing: border-box; min-height: 100%;
+  font: inherit; text-align: end; color: var(--fd-muted); background: var(--fd-page); border-inline-end: 1px solid var(--fd-border);
+  user-select: none; -webkit-user-select: none;
+}
+.fd-json-input {
+  display: block; box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 12px 14px 24px; border: 0; border-radius: 0;
+  font: inherit; color: var(--fd-text); background: transparent; resize: none; outline: none; box-shadow: none;
+  white-space: pre; overflow-x: auto; overflow-y: hidden; tab-size: 2; caret-color: var(--fd-accent);
+  height: calc(var(--fd-json-lines, 1) * 20px + 36px);
+}
+.fd-designer .fd-json-input:focus, .fd-designer .fd-json-input:focus-visible { outline: none; box-shadow: none; }
+.fd-json-marks { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
+.fd-json-mark { position: absolute; inset-inline: 0; height: 20px; background: color-mix(in srgb, var(--fd-error) 12%, transparent); border-inline-start: 3px solid var(--fd-error); }
+.fd-json-mark[data-severity="should"] { background: color-mix(in srgb, var(--fd-warning) 12%, transparent); border-inline-start-color: var(--fd-warning); }
+.fd-json-hint { margin: 0; font-size: 12.5px; color: var(--fd-muted); }
+.fd-json-problems { list-style: none; margin: 0; padding: 0; display: grid; background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); }
+.fd-json-problems:empty { display: none; }
+.fd-json-problem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; }
+.fd-json-problem + .fd-json-problem { border-block-start: 1px solid var(--fd-border); }
+.fd-json-at {
+  all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap; padding: 1px 7px; border-radius: 5px;
+  font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--fd-accent); background: var(--fd-accent-soft);
+}
+.fd-json-at:hover { text-decoration: underline; }
+.fd-json-at:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
+.fd-json-severity { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; color: var(--fd-error); background: var(--fd-error-soft); }
+.fd-json-problem[data-severity="should"] .fd-json-severity { color: var(--fd-warning); background: var(--fd-warning-soft); }
+.fd-json-message { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
+.fd-json-fix { min-height: 28px; padding: 2px 6px; font-size: 13px; font-weight: 600; }
+/* Try it's drawer: the answers as JSON and the problems they have, kept in sight as the page is filled. */
+.fd-try-drawer {
+  position: sticky; bottom: 8px; z-index: 5; display: grid; margin-inline: auto; width: 100%; max-width: 1100px; box-sizing: border-box;
+  background: var(--fd-surface); border: 1px solid var(--fd-border); border-radius: var(--fd-radius); box-shadow: 0 -6px 18px rgba(15, 20, 25, 0.08);
+}
+.fd-try-drawer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 2px 10px; }
+.fd-try-drawer-bar:has(+ .fd-try-panels:not([hidden])) { border-block-end: 1px solid var(--fd-border); }
+.fd-try-tabs { display: flex; gap: 2px; margin-inline-end: auto; }
+.fd-try-tab {
+  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px 7px;
+  font-size: 13.5px; font-weight: 600; color: var(--fd-muted); border-block-end: 2px solid transparent;
+}
+.fd-try-tab[aria-expanded="true"] { color: var(--fd-text); border-block-end-color: var(--fd-accent); }
+.fd-try-tab:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; border-radius: 4px; }
+.fd-try-count { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--fd-error-soft); color: var(--fd-error); }
+.fd-try-count[hidden] { display: none; }
+.fd-try-said { font-size: 12.5px; color: var(--fd-muted); }
+.fd-try-said:empty { display: none; }
+.fd-try-copy, .fd-try-fold { min-height: 30px; padding: 2px 6px; font-size: 13px; font-weight: 600; }
+.fd-try-panels { max-height: min(260px, 38vh); overflow: auto; overscroll-behavior: contain; }
+.fd-try-panels[hidden] { display: none; }
+.fd-try-panel { padding: 10px 14px; }
+.fd-try-panel[hidden] { display: none; }
+.fd-try-data { margin: 0; font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; color: var(--fd-text); }
+.fd-try-data:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 2px; }
+.fd-try-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
+.fd-try-problems:empty { display: none; }
+.fd-try-problem { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; padding: 6px 8px; border-radius: 6px; font-size: 13.5px; line-height: 1.45; }
+.fd-try-problem:hover { background: var(--fd-page); }
+.fd-try-problem:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: -2px; }
+.fd-try-problem strong { font-weight: 600; }
+.fd-try-problem span { color: var(--fd-error); }
+.fd-try-problem[data-warning] span { color: var(--fd-warning); }
+.fd-try-none { margin: 0; color: var(--fd-muted); font-size: 13.5px; }
+.fd-try-none[hidden] { display: none; }
+/* A choice's options written here, or taken from one of the app's lists: which list, and what it changes with. */
+.fd-q-source { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-block-end: 8px; }
+.fd-q-source[hidden] { display: none; }
+.fd-q-source-words { flex-basis: 100%; font-size: 13px; font-weight: 600; }
+.fd-q-source-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
+.fd-q-list { display: grid; gap: 10px; }
+.fd-q-list[hidden] { display: none; }
+.fd-q-list-name { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
+.fd-q-list-name > [hidden] { display: none; }
+.fd-q-depends { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
+.fd-q-depends > legend { padding: 0; margin-block-end: 4px; font-size: 13px; font-weight: 600; }
+.fd-q-depends-boxes { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 120px; overflow: auto; }
+.fd-q-depends-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
+.fd-q-list-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }
+.fd-q-list-note[hidden] { display: none; }
+`;
+//# sourceMappingURL=styles-json.js.map

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

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