@siteable/core 0.1.0

package/src/editor/ShortcutsModal.tsx

@@ -0,0 +1,126 @@
+import { useRef, useEffect, useCallback } from 'react'
+import { X } from 'lucide-react'
+import { useEditorStore } from '@/store/editorStore'
+
+const shortcutGroups = [
+  {
+    title: 'Navigation',
+    shortcuts: [
+      { keys: ['1'], description: 'Dashboard' },
+      { keys: ['2'], description: 'Editor' },
+      { keys: ['3'], description: 'Components' },
+      { keys: ['4'], description: 'Deploy' },
+      { keys: ['5'], description: 'Settings' },
+    ],
+  },
+  {
+    title: 'Editor',
+    shortcuts: [
+      { keys: ['J'], description: 'Toggle JSON drawer' },
+      { keys: ['H'], description: 'Toggle version history' },
+      { keys: ['P'], description: 'Toggle preview mode' },
+      { keys: ['Esc'], description: 'Deselect block' },
+      { keys: ['?'], description: 'Show this help' },
+    ],
+  },
+  {
+    title: 'Actions',
+    shortcuts: [
+      { keys: ['\u2318', 'Z'], description: 'Undo' },
+      { keys: ['\u2318', '\u21E7', 'Z'], description: 'Redo' },
+    ],
+  },
+]
+
+export function ShortcutsModal() {
+  const { shortcutsModalOpen, toggleShortcutsModal } = useEditorStore()
+  const modalRef = useRef<HTMLDivElement>(null)
+  const closeRef = useRef<HTMLButtonElement>(null)
+
+  // Focus trap + auto-focus close button
+  useEffect(() => {
+    if (!shortcutsModalOpen) return
+    closeRef.current?.focus()
+  }, [shortcutsModalOpen])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      toggleShortcutsModal()
+      return
+    }
+    if (e.key !== 'Tab') return
+    const modal = modalRef.current
+    if (!modal) return
+    const focusable = modal.querySelectorAll<HTMLElement>('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+    if (focusable.length === 0) return
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault()
+      last.focus()
+    } else if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault()
+      first.focus()
+    }
+  }, [toggleShortcutsModal])
+
+  if (!shortcutsModalOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={toggleShortcutsModal}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Keyboard shortcuts"
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        ref={modalRef}
+        className="bg-bg-1 border border-border-default rounded-xl w-[420px] max-h-[80vh] overflow-hidden shadow-[0_16px_48px_rgba(0,0,0,0.5)]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="px-5 py-4 border-b border-border-default flex items-center justify-between">
+          <h2 className="text-sm font-semibold">Keyboard Shortcuts</h2>
+          <button
+            ref={closeRef}
+            onClick={toggleShortcutsModal}
+            className="w-7 h-7 rounded flex items-center justify-center text-text-3 hover:text-text-0 hover:bg-bg-3 transition-colors"
+            aria-label="Close shortcuts"
+          >
+            <X size={14} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-5 space-y-5 overflow-y-auto">
+          {shortcutGroups.map((group) => (
+            <div key={group.title}>
+              <h3 className="text-[10px] font-semibold uppercase tracking-wider text-text-3 mb-2">
+                {group.title}
+              </h3>
+              <div className="space-y-1.5">
+                {group.shortcuts.map((shortcut) => (
+                  <div key={shortcut.description} className="flex items-center justify-between">
+                    <span className="text-[12.5px] text-text-1">{shortcut.description}</span>
+                    <div className="flex gap-1">
+                      {shortcut.keys.map((key, i) => (
+                        <kbd
+                          key={i}
+                          className="min-w-[24px] h-6 px-1.5 rounded border border-border-default bg-bg-3 text-[11px] font-mono text-text-2 flex items-center justify-center"
+                        >
+                          {key}
+                        </kbd>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/editor/VersionHistory.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useRef } from 'react'
+import { X, Clock, RotateCcw } from 'lucide-react'
+import { useEditorStore } from '@/store/editorStore'
+import { useConfigStore } from '@/store/configStore'
+
+function timeAgo(ts: number): string {
+  const seconds = Math.floor((Date.now() - ts) / 1000)
+  if (seconds < 10) return 'Just now'
+  if (seconds < 60) return `${seconds}s ago`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  return `${hours}h ago`
+}
+
+export function VersionHistory() {
+  const { historyOpen, toggleHistory } = useEditorStore()
+  const undoStack = useConfigStore((s) => s.undoStack)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  const entries = [...undoStack].reverse()
+
+  // Close on Escape
+  useEffect(() => {
+    if (!historyOpen) return
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') { e.preventDefault(); toggleHistory() }
+    }
+    window.addEventListener('keydown', handleKey)
+    return () => window.removeEventListener('keydown', handleKey)
+  }, [historyOpen, toggleHistory])
+
+  // Close on click outside
+  useEffect(() => {
+    if (!historyOpen) return
+    function handleClick(e: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        toggleHistory()
+      }
+    }
+    // Delay to avoid catching the toggle button click itself
+    const id = setTimeout(() => window.addEventListener('mousedown', handleClick), 0)
+    return () => { clearTimeout(id); window.removeEventListener('mousedown', handleClick) }
+  }, [historyOpen, toggleHistory])
+
+  return (
+    <div
+      ref={panelRef}
+      className={`absolute top-0 right-0 bottom-0 w-80 bg-bg-1 border-l border-border-default z-50 flex flex-col transition-transform duration-250 ease-in-out ${
+        historyOpen ? 'translate-x-0' : 'translate-x-full'
+      }`}
+    >
+      {/* Header */}
+      <div className="px-4 py-3.5 border-b border-border-default flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Clock size={14} className="text-text-2" />
+          <h3 className="text-sm font-semibold">Version History</h3>
+          <span className="text-[10px] text-text-3">({entries.length})</span>
+        </div>
+        <button
+          onClick={toggleHistory}
+          className="w-7 h-7 rounded flex items-center justify-center text-text-3 hover:text-text-0 hover:bg-bg-3 transition-colors"
+        >
+          <X size={14} />
+        </button>
+      </div>
+
+      {/* History list */}
+      <div className="flex-1 overflow-y-auto p-2">
+        {/* Current state */}
+        <div className="p-3 rounded-lg bg-green-glow mb-0.5">
+          <div className="flex items-center gap-1.5 text-[11px] text-text-2 mb-1">
+            <span>Current</span>
+            <span className="text-[9px] px-1.5 py-0.5 rounded-full font-semibold bg-green-glow text-green">
+              latest
+            </span>
+          </div>
+          <div className="text-[12.5px] text-text-1">Current state</div>
+        </div>
+
+        {entries.map((entry, i) => (
+          <div
+            key={i}
+            onClick={() => {
+              for (let n = 0; n <= i; n++) useConfigStore.getState().undo()
+            }}
+            className="p-3 rounded-lg cursor-pointer transition-colors mb-0.5 hover:bg-bg-3 group"
+          >
+            <div className="flex items-center gap-1.5 text-[11px] text-text-2 mb-1">
+              <span>{timeAgo(entry.timestamp)}</span>
+              <span className="text-[9px] px-1.5 py-0.5 rounded-full font-semibold bg-status-blue/10 text-status-blue">
+                manual
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <div className="text-[12.5px] text-text-1">{entry.label}</div>
+              <RotateCcw size={12} className="text-text-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+            </div>
+          </div>
+        ))}
+
+        {entries.length === 0 && (
+          <div className="p-4 text-center text-[11px] text-text-3">
+            No history yet. Make some changes to see history.
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/index.ts

@@ -0,0 +1,133 @@
+/**
+ * @siteable/core — public barrel
+ *
+ * Surface every public named export from each module that ships with the package.
+ * Consumers MUST import through this entry (NF-002: no `exports` field, but
+ * convention-enforced — deep imports like `@siteable/core/src/store/configStore`
+ * would instantiate a second zustand singleton inside one app, breaking the
+ * single-store invariant when both private app + package copy coexist).
+ *
+ * SC-001: enumerate every named export, with `validateSiteConfig` explicit.
+ */
+
+// ── Blocks ──────────────────────────────────────────────────────────────────
+export {
+  // types
+  type BlockType,
+  type BlockVariant,
+  type BlockConfig,
+  type ThemeConfig,
+  type PageConfig,
+  type SiteConfig,
+} from './blocks/types'
+
+export { RenderBlock } from './blocks/registry'
+export { BlockWrapper } from './blocks/BlockWrapper'
+
+// Individual block components (all variants consolidated into single Block components)
+export { NavbarBlock } from './blocks/navbar/NavbarBlock'
+export { HeroBlock } from './blocks/hero/HeroBlock'
+export { FeaturesBlock } from './blocks/features/FeaturesBlock'
+export { PricingBlock } from './blocks/pricing/PricingBlock'
+export { CtaBlock } from './blocks/cta/CtaBlock'
+export { FooterBlock } from './blocks/footer/FooterBlock'
+export { TestimonialsBlock } from './blocks/testimonials/TestimonialsBlock'
+export { StatsBlock } from './blocks/stats/StatsBlock'
+export { FaqBlock } from './blocks/faq/FaqBlock'
+export { TeamBlock } from './blocks/team/TeamBlock'
+export { ContactBlock } from './blocks/contact/ContactBlock'
+export { NewsletterBlock } from './blocks/newsletter/NewsletterBlock'
+export { LogoCloudBlock } from './blocks/logocloud/LogoCloudBlock'
+export { DividerBlock } from './blocks/divider/DividerBlock'
+export { BannerBlock } from './blocks/banner/BannerBlock'
+export { ContentBlock } from './blocks/content/ContentBlock'
+export { ImageBlock } from './blocks/image/ImageBlock'
+export { VideoBlock } from './blocks/video/VideoBlock'
+export { GalleryBlock } from './blocks/gallery/GalleryBlock'
+
+// ── Editor ──────────────────────────────────────────────────────────────────
+export { AgentPanel } from './editor/AgentPanel'
+export { Canvas } from './editor/Canvas'
+export { CanvasEmpty } from './editor/CanvasEmpty'
+export {
+  CanvasToolbar,
+  type CanvasToolbarProps,
+} from './editor/CanvasToolbar'
+export { DesignPanel } from './editor/DesignPanel'
+export {
+  EditorLayout,
+  type EditorLayoutProps,
+} from './editor/EditorLayout'
+export { GenerationOverlay } from './editor/GenerationOverlay'
+export { JsonDrawer } from './editor/JsonDrawer'
+export { LayersPanel } from './editor/LayersPanel'
+export { LeftSidebar } from './editor/LeftSidebar'
+export { PropertiesPanel } from './editor/PropertiesPanel'
+export { RightSidebar } from './editor/RightSidebar'
+export { ShortcutsModal } from './editor/ShortcutsModal'
+export { VersionHistory } from './editor/VersionHistory'
+
+// ── Stores (zustand module singletons — single instance per app) ────────────
+export {
+  defaultConfig,
+  useConfigStore,
+} from './store/configStore'
+export {
+  useEditorStore,
+  type Viewport,
+} from './store/editorStore'
+
+// ── Lib — block metadata ────────────────────────────────────────────────────
+export {
+  type BlockMeta,
+  blockMetadata,
+  categories,
+} from './lib/block-metadata'
+
+// ── Lib — export-html (HTML serialization + helpers) ────────────────────────
+export {
+  type ExportSiteSettings,
+  type ExportSiteOptions,
+  exportSiteToHTML,
+  exportToHTML,
+  downloadHTML,
+  previewHTML,
+} from './lib/export-html'
+
+// ── Lib — generate-site (Gemini + injectable server fallback) ───────────────
+export {
+  type GenerationResult,
+  generateSiteConfig,
+  validateSiteConfig,
+} from './lib/generate-site'
+
+// ── Lib — generation-prompt (system prompt for Gemini) ──────────────────────
+export { GENERATION_PROMPT } from './lib/generation-prompt'
+
+// ── Lib — markdown ──────────────────────────────────────────────────────────
+export { renderMarkdown } from './lib/markdown'
+
+// ── Lib — templates (smart-fallback site templates) ─────────────────────────
+export {
+  templateMeta,
+  buildTemplate,
+  getTemplateForPrompt,
+} from './lib/templates'
+
+// ── Lib — theme-presets (10 themes + utilities) ─────────────────────────────
+export {
+  defaultTheme,
+  type ThemePreset,
+  themePresets,
+  resolveTheme,
+  hexToRgb,
+  themeToCSS,
+  googleFontOptions,
+} from './lib/theme-presets'
+
+// ── Lib — react hooks ───────────────────────────────────────────────────────
+export { useGoogleFonts } from './lib/useGoogleFonts'
+export { useScrollReveal } from './lib/useScrollReveal'
+
+// ── Settings (extracted components) ─────────────────────────────────────────
+export { GeminiKeyInputField } from './settings/GeminiKeyInputField'

package/src/lib/block-metadata.ts

@@ -0,0 +1,167 @@
+import type { BlockType } from '@/blocks/types'
+
+export interface BlockMeta {
+  type: BlockType
+  label: string
+  description: string
+  category: string
+  variants: string[]
+  defaultProps: Record<string, unknown>
+}
+
+export const blockMetadata: BlockMeta[] = [
+  {
+    type: 'navbar',
+    label: 'Navbar',
+    description: 'Navigation bar with logo, links, and CTA',
+    category: 'Navigation',
+    variants: ['default', 'centered'],
+    defaultProps: { logo: 'Brand', links: ['Features', 'Pricing', 'About'], ctaText: 'Get Started' },
+  },
+  {
+    type: 'hero',
+    label: 'Hero',
+    description: 'Full-width hero section with headline and CTAs',
+    category: 'Hero',
+    variants: ['centered', 'split', 'gradient', 'minimal'],
+    defaultProps: { headline: 'Your Headline Here', subheadline: 'A compelling subheadline that explains your value proposition.', primaryCta: 'Get Started', secondaryCta: 'Learn More' },
+  },
+  {
+    type: 'features',
+    label: 'Features',
+    description: 'Feature showcase with icon cards',
+    category: 'Content',
+    variants: ['grid', 'list', 'alternating'],
+    defaultProps: { title: 'Features', subtitle: 'Everything you need', items: [{ icon: 'Zap', title: 'Fast', description: 'Lightning fast performance' }, { icon: 'Shield', title: 'Secure', description: 'Enterprise-grade security' }, { icon: 'Globe', title: 'Global', description: 'Available worldwide' }] },
+  },
+  {
+    type: 'pricing',
+    label: 'Pricing',
+    description: 'Pricing tiers with feature comparison',
+    category: 'Commerce',
+    variants: ['simple', 'comparison'],
+    defaultProps: { title: 'Pricing', subtitle: 'Choose the plan that fits your needs' },
+  },
+  {
+    type: 'cta',
+    label: 'Call to Action',
+    description: 'Conversion-focused section with CTA button',
+    category: 'Conversion',
+    variants: ['simple', 'split'],
+    defaultProps: { headline: 'Ready to get started?', subheadline: 'Start building today.', buttonText: 'Start Free' },
+  },
+  {
+    type: 'footer',
+    label: 'Footer',
+    description: 'Page footer with links and copyright',
+    category: 'Navigation',
+    variants: ['simple', 'multi-column', 'minimal'],
+    defaultProps: { logo: 'Brand', copyright: '2026 Brand. All rights reserved.', links: ['Privacy', 'Terms'] },
+  },
+  {
+    type: 'testimonials',
+    label: 'Testimonials',
+    description: 'Customer testimonials with quotes and ratings',
+    category: 'Social Proof',
+    variants: ['cards', 'carousel', 'spotlight'],
+    defaultProps: { title: 'What our customers say' },
+  },
+  {
+    type: 'stats',
+    label: 'Stats',
+    description: 'Key metrics and statistics display',
+    category: 'Social Proof',
+    variants: ['grid', 'bar', 'counter'],
+    defaultProps: { title: 'By the numbers' },
+  },
+  {
+    type: 'faq',
+    label: 'FAQ',
+    description: 'Frequently asked questions accordion',
+    category: 'Content',
+    variants: ['accordion'],
+    defaultProps: { title: 'Frequently Asked Questions' },
+  },
+  {
+    type: 'team',
+    label: 'Team',
+    description: 'Team member grid with photos and roles',
+    category: 'Content',
+    variants: ['grid'],
+    defaultProps: { title: 'Meet the Team' },
+  },
+  {
+    type: 'contact',
+    label: 'Contact',
+    description: 'Contact form with name, email, and message',
+    category: 'Forms',
+    variants: ['form'],
+    defaultProps: { title: 'Get in Touch', subtitle: "We'd love to hear from you." },
+  },
+  {
+    type: 'newsletter',
+    label: 'Newsletter',
+    description: 'Email subscription form with social proof',
+    category: 'Conversion',
+    variants: ['simple'],
+    defaultProps: { title: 'Stay in the loop', subtitle: 'Get updates on new features.', buttonText: 'Subscribe' },
+  },
+  {
+    type: 'logocloud',
+    label: 'Logo Cloud',
+    description: 'Company logos with hover effects',
+    category: 'Social Proof',
+    variants: ['default'],
+    defaultProps: { title: 'Trusted by leading companies' },
+  },
+  {
+    type: 'content',
+    label: 'Content',
+    description: 'Rich text content section',
+    category: 'Content',
+    variants: ['prose', 'columns', 'highlight'],
+    defaultProps: { body: '## Getting Started\n\nWrite your content here. Supports **bold**, *italic*, and lists.\n\n- First item\n- Second item\n- Third item' },
+  },
+  {
+    type: 'image',
+    label: 'Image',
+    description: 'Image with text overlay or side-by-side layout',
+    category: 'Media',
+    variants: ['hero-image', 'side-by-side', 'grid'],
+    defaultProps: { title: 'Visual Storytelling', subtitle: 'A picture is worth a thousand words.', imageSide: 'left' },
+  },
+  {
+    type: 'video',
+    label: 'Video',
+    description: 'Embedded YouTube or Vimeo video',
+    category: 'Media',
+    variants: ['youtube', 'vimeo'],
+    defaultProps: { url: '', title: 'Watch Our Story' },
+  },
+  {
+    type: 'gallery',
+    label: 'Gallery',
+    description: 'Image gallery in grid or masonry layout',
+    category: 'Media',
+    variants: ['grid', 'masonry'],
+    defaultProps: { title: 'Gallery' },
+  },
+  {
+    type: 'divider',
+    label: 'Divider',
+    description: 'Visual separator between sections',
+    category: 'Layout',
+    variants: ['line', 'space', 'dots'],
+    defaultProps: { height: 60, width: 'full' },
+  },
+  {
+    type: 'banner',
+    label: 'Banner',
+    description: 'Announcement bar or ribbon',
+    category: 'Content',
+    variants: ['ribbon', 'bar'],
+    defaultProps: { text: 'New: We just launched v2.0!', linkText: 'Learn more' },
+  },
+]
+
+export const categories = [...new Set(blockMetadata.map((b) => b.category))]