Overhaul builder UX with walkthrough mode, dropdown selector, and legacy route

src/components/builder/components/navigation/ModeToggle.tsx

@@ -1,38 +1,77 @@
-import React, { memo } from 'react';
+import React, { memo, Fragment } from 'react';
+import { Menu, Transition } from '@headlessui/react';
+import { Check, ChevronDown } from 'lucide-react';
 
-export type BuilderMode = 'simple' | 'advanced';
+export type BuilderMode = 'walkthrough' | 'simple' | 'advanced';
 
 interface Props {
   mode: BuilderMode;
   onChange: (mode: BuilderMode) => void;
 }
 
-const ModeToggle: React.FC<Props> = memo(({ mode, onChange }) => (
-  <div
-    className="flex items-center rounded-lg p-0.5 h-8"
-    style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(196,124,46,0.16)' }}
-    aria-label="Builder mode"
-  >
-    {(['simple', 'advanced'] as const).map((item) => {
-      const active = mode === item;
-      return (
-        <button
-          key={item}
-          type="button"
-          onClick={() => onChange(item)}
-          aria-pressed={active}
-          className="h-7 px-2.5 rounded-md syne-font text-[10px] font-bold uppercase tracking-wider transition-all"
+const MODE_OPTIONS: { id: BuilderMode; label: string }[] = [
+  { id: 'walkthrough', label: 'Walkthrough' },
+  { id: 'simple', label: 'Simple' },
+  { id: 'advanced', label: 'Advanced' },
+];
+
+const ModeToggle: React.FC<Props> = memo(({ mode, onChange }) => {
+  const activeLabel = MODE_OPTIONS.find((option) => option.id === mode)?.label ?? 'Walkthrough';
+
+  return (
+    <Menu as="div" className="relative">
+      <Menu.Button
+        className="h-8 px-3 rounded-md syne-font text-[10px] font-bold uppercase tracking-wider inline-flex items-center gap-1.5 transition-colors"
+        style={{
+          color: 'var(--film-cream)',
+          background: 'rgba(255,255,255,0.04)',
+          border: '1px solid rgba(196,124,46,0.2)',
+        }}
+      >
+        {activeLabel} Mode
+        <ChevronDown size={12} />
+      </Menu.Button>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-120"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-90"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items
+          className="absolute left-0 mt-2 min-w-[180px] rounded-lg p-1 z-50 focus:outline-none"
           style={{
-            color: active ? '#070706' : 'var(--film-text-dim)',
-            background: active ? 'var(--film-amber)' : 'transparent',
+            background: 'var(--film-dark)',
+            border: '1px solid rgba(196,124,46,0.2)',
+            boxShadow: '0 12px 30px rgba(0,0,0,0.45)',
           }}
         >
-          {item}
-        </button>
-      );
-    })}
-  </div>
-));
+          {MODE_OPTIONS.map((item) => (
+            <Menu.Item key={item.id}>
+              {({ active }) => (
+                <button
+                  type="button"
+                  onClick={() => onChange(item.id)}
+                  className="w-full h-8 px-2.5 rounded-md text-left inline-flex items-center justify-between text-[11px] syne-font transition-colors"
+                  style={{
+                    color: mode === item.id ? 'var(--film-amber)' : 'var(--film-cream)',
+                    background: active ? 'rgba(196,124,46,0.1)' : 'transparent',
+                  }}
+                >
+                  <span>{item.label}</span>
+                  {mode === item.id && <Check size={12} />}
+                </button>
+              )}
+            </Menu.Item>
+          ))}
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+});
 
 ModeToggle.displayName = 'ModeToggle';
 export default ModeToggle;

src/components/builder/components/walkthrough/RevealAndExport.tsx

@@ -0,0 +1,110 @@
+import React, { memo, useRef, useState } from 'react';
+import { Check, Copy, Download } from 'lucide-react';
+import PreviewCanvas from '../PreviewCanvas';
+import ExportPopover from '../ExportPopover';
+import type { ExtensionType, PosterConfig, RatingType } from '../../types';
+import { generateApiUrl } from '../../utils';
+
+interface Props {
+  config: PosterConfig;
+  setConfig: React.Dispatch<React.SetStateAction<PosterConfig>>;
+  selectedIds: Set<RatingType>;
+  onSelect: (id: RatingType, multi: boolean) => void;
+  baseUrl: string;
+  handleLoadConfig: (url: string) => void;
+}
+
+const RevealAndExport: React.FC<Props> = memo(
+  ({ config, setConfig, selectedIds, onSelect, baseUrl, handleLoadConfig }) => {
+    const [exportOpen, setExportOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const exportBtnRef = useRef<HTMLButtonElement>(null);
+
+    const setExtension = (ext: ExtensionType) => setConfig((prev) => ({ ...prev, extension: ext }));
+
+    const copyApiUrl = async () => {
+      const url = generateApiUrl(config, baseUrl);
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    };
+
+    return (
+      <section
+        className="relative mx-auto max-w-6xl rounded-2xl border overflow-hidden"
+        style={{ borderColor: 'rgba(196,124,46,0.15)' }}
+      >
+        <div className="h-[70dvh] bg-[#111113]">
+          <PreviewCanvas
+            config={config}
+            setConfig={setConfig}
+            selectedIds={selectedIds}
+            onSelect={onSelect}
+          />
+        </div>
+
+        <div
+          className="absolute left-4 right-4 bottom-4 rounded-xl border p-3 sm:p-4 backdrop-blur-xl"
+          style={{
+            borderColor: 'rgba(255,255,255,0.22)',
+            background: 'rgba(15,15,15,0.58)',
+          }}
+        >
+          <div className="flex flex-wrap items-center gap-2">
+            {(['png', 'jpg', 'webp', 'svg'] as ExtensionType[]).map((ext) => (
+              <button
+                key={ext}
+                type="button"
+                onClick={() => setExtension(ext)}
+                className="h-8 px-3 rounded-md text-[10px] syne-font uppercase tracking-wider border"
+                style={{
+                  borderColor: config.extension === ext ? 'var(--film-amber)' : 'rgba(255,255,255,0.2)',
+                  color: config.extension === ext ? 'var(--film-amber)' : 'var(--film-cream)',
+                }}
+              >
+                {ext}
+              </button>
+            ))}
+
+            <button
+              ref={exportBtnRef}
+              type="button"
+              onClick={() => setExportOpen((v) => !v)}
+              className="h-8 px-3 rounded-md inline-flex items-center gap-1.5 text-[10px] syne-font font-bold uppercase tracking-wider"
+              style={{ background: 'var(--film-amber)', color: '#070706' }}
+            >
+              <Download size={12} />
+              Download
+            </button>
+
+            <button
+              type="button"
+              onClick={copyApiUrl}
+              className="h-8 px-3 rounded-md inline-flex items-center gap-1.5 text-[10px] syne-font uppercase tracking-wider border"
+              style={{
+                borderColor: 'rgba(255,255,255,0.2)',
+                color: copied ? 'var(--film-amber)' : 'var(--film-cream)',
+              }}
+            >
+              {copied ? <Check size={12} /> : <Copy size={12} />}
+              {copied ? 'Copied' : 'Copy API URL'}
+            </button>
+          </div>
+
+          <ExportPopover
+            config={config}
+            onLoadConfig={handleLoadConfig}
+            baseUrl={baseUrl}
+            onExtensionChange={setExtension}
+            isOpen={exportOpen}
+            onClose={() => setExportOpen(false)}
+            anchorRef={exportBtnRef}
+          />
+        </div>
+      </section>
+    );
+  }
+);
+
+RevealAndExport.displayName = 'RevealAndExport';
+export default RevealAndExport;