Squashed commit of the following:

commit fbcb690b2732da309eda0ead7c640c86c1929865
Merge: f1243772 1712b51
Author: David Wertheimer <[email protected]>
Date:   Sun Jan 4 10:50:05 2026 -0800

    Merge branch 'dashboard-settings-centering-fix' of https://github.com/NotePlan/plugins into dashboard-settings-centering-fix

commit f12437729ec3bf8994584b5d81c2a8ecde7a3ef6
Author: David Wertheimer <[email protected]>
Date:   Sun Jan 4 10:50:03 2026 -0800

    Add examples to form builder; clean up css

commit 1712b51
Merge: 724ab0e 79e3e44
Author: Jonathan Clark <[email protected]>
Date:   Sat Jan 3 19:54:08 2026 +0000

    Merge branch 'main' into dashboard-settings-centering-fix

commit 724ab0e
Author: David Wertheimer <[email protected]>
Date:   Sat Jan 3 11:21:35 2026 -0800

    Fix SettingsDialog vertical centering

Author: dwertheimer

dwertheimer.Forms/src/FormFieldRenderTest.js

@@ -1191,7 +1191,9 @@ export function FieldEditor({ field, allFields, onSave, onCancel, requestFromPlu
                   <option value="title">Note by Title</option>
                   <option value="field">Note from Another Field</option>
                 </select>
-                <div className="field-editor-help">Choose how to get the markdown content to display</div>
+                <div className="field-editor-help">
+                  Choose how to get the markdown content to display. <strong>Note:</strong> This is a very basic markdown renderer that does not display full NotePlan formatted tasks and items. It's intended for a quick preview, not a faithful rendering.
+                </div>
               </div>
 
               {(() => {

dwertheimer.Forms/src/components/FieldEditor.jsx

@@ -631,11 +631,12 @@ export function FormBuilder({
                 handleOpenForm()
               }}
               title={hasUnsavedChanges ? 'Open form (you have unsaved changes - you will be warned)' : 'Open this form in a new window'}
+              style={{ marginRight: '0.5rem' }}
             >
               Open Form
             </button>
           ) : null}
-          <button className="PCButton cancel-button" onClick={onCancel}>
+          <button className="PCButton cancel-button" onClick={onCancel} style={{ marginRight: '0.5rem' }}>
             Cancel
           </button>
           <button
@@ -693,6 +694,7 @@ export function FormBuilder({
               onDragLeave={handleDragLeave}
               onDrop={handleDrop}
               onDragEnd={handleDragEnd}
+              requestFromPlugin={requestFromPlugin}
             />
           </Panel>
           <PanelResizeHandle className="form-builder-resize-handle" />

dwertheimer.Forms/src/components/FormBuilder.jsx

@@ -19,6 +19,7 @@ type FormFieldsListProps = {
   onDragLeave: () => void,
   onDrop: (e: any, index: number) => void,
   onDragEnd: () => void,
+  requestFromPlugin?: (command: string, data?: any) => Promise<any>,
 }
 
 export function FormFieldsList({
@@ -34,15 +35,34 @@ export function FormFieldsList({
   onDragLeave,
   onDrop,
   onDragEnd,
+  requestFromPlugin,
 }: FormFieldsListProps): Node {
   return (
     <div className="form-builder-main">
       <div className="form-builder-editor">
         <div className="form-section-header">
           <h3>Form Fields</h3>
-          <button className="add-field-button-small" onClick={onAddField}>
-            + Add Field
-          </button>
+          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+            <button className="add-field-button-small" onClick={onAddField}>
+              + Add Field
+            </button>
+            {requestFromPlugin && (
+              <button
+                className="PCButton"
+                onClick={async () => {
+                  try {
+                    await requestFromPlugin('testFormFieldRender', {})
+                  } catch (error) {
+                    console.error('Error opening form field examples:', error)
+                  }
+                }}
+                title="Open a test form showing examples of all field types"
+                style={{ fontSize: '0.85rem', padding: '4px 8px' }}
+              >
+                Examples
+              </button>
+            )}
+          </div>
         </div>
         <div className="form-fields-list">
           {fields.length === 0 ? (

dwertheimer.Forms/src/components/FormFieldsList.jsx

@@ -27,7 +27,7 @@ export const FIELD_TYPES: Array<FieldTypeOption> = [
   { value: 'space-chooser', label: 'Space Chooser', description: 'Select a Space (Private or Teamspace)' },
   { value: 'heading-chooser', label: 'Heading Chooser', description: 'Select a heading from a note (static or dynamic based on note-chooser)' },
   { value: 'event-chooser', label: 'Event Chooser', description: 'Select a calendar event for a specific date' },
-  { value: 'markdown-preview', label: 'Markdown Preview', description: 'Display markdown content (static text, note by filename/title, or note from another field)' },
+  { value: 'markdown-preview', label: 'Markdown Preview', description: 'Display markdown content (static text, note by filename/title, or note from another field). Note: This is a very basic markdown renderer that does not display full NotePlan formatted tasks and items. It\'s intended for a quick preview, not a faithful rendering.' },
   { value: 'heading', label: 'Heading', description: 'Section heading' },
   { value: 'separator', label: 'Separator', description: 'Horizontal line' },
   { value: 'button', label: 'Button', description: 'Clickable button' },

dwertheimer.Forms/src/components/fieldTypes.js

@@ -33,6 +33,7 @@ import { parseObjectString } from '@helpers/stringTransforms'
 import { replaceContentUnderHeading, removeContentUnderHeading } from '@helpers/NPParagraph'
 import { initPromisePolyfills, waitForCondition } from '@helpers/promisePolyfill'
 import { keepTodayPortionOnly } from '@helpers/calendar.js'
+import { testFormFieldRender } from './FormFieldRenderTest'
 // Form-specific handlers are now in their respective handler files:
 // - formBrowserHandlers.js: getFormTemplates, getFormFields, handleSubmitForm, handleOpenFormBuilder
 // - formBuilderHandlers.js: handleCreateProcessingTemplate, handleOpenNote, handleCopyFormUrl, handleDuplicateForm
@@ -1370,6 +1371,14 @@ export async function handleRequest(requestType: string, params: Object = {}): P
         return createNote(params)
       case 'saveAutosave':
         return await saveAutosave(params)
+      case 'testFormFieldRender':
+        // Open the form field render test window
+        await testFormFieldRender()
+        return {
+          success: true,
+          message: 'Form field examples opened',
+          data: null,
+        }
       // Form-specific handlers are now in their respective handler files:
       // - formBrowserHandlers.js handles: getFormTemplates, getFormFields, submitForm, openFormBuilder
       // - formBuilderHandlers.js handles: createProcessingTemplate, openNote, copyFormUrl, duplicateForm

dwertheimer.Forms/src/requestHandlers.js

@@ -95,3 +95,23 @@
   transform: translateY(-50%) rotate(180deg);
 }
 
+/* Value display - show selected value for debugging */
+/* Base styles (non-compact) */
+.dropdown-select-chooser-container .dropdown-select-chooser-value-display {
+  margin-top: 0.25rem;
+  font-size: 0.85em;
+  color: var(--fg-placeholder-color, rgba(76, 79, 105, 0.7));
+  font-family: Menlo, monospace;
+}
+
+/* In compact mode, value display should be on a new line below the field */
+/* The value display is a direct child of searchable-chooser-base.compact */
+/* Use !important to override inline styles and ensure it breaks out of flex layout */
+.dropdown-select-chooser-container .searchable-chooser-base.compact .dropdown-select-chooser-value-display {
+  width: 100% !important;
+  flex-basis: 100% !important;
+  margin-left: 0 !important;
+  margin-top: 0.5rem !important; /* Override inline style */
+  padding-left: calc(8rem + 1rem) !important; /* Align with input field: 8rem (label width) + 1rem (label padding-right) */
+}
+

helpers/react/DynamicDialog/DropdownSelectChooser.css

@@ -7,16 +7,14 @@
     /* background-color: var(--bg-main-color); */
     background-color: var(--bg-mid-color);
     position: fixed;
-    top: calc(50% + var(--noteplan-toolbar-height, 0)/2); /* TEST: */
+    top: 50vh; /* Center in viewport */
     height: 90vh;
     max-height: calc(92vh - var(--noteplan-toolbar-height, 0));
-    /* max-height: calc(92% - var(--noteplan-toolbar-height, 0)); TEST: */
     left: 50%;
     /* width: 90vw; */
     /* max-width: 90vw; */
     width: clamp(380px, 86%, 700px);
-    /* transform: translate(-50%, -50%); */
-    transform: translate(-50%, 0%);  /* TEST: */
+    transform: translate(-50%, -50%); /* Center both horizontally and vertically */
     border: none;
     box-shadow: 0 8px 16px rgba(0 0 0 / 0.2);
     /* z-index: 1000; */
@@ -635,6 +633,11 @@
         opacity: 0.8;
     }
 
+    /* JSON Editor container - ensure consistent spacing */
+    .ui-json-container {
+        margin-bottom: 0; /* Match input-box-container - no extra margin, spacing handled by .dynamic-dialog-item gap */
+    }
+
     /* Style for Section headings */
     .ui-heading {
         font-size: 130%;

helpers/react/DynamicDialog/DynamicDialog.css

@@ -2,15 +2,15 @@
 
 .expandable-textarea-container {
   width: 100%;
-  margin-bottom: 1rem;
+  margin-bottom: 0; /* Match input-box-container - no extra margin, spacing handled by .dynamic-dialog-item gap */
 }
 
 .expandable-textarea-container.compact {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   gap: 1rem; /* Match input-box-container-compact gap */
-  margin-bottom: 0.5rem;
+  margin-bottom: 0; /* Match input-box-container-compact - no extra margin */
 }
 
 .expandable-textarea-container.compact .expandable-textarea-label {

helpers/react/DynamicDialog/ExpandableTextarea.css

@@ -1,11 +1,11 @@
 /* MarkdownPreview Component Styles */
 
 .markdown-preview-container {
-  margin-bottom: 1rem;
+  margin-bottom: 0; /* Match input-box-container - no extra margin, spacing handled by .dynamic-dialog-item gap */
 }
 
 .markdown-preview-container.compact {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0; /* Match input-box-container-compact - no extra margin */
 }
 
 .markdown-preview-label {