@valbuild/core 0.106.0 → 0.110.0

package/dist/{index-193f19b4.esm.js → index-6652ab3c.esm.js}

@@ -213,8 +213,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 {
@@ -223,7 +247,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({
@@ -420,6 +446,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;
@@ -430,13 +457,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);
     }
 
     /**
@@ -452,7 +480,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);
     }
 
     /**
@@ -468,7 +496,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",
@@ -476,12 +504,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",
@@ -554,22 +582,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",
@@ -585,6 +613,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,
@@ -614,7 +643,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;
     }
 
     /**
@@ -641,6 +696,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;
@@ -649,18 +706,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",
@@ -780,17 +839,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",
@@ -799,12 +859,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],
@@ -865,6 +966,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;
@@ -874,18 +976,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",
@@ -952,17 +1055,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",
@@ -974,9 +1078,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,
@@ -1009,8 +1114,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
@@ -1021,26 +1128,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",
@@ -1058,18 +1169,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);
@@ -1085,6 +1223,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;
@@ -1093,18 +1233,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",
@@ -1167,17 +1309,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",
@@ -1186,12 +1328,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,
@@ -1219,6 +1402,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;
@@ -1228,18 +1413,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",
@@ -1532,17 +1719,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",
@@ -1602,14 +1790,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"]();
@@ -1623,6 +1866,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"]();
@@ -1849,6 +2094,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;
@@ -1859,6 +2128,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;
@@ -1869,23 +2140,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",
@@ -2084,17 +2357,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",
@@ -2103,13 +2376,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,
@@ -2135,7 +2449,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 = {};
@@ -2147,7 +2461,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);
 }
@@ -2160,6 +2476,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;
@@ -2168,13 +2486,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);
     }
 
     /**
@@ -2194,7 +2514,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);
     }
 
     /**
@@ -2214,12 +2534,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",
@@ -2274,17 +2594,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",
@@ -2293,12 +2613,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,
@@ -2336,6 +2697,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;
@@ -2344,32 +2707,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",
@@ -2819,17 +3184,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",
@@ -2838,10 +3203,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;
@@ -2868,6 +3273,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,
@@ -3212,6 +3619,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;
@@ -3225,18 +3633,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",
@@ -3595,29 +4004,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);
     }
 
     /**
@@ -3647,9 +4056,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",
@@ -3703,9 +4122,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,
@@ -3722,6 +4142,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"]();
         }
@@ -3769,8 +4192,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;
@@ -3782,6 +4207,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;
           }
@@ -3789,18 +4217,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",
@@ -3818,19 +4245,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);
@@ -4399,6 +4852,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;
@@ -4407,18 +4862,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",
@@ -4488,31 +4945,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",
@@ -4521,12 +4978,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,
@@ -4554,6 +5052,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;
@@ -4561,18 +5061,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",
@@ -4623,17 +5125,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",
@@ -4642,12 +5144,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,
@@ -4674,6 +5217,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;
@@ -4683,18 +5228,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",
@@ -4824,17 +5371,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",
@@ -4843,10 +5390,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.");
@@ -4869,6 +5455,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,
@@ -4920,6 +5508,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;
@@ -4930,23 +5520,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",
@@ -5127,17 +5719,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",
@@ -5146,13 +5738,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,
@@ -5241,6 +5874,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;
@@ -5249,18 +5884,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",
@@ -5349,29 +5986,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",
@@ -5380,12 +6017,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,
@@ -5413,6 +6091,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;
@@ -5421,18 +6101,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",
@@ -5553,29 +6235,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",
@@ -5584,12 +6266,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,
@@ -6097,6 +6820,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;
@@ -6105,18 +6830,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",
@@ -6213,24 +6940,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,
@@ -6310,7 +7078,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
   });
 };
 
@@ -8053,10 +8822,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;
 }
@@ -8083,7 +8858,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), {}, {
@@ -8094,20 +8869,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
@@ -8116,17 +8893,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 ? {
@@ -8135,27 +8912,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;
@@ -8170,8 +8950,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` /
@@ -8181,6 +8982,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.
  *
@@ -8273,11 +9087,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.
  *
@@ -8287,9 +9111,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
@@ -8298,10 +9119,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() {
@@ -8667,4 +9546,4 @@ function tryJsonParse(str) {
   }
 }
 
-export { ArraySchema as A, BooleanSchema as B, ColorSchema as C, DEFAULT_CONTENT_HOST as D, FATAL_ERROR_TYPES as F, GenericSelector as G, Internal as I, KeyOfSchema as K, LiteralSchema as L, ModuleFilePathSep as M, NumberSchema as N, ObjectSchema as O, PatchError as P, RecordSchema as R, Schema as S, UnionSchema as U, VAL_EXTENSION as V, _typeof as _, _slicedToArray as a, _createClass as b, _classCallCheck as c, _toConsumableArray as d, DEFAULT_APP_HOST as e, extractValModules as f, computeValModuleShas as g, hasRemoteFileSchema as h, initVal as i, DEFAULT_VAL_REMOTE_HOST as j, derefPatch as k, StringSchema as l, modules as m, ImageSchema as n, FileSchema as o, DateSchema as p, COLOR_FORMATS as q, DEFAULT_COLOR_FORMAT as r, splitModuleFilePathAndModulePath as s, DateTimeSchema as t, RouteSchema as u, RichTextSchema as v, deserializeSchema as w, previewScope as x, CODE_LANGUAGES as y, getSourcePathFromRoute as z };
+export { ArraySchema as A, BooleanSchema as B, ColorSchema as C, DEFAULT_CONTENT_HOST as D, getSourcePathFromRoute as E, FATAL_ERROR_TYPES as F, GenericSelector as G, Internal as I, KeyOfSchema as K, LiteralSchema as L, ModuleFilePathSep as M, NumberSchema as N, ObjectSchema as O, PatchError as P, RecordSchema as R, Schema as S, UnionSchema as U, VAL_EXTENSION as V, _typeof as _, _slicedToArray as a, _createClass as b, _classCallCheck as c, _toConsumableArray as d, DEFAULT_APP_HOST as e, extractValModules as f, computeValModuleShas as g, hasRemoteFileSchema as h, initVal as i, DEFAULT_VAL_REMOTE_HOST as j, derefPatch as k, StringSchema as l, modules as m, ImageSchema as n, FileSchema as o, DateSchema as p, COLOR_FORMATS as q, DEFAULT_COLOR_FORMAT as r, splitModuleFilePathAndModulePath as s, DateTimeSchema as t, RouteSchema as u, RichTextSchema as v, deserializeSchema as w, previewScope as x, CODE_LANGUAGES as y, isInlineRender as z };