From bcdeea050dd4edd28de0ffa9957c63af688b3e49 Mon Sep 17 00:00:00 2001
From: Lero <weblero2020@gmail.com>
Date: Thu, 15 Oct 2026 18:56:28 +0300
Subject: [PATCH] feat: the json form wears Payload's own group frame

---
 .../src/components/JsonFormClient.tsx         | 108 ++++++++++--------
 .../src/components/jsonForm.scss              |  35 +++---
 2 files changed, 80 insertions(+), 63 deletions(-)

diff --git a/packages/payload-plugin-json-form-builder/src/components/JsonFormClient.tsx b/packages/payload-plugin-json-form-builder/src/components/JsonFormClient.tsx
index ed4f13ae..aa75dd6d 100644
--- a/packages/payload-plugin-json-form-builder/src/components/JsonFormClient.tsx
+++ b/packages/payload-plugin-json-form-builder/src/components/JsonFormClient.tsx
@@ -14,6 +14,7 @@ import {
   FieldLabel,
   GearIcon,
   ListViewIcon,
+  useCollapsible,
   useDrawerSlug,
   useField,
   useModal,
@@ -46,6 +47,7 @@ export const JsonFormClient = ({ library, mayBuild, shares: offered, ...props }:
   const { setValue, showError, value } = useField<unknown>({ path, validate });
   const { openModal } = useModal();
   const builderSlug = useDrawerSlug("json-builder");
+  const { isWithinCollapsible } = useCollapsible();
   const dropSlug = useDrawerSlug("json-form-drop");
   const [dropping, setDropping] = useState("");
   const build = () => openModal(builderSlug);
@@ -67,27 +69,20 @@ export const JsonFormClient = ({ library, mayBuild, shares: offered, ...props }:
 
   return (
     <>
-      {field.admin?.description ? (
-        <div className="json-form__said">
-          <FieldDescription description={field.admin.description} path={path} />
-        </div>
-      ) : null}
-      <div className={cn("field-type json-form", unfilled.length > 0 && "json-form--alarmed")}>
-        <div className="json-form__bar">
-          <h4 className="json-form__title">
+      <div
+        className={cn(
+          "field-type group-field json-form",
+          isWithinCollapsible ? "group-field--within-collapsible" : "group-field--top-level",
+          unfilled.length > 0 && "json-form--alarmed"
+        )}
+      >
+        <div className="group-field__header json-form__bar">
+          <h3 className="group-field__title json-form__title">
             <FieldLabel as="span" label={field.label} path={path} />
-          </h4>
+          </h3>
           <span className="json-form__badge">json</span>
 
           <div className="json-form__tools">
-            {mayBuild && !bare && (
-              <>
-                <IconButton label="Section settings" onClick={build}>
-                  <GearIcon />
-                </IconButton>
-                <span className="json-form__split" />
-              </>
-            )}
             {mayBuild && !bare && (
               <div className="json-form__views">
                 <button
@@ -110,6 +105,14 @@ export const JsonFormClient = ({ library, mayBuild, shares: offered, ...props }:
                 </button>
               </div>
             )}
+            {mayBuild && !bare && (
+              <>
+                <span className="json-form__split" />
+                <IconButton label="Field settings" onClick={build}>
+                  <GearIcon />
+                </IconButton>
+              </>
+            )}
           </div>
         </div>
         {unfilled.length > 0 ? (
@@ -190,7 +193,7 @@ export const JsonFormClient = ({ library, mayBuild, shares: offered, ...props }:
                             style={{ transform, transition, zIndex: isDragging ? 1 : undefined }}
                           >
                             <JsonNode
-                              badge={followed(node) ? "global" : undefined}
+                              badge={library || followed(node) ? "global" : undefined}
                               drag={props.readOnly ? undefined : { id: key, attributes, listeners }}
                               faults={showError}
                               hidden={node.hidden}
@@ -229,39 +232,48 @@ export const JsonFormClient = ({ library, mayBuild, shares: offered, ...props }:
                   No fields yet — someone with the builder adds them.
                 </p>
               )}
-              {mayBuild && !untyped && (
-                <Button
-                  buttonStyle="icon-label"
-                  className="array-field__add-row json-form__add-row"
-                  icon="plus"
-                  iconPosition="left"
-                  iconStyle="with-border"
-                  onClick={build}
-                >
-                  Add section
-                </Button>
-              )}
+              <div className="json-form__actions">
+                {mayBuild && !untyped && (
+                  <Button
+                    buttonStyle="icon-label"
+                    className="array-field__add-row json-form__add-row"
+                    icon="plus"
+                    iconPosition="left"
+                    iconStyle="with-border"
+                    onClick={build}
+                  >
+                    Add field
+                  </Button>
+                )}
+                <footer className="json-form__foot">
+                  <span
+                    className={cn(
+                      "json-form__state",
+                      unfilled.length || broken ? "json-form__state--off" : "json-form__state--on"
+                    )}
+                  >
+                    {broken
+                      ? "invalid"
+                      : unfilled.length
+                        ? `${unfilled.length} ${unfilled.length === 1 ? "error" : "errors"}`
+                        : "valid"}
+                  </span>
+                  <span className="json-form__meta">{`${kept} ${kept === 1 ? "field" : "fields"}`}</span>
+                  {asCode && locked ? (
+                    <span className="json-form__note">
+                      read only — the gear builds the sections
+                    </span>
+                  ) : null}
+                </footer>
+              </div>
             </>
           )}
         </div>
-        <footer className="json-form__foot">
-          <span
-            className={cn(
-              "json-form__state",
-              unfilled.length || broken ? "json-form__state--off" : "json-form__state--on"
-            )}
-          >
-            {broken
-              ? "invalid"
-              : unfilled.length
-                ? `${unfilled.length} ${unfilled.length === 1 ? "error" : "errors"}`
-                : "valid"}
-          </span>
-          <span className="json-form__meta">{`${kept} ${kept === 1 ? "section" : "sections"}`}</span>
-          {asCode && locked ? (
-            <span className="json-form__note">read only — the gear builds the sections</span>
-          ) : null}
-        </footer>
+        {field.admin?.description ? (
+          <div className="json-form__said">
+            <FieldDescription description={field.admin.description} path={path} />
+          </div>
+        ) : null}
         {mayBuild && (
           <JsonBuilder
             library={library}
diff --git a/packages/payload-plugin-json-form-builder/src/components/jsonForm.scss b/packages/payload-plugin-json-form-builder/src/components/jsonForm.scss
index c3bbee70..93c1c242 100644
--- a/packages/payload-plugin-json-form-builder/src/components/jsonForm.scss
+++ b/packages/payload-plugin-json-form-builder/src/components/jsonForm.scss
@@ -30,14 +30,13 @@
   stroke: currentColor;
   stroke-width: 1.2px;
 }
+// The frame is Payload's own: the field wears `group-field`, so its lines, gutters and the way it
+// meets a neighbouring group are the admin's to keep. Only what is ours lives below.
 .json-form {
   --json-form-alarm-bg: var(--theme-error-100);
   --json-form-alarm-ring: var(--theme-error-250);
   --json-form-good: #15803d;
   --json-form-good-dot: #16a34a;
-  border: 1px solid var(--theme-elevation-100);
-  border-radius: 4px;
-  overflow: hidden;
 }
 
 html[data-theme="dark"] .json-form {
@@ -49,13 +48,9 @@ html[data-theme="dark"] .json-form {
 
 .json-form__bar {
   align-items: center;
-  height: calc(var(--base) * 2.2);
-  background: color-mix(in srgb, var(--theme-elevation-50), black 8%);
-  border-bottom: 1px solid var(--theme-elevation-100);
   display: flex;
   gap: calc(var(--base) / 2);
   justify-content: space-between;
-  padding: 0 calc(var(--base) * 0.5) 0 var(--base);
 }
 
 .json-form__tools {
@@ -71,8 +66,7 @@ html[data-theme="dark"] .json-form {
 }
 
 .json-form__title {
-  font-size: 1.05rem;
-  margin: 0;
+  font-weight: 600;
 }
 .json-form__tools .icon-button {
   background: var(--theme-elevation-0);
@@ -101,16 +95,21 @@ html[data-theme="dark"] .json-form {
 .json-form__tools .icon-button svg .stroke {
   stroke-width: 1.8px;
 }
+.json-form__actions {
+  align-items: center;
+  display: flex;
+  gap: var(--base);
+  justify-content: space-between;
+}
+
 .json-form__foot {
   align-items: center;
-  border-top: 1px solid var(--theme-elevation-100);
   color: var(--theme-elevation-500);
   display: flex;
   font-family: var(--font-mono);
   font-size: 12px;
   gap: calc(var(--base) * 0.7);
-  height: calc(var(--base) * 1.7);
-  padding: 0 var(--base);
+  margin-left: auto;
 }
 .json-form__note {
   margin-left: auto;
@@ -224,6 +223,12 @@ html[data-theme="dark"] .json-form {
   padding: calc(var(--base) * 0.2) calc(var(--base) * 0.45);
 }
 
+.json-form__view:not(:disabled):not(.json-form__view--on):hover,
+.json-form__view:not(:disabled):not(.json-form__view--on):focus-visible {
+  background: var(--theme-elevation-50);
+  color: var(--theme-elevation-800);
+}
+
 .json-form__view:disabled {
   cursor: not-allowed;
   opacity: 0.4;
@@ -243,7 +248,7 @@ html[data-theme="dark"] .json-form {
 }
 
 .json-form__body {
-  padding: var(--base);
+  padding: 0;
 }
 .json-form__body--code {
   padding: 0;
@@ -294,7 +299,7 @@ html[data-theme="dark"] .json-form {
   flex-direction: column;
   gap: var(--spacing-field, var(--base));
 }
-.json-form__body > .json-form__add-row.btn:not(:only-child) {
+.json-form__body > .json-form__actions:not(:only-child) {
   margin-top: var(--spacing-field, var(--base));
 }
 .json-form__menu {
@@ -791,7 +796,7 @@ body.json-builder-open {
 
 
 .json-form__said {
-  margin-block-end: calc(var(--base) * 0.6);
+  margin-block-start: calc(var(--base) * 0.6);
 }
 
 .json-builder__row {