flexdesk 0.18.0 → 0.18.2

package/dist/flexdesk.css

@@ -4899,14 +4899,14 @@ body.twm-window-maximized .twm-resize-handle {
 .twm-wspicker-field--open {
     outline: none;
     background: var(--state-active);
-    border-color: var(--accent-bright);
+    border-color: var(--twm-wspicker-field-focus-border);
 }
 .twm-wspicker-field [hidden] {
     display: none;
 }
 .twm-wspicker-field__icon.material-symbols-outlined {
     flex: none;
-    color: var(--accent-bright);
+    color: var(--twm-wspicker-field-icon);
     font-size: 15px;
     opacity: 0.85;
 }
@@ -4921,11 +4921,11 @@ body.twm-window-maximized .twm-resize-handle {
     white-space: nowrap;
 }
 .twm-wspicker-field--muted .twm-wspicker-field__name {
-    font-style: italic;
-    opacity: 0.55;
+    font-style: var(--twm-wspicker-field-muted-style);
+    opacity: var(--twm-wspicker-field-muted-opacity);
 }
 .twm-wspicker-field--muted .twm-wspicker-field__icon.material-symbols-outlined {
-    color: var(--text-muted);
+    color: var(--twm-wspicker-field-muted-icon);
 }
 .twm-wspicker-field__key {
     flex: none;
@@ -5063,6 +5063,10 @@ body.twm-window-maximized .twm-resize-handle {
     background: var(--state-selected);
     color: var(--text-bright);
 }
+/* A row with focus wears the highlight; no ring as well. */
+.twm-wspicker__row:focus {
+    outline: none;
+}
 .twm-wspicker__row--disabled {
     color: var(--text-dim);
     cursor: default;
@@ -5143,6 +5147,10 @@ body.twm-window-maximized .twm-resize-handle {
     width: calc(100% - 2 * var(--space-md));
     margin: var(--space-xs) var(--space-md);
 }
+.twm-wspicker__more[aria-disabled="true"] {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
 .twm-wspicker__more-label {
     min-width: 0;
     overflow: hidden;
@@ -5392,6 +5400,9 @@ body.twm-window-maximized .twm-resize-handle {
 .twm-filter-builder__select--field {
     flex: 0 1 140px;
 }
+.twm-filter-builder__select--unknown {
+    flex: 0 1 auto;
+}
 .twm-filter-builder__select--op {
     flex: 0 1 120px;
 }
@@ -12372,6 +12383,23 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 .twm-plot-config__row > .twm-plot-config__input--select {
     flex: 0 1 auto;
 }
+/* A reference line's value that may name a constant, and what the name is now. */
+.twm-plot-config__constant {
+    display: inline-flex;
+    flex: 1 1 140px;
+    align-items: center;
+    gap: var(--space-xs);
+    min-width: 0;
+}
+.twm-plot-config__constant > .twm-plot-config__input {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.twm-plot-config__constant-value {
+    flex: none;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
 /* On a field line a colour is the swatch and a hex box sized to `#rrggbb`. */
 .twm-plot-config__field > .twm-color-field {
     flex: 0 1 auto;
@@ -13614,6 +13642,55 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     color: var(--twm-flow-warning-text);
 }
 
+/* ── the settings panel as a sheet (variant: 'sheet', 0.18.2) ──────────
+ * Flat: no fill and no chip. The title and the description sit in a margin at
+ * the left, the fields beside them; two sheets in a row are split by a rule, so
+ * a page of them reads as one form in sections. Narrower than 560px, the margin
+ * goes above the fields. */
+.twm-flow-panel--sheet {
+    container-type: inline-size;
+    gap: 0;
+    padding: 14px 0;
+    background: transparent;
+}
+.twm-flow-panel--sheet + .twm-flow-panel--sheet {
+    border-top: 1px solid var(--border-subtle);
+}
+.twm-flow-panel__sheet {
+    display: grid;
+    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
+    gap: 10px 28px;
+    align-items: start;
+}
+.twm-flow-panel__margin {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    padding-top: 5px;
+}
+.twm-flow-panel__body {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    min-width: 0;
+}
+.twm-flow-panel--sheet .twm-flow-panel__icon { display: none; }
+.twm-flow-panel--sheet .twm-flow-panel__titles { flex-basis: auto; }
+.twm-flow-panel--sheet .twm-flow-panel__title,
+.twm-flow-panel--sheet .twm-flow-panel__title-input {
+    font-size: var(--font-size-md);
+}
+.twm-flow-panel--sheet .twm-flow-panel__description {
+    font-size: var(--font-size-xs);
+    color: var(--twm-flow-muted);
+}
+.twm-flow-panel--sheet .twm-flow-panel__fields { gap: 10px; }
+.twm-flow-panel--sheet .twm-flow-field__label { flex-basis: 110px; }
+@container (max-width: 560px) {
+    .twm-flow-panel__sheet { grid-template-columns: minmax(0, 1fr); }
+}
+
 /* ── a field: its label, its control, its finding, its help ─────────── */
 .twm-flow-field {
     display: flex;
@@ -13759,6 +13836,7 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     resize: vertical;
 }
 .twm-flow-checkbox {
+    align-self: flex-start;
     margin: 6px 0 0;
     accent-color: var(--twm-flow-focus);
 }

package/dist/flow.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-DNJ3N4T4.js";
 import {
   DataTable
-} from "./chunk-U5GKJUOC.js";
+} from "./chunk-QRBOIUU3.js";
 import "./chunk-VLOAI3HS.js";
 import {
   choiceList,
@@ -2197,11 +2197,16 @@ function createSettingsPanel({
   values = null,
   valuesNote = null,
   columns = null,
-  host = null
+  host = null,
+  variant = "card"
 } = {}) {
   if (!widgets?.get) throw new Error("createSettingsPanel needs a widget registry (createWidgetRegistry()).");
+  if (variant !== "card" && variant !== "sheet") {
+    throw new Error(`createSettingsPanel's variant is 'card' or 'sheet', not ${JSON.stringify(variant)}.`);
+  }
+  const sheet = variant === "sheet";
   const S = createStrings(strings);
-  const root = el("section", "twm-flow-panel");
+  const root = el("section", sheet ? "twm-flow-panel twm-flow-panel--sheet" : "twm-flow-panel");
   root.setAttribute("role", "region");
   root.setAttribute("aria-label", say(S, "settings"));
   if (host) host.appendChild(root);
@@ -2316,15 +2321,22 @@ function createSettingsPanel({
     root.replaceChildren();
     if (!spec) return;
     if (isReadOnly() && readOnlyReason()) root.appendChild(el("p", "twm-flow-panel__readonly", readOnlyReason()));
-    root.appendChild(paintHeader());
-    if (spec.description) root.appendChild(el("p", "twm-flow-panel__description", spec.description));
-    if (spec.idLine) root.appendChild(el("div", "twm-flow-panel__id", spec.idLine));
+    const margin = sheet ? el("div", "twm-flow-panel__margin") : root;
+    const body = sheet ? el("div", "twm-flow-panel__body") : root;
+    if (sheet) {
+      const grid = el("div", "twm-flow-panel__sheet");
+      grid.append(margin, body);
+      root.appendChild(grid);
+    }
+    margin.appendChild(paintHeader());
+    if (spec.description) margin.appendChild(el("p", "twm-flow-panel__description", spec.description));
+    if (spec.idLine) body.appendChild(el("div", "twm-flow-panel__id", spec.idLine));
     findingsBox = el("ul", "twm-flow-panel__findings");
     findingsBox.hidden = true;
-    root.appendChild(findingsBox);
+    body.appendChild(findingsBox);
     slotBefore = el("div", "twm-flow-panel__slot");
     slotBefore.dataset.slot = "before";
-    root.appendChild(slotBefore);
+    body.appendChild(slotBefore);
     const list = el("div", "twm-flow-panel__fields");
     allFields = Array.isArray(spec.fields) ? spec.fields : fieldsFromSchema(spec.type?.config_schema);
     const drawn = visibleFields(allFields, current);
@@ -2361,10 +2373,10 @@ function createSettingsPanel({
       const anchor = placed(e);
       if (anchor === null || !keys.has(anchor)) drawExtra(e);
     }
-    root.appendChild(list);
+    body.appendChild(list);
     slotAfter = el("div", "twm-flow-panel__slot");
     slotAfter.dataset.slot = "after";
-    root.appendChild(slotAfter);
+    body.appendChild(slotAfter);
     paintSlots();
     applyFindings();
   }