@valbuild/core 0.106.0 → 0.109.0

package/dist/{index-193f19b4.esm.js → index-db33b67c.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"]();
@@ -1859,6 +2104,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 +2116,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 +2333,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 +2352,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,
@@ -2160,6 +2450,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 +2460,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 +2488,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 +2508,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 +2568,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 +2587,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 +2671,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 +2681,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 +3158,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 +3177,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 +3247,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 +3593,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 +3607,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 +3978,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 +4030,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 +4096,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,
@@ -3769,8 +4163,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 +4178,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 +4188,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 +4216,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 +4823,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 +4833,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 +4916,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 +4949,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 +5023,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 +5032,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 +5096,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 +5115,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 +5188,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 +5199,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 +5342,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 +5361,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 +5426,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 +5479,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 +5491,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 +5690,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 +5709,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 +5845,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 +5855,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 +5957,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 +5988,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 +6062,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 +6072,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 +6206,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 +6237,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 +6791,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 +6801,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 +6911,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,
@@ -8083,7 +8822,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 +8833,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 +8857,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 +8876,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 +8914,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 +8946,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 +9051,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.
+ *
+ * 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.
  *
- * 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 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 +9075,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,9 +9083,29 @@ 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`.
  */
 
 var externalPageRouter = {