- {/* ── Color Schemes ──────────────────────────────────────────────── */}
+ {/* ── Color Schemes (Enhanced with Presets) ─────────────────────── */}
+
updateTheme({ colors: { ...theme.colors, ...colors } })}
+ />
+
+ {/* Advanced Color Controls */}
}
+ defaultOpen={false}
>
-
- {DEFAULT_COLOR_SCHEMES.map((scheme) => {
- const active = isSchemeActive(scheme);
- return (
-
- );
- })}
-
{COLOR_LABELS.map(({ key, label, description }) => (
@@ -233,111 +178,13 @@ export function ThemeSettingsPanel() {
- {/* ── Typography ─────────────────────────────────────────────────── */}
- }
- >
- {/* Body font */}
-
-
-
-
-
- {/* Heading font */}
-
-
-
-
-
- {/* Base font size */}
-
-
-
-
- {theme.typography.baseFontSize}px
-
-
-
- updateTheme({
- typography: { ...theme.typography, baseFontSize: v },
- })
- }
- aria-label="Base font size"
- aria-valuetext={`${theme.typography.baseFontSize} pixels`}
- />
-
-
-
-
- {theme.typography.headingScale.toFixed(3)}
-
-
-
- updateTheme({
- typography: { ...theme.typography, headingScale: v },
- })
- }
- aria-label="Heading scale"
- aria-valuetext={`${theme.typography.headingScale.toFixed(3)} ratio`}
- />
-
+ {TYPOGRAPHY_PRESETS.map((preset) => (
+ handleApplyPreset(preset)}
+ />
+ ))}
+
+
+ {/* Custom Settings */}
+
+
+
+
+
+
+ onSettingsChange({ baseFontSize: value })
+ }
+ aria-label="Base font size"
+ />
+
+ Default text size (14-18px recommended)
+
+
+
+
+
+
+
+
+ onSettingsChange({ headingScale: value })
+ }
+ aria-label="Heading scale multiplier"
+ />
+
+ Controls heading size relationships (1.125-1.5 recommended)
+
+
+
+ {/* Heading Size Preview */}
+
+
+
+
H1: {headingSizes.h1}px
+
H2: {headingSizes.h2}px
+
H3: {headingSizes.h3}px
+
H4: {headingSizes.h4}px
+
H5: {headingSizes.h5}px
+
H6: {headingSizes.h6}px
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/storefront/inspector-overlay.tsx b/src/components/storefront/inspector-overlay.tsx
new file mode 100644
index 00000000..78703bc3
--- /dev/null
+++ b/src/components/storefront/inspector-overlay.tsx
@@ -0,0 +1,276 @@
+'use client';
+
+/**
+ * Inspector Overlay
+ *
+ * Visual overlay for inspector mode that shows section boundaries,
+ * edit buttons, and highlights on hover. Communicates with the parent
+ * editor window via PostMessage to select sections.
+ *
+ * Accessibility: Keyboard navigation, focus management, ARIA attributes
+ */
+
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Pencil } from 'lucide-react';
+
+interface InspectorOverlayProps {
+ enabled?: boolean;
+}
+
+export function InspectorOverlay({ enabled: enabledProp }: InspectorOverlayProps) {
+ const [inspectorMode, setInspectorMode] = useState(enabledProp ?? false);
+ const [hoveredSection, setHoveredSection] = useState(null);
+ const [hoveredRect, setHoveredRect] = useState(null);
+ const overlayRef = useRef(null);
+
+ // Sync external enabled prop with internal state
+ useEffect(() => {
+ if (enabledProp !== undefined) {
+ setInspectorMode(enabledProp);
+ if (!enabledProp) {
+ setHoveredSection(null);
+ setHoveredRect(null);
+ }
+ }
+ }, [enabledProp]);
+
+ // ─── PostMessage listener ───────────────────────────────────────────
+ useEffect(() => {
+ const handleMessage = (event: MessageEvent) => {
+ // Only accept messages from same origin (parent editor)
+ if (event.origin !== window.location.origin) return;
+
+ const data = event.data;
+ if (!data || typeof data.type !== 'string') return;
+
+ if (data.type === 'STORMCOM_SET_INSPECTOR') {
+ setInspectorMode(!!data.enabled);
+ if (!data.enabled) {
+ setHoveredSection(null);
+ setHoveredRect(null);
+ }
+ }
+ };
+
+ window.addEventListener('message', handleMessage);
+ return () => window.removeEventListener('message', handleMessage);
+ }, []);
+
+ // ─── Track hovered section ─────────────────────────────────────────
+ const handleMouseMove = useCallback(
+ (e: MouseEvent) => {
+ if (!inspectorMode) return;
+
+ const target = e.target as HTMLElement;
+ const section = target.closest('[data-section-id]') as HTMLElement;
+
+ if (section) {
+ const sectionId = section.getAttribute('data-section-id');
+ if (sectionId !== hoveredSection) {
+ setHoveredSection(sectionId);
+ setHoveredRect(section.getBoundingClientRect());
+ }
+ } else if (hoveredSection !== null) {
+ setHoveredSection(null);
+ setHoveredRect(null);
+ }
+ },
+ [inspectorMode, hoveredSection],
+ );
+
+ useEffect(() => {
+ if (inspectorMode) {
+ document.addEventListener('mousemove', handleMouseMove);
+ return () => document.removeEventListener('mousemove', handleMouseMove);
+ }
+ }, [inspectorMode, handleMouseMove]);
+
+ // ─── Handle section selection ──────────────────────────────────────
+ const handleSelectSection = useCallback(
+ (sectionId: string) => {
+ if (window.parent !== window) {
+ window.parent.postMessage(
+ {
+ type: 'STORMCOM_SELECT_SECTION',
+ sectionId,
+ },
+ window.location.origin,
+ );
+ }
+ },
+ [],
+ );
+
+ // ─── Handle click to edit ──────────────────────────────────────────
+ const handleClick = useCallback(
+ (e: MouseEvent) => {
+ if (!inspectorMode) return;
+
+ const target = e.target as HTMLElement;
+ const section = target.closest('[data-section-id]');
+
+ if (section) {
+ e.preventDefault();
+ e.stopPropagation();
+ const sectionId = section.getAttribute('data-section-id');
+ if (sectionId) {
+ handleSelectSection(sectionId);
+ }
+ }
+ },
+ [inspectorMode, handleSelectSection],
+ );
+
+ useEffect(() => {
+ if (inspectorMode) {
+ document.addEventListener('click', handleClick, true);
+ return () => document.removeEventListener('click', handleClick, true);
+ }
+ }, [inspectorMode, handleClick]);
+
+ // ─── Keyboard navigation ───────────────────────────────────────────
+ const handleKeyDown = useCallback(
+ (e: KeyboardEvent) => {
+ if (!inspectorMode) return;
+
+ // Escape to exit inspector mode
+ if (e.key === 'Escape') {
+ if (window.parent !== window) {
+ window.parent.postMessage(
+ {
+ type: 'STORMCOM_SET_INSPECTOR',
+ enabled: false,
+ },
+ window.location.origin,
+ );
+ }
+ }
+
+ // Enter to select hovered section
+ if (e.key === 'Enter' && hoveredSection) {
+ handleSelectSection(hoveredSection);
+ }
+ },
+ [inspectorMode, hoveredSection, handleSelectSection],
+ );
+
+ useEffect(() => {
+ if (inspectorMode) {
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }
+ }, [inspectorMode, handleKeyDown]);
+
+ // ─── Add inspector class to body ───────────────────────────────────
+ useEffect(() => {
+ if (inspectorMode) {
+ document.body.classList.add('stormcom-inspector-active');
+ return () => {
+ document.body.classList.remove('stormcom-inspector-active');
+ };
+ }
+ }, [inspectorMode]);
+
+ if (!inspectorMode || !hoveredSection || !hoveredRect) return null;
+
+ // Calculate overlay position (fixed position relative to viewport)
+ const overlayStyle = {
+ position: 'fixed' as const,
+ top: hoveredRect.top,
+ left: hoveredRect.left,
+ width: hoveredRect.width,
+ height: hoveredRect.height,
+ pointerEvents: 'none' as const,
+ };
+
+ return (
+ <>
+ {/* Global inspector styles */}
+
+
+ {/* Overlay with edit button */}
+
+ {/* Semi-transparent overlay */}
+
+
+ {/* Edit button toolbar */}
+
+
+
+
+ {/* Section label */}
+
+ {formatSectionName(hoveredSection)}
+
+
+
Inspector Mode Active
+
+
Click to edit section
+
Enter to select
+
Esc to exit
+
+