@startsimpli/ui 0.4.5 → 0.4.7

package/src/components/email-editor/editor-sidebar.tsx

@@ -0,0 +1,791 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import {
+  Block,
+  TextBlock,
+  DividerBlock,
+  CTABlock,
+  ImageBlock,
+  SpacerBlock,
+  SocialBlock,
+  HeaderBlock,
+  FooterBlock,
+  SocialLink,
+  GlobalStyles,
+  BlockStyle,
+} from './types'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
+import { Plus, Trash2, X, Settings, Palette } from 'lucide-react'
+import { THEME_PRESETS } from './utils/defaults'
+import { PLATFORM_ICONS } from './blocks/social-block'
+import { cn } from '../../lib/utils'
+
+interface EditorSidebarProps {
+  selectedBlock: Block | null
+  onBlockChange: (block: Block) => void
+  globalStyles: GlobalStyles
+  onGlobalStylesChange: (styles: GlobalStyles) => void
+  onClose: () => void
+}
+
+export function EditorSidebar({
+  selectedBlock,
+  onBlockChange,
+  globalStyles,
+  onGlobalStylesChange,
+  onClose,
+}: EditorSidebarProps) {
+  const [activeTab, setActiveTab] = useState(selectedBlock ? 'block' : 'global')
+
+  return (
+    <div className="w-72 border-l bg-background flex flex-col h-full overflow-hidden">
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col h-full">
+        <div className="flex items-center justify-between px-3 pt-3 pb-2 border-b">
+          <TabsList className="h-8">
+            <TabsTrigger value="block" className="text-xs h-7 px-2" disabled={!selectedBlock}>
+              <Settings className="h-3 w-3 mr-1" />
+              Block
+            </TabsTrigger>
+            <TabsTrigger value="global" className="text-xs h-7 px-2">
+              <Palette className="h-3 w-3 mr-1" />
+              Design
+            </TabsTrigger>
+          </TabsList>
+          <Button variant="ghost" size="icon" className="h-6 w-6" onClick={onClose}>
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+
+        <TabsContent value="block" className="flex-1 overflow-y-auto p-3 space-y-4 mt-0">
+          {selectedBlock ? (
+            <BlockSettings block={selectedBlock} onChange={onBlockChange} />
+          ) : (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              Select a block to edit its settings
+            </p>
+          )}
+        </TabsContent>
+
+        <TabsContent value="global" className="flex-1 overflow-y-auto p-3 space-y-4 mt-0">
+          <GlobalStylesPanel
+            globalStyles={globalStyles}
+            onChange={onGlobalStylesChange}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+// --- Block Settings ---
+function BlockSettings({ block, onChange }: { block: Block; onChange: (b: Block) => void }) {
+  const updateStyle = useCallback(
+    (updates: Partial<BlockStyle>) => {
+      onChange({ ...block, style: { ...block.style, ...updates } })
+    },
+    [block, onChange]
+  )
+
+  return (
+    <div className="space-y-4">
+      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+        {block.type} Settings
+      </div>
+
+      {/* Type-specific settings */}
+      {block.type === 'text' && (
+        <TextSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'divider' && (
+        <DividerSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'cta' && (
+        <ButtonSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'image' && (
+        <ImageSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'spacer' && (
+        <SpacerSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'social' && (
+        <SocialSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'header' && (
+        <HeaderSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+      {block.type === 'footer' && (
+        <FooterSettings block={block} onChange={(b) => onChange(b)} />
+      )}
+
+      {/* Common: spacing/background */}
+      <div className="border-t pt-4 space-y-3">
+        <div className="text-xs font-medium text-muted-foreground">Spacing</div>
+        <div className="grid grid-cols-2 gap-2">
+          <div className="space-y-1">
+            <Label className="text-xs">Pad Top</Label>
+            <Input
+              type="number"
+              value={block.style?.paddingTop ?? 0}
+              onChange={(e) => updateStyle({ paddingTop: parseInt(e.target.value) || 0 })}
+              className="h-8 text-xs"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">Pad Bottom</Label>
+            <Input
+              type="number"
+              value={block.style?.paddingBottom ?? 0}
+              onChange={(e) => updateStyle({ paddingBottom: parseInt(e.target.value) || 0 })}
+              className="h-8 text-xs"
+            />
+          </div>
+        </div>
+        <div className="space-y-1">
+          <Label className="text-xs">Background</Label>
+          <div className="flex gap-2">
+            <input
+              type="color"
+              value={block.style?.backgroundColor || '#ffffff'}
+              onChange={(e) => updateStyle({ backgroundColor: e.target.value })}
+              className="h-8 w-8 rounded border cursor-pointer"
+            />
+            <Input
+              value={block.style?.backgroundColor || ''}
+              onChange={(e) => updateStyle({ backgroundColor: e.target.value })}
+              placeholder="transparent"
+              className="h-8 text-xs"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// --- Text settings ---
+function TextSettings({ block, onChange }: { block: TextBlock; onChange: (b: TextBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Font Size (px)</Label>
+        <Input
+          type="number"
+          value={block.fontSize || 16}
+          onChange={(e) => onChange({ ...block, fontSize: parseInt(e.target.value) || 16 })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Line Height</Label>
+        <Input
+          type="number"
+          step="0.1"
+          value={block.lineHeight || 1.6}
+          onChange={(e) => onChange({ ...block, lineHeight: parseFloat(e.target.value) || 1.6 })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Text Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={block.textColor || '#1f2937'}
+            onChange={(e) => onChange({ ...block, textColor: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={block.textColor || '#1f2937'}
+            onChange={(e) => onChange({ ...block, textColor: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Font Family</Label>
+        <Select
+          value={block.fontFamily || 'default'}
+          onValueChange={(v) => onChange({ ...block, fontFamily: v === 'default' ? undefined : v })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="default">Default</SelectItem>
+            <SelectItem value="Arial, sans-serif">Arial</SelectItem>
+            <SelectItem value="Georgia, serif">Georgia</SelectItem>
+            <SelectItem value="'Courier New', monospace">Courier New</SelectItem>
+            <SelectItem value="Verdana, sans-serif">Verdana</SelectItem>
+            <SelectItem value="'Trebuchet MS', sans-serif">Trebuchet MS</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+// --- Divider settings ---
+function DividerSettings({ block, onChange }: { block: DividerBlock; onChange: (b: DividerBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Style</Label>
+        <Select
+          value={block.dividerStyle}
+          onValueChange={(v) => onChange({ ...block, dividerStyle: v as DividerBlock['dividerStyle'] })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="solid">Solid</SelectItem>
+            <SelectItem value="dashed">Dashed</SelectItem>
+            <SelectItem value="dotted">Dotted</SelectItem>
+            <SelectItem value="space">Space</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={block.color || '#d1d5db'}
+            onChange={(e) => onChange({ ...block, color: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={block.color || '#d1d5db'}
+            onChange={(e) => onChange({ ...block, color: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Thickness (px)</Label>
+        <Input
+          type="number"
+          value={block.thickness || 1}
+          onChange={(e) => onChange({ ...block, thickness: parseInt(e.target.value) || 1 })}
+          className="h-8 text-xs"
+          min={1}
+          max={10}
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Width (%)</Label>
+        <Input
+          type="number"
+          value={block.width || 100}
+          onChange={(e) => onChange({ ...block, width: parseInt(e.target.value) || 100 })}
+          className="h-8 text-xs"
+          min={10}
+          max={100}
+        />
+      </div>
+    </div>
+  )
+}
+
+// --- Button settings ---
+function ButtonSettings({ block, onChange }: { block: CTABlock; onChange: (b: CTABlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Button Text</Label>
+        <Input
+          value={block.text}
+          onChange={(e) => onChange({ ...block, text: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">URL</Label>
+        <Input
+          value={block.url}
+          onChange={(e) => onChange({ ...block, url: e.target.value })}
+          placeholder="https://..."
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Button Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={block.buttonColor || '#2563eb'}
+            onChange={(e) => onChange({ ...block, buttonColor: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={block.buttonColor || '#2563eb'}
+            onChange={(e) => onChange({ ...block, buttonColor: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Text Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={block.textColor || '#ffffff'}
+            onChange={(e) => onChange({ ...block, textColor: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={block.textColor || '#ffffff'}
+            onChange={(e) => onChange({ ...block, textColor: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Border Radius (px)</Label>
+        <Input
+          type="number"
+          value={block.borderRadius ?? 6}
+          onChange={(e) => onChange({ ...block, borderRadius: parseInt(e.target.value) || 0 })}
+          className="h-8 text-xs"
+          min={0}
+          max={50}
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        <div className="space-y-1">
+          <Label className="text-xs">Pad H</Label>
+          <Input
+            type="number"
+            value={block.paddingH ?? 24}
+            onChange={(e) => onChange({ ...block, paddingH: parseInt(e.target.value) || 0 })}
+            className="h-8 text-xs"
+          />
+        </div>
+        <div className="space-y-1">
+          <Label className="text-xs">Pad V</Label>
+          <Input
+            type="number"
+            value={block.paddingV ?? 12}
+            onChange={(e) => onChange({ ...block, paddingV: parseInt(e.target.value) || 0 })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+// --- Image settings ---
+function ImageSettings({ block, onChange }: { block: ImageBlock; onChange: (b: ImageBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Image URL</Label>
+        <Input
+          value={block.url}
+          onChange={(e) => onChange({ ...block, url: e.target.value })}
+          placeholder="https://..."
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Alt Text</Label>
+        <Input
+          value={block.alt}
+          onChange={(e) => onChange({ ...block, alt: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Caption</Label>
+        <Input
+          value={block.caption || ''}
+          onChange={(e) => onChange({ ...block, caption: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Link URL (wraps image)</Label>
+        <Input
+          value={block.linkUrl || ''}
+          onChange={(e) => onChange({ ...block, linkUrl: e.target.value })}
+          placeholder="https://..."
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Width (%)</Label>
+        <Input
+          type="number"
+          value={block.width || 100}
+          onChange={(e) => onChange({ ...block, width: parseInt(e.target.value) || 100 })}
+          className="h-8 text-xs"
+          min={10}
+          max={100}
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+// --- Spacer settings ---
+function SpacerSettings({ block, onChange }: { block: SpacerBlock; onChange: (b: SpacerBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Height (px)</Label>
+        <Input
+          type="number"
+          value={block.height || 32}
+          onChange={(e) => onChange({ ...block, height: parseInt(e.target.value) || 8 })}
+          className="h-8 text-xs"
+          min={8}
+          max={200}
+        />
+      </div>
+    </div>
+  )
+}
+
+// --- Social settings ---
+function SocialSettings({ block, onChange }: { block: SocialBlock; onChange: (b: SocialBlock) => void }) {
+  const addLink = () => {
+    const link: SocialLink = {
+      id: `social-${Date.now()}`,
+      platform: 'website',
+      url: '',
+    }
+    onChange({ ...block, links: [...block.links, link] })
+  }
+
+  const removeLink = (id: string) => {
+    onChange({ ...block, links: block.links.filter((l) => l.id !== id) })
+  }
+
+  const updateLink = (id: string, updates: Partial<SocialLink>) => {
+    onChange({
+      ...block,
+      links: block.links.map((l) => (l.id === id ? { ...l, ...updates } : l)),
+    })
+  }
+
+  const platforms: SocialLink['platform'][] = [
+    'linkedin', 'twitter', 'facebook', 'instagram', 'youtube', 'github', 'website',
+  ]
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Icon Size</Label>
+        <Input
+          type="number"
+          value={block.iconSize || 24}
+          onChange={(e) => onChange({ ...block, iconSize: parseInt(e.target.value) || 24 })}
+          className="h-8 text-xs"
+          min={16}
+          max={48}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label className="text-xs">Links</Label>
+        {block.links.map((link) => (
+          <div key={link.id} className="flex gap-1 items-center">
+            <Select
+              value={link.platform}
+              onValueChange={(v) =>
+                updateLink(link.id, { platform: v as SocialLink['platform'] })
+              }
+            >
+              <SelectTrigger className="h-7 text-xs w-24 shrink-0">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {platforms.map((p) => (
+                  <SelectItem key={p} value={p} className="text-xs">
+                    {p.charAt(0).toUpperCase() + p.slice(1)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Input
+              value={link.url}
+              onChange={(e) => updateLink(link.id, { url: e.target.value })}
+              placeholder="URL"
+              className="h-7 text-xs"
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 shrink-0"
+              onClick={() => removeLink(link.id)}
+            >
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          </div>
+        ))}
+        <Button variant="outline" size="sm" onClick={addLink} className="w-full h-7 text-xs">
+          <Plus className="mr-1 h-3 w-3" />
+          Add Link
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// --- Header settings ---
+function HeaderSettings({ block, onChange }: { block: HeaderBlock; onChange: (b: HeaderBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Company Name</Label>
+        <Input
+          value={block.companyName}
+          onChange={(e) => onChange({ ...block, companyName: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Logo URL</Label>
+        <Input
+          value={block.logoUrl || ''}
+          onChange={(e) => onChange({ ...block, logoUrl: e.target.value })}
+          placeholder="https://..."
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+// --- Footer settings ---
+function FooterSettings({ block, onChange }: { block: FooterBlock; onChange: (b: FooterBlock) => void }) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-xs">Company Name</Label>
+        <Input
+          value={block.companyName}
+          onChange={(e) => onChange({ ...block, companyName: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="space-y-1">
+        <Label className="text-xs">Address</Label>
+        <Input
+          value={block.address || ''}
+          onChange={(e) => onChange({ ...block, address: e.target.value })}
+          className="h-8 text-xs"
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          checked={block.showUnsubscribe}
+          onChange={(e) => onChange({ ...block, showUnsubscribe: e.target.checked })}
+          className="rounded"
+          id="show-unsub"
+        />
+        <Label className="text-xs" htmlFor="show-unsub">Show unsubscribe link</Label>
+      </div>
+      {block.showUnsubscribe && (
+        <div className="space-y-1">
+          <Label className="text-xs">Unsubscribe URL</Label>
+          <Input
+            value={block.unsubscribeUrl || ''}
+            onChange={(e) => onChange({ ...block, unsubscribeUrl: e.target.value })}
+            placeholder="https://..."
+            className="h-8 text-xs"
+          />
+        </div>
+      )}
+      <div className="space-y-1">
+        <Label className="text-xs">Alignment</Label>
+        <Select
+          value={block.alignment}
+          onValueChange={(v) => onChange({ ...block, alignment: v as 'left' | 'center' | 'right' })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+// --- Global Styles Panel ---
+function GlobalStylesPanel({
+  globalStyles,
+  onChange,
+}: {
+  globalStyles: GlobalStyles
+  onChange: (s: GlobalStyles) => void
+}) {
+  return (
+    <div className="space-y-4">
+      <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+        Email Design
+      </div>
+
+      <div className="space-y-1">
+        <Label className="text-xs">Background Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            value={globalStyles.backgroundColor}
+            onChange={(e) => onChange({ ...globalStyles, backgroundColor: e.target.value })}
+            className="h-8 w-8 rounded border cursor-pointer"
+          />
+          <Input
+            value={globalStyles.backgroundColor}
+            onChange={(e) => onChange({ ...globalStyles, backgroundColor: e.target.value })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <Label className="text-xs">Content Width (px)</Label>
+        <Input
+          type="number"
+          value={globalStyles.contentWidth}
+          onChange={(e) =>
+            onChange({ ...globalStyles, contentWidth: parseInt(e.target.value) || 600 })
+          }
+          className="h-8 text-xs"
+          min={400}
+          max={800}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <Label className="text-xs">Font Family</Label>
+        <Select
+          value={globalStyles.fontFamily}
+          onValueChange={(v) => onChange({ ...globalStyles, fontFamily: v })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'>
+              System (Default)
+            </SelectItem>
+            <SelectItem value="Arial, sans-serif">Arial</SelectItem>
+            <SelectItem value="Georgia, serif">Georgia</SelectItem>
+            <SelectItem value="Verdana, sans-serif">Verdana</SelectItem>
+            <SelectItem value="'Trebuchet MS', sans-serif">Trebuchet MS</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="border-t pt-4 space-y-2">
+        <div className="text-xs font-medium text-muted-foreground">Themes</div>
+        <div className="grid gap-2">
+          {THEME_PRESETS.map((preset) => (
+            <button
+              key={preset.id}
+              onClick={() => onChange(preset.globalStyles)}
+              className={cn(
+                'flex items-center gap-3 p-2 rounded border text-left text-xs transition-colors',
+                globalStyles.theme === preset.id
+                  ? 'border-primary bg-primary/5'
+                  : 'border-border hover:bg-muted'
+              )}
+            >
+              <div
+                className="h-6 w-6 rounded border"
+                style={{ backgroundColor: preset.globalStyles.backgroundColor }}
+              />
+              <div>
+                <div className="font-medium">{preset.name}</div>
+                <div className="text-muted-foreground">{preset.description}</div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}