@woodsportal/hubspot-kit 1.0.4 → 1.0.26

package/src/dev-module-config/ui/ModuleConfigPersistenceStatus.tsx

@@ -0,0 +1,89 @@
+type PersistenceSource = 'local' | 'example' | 'empty'
+
+type ModuleConfigPersistenceStatusProps = {
+  isDirty: boolean
+  persistenceSource: PersistenceSource
+}
+
+function StatusIcon({ variant }: { variant: 'dirty' | 'saved' | 'info' }) {
+  if (variant === 'dirty') {
+    return (
+      <svg viewBox="0 0 16 16" className="mc-status-icon" fill="currentColor" aria-hidden>
+        <circle cx="8" cy="8" r="3.5" />
+      </svg>
+    )
+  }
+
+  if (variant === 'saved') {
+    return (
+      <svg viewBox="0 0 16 16" className="mc-status-icon" fill="none" aria-hidden>
+        <path
+          d="M3.5 8.5 6.5 11.5 12.5 4.5"
+          stroke="currentColor"
+          strokeWidth="1.75"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    )
+  }
+
+  return (
+    <svg viewBox="0 0 16 16" className="mc-status-icon" fill="none" aria-hidden>
+      <circle cx="8" cy="8" r="6.25" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M8 7v4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      <circle cx="8" cy="4.75" r="0.85" fill="currentColor" />
+    </svg>
+  )
+}
+
+export function ModuleConfigPersistenceStatus({
+  isDirty,
+  persistenceSource,
+}: ModuleConfigPersistenceStatusProps) {
+  if (isDirty) {
+    return (
+      <div className="mc-persistence-status mc-persistence-status--dirty" role="status">
+        <StatusIcon variant="dirty" />
+        <div className="mc-persistence-status__body">
+          <span className="mc-persistence-status__label">Unsaved changes</span>
+          <span className="mc-persistence-status__hint">Apply to update your local config file</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (persistenceSource === 'local') {
+    return (
+      <div className="mc-persistence-status mc-persistence-status--saved" role="status">
+        <StatusIcon variant="saved" />
+        <div className="mc-persistence-status__body">
+          <span className="mc-persistence-status__label">Saved locally</span>
+          <code className="mc-persistence-status__path">.wphs/config/module-config.local.json</code>
+        </div>
+      </div>
+    )
+  }
+
+  if (persistenceSource === 'example') {
+    return (
+      <div className="mc-persistence-status mc-persistence-status--info" role="status">
+        <StatusIcon variant="info" />
+        <div className="mc-persistence-status__body">
+          <span className="mc-persistence-status__label">Using example config</span>
+          <code className="mc-persistence-status__path">.wphs/config/module-config.example.json</code>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mc-persistence-status mc-persistence-status--info" role="status">
+      <StatusIcon variant="info" />
+      <div className="mc-persistence-status__body">
+        <span className="mc-persistence-status__label">Default module values</span>
+        <span className="mc-persistence-status__hint">From fields.json — apply once to create a local file</span>
+      </div>
+    </div>
+  )
+}

package/src/dev-module-config/ui/ModuleConfigShell.tsx

@@ -0,0 +1,355 @@
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import './module-config-motion.css'
+import './module-config-theme.css'
+import { HUBSPOT_ONLY_FIELD_NAMES, MODULE_CONFIG_CONTENT_TAB_FIELD_NAMES, MODULE_CONFIG_UI_HIDDEN_FIELD_NAMES } from '../schema/types'
+import { hsTypography } from './hubspot/module-config-typography'
+import { flattenVisibleFields } from '../schema/visibility'
+import {
+  exportModuleConfig,
+  importModuleConfig,
+  resetModuleConfigToDefaults,
+} from '../runtime/module-config-runtime'
+import { FieldRenderer } from './FieldRenderer'
+import { MenuOptionsEditor } from './editors/MenuOptionsEditor'
+import { DeveloperOptionsEditor } from './editors/DeveloperOptionsEditor'
+import { useModuleConfig } from './use-module-config'
+import {
+  ModuleConfigNavProvider,
+  useModuleConfigNav,
+} from './navigation/ModuleConfigNavContext'
+import { ModuleConfigUiProvider, useModuleConfigUi, ModuleConfigUiContext } from './ModuleConfigUiContext'
+import type { ModuleConfigOverlaySide } from './module-config-overlay-side'
+import { ModuleConfigAnimatedPresence } from './ModuleConfigAnimatedPresence'
+import { enterFromClass, mcMotion, type ModuleConfigEnterFrom } from './module-config-motion'
+import { mcSurface } from './module-config-surfaces'
+import { ModuleConfigThemeToggle } from './ModuleConfigThemeToggle'
+import { ModuleConfigDockSideIcon } from './ModuleConfigDockSideIcon'
+import { ModuleConfigPersistenceStatus } from './ModuleConfigPersistenceStatus'
+import { devModuleDisplayName } from '../dev-module-display-name'
+
+type Tab = 'CONTENT' | 'STYLE'
+
+type ModuleConfigShellProps = {
+  compact?: boolean
+  showToolbar?: boolean
+  onRequestClose?: () => void
+  overlaySide?: ModuleConfigOverlaySide
+  overlaySideTransitioning?: boolean
+  onToggleOverlaySide?: () => void
+}
+
+function ModuleConfigShellInner({
+  compact = false,
+  showToolbar = true,
+  onRequestClose,
+  overlaySide = 'right',
+  overlaySideTransitioning = false,
+  onToggleOverlaySide,
+}: ModuleConfigShellProps) {
+  const {
+    state,
+    moduleValues,
+    isDirty,
+    isApplying,
+    validationErrors,
+    persistenceSource,
+    setFieldValue,
+    applyChanges,
+    discardDraft,
+    confirmDiscardIfDirty,
+  } = useModuleConfig()
+  const { segments, drillDownPanel } = useModuleConfigNav()
+  const { theme, toggleTheme } = useModuleConfigUi()
+  const [tab, setTab] = useState<Tab>('CONTENT')
+  const [tabEnterFrom, setTabEnterFrom] = useState<ModuleConfigEnterFrom>('right')
+
+  useEffect(() => {
+    if (!onRequestClose) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      event.preventDefault()
+      if (confirmDiscardIfDirty()) onRequestClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [confirmDiscardIfDirty, onRequestClose])
+
+  const handleFieldChange = useCallback(
+    (path: string, value: unknown) => {
+      if (path === 'developerMode' && !value) {
+        setFieldValue('developerMode', false)
+        setFieldValue('developer_option', false)
+        return
+      }
+      setFieldValue(path, value)
+    },
+    [setFieldValue],
+  )
+
+  const fields = useMemo(() => {
+    if (!state) return []
+    const developerModeOn = Boolean(moduleValues.developerMode)
+
+    const visible = flattenVisibleFields(state.schema, moduleValues, tab)
+      .filter(
+        (field) =>
+          !HUBSPOT_ONLY_FIELD_NAMES.has(field.name) &&
+          !MODULE_CONFIG_UI_HIDDEN_FIELD_NAMES.has(field.name),
+      )
+      .filter(
+        (field) => tab === 'CONTENT' || !MODULE_CONFIG_CONTENT_TAB_FIELD_NAMES.has(field.name),
+      )
+      .filter(
+        (field) => field.name !== 'developer_options' || developerModeOn,
+      )
+
+    const developerOptionsField = state.schema.find((field) => field.name === 'developer_options')
+    if (
+      tab === 'CONTENT' &&
+      developerModeOn &&
+      developerOptionsField &&
+      !visible.some((field) => field.name === 'developer_options')
+    ) {
+      const developerModeIndex = visible.findIndex((field) => field.name === 'developerMode')
+      if (developerModeIndex >= 0) {
+        visible.splice(developerModeIndex + 1, 0, developerOptionsField)
+      } else {
+        visible.push(developerOptionsField)
+      }
+    }
+
+    return visible
+  }, [state, moduleValues, tab])
+
+  const developerOptionToggleField = state?.schema.find((field) => field.name === 'developer_option')
+
+  if (!state) {
+    return <div className={`p-4 ${hsTypography.helper}`}>Loading module config…</div>
+  }
+
+  const onExport = () => {
+    void exportModuleConfig().then((json) => {
+      const blob = new Blob([json], { type: 'application/json' })
+      const url = URL.createObjectURL(blob)
+      const anchor = document.createElement('a')
+      anchor.href = url
+      anchor.download = 'woodsportal-module-config.json'
+      anchor.click()
+      URL.revokeObjectURL(url)
+    })
+  }
+
+  const onImport = () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = 'application/json'
+    input.onchange = () => {
+      const file = input.files?.[0]
+      if (!file) return
+      void file.text().then(importModuleConfig)
+    }
+    input.click()
+  }
+
+  const onReset = () => {
+    if (!confirmDiscardIfDirty()) return
+    void resetModuleConfigToDefaults()
+  }
+
+  const onApply = () => {
+    void applyChanges()
+  }
+
+  return (
+    <div className={`flex h-full min-h-0 flex-col ${mcSurface.shell}`}>
+      <div className={mcSurface.chromeHeader}>
+        <nav className={`mb-1 flex flex-wrap items-center gap-1 ${hsTypography.breadcrumb} ${mcSurface.textMuted}`}>
+          {segments.map((segment, index) => (
+            <span key={segment.id} className="inline-flex items-center gap-1">
+              {index > 0 ? <span className={mcSurface.textFaint}>›</span> : null}
+              {segment.onClick && segment.id !== 'ellipsis' ? (
+                <button type="button" className="hover:underline" onClick={segment.onClick}>
+                  {segment.label}
+                </button>
+              ) : (
+                <span className={segment.id === 'ellipsis' ? mcSurface.textFaint : mcSurface.textMuted}>
+                  {segment.label}
+                </span>
+              )}
+            </span>
+          ))}
+        </nav>
+        <div className="flex items-start justify-between gap-2">
+          <h2 className={hsTypography.moduleTitle}>{devModuleDisplayName()}</h2>
+          <div className="flex shrink-0 items-center gap-1">
+            <ModuleConfigThemeToggle theme={theme} onToggle={toggleTheme} />
+            {compact && onToggleOverlaySide ? (
+              <button
+                type="button"
+                disabled={overlaySideTransitioning}
+                className={mcSurface.iconButton}
+                title={overlaySide === 'right' ? 'Dock panel to the left' : 'Dock panel to the right'}
+                aria-label={overlaySide === 'right' ? 'Dock panel left' : 'Dock panel right'}
+                onClick={onToggleOverlaySide}
+              >
+                <ModuleConfigDockSideIcon side={overlaySide === 'right' ? 'left' : 'right'} />
+              </button>
+            ) : null}
+            {onRequestClose ? (
+              <button
+                type="button"
+                className={mcSurface.iconButton}
+                aria-label="Close module config"
+                onClick={() => {
+                  if (confirmDiscardIfDirty()) onRequestClose()
+                }}
+              >
+                ✕
+              </button>
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      <div className={mcSurface.tabBar} role="tablist" aria-label="Module config sections">
+        {(['CONTENT', 'STYLE'] as Array<Tab>).map((item) => {
+          const isActive = tab === item
+          return (
+          <button
+            key={item}
+            type="button"
+            role="tab"
+            aria-selected={isActive}
+            className={`${mcMotion.colors} ${isActive ? mcSurface.tabButtonActive : mcSurface.tabButton}`}
+            onClick={() => {
+              if (!confirmDiscardIfDirty()) return
+              if (isDirty) discardDraft()
+              setTabEnterFrom(item === 'STYLE' ? 'right' : 'left')
+              setTab(item)
+            }}
+          >
+            {item === 'CONTENT' ? 'Content' : 'Styles'}
+          </button>
+          )
+        })}
+      </div>
+
+      <ModuleConfigAnimatedPresence show={validationErrors.length > 0} enterFrom="bottom">
+        <div
+          className={`flex-shrink-0 bg-[var(--mc-error-bg)] px-3 py-2 ${hsTypography.error}`}
+        >
+          {validationErrors.map((error) => (
+            <p key={error.path}>{error.message}</p>
+          ))}
+        </div>
+      </ModuleConfigAnimatedPresence>
+
+      <div className="relative min-h-0 flex-1 overflow-hidden">
+        <div
+          key={tab}
+          className={`h-full overflow-y-auto px-4 py-3 ${enterFromClass(tabEnterFrom)} ${
+            drillDownPanel ? 'hidden' : mcMotion.opacity
+          }`}
+          aria-hidden={Boolean(drillDownPanel)}
+        >
+          {fields.map((field) => {
+            if (field.name === 'menu_options' && field.type === 'group') {
+              return (
+                <MenuOptionsEditor
+                  key={field.id ?? field.name}
+                  field={field}
+                  moduleValues={moduleValues}
+                  onChange={handleFieldChange}
+                />
+              )
+            }
+
+            if (field.name === 'developer_options' && field.type === 'group') {
+              return (
+                <DeveloperOptionsEditor
+                  key={field.id ?? field.name}
+                  groupField={field}
+                  sectionLabel={developerOptionToggleField?.label ?? 'Developer Options'}
+                  moduleValues={moduleValues}
+                  onChange={handleFieldChange}
+                />
+              )
+            }
+
+            return (
+              <FieldRenderer
+                key={field.id ?? field.name}
+                field={field}
+                moduleValues={moduleValues}
+                onChange={handleFieldChange}
+                compact={compact}
+                validationErrors={validationErrors}
+              />
+            )
+          })}
+        </div>
+        <ModuleConfigAnimatedPresence
+          show={Boolean(drillDownPanel)}
+          variant="slide"
+          enterFrom="right"
+          className="absolute inset-0 z-10 overflow-y-auto bg-[var(--mc-bg-shell)] px-4 py-3"
+        >
+          {drillDownPanel}
+        </ModuleConfigAnimatedPresence>
+      </div>
+
+      <div className={mcSurface.chromeFooter}>
+        {showToolbar ? (
+          <div className="flex flex-wrap gap-2">
+            <button type="button" className={mcSurface.footerButton} onClick={onReset}>
+              Reset defaults
+            </button>
+            <button type="button" className={mcSurface.footerButton} onClick={onExport}>
+              Export JSON
+            </button>
+            <button type="button" className={mcSurface.footerButton} onClick={onImport}>
+              Import JSON
+            </button>
+          </div>
+        ) : null}
+
+        <ModuleConfigPersistenceStatus isDirty={isDirty} persistenceSource={persistenceSource} />
+
+        <button
+          type="button"
+          disabled={isApplying}
+          className={`${mcSurface.primaryButton} ${hsTypography.footerPrimary}`}
+          onClick={onApply}
+        >
+          {isApplying ? 'Applying…' : 'Apply changes'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export function ModuleConfigShell(props: ModuleConfigShellProps) {
+  const parentUi = useContext(ModuleConfigUiContext)
+  const colorPickerPlacement =
+    props.compact && props.overlaySide
+      ? props.overlaySide === 'right'
+        ? 'left'
+        : 'right'
+      : props.compact
+        ? 'left'
+        : 'right'
+
+  const content = (
+    <ModuleConfigNavProvider>
+      <ModuleConfigShellInner {...props} />
+    </ModuleConfigNavProvider>
+  )
+
+  if (parentUi) return content
+
+  return (
+    <ModuleConfigUiProvider colorPickerPlacement={colorPickerPlacement}>
+      {content}
+    </ModuleConfigUiProvider>
+  )
+}

package/src/dev-module-config/ui/ModuleConfigThemeToggle.tsx

@@ -0,0 +1,32 @@
+import type { ModuleConfigToolbarTheme } from './module-config-toolbar-theme'
+
+type ModuleConfigThemeToggleProps = {
+  theme: ModuleConfigToolbarTheme
+  onToggle: () => void
+}
+
+export function ModuleConfigThemeToggle({ theme, onToggle }: ModuleConfigThemeToggleProps) {
+  const isDark = theme === 'dark'
+
+  return (
+    <button
+      type="button"
+      className="rounded p-1.5 text-[var(--mc-text-muted)] hover:bg-[var(--mc-bg-hover)] hover:text-[var(--mc-text)]"
+      title={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+      aria-label={isDark ? 'Switch dev toolbar to light theme' : 'Switch dev toolbar to dark theme'}
+      onClick={onToggle}
+    >
+      {isDark ? (
+        <svg viewBox="0 0 20 20" className="h-4 w-4" fill="currentColor" aria-hidden>
+          <path d="M10 3.41269C10.3704 3.41269 10.6879 3.09523 10.6879 2.72486V0.68783C10.6879 0.31746 10.3704 0 10 0C9.62965 0 9.31219 0.31746 9.31219 0.68783V2.72486C9.31219 3.09523 9.62965 3.41269 10 3.41269ZM15.6349 5.34392L17.0899 3.88889C17.3545 3.62434 17.3545 3.20106 17.0899 2.93651C16.8254 2.67196 16.4021 2.67196 16.1376 2.93651L14.6825 4.39154C14.418 4.65609 14.418 5.07937 14.6825 5.34392C14.9206 5.60847 15.3439 5.60847 15.6349 5.34392Z" />
+          <path d="M10 13.545C12.6455 13.545 14.4445 11.7459 14.4445 9.10045C14.4445 6.45505 12.6455 4.65601 10 4.65601C7.35452 4.65601 5.55548 6.45505 5.55548 9.10045C5.55548 11.7459 7.35452 13.545 10 13.545Z" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 20 20" className="h-4 w-4" fill="currentColor" aria-hidden>
+          <path d="M10 14.5C12.4853 14.5 14.5 12.4853 14.5 10C14.5 7.51472 12.4853 5.5 10 5.5C7.51472 5.5 5.5 7.51472 5.5 10C5.5 12.4853 7.51472 14.5 10 14.5Z" />
+          <path d="M10 2.75C10.4142 2.75 10.75 2.41421 10.75 2V0.75C10.75 0.335786 10.4142 0 10 0C9.58579 0 9.25 0.335786 9.25 0.75V2C9.25 2.41421 9.58579 2.75 10 2.75ZM3.51517 4.51517C3.78956 4.24078 4.21056 4.24078 4.48495 4.51517L5.54583 5.57605C5.82022 5.85044 5.82022 6.27144 5.54583 6.54583C5.27144 6.82022 4.85044 6.82022 4.57605 6.54583L3.51517 5.48495C3.24078 5.21056 3.24078 4.78956 3.51517 4.51517ZM2.75 10C2.75 9.58579 2.41421 9.25 2 9.25H0.75C0.335786 9.25 0 9.58579 0 10C0 10.4142 0.335786 10.75 0.75 10.75H2C2.41421 10.75 2.75 10.4142 2.75 10ZM3.51517 15.4849C3.24078 15.2105 3.24078 14.7895 3.51517 14.5152L4.57605 13.4543C4.85044 13.1799 5.27144 13.1799 5.54583 13.4543C5.82022 13.7287 5.82022 14.1497 5.54583 14.4241L4.48495 15.485C4.21056 15.7594 3.78956 15.7594 3.51517 15.4849ZM10 17.25C10.4142 17.25 10.75 17.5858 10.75 18V19.25C10.75 19.6642 10.4142 20 10 20C9.58579 20 9.25 19.6642 9.25 19.25V18C9.25 17.5858 9.58579 17.25 10 17.25ZM15.4849 15.4849C15.7594 15.7594 15.7594 16.1804 15.4849 16.4548L14.4241 17.5157C14.1497 17.7901 13.7287 17.7901 13.4543 17.5157C13.1799 17.2413 13.1799 16.8203 13.4543 16.5459L15.5152 14.485C15.7895 14.2106 16.2105 14.2106 16.4849 14.485ZM17.25 10C17.25 10.4142 17.5858 10.75 18 10.75H19.25C19.6642 10.75 20 10.4142 20 10C20 9.58579 19.6642 9.25 19.25 9.25H18C17.5858 9.25 17.25 9.58579 17.25 10ZM15.4849 4.51517C15.7594 4.24078 16.1804 4.24078 16.4548 4.51517L17.5157 5.57605C17.7901 5.85044 17.7901 6.27144 17.5157 6.54583C17.2413 6.82022 16.8203 6.82022 16.5459 6.54583L15.485 4.48495C15.2106 4.21056 15.2106 3.78956 15.485 3.51517C15.7594 3.24078 16.1804 3.24078 16.4548 3.51517H15.4849Z" />
+        </svg>
+      )}
+    </button>
+  )
+}

package/src/dev-module-config/ui/ModuleConfigUiContext.tsx

@@ -0,0 +1,65 @@
+import { createContext, useCallback, useContext, useState, type ReactNode } from 'react'
+import {
+  loadModuleConfigToolbarTheme,
+  saveModuleConfigToolbarTheme,
+  toggleModuleConfigToolbarTheme,
+  type ModuleConfigToolbarTheme,
+} from './module-config-toolbar-theme'
+
+export type ColorPickerPlacement = 'left' | 'right'
+
+export type { ModuleConfigToolbarTheme } from './module-config-toolbar-theme'
+
+type ModuleConfigUiContextValue = {
+  colorPickerPlacement: ColorPickerPlacement
+  theme: ModuleConfigToolbarTheme
+  setTheme: (theme: ModuleConfigToolbarTheme) => void
+  toggleTheme: () => void
+}
+
+const ModuleConfigUiContext = createContext<ModuleConfigUiContextValue | null>(null)
+
+export { ModuleConfigUiContext }
+
+export function ModuleConfigUiProvider({
+  colorPickerPlacement,
+  children,
+  layout = 'panel',
+}: {
+  colorPickerPlacement: ColorPickerPlacement
+  children: ReactNode
+  /** `overlay` portals: theme vars only, no shell background block in document flow. */
+  layout?: 'panel' | 'overlay'
+}) {
+  const [theme, setThemeState] = useState<ModuleConfigToolbarTheme>(() => loadModuleConfigToolbarTheme())
+
+  const setTheme = useCallback((next: ModuleConfigToolbarTheme) => {
+    setThemeState(next)
+    saveModuleConfigToolbarTheme(next)
+  }, [])
+
+  const toggleTheme = useCallback(() => {
+    setThemeState((current) => toggleModuleConfigToolbarTheme(current))
+  }, [])
+
+  const rootClassName =
+    layout === 'overlay'
+      ? 'mc-ui-overlay-root'
+      : 'mc-toolbar-root flex h-full min-h-0 flex-col'
+
+  return (
+    <ModuleConfigUiContext.Provider value={{ colorPickerPlacement, theme, setTheme, toggleTheme }}>
+      <div data-mc-theme={theme} className={rootClassName}>
+        {children}
+      </div>
+    </ModuleConfigUiContext.Provider>
+  )
+}
+
+export function useModuleConfigUi() {
+  const ctx = useContext(ModuleConfigUiContext)
+  if (!ctx) {
+    throw new Error('useModuleConfigUi must be used within ModuleConfigUiProvider')
+  }
+  return ctx
+}

package/src/dev-module-config/ui/editors/DeveloperOptionsEditor.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react'
+import { hsTypography } from '../hubspot/module-config-typography'
+import { FieldRenderer } from '../FieldRenderer'
+import { ModuleConfigCollapsible } from '../ModuleConfigCollapsible'
+import type { HubSpotFieldDefinition, ModuleFieldValues } from '../../schema/types'
+
+type DeveloperOptionsEditorProps = {
+  groupField: HubSpotFieldDefinition
+  sectionLabel?: string
+  moduleValues: ModuleFieldValues
+  onChange: (path: string, value: unknown) => void
+}
+
+/**
+ * HubSpot pairs `developer_option` (boolean) with the `developer_options` group:
+ * the native editor shows one collapsible "Developer Options" section, not a separate toggle.
+ */
+export function DeveloperOptionsEditor({
+  groupField,
+  sectionLabel = 'Developer Options',
+  moduleValues,
+  onChange,
+}: DeveloperOptionsEditorProps) {
+  const developerModeOn = Boolean(moduleValues.developerMode)
+  const enabled = Boolean(moduleValues.developer_option)
+  const [open, setOpen] = useState(enabled)
+
+  useEffect(() => {
+    setOpen(enabled)
+  }, [enabled])
+
+  if (!developerModeOn) {
+    return null
+  }
+
+  const toggleOpen = () => {
+    const next = !open
+    setOpen(next)
+    onChange('developer_option', next)
+  }
+
+  return (
+    <ModuleConfigCollapsible
+      open={open}
+      onToggle={toggleOpen}
+      label={sectionLabel}
+      headerClassName={hsTypography.groupHeader}
+    >
+      {(groupField.children ?? []).map((child) => (
+        <FieldRenderer
+          key={child.id ?? child.name}
+          field={child}
+          moduleValues={moduleValues}
+          pathPrefix={groupField.name}
+          onChange={onChange}
+          visibilityContext={{ moduleValues }}
+        />
+      ))}
+    </ModuleConfigCollapsible>
+  )
+}