@valbuild/core 0.106.0 → 0.110.0

package/dist/{index-2cef45cc.cjs.dev.js → index-409a38c3.cjs.dev.js}

@@ -215,8 +215,32 @@ var Schema = /*#__PURE__*/function () {
      * For example, if you have an object schema, you must assert each key / value pair manually.
      */
   }, {
-    key: "appendValidationError",
+    key: "executePreviewItem",
     value:
+    /**
+     * This value AS A PREVIEW — what a container's row, a reference dropdown or
+     * a search hit shows for it. Runs the schema's own `preview` closure;
+     * `null` when none is declared (the consumer falls back to a generic
+     * preview). A union dispatches to the matching member's closure.
+     *
+     * Containers call this on their ITEM schema per item — that is how
+     * `executePreview` reifies an {@link ArrayPreview} / {@link RecordPreview}
+     * from item-level declarations.
+     */
+    function executePreviewItem(src) {
+      return null;
+    }
+    /**
+     * Could {@link executePreviewItem} ever answer? A container reifies a rows
+     * preview only when its item schema says yes — asked here rather than by
+     * running the closure, so an EMPTY list still previews as an empty list
+     * instead of not at all.
+     */
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return false;
+    }
     // remote(): Src extends RemoteCompatibleSource
     //   ? Schema<RemoteSource<Src>>
     //   : never {
@@ -225,7 +249,9 @@ var Schema = /*#__PURE__*/function () {
     // }
 
     /** MUTATES! since internal and perf sensitive */
-    function appendValidationError(current, path, message, value, schemaError) {
+  }, {
+    key: "appendValidationError",
+    value: function appendValidationError(current, path, message, value, schemaError) {
       if (current) {
         if (current[path]) {
           current[path].push({
@@ -422,6 +448,7 @@ var StringSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
     var isHidden = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
     var description = arguments.length > 7 ? arguments[7] : undefined;
+    var previewInput = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
     _classCallCheck(this, StringSchema);
     _this = _callSuper(this, StringSchema);
     _this.options = options;
@@ -432,13 +459,14 @@ var StringSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(StringSchema, _Schema);
   return _createClass(StringSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.previewInput);
     }
 
     /**
@@ -454,7 +482,7 @@ var StringSchema = /*#__PURE__*/function (_Schema) {
     value: function minLength(_minLength) {
       return new StringSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         minLength: _minLength
-      }), this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description, this.previewInput);
     }
 
     /**
@@ -470,7 +498,7 @@ var StringSchema = /*#__PURE__*/function (_Schema) {
     value: function maxLength(_maxLength) {
       return new StringSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         maxLength: _maxLength
-      }), this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description, this.previewInput);
     }
   }, {
     key: "regexp",
@@ -478,12 +506,12 @@ var StringSchema = /*#__PURE__*/function (_Schema) {
       return new StringSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         regexp: _regexp,
         regExpMessage: message
-      }), this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions.concat(validationFunction), this.renderInput, this.isReadonly, this.isHidden, this.description);
+      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions.concat(validationFunction), this.renderInput, this.isReadonly, this.isHidden, this.description, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -556,22 +584,22 @@ var StringSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new StringSchema(this.options, true, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description);
+      return new StringSchema(this.options, true, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, true, this.isHidden, this.description);
+      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, true, this.isHidden, this.description, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, true, this.description);
+      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, true, this.description, this.previewInput);
     }
   }, {
     key: "raw",
     value: function raw() {
-      return new StringSchema(this.options, this.opt, true, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description);
+      return new StringSchema(this.options, this.opt, true, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -587,6 +615,7 @@ var StringSchema = /*#__PURE__*/function (_Schema) {
       return {
         type: "string",
         render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         options: {
           maxLength: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.maxLength,
           minLength: (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.minLength,
@@ -616,7 +645,33 @@ var StringSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "render",
     value: function render(input) {
-      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions, input, this.isReadonly, this.isHidden, this.description);
+      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions, input, this.isReadonly, this.isHidden, this.description, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new StringSchema(this.options, this.opt, this.isRaw, this.customValidateFunctions, this.renderInput, this.isReadonly, this.isHidden, this.description, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
     }
 
     /**
@@ -643,6 +698,8 @@ var ObjectSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var isHidden = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var description = arguments.length > 5 ? arguments[5] : undefined;
+    var renderInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var previewInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
     _classCallCheck(this, ObjectSchema);
     _this = _callSuper(this, ObjectSchema);
     _this.items = items;
@@ -651,18 +708,20 @@ var ObjectSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(ObjectSchema, _Schema);
   return _createClass(ObjectSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new ObjectSchema(this.items, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new ObjectSchema(this.items, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new ObjectSchema(this.items, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description);
+      return new ObjectSchema(this.items, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -782,17 +841,18 @@ var ObjectSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new ObjectSchema(this.items, true, [], this.isReadonly, this.isHidden, this.description);
+      // Explicit type args: `previewInput` would otherwise pin inference to `Src`.
+      return new ObjectSchema(this.items, true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new ObjectSchema(this.items, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new ObjectSchema(this.items, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new ObjectSchema(this.items, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new ObjectSchema(this.items, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -801,12 +861,53 @@ var ObjectSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new ObjectSchema(this.items, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new ObjectSchema(this.items, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       return {
         type: "object",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         items: Object.fromEntries(Object.entries(this.items).map(function (_ref5) {
           var _ref6 = _slicedToArray(_ref5, 2),
             key = _ref6[0],
@@ -867,6 +968,7 @@ var ArraySchema = /*#__PURE__*/function (_Schema) {
     var isHidden = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var description = arguments.length > 5 ? arguments[5] : undefined;
     var previewInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var renderInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
     _classCallCheck(this, ArraySchema);
     _this = _callSuper(this, ArraySchema);
     _this.item = item;
@@ -876,18 +978,19 @@ var ArraySchema = /*#__PURE__*/function (_Schema) {
     _this.isHidden = isHidden;
     _this.description = description;
     _this.previewInput = previewInput;
+    _this.renderInput = renderInput;
     return _this;
   }
   _inherits(ArraySchema, _Schema);
   return _createClass(ArraySchema, [{
     key: "describe",
     value: function describe(description) {
-      return new ArraySchema(this.item, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.previewInput);
+      return new ArraySchema(this.item, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.previewInput, this.renderInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new ArraySchema(this.item, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.previewInput);
+      return new ArraySchema(this.item, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.previewInput, this.renderInput);
     }
   }, {
     key: "executeValidate",
@@ -954,17 +1057,18 @@ var ArraySchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new ArraySchema(this.item, true, [], this.isReadonly, this.isHidden, this.description, this.previewInput);
+      // Explicit type args: `previewInput` would otherwise pin inference to `Src`.
+      return new ArraySchema(this.item, true, [], this.isReadonly, this.isHidden, this.description, this.previewInput, this.renderInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new ArraySchema(this.item, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.previewInput);
+      return new ArraySchema(this.item, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.previewInput, this.renderInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new ArraySchema(this.item, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.previewInput);
+      return new ArraySchema(this.item, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.previewInput, this.renderInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -976,9 +1080,10 @@ var ArraySchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       return {
         type: "array",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
         item: this.item["executeSerialize"](),
         opt: this.opt,
         preview: this.previewInput ? true : undefined,
@@ -1011,8 +1116,10 @@ var ArraySchema = /*#__PURE__*/function (_Schema) {
           res[_key] = itemResult[_key];
         }
       }
-      if (this.previewInput) {
-        var select = this.previewInput;
+      // The rows preview comes from the ITEM schema's own `preview` — the
+      // container just runs it per row. Asked as a fact rather than by running
+      // the closure, so an empty list still previews as an empty list.
+      if (this.item["declaresItemPreview"]()) {
         // The whole list when the LIST is what is being shown; only the wanted
         // rows when it is not. The user's closure is the real expense — a list
         // view asks for the container and gets every row, a single field asks for
@@ -1023,26 +1130,30 @@ var ArraySchema = /*#__PURE__*/function (_Schema) {
         var window = scope !== undefined && !scope.wants(sourcePath) ? scope : null;
         var items = [];
         for (var index = 0; index < src.length; index++) {
+          var _itemSrc = src[index];
+          if (_itemSrc === null || _itemSrc === undefined) {
+            continue;
+          }
           if (window !== null && !window.wantsUnder(unsafeCreateSourcePath(sourcePath, index))) {
             continue;
           }
-          // Per ITEM, not per list, matching what `record` already does: the
-          // closure is user code, and one row whose data trips it up must not take
-          // out the whole list. Before scoping, one throwing row produced an error
-          // at the container and no items at all.
+          // Per ITEM, not per list: the closure is user code, and one row whose
+          // data trips it up must not take out the whole list. Before scoping,
+          // one throwing row produced an error at the container and no items at
+          // all.
           try {
             // NB NB: display is actually defined by the user
-            var _select = select({
-                val: src[index]
-              }),
-              title = _select.title,
-              subtitle = _select.subtitle,
-              image = _select.image;
-            items.push([index, {
-              title: title,
-              subtitle: subtitle,
-              image: image
-            }]);
+            var _item = this.item["executePreviewItem"](_itemSrc);
+            if (_item !== null) {
+              var title = _item.title,
+                subtitle = _item.subtitle,
+                image = _item.image;
+              items.push([index, {
+                title: title,
+                subtitle: subtitle,
+                image: image
+              }]);
+            }
           } catch (e) {
             res[unsafeCreateSourcePath(sourcePath, index)] = {
               status: "error",
@@ -1060,18 +1171,45 @@ var ArraySchema = /*#__PURE__*/function (_Schema) {
       }
       return res;
     }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
 
     /**
-     * What the editor shows for each ITEM of this array: a title, and optionally a
-     * subtitle and an image.
-     *
-     * `select` is your own code over the item's source, so it is run on demand for
-     * the rows that are actually being looked at — see `PreviewScope`.
+     * How this ARRAY ITSELF is shown where a preview of it is needed — when it
+     * is the item of another container, in search, in references. What its rows
+     * show is the ITEM schema's `preview`, not this. Never how the field is
+     * edited (that is `render`). See `preview.ts`.
      */
   }, {
     key: "preview",
     value: function preview(select) {
-      return new ArraySchema(this.item, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, select);
+      return new ArraySchema(this.item, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, select, this.renderInput);
+    }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new ArraySchema(this.item, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.previewInput, input);
     }
   }]);
 }(Schema);
@@ -1087,6 +1225,8 @@ var LiteralSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var isHidden = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var description = arguments.length > 5 ? arguments[5] : undefined;
+    var renderInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var previewInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
     _classCallCheck(this, LiteralSchema);
     _this = _callSuper(this, LiteralSchema);
     _this.value = value;
@@ -1095,18 +1235,20 @@ var LiteralSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(LiteralSchema, _Schema);
   return _createClass(LiteralSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new LiteralSchema(this.value, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new LiteralSchema(this.value, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new LiteralSchema(this.value, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description);
+      return new LiteralSchema(this.value, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -1169,17 +1311,17 @@ var LiteralSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new LiteralSchema(this.value, true, [], this.isReadonly, this.isHidden, this.description);
+      return new LiteralSchema(this.value, true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new LiteralSchema(this.value, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new LiteralSchema(this.value, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new LiteralSchema(this.value, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new LiteralSchema(this.value, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -1188,12 +1330,53 @@ var LiteralSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new LiteralSchema(this.value, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new LiteralSchema(this.value, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       return {
         type: "literal",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         value: this.value,
         opt: this.opt,
         customValidate: this.customValidateFunctions && ((_this$customValidateF = this.customValidateFunctions) === null || _this$customValidateF === void 0 ? void 0 : _this$customValidateF.length) > 0,
@@ -1221,6 +1404,8 @@ var UnionSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var isHidden = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
     var description = arguments.length > 6 ? arguments[6] : undefined;
+    var renderInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
+    var previewInput = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
     _classCallCheck(this, UnionSchema);
     _this = _callSuper(this, UnionSchema);
     _this.key = key;
@@ -1230,18 +1415,20 @@ var UnionSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(UnionSchema, _Schema);
   return _createClass(UnionSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions.concat(validationFunction), this.isReadonly, this.isHidden, this.description);
+      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions.concat(validationFunction), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -1534,17 +1721,18 @@ var UnionSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new UnionSchema(this.key, this.items, true, [], this.isReadonly, this.isHidden, this.description);
+      // Explicit type args: `previewInput` would otherwise pin inference to `Src`.
+      return new UnionSchema(this.key, this.items, true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -1604,14 +1792,69 @@ var UnionSchema = /*#__PURE__*/function (_Schema) {
       }
       return null;
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     *
+     * Without one of its own, a tagged union previews as the VARIANT the value
+     * takes — declare `preview` on the member objects and the union dispatches.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new UnionSchema(this.key, this.items, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput !== null) {
+        return this.previewInput({
+          val: src
+        });
+      }
+      // Only the union knows which variant the value takes; the variant's own
+      // `preview` is what it previews as.
+      var matched = this.matchedVariant(src);
+      if (matched) {
+        return matched["executePreviewItem"](src);
+      }
+      return null;
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      if (this.previewInput !== null) {
+        return true;
+      }
+      return Array.isArray(this.items) && this.items.some(function (item) {
+        return item["declaresItemPreview"]();
+      });
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF2;
+      var _this$renderInput2, _this$customValidateF2;
       if (typeof this.key === "string") {
-        var _this$customValidateF;
+        var _this$renderInput, _this$customValidateF;
         return {
           type: "union",
+          render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+          preview: this.previewInput ? true : undefined,
           key: this.key,
           items: this.items.map(function (o) {
             return o["executeSerialize"]();
@@ -1625,6 +1868,8 @@ var UnionSchema = /*#__PURE__*/function (_Schema) {
       }
       return {
         type: "union",
+        render: (_this$renderInput2 = this.renderInput) !== null && _this$renderInput2 !== void 0 ? _this$renderInput2 : undefined,
+        preview: this.previewInput ? true : undefined,
         key: this.key["executeSerialize"](),
         items: this.items.map(function (o) {
           return o["executeSerialize"]();
@@ -1851,6 +2096,30 @@ function fillFromGallery(src, schema, getModuleSource) {
   } : {});
 }
 
+/**
+ * How an uploaded image is re-encoded in the browser, before it is uploaded.
+ *
+ * Off unless a schema asks for it. When it is on, the image is converted to
+ * `type` and scaled down to fit `maxWidth` x `maxHeight` - unless the result
+ * would be BIGGER than the original and no downscale was needed, in which case
+ * the original bytes are kept. See `architecture/media.md`.
+ *
+ * `type` is required so that adding a format later is additive: a schema
+ * written today keeps saying exactly which format it asked for.
+ */
+
+/** `false` (or absent) uploads the bytes exactly as the editor picked them. */
+
+/**
+ * What a GALLERY-BACKED field may say for itself.
+ *
+ * Not `ImageOptions`: `directory` and `accept` belong to the gallery, and a
+ * field repeating them is how two copies of one fact get to disagree. `encode`
+ * is different — it describes what happens to the bytes on their way IN, so a
+ * field that wants the original where its gallery re-encodes has to be able to
+ * say `encode: false`, and there is nowhere else to say it.
+ */
+
 var ImageSchema = /*#__PURE__*/function (_Schema) {
   function ImageSchema(options) {
     var _this;
@@ -1861,6 +2130,8 @@ var ImageSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
     var isHidden = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
     var description = arguments.length > 7 ? arguments[7] : undefined;
+    var renderInput = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
+    var previewInput = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : null;
     _classCallCheck(this, ImageSchema);
     _this = _callSuper(this, ImageSchema);
     _this.options = options;
@@ -1871,23 +2142,25 @@ var ImageSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(ImageSchema, _Schema);
   return _createClass(ImageSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new ImageSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new ImageSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "remote",
     value: function remote() {
-      return new ImageSchema(this.options, this.opt, true, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description);
+      return new ImageSchema(this.options, this.opt, true, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new ImageSchema(this.options, this.opt, this.isRemote, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.moduleMetadata, this.isReadonly, this.isHidden, this.description);
+      return new ImageSchema(this.options, this.opt, this.isRemote, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.moduleMetadata, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -2086,17 +2359,17 @@ var ImageSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new ImageSchema(this.options, true, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description);
+      return new ImageSchema(this.options, true, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new ImageSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, true, this.isHidden, this.description);
+      return new ImageSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new ImageSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, true, this.description);
+      return new ImageSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -2105,13 +2378,54 @@ var ImageSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new ImageSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new ImageSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       var modulePaths = this.moduleMetadata ? Object.keys(this.moduleMetadata) : [];
       return {
         type: "image",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         options: this.options,
         opt: this.opt,
         remote: this.isRemote,
@@ -2137,7 +2451,7 @@ var ImageSchema = /*#__PURE__*/function (_Schema) {
 
 /** An image of its own, carrying its own dimensions and mime type. */
 
-function image(options) {
+function image(options, galleryOptions) {
   var isModule = !!options && !!Internal.getValPath(options);
   if (isModule) {
     var allModules = {};
@@ -2149,7 +2463,9 @@ function image(options) {
       }
       allModules[modulePath] = getSource(valModule);
     }
-    return new ImageSchema({}, false, false, [], allModules);
+    return new ImageSchema((galleryOptions === null || galleryOptions === void 0 ? void 0 : galleryOptions.encode) !== undefined ? {
+      encode: galleryOptions.encode
+    } : {}, false, false, [], allModules);
   }
   return new ImageSchema(options);
 }
@@ -2162,6 +2478,8 @@ var RouteSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var isHidden = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var description = arguments.length > 5 ? arguments[5] : undefined;
+    var renderInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var previewInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
     _classCallCheck(this, RouteSchema);
     _this = _callSuper(this, RouteSchema);
     _this.options = options;
@@ -2170,13 +2488,15 @@ var RouteSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(RouteSchema, _Schema);
   return _createClass(RouteSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new RouteSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new RouteSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
 
     /**
@@ -2196,7 +2516,7 @@ var RouteSchema = /*#__PURE__*/function (_Schema) {
     value: function include(pattern) {
       return new RouteSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         include: pattern
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
 
     /**
@@ -2216,12 +2536,12 @@ var RouteSchema = /*#__PURE__*/function (_Schema) {
     value: function exclude(pattern) {
       return new RouteSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         exclude: pattern
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new RouteSchema(this.options, this.opt, this.customValidateFunctions.concat(validationFunction), this.isReadonly, this.isHidden, this.description);
+      return new RouteSchema(this.options, this.opt, this.customValidateFunctions.concat(validationFunction), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -2276,17 +2596,17 @@ var RouteSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new RouteSchema(this.options, true, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      return new RouteSchema(this.options, true, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new RouteSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new RouteSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new RouteSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new RouteSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -2295,12 +2615,53 @@ var RouteSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new RouteSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new RouteSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$options3, _this$options4, _this$customValidateF, _this$customValidateF2;
+      var _this$renderInput, _this$options3, _this$options4, _this$customValidateF, _this$customValidateF2;
       return {
         type: "route",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         options: {
           include: ((_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.include) && {
             source: this.options.include.source,
@@ -2338,6 +2699,8 @@ var RichTextSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var isHidden = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var description = arguments.length > 5 ? arguments[5] : undefined;
+    var renderInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var previewInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
     _classCallCheck(this, RichTextSchema);
     _this = _callSuper(this, RichTextSchema);
     _this.options = options;
@@ -2346,32 +2709,34 @@ var RichTextSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(RichTextSchema, _Schema);
   return _createClass(RichTextSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new RichTextSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new RichTextSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "maxLength",
     value: function maxLength(max) {
       return new RichTextSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         maxLength: max
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "minLength",
     value: function minLength(min) {
       return new RichTextSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         minLength: min
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new RichTextSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description);
+      return new RichTextSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -2821,17 +3186,17 @@ var RichTextSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new RichTextSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description);
+      return new RichTextSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new RichTextSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new RichTextSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new RichTextSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new RichTextSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -2840,10 +3205,50 @@ var RichTextSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new RichTextSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new RichTextSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
       var _this3 = this,
+        _this$renderInput,
         _this$customValidateF;
       var serializeAnchorSchema = function serializeAnchorSchema() {
         var _this3$options$inline, _this3$options$inline3;
@@ -2870,6 +3275,8 @@ var RichTextSchema = /*#__PURE__*/function (_Schema) {
       };
       return {
         type: "richtext",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         opt: this.opt,
         options: serializedOptions,
         customValidate: this.customValidateFunctions && ((_this$customValidateF = this.customValidateFunctions) === null || _this$customValidateF === void 0 ? void 0 : _this$customValidateF.length) > 0,
@@ -3214,6 +3621,7 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
     var description = arguments.length > 8 ? arguments[8] : undefined;
     var isJsonValues = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
     var previewInput = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : null;
+    var renderInput = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : null;
     _classCallCheck(this, RecordSchema);
     _this = _callSuper(this, RecordSchema);
     _this.item = item;
@@ -3227,18 +3635,19 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
     _this.description = description;
     _this.isJsonValues = isJsonValues;
     _this.previewInput = previewInput;
+    _this.renderInput = renderInput;
     return _this;
   }
   _inherits(RecordSchema, _Schema);
   return _createClass(RecordSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.isJsonValues, this.previewInput);
+      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.isJsonValues, this.previewInput, this.renderInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new RecordSchema(this.item, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, this.isJsonValues, this.previewInput);
+      return new RecordSchema(this.item, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, this.isJsonValues, this.previewInput, this.renderInput);
     }
   }, {
     key: "executeValidate",
@@ -3597,29 +4006,29 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new RecordSchema(this.item, true, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, this.isJsonValues, this.previewInput);
+      return new RecordSchema(this.item, true, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, this.isJsonValues, this.previewInput, this.renderInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, true, this.isHidden, this.description, this.isJsonValues, this.previewInput);
+      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, true, this.isHidden, this.description, this.isJsonValues, this.previewInput, this.renderInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, true, this.description, this.isJsonValues, this.previewInput);
+      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, true, this.description, this.isJsonValues, this.previewInput, this.renderInput);
     }
   }, {
     key: "router",
     value: function router(_router) {
-      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, _router, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, this.isJsonValues, this.previewInput);
+      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, _router, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, this.isJsonValues, this.previewInput, this.renderInput);
     }
   }, {
     key: "remote",
     value: function remote() {
       return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions ? _objectSpread2(_objectSpread2({}, this.mediaOptions), {}, {
         remote: true
-      }) : undefined, this.isReadonly, this.isHidden, this.description, this.isJsonValues, this.previewInput);
+      }) : undefined, this.isReadonly, this.isHidden, this.description, this.isJsonValues, this.previewInput, this.renderInput);
     }
 
     /**
@@ -3649,9 +4058,19 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
         // `.validate(...)` in their source file that never ran anywhere.
         throw new Error(".jsonValues() must come BEFORE .validate(): a validator added first is typed against the un-lazy source shape and cannot be carried over. Write s.record(...).jsonValues().validate(...) instead.");
       }
+      if (this.previewInput !== null) {
+        // Same reasoning as the validator guard above: the record's own preview
+        // closure is typed against the un-lazy source shape.
+        throw new Error(".jsonValues() must come BEFORE .preview(): a preview added first is typed against the un-lazy source shape and cannot be carried over. Write s.record(...).jsonValues().preview(...) instead.");
+      }
+      // Explicit type args instead of a cast on the result: `previewInput` would
+      // otherwise pin inference to `Src`, and the two record source shapes no
+      // longer overlap enough for the old assertion.
       return new RecordSchema(this.item, this.opt,
       // Empty by construction: the guard above rejects any that were registered.
-      [], this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, true, this.previewInput);
+      [], this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, true,
+      // Null by construction: the guard above rejects any that was declared.
+      null, this.renderInput);
     }
   }, {
     key: "getRouterValidations",
@@ -3705,9 +4124,10 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$keySchema, _this$currentRouter, _this$customValidateF;
+      var _this$renderInput, _this$keySchema, _this$currentRouter, _this$customValidateF;
       var result = {
         type: "record",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
         item: this.item["executeSerialize"](),
         key: (_this$keySchema = this.keySchema) === null || _this$keySchema === void 0 ? void 0 : _this$keySchema["executeSerialize"](),
         opt: this.opt,
@@ -3724,6 +4144,9 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
         result.accept = this.mediaOptions.accept;
         result.directory = this.mediaOptions.directory;
         result.remote = this.mediaOptions.remote;
+        if (this.mediaOptions.encode !== undefined) {
+          result.encode = this.mediaOptions.encode;
+        }
         if (this.mediaOptions.altSchema) {
           result.alt = this.mediaOptions.altSchema["executeSerialize"]();
         }
@@ -3771,8 +4194,10 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
           res[_key2] = itemResult[_key2];
         }
       }
-      if (this.previewInput) {
-        var prepare = this.previewInput;
+      // The entries preview comes from the ITEM schema's own `preview` — the
+      // container just runs it per entry. Asked as a fact rather than by running
+      // the closure, so an empty record still previews as an empty record.
+      if (this.item["declaresItemPreview"]()) {
         // See the same block in `array`: the whole record when the record is what
         // is being shown, only the wanted entries when it is not.
         var window = scope !== undefined && !scope.wants(sourcePath) ? scope : null;
@@ -3784,6 +4209,9 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
           if (isJson(val)) {
             continue; // as above: nothing to select from an un-loaded entry
           }
+          if (val === null || val === undefined) {
+            continue;
+          }
           if (window !== null && !window.wantsUnder(unsafeCreateSourcePath(sourcePath, _key3))) {
             continue;
           }
@@ -3791,18 +4219,17 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
           // data trips it up must not take out the whole list.
           try {
             // NB NB: display is actually defined by the user
-            var _prepare = prepare({
-                key: _key3,
-                val: val
-              }),
-              title = _prepare.title,
-              subtitle = _prepare.subtitle,
-              image = _prepare.image;
-            items.push([_key3, {
-              title: title,
-              subtitle: subtitle,
-              image: image
-            }]);
+            var _item = this.item["executePreviewItem"](val);
+            if (_item !== null) {
+              var title = _item.title,
+                subtitle = _item.subtitle,
+                image = _item.image;
+              items.push([_key3, {
+                title: title,
+                subtitle: subtitle,
+                image: image
+              }]);
+            }
           } catch (e) {
             res[unsafeCreateSourcePath(sourcePath, _key3)] = {
               status: "error",
@@ -3820,19 +4247,45 @@ var RecordSchema = /*#__PURE__*/function (_Schema) {
       }
       return res;
     }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
 
     /**
-     * What the editor shows for each ENTRY of this record: a title, and optionally
-     * a subtitle and an image.
-     *
-     * `select` is your own code over the entry's key and source, so it is run on
-     * demand for the entries that are actually being looked at — see
-     * `PreviewScope`.
+     * How this RECORD ITSELF is shown where a preview of it is needed — when it
+     * is the item of another container, in search, in references. What its
+     * entries show is the ITEM schema's `preview`, not this. Never how the field
+     * is edited (that is `render`). See `preview.ts`.
      */
   }, {
     key: "preview",
     value: function preview(select) {
-      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, this.isJsonValues, select);
+      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, this.isJsonValues, select, this.renderInput);
+    }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new RecordSchema(this.item, this.opt, this.customValidateFunctions, this.currentRouter, this.keySchema, this.mediaOptions, this.isReadonly, this.isHidden, this.description, this.isJsonValues, this.previewInput, input);
     }
   }]);
 }(Schema);
@@ -4401,6 +4854,8 @@ var NumberSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var isHidden = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var description = arguments.length > 5 ? arguments[5] : undefined;
+    var renderInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var previewInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
     _classCallCheck(this, NumberSchema);
     _this = _callSuper(this, NumberSchema);
     _this.options = options;
@@ -4409,18 +4864,20 @@ var NumberSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(NumberSchema, _Schema);
   return _createClass(NumberSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new NumberSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new NumberSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new NumberSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description);
+      return new NumberSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -4490,31 +4947,31 @@ var NumberSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new NumberSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description);
+      return new NumberSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new NumberSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new NumberSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new NumberSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new NumberSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "max",
     value: function max(_max) {
       return new NumberSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         max: _max
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "min",
     value: function min(_min) {
       return new NumberSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         min: _min
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -4523,12 +4980,53 @@ var NumberSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new NumberSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new NumberSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       return {
         type: "number",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         options: this.options,
         opt: this.opt,
         customValidate: this.customValidateFunctions && ((_this$customValidateF = this.customValidateFunctions) === null || _this$customValidateF === void 0 ? void 0 : _this$customValidateF.length) > 0,
@@ -4556,6 +5054,8 @@ var BooleanSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var isHidden = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var description = arguments.length > 4 ? arguments[4] : undefined;
+    var renderInput = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+    var previewInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
     _classCallCheck(this, BooleanSchema);
     _this = _callSuper(this, BooleanSchema);
     _this.opt = opt;
@@ -4563,18 +5063,20 @@ var BooleanSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(BooleanSchema, _Schema);
   return _createClass(BooleanSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new BooleanSchema(this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new BooleanSchema(this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new BooleanSchema(this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description);
+      return new BooleanSchema(this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -4625,17 +5127,17 @@ var BooleanSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new BooleanSchema(true, [], this.isReadonly, this.isHidden, this.description);
+      return new BooleanSchema(true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new BooleanSchema(this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new BooleanSchema(this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new BooleanSchema(this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new BooleanSchema(this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -4644,12 +5146,53 @@ var BooleanSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new BooleanSchema(this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new BooleanSchema(this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       return {
         type: "boolean",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         opt: this.opt,
         customValidate: this.customValidateFunctions && ((_this$customValidateF = this.customValidateFunctions) === null || _this$customValidateF === void 0 ? void 0 : _this$customValidateF.length) > 0,
         readonly: this.isReadonly,
@@ -4676,6 +5219,8 @@ var KeyOfSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var isHidden = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
     var description = arguments.length > 6 ? arguments[6] : undefined;
+    var renderInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
+    var previewInput = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
     _classCallCheck(this, KeyOfSchema);
     _this = _callSuper(this, KeyOfSchema);
     _this.schema = schema;
@@ -4685,18 +5230,20 @@ var KeyOfSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(KeyOfSchema, _Schema);
   return _createClass(KeyOfSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description);
+      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -4826,17 +5373,17 @@ var KeyOfSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new KeyOfSchema(this.schema, this.sourcePath, true, [], this.isReadonly, this.isHidden, this.description);
+      return new KeyOfSchema(this.schema, this.sourcePath, true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -4845,10 +5392,49 @@ var KeyOfSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new KeyOfSchema(this.schema, this.sourcePath, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       var path = this.sourcePath;
       if (!path) {
         throw new Error("Cannot serialize keyOf schema with empty selector. TIP: keyOf must be used with a Val Module of record schema.");
@@ -4871,6 +5457,8 @@ var KeyOfSchema = /*#__PURE__*/function (_Schema) {
       }
       return {
         type: "keyOf",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         path: path,
         schema: serializedSchema,
         opt: this.opt,
@@ -4922,6 +5510,8 @@ var FileSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
     var isHidden = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
     var description = arguments.length > 7 ? arguments[7] : undefined;
+    var renderInput = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : null;
+    var previewInput = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : null;
     _classCallCheck(this, FileSchema);
     _this = _callSuper(this, FileSchema);
     _this.options = options;
@@ -4932,23 +5522,25 @@ var FileSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(FileSchema, _Schema);
   return _createClass(FileSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new FileSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new FileSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "remote",
     value: function remote() {
-      return new FileSchema(this.options, this.opt, true, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description);
+      return new FileSchema(this.options, this.opt, true, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new FileSchema(this.options, this.opt, this.isRemote, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.moduleMetadata, this.isReadonly, this.isHidden, this.description);
+      return new FileSchema(this.options, this.opt, this.isRemote, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.moduleMetadata, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -5129,17 +5721,17 @@ var FileSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new FileSchema(this.options, true, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description);
+      return new FileSchema(this.options, true, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new FileSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, true, this.isHidden, this.description);
+      return new FileSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new FileSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, true, this.description);
+      return new FileSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -5148,13 +5740,54 @@ var FileSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new FileSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new FileSchema(this.options, this.opt, this.isRemote, this.customValidateFunctions, this.moduleMetadata, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       var modulePaths = this.moduleMetadata ? Object.keys(this.moduleMetadata) : [];
       return {
         type: "file",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         options: this.options,
         opt: this.opt,
         remote: this.isRemote,
@@ -5243,6 +5876,8 @@ var DateSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var isHidden = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var description = arguments.length > 5 ? arguments[5] : undefined;
+    var renderInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var previewInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
     _classCallCheck(this, DateSchema);
     _this = _callSuper(this, DateSchema);
     _this.options = options;
@@ -5251,18 +5886,20 @@ var DateSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(DateSchema, _Schema);
   return _createClass(DateSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new DateSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new DateSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new DateSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description);
+      return new DateSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -5351,29 +5988,29 @@ var DateSchema = /*#__PURE__*/function (_Schema) {
     value: function from(_from) {
       return new DateSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         from: _from
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "to",
     value: function to(_to) {
       return new DateSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         to: _to
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "nullable",
     value: function nullable() {
-      return new DateSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description);
+      return new DateSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new DateSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new DateSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new DateSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new DateSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -5382,12 +6019,53 @@ var DateSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new DateSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new DateSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       return {
         type: "date",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         opt: this.opt,
         options: this.options,
         customValidate: this.customValidateFunctions && ((_this$customValidateF = this.customValidateFunctions) === null || _this$customValidateF === void 0 ? void 0 : _this$customValidateF.length) > 0,
@@ -5415,6 +6093,8 @@ var DateTimeSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var isHidden = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var description = arguments.length > 5 ? arguments[5] : undefined;
+    var renderInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var previewInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
     _classCallCheck(this, DateTimeSchema);
     _this = _callSuper(this, DateTimeSchema);
     _this.options = options;
@@ -5423,18 +6103,20 @@ var DateTimeSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(DateTimeSchema, _Schema);
   return _createClass(DateTimeSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new DateTimeSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new DateTimeSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new DateTimeSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description);
+      return new DateTimeSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeValidate",
@@ -5555,29 +6237,29 @@ var DateTimeSchema = /*#__PURE__*/function (_Schema) {
     value: function from(_from) {
       return new DateTimeSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         from: _from
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "to",
     value: function to(_to) {
       return new DateTimeSchema(_objectSpread2(_objectSpread2({}, this.options), {}, {
         to: _to
-      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description);
+      }), this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "nullable",
     value: function nullable() {
-      return new DateTimeSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description);
+      return new DateTimeSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new DateTimeSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new DateTimeSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new DateTimeSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new DateTimeSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -5586,12 +6268,53 @@ var DateTimeSchema = /*#__PURE__*/function (_Schema) {
         path: path
       });
     }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new DateTimeSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new DateTimeSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
+    }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       return {
         type: "dateTime",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         opt: this.opt,
         options: this.options,
         customValidate: this.customValidateFunctions && ((_this$customValidateF = this.customValidateFunctions) === null || _this$customValidateF === void 0 ? void 0 : _this$customValidateF.length) > 0,
@@ -6099,6 +6822,8 @@ var ColorSchema = /*#__PURE__*/function (_Schema) {
     var isReadonly = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var isHidden = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var description = arguments.length > 5 ? arguments[5] : undefined;
+    var renderInput = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+    var previewInput = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
     _classCallCheck(this, ColorSchema);
     _this = _callSuper(this, ColorSchema);
     _this.options = options;
@@ -6107,18 +6832,20 @@ var ColorSchema = /*#__PURE__*/function (_Schema) {
     _this.isReadonly = isReadonly;
     _this.isHidden = isHidden;
     _this.description = description;
+    _this.renderInput = renderInput;
+    _this.previewInput = previewInput;
     return _this;
   }
   _inherits(ColorSchema, _Schema);
   return _createClass(ColorSchema, [{
     key: "describe",
     value: function describe(description) {
-      return new ColorSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined);
+      return new ColorSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, description !== null && description !== void 0 ? description : undefined, this.renderInput, this.previewInput);
     }
   }, {
     key: "validate",
     value: function validate(validationFunction) {
-      return new ColorSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description);
+      return new ColorSchema(this.options, this.opt, [].concat(_toConsumableArray(this.customValidateFunctions), [validationFunction]), this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "executeCustomValidateAt",
@@ -6215,24 +6942,65 @@ var ColorSchema = /*#__PURE__*/function (_Schema) {
   }, {
     key: "nullable",
     value: function nullable() {
-      return new ColorSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description);
+      return new ColorSchema(this.options, true, [], this.isReadonly, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "readonly",
     value: function readonly() {
-      return new ColorSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description);
+      return new ColorSchema(this.options, this.opt, this.customValidateFunctions, true, this.isHidden, this.description, this.renderInput, this.previewInput);
     }
   }, {
     key: "hidden",
     value: function hidden() {
-      return new ColorSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description);
+      return new ColorSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, true, this.description, this.renderInput, this.previewInput);
+    }
+
+    /**
+     * How this field is laid out in the editor when it is the item of an array
+     * or record: `{ as: "inline" }` renders the field itself inside each row,
+     * instead of a preview row that navigates to it.
+     *
+     * Static configuration, not a callback — see `render.ts`.
+     */
+  }, {
+    key: "render",
+    value: function render(input) {
+      return new ColorSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, input, this.previewInput);
+    }
+
+    /**
+     * How this VALUE is shown where a preview of it is needed — a row in a
+     * sortable list, a reference dropdown, a search hit. Never how the field
+     * itself is edited (that is `render`). See `preview.ts`.
+     */
+  }, {
+    key: "preview",
+    value: function preview(select) {
+      return new ColorSchema(this.options, this.opt, this.customValidateFunctions, this.isReadonly, this.isHidden, this.description, this.renderInput, select);
+    }
+  }, {
+    key: "executePreviewItem",
+    value: function executePreviewItem(src) {
+      if (this.previewInput === null) {
+        return null;
+      }
+      return this.previewInput({
+        val: src
+      });
+    }
+  }, {
+    key: "declaresItemPreview",
+    value: function declaresItemPreview() {
+      return this.previewInput !== null;
     }
   }, {
     key: "executeSerialize",
     value: function executeSerialize() {
-      var _this$customValidateF;
+      var _this$renderInput, _this$customValidateF;
       return {
         type: "color",
+        render: (_this$renderInput = this.renderInput) !== null && _this$renderInput !== void 0 ? _this$renderInput : undefined,
+        preview: this.previewInput ? true : undefined,
         opt: this.opt,
         options: this.options,
         customValidate: this.customValidateFunctions && ((_this$customValidateF = this.customValidateFunctions) === null || _this$customValidateF === void 0 ? void 0 : _this$customValidateF.length) > 0,
@@ -6312,7 +7080,8 @@ var images = function images(options) {
     accept: (_options$accept = options.accept) !== null && _options$accept !== void 0 ? _options$accept : "image/*",
     directory: directory,
     remote: (_options$remote = options.remote) !== null && _options$remote !== void 0 ? _options$remote : false,
-    altSchema: altSchema
+    altSchema: altSchema,
+    encode: options.encode
   });
 };
 
@@ -8055,10 +8824,16 @@ function createRemoteRef(remoteHost, _ref) {
  */
 function getValidationBasis(coreVersion, schema, fileExt, metadata, fileHash) {
   var metadataValidationBasis = "".concat((metadata === null || metadata === void 0 ? void 0 : metadata.width) || "").concat((metadata === null || metadata === void 0 ? void 0 : metadata.height) || "").concat(metadata === null || metadata === void 0 ? void 0 : metadata.mimeType);
+  var options = _objectSpread2({}, schema.options);
+  // Ignore options that do not affect the validation basis below:
+  // `encode` says how the bytes were PRODUCED in the browser, not whether the
+  // bytes that arrived are valid. Leaving it in would mean that changing a
+  // quality setting re-validates every remote file in the project.
+  delete options.encode;
   var schemaValidationBasis = {
     type: schema.type,
     opt: schema.opt,
-    options: _objectSpread2({}, schema.options)
+    options: options
   };
   return coreVersion + JSON.stringify(schemaValidationBasis) + fileExt + metadataValidationBasis + fileHash;
 }
@@ -8085,7 +8860,7 @@ function deserializeSchema(serialized) {
   return schema;
 }
 function deserializeSchemaImpl(serialized) {
-  var _serialized$options, _serialized$options2, _serialized$render, _serialized$accept, _serialized$directory, _serialized$remote, _serialized$jsonValue;
+  var _serialized$options, _serialized$options2, _serialized$render, _serialized$render2, _serialized$render3, _serialized$render4, _serialized$render5, _serialized$render6, _serialized$render7, _serialized$accept, _serialized$directory, _serialized$remote, _serialized$jsonValue, _serialized$render9, _serialized$render0, _serialized$render10, _serialized$render11, _serialized$render12, _serialized$render13, _serialized$render14;
   switch (serialized.type) {
     case "string":
       return new StringSchema(_objectSpread2(_objectSpread2({}, serialized.options), {}, {
@@ -8096,20 +8871,22 @@ function deserializeSchemaImpl(serialized) {
       // recomputed from an instance.
       (_serialized$render = serialized.render) !== null && _serialized$render !== void 0 ? _serialized$render : null, false, false, serialized.description);
     case "literal":
-      return new LiteralSchema(serialized.value, serialized.opt, [], false, false, serialized.description);
+      return new LiteralSchema(serialized.value, serialized.opt, [], false, false, serialized.description, (_serialized$render2 = serialized.render) !== null && _serialized$render2 !== void 0 ? _serialized$render2 : null);
     case "boolean":
-      return new BooleanSchema(serialized.opt, [], false, false, serialized.description);
+      return new BooleanSchema(serialized.opt, [], false, false, serialized.description, (_serialized$render3 = serialized.render) !== null && _serialized$render3 !== void 0 ? _serialized$render3 : null);
     case "number":
-      return new NumberSchema(serialized.options, serialized.opt, [], false, false, serialized.description);
+      return new NumberSchema(serialized.options, serialized.opt, [], false, false, serialized.description, (_serialized$render4 = serialized.render) !== null && _serialized$render4 !== void 0 ? _serialized$render4 : null);
     case "object":
       return new ObjectSchema(Object.fromEntries(Object.entries(serialized.items).map(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
           key = _ref2[0],
           item = _ref2[1];
         return [key, deserializeSchema(item)];
-      })), serialized.opt, [], false, false, serialized.description);
+      })), serialized.opt, [], false, false, serialized.description, (_serialized$render5 = serialized.render) !== null && _serialized$render5 !== void 0 ? _serialized$render5 : null);
     case "array":
-      return new ArraySchema(deserializeSchema(serialized.item), serialized.opt, [], false, false, serialized.description);
+      return new ArraySchema(deserializeSchema(serialized.item), serialized.opt, [], false, false, serialized.description,
+      // The preview closure cannot survive serialization; the render can.
+      null, (_serialized$render6 = serialized.render) !== null && _serialized$render6 !== void 0 ? _serialized$render6 : null);
     case "union":
       return new UnionSchema(typeof serialized.key === "string" ? serialized.key :
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -8118,17 +8895,17 @@ function deserializeSchemaImpl(serialized) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       serialized.items.map(deserializeSchema),
       // TODO: we do not really need any here - right?
-      serialized.opt, [], false, false, serialized.description);
+      serialized.opt, [], false, false, serialized.description, (_serialized$render7 = serialized.render) !== null && _serialized$render7 !== void 0 ? _serialized$render7 : null);
     case "richtext":
       {
-        var _serialized$options3, _serialized$options4, _serialized$options5, _serialized$options6, _serialized$options7, _serialized$options8, _serialized$options9;
+        var _serialized$options3, _serialized$options4, _serialized$options5, _serialized$options6, _serialized$options7, _serialized$options8, _serialized$options9, _serialized$render8;
         var deserializedOptions = _objectSpread2(_objectSpread2({}, serialized.options || {}), {}, {
           inline: _typeof((_serialized$options3 = serialized.options) === null || _serialized$options3 === void 0 || (_serialized$options3 = _serialized$options3.inline) === null || _serialized$options3 === void 0 ? void 0 : _serialized$options3.img) === "object" || _typeof((_serialized$options4 = serialized.options) === null || _serialized$options4 === void 0 || (_serialized$options4 = _serialized$options4.inline) === null || _serialized$options4 === void 0 ? void 0 : _serialized$options4.a) === "object" ? {
             a: _typeof((_serialized$options5 = serialized.options) === null || _serialized$options5 === void 0 || (_serialized$options5 = _serialized$options5.inline) === null || _serialized$options5 === void 0 ? void 0 : _serialized$options5.a) === "object" ? deserializeSchema(serialized.options.inline.a) : (_serialized$options6 = serialized.options) === null || _serialized$options6 === void 0 || (_serialized$options6 = _serialized$options6.inline) === null || _serialized$options6 === void 0 ? void 0 : _serialized$options6.a,
             img: _typeof((_serialized$options7 = serialized.options) === null || _serialized$options7 === void 0 || (_serialized$options7 = _serialized$options7.inline) === null || _serialized$options7 === void 0 ? void 0 : _serialized$options7.img) === "object" ? deserializeSchema(serialized.options.inline.img) : (_serialized$options8 = serialized.options) === null || _serialized$options8 === void 0 || (_serialized$options8 = _serialized$options8.inline) === null || _serialized$options8 === void 0 ? void 0 : _serialized$options8.img
           } : (_serialized$options9 = serialized.options) === null || _serialized$options9 === void 0 ? void 0 : _serialized$options9.inline
         });
-        return new RichTextSchema(deserializedOptions, serialized.opt, [], false, false, serialized.description);
+        return new RichTextSchema(deserializedOptions, serialized.opt, [], false, false, serialized.description, (_serialized$render8 = serialized.render) !== null && _serialized$render8 !== void 0 ? _serialized$render8 : null);
       }
     case "record":
       return new RecordSchema(deserializeSchema(serialized.item), serialized.opt, [], null, serialized.key ? deserializeSchema(serialized.key) : null, serialized.mediaType ? {
@@ -8137,27 +8914,30 @@ function deserializeSchemaImpl(serialized) {
         directory: (_serialized$directory = serialized.directory) !== null && _serialized$directory !== void 0 ? _serialized$directory : "/public/val",
         remote: (_serialized$remote = serialized.remote) !== null && _serialized$remote !== void 0 ? _serialized$remote : false,
         altSchema: serialized.alt ? deserializeSchema(serialized.alt) : undefined
-      } : undefined, false, false, serialized.description, (_serialized$jsonValue = serialized.jsonValues) !== null && _serialized$jsonValue !== void 0 ? _serialized$jsonValue : false);
+      } : undefined, false, false, serialized.description, (_serialized$jsonValue = serialized.jsonValues) !== null && _serialized$jsonValue !== void 0 ? _serialized$jsonValue : false,
+      // The preview closure cannot survive serialization; the render can.
+      null, (_serialized$render9 = serialized.render) !== null && _serialized$render9 !== void 0 ? _serialized$render9 : null);
     case "keyOf":
-      return new KeyOfSchema(serialized.schema, serialized.path, serialized.opt, [], false, false, serialized.description);
+      return new KeyOfSchema(serialized.schema, serialized.path, serialized.opt, [], false, false, serialized.description, (_serialized$render0 = serialized.render) !== null && _serialized$render0 !== void 0 ? _serialized$render0 : null);
     case "route":
       {
+        var _serialized$render1;
         var routeOptions = serialized.options ? {
           include: serialized.options.include ? new RegExp(serialized.options.include.source, serialized.options.include.flags) : undefined,
           exclude: serialized.options.exclude ? new RegExp(serialized.options.exclude.source, serialized.options.exclude.flags) : undefined
         } : undefined;
-        return new RouteSchema(routeOptions, serialized.opt, [], false, false, serialized.description);
+        return new RouteSchema(routeOptions, serialized.opt, [], false, false, serialized.description, (_serialized$render1 = serialized.render) !== null && _serialized$render1 !== void 0 ? _serialized$render1 : null);
       }
     case "file":
-      return new FileSchema(serialized.options, serialized.opt, serialized.remote, [], {}, false, false, serialized.description);
+      return new FileSchema(serialized.options, serialized.opt, serialized.remote, [], {}, false, false, serialized.description, (_serialized$render10 = serialized.render) !== null && _serialized$render10 !== void 0 ? _serialized$render10 : null);
     case "image":
-      return new ImageSchema(serialized.options, serialized.opt, serialized.remote, [], {}, false, false, serialized.description);
+      return new ImageSchema(serialized.options, serialized.opt, serialized.remote, [], {}, false, false, serialized.description, (_serialized$render11 = serialized.render) !== null && _serialized$render11 !== void 0 ? _serialized$render11 : null);
     case "date":
-      return new DateSchema(serialized.options, serialized.opt, [], false, false, serialized.description);
+      return new DateSchema(serialized.options, serialized.opt, [], false, false, serialized.description, (_serialized$render12 = serialized.render) !== null && _serialized$render12 !== void 0 ? _serialized$render12 : null);
     case "dateTime":
-      return new DateTimeSchema(serialized.options, serialized.opt, [], false, false, serialized.description);
+      return new DateTimeSchema(serialized.options, serialized.opt, [], false, false, serialized.description, (_serialized$render13 = serialized.render) !== null && _serialized$render13 !== void 0 ? _serialized$render13 : null);
     case "color":
-      return new ColorSchema(serialized.options, serialized.opt, [], false, false, serialized.description);
+      return new ColorSchema(serialized.options, serialized.opt, [], false, false, serialized.description, (_serialized$render14 = serialized.render) !== null && _serialized$render14 !== void 0 ? _serialized$render14 : null);
     default:
       {
         var exhaustiveCheck = serialized;
@@ -8172,8 +8952,29 @@ function deserializeSchemaImpl(serialized) {
 }
 
 /**
- * What a container shows for ONE of its items: the user's `preview` callback
- * returns this, and the Studio draws a row from it.
+ * A PREVIEW is how a VALUE is shown wherever a preview of it is needed — a row
+ * in a sortable list, a key in a reference dropdown, a search hit, a
+ * reference — which is everywhere the value is NAVIGABLE to rather than open.
+ * It is never how the field itself is edited: that is a RENDER (`render.ts`),
+ * which applies only when you are looking at the field. The two do not
+ * intersect — a schema can carry both, and each is read in its own places.
+ *
+ * A preview is declared on the schema of the VALUE being previewed:
+ *
+ * ```ts
+ * const author = s.object({ name: s.string() })
+ *   .preview(({ val }) => ({ title: val.name }));
+ * const authors = s.array(author);
+ * ```
+ *
+ * The container reifies its rows by running each ITEM's preview closure — see
+ * {@link ArrayPreview} / {@link RecordPreview}. (Previews used to be declared
+ * on the container instead; a `.preview` on an array/record now previews the
+ * array/record itself as a value, for when IT is the item of something.)
+ */
+/**
+ * What a preview shows for one value: the user's `preview` callback returns
+ * this, and the Studio draws a row from it.
  *
  * NB: {@link ArrayPreview} / {@link RecordPreview} name the DATA a container
  * previews with. The Studio also has React components called `ArrayPreview` /
@@ -8183,6 +8984,19 @@ function deserializeSchemaImpl(serialized) {
  * at the import rather than renaming that convention.
  */
 
+/**
+ * What `.preview(...)` takes, on every schema: the value's own source in, a
+ * {@link PreviewItem} out. `NonNullable` because a container skips null items
+ * rather than previewing them.
+ *
+ * Declared through method syntax deliberately (the same bivariance shape
+ * React's event handler types use): `nullable()` copies a schema's closure
+ * into the `Src | null` variant of the same class, and with a plain function
+ * type the checker cannot see that `NonNullable<Src | null>` IS
+ * `NonNullable<Src>` while `Src` is still a type parameter — every schema's
+ * `nullable()` would need a cast instead.
+ */
+
 /**
  * Main preview type.
  *
@@ -8275,11 +9089,21 @@ function previewScope(paths) {
 // TODO: improve this so that we do not get RawString and string, only string. Are there other things?
 
 /**
- * A RENDER is how one field is laid out in the editor: `s.string().render({ as:
- * "textarea" })`, `.render({ as: "code", language })`.
+ * A RENDER is how the FIELD ITSELF is laid out in the editor, and it applies
+ * only when you are looking at the field: `s.string().render({ as: "textarea"
+ * })`, `.render({ as: "code", language })`, `.render({ as: "inline" })` on an
+ * array/record item.
  *
- * It is static configuration - plain data, with no closure behind it and no
- * dependency on source - which is why it lives in the SERIALIZED schema
+ * A PREVIEW (`preview.ts`) is the other thing: how the VALUE is shown wherever
+ * a preview of it is needed — a list row, a reference dropdown, a search hit —
+ * that is, wherever the value is navigable to rather than open. The two never
+ * intersect: a schema can carry both, a `render` is read where the field is
+ * edited and a `preview` where the value is previewed. A second `.render(...)`
+ * on the same schema REPLACES the first (last one wins), exactly like a second
+ * `.preview(...)` replaces the first — they do not merge.
+ *
+ * A render is static configuration - plain data, with no closure behind it and
+ * no dependency on source - which is why it lives in the SERIALIZED schema
  * (`SerializedStringSchema.render`) and is read straight off it where the field
  * is drawn. There is no render pipeline, no store and no host round-trip.
  *
@@ -8289,9 +9113,6 @@ function previewScope(paths) {
  * the shape it needs back is `executePreview`'s, and the honest move is to give
  * `render` its own execute/store pair again. It is NOT to re-merge the two:
  * conflating them is what this file was split up to undo.
- *
- * The dynamic, source-dependent, demand-scoped thing - what a container shows
- * for its items - is a PREVIEW. See `preview.ts`.
  */
 /**
  * The list is the declaration and {@link CodeLanguage} is derived from it, so
@@ -8300,10 +9121,68 @@ function previewScope(paths) {
  */
 var CODE_LANGUAGES = ["typescript", "javascript", "javascriptreact", "typescriptreact", "json", "java", "html", "css", "xml", "markdown", "sql", "python", "rust", "php", "go", "cpp", "sass", "vue", "angular"];
 
+/**
+ * `{ as: "inline" }` on a field that is the ITEM of an array or record: the
+ * container renders the field itself inside each (sortable) row, instead of a
+ * clickable preview row that navigates to it. This is what a page-builder list
+ * is made of: `s.array(s.object({...}).render({ as: "inline" }))`.
+ *
+ * On a field that is not directly under an array or record it is inert — an
+ * object's fields are already laid out in place.
+ *
+ * Like every render it is static configuration (see the top of this file): it
+ * travels whole in the serialized schema and the editor reads it straight off
+ * the item schema it already has.
+ */
+
+/**
+ * What `.render(...)` takes on every field except `s.string()`, and what the
+ * serialized schema carries verbatim.
+ */
+
 /**
  * What `s.string().render(...)` takes, and what the serialized schema carries
- * verbatim.
+ * verbatim. A string has editor layouts of its own (textarea, code) in
+ * addition to the container-facing `inline`.
+ */
+
+/**
+ * Is this item schema edited INSIDE its list row, rather than behind a
+ * clickable preview row that navigates to it?
+ *
+ * The one answer, so that the list rows, the nav-stop rule (`getNavPath`) and
+ * the add buttons cannot drift apart — they are three readings of the same
+ * question, and a disagreement between them is a row you can edit in place but
+ * that "add" navigates away from.
+ *
+ * A tagged union counts as inline when the union itself declares it OR when
+ * ANY of its variants does. A page-builder list is `s.array(s.union("type",
+ * block, block, ...))` and the natural place to write the render is on the
+ * blocks, one per block type — the union is a dispatch, not something the
+ * author thinks of as the field. `some` rather than `every` because the row
+ * draws the union's own editor (the tag selector plus the matched variant's
+ * fields), which handles every variant either way: with `every`, adding one
+ * variant and forgetting its `.render` would silently turn the whole list back
+ * into preview rows.
+ *
+ * This is the ONLY place a render is allowed to be read from anywhere but the
+ * schema it was declared on. It stays static (see the top of this file): the
+ * answer is a function of the serialized schema alone, never of the value the
+ * row happens to hold.
  */
+function isInlineRender(schema) {
+  var _schema$render;
+  if (((_schema$render = schema.render) === null || _schema$render === void 0 ? void 0 : _schema$render.as) === "inline") {
+    return true;
+  }
+  if (schema.type === "union") {
+    return schema.items.some(function (item) {
+      var _item$render;
+      return ((_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.as) === "inline";
+    });
+  }
+  return false;
+}
 
 var externalPageRouter = {
   getRouterId: function getRouterId() {
@@ -8710,6 +9589,7 @@ exports.extractValModules = extractValModules;
 exports.getSourcePathFromRoute = getSourcePathFromRoute;
 exports.hasRemoteFileSchema = hasRemoteFileSchema;
 exports.initVal = initVal;
+exports.isInlineRender = isInlineRender;
 exports.modules = modules;
 exports.previewScope = previewScope;
 exports.splitModuleFilePathAndModulePath = splitModuleFilePathAndModulePath;