@flanksource/clicky-ui 0.3.34 → 0.3.36

package/dist/components/json-schema-form-property-preview.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Markdown = require("../data/Markdown.cjs");
+const utils = require("../lib/utils.cjs");
+const jsonSchemaFormFields = require("./json-schema-form-fields.cjs");
+const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
+const jsonSchemaFormResolve = require("./json-schema-form-resolve.cjs");
+const jsonSchemaFormPropertySelection = require("./json-schema-form-property-selection.cjs");
+const jsonSchemaFormPropertyCollection = require("./json-schema-form-property-collection.cjs");
+const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
+function PropertyValuePreview({
+  field,
+  fieldId,
+  ctx
+}) {
+  var _a;
+  if (field.kind === "markdown") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Markdown.Markdown,
+      {
+        text: jsonSchemaFormUtils.toText(field.value),
+        className: utils.cn(
+          "break-words [&_p]:my-1 [&_h2]:my-2",
+          jsonSchemaFormSize.labelSizeClass[ctx.size]
+        )
+      }
+    );
+  }
+  if (field.kind === "string" || field.kind === "date" || field.kind === "number" || field.kind === "boolean") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+      field.prefix,
+      !ctx.presentation && field.kind === "boolean" && typeof field.value === "boolean" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: fieldId, className: "sr-only", children: field.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          jsonSchemaFormFields.BooleanControl,
+          {
+            field,
+            fieldId,
+            size: ctx.size,
+            readOnly: true
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.ReadOnlyValue, { field, fieldId, size: ctx.size }),
+      field.suffix ?? (field.unit ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: field.unit }) : null)
+    ] });
+  }
+  const selection = field.kind === "enum" || field.kind === "lookup" || field.kind === "array" && field.arrayDisplay !== "stacked" && field.arrayDisplay !== "list" && (Boolean(jsonSchemaFormResolve.scalarItemsType(field.itemSchema)) || Boolean((_a = field.options) == null ? void 0 : _a.length));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id: fieldId,
+      "data-jsf-readonly": true,
+      className: utils.cn(
+        "flex min-w-0 items-center gap-1.5",
+        jsonSchemaFormSize.controlMinHeightClass[ctx.size],
+        jsonSchemaFormSize.labelSizeClass[ctx.size]
+      ),
+      children: [
+        field.prefix,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: selection ? /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormPropertySelection.PropertySelectionPreview, { field, ctx }) : field.kind === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-pre-wrap break-words", children: jsonSchemaFormUtils.toText(field.value) || "—" }) : /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormPropertyCollection.PropertyCollectionPreview, { field, ctx }) }),
+        field.suffix
+      ]
+    }
+  );
+}
+exports.PropertyValuePreview = PropertyValuePreview;
+//# sourceMappingURL=json-schema-form-property-preview.cjs.map

package/dist/components/json-schema-form-property-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-property-preview.cjs","sources":["../../src/components/json-schema-form-property-preview.tsx"],"sourcesContent":["import { Markdown } from \"../data/Markdown\";\nimport { cn } from \"../lib/utils\";\nimport { BooleanControl, ReadOnlyValue } from \"./json-schema-form-fields\";\nimport { controlMinHeightClass, labelSizeClass } from \"./json-schema-form-size\";\nimport { scalarItemsType } from \"./json-schema-form-resolve\";\nimport { PropertySelectionPreview } from \"./json-schema-form-property-selection\";\nimport { PropertyCollectionPreview } from \"./json-schema-form-property-collection\";\nimport { toText } from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\nexport function PropertyValuePreview({\n  field,\n  fieldId,\n  ctx,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  ctx: RenderContext;\n}) {\n  if (field.kind === \"markdown\") {\n    return (\n      <Markdown\n        text={toText(field.value)}\n        className={cn(\n          \"break-words [&_p]:my-1 [&_h2]:my-2\",\n          labelSizeClass[ctx.size],\n        )}\n      />\n    );\n  }\n  if (\n    field.kind === \"string\" ||\n    field.kind === \"date\" ||\n    field.kind === \"number\" ||\n    field.kind === \"boolean\"\n  ) {\n    return (\n      <div className=\"flex min-w-0 items-center gap-1.5\">\n        {field.prefix}\n        {/* A property row is one field with room for a checkbox glyph and its\n            own Edit button, so a boolean previews as the disabled checkbox the\n            editor will hand back. Nested inside a collection preview\n            (`presentation`) there is no such affordance — the whole summary\n            opens as a unit — so a disabled checkbox would be chrome promising\n            an interaction the cell does not have, and it reads as text. */}\n        {!ctx.presentation &&\n        field.kind === \"boolean\" &&\n        typeof field.value === \"boolean\" ? (\n          <>\n            <label htmlFor={fieldId} className=\"sr-only\">\n              {field.label}\n            </label>\n            <BooleanControl\n              field={field}\n              fieldId={fieldId}\n              size={ctx.size}\n              readOnly\n            />\n          </>\n        ) : (\n          <ReadOnlyValue field={field} fieldId={fieldId} size={ctx.size} />\n        )}\n        {field.suffix ??\n          (field.unit ? (\n            <span className=\"text-muted-foreground\">{field.unit}</span>\n          ) : null)}\n      </div>\n    );\n  }\n  const selection =\n    field.kind === \"enum\" ||\n    field.kind === \"lookup\" ||\n    (field.kind === \"array\" &&\n      field.arrayDisplay !== \"stacked\" &&\n      field.arrayDisplay !== \"list\" &&\n      (Boolean(scalarItemsType(field.itemSchema)) ||\n        Boolean(field.options?.length)));\n  return (\n    <div\n      id={fieldId}\n      data-jsf-readonly\n      className={cn(\n        \"flex min-w-0 items-center gap-1.5\",\n        controlMinHeightClass[ctx.size],\n        labelSizeClass[ctx.size],\n      )}\n    >\n      {field.prefix}\n      <div className=\"min-w-0 flex-1\">\n        {selection ? (\n          <PropertySelectionPreview field={field} ctx={ctx} />\n        ) : field.kind === \"textarea\" ? (\n          <span className=\"whitespace-pre-wrap break-words\">\n            {toText(field.value) || \"—\"}\n          </span>\n        ) : (\n          <PropertyCollectionPreview field={field} ctx={ctx} />\n        )}\n      </div>\n      {field.suffix}\n    </div>\n  );\n}\n"],"names":["jsx","Markdown","toText","cn","labelSizeClass","jsxs","Fragment","BooleanControl","ReadOnlyValue","scalarItemsType","controlMinHeightClass","PropertySelectionPreview","PropertyCollectionPreview"],"mappings":";;;;;;;;;;;AAUO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAIG;;AACD,MAAI,MAAM,SAAS,YAAY;AAC7B,WACEA,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,MAAMC,oBAAAA,OAAO,MAAM,KAAK;AAAA,QACxB,WAAWC,MAAAA;AAAAA,UACT;AAAA,UACAC,mBAAAA,eAAe,IAAI,IAAI;AAAA,QAAA;AAAA,MACzB;AAAA,IAAA;AAAA,EAGN;AACA,MACE,MAAM,SAAS,YACf,MAAM,SAAS,UACf,MAAM,SAAS,YACf,MAAM,SAAS,WACf;AACA,WACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,MAAA,MAAM;AAAA,MAON,CAAC,IAAI,gBACN,MAAM,SAAS,aACf,OAAO,MAAM,UAAU,YACrBA,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,QAAAN,+BAAC,WAAM,SAAS,SAAS,WAAU,WAChC,gBAAM,OACT;AAAA,QACAA,2BAAAA;AAAAA,UAACO,qBAAAA;AAAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,MAAM,IAAI;AAAA,YACV,UAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACV,GACF,IAEAP,+BAACQ,qBAAAA,eAAA,EAAc,OAAc,SAAkB,MAAM,IAAI,MAAM;AAAA,MAEhE,MAAM,WACJ,MAAM,OACLR,2BAAAA,IAAC,UAAK,WAAU,yBAAyB,UAAA,MAAM,KAAA,CAAK,IAClD;AAAA,IAAA,GACR;AAAA,EAEJ;AACA,QAAM,YACJ,MAAM,SAAS,UACf,MAAM,SAAS,YACd,MAAM,SAAS,WACd,MAAM,iBAAiB,aACvB,MAAM,iBAAiB,WACtB,QAAQS,sBAAAA,gBAAgB,MAAM,UAAU,CAAC,KACxC,SAAQ,WAAM,YAAN,mBAAe,MAAM;AACnC,SACEJ,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,qBAAiB;AAAA,MACjB,WAAWF,MAAAA;AAAAA,QACT;AAAA,QACAO,mBAAAA,sBAAsB,IAAI,IAAI;AAAA,QAC9BN,mBAAAA,eAAe,IAAI,IAAI;AAAA,MAAA;AAAA,MAGxB,UAAA;AAAA,QAAA,MAAM;AAAA,QACPJ,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBACZ,UAAA,YACCA,2BAAAA,IAACW,gCAAAA,0BAAA,EAAyB,OAAc,IAAA,CAAU,IAChD,MAAM,SAAS,aACjBX,2BAAAA,IAAC,QAAA,EAAK,WAAU,mCACb,UAAAE,oBAAAA,OAAO,MAAM,KAAK,KAAK,IAAA,CAC1B,IAEAF,2BAAAA,IAACY,iCAAAA,2BAAA,EAA0B,OAAc,IAAA,CAAU,GAEvD;AAAA,QACC,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;;"}

package/dist/components/json-schema-form-property-preview.d.ts

@@ -0,0 +1,7 @@
+import { FieldControl, RenderContext } from './json-schema-form-types';
+export declare function PropertyValuePreview({ field, fieldId, ctx, }: {
+    field: FieldControl;
+    fieldId: string;
+    ctx: RenderContext;
+}): import("react").JSX.Element;
+//# sourceMappingURL=json-schema-form-property-preview.d.ts.map

package/dist/components/json-schema-form-property-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-property-preview.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-property-preview.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAE5E,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,aAAa,CAAC;CACpB,+BAoFA"}

package/dist/components/json-schema-form-property-preview.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Markdown } from "../data/Markdown.js";
+import { cn } from "../lib/utils.js";
+import { BooleanControl, ReadOnlyValue } from "./json-schema-form-fields.js";
+import { labelSizeClass, controlMinHeightClass } from "./json-schema-form-size.js";
+import { scalarItemsType } from "./json-schema-form-resolve.js";
+import { PropertySelectionPreview } from "./json-schema-form-property-selection.js";
+import { PropertyCollectionPreview } from "./json-schema-form-property-collection.js";
+import { toText } from "./json-schema-form-utils.js";
+function PropertyValuePreview({
+  field,
+  fieldId,
+  ctx
+}) {
+  var _a;
+  if (field.kind === "markdown") {
+    return /* @__PURE__ */ jsx(
+      Markdown,
+      {
+        text: toText(field.value),
+        className: cn(
+          "break-words [&_p]:my-1 [&_h2]:my-2",
+          labelSizeClass[ctx.size]
+        )
+      }
+    );
+  }
+  if (field.kind === "string" || field.kind === "date" || field.kind === "number" || field.kind === "boolean") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+      field.prefix,
+      !ctx.presentation && field.kind === "boolean" && typeof field.value === "boolean" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: fieldId, className: "sr-only", children: field.label }),
+        /* @__PURE__ */ jsx(
+          BooleanControl,
+          {
+            field,
+            fieldId,
+            size: ctx.size,
+            readOnly: true
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(ReadOnlyValue, { field, fieldId, size: ctx.size }),
+      field.suffix ?? (field.unit ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: field.unit }) : null)
+    ] });
+  }
+  const selection = field.kind === "enum" || field.kind === "lookup" || field.kind === "array" && field.arrayDisplay !== "stacked" && field.arrayDisplay !== "list" && (Boolean(scalarItemsType(field.itemSchema)) || Boolean((_a = field.options) == null ? void 0 : _a.length));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: fieldId,
+      "data-jsf-readonly": true,
+      className: cn(
+        "flex min-w-0 items-center gap-1.5",
+        controlMinHeightClass[ctx.size],
+        labelSizeClass[ctx.size]
+      ),
+      children: [
+        field.prefix,
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: selection ? /* @__PURE__ */ jsx(PropertySelectionPreview, { field, ctx }) : field.kind === "textarea" ? /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap break-words", children: toText(field.value) || "—" }) : /* @__PURE__ */ jsx(PropertyCollectionPreview, { field, ctx }) }),
+        field.suffix
+      ]
+    }
+  );
+}
+export {
+  PropertyValuePreview
+};
+//# sourceMappingURL=json-schema-form-property-preview.js.map

package/dist/components/json-schema-form-property-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-property-preview.js","sources":["../../src/components/json-schema-form-property-preview.tsx"],"sourcesContent":["import { Markdown } from \"../data/Markdown\";\nimport { cn } from \"../lib/utils\";\nimport { BooleanControl, ReadOnlyValue } from \"./json-schema-form-fields\";\nimport { controlMinHeightClass, labelSizeClass } from \"./json-schema-form-size\";\nimport { scalarItemsType } from \"./json-schema-form-resolve\";\nimport { PropertySelectionPreview } from \"./json-schema-form-property-selection\";\nimport { PropertyCollectionPreview } from \"./json-schema-form-property-collection\";\nimport { toText } from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\nexport function PropertyValuePreview({\n  field,\n  fieldId,\n  ctx,\n}: {\n  field: FieldControl;\n  fieldId: string;\n  ctx: RenderContext;\n}) {\n  if (field.kind === \"markdown\") {\n    return (\n      <Markdown\n        text={toText(field.value)}\n        className={cn(\n          \"break-words [&_p]:my-1 [&_h2]:my-2\",\n          labelSizeClass[ctx.size],\n        )}\n      />\n    );\n  }\n  if (\n    field.kind === \"string\" ||\n    field.kind === \"date\" ||\n    field.kind === \"number\" ||\n    field.kind === \"boolean\"\n  ) {\n    return (\n      <div className=\"flex min-w-0 items-center gap-1.5\">\n        {field.prefix}\n        {/* A property row is one field with room for a checkbox glyph and its\n            own Edit button, so a boolean previews as the disabled checkbox the\n            editor will hand back. Nested inside a collection preview\n            (`presentation`) there is no such affordance — the whole summary\n            opens as a unit — so a disabled checkbox would be chrome promising\n            an interaction the cell does not have, and it reads as text. */}\n        {!ctx.presentation &&\n        field.kind === \"boolean\" &&\n        typeof field.value === \"boolean\" ? (\n          <>\n            <label htmlFor={fieldId} className=\"sr-only\">\n              {field.label}\n            </label>\n            <BooleanControl\n              field={field}\n              fieldId={fieldId}\n              size={ctx.size}\n              readOnly\n            />\n          </>\n        ) : (\n          <ReadOnlyValue field={field} fieldId={fieldId} size={ctx.size} />\n        )}\n        {field.suffix ??\n          (field.unit ? (\n            <span className=\"text-muted-foreground\">{field.unit}</span>\n          ) : null)}\n      </div>\n    );\n  }\n  const selection =\n    field.kind === \"enum\" ||\n    field.kind === \"lookup\" ||\n    (field.kind === \"array\" &&\n      field.arrayDisplay !== \"stacked\" &&\n      field.arrayDisplay !== \"list\" &&\n      (Boolean(scalarItemsType(field.itemSchema)) ||\n        Boolean(field.options?.length)));\n  return (\n    <div\n      id={fieldId}\n      data-jsf-readonly\n      className={cn(\n        \"flex min-w-0 items-center gap-1.5\",\n        controlMinHeightClass[ctx.size],\n        labelSizeClass[ctx.size],\n      )}\n    >\n      {field.prefix}\n      <div className=\"min-w-0 flex-1\">\n        {selection ? (\n          <PropertySelectionPreview field={field} ctx={ctx} />\n        ) : field.kind === \"textarea\" ? (\n          <span className=\"whitespace-pre-wrap break-words\">\n            {toText(field.value) || \"—\"}\n          </span>\n        ) : (\n          <PropertyCollectionPreview field={field} ctx={ctx} />\n        )}\n      </div>\n      {field.suffix}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAIG;;AACD,MAAI,MAAM,SAAS,YAAY;AAC7B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,OAAO,MAAM,KAAK;AAAA,QACxB,WAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI,IAAI;AAAA,QAAA;AAAA,MACzB;AAAA,IAAA;AAAA,EAGN;AACA,MACE,MAAM,SAAS,YACf,MAAM,SAAS,UACf,MAAM,SAAS,YACf,MAAM,SAAS,WACf;AACA,WACE,qBAAC,OAAA,EAAI,WAAU,qCACZ,UAAA;AAAA,MAAA,MAAM;AAAA,MAON,CAAC,IAAI,gBACN,MAAM,SAAS,aACf,OAAO,MAAM,UAAU,YACrB,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,WAAM,SAAS,SAAS,WAAU,WAChC,gBAAM,OACT;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,MAAM,IAAI;AAAA,YACV,UAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACV,GACF,IAEA,oBAAC,eAAA,EAAc,OAAc,SAAkB,MAAM,IAAI,MAAM;AAAA,MAEhE,MAAM,WACJ,MAAM,OACL,oBAAC,UAAK,WAAU,yBAAyB,UAAA,MAAM,KAAA,CAAK,IAClD;AAAA,IAAA,GACR;AAAA,EAEJ;AACA,QAAM,YACJ,MAAM,SAAS,UACf,MAAM,SAAS,YACd,MAAM,SAAS,WACd,MAAM,iBAAiB,aACvB,MAAM,iBAAiB,WACtB,QAAQ,gBAAgB,MAAM,UAAU,CAAC,KACxC,SAAQ,WAAM,YAAN,mBAAe,MAAM;AACnC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,sBAAsB,IAAI,IAAI;AAAA,QAC9B,eAAe,IAAI,IAAI;AAAA,MAAA;AAAA,MAGxB,UAAA;AAAA,QAAA,MAAM;AAAA,QACP,oBAAC,OAAA,EAAI,WAAU,kBACZ,UAAA,YACC,oBAAC,0BAAA,EAAyB,OAAc,IAAA,CAAU,IAChD,MAAM,SAAS,aACjB,oBAAC,QAAA,EAAK,WAAU,mCACb,UAAA,OAAO,MAAM,KAAK,KAAK,IAAA,CAC1B,IAEA,oBAAC,2BAAA,EAA0B,OAAc,IAAA,CAAU,GAEvD;AAAA,QACC,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/components/json-schema-form-property-selection.cjs

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Icon = require("../data/Icon.cjs");
+const FilterPill = require("../data/FilterPill.cjs");
+const ComboboxTags = require("./ComboboxTags.cjs");
+const formLookupContext = require("./form-lookup-context.cjs");
+function PropertySelectionPreview({
+  field,
+  ctx
+}) {
+  const fetcher = formLookupContext.useLookupFetcher();
+  const descriptor = field.lookup;
+  const rootValue = ctx.rootValue;
+  const [options, setOptions] = react.useState([]);
+  const [error, setError] = react.useState();
+  react.useEffect(() => {
+    if (!descriptor || !fetcher) return;
+    let cancelled = false;
+    setOptions([]);
+    setError(void 0);
+    fetcher({
+      descriptor,
+      query: "",
+      ...rootValue ? { rootValue } : {}
+    }).then(
+      (next) => {
+        if (!cancelled) setOptions(next);
+      },
+      (cause) => {
+        if (!cancelled)
+          setError(`Unable to load ${field.label}: ${String(cause)}`);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [descriptor, fetcher, rootValue, field.label]);
+  const choices = descriptor && fetcher ? options : field.options ?? [];
+  const multiple = field.kind === "array" || (descriptor == null ? void 0 : descriptor.multi) === true;
+  const selected = Array.isArray(field.value) ? field.value.map(String) : field.value == null || field.value === "" ? [] : [String(field.value)];
+  const values = field.arrayDisplay === "filter-pills" && selected.length === 0 ? choices.map((option) => option.value) : selected;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [
+    values.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" }),
+    values.map((value, index) => {
+      const option = choices.find((candidate) => candidate.value === value);
+      if (field.arrayDisplay === "filter-pills")
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          FilterPill.FilterPill,
+          {
+            label: (option == null ? void 0 : option.label) ?? value,
+            mode: "active"
+          },
+          `${value}-${index}`
+        );
+      if (multiple)
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ComboboxTags.ComboboxTag,
+          {
+            value,
+            ...option ? { option } : {}
+          },
+          `${value}-${index}`
+        );
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: "inline-flex min-w-0 items-center gap-1.5",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Icon.LabelIcon,
+              {
+                icon: option == null ? void 0 : option.icon,
+                className: "shrink-0 text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: (option == null ? void 0 : option.label) ?? value }),
+            (option == null ? void 0 : option.description) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: option.description })
+          ]
+        },
+        value
+      );
+    }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { role: "alert", className: "text-xs text-destructive", children: error })
+  ] });
+}
+exports.PropertySelectionPreview = PropertySelectionPreview;
+//# sourceMappingURL=json-schema-form-property-selection.cjs.map

package/dist/components/json-schema-form-property-selection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-property-selection.cjs","sources":["../../src/components/json-schema-form-property-selection.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { LabelIcon } from \"../data/Icon\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { ComboboxTag } from \"./ComboboxTags\";\nimport { useLookupFetcher } from \"./form-lookup-context\";\nimport type {\n  FieldControl,\n  FieldOption,\n  RenderContext,\n} from \"./json-schema-form-types\";\n\nexport function PropertySelectionPreview({\n  field,\n  ctx,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n}) {\n  const fetcher = useLookupFetcher();\n  const descriptor = field.lookup;\n  const rootValue = ctx.rootValue;\n  const [options, setOptions] = useState<FieldOption[]>([]);\n  const [error, setError] = useState<string>();\n  useEffect(() => {\n    if (!descriptor || !fetcher) return;\n    let cancelled = false;\n    setOptions([]);\n    setError(undefined);\n    fetcher({\n      descriptor,\n      query: \"\",\n      ...(rootValue ? { rootValue } : {}),\n    }).then(\n      (next) => {\n        if (!cancelled) setOptions(next);\n      },\n      (cause: unknown) => {\n        if (!cancelled)\n          setError(`Unable to load ${field.label}: ${String(cause)}`);\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n  }, [descriptor, fetcher, rootValue, field.label]);\n  const choices = descriptor && fetcher ? options : (field.options ?? []);\n  const multiple = field.kind === \"array\" || descriptor?.multi === true;\n  const selected = Array.isArray(field.value)\n    ? field.value.map(String)\n    : field.value == null || field.value === \"\"\n      ? []\n      : [String(field.value)];\n  const values =\n    field.arrayDisplay === \"filter-pills\" && selected.length === 0\n      ? choices.map((option) => option.value)\n      : selected;\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-1\">\n      {values.length === 0 && <span className=\"text-muted-foreground\">—</span>}\n      {values.map((value, index) => {\n        const option = choices.find((candidate) => candidate.value === value);\n        if (field.arrayDisplay === \"filter-pills\")\n          return (\n            <FilterPill\n              key={`${value}-${index}`}\n              label={option?.label ?? value}\n              mode=\"active\"\n            />\n          );\n        if (multiple)\n          return (\n            <ComboboxTag\n              key={`${value}-${index}`}\n              value={value}\n              {...(option ? { option } : {})}\n            />\n          );\n        return (\n          <span\n            key={value}\n            className=\"inline-flex min-w-0 items-center gap-1.5\"\n          >\n            <LabelIcon\n              icon={option?.icon}\n              className=\"shrink-0 text-muted-foreground\"\n            />\n            <span>{option?.label ?? value}</span>\n            {option?.description && (\n              <span className=\"text-muted-foreground\">\n                {option.description}\n              </span>\n            )}\n          </span>\n        );\n      })}\n      {error && (\n        <span role=\"alert\" className=\"text-xs text-destructive\">\n          {error}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["useLookupFetcher","useState","useEffect","jsxs","jsx","FilterPill","ComboboxTag","LabelIcon"],"mappings":";;;;;;;;AAWO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AACF,GAGG;AACD,QAAM,UAAUA,kBAAAA,iBAAA;AAChB,QAAM,aAAa,MAAM;AACzB,QAAM,YAAY,IAAI;AACtB,QAAM,CAAC,SAAS,UAAU,IAAIC,MAAAA,SAAwB,CAAA,CAAE;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAA;AAC1BC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,QAAS;AAC7B,QAAI,YAAY;AAChB,eAAW,CAAA,CAAE;AACb,aAAS,MAAS;AAClB,YAAQ;AAAA,MACN;AAAA,MACA,OAAO;AAAA,MACP,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC,CAClC,EAAE;AAAA,MACD,CAAC,SAAS;AACR,YAAI,CAAC,UAAW,YAAW,IAAI;AAAA,MACjC;AAAA,MACA,CAAC,UAAmB;AAClB,YAAI,CAAC;AACH,mBAAS,kBAAkB,MAAM,KAAK,KAAK,OAAO,KAAK,CAAC,EAAE;AAAA,MAC9D;AAAA,IAAA;AAEF,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,YAAY,SAAS,WAAW,MAAM,KAAK,CAAC;AAChD,QAAM,UAAU,cAAc,UAAU,UAAW,MAAM,WAAW,CAAA;AACpE,QAAM,WAAW,MAAM,SAAS,YAAW,yCAAY,WAAU;AACjE,QAAM,WAAW,MAAM,QAAQ,MAAM,KAAK,IACtC,MAAM,MAAM,IAAI,MAAM,IACtB,MAAM,SAAS,QAAQ,MAAM,UAAU,KACrC,CAAA,IACA,CAAC,OAAO,MAAM,KAAK,CAAC;AAC1B,QAAM,SACJ,MAAM,iBAAiB,kBAAkB,SAAS,WAAW,IACzD,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,IACpC;AACN,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,6CACZ,UAAA;AAAA,IAAA,OAAO,WAAW,KAAKC,+BAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,KAAC;AAAA,IAChE,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,YAAM,SAAS,QAAQ,KAAK,CAAC,cAAc,UAAU,UAAU,KAAK;AACpE,UAAI,MAAM,iBAAiB;AACzB,eACEA,2BAAAA;AAAAA,UAACC,WAAAA;AAAAA,UAAA;AAAA,YAEC,QAAO,iCAAQ,UAAS;AAAA,YACxB,MAAK;AAAA,UAAA;AAAA,UAFA,GAAG,KAAK,IAAI,KAAK;AAAA,QAAA;AAK5B,UAAI;AACF,eACED,2BAAAA;AAAAA,UAACE,aAAAA;AAAAA,UAAA;AAAA,YAEC;AAAA,YACC,GAAI,SAAS,EAAE,WAAW,CAAA;AAAA,UAAC;AAAA,UAFvB,GAAG,KAAK,IAAI,KAAK;AAAA,QAAA;AAK5B,aACEH,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAAC,2BAAAA;AAAAA,cAACG,KAAAA;AAAAA,cAAA;AAAA,gBACC,MAAM,iCAAQ;AAAA,gBACd,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEZH,2BAAAA,IAAC,QAAA,EAAM,WAAA,iCAAQ,UAAS,OAAM;AAAA,aAC7B,iCAAQ,gBACPA,2BAAAA,IAAC,UAAK,WAAU,yBACb,iBAAO,YAAA,CACV;AAAA,UAAA;AAAA,QAAA;AAAA,QAXG;AAAA,MAAA;AAAA,IAeX,CAAC;AAAA,IACA,SACCA,2BAAAA,IAAC,QAAA,EAAK,MAAK,SAAQ,WAAU,4BAC1B,UAAA,MAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;;"}

package/dist/components/json-schema-form-property-selection.d.ts

@@ -0,0 +1,6 @@
+import { FieldControl, RenderContext } from './json-schema-form-types';
+export declare function PropertySelectionPreview({ field, ctx, }: {
+    field: FieldControl;
+    ctx: RenderContext;
+}): import("react").JSX.Element;
+//# sourceMappingURL=json-schema-form-property-selection.d.ts.map

package/dist/components/json-schema-form-property-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-property-selection.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-property-selection.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,YAAY,EAEZ,aAAa,EACd,MAAM,0BAA0B,CAAC;AAElC,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;CACpB,+BAqFA"}

package/dist/components/json-schema-form-property-selection.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { LabelIcon } from "../data/Icon.js";
+import { FilterPill } from "../data/FilterPill.js";
+import { ComboboxTag } from "./ComboboxTags.js";
+import { useLookupFetcher } from "./form-lookup-context.js";
+function PropertySelectionPreview({
+  field,
+  ctx
+}) {
+  const fetcher = useLookupFetcher();
+  const descriptor = field.lookup;
+  const rootValue = ctx.rootValue;
+  const [options, setOptions] = useState([]);
+  const [error, setError] = useState();
+  useEffect(() => {
+    if (!descriptor || !fetcher) return;
+    let cancelled = false;
+    setOptions([]);
+    setError(void 0);
+    fetcher({
+      descriptor,
+      query: "",
+      ...rootValue ? { rootValue } : {}
+    }).then(
+      (next) => {
+        if (!cancelled) setOptions(next);
+      },
+      (cause) => {
+        if (!cancelled)
+          setError(`Unable to load ${field.label}: ${String(cause)}`);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [descriptor, fetcher, rootValue, field.label]);
+  const choices = descriptor && fetcher ? options : field.options ?? [];
+  const multiple = field.kind === "array" || (descriptor == null ? void 0 : descriptor.multi) === true;
+  const selected = Array.isArray(field.value) ? field.value.map(String) : field.value == null || field.value === "" ? [] : [String(field.value)];
+  const values = field.arrayDisplay === "filter-pills" && selected.length === 0 ? choices.map((option) => option.value) : selected;
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1", children: [
+    values.length === 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }),
+    values.map((value, index) => {
+      const option = choices.find((candidate) => candidate.value === value);
+      if (field.arrayDisplay === "filter-pills")
+        return /* @__PURE__ */ jsx(
+          FilterPill,
+          {
+            label: (option == null ? void 0 : option.label) ?? value,
+            mode: "active"
+          },
+          `${value}-${index}`
+        );
+      if (multiple)
+        return /* @__PURE__ */ jsx(
+          ComboboxTag,
+          {
+            value,
+            ...option ? { option } : {}
+          },
+          `${value}-${index}`
+        );
+      return /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex min-w-0 items-center gap-1.5",
+          children: [
+            /* @__PURE__ */ jsx(
+              LabelIcon,
+              {
+                icon: option == null ? void 0 : option.icon,
+                className: "shrink-0 text-muted-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: (option == null ? void 0 : option.label) ?? value }),
+            (option == null ? void 0 : option.description) && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: option.description })
+          ]
+        },
+        value
+      );
+    }),
+    error && /* @__PURE__ */ jsx("span", { role: "alert", className: "text-xs text-destructive", children: error })
+  ] });
+}
+export {
+  PropertySelectionPreview
+};
+//# sourceMappingURL=json-schema-form-property-selection.js.map

package/dist/components/json-schema-form-property-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-schema-form-property-selection.js","sources":["../../src/components/json-schema-form-property-selection.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { LabelIcon } from \"../data/Icon\";\nimport { FilterPill } from \"../data/FilterPill\";\nimport { ComboboxTag } from \"./ComboboxTags\";\nimport { useLookupFetcher } from \"./form-lookup-context\";\nimport type {\n  FieldControl,\n  FieldOption,\n  RenderContext,\n} from \"./json-schema-form-types\";\n\nexport function PropertySelectionPreview({\n  field,\n  ctx,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n}) {\n  const fetcher = useLookupFetcher();\n  const descriptor = field.lookup;\n  const rootValue = ctx.rootValue;\n  const [options, setOptions] = useState<FieldOption[]>([]);\n  const [error, setError] = useState<string>();\n  useEffect(() => {\n    if (!descriptor || !fetcher) return;\n    let cancelled = false;\n    setOptions([]);\n    setError(undefined);\n    fetcher({\n      descriptor,\n      query: \"\",\n      ...(rootValue ? { rootValue } : {}),\n    }).then(\n      (next) => {\n        if (!cancelled) setOptions(next);\n      },\n      (cause: unknown) => {\n        if (!cancelled)\n          setError(`Unable to load ${field.label}: ${String(cause)}`);\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n  }, [descriptor, fetcher, rootValue, field.label]);\n  const choices = descriptor && fetcher ? options : (field.options ?? []);\n  const multiple = field.kind === \"array\" || descriptor?.multi === true;\n  const selected = Array.isArray(field.value)\n    ? field.value.map(String)\n    : field.value == null || field.value === \"\"\n      ? []\n      : [String(field.value)];\n  const values =\n    field.arrayDisplay === \"filter-pills\" && selected.length === 0\n      ? choices.map((option) => option.value)\n      : selected;\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-1\">\n      {values.length === 0 && <span className=\"text-muted-foreground\">—</span>}\n      {values.map((value, index) => {\n        const option = choices.find((candidate) => candidate.value === value);\n        if (field.arrayDisplay === \"filter-pills\")\n          return (\n            <FilterPill\n              key={`${value}-${index}`}\n              label={option?.label ?? value}\n              mode=\"active\"\n            />\n          );\n        if (multiple)\n          return (\n            <ComboboxTag\n              key={`${value}-${index}`}\n              value={value}\n              {...(option ? { option } : {})}\n            />\n          );\n        return (\n          <span\n            key={value}\n            className=\"inline-flex min-w-0 items-center gap-1.5\"\n          >\n            <LabelIcon\n              icon={option?.icon}\n              className=\"shrink-0 text-muted-foreground\"\n            />\n            <span>{option?.label ?? value}</span>\n            {option?.description && (\n              <span className=\"text-muted-foreground\">\n                {option.description}\n              </span>\n            )}\n          </span>\n        );\n      })}\n      {error && (\n        <span role=\"alert\" className=\"text-xs text-destructive\">\n          {error}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAWO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AACF,GAGG;AACD,QAAM,UAAU,iBAAA;AAChB,QAAM,aAAa,MAAM;AACzB,QAAM,YAAY,IAAI;AACtB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,CAAA,CAAE;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAA;AAC1B,YAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,QAAS;AAC7B,QAAI,YAAY;AAChB,eAAW,CAAA,CAAE;AACb,aAAS,MAAS;AAClB,YAAQ;AAAA,MACN;AAAA,MACA,OAAO;AAAA,MACP,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,IAAC,CAClC,EAAE;AAAA,MACD,CAAC,SAAS;AACR,YAAI,CAAC,UAAW,YAAW,IAAI;AAAA,MACjC;AAAA,MACA,CAAC,UAAmB;AAClB,YAAI,CAAC;AACH,mBAAS,kBAAkB,MAAM,KAAK,KAAK,OAAO,KAAK,CAAC,EAAE;AAAA,MAC9D;AAAA,IAAA;AAEF,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,YAAY,SAAS,WAAW,MAAM,KAAK,CAAC;AAChD,QAAM,UAAU,cAAc,UAAU,UAAW,MAAM,WAAW,CAAA;AACpE,QAAM,WAAW,MAAM,SAAS,YAAW,yCAAY,WAAU;AACjE,QAAM,WAAW,MAAM,QAAQ,MAAM,KAAK,IACtC,MAAM,MAAM,IAAI,MAAM,IACtB,MAAM,SAAS,QAAQ,MAAM,UAAU,KACrC,CAAA,IACA,CAAC,OAAO,MAAM,KAAK,CAAC;AAC1B,QAAM,SACJ,MAAM,iBAAiB,kBAAkB,SAAS,WAAW,IACzD,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,IACpC;AACN,SACE,qBAAC,OAAA,EAAI,WAAU,6CACZ,UAAA;AAAA,IAAA,OAAO,WAAW,KAAK,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,KAAC;AAAA,IAChE,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,YAAM,SAAS,QAAQ,KAAK,CAAC,cAAc,UAAU,UAAU,KAAK;AACpE,UAAI,MAAM,iBAAiB;AACzB,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,QAAO,iCAAQ,UAAS;AAAA,YACxB,MAAK;AAAA,UAAA;AAAA,UAFA,GAAG,KAAK,IAAI,KAAK;AAAA,QAAA;AAK5B,UAAI;AACF,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACC,GAAI,SAAS,EAAE,WAAW,CAAA;AAAA,UAAC;AAAA,UAFvB,GAAG,KAAK,IAAI,KAAK;AAAA,QAAA;AAK5B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM,iCAAQ;AAAA,gBACd,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEZ,oBAAC,QAAA,EAAM,WAAA,iCAAQ,UAAS,OAAM;AAAA,aAC7B,iCAAQ,gBACP,oBAAC,UAAK,WAAU,yBACb,iBAAO,YAAA,CACV;AAAA,UAAA;AAAA,QAAA;AAAA,QAXG;AAAA,MAAA;AAAA,IAeX,CAAC;AAAA,IACA,SACC,oBAAC,QAAA,EAAK,MAAK,SAAQ,WAAU,4BAC1B,UAAA,MAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/json-schema-form-render.cjs

@@ -14,8 +14,15 @@ const jsonSchemaFormExtensions = require("./json-schema-form-extensions.cjs");
 const jsonSchemaFormResolve = require("./json-schema-form-resolve.cjs");
 const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
 const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
+const jsonSchemaFormProperties = require("./json-schema-form-properties.cjs");
+const jsonSchemaFormPropertyPreview = require("./json-schema-form-property-preview.cjs");
+const jsonSchemaFormPropertiesSize = require("./json-schema-form-properties-size.cjs");
+const jsonSchemaFormFilter = require("./json-schema-form-filter.cjs");
 function renderValueControl(field, ctx) {
   const fieldId = jsonSchemaFormUtils.fieldInputId(ctx.instancePath, ctx.idPrefix);
+  if (ctx.presentation && field.kind !== "display" && field.kind !== "link") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormPropertyPreview.PropertyValuePreview, { field, fieldId, ctx });
+  }
   if (field.readOnly && !ownsReadOnlyRendering(field.kind)) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormFields.ReadOnlyValue, { field, fieldId, size: ctx.size });
   }
@@ -77,6 +84,8 @@ function buildField(args, ctx) {
   }
   if (!field) return null;
   if (ctx.hideReadOnlyFields && field.readOnly) return null;
+  if (ctx.hideEmpty && jsonSchemaFormUtils.isEmptyValue(field.value)) return null;
+  if (ctx.presentation) field = { ...field, readOnly: true };
   const instancePath = args.instancePath ?? jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, args.key);
   const fieldId = jsonSchemaFormUtils.fieldInputId(instancePath, ctx.idPrefix);
   const errors = jsonSchemaFormErrors.errorsAtInstancePath(ctx.errors, instancePath);
@@ -84,12 +93,15 @@ function buildField(args, ctx) {
   const messages = errors.length > 0 ? errors : soft ? [{ instancePath, message: soft }] : [];
   if (messages.length > 0) field = { ...field, invalid: true };
   const help = field.helpDisplay ?? ctx.layout.help ?? "inline";
-  let label = /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormLayout.FieldLabel, { field, fieldId, size: ctx.size, helpDisplay: help });
+  let label = /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormLayout.FieldLabel, { field, fieldId, size: ctx.layout.mode === "properties" ? jsonSchemaFormPropertiesSize.propertyControlSize[ctx.size] : ctx.size, helpDisplay: help });
   const overrideMode = field.layout === "inline" ? "inline" : field.layout === "stack" ? "stacked" : void 0;
+  const nestedProperty = ctx.layout.mode === "properties" && (field.kind === "object" || field.kind === "string-map");
   const valueCtx = {
     ...ctx,
+    ...ctx.layout.mode === "properties" && !nestedProperty ? { size: jsonSchemaFormPropertiesSize.propertyControlSize[ctx.size] } : {},
     instancePath,
-    ...overrideMode ? { layout: { ...ctx.layout, mode: overrideMode } } : {}
+    ...overrideMode && !nestedProperty ? { layout: { ...ctx.layout, mode: overrideMode } } : {},
+    ...ctx.layout.mode === "properties" && field.kind === "array" ? { layout: { ...ctx.layout, mode: overrideMode ?? "stacked" } } : {}
   };
   let value = renderValueControl(field, valueCtx);
   const postCtx = {
@@ -103,6 +115,28 @@ function buildField(args, ctx) {
     ctx.post,
     postCtx
   ));
+  if (ctx.layout.mode === "properties" && !nestedProperty && field.kind !== "display" && field.kind !== "link") {
+    value = /* @__PURE__ */ jsxRuntime.jsx(
+      jsonSchemaFormProperties.PropertyValueEditor,
+      {
+        field,
+        fieldId,
+        ctx: valueCtx,
+        renderPreview: (previewField) => jsonSchemaFormExtensions.applyPostExtensions(
+          { ...previewField, readOnly: true },
+          { label, value: /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormPropertyPreview.PropertyValuePreview, { field: previewField, fieldId: `${fieldId}-preview`, ctx: { ...valueCtx, idPrefix: `${ctx.idPrefix ?? ""}-preview` } }) },
+          ctx.post,
+          postCtx
+        ).value,
+        renderEditor: (draftField, draftCtx) => jsonSchemaFormExtensions.applyPostExtensions(
+          draftField,
+          { label, value: renderValueControl(draftField, draftCtx) },
+          draftCtx.post,
+          { ...postCtx, ...draftCtx.rootValue ? { rootValue: draftCtx.rootValue } : {}, ...draftCtx.onRootChange ? { onRootChange: draftCtx.onRootChange } : {} }
+        ).value
+      }
+    );
+  }
   return { field, fieldId, label, value, messages, help };
 }
 function renderFieldNodes(args, ctx) {
@@ -120,6 +154,9 @@ function renderFieldRow(args, ctx, opts) {
   const built = buildField(args, ctx);
   if (!built) return null;
   const { field } = built;
+  if (ctx.layout.mode === "properties" && field.kind !== "display") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormProperties.PropertiesFieldRow, { ...built, label: (opts == null ? void 0 : opts.labelOverride) ?? built.label, ctx });
+  }
   if (field.kind === "object" || field.layout === "table" || field.arrayDisplay === "accordion" || field.arrayDisplay === "cards") {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       jsonSchemaFormLayout.ObjectSection,
@@ -174,8 +211,8 @@ function renderObjectFields(schema, value, onChange, ctx, opts) {
   const hidden = new Set((opts == null ? void 0 : opts.hiddenKeys) ?? []);
   const ordered = jsonSchemaFormUtils.orderByClickyOrder(jsonSchemaFormUtils.orderByXOrder(Object.entries(properties), schema["x-order"]));
   const sorted = ctx.sortMode === "required-first" ? jsonSchemaFormUtils.orderRequiredFirst(ordered, required) : ctx.sortMode === "priority" ? jsonSchemaFormUtils.orderByPriority(ordered, required, value) : ordered;
-  const entries = ctx.depth === 0 && ctx.fieldFilter ? sorted.filter(([key, prop]) => jsonSchemaFormUtils.matchesFieldFilter(key, prop, ctx.fieldFilter)) : sorted;
-  const columns = ctx.layout.mode === "inline" ? 1 : jsonSchemaFormUtils.normalizeColumns(schema["x-columns"]);
+  const entries = ctx.depth === 0 && ctx.fieldFilter ? sorted.filter(([key, prop]) => jsonSchemaFormFilter.matchesFieldFilter({ key, prop, filter: ctx.fieldFilter, value: value[key] })) : sorted;
+  const columns = ctx.layout.mode !== "stacked" ? 1 : jsonSchemaFormUtils.normalizeColumns(schema["x-columns"]);
   return entries.flatMap(([key, prop]) => {
     if (hidden.has(key)) return [];
     const row = renderFieldRow(