@siteable/core 0.1.0

package/src/editor/Canvas.tsx

@@ -0,0 +1,95 @@
+import { useMemo } from 'react'
+import { useConfigStore } from '@/store/configStore'
+import { useEditorStore } from '@/store/editorStore'
+import { CanvasEmpty } from './CanvasEmpty'
+import { BlockWrapper } from '@/blocks/BlockWrapper'
+import { RenderBlock } from '@/blocks/registry'
+import { resolveTheme, themeToCSS } from '@/lib/theme-presets'
+import { useGoogleFonts } from '@/lib/useGoogleFonts'
+
+export function Canvas() {
+  const blocks = useConfigStore((s) => {
+    const pages = s.config.pages
+    if (!pages || pages.length === 0) return s.config.blocks
+    const page = pages.find((p) => p.id === s.activePageId) ?? pages[0]
+    return page.blocks
+  })
+  const theme = useConfigStore((s) => s.config.theme)
+  const { selectedBlockId, selectBlock, viewport } = useEditorStore()
+
+  const resolved = useMemo(() => resolveTheme(theme), [theme])
+  const cssVars = useMemo(() => themeToCSS(resolved), [resolved])
+  useGoogleFonts([resolved.fontSans, resolved.fontDisplay, resolved.fontMono])
+
+  const maxWidth = viewport === 'desktop' ? '880px' : viewport === 'tablet' ? '768px' : '375px'
+
+  if (blocks.length === 0) {
+    return <CanvasEmpty />
+  }
+
+  const canvasContent = (
+    <div
+      className="@container border rounded-xl min-h-[400px] relative z-[1] overflow-hidden transition-all duration-300"
+      style={{ width: '100%', maxWidth, ...cssVars, color: 'var(--color-text-0)', backgroundColor: 'var(--color-bg-1)', borderColor: 'var(--color-border-default)' } as React.CSSProperties}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) selectBlock(null)
+      }}
+      role="region"
+      aria-label={`Site preview, ${blocks.length} blocks, ${viewport} viewport`}
+    >
+      {blocks.map((block) => (
+        <BlockWrapper
+          key={block.id}
+          block={block}
+          isSelected={selectedBlockId === block.id}
+          onSelect={() => selectBlock(block.id)}
+        >
+          <RenderBlock block={block} />
+        </BlockWrapper>
+      ))}
+    </div>
+  )
+
+  return (
+    <div className="flex-1 flex items-start justify-center p-6 overflow-auto relative">
+      {/* Dot grid background */}
+      <div
+        className="absolute inset-0 opacity-40 pointer-events-none"
+        style={{
+          backgroundImage: 'radial-gradient(circle, var(--color-bg-3) 1px, transparent 1px)',
+          backgroundSize: '20px 20px',
+        }}
+      />
+
+      {viewport === 'tablet' ? (
+        <div className="relative z-[1]">
+          {/* Tablet frame */}
+          <div className="border-[12px] border-bg-4 rounded-2xl bg-bg-4 shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
+            <div className="rounded-lg overflow-hidden">
+              {canvasContent}
+            </div>
+          </div>
+        </div>
+      ) : viewport === 'mobile' ? (
+        <div className="relative z-[1]">
+          {/* Phone frame */}
+          <div className="border-[10px] border-bg-4 rounded-[2rem] bg-bg-4 shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
+            {/* Notch */}
+            <div className="flex justify-center -mt-[4px] mb-1">
+              <div className="w-24 h-5 bg-bg-4 rounded-b-xl" />
+            </div>
+            <div className="rounded-xl overflow-hidden">
+              {canvasContent}
+            </div>
+            {/* Home indicator */}
+            <div className="flex justify-center mt-2 pb-1">
+              <div className="w-28 h-1 bg-bg-5 rounded-full" />
+            </div>
+          </div>
+        </div>
+      ) : (
+        canvasContent
+      )}
+    </div>
+  )
+}

package/src/editor/CanvasEmpty.tsx

@@ -0,0 +1,40 @@
+import { Plus } from 'lucide-react'
+import { toast } from 'sonner'
+import { useConfigStore } from '@/store/configStore'
+import { useEditorStore } from '@/store/editorStore'
+import { blockMetadata } from '@/lib/block-metadata'
+import type { BlockConfig } from '@/blocks/types'
+
+export function CanvasEmpty() {
+  const addBlock = useConfigStore((s) => s.addBlock)
+  const selectBlock = useEditorStore((s) => s.selectBlock)
+
+  function handleAddBlock() {
+    const heroMeta = blockMetadata.find((b) => b.type === 'hero')!
+    const block: BlockConfig = {
+      id: `block-${Date.now()}`,
+      type: heroMeta.type,
+      variant: heroMeta.variants[0],
+      props: { ...heroMeta.defaultProps },
+    }
+    addBlock(block)
+    selectBlock(block.id)
+    toast('Hero block added')
+  }
+
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center gap-4 text-center p-10 relative z-[1]">
+      <h3 className="text-lg font-semibold text-text-1">Start building</h3>
+      <p className="text-[13px] text-text-3 max-w-[360px] leading-relaxed">
+        Add your first component from the library, or use the Components page to browse all blocks.
+      </p>
+      <button
+        onClick={handleAddBlock}
+        className="px-3.5 py-1.5 rounded-md bg-green text-black text-[12.5px] font-semibold border border-green hover:bg-green-dim transition-colors flex items-center gap-1.5"
+      >
+        <Plus size={14} />
+        Add Hero Block
+      </button>
+    </div>
+  )
+}

package/src/editor/CanvasToolbar.tsx

@@ -0,0 +1,366 @@
+import { useState, useRef, useEffect } from 'react'
+import {
+  Monitor,
+  Tablet,
+  Smartphone,
+  Undo2,
+  Redo2,
+  Code,
+  Clock,
+  Eye,
+  Plus,
+  HelpCircle,
+  Download,
+  Loader2,
+} from 'lucide-react'
+import { toast } from 'sonner'
+import { useEditorStore, type Viewport } from '@/store/editorStore'
+import { useConfigStore } from '@/store/configStore'
+import type { PageConfig } from '@/blocks/types'
+import { exportToHTML, downloadHTML, type ExportSiteSettings } from '@/lib/export-html'
+
+const viewports: { value: Viewport; icon: typeof Monitor; label: string }[] = [
+  { value: 'desktop', icon: Monitor, label: 'Desktop' },
+  { value: 'tablet', icon: Tablet, label: 'Tablet' },
+  { value: 'mobile', icon: Smartphone, label: 'Mobile' },
+]
+
+function AddPagePopover({ onAdd, onClose }: { onAdd: (name: string, path: string) => void; onClose: () => void }) {
+  const [name, setName] = useState('')
+  const [path, setPath] = useState('/')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => { inputRef.current?.focus() }, [])
+
+  function submit() {
+    const trimmed = name.trim()
+    if (!trimmed) return
+    const cleanPath = path.trim() || `/${trimmed.toLowerCase().replace(/\s+/g, '-')}`
+    onAdd(trimmed, cleanPath)
+    onClose()
+  }
+
+  return (
+    <div className="absolute top-full left-0 mt-1 bg-bg-2 border border-border-default rounded-lg p-2.5 shadow-[0_8px_24px_rgba(0,0,0,0.4)] z-20 w-52">
+      <div className="space-y-2">
+        <div>
+          <label className="block text-[10px] text-text-3 mb-0.5">Page name</label>
+          <input
+            ref={inputRef}
+            value={name}
+            onChange={(e) => {
+              setName(e.target.value)
+              if (!path || path === '/') setPath(`/${e.target.value.toLowerCase().replace(/\s+/g, '-')}`)
+            }}
+            onKeyDown={(e) => { if (e.key === 'Enter') submit(); if (e.key === 'Escape') onClose() }}
+            placeholder="About"
+            className="w-full px-2 py-1.5 rounded border border-border-default bg-bg-3 text-text-0 text-[11.5px] outline-none focus:border-green"
+          />
+        </div>
+        <div>
+          <label className="block text-[10px] text-text-3 mb-0.5">Path</label>
+          <input
+            value={path}
+            onChange={(e) => setPath(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Enter') submit(); if (e.key === 'Escape') onClose() }}
+            placeholder="/about"
+            className="w-full px-2 py-1.5 rounded border border-border-default bg-bg-3 text-text-0 text-[11.5px] outline-none focus:border-green font-mono"
+          />
+        </div>
+        <button
+          onClick={submit}
+          disabled={!name.trim()}
+          className="w-full py-1.5 rounded bg-green text-black text-[11px] font-semibold hover:bg-green-dim transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+        >
+          Add Page
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function PageTab({ page, isActive, onClick, onRename, onDelete, canDelete }: {
+  page: PageConfig
+  isActive: boolean
+  onClick: () => void
+  onRename: (name: string) => void
+  onDelete: () => void
+  canDelete: boolean
+}) {
+  const [editing, setEditing] = useState(false)
+  const [name, setName] = useState(page.name)
+  const [showContext, setShowContext] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => { if (editing) inputRef.current?.focus() }, [editing])
+
+  function commitRename() {
+    const trimmed = name.trim()
+    if (trimmed && trimmed !== page.name) onRename(trimmed)
+    else setName(page.name)
+    setEditing(false)
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={inputRef}
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        onBlur={commitRename}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') commitRename()
+          if (e.key === 'Escape') { setName(page.name); setEditing(false) }
+        }}
+        className="px-2 py-1 rounded text-xs bg-bg-3 border border-green outline-none w-20"
+        onClick={(e) => e.stopPropagation()}
+      />
+    )
+  }
+
+  return (
+    <div className="relative">
+      <button
+        onClick={onClick}
+        onDoubleClick={(e) => { e.stopPropagation(); setEditing(true) }}
+        onContextMenu={(e) => { e.preventDefault(); setShowContext(true) }}
+        className={`px-2 py-1 rounded text-xs transition-all ${
+          isActive ? 'bg-bg-3 text-text-0' : 'text-text-3 hover:text-text-1 hover:bg-bg-2'
+        }`}
+        title={`${page.name} (${page.path})`}
+      >
+        {page.name}
+      </button>
+      {showContext && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setShowContext(false)} />
+          <div className="absolute top-full left-0 mt-1 bg-bg-2 border border-border-default rounded-lg p-1 shadow-[0_8px_24px_rgba(0,0,0,0.4)] z-20 min-w-[100px]">
+            <button
+              onClick={() => { setShowContext(false); setEditing(true) }}
+              className="w-full text-left px-2.5 py-1.5 rounded text-[11px] text-text-1 hover:bg-bg-3 hover:text-text-0 transition-colors"
+            >
+              Rename
+            </button>
+            {canDelete && (
+              <button
+                onClick={() => { setShowContext(false); onDelete() }}
+                className="w-full text-left px-2.5 py-1.5 rounded text-[11px] text-text-1 hover:bg-status-red/10 hover:text-status-red transition-colors"
+              >
+                Delete
+              </button>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export interface CanvasToolbarProps {
+  activeProject?: { name: string; settings?: ExportSiteSettings }
+  onExit?: () => void
+}
+
+export function CanvasToolbar({ activeProject, onExit }: CanvasToolbarProps = {}) {
+  const { viewport, setViewport, toggleJsonDrawer, jsonDrawerOpen, toggleHistory, togglePreview, toggleShortcutsModal, previewMode } = useEditorStore()
+  const { undo, redo, canUndo, canRedo } = useConfigStore()
+  const undoStack = useConfigStore((s) => s.undoStack)
+  const redoStack = useConfigStore((s) => s.redoStack)
+  const pages = useConfigStore((s) => s.config.pages) ?? []
+  const activePageId = useConfigStore((s) => s.activePageId)
+  const setActivePage = useConfigStore((s) => s.setActivePage)
+  const addPage = useConfigStore((s) => s.addPage)
+  const removePage = useConfigStore((s) => s.removePage)
+  const renamePage = useConfigStore((s) => s.renamePage)
+  const configName = useConfigStore((s) => s.config.name)
+  const config = useConfigStore((s) => s.config)
+  const [showAddPage, setShowAddPage] = useState(false)
+  const [exporting, setExporting] = useState(false)
+
+  const projectName = activeProject?.name || configName
+
+  async function handleExport() {
+    setExporting(true)
+    try {
+      const html = await exportToHTML(config, { settings: activeProject?.settings })
+      const filename = `${(activeProject?.name || config.name || 'site').toLowerCase().replace(/\s+/g, '-')}.html`
+      downloadHTML(html, filename)
+      toast('HTML exported')
+    } catch {
+      toast.error('Export failed')
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  return (
+    <div className="h-10 bg-bg-1 border-b border-border-default flex items-center px-3 gap-1">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-1.5 text-xs text-text-3 shrink-0">
+        <span
+          className="cursor-pointer hover:text-text-1 transition-colors"
+          onClick={() => onExit?.()}
+        >
+          Projects
+        </span>
+        <span>/</span>
+        <span className="text-text-0 font-medium max-w-[120px] truncate">{projectName}</span>
+      </div>
+
+      <div className="w-px h-5 bg-border-default mx-1.5 shrink-0" />
+
+      {/* Page tabs */}
+      <div className="flex items-center gap-0.5 relative overflow-x-auto">
+        {pages.map((page) => (
+          <PageTab
+            key={page.id}
+            page={page}
+            isActive={activePageId === page.id}
+            onClick={() => setActivePage(page.id)}
+            onRename={(name) => renamePage(page.id, name)}
+            onDelete={() => removePage(page.id)}
+            canDelete={pages.length > 1}
+          />
+        ))}
+        <div className="relative">
+          <button
+            onClick={() => setShowAddPage(!showAddPage)}
+            className="w-6 h-6 rounded flex items-center justify-center text-text-3 hover:text-green hover:bg-bg-2 transition-all"
+            title="Add page"
+            aria-label="Add page"
+          >
+            <Plus size={12} />
+          </button>
+          {showAddPage && (
+            <AddPagePopover
+              onAdd={(name, path) => addPage(name, path)}
+              onClose={() => setShowAddPage(false)}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Right side */}
+      <div className="ml-auto flex items-center gap-1 shrink-0">
+        {/* Viewport toggle */}
+        {viewports.map(({ value, icon: Icon, label }) => (
+          <button
+            key={value}
+            title={label}
+            aria-label={label}
+            aria-pressed={viewport === value}
+            onClick={() => setViewport(value)}
+            className={`w-7 h-7 rounded flex items-center justify-center text-xs transition-all ${
+              viewport === value
+                ? 'bg-bg-3 text-text-0'
+                : 'text-text-3 hover:text-text-1 hover:bg-bg-3'
+            }`}
+          >
+            <Icon size={14} />
+          </button>
+        ))}
+
+        <div className="w-px h-5 bg-border-default mx-1" />
+
+        {/* Undo/Redo */}
+        <button
+          onClick={() => {
+            const label = undoStack[undoStack.length - 1]?.label
+            undo()
+            if (label) toast(`Undo: ${label}`, { duration: 1500 })
+          }}
+          disabled={!canUndo()}
+          className="w-7 h-7 rounded flex items-center justify-center text-text-3 hover:text-text-1 hover:bg-bg-3 transition-all disabled:opacity-30 disabled:cursor-not-allowed"
+          title="Undo"
+          aria-label="Undo"
+        >
+          <Undo2 size={14} />
+        </button>
+        <button
+          onClick={() => {
+            const label = redoStack[redoStack.length - 1]?.label
+            redo()
+            if (label) toast(`Redo: ${label}`, { duration: 1500 })
+          }}
+          disabled={!canRedo()}
+          className="w-7 h-7 rounded flex items-center justify-center text-text-3 hover:text-text-1 hover:bg-bg-3 transition-all disabled:opacity-30 disabled:cursor-not-allowed"
+          title="Redo"
+          aria-label="Redo"
+        >
+          <Redo2 size={14} />
+        </button>
+
+        <div className="w-px h-5 bg-border-default mx-1" />
+
+        {/* Preview toggle */}
+        <button
+          onClick={togglePreview}
+          className={`h-7 px-2 rounded flex items-center gap-1 text-[11px] transition-all ${
+            previewMode ? 'bg-green-glow text-green' : 'text-text-3 hover:text-text-1 hover:bg-bg-3'
+          }`}
+          title="Preview (P)"
+          aria-label="Toggle preview mode"
+          aria-pressed={previewMode}
+        >
+          <Eye size={13} />
+          <span>Preview</span>
+        </button>
+
+        {/* JSON drawer toggle */}
+        <button
+          onClick={toggleJsonDrawer}
+          className={`h-7 px-2 rounded flex items-center gap-1 text-[11px] transition-all ${
+            jsonDrawerOpen ? 'bg-green-glow text-green' : 'text-text-3 hover:text-text-1 hover:bg-bg-3'
+          }`}
+          title="JSON (J)"
+          aria-label="Toggle JSON drawer"
+          aria-pressed={jsonDrawerOpen}
+        >
+          <Code size={13} />
+          <span>JSON</span>
+        </button>
+
+        {/* History */}
+        <button
+          onClick={toggleHistory}
+          className="h-7 px-2 rounded flex items-center gap-1 text-[11px] text-text-3 hover:text-text-1 hover:bg-bg-3 transition-all"
+          title="History (H)"
+          aria-label="Toggle version history"
+        >
+          <Clock size={13} />
+          <span>History</span>
+        </button>
+
+        {/* Shortcuts help */}
+        <button
+          onClick={toggleShortcutsModal}
+          className="w-7 h-7 rounded flex items-center justify-center text-text-3 hover:text-text-1 hover:bg-bg-3 transition-all"
+          title="Keyboard shortcuts (?)"
+          aria-label="Show keyboard shortcuts"
+        >
+          <HelpCircle size={14} />
+        </button>
+
+        <div className="w-px h-5 bg-border-default mx-1" />
+
+        <button
+          onClick={handleExport}
+          disabled={exporting}
+          className="h-7 px-3 rounded-lg bg-green text-bg-0 text-[11.5px] font-semibold hover:bg-green/90 transition-all disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-1.5"
+        >
+          {exporting ? (
+            <>
+              <Loader2 size={12} className="animate-spin" />
+              <span>Exporting...</span>
+            </>
+          ) : (
+            <>
+              <Download size={12} />
+              <span>Export</span>
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}