@wildwinter/app-shell 0.56.0 → 0.57.0

package/dist/value-rows.d.cts

@@ -50,6 +50,41 @@ declare function foldCaption(name: string, set: number): string;
  */
 declare function extensionFold(): ExtensionFold;
 
+/** A map whose values are records: edited in the grid, summarised in the inspector. */
+declare function isRecordMap(decl: ValueDecl): boolean;
+/** A map key's name: a node's from the host, else the key itself. */
+declare function recordMapKeyLabel(decl: ValueDecl, key: string, adapter?: ValueAdapter): string;
+/** A value as words, the way its control shows it: a pick's or a reference's name, flags joined, a boolean as
+ *  the field's own name. Empty for a value that isn't set. */
+declare function valueText(decl: ValueDecl, value: unknown, adapter?: ValueAdapter): string;
+/** The inspector's summary of a map of records: a line per key, "TAM: smile, nod, WREN", the record's set
+ *  fields in the manifest's order; a key with nothing set is its name alone. */
+declare function recordMapSummary(decl: ValueDecl, value: unknown, adapter?: ValueAdapter): string[];
+interface RecordMapGridOptions {
+    /** The map's declaration: `isRecordMap`. */
+    decl: ValueDecl;
+    /** The node's value, or undefined where it holds none. */
+    value: unknown;
+    /** The host's nodes, for a reference key and the cells' picks and references. */
+    adapter?: ValueAdapter;
+    /** Commit the whole map; undefined clears it. Absent: read-only. */
+    onCommit?: (value: unknown) => void;
+    disabled?: boolean;
+    /** The class on each cell's control, as the host's own rows carry. */
+    controlClassName?: string;
+}
+interface RecordMapGrid {
+    readonly el: HTMLElement;
+    update(opts: RecordMapGridOptions): void;
+}
+/**
+ * The grid: a row per key, a column per record field, each cell the row value-rows draws for that field (so
+ * picks, their checks and their problems are the same as in the inspector), a remove button per row, and the
+ * key adder under it. Keeps its cells across `update`, so a host that redraws on every change keeps the
+ * author's place.
+ */
+declare function recordMapGrid(initial: RecordMapGridOptions): RecordMapGrid;
+
 /** A declaration of any type, as an extension's manifest writes it. */
 interface ValueDecl extends FieldDeclLike {
     /** The caption; the name when absent. */
@@ -135,4 +170,4 @@ interface ValueRows {
 }
 declare function valueRows(): ValueRows;
 
-export { type ExtensionFold, type FoldSectionOptions, type ValueAdapter, type ValueDecl, type ValueNode, type ValueRowHandle, type ValueRowOptions, type ValueRows, extensionFold, foldCaption, isSet, valueRow, valueRows };
+export { type ExtensionFold, type FoldSectionOptions, type RecordMapGrid, type RecordMapGridOptions, type ValueAdapter, type ValueDecl, type ValueNode, type ValueRowHandle, type ValueRowOptions, type ValueRows, extensionFold, foldCaption, isRecordMap, isSet, recordMapGrid, recordMapKeyLabel, recordMapSummary, valueRow, valueRows, valueText };

package/dist/value-rows.d.ts

@@ -50,6 +50,41 @@ declare function foldCaption(name: string, set: number): string;
  */
 declare function extensionFold(): ExtensionFold;
 
+/** A map whose values are records: edited in the grid, summarised in the inspector. */
+declare function isRecordMap(decl: ValueDecl): boolean;
+/** A map key's name: a node's from the host, else the key itself. */
+declare function recordMapKeyLabel(decl: ValueDecl, key: string, adapter?: ValueAdapter): string;
+/** A value as words, the way its control shows it: a pick's or a reference's name, flags joined, a boolean as
+ *  the field's own name. Empty for a value that isn't set. */
+declare function valueText(decl: ValueDecl, value: unknown, adapter?: ValueAdapter): string;
+/** The inspector's summary of a map of records: a line per key, "TAM: smile, nod, WREN", the record's set
+ *  fields in the manifest's order; a key with nothing set is its name alone. */
+declare function recordMapSummary(decl: ValueDecl, value: unknown, adapter?: ValueAdapter): string[];
+interface RecordMapGridOptions {
+    /** The map's declaration: `isRecordMap`. */
+    decl: ValueDecl;
+    /** The node's value, or undefined where it holds none. */
+    value: unknown;
+    /** The host's nodes, for a reference key and the cells' picks and references. */
+    adapter?: ValueAdapter;
+    /** Commit the whole map; undefined clears it. Absent: read-only. */
+    onCommit?: (value: unknown) => void;
+    disabled?: boolean;
+    /** The class on each cell's control, as the host's own rows carry. */
+    controlClassName?: string;
+}
+interface RecordMapGrid {
+    readonly el: HTMLElement;
+    update(opts: RecordMapGridOptions): void;
+}
+/**
+ * The grid: a row per key, a column per record field, each cell the row value-rows draws for that field (so
+ * picks, their checks and their problems are the same as in the inspector), a remove button per row, and the
+ * key adder under it. Keeps its cells across `update`, so a host that redraws on every change keeps the
+ * author's place.
+ */
+declare function recordMapGrid(initial: RecordMapGridOptions): RecordMapGrid;
+
 /** A declaration of any type, as an extension's manifest writes it. */
 interface ValueDecl extends FieldDeclLike {
     /** The caption; the name when absent. */
@@ -135,4 +170,4 @@ interface ValueRows {
 }
 declare function valueRows(): ValueRows;
 
-export { type ExtensionFold, type FoldSectionOptions, type ValueAdapter, type ValueDecl, type ValueNode, type ValueRowHandle, type ValueRowOptions, type ValueRows, extensionFold, foldCaption, isSet, valueRow, valueRows };
+export { type ExtensionFold, type FoldSectionOptions, type RecordMapGrid, type RecordMapGridOptions, type ValueAdapter, type ValueDecl, type ValueNode, type ValueRowHandle, type ValueRowOptions, type ValueRows, extensionFold, foldCaption, isRecordMap, isSet, recordMapGrid, recordMapKeyLabel, recordMapSummary, valueRow, valueRows, valueText };

package/dist/value-rows.js

@@ -1,5 +1,5 @@
 import { fieldRow, fieldRowFocus } from './chunk-XJM733E6.js';
-import { el, iconNode, iconBtn, moveItem } from './chunk-W4WC4FO5.js';
+import { el, iconBtn, iconNode, moveItem } from './chunk-W4WC4FO5.js';
 import { stableStringify, defaultOf, pickChoices, valueProblems } from '@wildwinter/toolkit/extensions';
 
 var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
@@ -78,13 +78,198 @@ function extensionFold() {
   };
   return fold;
 }
+var isObject2 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+function isRecordMap(decl) {
+  return decl.type === "map" && decl.of?.type === "record";
+}
+function recordMapKeyLabel(decl, key, adapter) {
+  const kind = decl.key?.type === "reference" ? decl.key.to ?? "" : void 0;
+  if (kind === void 0 || !adapter) return key;
+  return adapter.nodes(kind).find((n) => n.id === key)?.label ?? adapter.label?.(kind, key) ?? key;
+}
+function valueText(decl, value, adapter) {
+  if (!isSet(decl, value)) return "";
+  if (decl.type === "pick" && typeof value === "string") {
+    const choice = pickChoices(decl, {
+      ...adapter ? { nodes: (kind) => adapter.nodes(kind) } : {},
+      ...adapter?.list ? { list: (name) => adapter.list(name) } : {}
+    }).find((c) => c.value === value);
+    return choice?.label ?? value;
+  }
+  if (decl.type === "reference" && typeof value === "string" && decl.to !== void 0 && adapter) {
+    return adapter.nodes(decl.to).find((n) => n.id === value)?.label ?? adapter.label?.(decl.to, value) ?? value;
+  }
+  if (decl.type === "boolean") return value === true ? decl.label ?? decl.name : "";
+  if (Array.isArray(value)) return value.map(String).join(", ");
+  if (isObject2(value)) return JSON.stringify(value);
+  return String(value);
+}
+function recordMapSummary(decl, value, adapter) {
+  if (!isObject2(value)) return [];
+  const fields = decl.of?.fields ?? [];
+  return Object.entries(value).map(([key, record]) => {
+    const name = recordMapKeyLabel(decl, key, adapter);
+    const words = isObject2(record) ? fields.map((f) => valueText(f, record[f.name], adapter)).filter((w) => w !== "") : [];
+    return words.length > 0 ? `${name}: ${words.join(", ")}` : name;
+  });
+}
+function recordMapGrid(initial) {
+  let opts = initial;
+  const root = el("div", "shell-recordgrid");
+  const table = el("table", "shell-recordgrid-table");
+  const head = el("thead");
+  const body = el("tbody");
+  table.append(head, body);
+  const adder = el("div", "shell-recordgrid-add");
+  const empty = el("p", "shell-recordgrid-empty");
+  root.append(table, empty, adder);
+  const cells = /* @__PURE__ */ new Map();
+  let addKey = "";
+  const editable = () => opts.onCommit !== void 0 && opts.disabled !== true;
+  const held = () => isObject2(opts.value) ? opts.value : {};
+  const commit = (next) => {
+    const v = Object.keys(next).length > 0 ? next : void 0;
+    opts = { ...opts, value: v };
+    draw();
+    opts.onCommit?.(v);
+  };
+  const cell = (key, field, record) => {
+    const id = `${key}\0${field.name}`;
+    const o = {
+      decl: field,
+      value: record[field.name],
+      ...opts.adapter ? { adapter: opts.adapter } : {},
+      ...opts.disabled !== void 0 ? { disabled: opts.disabled } : {},
+      ...opts.controlClassName !== void 0 ? { controlClassName: opts.controlClassName } : {},
+      ...editable() ? {
+        onCommit: (v) => {
+          const map = held();
+          const rec = { ...isObject2(map[key]) ? map[key] : {} };
+          if (v === void 0) delete rec[field.name];
+          else rec[field.name] = v;
+          commit({ ...map, [key]: rec });
+        }
+      } : {},
+      className: "shell-recordgrid-cell"
+    };
+    const had = cells.get(id);
+    if (had && had.el.dataset["type"] === field.type) {
+      fieldRowFocus.settle(had.el);
+      had.update(o);
+      fieldRowFocus.restore(had.el);
+      return had.el;
+    }
+    const handle = valueRow(o);
+    handle.el.dataset["type"] = field.type;
+    cells.set(id, handle);
+    return handle.el;
+  };
+  const draw = () => {
+    const decl = opts.decl;
+    const fields = decl.of?.fields ?? [];
+    const map = held();
+    const keys = Object.keys(map);
+    const adapter = opts.adapter;
+    const keyKind = decl.key?.type === "reference" ? decl.key.to ?? "" : void 0;
+    const keyNodes = keyKind !== void 0 && adapter ? adapter.nodes(keyKind) : void 0;
+    const hr = el("tr");
+    hr.append(el("th", "shell-recordgrid-keyhead", recordMapKeyHeading(decl)));
+    for (const f of fields) {
+      const th = el("th", void 0, f.label ?? f.name);
+      const help = f.help ?? f.purpose;
+      if (help) th.dataset["tip"] = help;
+      hr.append(th);
+    }
+    hr.append(el("th", "shell-recordgrid-tools"));
+    head.replaceChildren(hr);
+    const used = /* @__PURE__ */ new Set();
+    const rows = [];
+    for (const key of keys) {
+      const record = isObject2(map[key]) ? map[key] : {};
+      const tr = el("tr");
+      tr.dataset["key"] = key;
+      const name = recordMapKeyLabel(decl, key, adapter);
+      const keyCell = el("th", "shell-recordgrid-key", name);
+      keyCell.setAttribute("scope", "row");
+      if (keyNodes !== void 0 && adapter && keyNodes.every((n) => n.id !== key) && adapter.label?.(keyKind, key) === void 0) {
+        keyCell.append(el("span", "shell-recordgrid-gone", " (not here any more)"));
+      }
+      tr.append(keyCell);
+      for (const f of fields) {
+        used.add(`${key}\0${f.name}`);
+        const td = el("td");
+        td.append(cell(key, f, record));
+        tr.append(td);
+      }
+      const tools = el("td", "shell-recordgrid-tools");
+      if (editable()) tools.append(iconBtn("close", `Remove ${name}`, () => {
+        const next = { ...held() };
+        delete next[key];
+        commit(next);
+      }));
+      tr.append(tools);
+      rows.push(tr);
+    }
+    for (const id of [...cells.keys()]) if (!used.has(id)) cells.delete(id);
+    body.replaceChildren(...rows);
+    table.hidden = keys.length === 0;
+    empty.textContent = keys.length === 0 ? "None yet." : "";
+    empty.hidden = keys.length !== 0;
+    adder.replaceChildren();
+    if (!editable()) return;
+    const add = (k) => {
+      if (k === "" || Object.prototype.hasOwnProperty.call(held(), k)) return;
+      commit({ ...held(), [k]: defaultOf(decl.of) });
+    };
+    if (keyNodes !== void 0) {
+      const pick = el("select", `field shell-valuerow-key${opts.controlClassName ? ` ${opts.controlClassName}` : ""}`);
+      const first = el("option", void 0, "Add...");
+      first.value = "";
+      pick.append(first);
+      for (const n of keyNodes.filter((n2) => !Object.prototype.hasOwnProperty.call(map, n2.id))) {
+        const opt = el("option", void 0, n.label);
+        opt.value = n.id;
+        pick.append(opt);
+      }
+      pick.disabled = pick.options.length === 1;
+      pick.addEventListener("change", () => add(pick.value));
+      adder.append(pick);
+    } else {
+      const input = el("input", "field shell-valuerow-key");
+      input.type = "text";
+      input.placeholder = "New key";
+      input.value = addKey;
+      input.addEventListener("input", () => {
+        addKey = input.value;
+      });
+      const go = () => {
+        const k = input.value.trim();
+        addKey = "";
+        add(k);
+      };
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") go();
+      });
+      adder.append(input, iconBtn("add", "Add", go));
+    }
+  };
+  draw();
+  return { el: root, update: (o) => {
+    opts = o;
+    draw();
+  } };
+}
+function recordMapKeyHeading(decl) {
+  const to = decl.key?.type === "reference" ? decl.key.to : void 0;
+  return to ? to.charAt(0).toUpperCase() + to.slice(1) : "Key";
+}
 
 // src/value-rows.ts
 function nodeLabel(adapter, kind, id) {
   return adapter.nodes(kind).find((n) => n.id === id)?.label ?? adapter.label?.(kind, id);
 }
 var SCALARS = /* @__PURE__ */ new Set(["text", "multiline", "number", "boolean", "enum", "flags", "quality", "string"]);
-var isObject2 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+var isObject3 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 var nameOf = (decl) => decl.label ?? decl.name;
 var asDecl = (d, name) => ({ ...d, name: d.name ?? name });
 function ownProblems(decl, value, adapter) {
@@ -323,31 +508,31 @@ function structuredRow(initial) {
       }, controls));
     };
     if (decl.type === "record") {
-      const value = isObject2(o.value) ? o.value : void 0;
+      const value = isObject3(o.value) ? o.value : void 0;
       const required = value === void 0 ? [] : valueProblems(decl, value).filter((p) => p.code === "required");
       for (const f of decl.fields ?? []) {
         const missing = required.find((p) => p.path === f.name);
         child(`f:${f.name}`, f, value?.[f.name], (v) => {
-          const next = { ...isObject2(opts.value) ? opts.value : {} };
+          const next = { ...isObject3(opts.value) ? opts.value : {} };
           if (v === void 0) delete next[f.name];
           else next[f.name] = v;
           commit(Object.keys(next).length > 0 ? next : void 0);
         }, void 0, void 0, missing ? "Required." : void 0);
       }
     } else if (decl.type === "map" && decl.of) {
-      const value = isObject2(o.value) ? o.value : {};
+      const value = isObject3(o.value) ? o.value : {};
       const keyNodes = decl.key?.type === "reference" && o.adapter ? o.adapter.nodes(decl.key.to ?? "") : void 0;
       const keyKind = decl.key?.to ?? "";
       const keyLabel = (k) => (o.adapter && keyNodes !== void 0 ? nodeLabel(o.adapter, keyKind, k) : void 0) ?? k;
       for (const k of Object.keys(value)) {
         const remove = editable() ? [iconBtn("close", `Remove ${keyLabel(k)}`, () => {
-          const next = { ...isObject2(opts.value) ? opts.value : {} };
+          const next = { ...isObject3(opts.value) ? opts.value : {} };
           delete next[k];
           commit(Object.keys(next).length > 0 ? next : void 0);
         })] : [];
         const gone = keyNodes !== void 0 && o.adapter && nodeLabel(o.adapter, keyKind, k) === void 0 ? `${k} is not here any more.` : void 0;
         child(`k:${k}`, asDecl(decl.of, k), value[k], (v) => {
-          const next = { ...isObject2(opts.value) ? opts.value : {} };
+          const next = { ...isObject3(opts.value) ? opts.value : {} };
           next[k] = v === void 0 ? defaultOf(decl.of) : v;
           commit(next);
         }, remove, keyLabel(k), gone);
@@ -391,7 +576,7 @@ function structuredRow(initial) {
       }
     } else if (decl.type === "list" && decl.of) {
       const value = Array.isArray(o.value) ? o.value : [];
-      const idOf = (item, i) => decl.id !== void 0 && isObject2(item) && typeof item[decl.id] === "string" ? `id:${item[decl.id]}` : `i:${i}`;
+      const idOf = (item, i) => decl.id !== void 0 && isObject3(item) && typeof item[decl.id] === "string" ? `id:${item[decl.id]}` : `i:${i}`;
       value.forEach((item, i) => {
         const set = (next) => commit(next.length > 0 ? next : void 0);
         const controls = editable() ? [
@@ -405,7 +590,7 @@ function structuredRow(initial) {
           }, i === value.length - 1),
           iconBtn("close", "Remove", () => set(value.filter((_, j) => j !== i)), false, true)
         ] : [];
-        const itemLabel = decl.id !== void 0 && isObject2(item) && typeof item[decl.id] === "string" ? item[decl.id] : `${i + 1}`;
+        const itemLabel = decl.id !== void 0 && isObject3(item) && typeof item[decl.id] === "string" ? item[decl.id] : `${i + 1}`;
         child(idOf(item, i), asDecl(decl.of, itemLabel), item, (v) => {
           const next = [...Array.isArray(opts.value) ? opts.value : []];
           next[i] = v === void 0 ? defaultOf(decl.of) : v;
@@ -416,8 +601,8 @@ function structuredRow(initial) {
       if (editable()) {
         adder.append(iconBtn("add", "Add", () => {
           const fresh = defaultOf(decl.of);
-          if (decl.id !== void 0 && isObject2(fresh)) {
-            const taken = new Set(value.map((x) => isObject2(x) ? x[decl.id] : void 0));
+          if (decl.id !== void 0 && isObject3(fresh)) {
+            const taken = new Set(value.map((x) => isObject3(x) ? x[decl.id] : void 0));
             let n = value.length + 1;
             while (taken.has(`item-${n}`)) n++;
             fresh[decl.id] = `item-${n}`;
@@ -466,6 +651,6 @@ function valueRows() {
   };
 }
 
-export { extensionFold, foldCaption, isSet, valueRow, valueRows };
+export { extensionFold, foldCaption, isRecordMap, isSet, recordMapGrid, recordMapKeyLabel, recordMapSummary, valueRow, valueRows, valueText };
 //# sourceMappingURL=value-rows.js.map
 //# sourceMappingURL=value-rows.js.map