feat: collapsible grouped fields, blocks, and repeaters

[bobbwal]

Description

Adds collapsible UI for grouped object fields, blocks, and repeaters in admin forms, defaults them to collapsed, and aligns toggle chevrons. New items expand automatically.

Also adds explicit object field layout control via objectLayout ('nested' | 'flat') and clarifies collapsed behaviour in docs (collapsed applies to nested only).

This PR also adds session-level collapsed/expanded state persistence for grouped fields, repeaters, and blocks (scoped per document/collection), plus validation visibility improvements so hidden errors are revealed.

Fixes #634

Includes fixes from #649 and #645 (merged into this branch).

Changes

• Add group headings for content blocks and collapsible object groups
• Add objectLayout support for object fields (nested default, flat non-collapsible)
• Add collapsed option for object group fields (default collapsed)
• Make block and repeater items collapsible with toggle chevrons
• Default items to collapsed; auto-expand newly added and duplicated items
• Persist collapsed/expanded state for objects, repeaters, and blocks within session
• Scope persisted UI state by collection/document to avoid cross-collection leakage
• Keep persisted state stable through reorder flows
• Improve validation visibility for collapsed sections (reveal invalid path and focus first invalid control)
• Align chevron rotation classes with toggle logic
• Update docs for objectLayout + collapsed behavior
• Add/update E2E coverage:
• tests/e2e/53-object-layout.spec.ts
• tests/e2e/55-collapsible-state-persistence.spec.ts
• tests/e2e/56-collapsible-validation-visibility.spec.ts
• Update hardening in related E2E flows (54-hero-cta-style-persistence.spec.ts)

Testing

• npm run type-check
• tests/e2e/53-object-layout.spec.ts
• tests/e2e/55-collapsible-state-persistence.spec.ts
• tests/e2e/56-collapsible-validation-visibility.spec.ts
• tests/e2e/54-hero-cta-style-persistence.spec.ts
• Manual UI verification in admin content forms (objects + repeaters + blocks)

Unit Tests

• Added/updated unit tests
• All unit tests passing

E2E Tests

• Added/updated E2E tests
• All E2E tests passing

Screenshots/Videos

Before:

After:

Checklist

• Code follows project conventions
• Tests added/updated and passing
• Type checking passes
• No console errors or warnings
• Documentation updated (if needed)

Follow-up planned: refactor collapsible-state persistence helpers to reduce duplication and simplify key/state handling (no functional change).

---

Generated with Claude Code in Conductor

[bobbwal]

Need to investigate further but it seems that in the grouped/blocks form setup, validation errors inside collapsed groups can be hidden, so Update / Update & Publish can appear unresponsive. This is a UX issue rather than a save failure. Follow-up could auto-expand groups with errors, show an error badge/count on collapsed headers, and focus/scroll to the first invalid field on submit.

[bobbwal]

Need to investigate further but it seems that in the grouped/blocks form setup, validation errors inside collapsed groups can be hidden, so Update / Update & Publish can appear unresponsive. This is a UX issue rather than a save failure. Follow-up could auto-expand groups with errors, show an error badge/count on collapsed headers, and focus/scroll to the first invalid field on submit.

This has been sorted, along with the following:

Update since original PR description:

• Added per-document/collection session persistence for collapsed state across object groups, repeaters, and blocks
• Added collapsed validation reveal behavior for hidden invalid fields
• Added E2E coverage for state persistence and validation visibility
• Addressed follow-up review issues around key scoping and nested object serialization host resolution

[bobbwal]

Update (Follow-up Fixes Added)

Added a follow-up fix for nested repeater serialization/regression uncovered after testing.

What was fixed

• Fixed nested array serialization scope so parent arrays only read direct child .structured-array-item elements.
• Fixed add-item behavior after save/reload by resolving list/template/hidden input references at action time (prevents
  stale refs).
• Added safer structured init flow (skip template nodes + init guards) to avoid partial init states.
• Fixed empty-state panel behavior to target only the array’s direct empty-state element.
• Ensured nested children are preserved correctly without being duplicated at root level.

Test coverage added/updated

• Added/updated unit coverage in:
  • packages/core/src/__tests__/templates/dynamic-field-extended.test.ts
• Added E2E regression coverage in:
  • tests/e2e/57-nested-array-serialization-scope.spec.ts

Verification

• npm test --workspace=@sonicjs-cms/core -- src/__tests__/templates/dynamic-field-extended.test.ts
• BASE_URL=http://localhost:8787 npx playwright test tests/e2e/57-nested-array-serialization-scope.spec.ts --config tests/ playwright.config.ts

All passing locally.

[bobbwal]

Update (Follow-up Fixes Added)

What was happening

For nested object-of-objects fields, saves were succeeding, but reopening the edit form could rewrite the parent hidden JSON to only include the first parsed child object. In practice this meant cases like openingHoursWeek.monday/tuesday/wednesday could save correctly, then appear partially wiped on a later edit.

Root cause

Structured field initialization was being re-run from repeated inline scripts while the document was still loading. That
allowed a parent object container to initialize before all sibling child objects had been parsed, then mark itself
initialized too early.

Fix

• Prevent structured field re-initialization while document.readyState === 'loading'
• Keep the direct-child structured object host lookup improvements
• Add regression coverage for nested object-of-objects persistence

Tests

• npm test --workspace=packages/core -- dynamic-field-extended.test.ts
• BASE_URL=http://localhost:8787 npx playwright test tests/e2e/58-nested-object-serialization.spec.ts --config tests/playwright.config.ts

[bobbwal]

Added a follow-up fix for media fields inside structured-array object rows.

What was happening

Media selection inside repeatable object rows could target the wrong field instance in admin forms. In practice, selecting/uploading media for a later row could do nothing at first, then eventually update an earlier row instead.

While fixing that path, I also found a related template-token issue in nested gallery-style blocks: block insertion was
replacing nested array __INDEX__ placeholders too early, which caused later rows to reuse row-0 media field names/ids.

Fix

• Scope media picker selection to the active modal target instead of shared stale field state
• Ensure single-media preview/remove actions update only the field that opened the picker
• Preserve distinct placeholder tokens for block insertion vs structured-array row insertion so repeated media rows get unique field ids/names
• Add regression coverage for gallery-style arrays of image objects inside blocks

Tests

• npm test --workspace=packages/core -- dynamic-field.test.ts dynamic-field-extended.test.ts
• BASE_URL=http://localhost:8787 npx playwright test tests/e2e/59-array-media-picker-targeting.spec.ts --config tests/playwright.config.ts

[lane711]

Thank you @bobbwal! This has been cherry-picked as PR #729 (currently in CI). Your collapsible fields feature is on its way to the next release! 🎉

[lane711]

More context — your collapsible fields feature was cherry-picked into PR #729, currently in CI. This is a big UX improvement and will ship in the next release. Amazing work on this one, @bobbwal — 25 commits of solid engineering!

Our process: we cherry-pick fork PRs into lane711 branches to run full CI. Your authorship is preserved in the git history.