@siteable/core 0.1.0

package/src/store/configStore.ts

@@ -0,0 +1,344 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { produce } from 'immer'
+import type { BlockConfig, SiteConfig, ThemeConfig, PageConfig } from '@/blocks/types'
+
+function ensurePages(config: SiteConfig): PageConfig[] {
+  if (config.pages && config.pages.length > 0) return config.pages
+  return [{ id: 'page-home', name: 'Home', path: '/', blocks: config.blocks }]
+}
+
+function getPageBlocks(config: SiteConfig, pageId: string): BlockConfig[] {
+  const pages = ensurePages(config)
+  const page = pages.find((p) => p.id === pageId)
+  return page?.blocks ?? pages[0]?.blocks ?? []
+}
+
+interface UndoEntry {
+  pages?: PageConfig[]
+  blocks: BlockConfig[]
+  theme?: Partial<ThemeConfig>
+  label: string
+  timestamp: number
+}
+
+interface ConfigState {
+  config: SiteConfig
+  activePageId: string
+  undoStack: UndoEntry[]
+  redoStack: UndoEntry[]
+  setConfig: (config: SiteConfig) => void
+  setActivePage: (id: string) => void
+  getActivePageBlocks: () => BlockConfig[]
+  updateBlock: (id: string, updates: Partial<BlockConfig>) => void
+  updateBlockProps: (id: string, props: Record<string, unknown>) => void
+  addBlock: (block: BlockConfig, index?: number) => void
+  removeBlock: (id: string) => void
+  duplicateBlock: (id: string) => void
+  moveBlock: (fromIndex: number, toIndex: number) => void
+  addPage: (name: string, path: string) => string
+  removePage: (id: string) => void
+  renamePage: (id: string, name: string) => void
+  setTheme: (theme: Partial<ThemeConfig>) => void
+  updateTheme: (partial: Partial<ThemeConfig>) => void
+  previewTheme: (partial: Partial<ThemeConfig>) => void
+  undo: () => void
+  redo: () => void
+  canUndo: () => boolean
+  canRedo: () => boolean
+}
+
+const defaultBlocks: BlockConfig[] = [
+  {
+    id: 'block-navbar',
+    type: 'navbar',
+    variant: 'default',
+    props: {
+      logo: 'Acme Inc',
+      links: ['Features', 'Pricing', 'About', 'Contact'],
+      ctaText: 'Get Started',
+    },
+  },
+  {
+    id: 'block-hero',
+    type: 'hero',
+    variant: 'centered',
+    props: {
+      badge: 'Now in Beta',
+      headline: 'Build websites with JSON',
+      subheadline: 'The visual editor that agents and humans both understand. Structured config, beautiful output.',
+      primaryCta: 'Start Building',
+      secondaryCta: 'View Demo',
+    },
+  },
+  {
+    id: 'block-features',
+    type: 'features',
+    variant: 'grid',
+    props: {
+      label: 'Features',
+      title: 'Everything you need',
+      subtitle: 'Powerful building blocks for your next website',
+      items: [
+        { icon: 'Blocks', title: 'Visual Editor', description: 'Drag and drop blocks to build your layout' },
+        { icon: 'Code', title: 'JSON Config', description: 'Every change is a clean JSON mutation' },
+        { icon: 'Bot', title: 'Agent Ready', description: 'AI agents can read and write your config' },
+      ],
+    },
+  },
+  {
+    id: 'block-cta',
+    type: 'cta',
+    variant: 'simple',
+    props: {
+      headline: 'Ready to get started?',
+      subheadline: 'Create your first site in minutes.',
+      buttonText: 'Start Free',
+    },
+  },
+  {
+    id: 'block-footer',
+    type: 'footer',
+    variant: 'simple',
+    props: {
+      logo: 'OpenPage',
+      copyright: '2026 OpenPage. All rights reserved.',
+      links: ['Privacy', 'Terms', 'Contact'],
+    },
+  },
+]
+
+export const defaultConfig: SiteConfig = {
+  name: 'My Website',
+  pages: [{ id: 'page-home', name: 'Home', path: '/', blocks: defaultBlocks }],
+  blocks: defaultBlocks,
+}
+
+function snapshot(state: ConfigState): { pages?: PageConfig[]; blocks: BlockConfig[]; theme?: Partial<ThemeConfig> } {
+  return {
+    pages: state.config.pages ? JSON.parse(JSON.stringify(state.config.pages)) : undefined,
+    blocks: JSON.parse(JSON.stringify(state.config.blocks)),
+    theme: state.config.theme ? JSON.parse(JSON.stringify(state.config.theme)) : undefined,
+  }
+}
+
+const MAX_UNDO = 50
+
+function pushUndo(state: ConfigState, label: string): Partial<ConfigState> {
+  const snap = snapshot(state)
+  return {
+    undoStack: [...state.undoStack, { ...snap, label, timestamp: Date.now() }].slice(-MAX_UNDO),
+    redoStack: [],
+  }
+}
+
+function withPages(config: SiteConfig): SiteConfig {
+  const pages = ensurePages(config)
+  return { ...config, pages }
+}
+
+function mutateActivePageBlocks(
+  config: SiteConfig,
+  activePageId: string,
+  mutator: (blocks: BlockConfig[]) => BlockConfig[],
+): SiteConfig {
+  const pages = ensurePages(config)
+  const newPages = pages.map((p) =>
+    p.id === activePageId ? { ...p, blocks: mutator([...p.blocks]) } : p,
+  )
+  // Keep top-level blocks synced with first page for backward compat
+  const activeBlocks = newPages.find((p) => p.id === activePageId)?.blocks ?? []
+  return { ...config, pages: newPages, blocks: activeBlocks }
+}
+
+export const useConfigStore = create<ConfigState>()(
+  persist(
+    (set, get) => ({
+      config: defaultConfig,
+      activePageId: 'page-home',
+      undoStack: [],
+      redoStack: [],
+
+      setConfig: (config) => {
+        const pages = ensurePages(config)
+        set({ config: { ...config, pages }, activePageId: pages[0]?.id ?? 'page-home', undoStack: [], redoStack: [] })
+      },
+
+      setActivePage: (id) => set({ activePageId: id }),
+
+      getActivePageBlocks: () => {
+        const state = get()
+        return getPageBlocks(state.config, state.activePageId)
+      },
+
+      updateBlock: (id, updates) =>
+        set((state) => ({
+          ...pushUndo(state, 'Update block'),
+          config: produce(withPages(state.config), (draft) => {
+            const page = draft.pages!.find((p) => p.id === state.activePageId)
+            if (!page) return
+            const block = page.blocks.find((b) => b.id === id)
+            if (block) Object.assign(block, updates)
+            draft.blocks = page.blocks
+          }),
+        })),
+
+      updateBlockProps: (id, props) =>
+        set((state) => ({
+          ...pushUndo(state, 'Update properties'),
+          config: produce(withPages(state.config), (draft) => {
+            const page = draft.pages!.find((p) => p.id === state.activePageId)
+            if (!page) return
+            const block = page.blocks.find((b) => b.id === id)
+            if (block) Object.assign(block.props, props)
+            draft.blocks = page.blocks
+          }),
+        })),
+
+      addBlock: (block, index) =>
+        set((state) => ({
+          ...pushUndo(state, 'Add block'),
+          config: mutateActivePageBlocks(withPages(state.config), state.activePageId, (blocks) => {
+            if (index !== undefined) {
+              blocks.splice(index, 0, block)
+            } else {
+              blocks.push(block)
+            }
+            return blocks
+          }),
+        })),
+
+      removeBlock: (id) =>
+        set((state) => ({
+          ...pushUndo(state, 'Remove block'),
+          config: mutateActivePageBlocks(withPages(state.config), state.activePageId, (blocks) =>
+            blocks.filter((b) => b.id !== id),
+          ),
+        })),
+
+      duplicateBlock: (id) =>
+        set((state) => {
+          const blocks = getPageBlocks(state.config, state.activePageId)
+          const idx = blocks.findIndex((b) => b.id === id)
+          if (idx === -1) return state
+          const original = blocks[idx]
+          const clone: BlockConfig = {
+            ...JSON.parse(JSON.stringify(original)),
+            id: `block-${Date.now()}`,
+          }
+          return {
+            ...pushUndo(state, 'Duplicate block'),
+            config: mutateActivePageBlocks(withPages(state.config), state.activePageId, (b) => {
+              b.splice(idx + 1, 0, clone)
+              return b
+            }),
+          }
+        }),
+
+      moveBlock: (fromIndex, toIndex) =>
+        set((state) => ({
+          ...pushUndo(state, 'Move block'),
+          config: mutateActivePageBlocks(withPages(state.config), state.activePageId, (blocks) => {
+            const [moved] = blocks.splice(fromIndex, 1)
+            blocks.splice(toIndex, 0, moved)
+            return blocks
+          }),
+        })),
+
+      addPage: (name, path) => {
+        const id = `page-${Date.now()}`
+        set((state) => ({
+          ...pushUndo(state, 'Add page'),
+          config: produce(withPages(state.config), (draft) => {
+            draft.pages!.push({ id, name, path, blocks: [] })
+          }),
+          activePageId: id,
+        }))
+        return id
+      },
+
+      removePage: (id) =>
+        set((state) => {
+          const pages = ensurePages(state.config)
+          if (pages.length <= 1) return state
+          const newPages = pages.filter((p) => p.id !== id)
+          const newActiveId = state.activePageId === id ? newPages[0].id : state.activePageId
+          return {
+            ...pushUndo(state, 'Remove page'),
+            config: { ...state.config, pages: newPages, blocks: newPages[0].blocks },
+            activePageId: newActiveId,
+          }
+        }),
+
+      renamePage: (id, name) =>
+        set((state) => ({
+          config: produce(withPages(state.config), (draft) => {
+            const page = draft.pages!.find((p) => p.id === id)
+            if (page) page.name = name
+          }),
+        })),
+
+      setTheme: (theme) =>
+        set((state) => ({
+          ...pushUndo(state, 'Change theme'),
+          config: { ...state.config, theme },
+        })),
+
+      updateTheme: (partial) =>
+        set((state) => ({
+          ...pushUndo(state, 'Update theme'),
+          config: { ...state.config, theme: { ...state.config.theme, ...partial } },
+        })),
+
+      previewTheme: (partial) =>
+        set((state) => ({
+          config: { ...state.config, theme: { ...state.config.theme, ...partial } },
+        })),
+
+      undo: () =>
+        set((state) => {
+          if (state.undoStack.length === 0) return state
+          const prev = state.undoStack[state.undoStack.length - 1]
+          const snap = snapshot(state)
+          return {
+            undoStack: state.undoStack.slice(0, -1),
+            redoStack: [...state.redoStack, { ...snap, label: prev.label, timestamp: Date.now() }],
+            config: { ...state.config, pages: prev.pages, blocks: prev.blocks, theme: prev.theme },
+          }
+        }),
+
+      redo: () =>
+        set((state) => {
+          if (state.redoStack.length === 0) return state
+          const next = state.redoStack[state.redoStack.length - 1]
+          const snap = snapshot(state)
+          return {
+            redoStack: state.redoStack.slice(0, -1),
+            undoStack: [...state.undoStack, { ...snap, label: next.label, timestamp: Date.now() }],
+            config: { ...state.config, pages: next.pages, blocks: next.blocks, theme: next.theme },
+          }
+        }),
+
+      canUndo: () => get().undoStack.length > 0,
+      canRedo: () => get().redoStack.length > 0,
+    }),
+    {
+      name: 'openpage-config',
+      version: 2,
+      partialize: (state) => ({ config: state.config, activePageId: state.activePageId }),
+      migrate: (persisted, version) => {
+        const data = persisted as Record<string, unknown>
+        if (version === 0 || version === 1 || version === undefined) {
+          // v0/v1 -> v2: wrap blocks[] into pages[]
+          const config = data.config as SiteConfig | undefined
+          if (config && !config.pages) {
+            config.pages = [{ id: 'page-home', name: 'Home', path: '/', blocks: config.blocks || [] }]
+          }
+          data.activePageId = 'page-home'
+          return data
+        }
+        return data
+      },
+    }
+  )
+)

package/src/store/editorStore.ts

@@ -0,0 +1,50 @@
+import { create } from 'zustand'
+
+export type Viewport = 'desktop' | 'tablet' | 'mobile'
+
+interface EditorState {
+  selectedBlockId: string | null
+  viewport: Viewport
+  jsonDrawerOpen: boolean
+  historyOpen: boolean
+  shortcutsModalOpen: boolean
+  previewMode: boolean
+  activeProjectId: string | null
+  // Generation state
+  isGenerating: boolean
+  generationPrompt: string | null
+  generationError: string | null
+  selectBlock: (id: string | null) => void
+  setViewport: (vp: Viewport) => void
+  toggleJsonDrawer: () => void
+  toggleHistory: () => void
+  toggleShortcutsModal: () => void
+  togglePreview: () => void
+  setActiveProject: (id: string | null) => void
+  setGenerating: (prompt: string | null) => void
+  setGenerationError: (err: string | null) => void
+  clearGeneration: () => void
+}
+
+export const useEditorStore = create<EditorState>()((set) => ({
+  selectedBlockId: null,
+  viewport: 'desktop',
+  jsonDrawerOpen: false,
+  historyOpen: false,
+  shortcutsModalOpen: false,
+  previewMode: false,
+  activeProjectId: null,
+  isGenerating: false,
+  generationPrompt: null,
+  generationError: null,
+  selectBlock: (id) => set({ selectedBlockId: id }),
+  setViewport: (vp) => set({ viewport: vp }),
+  toggleJsonDrawer: () => set((s) => ({ jsonDrawerOpen: !s.jsonDrawerOpen })),
+  toggleHistory: () => set((s) => ({ historyOpen: !s.historyOpen })),
+  toggleShortcutsModal: () => set((s) => ({ shortcutsModalOpen: !s.shortcutsModalOpen })),
+  togglePreview: () => set((s) => ({ previewMode: !s.previewMode, ...(!s.previewMode ? { selectedBlockId: null } : {}) })),
+  setActiveProject: (id) => set({ activeProjectId: id }),
+  setGenerating: (prompt) => set({ isGenerating: !!prompt, generationPrompt: prompt, generationError: null }),
+  setGenerationError: (err) => set({ generationError: err }),
+  clearGeneration: () => set({ isGenerating: false, generationPrompt: null }),
+}))

package/src/styles.css

@@ -0,0 +1,210 @@
+/*
+ * @siteable/core — Tailwind v4 source stylesheet (raw, unbuilt).
+ *
+ * Ships the engine-side design tokens, animations, and utilities. Consumers MUST
+ * `@import "..."` this file from their own global stylesheet (after their own
+ * `@import "tailwindcss"`) and add `@source` entries pointing at the package's
+ * src/ directory so Tailwind v4's scanner picks up the block component classes.
+ *
+ * EXCLUDED (page-level resets, app-side concerns): `@import "tailwindcss"`,
+ * `:root { --color-accent-rgb }`, `html { font-size: 14px }`, body/scrollbar/
+ * focus-visible resets — these belong to the host app's globals.
+ *
+ * IMPORTANT: accent-rgb fallbacks (`var(--color-accent-rgb, 34, 197, 94)`)
+ * retained verbatim — host apps that omit the `:root` override still get the
+ * default Siteable green via the fallback channel.
+ */
+
+@theme {
+  /* Background layers */
+  --color-bg-0: #09090b;
+  --color-bg-1: #0f0f12;
+  --color-bg-2: #18181b;
+  --color-bg-3: #1e1e23;
+  --color-bg-4: #27272a;
+  --color-bg-5: #303036;
+
+  /* Borders */
+  --color-border-default: #2a2a2f;
+  --color-border-subtle: #1f1f24;
+  --color-border-hover: #3a3a3f;
+
+  /* Text */
+  --color-text-0: #fafafa;
+  --color-text-1: #a1a1aa;
+  --color-text-2: #71717a;
+  --color-text-3: #52525b;
+
+  /* Accent */
+  --color-green: #22c55e;
+  --color-green-dim: #16a34a;
+  --color-green-glow: rgba(34, 197, 94, 0.12);
+  --color-green-glow2: rgba(34, 197, 94, 0.06);
+
+  /* Status */
+  --color-status-red: #ef4444;
+  --color-status-yellow: #eab308;
+  --color-status-blue: #3b82f6;
+
+  /* Radius */
+  --radius-default: 8px;
+  --radius-lg: 12px;
+
+  /* Fonts */
+  --font-sans: "DM Sans", -apple-system, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-display: "Space Grotesk", system-ui, sans-serif;
+}
+
+/* Page-level stagger reveal */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes selectPulse {
+  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3); }
+  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
+}
+
+@utility animate-fade-in-up {
+  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@utility animate-fade-in {
+  animation: fadeIn 0.3s ease-out both;
+}
+
+@utility animate-scale-in {
+  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@utility animate-shimmer {
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+@utility animate-select-pulse {
+  animation: selectPulse 0.4s ease-out;
+}
+
+@utility stagger-1 { animation-delay: 0ms; }
+@utility stagger-2 { animation-delay: 50ms; }
+@utility stagger-3 { animation-delay: 100ms; }
+@utility stagger-4 { animation-delay: 150ms; }
+@utility stagger-5 { animation-delay: 200ms; }
+@utility stagger-6 { animation-delay: 250ms; }
+@utility stagger-7 { animation-delay: 300ms; }
+@utility stagger-8 { animation-delay: 350ms; }
+
+/* Card hover lift */
+@utility card-lift {
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s;
+}
+
+@utility card-lift-hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 16px rgba(34, 197, 94, 0.06);
+  border-color: var(--color-border-hover);
+}
+
+/* Accent glow shadows - @utility so Tailwind v4 generates hover:/group-hover: variants */
+@utility accent-glow-sm {
+  box-shadow: 0 0 16px rgba(var(--color-accent-rgb, 34, 197, 94), 0.1);
+}
+@utility accent-glow-md {
+  box-shadow: 0 0 16px rgba(var(--color-accent-rgb, 34, 197, 94), 0.15);
+}
+@utility accent-glow-lg {
+  box-shadow: 0 0 20px rgba(var(--color-accent-rgb, 34, 197, 94), 0.25);
+}
+@utility accent-glow-xl {
+  box-shadow: 0 0 24px rgba(var(--color-accent-rgb, 34, 197, 94), 0.3);
+}
+@utility accent-glow-ring {
+  box-shadow: 0 0 32px rgba(var(--color-accent-rgb, 34, 197, 94), 0.1);
+}
+
+/* Scroll-reveal animation system
+   Parent gets .scroll-revealed when visible in viewport.
+   Children with .reveal-* classes animate in with staggered delays. */
+
+.reveal-fade-up,
+.reveal-scale,
+.reveal-slide-left,
+.reveal-slide-right {
+  opacity: 0;
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  transition-delay: var(--reveal-delay, 0ms);
+}
+
+.reveal-fade-up { transform: translateY(16px); }
+.reveal-scale { transform: scale(0.95); }
+.reveal-slide-left { transform: translateX(-20px); }
+.reveal-slide-right { transform: translateX(20px); }
+
+.scroll-revealed .reveal-fade-up,
+.scroll-revealed .reveal-scale,
+.scroll-revealed .reveal-slide-left,
+.scroll-revealed .reveal-slide-right {
+  opacity: 1;
+  transform: none;
+}
+
+/* Stagger delay utilities */
+@utility reveal-d1 { --reveal-delay: 0ms; }
+@utility reveal-d2 { --reveal-delay: 80ms; }
+@utility reveal-d3 { --reveal-delay: 160ms; }
+@utility reveal-d4 { --reveal-delay: 240ms; }
+@utility reveal-d5 { --reveal-delay: 320ms; }
+@utility reveal-d6 { --reveal-delay: 400ms; }
+@utility reveal-d7 { --reveal-delay: 480ms; }
+@utility reveal-d8 { --reveal-delay: 560ms; }
+
+/* Skip to content link - visible only on focus */
+.skip-to-content {
+  position: fixed;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 200;
+  padding: 8px 16px;
+  background: var(--color-green);
+  color: #000;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 0 0 8px 8px;
+  transition: top 0.2s;
+}
+.skip-to-content:focus {
+  top: 0;
+  outline: none;
+}