From baef1fca2f2ebda1b3908e74219a1e4e821d9159 Mon Sep 17 00:00:00 2001
From: Dmitri <dtroshchenkov@gmail.com>
Date: Fri, 27 Mar 2026 09:51:33 +0400
Subject: [PATCH] UI elements settings extention

---
 backend/README.md                             |   26 +
 frontend/README.md                            |    8 +
 .../CarouselSettingsSection.tsx               |  163 ++
 .../ElementSettings/CommonSettingsSection.tsx |   68 +
 .../DescriptionSettingsSection.tsx            |  139 ++
 .../ElementSettings/ElementSettingsTabs.tsx   |   64 +
 .../GallerySettingsSection.tsx                |  112 +
 .../ElementSettings/MediaSettingsSection.tsx  |   89 +
 .../NavigationSettingsSection.tsx             |  188 ++
 .../ElementSettings/StyleSettingsSection.tsx  |  232 +++
 .../StyleSettingsSectionCompact.tsx           |  321 +++
 .../TooltipSettingsSection.tsx                |   64 +
 .../src/components/ElementSettings/index.ts   |   27 +
 .../src/components/ElementSettings/types.ts   |  235 +++
 .../ElementSettings/useElementSettingsForm.ts |  582 ++++++
 .../src/components/RuntimePresentation.tsx    |   20 +-
 frontend/src/hooks/usePageNavigation.ts       |    7 +-
 frontend/src/hooks/usePageSwitch.ts           |   10 +-
 frontend/src/hooks/usePreloadOrchestrator.ts  |    7 +-
 frontend/src/hooks/useTransitionPlayback.ts   |    5 +-
 frontend/src/layouts/Authenticated.tsx        |   17 +-
 frontend/src/pages/constructor.tsx            | 1806 +++++++++--------
 .../src/pages/element-type-defaults/[id].tsx  | 1346 ++----------
 .../pages/project-element-defaults/[id].tsx   |  266 ++-
 frontend/src/pages/projects/projects-view.tsx |    1 -
 25 files changed, 3760 insertions(+), 2043 deletions(-)
 create mode 100644 frontend/src/components/ElementSettings/CarouselSettingsSection.tsx
 create mode 100644 frontend/src/components/ElementSettings/CommonSettingsSection.tsx
 create mode 100644 frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx
 create mode 100644 frontend/src/components/ElementSettings/ElementSettingsTabs.tsx
 create mode 100644 frontend/src/components/ElementSettings/GallerySettingsSection.tsx
 create mode 100644 frontend/src/components/ElementSettings/MediaSettingsSection.tsx
 create mode 100644 frontend/src/components/ElementSettings/NavigationSettingsSection.tsx
 create mode 100644 frontend/src/components/ElementSettings/StyleSettingsSection.tsx
 create mode 100644 frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx
 create mode 100644 frontend/src/components/ElementSettings/TooltipSettingsSection.tsx
 create mode 100644 frontend/src/components/ElementSettings/index.ts
 create mode 100644 frontend/src/components/ElementSettings/types.ts
 create mode 100644 frontend/src/components/ElementSettings/useElementSettingsForm.ts

diff --git a/backend/README.md b/backend/README.md
index c9aa366..7714caf 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -199,6 +199,32 @@ DELETE /api/{entity}/:id       # Soft delete record
 | `permissions` | Granular permissions |
 | `project_memberships` | Team access per project |
 
+### Element Defaults Hierarchy
+
+UI elements use a three-tier defaults system:
+
+```
+element_type_defaults (Global)
+        │
+        │ auto-snapshot on project creation
+        ▼
+project_element_defaults (Project)
+        │
+        │ applied when creating elements
+        ▼
+tour_pages.ui_schema_json (Instance)
+```
+
+1. **Global** (`element_type_defaults`) - Platform-wide defaults for 11 element types (navigation, tooltip, gallery, etc.). Auto-seeded on first API access.
+
+2. **Project** (`project_element_defaults`) - Per-project overrides. Automatically snapshotted from global when a project is created. Can be customized independently.
+
+3. **Instance** (`tour_pages.ui_schema_json`) - Page-specific elements with their settings stored inline. Created in constructor with project defaults applied.
+
+**Additional Endpoints:**
+- `POST /api/project-element-defaults/:id/reset` - Reset to current global default
+- `GET /api/project-element-defaults/:id/diff` - Compare with global default
+
 ### Publishing Workflow
 
 Three-tier environment model for content: `dev` → `stage` → `production`
diff --git a/frontend/README.md b/frontend/README.md
index 3dba6b0..dd61ca0 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -70,6 +70,7 @@ frontend/src/
 ├── components/               # React components (PascalCase)
 │   ├── Assets/               # Asset management components
 │   ├── Constructor/          # Tour builder components
+│   ├── ElementSettings/      # Shared element settings form components
 │   ├── UiElements/           # Element type components
 │   ├── Generic/              # Generic CRUD components
 │   ├── CardBox.tsx           # Card container
@@ -214,6 +215,7 @@ dispatch(create({ data: newProject }));
 | `useOfflineMode` | Detect offline/online status |
 | `usePWAPreload` | Preload assets for offline |
 | `useStorageQuota` | Monitor IndexedDB usage |
+| `useElementSettingsForm` | Element settings form state (~60 fields) |
 
 ## Element Types
 
@@ -243,7 +245,13 @@ Element types follow a three-tier defaults system:
 
 The constructor fetches project defaults via `/api/project-element-defaults?projectId=xxx` and merges them when creating new elements. Existing element values in `ui_schema_json` take precedence over defaults.
 
+**Admin Pages:**
+- `/element-type-defaults` - Edit global defaults (platform-wide)
+- `/project-element-defaults/[id]` - Edit project defaults (with Reset to Global, Diff indicator)
+
 **Key files:**
+- `components/ElementSettings/` - Shared form components (tabs, CSS styling, type-specific sections)
+- `components/ElementSettings/useElementSettingsForm.ts` - Form state hook (~60 fields)
 - `types/constructor.ts` - `normalizeElementDefault()`, `buildElementDefaultsMap()` utilities
 - `pages/constructor.tsx` - Loads project defaults, creates elements with merged settings
 
diff --git a/frontend/src/components/ElementSettings/CarouselSettingsSection.tsx b/frontend/src/components/ElementSettings/CarouselSettingsSection.tsx
new file mode 100644
index 0000000..691e34f
--- /dev/null
+++ b/frontend/src/components/ElementSettings/CarouselSettingsSection.tsx
@@ -0,0 +1,163 @@
+/**
+ * CarouselSettingsSection
+ *
+ * Settings for carousel element type.
+ * Manages carousel slides with images and captions.
+ */
+
+import React from 'react';
+import { mdiPlus, mdiTrashCan } from '@mdi/js';
+import BaseButton from '../BaseButton';
+import CardBox from '../CardBox';
+import FormField from '../FormField';
+import type { CarouselSettingsSectionProps } from './types';
+
+const CarouselSettingsSection: React.FC<CarouselSettingsSectionProps> = ({
+  carouselPrevIconUrl,
+  carouselNextIconUrl,
+  carouselSlides,
+  onAddSlide,
+  onRemoveSlide,
+  onUpdateSlide,
+  onChange,
+  context,
+  iconAssetOptions = [],
+  imageAssetOptions = [],
+}) => {
+  const isConstructor = context === 'constructor';
+
+  return (
+    <CardBox className='border border-gray-200 dark:border-dark-700'>
+      <h3 className='mb-3 text-sm font-semibold'>Carousel settings</h3>
+
+      <div className='grid gap-3 md:grid-cols-2'>
+        {isConstructor ? (
+          <>
+            <FormField label='Previous icon'>
+              <select
+                value={carouselPrevIconUrl}
+                onChange={(event) =>
+                  onChange('carouselPrevIconUrl', event.target.value)
+                }
+              >
+                <option value=''>Not selected</option>
+                {iconAssetOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </FormField>
+            <FormField label='Next icon'>
+              <select
+                value={carouselNextIconUrl}
+                onChange={(event) =>
+                  onChange('carouselNextIconUrl', event.target.value)
+                }
+              >
+                <option value=''>Not selected</option>
+                {iconAssetOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </FormField>
+          </>
+        ) : (
+          <>
+            <FormField label='Previous icon URL'>
+              <input
+                value={carouselPrevIconUrl}
+                onChange={(event) =>
+                  onChange('carouselPrevIconUrl', event.target.value)
+                }
+              />
+            </FormField>
+            <FormField label='Next icon URL'>
+              <input
+                value={carouselNextIconUrl}
+                onChange={(event) =>
+                  onChange('carouselNextIconUrl', event.target.value)
+                }
+              />
+            </FormField>
+          </>
+        )}
+      </div>
+
+      <div className='mb-3 mt-4 flex items-center justify-between'>
+        <h3 className='text-sm font-semibold'>Carousel slides</h3>
+        <BaseButton
+          color='info'
+          icon={mdiPlus}
+          small
+          label='Add slide'
+          onClick={onAddSlide}
+        />
+      </div>
+
+      <div className='space-y-4'>
+        {carouselSlides.length === 0 ? (
+          <p className='text-sm text-gray-500'>No slides yet.</p>
+        ) : (
+          carouselSlides.map((slide, index) => (
+            <CardBox
+              key={slide.id}
+              className='border border-gray-200 dark:border-dark-700'
+            >
+              <div className='mb-3 flex items-center justify-between'>
+                <h4 className='text-sm font-semibold'>Slide {index + 1}</h4>
+                <BaseButton
+                  color='danger'
+                  icon={mdiTrashCan}
+                  small
+                  outline
+                  onClick={() => onRemoveSlide(slide.id)}
+                />
+              </div>
+              <div className='grid gap-3 md:grid-cols-2'>
+                {isConstructor ? (
+                  <FormField label='Image'>
+                    <select
+                      value={slide.imageUrl}
+                      onChange={(event) =>
+                        onUpdateSlide(slide.id, 'imageUrl', event.target.value)
+                      }
+                    >
+                      <option value=''>Not selected</option>
+                      {imageAssetOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </select>
+                  </FormField>
+                ) : (
+                  <FormField label='Image URL'>
+                    <input
+                      value={slide.imageUrl}
+                      onChange={(event) =>
+                        onUpdateSlide(slide.id, 'imageUrl', event.target.value)
+                      }
+                    />
+                  </FormField>
+                )}
+                <FormField label='Caption'>
+                  <input
+                    value={slide.caption}
+                    onChange={(event) =>
+                      onUpdateSlide(slide.id, 'caption', event.target.value)
+                    }
+                  />
+                </FormField>
+              </div>
+            </CardBox>
+          ))
+        )}
+      </div>
+    </CardBox>
+  );
+};
+
+export default CarouselSettingsSection;
diff --git a/frontend/src/components/ElementSettings/CommonSettingsSection.tsx b/frontend/src/components/ElementSettings/CommonSettingsSection.tsx
new file mode 100644
index 0000000..f774333
--- /dev/null
+++ b/frontend/src/components/ElementSettings/CommonSettingsSection.tsx
@@ -0,0 +1,68 @@
+/**
+ * CommonSettingsSection
+ *
+ * Common settings fields shared by all element types.
+ * Label, position, and appear timing.
+ */
+
+import React from 'react';
+import FormField from '../FormField';
+import type { CommonSettingsSectionProps } from './types';
+
+const CommonSettingsSection: React.FC<CommonSettingsSectionProps> = ({
+  label,
+  xPercent,
+  yPercent,
+  appearDelaySec,
+  appearDurationSec,
+  onChange,
+  showPosition = true,
+}) => {
+  return (
+    <div className='space-y-4'>
+      <FormField label='Label'>
+        <input
+          value={label}
+          onChange={(event) => onChange('label', event.target.value)}
+        />
+      </FormField>
+
+      {showPosition && (
+        <div className='grid gap-4 md:grid-cols-2'>
+          <FormField label='X percent'>
+            <input
+              value={xPercent}
+              onChange={(event) => onChange('xPercent', event.target.value)}
+            />
+          </FormField>
+          <FormField label='Y percent'>
+            <input
+              value={yPercent}
+              onChange={(event) => onChange('yPercent', event.target.value)}
+            />
+          </FormField>
+        </div>
+      )}
+
+      <div className='grid gap-4 md:grid-cols-2'>
+        <FormField label='Appear delay (sec)'>
+          <input
+            value={appearDelaySec}
+            onChange={(event) => onChange('appearDelaySec', event.target.value)}
+          />
+        </FormField>
+        <FormField label='Appear duration (sec)'>
+          <input
+            value={appearDurationSec}
+            onChange={(event) =>
+              onChange('appearDurationSec', event.target.value)
+            }
+            placeholder='Leave empty for none'
+          />
+        </FormField>
+      </div>
+    </div>
+  );
+};
+
+export default CommonSettingsSection;
diff --git a/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx b/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx
new file mode 100644
index 0000000..385c762
--- /dev/null
+++ b/frontend/src/components/ElementSettings/DescriptionSettingsSection.tsx
@@ -0,0 +1,139 @@
+/**
+ * DescriptionSettingsSection
+ *
+ * Settings for description element type.
+ */
+
+import React from 'react';
+import FormField from '../FormField';
+import type { DescriptionSettingsSectionProps } from './types';
+
+const DescriptionSettingsSection: React.FC<DescriptionSettingsSectionProps> = ({
+  iconUrl,
+  descriptionTitle,
+  descriptionText,
+  descriptionTitleFontSize,
+  descriptionTextFontSize,
+  descriptionTitleFontFamily,
+  descriptionTextFontFamily,
+  descriptionTitleColor,
+  descriptionTextColor,
+  descriptionBackgroundColor,
+  onChange,
+  context,
+  iconAssetOptions = [],
+}) => {
+  const isConstructor = context === 'constructor';
+
+  return (
+    <div className='space-y-4'>
+      {isConstructor ? (
+        <FormField label='Icon'>
+          <select
+            value={iconUrl}
+            onChange={(event) => onChange('iconUrl', event.target.value)}
+          >
+            <option value=''>Not selected</option>
+            {iconAssetOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      ) : (
+        <FormField label='Icon URL'>
+          <input
+            value={iconUrl}
+            onChange={(event) => onChange('iconUrl', event.target.value)}
+          />
+        </FormField>
+      )}
+
+      <FormField label='Description title'>
+        <input
+          value={descriptionTitle}
+          onChange={(event) => onChange('descriptionTitle', event.target.value)}
+        />
+      </FormField>
+
+      <FormField label='Description text' hasTextareaHeight>
+        <textarea
+          value={descriptionText}
+          onChange={(event) => onChange('descriptionText', event.target.value)}
+          className='h-28 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
+        />
+      </FormField>
+
+      <div className='grid gap-3 md:grid-cols-2'>
+        <FormField label='Title font size'>
+          <input
+            value={descriptionTitleFontSize}
+            onChange={(event) =>
+              onChange('descriptionTitleFontSize', event.target.value)
+            }
+            placeholder='e.g. 48px'
+          />
+        </FormField>
+        <FormField label='Text font size'>
+          <input
+            value={descriptionTextFontSize}
+            onChange={(event) =>
+              onChange('descriptionTextFontSize', event.target.value)
+            }
+            placeholder='e.g. 36px'
+          />
+        </FormField>
+        <FormField label='Title font family'>
+          <input
+            value={descriptionTitleFontFamily}
+            onChange={(event) =>
+              onChange('descriptionTitleFontFamily', event.target.value)
+            }
+            placeholder='e.g. Arial, sans-serif'
+          />
+        </FormField>
+        <FormField label='Text font family'>
+          <input
+            value={descriptionTextFontFamily}
+            onChange={(event) =>
+              onChange('descriptionTextFontFamily', event.target.value)
+            }
+            placeholder='e.g. Arial, sans-serif'
+          />
+        </FormField>
+        <FormField label='Title color'>
+          <input
+            type='color'
+            value={descriptionTitleColor || '#000000'}
+            onChange={(event) =>
+              onChange('descriptionTitleColor', event.target.value)
+            }
+            className='h-10 w-full'
+          />
+        </FormField>
+        <FormField label='Text color'>
+          <input
+            type='color'
+            value={descriptionTextColor || '#4B5563'}
+            onChange={(event) =>
+              onChange('descriptionTextColor', event.target.value)
+            }
+            className='h-10 w-full'
+          />
+        </FormField>
+        <FormField label='Background color'>
+          <input
+            value={descriptionBackgroundColor}
+            onChange={(event) =>
+              onChange('descriptionBackgroundColor', event.target.value)
+            }
+            placeholder='e.g. transparent, #ffffff'
+          />
+        </FormField>
+      </div>
+    </div>
+  );
+};
+
+export default DescriptionSettingsSection;
diff --git a/frontend/src/components/ElementSettings/ElementSettingsTabs.tsx b/frontend/src/components/ElementSettings/ElementSettingsTabs.tsx
new file mode 100644
index 0000000..749c3ce
--- /dev/null
+++ b/frontend/src/components/ElementSettings/ElementSettingsTabs.tsx
@@ -0,0 +1,64 @@
+/**
+ * ElementSettingsTabs
+ *
+ * Tab navigation for element settings.
+ * Provides General Settings and CSS Styles tabs.
+ */
+
+import React from 'react';
+import type { ElementSettingsTabsProps } from './types';
+
+const ElementSettingsTabs: React.FC<ElementSettingsTabsProps> = ({
+  activeTab,
+  onTabChange,
+  tabs,
+}) => {
+  return (
+    <div className='mb-4 inline-flex overflow-hidden rounded border border-gray-300 dark:border-dark-700'>
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          type='button'
+          className={`px-4 py-2 text-sm font-medium transition-colors ${
+            activeTab === tab.id
+              ? 'bg-blue-600 text-white'
+              : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-dark-800 dark:text-gray-200 dark:hover:bg-dark-700'
+          }`}
+          onClick={() => onTabChange(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Compact version for constructor sidebar
+ */
+export const ElementSettingsTabsCompact: React.FC<ElementSettingsTabsProps> = ({
+  activeTab,
+  onTabChange,
+  tabs,
+}) => {
+  return (
+    <div className='mb-3 inline-flex w-full overflow-hidden rounded border border-gray-300'>
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          type='button'
+          className={`flex-1 px-2 py-1.5 text-[11px] font-semibold transition-colors ${
+            activeTab === tab.id
+              ? 'bg-blue-600 text-white'
+              : 'bg-white text-gray-700 hover:bg-gray-50'
+          }`}
+          onClick={() => onTabChange(tab.id)}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default ElementSettingsTabs;
diff --git a/frontend/src/components/ElementSettings/GallerySettingsSection.tsx b/frontend/src/components/ElementSettings/GallerySettingsSection.tsx
new file mode 100644
index 0000000..c72b6d7
--- /dev/null
+++ b/frontend/src/components/ElementSettings/GallerySettingsSection.tsx
@@ -0,0 +1,112 @@
+/**
+ * GallerySettingsSection
+ *
+ * Settings for gallery element type.
+ * Manages gallery cards with images, titles, and descriptions.
+ */
+
+import React from 'react';
+import { mdiPlus, mdiTrashCan } from '@mdi/js';
+import BaseButton from '../BaseButton';
+import CardBox from '../CardBox';
+import FormField from '../FormField';
+import type { GallerySettingsSectionProps } from './types';
+
+const GallerySettingsSection: React.FC<GallerySettingsSectionProps> = ({
+  galleryCards,
+  onAddCard,
+  onRemoveCard,
+  onUpdateCard,
+  context,
+  imageAssetOptions = [],
+}) => {
+  const isConstructor = context === 'constructor';
+
+  return (
+    <CardBox className='border border-gray-200 dark:border-dark-700'>
+      <div className='mb-3 flex items-center justify-between'>
+        <h3 className='text-sm font-semibold'>Gallery cards</h3>
+        <BaseButton
+          color='info'
+          icon={mdiPlus}
+          small
+          label='Add card'
+          onClick={onAddCard}
+        />
+      </div>
+
+      <div className='space-y-4'>
+        {galleryCards.length === 0 ? (
+          <p className='text-sm text-gray-500'>No cards yet.</p>
+        ) : (
+          galleryCards.map((card, index) => (
+            <CardBox
+              key={card.id}
+              className='border border-gray-200 dark:border-dark-700'
+            >
+              <div className='mb-3 flex items-center justify-between'>
+                <h4 className='text-sm font-semibold'>Card {index + 1}</h4>
+                <BaseButton
+                  color='danger'
+                  icon={mdiTrashCan}
+                  small
+                  outline
+                  onClick={() => onRemoveCard(card.id)}
+                />
+              </div>
+              <div className='grid gap-3 md:grid-cols-2'>
+                {isConstructor ? (
+                  <FormField label='Image'>
+                    <select
+                      value={card.imageUrl}
+                      onChange={(event) =>
+                        onUpdateCard(card.id, 'imageUrl', event.target.value)
+                      }
+                    >
+                      <option value=''>Not selected</option>
+                      {imageAssetOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </select>
+                  </FormField>
+                ) : (
+                  <FormField label='Image URL'>
+                    <input
+                      value={card.imageUrl}
+                      onChange={(event) =>
+                        onUpdateCard(card.id, 'imageUrl', event.target.value)
+                      }
+                    />
+                  </FormField>
+                )}
+                <FormField label='Title'>
+                  <input
+                    value={card.title}
+                    onChange={(event) =>
+                      onUpdateCard(card.id, 'title', event.target.value)
+                    }
+                  />
+                </FormField>
+                <div className='md:col-span-2'>
+                  <FormField label='Description' hasTextareaHeight>
+                    <textarea
+                      value={card.description}
+                      onChange={(event) =>
+                        onUpdateCard(card.id, 'description', event.target.value)
+                      }
+                      className='h-24 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
+                    />
+                  </FormField>
+                </div>
+              </div>
+            </CardBox>
+          ))
+        )}
+      </div>
+    </CardBox>
+  );
+};
+
+export default GallerySettingsSection;
diff --git a/frontend/src/components/ElementSettings/MediaSettingsSection.tsx b/frontend/src/components/ElementSettings/MediaSettingsSection.tsx
new file mode 100644
index 0000000..1c170bb
--- /dev/null
+++ b/frontend/src/components/ElementSettings/MediaSettingsSection.tsx
@@ -0,0 +1,89 @@
+/**
+ * MediaSettingsSection
+ *
+ * Settings for video_player and audio_player element types.
+ */
+
+import React from 'react';
+import FormField from '../FormField';
+import type { MediaSettingsSectionProps } from './types';
+
+const MediaSettingsSection: React.FC<MediaSettingsSectionProps> = ({
+  elementType,
+  mediaUrl,
+  mediaAutoplay,
+  mediaLoop,
+  mediaMuted,
+  onChange,
+  context,
+  videoAssetOptions = [],
+  audioAssetOptions = [],
+}) => {
+  const isConstructor = context === 'constructor';
+  const isVideo = elementType === 'video_player';
+  const assetOptions = isVideo ? videoAssetOptions : audioAssetOptions;
+
+  return (
+    <div className='space-y-4'>
+      {isConstructor ? (
+        <FormField label={isVideo ? 'Video asset' : 'Audio asset'}>
+          <select
+            value={mediaUrl}
+            onChange={(event) => onChange('mediaUrl', event.target.value)}
+          >
+            <option value=''>Not selected</option>
+            {assetOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      ) : (
+        <FormField label='Media URL'>
+          <input
+            value={mediaUrl}
+            onChange={(event) => onChange('mediaUrl', event.target.value)}
+          />
+        </FormField>
+      )}
+
+      <FormField label='Playback'>
+        <div className='flex flex-wrap gap-4'>
+          <label className='inline-flex items-center gap-2 text-sm'>
+            <input
+              type='checkbox'
+              checked={mediaAutoplay}
+              onChange={(event) =>
+                onChange('mediaAutoplay', event.target.checked)
+              }
+            />
+            Autoplay
+          </label>
+          <label className='inline-flex items-center gap-2 text-sm'>
+            <input
+              type='checkbox'
+              checked={mediaLoop}
+              onChange={(event) => onChange('mediaLoop', event.target.checked)}
+            />
+            Loop
+          </label>
+          {isVideo && (
+            <label className='inline-flex items-center gap-2 text-sm'>
+              <input
+                type='checkbox'
+                checked={mediaMuted}
+                onChange={(event) =>
+                  onChange('mediaMuted', event.target.checked)
+                }
+              />
+              Muted
+            </label>
+          )}
+        </div>
+      </FormField>
+    </div>
+  );
+};
+
+export default MediaSettingsSection;
diff --git a/frontend/src/components/ElementSettings/NavigationSettingsSection.tsx b/frontend/src/components/ElementSettings/NavigationSettingsSection.tsx
new file mode 100644
index 0000000..7d70cdd
--- /dev/null
+++ b/frontend/src/components/ElementSettings/NavigationSettingsSection.tsx
@@ -0,0 +1,188 @@
+/**
+ * NavigationSettingsSection
+ *
+ * Settings for navigation_next and navigation_prev element types.
+ */
+
+import React from 'react';
+import FormField from '../FormField';
+import type { NavigationSettingsSectionProps } from './types';
+
+const NavigationSettingsSection: React.FC<NavigationSettingsSectionProps> = ({
+  iconUrl,
+  navLabel,
+  navType,
+  navDisabled,
+  targetPageId,
+  targetPageSlug,
+  transitionVideoUrl,
+  transitionReverseMode,
+  reverseVideoUrl,
+  transitionDurationSec,
+  onChange,
+  context,
+  iconAssetOptions = [],
+  transitionVideoAssetOptions = [],
+  pageOptions = [],
+}) => {
+  const isConstructor = context === 'constructor';
+
+  return (
+    <div className='space-y-4'>
+      {isConstructor ? (
+        <FormField label='Icon'>
+          <select
+            value={iconUrl}
+            onChange={(event) => onChange('iconUrl', event.target.value)}
+          >
+            <option value=''>Not selected</option>
+            {iconAssetOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      ) : (
+        <FormField label='Icon URL'>
+          <input
+            value={iconUrl}
+            onChange={(event) => onChange('iconUrl', event.target.value)}
+          />
+        </FormField>
+      )}
+
+      <FormField label='Navigation label'>
+        <input
+          value={navLabel}
+          onChange={(event) => onChange('navLabel', event.target.value)}
+        />
+      </FormField>
+
+      <FormField label='Navigation type'>
+        <select
+          value={navType}
+          onChange={(event) => onChange('navType', event.target.value)}
+        >
+          <option value='forward'>Forward</option>
+          <option value='back'>Back</option>
+        </select>
+      </FormField>
+
+      <FormField label='Disabled'>
+        <label className='inline-flex items-center gap-2 text-sm'>
+          <input
+            type='checkbox'
+            checked={navDisabled}
+            onChange={(event) => onChange('navDisabled', event.target.checked)}
+          />
+          Button is disabled (not clickable)
+        </label>
+      </FormField>
+
+      {isConstructor && pageOptions.length > 0 ? (
+        <FormField label='Target page'>
+          <select
+            value={targetPageSlug}
+            onChange={(event) => onChange('targetPageSlug', event.target.value)}
+          >
+            <option value=''>Not selected</option>
+            {pageOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      ) : (
+        <FormField label='Target page ID (optional)'>
+          <input
+            value={targetPageId}
+            onChange={(event) => onChange('targetPageId', event.target.value)}
+          />
+        </FormField>
+      )}
+
+      {isConstructor ? (
+        <FormField label='Transition video asset'>
+          <select
+            value={transitionVideoUrl}
+            onChange={(event) =>
+              onChange('transitionVideoUrl', event.target.value)
+            }
+          >
+            <option value=''>Not selected</option>
+            {transitionVideoAssetOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      ) : (
+        <FormField label='Transition video URL'>
+          <input
+            value={transitionVideoUrl}
+            onChange={(event) =>
+              onChange('transitionVideoUrl', event.target.value)
+            }
+          />
+        </FormField>
+      )}
+
+      <FormField label='Reverse mode'>
+        <select
+          value={transitionReverseMode}
+          onChange={(event) =>
+            onChange('transitionReverseMode', event.target.value)
+          }
+        >
+          <option value='auto_reverse'>Auto reverse</option>
+          <option value='separate_video'>Separate reverse video</option>
+        </select>
+      </FormField>
+
+      {transitionReverseMode === 'separate_video' && (
+        <>
+          {isConstructor ? (
+            <FormField label='Reverse video asset'>
+              <select
+                value={reverseVideoUrl}
+                onChange={(event) =>
+                  onChange('reverseVideoUrl', event.target.value)
+                }
+              >
+                <option value=''>Not selected</option>
+                {transitionVideoAssetOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </FormField>
+          ) : (
+            <FormField label='Reverse video URL'>
+              <input
+                value={reverseVideoUrl}
+                onChange={(event) =>
+                  onChange('reverseVideoUrl', event.target.value)
+                }
+              />
+            </FormField>
+          )}
+        </>
+      )}
+
+      <FormField label='Transition duration (sec)'>
+        <input
+          value={transitionDurationSec}
+          onChange={(event) =>
+            onChange('transitionDurationSec', event.target.value)
+          }
+        />
+      </FormField>
+    </div>
+  );
+};
+
+export default NavigationSettingsSection;
diff --git a/frontend/src/components/ElementSettings/StyleSettingsSection.tsx b/frontend/src/components/ElementSettings/StyleSettingsSection.tsx
new file mode 100644
index 0000000..50ce275
--- /dev/null
+++ b/frontend/src/components/ElementSettings/StyleSettingsSection.tsx
@@ -0,0 +1,232 @@
+/**
+ * StyleSettingsSection
+ *
+ * CSS styling fields for UI elements.
+ * Used in element-type-defaults, project-element-defaults, and constructor pages.
+ */
+
+import React from 'react';
+import FormField from '../FormField';
+import type { StyleSettingsSectionProps } from './types';
+
+const StyleSettingsSection: React.FC<StyleSettingsSectionProps> = ({
+  values,
+  onChange,
+}) => {
+  return (
+    <div className='space-y-3'>
+      <h3 className='text-sm font-semibold'>View & Stylization</h3>
+      <p className='text-xs text-gray-500'>
+        Fill numbers only: width is saved as vw, height as vh, border and radius
+        as px.
+      </p>
+      <div className='grid gap-3 md:grid-cols-2'>
+        <FormField label='Width (vw)'>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            value={values.width || ''}
+            onChange={(event) => onChange('width', event.target.value)}
+            placeholder='e.g. 24'
+          />
+        </FormField>
+        <FormField label='Height (vh)'>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            value={values.height || ''}
+            onChange={(event) => onChange('height', event.target.value)}
+            placeholder='e.g. 8'
+          />
+        </FormField>
+        <FormField label='Min width (vw)'>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            value={values.minWidth || ''}
+            onChange={(event) => onChange('minWidth', event.target.value)}
+          />
+        </FormField>
+        <FormField label='Max width (vw)'>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            value={values.maxWidth || ''}
+            onChange={(event) => onChange('maxWidth', event.target.value)}
+          />
+        </FormField>
+        <FormField label='Min height (vh)'>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            value={values.minHeight || ''}
+            onChange={(event) => onChange('minHeight', event.target.value)}
+          />
+        </FormField>
+        <FormField label='Max height (vh)'>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            value={values.maxHeight || ''}
+            onChange={(event) => onChange('maxHeight', event.target.value)}
+          />
+        </FormField>
+        <FormField label='Margin'>
+          <input
+            value={values.margin || ''}
+            onChange={(event) => onChange('margin', event.target.value)}
+            placeholder='e.g. 0 auto / 0.5rem'
+          />
+        </FormField>
+        <FormField label='Padding'>
+          <input
+            value={values.padding || ''}
+            onChange={(event) => onChange('padding', event.target.value)}
+            placeholder='e.g. 0.5rem 0.75rem'
+          />
+        </FormField>
+        <FormField label='Gap'>
+          <input
+            value={values.gap || ''}
+            onChange={(event) => onChange('gap', event.target.value)}
+          />
+        </FormField>
+        <FormField label='Font size'>
+          <input
+            value={values.fontSize || ''}
+            onChange={(event) => onChange('fontSize', event.target.value)}
+            placeholder='e.g. 0.875rem / clamp(...)'
+          />
+        </FormField>
+        <FormField label='Line height'>
+          <input
+            value={values.lineHeight || ''}
+            onChange={(event) => onChange('lineHeight', event.target.value)}
+          />
+        </FormField>
+        <FormField label='Font weight'>
+          <input
+            value={values.fontWeight || ''}
+            onChange={(event) => onChange('fontWeight', event.target.value)}
+            placeholder='e.g. 500 / bold'
+          />
+        </FormField>
+        <FormField label='Border width (px)'>
+          <input
+            type='number'
+            step='1'
+            min='0'
+            value={values.border || ''}
+            onChange={(event) => onChange('border', event.target.value)}
+            placeholder='empty = none'
+          />
+        </FormField>
+        <FormField label='Border radius (px)'>
+          <input
+            type='number'
+            step='1'
+            min='0'
+            value={values.borderRadius || ''}
+            onChange={(event) => onChange('borderRadius', event.target.value)}
+            placeholder='empty = 0'
+          />
+        </FormField>
+        <FormField label='Opacity'>
+          <input
+            value={values.opacity || ''}
+            onChange={(event) => onChange('opacity', event.target.value)}
+            placeholder='0..1'
+          />
+        </FormField>
+        <FormField label='Shadow'>
+          <input
+            value={values.boxShadow || ''}
+            onChange={(event) => onChange('boxShadow', event.target.value)}
+            placeholder='e.g. 0 4px 12px rgba(...)'
+          />
+        </FormField>
+        <FormField label='Display'>
+          <select
+            value={values.display || ''}
+            onChange={(event) => onChange('display', event.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='block'>block</option>
+            <option value='inline-block'>inline-block</option>
+            <option value='flex'>flex</option>
+            <option value='inline-flex'>inline-flex</option>
+            <option value='grid'>grid</option>
+            <option value='none'>none</option>
+          </select>
+        </FormField>
+        <FormField label='Position'>
+          <select
+            value={values.position || ''}
+            onChange={(event) => onChange('position', event.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='static'>static</option>
+            <option value='relative'>relative</option>
+            <option value='absolute'>absolute</option>
+            <option value='fixed'>fixed</option>
+            <option value='sticky'>sticky</option>
+          </select>
+        </FormField>
+        <FormField label='Justify content'>
+          <select
+            value={values.justifyContent || ''}
+            onChange={(event) => onChange('justifyContent', event.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='flex-start'>flex-start</option>
+            <option value='center'>center</option>
+            <option value='flex-end'>flex-end</option>
+            <option value='space-between'>space-between</option>
+            <option value='space-around'>space-around</option>
+            <option value='space-evenly'>space-evenly</option>
+          </select>
+        </FormField>
+        <FormField label='Align items'>
+          <select
+            value={values.alignItems || ''}
+            onChange={(event) => onChange('alignItems', event.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='stretch'>stretch</option>
+            <option value='flex-start'>flex-start</option>
+            <option value='center'>center</option>
+            <option value='flex-end'>flex-end</option>
+            <option value='baseline'>baseline</option>
+          </select>
+        </FormField>
+        <FormField label='Text align'>
+          <select
+            value={values.textAlign || ''}
+            onChange={(event) => onChange('textAlign', event.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='left'>left</option>
+            <option value='center'>center</option>
+            <option value='right'>right</option>
+            <option value='justify'>justify</option>
+          </select>
+        </FormField>
+        <FormField label='z-index'>
+          <input
+            value={values.zIndex || ''}
+            onChange={(event) => onChange('zIndex', event.target.value)}
+            placeholder='e.g. 1 / 10'
+          />
+        </FormField>
+      </div>
+    </div>
+  );
+};
+
+export default StyleSettingsSection;
diff --git a/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx
new file mode 100644
index 0000000..4c17a0c
--- /dev/null
+++ b/frontend/src/components/ElementSettings/StyleSettingsSectionCompact.tsx
@@ -0,0 +1,321 @@
+/**
+ * StyleSettingsSectionCompact
+ *
+ * Compact CSS styling fields for the constructor sidebar.
+ * Uses smaller inputs and labels to fit in the narrow sidebar.
+ */
+
+import React from 'react';
+import type { StyleSettingsSectionProps } from './types';
+
+const StyleSettingsSectionCompact: React.FC<StyleSettingsSectionProps> = ({
+  values,
+  onChange,
+}) => {
+  return (
+    <div className='space-y-2'>
+      <p className='text-[10px] text-gray-500'>
+        Numbers only: width=vw, height=vh, border/radius=px
+      </p>
+      <div className='grid grid-cols-2 gap-2'>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Width (vw)
+          </label>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.width || ''}
+            onChange={(e) => onChange('width', e.target.value)}
+            placeholder='e.g. 24'
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Height (vh)
+          </label>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.height || ''}
+            onChange={(e) => onChange('height', e.target.value)}
+            placeholder='e.g. 8'
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Min W (vw)
+          </label>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.minWidth || ''}
+            onChange={(e) => onChange('minWidth', e.target.value)}
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Max W (vw)
+          </label>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.maxWidth || ''}
+            onChange={(e) => onChange('maxWidth', e.target.value)}
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Min H (vh)
+          </label>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.minHeight || ''}
+            onChange={(e) => onChange('minHeight', e.target.value)}
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Max H (vh)
+          </label>
+          <input
+            type='number'
+            step='0.1'
+            min='0'
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.maxHeight || ''}
+            onChange={(e) => onChange('maxHeight', e.target.value)}
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Margin
+          </label>
+          <input
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.margin || ''}
+            onChange={(e) => onChange('margin', e.target.value)}
+            placeholder='0 auto'
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Padding
+          </label>
+          <input
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.padding || ''}
+            onChange={(e) => onChange('padding', e.target.value)}
+            placeholder='0.5rem'
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Gap
+          </label>
+          <input
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.gap || ''}
+            onChange={(e) => onChange('gap', e.target.value)}
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Font size
+          </label>
+          <input
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.fontSize || ''}
+            onChange={(e) => onChange('fontSize', e.target.value)}
+            placeholder='0.875rem'
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Line height
+          </label>
+          <input
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.lineHeight || ''}
+            onChange={(e) => onChange('lineHeight', e.target.value)}
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Font weight
+          </label>
+          <input
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.fontWeight || ''}
+            onChange={(e) => onChange('fontWeight', e.target.value)}
+            placeholder='500'
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Border (px)
+          </label>
+          <input
+            type='number'
+            step='1'
+            min='0'
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.border || ''}
+            onChange={(e) => onChange('border', e.target.value)}
+            placeholder='0'
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Radius (px)
+          </label>
+          <input
+            type='number'
+            step='1'
+            min='0'
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.borderRadius || ''}
+            onChange={(e) => onChange('borderRadius', e.target.value)}
+            placeholder='0'
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Opacity
+          </label>
+          <input
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.opacity || ''}
+            onChange={(e) => onChange('opacity', e.target.value)}
+            placeholder='0..1'
+          />
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            z-index
+          </label>
+          <input
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.zIndex || ''}
+            onChange={(e) => onChange('zIndex', e.target.value)}
+            placeholder='1'
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+          Box shadow
+        </label>
+        <input
+          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+          value={values.boxShadow || ''}
+          onChange={(e) => onChange('boxShadow', e.target.value)}
+          placeholder='0 4px 12px rgba(...)'
+        />
+      </div>
+
+      <div className='grid grid-cols-2 gap-2'>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Display
+          </label>
+          <select
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.display || ''}
+            onChange={(e) => onChange('display', e.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='block'>block</option>
+            <option value='inline-block'>inline-block</option>
+            <option value='flex'>flex</option>
+            <option value='inline-flex'>inline-flex</option>
+            <option value='grid'>grid</option>
+            <option value='none'>none</option>
+          </select>
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Position
+          </label>
+          <select
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.position || ''}
+            onChange={(e) => onChange('position', e.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='static'>static</option>
+            <option value='relative'>relative</option>
+            <option value='absolute'>absolute</option>
+            <option value='fixed'>fixed</option>
+            <option value='sticky'>sticky</option>
+          </select>
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Justify
+          </label>
+          <select
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.justifyContent || ''}
+            onChange={(e) => onChange('justifyContent', e.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='flex-start'>start</option>
+            <option value='center'>center</option>
+            <option value='flex-end'>end</option>
+            <option value='space-between'>between</option>
+            <option value='space-around'>around</option>
+            <option value='space-evenly'>evenly</option>
+          </select>
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Align
+          </label>
+          <select
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.alignItems || ''}
+            onChange={(e) => onChange('alignItems', e.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='stretch'>stretch</option>
+            <option value='flex-start'>start</option>
+            <option value='center'>center</option>
+            <option value='flex-end'>end</option>
+            <option value='baseline'>baseline</option>
+          </select>
+        </div>
+        <div>
+          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+            Text align
+          </label>
+          <select
+            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+            value={values.textAlign || ''}
+            onChange={(e) => onChange('textAlign', e.target.value)}
+          >
+            <option value=''>Not set</option>
+            <option value='left'>left</option>
+            <option value='center'>center</option>
+            <option value='right'>right</option>
+            <option value='justify'>justify</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StyleSettingsSectionCompact;
diff --git a/frontend/src/components/ElementSettings/TooltipSettingsSection.tsx b/frontend/src/components/ElementSettings/TooltipSettingsSection.tsx
new file mode 100644
index 0000000..45f9787
--- /dev/null
+++ b/frontend/src/components/ElementSettings/TooltipSettingsSection.tsx
@@ -0,0 +1,64 @@
+/**
+ * TooltipSettingsSection
+ *
+ * Settings for tooltip element type.
+ */
+
+import React from 'react';
+import FormField from '../FormField';
+import type { TooltipSettingsSectionProps } from './types';
+
+const TooltipSettingsSection: React.FC<TooltipSettingsSectionProps> = ({
+  iconUrl,
+  tooltipTitle,
+  tooltipText,
+  onChange,
+  context,
+  iconAssetOptions = [],
+}) => {
+  const isConstructor = context === 'constructor';
+
+  return (
+    <div className='space-y-4'>
+      {isConstructor ? (
+        <FormField label='Icon'>
+          <select
+            value={iconUrl}
+            onChange={(event) => onChange('iconUrl', event.target.value)}
+          >
+            <option value=''>Not selected</option>
+            {iconAssetOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </FormField>
+      ) : (
+        <FormField label='Icon URL'>
+          <input
+            value={iconUrl}
+            onChange={(event) => onChange('iconUrl', event.target.value)}
+          />
+        </FormField>
+      )}
+
+      <FormField label='Tooltip title'>
+        <input
+          value={tooltipTitle}
+          onChange={(event) => onChange('tooltipTitle', event.target.value)}
+        />
+      </FormField>
+
+      <FormField label='Tooltip text' hasTextareaHeight>
+        <textarea
+          value={tooltipText}
+          onChange={(event) => onChange('tooltipText', event.target.value)}
+          className='h-28 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
+        />
+      </FormField>
+    </div>
+  );
+};
+
+export default TooltipSettingsSection;
diff --git a/frontend/src/components/ElementSettings/index.ts b/frontend/src/components/ElementSettings/index.ts
new file mode 100644
index 0000000..d66e15c
--- /dev/null
+++ b/frontend/src/components/ElementSettings/index.ts
@@ -0,0 +1,27 @@
+/**
+ * Element Settings Components
+ *
+ * Barrel exports for all element settings form components.
+ */
+
+// Main components
+export {
+  default as ElementSettingsTabs,
+  ElementSettingsTabsCompact,
+} from './ElementSettingsTabs';
+export { default as StyleSettingsSection } from './StyleSettingsSection';
+export { default as StyleSettingsSectionCompact } from './StyleSettingsSectionCompact';
+export { default as CommonSettingsSection } from './CommonSettingsSection';
+export { default as NavigationSettingsSection } from './NavigationSettingsSection';
+export { default as TooltipSettingsSection } from './TooltipSettingsSection';
+export { default as DescriptionSettingsSection } from './DescriptionSettingsSection';
+export { default as MediaSettingsSection } from './MediaSettingsSection';
+export { default as GallerySettingsSection } from './GallerySettingsSection';
+export { default as CarouselSettingsSection } from './CarouselSettingsSection';
+
+// Hook
+export { useElementSettingsForm } from './useElementSettingsForm';
+export type { FormState } from './useElementSettingsForm';
+
+// Types
+export * from './types';
diff --git a/frontend/src/components/ElementSettings/types.ts b/frontend/src/components/ElementSettings/types.ts
new file mode 100644
index 0000000..63e8887
--- /dev/null
+++ b/frontend/src/components/ElementSettings/types.ts
@@ -0,0 +1,235 @@
+/**
+ * Element Settings Types
+ *
+ * Shared types for element settings form components.
+ * Used across element-type-defaults, project-element-defaults, and constructor pages.
+ */
+
+import type { ElementStyleProperties } from '../../lib/elementStyles';
+import type {
+  CanvasElement,
+  CanvasElementType,
+  GalleryCard,
+  CarouselSlide,
+  AssetOption,
+} from '../../types/constructor';
+
+/**
+ * Context for element settings components.
+ * Determines available fields and behaviors.
+ */
+export type ElementSettingsContext =
+  | 'global' // element-type-defaults page - plain text inputs
+  | 'project' // project-element-defaults page - plain text inputs
+  | 'constructor'; // constructor page - asset selectors available
+
+/**
+ * Props for CSS style settings section
+ */
+export interface StyleSettingsSectionProps {
+  values: ElementStyleProperties;
+  onChange: (prop: keyof ElementStyleProperties, value: string) => void;
+}
+
+/**
+ * Props for common settings section (label, position, appear timing)
+ */
+export interface CommonSettingsSectionProps {
+  label: string;
+  xPercent: string;
+  yPercent: string;
+  appearDelaySec: string;
+  appearDurationSec: string;
+  onChange: (field: string, value: string) => void;
+  showPosition?: boolean;
+}
+
+/**
+ * Props for navigation element settings
+ */
+export interface NavigationSettingsSectionProps {
+  iconUrl: string;
+  navLabel: string;
+  navType: 'forward' | 'back';
+  navDisabled: boolean;
+  targetPageId: string;
+  targetPageSlug: string;
+  transitionVideoUrl: string;
+  transitionReverseMode: 'auto_reverse' | 'separate_video';
+  reverseVideoUrl: string;
+  transitionDurationSec: string;
+  onChange: (field: string, value: string | boolean) => void;
+  context: ElementSettingsContext;
+  iconAssetOptions?: AssetOption[];
+  transitionVideoAssetOptions?: AssetOption[];
+  pageOptions?: { value: string; label: string }[];
+}
+
+/**
+ * Props for tooltip element settings
+ */
+export interface TooltipSettingsSectionProps {
+  iconUrl: string;
+  tooltipTitle: string;
+  tooltipText: string;
+  onChange: (field: string, value: string) => void;
+  context: ElementSettingsContext;
+  iconAssetOptions?: AssetOption[];
+}
+
+/**
+ * Props for description element settings
+ */
+export interface DescriptionSettingsSectionProps {
+  iconUrl: string;
+  descriptionTitle: string;
+  descriptionText: string;
+  descriptionTitleFontSize: string;
+  descriptionTextFontSize: string;
+  descriptionTitleFontFamily: string;
+  descriptionTextFontFamily: string;
+  descriptionTitleColor: string;
+  descriptionTextColor: string;
+  descriptionBackgroundColor: string;
+  onChange: (field: string, value: string) => void;
+  context: ElementSettingsContext;
+  iconAssetOptions?: AssetOption[];
+}
+
+/**
+ * Props for media (video/audio player) element settings
+ */
+export interface MediaSettingsSectionProps {
+  elementType: 'video_player' | 'audio_player';
+  mediaUrl: string;
+  mediaAutoplay: boolean;
+  mediaLoop: boolean;
+  mediaMuted: boolean;
+  onChange: (field: string, value: string | boolean) => void;
+  context: ElementSettingsContext;
+  videoAssetOptions?: AssetOption[];
+  audioAssetOptions?: AssetOption[];
+}
+
+/**
+ * Props for gallery element settings
+ */
+export interface GallerySettingsSectionProps {
+  galleryCards: GalleryCard[];
+  onAddCard: () => void;
+  onRemoveCard: (cardId: string) => void;
+  onUpdateCard: (
+    cardId: string,
+    field: keyof GalleryCard,
+    value: string,
+  ) => void;
+  context: ElementSettingsContext;
+  imageAssetOptions?: AssetOption[];
+}
+
+/**
+ * Props for carousel element settings
+ */
+export interface CarouselSettingsSectionProps {
+  carouselPrevIconUrl: string;
+  carouselNextIconUrl: string;
+  carouselSlides: CarouselSlide[];
+  onAddSlide: () => void;
+  onRemoveSlide: (slideId: string) => void;
+  onUpdateSlide: (
+    slideId: string,
+    field: keyof CarouselSlide,
+    value: string,
+  ) => void;
+  onChange: (field: string, value: string) => void;
+  context: ElementSettingsContext;
+  iconAssetOptions?: AssetOption[];
+  imageAssetOptions?: AssetOption[];
+}
+
+/**
+ * Props for element settings tabs component
+ */
+export interface ElementSettingsTabsProps {
+  activeTab: string;
+  onTabChange: (tabId: string) => void;
+  tabs: { id: string; label: string }[];
+}
+
+/**
+ * Element type detection helpers
+ */
+export function isNavigationType(type: string): boolean {
+  return type === 'navigation_next' || type === 'navigation_prev';
+}
+
+export function isTooltipType(type: string): boolean {
+  return type === 'tooltip';
+}
+
+export function isDescriptionType(type: string): boolean {
+  return type === 'description';
+}
+
+export function isGalleryType(type: string): boolean {
+  return type === 'gallery';
+}
+
+export function isCarouselType(type: string): boolean {
+  return type === 'carousel';
+}
+
+export function isMediaType(type: string): boolean {
+  return type === 'video_player' || type === 'audio_player';
+}
+
+/**
+ * Value normalization helpers
+ */
+export const clampPercent = (value: string): number => {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) return 0;
+  return Math.min(Math.max(parsed, 0), 100);
+};
+
+export const parseNullableNumber = (value: string): number | null => {
+  if (!value.trim()) return null;
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed < 0) return null;
+  return parsed;
+};
+
+export const extractNumericValue = (value: unknown): string => {
+  const normalized = String(value ?? '').trim();
+  if (!normalized) return '';
+  const matched = normalized.match(/-?\d*\.?\d+/);
+  return matched ? matched[0] : '';
+};
+
+export const normalizeNumberString = (value: string): string => {
+  const normalized = String(value || '').trim();
+  if (!normalized) return '';
+  const parsed = Number(normalized);
+  if (!Number.isFinite(parsed)) return '';
+  return String(parsed);
+};
+
+export const toOptionalTrimmed = (value: string): string | undefined => {
+  const normalized = String(value || '').trim();
+  return normalized ? normalized : undefined;
+};
+
+export const toUnitValue = (
+  value: string,
+  unit: 'vw' | 'vh' | 'px',
+): string | undefined => {
+  const normalized = normalizeNumberString(value);
+  return normalized ? `${normalized}${unit}` : undefined;
+};
+
+export const createLocalId = (): string => {
+  if (typeof window !== 'undefined' && window.crypto?.randomUUID) {
+    return window.crypto.randomUUID();
+  }
+  return `element-default_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+};
diff --git a/frontend/src/components/ElementSettings/useElementSettingsForm.ts b/frontend/src/components/ElementSettings/useElementSettingsForm.ts
new file mode 100644
index 0000000..4945b48
--- /dev/null
+++ b/frontend/src/components/ElementSettings/useElementSettingsForm.ts
@@ -0,0 +1,582 @@
+/**
+ * useElementSettingsForm
+ *
+ * Shared hook for managing element settings form state.
+ * Used by element-type-defaults, project-element-defaults, and constructor pages.
+ */
+
+import { useCallback, useState } from 'react';
+import type { ElementStyleProperties } from '../../lib/elementStyles';
+import type {
+  CanvasElement,
+  CanvasElementType,
+  GalleryCard,
+  CarouselSlide,
+} from '../../types/constructor';
+import { parseJsonObject } from '../../lib/parseJson';
+import {
+  extractNumericValue,
+  clampPercent,
+  parseNullableNumber,
+  toUnitValue,
+  toOptionalTrimmed,
+  createLocalId,
+} from './types';
+
+interface UseElementSettingsFormOptions {
+  elementType: CanvasElementType | string;
+}
+
+interface FormState {
+  // Common settings
+  label: string;
+  xPercent: string;
+  yPercent: string;
+  appearDelaySec: string;
+  appearDurationSec: string;
+
+  // CSS style settings
+  width: string;
+  height: string;
+  minWidth: string;
+  maxWidth: string;
+  minHeight: string;
+  maxHeight: string;
+  margin: string;
+  padding: string;
+  gap: string;
+  fontSize: string;
+  lineHeight: string;
+  fontWeight: string;
+  border: string;
+  borderRadius: string;
+  opacity: string;
+  boxShadow: string;
+  display: string;
+  position: string;
+  justifyContent: string;
+  alignItems: string;
+  textAlign: string;
+  zIndex: string;
+
+  // Navigation settings
+  iconUrl: string;
+  navLabel: string;
+  navType: 'forward' | 'back';
+  navDisabled: boolean;
+  targetPageId: string;
+  targetPageSlug: string;
+  transitionVideoUrl: string;
+  transitionReverseMode: 'auto_reverse' | 'separate_video';
+  reverseVideoUrl: string;
+  transitionDurationSec: string;
+
+  // Tooltip settings
+  tooltipTitle: string;
+  tooltipText: string;
+
+  // Description settings
+  descriptionTitle: string;
+  descriptionText: string;
+  descriptionTitleFontSize: string;
+  descriptionTextFontSize: string;
+  descriptionTitleFontFamily: string;
+  descriptionTextFontFamily: string;
+  descriptionTitleColor: string;
+  descriptionTextColor: string;
+  descriptionBackgroundColor: string;
+
+  // Media settings
+  mediaUrl: string;
+  mediaAutoplay: boolean;
+  mediaLoop: boolean;
+  mediaMuted: boolean;
+
+  // Carousel settings
+  carouselPrevIconUrl: string;
+  carouselNextIconUrl: string;
+
+  // Complex arrays
+  galleryCards: GalleryCard[];
+  carouselSlides: CarouselSlide[];
+}
+
+const initialState: FormState = {
+  label: '',
+  xPercent: '0',
+  yPercent: '0',
+  appearDelaySec: '0',
+  appearDurationSec: '',
+  width: '',
+  height: '',
+  minWidth: '',
+  maxWidth: '',
+  minHeight: '',
+  maxHeight: '',
+  margin: '',
+  padding: '',
+  gap: '',
+  fontSize: '',
+  lineHeight: '',
+  fontWeight: '',
+  border: '',
+  borderRadius: '',
+  opacity: '',
+  boxShadow: '',
+  display: '',
+  position: '',
+  justifyContent: '',
+  alignItems: '',
+  textAlign: '',
+  zIndex: '',
+  iconUrl: '',
+  navLabel: '',
+  navType: 'forward',
+  navDisabled: false,
+  targetPageId: '',
+  targetPageSlug: '',
+  transitionVideoUrl: '',
+  transitionReverseMode: 'auto_reverse',
+  reverseVideoUrl: '',
+  transitionDurationSec: '0.7',
+  tooltipTitle: '',
+  tooltipText: '',
+  descriptionTitle: '',
+  descriptionText: '',
+  descriptionTitleFontSize: '',
+  descriptionTextFontSize: '',
+  descriptionTitleFontFamily: '',
+  descriptionTextFontFamily: '',
+  descriptionTitleColor: '',
+  descriptionTextColor: '',
+  descriptionBackgroundColor: '',
+  mediaUrl: '',
+  mediaAutoplay: false,
+  mediaLoop: false,
+  mediaMuted: false,
+  carouselPrevIconUrl: '',
+  carouselNextIconUrl: '',
+  galleryCards: [],
+  carouselSlides: [],
+};
+
+export function useElementSettingsForm(options: UseElementSettingsFormOptions) {
+  const { elementType } = options;
+  const [state, setState] = useState<FormState>(initialState);
+
+  // Type detection helpers
+  const isNavigationType =
+    elementType === 'navigation_next' || elementType === 'navigation_prev';
+  const isTooltipType = elementType === 'tooltip';
+  const isDescriptionType = elementType === 'description';
+  const isGalleryType = elementType === 'gallery';
+  const isCarouselType = elementType === 'carousel';
+  const isMediaType =
+    elementType === 'video_player' || elementType === 'audio_player';
+
+  /**
+   * Apply settings from JSON to form state
+   */
+  const applySettings = useCallback(
+    (settingsValue?: string | Record<string, unknown>) => {
+      const settings = parseJsonObject<Record<string, unknown>>(
+        settingsValue,
+        {},
+      );
+
+      setState({
+        label: String(settings.label || ''),
+        xPercent: String(settings.xPercent ?? 0),
+        yPercent: String(settings.yPercent ?? 0),
+        width: extractNumericValue(settings.width),
+        height: extractNumericValue(settings.height),
+        minWidth: extractNumericValue(settings.minWidth),
+        maxWidth: extractNumericValue(settings.maxWidth),
+        minHeight: extractNumericValue(settings.minHeight),
+        maxHeight: extractNumericValue(settings.maxHeight),
+        margin: String(settings.margin || ''),
+        padding: String(settings.padding || ''),
+        gap: String(settings.gap || ''),
+        fontSize: String(settings.fontSize || ''),
+        lineHeight: String(settings.lineHeight || ''),
+        fontWeight: String(settings.fontWeight || ''),
+        border: extractNumericValue(settings.border),
+        borderRadius: extractNumericValue(settings.borderRadius),
+        opacity: settings.opacity === 0 ? '0' : String(settings.opacity || ''),
+        boxShadow: String(settings.boxShadow || ''),
+        display: String(settings.display || ''),
+        position: String(settings.position || ''),
+        justifyContent: String(settings.justifyContent || ''),
+        alignItems: String(settings.alignItems || ''),
+        textAlign: String(settings.textAlign || ''),
+        zIndex: String(settings.zIndex || ''),
+        appearDelaySec: String(settings.appearDelaySec ?? 0),
+        appearDurationSec:
+          settings.appearDurationSec === null ||
+          settings.appearDurationSec === undefined
+            ? ''
+            : String(settings.appearDurationSec),
+        iconUrl: String(settings.iconUrl || ''),
+        navLabel: String(settings.navLabel || ''),
+        navType: settings.navType === 'back' ? 'back' : 'forward',
+        navDisabled: Boolean(settings.navDisabled),
+        targetPageId: String(settings.targetPageId || ''),
+        targetPageSlug: String(settings.targetPageSlug || ''),
+        transitionVideoUrl: String(settings.transitionVideoUrl || ''),
+        transitionReverseMode:
+          settings.transitionReverseMode === 'separate_video'
+            ? 'separate_video'
+            : 'auto_reverse',
+        reverseVideoUrl: String(settings.reverseVideoUrl || ''),
+        transitionDurationSec: String(settings.transitionDurationSec ?? 0.7),
+        tooltipTitle: String(settings.tooltipTitle || ''),
+        tooltipText: String(settings.tooltipText || ''),
+        descriptionTitle: String(settings.descriptionTitle || ''),
+        descriptionText: String(settings.descriptionText || ''),
+        descriptionTitleFontSize: String(
+          settings.descriptionTitleFontSize || '',
+        ),
+        descriptionTextFontSize: String(settings.descriptionTextFontSize || ''),
+        descriptionTitleFontFamily: String(
+          settings.descriptionTitleFontFamily || '',
+        ),
+        descriptionTextFontFamily: String(
+          settings.descriptionTextFontFamily || '',
+        ),
+        descriptionTitleColor: String(settings.descriptionTitleColor || ''),
+        descriptionTextColor: String(settings.descriptionTextColor || ''),
+        descriptionBackgroundColor: String(
+          settings.descriptionBackgroundColor || '',
+        ),
+        mediaUrl: String(settings.mediaUrl || ''),
+        mediaAutoplay: Boolean(settings.mediaAutoplay),
+        mediaLoop: Boolean(settings.mediaLoop),
+        mediaMuted: Boolean(settings.mediaMuted),
+        carouselPrevIconUrl: String(settings.carouselPrevIconUrl || ''),
+        carouselNextIconUrl: String(settings.carouselNextIconUrl || ''),
+        galleryCards: Array.isArray(settings.galleryCards)
+          ? settings.galleryCards.map(
+              (card: Record<string, unknown>, index: number) => ({
+                id: String(card?.id || createLocalId()),
+                imageUrl: String(card?.imageUrl || ''),
+                title: String(card?.title || `Card ${index + 1}`),
+                description: String(card?.description || ''),
+              }),
+            )
+          : [],
+        carouselSlides: Array.isArray(settings.carouselSlides)
+          ? settings.carouselSlides.map(
+              (slide: Record<string, unknown>, index: number) => ({
+                id: String(slide?.id || createLocalId()),
+                imageUrl: String(slide?.imageUrl || ''),
+                caption: String(slide?.caption || `Slide ${index + 1}`),
+              }),
+            )
+          : [],
+      });
+    },
+    [],
+  );
+
+  /**
+   * Update a single field
+   */
+  const setField = useCallback(
+    <K extends keyof FormState>(field: K, value: FormState[K]) => {
+      setState((prev) => ({ ...prev, [field]: value }));
+    },
+    [],
+  );
+
+  /**
+   * Update multiple fields at once
+   */
+  const setFields = useCallback((updates: Partial<FormState>) => {
+    setState((prev) => ({ ...prev, ...updates }));
+  }, []);
+
+  /**
+   * Get CSS style values for StyleSettingsSection
+   */
+  const getStyleValues = useCallback((): ElementStyleProperties => {
+    return {
+      width: state.width,
+      height: state.height,
+      minWidth: state.minWidth,
+      maxWidth: state.maxWidth,
+      minHeight: state.minHeight,
+      maxHeight: state.maxHeight,
+      margin: state.margin,
+      padding: state.padding,
+      gap: state.gap,
+      fontSize: state.fontSize,
+      lineHeight: state.lineHeight,
+      fontWeight: state.fontWeight,
+      border: state.border,
+      borderRadius: state.borderRadius,
+      opacity: state.opacity,
+      boxShadow: state.boxShadow,
+      display: state.display,
+      position: state.position,
+      justifyContent: state.justifyContent,
+      alignItems: state.alignItems,
+      textAlign: state.textAlign,
+      zIndex: state.zIndex,
+    };
+  }, [state]);
+
+  /**
+   * Gallery card operations
+   */
+  const addGalleryCard = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      galleryCards: [
+        ...prev.galleryCards,
+        {
+          id: createLocalId(),
+          imageUrl: '',
+          title: `Card ${prev.galleryCards.length + 1}`,
+          description: '',
+        },
+      ],
+    }));
+  }, []);
+
+  const removeGalleryCard = useCallback((cardId: string) => {
+    setState((prev) => ({
+      ...prev,
+      galleryCards: prev.galleryCards.filter((card) => card.id !== cardId),
+    }));
+  }, []);
+
+  const updateGalleryCard = useCallback(
+    (cardId: string, field: keyof GalleryCard, value: string) => {
+      setState((prev) => ({
+        ...prev,
+        galleryCards: prev.galleryCards.map((card) =>
+          card.id === cardId ? { ...card, [field]: value } : card,
+        ),
+      }));
+    },
+    [],
+  );
+
+  /**
+   * Carousel slide operations
+   */
+  const addCarouselSlide = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      carouselSlides: [
+        ...prev.carouselSlides,
+        {
+          id: createLocalId(),
+          imageUrl: '',
+          caption: `Slide ${prev.carouselSlides.length + 1}`,
+        },
+      ],
+    }));
+  }, []);
+
+  const removeCarouselSlide = useCallback((slideId: string) => {
+    setState((prev) => ({
+      ...prev,
+      carouselSlides: prev.carouselSlides.filter(
+        (slide) => slide.id !== slideId,
+      ),
+    }));
+  }, []);
+
+  const updateCarouselSlide = useCallback(
+    (slideId: string, field: keyof CarouselSlide, value: string) => {
+      setState((prev) => ({
+        ...prev,
+        carouselSlides: prev.carouselSlides.map((slide) =>
+          slide.id === slideId ? { ...slide, [field]: value } : slide,
+        ),
+      }));
+    },
+    [],
+  );
+
+  /**
+   * Build settings JSON for saving
+   */
+  const buildSettingsJson = useCallback((): Record<string, unknown> => {
+    const borderWidthValue = toUnitValue(state.border, 'px');
+    const settings: Record<string, unknown> = {
+      label: state.label.trim(),
+      xPercent: clampPercent(state.xPercent),
+      yPercent: clampPercent(state.yPercent),
+      border: borderWidthValue
+        ? `${borderWidthValue} solid currentColor`
+        : 'none',
+      borderRadius: toUnitValue(state.borderRadius, 'px') || '0px',
+      appearDelaySec:
+        Number(state.appearDelaySec) >= 0 ? Number(state.appearDelaySec) : 0,
+      appearDurationSec: parseNullableNumber(state.appearDurationSec),
+    };
+
+    // Dimensional CSS properties
+    const widthValue = toUnitValue(state.width, 'vw');
+    const heightValue = toUnitValue(state.height, 'vh');
+    const minWidthValue = toUnitValue(state.minWidth, 'vw');
+    const maxWidthValue = toUnitValue(state.maxWidth, 'vw');
+    const minHeightValue = toUnitValue(state.minHeight, 'vh');
+    const maxHeightValue = toUnitValue(state.maxHeight, 'vh');
+
+    if (widthValue) settings.width = widthValue;
+    if (heightValue) settings.height = heightValue;
+    if (minWidthValue) settings.minWidth = minWidthValue;
+    if (maxWidthValue) settings.maxWidth = maxWidthValue;
+    if (minHeightValue) settings.minHeight = minHeightValue;
+    if (maxHeightValue) settings.maxHeight = maxHeightValue;
+
+    // Other CSS properties
+    const marginValue = toOptionalTrimmed(state.margin);
+    const paddingValue = toOptionalTrimmed(state.padding);
+    const gapValue = toOptionalTrimmed(state.gap);
+    const fontSizeValue = toOptionalTrimmed(state.fontSize);
+    const lineHeightValue = toOptionalTrimmed(state.lineHeight);
+    const fontWeightValue = toOptionalTrimmed(state.fontWeight);
+    const opacityValue = toOptionalTrimmed(state.opacity);
+    const boxShadowValue = toOptionalTrimmed(state.boxShadow);
+    const displayValue = toOptionalTrimmed(state.display);
+    const positionValue = toOptionalTrimmed(state.position);
+    const justifyContentValue = toOptionalTrimmed(state.justifyContent);
+    const alignItemsValue = toOptionalTrimmed(state.alignItems);
+    const textAlignValue = toOptionalTrimmed(state.textAlign);
+    const zIndexValue = toOptionalTrimmed(state.zIndex);
+
+    if (marginValue) settings.margin = marginValue;
+    if (paddingValue) settings.padding = paddingValue;
+    if (gapValue) settings.gap = gapValue;
+    if (fontSizeValue) settings.fontSize = fontSizeValue;
+    if (lineHeightValue) settings.lineHeight = lineHeightValue;
+    if (fontWeightValue) settings.fontWeight = fontWeightValue;
+    if (opacityValue) settings.opacity = opacityValue;
+    if (boxShadowValue) settings.boxShadow = boxShadowValue;
+    if (displayValue) settings.display = displayValue;
+    if (positionValue) settings.position = positionValue;
+    if (justifyContentValue) settings.justifyContent = justifyContentValue;
+    if (alignItemsValue) settings.alignItems = alignItemsValue;
+    if (textAlignValue) settings.textAlign = textAlignValue;
+    if (zIndexValue) settings.zIndex = zIndexValue;
+
+    // Navigation type settings
+    if (isNavigationType) {
+      settings.iconUrl = state.iconUrl.trim();
+      settings.navLabel = state.navLabel.trim();
+      settings.navType = state.navType;
+      settings.navDisabled = state.navDisabled;
+      settings.targetPageId = state.targetPageId.trim();
+      settings.targetPageSlug = state.targetPageSlug.trim();
+      settings.transitionVideoUrl = state.transitionVideoUrl.trim();
+      settings.transitionReverseMode = state.transitionReverseMode;
+      settings.reverseVideoUrl = state.reverseVideoUrl.trim();
+      settings.transitionDurationSec =
+        Number(state.transitionDurationSec) > 0
+          ? Number(state.transitionDurationSec)
+          : 0.7;
+    }
+
+    // Tooltip type settings
+    if (isTooltipType) {
+      settings.iconUrl = state.iconUrl.trim();
+      settings.tooltipTitle = state.tooltipTitle.trim();
+      settings.tooltipText = state.tooltipText;
+    }
+
+    // Description type settings
+    if (isDescriptionType) {
+      settings.iconUrl = state.iconUrl.trim();
+      settings.descriptionTitle = state.descriptionTitle.trim();
+      settings.descriptionText = state.descriptionText;
+      settings.descriptionTitleFontSize =
+        state.descriptionTitleFontSize.trim() || '48px';
+      settings.descriptionTextFontSize =
+        state.descriptionTextFontSize.trim() || '36px';
+      settings.descriptionTitleFontFamily =
+        state.descriptionTitleFontFamily.trim() || 'inherit';
+      settings.descriptionTextFontFamily =
+        state.descriptionTextFontFamily.trim() || 'inherit';
+      settings.descriptionTitleColor =
+        state.descriptionTitleColor.trim() || '#000000';
+      settings.descriptionTextColor =
+        state.descriptionTextColor.trim() || '#4B5563';
+      settings.descriptionBackgroundColor =
+        state.descriptionBackgroundColor.trim() || 'transparent';
+    }
+
+    // Gallery type settings
+    if (isGalleryType) {
+      settings.galleryCards = state.galleryCards.map((card, index) => ({
+        id: String(card.id || createLocalId()),
+        imageUrl: card.imageUrl.trim(),
+        title: card.title.trim() || `Card ${index + 1}`,
+        description: card.description,
+      }));
+    }
+
+    // Carousel type settings
+    if (isCarouselType) {
+      settings.carouselSlides = state.carouselSlides.map((slide, index) => ({
+        id: String(slide.id || createLocalId()),
+        imageUrl: slide.imageUrl.trim(),
+        caption: slide.caption.trim() || `Slide ${index + 1}`,
+      }));
+      settings.carouselPrevIconUrl = state.carouselPrevIconUrl.trim();
+      settings.carouselNextIconUrl = state.carouselNextIconUrl.trim();
+    }
+
+    // Media type settings
+    if (isMediaType) {
+      settings.mediaUrl = state.mediaUrl.trim();
+      settings.mediaAutoplay = state.mediaAutoplay;
+      settings.mediaLoop = state.mediaLoop;
+      settings.mediaMuted = state.mediaMuted;
+    }
+
+    return settings;
+  }, [
+    state,
+    isNavigationType,
+    isTooltipType,
+    isDescriptionType,
+    isGalleryType,
+    isCarouselType,
+    isMediaType,
+  ]);
+
+  return {
+    state,
+    setField,
+    setFields,
+    applySettings,
+    getStyleValues,
+
+    // Type checks
+    isNavigationType,
+    isTooltipType,
+    isDescriptionType,
+    isGalleryType,
+    isCarouselType,
+    isMediaType,
+
+    // Gallery operations
+    addGalleryCard,
+    removeGalleryCard,
+    updateGalleryCard,
+
+    // Carousel operations
+    addCarouselSlide,
+    removeCarouselSlide,
+    updateCarouselSlide,
+
+    // Build JSON
+    buildSettingsJson,
+  };
+}
+
+export type { FormState };
diff --git a/frontend/src/components/RuntimePresentation.tsx b/frontend/src/components/RuntimePresentation.tsx
index ebebe26..06acfae 100644
--- a/frontend/src/components/RuntimePresentation.tsx
+++ b/frontend/src/components/RuntimePresentation.tsx
@@ -205,7 +205,12 @@ export default function RuntimePresentation({
 
       return () => clearTimeout(fadeTimer);
     }
-  }, [pendingTransitionComplete, isBackgroundReady, isOverlayFadingOut, pageSwitch.clearPreviousBackground]);
+  }, [
+    pendingTransitionComplete,
+    isBackgroundReady,
+    isOverlayFadingOut,
+    pageSwitch.clearPreviousBackground,
+  ]);
 
   // Clear previous background overlay when new background is ready (direct navigation)
   useEffect(() => {
@@ -390,7 +395,10 @@ export default function RuntimePresentation({
     (element: any) => {
       // Disable navigation while transition is actively playing or buffering
       // Only block during active phases, not during fade-out (completed phase)
-      const isActivelyPlaying = transitionPhase === 'preparing' || transitionPhase === 'playing' || transitionPhase === 'reversing';
+      const isActivelyPlaying =
+        transitionPhase === 'preparing' ||
+        transitionPhase === 'playing' ||
+        transitionPhase === 'reversing';
       if (isActivelyPlaying || isBuffering) {
         return;
       }
@@ -443,8 +451,8 @@ export default function RuntimePresentation({
           height: element.height || 'auto',
           objectFit: 'contain',
         };
-        // eslint-disable-next-line @next/next/no-img-element
         return (
+          // eslint-disable-next-line @next/next/no-img-element
           <img
             src={resolveAssetPlaybackUrl(element.iconUrl)}
             alt='Navigation'
@@ -708,9 +716,9 @@ export default function RuntimePresentation({
                 backgroundImage: `url("${pageSwitch.previousBgImageUrl}")`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
-            }}
-          />
-        )}
+              }}
+            />
+          )}
 
         {/* Background video */}
         {backgroundVideoUrl && (
diff --git a/frontend/src/hooks/usePageNavigation.ts b/frontend/src/hooks/usePageNavigation.ts
index 78ca379..73c435a 100644
--- a/frontend/src/hooks/usePageNavigation.ts
+++ b/frontend/src/hooks/usePageNavigation.ts
@@ -50,12 +50,7 @@ export interface UsePageNavigationResult<TPage extends NavigablePage> {
 export function usePageNavigation<TPage extends NavigablePage>(
   options: UsePageNavigationOptions<TPage>,
 ): UsePageNavigationResult<TPage> {
-  const {
-    pages,
-    defaultPageId,
-    trackHistory = true,
-    onPageChange,
-  } = options;
+  const { pages, defaultPageId, trackHistory = true, onPageChange } = options;
 
   const [currentPageId, setCurrentPageIdState] = useState<string | null>(null);
   const [pageHistory, setPageHistory] = useState<string[]>([]);
diff --git a/frontend/src/hooks/usePageSwitch.ts b/frontend/src/hooks/usePageSwitch.ts
index f1e701e..359aec2 100644
--- a/frontend/src/hooks/usePageSwitch.ts
+++ b/frontend/src/hooks/usePageSwitch.ts
@@ -246,10 +246,7 @@ export function usePageSwitch(
       }
 
       // 2. Fallback: try cached blob URL (creates new blob, needs decode)
-      if (
-        cache?.getCachedBlobUrl &&
-        cache?.preloadedUrls?.has(originalUrl)
-      ) {
+      if (cache?.getCachedBlobUrl && cache?.preloadedUrls?.has(originalUrl)) {
         try {
           const blobUrl = await cache.getCachedBlobUrl(originalUrl);
           if (blobUrl) {
@@ -294,10 +291,7 @@ export function usePageSwitch(
       }
 
       // 2. Fallback: try cached blob URL
-      if (
-        cache?.getCachedBlobUrl &&
-        cache?.preloadedUrls?.has(originalUrl)
-      ) {
+      if (cache?.getCachedBlobUrl && cache?.preloadedUrls?.has(originalUrl)) {
         try {
           const blobUrl = await cache.getCachedBlobUrl(originalUrl);
           if (blobUrl) {
diff --git a/frontend/src/hooks/usePreloadOrchestrator.ts b/frontend/src/hooks/usePreloadOrchestrator.ts
index 098857b..9f99d6a 100644
--- a/frontend/src/hooks/usePreloadOrchestrator.ts
+++ b/frontend/src/hooks/usePreloadOrchestrator.ts
@@ -421,7 +421,12 @@ export function usePreloadOrchestrator(
       setIsPreloading(false);
       isProcessingRef.current = false;
     }
-  }, [networkInfo.isOnline, preloadedUrls, recommendedConcurrency, createReadyBlobUrl]);
+  }, [
+    networkInfo.isOnline,
+    preloadedUrls,
+    recommendedConcurrency,
+    createReadyBlobUrl,
+  ]);
 
   // Add item to queue with priority sorting
   const addToQueue = useCallback(
diff --git a/frontend/src/hooks/useTransitionPlayback.ts b/frontend/src/hooks/useTransitionPlayback.ts
index c8ec23d..cb824c1 100644
--- a/frontend/src/hooks/useTransitionPlayback.ts
+++ b/frontend/src/hooks/useTransitionPlayback.ts
@@ -351,7 +351,10 @@ export function useTransitionPlayback(
     // Include reverseMode in the key so same video can play forward then reverse
     const sourceKey = `${sourceUrl}|${currentTransition.reverseMode}`;
     if (activeSourceUrlRef.current === sourceKey) {
-      logger.info('Skipping duplicate effect for same source', { sourceUrl, reverseMode: currentTransition.reverseMode });
+      logger.info('Skipping duplicate effect for same source', {
+        sourceUrl,
+        reverseMode: currentTransition.reverseMode,
+      });
       return;
     }
 
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 45f6b47..629e61d 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -49,8 +49,11 @@ export default function LayoutAuthenticated({
     (state) => state.auth,
   );
   const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
+  const darkMode = useAppSelector((state) => state.style.darkMode);
   const meRequestedRef = useRef<string | null>(null);
   const [isAuthChecked, setIsAuthChecked] = useState(false);
+  const [isAsideMobileExpanded, setIsAsideMobileExpanded] = useState(false);
+  const [isAsideLgActive, setIsAsideLgActive] = useState(false);
 
   const getStoredToken = () => {
     if (typeof window === 'undefined') return null;
@@ -143,17 +146,8 @@ export default function LayoutAuthenticated({
     if (!hasPermission(currentUser, permission)) router.push('/error');
   }, [currentUser, permission]);
 
-  const darkMode = useAppSelector((state) => state.style.darkMode);
   const isConstructorFullscreen = router.pathname === '/constructor';
 
-  // Minimal mode: just auth check, no UI chrome (for presentations)
-  if (minimal) {
-    return <>{children}</>;
-  }
-
-  const [isAsideMobileExpanded, setIsAsideMobileExpanded] = useState(false);
-  const [isAsideLgActive, setIsAsideLgActive] = useState(false);
-
   useEffect(() => {
     const handleRouteChangeStart = () => {
       setIsAsideMobileExpanded(false);
@@ -174,6 +168,11 @@ export default function LayoutAuthenticated({
   const mobileAsideShift =
     !isConstructorFullscreen && isAsideMobileExpanded ? 'ml-60 lg:ml-0' : '';
 
+  // Minimal mode: just auth check, no UI chrome (for presentations)
+  if (minimal) {
+    return <>{children}</>;
+  }
+
   // Show loading while auth is being checked
   if (!isAuthChecked) {
     return (
diff --git a/frontend/src/pages/constructor.tsx b/frontend/src/pages/constructor.tsx
index 22bf412..6d97793 100644
--- a/frontend/src/pages/constructor.tsx
+++ b/frontend/src/pages/constructor.tsx
@@ -10,6 +10,11 @@ import {
   mdiTooltipText,
   mdiViewCarousel,
 } from '@mdi/js';
+import {
+  ElementSettingsTabsCompact,
+  StyleSettingsSectionCompact,
+  extractNumericValue,
+} from '../components/ElementSettings';
 import axios from 'axios';
 import Head from 'next/head';
 import NextImage from 'next/image';
@@ -511,7 +516,8 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     return String(value || '');
   }, [router.query.projectId]);
   const pageElementsListHref = useMemo(() => {
-    if (!projectId) return '/project-element-defaults/project-element-defaults-list';
+    if (!projectId)
+      return '/project-element-defaults/project-element-defaults-list';
     return `/project-element-defaults/project-element-defaults-list?projectId=${encodeURIComponent(projectId)}`;
   }, [projectId]);
 
@@ -576,6 +582,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [editorPosition, setEditorPosition] = useState({ x: 0, y: 72 });
   const [isEditorCollapsed, setIsEditorCollapsed] = useState(false);
+  const [elementEditorTab, setElementEditorTab] = useState<'general' | 'css'>(
+    'general',
+  );
 
   const constructorControlsDragRef = useRef<{
     pointerOffsetX: number;
@@ -1112,8 +1121,10 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
         setPages(pageRows);
 
         // Extract page links and preload elements using shared utility
-        const { pageLinks: syntheticPageLinks, preloadElements: allPreloadElements } =
-          extractPageLinksAndElements(pageRows);
+        const {
+          pageLinks: syntheticPageLinks,
+          preloadElements: allPreloadElements,
+        } = extractPageLinksAndElements(pageRows);
 
         setPageLinks(syntheticPageLinks);
         setAllPagesPreloadElements(allPreloadElements);
@@ -1394,7 +1405,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                     : undefined,
               // Support both targetPageSlug (new) and targetPageId (legacy)
               targetPageSlug:
-                typeof item.targetPageSlug === 'string' ? item.targetPageSlug : '',
+                typeof item.targetPageSlug === 'string'
+                  ? item.targetPageSlug
+                  : '',
               targetPageId:
                 typeof item.targetPageId === 'string' ? item.targetPageId : '',
               transitionVideoUrl:
@@ -1462,7 +1475,12 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
         background_audio_url: activePage.background_audio_url,
       });
     }
-  }, [activePage, elementIdFromRoute, uiElementDefaultsByType, pageSwitch.switchToPage]);
+  }, [
+    activePage,
+    elementIdFromRoute,
+    uiElementDefaultsByType,
+    pageSwitch.switchToPage,
+  ]);
 
   useEffect(() => {
     if (allowedNavigationTypes.length !== 1) return;
@@ -1727,7 +1745,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
       };
 
       // Transitions are now stored directly in navigation elements as transitionVideoUrl
-      setSuccessMessage('Transition video can be set directly on navigation elements.');
+      setSuccessMessage(
+        'Transition video can be set directly on navigation elements.',
+      );
       setNewTransitionName('');
     } catch (error: any) {
       const message =
@@ -2131,8 +2151,8 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
           height: element.height || 'auto',
           objectFit: 'contain',
         };
-        // eslint-disable-next-line @next/next/no-img-element
         return (
+          // eslint-disable-next-line @next/next/no-img-element
           <img
             src={resolveAssetPlaybackUrl(element.iconUrl)}
             alt='Navigation icon'
@@ -2902,809 +2922,983 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                 )}
 
                 {selectedElement && (
-                  <div className='mb-2 space-y-2'>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Label
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={selectedElement.label}
-                        onChange={(event) =>
-                          updateSelectedElement({ label: event.target.value })
-                        }
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Appear delay (sec)
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        type='number'
-                        min='0'
-                        step='0.1'
-                        value={selectedElement.appearDelaySec ?? 0}
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            appearDelaySec: normalizeAppearDelaySec(
-                              event.target.value,
-                            ),
-                          })
-                        }
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Appear duration (sec)
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        type='number'
-                        min='0.1'
-                        step='0.1'
-                        placeholder='Unlimited'
-                        value={selectedElement.appearDurationSec ?? ''}
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            appearDurationSec: normalizeAppearDurationSec(
-                              event.target.value,
-                            ),
-                          })
-                        }
-                      />
-                      <p className='mt-1 text-[11px] text-gray-500'>
-                        Leave empty for unlimited.
-                      </p>
-                    </div>
-                  </div>
-                )}
+                  <>
+                    <ElementSettingsTabsCompact
+                      activeTab={elementEditorTab}
+                      onTabChange={(tab) =>
+                        setElementEditorTab(tab as 'general' | 'css')
+                      }
+                      tabs={[
+                        { id: 'general', label: 'General' },
+                        { id: 'css', label: 'CSS Styles' },
+                      ]}
+                    />
 
-                {selectedElement &&
-                  (selectedElement.type === 'navigation_next' ||
-                    selectedElement.type === 'navigation_prev') && (
-                    <div className='space-y-2'>
-                      <div>
-                        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                          Type
-                        </label>
-                        <select
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          value={
-                            selectedElement.navType === 'back' ||
-                            selectedElement.navType === 'forward'
-                              ? selectedElement.navType
-                              : getNavigationButtonKind(selectedElement.type)
-                          }
-                          onChange={(event) => {
-                            const requestedKind: NavigationButtonKind =
-                              event.target.value === 'back'
-                                ? 'back'
-                                : 'forward';
-                            const requestedType =
-                              getNavigationTypeFromKind(requestedKind);
-                            const nextType = allowedNavigationTypes.includes(
-                              requestedType,
-                            )
-                              ? requestedType
-                              : allowedNavigationTypes[0];
-                            updateSelectedElement(
-                              normalizeNavigationElementType(
-                                selectedElement,
-                                nextType,
-                              ),
-                            );
-                          }}
-                        >
-                          <option
-                            value='forward'
-                            disabled={
-                              !allowedNavigationTypes.includes(
-                                'navigation_next',
-                              )
-                            }
-                          >
-                            Forward
-                          </option>
-                          <option
-                            value='back'
-                            disabled={
-                              !allowedNavigationTypes.includes(
-                                'navigation_prev',
-                              )
-                            }
-                          >
-                            Back
-                          </option>
-                        </select>
-                      </div>
-                      <div>
-                        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                          Button text
-                        </label>
-                        <input
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          value={selectedElement.navLabel || ''}
-                          onChange={(event) =>
-                            updateSelectedElement({
-                              navLabel: event.target.value,
-                            })
-                          }
-                        />
-                      </div>
-                      <div>
-                        <label className='flex items-center gap-2 text-[11px] font-semibold text-gray-600'>
-                          <input
-                            type='checkbox'
-                            checked={selectedElement.navDisabled || false}
-                            onChange={(event) =>
-                              updateSelectedElement({
-                                navDisabled: event.target.checked,
-                              })
-                            }
-                          />
-                          Disabled
-                        </label>
-                      </div>
-                      <div>
-                        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                          Icon
-                        </label>
-                        <select
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          value={selectedElement.iconUrl || ''}
-                          onChange={(event) =>
-                            updateSelectedElement({
-                              iconUrl: event.target.value,
-                            })
-                          }
-                        >
-                          <option value=''>Not selected</option>
-                          {addFallbackAssetOption(
-                            iconAssetOptions,
-                            selectedElement.iconUrl,
-                            `Current icon · ${selectedElement.iconUrl || ''}`,
-                          ).map((option) => (
-                            <option key={option.value} value={option.value}>
-                              {option.label}
-                            </option>
-                          ))}
-                        </select>
-                        <p className='mt-1 text-[11px] text-gray-500'>
-                          {selectedMediaDurationNote}
-                        </p>
-                      </div>
-                      <div>
-                        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                          Target page
-                        </label>
-                        <select
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          value={selectedElement.targetPageSlug || ''}
-                          onChange={(event) =>
-                            updateSelectedElement({
-                              targetPageSlug: event.target.value,
-                              // Clear legacy targetPageId when using slug
-                              targetPageId: '',
-                            })
-                          }
-                        >
-                          <option value=''>Not selected</option>
-                          {pages
-                            .filter((page) => page.id !== activePageId)
-                            .map((page, index) => (
-                              <option key={page.id} value={page.slug}>
-                                {page.name || `Page ${index + 1}`}
-                              </option>
-                            ))}
-                        </select>
-                      </div>
-                      <div>
-                        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                          Transition video asset
-                        </label>
-                        <select
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          value={selectedElement.transitionVideoUrl || ''}
-                          onChange={(event) => {
-                            const nextVideoUrl = event.target.value;
-                            const resolvedDuration =
-                              getKnownDurationForSource(nextVideoUrl);
-                            updateSelectedElement({
-                              transitionVideoUrl: nextVideoUrl,
-                              transitionDurationSec:
-                                resolvedDuration || undefined,
-                            });
-                          }}
-                        >
-                          <option value=''>Not selected</option>
-                          {addFallbackAssetOption(
-                            transitionVideoAssetOptions,
-                            selectedElement.transitionVideoUrl,
-                            `Current video · ${selectedElement.transitionVideoUrl || ''}`,
-                          ).map((option) => (
-                            <option key={option.value} value={option.value}>
-                              {option.label}
-                            </option>
-                          ))}
-                        </select>
-                        <p className='mt-1 text-[11px] text-gray-500'>
-                          {selectedTransitionDurationNote}
-                        </p>
-                      </div>
-                      <div>
-                        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                          Back transition mode
-                        </label>
-                        <select
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          value={
-                            selectedElement.transitionReverseMode ||
-                            'auto_reverse'
-                          }
-                          onChange={(event) =>
-                            updateSelectedElement({
-                              transitionReverseMode:
-                                event.target.value === 'separate_video'
-                                  ? 'separate_video'
-                                  : 'auto_reverse',
-                            })
-                          }
-                        >
-                          <option value='auto_reverse'>
-                            Auto reverse transition video
-                          </option>
-                          <option value='separate_video'>
-                            Use separate back-transition video
-                          </option>
-                        </select>
-                      </div>
-                      {selectedElement.transitionReverseMode ===
-                        'separate_video' && (
-                        <div>
-                          <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                            Back transition video asset
-                          </label>
-                          <select
-                            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                            value={selectedElement.reverseVideoUrl || ''}
-                            onChange={(event) =>
-                              updateSelectedElement({
-                                reverseVideoUrl: event.target.value,
-                              })
-                            }
-                          >
-                            <option value=''>Not selected</option>
-                            {addFallbackAssetOption(
-                              transitionVideoAssetOptions,
-                              selectedElement.reverseVideoUrl,
-                              `Current back video · ${selectedElement.reverseVideoUrl || ''}`,
-                            ).map((option) => (
-                              <option key={option.value} value={option.value}>
-                                {option.label}
-                              </option>
-                            ))}
-                          </select>
-                        </div>
-                      )}
-                      <p className='text-[11px] text-gray-500'>
-                        Transition duration is set automatically from the
-                        selected video. {selectedTransitionDurationNote}
-                      </p>
-                      <div className='flex gap-2 pt-1'>
-                        <BaseButton
-                          small
-                          color='lightDark'
-                          label='Preview Forward'
-                          onClick={() => openTransitionPreview('forward')}
-                        />
-                        <BaseButton
-                          small
-                          color='lightDark'
-                          label='Preview Back'
-                          onClick={() => openTransitionPreview('back')}
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                {selectedElement && selectedElement.type === 'tooltip' && (
-                  <div className='space-y-2'>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Icon
-                      </label>
-                      <select
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={selectedElement.iconUrl || ''}
-                        onChange={(event) =>
-                          updateSelectedElement({ iconUrl: event.target.value })
-                        }
-                      >
-                        <option value=''>Not selected</option>
-                        {addFallbackAssetOption(
-                          iconAssetOptions,
-                          selectedElement.iconUrl,
-                          `Current icon · ${selectedElement.iconUrl || ''}`,
-                        ).map((option) => (
-                          <option key={option.value} value={option.value}>
-                            {option.label}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Tooltip title
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={selectedElement.tooltipTitle || ''}
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            tooltipTitle: event.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Tooltip text
-                      </label>
-                      <textarea
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        rows={4}
-                        value={selectedElement.tooltipText || ''}
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            tooltipText: event.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {selectedElement && selectedElement.type === 'description' && (
-                  <div className='space-y-2'>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Icon
-                      </label>
-                      <select
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={selectedElement.iconUrl || ''}
-                        onChange={(event) =>
-                          updateSelectedElement({ iconUrl: event.target.value })
-                        }
-                      >
-                        <option value=''>Not selected</option>
-                        {addFallbackAssetOption(
-                          iconAssetOptions,
-                          selectedElement.iconUrl,
-                          `Current icon · ${selectedElement.iconUrl || ''}`,
-                        ).map((option) => (
-                          <option key={option.value} value={option.value}>
-                            {option.label}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Description title
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={selectedElement.descriptionTitle || ''}
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            descriptionTitle: event.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Description text
-                      </label>
-                      <textarea
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        rows={5}
-                        value={selectedElement.descriptionText || ''}
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            descriptionText: event.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Title font size
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={
-                          selectedElement.descriptionTitleFontSize || '48px'
-                        }
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            descriptionTitleFontSize: event.target.value,
-                          })
-                        }
-                        placeholder='e.g. 48px'
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Text font size
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={
-                          selectedElement.descriptionTextFontSize || '36px'
-                        }
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            descriptionTextFontSize: event.target.value,
-                          })
-                        }
-                        placeholder='e.g. 36px'
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Title font family
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={
-                          selectedElement.descriptionTitleFontFamily ||
-                          'inherit'
-                        }
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            descriptionTitleFontFamily: event.target.value,
-                          })
-                        }
-                        placeholder='e.g. Arial, Helvetica, sans-serif'
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Text font family
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={
-                          selectedElement.descriptionTextFontFamily || 'inherit'
-                        }
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            descriptionTextFontFamily: event.target.value,
-                          })
-                        }
-                        placeholder='e.g. Arial, Helvetica, sans-serif'
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Title color
-                      </label>
-                      <input
-                        type='color'
-                        className='w-full h-8 rounded border border-gray-300 px-1 py-1'
-                        value={
-                          selectedElement.descriptionTitleColor || '#000000'
-                        }
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            descriptionTitleColor: event.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Text color
-                      </label>
-                      <input
-                        type='color'
-                        className='w-full h-8 rounded border border-gray-300 px-1 py-1'
-                        value={
-                          selectedElement.descriptionTextColor || '#4B5563'
-                        }
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            descriptionTextColor: event.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div>
-                      <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                        Background color
-                      </label>
-                      <input
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={
-                          selectedElement.descriptionBackgroundColor ||
-                          'transparent'
-                        }
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            descriptionBackgroundColor: event.target.value,
-                          })
-                        }
-                        placeholder='e.g. transparent, #ffffff, rgba(0,0,0,0.5)'
-                      />
-                    </div>
-                  </div>
-                )}
-
-                {selectedElement &&
-                  (selectedElement.type === 'video_player' ||
-                    selectedElement.type === 'audio_player') && (
-                    <div className='space-y-2'>
-                      <div>
-                        <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
-                          {selectedElement.type === 'video_player'
-                            ? 'Video asset'
-                            : 'Audio asset'}
-                        </label>
-                        <select
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          value={selectedElement.mediaUrl || ''}
-                          onChange={(event) =>
-                            updateSelectedElement({
-                              mediaUrl: event.target.value,
-                            })
-                          }
-                        >
-                          <option value=''>Not selected</option>
-                          {addFallbackAssetOption(
-                            selectedElement.type === 'video_player'
-                              ? videoAssetOptions
-                              : audioAssetOptions,
-                            selectedElement.mediaUrl,
-                            `Current media · ${selectedElement.mediaUrl || ''}`,
-                          ).map((option) => (
-                            <option key={option.value} value={option.value}>
-                              {option.label}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                      <label className='flex items-center gap-2 text-[11px] text-gray-700'>
-                        <input
-                          type='checkbox'
-                          checked={Boolean(selectedElement.mediaAutoplay)}
-                          onChange={(event) =>
-                            updateSelectedElement({
-                              mediaAutoplay: event.target.checked,
-                            })
-                          }
-                        />
-                        Autoplay
-                      </label>
-                      <label className='flex items-center gap-2 text-[11px] text-gray-700'>
-                        <input
-                          type='checkbox'
-                          checked={Boolean(selectedElement.mediaLoop)}
-                          onChange={(event) =>
-                            updateSelectedElement({
-                              mediaLoop: event.target.checked,
-                            })
-                          }
-                        />
-                        Loop
-                      </label>
-                      {selectedElement.type === 'video_player' && (
-                        <label className='flex items-center gap-2 text-[11px] text-gray-700'>
-                          <input
-                            type='checkbox'
-                            checked={Boolean(selectedElement.mediaMuted)}
-                            onChange={(event) =>
-                              updateSelectedElement({
-                                mediaMuted: event.target.checked,
-                              })
-                            }
-                          />
-                          Muted
-                        </label>
-                      )}
-                    </div>
-                  )}
-
-                {selectedElement && selectedElement.type === 'gallery' && (
-                  <div className='space-y-2'>
-                    <div className='flex items-center justify-between'>
-                      <p className='text-[11px] font-semibold text-gray-600'>
-                        Gallery cards
-                      </p>
-                      <button
-                        type='button'
-                        className='text-xs text-blue-700 hover:underline'
-                        onClick={addGalleryCard}
-                      >
-                        + Add card
-                      </button>
-                    </div>
-                    {(selectedElement.galleryCards || []).map((card, index) => (
-                      <div
-                        key={card.id}
-                        className='rounded border border-gray-200 p-2 space-y-2'
-                      >
-                        <div className='flex items-center justify-between'>
-                          <p className='text-[11px] font-semibold text-gray-700'>
-                            Card {index + 1}
-                          </p>
-                          <button
-                            type='button'
-                            className='text-xs text-red-600 hover:underline'
-                            onClick={() => removeGalleryCard(card.id)}
-                          >
-                            Remove
-                          </button>
-                        </div>
-                        <select
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          value={card.imageUrl}
-                          onChange={(event) =>
-                            updateGalleryCard(card.id, {
-                              imageUrl: event.target.value,
-                            })
-                          }
-                        >
-                          <option value=''>Image asset</option>
-                          {addFallbackAssetOption(
-                            imageAssetOptions,
-                            card.imageUrl,
-                            `Current image · ${card.imageUrl}`,
-                          ).map((option) => (
-                            <option key={option.value} value={option.value}>
-                              {option.label}
-                            </option>
-                          ))}
-                        </select>
-                        <input
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          placeholder='Title'
-                          value={card.title}
-                          onChange={(event) =>
-                            updateGalleryCard(card.id, {
-                              title: event.target.value,
-                            })
-                          }
-                        />
-                        <textarea
-                          className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                          placeholder='Description'
-                          rows={3}
-                          value={card.description}
-                          onChange={(event) =>
-                            updateGalleryCard(card.id, {
-                              description: event.target.value,
-                            })
-                          }
-                        />
-                      </div>
-                    ))}
-                  </div>
-                )}
-
-                {selectedElement && selectedElement.type === 'carousel' && (
-                  <div className='space-y-2'>
-                    <div className='rounded border border-gray-200 p-2 space-y-2'>
-                      <p className='text-[11px] font-semibold text-gray-700'>
-                        Navigation icons
-                      </p>
-                      <select
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={selectedElement.carouselPrevIconUrl || ''}
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            carouselPrevIconUrl: event.target.value,
-                          })
-                        }
-                      >
-                        <option value=''>Previous icon</option>
-                        {addFallbackAssetOption(
-                          iconAssetOptions,
-                          selectedElement.carouselPrevIconUrl,
-                          `Current prev icon · ${selectedElement.carouselPrevIconUrl || ''}`,
-                        ).map((option) => (
-                          <option key={option.value} value={option.value}>
-                            {option.label}
-                          </option>
-                        ))}
-                      </select>
-                      <select
-                        className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                        value={selectedElement.carouselNextIconUrl || ''}
-                        onChange={(event) =>
-                          updateSelectedElement({
-                            carouselNextIconUrl: event.target.value,
-                          })
-                        }
-                      >
-                        <option value=''>Next icon</option>
-                        {addFallbackAssetOption(
-                          iconAssetOptions,
-                          selectedElement.carouselNextIconUrl,
-                          `Current next icon · ${selectedElement.carouselNextIconUrl || ''}`,
-                        ).map((option) => (
-                          <option key={option.value} value={option.value}>
-                            {option.label}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                    <div className='flex items-center justify-between'>
-                      <p className='text-[11px] font-semibold text-gray-600'>
-                        Carousel slides
-                      </p>
-                      <button
-                        type='button'
-                        className='text-xs text-blue-700 hover:underline'
-                        onClick={addCarouselSlide}
-                      >
-                        + Add slide
-                      </button>
-                    </div>
-                    {(selectedElement.carouselSlides || []).map(
-                      (slide, index) => (
-                        <div
-                          key={slide.id}
-                          className='rounded border border-gray-200 p-2 space-y-2'
-                        >
-                          <div className='flex items-center justify-between'>
-                            <p className='text-[11px] font-semibold text-gray-700'>
-                              Slide {index + 1}
-                            </p>
-                            <button
-                              type='button'
-                              className='text-xs text-red-600 hover:underline'
-                              onClick={() => removeCarouselSlide(slide.id)}
-                            >
-                              Remove
-                            </button>
+                    {elementEditorTab === 'general' && (
+                      <>
+                        <div className='mb-2 space-y-2'>
+                          <div>
+                            <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                              Label
+                            </label>
+                            <input
+                              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                              value={selectedElement.label}
+                              onChange={(event) =>
+                                updateSelectedElement({
+                                  label: event.target.value,
+                                })
+                              }
+                            />
+                          </div>
+                          <div>
+                            <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                              Appear delay (sec)
+                            </label>
+                            <input
+                              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                              type='number'
+                              min='0'
+                              step='0.1'
+                              value={selectedElement.appearDelaySec ?? 0}
+                              onChange={(event) =>
+                                updateSelectedElement({
+                                  appearDelaySec: normalizeAppearDelaySec(
+                                    event.target.value,
+                                  ),
+                                })
+                              }
+                            />
+                          </div>
+                          <div>
+                            <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                              Appear duration (sec)
+                            </label>
+                            <input
+                              className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                              type='number'
+                              min='0.1'
+                              step='0.1'
+                              placeholder='Unlimited'
+                              value={selectedElement.appearDurationSec ?? ''}
+                              onChange={(event) =>
+                                updateSelectedElement({
+                                  appearDurationSec: normalizeAppearDurationSec(
+                                    event.target.value,
+                                  ),
+                                })
+                              }
+                            />
+                            <p className='mt-1 text-[11px] text-gray-500'>
+                              Leave empty for unlimited.
+                            </p>
                           </div>
-                          <select
-                            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                            value={slide.imageUrl}
-                            onChange={(event) =>
-                              updateCarouselSlide(slide.id, {
-                                imageUrl: event.target.value,
-                              })
-                            }
-                          >
-                            <option value=''>Image asset</option>
-                            {addFallbackAssetOption(
-                              imageAssetOptions,
-                              slide.imageUrl,
-                              `Current image · ${slide.imageUrl}`,
-                            ).map((option) => (
-                              <option key={option.value} value={option.value}>
-                                {option.label}
-                              </option>
-                            ))}
-                          </select>
-                          <input
-                            className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
-                            placeholder='Caption'
-                            value={slide.caption}
-                            onChange={(event) =>
-                              updateCarouselSlide(slide.id, {
-                                caption: event.target.value,
-                              })
-                            }
-                          />
                         </div>
-                      ),
+
+                        {(selectedElement.type === 'navigation_next' ||
+                          selectedElement.type === 'navigation_prev') && (
+                          <div className='space-y-2'>
+                            <div>
+                              <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                Type
+                              </label>
+                              <select
+                                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                value={
+                                  selectedElement.navType === 'back' ||
+                                  selectedElement.navType === 'forward'
+                                    ? selectedElement.navType
+                                    : getNavigationButtonKind(
+                                        selectedElement.type,
+                                      )
+                                }
+                                onChange={(event) => {
+                                  const requestedKind: NavigationButtonKind =
+                                    event.target.value === 'back'
+                                      ? 'back'
+                                      : 'forward';
+                                  const requestedType =
+                                    getNavigationTypeFromKind(requestedKind);
+                                  const nextType =
+                                    allowedNavigationTypes.includes(
+                                      requestedType,
+                                    )
+                                      ? requestedType
+                                      : allowedNavigationTypes[0];
+                                  updateSelectedElement(
+                                    normalizeNavigationElementType(
+                                      selectedElement,
+                                      nextType,
+                                    ),
+                                  );
+                                }}
+                              >
+                                <option
+                                  value='forward'
+                                  disabled={
+                                    !allowedNavigationTypes.includes(
+                                      'navigation_next',
+                                    )
+                                  }
+                                >
+                                  Forward
+                                </option>
+                                <option
+                                  value='back'
+                                  disabled={
+                                    !allowedNavigationTypes.includes(
+                                      'navigation_prev',
+                                    )
+                                  }
+                                >
+                                  Back
+                                </option>
+                              </select>
+                            </div>
+                            <div>
+                              <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                Button text
+                              </label>
+                              <input
+                                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                value={selectedElement.navLabel || ''}
+                                onChange={(event) =>
+                                  updateSelectedElement({
+                                    navLabel: event.target.value,
+                                  })
+                                }
+                              />
+                            </div>
+                            <div>
+                              <label className='flex items-center gap-2 text-[11px] font-semibold text-gray-600'>
+                                <input
+                                  type='checkbox'
+                                  checked={selectedElement.navDisabled || false}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      navDisabled: event.target.checked,
+                                    })
+                                  }
+                                />
+                                Disabled
+                              </label>
+                            </div>
+                            <div>
+                              <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                Icon
+                              </label>
+                              <select
+                                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                value={selectedElement.iconUrl || ''}
+                                onChange={(event) =>
+                                  updateSelectedElement({
+                                    iconUrl: event.target.value,
+                                  })
+                                }
+                              >
+                                <option value=''>Not selected</option>
+                                {addFallbackAssetOption(
+                                  iconAssetOptions,
+                                  selectedElement.iconUrl,
+                                  `Current icon · ${selectedElement.iconUrl || ''}`,
+                                ).map((option) => (
+                                  <option
+                                    key={option.value}
+                                    value={option.value}
+                                  >
+                                    {option.label}
+                                  </option>
+                                ))}
+                              </select>
+                              <p className='mt-1 text-[11px] text-gray-500'>
+                                {selectedMediaDurationNote}
+                              </p>
+                            </div>
+                            <div>
+                              <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                Target page
+                              </label>
+                              <select
+                                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                value={selectedElement.targetPageSlug || ''}
+                                onChange={(event) =>
+                                  updateSelectedElement({
+                                    targetPageSlug: event.target.value,
+                                    // Clear legacy targetPageId when using slug
+                                    targetPageId: '',
+                                  })
+                                }
+                              >
+                                <option value=''>Not selected</option>
+                                {pages
+                                  .filter((page) => page.id !== activePageId)
+                                  .map((page, index) => (
+                                    <option key={page.id} value={page.slug}>
+                                      {page.name || `Page ${index + 1}`}
+                                    </option>
+                                  ))}
+                              </select>
+                            </div>
+                            <div>
+                              <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                Transition video asset
+                              </label>
+                              <select
+                                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                value={selectedElement.transitionVideoUrl || ''}
+                                onChange={(event) => {
+                                  const nextVideoUrl = event.target.value;
+                                  const resolvedDuration =
+                                    getKnownDurationForSource(nextVideoUrl);
+                                  updateSelectedElement({
+                                    transitionVideoUrl: nextVideoUrl,
+                                    transitionDurationSec:
+                                      resolvedDuration || undefined,
+                                  });
+                                }}
+                              >
+                                <option value=''>Not selected</option>
+                                {addFallbackAssetOption(
+                                  transitionVideoAssetOptions,
+                                  selectedElement.transitionVideoUrl,
+                                  `Current video · ${selectedElement.transitionVideoUrl || ''}`,
+                                ).map((option) => (
+                                  <option
+                                    key={option.value}
+                                    value={option.value}
+                                  >
+                                    {option.label}
+                                  </option>
+                                ))}
+                              </select>
+                              <p className='mt-1 text-[11px] text-gray-500'>
+                                {selectedTransitionDurationNote}
+                              </p>
+                            </div>
+                            <div>
+                              <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                Back transition mode
+                              </label>
+                              <select
+                                className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                value={
+                                  selectedElement.transitionReverseMode ||
+                                  'auto_reverse'
+                                }
+                                onChange={(event) =>
+                                  updateSelectedElement({
+                                    transitionReverseMode:
+                                      event.target.value === 'separate_video'
+                                        ? 'separate_video'
+                                        : 'auto_reverse',
+                                  })
+                                }
+                              >
+                                <option value='auto_reverse'>
+                                  Auto reverse transition video
+                                </option>
+                                <option value='separate_video'>
+                                  Use separate back-transition video
+                                </option>
+                              </select>
+                            </div>
+                            {selectedElement.transitionReverseMode ===
+                              'separate_video' && (
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Back transition video asset
+                                </label>
+                                <select
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={selectedElement.reverseVideoUrl || ''}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      reverseVideoUrl: event.target.value,
+                                    })
+                                  }
+                                >
+                                  <option value=''>Not selected</option>
+                                  {addFallbackAssetOption(
+                                    transitionVideoAssetOptions,
+                                    selectedElement.reverseVideoUrl,
+                                    `Current back video · ${selectedElement.reverseVideoUrl || ''}`,
+                                  ).map((option) => (
+                                    <option
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </option>
+                                  ))}
+                                </select>
+                              </div>
+                            )}
+                            <p className='text-[11px] text-gray-500'>
+                              Transition duration is set automatically from the
+                              selected video. {selectedTransitionDurationNote}
+                            </p>
+                            <div className='flex gap-2 pt-1'>
+                              <BaseButton
+                                small
+                                color='lightDark'
+                                label='Preview Forward'
+                                onClick={() => openTransitionPreview('forward')}
+                              />
+                              <BaseButton
+                                small
+                                color='lightDark'
+                                label='Preview Back'
+                                onClick={() => openTransitionPreview('back')}
+                              />
+                            </div>
+                          </div>
+                        )}
+
+                        {selectedElement &&
+                          selectedElement.type === 'tooltip' && (
+                            <div className='space-y-2'>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Icon
+                                </label>
+                                <select
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={selectedElement.iconUrl || ''}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      iconUrl: event.target.value,
+                                    })
+                                  }
+                                >
+                                  <option value=''>Not selected</option>
+                                  {addFallbackAssetOption(
+                                    iconAssetOptions,
+                                    selectedElement.iconUrl,
+                                    `Current icon · ${selectedElement.iconUrl || ''}`,
+                                  ).map((option) => (
+                                    <option
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </option>
+                                  ))}
+                                </select>
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Tooltip title
+                                </label>
+                                <input
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={selectedElement.tooltipTitle || ''}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      tooltipTitle: event.target.value,
+                                    })
+                                  }
+                                />
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Tooltip text
+                                </label>
+                                <textarea
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  rows={4}
+                                  value={selectedElement.tooltipText || ''}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      tooltipText: event.target.value,
+                                    })
+                                  }
+                                />
+                              </div>
+                            </div>
+                          )}
+
+                        {selectedElement &&
+                          selectedElement.type === 'description' && (
+                            <div className='space-y-2'>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Icon
+                                </label>
+                                <select
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={selectedElement.iconUrl || ''}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      iconUrl: event.target.value,
+                                    })
+                                  }
+                                >
+                                  <option value=''>Not selected</option>
+                                  {addFallbackAssetOption(
+                                    iconAssetOptions,
+                                    selectedElement.iconUrl,
+                                    `Current icon · ${selectedElement.iconUrl || ''}`,
+                                  ).map((option) => (
+                                    <option
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </option>
+                                  ))}
+                                </select>
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Description title
+                                </label>
+                                <input
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={selectedElement.descriptionTitle || ''}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      descriptionTitle: event.target.value,
+                                    })
+                                  }
+                                />
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Description text
+                                </label>
+                                <textarea
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  rows={5}
+                                  value={selectedElement.descriptionText || ''}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      descriptionText: event.target.value,
+                                    })
+                                  }
+                                />
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Title font size
+                                </label>
+                                <input
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={
+                                    selectedElement.descriptionTitleFontSize ||
+                                    '48px'
+                                  }
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      descriptionTitleFontSize:
+                                        event.target.value,
+                                    })
+                                  }
+                                  placeholder='e.g. 48px'
+                                />
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Text font size
+                                </label>
+                                <input
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={
+                                    selectedElement.descriptionTextFontSize ||
+                                    '36px'
+                                  }
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      descriptionTextFontSize:
+                                        event.target.value,
+                                    })
+                                  }
+                                  placeholder='e.g. 36px'
+                                />
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Title font family
+                                </label>
+                                <input
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={
+                                    selectedElement.descriptionTitleFontFamily ||
+                                    'inherit'
+                                  }
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      descriptionTitleFontFamily:
+                                        event.target.value,
+                                    })
+                                  }
+                                  placeholder='e.g. Arial, Helvetica, sans-serif'
+                                />
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Text font family
+                                </label>
+                                <input
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={
+                                    selectedElement.descriptionTextFontFamily ||
+                                    'inherit'
+                                  }
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      descriptionTextFontFamily:
+                                        event.target.value,
+                                    })
+                                  }
+                                  placeholder='e.g. Arial, Helvetica, sans-serif'
+                                />
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Title color
+                                </label>
+                                <input
+                                  type='color'
+                                  className='w-full h-8 rounded border border-gray-300 px-1 py-1'
+                                  value={
+                                    selectedElement.descriptionTitleColor ||
+                                    '#000000'
+                                  }
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      descriptionTitleColor: event.target.value,
+                                    })
+                                  }
+                                />
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Text color
+                                </label>
+                                <input
+                                  type='color'
+                                  className='w-full h-8 rounded border border-gray-300 px-1 py-1'
+                                  value={
+                                    selectedElement.descriptionTextColor ||
+                                    '#4B5563'
+                                  }
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      descriptionTextColor: event.target.value,
+                                    })
+                                  }
+                                />
+                              </div>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  Background color
+                                </label>
+                                <input
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={
+                                    selectedElement.descriptionBackgroundColor ||
+                                    'transparent'
+                                  }
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      descriptionBackgroundColor:
+                                        event.target.value,
+                                    })
+                                  }
+                                  placeholder='e.g. transparent, #ffffff, rgba(0,0,0,0.5)'
+                                />
+                              </div>
+                            </div>
+                          )}
+
+                        {selectedElement &&
+                          (selectedElement.type === 'video_player' ||
+                            selectedElement.type === 'audio_player') && (
+                            <div className='space-y-2'>
+                              <div>
+                                <label className='mb-1 block text-[11px] font-semibold text-gray-600'>
+                                  {selectedElement.type === 'video_player'
+                                    ? 'Video asset'
+                                    : 'Audio asset'}
+                                </label>
+                                <select
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={selectedElement.mediaUrl || ''}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      mediaUrl: event.target.value,
+                                    })
+                                  }
+                                >
+                                  <option value=''>Not selected</option>
+                                  {addFallbackAssetOption(
+                                    selectedElement.type === 'video_player'
+                                      ? videoAssetOptions
+                                      : audioAssetOptions,
+                                    selectedElement.mediaUrl,
+                                    `Current media · ${selectedElement.mediaUrl || ''}`,
+                                  ).map((option) => (
+                                    <option
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </option>
+                                  ))}
+                                </select>
+                              </div>
+                              <label className='flex items-center gap-2 text-[11px] text-gray-700'>
+                                <input
+                                  type='checkbox'
+                                  checked={Boolean(
+                                    selectedElement.mediaAutoplay,
+                                  )}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      mediaAutoplay: event.target.checked,
+                                    })
+                                  }
+                                />
+                                Autoplay
+                              </label>
+                              <label className='flex items-center gap-2 text-[11px] text-gray-700'>
+                                <input
+                                  type='checkbox'
+                                  checked={Boolean(selectedElement.mediaLoop)}
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      mediaLoop: event.target.checked,
+                                    })
+                                  }
+                                />
+                                Loop
+                              </label>
+                              {selectedElement.type === 'video_player' && (
+                                <label className='flex items-center gap-2 text-[11px] text-gray-700'>
+                                  <input
+                                    type='checkbox'
+                                    checked={Boolean(
+                                      selectedElement.mediaMuted,
+                                    )}
+                                    onChange={(event) =>
+                                      updateSelectedElement({
+                                        mediaMuted: event.target.checked,
+                                      })
+                                    }
+                                  />
+                                  Muted
+                                </label>
+                              )}
+                            </div>
+                          )}
+
+                        {selectedElement &&
+                          selectedElement.type === 'gallery' && (
+                            <div className='space-y-2'>
+                              <div className='flex items-center justify-between'>
+                                <p className='text-[11px] font-semibold text-gray-600'>
+                                  Gallery cards
+                                </p>
+                                <button
+                                  type='button'
+                                  className='text-xs text-blue-700 hover:underline'
+                                  onClick={addGalleryCard}
+                                >
+                                  + Add card
+                                </button>
+                              </div>
+                              {(selectedElement.galleryCards || []).map(
+                                (card, index) => (
+                                  <div
+                                    key={card.id}
+                                    className='rounded border border-gray-200 p-2 space-y-2'
+                                  >
+                                    <div className='flex items-center justify-between'>
+                                      <p className='text-[11px] font-semibold text-gray-700'>
+                                        Card {index + 1}
+                                      </p>
+                                      <button
+                                        type='button'
+                                        className='text-xs text-red-600 hover:underline'
+                                        onClick={() =>
+                                          removeGalleryCard(card.id)
+                                        }
+                                      >
+                                        Remove
+                                      </button>
+                                    </div>
+                                    <select
+                                      className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                      value={card.imageUrl}
+                                      onChange={(event) =>
+                                        updateGalleryCard(card.id, {
+                                          imageUrl: event.target.value,
+                                        })
+                                      }
+                                    >
+                                      <option value=''>Image asset</option>
+                                      {addFallbackAssetOption(
+                                        imageAssetOptions,
+                                        card.imageUrl,
+                                        `Current image · ${card.imageUrl}`,
+                                      ).map((option) => (
+                                        <option
+                                          key={option.value}
+                                          value={option.value}
+                                        >
+                                          {option.label}
+                                        </option>
+                                      ))}
+                                    </select>
+                                    <input
+                                      className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                      placeholder='Title'
+                                      value={card.title}
+                                      onChange={(event) =>
+                                        updateGalleryCard(card.id, {
+                                          title: event.target.value,
+                                        })
+                                      }
+                                    />
+                                    <textarea
+                                      className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                      placeholder='Description'
+                                      rows={3}
+                                      value={card.description}
+                                      onChange={(event) =>
+                                        updateGalleryCard(card.id, {
+                                          description: event.target.value,
+                                        })
+                                      }
+                                    />
+                                  </div>
+                                ),
+                              )}
+                            </div>
+                          )}
+
+                        {selectedElement &&
+                          selectedElement.type === 'carousel' && (
+                            <div className='space-y-2'>
+                              <div className='rounded border border-gray-200 p-2 space-y-2'>
+                                <p className='text-[11px] font-semibold text-gray-700'>
+                                  Navigation icons
+                                </p>
+                                <select
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={
+                                    selectedElement.carouselPrevIconUrl || ''
+                                  }
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      carouselPrevIconUrl: event.target.value,
+                                    })
+                                  }
+                                >
+                                  <option value=''>Previous icon</option>
+                                  {addFallbackAssetOption(
+                                    iconAssetOptions,
+                                    selectedElement.carouselPrevIconUrl,
+                                    `Current prev icon · ${selectedElement.carouselPrevIconUrl || ''}`,
+                                  ).map((option) => (
+                                    <option
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </option>
+                                  ))}
+                                </select>
+                                <select
+                                  className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                  value={
+                                    selectedElement.carouselNextIconUrl || ''
+                                  }
+                                  onChange={(event) =>
+                                    updateSelectedElement({
+                                      carouselNextIconUrl: event.target.value,
+                                    })
+                                  }
+                                >
+                                  <option value=''>Next icon</option>
+                                  {addFallbackAssetOption(
+                                    iconAssetOptions,
+                                    selectedElement.carouselNextIconUrl,
+                                    `Current next icon · ${selectedElement.carouselNextIconUrl || ''}`,
+                                  ).map((option) => (
+                                    <option
+                                      key={option.value}
+                                      value={option.value}
+                                    >
+                                      {option.label}
+                                    </option>
+                                  ))}
+                                </select>
+                              </div>
+                              <div className='flex items-center justify-between'>
+                                <p className='text-[11px] font-semibold text-gray-600'>
+                                  Carousel slides
+                                </p>
+                                <button
+                                  type='button'
+                                  className='text-xs text-blue-700 hover:underline'
+                                  onClick={addCarouselSlide}
+                                >
+                                  + Add slide
+                                </button>
+                              </div>
+                              {(selectedElement.carouselSlides || []).map(
+                                (slide, index) => (
+                                  <div
+                                    key={slide.id}
+                                    className='rounded border border-gray-200 p-2 space-y-2'
+                                  >
+                                    <div className='flex items-center justify-between'>
+                                      <p className='text-[11px] font-semibold text-gray-700'>
+                                        Slide {index + 1}
+                                      </p>
+                                      <button
+                                        type='button'
+                                        className='text-xs text-red-600 hover:underline'
+                                        onClick={() =>
+                                          removeCarouselSlide(slide.id)
+                                        }
+                                      >
+                                        Remove
+                                      </button>
+                                    </div>
+                                    <select
+                                      className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                      value={slide.imageUrl}
+                                      onChange={(event) =>
+                                        updateCarouselSlide(slide.id, {
+                                          imageUrl: event.target.value,
+                                        })
+                                      }
+                                    >
+                                      <option value=''>Image asset</option>
+                                      {addFallbackAssetOption(
+                                        imageAssetOptions,
+                                        slide.imageUrl,
+                                        `Current image · ${slide.imageUrl}`,
+                                      ).map((option) => (
+                                        <option
+                                          key={option.value}
+                                          value={option.value}
+                                        >
+                                          {option.label}
+                                        </option>
+                                      ))}
+                                    </select>
+                                    <input
+                                      className='w-full rounded border border-gray-300 px-2 py-1 text-xs'
+                                      placeholder='Caption'
+                                      value={slide.caption}
+                                      onChange={(event) =>
+                                        updateCarouselSlide(slide.id, {
+                                          caption: event.target.value,
+                                        })
+                                      }
+                                    />
+                                  </div>
+                                ),
+                              )}
+                            </div>
+                          )}
+                      </>
                     )}
-                  </div>
+
+                    {/* CSS Styles Tab */}
+                    {elementEditorTab === 'css' && (
+                      <StyleSettingsSectionCompact
+                        values={{
+                          width: extractNumericValue(selectedElement.width),
+                          height: extractNumericValue(selectedElement.height),
+                          minWidth: extractNumericValue(
+                            selectedElement.minWidth,
+                          ),
+                          maxWidth: extractNumericValue(
+                            selectedElement.maxWidth,
+                          ),
+                          minHeight: extractNumericValue(
+                            selectedElement.minHeight,
+                          ),
+                          maxHeight: extractNumericValue(
+                            selectedElement.maxHeight,
+                          ),
+                          margin: selectedElement.margin || '',
+                          padding: selectedElement.padding || '',
+                          gap: selectedElement.gap || '',
+                          fontSize: selectedElement.fontSize || '',
+                          lineHeight: selectedElement.lineHeight || '',
+                          fontWeight: selectedElement.fontWeight || '',
+                          border: extractNumericValue(selectedElement.border),
+                          borderRadius: extractNumericValue(
+                            selectedElement.borderRadius,
+                          ),
+                          opacity: selectedElement.opacity || '',
+                          boxShadow: selectedElement.boxShadow || '',
+                          display: selectedElement.display || '',
+                          position: selectedElement.position || '',
+                          justifyContent: selectedElement.justifyContent || '',
+                          alignItems: selectedElement.alignItems || '',
+                          textAlign: selectedElement.textAlign || '',
+                          zIndex: selectedElement.zIndex || '',
+                        }}
+                        onChange={(prop, value) => {
+                          // Handle CSS property changes
+                          const numericProps = [
+                            'width',
+                            'height',
+                            'minWidth',
+                            'maxWidth',
+                            'minHeight',
+                            'maxHeight',
+                            'border',
+                            'borderRadius',
+                          ];
+                          const unit = [
+                            'width',
+                            'minWidth',
+                            'maxWidth',
+                          ].includes(prop)
+                            ? 'vw'
+                            : ['height', 'minHeight', 'maxHeight'].includes(
+                                  prop,
+                                )
+                              ? 'vh'
+                              : ['border', 'borderRadius'].includes(prop)
+                                ? 'px'
+                                : '';
+
+                          if (numericProps.includes(prop)) {
+                            const trimmed = String(value || '').trim();
+                            if (prop === 'border') {
+                              updateSelectedElement({
+                                [prop]: trimmed
+                                  ? `${trimmed}px solid currentColor`
+                                  : 'none',
+                              });
+                            } else if (prop === 'borderRadius') {
+                              updateSelectedElement({
+                                [prop]: trimmed ? `${trimmed}px` : '0px',
+                              });
+                            } else {
+                              updateSelectedElement({
+                                [prop]: trimmed
+                                  ? `${trimmed}${unit}`
+                                  : undefined,
+                              });
+                            }
+                          } else {
+                            updateSelectedElement({
+                              [prop]: value || undefined,
+                            });
+                          }
+                        }}
+                      />
+                    )}
+                  </>
                 )}
               </>
             )}
diff --git a/frontend/src/pages/element-type-defaults/[id].tsx b/frontend/src/pages/element-type-defaults/[id].tsx
index 2921256..f6b42e1 100644
--- a/frontend/src/pages/element-type-defaults/[id].tsx
+++ b/frontend/src/pages/element-type-defaults/[id].tsx
@@ -1,9 +1,4 @@
-import {
-  mdiContentSave,
-  mdiPaletteSwatch,
-  mdiPlus,
-  mdiTrashCan,
-} from '@mdi/js';
+import { mdiContentSave, mdiPaletteSwatch } from '@mdi/js';
 import axios from 'axios';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -23,67 +18,35 @@ import SectionMain from '../../components/SectionMain';
 import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
 import { getPageTitle } from '../../config';
 import { logger } from '../../lib/logger';
-import { parseJsonObject } from '../../lib/parseJson';
 import type {
   CanvasElementType,
-  GalleryCard,
-  CarouselSlide,
   UiElementDefault,
 } from '../../types/constructor';
 
+// Import shared element settings components
+import {
+  ElementSettingsTabs,
+  StyleSettingsSection,
+  CommonSettingsSection,
+  NavigationSettingsSection,
+  TooltipSettingsSection,
+  DescriptionSettingsSection,
+  MediaSettingsSection,
+  GallerySettingsSection,
+  CarouselSettingsSection,
+  useElementSettingsForm,
+} from '../../components/ElementSettings';
+
 type ElementTypeDefault = UiElementDefault & {
   element_type: string;
   name?: string;
   sort_order?: number;
 };
 
-type ElementType = CanvasElementType;
-
-const clampPercent = (value: string) => {
-  const parsed = Number(value);
-  if (!Number.isFinite(parsed)) return 0;
-  return Math.min(Math.max(parsed, 0), 100);
-};
-
-const parseNullableNumber = (value: string) => {
-  if (!value.trim()) return null;
-  const parsed = Number(value);
-  if (!Number.isFinite(parsed) || parsed < 0) return null;
-  return parsed;
-};
-
-const extractNumericValue = (value: unknown) => {
-  const normalized = String(value ?? '').trim();
-  if (!normalized) return '';
-  const matched = normalized.match(/-?\d*\.?\d+/);
-  return matched ? matched[0] : '';
-};
-
-const normalizeNumberString = (value: string) => {
-  const normalized = String(value || '').trim();
-  if (!normalized) return '';
-  const parsed = Number(normalized);
-  if (!Number.isFinite(parsed)) return '';
-  return String(parsed);
-};
-
-const toOptionalTrimmed = (value: string) => {
-  const normalized = String(value || '').trim();
-  return normalized ? normalized : undefined;
-};
-
-const toUnitValue = (value: string, unit: 'vw' | 'vh' | 'px') => {
-  const normalized = normalizeNumberString(value);
-  return normalized ? `${normalized}${unit}` : undefined;
-};
-
-const createLocalId = () => {
-  if (typeof window !== 'undefined' && window.crypto?.randomUUID) {
-    return window.crypto.randomUUID();
-  }
-
-  return `element-default_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
-};
+const SETTINGS_TABS = [
+  { id: 'general', label: 'General Settings' },
+  { id: 'css', label: 'CSS Styles' },
+];
 
 const ElementTypeDefaultDetailsPage = () => {
   const router = useRouter();
@@ -97,172 +60,20 @@ const ElementTypeDefaultDetailsPage = () => {
   const [name, setName] = useState('');
   const [sortOrder, setSortOrder] = useState(0);
   const [isActive, setIsActive] = useState(true);
-
-  const [label, setLabel] = useState('');
-  const [xPercent, setXPercent] = useState('0');
-  const [yPercent, setYPercent] = useState('0');
-  const [width, setWidth] = useState('');
-  const [height, setHeight] = useState('');
-  const [minWidth, setMinWidth] = useState('');
-  const [maxWidth, setMaxWidth] = useState('');
-  const [minHeight, setMinHeight] = useState('');
-  const [maxHeight, setMaxHeight] = useState('');
-  const [margin, setMargin] = useState('');
-  const [padding, setPadding] = useState('');
-  const [gap, setGap] = useState('');
-  const [fontSize, setFontSize] = useState('');
-  const [lineHeight, setLineHeight] = useState('');
-  const [fontWeight, setFontWeight] = useState('');
-  const [border, setBorder] = useState('');
-  const [borderRadius, setBorderRadius] = useState('');
-  const [opacity, setOpacity] = useState('');
-  const [boxShadow, setBoxShadow] = useState('');
-  const [display, setDisplay] = useState('');
-  const [position, setPosition] = useState('');
-  const [justifyContent, setJustifyContent] = useState('');
-  const [alignItems, setAlignItems] = useState('');
-  const [textAlign, setTextAlign] = useState('');
-  const [zIndex, setZIndex] = useState('');
-  const [appearDelaySec, setAppearDelaySec] = useState('0');
-  const [appearDurationSec, setAppearDurationSec] = useState('');
-  const [iconUrl, setIconUrl] = useState('');
-  const [navLabel, setNavLabel] = useState('');
-  const [navType, setNavType] = useState<'forward' | 'back'>('forward');
-  const [navDisabled, setNavDisabled] = useState(false);
-  const [targetPageId, setTargetPageId] = useState('');
-  const [transitionVideoUrl, setTransitionVideoUrl] = useState('');
-  const [transitionReverseMode, setTransitionReverseMode] = useState<
-    'auto_reverse' | 'separate_video'
-  >('auto_reverse');
-  const [reverseVideoUrl, setReverseVideoUrl] = useState('');
-  const [transitionDurationSec, setTransitionDurationSec] = useState('0.7');
-  const [tooltipTitle, setTooltipTitle] = useState('');
-  const [tooltipText, setTooltipText] = useState('');
-  const [descriptionTitle, setDescriptionTitle] = useState('');
-  const [descriptionText, setDescriptionText] = useState('');
-  const [descriptionTitleFontSize, setDescriptionTitleFontSize] = useState('');
-  const [descriptionTextFontSize, setDescriptionTextFontSize] = useState('');
-  const [descriptionTitleFontFamily, setDescriptionTitleFontFamily] =
-    useState('');
-  const [descriptionTextFontFamily, setDescriptionTextFontFamily] =
-    useState('');
-  const [descriptionTitleColor, setDescriptionTitleColor] = useState('');
-  const [descriptionTextColor, setDescriptionTextColor] = useState('');
-  const [descriptionBackgroundColor, setDescriptionBackgroundColor] =
-    useState('');
-  const [mediaUrl, setMediaUrl] = useState('');
-  const [mediaAutoplay, setMediaAutoplay] = useState(false);
-  const [mediaLoop, setMediaLoop] = useState(false);
-  const [mediaMuted, setMediaMuted] = useState(false);
-  const [carouselPrevIconUrl, setCarouselPrevIconUrl] = useState('');
-  const [carouselNextIconUrl, setCarouselNextIconUrl] = useState('');
-  const [galleryCards, setGalleryCards] = useState<GalleryCard[]>([]);
-  const [carouselSlides, setCarouselSlides] = useState<CarouselSlide[]>([]);
+  const [activeTab, setActiveTab] = useState('general');
 
   const [isLoading, setIsLoading] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
 
-  const applySettingsToForm = useCallback(
-    (settingsValue?: ElementTypeDefault['default_settings_json']) => {
-      const settings = parseJsonObject<Record<string, any>>(settingsValue, {});
+  const currentElementType = (item?.element_type || '') as CanvasElementType;
 
-      setLabel(String(settings.label || ''));
-      setXPercent(String(settings.xPercent ?? 0));
-      setYPercent(String(settings.yPercent ?? 0));
-      setWidth(extractNumericValue(settings.width));
-      setHeight(extractNumericValue(settings.height));
-      setMinWidth(extractNumericValue(settings.minWidth));
-      setMaxWidth(extractNumericValue(settings.maxWidth));
-      setMinHeight(extractNumericValue(settings.minHeight));
-      setMaxHeight(extractNumericValue(settings.maxHeight));
-      setMargin(String(settings.margin || ''));
-      setPadding(String(settings.padding || ''));
-      setGap(String(settings.gap || ''));
-      setFontSize(String(settings.fontSize || ''));
-      setLineHeight(String(settings.lineHeight || ''));
-      setFontWeight(String(settings.fontWeight || ''));
-      setBorder(extractNumericValue(settings.border));
-      setBorderRadius(extractNumericValue(settings.borderRadius));
-      setOpacity(settings.opacity === 0 ? '0' : String(settings.opacity || ''));
-      setBoxShadow(String(settings.boxShadow || ''));
-      setDisplay(String(settings.display || ''));
-      setPosition(String(settings.position || ''));
-      setJustifyContent(String(settings.justifyContent || ''));
-      setAlignItems(String(settings.alignItems || ''));
-      setTextAlign(String(settings.textAlign || ''));
-      setZIndex(String(settings.zIndex || ''));
-      setAppearDelaySec(String(settings.appearDelaySec ?? 0));
-      setAppearDurationSec(
-        settings.appearDurationSec === null ||
-          settings.appearDurationSec === undefined
-          ? ''
-          : String(settings.appearDurationSec),
-      );
-      setIconUrl(String(settings.iconUrl || ''));
-      setNavLabel(String(settings.navLabel || ''));
-      setNavType(settings.navType === 'back' ? 'back' : 'forward');
-      setNavDisabled(Boolean(settings.navDisabled));
-      setTargetPageId(String(settings.targetPageId || ''));
-      setTransitionVideoUrl(String(settings.transitionVideoUrl || ''));
-      setTransitionReverseMode(
-        settings.transitionReverseMode === 'separate_video'
-          ? 'separate_video'
-          : 'auto_reverse',
-      );
-      setReverseVideoUrl(String(settings.reverseVideoUrl || ''));
-      setTransitionDurationSec(String(settings.transitionDurationSec ?? 0.7));
-      setTooltipTitle(String(settings.tooltipTitle || ''));
-      setTooltipText(String(settings.tooltipText || ''));
-      setDescriptionTitle(String(settings.descriptionTitle || ''));
-      setDescriptionText(String(settings.descriptionText || ''));
-      setDescriptionTitleFontSize(
-        String(settings.descriptionTitleFontSize || ''),
-      );
-      setDescriptionTextFontSize(
-        String(settings.descriptionTextFontSize || ''),
-      );
-      setDescriptionTitleFontFamily(
-        String(settings.descriptionTitleFontFamily || ''),
-      );
-      setDescriptionTextFontFamily(
-        String(settings.descriptionTextFontFamily || ''),
-      );
-      setDescriptionTitleColor(String(settings.descriptionTitleColor || ''));
-      setDescriptionTextColor(String(settings.descriptionTextColor || ''));
-      setDescriptionBackgroundColor(
-        String(settings.descriptionBackgroundColor || ''),
-      );
-      setMediaUrl(String(settings.mediaUrl || ''));
-      setMediaAutoplay(Boolean(settings.mediaAutoplay));
-      setMediaLoop(Boolean(settings.mediaLoop));
-      setMediaMuted(Boolean(settings.mediaMuted));
-      setCarouselPrevIconUrl(String(settings.carouselPrevIconUrl || ''));
-      setCarouselNextIconUrl(String(settings.carouselNextIconUrl || ''));
+  // Use shared form hook
+  const form = useElementSettingsForm({ elementType: currentElementType });
 
-      const nextGalleryCards = Array.isArray(settings.galleryCards)
-        ? settings.galleryCards.map((card: any, index: number) => ({
-            id: String(card?.id || createLocalId()),
-            imageUrl: String(card?.imageUrl || ''),
-            title: String(card?.title || `Card ${index + 1}`),
-            description: String(card?.description || ''),
-          }))
-        : [];
-
-      const nextCarouselSlides = Array.isArray(settings.carouselSlides)
-        ? settings.carouselSlides.map((slide: any, index: number) => ({
-            id: String(slide?.id || createLocalId()),
-            imageUrl: String(slide?.imageUrl || ''),
-            caption: String(slide?.caption || `Slide ${index + 1}`),
-          }))
-        : [];
-
-      setGalleryCards(nextGalleryCards);
-      setCarouselSlides(nextCarouselSlides);
-    },
-    [],
-  );
+  // Extract stable callback reference to avoid infinite loop
+  const applySettings = form.applySettings;
 
   const loadItem = useCallback(async () => {
     if (!id) return;
@@ -285,11 +96,15 @@ const ElementTypeDefaultDetailsPage = () => {
       setName(String(nextItem.name || ''));
       setSortOrder(Number(nextItem.sort_order || 0));
       setIsActive(Boolean(nextItem.is_active));
-      applySettingsToForm(nextItem.default_settings_json);
-    } catch (error: any) {
+      applySettings(nextItem.default_settings_json);
+    } catch (error: unknown) {
+      const err = error as {
+        response?: { data?: { message?: string } };
+        message?: string;
+      };
       const message =
-        error?.response?.data?.message ||
-        error?.message ||
+        err?.response?.data?.message ||
+        err?.message ||
         'Failed to load element type default.';
       logger.error(
         'Failed to load element type default details:',
@@ -300,209 +115,20 @@ const ElementTypeDefaultDetailsPage = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [applySettingsToForm, id]);
+  }, [applySettings, id]);
 
   useEffect(() => {
     if (!router.isReady) return;
     loadItem();
   }, [loadItem, router.isReady]);
 
-  const currentElementType = (item?.element_type || '') as ElementType;
-  const isNavigationType =
-    currentElementType === 'navigation_next' ||
-    currentElementType === 'navigation_prev';
-  const isTooltipType = currentElementType === 'tooltip';
-  const isDescriptionType = currentElementType === 'description';
-  const isGalleryType = currentElementType === 'gallery';
-  const isCarouselType = currentElementType === 'carousel';
-  const isMediaType =
-    currentElementType === 'video_player' ||
-    currentElementType === 'audio_player';
-
-  const updateGalleryCard = (
-    cardId: string,
-    field: keyof GalleryCard,
-    value: string,
-  ) => {
-    setGalleryCards((previous) =>
-      previous.map((card) =>
-        card.id === cardId ? { ...card, [field]: value } : card,
-      ),
-    );
-  };
-
-  const addGalleryCard = () => {
-    setGalleryCards((previous) => [
-      ...previous,
-      {
-        id: createLocalId(),
-        imageUrl: '',
-        title: `Card ${previous.length + 1}`,
-        description: '',
-      },
-    ]);
-  };
-
-  const removeGalleryCard = (cardId: string) => {
-    setGalleryCards((previous) =>
-      previous.filter((card) => card.id !== cardId),
-    );
-  };
-
-  const updateCarouselSlide = (
-    slideId: string,
-    field: keyof CarouselSlide,
-    value: string,
-  ) => {
-    setCarouselSlides((previous) =>
-      previous.map((slide) =>
-        slide.id === slideId ? { ...slide, [field]: value } : slide,
-      ),
-    );
-  };
-
-  const addCarouselSlide = () => {
-    setCarouselSlides((previous) => [
-      ...previous,
-      {
-        id: createLocalId(),
-        imageUrl: '',
-        caption: `Slide ${previous.length + 1}`,
-      },
-    ]);
-  };
-
-  const removeCarouselSlide = (slideId: string) => {
-    setCarouselSlides((previous) =>
-      previous.filter((slide) => slide.id !== slideId),
-    );
-  };
+  // Extract stable callback reference for buildSettingsJson
+  const buildSettingsJson = form.buildSettingsJson;
 
   const handleSave = useCallback(async () => {
     if (!id || !item) return;
 
-    const borderWidthValue = toUnitValue(border, 'px');
-    const defaultSettings: Record<string, any> = {
-      label: label.trim(),
-      xPercent: clampPercent(xPercent),
-      yPercent: clampPercent(yPercent),
-      border: borderWidthValue
-        ? `${borderWidthValue} solid currentColor`
-        : 'none',
-      borderRadius: toUnitValue(borderRadius, 'px') || '0px',
-      appearDelaySec: Number(appearDelaySec) >= 0 ? Number(appearDelaySec) : 0,
-      appearDurationSec: parseNullableNumber(appearDurationSec),
-    };
-
-    const widthValue = toUnitValue(width, 'vw');
-    const heightValue = toUnitValue(height, 'vh');
-    const minWidthValue = toUnitValue(minWidth, 'vw');
-    const maxWidthValue = toUnitValue(maxWidth, 'vw');
-    const minHeightValue = toUnitValue(minHeight, 'vh');
-    const maxHeightValue = toUnitValue(maxHeight, 'vh');
-
-    if (widthValue) defaultSettings.width = widthValue;
-    if (heightValue) defaultSettings.height = heightValue;
-    if (minWidthValue) defaultSettings.minWidth = minWidthValue;
-    if (maxWidthValue) defaultSettings.maxWidth = maxWidthValue;
-    if (minHeightValue) defaultSettings.minHeight = minHeightValue;
-    if (maxHeightValue) defaultSettings.maxHeight = maxHeightValue;
-
-    const marginValue = toOptionalTrimmed(margin);
-    const paddingValue = toOptionalTrimmed(padding);
-    const gapValue = toOptionalTrimmed(gap);
-    const fontSizeValue = toOptionalTrimmed(fontSize);
-    const lineHeightValue = toOptionalTrimmed(lineHeight);
-    const fontWeightValue = toOptionalTrimmed(fontWeight);
-    const opacityValue = toOptionalTrimmed(opacity);
-    const boxShadowValue = toOptionalTrimmed(boxShadow);
-    const displayValue = toOptionalTrimmed(display);
-    const positionValue = toOptionalTrimmed(position);
-    const justifyContentValue = toOptionalTrimmed(justifyContent);
-    const alignItemsValue = toOptionalTrimmed(alignItems);
-    const textAlignValue = toOptionalTrimmed(textAlign);
-    const zIndexValue = toOptionalTrimmed(zIndex);
-
-    if (marginValue) defaultSettings.margin = marginValue;
-    if (paddingValue) defaultSettings.padding = paddingValue;
-    if (gapValue) defaultSettings.gap = gapValue;
-    if (fontSizeValue) defaultSettings.fontSize = fontSizeValue;
-    if (lineHeightValue) defaultSettings.lineHeight = lineHeightValue;
-    if (fontWeightValue) defaultSettings.fontWeight = fontWeightValue;
-    if (opacityValue) defaultSettings.opacity = opacityValue;
-    if (boxShadowValue) defaultSettings.boxShadow = boxShadowValue;
-    if (displayValue) defaultSettings.display = displayValue;
-    if (positionValue) defaultSettings.position = positionValue;
-    if (justifyContentValue)
-      defaultSettings.justifyContent = justifyContentValue;
-    if (alignItemsValue) defaultSettings.alignItems = alignItemsValue;
-    if (textAlignValue) defaultSettings.textAlign = textAlignValue;
-    if (zIndexValue) defaultSettings.zIndex = zIndexValue;
-
-    if (isNavigationType) {
-      defaultSettings.iconUrl = iconUrl.trim();
-      defaultSettings.navLabel = navLabel.trim();
-      defaultSettings.navType = navType;
-      defaultSettings.navDisabled = navDisabled;
-      defaultSettings.targetPageId = targetPageId.trim();
-      defaultSettings.transitionVideoUrl = transitionVideoUrl.trim();
-      defaultSettings.transitionReverseMode = transitionReverseMode;
-      defaultSettings.reverseVideoUrl = reverseVideoUrl.trim();
-      defaultSettings.transitionDurationSec =
-        Number(transitionDurationSec) > 0 ? Number(transitionDurationSec) : 0.7;
-    }
-
-    if (isTooltipType) {
-      defaultSettings.iconUrl = iconUrl.trim();
-      defaultSettings.tooltipTitle = tooltipTitle.trim();
-      defaultSettings.tooltipText = tooltipText;
-    }
-
-    if (isDescriptionType) {
-      defaultSettings.iconUrl = iconUrl.trim();
-      defaultSettings.descriptionTitle = descriptionTitle.trim();
-      defaultSettings.descriptionText = descriptionText;
-      defaultSettings.descriptionTitleFontSize =
-        descriptionTitleFontSize.trim() || '48px';
-      defaultSettings.descriptionTextFontSize =
-        descriptionTextFontSize.trim() || '36px';
-      defaultSettings.descriptionTitleFontFamily =
-        descriptionTitleFontFamily.trim() || 'inherit';
-      defaultSettings.descriptionTextFontFamily =
-        descriptionTextFontFamily.trim() || 'inherit';
-      defaultSettings.descriptionTitleColor =
-        descriptionTitleColor.trim() || '#000000';
-      defaultSettings.descriptionTextColor =
-        descriptionTextColor.trim() || '#4B5563';
-      defaultSettings.descriptionBackgroundColor =
-        descriptionBackgroundColor.trim() || 'transparent';
-    }
-
-    if (isGalleryType) {
-      defaultSettings.galleryCards = galleryCards.map((card, index) => ({
-        id: String(card.id || createLocalId()),
-        imageUrl: card.imageUrl.trim(),
-        title: card.title.trim() || `Card ${index + 1}`,
-        description: card.description,
-      }));
-    }
-
-    if (isCarouselType) {
-      defaultSettings.carouselSlides = carouselSlides.map((slide, index) => ({
-        id: String(slide.id || createLocalId()),
-        imageUrl: slide.imageUrl.trim(),
-        caption: slide.caption.trim() || `Slide ${index + 1}`,
-      }));
-      defaultSettings.carouselPrevIconUrl = carouselPrevIconUrl.trim();
-      defaultSettings.carouselNextIconUrl = carouselNextIconUrl.trim();
-    }
-
-    if (isMediaType) {
-      defaultSettings.mediaUrl = mediaUrl.trim();
-      defaultSettings.mediaAutoplay = mediaAutoplay;
-      defaultSettings.mediaLoop = mediaLoop;
-      defaultSettings.mediaMuted = mediaMuted;
-    }
+    const defaultSettings = buildSettingsJson();
 
     try {
       setIsSaving(true);
@@ -524,10 +150,14 @@ const ElementTypeDefaultDetailsPage = () => {
 
       setSuccessMessage('Default settings saved.');
       await loadItem();
-    } catch (error: any) {
+    } catch (error: unknown) {
+      const err = error as {
+        response?: { data?: { message?: string } };
+        message?: string;
+      };
       const message =
-        error?.response?.data?.message ||
-        error?.message ||
+        err?.response?.data?.message ||
+        err?.message ||
         'Failed to save element type defaults.';
       logger.error(
         'Failed to save element type defaults:',
@@ -538,76 +168,34 @@ const ElementTypeDefaultDetailsPage = () => {
     } finally {
       setIsSaving(false);
     }
-  }, [
-    appearDelaySec,
-    appearDurationSec,
-    carouselNextIconUrl,
-    carouselPrevIconUrl,
-    carouselSlides,
-    currentElementType,
-    descriptionText,
-    descriptionTitle,
-    descriptionTitleFontSize,
-    descriptionTextFontSize,
-    descriptionTitleFontFamily,
-    descriptionTextFontFamily,
-    descriptionTitleColor,
-    descriptionTextColor,
-    descriptionBackgroundColor,
-    display,
-    fontSize,
-    fontWeight,
-    gap,
-    galleryCards,
-    height,
-    iconUrl,
-    id,
-    isActive,
-    isCarouselType,
-    isDescriptionType,
-    isGalleryType,
-    isMediaType,
-    isNavigationType,
-    isTooltipType,
-    item,
-    justifyContent,
-    label,
-    lineHeight,
-    loadItem,
-    margin,
-    maxHeight,
-    maxWidth,
-    mediaAutoplay,
-    mediaLoop,
-    mediaMuted,
-    mediaUrl,
-    minHeight,
-    minWidth,
-    name,
-    navDisabled,
-    navLabel,
-    navType,
-    opacity,
-    padding,
-    position,
-    reverseVideoUrl,
-    sortOrder,
-    textAlign,
-    targetPageId,
-    tooltipText,
-    tooltipTitle,
-    transitionDurationSec,
-    transitionReverseMode,
-    transitionVideoUrl,
-    width,
-    xPercent,
-    yPercent,
-    zIndex,
-    alignItems,
-    border,
-    borderRadius,
-    boxShadow,
-  ]);
+  }, [buildSettingsJson, id, isActive, item, loadItem, name, sortOrder]);
+
+  // Extract stable callback reference for setField
+  const setField = form.setField;
+
+  // Handler for style section changes
+  const handleStyleChange = useCallback(
+    (prop: string, value: string) => {
+      setField(prop as keyof typeof form.state, value);
+    },
+    [setField],
+  );
+
+  // Handler for common section changes
+  const handleCommonChange = useCallback(
+    (field: string, value: string) => {
+      setField(field as keyof typeof form.state, value);
+    },
+    [setField],
+  );
+
+  // Handler for type-specific section changes
+  const handleTypeChange = useCallback(
+    (field: string, value: string | boolean) => {
+      setField(field as keyof typeof form.state, value as never);
+    },
+    [setField],
+  );
 
   return (
     <>
@@ -683,691 +271,135 @@ const ElementTypeDefaultDetailsPage = () => {
                 </label>
               </FormField>
 
-              <FormField label='Label'>
-                <input
-                  value={label}
-                  onChange={(event) => setLabel(event.target.value)}
-                />
-              </FormField>
+              {/* Tabs */}
+              <ElementSettingsTabs
+                activeTab={activeTab}
+                onTabChange={setActiveTab}
+                tabs={SETTINGS_TABS}
+              />
 
-              <div className='grid gap-4 md:grid-cols-2'>
-                <FormField label='X percent'>
-                  <input
-                    value={xPercent}
-                    onChange={(event) => setXPercent(event.target.value)}
-                  />
-                </FormField>
-                <FormField label='Y percent'>
-                  <input
-                    value={yPercent}
-                    onChange={(event) => setYPercent(event.target.value)}
-                  />
-                </FormField>
-                <FormField label='Appear delay (sec)'>
-                  <input
-                    value={appearDelaySec}
-                    onChange={(event) => setAppearDelaySec(event.target.value)}
-                  />
-                </FormField>
-                <FormField label='Appear duration (sec)'>
-                  <input
-                    value={appearDurationSec}
-                    onChange={(event) =>
-                      setAppearDurationSec(event.target.value)
-                    }
-                    placeholder='Leave empty for none'
-                  />
-                </FormField>
-              </div>
-
-              <CardBox className='border border-gray-200 dark:border-dark-700'>
-                <h3 className='mb-3 text-sm font-semibold'>
-                  View & stylization
-                </h3>
-                <p className='mb-3 text-xs text-gray-500'>
-                  Fill numbers only: width is saved as vw, height as vh, border
-                  and radius as px.
-                </p>
-                <div className='grid gap-3 md:grid-cols-2'>
-                  <FormField label='Width (vw)'>
-                    <input
-                      type='number'
-                      step='0.1'
-                      min='0'
-                      value={width}
-                      onChange={(event) => setWidth(event.target.value)}
-                      placeholder='e.g. 24'
-                    />
-                  </FormField>
-                  <FormField label='Height (vh)'>
-                    <input
-                      type='number'
-                      step='0.1'
-                      min='0'
-                      value={height}
-                      onChange={(event) => setHeight(event.target.value)}
-                      placeholder='e.g. 8'
-                    />
-                  </FormField>
-                  <FormField label='Min width (vw)'>
-                    <input
-                      type='number'
-                      step='0.1'
-                      min='0'
-                      value={minWidth}
-                      onChange={(event) => setMinWidth(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Max width (vw)'>
-                    <input
-                      type='number'
-                      step='0.1'
-                      min='0'
-                      value={maxWidth}
-                      onChange={(event) => setMaxWidth(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Min height (vh)'>
-                    <input
-                      type='number'
-                      step='0.1'
-                      min='0'
-                      value={minHeight}
-                      onChange={(event) => setMinHeight(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Max height (vh)'>
-                    <input
-                      type='number'
-                      step='0.1'
-                      min='0'
-                      value={maxHeight}
-                      onChange={(event) => setMaxHeight(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Margin'>
-                    <input
-                      value={margin}
-                      onChange={(event) => setMargin(event.target.value)}
-                      placeholder='e.g. 0 auto / 0.5rem'
-                    />
-                  </FormField>
-                  <FormField label='Padding'>
-                    <input
-                      value={padding}
-                      onChange={(event) => setPadding(event.target.value)}
-                      placeholder='e.g. 0.5rem 0.75rem'
-                    />
-                  </FormField>
-                  <FormField label='Gap'>
-                    <input
-                      value={gap}
-                      onChange={(event) => setGap(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Font size'>
-                    <input
-                      value={fontSize}
-                      onChange={(event) => setFontSize(event.target.value)}
-                      placeholder='e.g. 0.875rem / clamp(...)'
-                    />
-                  </FormField>
-                  <FormField label='Line height'>
-                    <input
-                      value={lineHeight}
-                      onChange={(event) => setLineHeight(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Font weight'>
-                    <input
-                      value={fontWeight}
-                      onChange={(event) => setFontWeight(event.target.value)}
-                      placeholder='e.g. 500 / bold'
-                    />
-                  </FormField>
-                  <FormField label='Border width (px)'>
-                    <input
-                      type='number'
-                      step='1'
-                      min='0'
-                      value={border}
-                      onChange={(event) => setBorder(event.target.value)}
-                      placeholder='empty = none'
-                    />
-                  </FormField>
-                  <FormField label='Border radius (px)'>
-                    <input
-                      type='number'
-                      step='1'
-                      min='0'
-                      value={borderRadius}
-                      onChange={(event) => setBorderRadius(event.target.value)}
-                      placeholder='empty = 0'
-                    />
-                  </FormField>
-                  <FormField label='Opacity'>
-                    <input
-                      value={opacity}
-                      onChange={(event) => setOpacity(event.target.value)}
-                      placeholder='0..1'
-                    />
-                  </FormField>
-                  <FormField label='Shadow'>
-                    <input
-                      value={boxShadow}
-                      onChange={(event) => setBoxShadow(event.target.value)}
-                      placeholder='e.g. 0 4px 12px rgba(...)'
-                    />
-                  </FormField>
-                  <FormField label='Display'>
-                    <select
-                      value={display}
-                      onChange={(event) => setDisplay(event.target.value)}
-                    >
-                      <option value=''>Not set</option>
-                      <option value='block'>block</option>
-                      <option value='inline-block'>inline-block</option>
-                      <option value='flex'>flex</option>
-                      <option value='inline-flex'>inline-flex</option>
-                      <option value='grid'>grid</option>
-                      <option value='none'>none</option>
-                    </select>
-                  </FormField>
-                  <FormField label='Position'>
-                    <select
-                      value={position}
-                      onChange={(event) => setPosition(event.target.value)}
-                    >
-                      <option value=''>Not set</option>
-                      <option value='static'>static</option>
-                      <option value='relative'>relative</option>
-                      <option value='absolute'>absolute</option>
-                      <option value='fixed'>fixed</option>
-                      <option value='sticky'>sticky</option>
-                    </select>
-                  </FormField>
-                  <FormField label='Justify content'>
-                    <select
-                      value={justifyContent}
-                      onChange={(event) =>
-                        setJustifyContent(event.target.value)
-                      }
-                    >
-                      <option value=''>Not set</option>
-                      <option value='flex-start'>flex-start</option>
-                      <option value='center'>center</option>
-                      <option value='flex-end'>flex-end</option>
-                      <option value='space-between'>space-between</option>
-                      <option value='space-around'>space-around</option>
-                      <option value='space-evenly'>space-evenly</option>
-                    </select>
-                  </FormField>
-                  <FormField label='Align items'>
-                    <select
-                      value={alignItems}
-                      onChange={(event) => setAlignItems(event.target.value)}
-                    >
-                      <option value=''>Not set</option>
-                      <option value='stretch'>stretch</option>
-                      <option value='flex-start'>flex-start</option>
-                      <option value='center'>center</option>
-                      <option value='flex-end'>flex-end</option>
-                      <option value='baseline'>baseline</option>
-                    </select>
-                  </FormField>
-                  <FormField label='Text align'>
-                    <select
-                      value={textAlign}
-                      onChange={(event) => setTextAlign(event.target.value)}
-                    >
-                      <option value=''>Not set</option>
-                      <option value='left'>left</option>
-                      <option value='center'>center</option>
-                      <option value='right'>right</option>
-                      <option value='justify'>justify</option>
-                    </select>
-                  </FormField>
-                  <FormField label='z-index'>
-                    <input
-                      value={zIndex}
-                      onChange={(event) => setZIndex(event.target.value)}
-                      placeholder='e.g. 1 / 10'
-                    />
-                  </FormField>
-                </div>
-              </CardBox>
-
-              {isNavigationType ? (
+              {/* General Settings Tab */}
+              {activeTab === 'general' && (
                 <>
-                  <FormField label='Icon URL'>
-                    <input
-                      value={iconUrl}
-                      onChange={(event) => setIconUrl(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Navigation label'>
-                    <input
-                      value={navLabel}
-                      onChange={(event) => setNavLabel(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Navigation type'>
-                    <select
-                      value={navType}
-                      onChange={(event) =>
-                        setNavType(
-                          event.target.value === 'back' ? 'back' : 'forward',
-                        )
-                      }
-                    >
-                      <option value='forward'>Forward</option>
-                      <option value='back'>Back</option>
-                    </select>
-                  </FormField>
-                  <FormField label='Disabled'>
-                    <label className='inline-flex items-center gap-2 text-sm'>
-                      <input
-                        type='checkbox'
-                        checked={navDisabled}
-                        onChange={(event) =>
-                          setNavDisabled(event.target.checked)
-                        }
-                      />
-                      Button is disabled (not clickable)
-                    </label>
-                  </FormField>
-                  <FormField label='Target page ID (optional)'>
-                    <input
-                      value={targetPageId}
-                      onChange={(event) => setTargetPageId(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Transition video URL'>
-                    <input
-                      value={transitionVideoUrl}
-                      onChange={(event) =>
-                        setTransitionVideoUrl(event.target.value)
-                      }
-                    />
-                  </FormField>
-                  <FormField label='Reverse mode'>
-                    <select
-                      value={transitionReverseMode}
-                      onChange={(event) =>
-                        setTransitionReverseMode(
-                          event.target.value === 'separate_video'
-                            ? 'separate_video'
-                            : 'auto_reverse',
-                        )
-                      }
-                    >
-                      <option value='auto_reverse'>Auto reverse</option>
-                      <option value='separate_video'>
-                        Separate reverse video
-                      </option>
-                    </select>
-                  </FormField>
-                  {transitionReverseMode === 'separate_video' ? (
-                    <FormField label='Reverse video URL'>
-                      <input
-                        value={reverseVideoUrl}
-                        onChange={(event) =>
-                          setReverseVideoUrl(event.target.value)
-                        }
-                      />
-                    </FormField>
-                  ) : null}
-                  <FormField label='Transition duration (sec)'>
-                    <input
-                      value={transitionDurationSec}
-                      onChange={(event) =>
-                        setTransitionDurationSec(event.target.value)
-                      }
-                    />
-                  </FormField>
-                </>
-              ) : null}
+                  <CommonSettingsSection
+                    label={form.state.label}
+                    xPercent={form.state.xPercent}
+                    yPercent={form.state.yPercent}
+                    appearDelaySec={form.state.appearDelaySec}
+                    appearDurationSec={form.state.appearDurationSec}
+                    onChange={handleCommonChange}
+                  />
 
-              {isTooltipType ? (
-                <>
-                  <FormField label='Icon URL'>
-                    <input
-                      value={iconUrl}
-                      onChange={(event) => setIconUrl(event.target.value)}
+                  {/* Type-specific sections */}
+                  {form.isNavigationType && (
+                    <NavigationSettingsSection
+                      iconUrl={form.state.iconUrl}
+                      navLabel={form.state.navLabel}
+                      navType={form.state.navType}
+                      navDisabled={form.state.navDisabled}
+                      targetPageId={form.state.targetPageId}
+                      targetPageSlug={form.state.targetPageSlug}
+                      transitionVideoUrl={form.state.transitionVideoUrl}
+                      transitionReverseMode={form.state.transitionReverseMode}
+                      reverseVideoUrl={form.state.reverseVideoUrl}
+                      transitionDurationSec={form.state.transitionDurationSec}
+                      onChange={handleTypeChange}
+                      context='global'
                     />
-                  </FormField>
-                  <FormField label='Tooltip title'>
-                    <input
-                      value={tooltipTitle}
-                      onChange={(event) => setTooltipTitle(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Tooltip text' hasTextareaHeight>
-                    <textarea
-                      value={tooltipText}
-                      onChange={(event) => setTooltipText(event.target.value)}
-                      className='h-28 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
-                    />
-                  </FormField>
-                </>
-              ) : null}
+                  )}
 
-              {isDescriptionType ? (
-                <>
-                  <FormField label='Icon URL'>
-                    <input
-                      value={iconUrl}
-                      onChange={(event) => setIconUrl(event.target.value)}
+                  {form.isTooltipType && (
+                    <TooltipSettingsSection
+                      iconUrl={form.state.iconUrl}
+                      tooltipTitle={form.state.tooltipTitle}
+                      tooltipText={form.state.tooltipText}
+                      onChange={handleTypeChange}
+                      context='global'
                     />
-                  </FormField>
-                  <FormField label='Description title'>
-                    <input
-                      value={descriptionTitle}
-                      onChange={(event) =>
-                        setDescriptionTitle(event.target.value)
-                      }
-                    />
-                  </FormField>
-                  <FormField label='Description text' hasTextareaHeight>
-                    <textarea
-                      value={descriptionText}
-                      onChange={(event) =>
-                        setDescriptionText(event.target.value)
-                      }
-                      className='h-28 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
-                    />
-                  </FormField>
-                  <div className='grid gap-3 md:grid-cols-2'>
-                    <FormField label='Title font size'>
-                      <input
-                        value={descriptionTitleFontSize}
-                        onChange={(event) =>
-                          setDescriptionTitleFontSize(event.target.value)
-                        }
-                        placeholder='e.g. 48px'
-                      />
-                    </FormField>
-                    <FormField label='Text font size'>
-                      <input
-                        value={descriptionTextFontSize}
-                        onChange={(event) =>
-                          setDescriptionTextFontSize(event.target.value)
-                        }
-                        placeholder='e.g. 36px'
-                      />
-                    </FormField>
-                    <FormField label='Title font family'>
-                      <input
-                        value={descriptionTitleFontFamily}
-                        onChange={(event) =>
-                          setDescriptionTitleFontFamily(event.target.value)
-                        }
-                        placeholder='e.g. Arial, sans-serif'
-                      />
-                    </FormField>
-                    <FormField label='Text font family'>
-                      <input
-                        value={descriptionTextFontFamily}
-                        onChange={(event) =>
-                          setDescriptionTextFontFamily(event.target.value)
-                        }
-                        placeholder='e.g. Arial, sans-serif'
-                      />
-                    </FormField>
-                    <FormField label='Title color'>
-                      <input
-                        type='color'
-                        value={descriptionTitleColor || '#000000'}
-                        onChange={(event) =>
-                          setDescriptionTitleColor(event.target.value)
-                        }
-                        className='h-10 w-full'
-                      />
-                    </FormField>
-                    <FormField label='Text color'>
-                      <input
-                        type='color'
-                        value={descriptionTextColor || '#4B5563'}
-                        onChange={(event) =>
-                          setDescriptionTextColor(event.target.value)
-                        }
-                        className='h-10 w-full'
-                      />
-                    </FormField>
-                    <FormField label='Background color'>
-                      <input
-                        value={descriptionBackgroundColor}
-                        onChange={(event) =>
-                          setDescriptionBackgroundColor(event.target.value)
-                        }
-                        placeholder='e.g. transparent, #ffffff'
-                      />
-                    </FormField>
-                  </div>
-                </>
-              ) : null}
+                  )}
 
-              {isGalleryType ? (
+                  {form.isDescriptionType && (
+                    <DescriptionSettingsSection
+                      iconUrl={form.state.iconUrl}
+                      descriptionTitle={form.state.descriptionTitle}
+                      descriptionText={form.state.descriptionText}
+                      descriptionTitleFontSize={
+                        form.state.descriptionTitleFontSize
+                      }
+                      descriptionTextFontSize={
+                        form.state.descriptionTextFontSize
+                      }
+                      descriptionTitleFontFamily={
+                        form.state.descriptionTitleFontFamily
+                      }
+                      descriptionTextFontFamily={
+                        form.state.descriptionTextFontFamily
+                      }
+                      descriptionTitleColor={form.state.descriptionTitleColor}
+                      descriptionTextColor={form.state.descriptionTextColor}
+                      descriptionBackgroundColor={
+                        form.state.descriptionBackgroundColor
+                      }
+                      onChange={handleTypeChange}
+                      context='global'
+                    />
+                  )}
+
+                  {form.isGalleryType && (
+                    <GallerySettingsSection
+                      galleryCards={form.state.galleryCards}
+                      onAddCard={form.addGalleryCard}
+                      onRemoveCard={form.removeGalleryCard}
+                      onUpdateCard={form.updateGalleryCard}
+                      context='global'
+                    />
+                  )}
+
+                  {form.isCarouselType && (
+                    <CarouselSettingsSection
+                      carouselPrevIconUrl={form.state.carouselPrevIconUrl}
+                      carouselNextIconUrl={form.state.carouselNextIconUrl}
+                      carouselSlides={form.state.carouselSlides}
+                      onAddSlide={form.addCarouselSlide}
+                      onRemoveSlide={form.removeCarouselSlide}
+                      onUpdateSlide={form.updateCarouselSlide}
+                      onChange={handleTypeChange}
+                      context='global'
+                    />
+                  )}
+
+                  {form.isMediaType && (
+                    <MediaSettingsSection
+                      elementType={
+                        currentElementType as 'video_player' | 'audio_player'
+                      }
+                      mediaUrl={form.state.mediaUrl}
+                      mediaAutoplay={form.state.mediaAutoplay}
+                      mediaLoop={form.state.mediaLoop}
+                      mediaMuted={form.state.mediaMuted}
+                      onChange={handleTypeChange}
+                      context='global'
+                    />
+                  )}
+                </>
+              )}
+
+              {/* CSS Styles Tab */}
+              {activeTab === 'css' && (
                 <CardBox className='border border-gray-200 dark:border-dark-700'>
-                  <div className='mb-3 flex items-center justify-between'>
-                    <h3 className='text-sm font-semibold'>Gallery cards</h3>
-                    <BaseButton
-                      color='info'
-                      icon={mdiPlus}
-                      small
-                      label='Add card'
-                      onClick={addGalleryCard}
-                    />
-                  </div>
-
-                  <div className='space-y-4'>
-                    {galleryCards.length === 0 ? (
-                      <p className='text-sm text-gray-500'>No cards yet.</p>
-                    ) : (
-                      galleryCards.map((card, index) => (
-                        <CardBox
-                          key={card.id}
-                          className='border border-gray-200 dark:border-dark-700'
-                        >
-                          <div className='mb-3 flex items-center justify-between'>
-                            <h4 className='text-sm font-semibold'>
-                              Card {index + 1}
-                            </h4>
-                            <BaseButton
-                              color='danger'
-                              icon={mdiTrashCan}
-                              small
-                              outline
-                              onClick={() => removeGalleryCard(card.id)}
-                            />
-                          </div>
-                          <div className='grid gap-3 md:grid-cols-2'>
-                            <FormField label='Image URL'>
-                              <input
-                                value={card.imageUrl}
-                                onChange={(event) =>
-                                  updateGalleryCard(
-                                    card.id,
-                                    'imageUrl',
-                                    event.target.value,
-                                  )
-                                }
-                              />
-                            </FormField>
-                            <FormField label='Title'>
-                              <input
-                                value={card.title}
-                                onChange={(event) =>
-                                  updateGalleryCard(
-                                    card.id,
-                                    'title',
-                                    event.target.value,
-                                  )
-                                }
-                              />
-                            </FormField>
-                            <div className='md:col-span-2'>
-                              <FormField label='Description' hasTextareaHeight>
-                                <textarea
-                                  value={card.description}
-                                  onChange={(event) =>
-                                    updateGalleryCard(
-                                      card.id,
-                                      'description',
-                                      event.target.value,
-                                    )
-                                  }
-                                  className='h-24 w-full rounded border border-gray-300 p-2 dark:border-dark-700 dark:bg-dark-900'
-                                />
-                              </FormField>
-                            </div>
-                          </div>
-                        </CardBox>
-                      ))
-                    )}
-                  </div>
+                  <StyleSettingsSection
+                    values={form.getStyleValues()}
+                    onChange={handleStyleChange}
+                  />
                 </CardBox>
-              ) : null}
+              )}
 
-              {isCarouselType ? (
-                <CardBox className='border border-gray-200 dark:border-dark-700'>
-                  <h3 className='mb-3 text-sm font-semibold'>
-                    Carousel settings
-                  </h3>
-                  <div className='grid gap-3 md:grid-cols-2'>
-                    <FormField label='Previous icon URL'>
-                      <input
-                        value={carouselPrevIconUrl}
-                        onChange={(event) =>
-                          setCarouselPrevIconUrl(event.target.value)
-                        }
-                      />
-                    </FormField>
-                    <FormField label='Next icon URL'>
-                      <input
-                        value={carouselNextIconUrl}
-                        onChange={(event) =>
-                          setCarouselNextIconUrl(event.target.value)
-                        }
-                      />
-                    </FormField>
-                  </div>
-                  <div className='mb-3 mt-2 flex items-center justify-between'>
-                    <h3 className='text-sm font-semibold'>Carousel slides</h3>
-                    <BaseButton
-                      color='info'
-                      icon={mdiPlus}
-                      small
-                      label='Add slide'
-                      onClick={addCarouselSlide}
-                    />
-                  </div>
-
-                  <div className='space-y-4'>
-                    {carouselSlides.length === 0 ? (
-                      <p className='text-sm text-gray-500'>No slides yet.</p>
-                    ) : (
-                      carouselSlides.map((slide, index) => (
-                        <CardBox
-                          key={slide.id}
-                          className='border border-gray-200 dark:border-dark-700'
-                        >
-                          <div className='mb-3 flex items-center justify-between'>
-                            <h4 className='text-sm font-semibold'>
-                              Slide {index + 1}
-                            </h4>
-                            <BaseButton
-                              color='danger'
-                              icon={mdiTrashCan}
-                              small
-                              outline
-                              onClick={() => removeCarouselSlide(slide.id)}
-                            />
-                          </div>
-                          <div className='grid gap-3 md:grid-cols-2'>
-                            <FormField label='Image URL'>
-                              <input
-                                value={slide.imageUrl}
-                                onChange={(event) =>
-                                  updateCarouselSlide(
-                                    slide.id,
-                                    'imageUrl',
-                                    event.target.value,
-                                  )
-                                }
-                              />
-                            </FormField>
-                            <FormField label='Caption'>
-                              <input
-                                value={slide.caption}
-                                onChange={(event) =>
-                                  updateCarouselSlide(
-                                    slide.id,
-                                    'caption',
-                                    event.target.value,
-                                  )
-                                }
-                              />
-                            </FormField>
-                          </div>
-                        </CardBox>
-                      ))
-                    )}
-                  </div>
-                </CardBox>
-              ) : null}
-
-              {isMediaType ? (
-                <>
-                  <FormField label='Media URL'>
-                    <input
-                      value={mediaUrl}
-                      onChange={(event) => setMediaUrl(event.target.value)}
-                    />
-                  </FormField>
-                  <FormField label='Playback'>
-                    <div className='flex flex-wrap gap-4'>
-                      <label className='inline-flex items-center gap-2 text-sm'>
-                        <input
-                          type='checkbox'
-                          checked={mediaAutoplay}
-                          onChange={(event) =>
-                            setMediaAutoplay(event.target.checked)
-                          }
-                        />
-                        Autoplay
-                      </label>
-                      <label className='inline-flex items-center gap-2 text-sm'>
-                        <input
-                          type='checkbox'
-                          checked={mediaLoop}
-                          onChange={(event) =>
-                            setMediaLoop(event.target.checked)
-                          }
-                        />
-                        Loop
-                      </label>
-                      <label className='inline-flex items-center gap-2 text-sm'>
-                        <input
-                          type='checkbox'
-                          checked={mediaMuted}
-                          onChange={(event) =>
-                            setMediaMuted(event.target.checked)
-                          }
-                        />
-                        Muted
-                      </label>
-                    </div>
-                  </FormField>
-                </>
-              ) : null}
-
-              {errorMessage ? (
+              {errorMessage && (
                 <p className='text-sm text-red-600'>{errorMessage}</p>
-              ) : null}
-              {successMessage ? (
+              )}
+              {successMessage && (
                 <p className='text-sm text-green-600'>{successMessage}</p>
-              ) : null}
+              )}
             </div>
           )}
         </CardBox>
diff --git a/frontend/src/pages/project-element-defaults/[id].tsx b/frontend/src/pages/project-element-defaults/[id].tsx
index 588de5a..6699643 100644
--- a/frontend/src/pages/project-element-defaults/[id].tsx
+++ b/frontend/src/pages/project-element-defaults/[id].tsx
@@ -1,4 +1,4 @@
-import { mdiContentSave, mdiCog, mdiRefresh, mdiSync } from '@mdi/js';
+import { mdiContentSave, mdiCog, mdiSync } from '@mdi/js';
 import axios from 'axios';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -18,7 +18,21 @@ import SectionMain from '../../components/SectionMain';
 import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
 import { getPageTitle } from '../../config';
 import { logger } from '../../lib/logger';
-import { parseJsonObject } from '../../lib/parseJson';
+import type { CanvasElementType } from '../../types/constructor';
+
+// Import shared element settings components
+import {
+  ElementSettingsTabs,
+  StyleSettingsSection,
+  CommonSettingsSection,
+  NavigationSettingsSection,
+  TooltipSettingsSection,
+  DescriptionSettingsSection,
+  MediaSettingsSection,
+  GallerySettingsSection,
+  CarouselSettingsSection,
+  useElementSettingsForm,
+} from '../../components/ElementSettings';
 
 type ProjectElementDefault = {
   id: string;
@@ -33,9 +47,9 @@ type ProjectElementDefault = {
 
 type DiffResult = {
   projectDefault: ProjectElementDefault | null;
-  globalDefault: any | null;
-  hasChanges: boolean;
-  canReset: boolean;
+  globalDefault: Record<string, unknown> | null;
+  isDifferent: boolean;
+  hasGlobalDefault: boolean;
 };
 
 const toHumanLabel = (value: string) =>
@@ -44,6 +58,11 @@ const toHumanLabel = (value: string) =>
     .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
     .join(' ');
 
+const SETTINGS_TABS = [
+  { id: 'general', label: 'General Settings' },
+  { id: 'css', label: 'CSS Styles' },
+];
+
 const ProjectElementDefaultDetailsPage = () => {
   const router = useRouter();
   const id = useMemo(() => {
@@ -61,7 +80,7 @@ const ProjectElementDefaultDetailsPage = () => {
   const [item, setItem] = useState<ProjectElementDefault | null>(null);
   const [name, setName] = useState('');
   const [sortOrder, setSortOrder] = useState(0);
-  const [settingsJson, setSettingsJson] = useState('{}');
+  const [activeTab, setActiveTab] = useState('general');
 
   const [diff, setDiff] = useState<DiffResult | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -70,6 +89,14 @@ const ProjectElementDefaultDetailsPage = () => {
   const [errorMessage, setErrorMessage] = useState('');
   const [successMessage, setSuccessMessage] = useState('');
 
+  const currentElementType = (item?.element_type || '') as CanvasElementType;
+
+  // Use shared form hook
+  const form = useElementSettingsForm({ elementType: currentElementType });
+
+  // Extract stable callback reference to avoid infinite loop
+  const applySettings = form.applySettings;
+
   const loadItem = useCallback(async () => {
     if (!id) return;
 
@@ -90,13 +117,15 @@ const ProjectElementDefaultDetailsPage = () => {
       setItem(nextItem);
       setName(String(nextItem.name || ''));
       setSortOrder(Number(nextItem.sort_order || 0));
-
-      const settings = parseJsonObject(nextItem.settings_json, {});
-      setSettingsJson(JSON.stringify(settings, null, 2));
-    } catch (error: any) {
+      applySettings(nextItem.settings_json);
+    } catch (error: unknown) {
+      const err = error as {
+        response?: { data?: { message?: string } };
+        message?: string;
+      };
       const message =
-        error?.response?.data?.message ||
-        error?.message ||
+        err?.response?.data?.message ||
+        err?.message ||
         'Failed to load project element default.';
       logger.error(
         'Failed to load project element default details:',
@@ -107,7 +136,7 @@ const ProjectElementDefaultDetailsPage = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [id]);
+  }, [applySettings, id]);
 
   const loadDiff = useCallback(async () => {
     if (!id) return;
@@ -115,8 +144,11 @@ const ProjectElementDefaultDetailsPage = () => {
     try {
       const response = await axios.get(`/project-element-defaults/${id}/diff`);
       setDiff(response?.data || null);
-    } catch (error: any) {
-      logger.error('Failed to load diff:', error);
+    } catch (error: unknown) {
+      logger.error(
+        'Failed to load diff:',
+        error instanceof Error ? error : { error },
+      );
       setDiff(null);
     }
   }, [id]);
@@ -127,39 +159,39 @@ const ProjectElementDefaultDetailsPage = () => {
     loadDiff();
   }, [loadItem, loadDiff, router.isReady]);
 
+  // Extract stable callback reference for buildSettingsJson
+  const buildSettingsJson = form.buildSettingsJson;
+
   const handleSave = useCallback(async () => {
     if (!id || !item) return;
 
+    const settings = buildSettingsJson();
+
     try {
       setIsSaving(true);
       setErrorMessage('');
       setSuccessMessage('');
 
-      let parsedSettings = {};
-      try {
-        parsedSettings = JSON.parse(settingsJson);
-      } catch {
-        setErrorMessage('Invalid JSON in settings.');
-        setIsSaving(false);
-        return;
-      }
-
       await axios.put(`/project-element-defaults/${id}`, {
         id,
         data: {
           name: name.trim() || item.element_type,
           sort_order: sortOrder,
-          settings_json: parsedSettings,
+          settings_json: settings,
         },
       });
 
       setSuccessMessage('Project element default saved successfully.');
       await loadItem();
       await loadDiff();
-    } catch (error: any) {
+    } catch (error: unknown) {
+      const err = error as {
+        response?: { data?: { message?: string } };
+        message?: string;
+      };
       const message =
-        error?.response?.data?.message ||
-        error?.message ||
+        err?.response?.data?.message ||
+        err?.message ||
         'Failed to save project element default.';
       logger.error(
         'Failed to save project element default:',
@@ -169,7 +201,7 @@ const ProjectElementDefaultDetailsPage = () => {
     } finally {
       setIsSaving(false);
     }
-  }, [id, item, name, sortOrder, settingsJson, loadItem, loadDiff]);
+  }, [buildSettingsJson, id, item, name, sortOrder, loadItem, loadDiff]);
 
   const handleResetToGlobal = useCallback(async () => {
     if (!id) return;
@@ -190,10 +222,14 @@ const ProjectElementDefaultDetailsPage = () => {
       setSuccessMessage('Successfully reset to global default.');
       await loadItem();
       await loadDiff();
-    } catch (error: any) {
+    } catch (error: unknown) {
+      const err = error as {
+        response?: { data?: { message?: string } };
+        message?: string;
+      };
       const message =
-        error?.response?.data?.message ||
-        error?.message ||
+        err?.response?.data?.message ||
+        err?.message ||
         'Failed to reset to global default.';
       logger.error(
         'Failed to reset to global default:',
@@ -205,6 +241,33 @@ const ProjectElementDefaultDetailsPage = () => {
     }
   }, [id, loadItem, loadDiff]);
 
+  // Extract stable callback reference for setField
+  const setField = form.setField;
+
+  // Handler for style section changes
+  const handleStyleChange = useCallback(
+    (prop: string, value: string) => {
+      setField(prop as keyof typeof form.state, value);
+    },
+    [setField],
+  );
+
+  // Handler for common section changes
+  const handleCommonChange = useCallback(
+    (field: string, value: string) => {
+      setField(field as keyof typeof form.state, value);
+    },
+    [setField],
+  );
+
+  // Handler for type-specific section changes
+  const handleTypeChange = useCallback(
+    (field: string, value: string | boolean) => {
+      setField(field as keyof typeof form.state, value as never);
+    },
+    [setField],
+  );
+
   if (isLoading) {
     return (
       <>
@@ -260,7 +323,7 @@ const ProjectElementDefaultDetailsPage = () => {
               label={isResetting ? 'Resetting...' : 'Reset to Global'}
               icon={mdiSync}
               onClick={handleResetToGlobal}
-              disabled={isResetting || isSaving || !diff?.canReset}
+              disabled={isResetting || isSaving || !diff?.hasGlobalDefault}
             />
             <BaseButton
               color='info'
@@ -284,11 +347,11 @@ const ProjectElementDefaultDetailsPage = () => {
           </div>
         )}
 
-        {diff?.hasChanges && (
+        {diff?.isDifferent && (
           <div className='mb-4 rounded bg-yellow-50 p-3 text-sm text-yellow-700'>
             This project element default has been customized and differs from
             the global default.
-            {diff.canReset &&
+            {diff.hasGlobalDefault &&
               ' Click "Reset to Global" to restore the global settings.'}
           </div>
         )}
@@ -332,19 +395,126 @@ const ProjectElementDefaultDetailsPage = () => {
               />
             </FormField>
 
-            <FormField label='Settings (JSON)'>
-              <textarea
-                className='h-64 w-full rounded border border-gray-300 px-3 py-2 font-mono text-sm'
-                value={settingsJson}
-                onChange={(e) => setSettingsJson(e.target.value)}
-                placeholder='{ }'
-              />
-              <p className='mt-1 text-xs text-gray-500'>
-                Edit the JSON settings directly. These settings control the
-                default appearance and behavior of new elements of this type
-                created in the constructor.
-              </p>
-            </FormField>
+            {/* Tabs */}
+            <ElementSettingsTabs
+              activeTab={activeTab}
+              onTabChange={setActiveTab}
+              tabs={SETTINGS_TABS}
+            />
+
+            {/* General Settings Tab */}
+            {activeTab === 'general' && (
+              <>
+                <CommonSettingsSection
+                  label={form.state.label}
+                  xPercent={form.state.xPercent}
+                  yPercent={form.state.yPercent}
+                  appearDelaySec={form.state.appearDelaySec}
+                  appearDurationSec={form.state.appearDurationSec}
+                  onChange={handleCommonChange}
+                />
+
+                {/* Type-specific sections */}
+                {form.isNavigationType && (
+                  <NavigationSettingsSection
+                    iconUrl={form.state.iconUrl}
+                    navLabel={form.state.navLabel}
+                    navType={form.state.navType}
+                    navDisabled={form.state.navDisabled}
+                    targetPageId={form.state.targetPageId}
+                    targetPageSlug={form.state.targetPageSlug}
+                    transitionVideoUrl={form.state.transitionVideoUrl}
+                    transitionReverseMode={form.state.transitionReverseMode}
+                    reverseVideoUrl={form.state.reverseVideoUrl}
+                    transitionDurationSec={form.state.transitionDurationSec}
+                    onChange={handleTypeChange}
+                    context='project'
+                  />
+                )}
+
+                {form.isTooltipType && (
+                  <TooltipSettingsSection
+                    iconUrl={form.state.iconUrl}
+                    tooltipTitle={form.state.tooltipTitle}
+                    tooltipText={form.state.tooltipText}
+                    onChange={handleTypeChange}
+                    context='project'
+                  />
+                )}
+
+                {form.isDescriptionType && (
+                  <DescriptionSettingsSection
+                    iconUrl={form.state.iconUrl}
+                    descriptionTitle={form.state.descriptionTitle}
+                    descriptionText={form.state.descriptionText}
+                    descriptionTitleFontSize={
+                      form.state.descriptionTitleFontSize
+                    }
+                    descriptionTextFontSize={form.state.descriptionTextFontSize}
+                    descriptionTitleFontFamily={
+                      form.state.descriptionTitleFontFamily
+                    }
+                    descriptionTextFontFamily={
+                      form.state.descriptionTextFontFamily
+                    }
+                    descriptionTitleColor={form.state.descriptionTitleColor}
+                    descriptionTextColor={form.state.descriptionTextColor}
+                    descriptionBackgroundColor={
+                      form.state.descriptionBackgroundColor
+                    }
+                    onChange={handleTypeChange}
+                    context='project'
+                  />
+                )}
+
+                {form.isGalleryType && (
+                  <GallerySettingsSection
+                    galleryCards={form.state.galleryCards}
+                    onAddCard={form.addGalleryCard}
+                    onRemoveCard={form.removeGalleryCard}
+                    onUpdateCard={form.updateGalleryCard}
+                    context='project'
+                  />
+                )}
+
+                {form.isCarouselType && (
+                  <CarouselSettingsSection
+                    carouselPrevIconUrl={form.state.carouselPrevIconUrl}
+                    carouselNextIconUrl={form.state.carouselNextIconUrl}
+                    carouselSlides={form.state.carouselSlides}
+                    onAddSlide={form.addCarouselSlide}
+                    onRemoveSlide={form.removeCarouselSlide}
+                    onUpdateSlide={form.updateCarouselSlide}
+                    onChange={handleTypeChange}
+                    context='project'
+                  />
+                )}
+
+                {form.isMediaType && (
+                  <MediaSettingsSection
+                    elementType={
+                      currentElementType as 'video_player' | 'audio_player'
+                    }
+                    mediaUrl={form.state.mediaUrl}
+                    mediaAutoplay={form.state.mediaAutoplay}
+                    mediaLoop={form.state.mediaLoop}
+                    mediaMuted={form.state.mediaMuted}
+                    onChange={handleTypeChange}
+                    context='project'
+                  />
+                )}
+              </>
+            )}
+
+            {/* CSS Styles Tab */}
+            {activeTab === 'css' && (
+              <CardBox className='border border-gray-200 dark:border-dark-700'>
+                <StyleSettingsSection
+                  values={form.getStyleValues()}
+                  onChange={handleStyleChange}
+                />
+              </CardBox>
+            )}
           </div>
         </CardBox>
 
diff --git a/frontend/src/pages/projects/projects-view.tsx b/frontend/src/pages/projects/projects-view.tsx
index 8a48ed9..af4e535 100644
--- a/frontend/src/pages/projects/projects-view.tsx
+++ b/frontend/src/pages/projects/projects-view.tsx
@@ -547,7 +547,6 @@ const ProjectsView = () => {
             </CardBox>
           </>
 
-
           <>
             <p className={'block font-bold mb-2'}>
               Project_audio_tracks Project